/* * Colour read off the live Squarespace site's theme variables in site.css and * converted from HSL. None of these values is invented. * --ground hsl(0, 0%, 0%) * --type hsl(60, 4.35%, 95.49%) * --accent hsl(349.09, 82.5%, 52.94%) 4.84:1 on pure black * --grey hsl(0, 0%, 21.96%) * The ground is pure black deliberately. See spec §5 before changing it. */ :root { --ground: #000000; --type: #F4F4F3; --accent: #EA2448; /* Fill for buttons carrying white text: --accent is 4.33:1 against white, this is 4.79:1. */ --accent-solid: #DE1F42; --grey: #383838; /* * Extended neutrals. Tasks 6-14 needed finer text- and surface-hierarchy * steps than the four base tokens alone give (a hairline reads differently * from a border, muted meta text from body text), so every task from Nav * onward introduced literal hex greys as it went, each one legitimate on * its own but never registered anywhere. Task 16's whole-site colour audit * is what actually surfaced them all at once: 14 distinct colours in the * built CSS, not 4. All ten of these are achromatic (no rogue hue sneaked * in alongside them, which is what the audit is actually guarding * against), so registering them here is the "add it to tokens.css... so * every addition is a decision rather than a drift" the audit's own * comment asks for, rather than a silent one. * Two families: near-black surfaces/borders, and muted text. */ --surface-1: #141414; --surface-2: #171717; --surface-3: #1E1E1E; --surface-4: #232323; --surface-5: #2A2A2A; --surface-6: #3D3D3D; /* Raised from a 5.23:1-on-black value. --text-quiet carries ~90% of the site's 11-14px meta/label text (checked: 34 of 38 pairings site-wide), where WCAG's flat 4.5:1 floor is real but not generous enough to read comfortably at that size. Now 6.23:1. It's also the last remaining grey text tier: --text-muted/--text-dim/--text-soft read as too hard to read for real body copy, so they now resolve straight to --type (white) and stay only as semantic names so call sites don't need touching. --text-quiet stays grey because it carries genuinely minor annotations only (eyebrow labels, timestamps, source attribution), never body copy. */ --text-quiet: #8C8C8A; --text-muted: var(--type); --text-dim: var(--type); --text-soft: var(--type); /* Type scale. Display sizes are fluid; the article measure is fixed at ~68ch. */ --step-quote: clamp(30px, 4.6vw, 64px); /* Sized for a genuinely long quote (30+ words): the previous 50px max read as oversized once beat 3 started sourcing a real athlete quote of that length rather than a short placeholder. */ --step-quote-long: clamp(19px, 2.6vw, 34px); --step-title: clamp(30px, 4.4vw, 52px); --step-section: clamp(22px, 2.6vw, 34px); --step-body: 19px; --step-meta: 13px; --leading-tight: 1.01; --leading-body: 1.72; --tracking-display: -0.035em; --measure: 68ch; --gutter: 8vw; } /* * Layout primitives (Design Contract v2 Stage C7, Handoff #442). Opt-in only: a page uses * them when it is migrated (C8), so adding this file changes no existing page. * * Three composition canvases, not one site-wide max-width: * .canvas--reading sustained text: article body, legal, FAQ answers, method notes * .canvas--editorial composed chapters: home, coaching, plans, case studies, contact * .canvas--data tools with tables, charts and forms: RI result, finder, calendar * Each canvas centres on the same axis at every width; past its max the extra space is * the ground colour. Nothing scales whitespace in vw beyond the clamped gutter. * * Full-bleed exception: photographic openings, the home pull quote, quiet closing CTAs and * RI course photography span the viewport (.canvas-bleed) and put their text back on a canvas. */ :root { --canvas-reading: 1240px; --canvas-editorial: 1440px; --canvas-data: 1240px; --canvas-gutter: clamp(20px, 4vw, 64px); --canvas-gutter-reading: clamp(20px, 5vw, 64px); /* * Reading measure for 19px body-face prose. In this face 1ch (the width of "0") is wider * than an average letter, so the ch value is not the line length: 68ch set about 80 * characters. C6 calibrated articles at 50ch and legal at 54ch, both 60-68 characters * set. This token is checked on rendered lines (scripts/lib/reading-measure.mjs, run by * check-layout-primitives.mjs); a page that sets prose in another face or size must * re-measure rather than reuse it. */ --reading-measure: 52ch; /* One layout owner sets each boundary once (no stacked padding + margin). Bigger space only where the topic really changes. */ /* Inline padding that puts a full-bleed chapter's text back on the Editorial canvas. */ --bleed-inset: max(var(--canvas-gutter), calc((100vw - var(--canvas-editorial)) / 2)); --chapter-gap: clamp(56px, 8vh, 112px); --section-gap: calc(var(--chapter-gap) / 2); } .canvas { box-sizing: border-box; width: 100%; max-width: calc(var(--canvas-max) + 2 * var(--canvas-pad)); margin-inline: auto; padding-inline: var(--canvas-pad); min-width: 0; } .canvas--reading { --canvas-max: var(--canvas-reading); --canvas-pad: var(--canvas-gutter-reading); } .canvas--editorial { --canvas-max: var(--canvas-editorial); --canvas-pad: var(--canvas-gutter); } .canvas--data { --canvas-max: var(--canvas-data); --canvas-pad: var(--canvas-gutter); } .canvas-bleed { width: 100%; max-width: none; margin-inline: 0; } .reading-measure { max-width: var(--reading-measure); } /* Tables and wide charts scroll inside their own region, never the page. */ .data-region { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; } /* * Cross-document view transitions, CSS only. Spec §8 asks for native View * Transitions between routes; this is the native form and costs no JavaScript, * which is what lets article pages stay script-free. Browsers without support * navigate instantly, which §8 names as the accepted fallback. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ground); scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; /* The site has no light mode (tokens.css's --ground is pure black by deliberate design, spec §5), so telling the UA that up front keeps native chrome — scrollbars, form controls, the browser's own dark/light heuristics — in the same dark register as the page around it. */ color-scheme: dark; } /* Fixed product header: in-page navigation must never land underneath it. */ [id] { scroll-margin-top: 84px; } body { margin: 0; background: var(--ground); color: var(--type); font-family: var(--font-display), system-ui, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; } /* * touch-action: manipulation drops the double-tap-to-zoom delay some mobile * browsers still add before honouring a tap on these; every one of them is * already a real button/link/control with its own tap target, never a zoom * surface. The default translucent tap highlight is disabled deliberately, * not silently: every one of these elements already carries its own * hover/active/focus-visible feedback, and the default highlight is a light * flash that reads wrong against this site's all-black ground. */ a, button, input, select, textarea, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; translate: 0 -160%; padding: 10px 14px; background: var(--type); color: var(--ground); border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; transition: translate .18s ease; } .skip-link:focus-visible { translate: 0; } /* * Every "Book an intro call" control is a