/* ============================================================ ENDUURR · SKY LAYER Sun line, dawn/dusk wash, weather effects. Driven by data-sky (dawn|day|dusk|night) and data-weather (clear|rain|heat|cool) on , set by sky.js. ============================================================ */ /* ---------- Auto button in the theme switcher ---------- */ .theme-btn.theme-auto { width: 30px; } .theme-btn.theme-auto svg { width: 13px; height: 13px; fill: none; stroke: var(--dim); stroke-width: 1.4; stroke-linecap: round; transition: stroke .25s, transform .5s var(--ease-soft); } .theme-btn.theme-auto[aria-pressed="true"] svg { stroke: var(--accent); transform: rotate(45deg); } [data-theme="noir"] .theme-btn.theme-auto[aria-pressed="true"] svg { stroke: var(--ink); } .theme-btn.theme-auto:hover svg { stroke: var(--ink); } /* ---------- The sun line ---------- One colour token drives the sun so dawn/dusk and Noir can override it in a single place. */ .sun-line { --sun-col: var(--accent); position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: calc(var(--z-nav) + 2); /* The rail is interactive, drag it to scrub through the day. */ pointer-events: auto; display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); padding: 0 clamp(12px, 3vw, 26px); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); overflow: hidden; } [data-theme="noir"] .sun-line { --sun-col: var(--ink); } .sun-edge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .sun-edge b { color: var(--dim); font-weight: 400; } /* The rail the sun travels along, inset from the labels so the glyph never crosses text. Also the scrub target: 24 hours, left to right. */ .sun-rail { position: relative; flex: 1; height: 100%; min-width: 0; cursor: grab; touch-action: none; } .sun-line[data-dragging] .sun-rail { cursor: grabbing; } .sun-rail:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; } /* a faint hover hint that the line is draggable */ .sun-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 12px; transform: translateY(-50%); background: color-mix(in srgb, var(--ink) 6%, transparent); opacity: 0; transition: opacity .25s; } .sun-rail:hover::after, .sun-line[data-dragging] .sun-rail::after { opacity: 1; } /* Return-to-now button, only while scrubbing */ .sun-live { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 3px 9px; white-space: nowrap; cursor: pointer; background: transparent; } [data-theme="noir"] .sun-live { color: var(--ink); } [data-theme="startline"] .sun-live, [data-theme="lab"] .sun-live { border-radius: 0; } .sun-live[hidden] { display: none; } /* The time chip that rides with the sun */ .scrub-time { position: fixed; top: 36px; z-index: calc(var(--z-nav) + 2); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 3px 8px; border-radius: 3px; font-size: 9px; letter-spacing: .14em; white-space: nowrap; pointer-events: none; } .scrub-time[hidden] { display: none; } @media (max-width: 640px) { .scrub-time { top: 32px; } } .sun-track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); opacity: .5; } .sun-tick { position: absolute; top: 50%; width: 1px; height: 8px; background: var(--faint); transform: translateY(-50%); } .sun-tick.is-rise { left: 0; } .sun-tick.is-set { right: 0; } .sun-body { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; transition: left 1s linear; } .glyph { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s ease; } .glyph-moon { opacity: 0; } .sun-line[data-state="night"] .glyph-sun { opacity: 0; } .sun-line[data-state="night"] .glyph-moon { opacity: 1; } .sun-core { fill: var(--sun-col); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sun-col) 60%, transparent)); transition: fill .6s ease; } .sun-rays { transform-origin: 50% 50%; animation: sunspin 40s linear infinite; } .sun-rays line { stroke: var(--sun-col); stroke-width: 1.7; stroke-linecap: round; transition: stroke .6s ease; } @keyframes sunspin { to { transform: rotate(360deg); } } .glyph-moon path { fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linejoin: round; } /* Push the nav down so the strip doesn't overlap it. This rule lives in sky.css, which ONLY the homepage loads, other pages keep nav at top:0. */ .nav { top: 32px; } @media (max-width: 640px) { .sun-line { height: 28px; gap: 8px; padding: 0 12px; } .nav { top: 28px; } .sun-edge { font-size: 7.5px; letter-spacing: .12em; } .sun-body { width: 18px; height: 18px; margin: -9px 0 0 -9px; } } /* ============================================================ DAWN / DUSK, the warm wash A light pass over the whole page during first and last light. Skipped for Noir Protocol, whose R-01 forbids any hue. ============================================================ */ .sky-wash { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; mix-blend-mode: normal; /* never `overlay` on a fixed layer, see CLAUDE.md */ } [data-sky="dawn"] .sky-wash, [data-sky="dusk"] .sky-wash { opacity: 1; } [data-theme="noir"] .sky-wash { opacity: 0 !important; } /* dawn: cool violet lifting into warm at the horizon */ [data-sky="dawn"] .sky-wash { background: radial-gradient(ellipse 120% 62% at 20% 100%, rgba(255, 122, 61, .34), transparent 64%), radial-gradient(ellipse 95% 52% at 80% 0%, rgba(120, 88, 190, .20), transparent 62%); } /* dusk: heavier red, low and wide */ [data-sky="dusk"] .sky-wash { background: radial-gradient(ellipse 130% 68% at 75% 100%, rgba(226, 72, 34, .40), transparent 66%), radial-gradient(ellipse 95% 48% at 15% 8%, rgba(255, 150, 80, .18), transparent 60%); } /* Light systems need less, or the page turns orange */ [data-theme="startline"][data-sky="dawn"] .sky-wash, [data-theme="lab"][data-sky="dawn"] .sky-wash, [data-theme="startline"][data-sky="dusk"] .sky-wash, [data-theme="lab"][data-sky="dusk"] .sky-wash { opacity: .7; } /* ------------------------------------------------------------ FIRST FOLD · the light actually spills into the hero. A dedicated layer, so it never fights the weather tint (.hero::before) or the readability vignette (.hero::after). ------------------------------------------------------------ */ .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; } [data-sky="dawn"] .hero-sky, [data-sky="dusk"] .hero-sky { opacity: 1; } [data-theme="noir"] .hero-sky { opacity: 0 !important; } /* R-01: no hue */ [data-sky="dusk"] .hero-sky { background: radial-gradient(ellipse 105% 78% at 72% 112%, rgba(226, 72, 34, .62), transparent 62%), radial-gradient(ellipse 75% 45% at 18% 104%, rgba(255, 126, 52, .34), transparent 60%), linear-gradient(180deg, transparent 34%, rgba(122, 32, 12, .30) 100%); } [data-sky="dawn"] .hero-sky { background: radial-gradient(ellipse 95% 70% at 24% 110%, rgba(255, 140, 62, .54), transparent 62%), radial-gradient(ellipse 110% 60% at 78% -12%, rgba(126, 96, 200, .34), transparent 62%), linear-gradient(180deg, rgba(92, 72, 152, .20), transparent 52%); } /* Light systems: same shape, dialled back so text keeps its contrast */ [data-theme="startline"] .hero-sky, [data-theme="lab"] .hero-sky { opacity: 0; } [data-theme="startline"][data-sky="dawn"] .hero-sky, [data-theme="startline"][data-sky="dusk"] .hero-sky, [data-theme="lab"][data-sky="dawn"] .hero-sky, [data-theme="lab"][data-sky="dusk"] .hero-sky { opacity: .62; } /* A horizon glow line low in the fold, so the light reads as coming from somewhere rather than being a flat filter. */ .hero-sky::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 150, 90, .55), transparent); filter: blur(1px); } [data-sky="dusk"] .hero-sky::after { background: linear-gradient(90deg, transparent, rgba(226, 72, 34, .75), transparent); } /* The sun itself goes red at the edges of the day, one token, so the core, the rays and the glow all shift together. */ [data-sky="dawn"] .sun-line, [data-sky="dusk"] .sun-line { --sun-col: #E24822; } /* Noir R-01: no hue, ever, not even from the sky. */ [data-theme="noir"][data-sky="dawn"] .sun-line, [data-theme="noir"][data-sky="dusk"] .sun-line { --sun-col: var(--ink); } /* A hairline of colour along the very top during twilight */ [data-sky="dawn"] .sun-line::after, [data-sky="dusk"] .sun-line::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 72, 34, .85), transparent); } [data-theme="noir"] .sun-line::after { display: none; } /* ============================================================ WEATHER · first fold only Weather colour is environmental, not brand accent: heat should be warm in every system, not volt in Night Shift and blue in Start Line. Noir is the exception, R-01 allows no hue, so it falls back to grey. ============================================================ */ :root { --wx-heat: #E8600C; --wx-cool: #6BA6D8; --wx-rain: #8FB4D4; } [data-theme="startline"], [data-theme="lab"] { --wx-heat: #D2540A; --wx-cool: #3E7CB1; --wx-rain: #4A7BA8; } [data-theme="noir"] { --wx-heat: var(--dim); --wx-cool: var(--dim); --wx-rain: var(--dim); } .sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; display: none; } /* Ambient tint per condition. Strong enough to read at a glance, a 0.12 alpha wash is invisible, especially on the light systems where a pale tint simply vanishes into the paper. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; } /* --- RAIN: cool grey-blue, heaviest at the top --- */ [data-weather="rain"] .hero::before { opacity: 1; background: linear-gradient(180deg, rgba(80, 110, 145, .30), transparent 62%), radial-gradient(ellipse 120% 50% at 50% 0%, rgba(60, 90, 130, .22), transparent 70%); } [data-theme="startline"] [data-weather="rain"], /* no-op guard */ [data-theme="startline"][data-weather="rain"] .hero::before, [data-theme="lab"][data-weather="rain"] .hero::before { background: linear-gradient(180deg, rgba(48, 78, 115, .26), transparent 62%), radial-gradient(ellipse 120% 50% at 50% 0%, rgba(40, 70, 110, .18), transparent 70%); } /* --- HEAT: the air off tarmac. Warm, rising from the ground --- */ [data-weather="heat"] .hero::before { opacity: 1; background: radial-gradient(ellipse 110% 62% at 50% 112%, rgba(255, 138, 40, .38), transparent 66%), radial-gradient(ellipse 70% 40% at 82% 96%, rgba(255, 90, 20, .24), transparent 62%), linear-gradient(180deg, transparent 46%, rgba(190, 70, 15, .18) 100%); } /* On paper the warm tint has to carry more weight to register at all */ [data-theme="startline"][data-weather="heat"] .hero::before, [data-theme="lab"][data-weather="heat"] .hero::before { background: radial-gradient(ellipse 110% 62% at 50% 112%, rgba(232, 96, 12, .34), transparent 64%), radial-gradient(ellipse 70% 40% at 82% 96%, rgba(214, 62, 8, .22), transparent 60%), linear-gradient(180deg, transparent 50%, rgba(196, 78, 20, .16) 100%); } /* --- COOL: cold morning air, settling from above --- */ [data-weather="cool"] .hero::before { opacity: 1; background: linear-gradient(180deg, rgba(150, 190, 220, .30), transparent 58%), radial-gradient(ellipse 100% 55% at 50% -8%, rgba(120, 170, 215, .24), transparent 66%); } [data-theme="startline"][data-weather="cool"] .hero::before, [data-theme="lab"][data-weather="cool"] .hero::before { background: linear-gradient(180deg, rgba(58, 104, 152, .26), transparent 58%), radial-gradient(ellipse 100% 55% at 50% -8%, rgba(44, 92, 145, .20), transparent 66%); } /* Noir R-01: no hue, ever. Its weather reads through the canvas motion alone, which draws in greys. */ [data-theme="noir"] .hero::before { opacity: 0 !important; } /* A small live badge in the hero telling you what it's doing outside */ .sky-badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; margin-bottom: 14px; } [data-theme="startline"] .sky-badge, [data-theme="lab"] .sky-badge { border-radius: 0; border-color: var(--line-strong); } .sky-badge .mono-label { color: var(--dim); } .sky-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; } [data-theme="noir"] .sky-badge-dot { background: var(--ink); } .sky-badge[hidden] { display: none; } /* ============================================================ REVIEW CONSOLE · only rendered when the URL asks for it ============================================================ */ .sky-console { position: fixed; right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); z-index: calc(var(--z-flash) + 1); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg) 92%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 40px -16px rgba(0, 0, 0, .6); } .sky-console[hidden] { display: none; } .sky-console-label { color: var(--accent); } [data-theme="noir"] .sky-console-label { color: var(--ink); } .sky-console-row { display: flex; gap: 5px; } .sky-console button { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: var(--btn-radius); padding: 6px 9px; cursor: pointer; transition: all .18s; } .sky-console button:hover { color: var(--ink); border-color: var(--dim); } .sky-console button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .sky-console-live { width: 100%; justify-content: center; } @media (max-width: 640px) { .sky-console { left: 12px; right: 12px; bottom: 12px; } .sky-console-row { justify-content: space-between; } .sky-console button { flex: 1; padding: 8px 4px; } } @media (prefers-reduced-motion: reduce) { .sky-canvas { display: none !important; } .sun-body { transition: none !important; } .sky-badge-dot { animation: none !important; } .hero-sky { transition: none !important; } }