Initial commit
This commit is contained in:
255
src/index.css
Normal file
255
src/index.css
Normal file
@@ -0,0 +1,255 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* KROW Official Brand Colors */
|
||||
/* Primary: KROW Blue #0A39DF (Pantone 286CP) */
|
||||
/* Accent: KROW Yellow #F9E547 (Pantone 106CP) */
|
||||
/* Pale Yellow: #F8E08E (Pantone 1205CP) */
|
||||
/* Dark Navy: #333F48 (Pantone 432CP) */
|
||||
/* Mint: #D1E0D7 (Pantone 621CP) */
|
||||
|
||||
--background: 150 10% 96%;
|
||||
--foreground: 210 17% 24%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 210 17% 24%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 210 17% 24%;
|
||||
--primary: 229 89% 45%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 224 89% 96%;
|
||||
--secondary-foreground: 224 89% 30%;
|
||||
--muted: 150 10% 93%;
|
||||
--muted-foreground: 210 10% 46%;
|
||||
--accent: 224 89% 94%;
|
||||
--accent-foreground: 224 89% 25%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 150 8% 87%;
|
||||
--input: 150 8% 87%;
|
||||
--ring: 229 89% 45%;
|
||||
--chart-1: 229 89% 45%;
|
||||
--chart-2: 52 91% 63%;
|
||||
--chart-3: 210 17% 24%;
|
||||
--chart-4: 42 73% 74%;
|
||||
--chart-5: 150 16% 84%;
|
||||
--radius: 0.75rem;
|
||||
--font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
|
||||
/* ── Design system tokens ───────────────────────────────────────────
|
||||
Everything below is consumed through Tailwind (see tailwind.config.js)
|
||||
rather than referenced as raw CSS in components. */
|
||||
|
||||
/* Semantic status — used by StatusBadge, Alert, KpiCard trends */
|
||||
--success: 142 71% 36%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
--success-muted: 142 60% 95%;
|
||||
--warning: 32 95% 44%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
--warning-muted: 40 96% 94%;
|
||||
--info: 229 89% 45%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
--info-muted: 224 89% 96%;
|
||||
--neutral: 210 17% 24%;
|
||||
--neutral-foreground: 0 0% 100%;
|
||||
--neutral-muted: 210 12% 94%;
|
||||
--destructive-muted: 0 86% 97%;
|
||||
|
||||
/* Ink scale — the text hierarchy every component uses */
|
||||
--ink-1: 222 47% 11%; /* headings */
|
||||
--ink-2: 215 25% 27%; /* body */
|
||||
--ink-3: 220 9% 46%; /* secondary */
|
||||
--ink-4: 220 9% 64%; /* placeholder / meta */
|
||||
|
||||
/* Surfaces */
|
||||
--surface: 0 0% 100%;
|
||||
--surface-subtle: 210 20% 98%;
|
||||
--surface-sunken: 220 14% 96%;
|
||||
|
||||
/* Elevation — a 4-step scale, tinted with brand blue not neutral black */
|
||||
--shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.04);
|
||||
--shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.06), 0 1px 2px -1px rgb(16 24 40 / 0.04);
|
||||
--shadow-md: 0 4px 12px -2px rgb(16 24 40 / 0.08), 0 2px 4px -2px rgb(16 24 40 / 0.04);
|
||||
--shadow-lg: 0 12px 28px -6px rgb(16 24 40 / 0.12), 0 4px 10px -4px rgb(16 24 40 / 0.06);
|
||||
--shadow-xl: 0 24px 56px -12px rgb(16 24 40 / 0.18), 0 8px 20px -8px rgb(16 24 40 / 0.08);
|
||||
--shadow-brand: 0 10px 30px -6px rgb(10 57 223 / 0.24), 0 2px 6px -2px rgb(51 63 72 / 0.08);
|
||||
--shadow-panel: 0 24px 64px -12px rgb(9 12 24 / 0.45), 0 8px 24px -8px rgb(9 12 24 / 0.30);
|
||||
|
||||
/* Motion — one easing vocabulary across the app */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--duration-fast: 120ms;
|
||||
--duration-base: 200ms;
|
||||
--duration-slow: 320ms;
|
||||
|
||||
/* Layout — the single container width every page shares */
|
||||
--container-max: 80rem; /* 1280px — the dashboard's own measure */
|
||||
--container-wide: 108rem; /* 1728px — the shell, sized to fit the 380px
|
||||
assistant column beside a full-width dashboard */
|
||||
--page-gutter: 1.5rem;
|
||||
|
||||
/* Owliver assistant panel — the one dark surface in the system */
|
||||
--panel: 222 47% 9%;
|
||||
--panel-raised: 222 40% 14%;
|
||||
--panel-border: 222 30% 22%;
|
||||
--panel-foreground: 210 20% 96%;
|
||||
--panel-muted: 217 15% 62%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground font-body;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
backdrop-filter: blur(24px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(180%);
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
backdrop-filter: blur(20px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
||||
}
|
||||
.gradient-mesh {
|
||||
background-image:
|
||||
radial-gradient(at 15% 15%, rgba(10, 57, 223, 0.07) 0px, transparent 50%),
|
||||
radial-gradient(at 85% 5%, rgba(249, 229, 71, 0.12) 0px, transparent 50%),
|
||||
radial-gradient(at 75% 85%, rgba(10, 57, 223, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 10% 90%, rgba(209, 224, 215, 0.20) 0px, transparent 50%);
|
||||
}
|
||||
.gradient-text {
|
||||
color: #0A39DF;
|
||||
}
|
||||
.glow-blue {
|
||||
box-shadow: 0 0 40px rgba(10, 57, 223, 0.15);
|
||||
}
|
||||
.glow-yellow {
|
||||
box-shadow: 0 0 40px rgba(249, 229, 71, 0.30);
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
/* The dark Owliver panel surface. Kept as a utility so the one AI component
|
||||
can never drift from the token. */
|
||||
.panel-surface {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 40%),
|
||||
hsl(var(--panel));
|
||||
backdrop-filter: blur(24px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
||||
}
|
||||
|
||||
/* Scrollbar for dark surfaces — the default is invisible against the panel. */
|
||||
.panel-scroll::-webkit-scrollbar { width: 6px; }
|
||||
.panel-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.panel-scroll::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--panel-border));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.panel-scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--panel-muted)); }
|
||||
|
||||
/* Standard focus treatment. Applied by DS components so keyboard focus is
|
||||
identical everywhere and never relies on the browser default. */
|
||||
.focus-ring {
|
||||
@apply outline-none ring-offset-2 ring-offset-background
|
||||
focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
|
||||
}
|
||||
.focus-ring-inset {
|
||||
@apply outline-none focus-visible:ring-2 focus-visible:ring-[#0A39DF]/60;
|
||||
}
|
||||
|
||||
/* Skeleton shimmer — a moving highlight reads as loading far better than a
|
||||
pulsing block, especially on the glass surfaces. */
|
||||
.shimmer {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.65) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.6s var(--ease-in-out) infinite;
|
||||
}
|
||||
|
||||
/* Text truncation past one line — Tailwind has line-clamp, this keeps the
|
||||
DS API consistent with `truncate`. */
|
||||
.truncate-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
/* Respect reduced-motion globally rather than per component. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user