/* ═══════════════════════════════════════════════════════════ EDS BRANDING WEBSITE - STANDARD STYLES ═══════════════════════════════════════════════════════════ */ /* Self-hosted replacements for the three Google Fonts previously loaded from fonts.googleapis.com — same families/weight ranges as that request, latin subset only (no cyrillic/greek/vietnamese glyphs needed on this site), pulled directly from Google's own CDN files rather than re-exported. Testing whether removing the Google-CDN round-trip alone is enough to stop the Georgia→serif swap from being visible, before adding a font-loading gate. */ @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Variable.woff2') format('woff2-variations'), url('fonts/SourceSerif4-Variable.woff2') format('woff2'); font-weight: 200 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Variable-Italic.woff2') format('woff2-variations'), url('fonts/SourceSerif4-Variable-Italic.woff2') format('woff2'); font-weight: 200 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('fonts/HankenGrotesk-Variable.woff2') format('woff2-variations'), url('fonts/HankenGrotesk-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('fonts/HankenGrotesk-Variable-Italic.woff2') format('woff2-variations'), url('fonts/HankenGrotesk-Variable-Italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Overpass'; src: url('fonts/Overpass-Variable.woff2') format('woff2-variations'), url('fonts/Overpass-Variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ═══ FONT-LOAD GATE ═══ Shown once per session, on whichever page a visitor lands on first (gated by sessionStorage — see the inline script at the top of each page's ). The opaque cover is a pure CSS pseudo-element, no markup needed for it; the wordmark reveal itself (built by that same script, once exists) is real per-letter DOM so each character can be masked and staggered independently — not something a pseudo-element can do. Hides the Georgia→serif swap until webfonts are confirmed loaded (a fixed minimum duration + document.fonts.ready, capped by a hard timeout so a stalled font load can never hang the page). Deliberately not Datum — Datum's whole identity is wandering to an unpredictable spot on the page, so pinning him centered in a loader would read as a different, incongruent character. */ html.eds-gate body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; /* height, not inset:0's implicit bottom:0 — on iOS Safari, inset:0 sizes a fixed element against the viewport's "large" (toolbars collapsed) state, which can be taller than what's actually on screen right at page load before Safari settles the address bar, leaving a sliver top/bottom that shows body's own cream background through instead of this cover. 100dvh tracks the real visible area directly; 100vh is only the fallback for browsers without dvh support. */ height: 100vh; height: 100dvh; background: #12100D; z-index: 999999; opacity: 1; transition: opacity 0.5s ease; } html.eds-gate.eds-gate--done body::before { opacity: 0; pointer-events: none; } #eds-gate-word { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000000; font-family: var(--serif); font-size: clamp(1.75rem, 4.5vw, 2.75rem); color: #FFF5EC; white-space: nowrap; text-transform: lowercase; letter-spacing: 0.01em; pointer-events: none; } /* Each letter is its own overflow:hidden mask around an inner span — the inner span is what actually translates, sliding up from below the mask's bottom edge (in) or back down through it (out), so it reads as emerging from / receding into a line just beneath the word rather than fading in from nowhere. */ .eds-gl { display: inline-block; overflow: hidden; vertical-align: bottom; } .eds-gl > span { display: inline-block; transform: translateY(115%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .eds-gl--accent > span { color: #CC9762; font-style: italic; } .eds-gl--space { width: 0.32em; } #eds-gate-word.eds-in .eds-gl > span { transform: translateY(0); } #eds-gate-word.eds-out .eds-gl > span { transform: translateY(115%); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #FFF5EC; --ink: #12100D; --ink-mid: #12100D; --ink-dim: #8c7f6e; --heritage: #8C5A3C; --serif: 'Source Serif 4', Georgia, serif; --mono: 'Overpass', sans-serif; --body: 'Hanken Grotesk', sans-serif; /* Hero grid mask-image percentages for different page layouts */ --hero-mask-h-left: 18%; --hero-mask-h-left-narrow: 5%; --hero-mask-h-right-std: 82%; --hero-mask-h-right-alt: 92%; --hero-mask-v-top: 18%; --hero-mask-v-bottom-std: 88%; --hero-mask-v-bottom-narrow: 95%; } html { font-size: 16px; scroll-behavior: smooth; color-scheme: light; scrollbar-color: var(--ink-dim) transparent; } /* Sitewide reduced-motion baseline — collapses every plain CSS transition/animation (the .reveal fade-ins, hover states, nav dropdown transitions, etc.) to near-instant for anyone with the OS "reduce motion" preference set, and drops the smooth-scroll above back to instant jumps. This does NOT reach the JS-driven scroll- jacking/pinned sections (COE/LP/AMC's "our approach" animations, the homepage "staying rooted" pin, the homepage datum's parallax) — those set transform/opacity directly from scroll position in JS rather than through a CSS transition, so this rule has nothing to intercept there. Making those respect reduced-motion needs each one checking matchMedia('(prefers-reduced-motion: reduce)') and falling back to a static, non-scroll-jacked presentation — a bigger, more involved change than this blanket CSS reset covers. */ @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; } } body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.65; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* ═══ HERO GRID BACKGROUND (shared across pages with variable mask-image) ═══ */ .hero-grid-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; mask-image: linear-gradient(to right, transparent 0%, black var(--hero-mask-h-left), black var(--hero-mask-h-right-std), transparent 100%), linear-gradient(to bottom, transparent 0%, black var(--hero-mask-v-top), black var(--hero-mask-v-bottom-std), transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--hero-mask-h-left), black var(--hero-mask-h-right-std), transparent 100%), linear-gradient(to bottom, transparent 0%, black var(--hero-mask-v-top), black var(--hero-mask-v-bottom-std), transparent 100%); /* Two values, not one — older WebKit composites its bottom mask layer against an assumed fully-transparent layer beneath it, and "source-in" (this property's old, non-spec name for "intersect") against nothing is nothing, so a single source-in here masks the whole element out completely (this is what hid the grid entirely on iOS 14). The top layer keeps source-in (intersecting normally against the accumulator); the bottom layer uses xor instead, which sidesteps that "against nothing" case while still landing on the same net intersect result. */ -webkit-mask-composite: source-in, xor; pointer-events: none; } /* ═══ SVG BACKGROUND CONTAINER ═══ */ .svg-bg-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* ═══ OPACITY UTILITIES ═══ */ .opacity-0 { opacity: 0; } /* ═══ REVEAL ═══ Scroll-triggered fade-in utility, previously copy-pasted independently in many pages' own