/** * Form — design tokens (audit 28_ v2, APPROVED Stage 12 specification). * * One custom-property layer. Components use tokens only, never raw values * (28_ §7). No `!important` anywhere. * * The four states are expressed as a single ascending, mobile-first set at * 651px, 1101px and 1501px, exactly as 28_ §7 requires: * * :root mobile, <= 650px * min-width 651 tablet, 651-1100px * min-width 1101 13-15" laptop band, 1101-1500px * min-width 1501 large desktop, >= 1501px * * STEPPED, NOT FLUID — and why. 28_ §7 suggests expressing the type scale as * fluid clamp() values. 28_ §8 requires the built theme to render within 1px of * the master at 1600/1366/820/390. Those two cannot both hold: the master is a * four-state scale, not a linear ramp, so a clamp anchored on the mobile and * desktop endpoints misses the measured laptop value badly — Home H1 by 25.9px, * Display by 28.3px, the testimonial quote by 13.4px, and even the approved * Work H1 by 3.7px. §8 is the rule that protects the frozen master and the * measured values are marked [C]; the clamp suggestion is marked [I]. So the * measured four-state scale wins, and every state is hit exactly rather than * two out of four. Raised with Ben in the Step 3 report. * * Marks: [C] measured from the rendered master · [I] approved production value * · [V] a range or ambiguity in 28_ v2, resolved here and listed in * docs/STEP-3-CHECKLIST.md for verification against the master at step 4/11. */ :root { /* ---------------------------------------------------------- breakpoints */ /* Declared for reference and for JS; media queries below use the literals, because a custom property cannot be used in a media query. [I] */ --bp-mobile: 650px; --bp-tablet: 1100px; --bp-laptop-max: 1500px; /* -------------------------------------------------------------- colour */ /* 28_ §2. [C] */ --ink: #111111; --paper: #f4f1eb; --paper-2: #f4f0e9; --white: #ffffff; --muted: #706c66; --line: rgba(17, 17, 17, 0.14); --yellow: #ffd400; --orange: #FC6600; /* * The split hero: how much goes to the copy and how much to the work. * * Ben, 23 Sep 2026 — "change the master": the split heroes read * left-heavy, because the typography is deliberately assertive and the * media was sitting at 47% against it. 48/52 the other way, and the media * grown rather than scaled, so the work has room to answer the headline. * * Journey, Challenge and Case Study use this pair. Work already sat at * 47/53 and 46/54 — past the target and in the right direction — so * applying it there would have made the media *narrower*, which is the * opposite of the brief. Work keeps its own ratio and takes the size * increase alone. */ --hero-copy-col: 0.98fr; --hero-media-col: 1.02fr; /* * There is one Form orange, and this is it. * * Until 26 Sep this token held a darker #de5c00, because #ff6a00 as text * measures 2.33:1 on the cream and AA wants 3:1 even at display sizes. Ben * approved #FC6600 as the canonical brand orange on 26 Sep, from Dave * Wild's cover, superseding both shades — so the token stays as a name for * "orange used as type" and stops being a second colour. * * The contrast it was introduced to solve is still real and is now a known, * accepted state rather than a solved one: #FC6600 measures 2.63:1 on the * cream and 2.98:1 on white. Every place this token is used as type is * listed in docs/ORANGE-CONTRAST-2026-09-26.md with its measured ratio, so * the decision can be revisited with numbers rather than rediscovered. */ --orange-text: var(--orange); --red: #ef3f2f; --magenta: #ec008c; --cyan: #00bce4; --lime: #c9f330; --grey-card: #2d2d2d; /* 28_ §2 lists grey-tile as #171717 and #222222; §6 assigns #222 to the proof card and #171717 to Work tiles, so they are named apart here. [V] */ --grey-tile: #171717; --grey-proof: #222222; /* Case Studies index image cards. Measured on the master; not in 28_ §2. [V] */ --grey-case: #1b1b1b; /* Footer text tones and the scrolled header. Measured on the master and absent from 28_ §2, recorded the same way as --grey-case: master-derived, not a new design choice. [V] */ /* Home. All measured on the rendered master; none appears in 28_ §2, and they are recorded the same way as --grey-case: master-derived. [V] */ --home-cover-bg: #eee7dc; --home-eyebrow: #5f5951; --home-body: #48433d; --home-trust-label: #6e675f; --home-panel-bg: rgba(255, 255, 255, 0.93); --home-panel-border: rgba(17, 17, 17, 0.07); --home-panel-shadow: 0 28px 70px rgba(55, 44, 32, 0.08); --home-option-border: rgba(17, 17, 17, 0.12); --home-trust-rule: rgba(17, 17, 17, 0.14); --home-panel-lede: #706960; --home-option-line: #736d64; --home-panel-link: #625c54; --home-panel-link-rule: rgba(17, 17, 17, 0.25); /* Shared components and How we help, measured from the master. */ --copy-ink: #37332f; --head-lede: #514c46; --spec-lede: #4f4b45; --accent-grey: #8f8f8f; --grey-card-hover: #303030; --option-border-hover: rgba(17, 17, 17, 0.24); --option-shadow-hover: 0 12px 24px rgba(45, 36, 27, 0.06); --financial-shadow-hover: 0 26px 54px rgba(60, 42, 28, 0.13); --financial-ring: rgba(255, 255, 255, 0.33); --btn-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08); --cap-row-hover: linear-gradient(90deg, rgba(255, 212, 0, 0.12), transparent); /* Route family, measured from the master. --shadow-lift is the master's own --shadow, renamed here so it does not read as a generic default: it is the card lift used by .route-card:hover. */ --faq-answer: #48443f; --step-text: #4b4742; --project-card-bg: #222222; --media-bg: #dddddd; --media-placeholder: #202020; /* Ben, 22 Sep 2026: deepened from the master's `transparent 58%, .66` for readability, not decoration. The hero caption is white text sitting on this, and the master's stop at 58% leaves a three or four line caption in the clear part of the gradient, where it fails contrast over a light picture. Measured at 1600/1366/820/390 against WCAG 3:1 for large text, this takes every one of the 29 Route and Challenge heroes under the threshold (worst 13.4%, from 31.3%) and improves the master's own set too. `docs/verification/hero-contrast.py`. */ --media-scrim: linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.72)); --card-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.8)); --shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.13); /* Challenge family, measured from the master. */ --hairline: rgba(17, 17, 17, 0.06); --journey-next-bg: #ece5dc; --journey-lede: #4d4842; --journey-more-lede: #5b554e; --journey-card-border: rgba(17, 17, 17, 0.1); --journey-card-border-hover: rgba(17, 17, 17, 0.25); --journey-card-shadow: 0 20px 44px rgba(51, 43, 34, 0.09); --journey-proof-eyebrow: rgba(255, 255, 255, 0.72); --journey-proof-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 28%, rgba(0, 0, 0, 0.82)); /* Drawn, not an image: a yellow dot, a magenta ring around it, and a dark diagonal behind both. Used when a proof item has no picture. */ --journey-proof-fallback: radial-gradient(circle at 83% 18%, rgba(255, 212, 0, 0.88) 0 12%, transparent 12.5%), radial-gradient(circle at 79% 15%, transparent 0 21%, rgba(236, 0, 140, 0.5) 21.5% 32%, transparent 32.5%), linear-gradient(145deg, #292929, #111111); --sub-hero-ring: rgba(255, 212, 0, 1); /* Work family, measured from the master. */ --filter-bar-bg: rgba(244, 241, 235, 0.95); --work-tile-client: rgba(255, 255, 255, 0.78); --work-tile-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.79) 100%); --work-fallback: linear-gradient(135deg, #2a2a2a, #151515); --work-fallback-label: rgba(255, 255, 255, 0.3); --work-fallback-ring: rgba(255, 212, 0, 0.55); /* Any image that fails to load. Drawn, not an image: a yellow dot, a magenta ring around it and a dark diagonal behind both -- the same composition the Work tile and the challenge proof card use when they have no picture. */ --media-missing: radial-gradient(circle at 82% 18%, rgba(255, 212, 0, 0.72) 0 12%, transparent 12.5%), radial-gradient(circle at 78% 15%, transparent 0 21%, rgba(236, 0, 140, 0.38) 21.5% 32%, transparent 32.5%), linear-gradient(145deg, #2a2a2a, #111111); --media-missing-label: rgba(255, 255, 255, 0.38); /* Work detail. The sand panel alternates with white down the page; the closing visual is a real image on nine of the master's forty-eight Work pages and the decorative placeholder on the other thirty-nine. */ --sand: #eae3d9; /* * The consent banner. Complianz's own UI, so these sit apart from the * page palette: the banner is a sheet over the site rather than part of * it. The magenta rule is the one place the brand's magenta appears as a * structural line, and it is a rule only — never a button fill. */ /* * An eyebrow on a dark surface. `.eyebrow` sets `--ink` on itself, which * beats a dark section's inherited `--white`, so a dark section containing * one renders ink on ink and the label disappears. The value is the one * `work.css` already proved on the EDGE video panel; naming it here means * the next dark section that needs an eyebrow has something to reach for * rather than rediscovering the problem (Ben, 26 Sep 2026). */ --eyebrow-on-dark: #aaa59f; /* * The Case Study approach numerals. One colour for all five, because the * panels behind them run yellow, cyan, magenta, grey and orange and only * black clears AA on every one at 10px. White failed on three of the five * and `--ink` was still 0.05 short on magenta. */ --case-approach-numeral: #000000; --consent-bg: #f3eee6; --consent-rule: #e6007e; --consent-body: #343434; --work-lead: #49443e; --work-copy: #48433d; --work-body: #45403a; --work-chip: #554f48; --work-label: #736c63; --work-proof-line: rgba(17, 17, 17, 0.18); --work-video-bg: #f2eee8; --work-video-intro: #4b4640; --work-video-card-bg: #151515; --work-video-shade: linear-gradient(180deg, rgba(0, 0, 0, 0.06) 24%, rgba(0, 0, 0, 0.76) 100%); --work-video-label: rgba(255, 255, 255, 0.68); --work-video-play-shadow: 0 12px 30px rgba(0, 0, 0, 0.16); --work-video-fallback: radial-gradient(circle at 82% 15%, rgba(255, 212, 0, 0.75) 0 12%, transparent 12.5%), radial-gradient(circle at 78% 13%, transparent 0 21%, rgba(236, 0, 140, 0.45) 21.5% 32%, transparent 32.5%), linear-gradient(145deg, #282828, #101010); --work-rhythm-copy: #cbc6bf; --work-rhythm-shadow: 0 20px 46px rgba(0, 0, 0, 0.18); --work-media-shadow: 0 14px 34px rgba(54, 45, 35, 0.07); --work-closing-bg: #e8e2d9; --work-closing-fill: linear-gradient(145deg, #ece7df, #ddd5ca); --work-closing-shadow: 0 18px 45px rgba(55, 45, 34, 0.08); --work-related-scrim: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.82)); --work-related-meta: rgba(255, 255, 255, 0.68); --work-quote-meta: #aaa59f; --work-dot: #555555; --work-modal-scrim: rgba(10, 10, 10, 0.82); --work-modal-line: rgba(255, 255, 255, 0.12); --work-modal-close: rgba(255, 255, 255, 0.18); --work-modal-platform: #9f9b95; --work-modal-help: #8e8982; --work-modal-shadow: 0 30px 100px rgba(0, 0, 0, 0.42); /* Case Studies, measured from the master. The metric icon's five tints cycle by position, so they are named for their colour rather than their use. */ --case-card-scrim: linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.8)); /* For a pale picture (Ben, 1 Oct 2026): the ActivTrades brochure is white on white, and under the shared scrim its small caption was about 2.7:1. Same shape, darker earlier. */ --case-card-scrim-pale: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.66) 34%, rgba(0, 0, 0, 0.9) 100%); --case-card-meta: #dddddd; --case-card-shadow: 0 22px 48px rgba(0, 0, 0, 0.09); --case-quote-eyebrow: #605a52; --case-quote-cite: #625c54; --case-quote-dot: #c8c2b9; --case-hero-eyebrow: #b8b3ac; --case-hero-lead: #dedad4; --case-hero-shadow: 0 22px 55px rgba(34, 28, 22, 0.08); --case-hero-scrim: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.62)); --case-figcaption-label: rgba(255, 255, 255, 0.72); --case-tag-border: rgba(17, 17, 17, 0.12); --case-tag-ink: #4c4741; --case-tag-shadow: 0 7px 18px rgba(34, 28, 22, 0.025); --case-body: #3f3a35; --case-copy: #4b4640; --case-note: #4e4943; --case-panel-shadow: 0 18px 42px rgba(34, 28, 22, 0.045); --case-objective-ink: #3d3934; --case-objective-num: #5f5952; --case-metric-border: rgba(17, 17, 17, 0.1); --case-metric-note: #4f4a44; --case-metric-shadow-hover: 0 18px 38px rgba(34, 28, 22, 0.08); --case-icon-bg: #f3efe9; --case-icon-magenta-bg: #fff2f8; --case-icon-cyan-bg: #eafaff; --case-icon-cyan: #00a6c8; --case-icon-yellow-bg: #fff8d8; --case-icon-yellow: #b58d00; --case-icon-grey-bg: #efefef; --case-icon-grey: #666666; --case-icon-orange-bg: #fff0e8; --case-approach-eyebrow: #5d574f; --case-gallery-bg: #ece7df; --case-gallery-bg-alt: #e8e3dc; --case-fallback: linear-gradient(135deg, #222222, #0f0f0f); --case-deep-eyebrow: #5e5850; --case-deep-body: #3e3934; /* Decorative treatments measured from the master's backgrounds and rings. */ --funnel-gradient: radial-gradient(circle at 8% 50%, rgba(255, 225, 53, 0.42) 0px, rgba(255, 225, 53, 0) 34%), radial-gradient(circle at 94% 22%, rgba(239, 63, 47, 0.26) 0px, rgba(239, 63, 47, 0) 34%), linear-gradient(112deg, #ffd21e 0%, #ff8a00 45%, #ef3f2f 100%); --funnel-ring-white: rgba(255, 255, 255, 0.26); --funnel-ring-yellow: rgba(255, 218, 37, 0.42); --footer-muted: #aaa59f; /* * Accessibility correction (Ben, 22 Sep 2026). #77736d on the footer's * #0d0d0d measured 4.13:1, under the 4.5:1 AA threshold for text this * size. #85817b is 5.02:1 with headroom, and still clearly quieter than * the #aaa59f the rest of the footer copy uses at 7.95:1. */ --footer-note: #85817b; --footer-rule: rgba(255, 255, 255, 0.14); --header-scrolled: rgba(244, 241, 235, 0.94); --footer: #0d0d0d; /* Email shell only — never used on the site. [C] */ --email-sand: #eee9e1; /* Orange closing CTA, one site-wide component. 28_ §2. [C] */ --cta-gradient: radial-gradient(circle at 8% 50%, rgba(255, 212, 0, 0.42) 0%, rgba(255, 212, 0, 0) 34%), radial-gradient(circle at 94% 22%, rgba(239, 63, 47, 0.26) 0px, rgba(239, 63, 47, 0) 34%), linear-gradient(110deg, var(--yellow), var(--orange) 52%, var(--red)); /* ---------------------------------------------------------- typography */ /* 28_ §3. Self-hosted Montserrat; never the prototype's Google Fonts @import. The fallback face carries the same metrics role. [I] */ --font: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* * Body copy is Inter; headings stay Montserrat (Ben, 26 Sep 2026). * * Dave Wild's cover set body and navigation in Inter, and Ben's ruling is * that the homepage hero body copy is now the site-wide standard — same * family, weight, sizing and line-height. This is a second token rather * than a change to `--font` on purpose: `body` inherits `--font`, so * switching it would turn every heading on the site Inter and leave a long * tail of exceptions to chase. Roles opt in instead, which is also what * makes the change auditable. */ --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* Larger text (Ben, 30 Sep 2026). Three scale factors that are 1 in Standard, so every value that carries one computes to exactly today's number. large-text.css raises them under html[data-text-size="large"]: reading roles by about 18%, heading sizes by a few percent, small text by a little so nothing stays tiny. Display sizes carry none. Standard is never below what it was. */ --type-reading: 1; --type-heading: 1; --type-small: 1; --type-floor: 0px; /* the smallest any small text may be in Larger text; 0 in Standard, where nothing is raised */ --fw-body: 500; --fw-insight-body: 400; --fw-card-title: 700; --fw-eyebrow: 800; --fw-title: 900; /* * Editorial eyebrows (Ben, 1 Oct 2026, Dave's list): Inter, no tracking, no forced uppercase; 16px, then 19.2px (Ben, 1 Oct 2026, panel rhythm correction), then 15% smaller, * 16.32px, and sentence case rather than Title Case (Ben, 2 Oct 2026). `--fs-eyebrow` and `--fw-eyebrow` above are the small-label scale (card tags, metadata, utility labels) * and are NOT this role; they are left exactly as they were. Larger text scales the 16.32px like body copy. */ /* The one eyebrow (Ben, 7 Oct 2026): every eyebrow, in a title block or on a card, is Inter 800, uppercase, 13.2px and 0.18em tracking. */ --fs-eyebrow-label: max(calc(13.2px * var(--type-small)), var(--type-floor)); --ls-eyebrow-label: 0.18em; --fs-section-eyebrow: calc(16.32px * var(--type-reading)); --fw-section-eyebrow: 600; /* * The secondary-panel system (Ben, 1 Oct 2026, "final global panel system reset"). ONE role for every major content-panel title and panel, measured from the * frozen master's Case Study page (VIDA Markets: its shared `.display-sm` panel title, 56 / 46 / 38 at 1600 / 1366 / 820, Montserrat 900, leading 0.96-0.98, * tracking -0.035em, section padding 92 top and 100 bottom (70 and 76 at laptop), eyebrow 22px above its title (17 at laptop), copy 24px below). The phone value is 36px, not * the master's 38, so a panel title can never tie with the 38px H1 of a long Work title. A heading is the same size wherever it is and however long it is: a title that is * too long is shortened in the copy, never in the type. Everything that uses the role reads these tokens (panel-headings.css owns the one rule). Not part of the role: * heroes and H1s, the orange closing CTA panels, card, stat and component titles. Larger text scales the size by `--type-heading`. */ --panel-title-size: 36px; --panel-title-lh: 0.98; --panel-title-ls: -0.035em; --panel-space-top: 92px; --panel-space-bottom: 100px; --panel-eyebrow-gap: 18px; /* the one eyebrow gap, as the Home hero (Ben, 6 Oct 2026) */ --panel-copy-gap: 24px; /* Mobile, <= 650px. [C] except --fs-work-h1, approved correction [I] */ /* Fluid in the master, not stepped: clamp(62px,6.2vw,98px) either side of a laptop clamp(54px,4.7vw,72px), with a flat 64px on any viewport 900px or shorter. The old 56/62/64/98 matched at the four test widths and drifted everywhere between them; see home.css. */ --fs-home-h1: 56px; --fs-display: 48px; --fs-quote: 34px; --fs-cta-headline: 40px; --fs-insight-h1: 40px; --fs-work-h1: 38px; --fs-h2: calc(25px * var(--type-heading)); --fs-insight-h2: calc(30px * var(--type-heading)); --fs-h3: calc(28px * var(--type-heading)); --fs-lead: calc(17.8px * var(--type-reading)); --fs-body: calc(17.8px * var(--type-reading)); --fs-planner-body: calc(17px * var(--type-reading)); /* Start a Project form: locked at the size it had (Ben, 7 Oct 2026), outside the 17.8px copy rule */ /* * FAQ answers, +15% on the shared component (Ben, 26 Sep 2026). One role: * Motion carried its own 17px and now inherits this like everywhere else. */ --fs-faq-answer: calc(17.8px * var(--type-reading)); --fs-insight-body: calc(17.8px * var(--type-reading)); --fs-eyebrow: max(calc(13px * var(--type-small)), var(--type-floor)); /* * Form controls (Ben, 21 Sep 2026). The master sets every field label and * every helper note at 10px, which is smaller than its own eyebrows and * below the size at which a label is worth reading. Both are functional * text, so both come up to the body minimum. One token each, because the * Contact form and the planner's brief share `.field`. */ /* * Supporting copy laid over large imagery (Ben, 21 Sep 2026). The master * sets it at 10-12px, which reads as a caption on a 600px+ image rather * than the editorial line it is. Mobile and tablet first; the desktop * step is in the 1101 band below. */ --fs-image-overlay: calc(19px * var(--type-reading)); --fs-field-label: calc(16px * var(--type-reading)); --fs-field-note: calc(16px * var(--type-reading)); --fs-cta-eyebrow: max(calc(13px * var(--type-small)), var(--type-floor)); --fs-home-card-title: calc(16px * var(--type-reading)); --fs-metric-label: calc(17.8px * var(--type-reading)); /* * Standard button label, up about 20% from the master's 13px (Ben, 21 Sep * 2026). The header CTA is not this token — it inherits `--fs-nav-link`, * already enlarged to 17px, and must not compound. */ --fs-button: calc(15.5px * var(--type-reading)); --fs-nav: calc(13px * var(--type-reading)); /* * Header nav and phone, an approved visible deviation from the frozen * master v58. Ben first asked for roughly 1px more presence on 21 Sep 2026 * and then, the same day, for about 30% over the master outright: the * master renders 13 / 13 / 12 / 13 and 11 / 11 / 10.5 / 11, so 13 becomes * **17** on desktop and 12 becomes 15.5 in the laptop band, with the phone * scaled to match. The CTA label carries no size of its own and inherits * `.nav`, so it scales with the links, as asked. * * Below 1101 the nav and the phone are both `display: none` and the * hamburger takes over, so these never paint there and the mobile and * tablet header is untouched. `--fs-nav` itself is unchanged, because it is * the approved 28_ §3 scale value and still backs theme.json's "Nav link" * editor preset; only the header uses these two. Header height, logo size, * button radius and the CTA's padding are all the master's still; only the * nav gap moves, and only as far as the larger type needs. */ --fs-nav-link: calc(14.5px * var(--type-reading)); /* 14.5px, Dave's number, approved by Ben 1 Oct 2026 for the main desktop navigation (it was 15.44, Home's 13.43 + 15%, from 26 Sep) */ --fs-planner-option: calc(16px * var(--type-reading)); --fs-case-tag: max(calc(10.5px * var(--type-small)), var(--type-floor)); /* * The meta line on an image card — "SHI · Brand · Partnership" over a Work * tile, and the same treatment on the project card, the Case Studies index * and the related-work and Insight cards. 14px (Ben, 21 Sep 2026), up from * the master's 9px, which read as too small against the card titles. * Uppercase, weight and tracking are unchanged. */ --fs-card-meta: calc(14px * var(--type-reading)); /* Line heights and tracking do not vary by state. 28_ §3. [C] */ --lh-home-h1: 0.92; --lh-display: 0.97; --lh-quote: 1.04; --lh-cta-headline: 0.96; --lh-insight-h1: 0.99; --lh-h2: 1.10; --lh-insight-h2: 1.04; --lh-h3: 1.0; --lh-lead: 1.36; --lh-body: 1.58; --lh-insight-body: 1.56; --lh-eyebrow: 1.15; --lh-planner-option: 1.25; /* * Heavy display tracking, opened up to -0.02em (Ben, 21 Sep 2026). The * master runs Montserrat 800/900 between -0.035em and -0.055em, which * bunches at large sizes; this is an approved site-wide refinement and * supersedes the master's tighter values for headings, card titles, * quotes and CTA headlines. * * Deliberately unchanged: `--tr-h3` is already looser than the target and * tightening it would be the wrong direction; the two eyebrow values are * tracked out on purpose; `--tr-button` is a button label, which Ben asked * to leave alone. * * Display numerals and the wordmark keep their own very tight tracking in * their own rules — the metric numbers, the belief and symptom numerals, * the Work statistics, the team initials and the footer logo. Those are a * display device rather than type that has to be read as words. */ --tr-display: -0.02em; --tr-home-h1: var(--tr-display); --tr-quote: var(--tr-display); --tr-cta-headline: var(--tr-display); --tr-insight-h1: var(--tr-display); --tr-h2: var(--tr-display); --tr-insight-h2: var(--tr-display); --tr-h3: -0.012em; --tr-eyebrow: 0.18em; --tr-cta-eyebrow: 0.14em; --tr-button: -0.01em; /* ----------------------------------------------- layout and spacing */ /* 28_ §4, resolved against the frozen master at step 4. The master sets `--max:1320px; --pad:clamp(20px,4vw,64px)` at the root and overrides both inside the laptop band. `--max` is a CAP, not `viewport − 2×pad`: the wrap is `min(--max, 100% − 2×--pad)`. That is why §1's "content width 1,220px at 1366" and §4's "41px" are both right and do not add up — at 1366 the cap wins, giving a 73px side gap, while 41px is the minimum gutter the clamp guarantees. Measured: 1600→1320/64, 1366→1220/41, 820→754/33, 390→350/20. Padding is the master's clamp, not a per-state constant. Constants matched at the four test widths but drifted between them — 11px at 1100 and 8px at 1101. Type is stepped because the master steps it; padding is fluid because the master clamps it. [C] */ --content-max: 1320px; --pad-x: clamp(20px, 4vw, 64px); --section-y: 88px; --header-h: 68px; /* The least distance from the top of the page at which a control or a jump target is fully clear of the fixed header (Ben, 30 Sep 2026, ruling 5). Follows --header-h through its breakpoints. */ --header-clear: calc(var(--header-h) + 12px); --gap-options: 10px; --gap-quilt: 14px; /* 28_ §4's "12px on laptop" belongs to the Work quilt, not the metric grid: the quilt measures 14px at 1600 and 12px at 1366, the metric grid 14px at both. Measured on the master at step 4. [C] */ --gap-metric: 14px; --step-col: 75px; --step-gap: 20px; --team-card: 350px; /* ------------------------------------------------------------- radii */ /* 28_ §5. One scale, no exceptions. Production has no pill radius. [C] */ --r-button: 16px; --r-input: 11px; --r-tag: 13px; --r-card-sm: 14px; --r-option: 15px; --r-panel: 20px; /* §5 gives r-panel as 19-20px; §6 puts the metric card at 19px. [V] */ --r-panel-metric: 19px; --r-card: 22px; --r-tile: 24px; /* §5 gives r-tile as 24-25px; §6 puts the proof card at 25px. [V] */ --r-proof: 25px; --r-round: 50%; /* --------------------------------------------------------- component */ /* 28_ §6. Held as tokens because §7 forbids raw values in components. Ranges in the specification are resolved at their lower bound and listed in docs/STEP-3-CHECKLIST.md for verification. */ --shadow-panel: 0 18px 42px rgba(60, 42, 28, 0.08); /* Home financial strip. Measured from the frozen master (v58) as a soft 113deg gradient with two radial blooms; Ben, 1 Oct 2026 (Dave's list), replaced it with one strong, clean linear gradient: clearly yellow at the start, a strong orange through the middle, finishing in a deeper red than the brand red (--red, #ef3f2f). No radial layers, no highlight. The three stops are the site's own yellow and orange, and a red one step deeper. */ --financial-deep-red: #d4271b; --home-financial-gradient: linear-gradient(100deg, var(--yellow) 0%, var(--orange) 52%, var(--financial-deep-red) 100%); --home-financial-kicker: rgba(17, 17, 17, 0.66); --home-financial-body: rgba(17, 17, 17, 0.72); --home-financial-label: rgba(17, 17, 17, 0.56); /* A solid control, not glass (Ben, 1 Oct 2026): ink with white type; it turns white with ink type when the panel is hovered or focused. */ --home-financial-action-bg: var(--ink); --home-financial-action-border: var(--ink); --home-financial-action-text: var(--white); --shadow-metric: 0 10px 26px rgba(34, 28, 22, 0.035); /* Measured on the frozen master at step 4, desktop state. Three of 28_ §6's "ranges" are not ranges at all — they are asymmetric paddings that were flattened in the write-up. Shorthand values, so the asymmetry survives. [C] */ --pad-button: 14px 20px; /* The header CTA is its own component: 12px 17px at radius 16, not the 14px 20px of 28_ §6's button. Measured on the master. [C] */ --pad-nav-cta: 12px 17px; --pad-input: 14px; --pad-option: 16px; --pad-home-card: 18px 46px 17px 19px; /* 46px right is the arrow gutter */ --pad-card: 28px; --pad-capability: 20px; --pad-financial: 56px 28px; /* top and bottom more than doubled (was 25px), Ben 1 Oct 2026 */ --pad-metric: 22px 24px; --pad-testimonial: 88px; --pad-faq: 62px; --pad-footer: 58px; --pad-cta-y: 54px; --proof-h: 450px; /* ------------------------------------------------ card accent bar */ /* Ben, 29 Sep 2026 (Dave's list, item 1): the decorative ring on a card rollover is replaced, site-wide, by a colour bar that grows down the card's left edge. One definition in components.css; a card supplies only `--card-accent`. */ --card-bar-width: 6px; --card-bar-duration: 0.34s; --card-bar-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ------------------------------------------------- action chevron */ /* The Homepage tile's `›`, which is the reference for every CTA (Ben, 29 Sep 2026, item 2): Arial 300, because the brand faces' Latin subsets carry no chevron glyph. 1.7em is the tile's own ratio (27px beside a 15.5-17px label), capped at 30px so it does not swell beside a 24px link; the tile and every arrow that stands alone set --chevron-size to the tile's own 27px. */ --chevron-font: Arial, "Helvetica Neue", sans-serif; --chevron-weight: 300; --chevron-size: min(1.7em, 30px); --chevron-line: 0.7; --chevron-nudge: 3px; --chevron-duration: 0.2s; } /* Mobile only. **An accessibility and readability correction, approved by Ben on 22 Sep 2026** — not a decorative choice. `transparent 44%` cannot help the 390 hero: there the box is only 350x300 and the caption grows to as much as 51% of it, starting as high as 40% down, which is above where a 44% scrim begins at all. At the other three widths a caption never starts above 58%, so 44% covers them completely. Measured at 390 across the 29 Route and Challenge heroes, share of the caption area failing WCAG 3:1 for large text: the master's 58%/.66 leaves 13 captions over a 20% threshold (worst 57.4%), 44%/.72 leaves 8 (worst 44.9%), and this leaves none (worst 18.1%). `docs/verification/hero-contrast.py --width 390` re-runs it. */ @media screen and (max-width: 650px) { :root { --media-scrim: linear-gradient(180deg, transparent 26%, rgba(0, 0, 0, 0.8)); --fs-body: calc(17.8px * var(--type-reading)); --fs-planner-body: calc(17px * var(--type-reading)); /* Start a Project form: locked at the size it had (Ben, 7 Oct 2026), outside the 17.8px copy rule */ --lh-body: 1.58; --fs-faq-answer: calc(17.8px * var(--type-reading)); } } /* --------------------------------------------------- tablet, 651-1100px */ @media screen and (min-width: 651px) { :root { --panel-title-size: clamp(38px, 4.2vw, 42px); /* secondary-panel title, 651-1100: 38 at 820, easing to 42, always under the smallest H1 here (43) */ --fs-home-h1: clamp(62px, 6.2vw, 98px); --fs-display: 49px; --fs-quote: 38px; --fs-cta-headline: 40px; --fs-insight-h1: 44px; --fs-work-h1: 42px; --fs-h2: calc(25px * var(--type-heading)); --fs-insight-h2: calc(30px * var(--type-heading)); --fs-h3: calc(28px * var(--type-heading)); --fs-lead: calc(17.8px * var(--type-reading)); --fs-body: calc(17.8px * var(--type-reading)); --fs-planner-body: calc(19.5px * var(--type-reading)); /* Start a Project form: locked at the size it had (Ben, 7 Oct 2026), outside the 17.8px copy rule */ --fs-insight-body: calc(17.8px * var(--type-reading)); --fs-eyebrow: max(calc(15px * var(--type-small)), var(--type-floor)); --fs-home-card-title: calc(16.5px * var(--type-reading)); --fs-metric-label: calc(17.8px * var(--type-reading)); --fs-nav: calc(13px * var(--type-reading)); --fs-case-tag: max(calc(11.5px * var(--type-small)), var(--type-floor)); --section-y: 110px; --header-h: 82px; --team-card: 370px; --pad-cta-y: 50px; --proof-h: 520px; --lh-body: 1.58; --fs-faq-answer: calc(17.8px * var(--type-reading)); } } /* -------------------------------------------- 13-15" laptop, 1101-1500px */ /* 28_ §1: the master's own answer to "everything is huge on a MacBook". Reproduced, not smoothed away. */ @media screen and (min-width: 1101px) { :root { --fs-image-overlay: calc(21px * var(--type-reading)); --fs-home-h1: clamp(54px, 4.7vw, 72px); --fs-display: 52px; --fs-quote: 48px; --fs-cta-headline: 48px; --fs-insight-h1: 50px; --fs-work-h1: 48px; --fs-h2: calc(33px * var(--type-heading)); --fs-insight-h2: calc(40px * var(--type-heading)); --fs-h3: calc(24px * var(--type-heading)); --fs-lead: calc(17.8px * var(--type-reading)); --fs-body: calc(17.8px * var(--type-reading)); --fs-planner-body: calc(16px * var(--type-reading)); /* Start a Project form: locked at the size it had (Ben, 7 Oct 2026), outside the 17.8px copy rule */ --fs-insight-body: calc(17.8px * var(--type-reading)); --fs-eyebrow: max(calc(14px * var(--type-small)), var(--type-floor)); --fs-home-card-title: calc(15px * var(--type-reading)); --fs-metric-label: calc(17.8px * var(--type-reading)); --fs-nav: calc(12px * var(--type-reading)); --fs-nav-link: calc(14.5px * var(--type-reading)); --panel-title-size: clamp(42px, 3.37vw, 46px); /* 1101-1500: 46 at 1366, from 42 at the band's start */ --panel-space-top: 70px; --panel-space-bottom: 76px; --panel-eyebrow-gap: 18px; --fs-case-tag: max(calc(11.5px * var(--type-small)), var(--type-floor)); /* §1: content width 1,220px at 1366. §4: side padding 41px. The two do not reconcile arithmetically at 1366; both are recorded as measured and flagged for the step 4/11 diff. [V] */ --content-max: 1220px; --pad-x: clamp(26px, 3vw, 46px); --section-y: 98px; --header-h: 72px; --gap-quilt: 12px; --team-card: 397px; /* Laptop band, measured on the master at 1366. */ --pad-home-card: 15px 40px 14px 16px; --pad-financial: 48px 24px; /* was 21px */ --pad-metric: 18px 20px; --pad-card: 23px; --pad-option: 14px; --pad-testimonial: 68px; --pad-faq: 50px; --pad-nav-cta: 11px 16px; --pad-footer: 44px; --pad-cta-y: 66px; --proof-h: 640px; --lh-body: 1.52; --fs-faq-answer: calc(17.8px * var(--type-reading)); } } /* ------------------------------------------ large desktop, >= 1501px */ @media screen and (min-width: 1501px) { :root { /* 28_ §3 records 98px here, but the frozen v58 master renders 64px at 1600 and 1501 — nothing on Home is 98px at any width. Display (88px) and Section H2 (42px) both match 28_ exactly at 1600, so this is one stale row rather than a bad column, consistent with the master being v58_HERO_CTA_CLEANUP. The master is the visible authority (level 1) and 28_ §8 makes a >1px difference from it a defect. Measured 64 / 64 / 62 / 56. [C] */ --fs-home-h1: clamp(62px, 6.2vw, 98px); --fs-display: 88px; --fs-quote: 68px; --fs-cta-headline: 62px; --fs-insight-h1: 60px; --fs-work-h1: 55px; --fs-h2: calc(42px * var(--type-heading)); --fs-insight-h2: calc(40px * var(--type-heading)); --fs-h3: calc(28px * var(--type-heading)); --fs-lead: calc(17.8px * var(--type-reading)); --fs-body: calc(17.8px * var(--type-reading)); --fs-planner-body: calc(19.5px * var(--type-reading)); /* Start a Project form: locked at the size it had (Ben, 7 Oct 2026), outside the 17.8px copy rule */ --fs-insight-body: calc(17.8px * var(--type-reading)); --fs-eyebrow: max(calc(15px * var(--type-small)), var(--type-floor)); --fs-home-card-title: calc(16.5px * var(--type-reading)); --fs-metric-label: calc(17.8px * var(--type-reading)); --fs-nav: calc(13px * var(--type-reading)); --fs-nav-link: calc(14.5px * var(--type-reading)); --panel-title-size: 56px; /* 1501 and up */ --panel-space-top: 92px; --panel-space-bottom: 100px; --panel-eyebrow-gap: 18px; /* the one eyebrow gap, as the Home hero (Ben, 6 Oct 2026) */ --fs-case-tag: max(calc(11.5px * var(--type-small)), var(--type-floor)); --content-max: 1320px; /* Resets the laptop band's narrower clamp. */ --pad-x: clamp(20px, 4vw, 64px); --section-y: 145px; --header-h: 82px; --gap-quilt: 14px; --team-card: 431px; /* The laptop band overrides these, so the desktop band must restore them: an ascending set means an unreset laptop value persists upward. */ --pad-home-card: 18px 46px 17px 19px; --pad-financial: 56px 28px; /* top and bottom more than doubled (was 25px), Ben 1 Oct 2026 */ --pad-metric: 22px 24px; --pad-card: 28px; --pad-option: 16px; --pad-testimonial: 88px; --pad-faq: 62px; --pad-nav-cta: 12px 17px; --pad-footer: 58px; --pad-cta-y: 105px; --lh-body: 1.58; --fs-faq-answer: calc(17.8px * var(--type-reading)); } } /* Motion: the metric icons animate on visibility and must respect this (28_ §6). */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0.01ms; } }