/** * base.css — Reset, base elements and typography * ----------------------------------------------------------------------------- * Minimal, modern reset followed by the site's baseline element styling. * Component- and section-specific styles live in the other stylesheets. */ /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Offset in-page anchors so section tops clear the fixed header. */ scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; } body { background-color: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Guards against any stray horizontal overflow on phones. `hidden` is the fallback; `clip` is preferred because — unlike `hidden` — it does NOT turn into a scroll container, which on iOS Safari is what breaks smooth anchor scrolling and `scroll-padding-top` (i.e. nav links landing under the fixed header). */ overflow-x: hidden; } @supports (overflow: clip) { body { overflow-x: clip; } } /* ---- Media ------------------------------------------------------------- */ img, video { display: block; max-width: 100%; height: auto; } /* ---- Typography -------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: 0.005em; } p { max-width: 68ch; /* comfortable measure; overridden where needed */ } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } ul { list-style: none; } strong { font-weight: 500; } /* ---- Shared utilities -------------------------------------------------- */ /* Small, wide-tracked label used above headings. */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md); } .eyebrow--light { color: var(--color-on-dark-soft); } .section-title { font-size: var(--fs-h2); color: var(--color-ink); max-width: 20ch; } .section-head { margin-bottom: clamp(2rem, 5vw, 4rem); } .section-head--center { text-align: center; } .section-head--center .section-title { margin-inline: auto; } /* ---- Buttons ----------------------------------------------------------- */ .button { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 1rem 2.25rem; border: 1px solid currentColor; border-radius: var(--radius-sm); cursor: pointer; background: transparent; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .button--outline { color: var(--color-on-dark); } .button--outline:hover, .button--outline:focus-visible { background-color: var(--color-on-dark); color: var(--color-dark); } /* ---- Brand lockup ------------------------------------------------------ */ /* The property name mixes faces: the leading number is set in the sans face (the Cormorant numerals read awkwardly), while the name keeps the display serif. Sizing uses `em` so it scales with each context (header/hero/footer). Applied to elements that main.js renders with .brand-lead + .brand-word. */ .brand-lead { font-family: var(--font-sans); font-weight: 400; font-size: 0.58em; letter-spacing: 0.08em; margin-right: 0.34em; } .brand-word { font-family: var(--font-display); /* inherit, but explicit for clarity */ } /* ---- Accessibility ----------------------------------------------------- */ /* Visible keyboard focus everywhere. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Respect users who prefer 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; } }