/* ========================================================================== AVEN — hour.css "The Hour" — a per-visitor, local-clock ambient layer. Pairs with hour.js. Vanilla CSS only. No libraries, no build, no CDN, no network, no fonts of its own (reuses the site's DM Mono + Hanken Grotesk already loaded). Delete hour.css + hour.js and the site is byte-for-byte unchanged. ── Why this file is INERT on its own ─────────────────────────────────── Every selector here targets an element hour.js CREATES at runtime (.hour-wash) or a custom property the ambient room reads. It restyles no existing site element directly. No hour.js ⇒ the wash never exists ⇒ this stylesheet paints nothing of its own. The `html[data-hour]` attribute is read to style .hour-wash and (in index.html) to tint the ambient room. The spoken RIBBON was retired 2026-08-19 (Sehvan's word: it cluttered the hero and pulled at the voice). What remains is the wordless light. ── What it adds ───────────────────────────────────────────────────────── 1. Ambient wash one fixed, pointer-events:none, low-opacity gradient tuned to the visitor's local hour (dawn amber · day clear · dusk gold · night deeper/cooler). Weighted to the top and edges, transparent through the reading column, so it is FELT, never seen, and never touches text contrast. It now also lights the ambient haven-room behind the whole page. 2. State vars html[data-hour] carries --hour-* custom properties the ambient room (or anything) can read. Palette literals match the site's :root exactly: ink #0b171e · ink2 #06121a · panel2 #16323c gold #e7ab5c · gold-soft #f3c886 · bone #f3ecde · haze #9eb4bd orange #ff6a3d · signal #d3f227 ── Motion ──────────────────────────────────────────────────────────────── All transitions live behind @media (prefers-reduced-motion: no-preference) AND behind an html.hour-anim gate hour.js only adds AFTER first paint — so the initial state paints instantly (never a fade-in flash) and reduced-motion visitors get the state with zero animation. ========================================================================== */ /* ---- State tokens carried on (page-side no-op; for reuse) - */ html[data-hour="dawn"]{ --hour-tint:#e7ab5c; --hour-accent:#f3c886; } html[data-hour="day"] { --hour-tint:transparent; --hour-accent:#f3c886; } html[data-hour="dusk"]{ --hour-tint:#e7ab5c; --hour-accent:#ff6a3d; } html[data-hour="night"]{ --hour-tint:#183a4a; --hour-accent:#9eb4bd; } /* ========================================================================== 1 · AMBIENT WASH Fixed, inert to pointers, sits above section backdrops but below the site's fixed chrome (nav 50 / thumbbar 60 / toast 80) and below the hero veil (2) and hero text (3), so hero CTAs are never dimmed by it. Opacity is the only thing that animates (day fades out); the gradient itself swaps instantly, an event a visitor sees at most at 05:00/18:00/21:00. ========================================================================== */ .hour-wash{ position:fixed; inset:0; z-index:1; pointer-events:none; /* never intercepts a tap meant for the page */ opacity:0; /* default off; each active state lifts it */ background:transparent; will-change:opacity; } /* DAWN — soft amber, first light spilling from the top edge. Center stays 0. */ html[data-hour="dawn"] .hour-wash{ opacity:1; background: radial-gradient(140% 78% at 50% -12%, rgba(231,171,92,.11), transparent 60%), radial-gradient(120% 60% at 50% 112%, rgba(158,180,189,.05), transparent 66%); } /* DUSK — warm gold + a breath of orange, low and from below like a setting sun. */ html[data-hour="dusk"] .hour-wash{ opacity:1; background: radial-gradient(150% 85% at 50% 114%, rgba(231,171,92,.13), transparent 62%), radial-gradient(120% 70% at 78% 108%, rgba(255,106,61,.06), transparent 60%); } /* NIGHT — deeper + cooler: an edge vignette that darkens and a faint teal cool. The vignette lives at the frame edges, so the reading column is left alone. */ html[data-hour="night"] .hour-wash{ opacity:1; background: radial-gradient(135% 105% at 50% 46%, transparent 44%, rgba(3,10,17,.30) 100%), radial-gradient(120% 90% at 50% -8%, rgba(24,58,74,.10), transparent 62%); } /* DAY — neutral / clear. Nothing. (opacity stays 0.) */ html[data-hour="day"] .hour-wash{ opacity:0; } /* ========================================================================== 3 · MOTION Transitions are OFF unless the visitor allows motion AND hour.js has armed .hour-anim after first paint. Result: initial state is instant (no flash); a page left open crossing dawn/dusk fades gently; reduced-motion is static. ========================================================================== */ @media (prefers-reduced-motion: no-preference){ html.hour-anim .hour-wash{ transition:opacity 1200ms ease; } }