/* ============================================================================= THEME SYSTEM - ParlayBuilder Usage: Add data-theme="theme-name" to element Default: data-theme="teal" (current theme) To add a new theme: 1. Add a new [data-theme="your-theme"] block below 2. Define all the --theme-* variables 3. Add the theme to the THEME_CONFIG in themeManager.js ============================================================================= */ /* ============================================================================= THEME: TEAL (Default - Current Theme) Clean navy background with teal/cyan accents ============================================================================= */ [data-theme="teal"], :root { /* Primary brand colors */ --theme-accent: #00D3BD; --theme-accent-bright: #00F5D4; --theme-accent-dark: #00AD84; --theme-accent-rgb: 0, 211, 189; /* Gradients */ --theme-gradient-primary: linear-gradient(135deg, #00F5D4 0%, #00D3BD 50%, #00AD84 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(0, 211, 189, 0.12) 0%, rgba(0, 173, 132, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(0, 211, 189, 0.03) 0%, transparent 100%); /* Backgrounds */ --theme-bg-base: #0a1628; --theme-bg-card: #0d1b2a; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(0, 211, 189, 0.08); /* Borders */ --theme-border-subtle: rgba(0, 211, 189, 0.1); --theme-border-default: #033B3F; --theme-border-strong: rgba(0, 211, 189, 0.2); --theme-border-accent: rgba(0, 211, 189, 0.25); /* Text */ --theme-text-primary: #ffffff; --theme-text-secondary: #e8ffe9; --theme-text-tertiary: #b4d7c4; --theme-text-muted: #999; --theme-text-on-accent: #0a1628; /* Shadows */ --theme-shadow-glow: 0 2px 8px rgba(0, 211, 189, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(0, 211, 189, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.2); /* Button inactive state */ --theme-btn-inactive-text: rgba(0, 211, 189, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(0, 211, 189, 0.08) 0%, rgba(0, 211, 189, 0.02) 100%); --theme-btn-inactive-border: rgba(0, 211, 189, 0.15); /* Cover page specific */ --theme-cover-bg: #081924; --theme-cover-accent: #7CE3D8; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(124, 227, 216, 0.98), rgba(34, 221, 182, 0.98)); --theme-cover-btn-border: rgba(34, 221, 182, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(34, 221, 182, 0.25); --theme-cover-glow-1: rgba(0, 211, 189, 0.24); --theme-cover-glow-2: rgba(73, 198, 255, 0.12); } /* ============================================================================= THEME: GOLD (Black & Gold - Premium Theme) Deep black background with gold/amber accents ============================================================================= */ [data-theme="gold"] { /* Primary brand colors */ --theme-accent: #FFB800; --theme-accent-bright: #FFD54F; --theme-accent-dark: #E5A500; --theme-accent-rgb: 255, 184, 0; /* Gradients */ --theme-gradient-primary: linear-gradient(135deg, #FFD54F 0%, #FFB800 50%, #E5A500 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(255, 184, 0, 0.12) 0%, rgba(229, 165, 0, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(255, 184, 0, 0.03) 0%, transparent 100%); /* Backgrounds */ --theme-bg-base: #0a0a0a; --theme-bg-card: #141414; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(255, 184, 0, 0.08); /* Borders */ --theme-border-subtle: rgba(255, 184, 0, 0.1); --theme-border-default: #2a2a2a; --theme-border-strong: rgba(255, 184, 0, 0.2); --theme-border-accent: rgba(255, 184, 0, 0.25); /* Text */ --theme-text-primary: #ffffff; --theme-text-secondary: #fff8e1; --theme-text-tertiary: #d4c4a8; --theme-text-muted: #888; --theme-text-on-accent: #0a0a0a; /* Shadows */ --theme-shadow-glow: 0 2px 8px rgba(255, 184, 0, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(255, 184, 0, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); /* Button inactive state */ --theme-btn-inactive-text: rgba(255, 184, 0, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(255, 184, 0, 0.08) 0%, rgba(255, 184, 0, 0.02) 100%); --theme-btn-inactive-border: rgba(255, 184, 0, 0.15); /* Cover page specific */ --theme-cover-bg: #0a0a0a; --theme-cover-accent: #FFD54F; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(255, 213, 79, 0.98), rgba(255, 184, 0, 0.98)); --theme-cover-btn-border: rgba(255, 184, 0, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(255, 184, 0, 0.25); --theme-cover-glow-1: rgba(255, 184, 0, 0.24); --theme-cover-glow-2: rgba(255, 213, 79, 0.12); } /* ============================================================================= THEME: PURPLE (Midnight Purple) Deep black with electric violet/purple accents ============================================================================= */ [data-theme="purple"] { --theme-accent: #A855F7; --theme-accent-bright: #C084FC; --theme-accent-dark: #9333EA; --theme-accent-rgb: 168, 85, 247; --theme-gradient-primary: linear-gradient(135deg, #C084FC 0%, #A855F7 50%, #9333EA 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(147, 51, 234, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(168, 85, 247, 0.03) 0%, transparent 100%); --theme-bg-base: #0a0a0f; --theme-bg-card: #12121a; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(168, 85, 247, 0.08); --theme-border-subtle: rgba(168, 85, 247, 0.1); --theme-border-default: #2a2a3a; --theme-border-strong: rgba(168, 85, 247, 0.2); --theme-border-accent: rgba(168, 85, 247, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #f3e8ff; --theme-text-tertiary: #c4b5d4; --theme-text-muted: #888; --theme-text-on-accent: #0a0a0f; --theme-shadow-glow: 0 2px 8px rgba(168, 85, 247, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(168, 85, 247, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --theme-btn-inactive-text: rgba(168, 85, 247, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0.02) 100%); --theme-btn-inactive-border: rgba(168, 85, 247, 0.15); --theme-cover-bg: #0a0a0f; --theme-cover-accent: #C084FC; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(192, 132, 252, 0.98), rgba(168, 85, 247, 0.98)); --theme-cover-btn-border: rgba(168, 85, 247, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(168, 85, 247, 0.25); --theme-cover-glow-1: rgba(168, 85, 247, 0.24); --theme-cover-glow-2: rgba(192, 132, 252, 0.12); } /* ============================================================================= THEME: SILVER (Slate Silver) Charcoal gray with chrome/silver accents ============================================================================= */ [data-theme="silver"] { --theme-accent: #94A3B8; --theme-accent-bright: #CBD5E1; --theme-accent-dark: #64748B; --theme-accent-rgb: 148, 163, 184; --theme-gradient-primary: linear-gradient(135deg, #CBD5E1 0%, #94A3B8 50%, #64748B 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(148, 163, 184, 0.12) 0%, rgba(100, 116, 139, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(148, 163, 184, 0.03) 0%, transparent 100%); --theme-bg-base: #0f1114; --theme-bg-card: #18191d; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(148, 163, 184, 0.08); --theme-border-subtle: rgba(148, 163, 184, 0.1); --theme-border-default: #2a2d32; --theme-border-strong: rgba(148, 163, 184, 0.2); --theme-border-accent: rgba(148, 163, 184, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #e2e8f0; --theme-text-tertiary: #94a3b8; --theme-text-muted: #64748b; --theme-text-on-accent: #0f1114; --theme-shadow-glow: 0 2px 8px rgba(148, 163, 184, 0.2); --theme-shadow-glow-strong: 0 4px 16px rgba(148, 163, 184, 0.3); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --theme-btn-inactive-text: rgba(148, 163, 184, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.02) 100%); --theme-btn-inactive-border: rgba(148, 163, 184, 0.15); --theme-cover-bg: #0f1114; --theme-cover-accent: #CBD5E1; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(203, 213, 225, 0.98), rgba(148, 163, 184, 0.98)); --theme-cover-btn-border: rgba(148, 163, 184, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(148, 163, 184, 0.2); --theme-cover-glow-1: rgba(148, 163, 184, 0.24); --theme-cover-glow-2: rgba(203, 213, 225, 0.12); } /* ============================================================================= THEME: COPPER (Bronze/Copper) Dark base with copper/bronze accents - vintage premium ============================================================================= */ [data-theme="copper"] { --theme-accent: #D97706; --theme-accent-bright: #F59E0B; --theme-accent-dark: #B45309; --theme-accent-rgb: 217, 119, 6; --theme-gradient-primary: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(180, 83, 9, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(217, 119, 6, 0.03) 0%, transparent 100%); --theme-bg-base: #0c0a08; --theme-bg-card: #151210; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(217, 119, 6, 0.08); --theme-border-subtle: rgba(217, 119, 6, 0.1); --theme-border-default: #2a2520; --theme-border-strong: rgba(217, 119, 6, 0.2); --theme-border-accent: rgba(217, 119, 6, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #fef3c7; --theme-text-tertiary: #c9b89a; --theme-text-muted: #888; --theme-text-on-accent: #0c0a08; --theme-shadow-glow: 0 2px 8px rgba(217, 119, 6, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(217, 119, 6, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --theme-btn-inactive-text: rgba(217, 119, 6, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.02) 100%); --theme-btn-inactive-border: rgba(217, 119, 6, 0.15); --theme-cover-bg: #0c0a08; --theme-cover-accent: #F59E0B; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(245, 158, 11, 0.98), rgba(217, 119, 6, 0.98)); --theme-cover-btn-border: rgba(217, 119, 6, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(217, 119, 6, 0.25); --theme-cover-glow-1: rgba(217, 119, 6, 0.24); --theme-cover-glow-2: rgba(245, 158, 11, 0.12); } /* ============================================================================= THEME: CRIMSON (Red) Black with red/crimson accents - bold, high-stakes ============================================================================= */ [data-theme="crimson"] { --theme-accent: #DC2626; --theme-accent-bright: #F87171; --theme-accent-dark: #B91C1C; --theme-accent-rgb: 220, 38, 38; --theme-gradient-primary: linear-gradient(135deg, #F87171 0%, #DC2626 50%, #B91C1C 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, rgba(185, 28, 28, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(220, 38, 38, 0.03) 0%, transparent 100%); --theme-bg-base: #0a0808; --theme-bg-card: #141111; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(220, 38, 38, 0.08); --theme-border-subtle: rgba(220, 38, 38, 0.1); --theme-border-default: #2a2222; --theme-border-strong: rgba(220, 38, 38, 0.2); --theme-border-accent: rgba(220, 38, 38, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #fee2e2; --theme-text-tertiary: #d4a8a8; --theme-text-muted: #888; --theme-text-on-accent: #ffffff; --theme-shadow-glow: 0 2px 8px rgba(220, 38, 38, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(220, 38, 38, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --theme-btn-inactive-text: rgba(220, 38, 38, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.02) 100%); --theme-btn-inactive-border: rgba(220, 38, 38, 0.15); --theme-cover-bg: #0a0808; --theme-cover-accent: #F87171; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(248, 113, 113, 0.98), rgba(220, 38, 38, 0.98)); --theme-cover-btn-border: rgba(220, 38, 38, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(220, 38, 38, 0.25); --theme-cover-glow-1: rgba(220, 38, 38, 0.24); --theme-cover-glow-2: rgba(248, 113, 113, 0.12); } /* ============================================================================= THEME: NEON (Hot Pink/Magenta) Pure black with hot pink/magenta - Vegas vibes ============================================================================= */ [data-theme="neon"] { --theme-accent: #EC4899; --theme-accent-bright: #F472B6; --theme-accent-dark: #DB2777; --theme-accent-rgb: 236, 72, 153; --theme-gradient-primary: linear-gradient(135deg, #F472B6 0%, #EC4899 50%, #DB2777 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(219, 39, 119, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(236, 72, 153, 0.03) 0%, transparent 100%); --theme-bg-base: #030303; --theme-bg-card: #0d0d0d; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(236, 72, 153, 0.08); --theme-border-subtle: rgba(236, 72, 153, 0.1); --theme-border-default: #222; --theme-border-strong: rgba(236, 72, 153, 0.2); --theme-border-accent: rgba(236, 72, 153, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #fce7f3; --theme-text-tertiary: #d4a8c4; --theme-text-muted: #888; --theme-text-on-accent: #030303; --theme-shadow-glow: 0 2px 8px rgba(236, 72, 153, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(236, 72, 153, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5); --theme-btn-inactive-text: rgba(236, 72, 153, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(236, 72, 153, 0.08) 0%, rgba(236, 72, 153, 0.02) 100%); --theme-btn-inactive-border: rgba(236, 72, 153, 0.15); --theme-cover-bg: #030303; --theme-cover-accent: #F472B6; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(244, 114, 182, 0.98), rgba(236, 72, 153, 0.98)); --theme-cover-btn-border: rgba(236, 72, 153, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(236, 72, 153, 0.25); --theme-cover-glow-1: rgba(236, 72, 153, 0.24); --theme-cover-glow-2: rgba(244, 114, 182, 0.12); } /* ============================================================================= THEME: SUNSET (Orange) Dark base with orange-to-red gradient - warm, exciting ============================================================================= */ [data-theme="sunset"] { --theme-accent: #F97316; --theme-accent-bright: #FB923C; --theme-accent-dark: #EA580C; --theme-accent-rgb: 249, 115, 22; --theme-gradient-primary: linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(249, 115, 22, 0.03) 0%, transparent 100%); --theme-bg-base: #0c0908; --theme-bg-card: #141110; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(249, 115, 22, 0.08); --theme-border-subtle: rgba(249, 115, 22, 0.1); --theme-border-default: #2a2420; --theme-border-strong: rgba(249, 115, 22, 0.2); --theme-border-accent: rgba(249, 115, 22, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #ffedd5; --theme-text-tertiary: #d4b8a8; --theme-text-muted: #888; --theme-text-on-accent: #0c0908; --theme-shadow-glow: 0 2px 8px rgba(249, 115, 22, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(249, 115, 22, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --theme-btn-inactive-text: rgba(249, 115, 22, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0.02) 100%); --theme-btn-inactive-border: rgba(249, 115, 22, 0.15); --theme-cover-bg: #0c0908; --theme-cover-accent: #FB923C; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(251, 146, 60, 0.98), rgba(249, 115, 22, 0.98)); --theme-cover-btn-border: rgba(249, 115, 22, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(249, 115, 22, 0.25); --theme-cover-glow-1: rgba(249, 115, 22, 0.24); --theme-cover-glow-2: rgba(251, 146, 60, 0.12); } /* ============================================================================= THEME: EMERALD (Money Green) Dark green base with bright emerald accents - money association ============================================================================= */ [data-theme="emerald"] { --theme-accent: #10B981; --theme-accent-bright: #34D399; --theme-accent-dark: #059669; --theme-accent-rgb: 16, 185, 129; --theme-gradient-primary: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, transparent 100%); --theme-bg-base: #071410; --theme-bg-card: #0d1c16; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(16, 185, 129, 0.08); --theme-border-subtle: rgba(16, 185, 129, 0.1); --theme-border-default: #1a3028; --theme-border-strong: rgba(16, 185, 129, 0.2); --theme-border-accent: rgba(16, 185, 129, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #d1fae5; --theme-text-tertiary: #a8d4c0; --theme-text-muted: #6b8f80; --theme-text-on-accent: #071410; --theme-shadow-glow: 0 2px 8px rgba(16, 185, 129, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(16, 185, 129, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --theme-btn-inactive-text: rgba(16, 185, 129, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%); --theme-btn-inactive-border: rgba(16, 185, 129, 0.15); --theme-cover-bg: #071410; --theme-cover-accent: #34D399; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(52, 211, 153, 0.98), rgba(16, 185, 129, 0.98)); --theme-cover-btn-border: rgba(16, 185, 129, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(16, 185, 129, 0.25); --theme-cover-glow-1: rgba(16, 185, 129, 0.24); --theme-cover-glow-2: rgba(52, 211, 153, 0.12); } /* ============================================================================= THEME: FOREST (Sage Green) Very dark green/black with muted sage accents - earthy, calming ============================================================================= */ [data-theme="forest"] { --theme-accent: #84CC16; --theme-accent-bright: #A3E635; --theme-accent-dark: #65A30D; --theme-accent-rgb: 132, 204, 22; --theme-gradient-primary: linear-gradient(135deg, #A3E635 0%, #84CC16 50%, #65A30D 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(132, 204, 22, 0.12) 0%, rgba(101, 163, 13, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(132, 204, 22, 0.03) 0%, transparent 100%); --theme-bg-base: #0a0c08; --theme-bg-card: #12150f; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(132, 204, 22, 0.08); --theme-border-subtle: rgba(132, 204, 22, 0.1); --theme-border-default: #252a20; --theme-border-strong: rgba(132, 204, 22, 0.2); --theme-border-accent: rgba(132, 204, 22, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #ecfccb; --theme-text-tertiary: #bcd4a0; --theme-text-muted: #788c68; --theme-text-on-accent: #0a0c08; --theme-shadow-glow: 0 2px 8px rgba(132, 204, 22, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(132, 204, 22, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --theme-btn-inactive-text: rgba(132, 204, 22, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(132, 204, 22, 0.08) 0%, rgba(132, 204, 22, 0.02) 100%); --theme-btn-inactive-border: rgba(132, 204, 22, 0.15); --theme-cover-bg: #0a0c08; --theme-cover-accent: #A3E635; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(163, 230, 53, 0.98), rgba(132, 204, 22, 0.98)); --theme-cover-btn-border: rgba(132, 204, 22, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(132, 204, 22, 0.25); --theme-cover-glow-1: rgba(132, 204, 22, 0.24); --theme-cover-glow-2: rgba(163, 230, 53, 0.12); } /* ============================================================================= THEME: ICE (Ice Blue) Near-black with icy cyan/light blue - cool, precise ============================================================================= */ [data-theme="ice"] { --theme-accent: #06B6D4; --theme-accent-bright: #22D3EE; --theme-accent-dark: #0891B2; --theme-accent-rgb: 6, 182, 212; --theme-gradient-primary: linear-gradient(135deg, #22D3EE 0%, #06B6D4 50%, #0891B2 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(8, 145, 178, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(6, 182, 212, 0.03) 0%, transparent 100%); --theme-bg-base: #080c10; --theme-bg-card: #0e1418; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(6, 182, 212, 0.08); --theme-border-subtle: rgba(6, 182, 212, 0.1); --theme-border-default: #1a2530; --theme-border-strong: rgba(6, 182, 212, 0.2); --theme-border-accent: rgba(6, 182, 212, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #cffafe; --theme-text-tertiary: #a0c8d4; --theme-text-muted: #688898; --theme-text-on-accent: #080c10; --theme-shadow-glow: 0 2px 8px rgba(6, 182, 212, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(6, 182, 212, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --theme-btn-inactive-text: rgba(6, 182, 212, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, rgba(6, 182, 212, 0.02) 100%); --theme-btn-inactive-border: rgba(6, 182, 212, 0.15); --theme-cover-bg: #080c10; --theme-cover-accent: #22D3EE; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(34, 211, 238, 0.98), rgba(6, 182, 212, 0.98)); --theme-cover-btn-border: rgba(6, 182, 212, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(6, 182, 212, 0.25); --theme-cover-glow-1: rgba(6, 182, 212, 0.24); --theme-cover-glow-2: rgba(34, 211, 238, 0.12); } /* ============================================================================= THEME: ROYAL (Royal Blue) Deep navy with cobalt accents - classic sports feel ============================================================================= */ [data-theme="royal"] { --theme-accent: #3B82F6; --theme-accent-bright: #60A5FA; --theme-accent-dark: #2563EB; --theme-accent-rgb: 59, 130, 246; --theme-gradient-primary: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%); --theme-gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.04) 100%); --theme-gradient-glow: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%); --theme-bg-base: #080a14; --theme-bg-card: #0e1220; --theme-bg-elevated: rgba(255, 255, 255, 0.03); --theme-bg-hover: rgba(59, 130, 246, 0.08); --theme-border-subtle: rgba(59, 130, 246, 0.1); --theme-border-default: #1a2540; --theme-border-strong: rgba(59, 130, 246, 0.2); --theme-border-accent: rgba(59, 130, 246, 0.25); --theme-text-primary: #ffffff; --theme-text-secondary: #dbeafe; --theme-text-tertiary: #a8c0e0; --theme-text-muted: #6888a8; --theme-text-on-accent: #ffffff; --theme-shadow-glow: 0 2px 8px rgba(59, 130, 246, 0.25); --theme-shadow-glow-strong: 0 4px 16px rgba(59, 130, 246, 0.4); --theme-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); --theme-btn-inactive-text: rgba(59, 130, 246, 0.6); --theme-btn-inactive-bg: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%); --theme-btn-inactive-border: rgba(59, 130, 246, 0.15); --theme-cover-bg: #080a14; --theme-cover-accent: #60A5FA; --theme-cover-btn-gradient: linear-gradient(180deg, rgba(96, 165, 250, 0.98), rgba(59, 130, 246, 0.98)); --theme-cover-btn-border: rgba(59, 130, 246, 0.45); --theme-cover-btn-shadow: 0 6px 24px rgba(59, 130, 246, 0.25); --theme-cover-glow-1: rgba(59, 130, 246, 0.24); --theme-cover-glow-2: rgba(96, 165, 250, 0.12); } /* ============================================================================= THEME APPLICATION - Override base styles with theme variables ============================================================================= */ /* Body background */ html, body { background: var(--theme-bg-base) !important; } body::before { background: var(--theme-gradient-glow) !important; } /* Cover page theming */ #cover-page { background: var(--theme-cover-bg) !important; } #cover-page .brand-accent { color: var(--theme-cover-accent) !important; } #cover-page .btn-cta { background-image: var(--theme-cover-btn-gradient) !important; border-color: var(--theme-cover-btn-border) !important; box-shadow: var(--theme-cover-btn-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } #cover-page .hero-preview-glow { background: linear-gradient(35deg, var(--theme-cover-glow-1), var(--theme-cover-glow-2), rgba(8, 25, 36, 0) 70%) !important; } #cover-page .preview-odds, #cover-page .pb-accent, #cover-page .accent { color: var(--theme-cover-accent) !important; } /* Nav theming */ .nav-name { color: var(--theme-accent) !important; } /* Glass panels */ .glass-panel { border-color: var(--theme-border-subtle) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%) !important; background-color: var(--theme-bg-card) !important; } .glass-panel::before { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.06) 0%, transparent 50%) !important; } .glass-panel::after { background: linear-gradient(90deg, transparent 0%, rgba(var(--theme-accent-rgb), 0.3) 50%, transparent 100%) !important; } /* Toggle buttons and chips */ .filter-mode-toggle, .def-position-toggle, .def-scope-toggle, .trend-sheets-container .window-toggle { background: var(--theme-btn-inactive-bg) !important; border-color: var(--theme-btn-inactive-border) !important; } .filter-mode-toggle::before { background: var(--theme-gradient-primary) !important; box-shadow: var(--theme-shadow-glow) !important; } .filter-mode-btn, .def-pos-btn, .def-scope-btn, .trend-sheets-container .window-btn { color: var(--theme-btn-inactive-text) !important; } .filter-mode-btn:hover, .def-pos-btn:hover, .def-scope-btn:hover, .trend-sheets-container .window-btn:hover { color: var(--theme-accent-bright) !important; } .filter-mode-btn.active, .def-pos-btn.active, .def-scope-btn.active, .trend-sheets-container .window-btn.active { background: var(--theme-gradient-primary) !important; color: var(--theme-text-on-accent) !important; box-shadow: var(--theme-shadow-glow) !important; } /* Game and market chips */ .game-chip, .market-chip, .trend-sheets-container .filter-chip { background: var(--theme-btn-inactive-bg) !important; border-color: var(--theme-btn-inactive-border) !important; color: rgba(var(--theme-accent-rgb), 0.9) !important; } .game-chip:hover, .market-chip:hover, .trend-sheets-container .filter-chip:hover { background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.15) 0%, rgba(var(--theme-accent-rgb), 0.05) 100%) !important; border-color: rgba(var(--theme-accent-rgb), 0.4) !important; box-shadow: 0 2px 12px rgba(var(--theme-accent-rgb), 0.15) !important; } .game-chip.active, .market-chip.active, .trend-sheets-container .filter-chip.active { background: var(--theme-gradient-primary) !important; color: var(--theme-text-on-accent) !important; border-color: rgba(var(--theme-accent-rgb), 0.6) !important; box-shadow: var(--theme-shadow-glow) !important; } /* Build and CTA buttons */ .trend-sheets-container .build-btn, .def-opp-add { background: var(--theme-gradient-primary) !important; color: var(--theme-text-on-accent) !important; box-shadow: var(--theme-shadow-glow) !important; } .trend-sheets-container .build-btn:hover, .def-opp-add:hover { box-shadow: var(--theme-shadow-glow-strong) !important; } /* Add buttons */ .trend-sheets-container .add-btn { background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.15) 0%, rgba(var(--theme-accent-rgb), 0.05) 100%) !important; border-color: var(--theme-border-accent) !important; color: var(--theme-accent) !important; } .trend-sheets-container .add-btn:hover { background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.25) 0%, rgba(var(--theme-accent-rgb), 0.1) 100%) !important; border-color: rgba(var(--theme-accent-rgb), 0.4) !important; box-shadow: 0 2px 12px rgba(var(--theme-accent-rgb), 0.2) !important; } .trend-sheets-container .add-btn.added, .trend-sheets-container .trend-item.selected .add-btn { background: var(--theme-gradient-primary) !important; border-color: rgba(var(--theme-accent-rgb), 0.5) !important; color: var(--theme-text-on-accent) !important; box-shadow: var(--theme-shadow-glow) !important; } /* Parlay footer */ #parlay-footer { background: transparent !important; } #parlay-footer::before { display: none !important; } /* Stake buttons */ .pf-wager-input .stake-btn { background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.12) 0%, rgba(var(--theme-accent-rgb), 0.04) 100%) !important; border-color: rgba(var(--theme-accent-rgb), 0.2) !important; color: rgba(var(--theme-accent-rgb), 0.9) !important; } .pf-wager-input .stake-btn:hover { background: linear-gradient(180deg, rgba(var(--theme-accent-rgb), 0.2) 0%, rgba(var(--theme-accent-rgb), 0.08) 100%) !important; border-color: rgba(var(--theme-accent-rgb), 0.4) !important; color: var(--theme-accent-bright) !important; } /* To win value */ .pf-towin-value { color: var(--theme-accent) !important; } /* Cards and containers */ .def-rankings-card, .trend-sheets-container .trend-sheets { background: var(--theme-bg-card) !important; border-color: var(--theme-border-subtle) !important; box-shadow: var(--theme-shadow-card) !important; } .def-rankings-card::before, .trend-sheets-container .trend-sheets::before { background: linear-gradient(90deg, transparent 0%, rgba(var(--theme-accent-rgb), 0.3) 50%, transparent 100%) !important; } /* Team abbreviation badges */ .def-team-abbr, .trend-sheets-container .team-abbr { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.1), rgba(var(--theme-accent-rgb), 0.05)) !important; color: var(--theme-accent) !important; border-color: var(--theme-border-accent) !important; } /* Top 3 rank badges */ .def-rank-badge.top3 { background: rgba(var(--theme-accent-rgb), 0.1) !important; color: var(--theme-accent) !important; } /* Sorted table headers */ .def-table th.sorted { color: var(--theme-accent) !important; } /* Accent text colors */ .def-player-team, .def-opp-odds, .def-stat-odds { color: var(--theme-accent) !important; } /* Opposing team row accent */ .def-opp-content { border-left-color: var(--theme-accent) !important; } .def-opp-tag { background: rgba(var(--theme-accent-rgb), 0.1) !important; border-color: var(--theme-border-accent) !important; color: var(--theme-accent) !important; } /* Parlay count badge */ .trend-sheets-container .parlay-count { background: rgba(var(--theme-accent-rgb), 0.1) !important; color: var(--theme-accent) !important; } /* Matchup header gradient */ .trend-sheets-container .matchup-header { background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.08), rgba(var(--theme-accent-rgb), 0.02)) !important; } /* Odds badge */ .trend-sheets-container .odds-badge { color: var(--theme-accent) !important; } /* Hit rate bar gradient */ .trend-sheets-container .hitrate-fill { background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-dark)) !important; } /* Loader */ .loader-text { color: var(--theme-accent) !important; } /* Spinner */ .def-spinner { border-top-color: var(--theme-accent) !important; } /* ============================================================================= THEME TOGGLE BUTTON STYLES ============================================================================= */ .theme-toggle-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 14px; font-weight: 600; font-size: clamp(14px, 4vw, 16px); min-height: 48px; border: 1px solid var(--pb-line, rgba(255, 255, 255, 0.12)); color: var(--pb-text, #EAF7F4); background: rgba(255, 255, 255, 0.05); transition: background 0.15s ease, border-color 0.15s ease; text-decoration: none; } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .theme-toggle-btn .theme-icon { font-size: 1.1em; } /* Mobile adjustments */ @media (max-width: 1000px) { .theme-toggle-btn { padding: 14px 18px; min-height: 54px; font-size: 18px; border-radius: 16px; } }