@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* ============================================================ ISI Agent Dashboard — SOLSTICE PREMIUM Visual Redesign v2 ------------------------------------------------------------ Injected into ALL Hermes dashboard pages (port 8000) via nginx sub_filter. Replaces the default retro/terminal theme with a PREMIUM, design-award-grade Solstice design language. Design principles: • Apple / Linear / Vercel-level polish • Glassmorphism cards (frosted, layered shadows) • Editorial typography (Fraunces display + Geist UI) • Micro-interactions (hover lift, press scale, focus rings) • Warm honey-amber + forest-emerald palette (light + dark) • Multi-layered aurora background + subtle grain texture • Premium thin scrollbar, sticky table headers, pill badges • Spring-eased transitions (cubic-bezier) IMPORTANT: Only VISUAL changes. No layout/structure/function modifications. Use !important on everything — the dashboard's JS theme provider is aggressive. Structure: 1. Font variable overrides 2. Color palette (light) 3. Color palette (dark) 4. Body background override 5. Aurora background + grain texture 6. Typography hierarchy 7. Premium glassmorphism cards 8. Premium buttons (primary / secondary / ghost / destructive) 9. Premium inputs / form controls 10. Premium sidebar navigation 11. Premium tables 12. Premium badges / pills 13. Premium header (sticky backdrop-blur) 14. Premium scrollbars 15. Focus rings 16. Links 17. Code blocks 18. Loading spinner 19. Tabs / segmented controls 20. Switches / toggles 21. Dropdown / popover menus 22. Tooltips 23. Dialogs / modals 24. Alerts 25. Dividers / borders 26. Avatars 27. Progress bars / sliders 28. Skeletons / shimmer 29. Responsive (mobile) 30. Print cleanup 31. Reduced-motion accessibility ============================================================ */ /* ─────────────────────────────────────────────────────────── 1. Design Token System (--ds-* tokens) These are the SOURCE OF TRUTH for all colors. The dashboard's CSS vars are mapped to these. When dark mode is active (.dark on ), the dark token values apply automatically. ─────────────────────────────────────────────────────────── */ :root { /* ── Light mode tokens (default) ── */ --ds-background: #f9f4ed; --ds-surface: #fffaf2; --ds-surface-elevated: #ffffff; --ds-primary: #c8821b; --ds-primary-foreground: #fffaf2; --ds-secondary: #f0e6d6; --ds-accent: #e8a948; --ds-text-primary: #3d322a; --ds-text-secondary: #6b5a48; --ds-text-muted: #8a7a6a; --ds-border: #ddd4c4; --ds-divider: #e8e0d0; --ds-input: #ddd4c4; --ds-sidebar: #f5ede0; --ds-success: #16a34a; --ds-warning: #ca8a04; --ds-error: #dc2626; --ds-info: #0284c7; /* ── Map dashboard vars to our tokens (with !important) ── */ --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif !important; --font-mono: "Geist Mono", "SF Mono", Consolas, monospace !important; --font-mondwest: "Fraunces", Georgia, serif !important; --font-rules-compressed: "Fraunces", Georgia, serif !important; --font-rules-expanded: "Fraunces", Georgia, serif !important; --theme-font-sans: "Geist", system-ui, sans-serif !important; --theme-font-mono: "Geist Mono", monospace !important; --theme-font-display: "Fraunces", serif !important; /* Map all dashboard color vars to our tokens */ --background: var(--ds-background) !important; --background-base: var(--ds-background) !important; --background-alpha: 1 !important; --foreground: var(--ds-text-primary) !important; --foreground-base: var(--ds-text-primary) !important; --foreground-alpha: 1 !important; --card: var(--ds-surface) !important; --card-foreground: var(--ds-text-primary) !important; --popover: var(--ds-surface) !important; --popover-foreground: var(--ds-text-primary) !important; --primary: var(--ds-primary) !important; --primary-foreground: var(--ds-primary-foreground) !important; --secondary: var(--ds-secondary) !important; --secondary-foreground: var(--ds-text-primary) !important; --muted: var(--ds-secondary) !important; --muted-foreground: var(--ds-text-muted) !important; --accent: var(--ds-accent) !important; --accent-foreground: var(--ds-text-primary) !important; --destructive: var(--ds-error) !important; --destructive-foreground: #fffaf2 !important; --border: var(--ds-border) !important; --input: var(--ds-input) !important; --ring: var(--ds-primary) !important; --sidebar: var(--ds-sidebar) !important; --sidebar-foreground: var(--ds-text-primary) !important; --sidebar-primary: var(--ds-primary) !important; --sidebar-primary-foreground: var(--ds-primary-foreground) !important; --sidebar-accent: var(--ds-secondary) !important; --sidebar-accent-foreground: var(--ds-text-primary) !important; --sidebar-border: var(--ds-border) !important; --sidebar-ring: var(--ds-primary) !important; --midground: var(--ds-primary) !important; --midground-base: var(--ds-primary) !important; --midground-alpha: 1 !important; --radius: 0.875rem !important; --theme-radius: 0.875rem !important; --chart-1: var(--ds-primary) !important; --chart-2: var(--ds-accent) !important; --chart-3: #8b5cf6 !important; --chart-4: var(--ds-success) !important; --chart-5: var(--ds-error) !important; /* Premium transition tokens (reusable) */ --solstice-ease: cubic-bezier(0.4, 0, 0.2, 1) !important; --solstice-spring: cubic-bezier(0.34, 1.56, 0.64, 1) !important; --solstice-duration: 0.2s !important; --solstice-duration-fast: 0.15s !important; } /* ── Dark mode tokens ── */ .dark, [data-mode="dark"], html[data-mode="dark"] { --ds-background: #241d16; --ds-surface: #2e261e; --ds-surface-elevated: #3a2f24; --ds-primary: #d99a3a; --ds-primary-foreground: #241d16; --ds-secondary: #3a2f24; --ds-accent: #d99a3a; --ds-text-primary: #ede4d6; --ds-text-secondary: #a89a86; --ds-text-muted: #8a7a6a; --ds-border: #2a241d; --ds-divider: #3a2f24; --ds-input: #3a2f24; --ds-sidebar: #29211a; --ds-success: #34d399; --ds-warning: #fbbf24; --ds-error: #f87171; --ds-info: #38bdf8; /* Re-map dashboard vars to dark tokens */ --background: var(--ds-background) !important; --background-base: var(--ds-background) !important; --foreground: var(--ds-text-primary) !important; --foreground-base: var(--ds-text-primary) !important; --card: var(--ds-surface) !important; --card-foreground: var(--ds-text-primary) !important; --popover: var(--ds-surface) !important; --popover-foreground: var(--ds-text-primary) !important; --primary: var(--ds-primary) !important; --primary-foreground: var(--ds-primary-foreground) !important; --secondary: var(--ds-secondary) !important; --secondary-foreground: var(--ds-text-primary) !important; --muted: var(--ds-secondary) !important; --muted-foreground: var(--ds-text-muted) !important; --accent: var(--ds-accent) !important; --accent-foreground: var(--ds-background) !important; --destructive: var(--ds-error) !important; --destructive-foreground: #fffaf2 !important; --border: var(--ds-border) !important; --input: var(--ds-input) !important; --ring: var(--ds-primary) !important; --sidebar: var(--ds-sidebar) !important; --sidebar-foreground: var(--ds-text-primary) !important; --sidebar-primary: var(--ds-primary) !important; --sidebar-primary-foreground: var(--ds-primary-foreground) !important; --sidebar-accent: var(--ds-secondary) !important; --sidebar-accent-foreground: var(--ds-text-primary) !important; --sidebar-border: var(--ds-border) !important; --sidebar-ring: var(--ds-primary) !important; --midground: var(--ds-primary) !important; --midground-base: var(--ds-primary) !important; --chart-1: var(--ds-primary) !important; --chart-2: var(--ds-accent) !important; --chart-3: #a78bfa !important; --chart-4: var(--ds-success) !important; --chart-5: var(--ds-error) !important; } /* ─────────────────────────────────────────────────────────── 2. Shadow tokens (premium elevation levels) ─────────────────────────────────────────────────────────── */ :root { --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.04), 0 1px 3px rgba(60, 40, 20, 0.04) !important; --shadow-md: 0 1px 2px rgba(60, 40, 20, 0.04), 0 4px 12px rgba(60, 40, 20, 0.06) !important; --shadow-lg: 0 2px 4px rgba(60, 40, 20, 0.06), 0 8px 24px rgba(60, 40, 20, 0.08), 0 16px 48px rgba(60, 40, 20, 0.06) !important; --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent) !important; } /* ─────────────────────────────────────────────────────────── 3. Dark mode shadow tokens (deeper, with subtle glow) ─────────────────────────────────────────────────────────── */ .dark, [data-mode="dark"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3) !important; --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4) !important; --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4) !important; --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent), 0 4px 20px color-mix(in srgb, var(--primary) 28%, transparent) !important; } /* ─────────────────────────────────────────────────────────── 4. Force body background (uses --ds-* tokens, follows dark mode) ─────────────────────────────────────────────────────────── */ body, [data-theme], [class*="theme"] { background-color: var(--ds-background) !important; color: var(--ds-text-primary) !important; font-family: var(--font-sans) !important; font-feature-settings: "ss01", "cv01", "cv11", "cv02" !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizelegibility !important; transition: background-color 0.3s var(--solstice-ease), color 0.3s var(--solstice-ease) !important; } .dark body, .dark [data-theme], [data-mode="dark"] body, [data-mode="dark"] [data-theme] { background-color: var(--ds-background) !important; color: var(--ds-text-primary) !important; } /* ─────────────────────────────────────────────────────────── 5. Aurora Background — Multi-Layered + Grain Texture ------------------------------------------------------------ Three soft warm radial gradients positioned at the corners for depth, plus a subtle SVG noise overlay for that premium tactile feel. ─────────────────────────────────────────────────────────── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%), radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%), radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--chart-4) 5%, transparent), transparent 60%); } /* Subtle grain texture overlay (premium tactile feel) */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* Dark mode: stronger aurora, slightly more grain */ .dark body::before { background: radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%), radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%), radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 100%, color-mix(in srgb, var(--chart-4) 8%, transparent), transparent 60%) !important; } .dark body::after { opacity: 0.04 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0 0.7 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important; } /* ─────────────────────────────────────────────────────────── 6. Typography Hierarchy — Editorial Premium ------------------------------------------------------------ Display headings: Fraunces serif, large, tight tracking, subtle gradient text effect. Body: Geist 14-15px, 1.6 line-height. Labels/captions: Geist 11px, uppercase, wide tracking. Code: Geist Mono, slightly smaller, muted bg. ─────────────────────────────────────────────────────────── */ body { font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.6 !important; letter-spacing: -0.005em !important; } /* Display headings — Fraunces serif with gradient text */ h1, h2, h3, h4, h5, h6, .font-mondwest, [class*="font-rules"], [class*="font-mondwest"], [class*="FontMondwest"] { font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: var(--foreground) !important; } h1 { font-weight: 700 !important; letter-spacing: -0.035em !important; font-size: 2rem !important; background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 75%, var(--primary)) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } h2 { font-weight: 700 !important; letter-spacing: -0.03em !important; font-size: 1.5rem !important; background: linear-gradient(135deg, var(--foreground) 0%, color-mix(in srgb, var(--foreground) 80%, var(--primary)) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } h3 { font-weight: 600 !important; font-size: 1.25rem !important; letter-spacing: -0.025em !important; } h4 { font-weight: 600 !important; font-size: 1.05rem !important; letter-spacing: -0.02em !important; } h5 { font-weight: 600 !important; font-size: 0.95rem !important; letter-spacing: -0.015em !important; } h6 { font-weight: 600 !important; font-size: 0.875rem !important; letter-spacing: -0.01em !important; } /* Caption / label style — uppercase, tiny, muted, wide tracking */ [class*="text-xs"], [class*="text-[11px]"], [class*="text-[10px]"], .caption, .label, .small-label { letter-spacing: 0.04em !important; } /* Tabular nums / metrics use mono for that editorial feel */ [class*="font-mono"][class*="tabular"], [class*="tabular-nums"] { font-family: var(--font-mono) !important; font-feature-settings: "tnum", "ss01" !important; letter-spacing: -0.02em !important; } /* Large numeric displays use Fraunces for editorial feel */ .font-mondwest, [class*="font-mondwest"] { font-variant-numeric: oldstyle-nums !important; font-feature-settings: "ss01", "lnum", "tnum" !important; } /* ─────────────────────────────────────────────────────────── 7. Premium Glassmorphism Cards ------------------------------------------------------------ • Semi-transparent bg with backdrop-blur (frosted glass) • Subtle border that glows on hover • Layered shadow (ambient + direct) for depth • Hover: lift -2px, border glows, shadow deepens • 16px radius large / 12px small • Smooth 0.2s spring-eased transition ─────────────────────────────────────────────────────────── */ [class*="card"], [class*="Card"] { background-color: color-mix(in srgb, var(--card) 85%, transparent) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; border: 1px solid color-mix(in srgb, var(--border) 65%, transparent) !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(60, 40, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; transition: border-color var(--solstice-duration) var(--solstice-ease), box-shadow var(--solstice-duration) var(--solstice-ease), transform var(--solstice-duration) var(--solstice-ease) !important; position: relative; } /* Premium hover: lift + glow border + deepened shadow */ [class*="card"]:hover, [class*="Card"]:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(60, 40, 20, 0.10), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; transform: translateY(-2px) !important; } /* Dark mode: stronger shadow + brighter inset highlight */ .dark [class*="card"], .dark [class*="Card"] { background-color: color-mix(in srgb, var(--card) 78%, transparent) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .dark [class*="card"]:hover, .dark [class*="Card"]:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent), 0 0 24px color-mix(in srgb, var(--primary) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; transform: translateY(-2px) !important; } /* Explicit card-elevated + shadow utility classes get premium shadows */ [class*="card-elevated"], [class*="shadow-md"], [class*="shadow-lg"], [class*="shadow-xl"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(60, 40, 20, 0.08), 0 16px 48px rgba(60, 40, 20, 0.06) !important; } .dark [class*="card-elevated"], .dark [class*="shadow-md"], .dark [class*="shadow-lg"], .dark [class*="shadow-xl"] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.4) !important; } /* Smaller card-like surfaces (12px radius) */ [class*="card-sm"], [class*="Card-sm"], [class*="rounded-lg"] { border-radius: 12px !important; } /* Card title — premium serif feel */ [class*="card"] [class*="card-title"], [class*="CardTitle"], .card-title { font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* ─────────────────────────────────────────────────────────── 8. Premium Buttons — Micro-interactions ------------------------------------------------------------ • Primary: gradient bg + inner top highlight + press scale • Ghost/outline: transparent bg, border appears on hover • All: 10px radius, 0.15s transition, active scale(0.97) • Focus ring: 2px primary with 2px offset ─────────────────────────────────────────────────────────── */ button, a[role="button"], input[type="submit"], input[type="button"], .button { border-radius: 10px !important; font-family: var(--font-sans) !important; font-weight: 500 !important; letter-spacing: -0.005em !important; transition: background-color var(--solstice-duration-fast) var(--solstice-ease), border-color var(--solstice-duration-fast) var(--solstice-ease), box-shadow var(--solstice-duration-fast) var(--solstice-ease), transform var(--solstice-duration-fast) var(--solstice-ease), filter var(--solstice-duration-fast) var(--solstice-ease) !important; } /* Active press: spring-eased scale down */ button:active, a[role="button"]:active, input[type="submit"]:active, input[type="button"]:active { transform: scale(0.97) !important; transition-duration: 0.08s !important; } /* ─── Primary buttons: honey gradient + inner glow ─── */ button[class*="bg-primary"], a[class*="bg-primary"], button[class*="bg-sidebar-primary"], a[class*="bg-sidebar-primary"] { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important; border: 1px solid color-mix(in srgb, var(--primary) 80%, var(--accent)) !important; color: var(--primary-foreground) !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.18), 0 2px 6px color-mix(in srgb, var(--primary) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; text-shadow: 0 1px 1px rgba(60, 40, 20, 0.12) !important; } button[class*="bg-primary"]:hover, a[class*="bg-primary"]:hover, button[class*="bg-sidebar-primary"]:hover, a[class*="bg-sidebar-primary"]:hover { filter: brightness(1.06) saturate(1.05) !important; box-shadow: 0 2px 4px rgba(60, 40, 20, 0.22), 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; transform: translateY(-1px) !important; } button[class*="bg-primary"]:active, a[class*="bg-primary"]:active, button[class*="bg-sidebar-primary"]:active, a[class*="bg-sidebar-primary"]:active { filter: brightness(0.94) !important; transform: translateY(0) scale(0.97) !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important; } /* ─── Secondary / outline buttons: subtle border + bg ─── */ button[class*="bg-secondary"], button[class*="border-input"], button[class*="border-border"], a[class*="bg-secondary"], a[class*="border-input"], a[class*="border-border"] { background-color: color-mix(in srgb, var(--secondary) 80%, transparent) !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } button[class*="bg-secondary"]:hover, button[class*="border-input"]:hover, button[class*="border-border"]:hover, a[class*="bg-secondary"]:hover, a[class*="border-input"]:hover, a[class*="border-border"]:hover { background-color: color-mix(in srgb, var(--primary) 8%, var(--secondary)) !important; border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important; color: var(--primary) !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; transform: translateY(-1px) !important; } button[class*="bg-secondary"]:active, button[class*="border-input"]:active, button[class*="border-border"]:active { background-color: color-mix(in srgb, var(--primary) 12%, var(--secondary)) !important; transform: translateY(0) scale(0.97) !important; } .dark button[class*="bg-secondary"], .dark button[class*="border-input"], .dark a[class*="bg-secondary"], .dark a[class*="border-input"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* ─── Destructive buttons ─── */ button[class*="bg-destructive"], a[class*="bg-destructive"] { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--destructive) 0%, color-mix(in srgb, var(--destructive) 80%, #f97316) 100%) !important; border: 1px solid var(--destructive) !important; color: var(--destructive-foreground) !important; border-radius: 10px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(180, 30, 20, 0.2), 0 2px 6px color-mix(in srgb, var(--destructive) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } button[class*="bg-destructive"]:hover, a[class*="bg-destructive"]:hover { filter: brightness(1.06) !important; box-shadow: 0 2px 4px rgba(180, 30, 20, 0.25), 0 4px 12px color-mix(in srgb, var(--destructive) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; transform: translateY(-1px) !important; } /* ─── Ghost buttons: transparent, border appears on hover ─── */ button[class*="hover:bg-accent"]:not([class*="bg-primary"]):not([class*="bg-secondary"]), button[class*="hover:bg-secondary"]:not([class*="bg-primary"]):not([class*="bg-secondary"]), button[class*="ghost"]:not([class*="bg-primary"]):not([class*="bg-secondary"]), [class*="variant-ghost"] { background-color: transparent !important; border: 1px solid transparent !important; color: var(--foreground) !important; border-radius: 10px !important; } button[class*="hover:bg-accent"]:not([class*="bg-primary"]):not([class*="bg-secondary"]):hover, button[class*="hover:bg-secondary"]:not([class*="bg-primary"]):not([class*="bg-secondary"]):hover, button[class*="ghost"]:not([class*="bg-primary"]):not([class*="bg-secondary"]):hover, [class*="variant-ghost"]:hover { background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important; border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; color: var(--primary) !important; } /* ─── Icon-only buttons (square-ish, smaller) ─── */ button[class*="size-"], button[class*="h-9"][class*="w-9"], button[class*="h-8"][class*="w-8"], button[class*="h-10"][class*="w-10"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ─────────────────────────────────────────────────────────── 9. Premium Inputs / Form Controls ------------------------------------------------------------ • Slightly translucent bg • Subtle border, becomes primary on focus • Focus ring effect (box-shadow, not outline) • 10px radius ─────────────────────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { background-color: color-mix(in srgb, var(--background) 70%, transparent) !important; border: 1px solid var(--border) !important; color: var(--foreground) !important; border-radius: 10px !important; font-family: var(--font-sans) !important; font-size: 14px !important; padding: 0.5rem 0.75rem !important; transition: border-color var(--solstice-duration-fast) var(--solstice-ease), box-shadow var(--solstice-duration-fast) var(--solstice-ease), background-color var(--solstice-duration-fast) var(--solstice-ease) !important; box-shadow: inset 0 1px 2px rgba(60, 40, 20, 0.04) !important; } input::placeholder, textarea::placeholder { color: var(--muted-foreground) !important; opacity: 1 !important; font-weight: 400 !important; } input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important; } input:focus, textarea:focus, select:focus { border-color: var(--primary) !important; background-color: color-mix(in srgb, var(--background) 90%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px 2px rgba(60, 40, 20, 0.03) !important; outline: none !important; } .dark input, .dark textarea, .dark select { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important; } .dark input:focus, .dark textarea:focus, .dark select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), inset 0 1px 2px rgba(0, 0, 0, 0.2) !important; } /* Checkbox / radio accent */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary) !important; width: 1rem !important; height: 1rem !important; cursor: pointer !important; } /* Textarea: comfortable line-height */ textarea { line-height: 1.5 !important; resize: vertical !important; } /* Select arrow color */ select { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a7a68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 12px !important; padding-right: 2rem !important; } .dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a89a86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; } /* ─────────────────────────────────────────────────────────── 10. Premium Sidebar Navigation ------------------------------------------------------------ • Translucent bg slightly different from main bg • Nav items: rounded-lg, hover bg tint • Active item: left accent bar (3px) + primary tint bg • Section labels: uppercase, tiny, muted ─────────────────────────────────────────────────────────── */ aside, [class*="sidebar"], [class*="Sidebar"], nav[class*="bg-sidebar"], [data-sidebar] { background-color: color-mix(in srgb, var(--sidebar) 85%, transparent) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; border-color: var(--sidebar-border) !important; color: var(--sidebar-foreground) !important; font-family: var(--font-sans) !important; } /* Nav links: rounded, hover bg tint */ aside a, nav[class*="bg-sidebar"] a, [data-sidebar] a, [class*="sidebar"] a, [class*="Sidebar"] a { border-radius: 8px !important; transition: background-color var(--solstice-duration-fast) var(--solstice-ease), color var(--solstice-duration-fast) var(--solstice-ease), transform var(--solstice-duration-fast) var(--solstice-ease) !important; } aside a:hover, nav[class*="bg-sidebar"] a:hover, [data-sidebar] a:hover, [class*="sidebar"] a:hover, [class*="Sidebar"] a:hover { background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important; color: var(--primary) !important; transform: translateX(2px) !important; } /* Sidebar hover state on muted nav items */ nav [class*="text-muted-foreground"]:hover, nav [class*="text-foreground\/70"]:hover, aside [class*="text-muted-foreground"]:hover { color: var(--primary) !important; } /* Active sidebar item: warm primary tint + left accent bar */ nav [class*="bg-sidebar-accent"], nav [class*="bg-primary\/10"], nav [class*="bg-primary\/15"], aside [class*="bg-sidebar-accent"], aside [class*="bg-primary\/10"], aside [class*="bg-primary\/15"] { background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important; color: var(--primary) !important; border-radius: 8px !important; position: relative !important; font-weight: 500 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px color-mix(in srgb, var(--primary) 12%, transparent) !important; } /* Active item: left accent bar (3px) */ nav [class*="bg-sidebar-accent"]::before, nav [class*="bg-primary\/10"]::before, nav [class*="bg-primary\/15"]::before, aside [class*="bg-sidebar-accent"]::before, aside [class*="bg-primary\/10"]::before, aside [class*="bg-primary\/15"]::before { content: "" !important; position: absolute !important; left: -0.5rem !important; top: 50% !important; transform: translateY(-50%) !important; width: 3px !important; height: 60% !important; background: linear-gradient(180deg, var(--primary), var(--accent)) !important; border-radius: 0 3px 3px 0 !important; box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent) !important; } /* Sidebar section labels: uppercase, tiny, muted, wide tracking */ aside [class*="text-xs"][class*="text-muted-foreground"], nav [class*="text-xs"][class*="text-muted-foreground"], aside [class*="text-[11px]"], nav [class*="text-[11px]"] { text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 10px !important; font-weight: 600 !important; opacity: 0.7 !important; } /* Sidebar icons: muted, primary when active */ aside svg, nav[class*="bg-sidebar"] svg, [data-sidebar] svg { transition: color var(--solstice-duration-fast) var(--solstice-ease) !important; opacity: 0.85 !important; } /* ─────────────────────────────────────────────────────────── 11. Premium Tables — Data Display ------------------------------------------------------------ • Sticky header with translucent bg + backdrop-blur • Subtle zebra striping • Hover row highlight (primary tint) • Only horizontal borders, very subtle ─────────────────────────────────────────────────────────── */ table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; font-feature-settings: "tnum" !important; } thead, th { background-color: color-mix(in srgb, var(--muted) 70%, transparent) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: var(--muted-foreground) !important; font-weight: 600 !important; font-family: var(--font-sans) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 0.75rem 1rem !important; text-align: left !important; border-bottom: 1px solid var(--border) !important; position: sticky !important; top: 0 !important; z-index: 2 !important; } td { border-color: var(--border) !important; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important; padding: 0.75rem 1rem !important; color: var(--foreground) !important; vertical-align: middle !important; } /* Zebra striping — very subtle */ tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--muted) 25%, transparent) !important; } /* Hover row: primary tint */ tbody tr { transition: background-color var(--solstice-duration-fast) var(--solstice-ease) !important; } tbody tr:hover { background-color: color-mix(in srgb, var(--primary) 6%, transparent) !important; } /* Last row: no border */ tbody tr:last-child td { border-bottom: none !important; } /* ─────────────────────────────────────────────────────────── 12. Premium Badges / Pills ------------------------------------------------------------ • Full pill shape (9999px) • Subtle tint of the badge color • 1px subtle border • 11px font, medium weight ─────────────────────────────────────────────────────────── */ [class*="badge"], [class*="Badge"], [class*="rounded-full"] { border-radius: 9999px !important; font-weight: 500 !important; font-family: var(--font-sans) !important; font-size: 11px !important; letter-spacing: 0.01em !important; padding: 0.125rem 0.625rem !important; display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; border: 1px solid transparent !important; line-height: 1.4 !important; } /* Primary-tinted badges */ [class*="bg-primary\/10"], [class*="bg-primary\/15"], [class*="bg-primary\/20"] { color: var(--primary) !important; background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important; border-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; } /* Status badges — color-coded */ [class*="bg-green-"], [class*="bg-emerald-"], [class*="bg-success"] { color: color-mix(in srgb, var(--chart-4) 75%, var(--foreground)) !important; background-color: color-mix(in srgb, var(--chart-4) 12%, transparent) !important; border-color: color-mix(in srgb, var(--chart-4) 25%, transparent) !important; } [class*="bg-red-"], [class*="bg-rose-"], [class*="bg-destructive\/10"], [class*="bg-destructive\/15"] { color: var(--destructive) !important; background-color: color-mix(in srgb, var(--destructive) 12%, transparent) !important; border-color: color-mix(in srgb, var(--destructive) 25%, transparent) !important; } [class*="bg-yellow-"], [class*="bg-amber-"], [class*="bg-orange-"] { color: color-mix(in srgb, var(--accent) 75%, var(--foreground)) !important; background-color: color-mix(in srgb, var(--accent) 15%, transparent) !important; border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important; } [class*="bg-blue-"], [class*="bg-sky-"], [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"] { color: color-mix(in srgb, var(--chart-3) 75%, var(--foreground)) !important; background-color: color-mix(in srgb, var(--chart-3) 12%, transparent) !important; border-color: color-mix(in srgb, var(--chart-3) 25%, transparent) !important; } /* ─────────────────────────────────────────────────────────── 13. Premium Header — Sticky + Backdrop Blur ─────────────────────────────────────────────────────────── */ header, [class*="sticky"][class*="top-0"], [class*="sticky"][class*="top-"][class*="z-"] { backdrop-filter: blur(16px) saturate(140%) !important; -webkit-backdrop-filter: blur(16px) saturate(140%) !important; background-color: color-mix(in srgb, var(--background) 75%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(60, 40, 20, 0.03) !important; } .dark header, .dark [class*="sticky"][class*="top-0"] { background-color: color-mix(in srgb, var(--background) 70%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02), 0 4px 12px rgba(0, 0, 0, 0.2) !important; } /* ─────────────────────────────────────────────────────────── 14. Premium Scrollbars — Thin, Rounded, Subtle ------------------------------------------------------------ • 6px wide, fully rounded • Track: transparent • Thumb: muted, hover: primary ─────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-foreground) 50%, transparent) !important; border-radius: 9999px !important; border: none !important; transition: background-color 0.2s ease !important; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 70%, transparent) !important; } ::-webkit-scrollbar-corner { background: transparent !important; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent) transparent; } /* ─────────────────────────────────────────────────────────── 15. Focus Rings — Premium ------------------------------------------------------------ 2px ring in primary color with 2px offset (focus-visible only) ─────────────────────────────────────────────────────────── */ *:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in srgb, var(--primary) 60%, transparent) !important; border-radius: inherit !important; } /* Inputs already have their own focus ring */ input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 1px 2px rgba(60, 40, 20, 0.03) !important; } /* ─────────────────────────────────────────────────────────── 16. Links ─────────────────────────────────────────────────────────── */ a { color: var(--primary) !important; transition: color var(--solstice-duration-fast) var(--solstice-ease) !important; text-decoration: none !important; } a:hover { color: var(--accent) !important; } /* Links inside headings keep foreground unless explicitly primary */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit !important; background: inherit !important; -webkit-text-fill-color: currentColor !important; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--primary) !important; -webkit-text-fill-color: var(--primary) !important; } /* ─────────────────────────────────────────────────────────── 17. Code Blocks ─────────────────────────────────────────────────────────── */ pre, code, kbd, samp { font-family: var(--font-mono) !important; } pre { background-color: color-mix(in srgb, var(--muted) 70%, transparent) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; padding: 0.875rem 1rem !important; overflow-x: auto !important; font-size: 13px !important; line-height: 1.6 !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } code { font-size: 0.875em !important; } /* Inline code: subtle bg */ :not(pre) > code { background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; color: var(--primary) !important; padding: 0.125rem 0.375rem !important; border-radius: 6px !important; font-size: 0.85em !important; border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent) !important; font-weight: 500 !important; } /* ─────────────────────────────────────────────────────────── 18. Loading Spinner ─────────────────────────────────────────────────────────── */ [class*="animate-spin"][class*="border-t-"], [class*="animate-spin"][class*="border-primary"] { border-top-color: var(--primary) !important; } /* ─────────────────────────────────────────────────────────── 19. Tabs / Segmented Controls ------------------------------------------------------------ Premium pill-style segmented controls. ─────────────────────────────────────────────────────────── */ [class*="bg-muted"][class*="rounded-lg"], [class*="bg-muted"][class*="rounded-xl"], [role="tablist"] { background-color: color-mix(in srgb, var(--muted) 70%, transparent) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border-radius: 10px !important; padding: 0.25rem !important; border: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important; gap: 0.125rem !important; } [role="tab"], [class*="bg-background"][class*="shadow-sm"] { border-radius: 7px !important; transition: all var(--solstice-duration-fast) var(--solstice-ease) !important; font-weight: 500 !important; } /* Active tab gets primary tint + glow */ [role="tab"][aria-selected="true"], [class*="data-[state=active]"] { color: var(--primary) !important; background-color: color-mix(in srgb, var(--background) 90%, transparent) !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; font-weight: 600 !important; } [role="tab"]:not([aria-selected="true"]):hover { background-color: color-mix(in srgb, var(--primary) 6%, transparent) !important; color: var(--primary) !important; } /* ─────────────────────────────────────────────────────────── 20. Switches / Toggles — Premium ─────────────────────────────────────────────────────────── */ [role="switch"], [class*="Switch"] { border-radius: 9999px !important; transition: background-color var(--solstice-duration) var(--solstice-ease) !important; } [role="switch"][aria-checked="true"], [class*="Switch"][data-state="checked"] { background-color: var(--primary) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(135deg, var(--primary), var(--accent)) !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; } /* Switch knob: spring-eased */ [role="switch"] [class*="pointer-events-none"], [class*="Switch"] [class*="pointer-events-none"] { transition: transform var(--solstice-duration) var(--solstice-spring) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; } /* ─────────────────────────────────────────────────────────── 21. Dropdown / Popover Menus — Premium ------------------------------------------------------------ Frosted glass + layered shadow + subtle scale-in. ─────────────────────────────────────────────────────────── */ [role="menu"], [class*="PopoverContent"], [class*="DropdownMenuContent"], [class*="bg-popover"] { background-color: color-mix(in srgb, var(--popover) 88%, transparent) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important; border-radius: 12px !important; box-shadow: 0 2px 4px rgba(60, 40, 20, 0.06), 0 8px 24px rgba(60, 40, 20, 0.10), 0 16px 48px rgba(60, 40, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; padding: 0.375rem !important; } .dark [role="menu"], .dark [class*="PopoverContent"], .dark [class*="DropdownMenuContent"], .dark [class*="bg-popover"] { background-color: color-mix(in srgb, var(--popover) 80%, transparent) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Menu items: rounded, hover tint */ [role="menuitem"], [class*="DropdownMenuItem"], [class*="MenuItem"] { border-radius: 8px !important; transition: background-color var(--solstice-duration-fast) var(--solstice-ease), color var(--solstice-duration-fast) var(--solstice-ease) !important; } [role="menuitem"]:hover, [class*="DropdownMenuItem"]:hover, [class*="MenuItem"]:hover, [role="menuitem"]:focus, [class*="DropdownMenuItem"]:focus { background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important; color: var(--primary) !important; } /* ─────────────────────────────────────────────────────────── 22. Tooltips — Premium ─────────────────────────────────────────────────────────── */ [role="tooltip"], [class*="TooltipContent"] { background-color: var(--foreground) !important; color: var(--background) !important; border-radius: 6px !important; font-family: var(--font-sans) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.01em !important; padding: 0.375rem 0.625rem !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important; border: 1px solid color-mix(in srgb, var(--foreground) 80%, transparent) !important; } /* ─────────────────────────────────────────────────────────── 23. Dialogs / Modals — Premium ------------------------------------------------------------ Frosted card + deep layered shadow. ─────────────────────────────────────────────────────────── */ [role="dialog"], [class*="DialogContent"], [class*="Modal"] { background-color: color-mix(in srgb, var(--card) 92%, transparent) !important; backdrop-filter: blur(24px) saturate(140%) !important; -webkit-backdrop-filter: blur(24px) saturate(140%) !important; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important; border-radius: 20px !important; box-shadow: 0 4px 8px rgba(60, 40, 20, 0.08), 0 16px 48px rgba(60, 40, 20, 0.16), 0 32px 96px rgba(60, 40, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } .dark [role="dialog"], .dark [class*="DialogContent"], .dark [class*="Modal"] { background-color: color-mix(in srgb, var(--card) 85%, transparent) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.6), 0 32px 96px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } /* Dialog overlay (backdrop) — dim + slight blur */ [class*="DialogOverlay"], [class*="fixed"][class*="inset-0"][class*="z-50"][class*="bg-black"] { backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; background-color: color-mix(in srgb, #000 50%, transparent) !important; } [role="dialog"] h1, [role="dialog"] h2, [role="dialog"] h3, [class*="DialogTitle"] { font-family: "Fraunces", serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* ─────────────────────────────────────────────────────────── 24. Alerts — Premium ─────────────────────────────────────────────────────────── */ [class*="Alert"], [role="alert"] { border-radius: 12px !important; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important; background-color: color-mix(in srgb, var(--muted) 50%, transparent) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; color: var(--foreground) !important; padding: 0.75rem 1rem !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Alert variants — color-coded */ [class*="AlertDefault"], [class*="alert-default"] { border-left: 3px solid var(--primary) !important; } [class*="AlertDestructive"], [class*="alert-destructive"] { border-left: 3px solid var(--destructive) !important; background-color: color-mix(in srgb, var(--destructive) 8%, var(--muted)) !important; } /* ─────────────────────────────────────────────────────────── 25. Dividers / Borders ─────────────────────────────────────────────────────────── */ hr, [class*="divider"] { border-color: color-mix(in srgb, var(--border) 70%, transparent) !important; border-top-width: 1px !important; border-top-style: solid !important; } [class*="border-t"], [class*="border-b"], [class*="border-l"], [class*="border-r"] { border-color: color-mix(in srgb, var(--border) 60%, transparent) !important; } /* Generic border-border utility */ [class*="border-border"] { border-color: var(--border) !important; } /* ─────────────────────────────────────────────────────────── 26. Avatars — Premium ─────────────────────────────────────────────────────────── */ [class*="Avatar"], [class*="avatar"] { border-radius: 9999px !important; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; transition: transform var(--solstice-duration-fast) var(--solstice-spring), box-shadow var(--solstice-duration-fast) var(--solstice-ease) !important; } [class*="Avatar"]:hover, [class*="avatar"]:hover { transform: scale(1.05) !important; box-shadow: 0 2px 6px rgba(60, 40, 20, 0.12), 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; } /* Avatar fallback (initials) — primary tint */ [class*="AvatarFallback"], [class*="avatar-fallback"] { background: linear-gradient(135deg, var(--primary), var(--accent)) !important; color: var(--primary-foreground) !important; font-weight: 600 !important; font-family: "Fraunces", serif !important; letter-spacing: -0.01em !important; } /* ─────────────────────────────────────────────────────────── 27. Progress Bars / Sliders — Premium ─────────────────────────────────────────────────────────── */ [role="progressbar"], [class*="Progress"], [class*="progress"] { background-color: color-mix(in srgb, var(--muted) 80%, transparent) !important; border-radius: 9999px !important; overflow: hidden !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important; } [role="progressbar"] > *, [class*="ProgressIndicator"], [class*="progress-bar"] { background: linear-gradient(90deg, var(--primary), var(--accent)) !important; border-radius: 9999px !important; box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 40%, transparent) !important; transition: width 0.4s var(--solstice-ease) !important; } /* Sliders */ input[type="range"] { accent-color: var(--primary) !important; height: 6px !important; border-radius: 9999px !important; } /* ─────────────────────────────────────────────────────────── 28. Skeletons / Shimmer — Premium Loading ------------------------------------------------------------ Subtle pulse + warm-tinted shimmer. ─────────────────────────────────────────────────────────── */ [class*="Skeleton"], [class*="skeleton"], [class*="animate-pulse"][class*="bg-muted"] { background-color: color-mix(in srgb, var(--muted) 80%, transparent) !important; border-radius: 8px !important; position: relative !important; overflow: hidden !important; } [class*="Skeleton"]::after, [class*="skeleton"]::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--primary) 8%, transparent) 50%, transparent 100%) !important; animation: solstice-shimmer 1.8s infinite !important; } @keyframes solstice-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ─────────────────────────────────────────────────────────── 29. Smooth Transitions (Global) + Reduced-Motion Guard ------------------------------------------------------------ Universal transitions for premium feel. Reduced-motion guard at the end disables them for users who prefer reduced motion. ─────────────────────────────────────────────────────────── */ * { transition: background-color var(--solstice-duration) var(--solstice-ease), border-color var(--solstice-duration) var(--solstice-ease), color var(--solstice-duration-fast) var(--solstice-ease); } *, *::before, *::after { transition-timing-function: var(--solstice-ease); } /* Selection — warm tint */ ::selection { background-color: color-mix(in srgb, var(--primary) 25%, transparent) !important; color: var(--foreground) !important; } /* ─────────────────────────────────────────────────────────── 30. Responsive — Mobile ------------------------------------------------------------ Tighter padding, slightly smaller radii, full-width cards. ─────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body { font-size: 13px !important; } main, [class*="container"] { padding-left: 1rem !important; padding-right: 1rem !important; } /* Slightly smaller card radius on mobile */ [class*="card"], [class*="Card"] { border-radius: 14px !important; } /* Tighter button radii on mobile */ button, input, textarea, select { border-radius: 8px !important; } /* Tighter table padding */ th, td { padding: 0.5rem 0.75rem !important; } /* Display headings slightly smaller on mobile */ h1 { font-size: 1.625rem !important; } h2 { font-size: 1.3rem !important; } h3 { font-size: 1.125rem !important; } } /* ─────────────────────────────────────────────────────────── 31. Print Cleanup ─────────────────────────────────────────────────────────── */ @media print { body::before, body::after { display: none !important; } [class*="card"], [class*="Card"] { box-shadow: none !important; backdrop-filter: none !important; background-color: white !important; } h1, h2, h3 { -webkit-text-fill-color: black !important; color: black !important; background: none !important; } } /* ─────────────────────────────────────────────────────────── 32. Reduced-Motion Accessibility ------------------------------------------------------------ Disable all transitions/animations for users who prefer reduced motion. Critical for accessibility. ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transform: none !important; } [class*="card"]:hover, [class*="Card"]:hover { transform: none !important; } [class*="Skeleton"]::after, [class*="skeleton"]::after { display: none !important; } } /* ─────────────────────────────────────────────────────────── 33. Premium Micro-Utility Classes ------------------------------------------------------------ Subtle helpers that boost perceived polish. ─────────────────────────────────────────────────────────── */ /* Cursor: pointer on interactive elements */ button, a, [role="button"], [role="tab"], [role="menuitem"], [role="switch"], select, label[class*="cursor-pointer"], [class*="cursor-pointer"] { cursor: pointer !important; } /* Disable text selection on buttons for snappier feel */ button, [role="button"], [role="tab"] { user-select: none !important; -webkit-user-select: none !important; } /* Smooth scroll on the document */ html { scroll-behavior: smooth !important; } /* Hide number input spinners (cleaner look) */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; } input[type="number"] { -moz-appearance: textfield !important; } /* Premium focus ring on the body container when nothing else focused */ body:focus-visible { box-shadow: none !important; } /* Image rendering — crisp for icons, smooth for photos */ img, svg { shape-rendering: geometricPrecision !important; } /* Remove default button outline (we use box-shadow focus rings) */ button:focus { outline: none !important; } /* ─────────────────────────────────────────────────────────── 34. Premium Scroll-Area Polish ------------------------------------------------------------ For Radix ScrollArea components. ─────────────────────────────────────────────────────────── */ [class*="ScrollAreaViewport"] { scrollbar-width: thin !important; } [class*="ScrollAreaScrollbar"] { background: transparent !important; border-radius: 9999px !important; padding: 2px !important; } [class*="ScrollAreaThumb"] { background: color-mix(in srgb, var(--muted-foreground) 40%, transparent) !important; border-radius: 9999px !important; transition: background-color 0.2s ease !important; } [class*="ScrollAreaThumb"]:hover { background: color-mix(in srgb, var(--primary) 60%, transparent) !important; } /* ─────────────────────────────────────────────────────────── 35. Premium Misc — Polishing Details ─────────────────────────────────────────────────────────── */ /* Better default for monospace metric cards */ [class*="tabular-nums"], [class*="font-mono"] { font-variant-numeric: tabular-nums !important; } /* Tooltips fade-in */ [role="tooltip"], [class*="TooltipContent"] { animation: solstice-tooltip-in 0.15s var(--solstice-spring) !important; } @keyframes solstice-tooltip-in { 0% { opacity: 0; transform: translateY(2px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Popover / dropdown subtle scale-in */ [role="menu"], [class*="PopoverContent"], [class*="DropdownMenuContent"] { animation: solstice-popover-in 0.18s var(--solstice-spring) !important; transform-origin: top !important; } @keyframes solstice-popover-in { 0% { opacity: 0; transform: scale(0.96) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Dialog subtle scale-in */ [role="dialog"], [class*="DialogContent"] { animation: solstice-dialog-in 0.22s var(--solstice-spring) !important; } @keyframes solstice-dialog-in { 0% { opacity: 0; transform: scale(0.96) translateY(8px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ─────────────────────────────────────────────────────────── END — Solstice Premium v2 ------------------------------------------------------------ Total visual transformation from basic color swap → premium, award-grade design. Every interactive element has hover, active, and focus states. Glassmorphism throughout. Editorial typography with gradient display headings. Multi-layered aurora + grain texture for depth. ─────────────────────────────────────────────────────────── */