/* ============================================================ CezDesigns — Opening intro cover ISOLATED FEATURE — not part of css/style.css. This is NOT a dismissible splash/modal. #intro is pinned (position: fixed) over the very top of the page for exactly the height of #intro-spacer below it — a "scrub zone" the real page scrolls through while js/intro.js fades .intro-bg's own opacity out and .intro-content out, both off scroll position (see js/intro.js for why WAAPI, not inline styles). #intro itself has no background of its own, so as .intro-bg fades, what's revealed is the real page underneath — already sitting in normal scroll flow, already moving — rather than a solid fallback colour or any stand-in copy living inside #intro. Once scrolled past the spacer, #intro is [hidden] so it stops covering the real site underneath; scrolling back up un-hides it and reverses the animation. There is no dismissed state — this is purely a function of current scroll position. If js/intro.js fails to load, #intro simply stays pinned at its start state forever (no fade, no hide) rather than permanently blocking the site — see the .no-js fallback below. To remove entirely: delete this file, js/intro.js, the #intro + #intro-spacer block in index.html, and their two tags in . Uses tokens from css/style.css (loaded first). ============================================================ */ #intro-spacer { height: 100vh; } @supports (height: 100dvh) { #intro-spacer { height: 100dvh; } } #intro { position: fixed; inset: 0; z-index: 500; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; /* No background here on purpose: .intro-bg supplies the visible artwork, and as its own opacity fades (see js/intro.js) this box has nothing left of its own to hide the real page with. */ } #intro[hidden] { display: none; } @supports (height: 100dvh) { #intro { height: 100dvh; } } .intro-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 25, 47, 0.6), rgba(10, 25, 47, 0.74)), url('../assets/hero.png'), linear-gradient(135deg, var(--navy) 0%, #3a2c1e 45%, var(--blue-deep) 100%); background-size: cover; background-position: center; will-change: opacity; } .intro-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(0.85rem, 2vw, 1.3rem); padding: 1.5rem; text-align: center; max-width: 38rem; will-change: transform, opacity; } .intro-logo { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; font-size: clamp(1.6rem, 4.2vw, 2.3rem); color: var(--bg); } .intro-logo-dot { color: var(--blue); } .intro-statement { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; font-size: clamp(1.8rem, 5vw, 3.2rem); color: var(--bg); margin: 0; max-width: 20ch; } .intro-price { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); } .intro-hint { position: absolute; z-index: 1; bottom: clamp(1.5rem, 4vw, 2.5rem); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(250, 248, 245, 0.45); will-change: opacity; } .intro-hint svg { width: 1rem; height: 1rem; animation: intro-hint-bob 1.8s ease-in-out infinite; } @keyframes intro-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ============================================================ Site nav override — hide until #intro finishes Only takes effect here, since only index.html loads this file (and js/intro.js, which toggles .is-visible in step with #intro[hidden]) — css/style.css's own .site-nav rule stays always-visible for every other page. Without this, the nav (position: sticky, lower z-index than #intro) would already be scrolling into place behind the hero and ghost through as .intro-bg fades, before the visitor has actually reached it. visibility is delayed on the way out (instant on the way in) so it's never focusable/clickable while invisible, but the opacity fade is what's actually seen either direction. ============ */ .site-nav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; } .site-nav.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s var(--ease), visibility 0s linear 0s; }