/* Typography */ @import "@fontsource-variable/noto-sans"; @import "@fontsource/jetbrains-mono/400.css"; @import "@fontsource/jetbrains-mono/500.css"; @import "@fontsource/jetbrains-mono/700.css"; @import "tailwindcss"; @plugin "@tailwindcss/typography"; @import "tw-animate-css"; @import "shadcn/tailwind.css"; @import "./launch-ui.css"; /* Base font size - increase for larger UI (default is 16px) */ html { position: relative; font-size: 18px; scroll-padding-top: 5rem; scrollbar-gutter: stable; /* Guard against horizontal overflow from full-bleed decorative glows/orbs. `clip` (not `hidden`) avoids creating a scroll container, so sticky/fixed positioning and 100vh keep working. Body uses `clip` too — `hidden` there forces overflow-y to `auto`, adding a second vertical scrollbar. */ overflow-x: clip; } body { position: relative; /* `clip` (not `hidden`) hides horizontal overflow without forcing the * computed overflow-y to `auto`, which would turn into a second * vertical scroll container on top of (→ two scrollbars). */ overflow-x: clip; } @custom-variant dark (&:is(.dark *)); /* Theme: Refined Depth (dark) / Light Glass (light) */ /* Primary: Teal, Secondary Accent: Magenta — single interactive accent, semantic colors reserved for status, glass applied selectively (.glass) */ /* Typography: Noto Sans (body + display), JetBrains Mono (code/data) */ :root { /* ============================================ CUSTOMIZE YOUR BRAND - Edit these values ============================================ */ --primary: oklch(0.52 0.124 192); /* Brand primary (deep teal, AA on light surfaces) */ --primary-dim: oklch(0.42 0.1 192); /* Dimmed variant */ --primary-foreground: oklch(0.99 0.005 192); --secondary-accent: oklch(0.47 0.2 350); /* Brand accent (magenta) */ --secondary-accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.5 0.21 3.958); --info: var(--primary); --warning: oklch(0.62 0.13 75); --success: oklch(0.5 0.12 181); --radius: 0.625rem; /* Border radius base */ --radius-card: var(--radius-xl); /* Cards, dialogs, panels */ /* Glow effects (derived from brand colors) */ --glow-primary: oklch(0.52 0.124 192 / 0.12); --glow-accent: oklch(0.47 0.2 350 / 0.1); /* Canvas - flat pale cool + faint ambient wash. Keep both gradient stops on --canvas: the translucent sidebar floats over the body canvas, and any vertical gradient shows up as a luminance step at the sidebar seam. */ --canvas: oklch(0.985 0.005 220); --gradient-start: var(--canvas); --gradient-end: var(--canvas); --canvas-wash: oklch(0.52 0.124 192 / 0.05); /* ============================================ SURFACE COLORS - Rarely need customization ============================================ */ /* Transparent background to show canvas (both modes) */ --background: transparent; --foreground: oklch(0.17 0.025 250); /* Standard cards - quiet near-opaque surfaces (glass is opt-in via .glass) */ --card: oklch(0.995 0.004 210 / 0.92); --card-foreground: oklch(0.17 0.025 250); /* Glass surfaces - alpha gradient. No white edge-light in light mode (a white highlight is invisible on the near-white canvas); the top edge uses the same hairline as the other three. */ --glass-from: oklch(1 0 0 / 0.78); --glass-to: oklch(0.97 0.01 215 / 0.58); --glass-edge: oklch(0.45 0.03 230 / 0.22); /* Popovers/dropdowns - SOLID (float over arbitrary content) */ --popover: oklch(0.99 0.004 210); --popover-foreground: oklch(0.17 0.025 250); --secondary: oklch(0.93 0.012 220 / 0.8); --secondary-foreground: oklch(0.25 0.025 245); --muted: oklch(0.94 0.01 220 / 0.7); --muted-foreground: oklch(0.44 0.025 240); /* Accent - subtle primary tint for hover states */ --accent: oklch(0.52 0.124 192 / 0.1); --accent-foreground: oklch(0.3 0.08 192); /* Hairline borders - strong enough to survive the flat canvas (card fill and canvas are near-identical whites; the hairline is the only edge) */ --border: oklch(0.45 0.03 230 / 0.22); --input: oklch(0.5 0.03 230 / 0.3); --ring: var(--primary); /* Elevation shadows - tight and close; big bottom-biased blurs read as detached blobs in the gaps between cards on the flat canvas */ --shadow-card: 0 1px 2px oklch(0.3 0.04 240 / 0.06), 0 6px 20px -8px oklch(0.3 0.05 240 / 0.1); --shadow-pop: 0 4px 12px oklch(0.3 0.04 240 / 0.08), 0 16px 40px -12px oklch(0.3 0.05 240 / 0.18); /* Chart colors - brand pair first, then supporting hues */ --chart-1: var(--primary); --chart-2: var(--secondary-accent); --chart-3: oklch(0.5 0.17 275); --chart-4: oklch(0.62 0.13 75); --chart-5: oklch(0.54 0.11 155); /* Sidebar - light glass rail */ --sidebar: oklch(0.975 0.007 212 / 0.55); --sidebar-foreground: oklch(0.22 0.025 248); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: oklch(0.52 0.124 192 / 0.12); --sidebar-accent-foreground: oklch(0.3 0.08 192); --sidebar-border: oklch(0.45 0.03 230 / 0.12); --sidebar-ring: var(--primary); } .dark { /* Primary - bright teal on dark, brighter dim variant */ --primary: oklch(0.82 0.14 192); --primary-dim: oklch(0.65 0.12 192); --primary-foreground: oklch(0.1 0.02 220); /* Secondary accent (magenta) - brighter in dark mode */ --secondary-accent: oklch(0.65 0.26 350); --secondary-accent-foreground: oklch(0.99 0 0); /* Glow colors - restrained, focal points only */ --glow-primary: oklch(0.82 0.14 192 / 0.28); --glow-accent: oklch(0.65 0.26 350 / 0.25); /* Canvas - pure black + faint ambient wash */ --canvas: oklch(0 0 0); --gradient-start: var(--canvas); --gradient-end: var(--canvas); --canvas-wash: oklch(0.82 0.14 192 / 0.09); /* Transparent background to show canvas */ --background: transparent; --foreground: oklch(0.96 0.005 210); /* Standard cards - quiet near-opaque surfaces */ --card: oklch(0.19 0.024 242 / 0.78); --card-foreground: oklch(0.96 0.005 210); /* Glass surfaces - alpha gradient, light source top-left */ --glass-from: oklch(0.25 0.028 238 / 0.6); --glass-to: oklch(0.16 0.022 246 / 0.45); --glass-edge: oklch(1 0 0 / 0.1); /* Popovers/dropdowns - SOLID, cool-tinted to match canvas */ --popover: oklch(0.175 0.022 242); --popover-foreground: oklch(0.97 0 0); --secondary: oklch(0.25 0.02 240); --secondary-foreground: oklch(0.92 0.008 220); --muted: oklch(0.2 0.02 240 / 0.7); --muted-foreground: oklch(0.71 0.02 228); /* Accent - subtle primary tint for hover states */ --accent: oklch(0.82 0.14 192 / 0.13); --accent-foreground: oklch(0.96 0.005 210); /* Status - lifted for dark-bg contrast */ --destructive: oklch(0.62 0.21 3.958); --info: var(--primary); --warning: oklch(0.77 0.188 70.08); --success: oklch(0.704 0.14 181); /* Hairline borders - faint teal. 12% was invisible against the flat black canvas (card fill and canvas differ by almost nothing); 20% reads as a crisp hairline without becoming an outline. */ --border: oklch(0.9 0.03 200 / 0.2); --input: oklch(1 0 0 / 0.12); --ring: var(--primary); /* Elevation shadows - inner top edge-light + deep soft drop */ --shadow-card: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 8px 24px -12px oklch(0 0 0 / 0.5); --shadow-pop: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 16px 48px -16px oklch(0 0 0 / 0.65); /* Chart colors - brand pair first, then supporting hues */ --chart-1: var(--primary); --chart-2: var(--secondary-accent); --chart-3: oklch(0.72 0.15 275); --chart-4: oklch(0.8 0.15 80); --chart-5: oklch(0.76 0.12 155); /* Sidebar - transparent rail, canvas shows through */ --sidebar: transparent; --sidebar-foreground: oklch(0.96 0.005 210); --sidebar-primary: var(--primary); --sidebar-primary-foreground: oklch(0.1 0.02 220); --sidebar-accent: oklch(0.82 0.14 192 / 0.13); --sidebar-accent-foreground: oklch(0.96 0.005 210); --sidebar-border: oklch(0.9 0.03 200 / 0.08); --sidebar-ring: var(--primary); } @theme inline { /* Typography */ --font-sans: "Noto Sans Variable", "Noto Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Display slot kept as an extension point; defaults to the body sans face. */ --font-display: var(--font-sans); /* Elevation shadows (values cascade from :root/.dark) */ --shadow-card: var(--shadow-card); --shadow-pop: var(--shadow-pop); /* Extended primary colors */ --color-primary-dim: var(--primary-dim); --color-glow-primary: var(--glow-primary); --color-glow-accent: var(--glow-accent); --color-secondary-accent: var(--secondary-accent); --color-secondary-accent-foreground: var(--secondary-accent-foreground); /* Gradient colors for body background */ --color-canvas: var(--canvas); --color-gradient-start: var(--gradient-start); --color-gradient-end: var(--gradient-end); /* Standard color mappings */ --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-info: var(--info); --color-warning: var(--warning); --color-success: var(--success); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); } @layer base { * { @apply border-border outline-ring/50; } body { @apply font-sans bg-background text-foreground antialiased cursor-default; } /* Canvas: gradient + faint ambient wash (the "light" glass surfaces catch). Both modes — --background is transparent so this shows through. */ body { background: radial-gradient(120% 80% at 75% -20%, var(--canvas-wash), transparent 55%), linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%); background-attachment: fixed; } html { @apply font-sans; } /* Headlines: refined weights + balanced wrapping (display slot = body sans) */ h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } h3, h4 { font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } } /* Input background with color-mix for maia style */ @supports (color: color-mix(in lab, red, red)) { input, textarea, select, [data-slot="input"] { background-color: color-mix(in oklab, var(--input) 30%, transparent); } } /* ============================================ EFFECTS SYSTEM ============================================ */ /* Glass surface — the ONLY glass treatment; applied selectively (KPI strip, sidebar rail, marketing hero panels). Alpha gradient mimics a top-left light source; border-top catches the light. */ .glass { background: linear-gradient(135deg, var(--glass-from), var(--glass-to)); backdrop-filter: blur(14px); border: 1px solid var(--border); border-top-color: var(--glass-edge); box-shadow: var(--shadow-card); } /* Active nav — teal icon, the sidebar's single focal accent */ [data-sidebar="menu-button"][data-active] svg { color: var(--primary); filter: drop-shadow(0 0 6px var(--glow-primary)); } /* Glow utilities — restrained radii; reserved for focal points (active nav, primary CTA, brand marks). Do not add new consumers. */ .glow-teal { box-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary); } .glow-magenta { box-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent); } .glow-teal-subtle { box-shadow: 0 0 10px var(--glow-primary); } .glow-magenta-subtle { box-shadow: 0 0 10px var(--glow-accent); } /* Text glow */ .text-glow-teal { text-shadow: 0 0 12px var(--glow-primary), 0 0 28px var(--glow-primary); } .text-glow-magenta { text-shadow: 0 0 12px var(--glow-accent), 0 0 28px var(--glow-accent); } /* Border glow on hover */ .border-glow-teal { transition: box-shadow 0.3s ease; } .border-glow-teal:hover { box-shadow: 0 0 0 1px var(--primary), 0 0 10px var(--glow-primary); } .border-glow-magenta:hover { box-shadow: 0 0 0 1px var(--secondary-accent), 0 0 10px var(--glow-accent); } /* Sparkle shimmer for premium badges */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .badge-shimmer { background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .badge-shimmer { animation: none; } } /* Marquee for LogoStrip */ @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee-scroll 30s linear infinite; will-change: transform; } .marquee-track:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Ambient orb pulse for Hero */ @keyframes orb-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.04); } } .hero-orb { animation: orb-pulse 6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } } /* Spotlight particle dots for glass containers (dark mode only — white dots read as noise on light surfaces) */ .dark .spotlight-particles { background-image: radial-gradient(circle, oklch(1 0 0 / 0.5) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, black 0%, transparent 80%); } /* ============================================ PROSE OVERRIDES — dark glassmorphic theme ============================================ */ .dark :where(.prose) { /* Headings */ :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: oklch(0.98 0 0); font-size: 1.5em; border-bottom: 1px solid oklch(0.33 0.025 195 / 0.5); padding-bottom: 0.4em; margin-top: 2em; } :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: oklch(0.88 0.06 192); } /* Strong */ :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: oklch(0.98 0 0); } /* Links */ :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { color: oklch(0.9 0.14 192); } /* Heading autolinks (rehype-autolink-headings) */ :where(h1, h2, h3, h4, h5, h6) :where(a) { color: inherit; text-decoration: none; } /* Lists */ :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: disc; padding-left: 1.5em; } :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; padding-left: 1.5em; } /* Code blocks */ :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: oklch(0.15 0.015 260 / 0.8); border: 1px solid oklch(0.33 0.025 195 / 0.5); border-radius: var(--radius-lg); } /* Inline code */ :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) { color: oklch(0.82 0.14 192); background-color: oklch(0.18 0.02 260); padding: 0.15em 0.4em; border-radius: 0.25em; font-size: 0.875em; } :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::before, :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *))::after { content: none; } /* Tables */ :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { width: 100%; border-collapse: collapse; } :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: oklch(0.98 0 0); background-color: oklch(0.18 0.02 260 / 0.6); padding: 0.6em 1em; border-bottom: 2px solid oklch(0.33 0.025 195 / 0.6); text-align: left; } :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding: 0.6em 1em; border-bottom: 1px solid oklch(0.33 0.025 195 / 0.3); } :where(tr):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover { background-color: oklch(0.20 0.02 260 / 0.3); } } /* ============================================ REDUCED TRANSPARENCY - solidify glass surfaces ============================================ */ @media (prefers-reduced-transparency: reduce) { :root { --card: oklch(0.99 0.004 210); --sidebar: oklch(0.975 0.007 212); --glass-from: oklch(0.99 0.004 210); --glass-to: oklch(0.97 0.008 212); } .dark { --card: oklch(0.19 0.024 242); --sidebar: oklch(0.13 0.02 245); --glass-from: oklch(0.21 0.024 242); --glass-to: oklch(0.17 0.022 244); } .glass, [data-slot="sidebar-inner"] { backdrop-filter: none; } }