fix: equalizer plus proche du design Stitch + couleurs plus profondes

Barres plus pleines et arrondies, halo lumineux sur pics audio,
palette dark plus riche (indigo vibrant, cyan éclatant, bleu profond),
ombres et bordures plus marquées, gradients de fond plus immersifs.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 4.7 committed 2026-04-28 13:32:58 +02:00
1 parent 5c2a6438cd
commit 66d61595bd
2 files changed
+47 -46

No files matched your search

+24 -24
View File
@@ -8,30 +8,30 @@
@layer base {
:root {
/* Dark theme (default) */
--bg-base: #020617;
--bg-surface: #0f1222;
--bg-elevated: #161a2e;
--bg-glass: rgba(15, 18, 34, 0.7);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--accent-primary: #6366f1;
--accent-secondary: #06b6d4;
--accent-rose: #f43f5e;
--accent-gold: #f59e0b;
--accent-emerald: #10b981;
--accent-glow: rgba(99, 102, 241, 0.25);
--border-color: rgba(255, 255, 255, 0.06);
--border-hover: rgba(255, 255, 255, 0.12);
/* Dark theme (default) — calibrated to Stitch designs */
--bg-base: #010615;
--bg-surface: #0b0f20;
--bg-elevated: #11162c;
--bg-glass: rgba(11, 15, 32, 0.75);
--text-primary: #f0f4ff;
--text-secondary: #8892b0;
--text-muted: #566080;
--accent-primary: #6c6ff7;
--accent-secondary: #0dc5e0;
--accent-rose: #f84b6b;
--accent-gold: #f7b80a;
--accent-emerald: #12c278;
--accent-glow: rgba(108, 111, 247, 0.28);
--border-color: rgba(255, 255, 255, 0.07);
--border-hover: rgba(255, 255, 255, 0.14);
--radius-sm: 0.625rem;
--radius-md: 0.875rem;
--radius-lg: 1.125rem;
--radius-xl: 1.375rem;
--glass-blur: blur(24px) saturate(180%);
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
--shadow-glow: 0 0 24px var(--accent-glow);
--radius-xl: 1.5rem;
--glass-blur: blur(28px) saturate(180%);
--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
--shadow-card-hover: 0 10px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--shadow-glow: 0 0 28px var(--accent-glow);
--font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Outfit', ui-sans-serif, system-ui, sans-serif;
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -97,9 +97,9 @@ body::before {
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 80% 35% at 10% 5%, rgba(99, 102, 241, 0.08) 0%, transparent 55%),
radial-gradient(ellipse 60% 40% at 90% 95%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
radial-gradient(ellipse 50% 30% at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
radial-gradient(ellipse 80% 30% at 5% 0%, rgba(108, 111, 247, 0.10) 0%, transparent 50%),
radial-gradient(ellipse 55% 35% at 95% 100%, rgba(13, 197, 224, 0.07) 0%, transparent 50%),
radial-gradient(ellipse 40% 25% at 50% 50%, rgba(108, 111, 247, 0.04) 0%, transparent 50%);
}
body.light-theme::before {