Polish Novya UI with brand colors, first-load skeletons, and session transition overlay.
Keep chat pinned to the latest message while AI thinks or streams, and align buttons/inputs with the logo teal/blue focus treatment. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
+440
-205
@@ -4,41 +4,50 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light is the product default */
|
||||
--background: 210 40% 98%;
|
||||
/* Light is the product default — calm off-white wellness palette */
|
||||
--background: 210 40% 98%; /* #F8FAFC */
|
||||
--foreground: 222 47% 11%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222 47% 11%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
--primary: 216 100% 50%;
|
||||
--primary: 199 89% 48%; /* logo blue */
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215 25% 28%;
|
||||
--accent: 191 90% 42%;
|
||||
--muted-foreground: 215 25% 32%;
|
||||
--accent: 176 70% 42%; /* logo teal/green */
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 72% 45%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 214 32% 88%;
|
||||
--border: 214 32% 90%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 216 100% 50%;
|
||||
--ring: 176 70% 42%;
|
||||
--radius: 1rem;
|
||||
|
||||
--neon-blue: #0066ff;
|
||||
--neon-cyan: #00d2ff;
|
||||
--neon-teal: #00ffcc;
|
||||
/* Brand from mainlogo.png — teal-green → azure blue */
|
||||
--logo-teal: #26d4ca;
|
||||
--logo-blue: #00a8e8;
|
||||
--neon-blue: #00a8e8;
|
||||
--neon-cyan: #26d4ca;
|
||||
--neon-teal: #26d4ca;
|
||||
--neon-emerald: #10b981;
|
||||
--navy-deep: #070a14;
|
||||
--navy: #0a0f1d;
|
||||
--glass-bg: rgba(255, 255, 255, 0.82);
|
||||
--glass-bg-strong: rgba(255, 255, 255, 0.92);
|
||||
--body-text: #1e3a4c;
|
||||
--glow-blue: 0 0 12px rgba(47, 127, 212, 0.12);
|
||||
--glow-teal: 0 0 12px rgba(52, 184, 150, 0.12);
|
||||
--glow-border: 0 0 8px rgba(47, 127, 212, 0.1);
|
||||
--gradient-neon: linear-gradient(135deg, #2f7fd4 0%, #2bb8c9 50%, #34b896 100%);
|
||||
--navy-deep: #0f172a;
|
||||
--navy: #1e293b;
|
||||
--glass-bg: rgba(255, 255, 255, 0.88);
|
||||
--glass-bg-strong: rgba(255, 255, 255, 0.94);
|
||||
--body-text: #334155;
|
||||
--glow-blue: 0 0 16px rgba(0, 168, 232, 0.35);
|
||||
--glow-teal: 0 0 16px rgba(38, 212, 202, 0.4);
|
||||
--glow-border: 0 0 12px rgba(38, 212, 202, 0.25);
|
||||
--gradient-neon: linear-gradient(135deg, #26d4ca 0%, #14c4db 48%, #00a8e8 100%);
|
||||
--chat-bg: #f8fafc;
|
||||
--bubble-user-bg: #00a8e8;
|
||||
--bubble-ai-bg: #ffffff;
|
||||
--bubble-ai-border: #e2e8f0;
|
||||
--theme-transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease,
|
||||
box-shadow 0.35s ease;
|
||||
}
|
||||
|
||||
.light {
|
||||
@@ -48,76 +57,96 @@
|
||||
--card-foreground: 222 47% 11%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222 47% 11%;
|
||||
--primary: 216 100% 50%;
|
||||
--primary: 199 89% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222 47% 11%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215 25% 28%;
|
||||
--accent: 191 90% 42%;
|
||||
--muted-foreground: 215 25% 32%;
|
||||
--accent: 176 70% 42%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--destructive: 0 72% 45%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 214 32% 88%;
|
||||
--border: 214 32% 90%;
|
||||
--input: 214 32% 91%;
|
||||
--ring: 216 100% 50%;
|
||||
--glass-bg: rgba(255, 255, 255, 0.82);
|
||||
--glass-bg-strong: rgba(255, 255, 255, 0.92);
|
||||
--body-text: #1e3a4c;
|
||||
--glow-blue: 0 0 12px rgba(47, 127, 212, 0.12);
|
||||
--glow-teal: 0 0 12px rgba(52, 184, 150, 0.12);
|
||||
--glow-border: 0 0 8px rgba(47, 127, 212, 0.1);
|
||||
--ring: 176 70% 42%;
|
||||
--logo-teal: #26d4ca;
|
||||
--logo-blue: #00a8e8;
|
||||
--neon-blue: #00a8e8;
|
||||
--neon-cyan: #0d9488;
|
||||
--neon-teal: #0f766e;
|
||||
--glass-bg: rgba(255, 255, 255, 0.88);
|
||||
--glass-bg-strong: rgba(255, 255, 255, 0.94);
|
||||
--body-text: #334155;
|
||||
--glow-blue: 0 2px 8px rgba(0, 168, 232, 0.18);
|
||||
--glow-teal: 0 2px 8px rgba(38, 212, 202, 0.16);
|
||||
--glow-border: none;
|
||||
--gradient-neon: linear-gradient(135deg, #26d4ca 0%, #14c4db 48%, #00a8e8 100%);
|
||||
--chat-bg: #f8fafc;
|
||||
--bubble-user-bg: #00a8e8;
|
||||
--bubble-ai-bg: #ffffff;
|
||||
--bubble-ai-border: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Keep .dark as alias of product dark tokens */
|
||||
.dark {
|
||||
--background: 222 48% 6%;
|
||||
--foreground: 0 0% 100%;
|
||||
--card: 222 47% 11%;
|
||||
--card-foreground: 0 0% 100%;
|
||||
--popover: 222 47% 9%;
|
||||
--popover-foreground: 0 0% 100%;
|
||||
--primary: 216 100% 50%;
|
||||
--background: 222 47% 11%; /* #0F172A */
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 217 33% 17%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 217 33% 14%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 193 100% 45%; /* logo blue #00A8E8 */
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 217 33% 14%;
|
||||
--secondary: 217 33% 17%;
|
||||
--secondary-foreground: 210 40% 96%;
|
||||
--muted: 217 33% 12%;
|
||||
--muted-foreground: 210 25% 82%;
|
||||
--accent: 191 100% 50%;
|
||||
--accent-foreground: 222 48% 6%;
|
||||
--muted: 217 33% 17%;
|
||||
--muted-foreground: 215 20% 72%;
|
||||
--accent: 176 70% 49%; /* logo teal #26D4CA */
|
||||
--accent-foreground: 222 47% 11%;
|
||||
--destructive: 0 72% 42%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 210 40% 40%;
|
||||
--border: 215 25% 27%;
|
||||
--input: 217 33% 16%;
|
||||
--ring: 191 100% 50%;
|
||||
--glass-bg: rgba(12, 20, 36, 0.72);
|
||||
--glass-bg-strong: rgba(14, 24, 42, 0.86);
|
||||
--body-text: #e8eef6;
|
||||
--glow-blue: 0 0 14px rgba(56, 140, 220, 0.22), 0 0 28px rgba(0, 180, 200, 0.1);
|
||||
--glow-teal: 0 0 14px rgba(45, 180, 160, 0.2), 0 0 28px rgba(52, 168, 130, 0.1);
|
||||
--glow-border: 0 0 10px rgba(72, 180, 200, 0.18), 0 0 22px rgba(60, 170, 150, 0.1);
|
||||
--ring: 176 70% 49%;
|
||||
--logo-teal: #26d4ca;
|
||||
--logo-blue: #00a8e8;
|
||||
--neon-blue: #00a8e8;
|
||||
--neon-cyan: #26d4ca;
|
||||
--neon-teal: #26d4ca;
|
||||
--glass-bg: rgba(30, 41, 59, 0.82);
|
||||
--glass-bg-strong: rgba(30, 41, 59, 0.92);
|
||||
--body-text: #e2e8f0;
|
||||
--glow-blue: 0 0 18px rgba(0, 168, 232, 0.45), 0 0 36px rgba(0, 168, 232, 0.2);
|
||||
--glow-teal: 0 0 18px rgba(38, 212, 202, 0.5), 0 0 36px rgba(38, 212, 202, 0.22);
|
||||
--glow-border: 0 0 14px rgba(38, 212, 202, 0.35), 0 0 28px rgba(0, 168, 232, 0.2);
|
||||
--gradient-neon: linear-gradient(135deg, #26d4ca 0%, #14c4db 48%, #00a8e8 100%);
|
||||
--chat-bg: #0f172a;
|
||||
--bubble-user-bg: #00a8e8;
|
||||
--bubble-ai-bg: #334155;
|
||||
--bubble-ai-border: rgba(51, 65, 85, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Shabnam';
|
||||
src: url('/fonts/shabnam/Shabnam-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Shabnam';
|
||||
src: url('/fonts/shabnam/Shabnam.ttf') format('truetype');
|
||||
font-family: 'IRANSansX';
|
||||
src: url('/fonts/iransansx/IRANSansX-Regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Shabnam';
|
||||
src: url('/fonts/shabnam/Shabnam-Bold.ttf') format('truetype');
|
||||
font-family: 'IRANSansX';
|
||||
src: url('/fonts/iransansx/IRANSansX-Medium.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IRANSansX';
|
||||
src: url('/fonts/iransansx/IRANSansX-Bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@@ -165,13 +194,29 @@
|
||||
|
||||
body {
|
||||
@apply text-foreground antialiased;
|
||||
font-family: 'Vazirmatn', 'Shabnam', 'Tahoma', system-ui, sans-serif;
|
||||
background-color: #e6eef6;
|
||||
font-family: 'IRANSansX', 'Tahoma', system-ui, sans-serif;
|
||||
background-color: #f1f5f9;
|
||||
margin: 0;
|
||||
transition: var(--theme-transition);
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background-color: #070b14;
|
||||
background-color: #0f172a;
|
||||
}
|
||||
|
||||
/* Smooth theme toggling across surfaces */
|
||||
html,
|
||||
.app-mobile-shell,
|
||||
.app-header,
|
||||
.glass-panel,
|
||||
.glass-panel-strong,
|
||||
.glass-panel-chat,
|
||||
.composer-glass,
|
||||
.bubble-user,
|
||||
.bubble-ai,
|
||||
.progress-neon,
|
||||
.progress-neon-fill {
|
||||
transition: var(--theme-transition);
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -191,16 +236,15 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Desktop stage: soft wellness ambience (muted blue + soft teal) */
|
||||
/* Desktop stage: soft wellness ambience */
|
||||
.app-desktop-stage {
|
||||
@apply relative flex w-full flex-1 justify-center overflow-hidden;
|
||||
min-height: 0;
|
||||
background-color: #070b14;
|
||||
background-color: #0f172a;
|
||||
background-image:
|
||||
radial-gradient(ellipse 50% 40% at 16% 20%, rgba(56, 130, 200, 0.14), transparent 72%),
|
||||
radial-gradient(ellipse 45% 36% at 84% 16%, rgba(52, 168, 140, 0.12), transparent 70%),
|
||||
radial-gradient(ellipse 40% 30% at 72% 82%, rgba(64, 170, 180, 0.08), transparent 72%),
|
||||
radial-gradient(ellipse 55% 40% at 50% 108%, rgba(40, 90, 140, 0.08), transparent 65%);
|
||||
radial-gradient(ellipse 50% 40% at 16% 20%, rgba(14, 165, 233, 0.08), transparent 72%),
|
||||
radial-gradient(ellipse 45% 36% at 84% 16%, rgba(20, 184, 166, 0.06), transparent 70%),
|
||||
radial-gradient(ellipse 40% 30% at 72% 82%, rgba(51, 65, 85, 0.35), transparent 72%);
|
||||
}
|
||||
|
||||
.app-desktop-stage::before,
|
||||
@@ -211,7 +255,7 @@
|
||||
border-radius: 9999px;
|
||||
filter: blur(90px);
|
||||
z-index: 0;
|
||||
opacity: 0.55;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.app-desktop-stage::before {
|
||||
@@ -219,7 +263,7 @@
|
||||
height: min(40vw, 320px);
|
||||
top: -6%;
|
||||
left: 10%;
|
||||
background: rgba(56, 130, 200, 0.22);
|
||||
background: rgba(14, 165, 233, 0.14);
|
||||
}
|
||||
|
||||
.app-desktop-stage::after {
|
||||
@@ -227,22 +271,19 @@
|
||||
height: min(36vw, 280px);
|
||||
bottom: -4%;
|
||||
right: 8%;
|
||||
background: rgba(52, 168, 140, 0.2);
|
||||
background: rgba(20, 184, 166, 0.1);
|
||||
}
|
||||
|
||||
/* Front phone surface: clearer glass for readable content */
|
||||
/* Front phone surface: calm opaque shell for readable content */
|
||||
.app-mobile-shell {
|
||||
@apply relative z-10 flex w-full max-w-[430px] flex-1 flex-col overflow-hidden;
|
||||
min-height: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
background: rgba(9, 14, 26, 0.62);
|
||||
backdrop-filter: blur(32px) saturate(1.15);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(1.15);
|
||||
border: 1px solid rgba(90, 190, 210, 0.28);
|
||||
background: #0f172a;
|
||||
border: 1px solid rgb(51 65 85 / 0.55);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 0 0 1px rgba(70, 170, 160, 0.08),
|
||||
0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
0 1px 2px rgb(0 0 0 / 0.2),
|
||||
0 20px 50px rgb(0 0 0 / 0.35);
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
@@ -258,49 +299,45 @@
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: rgba(10, 15, 29, 0.55);
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
html.light .app-mobile-shell {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
|
||||
html.light .app-desktop-stage {
|
||||
background-color: #e6eef6;
|
||||
background-color: #e2e8f0;
|
||||
background-image:
|
||||
radial-gradient(ellipse 55% 45% at 14% 18%, rgba(56, 160, 230, 0.22), transparent 72%),
|
||||
radial-gradient(ellipse 50% 40% at 86% 14%, rgba(52, 184, 150, 0.18), transparent 70%),
|
||||
radial-gradient(ellipse 45% 35% at 70% 84%, rgba(64, 180, 210, 0.14), transparent 72%);
|
||||
radial-gradient(ellipse 50% 40% at 16% 20%, rgba(14, 165, 233, 0.1), transparent 72%),
|
||||
radial-gradient(ellipse 45% 36% at 84% 16%, rgba(20, 184, 166, 0.08), transparent 70%),
|
||||
radial-gradient(ellipse 55% 40% at 50% 108%, rgba(148, 163, 184, 0.2), transparent 65%);
|
||||
}
|
||||
|
||||
html.light .app-desktop-stage::before {
|
||||
background: rgba(56, 160, 230, 0.28);
|
||||
opacity: 0.7;
|
||||
background: rgba(14, 165, 233, 0.16);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
html.light .app-desktop-stage::after {
|
||||
background: rgba(52, 184, 150, 0.24);
|
||||
opacity: 0.65;
|
||||
background: rgba(20, 184, 166, 0.14);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
html.light .app-mobile-shell {
|
||||
background: rgba(255, 255, 255, 0.62);
|
||||
border-color: rgba(56, 160, 200, 0.28);
|
||||
background: #f8fafc;
|
||||
border-color: rgb(226 232 240 / 0.95);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
||||
0 0 0 1px rgba(56, 160, 200, 0.08),
|
||||
0 20px 50px rgba(47, 127, 212, 0.12);
|
||||
0 1px 2px rgb(15 23 42 / 0.04),
|
||||
0 20px 40px rgb(15 23 42 / 0.08);
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
@apply relative rounded-2xl backdrop-blur-xl;
|
||||
background: var(--glass-bg);
|
||||
border: 1px solid rgba(90, 200, 210, 0.38);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(70, 170, 160, 0.12),
|
||||
var(--glow-border),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||||
border: 1px solid rgb(226 232 240 / 0.9);
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
|
||||
/* Chat messages surface — high-intensity glass, no extra border */
|
||||
@@ -343,16 +380,12 @@
|
||||
}
|
||||
|
||||
/* Chat composer */
|
||||
/* Chat composer — single flat background (no nested input fill) */
|
||||
.composer-glass {
|
||||
@apply relative flex min-h-12 w-full items-end gap-2 rounded-2xl p-1.5;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
backdrop-filter: blur(28px) saturate(1.5);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(1.5);
|
||||
border: 1px solid rgb(47 127 212 / 0.2);
|
||||
box-shadow:
|
||||
0 8px 18px rgba(47, 127, 212, 0.12),
|
||||
0 6px 14px rgba(52, 184, 150, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
background: #ffffff;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
|
||||
}
|
||||
|
||||
.composer-glass textarea.input-neon {
|
||||
@@ -364,69 +397,94 @@
|
||||
}
|
||||
|
||||
.composer-glass:focus-within {
|
||||
border-color: rgb(38 212 202 / 0.55);
|
||||
box-shadow:
|
||||
0 12px 32px rgba(47, 127, 212, 0.22),
|
||||
0 0 0 1px rgba(56, 160, 230, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
0 0 0 1px rgb(38 212 202 / 0.3),
|
||||
0 3px 8px rgb(15 23 42 / 0.08);
|
||||
}
|
||||
|
||||
html.dark .composer-glass,
|
||||
html.dark .composer-glass:focus-within {
|
||||
background: rgba(12, 20, 36, 0.45);
|
||||
border-color: rgb(59 158 255 / 0.2);
|
||||
background: #1e293b;
|
||||
border-color: rgb(51 65 85 / 0.9);
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
html.dark .composer-glass:focus-within {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.45),
|
||||
0 3px 10px rgb(0 0 0 / 0.35),
|
||||
0 0 14px rgb(38 212 202 / 0.35),
|
||||
0 0 22px rgb(0 168 232 / 0.2);
|
||||
}
|
||||
|
||||
html.light .composer-glass,
|
||||
html.light .composer-glass:focus-within {
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
border-color: rgb(47 127 212 / 0.2);
|
||||
background: #ffffff;
|
||||
border-color: rgb(203 213 225 / 0.95);
|
||||
}
|
||||
|
||||
.composer-glass .input-neon {
|
||||
background: transparent;
|
||||
border: none;
|
||||
html.light .composer-glass:focus-within {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.28),
|
||||
0 3px 8px rgb(15 23 42 / 0.08),
|
||||
0 0 8px rgb(38 212 202 / 0.16);
|
||||
}
|
||||
|
||||
.composer-glass .input-neon,
|
||||
html.light .composer-glass .input-neon,
|
||||
html.dark .composer-glass .input-neon {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
color: hsl(var(--foreground));
|
||||
box-shadow: none;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.composer-glass .input-neon::placeholder {
|
||||
color: hsl(var(--muted-foreground));
|
||||
.composer-glass .input-neon::placeholder,
|
||||
html.light .composer-glass .input-neon::placeholder,
|
||||
html.dark .composer-glass .input-neon::placeholder {
|
||||
color: hsl(var(--muted-foreground) / 0.85);
|
||||
}
|
||||
|
||||
.composer-glass .input-neon:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html.light .composer-glass .input-neon::placeholder {
|
||||
color: hsl(var(--muted-foreground));
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.glass-panel-strong {
|
||||
@apply relative rounded-2xl backdrop-blur-2xl;
|
||||
@apply relative rounded-2xl backdrop-blur-md;
|
||||
background: var(--glass-bg-strong);
|
||||
border: 1px solid rgba(90, 200, 210, 0.45);
|
||||
border: 1px solid rgb(226 232 240 / 0.95);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(70, 170, 160, 0.14),
|
||||
var(--glow-border),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||||
0 8px 24px rgb(15 23 42 / 0.08),
|
||||
0 1px 2px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
|
||||
.neon-border {
|
||||
border: 1px solid transparent;
|
||||
background:
|
||||
linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
|
||||
linear-gradient(135deg, rgba(47, 127, 212, 0.65), rgba(43, 184, 201, 0.55), rgba(52, 184, 150, 0.55))
|
||||
border-box;
|
||||
box-shadow: var(--glow-border);
|
||||
border: 1px solid rgb(226 232 240);
|
||||
background: var(--glass-bg);
|
||||
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
|
||||
}
|
||||
|
||||
html.light .glass-panel,
|
||||
html.light .glass-panel-strong {
|
||||
border-color: rgba(47, 127, 212, 0.28);
|
||||
border-color: rgb(226 232 240 / 0.95);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(52, 184, 150, 0.08),
|
||||
var(--glow-border),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
0 1px 2px rgb(15 23 42 / 0.04),
|
||||
0 4px 12px rgb(15 23 42 / 0.03);
|
||||
}
|
||||
|
||||
html.dark .glass-panel,
|
||||
html.dark .glass-panel-strong {
|
||||
border-color: rgb(51 65 85 / 0.55);
|
||||
box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
html.dark .neon-border {
|
||||
border-color: rgb(51 65 85 / 0.55);
|
||||
background: var(--glass-bg);
|
||||
}
|
||||
|
||||
.neon-glow {
|
||||
@@ -441,63 +499,118 @@
|
||||
@apply relative inline-flex items-center justify-center rounded-xl px-4 py-2.5 text-sm font-semibold text-white transition-all duration-300;
|
||||
background: var(--gradient-neon);
|
||||
background-size: 160% 160%;
|
||||
box-shadow:
|
||||
0 0 18px rgba(0, 102, 255, 0.45),
|
||||
0 0 36px rgba(0, 255, 204, 0.2);
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.08), 0 2px 8px rgb(38 212 202 / 0.2);
|
||||
}
|
||||
|
||||
.btn-neon:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
box-shadow:
|
||||
0 0 24px rgba(0, 102, 255, 0.55),
|
||||
0 0 48px rgba(0, 255, 204, 0.28);
|
||||
filter: brightness(1.05);
|
||||
border-color: rgb(38 212 202 / 0.55);
|
||||
box-shadow: 0 3px 8px rgb(15 23 42 / 0.1), 0 4px 12px rgb(38 212 202 / 0.28);
|
||||
}
|
||||
|
||||
html.light .btn-neon {
|
||||
box-shadow:
|
||||
0 0 14px rgba(47, 127, 212, 0.28),
|
||||
0 0 28px rgba(52, 184, 150, 0.14);
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.06), 0 2px 8px rgb(38 212 202 / 0.16);
|
||||
}
|
||||
|
||||
html.light .btn-neon:hover:not(:disabled) {
|
||||
filter: brightness(1.04);
|
||||
box-shadow:
|
||||
0 0 18px rgba(47, 127, 212, 0.36),
|
||||
0 0 36px rgba(52, 184, 150, 0.18);
|
||||
border-color: rgb(38 212 202 / 0.5);
|
||||
box-shadow: 0 3px 8px rgb(15 23 42 / 0.08), 0 4px 12px rgb(38 212 202 / 0.22);
|
||||
}
|
||||
|
||||
/* Dark mode: logo teal/blue neon glow */
|
||||
html.dark .btn-neon {
|
||||
box-shadow:
|
||||
0 2px 6px rgb(0 0 0 / 0.35),
|
||||
0 0 12px rgb(38 212 202 / 0.45),
|
||||
0 0 28px rgb(0 168 232 / 0.25);
|
||||
}
|
||||
|
||||
html.dark .btn-neon:hover:not(:disabled) {
|
||||
filter: brightness(1.08);
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 3px 10px rgb(0 0 0 / 0.4),
|
||||
0 0 16px rgb(38 212 202 / 0.6),
|
||||
0 0 36px rgb(0 168 232 / 0.32);
|
||||
}
|
||||
|
||||
.btn-neon:focus,
|
||||
.btn-neon:focus-visible {
|
||||
outline: none;
|
||||
border-width: 1px;
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--navy),
|
||||
0 0 0 4px var(--neon-cyan),
|
||||
0 0 24px rgba(0, 210, 255, 0.5);
|
||||
0 0 0 1px rgb(38 212 202 / 0.35),
|
||||
0 3px 8px rgb(15 23 42 / 0.1),
|
||||
0 0 10px rgb(38 212 202 / 0.22);
|
||||
}
|
||||
|
||||
html.dark .btn-neon:focus,
|
||||
html.dark .btn-neon:focus-visible {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.5),
|
||||
0 3px 10px rgb(0 0 0 / 0.4),
|
||||
0 0 14px rgb(38 212 202 / 0.45),
|
||||
0 0 24px rgb(0 168 232 / 0.25);
|
||||
}
|
||||
|
||||
.btn-glass {
|
||||
@apply inline-flex items-center justify-center rounded-xl px-4 py-2.5 text-sm font-medium transition-all duration-300;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
border: 1px solid rgba(0, 210, 255, 0.35);
|
||||
background: rgb(241 245 249 / 0.9);
|
||||
border: 1px solid rgb(203 213 225 / 0.95);
|
||||
color: var(--body-text);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.05);
|
||||
}
|
||||
|
||||
.btn-glass:hover:not(:disabled) {
|
||||
border-color: rgba(0, 255, 204, 0.55);
|
||||
box-shadow: var(--glow-teal);
|
||||
border-color: rgb(38 212 202 / 0.5);
|
||||
background: rgb(248 250 252);
|
||||
color: hsl(var(--foreground));
|
||||
box-shadow: 0 3px 8px rgb(15 23 42 / 0.07);
|
||||
}
|
||||
|
||||
html.dark .btn-glass {
|
||||
background: rgb(30 41 59 / 0.85);
|
||||
border-color: rgb(38 212 202 / 0.28);
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
html.dark .btn-glass:hover:not(:disabled) {
|
||||
border-color: #26d4ca;
|
||||
background: rgb(51 65 85 / 0.75);
|
||||
box-shadow:
|
||||
0 3px 10px rgb(0 0 0 / 0.35),
|
||||
0 0 12px rgb(38 212 202 / 0.28),
|
||||
0 0 22px rgb(0 168 232 / 0.15);
|
||||
}
|
||||
|
||||
html.light .btn-glass {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: rgba(47, 127, 212, 0.28);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-color: rgb(203 213 225 / 0.95);
|
||||
}
|
||||
|
||||
.btn-glass:focus,
|
||||
.btn-glass:focus-visible {
|
||||
outline: none;
|
||||
border-width: 1px;
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--navy),
|
||||
0 0 0 4px var(--neon-cyan);
|
||||
0 0 0 1px rgb(38 212 202 / 0.3),
|
||||
0 3px 8px rgb(15 23 42 / 0.08),
|
||||
0 0 8px rgb(38 212 202 / 0.16);
|
||||
}
|
||||
|
||||
html.dark .btn-glass:focus,
|
||||
html.dark .btn-glass:focus-visible {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.45),
|
||||
0 3px 10px rgb(0 0 0 / 0.35),
|
||||
0 0 12px rgb(38 212 202 / 0.35),
|
||||
0 0 20px rgb(0 168 232 / 0.18);
|
||||
}
|
||||
|
||||
.btn-danger-neon {
|
||||
@@ -505,54 +618,95 @@
|
||||
background: rgba(127, 29, 29, 0.35);
|
||||
border: 1px solid rgba(248, 113, 113, 0.45);
|
||||
color: #fecaca;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
html.light .btn-danger-neon {
|
||||
background: rgba(254, 226, 226, 0.9);
|
||||
border-color: rgba(220, 38, 38, 0.35);
|
||||
color: #b91c1c;
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.05);
|
||||
}
|
||||
|
||||
.btn-danger-neon:hover:not(:disabled) {
|
||||
border-color: rgba(248, 113, 113, 0.75);
|
||||
box-shadow: 0 0 18px rgba(239, 68, 68, 0.35);
|
||||
box-shadow: 0 3px 8px rgb(0 0 0 / 0.25), 0 0 14px rgba(239, 68, 68, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html.light .btn-danger-neon:hover:not(:disabled) {
|
||||
color: #991b1b;
|
||||
background: rgba(254, 202, 202, 0.95);
|
||||
box-shadow: 0 3px 8px rgb(15 23 42 / 0.08);
|
||||
}
|
||||
|
||||
.btn-danger-neon:focus,
|
||||
.btn-danger-neon:focus-visible {
|
||||
outline: none;
|
||||
border-width: 1px;
|
||||
border-color: #f87171;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(248 113 113 / 0.4),
|
||||
0 3px 8px rgb(15 23 42 / 0.1);
|
||||
}
|
||||
|
||||
.input-neon {
|
||||
@apply flex h-11 w-full items-center rounded-xl px-3 py-0 text-sm leading-normal transition-all duration-300;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
border: 1px solid rgba(0, 210, 255, 0.28);
|
||||
@apply flex h-11 w-full items-center rounded-xl px-3 py-0 text-sm leading-relaxed transition-all duration-300;
|
||||
background: rgb(248 250 252);
|
||||
border: 1px solid rgb(203 213 225 / 0.9);
|
||||
color: hsl(var(--foreground));
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.05);
|
||||
}
|
||||
|
||||
.input-neon::placeholder {
|
||||
color: rgba(226, 232, 240, 0.45);
|
||||
color: hsl(var(--muted-foreground) / 0.8);
|
||||
}
|
||||
|
||||
html.dark .input-neon {
|
||||
background: rgb(30 41 59 / 0.9);
|
||||
border-color: rgb(71 85 105 / 0.75);
|
||||
box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
html.light .input-neon {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border-color: rgba(47, 127, 212, 0.28);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-color: rgb(203 213 225 / 0.95);
|
||||
color: hsl(var(--foreground));
|
||||
box-shadow: 0 2px 4px rgb(15 23 42 / 0.05);
|
||||
}
|
||||
|
||||
html.light .input-neon::placeholder {
|
||||
color: rgba(51, 65, 85, 0.45);
|
||||
color: hsl(var(--muted-foreground) / 0.8);
|
||||
}
|
||||
|
||||
.input-neon:focus,
|
||||
.input-neon:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--neon-cyan);
|
||||
border-width: 1px;
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px var(--neon-cyan),
|
||||
0 0 20px rgba(0, 210, 255, 0.35);
|
||||
0 0 0 1px rgb(38 212 202 / 0.35),
|
||||
0 3px 8px rgb(15 23 42 / 0.08),
|
||||
0 0 10px rgb(38 212 202 / 0.2);
|
||||
}
|
||||
|
||||
html.dark .input-neon:focus,
|
||||
html.dark .input-neon:focus-visible {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.45),
|
||||
0 3px 10px rgb(0 0 0 / 0.35),
|
||||
0 0 14px rgb(38 212 202 / 0.4),
|
||||
0 0 22px rgb(0 168 232 / 0.22);
|
||||
}
|
||||
|
||||
html.light .input-neon:focus,
|
||||
html.light .input-neon:focus-visible {
|
||||
border-color: #26d4ca;
|
||||
box-shadow:
|
||||
0 0 0 1px rgb(38 212 202 / 0.28),
|
||||
0 3px 8px rgb(15 23 42 / 0.08),
|
||||
0 0 8px rgb(38 212 202 / 0.16);
|
||||
}
|
||||
|
||||
.input-neon:disabled {
|
||||
@@ -561,20 +715,30 @@
|
||||
}
|
||||
|
||||
.progress-neon {
|
||||
@apply relative h-2 w-full overflow-hidden rounded-full;
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
border: 1px solid rgba(0, 210, 255, 0.2);
|
||||
@apply relative h-2.5 w-full overflow-hidden rounded-full;
|
||||
background: rgb(226 232 240 / 0.85);
|
||||
border: 1px solid rgb(203 213 225 / 0.6);
|
||||
}
|
||||
|
||||
html.light .progress-neon {
|
||||
background: rgba(15, 23, 42, 0.08);
|
||||
border-color: rgba(47, 127, 212, 0.2);
|
||||
background: rgb(241 245 249);
|
||||
border-color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
html.dark .progress-neon {
|
||||
background: rgb(30 41 59);
|
||||
border-color: rgb(51 65 85 / 0.7);
|
||||
}
|
||||
|
||||
.progress-neon-fill {
|
||||
@apply h-full rounded-full transition-all duration-300 ease-out;
|
||||
background: var(--gradient-neon);
|
||||
box-shadow: 0 0 12px rgba(0, 210, 255, 0.55);
|
||||
@apply h-full rounded-full transition-all duration-500 ease-out;
|
||||
background: linear-gradient(90deg, #26d4ca 0%, #00a8e8 100%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html.dark .progress-neon-fill {
|
||||
background: linear-gradient(90deg, #26d4ca 0%, #00a8e8 100%);
|
||||
box-shadow: 0 0 10px rgb(38 212 202 / 0.45);
|
||||
}
|
||||
|
||||
.ambient-glow {
|
||||
@@ -661,13 +825,13 @@
|
||||
box-shadow: 0 8px 24px rgba(47, 127, 212, 0.12);
|
||||
}
|
||||
|
||||
/* Readable cyan accents on light surfaces */
|
||||
/* Readable brand accents on light surfaces */
|
||||
html.light .text-neon-cyan {
|
||||
color: #0e7490;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
html.light .text-neon-teal {
|
||||
color: #0f766e;
|
||||
color: #0d9488;
|
||||
}
|
||||
|
||||
html.light .text-neon-emerald {
|
||||
@@ -723,19 +887,23 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* App chrome — only rendered when authenticated (not on login/signup). */
|
||||
/* App chrome — sticky top bar */
|
||||
.app-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
flex-shrink: 0;
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
backdrop-filter: blur(24px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.4);
|
||||
box-shadow: 0 8px 24px rgba(47, 127, 212, 0.08), 0 6px 16px rgba(52, 184, 150, 0.06);
|
||||
background: rgb(248 250 252 / 0.85);
|
||||
backdrop-filter: blur(16px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.2);
|
||||
border-bottom: 1px solid rgb(226 232 240 / 0.8);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html.dark .app-header {
|
||||
background: rgba(12, 20, 36, 0.42);
|
||||
background: rgb(15 23 42 / 0.88);
|
||||
border-bottom-color: rgb(51 65 85 / 0.55);
|
||||
}
|
||||
|
||||
/* Scrollable route area below header */
|
||||
@@ -748,6 +916,64 @@
|
||||
padding-top: env(safe-area-inset-top, 0px);
|
||||
}
|
||||
|
||||
.header-menu-panel {
|
||||
@apply absolute left-0 z-[70] mt-2 w-56 origin-top-left overflow-hidden rounded-2xl p-1.5;
|
||||
background: #ffffff;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
box-shadow:
|
||||
0 12px 32px rgb(15 23 42 / 0.18),
|
||||
0 1px 2px rgb(15 23 42 / 0.06);
|
||||
}
|
||||
|
||||
html.dark .header-menu-panel {
|
||||
background: #1e293b;
|
||||
border-color: rgb(51 65 85 / 0.9);
|
||||
box-shadow:
|
||||
0 12px 32px rgb(0 0 0 / 0.45),
|
||||
0 1px 2px rgb(0 0 0 / 0.25);
|
||||
}
|
||||
|
||||
.header-menu-identity {
|
||||
@apply mb-1 border-b border-slate-200 px-3 py-2.5 dark:border-slate-700/60;
|
||||
}
|
||||
|
||||
.header-menu-item {
|
||||
@apply flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm text-body transition-colors duration-200;
|
||||
}
|
||||
|
||||
.header-menu-item:hover,
|
||||
.header-menu-item:focus-visible {
|
||||
background: rgb(241 245 249);
|
||||
color: hsl(var(--foreground));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html.dark .header-menu-item:hover,
|
||||
html.dark .header-menu-item:focus-visible {
|
||||
background: rgb(51 65 85 / 0.65);
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.header-menu-item-danger {
|
||||
@apply text-red-600;
|
||||
}
|
||||
|
||||
.header-menu-item-danger:hover,
|
||||
.header-menu-item-danger:focus-visible {
|
||||
background: rgb(254 226 226 / 0.7);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
html.dark .header-menu-item-danger {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
html.dark .header-menu-item-danger:hover,
|
||||
html.dark .header-menu-item-danger:focus-visible {
|
||||
background: rgb(127 29 29 / 0.35);
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.ai-thinking-bubble {
|
||||
@apply rounded-2xl;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
@@ -769,18 +995,23 @@
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: #00d2ff;
|
||||
box-shadow: 0 0 8px rgba(0, 210, 255, 0.75), 0 0 14px rgba(0, 255, 204, 0.45);
|
||||
background: #26d4ca;
|
||||
box-shadow: 0 0 8px rgba(38, 212, 202, 0.55);
|
||||
animation: ai-dot-bounce 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
html.dark .ai-thinking-dot {
|
||||
box-shadow: 0 0 8px rgba(38, 212, 202, 0.75), 0 0 14px rgba(0, 168, 232, 0.4);
|
||||
}
|
||||
|
||||
.ai-thinking-dot:nth-child(2) {
|
||||
animation-delay: 0.16s;
|
||||
background: #00ffcc;
|
||||
background: #00a8e8;
|
||||
}
|
||||
|
||||
.ai-thinking-dot:nth-child(3) {
|
||||
animation-delay: 0.32s;
|
||||
background: #26d4ca;
|
||||
}
|
||||
|
||||
.ai-stream-cursor {
|
||||
@@ -790,13 +1021,17 @@
|
||||
margin-inline-start: 3px;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(180deg, #00d2ff 0%, #00ffcc 100%);
|
||||
box-shadow:
|
||||
0 0 8px rgba(0, 210, 255, 0.85),
|
||||
0 0 16px rgba(0, 255, 204, 0.55);
|
||||
background: linear-gradient(180deg, #26d4ca 0%, #00a8e8 100%);
|
||||
box-shadow: none;
|
||||
animation: ai-cursor-blink 0.95s step-end infinite;
|
||||
}
|
||||
|
||||
html.dark .ai-stream-cursor {
|
||||
box-shadow:
|
||||
0 0 8px rgba(38, 212, 202, 0.75),
|
||||
0 0 14px rgba(0, 168, 232, 0.45);
|
||||
}
|
||||
|
||||
@keyframes ai-dot-bounce {
|
||||
0%,
|
||||
80%,
|
||||
|
||||
Reference in New Issue
Block a user