/* ============================================================ Utility Engine — shared "sky" design system (sky.css) ------------------------------------------------------------ Ported from the launch-window seed. The palette follows the visitor's local hour (night / dawn / day / dusk) via [data-theme] and can be cycled with the sky button. Everything is token-driven, so each phase is just a token set. This file owns the ATMOSPHERE (tokens, the sky gradient, star/grid texture, twinkle, moon, shooting stars, the theme toggle and its sweep/toast). UI components live in components.css. Every utility-engine site ships this file at /_ue/sky.css. Per-site brand accent is injected via --brand on :root (see the inline token block the scaffold emits); when set it overrides the per-phase --accent so the vertical keeps its hue. ============================================================ */ :root { /* ignition accent — reserved for urgency / primary CTAs in EVERY phase */ --ignite: #ff6a2b; --ignite-bg: rgba(255, 106, 43, 0.16); /* status (dark-phase defaults; the day phase overrides for contrast) */ --success: #34d399; --success-bg: rgba(52, 211, 153, 0.16); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.16); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.16); --radius: 16px; --radius-sm: 10px; --maxw: 760px; /* hubs run a touch wider than launch-window's 600 */ /* shared texture images, selected per phase via --tex */ --stars: radial-gradient(1px 1px at 18px 32px, rgba(255, 255, 255, 0.75), transparent), radial-gradient(1px 1px at 64px 14px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 122px 48px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 174px 22px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 40px 88px, rgba(255, 255, 255, 0.65), transparent), radial-gradient(1px 1px at 96px 104px, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 150px 92px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.4px 1.4px at 190px 70px, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1px 1px at 26px 150px, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 80px 168px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 134px 150px, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 186px 176px, rgba(255, 255, 255, 0.55), transparent); --grid: linear-gradient(rgba(20, 60, 120, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 60, 120, 0.05) 1px, transparent 1px); /* brighter, faintly-tinted stars for the twinkle layer (body::after) */ --stars2: radial-gradient(1.5px 1.5px at 50px 60px, rgba(255, 255, 255, 0.95), transparent), radial-gradient(1.6px 1.6px at 150px 30px, rgba(190, 210, 255, 0.9), transparent), radial-gradient(1.3px 1.3px at 100px 130px, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1.5px 1.5px at 24px 118px, rgba(255, 235, 210, 0.85), transparent), radial-gradient(1.4px 1.4px at 210px 96px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1.5px 1.5px at 252px 170px, rgba(210, 225, 255, 0.85), transparent), radial-gradient(1.3px 1.3px at 70px 208px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1.5px 1.5px at 170px 198px, rgba(255, 245, 225, 0.85), transparent); } /* ---- DUSK (default / fallback) ---- */ :root, :root[data-theme="dusk"] { --bg: #0b0a1f; --panel: rgba(24, 18, 52, 0.55); --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --text: #eef1f8; --muted: #aab0d6; --faint: #7b82a8; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); --accent: #7aa2ff; --accent-bg: rgba(122, 162, 255, 0.16); --sky: radial-gradient(900px 480px at 50% 122%, rgba(255, 122, 60, 0.10), transparent 62%), radial-gradient(1100px 720px at 50% -12%, #261658 0%, #160e38 42%, #0b0a1f 100%); --tex: var(--stars); --tex-opacity: 0.5; --tex-size: 220px 220px; --tex2-opacity: 0.7; --sweep-color: rgba(255, 122, 60, 0.5); } /* ---- NIGHT ---- */ :root[data-theme="night"] { --bg: #06050e; --panel: rgba(16, 16, 40, 0.55); --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.075); --text: #eef1f8; --muted: #a6adcf; --faint: #737aa0; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.20); --accent: #8ab4ff; --accent-bg: rgba(138, 180, 255, 0.16); --sky: radial-gradient(800px 500px at 50% 120%, rgba(60, 80, 160, 0.12), transparent 60%), radial-gradient(1200px 820px at 50% -10%, #12122e 0%, #0a0a1c 45%, #06050e 100%); --tex: var(--stars); --tex-opacity: 0.85; --tex-size: 200px 200px; --tex2-opacity: 0.95; --sweep-color: rgba(138, 180, 255, 0.45); } /* ---- DAWN (rosier + lighter than dusk, sun about to crest) ---- */ :root[data-theme="dawn"] { --bg: #241641; --panel: rgba(52, 34, 78, 0.5); --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.30); --surface: rgba(255, 255, 255, 0.055); --surface-2: rgba(255, 255, 255, 0.09); --text: #f6eef6; --muted: #d4bdd1; --faint: #ab90a8; --border: rgba(255, 255, 255, 0.13); --border-strong: rgba(255, 255, 255, 0.24); --accent: #c9b2ff; --accent-bg: rgba(201, 178, 255, 0.20); --sky: radial-gradient(1300px 760px at 50% 116%, rgba(255, 158, 110, 0.48), rgba(255, 120, 155, 0.24) 36%, rgba(150, 110, 195, 0.12) 60%, transparent 76%), radial-gradient(1100px 840px at 50% -8%, #412c63 0%, #30214f 46%, #241641 100%); --tex: var(--stars); --tex-opacity: 0.26; --tex-size: 220px 220px; --tex2-opacity: 0.42; --sweep-color: rgba(255, 150, 105, 0.55); } /* ---- DAY (Daylight) ---- */ :root[data-theme="day"] { --bg: #eef4fb; --panel: #ffffff; --panel-shadow: 0 14px 40px rgba(20, 40, 80, 0.12); --surface: #f1f6fc; --surface-2: #e6eef8; --text: #14233f; --muted: #51607d; --faint: #5e6680; --border: rgba(20, 40, 80, 0.12); --border-strong: rgba(20, 40, 80, 0.20); --accent: #0a6cff; --accent-bg: rgba(10, 108, 255, 0.10); --success: #0a8f53; --success-bg: rgba(10, 143, 83, 0.12); --warn: #b4770a; --warn-bg: rgba(180, 119, 10, 0.12); --danger: #c0392b; --danger-bg: rgba(192, 57, 43, 0.12); --sky: radial-gradient(1000px 560px at 50% -10%, #dcebfb 0%, #eaf2fb 45%, #f4f8fc 100%); --tex: var(--grid); --tex-opacity: 0.6; --tex-size: 38px 38px; --tex2-opacity: 0; --sweep-color: rgba(10, 108, 255, 0.32); } /* Per-site brand accent override: the scaffold sets --brand / --brand-bg on :root in the inline head block. When present it wins over the phase accent so each vertical keeps its own hue across all four skies. */ :root[style*="--brand"] { --accent: var(--brand, var(--accent)); --accent-bg: var(--brand-bg, var(--accent-bg)); } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; background-color: var(--bg); background-image: var(--sky); background-attachment: fixed; background-repeat: no-repeat; min-height: 100vh; transition: background-color 0.7s ease, color 0.5s ease; } /* sky texture — stars at night/dawn/dusk, a precision grid by day */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--tex-opacity, 0.5); background-image: var(--tex); background-size: var(--tex-size, 220px 220px); transition: opacity 0.6s ease; } /* twinkle layer — brighter stars that gently pulse (dark phases only) */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--stars2); background-size: 300px 300px; opacity: var(--tex2-opacity, 0); animation: twinkle 4.2s ease-in-out infinite; transition: opacity 0.6s ease; } @keyframes twinkle { 0%, 100% { opacity: var(--tex2-opacity, 0); } 50% { opacity: calc(var(--tex2-opacity, 0) * 0.35); } } /* occasional shooting stars + soft moon (dark phases only) */ .sky-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .sky-fx i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.55); opacity: 0; } .sky-fx i::after { content: ""; position: absolute; top: 50%; left: 2px; width: 92px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent); } .sky-fx i:nth-child(1) { top: 8%; left: 80%; animation: shoot 11s ease-in 4s infinite; } .sky-fx i:nth-child(2) { top: 16%; left: 94%; animation: shoot 16s ease-in 10s infinite; } @keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-29deg); } 2% { opacity: 1; } 10% { opacity: 0; transform: translate(-340px, 190px) rotate(-29deg); } 100% { opacity: 0; transform: translate(-340px, 190px) rotate(-29deg); } } [data-theme="day"] .sky-fx { display: none; } /* moon — soft glowing disc behind the content (full at night, faint at dusk) */ .sky-fx .moon { position: absolute; top: 64px; right: 7%; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 66% 70%, rgba(150, 160, 195, 0.38), transparent 22%), radial-gradient(circle at 40% 58%, rgba(150, 160, 195, 0.30), transparent 16%), radial-gradient(circle at 60% 34%, rgba(150, 160, 195, 0.24), transparent 13%), radial-gradient(circle at 36% 33%, #fefdf8, #e9ecf5 52%, #c4cad8 100%); box-shadow: 0 0 38px 8px rgba(214, 226, 255, 0.22), inset -7px -7px 16px rgba(85, 95, 130, 0.45); opacity: 0; transition: opacity 0.6s ease; } [data-theme="night"] .sky-fx .moon { opacity: 1; } [data-theme="dusk"] .sky-fx .moon { opacity: 0.5; } @media (max-width: 600px) { .sky-fx .moon { top: 86px; right: 6%; width: 64px; height: 64px; } } /* ---------- the sky toggle + its one-shot sweep + naming toast ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); cursor: pointer; font-size: 1.05rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { border-color: var(--border-strong); transform: translateY(-1px); } .theme-toggle:active { transform: scale(0.92); } /* one-shot color "ignition" sweep that blooms from the toggle on theme change */ .theme-sweep { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: radial-gradient(circle at var(--ox, 50%) var(--oy, 8%), var(--sweep-color), transparent 55%); opacity: 0; will-change: opacity, transform; animation: theme-sweep 0.85s ease forwards; } @keyframes theme-sweep { 0% { opacity: 0; transform: scale(0.5); } 30% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.5); } } /* transient label naming the new sky */ .theme-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 10000; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--text); background: var(--panel); border: 1px solid var(--border-strong); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--panel-shadow); opacity: 0; animation: theme-toast 1.8s ease forwards; } @keyframes theme-toast { 0% { opacity: 0; transform: translateX(-50%) translateY(8px); } 12%, 70% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(8px); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }