/* ============================================================================ * landing.css — homepage-only styles for "The Hearth" (index.html). * Loaded after site.css; the /apps/ page never loads this file. * Palette: midnight sky + warm embers — deep navy-blue stage behind the * amber/gold ember field (site.css stays warm plum for /apps/). * Layers: ember canvas (z0) -> grain + vignette (z2) -> glowing tap/click * hint (z10, Round 16, legibility pass Round 17): a small slowly flashing * instruction at ~1/3 from the bottom, pointer-transparent, melting away on * the visitor's first interaction. * ==========================================================================*/ /* ============================================================================ * Viewport lock — the homepage is a fixed, fullscreen ember stage: no * scrolling ever, and touch drags belong to the embers, not the browser. * landing.css loads ONLY on the homepage (/apps/ never includes it), so these * unscoped rules cannot leak into the apps page. * ==========================================================================*/ html { overflow: hidden; overscroll-behavior: none; } body.landing-page { height: 100vh; height: 100dvh; /* dvh after vh fallback */ overflow: hidden; overscroll-behavior: none; touch-action: none; /* drags drive the embers, not the page */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* ============================================================================ * Midnight sky — homepage-only background override (Round 14). * Scoped to body.landing-page so the /apps/ page keeps site.css's warm plum * radial composition untouched. Embers stay warm; only the sky goes blue. * ==========================================================================*/ body.landing-page { background: radial-gradient(1100px 560px at 18% -12%, rgba(84, 126, 220, 0.14), transparent 62%), radial-gradient(900px 500px at 88% 4%, rgba(62, 100, 200, 0.10), transparent 58%), radial-gradient(700px 700px at 50% 120%, rgba(18, 38, 88, 0.35), transparent 60%), #070d1d; } /* ---------- ember canvas ---------- */ #ember-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } body.ember-hidden #ember-canvas { display: none; } /* ---------- grain + vignette overlays (texture over the ember stage) ---------- */ body.landing-page::before, body.landing-page::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; } body.landing-page::before { background-image: radial-gradient(rgba(255, 217, 160, 0.05) 1px, transparent 1px); background-size: 3px 3px; } body.landing-page::after { background: radial-gradient(120% 95% at 50% 38%, transparent 55%, rgba(6, 11, 26, 0.55) 100%); } /* ---------- reduced motion: static midnight gradient only (landing-page bg) ---------- */ @media (prefers-reduced-motion: reduce) { #ember-canvas { display: none; } } /* ============================================================================ * Glowing tap/click hint (Round 16) — a small, slowly flashing instruction at * ~1/3 from the bottom of the page: "swipe and tap anywhere" on touch devices, * "click anywhere" on fine pointers (pure CSS pointer:coarse switch, no JS * detection). Round 17: the * word is a faint luminous CORE — dim warm fill + tight 5px shape shadow with * 10/22px halo and a softening blur — so the letterforms resolve clearly * while the edges stay soft (no hard glyph edges). pointer-events: none means * taps pass straight through to the flint-strike burst. It fades in after the * page settles, pulses slowly forever, and melts away (opacity 0) on the * visitor's very first pointer interaction (landing.js adds .dismiss). * ==========================================================================*/ .tap-hint { position: fixed; bottom: 33%; /* ~1/3 up from the bottom edge */ left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; /* taps pass through to the ember stage */ font-family: var(--font-display); /* Fraunces serif (self-hosted) */ font-style: italic; font-weight: 500; /* mid weight — thicker strokes resolve at small sizes */ font-size: clamp(17px, 2.4vw, 19px); /* slightly larger (was 15-16px) — still small */ letter-spacing: 0.10em; /* tighter than 0.12em — keeps counters together */ text-transform: lowercase; line-height: 1; white-space: nowrap; color: rgba(255, 219, 166, 0.42); /* luminous core — raised from 0.30 (crisper pass: higher fill alpha makes the letterforms read clearly through the glow instead of behind it) */ text-shadow: /* tighter glow, crisp pass: 4px carries the shape, 8/16px halo (was 5/10/22 — the wide outer halo was the main fuzz contributor) */ 0 0 4px rgba(255, 224, 170, 0.90), 0 0 8px rgba(255, 190, 110, 0.55), 0 0 16px rgba(255, 150, 90, 0.28); /* blur filter removed (crisp pass): the 0.8px blur was softening every glyph edge. Chromium no-ops blurs < 0.8px anyway, so removing it entirely costs nothing in Chromium and sharpens the text everywhere else. */ /* the container owns the melt transition; the pulse lives on .hint-word so the 1 -> 0 dismiss transition actually runs (a property that is itself being animated cannot start a transition from its animated value) */ transition: opacity 0.9s ease; } /* ============================================================================ * Wordmark — across the top, centered: "Welcome / To / Bunkorbase / Studios" * in Cinzel (engraved inscriptional capitals, the free Copperplate Gothic * equivalent — chosen for legibility after the cursive read as too stylish). * All-caps with letterspacing (the Copperplate look). Same warm luminous-glow * recipe (raised core alpha, tight 4/8/16px halo, no blur). * ==========================================================================*/ .wordmark { position: fixed; top: 4vh; left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none; /* taps pass through to the ember stage */ display: flex; flex-direction: column; align-items: center; font-family: 'Cinzel', var(--font-display); font-style: normal; font-weight: 500; /* mid: Copperplate's stem weight */ font-size: clamp(16px, min(5vw, 4.6vh), 76px); /* caps read larger than cursive at equal size — scaled down; height-aware so the doubled name fits the top band */ line-height: 1.18; /* caps need less headroom than script */ letter-spacing: 0.14em; /* the Copperplate engraved-plate spacing */ text-transform: uppercase; text-align: center; color: rgba(255, 219, 166, 0.78); /* warm core, no glow (Wayne: remove the glow) */ } .wm-line { display: block; white-space: nowrap; } .wm-to { font-size: 0.62em; /* "To" a step down, per the design */ line-height: 1.2; margin: 0.06em 0; } .wm-big { font-size: 2em; /* Bunkorbase Studios: double the base */ line-height: 1.06; } /* The two path options: spread left-to-right across the width at 33% and 67%, vertically centered (same row), in a redder light than the heading (same glow geometry, hue shifted toward ember-red). */ .wm-choice { position: fixed; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: none; /*