/* ========================================================================== Laarish Base — reset + typography defaults Loaded after tokens.css, before components.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* `clip` (vs `hidden`) prevents horizontal page scroll without turning into a scroll container — keeps position: sticky working on the site header. Falls back to `hidden` in older browsers. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Safety net: never leave scroll-reveal content hidden or mid-transform for reduced-motion users (guards against ghosting/stuck states). */ [data-reveal], .reveal { opacity: 1 !important; transform: none !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; /* belt and braces — no horizontal page scroll, sticky still works */ } /* Headings — Nunito, tight line height */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--lh-tight); color: var(--text-primary); margin: 0 0 var(--space-3); } h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); } p { margin: 0 0 var(--space-3); } a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-base); } a:hover { color: var(--color-teal); } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { padding-inline-start: 1.25rem; margin: 0 0 var(--space-3); } li + li { margin-top: var(--space-2); } /* Pull quote / accent */ .accent { font-family: var(--font-accent); font-style: italic; font-weight: var(--fw-regular); } /* Containers ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Sections --------------------------------------------------------------- */ .section { padding-block: var(--space-7); } @media (min-width: 768px) { .section { padding-block: var(--space-8); } } .section--cream { background-color: var(--color-cream); } .section--white { background-color: var(--color-white); } .section--navy { background-color: var(--color-navy); color: var(--text-on-dark); } .section--navy h1, .section--navy h2, .section--navy h3 { color: var(--text-on-dark); } .section--yellow { background-color: var(--color-yellow); color: var(--color-navy); } .section__title { margin-bottom: var(--space-5); } /* Skip link --------------------------------------------------------------- */ .skip-link { position: absolute; left: var(--space-3); top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-navy); color: var(--color-white); border-radius: var(--radius-sm); transform: translateY(-200%); transition: transform var(--t-base); z-index: 1000; } .skip-link:focus { transform: translateY(0); } /* Anchor offset for sticky header ---------------------------------------- */ :target, [id] { scroll-margin-top: calc(var(--header-height) + var(--space-3)); } /* Visually hidden -------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Focus ring (consistent across components) ------------------------------ */ :focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; border-radius: var(--radius-sm); }