/* ========================================================= NEWVILLAIN — HOVER THEMES (LOUD) Punk-collage palette swaps. Each product card carries a data-theme, JS lifts it onto , and the whole page (cube field included) flips into that combo. ========================================================= */ /* ---------- 01 / COBALT — Yves Klein blue + mono yellow active ---------- */ :root[data-theme="cobalt"] { --nv-bg: #1632d2; --nv-bg-elev: #2546ee; --nv-bg-panel: #1a3aff; /* lighter cobalt for modal panels */ --nv-fg: #ffea00; /* full YELLOW active — no cream */ --nv-fg-dim: #c8b800; --nv-fg-dimmer: #8a7e00; --nv-line: #ffea00; --nv-line-strong: #ffea00; --nv-accent: #ffea00; --nv-accent-dim: #c8a000; --nv-cube-top: #2c4dff; --nv-cube-left: #1632d2; --nv-cube-right: #0a1c8a; --nv-cube-edge: #ffea00; --nv-cube-accent: #ffea00; } /* ---------- 02 / ACID — poison yellow-green, mono pink active ---------- */ :root[data-theme="acid"] { --nv-bg: #d3ec00; --nv-bg-elev: #e4f63d; --nv-bg-panel: #f6fb8a; /* lighter cream-yellow for modal/card panels */ --nv-fg: #ff0080; /* PINK active — text, borders, icons */ --nv-fg-dim: #c8006a; --nv-fg-dimmer: #8a004a; --nv-line: #ff0080; --nv-line-strong: #ff0080; --nv-accent: #ff0080; /* same pink — mono pink on acid */ --nv-accent-dim: #b8005d; /* Cube grid: yellow-green faces with pink outlines + pink markers */ --nv-cube-top: #e4f63d; --nv-cube-left: #b8cf00; --nv-cube-right: #859600; --nv-cube-edge: #ff0080; --nv-cube-accent: #ff0080; } /* ---------- 03 / HOTPINK — hot pink + mono blood red active ---------- */ :root[data-theme="hotpink"] { --nv-bg: #ff2a8d; --nv-bg-elev: #ff5aa8; --nv-bg-panel: #ff77b4; /* lighter pink for modal/card panels */ --nv-fg: #c40016; --nv-fg-dim: #8a0010; --nv-fg-dimmer: #5a000a; --nv-line: #c40016; --nv-line-strong: #c40016; --nv-accent: #c40016; /* same red — no more cream */ --nv-accent-dim: #8a0010; --nv-cube-top: #ff7ab8; --nv-cube-left: #ff2a8d; --nv-cube-right: #a8005a; --nv-cube-edge: #c40016; --nv-cube-accent: #c40016; } /* ---------- 04 / PETROL — deep teal + mono red active ---------- */ :root[data-theme="petrol"] { --nv-bg: #0a5e5b; --nv-bg-elev: #0c7572; --nv-bg-panel: #0f8a86; /* brighter teal for modal/card panels */ --nv-fg: #ff3024; --nv-fg-dim: #c41a10; --nv-fg-dimmer: #7a0e08; --nv-line: #ff3024; --nv-line-strong: #ff3024; --nv-accent: #ff3024; /* same red — no more cream */ --nv-accent-dim: #c41a10; --nv-cube-top: #0e8a86; --nv-cube-left: #0a5e5b; --nv-cube-right: #053230; --nv-cube-edge: #ff3024; --nv-cube-accent: #ff3024; }