/* ============================================ TAP Awards Theme System ============================================ Three themes: Light, Dark, Rugby Usage: Add theme class to element ============================================ */ /* ============================================ LIGHT THEME (Default) ============================================ */ :root, .theme-light { /* Brand Colors */ --color-primary: #2563eb; --color-primary-hover: #1d4ed8; --color-secondary: #64748b; --color-accent: #06b6d4; /* Gradients */ --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); --gradient-header: linear-gradient(135deg, #1e40af 0%, #7c3aed 50%, #db2777 100%); --gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); /* Backgrounds */ --color-bg: #f1f5f9; --color-surface: #ffffff; --color-surface-alt: #f8fafc; /* Text */ --color-text: #1e293b; --color-text-muted: #64748b; --color-text-inverse: #ffffff; /* Borders */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* Status Colors */ --color-success: #10b981; --color-success-bg: #ecfdf5; --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-error: #ef4444; --color-error-bg: #fef2f2; /* Game/Pick specific */ --color-game-bg: #ffffff; --color-game-header: #f1f5f9; --color-picks-bg: linear-gradient(135deg, #ecfdf5 0%, #e0f2fe 100%); --color-winner: #fbbf24; --color-correct: #10b981; --color-winner-text: #1e293b; /* Leaderboard */ --color-rank-gold: #f59e0b; --color-rank-silver: #64748b; --color-rank-bronze: #b45309; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-glow: 0 0 20px rgb(37 99 235 / 0.3); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Typography */ --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ DARK THEME ============================================ */ .theme-dark { /* Brand Colors */ --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-secondary: #94a3b8; --color-accent: #22d3ee; /* Gradients */ --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --gradient-header: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 50%, #be185d 100%); --gradient-success: linear-gradient(135deg, #34d399 0%, #22d3ee 100%); --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); /* Backgrounds */ --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #334155; /* Text */ --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-text-inverse: #0f172a; /* Borders */ --color-border: #334155; --color-border-strong: #475569; /* Status Colors */ --color-success: #34d399; --color-success-bg: #064e3b; --color-warning: #fbbf24; --color-warning-bg: #78350f; --color-error: #f87171; --color-error-bg: #7f1d1d; /* Game/Pick specific */ --color-game-bg: #1e293b; --color-game-header: #334155; --color-picks-bg: linear-gradient(135deg, #064e3b 0%, #164e63 100%); --color-winner: #fbbf24; --color-correct: #34d399; --color-winner-text: #0f172a; /* Leaderboard */ --color-rank-gold: #fbbf24; --color-rank-silver: #cbd5e1; --color-rank-bronze: #f59e0b; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); --shadow-glow: 0 0 20px rgb(59 130 246 / 0.4); } /* ============================================ RUGBY THEME ============================================ */ .theme-rugby { /* Brand Colors - Rugby greens and golds */ --color-primary: #15803d; --color-primary-hover: #166534; --color-secondary: #65a30d; --color-accent: #ca8a04; /* Gradients */ --gradient-primary: linear-gradient(135deg, #15803d 0%, #065f46 100%); --gradient-header: linear-gradient(135deg, #14532d 0%, #15803d 50%, #ca8a04 100%); --gradient-success: linear-gradient(135deg, #22c55e 0%, #15803d 100%); --gradient-gold: linear-gradient(135deg, #ca8a04 0%, #eab308 100%); /* Backgrounds */ --color-bg: #f0fdf4; --color-surface: #ffffff; --color-surface-alt: #fef9c3; /* Text */ --color-text: #14532d; --color-text-muted: #4d7c0f; --color-text-inverse: #ffffff; /* Borders */ --color-border: #bbf7d0; --color-border-strong: #86efac; /* Status Colors */ --color-success: #22c55e; --color-success-bg: #dcfce7; --color-warning: #eab308; --color-warning-bg: #fef9c3; --color-error: #dc2626; --color-error-bg: #fee2e2; /* Game/Pick specific */ --color-game-bg: #ffffff; --color-game-header: #dcfce7; --color-picks-bg: linear-gradient(135deg, #fef9c3 0%, #dcfce7 100%); --color-winner: #eab308; --color-correct: #22c55e; --color-winner-text: #14532d; /* Shadows */ --shadow-xl: 0 20px 25px -5px rgb(21 128 61 / 0.15), 0 8px 10px -6px rgb(21 128 61 / 0.1); --shadow-glow: 0 0 20px rgb(21 128 61 / 0.3); /* Leaderboard */ --color-rank-gold: #eab308; --color-rank-silver: #a1a1aa; --color-rank-bronze: #b45309; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(21 128 61 / 0.08); --shadow-md: 0 4px 6px -1px rgb(21 128 61 / 0.12), 0 2px 4px -2px rgb(21 128 61 / 0.08); --shadow-lg: 0 10px 15px -3px rgb(21 128 61 / 0.15), 0 4px 6px -4px rgb(21 128 61 / 0.1); } /* ============================================ THEME SWITCHER COMPONENT ============================================ */ .theme-switcher { position: fixed; bottom: var(--space-lg); right: var(--space-lg); z-index: 9999; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); box-shadow: var(--shadow-lg); font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); } .theme-switcher:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg), 0 0 0 3px rgb(37 99 235 / 0.1); } .theme-switcher__icon { width: 20px; height: 20px; fill: currentColor; } .theme-switcher__menu { position: absolute; bottom: 100%; right: 0; margin-bottom: var(--space-sm); padding: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--transition-fast); } .theme-switcher.active .theme-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0); } .theme-switcher__option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); white-space: nowrap; transition: background var(--transition-fast); } .theme-switcher__option:hover { background: var(--color-surface-alt); } .theme-switcher__option.active { background: var(--color-primary); color: var(--color-text-inverse); } .theme-switcher__swatch { width: 16px; height: 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .theme-switcher__swatch--light { background: linear-gradient(135deg, #f1f5f9 50%, #2563eb 50%); } .theme-switcher__swatch--dark { background: linear-gradient(135deg, #1e293b 50%, #3b82f6 50%); } .theme-switcher__swatch--rugby { background: linear-gradient(135deg, #15803d 50%, #ca8a04 50%); } /* ============================================ INLINE THEME SELECTOR (Main Menu) ============================================ */ .theme-selector-inline { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-md); margin-top: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .theme-selector-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .theme-selector-buttons { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; } .theme-btn { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); background: var(--color-surface-alt); border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .theme-btn:hover { border-color: var(--color-primary); background: var(--color-surface); } .theme-btn.active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); } .theme-btn-swatch { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } .theme-btn-swatch--light { background: linear-gradient(135deg, #f1f5f9 50%, #2563eb 50%); } .theme-btn-swatch--dark { background: linear-gradient(135deg, #1e293b 50%, #3b82f6 50%); } .theme-btn-swatch--rugby { background: linear-gradient(135deg, #15803d 50%, #ca8a04 50%); } /* Hide floating switcher when inline selector is present */ .has-inline-selector .theme-switcher { display: none; }