@charset "utf-8"; /* ============================================================================ GS PHASE -- the UNIVERSAL time-colour layer of the Infinite dash. ---------------------------------------------------------------------------- Served from the hub to EVERY Infinite-enabled property (infinite itself, spk, gladiators, ...) together with js/gs-time-colour.js, which evaluates the gs-time-colour schedule once per page load and sets html[data-gs-phase]. Properties keep only local config (scopes, links, quick cards); the phase palette + dash skies live HERE, once. The dash-bg selectors carry a #gs-chrome variant so they also outrank a spoke chrome's own two-id background rule. Extracted from recreation.css section 1a (2026-07-25). ========================================================================== */ /* ============================================================================ 1a · TIME COLOUR (mock -- gs-time-colour.js sets html[data-gs-phase] from the gs-time-colour schedule; --gs-accent is the single detail-colour knob every phase override below recolours. Default = the standing GS red, so the chrome looks identical until the script (or its built-in fallback) applies a phase.) ========================================================================== */ :root { --gs-accent: #e74c3c; /* hover/pressed shade, always derived from the accent */ --gs-accent-deep: color-mix(in srgb, var(--gs-accent) 78%, #000); } /* vivid complements picked from each sky photo -- brighter than the bg art */ html[data-gs-phase="dawn"] { --gs-accent: #ff9a62; } /* peach-lit clouds */ html[data-gs-phase="day"] { --gs-accent: #ff5f4a; } /* coral on denim */ html[data-gs-phase="dusk"] { --gs-accent: #ff7d9c; } /* blush rose */ html[data-gs-phase="evening"] { --gs-accent: #ffc24a; } /* sunset gold */ html[data-gs-phase="night"] { --gs-accent: #7e9bff; } /* bright periwinkle */ /* the dash sky swaps with the phase (DBG.png remains the no-phase fallback) */ html[data-gs-phase="dawn"] #GS_Dash, html[data-gs-phase="dawn"] #gs-chrome #GS_Dash { background-image: url(../assets/dash-bg/DawnDash.png); } html[data-gs-phase="day"] #GS_Dash, html[data-gs-phase="day"] #gs-chrome #GS_Dash { background-image: url(../assets/dash-bg/DayDash.png); } html[data-gs-phase="dusk"] #GS_Dash, html[data-gs-phase="dusk"] #gs-chrome #GS_Dash { background-image: url(../assets/dash-bg/DuskDash.png); } html[data-gs-phase="evening"] #GS_Dash, html[data-gs-phase="evening"] #gs-chrome #GS_Dash { background-image: url(../assets/dash-bg/EveningDash.png); } html[data-gs-phase="night"] #GS_Dash, html[data-gs-phase="night"] #gs-chrome #GS_Dash { background-image: url(../assets/dash-bg/NightDash.png); } /* ---- opt-in sky splash: a property adds .gs-phase-body to (the spoke chrome does this unless the visitor's "No Theme Background" setting is on) and the phase sky washes down OVER the property's own textured background, fading out by the lower third -- the same masked-splash recipe as the viewer's #splashBG. Without the class, the property's background stands alone. ---- */ body.gs-phase-body::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: center top; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%); } html[data-gs-phase="dawn"] body.gs-phase-body::before { background-image: url(../assets/stage-bg/Stage-BG-Dawn.png); } html[data-gs-phase="day"] body.gs-phase-body::before { background-image: url(../assets/stage-bg/Stage-BG-Day.png); } html[data-gs-phase="dusk"] body.gs-phase-body::before { background-image: url(../assets/stage-bg/Stage-BG-Dusk.png); } html[data-gs-phase="evening"] body.gs-phase-body::before { background-image: url(../assets/stage-bg/Stage-BG-Evening.png); } html[data-gs-phase="night"] body.gs-phase-body::before { background-image: url(../assets/stage-bg/Stage-BG-Night.png); }