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 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user