/** * Vanceli - Base Styles * ---------------------------------------------------------------------------- * Reset, global typography, and accessibility primitives shared by every * page. References: design.md §2 (Typography), §4 (Accessibility Guidelines). * Depends on: tokens.css (must be linked before this file). */ *, *::before, *::after { box-sizing: border-box; } html, body { padding: 0; margin: 0; } html { -webkit-text-size-adjust: 100%; /* never lock zoom - design.md §2.2 */ } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--text-primary); background-color: var(--bg-base); transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); margin: 0 0 var(--space-3); letter-spacing: -0.02em; line-height: 1.2; } h1 { font-size: var(--text-h1); font-weight: 700; } h2 { font-size: var(--text-h2); font-weight: 700; } h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: 0; } h4 { font-size: var(--text-h4); font-weight: 600; letter-spacing: 0; } h5 { font-size: var(--text-h5); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 var(--space-4); max-width: 70ch; /* design.md §2.2 line-length rule */ } a { color: var(--accent); } small, .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-secondary { color: var(--text-secondary); } .font-mono { font-family: var(--font-mono); } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { padding: 0; margin: 0; list-style: none; } /* ---- Visually-hidden utility (used for a11y-only labels/live regions) ---- */ .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; } /* ---- Skip link (design.md §4.8) ---- */ .skip-link { position: absolute; top: -48px; left: var(--space-4); z-index: var(--z-tooltip); background: var(--accent); color: var(--accent-text-on); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: var(--space-4); } /* ---- Focus states (design.md §4.2) - visible on every interactive element ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); } /* ---- Respect reduced motion (design.md §3.5, §4.7) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Simple responsive container (design.md §3.2) ---- */ .container { width: 100%; max-width: var(--container-desktop); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 1440px) { .container { max-width: var(--container-large); } } /* ---- Overlay scroll lock (design.md §10/§4.3) ----------------------------- * Applied to by assets/js/lib/scroll-lock.js while a drawer/off-canvas * overlay is open, so only the overlay itself scrolls - not the page behind * it. `height: 100%` is needed alongside `overflow: hidden` for this to take * effect reliably on both and across browsers. */ html.scroll-locked, html.scroll-locked body { overflow: hidden; height: 100%; }