/* ========================================================================== Base Styles — modern CSS reset + body defaults Requires: tokens.css loaded before this file. Do NOT add component-level styles here. Keep under ~90 lines of rules. ========================================================================== */ /* ---- Box-sizing reset ---- */ *, *::before, *::after { box-sizing: border-box; } /* ---- Margin / padding reset ---- */ html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; } /* ---- List normalisation ---- */ ul, ol { list-style: none; } /* ---- Media defaults ---- */ img, svg, video { display: block; max-width: 100%; height: auto; } /* ---- Form element resets ---- */ button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { background: none; border: none; padding: 0; cursor: pointer; } /* ---- Body defaults (consume tokens) ---- */ body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 17px; /* matches reference design body — intentional, no --font-size-base token in reference :root */ line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Heading defaults ---- */ h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--sans); font-weight: 700; line-height: 1.2; } /* ---- Link defaults (components add their own colour / underline) ---- */ a { color: inherit; text-decoration: none; } /* ---- Selection ---- */ ::selection { background: var(--accent); color: var(--ink-light); } /* ========================================================================== Accessibility utility ========================================================================== */ /* Screen-reader-only text. Used by T3 (burger label) and any icon-only control. Reveals nothing visually; announced by screen readers. */ .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; } /* ========================================================================== Scroll-lock utility — shared by T3 (mobile-menu.js) and T8 (popup.js) ========================================================================== */ /* * JS CONTRACT (must be followed by every consumer — T3, T8): * * LOCK: * 1. document.documentElement.style.setProperty('--scroll-y', window.scrollY + 'px') * 2. document.documentElement.classList.add('scroll-locked') * * UNLOCK: * 1. const y = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--scroll-y')) || 0 * 2. document.documentElement.classList.remove('scroll-locked') * 3. window.scrollTo(0, y) * * REF-COUNT: T3 and T8 must implement a shared ref-count so that opening * a popup over an open menu (lock×2 / unlock×2) still works correctly. * Only the first lock reads --scroll-y; only the last unlock restores scrollY. * * WHY position:fixed + top: The iOS Safari bug where overflow:hidden on * / is silently ignored. Pinning body at calc(-1 * --scroll-y) * freezes the viewport without jumping; restoring scrollY on unlock brings * the user back to where they were. */ html.scroll-locked, html.scroll-locked body { overflow: hidden; } html.scroll-locked body { position: fixed; top: calc(-1 * var(--scroll-y, 0px)); left: 0; right: 0; width: 100%; } /* ========================================================================== No-JS fallback utilities — Decision 11 starts with class="no-js"; an inline one-liner in swaps it to "js" immediately. The rules below activate only when JS never runs. ========================================================================== */ /* Mobile nav fallback: hidden by default, revealed only when JS is absent. The .mobile-nav-fallback element is placed in the header HTML (T3). */ html.no-js .mobile-nav-fallback { display: block; }