/* * PredictVague — Système de thèmes * 4 thèmes via data-theme sur * Variables CSS consommées par base.html et les templates */ /* ============================================================ THEME : dark-ocean (défaut) ============================================================ */ :root, [data-theme="dark-ocean"] { --bg-base: #020b18; --bg-primary: #051225; --bg-secondary: #071a35; --bg-card: rgba(255,255,255,0.04); --bg-card-strong: rgba(255,255,255,0.07); --bg-card-hover: rgba(255,255,255,0.07); --border-subtle: rgba(255,255,255,0.08); --border-card: rgba(255,255,255,0.08); --text-primary: #ffffff; --text-secondary: #cbd5e1; --text-muted: #64748b; --text-faint: #334155; --accent: #22d3ee; --accent-hover: #06b6d4; --accent-bg: rgba(34,211,238,0.1); --accent-border: rgba(34,211,238,0.3); --nav-bg: rgba(2,11,24,0.85); --footer-border: rgba(255,255,255,0.05); --scrollbar-track: #0a1628; --scrollbar-thumb: #1e3a5f; --wave-radial-1: rgba(0,188,212,0.06); --wave-radial-2: rgba(6,182,212,0.04); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #22d3ee; --gradient-text-mid: #06b6d4; --gradient-text-to: #0891b2; --card-hover-shadow: rgba(0,188,212,0.15); } /* ============================================================ THEME : tropical ============================================================ */ [data-theme="tropical"] { --bg-base: #0a1a0e; --bg-primary: #0d1f11; --bg-secondary: #122616; --bg-card: rgba(255,255,255,0.05); --bg-card-strong: rgba(255,255,255,0.09); --bg-card-hover: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.09); --border-card: rgba(255,200,100,0.1); --text-primary: #fff8f0; --text-secondary: #d4e8c2; --text-muted: #6b8f5e; --text-faint: #3a5a30; --accent: #f97316; --accent-hover: #ea6c0a; --accent-bg: rgba(249,115,22,0.12); --accent-border: rgba(249,115,22,0.35); --nav-bg: rgba(10,26,14,0.9); --footer-border: rgba(249,115,22,0.1); --scrollbar-track: #0a1a0e; --scrollbar-thumb: #2d5a22; --wave-radial-1: rgba(34,197,94,0.08); --wave-radial-2: rgba(249,115,22,0.05); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #f97316; --gradient-text-mid: #fb923c; --gradient-text-to: #fbbf24; --card-hover-shadow: rgba(249,115,22,0.18); } /* ============================================================ THEME : light ============================================================ */ [data-theme="light"] { --bg-base: #e8f0f7; --bg-primary: #f0f4f8; --bg-secondary: #dde8f2; --bg-card: rgba(255,255,255,0.75); --bg-card-strong: rgba(255,255,255,0.92); --bg-card-hover: rgba(255,255,255,0.95); --border-subtle: rgba(0,0,0,0.08); --border-card: rgba(2,132,199,0.15); --text-primary: #0f172a; --text-secondary: #1e293b; --text-muted: #475569; --text-faint: #94a3b8; --accent: #0284c7; --accent-hover: #0369a1; --accent-bg: rgba(2,132,199,0.1); --accent-border: rgba(2,132,199,0.3); --nav-bg: rgba(240,244,248,0.92); --footer-border: rgba(0,0,0,0.08); --scrollbar-track: #dde8f2; --scrollbar-thumb: #94a3b8; --wave-radial-1: rgba(2,132,199,0.07); --wave-radial-2: rgba(14,165,233,0.05); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #0284c7; --gradient-text-mid: #0369a1; --gradient-text-to: #075985; --card-hover-shadow: rgba(2,132,199,0.15); } /* ============================================================ THEME : retro ============================================================ */ [data-theme="retro"] { --bg-base: #1a0e00; --bg-primary: #221200; --bg-secondary: #2e1a00; --bg-card: rgba(255,200,80,0.04); --bg-card-strong: rgba(255,200,80,0.08); --bg-card-hover: rgba(255,200,80,0.07); --border-subtle: rgba(255,180,60,0.1); --border-card: rgba(255,180,60,0.12); --text-primary: #fff3d6; --text-secondary: #e8c97e; --text-muted: #8a6430; --text-faint: #4a3510; --accent: #f59e0b; --accent-hover: #d97706; --accent-bg: rgba(245,158,11,0.12); --accent-border: rgba(245,158,11,0.35); --nav-bg: rgba(26,14,0,0.9); --footer-border: rgba(245,158,11,0.1); --scrollbar-track: #1a0e00; --scrollbar-thumb: #5a3a10; --wave-radial-1: rgba(245,158,11,0.07); --wave-radial-2: rgba(251,191,36,0.04); --glass-blur: blur(12px); --glass-blur-strong:blur(20px); --gradient-text-from: #f59e0b; --gradient-text-mid: #fbbf24; --gradient-text-to: #f97316; --card-hover-shadow: rgba(245,158,11,0.18); } /* ============================================================ STYLES BASÉS SUR LES VARIABLES (partagés par tous les thèmes) ============================================================ */ body { background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-primary) 30%, var(--bg-secondary) 60%, var(--bg-base) 100%); background-attachment: fixed; min-height: 100vh; color: var(--text-primary); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Glassmorphism */ .glass { background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border-subtle); } .glass-strong { background: var(--bg-card-strong); backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); border: 1px solid var(--border-subtle); } /* Wave bg overlay */ .wave-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, var(--wave-radial-1) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, var(--wave-radial-2) 0%, transparent 50%); pointer-events: none; } /* Navbar */ nav { background: var(--nav-bg) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Card hover */ .spot-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .spot-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px var(--card-hover-shadow); } /* Gradient text */ .text-gradient { background: linear-gradient(135deg, var(--gradient-text-from), var(--gradient-text-mid), var(--gradient-text-to)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Accent color utilities */ .accent-text { color: var(--accent); } .accent-bg { background: var(--accent-bg); } .accent-border{ border-color: var(--accent-border); } /* Live dot */ .live-dot { animation: livePulse 2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* Quality badges — adaptés selon le thème */ .badge-excellent { background: rgba(34,211,238,0.15); color: #22d3ee; border: 1px solid rgba(34,211,238,0.3); } .badge-good { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); } .badge-medium { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); } .badge-bad { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); } .badge-flat { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); } /* Light theme badge text override */ [data-theme="light"] .badge-excellent { background: rgba(2,132,199,0.12); color: #0369a1; border-color: rgba(2,132,199,0.3); } [data-theme="light"] .badge-good { background: rgba(22,163,74,0.12); color: #15803d; border-color: rgba(22,163,74,0.3); } [data-theme="light"] .badge-medium { background: rgba(234,88,12,0.12); color: #c2410c; border-color: rgba(234,88,12,0.3); } [data-theme="light"] .badge-bad { background: rgba(185,28,28,0.1); color: #b91c1c; border-color: rgba(185,28,28,0.25); } [data-theme="light"] .badge-flat { background: rgba(71,85,105,0.1); color: #475569; border-color: rgba(71,85,105,0.2); } /* Light theme text overrides */ [data-theme="light"] .text-white { color: var(--text-primary) !important; } [data-theme="light"] .text-slate-300 { color: #334155 !important; } [data-theme="light"] .text-slate-400 { color: #475569 !important; } [data-theme="light"] .text-slate-500 { color: #64748b !important; } [data-theme="light"] .text-slate-600 { color: #94a3b8 !important; } [data-theme="light"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="light"] .text-cyan-300 { color: var(--accent) !important; } [data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.07) !important; } [data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .bg-white\/\[0\.03\] { background: rgba(255,255,255,0.6) !important; } [data-theme="light"] select { color: #0f172a !important; } /* Tropical theme overrides */ [data-theme="tropical"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="tropical"] .text-cyan-300 { color: #fb923c !important; } [data-theme="tropical"] .text-cyan-500 { color: var(--accent) !important; } [data-theme="tropical"] .border-cyan-500\/20 { border-color: rgba(249,115,22,0.2) !important; } [data-theme="tropical"] .bg-cyan-500\/10 { background: rgba(249,115,22,0.1) !important; } [data-theme="tropical"] .bg-cyan-900\/30 { background: rgba(249,115,22,0.15) !important; } /* Retro theme overrides */ [data-theme="retro"] .text-cyan-400 { color: var(--accent) !important; } [data-theme="retro"] .text-cyan-300 { color: #fbbf24 !important; } [data-theme="retro"] .text-cyan-500 { color: var(--accent) !important; } [data-theme="retro"] .border-cyan-500\/20 { border-color: rgba(245,158,11,0.2) !important; } [data-theme="retro"] .bg-cyan-500\/10 { background: rgba(245,158,11,0.1) !important; } [data-theme="retro"] .bg-cyan-900\/30 { background: rgba(245,158,11,0.15) !important; } [data-theme="retro"] body { font-family: 'Georgia', serif; } /* Chart container */ .chart-container { position: relative; } /* Compass */ .compass-needle { transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .quality-ring svg circle { transition: stroke-dashoffset 1s ease-in-out; } /* Text gradient gold */ .text-gradient-gold { background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Theme switcher button */ .theme-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-subtle); background: var(--bg-card); cursor: pointer; transition: all 0.2s ease; font-size: 1rem; } .theme-btn:hover { background: var(--accent-bg); border-color: var(--accent-border); } .theme-btn.active { background: var(--accent-bg); border-color: var(--accent-border); box-shadow: 0 0 0 2px var(--accent-border); } /* Leaflet overrides pour les thèmes */ .leaflet-container { font-family: inherit; } .leaflet-popup-content-wrapper { background: var(--bg-card-strong) !important; backdrop-filter: var(--glass-blur) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; color: var(--text-primary) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } .leaflet-popup-tip { background: var(--bg-card-strong) !important; } .leaflet-popup-content { margin: 12px 16px !important; } [data-theme="light"] .leaflet-tile-pane { filter: none; } [data-theme="dark-ocean"] .leaflet-tile-pane, [data-theme="tropical"] .leaflet-tile-pane, [data-theme="retro"] .leaflet-tile-pane { filter: brightness(0.85) saturate(0.9); }