/* ========================================================================== THE ATKINSON METHOD — DESIGN TOKENS Phase 1 foundation. Every colour, size and timing used anywhere on the site is defined here. Change a value here and it changes site-wide. ========================================================================== */ :root { /* --- COLOUR ------------------------------------------------------------- Blue / black / white, per brand direction. Contrast ratios noted against their intended background. AA = 4.5:1 for body text, 3:1 for large text and UI borders. ------------------------------------------------------------------------ */ /* Neutrals — dark */ --c-ink: #0B0D10; /* primary dark background (near-black charcoal) */ --c-ink-raised: #16191F; /* cards / raised surfaces on dark */ --c-ink-line: #262B33; /* hairline dividers on dark */ /* Neutrals — light */ --c-white: #FFFFFF; --c-grey-50: #F4F5F7; /* subtle secondary background */ --c-grey-100: #E7E9ED; /* hairline dividers on light */ --c-grey-600: #5B626D; /* muted text on white — 6.4:1 AA */ --c-grey-400: #9AA1AC; /* muted text on ink — 7.1:1 AA */ /* Blue */ --c-blue: #1F4FD8; /* PRIMARY brand blue. On white 5.6:1 AA */ --c-blue-deep: #10306E; /* large dark-blue fields / section backgrounds */ --c-blue-bright: #4E7BF0; /* links + accents ON dark. On ink 5.6:1 AA */ --c-blue-hover: #1A42B4; /* button hover on light */ --c-blue-wash: #EEF2FE; /* faint blue tint for selected states */ --c-blue-line: rgba(31, 79, 216, 0.22); /* hairline rules, brand-tinted */ /* Semantic — forms */ --c-error: #B3261E; /* on white 6.1:1 AA */ --c-error-wash: #FCEFEE; --c-success: #17603F; /* on white 6.5:1 AA */ /* Semantic roles (use these in components, not raw colours above) */ --bg-page: var(--c-white); --bg-subtle: var(--c-grey-50); --bg-inverse: var(--c-ink); --text-primary: var(--c-ink); --text-muted: var(--c-grey-600); --text-inverse: var(--c-white); --text-inverse-muted: var(--c-grey-400); --border-subtle: var(--c-grey-100); --accent: var(--c-blue); /* --- TYPE --------------------------------------------------------------- Two families only. Archivo carries display + eyebrows; Instrument Sans carries all reading text. Self-host both as variable fonts, woff2, latin subset, font-display: swap. ------------------------------------------------------------------------ */ --font-display: 'Archivo', system-ui, -apple-system, sans-serif; --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; /* Fluid scale — mobile value first, desktop ceiling second */ --t-display-xl: clamp(2.75rem, 8.5vw, 5.25rem); /* hero only */ --t-display-l: clamp(2.25rem, 6vw, 3.5rem); /* page titles */ --t-h2: clamp(1.75rem, 4.5vw, 2.5rem); /* section headings */ --t-h3: clamp(1.25rem, 2.6vw, 1.5rem); /* card headings */ --t-body-l: 1.125rem; /* lead paragraphs */ --t-body: 1rem; --t-small: 0.875rem; --t-eyebrow: 0.75rem; --lh-tight: 1.02; /* display */ --lh-heading: 1.14; --lh-body: 1.6; --ls-display: -0.03em; /* tighten large Archivo */ --ls-heading: -0.015em; --ls-body: 0; --ls-eyebrow: 0.16em; /* wide-tracked caps, replaces a third font */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --measure: 64ch; /* max line length for body copy */ --measure-lead: 48ch; /* max line length for lead paragraphs */ /* --- SPACE -------------------------------------------------------------- 4px base unit. Use the scale — do not invent intermediate values. ------------------------------------------------------------------------ */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ /* Vertical rhythm between major sections — the "breathing room" */ --section-y: clamp(var(--s-8), 10vw, var(--s-10)); /* Page gutters and grid */ --gutter: clamp(var(--s-4), 5vw, var(--s-7)); --max-width: 1240px; --grid-cols: 12; --grid-gap: clamp(var(--s-4), 2.5vw, var(--s-5)); /* --- SHAPE -------------------------------------------------------------- Restrained. Two radii only. Full-bleed sections and images stay square. ------------------------------------------------------------------------ */ --r-sm: 4px; /* buttons, inputs */ --r-md: 8px; /* cards, questionnaire options */ --border-hairline: 1px; /* --- ELEVATION ---------------------------------------------------------- Shadows are near-invisible by design; separation comes from hairlines and space, not from drop shadows. ------------------------------------------------------------------------ */ --shadow-card: 0 1px 2px rgba(11, 13, 16, 0.04), 0 8px 24px rgba(11, 13, 16, 0.06); --shadow-sticky:0 -1px 0 var(--c-grey-100), 0 -8px 24px rgba(11, 13, 16, 0.08); /* --- MOTION ------------------------------------------------------------- "Very restrained motion." Fades and short translations only. No parallax, no scale-on-scroll, no looping ambient animation. ------------------------------------------------------------------------ */ --dur-fast: 160ms; /* hover, focus, button press */ --dur-base: 280ms; /* questionnaire step transitions, accordions */ --dur-slow: 520ms; /* scroll-triggered reveals */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --reveal-shift: 12px; /* max distance any element travels on reveal */ /* --- INTERACTION -------------------------------------------------------- Mobile-first: every interactive element meets a 48px minimum target. ------------------------------------------------------------------------ */ /* Questionnaire embed height. THIS is the value to change if the form needs to be taller. min() takes whichever is smaller, so raise BOTH numbers — lifting the vh alone does nothing once the px cap is binding. */ --tf-height: min(88vh, 900px); --tf-height-mobile: 82vh; --tap-min: 48px; --focus-width: 3px; --focus-offset: 2px; --focus-colour: var(--c-blue); --focus-colour-inverse: var(--c-blue-bright); /* Sticky chrome */ --nav-h: 64px; --mobile-cta-h: 72px; /* sticky bottom CTA bar */ --z-nav: 100; --z-mobile-cta: 90; --z-questionnaire: 200; --z-cookie: 300; } /* --- DARK SECTIONS --------------------------------------------------------- Add class="on-ink" to any section that sits on the dark background. Semantic roles flip; component CSS needs no dark-specific rules. --------------------------------------------------------------------------- */ .on-ink { --bg-page: var(--c-ink); --bg-subtle: var(--c-ink-raised); --text-primary: var(--c-white); --text-muted: var(--c-grey-400); --border-subtle: var(--c-ink-line); --accent: var(--c-blue-bright); --focus-colour: var(--c-blue-bright); background: var(--bg-page); color: var(--text-primary); } .on-blue { --bg-page: var(--c-blue-deep); --text-primary: var(--c-white); --text-muted: #B9C6E8; /* on blue-deep 7.0:1 AA */ --border-subtle: rgba(255,255,255,0.16); --accent: var(--c-white); --focus-colour: var(--c-white); background: var(--bg-page); color: var(--text-primary); } /* --- ACCESSIBILITY BASELINE ------------------------------------------------ */ *:focus-visible { outline: var(--focus-width) solid var(--focus-colour); outline-offset: var(--focus-offset); border-radius: var(--r-sm); } /* Never remove focus rings. This only hides them for mouse users who have not tabbed, which :focus-visible already handles. */ *:focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-10)); z-index: calc(var(--z-nav) + 1); padding: var(--s-3) var(--s-4); background: var(--c-white); color: var(--c-ink); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: var(--s-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --reveal-shift: 0px; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }