From 0568fc1454a92d01db74b5aaf290c20c0154fccb Mon Sep 17 00:00:00 2001 From: chihlasm Date: Tue, 3 Mar 2026 08:00:44 -0500 Subject: [PATCH] feat: update CSS variables and glass-card utilities for Slate & Ice theme - Replace all color variables with Slate & Ice palette - Add glass system vars (--glass-bg, --glass-blur, --shadow-float) - Replace legacy glass-card with new variable-driven glass classes - Add breatheGlow, bellWobble, slideDown, fadeInRight keyframes - Update font references to IBM Plex Sans and Bricolage Grotesque Co-Authored-By: Claude Opus 4.6 --- frontend/src/index.css | 144 +++++++++++++++++++++++++++-------------- 1 file changed, 96 insertions(+), 48 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index 06bc9aee..baddd116 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -4,35 +4,52 @@ @layer base { :root { - /* ResolutionFlow Dark Theme — Purple Gradient Accents */ - --background: 240 10% 3.9%; - --foreground: 0 0% 100%; - --card: 240 10% 9.4%; - --card-foreground: 0 0% 100%; - --popover: 240 10% 9.4%; - --popover-foreground: 0 0% 100%; - --primary: 243 75% 59%; - --primary-foreground: 0 0% 100%; - --secondary: 240 5.9% 15%; - --secondary-foreground: 0 0% 100%; - --muted: 240 5.9% 15%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 5.9% 15%; - --accent-foreground: 0 0% 100%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 100%; - --border: 240 5.9% 15%; - --input: 240 5.9% 15%; - --ring: 243 75% 59%; + /* ResolutionFlow Dark Theme — Slate & Ice Modern */ + --background: 228 12% 7%; + --foreground: 210 40% 98%; + --card: 220 10% 10%; + --card-foreground: 210 40% 98%; + --popover: 220 10% 10%; + --popover-foreground: 210 40% 98%; + --primary: 187 72% 43%; + --primary-foreground: 228 12% 7%; + --secondary: 220 8% 14%; + --secondary-foreground: 210 40% 98%; + --muted: 220 8% 14%; + --muted-foreground: 215 10% 58%; + --accent: 220 8% 14%; + --accent-foreground: 210 40% 98%; + --destructive: 350 81% 55%; + --destructive-foreground: 210 40% 98%; + --border: 220 8% 14%; + --input: 220 8% 14%; + --ring: 187 72% 43%; --radius: 0.75rem; /* App Shell tokens */ --sidebar-w: 260px; - --sidebar-bg: 240 10% 4.5%; - --sidebar-hover: 240 6% 12%; - --sidebar-active: 243 75% 59% / 0.08; - --border-subtle: 240 6% 12%; - --text-dimmed: 240 4% 24%; + --sidebar-bg: 228 12% 6%; + --sidebar-hover: 220 8% 14%; + --sidebar-active: 187 72% 43% / 0.10; + --border-subtle: 220 8% 12%; + --text-dimmed: 218 10% 39%; + + /* Glass system */ + --glass-bg: rgba(24, 26, 31, 0.55); + --glass-bg-hover: rgba(24, 26, 31, 0.7); + --glass-border: rgba(255, 255, 255, 0.06); + --glass-border-hover: rgba(255, 255, 255, 0.12); + --glass-blur: blur(16px); + --glass-blur-strong: blur(20px); + --glass-blur-light: blur(12px); + + /* Shadow system */ + --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3); + --shadow-float-hover: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08); + --shadow-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.08); + + /* Easing */ + --ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1); } } @@ -59,11 +76,11 @@ body { @apply bg-background text-foreground; - font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } h1, h2, h3, h4, h5, h6 { - font-family: 'Plus Jakarta Sans', system-ui, sans-serif; + font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } @@ -140,6 +157,30 @@ to { opacity: 1; transform: scale(1); } } +@keyframes slideDown { + from { transform: translateY(-100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +@keyframes fadeInRight { + from { transform: translateX(30px); opacity: 0; } + to { transform: translateX(0); opacity: 1; } +} + +@keyframes breatheGlow { + from { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(6, 182, 212, 0.04); } + to { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(6, 182, 212, 0.12); } +} + +@keyframes bellWobble { + 0% { transform: rotate(0deg); } + 20% { transform: rotate(8deg); } + 40% { transform: rotate(-6deg); } + 60% { transform: rotate(4deg); } + 80% { transform: rotate(-2deg); } + 100% { transform: rotate(0deg); } +} + @layer utilities { .animate-fade-in { animation: fade-in 200ms ease-out; @@ -171,30 +212,37 @@ @apply bg-gradient-brand bg-clip-text text-transparent; } - /* ── Legacy glass-card utilities (preserved for backward compatibility) ── */ - /* New components should use bg-card border-border rounded-xl instead */ - + /* Glass card — interactive with hover lift */ .glass-card { - background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%); - border: 1px solid rgba(255, 255, 255, 0.08); - backdrop-filter: blur(10px); + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border); + border-radius: 16px; + box-shadow: var(--shadow-float); + transition: transform 200ms var(--ease-out-smooth), + border-color 200ms var(--ease-out-smooth), + box-shadow 200ms var(--ease-out-smooth); + } + .glass-card:hover { + transform: scale(1.02); + border-color: var(--glass-border-hover); + box-shadow: var(--shadow-float-hover); } - .glass-card-hover { - background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); - border-color: rgba(255, 255, 255, 0.12); + /* Glass card — static, no hover transform */ + .glass-card-static { + background: var(--glass-bg); + backdrop-filter: var(--glass-blur); + -webkit-backdrop-filter: var(--glass-blur); + border: 1px solid var(--glass-border); + border-radius: 16px; + box-shadow: var(--shadow-float); } - .glass-card-glow { - background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%); - border: 1px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 0 40px rgba(255, 255, 255, 0.1); - } - - .glass-stat { - background: rgba(20, 20, 25, 0.5); - border: 1px solid rgba(255, 255, 255, 0.06); - backdrop-filter: blur(10px); + /* Breathing glow for highlighted stat cards */ + .active-glow { + animation: breatheGlow 3s ease-in-out infinite alternate; } } @@ -205,11 +253,11 @@ border: 1px solid hsl(var(--border)) !important; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important; border-radius: 0.75rem; - font-family: 'Inter', system-ui, sans-serif; + font-family: 'IBM Plex Sans', system-ui, sans-serif; } [data-sonner-toast] [data-title] { - font-family: 'Inter', system-ui, sans-serif; + font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 600; }