/* ============================================================= NIGHT — the shared auth-page sky (login / forgot / reset) ------------------------------------------------------------- ODIN's entry screens all wear the LOGO's world: the favicon's slate-navy night, its gold four-pointed sparkles, its raven off-white as the page ink, and an aurora in the brand green. This file is that scene, extracted so it lives ONCE. Usage (all three parts): 1. data-theme sits on (not ) ON PURPOSE: tokens.css [data-theme="dark"] still applies, but base.css's shared `[data-theme="dark"] body::before/::after` ambient (neon wash + grid) does NOT match, leaving the backdrop to this file. 2. Link after base.css, BEFORE the page css, so pages can still override the skin where they need to. 3. Paste the .night-sky markup block (defs + aurora + stars) at the top of — see index.html. What lives here: the page-scoped token re-keys (indigo neon → slate navy), the sky itself (dot fields, sparkles, aurora, meteor, vignette), night styling for the shared form components, the gilded brand mark + suite label, and the night-rise entrance keyframe (pages apply it to their own elements). ============================================================= */ /* ── night tokens + page backdrop ───────────────────────────── */ body.night { /* the logo's own palette, promoted to page scope */ --night-deep: #07090d; --night-top: #161a22; /* favicon gradient start */ --night-horizon: #1c232e; --star-gold: #dcd56e; /* favicon sparkles */ --star-bright: #eae48a; /* favicon big-star highlight */ --raven: #e1e0dc; /* favicon raven white → page ink */ /* re-key the dark skin: indigo neon → slate-navy night */ --bg: var(--night-deep); --bg-warm: var(--night-top); --text-color: var(--raven); --text-secondary: #a9a9a0; --text-tertiary: #7d8078; --text-faint: #5c5f58; --border: rgba(225, 224, 220, 0.09); --border-light: rgba(225, 224, 220, 0.09); --border-strong: rgba(225, 224, 220, 0.18); --surface: rgba(22, 27, 36, 0.62); --surface-raised: rgba(30, 36, 47, 0.8); --panel: linear-gradient(180deg, rgba(26, 32, 42, 0.72), rgba(14, 18, 24, 0.78)); --accent: var(--star-gold); --accent-dark: var(--star-bright); --ring: rgba(182, 210, 63, 0.28); /* focus stays aurora-green = live */ --gradient-display: linear-gradient( 115deg, #fff 5%, var(--star-bright) 45%, var(--star-gold) 90% ); --display-glow: drop-shadow(0 0 26px rgba(234, 228, 138, 0.3)); background: radial-gradient( 130% 70% at 50% 112%, rgba(166, 190, 56, 0.14), rgba(74, 160, 124, 0.06) 45%, transparent 70% ), linear-gradient(180deg, var(--night-deep) 0%, var(--night-top) 62%, var(--night-horizon) 100%); } /* ── the night sky (fixed, behind everything) ───────────────── */ body.night .night-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* distant stars — two tiled dot fields (bright 520px / faint 340px), with a little gold dust mixed in. The sparkles carry the motion; these hold still like the deep field. */ body.night .night-sky::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 40px 63px, rgba(225, 224, 220, 0.85) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 243px 52px, rgba(225, 224, 220, 0.7) 50%, transparent 100%), radial-gradient(2px 2px at 438px 118px, rgba(220, 213, 110, 0.8) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 141px 181px, rgba(225, 224, 220, 0.5) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 322px 243px, rgba(225, 224, 220, 0.6) 50%, transparent 100%), radial-gradient(2px 2px at 61px 341px, rgba(225, 224, 220, 0.55) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 202px 419px, rgba(220, 213, 110, 0.6) 50%, transparent 100%), radial-gradient(1.5px 1.5px at 383px 458px, rgba(225, 224, 220, 0.5) 50%, transparent 100%), radial-gradient(1px 1px at 22px 34px, rgba(225, 224, 220, 0.4) 50%, transparent 100%), radial-gradient(1px 1px at 91px 123px, rgba(225, 224, 220, 0.32) 50%, transparent 100%), radial-gradient(1px 1px at 163px 61px, rgba(225, 224, 220, 0.42) 50%, transparent 100%), radial-gradient(1px 1px at 232px 199px, rgba(225, 224, 220, 0.32) 50%, transparent 100%), radial-gradient(1px 1px at 302px 88px, rgba(225, 224, 220, 0.4) 50%, transparent 100%), radial-gradient(1px 1px at 63px 251px, rgba(225, 224, 220, 0.3) 50%, transparent 100%), radial-gradient(1px 1px at 301px 301px, rgba(225, 224, 220, 0.38) 50%, transparent 100%), radial-gradient(1px 1px at 131px 312px, rgba(225, 224, 220, 0.3) 50%, transparent 100%); background-size: 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px; } /* corner vignette — pulls the eye to the lit center */ body.night .night-sky::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 130% at 50% 42%, transparent 55%, rgba(3, 5, 8, 0.55) 100%); } /* northern lights — two slow-breathing ribbons behind the star fields (z -1). Brand green is aurora green; a teal-violet fringe answers from the other side. */ body.night .aurora { position: absolute; z-index: -1; filter: blur(38px); will-change: transform, opacity; } body.night .aurora-1 { top: -14%; left: -8%; width: 70%; height: 52%; background: linear-gradient( 112deg, transparent 16%, rgba(166, 190, 56, 0.2) 36%, rgba(64, 178, 128, 0.24) 56%, rgba(56, 184, 155, 0.1) 72%, transparent 88% ); opacity: 0.75; transform: rotate(-14deg); animation: aurora-drift-1 17s ease-in-out infinite alternate; } body.night .aurora-2 { top: -6%; right: -10%; width: 60%; height: 48%; background: linear-gradient( 255deg, transparent 15%, rgba(125, 86, 196, 0.14) 45%, rgba(56, 184, 155, 0.12) 70%, transparent 90% ); opacity: 0.6; transform: rotate(10deg); animation: aurora-drift-2 21s ease-in-out infinite alternate; } @keyframes aurora-drift-1 { from { opacity: 0.55; transform: rotate(-14deg) translate3d(0, 0, 0); } to { opacity: 0.9; transform: rotate(-11deg) translate3d(4%, -3%, 0); } } @keyframes aurora-drift-2 { from { opacity: 0.4; transform: rotate(10deg) translate3d(0, 0, 0); } to { opacity: 0.7; transform: rotate(13deg) translate3d(-4%, 3%, 0); } } /* the logo's four-pointed sparkles, hand-set and twinkling. Base state (reduced motion) = lit and still. */ body.night .night-sky .star { position: absolute; fill: var(--star-gold); opacity: 0.85; filter: drop-shadow(0 0 5px rgba(220, 213, 110, 0.5)); animation: star-twinkle 4.6s ease-in-out infinite; } body.night .night-sky .star.bright { fill: var(--star-bright); filter: drop-shadow(0 0 10px rgba(234, 228, 138, 0.75)); } @keyframes star-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } } /* one line per star keeps the constellation scannable */ body.night .star.s1 { top: 9%; left: 11%; width: 16px; height: 16px; animation-duration: 5.2s; animation-delay: 0.4s; } body.night .star.s2 { top: 17%; left: 80%; width: 26px; height: 26px; animation-duration: 6.4s; animation-delay: 1.8s; } body.night .star.s3 { top: 33%; left: 7%; width: 11px; height: 11px; animation-duration: 4.1s; animation-delay: 2.6s; } body.night .star.s4 { top: 6%; left: 56%; width: 12px; height: 12px; animation-duration: 5.7s; animation-delay: 3.4s; } body.night .star.s5 { top: 56%; left: 89%; width: 15px; height: 15px; animation-duration: 4.9s; animation-delay: 0.9s; } body.night .star.s6 { top: 71%; left: 9%; width: 20px; height: 20px; animation-duration: 6.1s; animation-delay: 2.2s; } body.night .star.s7 { top: 85%; left: 24%; width: 11px; height: 11px; animation-duration: 4.4s; animation-delay: 4.1s; } body.night .star.s8 { top: 11%; left: 91%; width: 12px; height: 12px; animation-duration: 5.4s; animation-delay: 3s; } body.night .star.s9 { top: 79%; left: 72%; width: 14px; height: 14px; animation-duration: 5s; animation-delay: 1.3s; } body.night .star.s10 { top: 41%; left: 94%; width: 10px; height: 10px; animation-duration: 4.2s; animation-delay: 2s; } body.night .star.s11 { top: 90%; left: 55%; width: 15px; height: 15px; animation-duration: 5.8s; animation-delay: 0.6s; } body.night .star.s12 { top: 24%; left: 29%; width: 10px; height: 10px; animation-duration: 4.8s; animation-delay: 3.7s; } /* a rare meteor — one streak every ~11s, down and to the left. Base opacity 0, so reduced motion simply never shows it. */ body.night .shooting-star { position: absolute; top: 16%; left: 68%; width: 130px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(234, 228, 138, 0.9)); opacity: 0; transform: rotate(145deg) translateX(0); animation: shooting 11s linear 4s infinite; } @keyframes shooting { 0% { opacity: 0; transform: rotate(145deg) translateX(0); } 1.5% { opacity: 0.9; } 7% { opacity: 0; transform: rotate(145deg) translateX(56vw); } 100% { opacity: 0; transform: rotate(145deg) translateX(56vw); } } /* ── night skin for the shared auth pieces ──────────────────── */ /* brand mark — starlight glow instead of the light skin's brand tint (.login-icon on login/forgot, .auth-icon on reset) */ body.night .login-icon, body.night .auth-icon { filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(234, 228, 138, 0.16)); } /* "Upland Workshop" — gilded eyebrow on every entry screen */ body.night .login-suite, body.night .auth-suite { color: var(--star-gold); opacity: 0.85; } /* form fields over the sky */ body.night .input, body.night input { background: rgba(7, 9, 13, 0.55); caret-color: var(--brand); } body.night .input::placeholder, body.night input::placeholder { color: var(--text-faint); } body.night input:-webkit-autofill, body.night input:-webkit-autofill:hover, body.night input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #10141a inset; -webkit-text-fill-color: var(--raven); } body.night .btn-primary:hover { box-shadow: 0 0 20px rgba(182, 210, 63, 0.35), var(--shadow); } /* entrance — pages apply this to their own column + tagline */ @keyframes night-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }