/* * Base reset, typography, and accessibility fundamentals (skip link, focus * states, landmark spacing). Component-specific styling lives in components.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background-color: var(--color-accent-soft); color: var(--color-ink); } img, picture, video, svg { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-sans); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-xs); font-weight: 700; text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); } p { margin: 0 0 var(--space-sm); max-width: var(--measure); } .text-center p { margin-inline: auto; } small { font-size: var(--text-xs); } a { color: var(--color-link); text-underline-offset: 0.16em; text-decoration-thickness: 1px; transition: color var(--motion-fast); } ul, ol { padding-left: 1.25em; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--space-2xl); } .section--alt { background-color: var(--color-surface-alt); } .section--dark { background-color: var(--color-surface-dark); color: var(--color-text-inverse); } .section--dark h2, .section--dark h3 { color: var(--color-text-inverse); } .section__heading { max-width: 38rem; margin-inline: auto; text-align: center; margin-bottom: var(--space-lg); } .section__heading p { color: var(--color-text-muted); font-size: var(--text-base); margin-inline: auto; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--color-surface-dark); color: var(--color-text-inverse); padding: var(--space-xs) var(--space-sm); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* Visible focus states everywhere, native semantics preferred over ARIA */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .screen-reader-text:focus { position: static; width: auto; height: auto; clip: auto; } /* Progressive-enhancement scroll reveal (assets/js/reveal.js), targeting existing section/card/testimonial elements directly — no markup changes needed in any template. Content is fully visible with no JS or with prefers-reduced-motion; JS only adds .js-reveal to when it's safe to animate. */ .js-reveal .section, .js-reveal .card, .js-reveal .testimonial { opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow), transform var(--motion-slow); } .js-reveal .section.is-visible, .js-reveal .card.is-visible, .js-reveal .testimonial.is-visible { opacity: 1; transform: none; }