From 6ad994b1b793ce9a7c0a5fee7d0b0af9fc4f63e8 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 15 Jun 2026 23:22:07 +0330
Subject: [PATCH] Glassmorphism: glass sidebar + contrast fixes

Addresses washed-out contrast and extends glass to the sidebar:
- Deeper, more vivid gradient field so frosted cards lift off the background.
- Cards more opaque (0.74) with crisper borders + inner highlight; darker muted text.
- Frosted form fields kept more opaque than cards so input text stays high-contrast
  (mode-aware light/dark).
- Sidebar is now true dark frosted glass (translucent + backdrop-blur) instead of a
  solid gradient, kept dark enough to keep the white nav text readable.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 client/src/components/AppShell.tsx |  4 +--
 client/src/index.css               | 56 +++++++++++++++++-------------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx
index 5f85497..5728fe7 100644
--- a/client/src/components/AppShell.tsx
+++ b/client/src/components/AppShell.tsx
@@ -29,8 +29,8 @@ export function AppShell({ children }: { children: ReactNode }) {
   return (
     <div className="flex min-h-screen text-foreground">
       <aside
-        className="flex w-60 shrink-0 flex-col border-r border-white/10 text-sidebar-foreground backdrop-blur-xl"
-        style={{ background: 'linear-gradient(180deg, oklch(0.29 0.11 286) 0%, oklch(0.22 0.09 296) 100%)' }}
+        className="flex w-60 shrink-0 flex-col border-r border-white/15 text-sidebar-foreground backdrop-blur-2xl"
+        style={{ background: 'linear-gradient(180deg, oklch(0.27 0.1 287 / 0.78) 0%, oklch(0.2 0.085 298 / 0.78) 100%)' }}
       >
         <div className="flex items-center gap-3 px-5 py-4">
           <span className="grid size-8 place-items-center rounded-md bg-sidebar-primary font-bold text-sidebar-primary-foreground">
diff --git a/client/src/index.css b/client/src/index.css
index c0bcece..d4e45db 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -8,21 +8,21 @@
 :root {
   --radius: 0.625rem;
 
-  /* Glassmorphism body — translucent surfaces over a soft gradient field. */
-  --background: oklch(0.98 0.006 285);
-  --foreground: oklch(0.21 0.03 280);
-  --card: oklch(1 0 0 / 0.6);
-  --card-foreground: oklch(0.21 0.03 280);
-  --popover: oklch(1 0 0 / 0.8);
-  --popover-foreground: oklch(0.21 0.03 280);
+  /* Glassmorphism body — frosted surfaces over a vivid gradient field. */
+  --background: oklch(0.95 0.022 286);
+  --foreground: oklch(0.19 0.03 280);
+  --card: oklch(1 0 0 / 0.74);
+  --card-foreground: oklch(0.19 0.03 280);
+  --popover: oklch(1 0 0 / 0.92);
+  --popover-foreground: oklch(0.19 0.03 280);
 
   /* Brand: indigo, rationed so it always means something. */
   --primary: oklch(0.511 0.262 276.966);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.967 0.012 280);
   --secondary-foreground: oklch(0.3 0.05 280);
-  --muted: oklch(0.967 0.006 280);
-  --muted-foreground: oklch(0.52 0.03 280);
+  --muted: oklch(0.95 0.01 280 / 0.6);
+  --muted-foreground: oklch(0.44 0.035 280);
   --accent: oklch(0.95 0.03 280);
   --accent-foreground: oklch(0.4 0.16 277);
   --destructive: oklch(0.577 0.245 27.325);
@@ -57,11 +57,11 @@
 body {
   margin: 0;
   font-family: "Hanken Grotesk Variable", system-ui, sans-serif;
-  /* Soft gradient field behind the frosted-glass surfaces. */
+  /* Vivid gradient field behind the frosted-glass surfaces — gives the glass something to lift off. */
   background:
-    radial-gradient(1200px 620px at 8% -8%, oklch(0.7 0.17 290 / 0.20), transparent 60%),
-    radial-gradient(1000px 700px at 108% 6%, oklch(0.74 0.15 205 / 0.16), transparent 55%),
-    radial-gradient(900px 640px at 50% 118%, oklch(0.76 0.15 332 / 0.14), transparent 60%),
+    radial-gradient(1200px 640px at 6% -10%, oklch(0.62 0.2 288 / 0.34), transparent 62%),
+    radial-gradient(1050px 720px at 112% 4%, oklch(0.7 0.16 210 / 0.27), transparent 58%),
+    radial-gradient(960px 680px at 48% 122%, oklch(0.72 0.18 334 / 0.22), transparent 62%),
     var(--background);
   background-attachment: fixed;
   min-height: 100vh;
@@ -118,11 +118,11 @@ body {
 }
 
 .dark {
-  --background: oklch(0.19 0.03 285);
+  --background: oklch(0.17 0.035 287);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.28 0.05 285 / 0.5);
+  --card: oklch(0.31 0.055 286 / 0.62);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.26 0.05 285 / 0.82);
+  --popover: oklch(0.26 0.05 286 / 0.94);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.673 0.182 276.935);
   --primary-foreground: oklch(0.205 0.03 280);
@@ -162,14 +162,14 @@ body {
  * Unlayered so they sit above Tailwind utilities; inline styles still win, so the
  * gradient Team cards keep their own backgrounds. */
 [data-slot="card"] {
-  backdrop-filter: blur(16px) saturate(150%);
-  -webkit-backdrop-filter: blur(16px) saturate(150%);
-  border: 1px solid color-mix(in oklch, white 45%, transparent);
-  box-shadow: 0 14px 40px -22px oklch(0.35 0.12 285 / 0.55);
+  backdrop-filter: blur(20px) saturate(155%);
+  -webkit-backdrop-filter: blur(20px) saturate(155%);
+  border: 1px solid color-mix(in oklch, white 65%, transparent);
+  box-shadow: 0 16px 44px -20px oklch(0.32 0.13 285 / 0.42), inset 0 1px 0 0 oklch(1 0 0 / 0.55);
 }
 .dark [data-slot="card"] {
-  border-color: color-mix(in oklch, white 12%, transparent);
-  box-shadow: 0 16px 44px -24px oklch(0 0 0 / 0.6);
+  border-color: color-mix(in oklch, white 16%, transparent);
+  box-shadow: 0 18px 48px -22px oklch(0 0 0 / 0.65), inset 0 1px 0 0 oklch(1 0 0 / 0.08);
 }
 
 [data-slot="popover-content"],
@@ -207,12 +207,20 @@ body {
   border-color: color-mix(in oklch, white 14%, transparent);
 }
 
-/* Frosted form fields. */
+/* Frosted form fields — kept more opaque than cards so input text stays high-contrast. */
 [data-slot="select-trigger"],
 [data-slot="input"],
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 textarea {
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  background-color: color-mix(in oklch, var(--card) 55%, transparent) !important;
+  background-color: color-mix(in oklch, white 74%, transparent) !important;
+  border-color: color-mix(in oklch, oklch(0.5 0.04 285) 35%, transparent);
+}
+.dark [data-slot="select-trigger"],
+.dark [data-slot="input"],
+.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+.dark textarea {
+  background-color: color-mix(in oklch, oklch(0.32 0.05 286) 82%, transparent) !important;
+  border-color: color-mix(in oklch, white 16%, transparent);
 }