/* ========================================================================== KEEPITIL V3 — THEME ENGINE + DESIGN TOKENS (Phase 2, +logo +banner) :root = current live values (default = identical). A theme flips data-theme on and overrides tokens ONLY — no page rebuilds. PER-THEME FORMAT: --brand --brand-2 --accent --gold --glow accents / hero tint --live live indicator (constant) --theme-label text label --theme-logo which colored KEEPITIL mark to show (url) --theme-banner short campaign line for the seasonal ribbon ========================================================================== */ :root{ --brand:#00b4ff; --brand-2:#5cc8ff; --accent:#8b5cff; --gold:#d4a017; --live:#00ff88; --glow:#00b4ff; --purple:#6a5cff; --purple-2:#8b5cff; --bg:#0a0a0f; --surface:#0c0c16; --surface-2:#15151f; --text:#f0f0f0; --muted:#888888; --line:rgba(255,255,255,.08); --font:'Inter',system-ui,-apple-system,sans-serif; --tracking:.02em; --tracking-wide:.14em; --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:56px; --sp-6:88px; --radius:14px; --radius-lg:22px; --radius-pill:999px; --nav-h:66px; --maxw:1400px; --shadow:0 10px 40px rgba(0,0,0,.45); --ease:cubic-bezier(.2,.7,.2,1); --dur:.35s; --theme-label:"KEEPITIL"; --theme-logo:url(/v3/logo-blue-nav.png); --theme-banner:"STRAIGHT FROM THE UNDERGROUND"; --theme-bg:url(/v3/bg/default.jpg); } /* Themed hero backdrop — a fixed layer behind all content. Shows the active theme's --theme-bg once the image exists in /v3/bg/; invisible (404) until then. Pages with their own body::before keep theirs (no conflict). */ body::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background:var(--theme-bg) center top/cover no-repeat; opacity:.16; transition:opacity var(--dur) var(--ease); } /* ---- MOBILE OVERFLOW SAFETY NET (site-wide) ---- Caps runaway media widths and blocks stray horizontal scroll so no page renders wider than the phone screen. Low-risk: only constrains max width. */ html,body{ max-width:100%; overflow-x:hidden; } img,video,canvas,iframe,embed,object{ max-width:100%; } img{ height:auto; } /* ===================== ANNUAL THEME SYSTEM ===================== (1) 4 SEASONAL BASE designs run by default. (2) HOLIDAY OVERLAYS sit on top on their dates, then revert to the season. Founder- configurable; date-based auto-activation + manual override. ==== */ /* ------------------ SEASONAL BASE (4) ------------------ */ [data-theme="spring"]{ --bg:#0c1516; --surface:#0c1516; --brand:#34d399; --brand-2:#f472b6; --accent:#a7f3d0; --gold:#fbbf24; --glow:#34d399; --theme-label:"Spring"; --theme-logo:url(/v3/logo-green-nav.png); --theme-banner:"SPRING SEASON \00b7 FRESH FREQUENCIES"; --theme-bg:url(/v3/bg/spring.jpg); } [data-theme="summer"]{ --bg:#171310; --surface:#171310; --brand:#ffb02e; --brand-2:#ff5c7a; --accent:#3ad1c6; --gold:#ff8c42; --glow:#ffb02e; --theme-label:"Summer"; --theme-logo:url(/v3/logo-orange-nav.png); --theme-banner:"SUMMER SEASON \00b7 WAREHOUSES + POOLS"; --theme-bg:url(/v3/bg/summer.jpg); } [data-theme="fall"]{ --bg:#151010; --surface:#151010; --brand:#e07a24; --brand-2:#c2410c; --accent:#f0a020; --gold:#e0a458; --glow:#e07a24; --theme-label:"Fall"; --theme-logo:url(/v3/logo-red-nav.png); --theme-banner:"FALL SEASON \00b7 THE UNDERGROUND HEATS UP"; --theme-bg:url(/v3/bg/fall.jpg); } [data-theme="winter"]{ --bg:#0e131a; --surface:#0e131a; --brand:#56b4e8; --brand-2:#a5b4fc; --accent:#cfe8ff; --gold:#e0f2fe; --glow:#56b4e8; --theme-label:"Winter"; --theme-logo:url(/v3/logo-cyan-nav.png); --theme-banner:"WINTER SEASON \00b7 AFTER-DARK ONLY"; --theme-bg:url(/v3/bg/winter.jpg); } /* ------------------ HOLIDAY OVERLAYS (on top of the season) ------------------ */ /* JAN — New Year */ [data-theme="newyear"]{ --bg:#161414; --surface:#161414; --brand:#e9c46a; --brand-2:#fff2c2; --accent:#c0c8ff; --gold:#ffffff; --glow:#e9c46a; --theme-label:"New Year"; --theme-logo:url(/v3/logo-yellow-nav.png); --theme-banner:"NEW YEAR \00b7 NEW SETS"; --theme-bg:url(/v3/bg/newyear.jpg); } /* FEB — Valentine's */ [data-theme="valentines"]{ --bg:#170d15; --surface:#170d15; --brand:#ff4d8d; --brand-2:#ff8fb3; --accent:#ff2d55; --gold:#ffd1dc; --glow:#ff4d8d; --theme-label:"Valentine's"; --theme-logo:url(/v3/logo-pink-nav.png); --theme-banner:"VALENTINE'S \00b7 BRING YOUR RAVE BAE"; --theme-bg:url(/v3/bg/valentines.jpg); } /* MAR — March Madness */ [data-theme="marchmadness"]{ --bg:#170f0e; --surface:#170f0e; --brand:#ff6b00; --brand-2:#ffae42; --accent:#111318; --gold:#f4a300; --glow:#ff6b00; --theme-label:"March Madness"; --theme-logo:url(/v3/logo-orange-nav.png); --theme-banner:"MARCH MADNESS \00b7 BRACKET THE BEST SETS"; --theme-bg:url(/v3/bg/marchmadness.jpg); } /* APR 20 — 420 */ [data-theme="fourtwenty"]{ --bg:#0c1312; --surface:#0c1312; --brand:#2fbf4f; --brand-2:#a8e63d; --accent:#e0c341; --gold:#d9b310; --glow:#2fbf4f; --theme-label:"420"; --theme-logo:url(/v3/logo-green-nav.png); --theme-banner:"420 \00b7 ELEVATED FREQUENCIES"; --theme-bg:url(/v3/bg/fourtwenty.jpg); } /* APR — Festival Season */ [data-theme="festival"]{ --bg:#170b18; --surface:#170b18; --brand:#ff2ec4; --brand-2:#00e5ff; --accent:#c6ff00; --gold:#ffd166; --glow:#ff2ec4; --theme-label:"Festival Season"; --theme-logo:url(/v3/logo-neon-nav.png); --theme-banner:"FESTIVAL SEASON \00b7 EDC + BEYOND"; --theme-bg:url(/v3/bg/festival.jpg); } /* MAY 5 — Cinco de Mayo */ [data-theme="cincodemayo"]{ --bg:#0b1212; --surface:#0b1212; --brand:#2ea44f; --brand-2:#f4c430; --accent:#e5383b; --gold:#f4c430; --glow:#2ea44f; --theme-label:"Cinco de Mayo"; --theme-logo:url(/v3/logo-green-nav.png); --theme-banner:"CINCO DE MAYO \00b7 FIESTA FREQUENCIES"; --theme-bg:url(/v3/bg/cincodemayo.jpg); } /* JUL 4 — Independence Day */ [data-theme="independence"]{ --bg:#0b0f1a; --surface:#0b0f1a; --brand:#1d6fe0; --brand-2:#e63946; --accent:#f1faee; --gold:#e63946; --glow:#1d6fe0; --theme-label:"July 4th"; --theme-logo:url(/v3/logo-blue-nav.png); --theme-banner:"JULY 4TH \00b7 LOUDER THAN FIREWORKS"; --theme-bg:url(/v3/bg/independence.jpg); } /* SEP — Labor Day */ [data-theme="laborday"]{ --bg:#171111; --surface:#171111; --brand:#ff8c42; --brand-2:#ffd166; --accent:#1d6fe0; --gold:#ffb02e; --glow:#ff8c42; --theme-label:"Labor Day"; --theme-logo:url(/v3/logo-orange-nav.png); --theme-banner:"LABOR DAY \00b7 LAST WAREHOUSE OF SUMMER"; --theme-bg:url(/v3/bg/laborday.jpg); } /* OCT 31 — Halloween */ [data-theme="halloween"]{ --bg:#170f0f; --surface:#170f0f; --brand:#ff7518; --brand-2:#ff9d4d; --accent:#8b2fc9; --gold:#39ff88; --glow:#ff7518; --theme-label:"Halloween"; --theme-logo:url(/v3/logo-orange-nav.png); --theme-banner:"HALLOWEEN \00b7 MASKS ON, BASS UP"; --theme-bg:url(/v3/bg/halloween.jpg); } /* NOV — Thanksgiving */ [data-theme="thanksgiving"]{ --bg:#151010; --surface:#151010; --brand:#d98324; --brand-2:#e0a458; --accent:#7a3b12; --gold:#e0a458; --glow:#d98324; --theme-label:"Thanksgiving"; --theme-logo:url(/v3/logo-orange-nav.png); --theme-banner:"THANKSGIVING \00b7 GRATEFUL + BASS-HEAVY"; --theme-bg:url(/v3/bg/thanksgiving.jpg); } /* DEC — Winter Holidays */ [data-theme="holidays"]{ --bg:#160c11; --surface:#160c11; --brand:#e5383b; --brand-2:#2ea44f; --accent:#f4c430; --gold:#f4c430; --glow:#e5383b; --theme-label:"Winter Holidays"; --theme-logo:url(/v3/logo-red-nav.png); --theme-banner:"WINTER HOLIDAYS \00b7 WRAPPED IN SOUND"; --theme-bg:url(/v3/bg/holidays.jpg); } /* DEC 31 — NYE */ [data-theme="nye"]{ --bg:#17150e; --surface:#17150e; --brand:#ffd700; --brand-2:#fff2c2; --accent:#c0c8ff; --gold:#ffffff; --glow:#ffd700; --theme-label:"NYE"; --theme-logo:url(/v3/logo-yellow-nav.png); --theme-banner:"NYE \00b7 COUNTDOWN TO THE DROP"; --theme-bg:url(/v3/bg/nye.jpg); } /* ANY MONTH — Community Spotlight */ [data-theme="spotlight"]{ --bg:#170e17; --surface:#170e17; --brand:#ff5fa2; --brand-2:#9b83ff; --accent:#ffd166; --gold:#ffd166; --glow:#ff5fa2; --theme-label:"Community Spotlight"; --theme-logo:url(/v3/logo-pink-nav.png); --theme-banner:"COMMUNITY SPOTLIGHT \00b7 GIVE BACK, GET DOWN"; --theme-bg:url(/v3/bg/spotlight.jpg); }