/* ========================================================================== GLOBAL.CSS -- Grant Leisure "Visible Dominance" v2 Scope: Resets, base layout primitives, section scaffolding, and accessibility/motion utilities only. Dependencies: tokens.css then typography.css must load before this file. Load order in index.html: tokens.css > typography.css > global.css Last Updated: 2026-04-17 ========================================================================== */ /* -------------------------------------------------------------------------- 01. MODERN CSS RESET Based on Andy Bell's reset with additions for senior-demographic targets. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Remove list styles on ul/ol with a list role -- preserves semantics */ ul[role='list'], ol[role='list'] { list-style: none; } html { /* auto required by Lenis -- native smooth scroll conflicts with Lenis interpolation and causes lag-then-snap. Reduced-motion override below. */ scroll-behavior: auto; } /* Selective html overflow strategy: - Mobile (max-width: 767px): NO overflow rule on . Mobile WebKit (iOS Safari/Brave/Chrome -- all forced to WebKit on iOS) treats overflow on as breaking position:fixed and position:sticky on descendants, causing the projects nav to drift down the page. - Desktop (min-width: 768px): overflow-x: hidden RESTORED. On desktop, position:fixed works correctly with html overflow, AND the rule protects against horizontal scroll flicker on projects.html caused by some content element exceeding viewport width during scroll. The marquee and other potentially-overflowing components have their own overflow: hidden, so the html-level rule is belt-and-suspenders. */ html { /* Navy fallback -- the .page-underlay (z-index: -1) sits ABOVE html but BELOW body in the stacking context. Setting html navy provides the dark fallback visible in mobile browser chrome zones and during the brief moment before GSAP wires the underlay. Body itself must remain transparent so the underlay (z-index: -1, below body) shows through. */ background-color: var(--gl-navy); } @media (min-width: 768px) { html { overflow-x: hidden; } } body { min-height: 100vh; /* Body MUST be transparent. The .page-underlay div has z-index: -1 which places it BEHIND body in the stacking context. If body has any solid background-color, it blocks the underlay from view entirely -- the entire bleed system fails because body's color is what's visible, not the underlay's animated color. Navy fallback lives on above. */ background-color: transparent; } /* Images and media are block by default -- eliminates inline baseline gap */ img, video, canvas, svg { display: block; max-width: 100%; } /* Inherit fonts for all form elements -- browser default breaks Inter */ input, button, textarea, select { font: inherit; } /* Remove built-in form appearance for custom styling in components.css */ input, textarea, select { appearance: none; -webkit-appearance: none; border-radius: 0; /* iOS rounds inputs by default -- this resets it */ } /* Prevent text overflow on any element */ p, h1, h2, h3, h4, li { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 02. ROOT SPACING & SECTION SCAFFOLD --section-pad-y: the single variable that governs all section vertical padding. Clamp from 64px mobile to 140px desktop. No magic numbers. -------------------------------------------------------------------------- */ :root { /* Vertical section breathing room -- all sections consume this token */ --section-pad-y: clamp(4rem, 10vw, 8.75rem); /* = clamp(64px, 10vw, 140px) */ /* Horizontal page gutter -- applied via .container */ --page-gutter: clamp(1.25rem, 5vw, 5rem); /* = clamp(20px, 5vw, 80px) */ /* Max content width -- constrains readability on ultra-wide displays */ --max-width: 1400px; /* Nav height -- used to offset anchor scroll targets */ --nav-height: 72px; } /* -------------------------------------------------------------------------- 03. LAYOUT PRIMITIVES .container -- the single centering wrapper used by every section. .section -- semantic scaffold applied to every
on the page. -------------------------------------------------------------------------- */ /* Centered, max-width container with fluid gutters */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--page-gutter); } /* Full-width section base -- all sections extend this */ .section { width: 100%; padding-block: var(--section-pad-y); position: relative; /* Establishes stacking context for absolute children */ } /* Full-bleed variant -- no container padding. Used for #hero, #reach map */ .section--full-bleed { padding-inline: 0; padding-block: 0; } /* Dark surface sections: #logic, #reach, #footer */ .section--dark { background-color: var(--gl-navy); color: var(--gl-white); } /* Green surface sections: #proof, #validation tagline */ .section--green { background-color: var(--gl-green); color: var(--gl-white); } /* Blue surface sections: reserved for #leadership header bar */ .section--blue { background-color: var(--gl-blue); color: var(--gl-white); } /* -------------------------------------------------------------------------- 04. NAVIGATION Sticky top nav. z-index from tokens. Height locked to --nav-height. Class names match index.html and main.js exactly. -------------------------------------------------------------------------- */ /* .site-nav: the
wrapper */ .site-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: var(--z-nav); display: flex; align-items: center; padding-inline: var(--page-gutter); /* Starts transparent over hero video -- JS adds .is-scrolled class */ background-color: transparent; transition: background-color var(--duration-default) var(--ease-stellar), box-shadow var(--duration-default) var(--ease-stellar); } /* Applied by main.js when page scrolls past 50px */ .site-nav.is-scrolled { background-color: var(--gl-navy); box-shadow: 0 2px 24px rgb(0 0 0 / 0.18); } /* .nav-inner: the