/* ============================================================================ SPECULAR STUDIO — variables.css Design tokens (pilotés par le Studio de Thèmes) + surcouches des 8 thèmes ============================================================================ */ :root { /* Palette pilotée par JavaScript (admin → Studio de Thèmes) */ --c-primary: #38bdf8; --c-secondary: #818cf8; --c-bg: #020617; /* Palette dérivée */ --c-surface: rgba(255, 255, 255, 0.05); --c-surface-strong: rgba(255, 255, 255, 0.09); --c-surface-deep: rgba(2, 8, 20, 0.45); --c-border: rgba(255, 255, 255, 0.12); --c-text: #e6ecf5; --c-muted: #a1afc4; /* Contraste AA sur fond sombre */ --c-gold: #f5d061; --c-danger: #f87171; --c-success: #34d399; --c-on-primary: #05070f; /* Typographie */ --font-main: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif; /* Géométrie */ --radius-btn: 0.9rem; --radius-card: 1.5rem; --radius-field: 0.8rem; --container: 1200px; /* Ombres */ --shadow-card: 0 18px 50px -20px rgba(0, 0, 0, 0.65); --shadow-pop: 0 30px 90px -25px rgba(0, 0, 0, 0.85); /* Empilement d'ombres physiques (easing shadows — 6 couches) */ --shadow-elevated: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11); /* Dégradé signature */ --grad-brand: linear-gradient(120deg, var(--c-primary), var(--c-secondary)); /* Courbe d'animation de marque — redéfinissable depuis le Studio Live */ --ease-brand: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* Axes typographiques variables (Studio Live) */ --fw-display: 900; --slant-display: 0deg; } /* --- Styles de boutons pilotés par data-btnstyle sur ----------------- */ body[data-btnstyle="classic"] { --radius-btn: 0.45rem; } body[data-btnstyle="rounded"] { --radius-btn: 9999px; } body[data-btnstyle="outline"] .btn-primary { background: transparent; border: 2px solid var(--c-primary); color: var(--c-primary); } body[data-btnstyle="outline"] .btn-primary:hover { background: var(--grad-brand); color: var(--c-on-primary); } body[data-btnstyle="glow"] .btn-primary { box-shadow: 0 0 22px color-mix(in srgb, var(--c-primary) 55%, transparent), 0 0 60px color-mix(in srgb, var(--c-secondary) 25%, transparent); } body[data-btnstyle="glow"] .btn-primary:hover, body[data-btnstyle="glow"] .btn-primary:focus-visible { box-shadow: 0 0 34px color-mix(in srgb, var(--c-primary) 80%, transparent), 0 0 90px color-mix(in srgb, var(--c-secondary) 45%, transparent); } /* ============================================================================ THÈMES ULTRA-IMMERSIFS — surcouches par thème sur Les couleurs de base sont injectées en variables par le moteur JS. ============================================================================ */ /* 🧊 Liquid Glass */ body[data-theme="glass"] #fx-overlay { background: radial-gradient(ellipse 90% 55% at 50% -10%, color-mix(in srgb, var(--c-primary) 14%, transparent), transparent 60%); } /* ⚡ Cyberpunk 2077 — scanlines CRT + grille rétro 3D */ body[data-theme="cyberpunk"] { --font-display: 'Orbitron', 'Inter', sans-serif; } body[data-theme="cyberpunk"] #fx-overlay { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse 80% 50% at 50% 115%, color-mix(in srgb, var(--c-secondary) 22%, transparent), transparent 65%); } body[data-theme="cyberpunk"]::after { content: ''; position: fixed; left: -25%; right: -25%; bottom: -12vh; height: 46vh; z-index: -1; pointer-events: none; background: linear-gradient(transparent 0%, color-mix(in srgb, var(--c-primary) 9%, transparent) 100%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 35%, transparent) 0 1px, transparent 1px 70px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--c-secondary) 35%, transparent) 0 1px, transparent 1px 46px); transform: perspective(420px) rotateX(62deg); mask-image: linear-gradient(transparent, black 35%); -webkit-mask-image: linear-gradient(transparent, black 35%); } body[data-theme="cyberpunk"] .gradient-text { animation-duration: 2.6s; } /* 👑 Luxe & Or Obsidian */ body[data-theme="gold"] { --font-display: 'Cinzel', 'Georgia', serif; } body[data-theme="gold"] #fx-overlay { background: radial-gradient(ellipse 70% 40% at 20% 0%, rgba(212, 175, 55, 0.10), transparent 60%), radial-gradient(ellipse 60% 45% at 85% 100%, rgba(212, 175, 55, 0.07), transparent 60%); } body[data-theme="gold"] .card-badge, body[data-theme="gold"] .tab.active { color: #1a1205; } /* 🎄 Noël Féerique */ body[data-theme="noel"] #fx-overlay { background: radial-gradient(ellipse 55% 40% at 12% 8%, rgba(239, 68, 68, 0.13), transparent 60%), radial-gradient(ellipse 55% 40% at 88% 14%, rgba(34, 197, 94, 0.13), transparent 60%); } /* 🎃 Halloween Dark Fantasy */ body[data-theme="halloween"] #fx-overlay { background: radial-gradient(ellipse 70% 45% at 50% 110%, rgba(168, 85, 247, 0.16), transparent 65%), radial-gradient(ellipse 60% 35% at 15% -5%, rgba(249, 115, 22, 0.12), transparent 60%); } /* ☀️ Summer Riviera */ body[data-theme="summer"] #fx-overlay { background: radial-gradient(circle 42vw at 85% -8%, rgba(251, 191, 36, 0.22), transparent 70%), radial-gradient(ellipse 90% 40% at 50% 112%, rgba(45, 212, 191, 0.16), transparent 65%); } /* 🌌 Midnight Neon Purple */ body[data-theme="midnight"] #fx-overlay { background: radial-gradient(ellipse 75% 50% at 50% -12%, rgba(167, 139, 250, 0.18), transparent 62%), radial-gradient(ellipse 55% 38% at 80% 105%, rgba(244, 114, 182, 0.12), transparent 62%); } /* 🏎️ Carbon Track Edition */ body[data-theme="carbon"] #fx-overlay { background-image: radial-gradient(ellipse 65% 40% at 50% -8%, rgba(225, 29, 72, 0.12), transparent 60%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 6px); } body[data-theme="carbon"] .glass, body[data-theme="carbon"] .glass-strong { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 5px); }