From 7864d589a4c9d6630ea610fb5d136a272c39efcd Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 15 Jun 2026 23:12:16 +0330
Subject: [PATCH] Glassmorphism + gradient theme migration (app-wide)

Central restyle keyed on shadcn data-slots so all 13 pages inherit it without edits:
a soft gradient field on the body, frosted-glass surfaces (translucent --card/--popover
+ backdrop-blur + hairline borders) on cards, popovers, selects, sheets, and form fields,
gradient primary buttons with glass secondary/outline, and a gradient + blurred sidebar.
The content area is transparent so the gradient shows behind the glass. Inline-styled
gradient cards (Team view) are unaffected.

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

diff --git a/client/src/components/AppShell.tsx b/client/src/components/AppShell.tsx
index 38668a8..5f85497 100644
--- a/client/src/components/AppShell.tsx
+++ b/client/src/components/AppShell.tsx
@@ -27,8 +27,11 @@ export function AppShell({ children }: { children: ReactNode }) {
   const logout = useAuth((s) => s.logout)
 
   return (
-    <div className="flex min-h-screen bg-background text-foreground">
-      <aside className="flex w-60 shrink-0 flex-col bg-sidebar text-sidebar-foreground">
+    <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%)' }}
+      >
         <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">
             T
diff --git a/client/src/index.css b/client/src/index.css
index 014ee45..c0bcece 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -8,12 +8,12 @@
 :root {
   --radius: 0.625rem;
 
-  /* Light content surface — the "calm command center" body. */
-  --background: oklch(0.99 0.003 280);
+  /* 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);
+  --card: oklch(1 0 0 / 0.6);
   --card-foreground: oklch(0.21 0.03 280);
-  --popover: oklch(1 0 0);
+  --popover: oklch(1 0 0 / 0.8);
   --popover-foreground: oklch(0.21 0.03 280);
 
   /* Brand: indigo, rationed so it always means something. */
@@ -57,6 +57,14 @@
 body {
   margin: 0;
   font-family: "Hanken Grotesk Variable", system-ui, sans-serif;
+  /* Soft gradient field behind the frosted-glass surfaces. */
+  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%),
+    var(--background);
+  background-attachment: fixed;
+  min-height: 100vh;
 }
 
 @theme inline {
@@ -110,11 +118,11 @@ body {
 }
 
 .dark {
-  --background: oklch(0.205 0.03 280);
+  --background: oklch(0.19 0.03 285);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.257 0.04 281);
+  --card: oklch(0.28 0.05 285 / 0.5);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.257 0.04 281);
+  --popover: oklch(0.26 0.05 285 / 0.82);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.673 0.182 276.935);
   --primary-foreground: oklch(0.205 0.03 280);
@@ -143,9 +151,68 @@ body {
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
   html {
     @apply font-sans;
   }
 }
+
+/* ---- Glassmorphism + gradients (app-wide, keyed on shadcn data-slots) ----
+ * 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);
+}
+.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);
+}
+
+[data-slot="popover-content"],
+[data-slot="select-content"],
+[data-slot="dropdown-menu-content"],
+[data-slot="sheet-content"] {
+  backdrop-filter: blur(18px) saturate(160%);
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  border: 1px solid color-mix(in oklch, white 40%, transparent);
+}
+.dark [data-slot="popover-content"],
+.dark [data-slot="select-content"],
+.dark [data-slot="dropdown-menu-content"],
+.dark [data-slot="sheet-content"] {
+  border-color: color-mix(in oklch, white 12%, transparent);
+}
+
+/* Primary actions become a gradient; secondary/outline become glass. */
+[data-slot="button"][data-variant="default"] {
+  background-image: linear-gradient(135deg, oklch(0.58 0.24 277) 0%, oklch(0.56 0.25 305) 100%);
+  box-shadow: 0 8px 20px -10px oklch(0.5 0.23 288 / 0.7);
+}
+[data-slot="button"][data-variant="default"]:hover {
+  background-image: linear-gradient(135deg, oklch(0.62 0.24 277) 0%, oklch(0.6 0.25 305) 100%);
+}
+[data-slot="button"][data-variant="outline"],
+[data-slot="button"][data-variant="secondary"] {
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  background-color: color-mix(in oklch, var(--card) 65%, transparent);
+  border: 1px solid color-mix(in oklch, white 40%, transparent);
+}
+.dark [data-slot="button"][data-variant="outline"],
+.dark [data-slot="button"][data-variant="secondary"] {
+  border-color: color-mix(in oklch, white 14%, transparent);
+}
+
+/* Frosted form fields. */
+[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;
+}