/* ===================================================================== Muscle Ranks — themes.css 6 thèmes complets. Chaque thème override TOUTES les variables CSS. Chargé après style.css dans le . ===================================================================== */ /* ── Variables partagées ajoutées dans :root de base ────────────────── */ :root { /* Valeurs par défaut = midnight (évite FOUC si data-theme absent) */ --body-g1: rgba(110,231,255,.06); --body-g2: rgba(167,139,250,.06); --topbar-bg: rgba(11,13,18,.85); --accent-glass: rgba(110,231,255,.15); --accent-border: rgba(110,231,255,.30); --accent-soft: rgba(110,231,255,.04); --best-bg: rgba(110,231,255,.04); --best-border: rgba(110,231,255,.25); } /* ══════════════════════════════════════════════════════════════════════ MIDNIGHT (remplace "default") ══════════════════════════════════════════════════════════════════════ */ [data-theme="midnight"], [data-theme="default"] { --bg-0: #0b0d12; --bg-1: #11141c; --bg-2: #171a24; --bg-3: #1e2230; --border: #262b3a; --border-soft: #1d2130; --text: #e6e9f2; --text-muted: #8a90a3; --text-dim: #5f6578; --accent: #6ee7ff; --accent-2: #a78bfa; --shadow-glow: 0 0 24px rgba(110,231,255,.18); --body-g1: rgba(110,231,255,.06); --body-g2: rgba(167,139,250,.06); --topbar-bg: rgba(11,13,18,.85); --accent-glass: rgba(110,231,255,.15); --accent-border: rgba(110,231,255,.30); --best-bg: rgba(110,231,255,.04); --best-border: rgba(110,231,255,.25); } /* ══════════════════════════════════════════════════════════════════════ BASIC FIT — jaune fluo + noir profond ══════════════════════════════════════════════════════════════════════ */ [data-theme="basic_fit"] { --bg-0: #000000; --bg-1: #0a0a0a; --bg-2: #1a1a1a; --bg-3: #242424; --border: #333333; --border-soft: #222222; --text: #ffffff; --text-muted: #999999; --text-dim: #555555; --accent: #FFF200; --accent-2: #FFD700; --shadow-glow: 0 0 24px rgba(255,242,0,.28); --body-g1: rgba(255,242,0,.05); --body-g2: rgba(255,215,0,.04); --topbar-bg: rgba(0,0,0,.90); --accent-glass: rgba(255,242,0,.15); --accent-border: rgba(255,242,0,.35); --best-bg: rgba(255,242,0,.04); --best-border: rgba(255,242,0,.30); } /* ══════════════════════════════════════════════════════════════════════ FITNESS PARK — vert flashy + noir ══════════════════════════════════════════════════════════════════════ */ [data-theme="fitness_park"] { --bg-0: #050505; --bg-1: #0d1410; --bg-2: #131e17; --bg-3: #1a2a20; --border: #2a3a30; --border-soft: #1f2e24; --text: #e8f5e8; --text-muted: #7a8a7a; --text-dim: #4a5a4a; --accent: #00C853; --accent-2: #69F0AE; --shadow-glow: 0 0 24px rgba(0,200,83,.22); --body-g1: rgba(0,200,83,.06); --body-g2: rgba(105,240,174,.05); --topbar-bg: rgba(5,5,5,.88); --accent-glass: rgba(0,200,83,.15); --accent-border: rgba(0,200,83,.35); --best-bg: rgba(0,200,83,.04); --best-border: rgba(0,200,83,.25); } /* ══════════════════════════════════════════════════════════════════════ ORANGE BLEUE — bleu marine + orange ══════════════════════════════════════════════════════════════════════ */ [data-theme="orange_bleue"], [data-theme="orange_bleu"] { --bg-0: #061826; --bg-1: #0a2236; --bg-2: #0f2d44; --bg-3: #143a52; --border: #1f4a66; --border-soft: #183d55; --text: #e6f0fa; --text-muted: #6f8aa3; --text-dim: #3f5a73; --accent: #FF6B00; --accent-2: #00529B; --shadow-glow: 0 0 24px rgba(255,107,0,.25); --body-g1: rgba(255,107,0,.06); --body-g2: rgba(0,82,155,.07); --topbar-bg: rgba(6,24,38,.88); --accent-glass: rgba(255,107,0,.15); --accent-border: rgba(255,107,0,.35); --best-bg: rgba(255,107,0,.04); --best-border: rgba(255,107,0,.25); } /* ══════════════════════════════════════════════════════════════════════ NEON — cyberpunk rose/cyan ══════════════════════════════════════════════════════════════════════ */ [data-theme="neon"] { --bg-0: #0a0014; --bg-1: #14091f; --bg-2: #1f132e; --bg-3: #2a1c3d; --border: #3d2a52; --border-soft: #2e1f40; --text: #f0e6ff; --text-muted: #9a85b5; --text-dim: #5a4570; --accent: #FF006E; --accent-2: #00f5ff; --shadow-glow: 0 0 24px rgba(255,0,110,.30); --body-g1: rgba(255,0,110,.07); --body-g2: rgba(0,245,255,.06); --topbar-bg: rgba(10,0,20,.88); --accent-glass: rgba(255,0,110,.15); --accent-border: rgba(255,0,110,.35); --best-bg: rgba(255,0,110,.04); --best-border: rgba(255,0,110,.25); } /* ══════════════════════════════════════════════════════════════════════ BLOOD — rouge sang + noir hardcore ══════════════════════════════════════════════════════════════════════ */ [data-theme="blood"] { --bg-0: #0a0000; --bg-1: #150505; --bg-2: #1f0808; --bg-3: #2a0d0d; --border: #3a1515; --border-soft: #2e0f0f; --text: #fae6e6; --text-muted: #a08585; --text-dim: #5a3535; --accent: #DC143C; --accent-2: #FF4500; --shadow-glow: 0 0 24px rgba(220,20,60,.30); --body-g1: rgba(220,20,60,.07); --body-g2: rgba(255,69,0,.05); --topbar-bg: rgba(10,0,0,.88); --accent-glass: rgba(220,20,60,.15); --accent-border: rgba(220,20,60,.35); --best-bg: rgba(220,20,60,.04); --best-border: rgba(220,20,60,.25); }