/* ------------------------------------------------------------------ * Base styles: reset, page background, typography defaults, * focus, motion preferences, accessibility helpers. * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Author `display` on components must not defeat the native hidden attribute. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-anchor-offset); background: var(--color-bg); -webkit-text-size-adjust: 100%; } /* * Section anchors: any element targeted via a hash link gets pushed below * the sticky nav so search-result deep links land on real content, not * underneath the header. */ :target, section[id], [id^="hero"], .section-head h2[id] { scroll-margin-top: var(--scroll-anchor-offset); } /* * Single overlay scroll-lock primitive. * Uses `position: fixed` on + a temporary `top` offset * so iOS Safari does not snap the visible area back to top. * The companion JS reads `data-scroll-lock-y` on close. */ html.is-scroll-locked, body.is-scroll-locked { overflow: hidden; overscroll-behavior: none; touch-action: none; } body.is-scroll-locked { position: fixed; width: 100%; left: 0; right: 0; } body { margin: 0; min-height: 100vh; /* Dynamic viewport unit: prevents iOS Safari URL bar collapse from leaving a gap below the page when the bar shrinks. Falls back to 100vh on browsers that don't support dvh. */ min-height: 100dvh; color: var(--color-text); font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-normal); } /* Sticky-footer pattern: short pages (e.g. /privacy/, 404) push the footer to the bottom of the viewport instead of floating mid-screen. */ .page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .page > main { flex: 1 0 auto; } .page > footer { flex-shrink: 0; background-color: var(--color-bg); background-image: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.32; background-image: var(--bg-stars); background-size: 120px 120px, 190px 190px; background-position: 18px 34px, 70px 88px; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.7) 54%, transparent 100%); } a { color: inherit; text-decoration: none; } picture { display: contents; } img { max-width: 100%; display: block; } button { font-family: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: var(--font-weight-black); letter-spacing: var(--letter-spacing-medium); } h1 { font-size: var(--font-size-display); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } h2 { font-size: var(--font-size-h2); line-height: 1; } h3 { font-size: var(--font-size-3xl); letter-spacing: var(--letter-spacing-card); } p { margin: 0; } /* ----- Visible focus ring --------------------------------------- */ :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 4px; } /* ----- Screen-reader only -------------------------------------- */ .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; } /* * Skip-to-content link. Visually hidden until focused with the keyboard; * sits above every overlay so AT users can leap past the nav and the * language switcher straight to the page content. */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 16px; background: var(--color-bg-elevated, #0a0e22); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 12px; font-weight: var(--font-weight-semibold); text-decoration: none; box-shadow: var(--shadow-elevated, 0 16px 40px rgba(0, 0, 0, 0.55)); transform: translateY(-160%); transition: transform var(--duration-normal, 240ms) var(--ease-out, ease); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--color-accent-blue, #38bdf8); outline-offset: 2px; } /* ----- Reduced motion ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .modal-backdrop, .modal, .btn, .sticky-actions { backdrop-filter: none !important; transform: none !important; will-change: auto !important; } } /* ----- Performance hints --------------------------------------- */ /* * Off-screen sections of the marketing landing render lazily to keep * the initial paint cheap. The performance hint is intentionally * scoped to the landing page (``); short * documents like /privacy/ or /404 don't benefit and reserving 900px * per section there leaves visible empty space inside the card. */ [data-site-page="home"] section:not(.hero) { content-visibility: auto; contain-intrinsic-size: 1px 900px; } [data-site-page="home"].has-precise-anchor-scroll section:not(.hero) { content-visibility: visible; }