/* ═══════════════════════════════════════════════════════════════════════════ CORVEXAL.COM — THE STYLESHEET W1 Static CSS. No build step, no preprocessor, no dependency. Every colour, size, tracking, duration and easing below the :root block is a custom property. There is no raw hex, no raw ms and no raw cubic-bezier past the token block, and gate.sh proves that rather than trusting it. THE SCALE IS MEASURED. THE FACE IS NOT. The proportions came out of getComputedStyle on references/WebsiteTemplatesFramer/08-vantara-hub.html at 1440x900. That template sets Cormorant Garamond. We set Fraunces. The measurement is of the geometry; the face carries the brand and is ours. ═══════════════════════════════════════════════════════════════════════════ */ /* ── THE FACES ───────────────────────────────────────────────────────────── Self-hosted, same origin, no third-party request of any kind. The OFL requires the licence to travel with the font, so fonts/OFL-*.txt ship alongside the woff2 and are not decoration. MEASURED: the Fraunces file on disk carries a 400-700 weight axis. 700 is the maximum; 800 and 900 render identically to 700 and are therefore never written. The DM Sans file carries the same 400-700 axis, which matters for exactly one declaration and is flagged where it lands. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-normal-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/fraunces-normal-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dm-sans-normal-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dm-sans-normal-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ═══ THE TOKENS ═══════════════════════════════════════════════════════════ Everything the site is allowed to say, said once. Below this block the stylesheet may only refer; it may not invent. */ :root { /* ── GROUND AND INK ───────────────────────────────────────────────────── Vantara's ground is not white. MEASURED: body background-color resolved to rgb(247, 244, 237). Pure white is a lightbox; this is a sheet, and the cards placed on it are the pure white, which is what makes them read as PLACED ON the page rather than cut out of it. */ --ground: #F7F4ED; --card: #FFFFFF; --ticket-shadow: rgba(69, 59, 51, 0.22); --ink: #121820; /* MEASURED, 281 text uses in the reference */ --ink-deep: #17251E; /* MEASURED, 25 text uses — the green-black */ --muted: #5F6670; /* MEASURED, 22 text uses */ --bronze: #B68A5E; /* MEASURED, 17 text uses + every metal fill */ --rule: rgba(182, 138, 94, 0.30); /* MEASURED, the hairline */ /* MEASURED, and this is a defect in the palette as specified rather than a preference: --bronze as TEXT on --ground is 2.82:1. That fails AA for normal text (4.5) and fails even the large-text floor (3.0), so it fails at 13px AND at 64px. This is the same problem EMBER already solved for its own amber with --ember-text at foundation.css:221. So: --bronze stays exactly as measured and is used for FILLS, hairlines and anything decorative. --bronze-text is the same hue darkened until it passes, 5.03:1, and it is the only bronze allowed to carry a word. */ --bronze-text: #8A6034; /* EMBER's one warm value. foundation.css:218. It is not a second accent and it is not interchangeable with bronze. Its budget is three uses on the entire site and gate.sh counts them. */ --amber: #E8A87C; --amber-glow: rgba(232, 168, 124, 0.14); /* ── SURFACES ─────────────────────────────────────────────────────────── MEASURED off the reference: the glass fills are 0.40 for the pill and the tertiary action, 0.72 for the card. */ --glass: rgba(255, 255, 255, 0.40); --card-glass: rgba(255, 255, 255, 0.72); --edge: rgba(18, 24, 32, 0.08); --ambient: rgba(0, 0, 0, 0.15); --bloom: rgba(255, 255, 255, 0.72); /* That inset white highlight is not decoration. It is a 2px bloom on the inner top edge and it is the reason the surface reads as lit glass rather than a grey rectangle. MEASURED on 15 elements in the reference, identical in every one. Do not drop it, soften it, or move it. */ --shadow-card: var(--ambient) 0 24px 50px -20px, var(--bloom) 0 2px 20px 0 inset; --blur-nav: 8px; /* MEASURED */ --blur-btn: 9px; /* MEASURED */ --blur-card: 18px; /* MEASURED */ /* ── THE FACES ────────────────────────────────────────────────────────── Fallbacks are named rather than left to the UA, because a swap to a default serif at 86px is a visibly different page and font-display is swap by design. */ --face-display: 'Fraunces', Georgia, 'Times New Roman', serif; --face-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* ── THE SCALE, MEASURED AT 1440x900 ──────────────────────────────────── Tracking is a function of size, not a brand value: -2.5px at 86px is -0.029em, and the same -2.5px at 32px would be a disaster. That is why there are six tracking values here and why letter-spacing is never set on a parent. */ --size-h1: 86px; --lh-h1: 86px; --ls-h1: -2.5px; --size-h2: 70px; --lh-h2: 73.5px; --ls-h2: -1.5px; --size-num: 64px; --lh-num: 67.2px; --ls-num: -1.5px; --size-h3: 32px; --lh-h3: 36.8px; --ls-h3: -0.5px; --size-h4: 28px; --lh-h4: 32.2px; --ls-h4: -0.3px; --size-lead: 30px; --lh-lead: 42px; --size-body: 20px; --lh-body: 32px; --size-small: 15px; --lh-small: 24px; --size-eyebrow: 13px; --lh-eyebrow: 13px; --ls-eyebrow: 1.6px; --size-label: 15px; --lh-label: 15px; --ls-label: 0.2px; --w-display: 700; /* the axis maximum. 800 and 900 do not exist. */ --w-mid: 600; --w-label: 500; --w-body: 400; --w-lead: 300; /* see the note at .lead — the axis floor is 400 */ /* ── MEASURE ──────────────────────────────────────────────────────────── Column widths in ch, so they follow the face rather than the viewport. */ --measure-body: 62ch; --measure-h1: 20ch; --measure-sub: 44ch; --measure-lead: 34ch; /* ── STRUCTURE ────────────────────────────────────────────────────────── 64px is Vantara's measured section padding. 1280px is the measured width of its pill, and the content column is set to match so the two share one edge at every width. */ --band-pad-y: 64px; --band-pad-x: 64px; --col-max: 1280px; --nav-h: 66px; --nav-top: 10px; --nav-gutter: 20px; --radius-pill: 80px; --radius-btn: 100px; /* THE PLATE — Vantara's scrim, measured off 08-vantara-hub.html. The alphas are the reference's; the cream they are mixed into is ours. */ /* THE ACTION BAR, ported from landing.css. These five are index.html's measured values and they are named here so the port is checkable and so the two implementations cannot drift apart silently. */ --act-open: 400ms; --act-row: 300ms; --act-swap: 200ms; --act-quick: 160ms; --act-lift: 20px; --act-ease: cubic-bezier(.44, 0, .56, 1); --plate-92: rgba(247, 244, 237, 0.92); --plate-55: rgba(247, 244, 237, 0.55); --plate-0: rgba(247, 244, 237, 0); --plate-none: rgba(0, 0, 0, 0); --plate-pad-y: 112px; --plate-measure: 30rem; --plate-wide: 44rem; --radius-card: 24px; --radius-tile: 16px; /* tiles under 260px wide */ --btn-h: 46px; --btn-pad: 14px 28px; --gap-btn: 8px; --gap-card: 12px; --pad-card: 24px; --tap-min: 44px; --hair: 1px; --focus-w: 2px; --focus-off: 3px; --nudge: 2px; /* the arrow's travel on hover */ --dot: 6px; --glow: 380px; --glyph: 18px; /* ── MOTION, MEASURED ─────────────────────────────────────────────────── MEASURED in the reference: cubic-bezier(0.44, 0, 0.56, 1) at 0.2s on colour, 9 uses; cubic-bezier(0.2, 0, 0, 1) at 0.1s on transform, 1 use; 0.4s on opacity. Soft carries colour, background and shadow. Snap carries transform. There is no third easing. */ --ease-soft: cubic-bezier(0.44, 0, 0.56, 1); --ease-snap: cubic-bezier(0.2, 0, 0, 1); --dur-quick: 100ms; --dur-base: 200ms; --dur-slow: 400ms; --dur-instant: 1ms; /* ── W3 ───────────────────────────────────────────────────────────────── An INK hairline, for the bands that carry amber. --rule is bronze at 30% and may not share a viewport with amber, so the warm/cold split and the action band rule themselves in ink instead. Same weight, same job, a colour that is allowed to be there. */ --rule-ink: rgba(18, 24, 32, 0.12); --field-edge: rgba(18, 24, 32, 0.18); --amber-wash: rgba(232, 168, 124, 0.10); --orbit-r: 240px; /* MEASURED off C07: hub 180, satellites 100 */ --orbit-hub: 180px; --orbit-sat: 100px; /* ── THE TERMINAL ─────────────────────────────────────────────────────── MEASURED off references/WebsiteComponents/C03-code-renderer.html at 1440x900. This is GitHub Dark, value for value: panel rgb(13,17,23) · 1px rgb(48,54,61) · radius 10px shadow rgba(0,0,0,0.18) 0 4px 32px 0 page rgb(12,17,23) type Fira Code 12.5 / 20.625 (a 1.65 ratio) gutter rgb(72,79,88) at 11 / 18.15 lights 11px · rgb(255,95,86) rgb(255,189,46) rgb(39,201,63) copy 47x20 · bg rgb(33,38,45) · rgb(139,148,158) · radius 5 THE TERMINAL IS DARK ON A PAPER PAGE, DELIBERATELY. A terminal is dark everywhere else a developer has ever seen one, and re-skinning it to cream would make the one surface on this site that shows real code the only one that looks unfamiliar. The rest of the museum stays on the sheet. Fira Code is not on this machine and is not fetched — no third-party request is made from any page. The stack below is the system monospace on each platform, at the reference's measured size and ratio. */ /* ── THE PLATE ────────────────────────────────────────────────────────── THESE WERE GITHUB DARK. The panel was #0D1117 sitting beside the .note cards, which are rgba(255,255,255,0.72) + blur(18px) — two registers on one row, and THE-TEARDOWN 3.2 is right that the page argues with itself. MEASURED, references/pure-css-glassmorphism-liquid-glass-ui-kit, light mode, its largest .glass surface: background rgba(255, 255, 255, 0.62) backdrop-filter blur(18px) --blur-md border 1px rgba(15, 23, 42, 0.14) border-radius 32px --radius-2xl box-shadow 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9) AND OUR .note ALREADY MEASURES blur(18px) AT radius 24px. The card family on this site is already this kit — 18px is the kit's --blur-md exactly, and 24px is its --radius-xl. So the plate is not a new treatment being introduced. It is the treatment already on the page, applied to the one element that never joined it. Where our value differs from the kit's it is because .note got there first and the family has to agree: alpha kit 0.62 ours 0.72 .note's, so the two match on a row radius kit 32px ours 24px --radius-card, the site's own scale shadow kit's ours --shadow-card, .note's The border is the one thing the kit has that .note does not, and it is kept: a plate holding CODE needs its edge stated, because the content inside it is not prose and the eye needs to know where the object stops. Hue moved from the kit's slate to our --ink at the same 0.14 alpha. */ --term-bg: var(--card-glass); --term-bar: rgba(18, 24, 32, 0.03); --term-edge: rgba(18, 24, 32, 0.14); --term-gutter: #484F58; /* THE REFERENCE'S OWN VALUE IS NOT LEGIBLE, AND SAYING SO IS THE POINT. #484F58 is GitHub Dark's gutter, measured off the C03 capture, and it is 2.28:1 on #0D1117 — a clear AA failure at 11px. It stays declared above because the Museum's claim is that these are the reference's real values and that claim has to survive inspection. But the two places it is RENDERED AS TYPE — the filename in the title bar and the line numbers — use the value below instead, at 5.07:1. A museum that reproduces an accessibility defect faithfully has chosen fidelity over the reader, and this project does not make that trade without writing down that it made it. */ --term-gutter-text: #5F6670; /* --muted 5.66:1 on the plate */ --term-name: #121820; /* --ink 17.40:1 — the filename is the subject */ --term-text: #121820; /* --ink 17.40:1 */ --term-tool: rgba(18, 24, 32, 0.06); --term-tooltxt: #5F6670; /* --muted 5.66:1 */ --term-mark: rgba(232, 168, 124, 0.10); /* --amber-wash — the lit range */ --term-shadow: rgba(0, 0, 0, 0.18); /* ── THE SYNTAX PALETTE, DERIVED FROM THIS SITE ───────────────────────── These were GitHub Dark's seven, measured off the C03 capture. A navy panel wearing VS Code's colours is somebody else's brand sitting inside ours, and on a light plate they are also unreadable: #A5D6FF is 1.51:1 over the glass. SEVEN ROLES COLLAPSE TO FOUR, and the four are separated by HUE at nearly equal lightness rather than by lightness. That is deliberate. Code set in four luminances reads as four levels of importance; code set in one luminance and four hues reads as one object with its parts named, which is what an exhibit label does. Measured spread: 31° / 163° / 215° and neutral — evenly around the wheel, and the warm/cool axis carrying keyword-vs-comment is the axis that survives red-green colour blindness. Every value is a site token or a stated derivation from one. Contrast is measured on the COMPOSITED plate — white 0.72 over the band beneath — not on the token, because the plate is translucent and the declared colour is never the rendered one: source cream sand --syn-key #8A6034 --bronze-text 5.38 5.25 --syn-str #3D6157 --ink-deep hue 6.72 6.56 --syn-com #5F6670 --muted 5.66 5.52 --syn-id #121820 --ink 17.40 16.96 The two derived values keep their source's hue exactly (150°→163° and the ink-deep family) and raise only lightness, until each clears 4.5:1 at 12.5px on both grounds the plate can sit on. */ --syn-key: #8A6034; /* --bronze-text — keywords, at-rules */ --syn-str: #3D6157; /* --ink-deep's hue — strings and tags */ --syn-com: #5F6670; /* --muted — comments */ --syn-id: #121820; /* --ink — identifiers, numbers, the code */ --syn-num: #45525F; /* --ink hue at value lightness — numbers */ --syn-fn: var(--syn-str); --syn-tag: var(--syn-str); --face-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --size-code: 12.5px; --lh-code: 20.625px; --size-gutter: 11px; --lh-gutter: 18.15px; --radius-term: 10px; /* ── THE SWAP ─────────────────────────────────────────────────────────── MEASURED off C21-before-after-slider.html: the mechanism is clip-path: inset(0 X% 0 0) on the top layer, and the handle is a ONE PIXEL white line with no knob at all. Its label pills are 8px at 0.96px tracking on rgb(245,243,236). The reference is pointer-only. The range input under ours is OUR addition, and it is not decoration: a control you can only drag is not a control. */ /* TWO MEANINGS, ONE NAME — and the dark panel hid it. --swap-line was BOTH the box the two panes sit in AND the hairline divider between them. On a dark plate both wanted to be near-white and the collision never showed. On a light plate the ground must be pale and the divider must be dark, so one token cannot serve: the divider vanished. Split. */ --swap-ground: var(--card-glass); --swap-line: rgba(18, 24, 32, 0.14); --size-tag: 10px; --ls-tag: 1.2px; /* ── THE WEB ──────────────────────────────────────────────────────────── The tree that cascades results. Built once here, reused for locations, products and contributors. */ --web-line: rgba(18, 24, 32, 0.18); --web-dur: 320ms; --reel-hold: 4200ms; /* each frame holds this long */ --reel-fade: 1400ms; /* and crosses over this slowly */ --radius-reel: 28px; --dur-blink: 1s; /* the terminal caret */ /* ── THE PARALLAX BUDGET ──────────────────────────────────────────────── Three depth planes per showcase band and no more, at these three speeds and no others. tools/parallax-budget.mjs reads these three tokens by name and fails the build if they are not exactly 0.15 / 0.30 / 0.50, so the ratio cannot drift by somebody nudging one number. The SPAN is a decision, not a measurement: 240px is the travel a plane at speed 1.0 would take across a band's whole scroll range, which puts the fastest plane at 120px end to end. The speeds are the specified ratios of it. Nothing in a data-kind="read" band gets any of this. */ --speed-1: 0.15; --speed-2: 0.30; --speed-3: 0.50; --plane-span: 240px; --ghost-size: 280px; /* ── THE LATTICE ──────────────────────────────────────────────────────── Read from here by site.js rather than written twice. A colour that lives in the stylesheet and again in a script is one name with two meanings waiting to disagree. */ --lattice-line: rgba(18, 24, 32, 0.12); --lattice-node: rgba(18, 24, 32, 0.28); /* ── THE ARRIVAL CLOCK ────────────────────────────────────────────────── On a clock, not on scroll. These run unchanged under reduced motion: a reader who asked for less motion asked for less motion, not for a worse page and not for an instant one. */ --intro-fade: 900ms; --intro-line-1: 800ms; --intro-line-2: 2000ms; --intro-sub: 5000ms; --intro-pill: 6500ms; } /* ═══ RESET ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--face-ui); font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--w-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* The page never scrolls sideways. This is a guard, not the fix — the layout is built not to need it, and gate.sh measures the real thing. */ overflow-x: hidden; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; } /* see landing.css — max-width without height:auto stretches an oversized image */ img { height: auto; } img { height: auto; display: block; } a { color: inherit; text-decoration: none; } /* Never outline: none. The ring is bronze at 2px with a 3px offset, and it is the one place bronze may appear over an amber viewport — a transient keyboard affordance is not a brand surface. Stated here so the exception is deliberate rather than an oversight. */ :focus-visible { outline: var(--focus-w) solid var(--bronze); outline-offset: var(--focus-off); border-radius: var(--focus-off); } .skip { position: absolute; left: var(--nav-gutter); top: calc(var(--nav-top) * -8); z-index: 100; background: var(--card); color: var(--ink); padding: var(--gap-card) var(--pad-card); border-radius: var(--radius-btn); box-shadow: var(--shadow-card); font-size: var(--size-small); transition: top var(--dur-quick) var(--ease-snap); } .skip:focus { top: var(--nav-top); } .vh { position: absolute; width: var(--hair); height: var(--hair); padding: 0; margin: calc(var(--hair) * -1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ═══ TYPE ═════════════════════════════════════════════════════════════════ font-optical-sizing: auto is REQUIRED, not preferred. Fraunces carries an opsz axis. MEASURED at 86px: the same string sets 1268.23px with optical sizing on and 1476.50px with it off — 14.1% narrower — which is the difference between the display cut and body type scaled up. */ .h1, .h2, .h3, .h4, .numeral { font-family: var(--face-display); font-optical-sizing: auto; color: var(--ink); text-wrap: balance; } .h1 { font-size: var(--size-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-display); max-width: var(--measure-h1); } .h2 { font-size: var(--size-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-display); } .h3 { font-size: var(--size-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-mid); } .h4 { font-size: var(--size-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--w-mid); } .numeral { font-size: var(--size-num); line-height: var(--lh-num); letter-spacing: var(--ls-num); font-weight: var(--w-display); color: var(--bronze-text); font-variant-numeric: lining-nums tabular-nums; } .eyebrow { font-family: var(--face-ui); font-size: var(--size-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); font-weight: var(--w-label); text-transform: uppercase; color: var(--bronze-text); } /* MEASURED AND FLAGGED: the DM Sans file on disk carries a 400-700 axis, so this 300 resolves to 400 — the same string sets an identical 476.64px at both weights. The declaration is kept because the design calls for 300 and because it becomes correct the day a 100-1000 axis file is dropped in. It is recorded here so nobody later reads 300 and believes they are seeing it. Editing an inactive bound is a no-op that reads as a fix. */ .lead { font-family: var(--face-ui); font-size: var(--size-lead); line-height: var(--lh-lead); font-weight: var(--w-lead); color: var(--ink); max-width: var(--measure-lead); } /* TWO BODY PARAGRAPHS IN A ROW HAD NO GAP AT ALL. .body carries no bottom margin, so a second one began on the next line and the pair read as one block — 25 places across nine pages. Four components had already solved it privately (.limit p + p, .arrival__sub p + p, and two on the landing), which is the tell that it belonged here and not in any of them. */ .body + .body { margin-top: 1em; } .body { font-family: var(--face-ui); font-size: var(--size-body); line-height: var(--lh-body); font-weight: var(--w-body); max-width: var(--measure-body); } .body--muted { color: var(--muted); } .small { font-family: var(--face-ui); font-size: var(--size-small); line-height: var(--lh-small); font-weight: var(--w-body); color: var(--muted); } .small--ink { color: var(--ink); } /* ═══ STRUCTURE ════════════════════════════════════════════════════════════ */ .band { padding: var(--band-pad-y) var(--band-pad-x); position: relative; } /* SAFE CENTRING, AND THE WORD 'safe' IS THE WHOLE FIX. A centred flex item that is TALLER than its container overflows equally in both directions — so a hero whose copy grows past 100vh does not simply run off the bottom, it also rides up past the padding box and under the fixed nav. Measured on /ember-schools: content 893px in an 860px box, the eyebrow at y=64 with the nav occupying 10-78. Fourteen pixels of the eyebrow were behind the nav, on a page whose first job is to say what year the product arrives. The safe keyword centres while the content fits and falls back to start the moment it does not. It therefore CANNOT change any page that currently fits — which is every existing use of this class — and only takes effect in the case that was broken. That is why it is preferred here over adding padding, which would move heroes that are already correct. */ .band--tall { min-height: 100vh; display: flex; align-items: safe center; /* AND THE PADDING HAS TO CLEAR THE NAV, because safe centring only guarantees that overflowing content starts at the top of the CONTENT box — and the content box began 64px down while the fixed nav ends 78px down. Measured across five tall heroes: ember and network have content that fits, so they centre and clear by 76px and 93px; the three product pages have content 733-797px against a 732px box, so they start-align and clear by MINUS fourteen. The eyebrow carrying the release year sat under the nav on all three. DERIVED FROM THE NAV TOKENS, not from the 110px I measured. --nav-h and --nav-top are what the nav is actually built from, so this tracks it; a literal would be correct today and silently wrong the first time the nav changes height. max() so the band never gets LESS than the section rhythm it would otherwise have. */ padding-top: max(var(--band-pad-y), calc(var(--nav-h) + var(--nav-top) + var(--band-pad-y) / 2)); } .col { max-width: var(--col-max); margin-inline: auto; width: 100%; } .hairline { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; } /* THE FIRST BAND MUST CLEAR THE PILL. MEASURED at 1440x900: the pill occupies 10px to 76px, and .band opens with 64px of top padding — so on every page whose first band is not 100vh, the eyebrow was rendering underneath the nav and being read as missing. The tall bands are flex-centred over a full viewport and were never affected, which is exactly why this survived the landing page and /ember. */ main > .band:first-child:not(.band--tall) { padding-top: calc(var(--nav-top) + var(--nav-h) + var(--band-pad-y)); } /* An in-page anchor must not land under the fixed pill. This is the only scroll courtesy on the page, and it changes where a jump LANDS — it never touches how fast the reader travels. */ [id] { scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + var(--nav-top)); } /* ═══ THE PILL ═════════════════════════════════════════════════════════════ ONE nav, TWO GROUNDS, IDENTICAL GEOMETRY. This is the detail that would otherwise have shipped broken. backdrop-filter blurs what is behind it, and over a flat sheet there is nothing behind it to blur — the glass pill in the reference floats over a photograph, which is the only reason its glass is visible there. Put the identical values over the sheet and the result is a white pill on a white page with a blur doing nothing, and the instinct is to "fix" CSS that is not broken. So the pill takes a solid ground over the sheet and its own shadow, and the reference's measured glass over a showcase section where there is contrast to read. ONLY THE GROUND CHANGES. The geometry — 66px tall, 80px radius, 10px 14px 10px 24px — is identical in both states, which is what keeps this one object instead of two. */ .nav { position: fixed; top: var(--nav-top); left: var(--nav-gutter); right: var(--nav-gutter); z-index: 50; max-width: var(--col-max); height: var(--nav-h); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--pad-card); padding: 10px 14px 10px 24px; border-radius: var(--radius-pill); /* AT REST — nothing behind it but the sheet */ background: var(--card); border: var(--hair) solid var(--edge); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-card); /* Exactly the two properties the ground change touches. Geometry is not transitioned, because geometry does not change. */ transition: background var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); } /* IN TRANSIT — a showcase section is under it. Set by ONE IntersectionObserver in site.js. There is no scroll listener on this page. */ .nav[data-ground="showcase"] { background: var(--glass); border-color: transparent; backdrop-filter: blur(var(--blur-nav)); -webkit-backdrop-filter: blur(var(--blur-nav)); box-shadow: none; } .nav__mark { font-family: var(--face-display); font-optical-sizing: auto; font-size: var(--size-small); line-height: var(--lh-label); letter-spacing: var(--ls-eyebrow); font-weight: var(--w-display); text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; min-height: var(--tap-min); } .nav__links { display: flex; align-items: center; gap: var(--gap-btn); } .nav__link { font-size: var(--size-small); line-height: var(--lh-label); letter-spacing: var(--ls-label); font-weight: var(--w-label); color: var(--ink); display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--gap-btn); transition: color var(--dur-base) var(--ease-soft); } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--muted); } /* ═══ THE BUTTON FAMILY ════════════════════════════════════════════════════ One class, three fills, and there is no fourth anywhere on the site. MEASURED in the reference: height 46, radius 100, padding 14/28, gap 8, backdrop-filter blur(9px), label 15/15 at weight 500 with 0.2px tracking, and an 8px arrow glyph inside an 18px box. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-btn); height: var(--btn-h); min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--btn-pad); border: 0; border-radius: var(--radius-btn); font-family: var(--face-ui); font-size: var(--size-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); font-weight: var(--w-label); cursor: pointer; white-space: nowrap; transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); } .btn__arrow { width: var(--glyph); height: var(--glyph); flex: none; display: block; /* transform only, on the snap curve, at the quick duration. Nothing else about the button moves. */ transition: transform var(--dur-quick) var(--ease-snap); } .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(var(--nudge)); } /* MEASURED: white on --bronze is 3.09:1 and fails AA for a 15px label. Ink on --bronze is 5.76:1 and passes. The FILL is the measured brand value and is untouched; only the label colour moved, and it moved because the site publishes an accessibility statement and that statement has to be true. */ .btn--primary { background: var(--bronze); color: var(--ink); } .btn--secondary { background: var(--ink); color: var(--card); } .btn--tertiary { background: var(--glass); color: var(--ink); backdrop-filter: blur(var(--blur-btn)); -webkit-backdrop-filter: blur(var(--blur-btn)); } .btn--primary:hover, .btn--secondary:hover { box-shadow: var(--shadow-card); } .btn--tertiary:hover { background: var(--card-glass); } /* ═══ THE CARD FAMILY ══════════════════════════════════════════════════════ */ .card { display: flex; flex-direction: column; gap: var(--gap-card); background: var(--card-glass); backdrop-filter: blur(var(--blur-card)); -webkit-backdrop-filter: blur(var(--blur-card)); border-radius: var(--radius-card); padding: var(--pad-card); box-shadow: var(--shadow-card); } /* 16px for tiles under 260px wide. In the reference both radii occur and width alone does not predict which — 245px tiles take 16 and 239px tiles take 24 — so this is our rule applied consistently, not a measurement. */ .card--tile { border-radius: var(--radius-tile); } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-card); } .card__foot { margin-top: auto; padding-top: var(--gap-card); } /* A card that is a link gets the lift; a card that is not, does not. */ a.card { transition: background var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); } a.card:hover { background: var(--card); } a.card:hover .btn__arrow { transform: translateX(var(--nudge)); } /* ═══ THE BANDS ════════════════════════════════════════════════════════════ */ /* §1 ARRIVAL — showcase ──────────────────────────────────────────────────── Nothing in this band but the two lines, the sub-block and the point. The reader completes the argument themselves, which is why the line works and why nothing may be added to explain it. THIS BAND CARRIES NO BRONZE, DELIBERATELY. The pill is fixed and therefore shares this viewport with the amber point, so the pill's action is ink and not bronze; and §2, the next band, carries no bronze either, so the two accents cannot meet at a scroll boundary either. The separation is structural, not a matter of care on the day. */ #arrival { overflow: hidden; } .arrival__inner { position: relative; } .arrival__sub { color: var(--muted); max-width: var(--measure-sub); margin-top: var(--pad-card); } .arrival__sub p + p { margin-top: var(--lh-body); } .arrival__figure { position: absolute; left: 0; bottom: calc(var(--band-pad-y) * -2); width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; pointer-events: none; } /* ══════ BEGIN AMBER USE 1 OF 3 — the static point in the arrival ═════════ 6px, lower-left third, with a 380px radial behind it at 0.14 alpha. It is static: no pulse, no drift, no breathing. On a white field one warm point is not a light in the distance, it is a stamp on a document — which is the literal thing this page is being asked to be this week. gate.sh requires every amber reference on the site to sit inside a marked region like this one, and requires that there are never more than three regions. The marker is not documentation; it is the mechanism. */ .arrival__glow { position: absolute; width: var(--glow); height: var(--glow); border-radius: 50%; background: radial-gradient(circle, var(--amber-glow) 0%, transparent 70%); } .arrival__point { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--amber); } /* ══════ END AMBER USE 1 OF 3 ════════════════════════════════════════════ */ /* §2 THE SENTENCE — read ─────────────────────────────────────────────────── One sentence, alone in the band, and no bronze in it. See the note in §1 for why the emptiness of this band is load-bearing. */ #sentence .col { display: flex; justify-content: center; padding-block: var(--band-pad-y); } #sentence .lead { text-align: center; max-width: var(--measure-sub); text-wrap: balance; } /* §3 THROUGH §8 ──────────────────────────────────────────────────────────── Real headings, real type, real measured columns, and no invented prose. A heading over an empty column is honest about what has been decided; two paragraphs of plausible copy would not be, and would be the first thing a reviewer recognises. The arguments arrive in their own sessions. */ .band__head { display: flex; flex-direction: column; gap: var(--pad-card); max-width: var(--measure-body); } .band__index { display: flex; align-items: baseline; gap: var(--pad-card); } /* .band__action HAD NO RULE AT ALL. ember.html has used it since the page was built and /network now uses it too — a paragraph whose only job is to hold the section action. With no rule it took the base paragraph margin, so the button sat as close to the copy above it as another line of text would. It is a sibling of __head and __index and was simply never written. Found by tools/audit-unstyled.cjs, which asks which classes the markup uses that no stylesheet defines — the only check that can see a feature whose CSS half never arrived. */ .band__action { display: flex; align-items: center; gap: var(--pad-card); flex-wrap: wrap; margin-top: var(--band-pad-y); } /* The measured column: the exact width the argument will be set to, drawn now as a hairline and a note, so the spacing is real and the copy later drops into a shape that already exists rather than one invented around it. */ .reserved { margin-top: var(--band-pad-y); max-width: var(--measure-body); border-top: var(--hair) solid var(--rule); padding-top: var(--gap-card); } .split { display: grid; grid-template-columns: 1fr var(--hair) 1fr; gap: var(--band-pad-x); margin-top: var(--band-pad-y); } .split__rule { background: var(--rule); } .split__col { display: flex; flex-direction: column; gap: var(--gap-card); } .doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad-card); margin-top: var(--band-pad-y); } .doors .card { min-height: calc(var(--glow) * 0.6); } /* §9 FOOTER — read ───────────────────────────────────────────────────────── Not decoration and not a placeholder. This is the verification surface: a legal entity, a physical address, a real address to write to that is not a form, and the three policy documents. Absence of these reads as "not a real company", which is the exact sentence this page exists to disprove. */ /* THIS ONE LINE WAS FLATTENING THE FOOTER ON EVERY PAGE THAT LOADS site.css. It was written for .foot, the previous footer, and the id outlived it: the element carrying id="footer" is now .foot2, and #footer is an ID selector, so it beat footer.css's own "padding: 92px ... 40px" no matter which sheet loaded last. MEASURED, seven pages at 1280: index 954px tall with 156px of top padding, aria 886/92, and museum, contact, about, privacy and 404 all 794/0 — the footer's first line sitting hard against its own top edge, which is what reads as clipped. Three different footers on one site. Scoped to .foot so it cannot reach .foot2. .foot ships on no page today, and the rule stays only because deleting a rule for markup that might return is a different decision from stopping it hitting the wrong box. */ .foot#footer { padding-top: 0; } .foot { border-top: var(--hair) solid var(--rule); padding-top: var(--band-pad-y); display: grid; grid-template-columns: 1fr auto; gap: var(--band-pad-x); align-items: start; } .foot__legal { display: flex; flex-direction: column; gap: var(--gap-btn); } /* The address is a real mailto and therefore a real touch target. MEASURED before this rule existed: 66.9 x 20, which is a link a thumb misses. */ .foot__legal a { display: inline-flex; align-items: center; min-height: var(--tap-min); transition: color var(--dur-base) var(--ease-soft); } .foot__legal a:hover { color: var(--bronze-text); } .foot__nav { display: flex; flex-wrap: wrap; gap: var(--pad-card); align-items: center; justify-content: flex-end; } /* min-width as well as min-height: MEASURED at 1440, "Terms" came out 42px wide against a 44px floor. The short label is the one that fails. */ .foot__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-min); min-width: var(--tap-min); color: var(--ink); font-size: var(--size-small); line-height: var(--lh-small); transition: color var(--dur-base) var(--ease-soft); } .foot__nav a:hover { color: var(--bronze-text); } .foot__base { margin-top: var(--band-pad-y); display: flex; flex-wrap: wrap; gap: var(--pad-card); justify-content: space-between; align-items: baseline; } /* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ THESE ARE DECISIONS, NOT MEASUREMENTS. The reference was measured at 1440x900 only, so every value below is ours: the desktop rules above hold the measured scale exactly, and these two breakpoints scale it so nothing overflows at 768px or 375px. Tracking is restated per size rather than inherited, for the same reason it is restated per size above. */ @media (max-width: 1023px) { :root { --size-h1: 62px; --lh-h1: 62px; --ls-h1: -1.8px; --size-h2: 50px; --lh-h2: 54px; --ls-h2: -1.1px; --size-num: 46px; --lh-num: 50px; --ls-num: -1.1px; --size-h3: 28px; --lh-h3: 33px; --ls-h3: -0.4px; --size-h4: 24px; --lh-h4: 29px; --ls-h4: -0.25px; --size-lead: 26px; --lh-lead: 38px; --size-body: 18px; --lh-body: 30px; --band-pad-y: 48px; --band-pad-x: 32px; } .split { grid-template-columns: 1fr; gap: var(--band-pad-y); } .split__rule, .split__rule-ink { height: var(--hair); } .doors { grid-template-columns: repeat(2, 1fr); } .foot { grid-template-columns: 1fr; } .foot__nav { justify-content: flex-start; } /* The background plane appears only where the column is wide enough to keep it clear of the type, and MEASURED, that is not here. 1440 ghost 1070-1353, heading text ends at 757 313px clear 768 ghost 437-721, heading text ends at 544 107px of OVERLAP 375 ghost 70-355, sits directly on the heading, unreadable A decorative plane that lands on the one thing the band is for is not a depth cue, it is a defect. The band keeps its other two planes. */ .ghost { display: none; } } @media (max-width: 640px) { :root { --size-h1: 42px; --lh-h1: 44px; --ls-h1: -1.2px; --size-h2: 36px; --lh-h2: 40px; --ls-h2: -0.8px; --size-num: 34px; --lh-num: 38px; --ls-num: -0.8px; --size-h3: 24px; --lh-h3: 29px; --ls-h3: -0.3px; --size-h4: 22px; --lh-h4: 27px; --ls-h4: -0.2px; --size-lead: 22px; --lh-lead: 32px; --size-body: 17px; --lh-body: 28px; --size-small: 14px; --lh-small: 22px; --band-pad-y: 32px; --band-pad-x: 20px; --nav-gutter: 12px; --pad-card: 16px; } .nav { padding: 10px 10px 10px 16px; } /* The links collapse rather than crowd. The wordmark and the one action survive, which is the whole job of the pill on a phone. .nav .nav__links, NOT .nav__links, AND THE EXTRA SELECTOR IS THE FIX. This element carries two class systems at once — it is the nav list AND the root of the web tree, class="nav__links web__roots". .web__roots is declared at line 1864 with display:flex and flex-wrap:wrap, nine hundred lines BELOW this rule and at the same specificity, so it won. The links never collapsed on any page that uses the web nav. Measured at 375px on corvexal-corporate: .nav__links rendered 104px wide and 156px TALL, starting at y = MINUS 34 — wrapped into a column that spilled out of the 68px pill in both directions and printed "About" straight through the page eyebrow underneath it. The rule was right and had simply never applied. */ .nav .nav__links { display: none; } .doors { grid-template-columns: 1fr; } .arrival__figure { bottom: calc(var(--band-pad-y) * -1); } .arrival__glow { width: calc(var(--glow) * 0.63); height: calc(var(--glow) * 0.63); } } /* ═══ THE DEPTH PLANES ═════════════════════════════════════════════════════ Bound to scroll POSITION, never to scroll SPEED, and driven by the browser's own view() timeline rather than by a listener. Three consequences, all of them the point: · there is no scroll listener, because nothing is listening — the compositor drives this off the main thread and it cannot jank · nothing is ever cancelled or delayed, so the reader's flick travels exactly as far as their muscle memory expects · where the timeline is not supported the planes simply do not move, which is a correct page rather than a broken one translate3d ONLY. Never top, never margin, never height. Those relayout or repaint on every frame of every scroll, and parallax-budget.mjs fails the build on any of them. */ @keyframes plane { from { transform: translate3d(0, var(--plane-travel), 0); } to { transform: translate3d(0, calc(var(--plane-travel) * -1), 0); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { [data-plane] { animation-name: plane; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: entry 0% exit 100%; will-change: transform; } [data-plane="1"] { --plane-travel: calc(var(--plane-span) * var(--speed-1) / 2); } [data-plane="2"] { --plane-travel: calc(var(--plane-span) * var(--speed-2) / 2); } [data-plane="3"] { --plane-travel: calc(var(--plane-span) * var(--speed-3) / 2); } } } /* Plane 1 in each showcase band: the section's own number, very large and very faint, sitting behind the type. Decorative and aria-hidden — the real numeral is in the index row and is read once, not twice. */ .ghost { position: absolute; right: 0; top: 0; font-family: var(--face-display); font-optical-sizing: auto; font-size: var(--ghost-size); line-height: 1; font-weight: var(--w-display); letter-spacing: var(--ls-h1); color: var(--rule); pointer-events: none; user-select: none; z-index: 0; } .band--tall .col { position: relative; } .band--tall .band__index, .band--tall .band__head, .band--tall .reserved { position: relative; z-index: 1; } /* ═══ THE LATTICE ══════════════════════════════════════════════════════════ One canvas, transparent, with the sheet showing through it. It sits at the back of the arrival; the type and the amber point are above it and are not part of it. */ .lattice { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } #arrival .col { position: relative; z-index: 1; } /* ═══ THE ARRIVAL CLOCK ════════════════════════════════════════════════════ 0.0s the lattice draws, no type 0.8s line 1 fades in over 900ms 2.0s line 2 5.0s the sub-block 6.5s the pill fill-mode: both is what holds each element at opacity 0 through its own delay. It also means that if this rule is ever removed without removing the attribute, the element stays visible rather than disappearing. */ @keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } } [data-line] { animation-name: intro-fade; animation-duration: var(--intro-fade); animation-timing-function: var(--ease-soft); animation-fill-mode: both; } [data-line="1"] { animation-delay: var(--intro-line-1); } [data-line="2"] { animation-delay: var(--intro-line-2); } [data-line="3"] { animation-delay: var(--intro-sub); } [data-line="4"] { animation-delay: var(--intro-pill); } .arrival__line { display: block; } /* An escape hatch, and it is an accessibility fix rather than a nicety. The pill is at opacity 0 for the first six and a half seconds while remaining in the tab order, so a reader who tabs immediately would be moving an invisible focus ring around an invisible nav. Any real input before the clock finishes completes it at once. */ .intro-done [data-line] { animation: none; opacity: 1; } /* ═══ REDUCED MOTION ═══════════════════════════════════════════════════════ Scoped deliberately, and NOT a blanket animation kill. The depth planes are already inside a no-preference query above, and the lattice checks the same query in script and draws a single static frame. The arrival's type timeline is deliberately NOT reset here: the brief is explicit that it runs unchanged, same steps, same durations. A blanket `animation-duration: 1ms !important` would have silently deleted it, and the page would have looked correct to anyone not testing with the preference on. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: var(--dur-instant) !important; scroll-behavior: auto !important; } } /* ═══════════════════════════════════════════════════════════════════════════ W3 — THE OTHER FIVE PAGES ═══════════════════════════════════════════════════════════════════════════ */ /* Every page carries a static list of the six pages for readers with scripting off, because the pill is rendered by script. It is hidden the moment the stylesheet loads for everyone else —