/* ═══════════════════════════════════════════════════════════════════════════
byteroc.css — the one stylesheet.
This file exists to end a specific bug. P1-T1 found the site's CSS was 100%
inline across five diverging copies; index.html's :root carried two
overlapping naming systems in one block with --bd redefined mid-file; and
/ecommerce/ and /coach/ both *used* var(--cream-2) and var(--mud2), which
are not defined on those pages, so the colour silently did not apply. Every
one of those was a token bug, not a markup bug. One file, one set of names,
defined once — that is the whole point.
THE RULE: no improvised colour values. Every colour below is either copied
verbatim from research/brand/byteroc-tokens-c.css or derived from one of
those tokens with color-mix(). If you need a colour that is not here, the
answer is a new token, agreed against the brand brief — not a hex literal
in a component.
Colour system: Option C "Navy & Emerald", Moin's decision 2026-10-08.
Gold and amber are retired and appear nowhere in this file.
Authorities:
research/brand/byteroc-tokens-c.css colour, verbatim
research/brand/WEBSITE-BRAND-BRIEF.md type, motion, rhythm
docs/experts/P1-T2-benchmark.md the reference-tier mechanics
docs/00_PLAN.md SAC 1-11 the standing rules
Contents
1 Font loading and the metric-matched fallbacks
2 Primitive tokens (colour, verbatim)
3 Type scale
4 Space, size, radius, shadow, border, motion
5 Theme mapping — dark and light
6 Reset and base
7 Layout primitives
8 Type utilities
9 Focus
10 Buttons
11 Nav and footer scaffold
12 Reduced motion
Sections 13-25 are the P4-T2 component kit; they have their own index at
the head of that block, further down this file.
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
1 FONT LOADING AND THE METRIC-MATCHED FALLBACKS
The two families are SELF-HOSTED from /assets/fonts and preloaded in
partials/head.php. They used to come from fonts.googleapis.com; P4-T6 proved
that cost both of the scores this section exists to protect:
- The Google Fonts stylesheet is a render-blocking THIRD-PARTY request.
FCP could not happen until a DNS + TLS + request round trip to
fonts.googleapis.com finished and a second one to fonts.gstatic.com
began. Lighthouse put the saving at 2,220 ms on mobile.
- Because the font files were two origins deep behind that stylesheet,
they could not be preloaded, so the fallback painted for ~2 s before
the webfont landed. Mobile CLS measured 0.277.
Self-hosting collapses both: one origin, no blocking stylesheet, and the two
woff2 files start downloading from in the same round
trip as this stylesheet. Same families, same weights, same display=swap
behaviour the brand brief asks for — only the delivery changed.
THE FILES. Byte-for-byte the variable woff2 Google serves for the `latin`
subset, with one transformation: the wght axis is instanced down to the range
the site actually uses (Syne 700-800, DM Sans 400-600), which is exactly what
the old Google Fonts URL already requested. Glyph coverage, hinting and DM
Sans's opsz axis are untouched. 97 KB -> 60 KB.
Rebuild: scripts/build-fonts.py. Licences: assets/fonts/OFL-*.txt (SIL OFL
1.1 — self-hosting is expressly permitted; the licence must ship with them).
The unicode-range below is Google's own `latin` range, copied verbatim, so
coverage is identical to what the live site resolves today. Note it does NOT
include U+2192 (->). The one "->" on the page fell through to a system font
under Google Fonts too, so that is unchanged behaviour, not a regression.
── The fallbacks ──
display=swap means the fallback paints first and the webfont swaps in. That
is good for LCP and bad for CLS — unless the fallback occupies the same
space. The rules below are adjusted fallbacks: Arial, resized and
re-metricked so its text box matches the webfont's. With the fonts now
preloaded from this origin the swap window is near-zero, so these are
defence in depth rather than the primary mechanism — but they are still
wrong-or-right, and they were wrong.
WHAT WAS WRONG, because it is an easy mistake to repeat. There was ONE
"Syne Fallback" rule at size-adjust: 124.09%, derived from a measured
"Syne 0.554332" average advance. Syne is a VARIABLE font whose default
instance is wght 400, and 0.5543 is the wght *700* figure. The hero H1 is
Syne *800*, where the real figure is 0.803828 — 45% wider. So the fallback
was ~37% too narrow for every h1 and h2 on the site and set the 39-character
hero H1 on THREE lines where Syne 800 sets it on FOUR. A height match cannot
survive a line-count change, which is where 0.277 of CLS came from: at the
swap the H1 grew a whole line and everything below it moved.
One size-adjust cannot serve a weight axis this wide (0.5575 -> 0.8038 is a
44% spread), so there is now one rule PER WEIGHT, matched by font-weight.
Declaring the weight explicitly also stops the browser synthetic-bolding
Arial, which was quietly widening the fallback by a further ~4%.
These numbers are MEASURED, not guessed. Method, so they can be re-derived:
1. Fetch the woff2 Google serves (a modern browser UA; the no-UA .ttf path
gives you a different build).
2. Read upm from `head`, and ascender/descender/lineGap from OS/2 typo
metrics (both faces set USE_TYPO_METRICS) or hhea (Arial does not).
3. INSTANCE THE wght AXIS to the weight you are matching, then compute the
average advance width over a-z plus space, weighted by English letter
frequency, from cmap + hmtx. Reading hmtx off the un-instanced file is
the bug described above. Do NOT use OS/2.xAvgCharWidth either: Arial
reports it under the old OS/2 definition and the Google faces under the
new one, so comparing them gives a badly wrong ratio.
4. size-adjust = avgWidth(webfont @ weight) / avgWidth(Arial)
ascent-override = ascender(webfont) / upm / size-adjust
descent-override = |descender| / upm / size-adjust
line-gap-override = lineGap / upm / size-adjust
Measured 2026-10-08 against the shipped files and macOS Arial
(scripts/measure-font-metrics.py reproduces every figure):
avg advance / upm Syne 700 0.557498 · 800 0.803828
DM Sans 400 0.479850 · 500 0.489135 · 600 0.500632
Arial 0.448415
ascender / upm Syne 0.925 · DM Sans 0.992
descender / upm Syne 0.275 · DM Sans 0.310
lineGap zero on both
upm 1000 on both; Arial 2048
Re-measure if Google ships a new version of either family.
─────────────────────────────────────────────────────────────────────────── */
/* The webfonts, self-hosted. `latin` subset, variable, wght trimmed to use. */
@font-face {
font-family: "Syne";
src: url("/assets/fonts/syne-latin-var.woff2") format("woff2");
font-weight: 700 800;
font-style: normal;
font-display: swap;
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";
src: url("/assets/fonts/dmsans-latin-var.woff2") format("woff2");
font-weight: 400 600;
font-style: normal;
font-display: swap;
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;
}
/* The metric-matched fallbacks, one per weight in use. */
@font-face {
font-family: "Syne Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
font-weight: 700; /* h3, .stat__num at --fw-head */
size-adjust: 124.33%;
ascent-override: 74.40%;
descent-override: 22.12%;
line-gap-override: 0%;
}
@font-face {
font-family: "Syne Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
font-weight: 800; /* h1, h2 at --fw-head-bold — the CLS case */
size-adjust: 179.26%;
ascent-override: 51.60%;
descent-override: 15.34%;
line-gap-override: 0%;
}
@font-face {
font-family: "DM Sans Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
font-weight: 400; /* body, .lede — the LCP element */
size-adjust: 107.01%;
ascent-override: 92.70%;
descent-override: 28.97%;
line-gap-override: 0%;
}
@font-face {
font-family: "DM Sans Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
font-weight: 500;
size-adjust: 109.08%;
ascent-override: 90.94%;
descent-override: 28.42%;
line-gap-override: 0%;
}
@font-face {
font-family: "DM Sans Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
font-weight: 600; /* labels, .eyebrow */
size-adjust: 111.64%;
ascent-override: 88.85%;
descent-override: 27.77%;
line-gap-override: 0%;
}
/* ───────────────────────────────────────────────────────────────────────────
2 PRIMITIVE TOKENS — colour
Copied verbatim from research/brand/byteroc-tokens-c.css. Do not edit these
here; edit the brand file and copy across, so the two never drift.
Primitives are raw brand values. Components must NOT use them directly —
use the semantic tokens in §5, which is what makes a section switchable
between dark and light by changing one attribute.
─────────────────────────────────────────────────────────────────────────── */
:root {
/* dark surfaces */
--navy-ink: #0B1129; /* page/section bg on dark */
--navy-base: #101838; /* cards, nav — exact logo navy */
--navy-raised: #172046; /* elevated cards, inputs */
--border-dark: #232D58; /* standard border on dark */
--border-faint: rgba(240, 238, 228, .06);
--border-strong: rgba(240, 238, 228, .14);
--muted-dark: #5A648C; /* NON-TEXT only (icons, rules) */
/* text on dark */
--cream: #F0EEE4; /* headlines — never #FFF 16.03:1 */
--cream-sub: #A9AFC6; /* body 8.55:1 */
--cream-dim: #828AAD; /* helper text 5.49:1 ink · 4.65:1 raised */
/* light surfaces */
--paper: #FAF8F2;
--paper-2: #F2EFE7;
--card-light: #FFFFFF;
--border-light: #E5E1D4;
--head-light: #101838; /* headlines on light 16.34:1 */
--body-light: #4C5169; /* body on light 7.36:1 */
--caption-light: #666A78; /* captions on light ≥4.69:1 */
/* THE ONE FEEDBACK HUE — D2, approved by Moin at G3 (2026-10-08).
Option C defined no feedback colour, so the form's error state shipped
colourless on the one form this site exists to fill. This is the only
non-accent hue in the system and it is for form errors and nothing else.
Clay: a desaturated terracotta (hue 16deg, sat 46%), not red. It reads as
"wrong" against navy without introducing a second brand colour, and it is
nowhere near Emerald in hue, so the two can never be confused.
WHY TWO VALUES AND NOT ONE. D2 asked for a single value at >=4.5:1 on
BOTH Navy Raised #172046 and Paper #FAF8F2. That is arithmetically
impossible: Paper (L=0.938696) needs a token luminance <= 0.169710, Navy
Raised (L=0.016574) needs >= 0.249582, and the best any single sRGB value
can do against both at once is 3.854:1 — below the bar on both counts.
So --error is ONE semantic token with a per-theme primitive, exactly as
--accent-text already resolves to Emerald on dark and Emerald Deep on
light. Each value clears 4.5:1 on its own ground, with headroom:
--clay #CB8972 5.53:1 on Navy Raised #172046 (field surface)
6.08:1 on Navy Base #101838 (card)
6.53:1 on Navy Ink #0B1129 (section)
— and 3.25:1 on Paper, which is why it is not
the light value.
--clay-deep #8D4C34 6.15:1 on Paper #FAF8F2 (section)
6.53:1 on White #FFFFFF (field surface)
5.68:1 on Paper 2 #F2EFE7 (alt band)
— and 2.42:1 on Navy Raised, likewise.
Both also clear the 3:1 non-text bar of SC 1.4.11 as a field border.
Colour is ADDED to the error state, never substituted: the 2px effective
border weight, the glyph and the 500 weight all stay. */
--clay: #CB8972; /* error on dark */
--clay-deep: #8D4C34; /* error on light */
/* the ONLY accent */
--emerald: #00E5A0; /* on dark: CTA, figures, labels, numerals, hover borders */
--emerald-hover: #00CC8E;
--emerald-soft: #E6FDF6; /* badge / soft bg on light */
--emerald-deep: #00694A; /* ANY emerald glyph on light ≥5.86:1 */
--on-emerald: #0B1129; /* text on emerald buttons 11.29:1 */
/* focus */
--focus-dark: #00E5A0;
--focus-light: #0B1129;
}
/* ───────────────────────────────────────────────────────────────────────────
3 TYPE SCALE
Syne 800 for every headline, DM Sans for everything else. No other family,
ever. Sizes, tracking and line-heights are the brand brief's, fluid between
a 375px and a 1440px viewport.
Departure D3 (approved at G1) raises two of the brief's floors because they
were below the readability bar: labels are at least 12px (the brief said
10-12), and body is at least 15px on desktop and 16px on mobile (the brief
said 13.5-15). Body is therefore the one step that gets SMALLER as the
viewport grows — 16px on mobile, 15px from 768px up. That is deliberate:
16px on mobile also stops iOS zooming when an input is focused.
─────────────────────────────────────────────────────────────────────────── */
:root {
--font-head: "Syne", "Syne Fallback", Arial, sans-serif;
--font-body: "DM Sans", "DM Sans Fallback", Arial, sans-serif;
/* Headline sizes. Syne 800, except h3 which is Syne 700 per the brief. */
--text-h1: clamp(3rem, 2.4718rem + 2.2535vw, 4.5rem); /* 48 → 72 */
--text-h2: clamp(1.75rem, 1.3539rem + 1.6901vw, 2.875rem); /* 28 → 46 */
--text-h3: clamp(1.25rem, 1.1180rem + 0.5634vw, 1.625rem); /* 20 → 26 */
/* Figure sizes — the two stat scales. A figure is Syne 800 and it is NOT a
heading: it is a number set at display size, so it gets its own steps
rather than borrowing h2/h1. The wireframe asks for 28px in the trust-bar
cell and 56px for the calculator's single result figure. */
--text-figure: clamp(1.75rem, 1.6181rem + 0.5634vw, 2.125rem); /* 28 → 34 */
--text-figure-lg: clamp(2.25rem, 1.5465rem + 3.0047vw, 4rem); /* 36 → 64 */
/* Body sizes. */
--text-lede: clamp(1.0625rem, 1.0405rem + 0.0939vw, 1.125rem); /* 17 → 18 */
--text-body: 1rem; /* 16px; → 15px at ≥768px, see below */
--text-caption: 0.875rem; /* 14px — captions and fine print only, never
a paragraph. Above the brief's 13.5px floor
so it stays comfortable next to 15px body. */
--text-label: 0.75rem; /* 12px — D3 floor */
/* Line heights. 1.06, 1.72 and 1.65 are the brief's. The two headline
values it does not specify are set to the reference tier's convention:
everything large gets a tight leading that falls as size rises. */
--lh-h1: 1.06;
--lh-h2: 1.10;
--lh-h3: 1.20;
--lh-lede: 1.72;
--lh-body: 1.65;
--lh-label: 1.40;
/* Tracking. Syne must never run at default tracking. */
--ls-h1: -0.035em;
--ls-h2: -0.030em;
--ls-h3: -0.025em;
--ls-body: 0em;
--ls-label: 0.07em;
--fw-head-bold: 800; /* h1, h2 */
--fw-head: 700; /* h3 */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600; /* labels */
}
@media (min-width: 768px) {
:root { --text-body: 0.9375rem; } /* 15px — D3 desktop floor */
}
/* ───────────────────────────────────────────────────────────────────────────
4 SPACE, SIZE, RADIUS, SHADOW, BORDER, MOTION
─────────────────────────────────────────────────────────────────────────── */
:root {
/* SECTION RHYTHM — two variables, Ramp's mechanic (P1-T2 §B4).
Vertical rhythm on this site is these two tokens and nothing else. Do not
write per-section padding; a section gets --spacer-m or --spacer-l, and
the whole page's rhythm stays adjustable from one place. */
--spacer-m: 40px;
--spacer-l: 80px;
/* COMPONENT SPACE — for the inside of components only. Never for section
rhythm; that is what the two spacers above are for. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
/* MEASURE */
--wrap: 1200px;
--wrap-narrow: 760px; /* long-form text; keeps the line length readable */
--gutter: 20px;
/* RADIUS — not specified by the brand brief. Set from the reference tier
(Linear 4/6/8/12/16/24, Stripe's named scale, Ramp's card 12-16px).
Stripe's nesting rule applies: a card inside a card takes the next step
down, so the inner curve reads as concentric rather than parallel. */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 24px;
--r-pill: 999px;
/* BORDER WIDTH — a true retina hairline. Linear's mechanic (P1-T2 §B1):
1px everywhere, halved on 2x displays so the line stays optically 1px
rather than doubling in weight. */
--hairline: 1px;
/* MOTION — one easing for the whole site. D4 (approved at G1) replaces the
brief's per-row easings with Linear's signature curve: fast out,
decelerating, zero overshoot. Nothing on this site bounces.
D4 also sets every hover to 160ms, which overrides the brief's 200ms and
250ms hover rows. The remaining durations are the brief's motion table. */
--ease: cubic-bezier(.32, .72, 0, 1);
--dur-hover: 160ms; /* D4 — all hovers, cards included */
--dur-nav: 350ms; /* nav transparent → blurred on scroll */
--dur-accordion: 400ms; /* FAQ open/close */
--dur-reveal: 600ms; /* scroll reveal, opacity + 22px rise */
--dur-count: 1400ms; /* stat count-up */
--stagger: 80ms; /* per-card delay in a staggered grid */
}
@media (min-width: 768px) {
:root {
--spacer-m: 48px;
--spacer-l: 96px;
--gutter: 32px;
}
}
@media (min-width: 992px) {
:root {
--spacer-m: 64px;
--spacer-l: 128px;
}
}
@media (min-resolution: 192dpi) {
:root { --hairline: 0.5px; }
}
/* ───────────────────────────────────────────────────────────────────────────
5 THEME MAPPING — dark and light
This is the layer components talk to. A component reads var(--surface) and
var(--text); it never reads var(--navy-ink) or var(--cream). Put
data-theme="dark" or data-theme="light" on any element and everything
inside it re-themes, because these are just custom properties and they
inherit. That is the whole switch — one attribute, nests freely, no
duplicate rulesets per theme.
The brief's section rhythm alternates the two deliberately: dark for
authority and impact, light for trust and readability.
Note --accent versus --accent-text. The emerald FILL is #00E5A0 on both
themes, because a button fill with Navy Ink text on it is 11.29:1 and the
brief names it the one primary style site-wide. Emerald used as a GLYPH —
text, an icon, a numeral, a check — must become Emerald Deep #00694A on
light, where raw emerald would fail contrast. Keeping them as two tokens is
what stops that mistake being made by hand in a component.
─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
color-scheme: dark;
--surface: var(--navy-ink);
--surface-2: var(--navy-base);
--surface-raised: var(--navy-raised);
--surface-card: var(--navy-base);
--text: var(--cream);
--text-sub: var(--cream-sub);
--text-dim: var(--cream-dim);
--text-nontext: var(--muted-dark); /* icons and rules only, never type */
--border: var(--border-dark);
--border-weak: var(--border-faint);
--border-heavy: var(--border-strong);
--accent: var(--emerald);
--accent-hover: var(--emerald-hover);
--accent-text: var(--emerald);
--accent-border: var(--emerald); /* hover + featured hairlines */
--on-accent: var(--on-emerald);
--error: var(--clay); /* 5.53:1 on --field-bg */
/* A soft emerald wash, for the pricing "Most popular" badge and nothing
else. The brand brief specifies the LIGHT pair (#E6FDF6 bg + Emerald Deep
text) because §11 Pricing ships on White; this dark pair exists so the
component is still correct if it is ever placed on a dark band. A flat
#E6FDF6 fill on navy would be a large light block, which the emerald
usage rule forbids, so on dark the wash is a 12% tint of the accent. */
--badge-bg: color-mix(in srgb, var(--emerald) 12%, transparent);
--badge-text: var(--emerald);
/* Input surface. The brand brief assigns Navy Raised to "elevated cards,
inputs", so a field is one surface step above the card it sits in. */
--field-bg: var(--navy-raised);
--focus-color: var(--focus-dark);
/* Linear's rule: no shadows on dark. Elevation is a surface step —
ink → base → raised — not a drop shadow. */
--shadow-sm: none;
--shadow-md: none;
}
[data-theme="light"] {
color-scheme: light;
--surface: var(--paper);
--surface-2: var(--paper-2);
--surface-raised: var(--card-light);
--surface-card: var(--card-light);
--text: var(--head-light);
--text-sub: var(--body-light);
--text-dim: var(--caption-light);
--text-nontext: var(--caption-light);
--border: var(--border-light);
--border-weak: color-mix(in srgb, var(--head-light) 6%, transparent);
--border-heavy: color-mix(in srgb, var(--head-light) 14%, transparent);
--accent: var(--emerald); /* fill only */
--accent-hover: var(--emerald-hover);
--accent-text: var(--emerald-deep); /* every emerald glyph on light */
--accent-border: var(--emerald-deep); /* a raw-emerald hairline disappears
on Paper; Emerald Deep reads */
--on-accent: var(--on-emerald);
--error: var(--clay-deep); /* 6.53:1 on --field-bg, 6.15 on Paper */
/* The brand brief's specified badge pair, verbatim. */
--badge-bg: var(--emerald-soft);
--badge-text: var(--emerald-deep);
--field-bg: var(--card-light);
--focus-color: var(--focus-light);
/* Ramp's near-zero elevation, tinted with the brand navy rather than pure
black (Stripe's lesson — a neutral black shadow reads as dirt). */
--shadow-sm: 0 3px 3px color-mix(in srgb, var(--navy-ink) 12%, transparent);
--shadow-md: 0 4px 4px color-mix(in srgb, var(--navy-ink) 15%, transparent);
}
/* ───────────────────────────────────────────────────────────────────────────
6 RESET AND BASE
─────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--surface);
color: var(--text-sub);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: var(--text);
font-family: var(--font-head);
font-weight: var(--fw-head-bold);
}
p, ul, ol { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a {
color: inherit;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
text-underline-offset: 0.18em;
transition: color var(--dur-hover) var(--ease),
text-decoration-color var(--dur-hover) var(--ease);
}
a:hover { text-decoration-color: currentColor; }
/* Inputs must inherit the family, or the browser silently uses its own and
the page gains a third typeface. */
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
}
/* ───────────────────────────────────────────────────────────────────────────
7 LAYOUT PRIMITIVES
─────────────────────────────────────────────────────────────────────────── */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
/* A section is a themed band with the standard rhythm. Add .section--lg for
the major beats (hero, the gap calculator, the closing ask). */
.section {
background: var(--surface);
color: var(--text-sub);
padding-block: var(--spacer-m);
}
.section--lg { padding-block: var(--spacer-l); }
.section--flush { padding-block: 0; }
/* Hairline rules between bands. */
.section--ruled { border-block-start: var(--hairline) solid var(--border); }
.stack > * + * { margin-block-start: var(--space-4); }
.stack--lg > * + * { margin-block-start: var(--space-6); }
/* ───────────────────────────────────────────────────────────────────────────
8 TYPE UTILITIES
─────────────────────────────────────────────────────────────────────────── */
.h1, h1 {
font-size: var(--text-h1);
line-height: var(--lh-h1);
letter-spacing: var(--ls-h1);
font-weight: var(--fw-head-bold);
}
.h2, h2 {
font-size: var(--text-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
font-weight: var(--fw-head-bold);
}
.h3, h3 {
font-size: var(--text-h3);
line-height: var(--lh-h3);
letter-spacing: var(--ls-h3);
font-weight: var(--fw-head); /* Syne 700, per the brief */
}
.lede {
font-size: var(--text-lede);
line-height: var(--lh-lede);
color: var(--text-sub);
}
.caption {
font-size: var(--text-caption);
color: var(--text-dim);
}
/* The eyebrow/label. Emerald is allowed here — the brief lists eyebrows and
labels among the places it may go. On light that resolves to Emerald Deep
automatically. */
.eyebrow {
display: block;
font-size: var(--text-label);
line-height: var(--lh-label);
letter-spacing: var(--ls-label);
font-weight: var(--fw-semibold);
text-transform: uppercase;
color: var(--accent-text);
}
.eyebrow--muted { color: var(--text-dim); }
/* A dollar or percent figure. The other place emerald is allowed. */
.figure {
font-family: var(--font-head);
font-weight: var(--fw-head-bold);
letter-spacing: var(--ls-h2);
color: var(--accent-text);
font-variant-numeric: tabular-nums;
}
.text-sub { color: var(--text-sub); }
.text-dim { color: var(--text-dim); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ───────────────────────────────────────────────────────────────────────────
9 FOCUS
Vercel's mechanic (P1-T2 §B2): a 2px gap in the surface colour, then a 2px
ring. The gap is what makes the ring legible against a focused element of
any colour, including the emerald button. Emerald ring on dark, Navy Ink
ring on light — both from the brand brief.
:focus-visible only, so a mouse click does not draw a ring, but every
keyboard path does. WCAG 2.2 AA.
─────────────────────────────────────────────────────────────────────────── */
:root { --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color); }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--r-xs);
}
/* Windows High Contrast Mode strips box-shadow, so keep a real outline there. */
@media (forced-colors: active) {
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}
.skip-link {
position: absolute;
left: var(--space-4);
top: var(--space-4);
z-index: 100;
padding: var(--space-3) var(--space-4);
background: var(--accent);
color: var(--on-accent);
font-weight: var(--fw-semibold);
border-radius: var(--r-md);
transform: translateY(-200%);
transition: transform var(--dur-hover) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }
/* ───────────────────────────────────────────────────────────────────────────
10 BUTTONS
One primary style site-wide: emerald fill, Navy Ink text, 11.29:1.
Secondary is outlined. There is no third.
─────────────────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
min-height: 44px; /* tap target */
border: var(--hairline) solid transparent;
border-radius: var(--r-md);
font-size: var(--text-body);
font-weight: var(--fw-semibold);
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--dur-hover) var(--ease),
border-color var(--dur-hover) var(--ease),
color var(--dur-hover) var(--ease),
transform var(--dur-hover) var(--ease);
}
.btn--primary {
background: var(--accent);
color: var(--on-accent);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.btn--secondary:hover { border-color: var(--accent); }
.btn--sm {
/* 44px, not the 38px this shipped with. G4 §6.7, Moin's decision. .btn
itself sets 44px as the tap target and this modifier was the one place
that opted out of it; the instances are the four "Get a quote" buttons on
/pricing/ and the nav CTA. The padding and the 12px label type are
unchanged, so it is still visually the small button — min-height is what
binds either way, because the content box measures ~32px. */
min-height: 44px;
padding: var(--space-2) var(--space-4);
font-size: var(--text-label);
letter-spacing: 0.01em;
}
/* ───────────────────────────────────────────────────────────────────────────
11 NAV AND FOOTER SCAFFOLD
Enough to make partials/nav.php and partials/footer.php render correctly
and accessibly. P4-T2 replaces these with the real component kit, including
the mobile menu and the nav's scroll-blur. Nothing here hardcodes a colour.
─────────────────────────────────────────────────────────────────────────── */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: transparent;
}
/* THE BAR'S PAINT LIVES ON ITS OWN LAYER, AND THAT IS NOT COSMETIC.
backdrop-filter establishes a containing block for fixed-position
descendants, exactly as transform and filter do. With the blur on .nav
itself, the scrim's `position: fixed; inset: 0` resolved against the 64px
bar instead of the viewport, so it measured 375x64 and dimmed only the nav
— the page behind the open sheet was never covered at all. The sheet's own
`inset: 64px 0 auto 0` happened to land correctly only because the bar is
exactly 64px tall and pinned to the top, which is a coincidence waiting to
break.
Moving the translucent fill and the blur onto an absolutely positioned
child leaves .nav with no filter, so both fixed children resolve against
the viewport, which is what they always meant. */
.nav__bg {
position: absolute;
inset: 0;
background: transparent;
border-block-end: var(--hairline) solid transparent;
transition: background-color var(--dur-nav) var(--ease),
border-color var(--dur-nav) var(--ease);
pointer-events: none;
}
/* space-between does the whole job at every variant: logo | links | CTA on
the homepage, and logo | CTA once the links hide on small screens. No
margin-auto rules, which would strand the CTA mid-bar the moment the links
became display:none. */
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
min-height: 64px;
/* Above the scrim (z-index 55). The bar is part of the open sheet, not part
of the background it dims: the burger is the sheet's close control, so
dimming it — which is what happened before this line — makes the one
affordance that dismisses the thing look disabled. */
position: relative;
z-index: 58;
}
.nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The bar's right-hand group. The CTA and the burger have to travel together:
below 880px the links are position:fixed and leave the flow, and with three
loose children space-between would strand the CTA in the middle of the bar. */
.nav__end {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.nav__logo img { width: auto; height: 32px; }
/* Hidden below 880px. The mobile menu that replaces them is P4-T2's job —
until then the primary CTA stays reachable at every width, and no page
that ships depends on this nav. */
.nav__links {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-5);
}
/* :not(.btn) is load-bearing, not tidiness. `.nav__links a` is specificity
(0,1,1) and `.btn--primary` is (0,1,0), so without the exclusion these
rules beat the button's own colour and the CTA at the foot of the mobile
sheet rendered Cream Sub text on an emerald fill. */
.nav__links a:not(.btn) {
color: var(--text-sub);
text-decoration: none;
font-size: var(--text-body);
}
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current="page"] { color: var(--text); }
.nav__back {
color: var(--text-sub);
text-decoration: none;
font-size: var(--text-body);
}
.nav__back:hover { color: var(--text); }
@media (min-width: 880px) {
.nav__links { display: flex; }
}
.footer {
background: var(--surface);
color: var(--text-sub);
border-block-start: var(--hairline) solid var(--border);
padding-block: var(--spacer-m);
}
.footer__inner {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
justify-content: space-between;
}
.footer__brand img { height: 32px; width: auto; }
.footer__line { margin-block-start: var(--space-3); max-width: 34ch; color: var(--text-dim); }
.footer__nav ul,
.footer__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer__social { flex-direction: row; gap: var(--space-4); flex-wrap: wrap; }
.footer__nav a,
.footer__social a,
.footer__email { color: var(--text-sub); text-decoration: none; }
.footer__nav a:hover,
.footer__social a:hover,
.footer__email:hover { color: var(--text); }
.footer__contact { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__email { font-weight: var(--fw-medium); }
/* .footer__book is deleted with the markup — D7, approved at G3. */
/* FIX 6 — footer social hit areas. Approved by Moin at G3; QA m5.
These are word links, so the "X" rendered as a 10 x 21px target. WCAG 2.2
AA SC 2.5.8 is satisfied at 24x24 by the inline exception, but 10px wide is
not a thumb target under any reading and the brief asks for 44.
Two layers, because the two numbers do different jobs:
- the box itself goes to at least 24 x 24, which is the measurable
minimum and is laid out, so it affects the row;
- ::after centres an invisible 44 x 44 floor over it, which extends the
pressable area without taking any layout space, so the row's rhythm is
unchanged. Pointer events land on the pseudo-element because it is a
child of the anchor.
The row gap goes 16 -> 24px so two 44px floors can never overlap: the
widest expansion is the "X", whose floor overhangs about 17px each side,
and 24 > 17 leaves clearance on both neighbours. Measured, not assumed. */
.footer__social { gap: var(--space-5); }
.footer__social a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 24px;
min-block-size: 24px;
}
.footer__social a::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: 100%;
block-size: 100%;
min-inline-size: 44px;
min-block-size: 44px;
transform: translate(-50%, -50%);
}
.footer__legal {
margin-block-start: var(--space-6);
padding-block-start: var(--space-4);
border-block-start: var(--hairline) solid var(--border-weak);
color: var(--text-dim);
font-size: var(--text-caption);
}
/* ───────────────────────────────────────────────────────────────────────────
12 REDUCED MOTION
A genuine no-motion fallback, not a slower animation. Durations collapse to
effectively zero so any JS that waits on transitionend still fires, and
smooth scrolling is turned off.
P4-T4 SETTLED THE SCROLL-REVEAL HALF OF THIS, AND SETTLED IT IN THE
MARKUP RATHER THAN HERE. There is no .rv rule in this file, no reveal
keyframe and no `brc-on` class, because nothing meaningful on this site is
ever at opacity: 0 in CSS. Every page is served in its final, readable
state; js/byteroc-motion.js writes a start state only after it has passed
its own reduced-motion and capability checks, and only onto elements that
are already below the fold. Under `reduce` that file returns before it
writes a single style, so the final state is simply what the server sent.
Nothing in this media block has to undo a reveal, because no reveal was
ever started. See the header of js/byteroc-motion.js.
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-hover: 1ms;
--dur-nav: 1ms;
--dur-accordion: 1ms;
--dur-reveal: 1ms;
--dur-count: 1ms;
--stagger: 0ms;
}
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
P4-T2 — THE CORE COMPONENT KIT
Everything below is the reusable kit the pages assemble from. It is NOT a
page: no section here knows what content goes in it.
Provenance. The stack is Option A (static HTML/CSS + PHP partials), so none
of this is 21st.dev React/Tailwind source. Each component is authored from
the LAYOUT DECISION recorded for its 21st.dev pick in
docs/experts/P2-T1-component-shortlist.md and re-checked in
docs/G1_DIRECTION.md §4 — the grid, the hierarchy, the semantics — expressed
in this file's own tokens. Nothing is copied, which is also why G1 open
question 12 (the 21st.dev commercial licence) does not block the build.
Donor per component is named in each section header.
TYPEFACE. Three of the picks (hirael's comparison-02, comparison-03 and
feature-08) set `font-serif` on their H2 and `font-mono` on their eyebrow,
and pricing-4 and booking-2 both set `font-heading`. P2-T1 called that the
single highest-risk detail in the build: retype some and the page splits in
half. None of those classes survives. Mechanically checkable, and the check
is this: every `font-family` declaration in this stylesheet resolves to
either var(--font-head) (Syne) or var(--font-body) (DM Sans). The only
exceptions are the @font-face names in §1 — which ARE those two families,
self-hosted, plus their per-weight metric-matched fallbacks — and §6's
`code/kbd/samp/pre` rule,
which is the browser's own monospace stack and is used by no component in
this kit — there is no third family in the design.
grep -n 'font-family' css/byteroc.css
Contents
13 Buttons — the full set and every state
14 Section composition
15 The hairline grid primitive
16 Card
17 Stat / figure block
18 Badge and check list
19 Accordion (FAQ)
20 Nav — scroll state, toggle, mobile sheet
21 Pricing card
22 Comparison table
23 Form controls
24 Footer newsletter widget
25 Reduced-motion overrides for the kit
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
13 BUTTONS — the full set and every state
§10 above established .btn, --primary and --secondary. This completes them:
a ghost tier, pressed and disabled states, a block width, and a row.
Three tiers and no more:
primary emerald fill, Navy Ink text — 11.29:1. One per viewport.
secondary transparent, 1px border. The outlined tier.
ghost transparent, NO border. Text that behaves like a button —
used for the hero's "Calculate your gap" and for text links
that need a 44px tap target.
The focus ring is §9's and is not re-declared here; it already works on an
emerald fill because of the 2px surface-coloured gap.
─────────────────────────────────────────────────────────────────────────── */
/* A press is the one transform a button gets. Hover is colour only — the lift
is reserved for cards, so the two never read as the same affordance. */
.btn:active { transform: translateY(1px); }
.btn--primary:active { background: var(--accent-hover); }
/* The outlined tier gains an emerald hairline and emerald text on hover. The
fill stays transparent: a secondary that fills on hover competes with the
primary at the exact moment the user is choosing between them. */
.btn--secondary:hover {
border-color: var(--accent-border);
color: var(--accent-text);
}
.btn--ghost {
background: transparent;
color: var(--text-sub);
border-color: transparent;
padding-inline: var(--space-3);
}
.btn--ghost:hover {
color: var(--accent-text);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* Disabled. Both spellings: :disabled for