/* ========================================================================== base.css — reset, typography, layout primitives, motion Google Fonts are loaded via in each page . ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; color: var(--text); background: var(--bg); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } /* Headings ---------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; color: var(--text); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.15; } p { color: var(--text); } /* Eyebrow / spec-sheet labels -------------------------------------------- */ .eyebrow { font-family: var(--font-label); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue-700); } .section-index { font-family: var(--font-label); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; color: var(--muted); } /* Layout primitives ------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 10vw, 130px); } .section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 5vw, 60px); max-width: 720px; } .section__head .lead { font-size: var(--fs-lead); color: var(--text-muted); } /* Scroll-reveal ----------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Accessibility ----------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 6px; } .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 { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--blue-700); color: #fff; padding: 10px 18px; border-radius: var(--r-pill); transition: top 0.2s ease; } .skip-link:focus { top: 16px; } /* Respect 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; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }