/* ========================================================================== ENERGEX — schemes.css Five palettes for one design, all of them dark. Everything a scheme changes is a custom property; layout, type and motion are untouched. The particle field reads --particle-a / --particle-b / --wire, so the canvas follows the sheet. The site walks through these as you scroll (see chameleon.js). To pin one instead, put data-scheme="" on . ========================================================================== */ .intro__mark circle { stroke: var(--blue-lt); } /* Midnight Blue — Where we are now: near-black with a navy cast, electric blue. */ [data-scheme="midnight"] { --ink: #05070b; --ink-2: #080b12; --panel: #0b1019; --panel-2: #101724; --paper: #f2f5fa; --paper-2: #e6ebf3; --paper-ink: #070a10; --text: #e9edf4; --dim: #98a2b3; --faint: #7b8496; --blue: #2e7bff; --blue-lt: #74a8ff; --blue-dk: #1a56c4; --blue-btn: #2468e0; --up: #ffffff; --card-hi: #ffffff; --nav-light: #eef1f6; --btn-ink: #ffffff; --accent-pale: #cfe0ff; --accent-lt2: #7fb0ff; --accent-rgb: 46,123,255; --ink-rgb: 5,7,11; --pink-rgb: 7,10,16; --wire: 122,168,255; --particle-a: 46,123,255; --particle-b: 206,224,255; --up-rgb: 255,255,255; color-scheme: dark; } /* Glacier — Neutral graphite and a cold cyan. Reads as instrumentation. */ [data-scheme="glacier"] { --ink: #05090c; --ink-2: #080d11; --panel: #0a1419; --panel-2: #0f1e25; --paper: #eef4f6; --paper-2: #e1eaee; --paper-ink: #06110f; --text: #e6eef2; --dim: #94a6ad; --faint: #7d9098; --blue: #22b8d6; --blue-lt: #6ddbf0; --blue-dk: #0d6b81; --blue-btn: #0f7f99; --up: #ffffff; --card-hi: #ffffff; --nav-light: #eaf2f5; --btn-ink: #ffffff; --accent-pale: #ccf1fa; --accent-lt2: #8ae5f6; --accent-rgb: 34,184,214; --ink-rgb: 5,9,12; --pink-rgb: 6,17,15; --wire: 97,200,222; --particle-a: 34,184,214; --particle-b: 213,242,250; --up-rgb: 255,255,255; color-scheme: dark; } /* Deep Forest — Dark green ground, fresh green accent. The obvious one, kept restrained. */ [data-scheme="forest"] { --ink: #040d0a; --ink-2: #071310; --panel: #0a1815; --panel-2: #0e211c; --paper: #eff5f1; --paper-2: #e2ece6; --paper-ink: #061410; --text: #e6efe9; --dim: #93a89b; --faint: #7d9188; --blue: #27a96e; --blue-lt: #5fd4a0; --blue-dk: #136540; --blue-btn: #17784d; --up: #ffffff; --card-hi: #ffffff; --nav-light: #ecf4ef; --btn-ink: #ffffff; --accent-pale: #c9f1dd; --accent-lt2: #79e0b2; --accent-rgb: 39,169,110; --ink-rgb: 4,13,10; --pink-rgb: 6,20,16; --wire: 87,196,151; --particle-a: 39,169,110; --particle-b: 210,243,226; --up-rgb: 255,255,255; color-scheme: dark; } /* Graphite & Amber — Warm black with a gold accent. Unusual for the sector, reads premium. */ [data-scheme="ember"] { --ink: #0a0906; --ink-2: #0e0c09; --panel: #15120c; --panel-2: #1e1a12; --paper: #f6f2ea; --paper-2: #ece5d8; --paper-ink: #14100a; --text: #f1ece2; --dim: #aca492; --faint: #948c7b; --blue: #e59d33; --blue-lt: #f3c273; --blue-dk: #8a5a12; --blue-btn: #e59d33; --up: #ffffff; --card-hi: #ffffff; --nav-light: #f2eee5; --btn-ink: #140f05; --accent-pale: #fbe8c8; --accent-lt2: #f7d194; --accent-rgb: 229,157,51; --ink-rgb: 10,9,6; --pink-rgb: 20,16,10; --wire: 224,176,97; --particle-a: 229,157,51; --particle-b: 251,232,200; --up-rgb: 255,255,255; color-scheme: dark; } /* Slate — A softer dark: real slate rather than near-black, with a sky blue. */ [data-scheme="slate"] { --ink: #19222f; --ink-2: #1e2836; --panel: #222d3d; --panel-2: #293648; --paper: #f2f6fb; --paper-2: #e5edf6; --paper-ink: #101823; --text: #eaf0f7; --dim: #a9b6c6; --faint: #94a3b5; --blue: #5faaf5; --blue-lt: #94c8fb; --blue-dk: #1a55a0; --blue-btn: #1f63b8; --up: #ffffff; --card-hi: #ffffff; --nav-light: #eef4fa; --btn-ink: #ffffff; --accent-pale: #d5eaff; --accent-lt2: #a8d3fc; --accent-rgb: 95,170,245; --ink-rgb: 25,34,47; --pink-rgb: 16,24,35; --wire: 141,189,240; --particle-a: 95,170,245; --particle-b: 220,238,255; --up-rgb: 255,255,255; color-scheme: dark; }