/** * Reset, root typography and layout primitives shared by every page. * Loaded immediately after tokens.css and before any component or page stylesheet. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The mobile drawer and modals lock scrolling by adding this to . */ body.is-locked { overflow: hidden; } h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: -0.01em; } h1 { font-size: var(--text-hero); line-height: var(--text-hero-lh); letter-spacing: -0.02em; } /* Section headings sit a weight lighter than the hero, as in the design. */ h2 { font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: var(--weight-medium); } h3 { font-size: var(--text-h3); line-height: var(--text-h3-lh); } h4 { font-size: var(--text-h4); line-height: var(--text-h4-lh); font-weight: var(--weight-semibold); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--text-accent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } /* One visible focus treatment everywhere — the design has no focus states of its own. */ :focus-visible { outline: 2px solid var(--color-green-primary); outline-offset: 2px; border-radius: var(--radius-xs); } /* ---------- Layout primitives ---------- */ /* The container tokens are the design's *content* widths (1552 = the 1920 canvas less its 184px margins), so the gutter has to sit outside them — with border-box sizing a bare `max-width` would eat 48px out of every section. */ .container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); } .container--narrow { max-width: calc(926px + 2 * var(--gutter)); } .section { padding-block: var(--space-22); } .section--tint { background: var(--surface-tint); } /* Figma stops the mint wash at 41% of the section height, not at the bottom edge. */ .section--mint { background: linear-gradient(180deg, var(--surface-mint) 0%, var(--surface-page) 41.091%); } .section--flush { padding-block: 0; } /* Centred heading + sub-heading pair used at the top of most home sections. */ .section-head { display: flex; flex-direction: column; gap: var(--space-4); align-items: center; text-align: center; margin-bottom: var(--space-20); } .section-head--start { align-items: flex-start; text-align: left; } /* Figma: Inter Regular 20/32 in grey-secondary, not the softer body grey. */ .section-head__sub { font-size: var(--text-lead); line-height: var(--text-lead-lh); color: var(--color-grey-secondary); max-width: 720px; } .section-head--inverse .section-head__sub { color: var(--text-inverse-muted); } .section-head--inverse h2 { color: var(--text-inverse); } /* ---------- Utilities ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .text-muted { color: var(--text-muted); } .text-accent { color: var(--text-accent); } [hidden] { display: none !important; } @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; } }