/* ============================================================================ CultureOfHipHop.com — Theme Presets 20 switchable visual identities, each a set of CSS custom-property overrides applied via html[data-theme="slug"]. Activate one from /admin/themes.php — includes/header.php reads the active theme from the `themes` DB table and writes the matching data-theme attribute onto , so this file is the ONLY place theme colors/fonts/hero-art live. No template markup changes per theme. ============================================================================ */ html[data-theme="neon-nights"] { /* Neon Nights — The flagship look — deep charcoal with magenta/gold/cyan neon accents. */ --bg: #08080a; --bg-elevated: #121216; --bg-card: #16161b; --bg-card-hover: #1c1c22; --border: #26262e; --border-soft: rgba(255,255,255,0.06); --text: #f5f4f2; --muted: #93909c; --gold: #f5c518; --gold-soft: #ffe08a; --magenta: #ff2e88; --cyan: #2af0d0; --violet: #9b6bff; --gold-rgb: 245,197,24; --magenta-rgb: 255,46,136; --cyan-rgb: 42,240,208; --violet-rgb: 155,107,255; --radius: 16px; --radius-sm: 10px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-city.jpg'); } html[data-theme="daylight-concrete"] { /* Daylight Concrete — Bright, professional daytime look — light concrete tones with warm amber accents. */ --bg: #f3f2ee; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f7f6f2; --border: #e0ddd5; --border-soft: rgba(0,0,0,0.06); --text: #191917; --muted: #6b685f; --gold: #c07800; --gold-soft: #e0a030; --magenta: #c81b64; --cyan: #0891a0; --violet: #7440c9; --gold-rgb: 192,120,0; --magenta-rgb: 200,27,100; --cyan-rgb: 8,145,160; --violet-rgb: 116,64,201; --radius: 16px; --radius-sm: 10px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-daylight-concrete.jpg'); } html[data-theme="old-school-boombox"] { /* Old School Boombox — Retro 80s/90s warmth — cassette-tape browns and boombox amber glow. */ --bg: #1b130c; --bg-elevated: #241a10; --bg-card: #2b1f14; --bg-card-hover: #33261a; --border: #4a3624; --border-soft: rgba(255,220,180,0.07); --text: #f5e6d3; --muted: #b39a7c; --gold: #ffb347; --gold-soft: #ffd08a; --magenta: #ff6b4a; --cyan: #4ecdc4; --violet: #c77dff; --gold-rgb: 255,179,71; --magenta-rgb: 255,107,74; --cyan-rgb: 78,205,196; --violet-rgb: 199,125,255; --radius: 8px; --radius-sm: 6px; --font-display: 'Oswald', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-old-school-boombox.jpg'); } html[data-theme="trap-chrome"] { /* Trap Chrome — Dark steel and icy chrome — cold-blue high-tech trap aesthetic. */ --bg: #0a0d10; --bg-elevated: #12171c; --bg-card: #161c22; --bg-card-hover: #1c232a; --border: #2a333c; --border-soft: rgba(220,235,245,0.06); --text: #eef3f7; --muted: #8b98a3; --gold: #7dd3fc; --gold-soft: #bae6fd; --magenta: #e63980; --cyan: #38bdf8; --violet: #818cf8; --gold-rgb: 125,211,252; --magenta-rgb: 230,57,128; --cyan-rgb: 56,189,248; --violet-rgb: 129,140,248; --radius: 10px; --radius-sm: 8px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-trap-chrome.jpg'); } html[data-theme="golden-era-vinyl"] { /* Golden Era Vinyl — Warm crate-digger sepia — vinyl-record gold on deep coffee brown. */ --bg: #150f0a; --bg-elevated: #1e150e; --bg-card: #241a12; --bg-card-hover: #2b2016; --border: #4a3826; --border-soft: rgba(230,200,150,0.06); --text: #f0e4d2; --muted: #a8927a; --gold: #d4a537; --gold-soft: #e8c878; --magenta: #b8543a; --cyan: #5a9e8f; --violet: #8a6a4a; --gold-rgb: 212,165,55; --magenta-rgb: 184,84,58; --cyan-rgb: 90,158,143; --violet-rgb: 138,106,74; --radius: 6px; --radius-sm: 4px; --font-display: 'Playfair Display', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-golden-era-vinyl.jpg'); } html[data-theme="cyberpunk-bars"] { /* Cyberpunk Bars — High-contrast purple/cyan neon — futuristic monospace battle-rap energy. */ --bg: #07060d; --bg-elevated: #0f0d1c; --bg-card: #141225; --bg-card-hover: #1a1730; --border: #2e2a4a; --border-soft: rgba(190,150,255,0.08); --text: #f0edff; --muted: #9d95bd; --gold: #f5d300; --gold-soft: #fce35a; --magenta: #ff2ee0; --cyan: #00f0ff; --violet: #a020f0; --gold-rgb: 245,211,0; --magenta-rgb: 255,46,224; --cyan-rgb: 0,240,255; --violet-rgb: 160,32,240; --radius: 4px; --radius-sm: 3px; --font-display: 'JetBrains Mono', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-cyberpunk-bars.jpg'); } html[data-theme="block-party-pop"] { /* Block Party Pop — Bright pop-art primaries on deep navy — block party energy. */ --bg: #0c0e1e; --bg-elevated: #131627; --bg-card: #181c30; --bg-card-hover: #1e2338; --border: #2c3252; --border-soft: rgba(255,255,255,0.07); --text: #f7f7fa; --muted: #9b9db8; --gold: #ffcc00; --gold-soft: #ffe066; --magenta: #ff3b5c; --cyan: #00c2ff; --violet: #7c5cff; --gold-rgb: 255,204,0; --magenta-rgb: 255,59,92; --cyan-rgb: 0,194,255; --violet-rgb: 124,92,255; --radius: 20px; --radius-sm: 14px; --font-display: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-block-party-pop.jpg'); } html[data-theme="underground-vinyl"] { /* Underground Vinyl — Near-black basement crate-digger vibe with deep maroon accents. */ --bg: #0a0707; --bg-elevated: #130d0d; --bg-card: #181111; --bg-card-hover: #1e1616; --border: #3a2424; --border-soft: rgba(255,200,200,0.05); --text: #f0e6e6; --muted: #9c8888; --gold: #c9a227; --gold-soft: #e0c060; --magenta: #8b1e3f; --cyan: #3a7d7d; --violet: #6b3fa0; --gold-rgb: 201,162,39; --magenta-rgb: 139,30,63; --cyan-rgb: 58,125,125; --violet-rgb: 107,63,160; --radius: 6px; --radius-sm: 4px; --font-display: 'Oswald', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-underground-vinyl.jpg'); } html[data-theme="west-coast-sunset"] { /* West Coast Sunset — Plum dusk sky with orange/pink/purple sunset gradient accents. */ --bg: #180f1c; --bg-elevated: #231627; --bg-card: #2a1b2f; --bg-card-hover: #332239; --border: #4d3355; --border-soft: rgba(255,200,220,0.07); --text: #f7ecf5; --muted: #b092b5; --gold: #ff9640; --gold-soft: #ffbd7a; --magenta: #ff4f9e; --cyan: #22d3c5; --violet: #b565f0; --gold-rgb: 255,150,64; --magenta-rgb: 255,79,158; --cyan-rgb: 34,211,197; --violet-rgb: 181,101,240; --radius: 18px; --radius-sm: 12px; --font-display: 'Poppins', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-west-coast-sunset.jpg'); } html[data-theme="east-coast-concrete"] { /* East Coast Concrete — Grayscale steel and brick with a single sharp red accent. */ --bg: #101112; --bg-elevated: #18191b; --bg-card: #1d1e20; --bg-card-hover: #232426; --border: #333537; --border-soft: rgba(255,255,255,0.05); --text: #f0f0f0; --muted: #9a9a9c; --gold: #d6d6d6; --gold-soft: #f0f0f0; --magenta: #e0233f; --cyan: #6b9aa8; --violet: #7a7a8a; --gold-rgb: 214,214,214; --magenta-rgb: 224,35,63; --cyan-rgb: 107,154,168; --violet-rgb: 122,122,138; --radius: 4px; --radius-sm: 3px; --font-display: 'Oswald', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-east-coast-concrete.jpg'); } html[data-theme="southern-candy-paint"] { /* Southern Candy Paint — Glossy candy-paint purple/teal/pink — Southern car culture shine. */ --bg: #0f0a1a; --bg-elevated: #171025; --bg-card: #1d1530; --bg-card-hover: #251b3c; --border: #3d2c5c; --border-soft: rgba(220,190,255,0.07); --text: #f3edff; --muted: #a898c0; --gold: #ffd166; --gold-soft: #ffe299; --magenta: #ff3fa4; --cyan: #2ee6c8; --violet: #a44bff; --gold-rgb: 255,209,102; --magenta-rgb: 255,63,164; --cyan-rgb: 46,230,200; --violet-rgb: 164,75,255; --radius: 20px; --radius-sm: 14px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-southern-candy-paint.jpg'); } html[data-theme="graffiti-wall"] { /* Graffiti Wall — Loud, saturated spray-paint colors straight off a subway car. */ --bg: #0d0d10; --bg-elevated: #161618; --bg-card: #1c1c1f; --bg-card-hover: #232326; --border: #333336; --border-soft: rgba(255,255,255,0.06); --text: #f5f5f5; --muted: #a0a0a5; --gold: #ffcc00; --gold-soft: #ffe066; --magenta: #ff2d55; --cyan: #00e0d0; --violet: #7b2fff; --gold-rgb: 255,204,0; --magenta-rgb: 255,45,85; --cyan-rgb: 0,224,208; --violet-rgb: 123,47,255; --radius: 10px; --radius-sm: 8px; --font-display: 'Bebas Neue', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-graffiti-wall.jpg'); } html[data-theme="minimal-studio"] { /* Minimal Studio — Clean white studio look — sharp, professional, single gold accent. */ --bg: #fafaf9; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f4f2; --border: #e5e4e0; --border-soft: rgba(0,0,0,0.05); --text: #141412; --muted: #6f6d67; --gold: #b8860b; --gold-soft: #d4a520; --magenta: #a01050; --cyan: #0a7d8c; --violet: #5a3fa0; --gold-rgb: 184,134,11; --magenta-rgb: 160,16,80; --cyan-rgb: 10,125,140; --violet-rgb: 90,63,160; --radius: 8px; --radius-sm: 6px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-minimal-studio.jpg'); } html[data-theme="midnight-club"] { /* Midnight Club — Deep indigo club lighting — magenta and gold under the haze. */ --bg: #0a0a18; --bg-elevated: #121228; --bg-card: #171732; --bg-card-hover: #1e1e3d; --border: #2e2e58; --border-soft: rgba(200,190,255,0.07); --text: #f2f0ff; --muted: #9694b8; --gold: #f5c518; --gold-soft: #ffe08a; --magenta: #ff2e88; --cyan: #4af0e0; --violet: #8a5cff; --gold-rgb: 245,197,24; --magenta-rgb: 255,46,136; --cyan-rgb: 74,240,224; --violet-rgb: 138,92,255; --radius: 16px; --radius-sm: 10px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-midnight-club.jpg'); } html[data-theme="champagne-vip"] { /* Champagne VIP — Black-and-gold luxury lounge — elegant serif, champagne shimmer. */ --bg: #0c0a08; --bg-elevated: #161210; --bg-card: #1c1714; --bg-card-hover: #231d19; --border: #3d3128; --border-soft: rgba(230,200,150,0.06); --text: #f5efe4; --muted: #ad9f8a; --gold: #e0b84a; --gold-soft: #f0d488; --magenta: #a83250; --cyan: #7a9a8a; --violet: #8a7550; --gold-rgb: 224,184,74; --magenta-rgb: 168,50,80; --cyan-rgb: 122,154,138; --violet-rgb: 138,117,80; --radius: 4px; --radius-sm: 3px; --font-display: 'Playfair Display', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-champagne-vip.jpg'); } html[data-theme="street-chrome-silver"] { /* Street Chrome Silver — Monochrome silver-and-black chrome — high-tech and reflective. */ --bg: #0e0e10; --bg-elevated: #17171a; --bg-card: #1c1c20; --bg-card-hover: #232327; --border: #333338; --border-soft: rgba(255,255,255,0.06); --text: #f2f2f4; --muted: #9a9aa0; --gold: #c8ccd4; --gold-soft: #e8ebf0; --magenta: #c0455f; --cyan: #7fd6e0; --violet: #8f96b8; --gold-rgb: 200,204,212; --magenta-rgb: 192,69,95; --cyan-rgb: 127,214,224; --violet-rgb: 143,150,184; --radius: 12px; --radius-sm: 9px; --font-display: 'Space Grotesk', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-street-chrome-silver.jpg'); } html[data-theme="boom-bap-sepia"] { /* Boom Bap Sepia — Vintage sepia photograph tones — dusty archive warmth. */ --bg: #161210; --bg-elevated: #1e1916; --bg-card: #241e1a; --bg-card-hover: #2b2420; --border: #4a3d32; --border-soft: rgba(230,210,180,0.06); --text: #ede2d0; --muted: #a89680; --gold: #c9973f; --gold-soft: #e0bc70; --magenta: #a5613f; --cyan: #6a8a80; --violet: #8a7050; --gold-rgb: 201,151,63; --magenta-rgb: 165,97,63; --cyan-rgb: 106,138,128; --violet-rgb: 138,112,80; --radius: 6px; --radius-sm: 4px; --font-display: 'Oswald', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-boom-bap-sepia.jpg'); } html[data-theme="drill-season"] { /* Drill Season — Icy blue/white/black — cold, sharp UK drill energy. */ --bg: #0a0d12; --bg-elevated: #11151c; --bg-card: #151a22; --bg-card-hover: #1a2029; --border: #2a3340; --border-soft: rgba(210,230,255,0.06); --text: #eef4fa; --muted: #8a97a8; --gold: #cfe8ff; --gold-soft: #eaf6ff; --magenta: #4a6fa0; --cyan: #4fd2ff; --violet: #6a7ea0; --gold-rgb: 207,232,255; --magenta-rgb: 74,111,160; --cyan-rgb: 79,210,255; --violet-rgb: 106,126,160; --radius: 6px; --radius-sm: 4px; --font-display: 'JetBrains Mono', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-drill-season.jpg'); } html[data-theme="festival-neon-rave"] { /* Festival Neon Rave — Blacklight rave energy — electric green, pink, and purple. */ --bg: #08090c; --bg-elevated: #0f1116; --bg-card: #13161c; --bg-card-hover: #191d24; --border: #282e38; --border-soft: rgba(180,255,220,0.07); --text: #f2fff8; --muted: #8fa89c; --gold: #d4ff2a; --gold-soft: #e8ff80; --magenta: #ff2ad4; --cyan: #2affea; --violet: #b02aff; --gold-rgb: 212,255,42; --magenta-rgb: 255,42,212; --cyan-rgb: 42,255,234; --violet-rgb: 176,42,255; --radius: 20px; --radius-sm: 14px; --font-display: 'Bebas Neue', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-festival-neon-rave.jpg'); } html[data-theme="monochrome-mode"] { /* Monochrome Mode — Pure black/white/gray — maximum contrast, minimum distraction. */ --bg: #000000; --bg-elevated: #0d0d0d; --bg-card: #121212; --bg-card-hover: #1a1a1a; --border: #2e2e2e; --border-soft: rgba(255,255,255,0.08); --text: #ffffff; --muted: #a0a0a0; --gold: #ffffff; --gold-soft: #dddddd; --magenta: #999999; --cyan: #cccccc; --violet: #888888; --gold-rgb: 255,255,255; --magenta-rgb: 153,153,153; --cyan-rgb: 204,204,204; --violet-rgb: 136,136,136; --radius: 8px; --radius-sm: 6px; --font-display: 'Inter', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, sans-serif; --hero-image: url('/assets/img/hero-monochrome-mode.jpg'); }