/* ========================================================================== BASE - global resets, typography defaults, body styles, accessibility foundations, focus states, reduced-motion behavior. ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* clip, not hidden: hidden (with no overflow-y set) makes the browser treat this as a scroll container in its own right, which silently breaks position: sticky on descendants like .site-header - clip still prevents horizontal overflow without that side effect. */ overflow-x: clip; max-width: 100%; /* iOS Safari auto-inflates text inside narrow, overflow-hidden blocks (exactly what the hours-pill marquee is) to "help" readability - that's what was blowing the pill up to several times its designed size on phones. Pin it off so every element renders at its actual CSS font-size instead. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; letter-spacing: -0.01em; } /* Applied to and by openMobileMenu()/closeMobileMenu() (see main.js, bundle.js, account.js) while the sheet is open. Both elements need the lock, not just body - on iOS Safari, overflow:hidden on body alone can still let the outer document rubber-band/bounce, which was very likely the source of the shaking the sheet itself appeared to have. */ html.mobile-menu-open, body.mobile-menu-open { overflow: hidden; height: 100%; } html[data-signed-in="true"] .guest-only { display: none; } html[data-signed-in="true"] #appHome { display: block; } /* Global, visible keyboard-focus ring. Before this, only one component (.card-carousel-arrow) had any :focus-visible treatment at all - every other interactive element (nav links, buttons, cards, footer links) was relying entirely on the browser's own default outline, which several more specific rules elsewhere quietly override to `outline: none` without providing a replacement (see forms.css's .track-input-wrap input, fixed alongside this). :focus-visible only fires for keyboard/ programmatic focus (Tab, screen readers), never for a mouse click, so this can't add unwanted visual noise anywhere - it only fills gaps. Two-tone ring (dark line + yellow halo) so it stays clearly visible regardless of what's behind it - a single yellow ring can vanish against the site's own yellow buttons/pills, and a single dark ring can vanish against the black header/footer. */ :focus-visible { outline: 2px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 4px var(--yellow); border-radius: 4px; } :root[data-theme="dark"] :focus-visible { outline-color: var(--white); } /* Inputs, tables and a handful of components reference the light literal colors directly rather than a semantic token (see the theme-toggle button and form/table rules below) - these overrides catch the ones a plain variable swap can't reach. */ :root[data-theme="dark"] body { color-scheme: dark; }