/* ────────────────────────────────────────────────────────────────────────── Shared site chrome. One source of truth for the masthead, reused on every page (repl, bench, floatbeat, examples grid, and the injected example mastheads). Link it as . This file owns the LOOK (band, brand, nav, font, paddings). Page LAYOUT — whether the header is in-flow, sticky, or a fixed overlay — stays per-page; add `.fixed` for the full-screen example pages that overlay a canvas. ────────────────────────────────────────────────────────────────────────── */ /* Jost (libre Futura) — bundled fallback; URL resolves relative to this file (assets/). On machines with real Futura installed the stack below renders it; Jost matches elsewhere. */ @font-face { font-family: Jost; font-style: normal; font-weight: 100 900; font-display: swap; src: url(jost.woff2) format('woff2'); } /* ── Shared design tokens. The invariants every page reuses (fonts, band, spacing). Per-page palettes (light docs vs dark playgrounds) still set their own ink/paper. ── */ :root { --font: Futura, 'Futura PT', 'Avant Garde', 'ITC Avant Garde Gothic Std', 'Century Gothic', Jost, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mast-px: 24px; /* header inset — matches the examples grid padding-x */ /* ── Themed palette — ONE set of tokens, each a light-dark(LIGHT, DARK) pair. A page opts into theming by setting data-theme on (the no-flash snippet does this from localStorage / the OS); the toggle then flips `color-scheme` (below) and every token switches at once. Pages that DON'T opt in (the full-screen example demos, the repl) keep the dark default. The landing hero pins these back to their dark values (it's a fixed dark island over the live demo). ── */ color-scheme: dark; /* light values share the repl's cassette gray — a cool washed light, not stark white */ --ink: light-dark(#1b1c1e, #f0f0f2); /* primary text */ --soft: light-dark(#464a4e, #b7b7c1); /* secondary text */ --dim: light-dark(#585b5f, #7e7e8a); /* tertiary / labels */ --mute: light-dark(#8a8d91, #50505a); /* faintest text / separators */ --paper: light-dark(#d5d8dc, #000000); /* page background — cassette gray */ --band: light-dark(#d5d8dc, #000000); /* chrome blends with the page (header has no band) */ --line: light-dark(#bbbec2, #1c1c25); /* hairline — darker than the gray so it shows (never white) */ /* ── ONE shared content column for every page (landing hero, bench, examples): content-left snapped to the 80px grid, width = cw. So the column lines up edge-to-edge as you move between pages. ── */ --U: 80px; /* major grid unit — also the rounding step for the shared inset */ --cw: 960px; /* content column width = 12 big units */ --padx: 40px; /* base side inset (a mid unit) */ --colw: calc(var(--cw) + 2 * var(--padx)); --gx-pad: var(--padx); /* grid-aligned side inset; snapped to --U just below */ } :root[data-theme="light"] { color-scheme: light; } /* explicit override; the toggle sets data-theme on */ :root[data-theme="dark"] { color-scheme: dark; } @supports (padding: round(1px, 1px)) { :root { --gx-pad: max(var(--padx), round(calc((100vw - var(--cw)) / 2), var(--U))); } } /* Cross-document View Transitions: every page links this stylesheet, so same-origin navigations (landing ↔ examples ↔ bench ↔ repl) cross-fade instead of hard-cutting. The shared masthead column makes the header look continuous across the fade. Progressive enhancement — ignored where unsupported. */ @view-transition { navigation: auto; } /* Futura (the brand face) for every title, site-wide. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font); } /* One selection highlight site-wide (else pages without their own fall back to the browser blue): ink-on-white in light, white-on-black in dark. */ ::selection { background: light-dark(#16161a, #fff); color: light-dark(#fff, #000); } /* One themed keyboard-focus ring everywhere (else links/buttons fall back to the inconsistent browser default). :where() keeps specificity at zero so a page's own focus styles still win. */ :where(a, button, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .masthead { background: transparent; color: var(--ink); flex: 0 0 auto; /* no header band — blends into the page */ display: flex; align-items: center; gap: 16px; min-height: 60px; margin-top: 20px; padding: 0 var(--mast-px); /* 1 unit (80px) tall — matches the landing's hero-nav for a frictionless cross-page header */ font-family: var(--font); -webkit-user-select: none; user-select: none; } .masthead.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 200; margin-top: 0; padding-top: 20px; } .masthead .logo { display: flex; align-items: center; line-height: 0; flex: 0 0 auto; } .masthead .logo img { display: block; width: 40px; height: 40px; } /* brand: the jz.svg logo (links home) + the section label. The logo is the SVG FILE itself — never re-created in Futura text. */ .masthead .brand { display: flex; align-items: baseline; gap: .55em; flex: 0 0 auto; margin-top: -16px; } /* the label's baseline sits on the logo's bottom edge (logo lifted to it), not centered */ .masthead .brand .sub { font-size: 19px; font-weight: 400; letter-spacing: -.02em; color: var(--dim); text-decoration: none; transition: color .18s; position: relative; top: -3px; } /* lift the label so its baseline meets the JZ letters' baseline (not the logo's lower edge) */ .masthead .brand a.sub:hover { color: light-dark(#000, #fff); } .masthead .tag { font-size: 12.5px; color: var(--dim); margin-left: 16px; } .masthead nav { margin-left: auto; display: flex; align-items: center; gap: 20px; } .masthead nav a { color: var(--ink); opacity: .7; text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; transition: opacity .18s; } .masthead nav a:hover { opacity: 1; } .masthead .ver { text-transform: none; letter-spacing: .02em; opacity: .6; } .masthead .gh { display: flex; } /* ── Theme toggle — an icon-only button after the version; one sun/moon glyph that swaps via the ::before content per theme. Shared by the masthead (bench/examples) and the landing hero-nav. ── */ .theme-toggle { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; opacity: .7; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; line-height: 0; transition: opacity .18s; } .theme-toggle:hover { opacity: 1; } .theme-toggle svg { width: 17px; height: 17px; display: block; } .theme-toggle .i-sun { display: block; } /* dark theme → show the sun */ .theme-toggle .i-moon { display: none; } :root[data-theme="light"] .theme-toggle .i-sun { display: none; } :root[data-theme="light"] .theme-toggle .i-moon { display: block; } /* light theme → show the moon */ /* ─── Footer — shared on landing, bench, examples. Logo + nav columns grouped left; credit · author · ॐ inline, bottom-right. ─── */ footer { padding: clamp(48px,7vw,80px) var(--padx) 56px; background: var(--paper); } footer .fwrap { max-width: var(--cw); margin-inline: calc(var(--gx-pad) - var(--padx)) auto; display: flex; align-items: flex-start; gap: clamp(36px,4.5vw,60px); } footer .wordmark { display: inline-flex; line-height: 0; text-decoration: none; } footer .wordmark img { width: 40px; height: 40px; display: block; } footer .fcol { display: flex; flex-direction: column; gap: 2px; } footer .fcol a { text-decoration: none; color: var(--soft); font-size: 13.5px; padding: 4px 0; transition: color .16s; } footer .fcol a:hover { color: light-dark(#000, #fff); } footer .legal { margin-left: auto; align-self: flex-end; display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--dim); } /* credit · dy · ॐ inline, bottom-right */ footer .legal .credit { color: var(--mute); } /* "made with watr and jessie" — muted lead, soft links (jz's parser + assembler) */ footer .legal .by::before, footer .legal .lic::before { content: '·'; margin-right: 7px; color: var(--mute); } /* middots: credit · dy · ॐ */ footer .legal .by a { color: var(--soft); } footer .legal .by a:hover { color: light-dark(#000, #fff); } footer .legal a { color: var(--soft); text-decoration: none; } footer .legal a:hover { color: light-dark(#000, #fff); } footer .legal .om { font-size: 15px; } @media (max-width: 640px) { footer { padding-inline: 20px; } footer .fwrap { flex-wrap: wrap; gap: 18px 16px; } } /* less side padding; brand · nav · author+license stay on ONE row — legal pinned right via margin-left:auto */ @media (max-width: 520px) { .masthead { gap: 10px; } .masthead .wordmark { font-size: 15px; } .masthead nav { gap: 14px; } .masthead nav a { font-size: 11px; } .masthead .exp { display: none; } /* hide the "experimental" tag — no room on phones */ .masthead .brand .sub { display: none; } /* the section label beside the logo may drop on phones */ } /* ── Shared headline metrics — the SAME block on the landing hero and the bench strip. The six figures come from assets/headline.js (one data source); this is the one visual definition, so the two pages can never drift. Each page supplies the palette tokens (--ink / --dim / --mute). Grouped into Speed / Size via .mgroup + .mlabel. ── */ .mgroup { display: flex; flex-direction: column; gap: 12px; } .mlabel { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: .02em; color: var(--dim); } /* reuse the version chrome style — no bespoke micro-caps */ .mstats { display: flex; align-items: flex-start; gap: clamp(14px, 1.7vw, 24px); flex-wrap: wrap; } .mstats .stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: inherit; } .mstats .stat b { font-size: 32px; font-weight: 700; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; } .mstats .stat span { font-size: 11.5px; line-height: 1.35; color: var(--dim); max-width: 15ch; } .mstats .stat:hover b { color: light-dark(#000, #fff); } /* darken in light, brighten in dark — never white on the gray */