/* ========================================================================== base.css — modern reset, typography, focus rules, motion preferences -------------------------------------------------------------------------- Loaded AFTER tokens.css. Nothing visual lives here that isn't tied to a semantic HTML element or accessibility behaviour. ========================================================================== */ /* ---------- Fonts --------------------------------------------------------- DM Serif Display (headings) and DM Sans (body/subheadings) are loaded via Google Fonts from each HTML . Keeping it CDN-driven means no asset pipeline and zero build step. The CSS variables in tokens.css name these faces and provide system fallbacks while the network request is in flight. */ /* ---------- Reset / sensible defaults ------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { /* Use 1rem = 16px (browser default). We never restyle the root size. */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Disable smooth scrolling for users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; /* v2: the header is a white bar flush to the top edge — no body padding above it (that previously left a cream strip over the white bar). The header's own padding sets how far the brand sits from the top. */ padding-top: 0; min-height: 100svh; background: var(--color-bg); color: var(--color-text-body); font-family: var(--font-body); font-size: var(--fs-step-0); line-height: var(--lh-base); font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, picture { display: block; max-width: 100%; height: auto; } /* Inputs inherit type styles unless we say otherwise. */ input, button, textarea, select { font: inherit; color: inherit; } /* Reset the browser's default fieldset border + padding. We deliberately use
on the multi-step form to group related radios for screen readers, but the default groove border was rendering as an unintended outline around each step. */ fieldset { border: 0; padding: 0; margin: 0; min-width: 0; /* lets fieldset content shrink in flex/grid contexts */ } legend { padding: 0; /* Legends are styled inline by the form — let them flow normally. */ } /* ---------- Headings ----------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-s) 0; color: var(--color-text); font-family: var(--font-display); /* DM Serif Display ships a single 400 weight. Asking for 600 made the browser synthesise bold. Lewis's type scale is all Regular with letter-spacing 0 — sans subheadings set their own heavier weight. */ /*font-weight: 400;*/ line-height: var(--lh-tight); letter-spacing: 0; text-wrap: balance; } h1 { font-size: var(--fs-step-5); } /* v2: section headings sit ~40px to match Lewis's scale (was up to 56px). */ h2 { font-size: var(--fs-step-3); } h3 { font-size: var(--fs-step-3); } h4 { font-size: var(--fs-step-2); } h5 { font-size: var(--fs-step-1); } h6 { font-size: var(--fs-step-0); text-transform: uppercase; letter-spacing: 0.06em; } p { margin: 0 0 var(--space-s) 0; max-width: var(--measure); text-wrap: pretty; } /* Use the body face on copy explicitly — protects against parent overrides. */ p, li, dt, dd, label, input, textarea, button { font-family: var(--font-body); } /* ---------- Links -------------------------------------------------------- */ a { color: var(--color-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } /* ---------- Focus -------------------------------------------------------- */ /* We never remove the outline without replacing it. Keyboard users always get a 3px ring with ≥3:1 contrast against any of our backgrounds. */ :focus-visible { outline: var(--border-focus); outline-offset: 3px; border-radius: var(--radius-sm); } /* When the focus target is already saffron-coloured, switch ring to plum. */ .is-on-saffron :focus-visible, [data-focus-on="saffron"]:focus-visible { outline-color: var(--color-focus-ring-on-saffron); } /* is not interactive — it's a heading. The form's JS focuses each step's legend on render so screen readers announce the new step, but that programmatic focus shouldn't render as a big saffron border around the heading. Keep the focus, hide the ring. */ legend:focus, legend:focus-visible { outline: none; } /* ---------- Skip link ---------------------------------------------------- */ .skip-link { position: absolute; top: var(--space-2xs); left: var(--space-2xs); padding: var(--space-2xs) var(--space-s); background: var(--color-text); color: var(--color-text-on-dark); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; transform: translateY(-200%); transition: transform var(--duration-base) var(--ease-out); z-index: var(--z-modal); } .skip-link:focus { transform: translateY(0); } /* ---------- Visually hidden (still screen-reader accessible) ------------- */ .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Print -------------------------------------------------------- */ @media print { body { background: white; color: black; } a::after { content: " (" attr(href) ")"; font-size: 0.85em; } }