/* ============================================================ Corrosion Control — Game Themes (the re-skin layer) ------------------------------------------------------------ The shell is neutral. Each game declares an ACCENT ramp + an ATMOSPHERE (backdrop hues for hero headers, login, glows). Set on (or dune / ark / valheim / ...). Default (no data-game) = Corrosion brand = Oxide Orange. Accent contract every game must define: --accent base fill --accent-hover hover fill --accent-press pressed / darker --accent-contrast text/icon ON the accent fill --accent-text accent used AS text on dark surfaces (lightened for AA) --accent-soft low-alpha tint background --accent-soft-strong --accent-border accent hairline --accent-glow glow color (box-shadow) --game-label printable name --atmo-1 / --atmo-2 backdrop gradient stops --atmo-haze radial haze color ============================================================ */ /* ---------- Default brand / RUST — Oxide Orange #F26622 ---------- */ :root, [data-game="rust"] { --accent: #f26622; --accent-hover: #ff7a38; --accent-press: #d9550f; --accent-contrast: #190d05; --accent-text: #ff8a4c; --accent-soft: rgba(242, 102, 34, 0.13); --accent-soft-strong: rgba(242, 102, 34, 0.22); --accent-border: rgba(242, 102, 34, 0.42); --accent-glow: rgba(242, 102, 34, 0.50); --game-label: "Rust"; /* @kind other */ --atmo-1: #2c1206; --atmo-2: #0a0b0e; --atmo-haze: rgba(242, 102, 34, 0.30); } /* ---------- DUNE: AWAKENING — Spice Amber / desert gold ---------- */ [data-game="dune"] { --accent: #e9a53a; --accent-hover: #f7b94f; --accent-press: #c9851f; --accent-contrast: #1c1303; --accent-text: #f0bc5e; --accent-soft: rgba(233, 165, 58, 0.14); --accent-soft-strong: rgba(233, 165, 58, 0.24); --accent-border: rgba(233, 165, 58, 0.44); --accent-glow: rgba(233, 165, 58, 0.46); --game-label: "Dune: Awakening"; /* @kind other */ --atmo-1: #2c1e08; --atmo-2: #0a0b0e; --atmo-haze: rgba(233, 165, 58, 0.30); } /* ---------- SOULMASK: Ritual Jade ---------- */ [data-game="soulmask"] { --accent: #43c47e; --accent-hover: #59d792; --accent-press: #2c9c5f; --accent-contrast: #04140c; --accent-text: #63d894; --accent-soft: rgba(67, 196, 126, 0.14); --accent-soft-strong: rgba(67, 196, 126, 0.24); --accent-border: rgba(67, 196, 126, 0.42); --accent-glow: rgba(67, 196, 126, 0.46); --game-label: "Soulmask"; /* @kind other */ --atmo-1: #08231a; --atmo-2: #0a0b0e; --atmo-haze: rgba(67, 196, 126, 0.26); } /* ---------- CONAN EXILES: Hyborian Bronze ---------- */ [data-game="conan"] { --accent: #bb7637; --accent-hover: #d28d4b; --accent-press: #985c24; --accent-contrast: #160d03; --accent-text: #d59a5e; --accent-soft: rgba(187, 118, 55, 0.15); --accent-soft-strong: rgba(187, 118, 55, 0.26); --accent-border: rgba(187, 118, 55, 0.44); --accent-glow: rgba(187, 118, 55, 0.46); --game-label: "Conan Exiles"; /* @kind other */ --atmo-1: #2a1b0b; --atmo-2: #0a0b0e; --atmo-haze: rgba(187, 118, 55, 0.30); } /* ---------- Room to add more (stubs, ready to ship) ---------- */ [data-game="ark"] { --accent: #36c2a8; --accent-hover: #4ad7bd; --accent-press: #1f9c86; --accent-contrast: #04140f; --accent-text: #54dcc2; --accent-soft: rgba(54, 194, 168, 0.14); --accent-soft-strong: rgba(54, 194, 168, 0.24); --accent-border: rgba(54, 194, 168, 0.42); --accent-glow: rgba(54, 194, 168, 0.46); --game-label: "ARK"; /* @kind other */ --atmo-1: #07241f; --atmo-2: #0a0b0e; --atmo-haze: rgba(54, 194, 168, 0.26); } [data-game="valheim"] { --accent: #5b9bf0; --accent-hover: #74afff; --accent-press: #3c7ad4; --accent-contrast: #050d1a; --accent-text: #7fb2ff; --accent-soft: rgba(91, 155, 240, 0.14); --accent-soft-strong: rgba(91, 155, 240, 0.24); --accent-border: rgba(91, 155, 240, 0.42); --accent-glow: rgba(91, 155, 240, 0.46); --game-label: "Valheim"; /* @kind other */ --atmo-1: #0a1c2e; --atmo-2: #0a0b0e; --atmo-haze: rgba(91, 155, 240, 0.26); } [data-game="palworld"] { --accent: #58b6e8; --accent-hover: #71c8f6; --accent-press: #3a92c4; --accent-contrast: #04121b; --accent-text: #7fcaf2; --accent-soft: rgba(88, 182, 232, 0.14); --accent-soft-strong: rgba(88, 182, 232, 0.24); --accent-border: rgba(88, 182, 232, 0.42); --accent-glow: rgba(88, 182, 232, 0.46); --game-label: "Palworld"; /* @kind other */ --atmo-1: #08222e; --atmo-2: #0a0b0e; --atmo-haze: rgba(88, 182, 232, 0.26); } /* ---------- Light-theme accent legibility ---------- On light surfaces, accent-as-text reads better at the pressed (darker) value. Placed last so it wins for --accent-text when data-theme="light" and data-game=* are both on . */ [data-theme="light"] { --accent-text: var(--accent-press); --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-soft-strong: color-mix(in srgb, var(--accent) 20%, transparent); }