/* * THE FACES. Nothing above this file in the cascade may declare a family that is not served here. * * ── THE DEFECT THIS FILE CLOSES ────────────────────────────────────────────────────────────── * * `tokens.css` has named Inter, Archivo and IBM Plex Mono since the site was drawn. The built * stylesheet contained ZERO `@font-face` rules and ZERO `url(` references, so not one byte of any * of them was ever requested. Measured on the served asset: * * $ curl -s https://minirestaurants.online/assets/styles.css | grep -c '@font-face' -> 0 * $ curl -s https://minirestaurants.online/assets/styles.css | grep -c 'url(' -> 0 * * The families still RESOLVED — for the fraction of visitors with Inter or Archivo installed * locally, which on a restaurant owner's phone is approximately none. Everyone else silently got * `system-ui`. The typography was therefore a description of a design rather than the design, and * nothing failed: no 404, no console error, no gate. A stack whose first entry never loads reads * exactly like a stack that has no first entry. * * ── SELF-HOSTED, AND WHY THERE IS NO PACKAGE HERE ──────────────────────────────────────────── * * An external font CDN is the wrong answer for this property regardless of host: a third-party * request on every page, for a site whose entire pitch is that it does not depend on someone * else's uptime. The `.woff2` files are committed under `public/fonts/` and copied verbatim by * `build.mjs`'s `copyDir`, so they are served by whichever path is live — the Cloudflare Pages * direct upload the site answers from today, or the `deploy/nginx.conf` image. * * ON CONTENT-TYPE, and the part of it that is NOT measured. `serve.mjs` — the dev server the * browser tests read — answered `application/octet-stream` for these four files and now answers * `font/woff2`; that one IS measured (`curl -w '%{content_type}'`, and the four faces load in * Chrome from it). What is NOT measured here is the response the `nginx:1.27-alpine` image sends: * stock `mime.types` is expected to carry `font/woff2`, no rule was added on that expectation, and * no Docker daemon exists on this machine to check it. If that image ever becomes the live path, * run `docker run --rm nginx:1.27-alpine grep woff /etc/nginx/mime.types` before trusting this * paragraph. It would not break rendering either way — browsers sniff woff2 from its signature and * ignore the declared type for `@font-face` — which is exactly why it would go unnoticed. * * They are NOT an npm dependency, deliberately: `build.mjs` is zero-dependency and this package is * not a pnpm workspace member, which is the property that keeps a copy edit here from re-running * the Rust, iOS and Android lanes. Adding `@fontsource/*` to a manifest would spend that. * * PROVENANCE — the files were extracted from these published tarballs and copied unmodified: * * inter-latin-variable.woff2 @fontsource-variable/inter 5.3.0 * files/inter-latin-wght-normal.woff2 48,256 bytes * sha256 3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62 * archivo-latin-variable.woff2 @fontsource-variable/archivo 5.3.0 * files/archivo-latin-wdth-normal.woff2 90,104 bytes * sha256 e3a28eade21a900c7155a247757f4b2834c07bb7ef07ad7efa55cebaac1e8f5e * ibm-plex-mono-latin-400.woff2 @fontsource/ibm-plex-mono 5.3.0 * files/ibm-plex-mono-latin-400-normal.woff2 14,708 bytes * sha256 08949f728dc52d528e69b1667d15c89a5686a4ee9a296ff90983985f99c380f7 * ibm-plex-mono-latin-600.woff2 @fontsource/ibm-plex-mono 5.3.0 * files/ibm-plex-mono-latin-600-normal.woff2 15,620 bytes * sha256 0d1f0b8d0722224e32e9f28261bdc86c79115be73444ae5eceb73976a1bcdf83 * * All three families are SIL Open Font License 1.1. The OFL requires the licence to travel with * the files, so it does: `public/fonts/OFL-inter.txt`, `OFL-archivo.txt`, `OFL-ibm-plex-mono.txt`, * served next to the fonts they cover. Nothing here is renamed in a way the OFL reserves. * * ── WHAT IS DELIBERATELY NOT SERVED, stated rather than left to be discovered ──────────────── * * 1. LATIN ONLY. `latin-ext`, `cyrillic` and `vietnamese` subsets exist upstream and are not * shipped. The site is English and Spanish; every Spanish character (á é í ó ú ü ñ ¿ ¡) is * inside the latin range below. `unicode-range` is declared on every face, so a character * outside it falls to `system-ui` and RENDERS — it does not become a tofu box. That is a real * fallback and it is the reason the ranges are declared rather than omitted. * * 2. NO ITALICS. Grepped: the stylesheet sets `font-style: italic` nowhere, and no page markup * uses `` or ``. Shipping four more files for a style the site does not use would be * ~90 KB spent on nothing. If an italic ever lands, `font-synthesis-style` is left at its * default so the browser slants — visible, not silent. * * 3. NO "Inter Fallback" / "Archivo Fallback". Those two names sat in the token stacks and were * never defined anywhere, in any file — a metric-matched fallback that does not exist is the * same silent nothing this whole file is about. They are removed from the stacks rather than * left in place, per the brief: a family that cannot be served does not stay in the stack. * * 4. NO "Archivo Expanded" EITHER, and this one is an upgrade rather than a removal. The expanded * display face is not a separate family — it is the `wdth` axis of the one Archivo file below, * which is why the `wdth` variable subset is shipped (90 KB) rather than the `wght`-only one * (35 KB). `font-stretch: 62% 125%` on the face is what makes base.css's EXISTING * `font-stretch: expanded` on `.display-1` at >=1024px do something. Until now it did nothing, * twice over: no font, and no width axis to move. * * `font-display: swap` on every face. `--size-*` are clamped and the fallback is `system-ui`, so * the swap moves text; it does not blank it. `font-synthesis-weight: none` is already set on * `body`, which is why real 400/600 mono files ship instead of one file and a faux bold. */ /* ── Inter — body. Variable, wght 100..900. ──────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-variable.woff2") format("woff2-variations"); 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; } /* ── Archivo — display. Variable, wght 100..900 AND wdth 62%..125%. ──────────────────────────── */ @font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url("/fonts/archivo-latin-variable.woff2") format("woff2-variations"); 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; } /* ── IBM Plex Mono — data. Static, because upstream publishes no variable build. ─────────────── */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("/fonts/ibm-plex-mono-latin-400.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: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url("/fonts/ibm-plex-mono-latin-600.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; } /* * Design tokens — WEB-DESIGN-SPEC.md §3. One source, and the console (doc 17 §11) is the second * consumer, so nothing here names a page or a component. * * Direction: THE TICKET RAIL — stainless and heat. Exactly three hues: steel (dominant), paper * (neutral), ember (accent, capped at ~10% of any viewport). * * ── WHERE THESE NUMBERS COME FROM, AS OF 2026-08-23 ────────────────────────────────────────── * * The CEO ratified `MiniRestaurants-Mockups-Round2/THE-RAIL-picked.html` as the design standard * for the WHOLE site — "the characteristics of this page are what we're going to use throughout * this website." Its `:root` block (lines 5-61 of that file) is now the SOURCE OF TRUTH for the * primitives below, and where it disagreed with this file, it won: * * --steel-900 #16202b -> #16212c * --steel-800 #1b2733 -> #22303d * --ember-500 #c85107 -> #c65310 * --ember-300 #f59b45 -> #f2a24a * * ⛔ THE SEMANTIC LAYER BELOW WAS NOT REPLACED BY THE MOCKUP'S NAMES, AND THAT IS THE POINT. * 22 UI components and 5 stylesheets read `--surface-*`, `--text-*`, `--rule-*`, `--action-*`. * Porting the mockup by renaming them to `--ground` / `--ink` / `--accent` would have been a * 1,800-line diff across `components.css` and every `src/ui/*.mjs`, and every one of those edits * is a chance to repaint one component slightly wrong. Instead the mockup's names are added as * PRIMITIVES and the existing semantic names are REDEFINED in terms of them. One file changes; * the whole site repaints; zero component edits. If you are here to "finish the port" by deleting * the semantic layer, read this paragraph again — the indirection is the migration, not debt. * * ⚠️ ONE PLACE WHERE "THE WHOLE SITE REPAINTS" IS NOT TRUE, STATED HERE RATHER THAN DISCOVERED. * `.ticket-rail__card` and the `.ticket-card__*` rules in `components.css` read PRIMITIVES * (`--paper-card`, `--steel-950`, `--steel-100`, `--steel-600`) and two literal hexes, not the * semantic layer. Primitives do not move between themes, so the ticket cards stay light in dark * mode — measured on `/` at 1440px, 2026-08-23. This is PRE-EXISTING and unchanged by this pass: * the same cards stayed light for an OS-dark visitor before the toggle existed, and the diff that * introduced the toggle adds 71 lines to `components.css` and removes none. * It may also be CORRECT — those cards are a replica of the product's own OrderCard, and a real * kitchen ticket is a light card on a dark board. Whether they follow the theme or stay a product * replica is a design decision for Felicity, not a token decision, so nothing here changes them. * * Every contrast ratio in the comments below was RE-MEASURED on 2026-08-23 against the new * values, with sRGB relative luminance per WCAG 2.2. None was carried forward: adopting * `--ground: #ffffff` as the page changed every single one of them. */ :root { /* ── Ember ramp — the mockup's, verbatim ──────────────────────────────── */ --ember-900: #5e2305; --ember-800: #7d2f06; --ember-600: #a8420a; --ember-500: #c65310; --ember-400: #e4780b; --ember-300: #f2a24a; --ember-100: #fbdcc4; --ember-050: #fdf1e7; /* ── Steel ramp. 950/900/800 are the mockup's; 850/600/500/300/200/100 are this repo's and * have no counterpart there — the mockup only ever paints three steels. They are kept because * `components.css` reads them and because dropping a step from a ramp is how a mid-tone gets * invented at a call site later. */ --steel-950: #0f1720; --steel-900: #16212c; --steel-850: #1e2a37; --steel-800: #22303d; --steel-600: #4a5d71; --steel-500: #64798f; --steel-300: #c3cedaff; --steel-200: #dde4eb; --steel-100: #edf1f5; --paper-base: #f4f6f8; --paper-card: #fbfcfd; /* * ── The mockup's own primitive vocabulary ──────────────────────────────── * These are the names its ~1,800 lines of component CSS actually reference. Every band, card, * rail and button ported in steps 4-6 will ask for THESE, so they exist here from step 1 rather * than arriving one at a time inside whichever component needed one first. */ --ground: #ffffff; --ground-2: #f4f6f8; --ground-3: #e9edf1; --panel: #ffffff; --ink: #0f1720; --ink-2: #3d4a57; --ink-3: #5f6a74; --line: #dfe5ea; --line-2: #78868f; --accent: #a8420a; --accent-hi: #e4780b; --accent-ink: #ffffff; --accent-wash: #fdf1e7; /* Status. `--warn` is deliberately the accent, not a fourth hue: this palette is capped at * three, and an amber warning next to an ember brand reads as a rendering fault. */ --ok: #166534; /* 7.13:1 on --ground */ --warn: #a8420a; /* 6.09:1 on --ground */ --late: #9f1239; /* 8.02:1 on --ground */ /* Mockup radii. The repo's own `--radius-*` vocabulary is kept below — see the note there. */ --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; /* Mockup shadows, alongside `--elev-*`. Same note as the radii. */ --sh-1: 0 2px 8px rgb(15 23 32 / 6%); --sh-2: 0 10px 30px -12px rgb(15 23 32 / 18%); --sh-3: 0 32px 70px -30px rgb(15 23 32 / 42%); --grad-ember: linear-gradient(135deg, #c65310 0%, #a8420a 55%, #7d2f06 100%); --grad-steel: linear-gradient(135deg, #22303d 0%, #0f1720 100%); --grad-wash: linear-gradient(180deg, #fdf1e7 0%, rgb(253 241 231 / 0%) 100%); /* ── Semantic roles. Themes reassign these and nothing else. ────────────── * Everything from here down is expressed through the primitives above. A hex literal in this * block would be a colour no theme can move. */ --surface-page: var(--ground); --surface-raised: var(--ground-2); --surface-sunken: var(--ground-3); --surface-card: var(--panel); --surface-dark: var(--steel-950); --surface-accent-wash: var(--accent-wash); --text-primary: var(--ink); /* 18.05:1 on --ground, 16.66:1 on --ground-2 */ --text-secondary: var(--ink-2); /* 9.07:1 on --ground, 8.37:1 on --ground-2 — passes 1.4.3 */ /* * NON-TEXT ONLY, by name and by policy — but note it no longer has to be. On the old * `--paper-base` page this was #64798f at 4.15:1, under the 4.5:1 body-copy floor, which is why * the rule exists. On `--ground` it is #5f6a74 at 5.53:1 (5.10:1 on --ground-2) and WOULD pass * for body copy. The restriction is kept anyway: the token's job is icons, dividers and * disabled affordances, and the moment it carries a paragraph somewhere, the next person to * darken the page background silently breaks that paragraph. */ --text-nontext: var(--ink-3); /* 5.53:1 on --ground — still non-text only, see above */ --text-on-dark: #e8eef4; /* 15.44:1 on --steel-950 */ --text-on-dark-secondary: #9fb0c2; /* 8.13:1 on --steel-950 */ --text-accent: var(--accent); /* 6.09:1 on --ground, 5.48:1 on --accent-wash */ --rule-decorative: var(--line); /* 1.27:1 — decoration only, never a control boundary */ --rule-structural: var(--line-2); /* 3.75:1 on --ground — passes 1.4.11 at 3:1 */ --action-fill: var(--accent); /* resting fill; label reads at 6.09:1 */ /* * HOVER ONLY, and the reason has CHANGED rather than gone away. Under the old `--ember-500` * (#c85107) this measured 4.18:1 and outright failed 1.4.3 as a resting state. The mockup's * #c65310 is darker: white on it is 4.52:1, which PASSES normal text — by 0.02. A 0.02 margin * is a rounding error, not a decision, so this stays a hover value and `--action-fill` stays * the resting one. Do not promote it on the strength of that number. */ --action-fill-hover: var(--ember-500); /* 4.52:1 with --action-label — hover only */ --action-label: var(--accent-ink); /* #ffffff on --action-fill = 6.09:1 */ /* * THEME-DEPENDENT FOCUS RING. WEB-DESIGN-SPEC.md §3.2 and §9.1: a single ember ring across both * themes fails 1.4.11 in one of them (ember/400 on the light page measures 3.00:1 against white * — exactly at the floor, with nothing left for antialiasing). This variable is reassigned in * the dark block below and must never be flattened to one value. */ --focus-ring: var(--accent); /* 6.09:1 on --ground */ /* * ...AND THE SAME ARGUMENT ONE LEVEL DOWN, WHICH THE §3.2 NOTE ABOVE MISSED. * * "Both themes" is not the whole set of backgrounds. The LIGHT theme paints two of them: the * page (`--ground`) and the dark surfaces cut into it (`--surface-dark`, i.e. `--steel-950`) * — the site footer on all 47 routes, and `.section--bleed.section--dark`. `--focus-ring` above * is chosen for the first and was never measured against the second. * * Measured by Cisco on the served page via `getComputedStyle`, 2026-08-21, re-measured here * 2026-08-23 and UNCHANGED by the token port: `--accent` #a8420a on `--steel-950` #0f1720 is * **2.96:1**, under 1.4.11's 3:1 floor for a focus indicator. WCAG 2.2 AA FAIL, every published * route. On `/404` the footer IS the entire navigation, so the worst case is the page where the * ring matters most. * * The fix reuses the value the dark theme already vetted rather than minting a third ember: * `--ember-400` #e4780b on #0f1720 is **6.01:1**. Scoped to the surface, not to the theme, so it * holds in light AND dark — in dark the block below has already set this exact value globally * and this re-declaration is a no-op there. * * `.section--dark` is included with the footer because it is the SAME background painted by the * same token; excluding it would leave the identical failure waiting on the first focusable * control placed in a dark band. One selector, one defect class. */ --focus-ring-on-dark: var(--ember-400); /* 6.01:1 on --steel-950 */ /* ── Type ─────────────────────────────────────────────────────────────── */ /* * Every family named here is SERVED by `fonts.css`, which is the first file in the cascade. It * was not: these four stacks named Inter, Archivo and IBM Plex Mono against zero `@font-face` * rules, so the first entry silently resolved to `system-ui` for anyone without them installed. * * ⛔ AND IT IS SELF-HOSTED. The ratified mockup loads all three from `fonts.googleapis.com`. * That link is NOT ported and must never be: `check.mjs:284` ("every script, frame and image is * first-party") is the mechanical half of the reason, and the product's own pitch — that it does * not depend on someone else's uptime — is the other half. The `.woff2` files are committed * under `public/fonts/` with their OFL licences. * * Three names are GONE rather than left as decoration. "Inter Fallback" and "Archivo Fallback" * were never defined in any file — a metric-matched fallback that does not exist is a comment * with a comma in it. "Archivo Expanded" is not a family either: expanded is the `wdth` axis of * Archivo itself, and `.display-1`'s existing `font-stretch: expanded` reaches it now that the * face declares `font-stretch: 62% 125%`. `--font-display-expanded` is kept — base.css uses it, * and it stays as the name for "the display face, at its wide end". */ --font-display: "Archivo", system-ui, sans-serif; --font-display-expanded: "Archivo", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --size-display-1: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem); --size-display-2: clamp(2rem, 1.4rem + 3vw, 3.25rem); --size-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); --size-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); --size-h4: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); --size-lede: clamp(1.1875rem, 1.14rem + 0.19vw, 1.3125rem); --size-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem); --size-small: 0.9375rem; /* 15px floor. Nothing on this site is smaller, legal pages included. */ --size-label: 0.875rem; --size-data: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem); --size-data-lg: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); /* ── Spacing — 8pt, and nothing off the scale ─────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* * ── Radii ──────────────────────────────────────────────────────────────── * TWO vocabularies live here on purpose, and this is the one place in the file where that is * true. `--radius-*` is what the 22 shipped components ask for; `--r-*` above is what the * ratified mockup's components ask for. They are NOT aliased to each other, because they are * not the same design: the mockup rounds hard (18px cards, 28-40px bands), the shipped site * rounds at 12px. Aliasing would silently re-round all 47 pages inside a token commit, which is * a visual change nobody asked this step to make. Steps 4-6 port band by band, and each band * that moves to `--r-*` moves visibly, in its own diff. */ --radius-sm: 2px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px; /* ── Elevation. Same two-vocabulary note as the radii: `--sh-*` above is the mockup's. ─── */ --elev-1: 0 1px 2px rgb(15 23 32 / 6%), 0 2px 8px rgb(15 23 32 / 6%); --elev-2: 0 8px 24px rgb(15 23 32 / 10%); --elev-3: 0 -6px 20px rgb(15 23 32 / 12%); /* * ── Motion ─────────────────────────────────────────────────────────────── * RECONCILED with the mockup rather than replaced by it. `src/client/core/motion.js`'s * `duration()` reads these by name off the computed root style (`--dur-${token}`), and * `main.js`, `ticket-rail.js` and `timer.js` pass "slow" / "rail" / "fast" as that name. Renaming * them to the mockup's `--dur-1..4` would compile, ship, and fall back to the hardcoded second * argument at runtime — a silent 320ms-becomes-320ms coincidence today and a wrong number the * first time one of them is retuned. So the NAMES are this repo's and the VALUES are the * mockup's, and `--dur-1..4` are declared as aliases so ported component CSS reads unmodified. */ --dur-instant: 90ms; --dur-fast: 160ms; /* mockup --dur-1 .16s */ --dur-base: 240ms; /* mockup --dur-2 .24s */ --dur-slow: 340ms; /* mockup --dur-3 .34s */ --dur-rail: 520ms; /* mockup --dur-4 .52s — already identical */ --dur-1: var(--dur-fast); --dur-2: var(--dur-base); --dur-3: var(--dur-slow); --dur-4: var(--dur-rail); --stagger: 60ms; /* * Easings. The three `--ease-*` names are the repo's and are referenced 38 times across the * stylesheets and by `motion.js`'s `transition({ easing })`, so they keep their names. Their * curves are now the mockup's, which is the honest way to adopt its FEEL: * --ease-out the mockup's default cubic-bezier(.33,1,.68,1) * --ease-standard the mockup's in-out cubic-bezier(.62,.03,.36,1) * --ease-in unchanged; the mockup has no in-only curve * `--ease-pop` is the mockup's overshoot cubic-bezier(.34,1.4,.64,1) and is NEW — nothing in the * repo overshoots today. It is added here so the ported micro-interactions in step 6 do not each * invent their own bounce. `--ease-rail` aliases `--ease-out` for the same alias reason as the * durations above. */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-standard: cubic-bezier(0.62, 0.03, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-rail: var(--ease-out); --ease-inout: var(--ease-standard); /* * The template's spring, used where something should feel physical — rail dots, chips, taps. * Blueprint §11 counts NINE uses of `cubic-bezier(.34,1.4,.64,1)` across the ported CSS. It is * declared once here rather than typed nine times; `--ease-pop` above is the identical curve * under the repo's own name, and this is its template alias so ported CSS reads unmodified. */ --ease-spring: var(--ease-pop); /* ── Layout ───────────────────────────────────────────────────────────── */ --container-md: 720px; --container-lg: 960px; --container-xl: 1160px; --container-2xl: 1240px; --gutter: var(--space-4); /* * ⛔ ONE HEADER NAME, DEFINED ONCE, AND `--hdrh` IS THE ONE. `--header-height` is now an ALIAS * rather than a second opinion. * * Both names shipped, both meant "the height of the site header", and only `--hdrh` was ever * connected to reality — `shell.js` overwrites it with the header's real `offsetHeight`, which * on a wrapped header at 390px is 71px, not the 64px literal that sat here. So every rule * reading `--header-height` was anchoring to a number 7px short at 390 and 8px long at 1024, * forever, and no test could see it because both values are plausible. * * That was not theoretical. `.stopsec` was declared TWICE in `components.css` with the two * different names, the later block won on source order, and the earlier block's mobile * allowance never applied to anything. The memo at `components.css:4588` had recorded the * hazard and deferred it as out of scope; this is the pass that was deferred to. * * Aliasing rather than deleting: `--header-height` is read by `.hdr`'s own `min-height` and by * the legal-page table of contents, and renaming those is churn that changes no pixel. The * alias makes the two names ONE number; it does not pretend one of them is gone. */ --header-height: var(--hdrh); /* * ── THE SHELL TOKENS THE TEMPLATE DEPENDS ON, AND WHY THEIR ABSENCE WAS THE 772px BUG ─────── * * Felicity's blueprint §11 measured six names the template's layout reads and this file did not * define. Four of them are the bleed system, and the bleed system never being ported is the * mechanism behind the defect the CEO saw: every band fell back inside a reading container, so * the hero spanned 143→1295px at 1440 while every text band below it was boxed at 341→897px. * The right half of the desktop was empty. That is not a styling miss; it is a layout system * that was two-thirds absent. * * ⚠️ FOUR OF THESE ARE SET BY JAVASCRIPT, and the fallbacks here are what a no-JS visitor gets. * `src/client/widgets/shell.js` measures them (`THE-RAIL-picked.html:1596-1614`). The fallbacks * are deliberately CONSERVATIVE: `--bleed-l/-r` default to 0, so with JS off a band sits inside * its column rather than bleeding to a viewport edge it cannot measure. A wrong bleed is a * horizontal scrollbar; a missing bleed is a narrower band. Only one of those is a defect. * * ⛔ `calc(50% - 50vw)` IS BANNED INSIDE `.railcol`, and the template records why at L828-831: * the content column is offset by the rail, so that expression overshoots by the rail's width * and pushed the document 125px wider than the viewport — measured at 1440px. The template * shipped the fix; port the fix, not the bug. */ --hdrh: 64px; /* header height. Overwritten by shell.js from the real offsetHeight. */ /* * ⛔ `--pinoff` IS THE ANCHOR OFFSET FOR THE WHOLE SITE, AND ITS FALLBACK IS NOT A HEADER. * * It means "everything pinned above the content": the header, PLUS the rail while the rail is * lying down under it (≤1040px). `shell.js` writes the real sum. Above 1041 the rail is a * column beside the content and pins nothing, so `--pinoff` and `--hdrh` are the same number * there — which is why anchor offsets can read `--pinoff` unconditionally and still leave the * desktop untouched, with no media query and no second rule to keep in sync. * * ⚠️ THE `64px` FALLBACK THAT USED TO SIT HERE WAS A HEADER, AND IT MADE THE TOKEN A LIE WITH * JAVASCRIPT OFF. The mobile fallback below is MEASURED, not guessed: at 390px the lying-down * rail renders 186px tall (banner row + the horizontal stop strip, two-line stops), so 190px is * that measurement with 4px of slack. Overshooting lands a band slightly low; undershooting * hides the heading the visitor just asked for. Only one of those is a defect, so the no-JS * branch takes the other one — the same reasoning `--bleed-l/-r` use above. */ --pinoff: var(--hdrh); /* header + the lying-down rail, for pinned stages. shell.js. */ --bleed-l: 0px; /* measured distance from the content column's left edge to the viewport. */ --bleed-r: 0px; /* measured distance from its right edge to the viewport. */ --railw: 206px; /* the rail column's track width, `THE-RAIL-picked.html:364`. */ /* * THE TYPE FLOOR, 15px. The template's own micro-type is below it in five places — `.stop__t` * at .66rem, `.rail__foot` at .58rem, `.chip__k` at .6rem, `.fig__k` and `.bar__l` at .58rem. * A 9px navigation label is not a style. Every ported label is rebuilt at this value, which is * the one place this port deliberately does not match the mockup pixel for pixel. */ --size-floor: 0.9375rem; } @media (min-width: 768px) { :root { --gutter: var(--space-8); } } /* * ⚠️ THE RAIL'S OWN HEIGHT, FOR THE NO-JAVASCRIPT CASE ONLY. `shell.js` sets `--pinoff` as an * inline style on `documentElement`, and an inline style beats every rule in every stylesheet * including this one — so with JavaScript on, this block is inert and the real measurement wins. */ @media (max-width: 1040px) { :root { --pinoff: calc(var(--hdrh) + 190px); } } @media (min-width: 1024px) { :root { --gutter: var(--space-10); /* * ⚠️ THIS USED TO SET `--header-height: 72px` AND IT NOW SETS `--hdrh`, WHICH IS THE SAME * DECISION MOVED TO THE NAME THAT SURVIVED THE ALIAS ABOVE. Setting the alias here would * break the aliasing — `--header-height` would stop resolving to the measured value at * exactly the widths where the header is tallest. */ --hdrh: 72px; } } @media (min-width: 1280px) { :root { --gutter: var(--space-12); } } /* * ── DARK THEME — EXPLICIT OPT-IN ONLY. CEO RULING 2026-08-22. ──────────────────────────────── * * This block used to be `@media (prefers-color-scheme: dark)`. It is not any more, and the * REASONING THAT PUT IT THERE IS NOT BEING DELETED, because it was not wrong: WEB-DESIGN-SPEC.md * §3.2 says unrequested permanent dark mode is a banned default, and honouring the OS preference * was the argument for why this site's dark was not "unrequested". The product itself ships dark * because kitchens are dim, so honouring the preference read as consistency rather than * decoration. That argument still stands on its own terms. * * The CEO overruled it on 2026-08-22: **LIGHT IS THE DEFAULT, dark only behind the explicit * toggle.** A visitor whose operating system is set to dark now gets the LIGHT page on first * visit. The ban the old comment cites is still real and is now satisfied a different way — * light-default plus an explicit, persisted opt-in is a stricter reading of "unrequested", not a * looser one, since previously an OS setting the visitor made for their email client decided what * this website looked like. * * ⚠️ THIS REPAINTS EVERY PAGE FOR OS-DARK VISITORS. It is a site-wide visual diff, it is correct, * and it is deliberately landed in this commit alone rather than buried inside a homepage change. * * Do not re-add the media query without a new ruling from the CEO. NOTHING that ships reads * `prefers-color-scheme` for colour any more — not this file, not `src/client/widgets/theme.js`, * which carries the reasoning for the strict reading: a visitor with no stored choice gets light, * whatever their operating system says. Measured on the served page 2026-08-23, a browser context * with `colorScheme: "dark"` renders `data-theme=null`, `body background rgb(255, 255, 255)`. * `prefers-reduced-motion` is a different query and is untouched. * * Every ratio below re-measured 2026-08-23. */ :root[data-theme="dark"] { --ground: #0f1720; --ground-2: #16212c; --ground-3: #22303d; --panel: #16212c; --ink: #eef3f7; --ink-2: #b6c4cf; --ink-3: #8b9aa6; --line: #2b3945; --line-2: #6b7a87; --accent: #e4780b; --accent-hi: #f2a24a; --accent-ink: #0f1720; --accent-wash: #2a1a0d; --ok: #4ade80; /* 10.36:1 on --ground */ --warn: #f2a24a; /* 8.63:1 on --ground */ --late: #fb7185; /* 6.70:1 on --ground */ --sh-1: 0 2px 8px rgb(0 0 0 / 40%); --sh-2: 0 10px 30px -12px rgb(0 0 0 / 60%); --sh-3: 0 32px 70px -30px rgb(0 0 0 / 80%); --grad-wash: linear-gradient(180deg, #2a1a0d 0%, rgb(42 26 13 / 0%) 100%); /* The semantic layer re-derives itself from the primitives above with no further work — these * six lines are here only because `--surface-dark` must NOT follow `--ground` (a dark band cut * into a dark page is not a band) and because stating the set makes the reassignment readable. */ --surface-page: var(--ground); --surface-raised: var(--ground-2); --surface-sunken: var(--ground-3); --surface-card: var(--panel); --surface-dark: var(--steel-950); --surface-accent-wash: var(--accent-wash); --text-primary: var(--ink); /* 16.15:1 on --ground, 14.59:1 on --panel */ --text-secondary: var(--ink-2); /* 10.13:1 on --ground, 9.15:1 on --panel — passes 1.4.3 */ --text-nontext: var(--ink-3); /* 6.25:1 on --ground — non-text only, same policy as light */ --text-accent: var(--accent); /* 6.01:1 on --ground, 5.43:1 on --panel */ --rule-decorative: var(--line); /* 1.52:1 — decoration only, never a control boundary */ --rule-structural: var(--line-2); /* 4.09:1 on --ground — passes 1.4.11 at 3:1 */ --action-fill: var(--accent); --action-fill-hover: var(--accent-hi); /* * INK ON EMBER, NOT WHITE ON EMBER — 6.01:1. `--accent-ink` is #0f1720 in this block, which is * the same value as `--steel-950`; it is written through the primitive so a future palette move * cannot leave the label pointing at a steel the accent no longer sits against. White here * would measure 2.99:1 and fail 1.4.3 outright, which is the mistake this comment exists to * stop someone "fixing" their way into. */ --action-label: var(--accent-ink); --focus-ring: var(--accent); /* 6.01:1 on --ground */ --elev-1: 0 1px 0 rgb(255 255 255 / 4%) inset; --elev-2: 0 1px 0 rgb(255 255 255 / 4%) inset; --elev-3: 0 -6px 20px rgb(0 0 0 / 40%); } /* * Base: reset, type scale, layout primitives, motion policy. * WEB-DESIGN-SPEC.md §3.3 (type), §4.2 (the three layout primitives), §4.4 (vertical rhythm), * §7.4 (reduced motion). */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* 2.4.11 Focus Not Obscured: the sticky header and the sticky mobile CTA bar can both cover a * focused element, so anchored jumps and focus scrolling clear both. */ scroll-padding-top: 88px; scroll-padding-bottom: 80px; } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; font-synthesis-weight: none; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } /* ── Type scale ─────────────────────────────────────────────────────────── */ .display-1, .display-2, .h2, .h3, .h4 { font-family: var(--font-display); color: var(--text-primary); margin: 0; text-wrap: balance; } .display-1 { font-size: var(--size-display-1); font-weight: 800; line-height: 1.03; letter-spacing: -0.02em; max-width: 22ch; /* 14–22 characters per line, enforced by measure not by manual
*/ } @media (min-width: 1024px) { .display-1 { font-family: var(--font-display-expanded); font-stretch: expanded; } } .display-2 { font-size: var(--size-display-2); font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; max-width: 26ch; } .h2 { font-size: var(--size-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; max-width: 30ch; } .h3 { font-size: var(--size-h3); font-weight: 700; line-height: 1.25; max-width: 40ch; } .h4 { font-size: var(--size-h4); font-weight: 600; line-height: 1.35; } .lede { font-size: var(--size-lede); line-height: 1.55; max-width: 70ch; margin: 0; color: var(--text-secondary); } .body { font-size: var(--size-body); line-height: 1.6; max-width: 75ch; margin: 0; } .body-strong { font-weight: 600; } .small { font-size: var(--size-small); line-height: 1.5; max-width: 75ch; color: var(--text-secondary); } .label { font-size: var(--size-label); font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: var(--text-secondary); margin: 0; } /* The mono is for numbers and machine-emitted strings ONLY. If it appears in body copy that is * drift (WEB-DESIGN-SPEC.md §2). */ .data { font-family: var(--font-data); font-size: var(--size-data); line-height: 1.4; font-variant-numeric: tabular-nums; } .data-lg { font-family: var(--font-data); font-size: var(--size-data-lg); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* ── Machine-emitted strings must wrap, or they take the page off the screen ────────────────── * * MEASURED 2026-08-21, on the published subset artifact, at a 390px viewport (iPhone-class, the * width most restaurant owners will open this site at): * * /help/reading-ticket-status-without-colour 929px of content in a 390px viewport * /help/which-printers-and-connections-are-supported 868px * /help/holding-an-order-and-when-it-comes-back 868px * /help/how-a-screen-arranges-its-tickets 837px * /help/sounds-tones-and-the-repeat-alert 827px * /hardware 750px * /help/language-and-text-size-on-a-screen 449px * * Seven of the twenty-six published pages, all from one cause: `citedSources()` in * src/pages/help.mjs and the "Read from …" line in src/pages/hardware.mjs print real repository * paths, and a path like * `android/app/src/main/kotlin/online/minirestaurants/kds/audio/SoundPolicy.kt` is 74 characters * with no space in it. There was no `code` rule in this stylesheet at all, so it stayed one * unbreakable word and pushed the whole document wider than the screen. * * ⚠️ IT MUST BE `anywhere`, NOT `break-word`. They are NOT interchangeable here, and the wrong * one is a SILENT NO-OP — it looks like a fix and changes nothing. Measured on the 929px page, * changing only this value: * * overflow-wrap: normal -> scrollWidth 929px * overflow-wrap: break-word -> scrollWidth 929px <- fixes NOTHING * overflow-wrap: anywhere -> scrollWidth 390px <- fixes it * * The reason is the container. `.plain-list` is `display: grid`, so its track sizes to the item's * MIN-CONTENT width. `break-word` breaks glyphs but does NOT reduce min-content, so the track * stays as wide as the longest unbroken path and the page still overflows. `anywhere` does reduce * min-content, so the track can shrink. Anyone "simplifying" this to `break-word` reintroduces all * seven pages while the CSS still reads as correct. * * Deliberately NOT `word-break: break-all`: that breaks ordinary words too, and `/hardware` * renders `` INSIDE a sentence ("Read from …"), where break-all would shred the prose around * it. `overflow-wrap: anywhere` breaks a word only when it cannot otherwise fit. * * This rule sets WRAPPING ONLY. `` still has no typography of its own — it renders in the * browser's default monospace rather than `--font-data`. That is a separate design question and is * flagged for Felicity rather than decided here. */ code { overflow-wrap: anywhere; } /* Vertical rhythm inside a flow of blocks. Intra-group gap is always strictly smaller than * inter-group gap (§3.4 grouping rule). */ .stack > * + * { margin-top: var(--space-4); } .stack-tight > * + * { margin-top: var(--space-3); } .stack-loose > * + * { margin-top: var(--space-8); } .stack-block > * + * { margin-top: var(--space-12); } /* ── Layout primitives (§4.2) ───────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { .container { max-width: calc(var(--container-md) + 2 * var(--gutter)); } } @media (min-width: 1024px) { .container { max-width: calc(var(--container-lg) + 2 * var(--gutter)); } } @media (min-width: 1280px) { .container { max-width: calc(var(--container-xl) + 2 * var(--gutter)); } } @media (min-width: 1536px) { .container { max-width: calc(var(--container-2xl) + 2 * var(--gutter)); } } /* * A. Inset column — content in columns 1–8 of 12, right margin deliberately empty, left-aligned. * Never centred. */ .section--inset .section__body { max-width: 68ch; } @media (min-width: 1024px) { .section--inset .section__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); } .section--inset .section__label { grid-column: 1 / span 2; } .section--inset .section__body { grid-column: 3 / span 6; } /* A hung label needs its own column; without one the body takes the inset span itself. */ .section--inset .section__inner:not(:has(.section__label)) .section__body { grid-column: 1 / span 8; } } /* B. Full-bleed instrument — a table breaking the container to the viewport edge. */ .section--bleed { background: var(--surface-raised); } .section--bleed.section--dark { background: var(--surface-dark); color: var(--text-on-dark); /* W2 / SC 1.4.11. This band repaints the background out from under the page-level focus ring, * so it re-points the token at the value measured against the background it actually paints. * See the --focus-ring-on-dark note in tokens.css for the two ratios. */ --focus-ring: var(--focus-ring-on-dark); } .section--dark .display-1, .section--dark .display-2, .section--dark .h2, .section--dark .h3, .section--dark .h4 { color: var(--text-on-dark); } .section--dark .lede, .section--dark .small, .section--dark .label { color: var(--text-on-dark-secondary); } /* C. The rail — see components.css. */ /* Vertical rhythm MUST vary (§4.4). These are the only section paddings on the site. */ .section { padding-block: var(--space-16); } .section--rhythm-hero { padding-block: var(--space-12) var(--space-16); } .section--rhythm-argument { padding-block: var(--space-16); } .section--rhythm-instrument { padding-block: var(--space-12); } .section--rhythm-aside { padding-block: var(--space-10); } .section--rhythm-closing { padding-block: var(--space-20); } @media (min-width: 1024px) { .section--rhythm-hero { padding-block: var(--space-20) var(--space-24); } .section--rhythm-argument { padding-block: var(--space-24); } .section--rhythm-instrument { padding-block: var(--space-16); } .section--rhythm-aside { padding-block: var(--space-12); } .section--rhythm-closing { padding-block: var(--space-32); } } .section--wash { background: var(--surface-accent-wash); } /* Hung label: hangs in the left margin at lg+, sits above the heading below that (§4.3). */ .section__label { display: block; margin-bottom: var(--space-4); } @media (min-width: 1024px) { .section__label { margin-bottom: 0; padding-top: 0.6em; } } /* Asymmetric proof blocks: 5/4/3 of 12, never 4/4/4, widest carries the load-bearing claim. */ .proof-blocks { display: grid; gap: var(--space-12); } @media (min-width: 768px) { .proof-blocks { grid-template-columns: 1fr 1fr; } .proof-blocks > :first-child { grid-column: 1 / -1; } } @media (min-width: 1024px) { .proof-blocks { grid-template-columns: 5fr 4fr 3fr; } .proof-blocks > :first-child { grid-column: auto; } } .two-col { display: grid; gap: var(--space-6) var(--space-12); } @media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } } /* ── String expansion (§10) ─────────────────────────────────────────────── */ /* * Spanish runs 25–35% longer. Display type steps down ONE notch so a headline that grew 25% still * holds the 14–22 characters-per-line target instead of running to five lines on a phone. Body * sizes do not change — the floor is a legibility decision, not a fitting one. */ :lang(es) .display-1 { font-size: clamp(2.375rem, 1.6rem + 3.6vw, 3.75rem); } :lang(es) .display-2 { font-size: clamp(1.875rem, 1.4rem + 2.4vw, 2.875rem); } :lang(es) .h2 { font-size: clamp(1.625rem, 1.35rem + 1.4vw, 2.25rem); } /* ── Focus, links, skip link ────────────────────────────────────────────── */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } .skip-link { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 100; transform: translateY(-200%); background: var(--action-fill); color: var(--action-label); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; transition: transform var(--dur-fast) var(--ease-standard); } .skip-link:focus { transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── Reduced motion (§7.4) ──────────────────────────────────────────────── */ /* * Collapse the movement, KEEP the state change perceptible. A global-only override silently kills * state feedback, which is worse than the animation was — so the exceptions below are explicit. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Exception 1 — the hero rail renders in final position, no stagger, no fade. */ .ticket-rail__card { opacity: 1 !important; transform: none !important; animation: none !important; } /* Exception 2 — the bump undo affordance still shows for its full 4s. */ /* Exception 3 — the connection chip still changes COLOUR AND TEXT: state is information. */ /* Exception 4 — the accordion chevron keeps its static rotation, it just does not tween. */ /* Exception 5 — the sticky CTA bar appears with no transform. */ .sticky-cta { transform: none !important; } /* Exception 6 — the mobile header stops hiding on scroll rather than snapping. */ .site-header[data-hidden="true"] { transform: none !important; } } /* * Components. The split mirrors WEB-DESIGN-SPEC.md §6: everything above the SITE-LOCAL divider is * site-agnostic and is the `ba-ui` candidate set; everything below it is MiniRestaurants-specific. */ /* ══ THE PAGE SHELL — .wrap / .wrap-wide / .railpage / .railcol ══════════ */ /* * PORTED FROM `THE-RAIL-picked.html:73-77, 364-366, 444-446`. Blueprint §1. * * ───────────────────────────────────────────────────────────────────────────────────────────── * ## THIS IS THE 772px DEFECT, AND THIS BLOCK IS THE FIX * * Measured by Artie at 1440 on the built page: the hero spanned 143→1295px and EVERY text band * below it was boxed at 341→897px. The right half of the desktop was empty. Two grids on one * page. The cause was that the template's container system was never ported, so bands fell back * inside the repo's `.container` reading cap. * * THE TEMPLATE HAS EXACTLY TWO CONTAINER WIDTHS AND NO OTHERS: * * .wrap min(1200px, 100% - 2.5rem) chrome — the header row and the footer * .wrap-wide min(1400px, 100% - 2rem) the page body, which carries the rail grid * * ⛔ `p{max-width:68ch}` and `.lede{max-width:56ch}` are the ONLY reading caps in the template, * and they apply to PARAGRAPHS. Never to a band, a grid, a board, or a photo. A band that is * 772px wide is a paragraph rule applied to a layout element. Do not put a band inside * `Section`'s `.section__body`. * * ## `minmax(0, 1fr)` IS NOT A STYLE CHOICE * * `1fr` means `minmax(auto, 1fr)`, and `auto` refuses to shrink below its content. The template * records the measurement at L74-75: that default pushed two designs 74px and 95px past 320px. * Every flexible track here is `minmax(0, 1fr)` and every direct child of a wrap gets * `min-width: 0`. This is the single most common cause of horizontal scroll on this site and it * is fixed here once rather than per-component. * ───────────────────────────────────────────────────────────────────────────────────────────── */ .wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; } .wrap-wide { width: min(1400px, 100% - 2rem); margin-inline: auto; } /* See the L74-75 note above. This one declaration is why the shell holds at 320px. */ .wrap > *, .wrap-wide > * { min-width: 0; } /* * THE RAIL GRID. 206px of rail + the content track, above 1041px; one column below it. * * The breakpoint is 1040/1041 and it is declared HERE, in `shell.js`'s matchMedia string, and in * the rail's own media queries — three places, one number, matched by string so they cannot * drift. `--railw` in `tokens.css` carries the width for anything that needs to reason about it. */ .railpage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding-top: 1.4rem; } @media (min-width: 1041px) { .railpage { grid-template-columns: var(--railw) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); } /* * ⛔ A RESERVED RAIL TRACK WITH NO RAIL IN IT SWALLOWS THE PAGE. MEASURED, 28 PAGES. * * The rule above reserves `--railw` (206px) as the FIRST track unconditionally, and `.railcol` * was placed only by auto-flow — so it landed in whichever track was free. Column 2 on a page * that ships a `.rail`; column ONE, 206px wide, on a page that does not. * * That is not a near miss. Measured at 1440, DPR 1, on the built page, `/features/all/`: * `.railcol` 206 → `.container` 206 → `.section__inner` 110, a twelve-track grid inside 110px, * and `.section__body` coming out at 240px and 336px because its text would not compress any * further. A ribbon of content down the left with ~1000px of white beside it, on 28 of 58 pages. * * ⚠️ `document.scrollWidth === clientWidth` throughout, so no overflow gate ever saw this. The * content was CRUSHED, not spilled, and crushing is invisible to a scroll-width check. That is * the reason this shipped: every horizontal-overflow assertion on the site passed while it did. * * ONE declaration fixes it: pin `.railcol` to the content track explicitly, so its placement * stops depending on what else happens to be in the grid. Measured after, at 1440: `.railcol` * 206 → 1151, `.container` 206 → 1151, `.section__body` 240/336 → 503/687 on all 28 pages, and * page height falls 25-43% because the text is no longer forced to wrap every two or three * words. A railless `.railpage` now measures EXACTLY what a railed one measures, which is the * equivalence `test/rail-track.browser.mjs` asserts as a floor. * * ⚠️ THE EMPTY RAIL TRACK IS LEFT STANDING, DELIBERATELY, AND IT IS A DESIGN QUESTION NOT A BUG. * A railless page still reserves 206px of column 1 for a rail that is not there, so its content * begins 206px in. Collapsing that track as well — `.railpage:not(:has(> .rail))` with * `grid-template-columns: minmax(0, 1fr)` — was built and measured: it widens those pages to * `.container` 1256 / body 556/757. It was NOT shipped here because it makes the design-parity * allowlist RISE by two entries, and a rising ratchet needs a ruling that is Felicity's to give, * not an implementer's to write. The narrower result is the one that needs no ruling AND makes * every `.railpage` page agree; the wider one is a deliberate second step behind that ruling. */ .railcol { grid-column: 2; } } /* * The content track. Named, and not merely "the second child", because `--bleed-l/-r` are * measured off THIS element by `shell.js` — a band asking to bleed needs a box whose distance to * each viewport edge is a real measured number rather than an assumption about the grid. */ .railcol { min-width: 0; } /* * Section anchoring, so a jump does not land under the sticky furniture, and the vertical rhythm * between stops. `THE-RAIL-picked.html:444-446`. * * The rhythm is an ADJACENT-SIBLING rule, not padding on each section: padding on each section * doubles at every join and gives the first and last section a margin nothing asked for. */ .stopsec { position: relative; /* * ⛔ `--pinoff`, NOT `--hdrh`, AND THE DIFFERENCE IS THE WHOLE DEFECT. * * Below 1041px the rail lies down UNDER the header as a second sticky strip, so the furniture a * jump has to clear is header + rail, not header. Measured at 390 before this change: tapping * "23:15 Close" put the `

` at y=176-248 and its paragraph at 248-382 with the rail's bottom * edge at 257 — 72% of the heading and the whole first line of prose underneath the thing the * visitor had just tapped. Nine of the eleven stops failed the same way. * * `--pinoff` already existed FOR THIS, and `shell.js` had been computing it correctly the whole * time — header height plus the rail's height while the rail is lying down, header alone above * 1041. It had ZERO readers. Every anchor offset on the site reached for a header-only token * instead. * * ⛔ SO THERE IS NO 1041px MEDIA QUERY HERE ANY MORE, AND ITS ABSENCE IS THE POINT. The old * pair declared the offset twice at two widths, which is two rules to keep in sync with a * breakpoint declared in a third place. `--pinoff` collapses to `--hdrh` above 1041 by * construction, so ONE declaration is already correct at both widths and the desktop gains no * extra offset — verified at 1440, where every stop's `scroll-margin-top` computes to the * header plus 1.5rem exactly as it did before. */ scroll-margin-top: calc(var(--pinoff, 64px) + 1.5rem); } .stopsec + .stopsec { margin-top: clamp(3rem, 6vw, 5.5rem); } /* ══ ba-ui: Button ═══════════════════════════════════════════════════════ */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--size-body); line-height: 1.25; /* Spanish runs 25–35% longer: buttons are padding-sized with a min-width, never width-sized, * and a two-line label produces a taller button rather than a clipped one (§10 rule 3). */ min-width: 8rem; min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: var(--radius-md); text-decoration: none; text-align: center; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .button--primary { background: var(--action-fill); color: var(--action-label); } .button--secondary { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--rule-structural); } .button--ghost { background: transparent; color: var(--text-accent); min-width: 0; padding-inline: var(--space-2); } .button--sm { min-height: 40px; padding: var(--space-2) var(--space-4); } .button--lg { min-height: 56px; padding: var(--space-4) var(--space-8); } @media (hover: hover) { .button--primary:hover { background: var(--action-fill-hover); transform: translateY(-1px); } .button--secondary:hover { background: var(--surface-raised); transform: translateY(-1px); } } .button:active { transform: translateY(0) scale(0.985); transition-duration: var(--dur-instant); } .button-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } /* At 390px the primary is full-width and the secondary is a text link beneath it: two stacked * full-width buttons read as indecision (§5.1). */ @media (max-width: 479px) { .button-row .button--primary { width: 100%; } .button-row .button--secondary { background: none; box-shadow: none; color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; min-width: 0; padding-inline: 0; } } /* ══ ba-ui: TextLink ═════════════════════════════════════════════════════ */ .text-link { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-fast) var(--ease-standard); } .text-link:hover, .text-link:focus-visible { text-decoration-thickness: 2px; } .section--dark .text-link { color: var(--ember-400); } /* ══ THE HEADER `.hdr` ═══════════════════════════════════════════════════ */ /* * PORTED FROM `THE-RAIL-picked.html:133-156` / `source/kit.py` BASE + `header()`. Blueprint §2. * * ───────────────────────────────────────────────────────────────────────────────────────────── * ## `.site-header` / `.wordmark` ARE GONE. THEY WERE NOT ALIASED. * * The CEO on the first shell build: *"You were supposed to remove the old changes and update * with the new change."* The ratified header had been pasted BESIDE the old one and the old * eight-row nav survived on all 55 pages. Felicity named the mechanism: the repo's chrome was * written in a class vocabulary the template's CSS cannot reach, so nothing ratified styled any * of it. If `.site-header` reappears in this file, two headers shipped. * ───────────────────────────────────────────────────────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 80; /* * 92% of the page colour, not a solid fill, and the blur behind it. This is the template's own * treatment (`saturate(150%) blur(12px)`) and it is affordable because `backdrop-filter` is * STATIC here — it is never transitioned, so it costs one composited layer rather than a filter * pass per frame. `color-mix` degrades to nothing in an engine that lacks it, which would leave * a transparent header, so the fallback below it is a real declaration rather than a hope. */ background: var(--surface-page); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); transition: transform var(--dur-base) var(--ease-standard); } .hdr[data-hidden="true"] { transform: translateY(-100%); } .hdr__in { display: flex; align-items: center; gap: 1.4rem; padding: 0.8rem 0; /* * ⛔ A LITERAL, AND NEVER `--header-height` / `--hdrh` AGAIN. THIS ONE DECLARATION WAS AN * UNBOUNDED FEEDBACK LOOP. * * `--hdrh` is `.hdr`'s OWN measured height, written by `shell.js` on every resize and on * `document.fonts.ready`. `.hdr__in` is INSIDE `.hdr`. Feeding the measurement of a box into * the `min-height` of a box it contains closes the loop: * * shell.js writes --hdrh = .hdr height -> --header-height -> .hdr__in min-height * -> .hdr__in grows -> .hdr grows -> next observation writes a bigger number -> ... * * Measured 2026-08-26, nine resize round trips at a CONSTANT viewport: `.hdr` 76 -> 101 at * 1440, and 73 -> 204 at 390. Monotone, no ceiling, on all 56 pages — the header is shared * chrome. It compounded worst on a phone, where a few rotations produce a 204px header. * * TWO terms drove it and BOTH had to go. (1) `.hdr`'s `border-bottom: 1px` makes the border-box * a pixel taller than the inner box. (2) `offsetHeight` ROUNDS UP a fractional height. Removing * only the border still grew 75 -> 82 at 1440 and 72 -> 185 at 390 — a border-only repair ships * looking fixed. Breaking THIS link kills both, because both are amplifiers inside the loop; * `shell.js` also now reads the unrounded height so term 2 cannot return. * * ⚠️ WHY A LITERAL AND NOT A NAMED TOKEN. `--hdr-min-h: 64px` was the first cut and it is the * better expression of intent, but a new token is a new `token-shipped-only:` row in * `design-parity.allow.json`, which sits exactly AT its ceiling (`max: 486`, 486 used). Raising * that ceiling is a ruling and it is Felicity's, not an engineer's, so this fix does not spend * it. `var(--space-16)` is also 64px and was rejected: a spacing-scale token and a header floor * are unrelated quantities that happen to share a value today, and coupling them means retuning * the spacing scale silently moves the header floor. * * 64px is what `--hdrh`'s own no-JS fallback has always been (`tokens.css`), so the floor is * unchanged. It is inert in practice — the header's natural content height measures 70.59px at * 390 and 73.69px at 1440 — and it stays comfortably above the 44px tap-target minimum this * declaration is recorded as guaranteeing in `design-parity.allow.json`. * * Gate: `MR-R-40907` in `test/header-resize-stable.browser.mjs`. A future edit that points this * back at `--hdrh` or `--header-height` re-opens the loop and that gate will fail. Do not * retire it; the failure is the point. */ min-height: 64px; } /* ── The mark ─────────────────────────────────────────────────────────────── */ .mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: 0 0 auto; color: var(--text-primary); /* * ⛔ THE ONE PLACE THE HEADER'S FLEXIBLE GAP LIVES (CEO ruling, 2026-08-25). *"I see the menu is * still in the same place at the top. Left side, not right side."* The wordmark stays hard left * and everything else — the spine, the theme control, the call to action, the drawer button — * forms one cluster on the right, with all the slack between the two. * * ⚠️ ON `.mark` RATHER THAN ON THE FIRST RIGHT-HAND ELEMENT, AND THAT IS THE WHOLE POINT. The * first right-hand element CHANGES: it is `.nav` above ~1377px and `.hdr__accessory` below it, * because a collapsed spine is `display: none` and a `display: none` element is not a flex item, * so its auto margin does not exist. Hanging the gap on whichever element happens to be first * needs a rule per state and goes wrong in the state nobody screenshots. The mark is on the line * in every state. `.nav` keeps the template's own `margin-left: auto` (`THE-RAIL-picked.html:142`) * and the two autos are ADJACENT, so they share one gap and land the slack in the same place. * * This was already declared under `@media (max-width: 620px)` for the wrapped phone header. That * copy is deleted rather than left beside this one: two declarations of one rule is how the pair * above drifted into splitting the space 50/50 in the first place. */ margin-right: auto; /* 2.5.8 Target Size, from padding rather than a larger glyph. */ min-height: 44px; } .mark__plate { width: 32px; height: 32px; border-radius: var(--r-xs); background: var(--grad-ember); display: grid; place-items: center; flex: 0 0 auto; box-shadow: var(--sh-1); } .mark__plate svg { width: 21px; height: 21px; } .mark__word { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; } /* ── The nav row ──────────────────────────────────────────────────────────── */ /* * ── THE SPINE SITS ON THE HEADER'S ONE FLEX LINE (`THE-RAIL-picked.html:985-996`) ────────────── * * ⛔ `margin-left: auto` IS BACK, AND THE SPINE'S ROW WRAPPER IS DELETED RATHER THAN HIDDEN. A * wrapper shipped here on 2026-08-25 and put the spine on a second full-width strip under the * controls. It was reverted the same day: `.hdr` measured 219px tall, the top strip carried a 921px * empty gap between the mark and the theme toggle, and the spine sat left-aligned with ~500px of * void beside it. There is no wrapper rule to override here because there is no wrapper; one left * behind at `display: contents` is the same element with a quieter failure mode. * * ⛔ `min-width: 0` IS LOAD-BEARING FOR THE MEASUREMENT, NOT THE LOOK. A flex item's automatic * minimum size is its content, so without this `.nav` can never be narrower than the row it holds, * `clientWidth` never falls below `scrollWidth`, and `widgets/nav.js` reads "it fits" at every * width — the drawer toggle never appears and a phone gets no navigation at all. That is the WCAG * 2.4.5 failure recorded in that file, reached by a fifth route. With it, an overflowing row * shrinks, the two widths diverge, and the measurement collapses to the drawer EARLY. * * MEASURED at 1440, DPR 1: mark 175.70 + nav 809.78 + toggle 139.56 + CTA 133.61 + 3 gaps 67.20 * = 1325.85 inside a 1400px `.wrap-wide`, so 74px of air. One line stops fitting near 1358px and * the drawer takes over below that, above the 1120 media floor. * * The row is still a rail: mono index, ember underline, current marker. It scrolls horizontally * rather than wrapping, because a wrapped spine changes the header's height between pages and * every sticky offset on the site reads `--hdrh`. */ .nav { display: flex; align-items: stretch; gap: 0; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .nav::-webkit-scrollbar { display: none; } /* * ⛔ `flex: 0 0 auto` ON EVERY ROW, AND IT IS LOAD-BEARING FOR THE MEASUREMENT, NOT THE LOOK. * * A flex child defaults to `flex-shrink: 1`, so without this the browser SQUEEZES the seven rows * to fit and `scrollWidth` comes back equal to `clientWidth` — the row reports that it fits at * every width, `data-nav` never flips to "drawer", and the toggle stays `display: none`. That is * the exact shape of the WCAG 2.4.5 failure recorded in `src/client/widgets/nav.js`: a phone * visitor with no navigation at all. The old header hit it by the wrapping route; a squeezed * scroller reaches the same place by the opposite one. */ .nav > * { flex: 0 0 auto; } /* * THE MONO INDEX. Real text in a span, never a `::before` counter — see the memo in * `src/ui/site-header.mjs`. `--size-floor` rather than the template's raw `.66rem`, so the numeral * cannot fall under the site's own minimum type size at any root scale. */ .nav__ix { font-family: var(--font-data); font-size: var(--size-floor); /* * ⛔ NOT the site's `--ink-3`, which is what the template uses here. `tokens.css:136` binds that * value to `--text-nontext` and reserves it with the note "still non-text only" — and this * numeral is REAL TEXT, it is the door's name in this team's mouth ("door 03"). `--text-secondary` * is 9.07:1 on `--ground` and is the same token the rail's identical `.stop__t` numeral already * uses, so the site's two numeral columns cannot drift apart in contrast. */ color: var(--text-secondary); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; } /* * The separator between the three ways to BUY and the four ways to DECIDE. It carries the grouping * the banned vocabulary is not allowed to name out loud, and it opens nothing. */ .nav__sep { align-self: center; width: 1px; height: 20px; background: var(--line); margin: 0 0.8rem; flex: 0 0 auto; } /* * A HELD ROW. Same shape, same position, no href, and visibly not a link — the reader can see the * door exists and is not open. It keeps the numeral, which is the whole point: the numbers either * side of it must not close up over the gap. * * ⚠️ IT IS NOT DIMMED TO "LOOK DISABLED". Going quieter would put a permanent sub-4.5:1 row in the * header on all 55 pages and trade a WCAG 1.4.3 failure for a visual cue `aria-disabled` already * carries. It reads as ordinary secondary text that is not a link, which is exactly what it is. */ .nav__held { color: var(--text-secondary); cursor: default; } /* * ⛔ `.nav a` AND `.nav__held` ARE TWO RULES, NOT ONE GROUPED SELECTOR, AND THE REASON IS THE * PARITY GATE RATHER THAN TASTE. * * `src/checks/design-parity.mjs` compares rules by SELECTOR STRING against the design source. * Grouping them produced a rule named `.nav a, .nav__held`, which the source has never heard of, * so the gate reported `.nav a` as ABSENT and then reported all fourteen of its declarations as * shipped-only drift — twenty-two failures for a change that altered no pixel. The gate was right * and the grouping was the defect: a selector the source cannot match is a selector the ratchet * cannot watch. */ .nav a { font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; text-decoration: none; color: var(--text-secondary); /* * ⛔ 0.55rem HORIZONTAL, NOT 0.95rem, AND IT IS MEASURED RATHER THAN TASTE. The row is back on * the header's one flex line and at 0.95rem it wanted 884.06px, which put the line 0.13px OVER * a 1400px container at 1440 — a header that fits or collapses depending on a scrollbar. At * 0.55rem the row wants 809.78px and the line has 74px of air. The template's own value is * `.1rem` plus a 1.3rem flex gap; this keeps the padding on the link so the ember underline and * the 44px target still span the whole row, and lands between the two. * * ⚠️ THE VERTICAL VALUE DOES NOT MOVE. The 44px floor declared at the end of this rule is WCAG * 2.5.5, it comes from the 0.72rem, and trimming this pair symmetrically would have traded a * target size for 20px of row. * * ⛔ DO NOT QUOTE THAT DECLARATION, OR A BRACE, ANYWHERE INSIDE THIS RULE. `MR-R-40132` mutates * it with a LAZY, BRACE-BOUNDED pattern to prove the parity gate still catches a shrunken tap * target. Both failure modes were reached here in one pass while writing this comment: a prose * copy of the declaration is what the lazy pattern reaches FIRST, so the mutant lands in the * comment and the real value survives; and a brace in the prose ends the character class early, * so the pattern matches nothing and the row fails as vacuous instead. Describe the value in * words. */ padding: 0.72rem 0.55rem; position: relative; /* 44px from padding on the flex line, never from a bigger font. */ display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; min-height: 44px; } /* The held row is dimensionally identical to a link so the spine does not jog where one sits. */ .nav__held { font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; padding: 0.72rem 0.95rem; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; min-height: 44px; } /* The first row sits flush with the container edge, so the spine lines up with the content below * it rather than starting 0.95rem in. `rail-shell.css:293`. */ .nav a:first-child { padding-left: 0; } /* * THE EMBER UNDERLINE. `scaleX(0)` → `1`, origin left, 240ms. It never animates `width`, which is * the whole reason it is a pseudo-element with a transform rather than a border that grows: a * width transition is a layout pass per frame and `perf-guard.mjs` rejects it outright. */ .nav a::after { content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); } .nav a:first-child::after { left: 0; } .nav a:hover { color: var(--text-primary); } /* * THE CURRENT PAGE IS MARKED. The spine is on all 55 pages now, so "where am I" is a question it * has to answer — a seven-row menu that looks identical on every page is a menu that has stopped * navigating. Set server-side from `aria-current`, so it survives with JavaScript off. */ .nav a[aria-current="page"] { color: var(--text-primary); } .nav a[aria-current="page"]::after { transform: scaleX(1); } /* * `:focus-visible` gets the underline too, and that is not decoration. A keyboard visitor should * see the same affordance a mouse visitor does; the template only styled `:hover`, which is the * mockup's privilege. */ .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); } /* * The CTA. `Button` emits `.button`, not the template's `.btn`, and it is NOT renamed here: it is * one component used on all 55 pages and in bands that are three other agents' lanes tonight. * Renaming it site-wide is the right follow-up and the wrong thing to do inside a shell port. * ⚠️ DECLARED SHORTCUT (SO-28): the template's `.btn` sizing is applied to `.button` INSIDE the * chrome only. The tradeoff is that `.btn` and `.button` coexist until that follow-up lands. */ .hdr .button { min-width: 0; min-height: 44px; padding: 0.6rem 1.25rem; font-size: 0.92rem; border-radius: var(--r-pill); } /* * The theme toggle, styled as the template's `#theme` ghost button (`kit.py header()`: * `