/** * theme.css * Global Theming Engine -- 5 visual archetypes via CSS Custom Properties. * Owns: all theme variable definitions and texture overlays. * Does NOT own: typography loading (typography-loader.js), admin theme-vars (theme-loader.js). * * Usage: Apply a .theme-* class to . Inline script in applies * the saved theme before first paint (see theme-switcher.js). * Default theme: .theme-carbon-kinetic */ /* --- Google Fonts ----------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=Cinzel:wght@400;600;700&family=Metal+Mania&display=swap'); /* --- Base reset bridging existing variable names ----------------------------- */ /* Maps new semantic names -> existing page variable names for backward compat. */ :root { /* Existing variable aliases (pages use these directly) */ --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-card: #1a1a26; --accent: #00f0ff; --accent-dim: rgba(0, 240, 255, 0.15); --fire: #ff4d2e; --fire-dim: rgba(255, 77, 46, 0.15); --gold: #ffd700; --text-primary: #e8e8f0; --text-secondary: #8888a0; --text-muted: #555570; --border: rgba(255, 255, 255, 0.06); --green: #22c55e; --green-dim: rgba(34, 197, 94, 0.08); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.08); /* New theming engine variables */ --accent-primary: #00f0ff; --text-accent: #00f0ff; --texture-overlay: none; /* Theme font */ --theme-font-heading: 'Space Grotesk', sans-serif; --theme-font-body: 'Inter', -apple-system, sans-serif; } /* ----------------------------------------------------------------------------- THEME 1 -- Carbon Kinetic (default) Metallic red on charcoal. High-energy industrial. ----------------------------------------------------------------------------- */ :root.theme-carbon-kinetic, .theme-carbon-kinetic { --bg-primary: #121212; --bg-secondary: #1a1a1a; --bg-card: #1e1e1e; --accent: #B22234; --accent-primary: #B22234; --accent-dim: rgba(178, 34, 52, 0.15); --text-accent: #B22234; --fire: #B22234; --fire-dim: rgba(178, 34, 52, 0.15); --gold: #B22234; --text-primary: #f0f0f0; --text-secondary: #999999; --text-muted: #555555; --border: rgba(255, 255, 255, 0.07); --green: #22c55e; --green-dim: rgba(34, 197, 94, 0.08); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.08); /* Hex-pattern texture */ --texture-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15z' fill='none' stroke='%23B2223418' stroke-width='1'/%3E%3Cpath d='M13.99 0L27.98 7.5v7.5l-13.99 8L0 15V7.5z' fill='none' stroke='%23B2223410' stroke-width='1'/%3E%3Cpath d='M0 31.75l13.99 8.01 13.99-8.01v8l-13.99 8.25L0 39.75z' fill='none' stroke='%23B2223410' stroke-width='1'/%3E%3C/svg%3E"); --theme-font-heading: 'Orbitron', 'Space Grotesk', sans-serif; --theme-font-body: 'Inter', -apple-system, sans-serif; } /* ----------------------------------------------------------------------------- THEME 2 -- Ethereal Hero Gold on white. Clean, prestige, editorial. ----------------------------------------------------------------------------- */ :root.theme-ethereal-hero, .theme-ethereal-hero { --bg-primary: #F8F9FA; --bg-secondary: #FFFFFF; --bg-card: #FFFFFF; --accent: #D4AF37; --accent-primary: #D4AF37; --accent-dim: rgba(212, 175, 55, 0.12); --text-accent: #B8860B; --fire: #D4AF37; --fire-dim: rgba(212, 175, 55, 0.12); --gold: #D4AF37; --text-primary: #1a1a1a; --text-secondary: #555555; --text-muted: #999999; --border: rgba(0, 0, 0, 0.08); --green: #16a34a; --green-dim: rgba(22, 163, 74, 0.08); --red: #dc2626; --red-dim: rgba(220, 38, 38, 0.08); /* Clean -- no heavy texture */ --texture-overlay: none; --theme-font-heading: 'Inter', -apple-system, sans-serif; --theme-font-body: 'Inter', -apple-system, sans-serif; } /* ----------------------------------------------------------------------------- THEME 3 -- Midnight Ultra Purple on deep purple. Sci-fi, cyberpunk. ----------------------------------------------------------------------------- */ :root.theme-midnight-ultra, .theme-midnight-ultra { --bg-primary: #0B0014; --bg-secondary: #110020; --bg-card: #180030; --accent: #BC13FE; --accent-primary: #BC13FE; --accent-dim: rgba(188, 19, 254, 0.15); --text-accent: #E040FB; --fire: #BC13FE; --fire-dim: rgba(188, 19, 254, 0.15); --gold: #e040fb; --text-primary: #F0E0FF; --text-secondary: #9966BB; --text-muted: #553366; --border: rgba(188, 19, 254, 0.12); --green: #7c3aed; --green-dim: rgba(124, 58, 237, 0.08); --red: #e040fb; --red-dim: rgba(224, 64, 251, 0.08); /* Scan-line overlay */ --texture-overlay: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(188, 19, 254, 0.03) 2px, rgba(188, 19, 254, 0.03) 4px ); --theme-font-heading: 'Rajdhani', 'Space Grotesk', sans-serif; --theme-font-body: 'Rajdhani', 'Inter', sans-serif; } /* ----------------------------------------------------------------------------- THEME 4 -- Primal Forge Metallic red on charcoal. Industrial steel aesthetic. ----------------------------------------------------------------------------- */ :root.theme-primal-forge, .theme-primal-forge { --bg-primary: #1C1C1C; --bg-secondary: #0A0A0A; --bg-card: #1C1C1C; --accent: #B22234; --accent-primary: #B22234; --accent-dim: rgba(178, 34, 52, 0.15); --text-accent: #FFFFFF; --fire: #B22234; --fire-dim: rgba(178, 34, 52, 0.15); --gold: #71797E; --text-primary: #FFFFFF; --text-secondary: #B0B0B0; --text-muted: #707070; --border: rgba(113, 121, 126, 0.3); --green: #22c55e; --green-dim: rgba(34, 197, 94, 0.08); --red: #ef4444; --red-dim: rgba(239, 68, 68, 0.08); /* Brushed-metal texture overlay */ --texture-overlay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3ClinearGradient id='brushed' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.02'/%3E%3Cstop offset='50%25' stop-color='%23ffffff' stop-opacity='0.005'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0.02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23brushed)'/%3E%3Cline x1='0' y1='10' x2='200' y2='10' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='0' y1='30' x2='200' y2='30' stroke='%23ffffff' stroke-width='0.5' opacity='0.05'/%3E%3Cline x1='0' y1='50' x2='200' y2='50' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='0' y1='70' x2='200' y2='70' stroke='%23ffffff' stroke-width='0.5' opacity='0.05'/%3E%3Cline x1='0' y1='90' x2='200' y2='90' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='0' y1='110' x2='200' y2='110' stroke='%23ffffff' stroke-width='0.5' opacity='0.05'/%3E%3Cline x1='0' y1='130' x2='200' y2='130' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'/%3E%3Cline x1='0' y1='150' x2='200' y2='150' stroke='%23ffffff' stroke-width='0.5' opacity='0.05'/%3E%3Cline x1='0' y1='170' x2='200' y2='170' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E"); --theme-font-heading: 'Rajdhani', 'Space Grotesk', sans-serif; --theme-font-body: 'Rajdhani', 'Inter', sans-serif; } /* ----------------------------------------------------------------------------- THEME 5 -- Legacy Gold Gold on royal blue. Prestige, championship. ----------------------------------------------------------------------------- */ :root.theme-legacy-gold, .theme-legacy-gold { --bg-primary: #002366; --bg-secondary: #002d80; --bg-card: #003399; --accent: #FFD700; --accent-primary: #FFD700; --accent-dim: rgba(255, 215, 0, 0.15); --text-accent: #FFD700; --fire: #FFD700; --fire-dim: rgba(255, 215, 0, 0.15); --gold: #FFD700; --text-primary: #FFFDE7; --text-secondary: #B8C8F0; --text-muted: #7890C0; --border: rgba(255, 215, 0, 0.15); --green: #90EE90; --green-dim: rgba(144, 238, 144, 0.1); --red: #FF6B6B; --red-dim: rgba(255, 107, 107, 0.1); /* High-gloss finish */ --texture-overlay: linear-gradient( 135deg, rgba(255, 215, 0, 0.04) 0%, transparent 50%, rgba(255, 215, 0, 0.02) 100% ); --theme-font-heading: 'Cinzel', 'Space Grotesk', serif; --theme-font-body: 'Inter', -apple-system, sans-serif; } /* ----------------------------------------------------------------------------- LEGACY VARIABLE BRIDGE index.html and some pages use older design tokens (--steel-dark, --steel-mid, etc.) These overrides map theme colors onto those legacy names so all pages respond. ----------------------------------------------------------------------------- */ :root.theme-carbon-kinetic, .theme-carbon-kinetic { --steel-dark: #121212; --steel-mid: #1a1a1a; --steel-surface: #1e1e1e; --accent-hot: #B22234; --accent-deep: #8B1A28; --steel: #aaaaaa; --steel-bright: #cccccc; --steel-dim: rgba(200,200,200,0.1); --steel-border: rgba(200,200,200,0.15); --steel-highlight: rgba(255,255,255,0.06); --carbon-base: #121212; } :root.theme-ethereal-hero, .theme-ethereal-hero { --steel-dark: #F8F9FA; --steel-mid: #FFFFFF; --steel-surface: #FFFFFF; --accent-hot: #E5C158; --accent-deep: #9B7D1A; --steel: #555555; --steel-bright: #333333; --steel-dim: rgba(0,0,0,0.06); --steel-border: rgba(0,0,0,0.1); --steel-highlight: rgba(255,255,255,0.5); --carbon-base: #EEEEEE; --bg: #F8F9FA; --bg-surface: #FFFFFF; } :root.theme-midnight-ultra, .theme-midnight-ultra { --steel-dark: #0B0014; --steel-mid: #110020; --steel-surface: #180030; --accent-hot: #D040FF; --accent-deep: #8A00CC; --steel: #9966BB; --steel-bright: #CC88EE; --steel-dim: rgba(188,19,254,0.1); --steel-border: rgba(188,19,254,0.2); --steel-highlight: rgba(188,19,254,0.08); --carbon-base: #0B0014; } :root.theme-primal-forge, .theme-primal-forge { --steel-dark: #1C1C1C; --steel-mid: #0A0A0A; --steel-surface: #1C1C1C; --accent-hot: #B22234; --accent-deep: #8B1A28; --steel: #71797E; --steel-bright: #A8B0B5; --steel-dim: rgba(113,121,126,0.1); --steel-border: rgba(113,121,126,0.3); --steel-highlight: rgba(255,255,255,0.08); --carbon-base: #1C1C1C; } :root.theme-legacy-gold, .theme-legacy-gold { --steel-dark: #002366; --steel-mid: #002d80; --steel-surface: #003399; --accent-hot: #FFE033; --accent-deep: #CC9900; --steel: #B8C8F0; --steel-bright: #FFFDE7; --steel-dim: rgba(255,215,0,0.1); --steel-border: rgba(255,215,0,0.2); --steel-highlight: rgba(255,215,0,0.08); --carbon-base: #002366; } /* ----------------------------------------------------------------------------- TEXTURE OVERLAY -- applied via body::after pseudo-element Each page's body::before is the noise/texture overlay. We hook into it via the texture-overlay variable. ----------------------------------------------------------------------------- */ body { font-family: var(--theme-font-body); } h1, h2, h3, h4 { font-family: var(--theme-font-heading); } /* Texture overlay layer -- stacks above page content background */ body.theme-textured::after { content: ''; position: fixed; inset: 0; background-image: var(--texture-overlay); background-size: auto; pointer-events: none; z-index: 9998; opacity: 1; } /* Light theme (Ethereal Hero) -- nav + body adjustments */ .theme-ethereal-hero .navbar, .theme-ethereal-hero [class*="navbar"], .theme-ethereal-hero nav.navbar, .theme-ethereal-hero nav.nav { background: rgba(248, 249, 250, 0.95) !important; border-bottom-color: rgba(0, 0, 0, 0.1) !important; color: #1a1a1a; } .theme-ethereal-hero .navbar-logo, .theme-ethereal-hero .nav-logo, .theme-ethereal-hero .logo-text { color: #1a1a1a !important; } /* Hide dark noise overlay in light theme */ .theme-ethereal-hero body::before { opacity: 0 !important; } /* Cards and surfaces in light theme */ .theme-ethereal-hero [class*="-card"], .theme-ethereal-hero [class*="card-"], .theme-ethereal-hero .stat-card, .theme-ethereal-hero .player-card, .theme-ethereal-hero .team-card { border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.06); } /* ----------------------------------------------------------------------------- THEME SWITCHER UI ----------------------------------------------------------------------------- */ .theme-switcher { position: relative; display: inline-flex; align-items: center; } .theme-switcher-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer; padding: 0.35rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-family: var(--theme-font-body); display: flex; align-items: center; gap: 0.35rem; transition: border-color 0.2s, color 0.2s; white-space: nowrap; } .theme-switcher-btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); } .theme-switcher-btn .theme-icon { font-size: 0.9rem; } .theme-switcher-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem; z-index: 10000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); min-width: 220px; } .theme-switcher-panel.open { display: block; } .theme-switcher-panel .panel-title { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.25rem 0.5rem 0.5rem; font-family: var(--theme-font-body); } .theme-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 7px; cursor: pointer; transition: background 0.15s; border: none; background: none; width: 100%; text-align: left; color: var(--text-secondary); font-size: 0.8rem; font-family: var(--theme-font-body); } .theme-option:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .theme-option.active { color: var(--accent-primary); background: var(--accent-dim); } .theme-option .swatch { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.1); } .theme-option .theme-name { flex: 1; font-weight: 500; } .theme-option .check { font-size: 0.75rem; opacity: 0; } .theme-option.active .check { opacity: 1; } /* Ethereal Hero panel -- light background adjustments */ .theme-ethereal-hero .theme-option:hover { background: rgba(0, 0, 0, 0.04); } .theme-ethereal-hero .theme-option.active { background: rgba(212, 175, 55, 0.1); }