/* ============================================================ DTPS — Theme system Themes swap CSS variables via [data-theme] on . The base design uses --ink / --paper / accent vars, so a theme only needs to redefine those. Holiday overlays layer on top via [data-holiday] and add accent flourishes. ============================================================ */ /* ---- DEFAULT: The Mark (black & white, the original) ---- */ :root, [data-theme="default"]{ --paper:#FFFFFF; --ink:#0A0A0A; --gray-1:#F2F2F2; --gray-3:#CFCFCF; --gray-5:#8A8A8A; --gray-7:#4A4A4A; --line:#0A0A0A; --accent:#0A0A0A; /* default has no color — accent = ink */ --accent-contrast:#FFFFFF; } /* ---- MIDNIGHT: inverted dark (simple) ---- */ [data-theme="midnight"]{ --paper:#0B0B0E; --ink:#F5F5F7; --gray-1:#16161B; --gray-3:#2A2A33; --gray-5:#6E6E7A; --gray-7:#A8A8B4; --line:#2A2A33; --accent:#F5F5F7; --accent-contrast:#0B0B0E; } /* ---- SLATE: soft professional gray (simple) ---- */ [data-theme="slate"]{ --paper:#1A1D23; --ink:#E8EBF0; --gray-1:#22262E; --gray-3:#363B45; --gray-5:#6B7280; --gray-7:#9AA3B2; --line:#363B45; --accent:#5B8DEF; --accent-contrast:#0B0B0E; } /* ---- CYBER: neon on near-black (fun) ---- */ [data-theme="cyber"]{ --paper:#080510; --ink:#E6F9FF; --gray-1:#120A22; --gray-3:#241640; --gray-5:#6A4FA0; --gray-7:#A98FE0; --line:#2E1A55; --accent:#00F0FF; --accent-contrast:#080510; } [data-theme="cyber"] .page-title .outline, [data-theme="cyber"] .app-title .outline{ -webkit-text-stroke-color:var(--accent); } /* ---- SAKURA: soft pink/cream (fun) ---- */ [data-theme="sakura"]{ --paper:#FFF5F7; --ink:#3A2730; --gray-1:#FCE8EE; --gray-3:#F3C6D5; --gray-5:#C98BA5; --gray-7:#8A5A72; --line:#E89BB5; --accent:#FF6FA5; --accent-contrast:#FFFFFF; } /* ---- FRAGPUNK: the game's loud magenta/cyan/yellow energy (fun) ---- */ [data-theme="fragpunk"]{ --paper:#0D0A12; --ink:#FFFFFF; --gray-1:#1A1320; --gray-3:#2E2138; --gray-5:#7A5C8F; --gray-7:#C9A8DB; --line:#3D2A4A; --accent:#FF2D7E; --accent-contrast:#0D0A12; } [data-theme="fragpunk"] .page-title .outline, [data-theme="fragpunk"] .app-title .outline{ -webkit-text-stroke-color:#00E5FF; } /* ============================================================ ACCENT WIRING — make existing accent spots use --accent so themes actually show color where it makes sense. ============================================================ */ .m-status.live-now, .m-status.live-now .live-dot{ /* live stays brand red always */ } /* buttons get a subtle accent on themed (non-default) skins */ [data-theme]:not([data-theme="default"]) .btn{ position:relative; } /* ============================================================ HOLIDAY OVERLAYS — layered on top of ANY theme via [data-holiday] on . Kept tasteful: a top ribbon + accent tint, so they compose with every theme. ============================================================ */ [data-holiday]:not([data-holiday="none"])::before{ content:attr(data-holiday-label); position:fixed;top:0;left:0;right:0;z-index:9000; text-align:center;font-family:var(--mono);font-size:11px; letter-spacing:0.2em;text-transform:uppercase; padding:6px 12px;color:var(--accent-contrast); background:var(--holiday-accent,#0A0A0A); pointer-events:none; } [data-holiday]:not([data-holiday="none"]) .top{ /* nudge nav down a touch under the ribbon */ } /* per-holiday accent colors */ [data-holiday="halloween"]{ --holiday-accent:#FF7518; } [data-holiday="christmas"]{ --holiday-accent:#C8102E; } [data-holiday="easter"]{ --holiday-accent:#B5A8E0; } [data-holiday="newyear"]{ --holiday-accent:#D4AF37; } [data-holiday="valentines"]{--holiday-accent:#E94F8A; } [data-holiday="lunar"]{ --holiday-accent:#E23B3B; } [data-holiday="diwali"]{ --holiday-accent:#F4A300; } [data-holiday="pride"]{ --holiday-accent:#E40303; } [data-holiday="stpatricks"]{--holiday-accent:#169B62; }