#intro-screen { position: relative; width: 1440px; height: 900px; overflow: hidden; } #intro-screen.fading-out { opacity: 0; transition: opacity 500ms ease-out; } #intro-screen .logo { position: absolute; top: 25px; left: 155px; width: 118px; height: 118px; } #intro-screen .content { position: absolute; top: 348px; left: 164px; right: 164px; } #intro-screen .eyebrow { display: flex; align-items: center; gap: 28px; margin-bottom: 24px; } #intro-screen .eyebrow-line { display: inline-block; width: 56px; height: 1.5px; background: #da1e37; } #intro-screen .eyebrow-text { font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: #da1e37; } #intro-screen .heading { font-family: "General Sans", sans-serif; font-weight: 400; font-size: 64px; line-height: 1.15; color: #1a1c20; margin-bottom: 64px; } #intro-screen .not { position: relative; display: inline-block; color: #bcb8b1; margin: 0 2px; } #intro-screen .not-strike { position: absolute; left: -9px; top: 56%; transform: translateY(-50%); } /* Zoom "NOT": overlays the real "NOT" exactly (same position, same grey and font as the heading, set explicitly since JS relocates it out from under the heading, breaking that inheritance), invisible until clicked. N + T are transparent so only the O shows. On click, JS grows the font-size (so the text stays crisp) while gliding the O to the center of the screen until it fills it. Not scoped under #intro-screen: on click, JS moves this element to so the intro-screen fade-out (opacity, which would otherwise dim it too since opacity cascades to descendants regardless of position) doesn't reach it. */ .not-zoom { position: absolute; top: 0; left: 0; white-space: nowrap; visibility: hidden; pointer-events: none; z-index: 100; color: #bcb8b1; font-family: "General Sans", sans-serif; font-weight: 400; line-height: 1.15; } .not-zoom .nz-n, .not-zoom .nz-t { color: transparent; } /* On click JS switches to this mode: N + T leave the flow so the span collapses to just the O, and the span is centered on its own left/top point via the translate. That keeps the O centered on that point at ANY font-size, so the motion can't desync and drift if font-size hits the browser's maximum. */ .not-zoom.centered { position: fixed; transform: translate(-50%, -50%); } .not-zoom.centered .nz-n, .not-zoom.centered .nz-t { position: absolute; top: 0; } .not-zoom.centered .nz-n { right: 100%; } .not-zoom.centered .nz-t { left: 100%; } #intro-screen .find-error { position: absolute; /* dropped below NOT, shifted right to overlap "supposed" up to the "o" */ left: 120px; bottom: -30px; display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 50px; padding: 0; border: 0.5px solid #da1e37; border-radius: 5px; background: rgba(239, 238, 231, 0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 18px; line-height: 1; letter-spacing: 0.02em; color: #595959; white-space: nowrap; cursor: pointer; /* hidden state: faded out and dropped +6px */ opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 150ms ease-out, transform 150ms ease-out; } #intro-screen .not:hover .find-error { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 200ms ease-out, transform 200ms ease-out; } #intro-screen .subtitle { font-family: "General Sans", sans-serif; font-weight: 400; font-style: italic; font-size: 20px; color: #8a8179; } /* ---------------------------------------------------------------- * * The question * ---------------------------------------------------------------- */ /* Sits above the zooming O (z-index 100) and fills the viewport, so it reads as the screen the O opened onto rather than a panel on top of it. --q-duration is set by JS (the reveal timing lives with the zoom timing); the fallback keeps this usable if the section is ever shown on its own. */ #the-question { --q-duration: 2000ms; position: fixed; inset: 0; z-index: 200; opacity: 0; transition: opacity var(--q-duration) ease-out; } #the-question.revealed { opacity: 1; } /* The loading screen's own mark at its own 94px, centered over the question. Anchored off the viewport's middle rather than stacked in flow, so the question below it stays dead-centered. Trails the text: it only starts once the text is 40% of the way up. */ #the-question .logo { position: absolute; left: 50%; bottom: calc(50% + 130px); transform: translateX(-50%); width: 94px; height: 94px; opacity: 0; transition: opacity calc(var(--q-duration) * 0.6) ease-out calc(var(--q-duration) * 0.4); } #the-question.revealed .logo { opacity: 1; } /* Dead-centered in the viewport, and centered independently of the scroll cue (which is absolutely positioned) so the text never shifts when the cue appears. It grows via transform rather than font-size so the 590px column keeps its final two-line break for the whole rise instead of reflowing. */ #the-question .the-question-text { position: absolute; top: 50%; left: 50%; width: 590px; font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 42px; line-height: 1.35; text-align: center; color: #1a1c20; transform: translate(-50%, -50%) scale(0.3); transition: transform var(--q-duration) ease-out; } #the-question.revealed .the-question-text { transform: translate(-50%, -50%) scale(1); } /* Button + arrow ride in together, offered only once the reveal has landed. */ #the-question .scroll-cue { position: absolute; left: 50%; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; /* hidden state: faded out and dropped +6px */ opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity 400ms ease-out, transform 400ms ease-out; } #the-question.armed .scroll-cue { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } /* Same chip as .find-error. */ #the-question .scroll-down { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 50px; padding: 0; border: 0.5px solid #da1e37; border-radius: 5px; background: rgba(239, 238, 231, 0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: "Iosevka Charon Mono", monospace; font-weight: 500; font-size: 18px; line-height: 1; letter-spacing: 0.02em; color: #595959; white-space: nowrap; cursor: pointer; } @media (max-width: 768px) { #intro-screen { width: 100%; height: auto; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; } #intro-screen .logo { top: 24px; left: 24px; width: 80px; height: 80px; } #intro-screen .content { position: static; max-width: 480px; text-align: left; } #intro-screen .eyebrow { justify-content: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; } #intro-screen .heading { font-size: clamp(32px, 10vw, 44px); line-height: 1.2; white-space: normal; margin-bottom: 28px; } #intro-screen .not-strike { width: clamp(80px, 22vw, 150px); height: auto; left: 0; } #intro-screen .find-error { left: 50px; bottom: 30px; } #intro-screen .subtitle { font-size: 16px; } #the-question .logo { bottom: calc(50% + 100px); width: 72px; height: 72px; } #the-question .the-question-text { width: min(590px, calc(100vw - 48px)); font-size: clamp(24px, 6.5vw, 42px); } #the-question .scroll-cue { bottom: 40px; gap: 14px; } }