/* ========================================================================== THEMES — one block per cosplay project. To switch the whole site: run ./set-theme.sh woodland (or edit data-theme="..." on the tag of each page). To add a project: copy a block, rename it, change the values. Nothing outside this file needs to change — styles.css only reads these tokens. Rules that keep a new theme from falling apart: · --accent is the only saturated colour. Keep it above 45% saturation. · --support stays under 30% saturation. It is a supporting role, not a second star. If both shout, nothing leads. · --bg, --surface and --surface-lift are the accent's hue drained almost to grey. That is what makes the palette feel like one thing. · Every colour used for text needs 4.5:1 against --surface. Themes control shape as well as colour: --radius rounds every card and --tilt sets how far the badge hangs off-square. Bold projects want a tighter radius and more tilt; elegant ones want softer corners and almost no tilt. ========================================================================== */ :root { /* fallback = woodland, so a missing data-theme still looks intentional */ --bg: #0f1512; --surface: #18201a; --surface-lift: #212b23; --line: #2e3b31; --accent: #c8a04a; --accent-hover: #d9b465; --accent-tint: rgba(200, 160, 74, .14); --support: #85a0aa; --text: #e9ece3; --muted: #98a596; --glow-1: rgba(200, 160, 74, .10); --glow-2: rgba(133, 160, 170, .06); --radius: 14px; --tilt: -0.8deg; } /* --- Woodland — greenwood, lantern gold, moonlit silver -------------------- For elven and forest-realm builds. Deep canopy green base, warm lantern gold as the single accent, cool moonlight as the support. -------------- */ [data-theme='woodland'] { --bg: #0f1512; --surface: #18201a; --surface-lift: #212b23; --line: #2e3b31; --accent: #c8a04a; --accent-hover: #d9b465; --accent-tint: rgba(200, 160, 74, .14); --support: #85a0aa; --text: #e9ece3; --muted: #98a596; --glow-1: rgba(200, 160, 74, .10); --glow-2: rgba(133, 160, 170, .06); --radius: 14px; --tilt: -0.8deg; } /* --- Dusk — plum and raspberry (the house theme) --------------------------- */ [data-theme='dusk'] { --bg: #171219; --surface: #231c2b; --surface-lift: #2f2739; --line: #423851; --accent: #e4607f; --accent-hover: #ec7b95; --accent-tint: rgba(228, 96, 127, .14); --support: #7cbcb4; --text: #ece3e6; --muted: #a2949f; --glow-1: rgba(228, 96, 127, .13); --glow-2: rgba(124, 188, 180, .05); --radius: 14px; --tilt: -0.8deg; } /* --- Harbour — salt water, weathered brass, verdigris ---------------------- */ [data-theme='harbour'] { --bg: #0c1418; --surface: #15212a; --surface-lift: #1e2d38; --line: #2b3d49; --accent: #c07a3e; --accent-hover: #d08f52; --accent-tint: rgba(192, 122, 62, .14); --support: #6fa8a0; --text: #e6ecec; --muted: #93a3a8; --glow-1: rgba(192, 122, 62, .11); --glow-2: rgba(111, 168, 160, .06); --radius: 14px; --tilt: -0.8deg; } /* --- Forge — dark iron, ember, cold steel --------------------------------- */ [data-theme='forge'] { --bg: #14100f; --surface: #1e1917; --surface-lift: #2a2320; --line: #3a302b; --accent: #d2643a; --accent-hover: #e07c55; --accent-tint: rgba(210, 100, 58, .14); --support: #9b8f86; --text: #ece5df; --muted: #a2948a; --glow-1: rgba(210, 100, 58, .11); --glow-2: rgba(155, 143, 134, .05); --radius: 14px; --tilt: -0.8deg; } /* --- Starlight — midnight violet, garnet, moonlit steel ------------------- Leans elegant rather than loud: softer corners, the badge almost square, a garnet that glows instead of shouts. The violet base sits between the garnet accent and the steel support on the wheel, so all three read as one family — a split scheme rather than the drained-hue trick the other themes use. ------------------------------------------------------------ */ [data-theme='starlight'] { --bg: #12111c; --surface: #1b1a28; --surface-lift: #262436; --line: #383548; --accent: #d17287; --accent-hover: #dc8698; --accent-tint: rgba(209, 114, 135, .14); --support: #7f8fa6; --text: #e9e7f0; --muted: #9a99ad; --glow-1: rgba(209, 114, 135, .11); --glow-2: rgba(127, 143, 166, .06); --radius: 18px; --tilt: -0.3deg; }