396 lines
10 KiB
CSS
396 lines
10 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* ── Core Palette ─────────────────────────────── */
|
|
--background: 0 0% 0%;
|
|
/* #000000 */
|
|
--surface: 220 12% 9%;
|
|
/* #131418 */
|
|
--surface-2: 220 10% 12%;
|
|
/* #181b20 */
|
|
--surface-3: 220 9% 16%;
|
|
/* #22262e */
|
|
|
|
--foreground: 0 0% 96%;
|
|
--muted-fg: 220 8% 55%;
|
|
--subtle-fg: 220 6% 35%;
|
|
|
|
/* ── Accent: Blue ──────────────────────────────── */
|
|
--accent: 217 91% 60%;
|
|
/* #3b82f6 */
|
|
--accent-dim: 217 70% 45%;
|
|
--accent-fg: 0 0% 100%;
|
|
/* white text on blue */
|
|
|
|
/* ── Semantic ─────────────────────────────────── */
|
|
--success: 142 71% 45%;
|
|
--warning: 38 92% 50%;
|
|
--danger: 0 84% 60%;
|
|
--info: 199 89% 48%;
|
|
|
|
/* ── Borders ──────────────────────────────────── */
|
|
--border: 220 12% 18%;
|
|
--border-subtle: 220 10% 13%;
|
|
|
|
/* ── Radius ───────────────────────────────────── */
|
|
--radius: 0.875rem;
|
|
|
|
/* ── Shadows ──────────────────────────────────── */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
|
|
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7);
|
|
|
|
/* ── Sidebar ──────────────────────────────────── */
|
|
--sidebar-background: 220 14% 7%;
|
|
--sidebar-foreground: 0 0% 90%;
|
|
--sidebar-primary: 217 91% 60%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 10% 12%;
|
|
--sidebar-accent-foreground: 0 0% 98%;
|
|
--sidebar-border: 220 12% 14%;
|
|
--sidebar-ring: 217 91% 60%;
|
|
|
|
/* ── Legacy compat ────────────────────────────── */
|
|
--card: 220 12% 9%;
|
|
--card-foreground: 0 0% 96%;
|
|
--popover: 220 12% 9%;
|
|
--popover-foreground: 0 0% 96%;
|
|
--primary: 217 91% 60%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 10% 14%;
|
|
--secondary-foreground: 0 0% 90%;
|
|
--muted: 220 10% 14%;
|
|
--muted-foreground: 220 8% 55%;
|
|
--input: 220 10% 14%;
|
|
--ring: 82 95% 59%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
@apply border-border box-border;
|
|
}
|
|
|
|
html {
|
|
@apply antialiased;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
}
|
|
|
|
body {
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
letter-spacing: -0.011em;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
letter-spacing: -0.025em;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
|
|
/* ── Surface Cards ─────────────────────────────── */
|
|
.card {
|
|
background-color: hsl(var(--surface));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.card-2 {
|
|
background-color: hsl(var(--surface-2));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
/* ── Legacy glass (kept for compat) ───────────── */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.04);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(12, 13, 16, 0.85);
|
|
backdrop-filter: blur(32px);
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.glass-panel {
|
|
background: hsl(var(--surface));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.glass-card {
|
|
background: hsl(var(--surface));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ── Accent Utilities ──────────────────────────── */
|
|
.accent-text {
|
|
color: hsl(var(--accent));
|
|
}
|
|
|
|
.accent-bg {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-fg));
|
|
}
|
|
|
|
.accent-border {
|
|
border-color: hsl(var(--accent) / 0.35);
|
|
}
|
|
|
|
.accent-surface {
|
|
background-color: hsl(var(--accent) / 0.1);
|
|
border: 1px solid hsl(var(--accent) / 0.2);
|
|
color: hsl(var(--accent));
|
|
}
|
|
|
|
/* ── Gradient Text ─────────────────────────────── */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--info)));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ── Glow Effects ──────────────────────────────── */
|
|
.glow-accent {
|
|
box-shadow: 0 0 32px hsl(var(--accent) / 0.25);
|
|
}
|
|
|
|
.glow-blue {
|
|
box-shadow: 0 0 32px rgba(59, 130, 246, 0.25);
|
|
}
|
|
|
|
.glow-green {
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
|
|
}
|
|
|
|
.glow-amber {
|
|
box-shadow: 0 0 32px rgba(245, 158, 11, 0.25);
|
|
}
|
|
|
|
/* ── Stat Number ───────────────────────────────── */
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: hsl(var(--muted-fg));
|
|
}
|
|
|
|
/* ── Tag / Pill ────────────────────────────────── */
|
|
.tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
background: hsl(var(--surface-3));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
color: hsl(var(--muted-fg));
|
|
}
|
|
|
|
/* ── Status Dot Pulse ──────────────────────────── */
|
|
.status-pulse {
|
|
animation: status-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Scrollbar ─────────────────────────────────── */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-fg));
|
|
}
|
|
|
|
/* ── Shimmer ───────────────────────────────────── */
|
|
.shimmer {
|
|
background: linear-gradient(90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.06) 50%,
|
|
rgba(255, 255, 255, 0) 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
/* ── Chat Bubbles ──────────────────────────────── */
|
|
.chat-bubble-user {
|
|
background: hsl(var(--surface-3));
|
|
border-radius: 1rem 1rem 0.25rem 1rem;
|
|
padding: 0.75rem 1rem;
|
|
max-width: 80%;
|
|
}
|
|
|
|
.chat-bubble-ai {
|
|
background: hsl(var(--accent) / 0.08);
|
|
border: 1px solid hsl(var(--accent) / 0.15);
|
|
border-radius: 1rem 1rem 1rem 0.25rem;
|
|
padding: 0.75rem 1rem;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* ── Sentiment Pills ───────────────────────────── */
|
|
.sentiment-pill {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sentiment-excited {
|
|
background: hsl(142 71% 45% / 0.15);
|
|
color: hsl(142 71% 65%);
|
|
border: 1px solid hsl(142 71% 45% / 0.25);
|
|
}
|
|
|
|
.sentiment-confused {
|
|
background: hsl(38 92% 50% / 0.15);
|
|
color: hsl(38 92% 65%);
|
|
border: 1px solid hsl(38 92% 50% / 0.25);
|
|
}
|
|
|
|
.sentiment-neutral {
|
|
background: hsl(var(--surface-3));
|
|
color: hsl(var(--muted-fg));
|
|
border: 1px solid hsl(var(--border-subtle));
|
|
}
|
|
|
|
/* ── Bento Grid ────────────────────────────────── */
|
|
.bento-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* ── FaceID ────────────────────────────────────── */
|
|
.faceid-ring {
|
|
animation: faceid-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* ── Skeleton ──────────────────────────────────── */
|
|
.skeleton-pulse {
|
|
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
/* ── Keyframes ─────────────────────────────────────── */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes status-pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.6;
|
|
transform: scale(1.15);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes scan-line {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes faceid-pulse {
|
|
0% {
|
|
transform: scale(0.95);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.95);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes skeleton-pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
} |