/*
* KoraSafe Design System
* Single source of truth for typography, colors, spacing, and effects.
* Every page and the app import this file. Nothing is defined elsewhere.
*
* Usage:
* Website pages:
* App: imported via app.html
* Admin pages: imported via admin-shared.css @import
* Components: JS reads from window.KORASAFE_DS or CSS variables
*/
/* ═══════════════════════════════════════════════════════════════════════
1. FONTS
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Single font family stack — Inter for both display and body. Geist was
introduced briefly for the home refresh and rolled back per design call:
the rest of the site uses Inter and we want it consistent. */
--ds-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ds-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--ds-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ═══════════════════════════════════════════════════════════════════════
2. TYPE SCALE
Sizes, weights, line heights, and letter spacing for every level.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Type scale — Glean-inspired. Lighter weights, tighter tracking, more
breathing room. Owns every heading size/weight/leading/tracking value
used on the site. Pages MUST NOT hardcode font-family, font-weight,
letter-spacing, or line-height on headings; reference the token. */
/* Title — page hero banners only */
--ds-title-size: 3.25rem;
--ds-title-weight: 600;
--ds-title-leading: 1.1;
--ds-title-tracking: -0.03em;
/* H1 — section headings */
--ds-h1-size: 2.25rem;
--ds-h1-weight: 500;
--ds-h1-leading: 1.15;
--ds-h1-tracking: -0.025em;
/* H2 — sub-section headings */
--ds-h2-size: 1.5rem;
--ds-h2-weight: 500;
--ds-h2-leading: 1.25;
--ds-h2-tracking: -0.02em;
/* H3 — card titles, list headings */
--ds-h3-size: 1.125rem;
--ds-h3-weight: 500;
--ds-h3-leading: 1.35;
--ds-h3-tracking: -0.015em;
/* H4 — labels, badges, overlines */
--ds-h4-size: 0.875rem;
--ds-h4-weight: 600;
--ds-h4-leading: 1.4;
--ds-h4-tracking: -0.005em;
/* Body */
--ds-body-size: 1rem;
--ds-body-weight: 400;
--ds-body-leading: 1.6;
/* Small */
--ds-small-size: 0.875rem;
--ds-small-weight: 400;
--ds-small-leading: 1.5;
/* Caption */
--ds-caption-size: 0.75rem;
--ds-caption-weight: 500;
--ds-caption-leading: 1.4;
--ds-caption-tracking: 0.02em;
/* Overline — section labels, badges */
--ds-overline-size: 0.6875rem;
--ds-overline-weight: 700;
--ds-overline-leading: 1.2;
--ds-overline-tracking: 0.08em;
}
/* ═══════════════════════════════════════════════════════════════════════
3. COLORS
Text colors NEVER change between themes — only backgrounds do.
This means text must read well on both dark and light backgrounds.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Backgrounds — these change with theme */
--ds-bg: #09122b;
--ds-bg-card: #111827;
--ds-bg-hover: #1f2937;
--ds-bg-elevated: #0b1838;
/* Text — changes with theme for contrast. Only 3 levels. */
--ds-text: #f3f4f6; /* primary: headings, body, card titles */
--ds-text-muted: #9ca3af; /* secondary: subtitles, descriptions */
--ds-text-dim: #6b7280; /* tertiary: captions, metadata, timestamps */
/* Borders */
--ds-border: rgba(148, 163, 184, 0.28);
--ds-border-strong: rgba(148, 163, 184, 0.4);
/* Accent — shared gradient, indigo → violet → purple.
Stays inside the KoraSafe logo family (indigo/violet) but adds a
lighter purple end stop for visible motion. Same gradient in both
light and dark mode; mid-saturation so it reads on both backgrounds. */
--ds-accent: #93c5fd;
--ds-accent-gradient: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%);
/* Keep teal for backward compat (shield accent nodes only) */
--ds-teal: #67e8f9;
--ds-teal-light: #67e8f9;
--ds-teal-gradient: var(--ds-accent-gradient);
/* Brand — indigo */
--ds-indigo: #6366f1;
--ds-indigo-light: #818cf8;
--ds-purple: #8b5cf6;
--ds-purple-light: #a78bfa;
/* Status — only for badges, legends, severity indicators */
--ds-red: #ef4444;
--ds-red-muted: #fca5a5;
--ds-red-bg: rgba(239, 68, 68, 0.15);
--ds-green: #10b981;
--ds-green-muted: #6ee7b7;
--ds-green-bg: rgba(16, 185, 129, 0.15);
--ds-amber: #f59e0b;
--ds-amber-muted: #fcd34d;
--ds-amber-bg: rgba(245, 158, 11, 0.15);
/* Extended text and surface tokens (used by app) */
--ds-text-secondary: #d1d5db; /* between primary and muted */
--ds-text-body: #e5e7eb; /* body copy in app */
--ds-surface: rgba(14, 24, 49, 0.76);
/* Extended accent/brand tokens */
--ds-blue-light: #93c5fd;
--ds-blue-solid: #3b82f6;
--ds-cyan-solid: #22d3ee;
--ds-indigo-bg: rgba(99, 102, 241, 0.15);
--ds-purple-solid: #8b5cf6;
--ds-green-solid: #10b981;
--ds-green-alt: #059669;
--ds-red-solid: #ef4444;
--ds-yellow: #f59e0b;
--ds-yellow-solid: #f59e0b;
/* Muted/pastel accent variants (for badges, highlights on dark bg) */
--ds-red-muted: #fca5a5;
--ds-green-muted: #6ee7b7;
--ds-green-neon: #86efac;
--ds-amber-muted: #fcd34d;
--ds-indigo-muted: #a5b4fc;
--ds-cyan: #67e8f9;
/* Sidebar (same as shell — always dark) */
--ds-sidebar-bg: #111827;
--ds-sidebar-text: #9ca3af;
--ds-sidebar-text-bright: #f3f4f6;
--ds-sidebar-text-dim: #6b7280;
--ds-sidebar-border: #374151;
--ds-sidebar-accent: #a5b4fc;
/* Glass morphism */
--ds-glass-bg: rgba(14, 24, 49, 0.76);
--ds-glass-blur: 16px;
--ds-glass-saturate: 130%;
--ds-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
--ds-glass-border: rgba(148, 163, 184, 0.1);
--ds-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* Shell — header, footer, sidebar. Never changes with theme. */
--ds-shell-bg: rgba(11, 15, 37, 0.97);
--ds-shell-bg-solid: #060a14;
--ds-shell-text: #e2e8f0;
--ds-shell-text-muted: #94a3b8;
--ds-shell-text-dim: #64748b;
--ds-shell-border: rgba(148, 163, 184, 0.2);
--ds-shell-hover: rgba(255, 255, 255, 0.05);
}
/* ═══════════════════════════════════════════════════════════════════════
4. LIGHT MODE
ONLY backgrounds, borders, and glass effects change.
Text colors, accents, and status colors stay the same.
═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
/* Backgrounds only */
--ds-bg: #f8fafc;
--ds-bg-card: #ffffff;
--ds-bg-hover: #f1f5f9;
--ds-bg-elevated: #f1f5f9;
/* Text swaps for contrast on light bg */
--ds-text: #111827;
--ds-text-secondary: #1f2937;
--ds-text-body: #111827;
--ds-text-muted: #4b5563;
--ds-text-dim: #5b6472;
--ds-surface: rgba(255, 255, 255, 0.82);
/* Extended accents adapt for light bg */
--ds-blue-light: #1d4ed8;
--ds-blue-solid: #2563eb;
--ds-cyan-solid: #0891b2;
--ds-indigo-bg: rgba(99, 102, 241, 0.1);
--ds-green-solid: #059669;
--ds-green-alt: #047857;
--ds-red-solid: #dc2626;
--ds-yellow: #a16207;
--ds-yellow-solid: #d97706;
/* All accents shift to deeper purple/indigo for contrast on light bg */
--ds-accent: #4f46e5;
/* Same gradient as dark mode — colors are readable on both backgrounds */
--ds-accent-gradient: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%);
--ds-teal: #4f46e5;
--ds-teal-light: #6366f1;
--ds-teal-gradient: linear-gradient(90deg, #4f46e5, #7c3aed);
--ds-indigo: #4338ca;
--ds-indigo-light: #4f46e5;
--ds-purple: #6d28d9;
--ds-purple-light: #7c3aed;
/* Muted/pastel variants shift darker for contrast on light bg */
--ds-red-muted: #dc2626;
--ds-green-muted: #059669;
--ds-green-neon: #15803d;
--ds-amber-muted: #b45309;
--ds-indigo-muted: #4f46e5;
--ds-cyan: #0891b2;
/* Sidebar stays dark — never overridden */
/* Borders adapt for light surface */
--ds-border: rgba(0, 0, 0, 0.1);
--ds-border-strong: rgba(0, 0, 0, 0.18);
/* Glass adapts for light surface */
--ds-glass-bg: rgba(0, 0, 0, 0.04);
--ds-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
--ds-glass-border: rgba(0, 0, 0, 0.08);
--ds-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
/* Chat panel — swap the dark navy surface for a light surface in light
mode so the Kora assistant and its input field match the rest of the
light UI instead of rendering as a dark gray box. */
--ds-chat-bg: rgba(255, 255, 255, 0.96);
--ds-chat-border: rgba(99, 102, 241, 0.28);
--ds-chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.06));
--ds-chat-header-border: rgba(99, 102, 241, 0.18);
/* Shell stays dark — never overridden */
/* Text colors, accent colors, status colors — all unchanged */
}
/* ═══════════════════════════════════════════════════════════════════════
5. SPACING SCALE
Consistent spacing tokens for margins, padding, gaps.
═══════════════════════════════════════════════════════════════════════ */
:root {
--ds-space-1: 0.25rem; /* 4px */
--ds-space-2: 0.5rem; /* 8px */
--ds-space-3: 0.75rem; /* 12px */
--ds-space-4: 1rem; /* 16px */
--ds-space-5: 1.25rem; /* 20px */
--ds-space-6: 1.5rem; /* 24px */
--ds-space-8: 2rem; /* 32px */
--ds-space-10: 2.5rem; /* 40px */
--ds-space-12: 3rem; /* 48px */
--ds-space-16: 4rem; /* 64px */
--ds-space-20: 5rem; /* 80px */
}
/* ═══════════════════════════════════════════════════════════════════════
6. RADII
═══════════════════════════════════════════════════════════════════════ */
:root {
--ds-radius-sm: 6px;
--ds-radius-md: 10px;
--ds-radius-lg: 14px;
--ds-radius-xl: 16px;
--ds-radius-full: 9999px;
}
/* ═══════════════════════════════════════════════════════════════════════
7. MOTION
═══════════════════════════════════════════════════════════════════════ */
:root {
--ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
--ds-duration-fast: 0.15s;
--ds-duration-normal: 0.3s;
--ds-duration-slow: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
:root {
--ds-duration-fast: 0s;
--ds-duration-normal: 0s;
--ds-duration-slow: 0s;
}
}
/* ═══════════════════════════════════════════════════════════════════════
8. ELEMENT BASELINES
Plain h1/h2/h3/h4 tags adopt the type-scale tokens automatically so
pages don't need to apply utility classes everywhere. Inline overrides
on font-family / font-weight / letter-spacing / line-height should not
exist anywhere in pages — the design system owns those values.
═══════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ds-font-display);
color: var(--ds-text);
margin: 0;
}
body, p, li, td, th, span, div, label, a, input, textarea, select, button {
font-family: var(--ds-font-body);
}
button, .ds-button {
font-family: var(--ds-font-body);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0;
}
code, pre, kbd, samp, .ds-mono {
font-family: var(--ds-font-mono);
}
/* SVG text elements that should pick up the mono token. SVG can't read CSS
vars from font-family attributes, so apply via class + style cascade. */
.ds-svg-mono { font-family: var(--ds-font-mono); }
.ds-svg-display { font-family: var(--ds-font-display); }
h1 {
font-size: var(--ds-h1-size);
font-weight: var(--ds-h1-weight);
line-height: var(--ds-h1-leading);
letter-spacing: var(--ds-h1-tracking);
}
h2 {
font-size: var(--ds-h2-size);
font-weight: var(--ds-h2-weight);
line-height: var(--ds-h2-leading);
letter-spacing: var(--ds-h2-tracking);
}
h3 {
font-size: var(--ds-h3-size);
font-weight: var(--ds-h3-weight);
line-height: var(--ds-h3-leading);
letter-spacing: var(--ds-h3-tracking);
}
h4 {
font-size: var(--ds-h4-size);
font-weight: var(--ds-h4-weight);
line-height: var(--ds-h4-leading);
letter-spacing: var(--ds-h4-tracking);
}
/* ═══════════════════════════════════════════════════════════════════════
9. UTILITY CLASSES
Apply the type scale and colors via classes.
═══════════════════════════════════════════════════════════════════════ */
/* Type */
.ds-title {
font-family: var(--ds-font-display);
font-size: var(--ds-title-size);
font-weight: var(--ds-title-weight);
line-height: var(--ds-title-leading);
letter-spacing: var(--ds-title-tracking);
color: var(--ds-text);
}
.ds-h1 {
font-family: var(--ds-font-display);
font-size: var(--ds-h1-size);
font-weight: var(--ds-h1-weight);
line-height: var(--ds-h1-leading);
letter-spacing: var(--ds-h1-tracking);
color: var(--ds-text);
}
/* Mirror of design-system.css .ds-page-title so the homepage hero H1
(which uses class="ds-page-title") matches the typography of every
marketing page. Alignment intentionally omitted — the homepage hero
is a two-column left-aligned layout, while marketing pages center
via .ds-page-header. text-align cascades from the parent. */
.ds-page-title {
margin: 0 0 1.25rem 0;
color: var(--ds-text, #f8fafc);
font-family: var(--ds-font-display);
font-size: var(--ds-title-size);
font-weight: var(--ds-title-weight);
line-height: var(--ds-title-leading);
letter-spacing: var(--ds-title-tracking);
text-wrap: balance;
}
@media (min-width: 768px) {
.ds-page-title {
font-size: 4.5rem;
}
}
[data-theme="light"] .ds-page-title {
color: var(--ds-text-light, #0f172a);
}
.ds-h2 {
font-family: var(--ds-font-display);
font-size: var(--ds-h2-size);
font-weight: var(--ds-h2-weight);
line-height: var(--ds-h2-leading);
letter-spacing: var(--ds-h2-tracking);
color: var(--ds-text);
}
.ds-h3 {
font-family: var(--ds-font-display);
font-size: var(--ds-h3-size);
font-weight: var(--ds-h3-weight);
line-height: var(--ds-h3-leading);
letter-spacing: var(--ds-h3-tracking);
color: var(--ds-text);
}
.ds-h4 {
font-family: var(--ds-font-display);
font-size: var(--ds-h4-size);
font-weight: var(--ds-h4-weight);
line-height: var(--ds-h4-leading);
letter-spacing: var(--ds-h4-tracking);
color: var(--ds-text);
}
.ds-body {
font-family: var(--ds-font-body);
font-size: var(--ds-body-size);
font-weight: var(--ds-body-weight);
line-height: var(--ds-body-leading);
color: var(--ds-text);
}
.ds-small {
font-family: var(--ds-font-body);
font-size: var(--ds-small-size);
font-weight: var(--ds-small-weight);
line-height: var(--ds-small-leading);
color: var(--ds-text-muted);
}
.ds-caption {
font-family: var(--ds-font-body);
font-size: var(--ds-caption-size);
font-weight: var(--ds-caption-weight);
line-height: var(--ds-caption-leading);
letter-spacing: var(--ds-caption-tracking);
color: var(--ds-text-dim);
}
.ds-overline {
font-family: var(--ds-font-body);
font-size: var(--ds-overline-size);
font-weight: var(--ds-overline-weight);
line-height: var(--ds-overline-leading);
letter-spacing: var(--ds-overline-tracking);
text-transform: uppercase;
/* --ds-text-dim was too faint against both backgrounds for an
11px eyebrow. Indigo-light carries more presence and matches
the brand accent used by the .mu-eyebrow sibling class. */
color: var(--ds-indigo-light);
}
/* Brand accent gradient — apply to a wrapping highlighted word(s) */
.ds-accent, .ds-teal {
background: var(--ds-accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* CTA gradients + elevation tokens — referenced from inline JSX styles in
app.html, header.js, footer.js, and the marketing pages. Centralized
here so the brand palette can shift in one place. */
:root {
--ds-cta-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
--ds-cta-gradient-purple: linear-gradient(135deg, #8b5cf6, #6366f1);
--ds-cta-gradient-success: linear-gradient(135deg, #10b981, #059669);
--ds-cta-gradient-text: linear-gradient(120deg, #818cf8, #a78bfa);
--ds-cta-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
--ds-cta-shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
--ds-cta-shadow-purple: 0 4px 20px rgba(139, 92, 246, 0.4);
--ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
--ds-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
--ds-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
--ds-scrollbar-thumb: #374151;
--ds-chat-bg: rgba(17, 24, 39, 0.92);
--ds-chat-border: rgba(139, 92, 246, 0.25);
--ds-chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
--ds-chat-header-border: rgba(139, 92, 246, 0.2);
}
/* Text colors */
.ds-text { color: var(--ds-text); }
.ds-text-muted { color: var(--ds-text-muted); }
.ds-text-dim { color: var(--ds-text-dim); }
.ds-text-indigo { color: var(--ds-indigo-light); }
.ds-text-red { color: var(--ds-red); }
.ds-text-green { color: var(--ds-green); }
.ds-text-amber { color: var(--ds-amber); }
/* Tab button (underline-style, used on /app settings tabs and similar).
--ds-text-dim was too faint against the dark background — inactive
tabs were barely readable. Use --ds-text-secondary so labels have
real contrast, with a subtle hover lift and an indigo underline on
the active tab. */
.ds-tab-btn {
padding: 0.625rem 1.25rem;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--ds-text-secondary);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: color var(--ds-duration-fast), border-color var(--ds-duration-fast);
}
.ds-tab-btn:hover {
color: var(--ds-text);
}
.ds-tab-btn.is-active {
color: var(--ds-indigo-light);
border-bottom-color: var(--ds-indigo);
}
.ds-tab-btn--flex {
flex: 1;
padding: 0.625rem;
}
/* Pill — small rounded badge for regulations, integrations, feature lists.
Glass background with an indigo gradient ring, mild glow on hover.
Uses the display mono so it reads as a technical/compliance tag, not
a navigation label. */
.ds-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(30, 27, 75, 0.45);
border: 1px solid rgba(139, 92, 246, 0.28);
color: var(--ds-text-secondary);
font-family: var(--ds-font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: none;
white-space: nowrap;
transition: color var(--ds-duration-fast), border-color var(--ds-duration-fast), box-shadow var(--ds-duration-fast), transform var(--ds-duration-fast);
}
.ds-pill:hover {
color: var(--ds-text);
border-color: rgba(167, 139, 250, 0.55);
box-shadow: 0 0 16px rgba(139, 92, 246, 0.22);
transform: translateY(-1px);
}
[data-theme="light"] .ds-pill {
background: rgba(237, 233, 254, 0.55);
border-color: rgba(99, 102, 241, 0.3);
color: var(--ds-text-secondary);
}
/* Ticker — single-lane horizontally scrolling row. Wrap the children
twice inside .ds-ticker-track for a seamless loop. Pauses on hover.
Edges fade via CSS mask so the content doesn't hard-clip. */
.ds-ticker {
position: relative;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ds-ticker-track {
display: inline-flex;
gap: 10px;
padding-right: 10px;
animation: ds-ticker-scroll 48s linear infinite;
will-change: transform;
}
.ds-ticker:hover .ds-ticker-track,
.ds-ticker:focus-within .ds-ticker-track {
animation-play-state: paused;
}
@keyframes ds-ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ds-ticker-track { animation: none; }
}
/* Backgrounds */
.ds-bg { background: var(--ds-bg); }
.ds-bg-card { background: var(--ds-bg-card); }
/* Glass card */
.ds-glass {
backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
background: var(--ds-glass-bg);
border: 1px solid var(--ds-glass-border);
border-radius: var(--ds-radius-xl);
box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset);
}
.ds-glass-card {
backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
background: var(--ds-bg-card);
border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-xl);
box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset);
padding: var(--ds-space-6);
}
/* ═══════════════════════════════════════════════════════════════════════
9. BASE RESET
Applied globally when this file is imported.
═══════════════════════════════════════════════════════════════════════ */
html, body {
margin: 0;
padding: 0;
max-width: 100%;
}
/* Force the vertical scrollbar to always render so the viewport width is
identical whether the page content fits or overflows. Mirrors the
rule design-system.css applies to marketing pages. */
html {
overflow-y: scroll;
}
/* Prevent any horizontal overflow (atmospheric SVG, bg-orbs) from making
body wider than viewport, which would shift the centered header logo
right. Mirrors the rule design-system.css applies to marketing pages. */
body {
overflow-x: clip;
}
body {
font-family: var(--ds-font-body);
font-size: var(--ds-body-size);
line-height: var(--ds-body-leading);
color: var(--ds-text);
background: var(--ds-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ═══════════════════════════════════════════════════════════════════════
BACKWARD COMPATIBILITY — alias old --g-* vars to --ds-* so existing
pages that use --g-text, --g-bg-0, etc. automatically get theming.
═══════════════════════════════════════════════════════════════════════ */
:root {
--g-bg-0: var(--ds-bg);
--g-bg-1: var(--ds-bg-elevated);
--g-bg-2: var(--ds-bg-hover);
--g-surface: var(--ds-glass-bg);
--g-surface-2: var(--ds-bg-hover);
--g-border: var(--ds-border);
--g-border-strong: var(--ds-border-strong);
--g-text: var(--ds-text);
--g-muted: var(--ds-text-muted);
--g-accent: var(--ds-teal-light);
--g-accent-indigo: var(--ds-indigo);
--g-accent-purple: var(--ds-purple);
--g-accent-cyan: var(--ds-teal);
--g-accent-soft: var(--ds-indigo-bg);
--g-indigo: var(--ds-indigo-light);
--g-purple: var(--ds-purple-light);
}
/* ═══════════════════════════════════════════════════════════════════════
10. DIAGRAM CONTAINERS — stay dark in both themes
═══════════════════════════════════════════════════════════════════════ */
.ds-diagram {
background: var(--ds-shell-bg-solid);
border-radius: var(--ds-radius-xl);
padding: var(--ds-space-6);
border: 1px solid var(--ds-shell-border);
}
/* Light mode: diagrams flip to a soft light surface — Vercel-clean
(was: kept dark, which created back-against-back contrast). */
[data-theme="light"] .ds-diagram {
background: var(--ds-bg-card-light, #f8fafc) !important;
border-color: var(--ds-border-light, rgba(15, 23, 42, 0.08)) !important;
}
/* Visual placeholders that contain SVG diagrams */
.visual-placeholder {
background: var(--ds-shell-bg-solid);
border-radius: var(--ds-radius-xl);
border: 1px solid var(--ds-shell-border);
}
[data-theme="light"] .visual-placeholder {
background: var(--ds-bg-card-light, #f8fafc) !important;
border-color: var(--ds-border-light, rgba(15, 23, 42, 0.08)) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
11. GLOBAL LIGHT MODE OVERRIDES
Force all text/bg to use design system tokens regardless of inline styles.
Scoped to exclude #ks-header and #ks-footer (shell stays dark).
═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] body {
background: var(--ds-bg) !important;
background-image: none !important;
}
[data-theme="light"] h1:not(#ks-header h1):not(#ks-footer h1),
[data-theme="light"] h2:not(#ks-header h2):not(#ks-footer h2),
[data-theme="light"] h3:not(#ks-header h3):not(#ks-footer h3),
[data-theme="light"] h4:not(#ks-header h4):not(#ks-footer h4) {
color: var(--ds-text) !important;
}
[data-theme="light"] p:not(#ks-header p):not(#ks-footer p),
[data-theme="light"] li:not(#ks-header li):not(#ks-footer li),
[data-theme="light"] td:not(#ks-header td):not(#ks-footer td),
[data-theme="light"] th:not(#ks-header th):not(#ks-footer th) {
color: var(--ds-text-muted) !important;
}
[data-theme="light"] span:not(#ks-header span):not(#ks-footer span):not(.ds-diagram span):not(.visual-placeholder span):not(.code-block span):not(.ds-teal):not(.gradient-text):not(.kora-title-accent):not([class*="gradient"]) {
color: var(--ds-text) !important;
}
/* Diagram containers in light mode: soft light surface + dark text. */
[data-theme="light"] .ds-diagram *,
[data-theme="light"] .visual-placeholder * {
color: var(--ds-text) !important;
background-color: transparent !important;
}
[data-theme="light"] .ds-diagram,
[data-theme="light"] .visual-placeholder {
background: var(--ds-bg-card-light, #f8fafc) !important;
border: 1px solid var(--ds-border-light, rgba(15, 23, 42, 0.08)) !important;
}
/* Light mode: invert SVG text fills inside diagrams so dark-mode accent
colors read on the new light background. */
[data-theme="light"] .ds-diagram svg text[fill="#a5b4fc"],
[data-theme="light"] .visual-placeholder svg text[fill="#a5b4fc"] { fill: #3730a3 !important; }
[data-theme="light"] .ds-diagram svg text[fill="#94a3b8"],
[data-theme="light"] .visual-placeholder svg text[fill="#94a3b8"] { fill: #475569 !important; }
[data-theme="light"] .ds-diagram svg text[fill="#c4b5fd"],
[data-theme="light"] .visual-placeholder svg text[fill="#c4b5fd"] { fill: #4c1d95 !important; }
[data-theme="light"] .ds-diagram svg text[fill="#818cf8"],
[data-theme="light"] .visual-placeholder svg text[fill="#818cf8"] { fill: #4338ca !important; }
[data-theme="light"] .ds-diagram svg text[fill="#a78bfa"],
[data-theme="light"] .visual-placeholder svg text[fill="#a78bfa"] { fill: #5b21b6 !important; }
[data-theme="light"] .ds-diagram svg text[fill="#64748b"],
[data-theme="light"] .visual-placeholder svg text[fill="#64748b"] { fill: #475569 !important; }
/* Keep gradient text transparent so gradients show */
[data-theme="light"] .ds-teal,
[data-theme="light"] .gradient-text,
[data-theme="light"] .kora-title-accent,
[data-theme="light"] [class*="gradient-text"] {
-webkit-text-fill-color: transparent !important;
}
/* Hero gradient text on light bg: force darker indigo/violet gradient so it
reads instead of looking like faded lavender. Covers all pages since it's
keyed off the class, not a specific selector. Also targets bare h1 em
elements (used by trust-security, platform, mcp, architecture heroes). */
[data-theme="light"] .gradient-text-accent,
[data-theme="light"] .gradient-text-rose,
[data-theme="light"] .gradient-text-primary,
[data-theme="light"] .gradient-text-purple,
[data-theme="light"] .kora-title-accent,
[data-theme="light"] .gradient-text:not(.gradient-text-preserve),
[data-theme="light"] h1 em,
[data-theme="light"] .hero h1 em {
background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Hero accent sweeps gently — 180% size keeps the full blue → purple →
pink range mostly visible throughout the animation. Short text like
stat numbers needs 100% so all three stops land inside the character. */
[data-theme="light"] .kora-title-accent,
[data-theme="light"] .hero h1 em {
background-size: 180% auto !important;
}
[data-theme="light"] .gradient-text:not(.kora-title-accent):not(.gradient-text-preserve) {
background-size: 100% auto !important;
}
/* Glass cards adapt */
[data-theme="light"] .glass:not(#ks-header .glass):not(header.glass),
[data-theme="light"] .glass-deep,
[data-theme="light"] .glass-card,
[data-theme="light"] .ds-glass,
[data-theme="light"] .ds-glass-card {
background: var(--ds-bg-card) !important;
border-color: var(--ds-border) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
/* Buttons and CTAs: always readable in light mode */
[data-theme="light"] [style*="background: linear-gradient"],
[data-theme="light"] [style*="background:linear-gradient"],
[data-theme="light"] .btn-primary,
[data-theme="light"] .alpha-cta-btn,
[data-theme="light"] .cta-btn,
[data-theme="light"] .tier-cta {
color: #fff !important;
}
/* Outline / ghost CTAs: transparent-bg buttons need dark text, not white */
[data-theme="light"] .cta-btn.cta-btn-secondary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] a.cta-btn[style*="background: transparent"],
[data-theme="light"] a.cta-btn[style*="background:transparent"] {
color: var(--ds-indigo) !important;
background: transparent !important;
border-color: var(--ds-indigo) !important;
}
/* CTA sections: gradient text needs to stay visible */
[data-theme="light"] .cta-section h2,
[data-theme="light"] .cta-bar h2 {
color: var(--ds-indigo) !important;
}
/* Glass buttons on light bg need visible borders and text */
[data-theme="light"] a[style*="border-radius:999px"],
[data-theme="light"] a[style*="border-radius: 999px"],
[data-theme="light"] button[style*="border-radius:999px"] {
border-color: var(--ds-indigo) !important;
color: var(--ds-indigo) !important;
}
[data-theme="light"] a[style*="border-radius:999px"][style*="background: linear-gradient"],
[data-theme="light"] a[style*="border-radius:999px"][style*="background:linear-gradient"] {
color: #fff !important;
}
/* Stat boxes in light mode */
[data-theme="light"] .stat-item,
[data-theme="light"] [class*="stat-box"],
[data-theme="light"] [class*="stat-card"] {
background: var(--ds-bg-card) !important;
border-color: var(--ds-border) !important;
}
[data-theme="light"] .stat-item .stat-number,
[data-theme="light"] .stat-item .stat-value {
color: var(--ds-indigo) !important;
}
/* Background orbs fade */
[data-theme="light"] .bg-orbs .orb {
opacity: 0.04 !important;
}
/* Section dividers */
[data-theme="light"] .section-divider {
background: linear-gradient(90deg, transparent, var(--ds-border-strong), transparent) !important;
}
/* Breadcrumb consistency: always left-aligned above the hero, never centered
even when placed inside a text-align: center container. */
.breadcrumb {
text-align: left !important;
}
/* Product preview mockups: white UI cards designed to look like screenshots.
In light mode they blend into the page bg, so we add a visible border. */
[data-theme="light"] .mockup-card,
[data-theme="light"] .guardian-card,
[data-theme="light"] [class*="-mockup"] .mockup-card {
border: 1px solid var(--ds-border-strong) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
11. COMPARE + LEGACY PAGE VARIABLE OVERRIDES
Compare pages define their own :root variables (--bg, --surface, --indigo,
--g100..g600, etc.) with dark-only values. This block re-maps those names
to theme-adaptive values in light mode. Uses html[data-theme="light"] for
higher specificity than the page's local :root block.
═══════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
/* Background variants */
--bg: #f8fafc;
--bg-light: #f1f5f9;
--bg-lighter: #e2e8f0;
--bg-secondary: #ffffff;
--bg-tertiary: #f1f5f9;
--surface: #ffffff;
--surface-2: #f8fafc;
--surface-light: #f1f5f9;
/* Legacy KS tokens */
--ks-bg: #f8fafc;
--ks-bg-card: #ffffff;
--ks-border: rgba(0, 0, 0, 0.1);
--ks-text: #111827;
--ks-text-muted: #4b5563;
--ks-text-dim: #6b7280;
/* Text */
--text: #111827;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-tertiary: #6b7280;
--muted: #4b5563;
--dim: #6b7280;
--white: #111827;
--g100: #111827;
--g200: #1f2937;
--g300: #374151;
--g400: #4b5563;
--g500: #6b7280;
--g600: #9ca3af;
/* Accents — shift to darker indigo/purple for contrast on light bg */
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-light: #4f46e5;
--accent-primary: #4f46e5;
--accent-secondary: #4338ca;
--accent-dark: #4338ca;
--accent-blue: #2563eb;
--accent-green: #059669;
--accent-purple: #7c3aed;
--indigo: #4338ca;
--indigo-dark: #3730a3;
--violet: #4f46e5;
--lavender: #7c3aed;
--cyan: #0891b2;
--green: #059669;
--amber: #b45309;
--emerald: #059669;
--rose: #be185d;
/* Status */
--success: #059669;
--warning: #b45309;
--error: #dc2626;
/* Borders */
--border: rgba(0, 0, 0, 0.12);
--border-h: rgba(0, 0, 0, 0.22);
--border-strong: rgba(0, 0, 0, 0.2);
--surface-hover: rgba(0, 0, 0, 0.04);
/* Glass */
--glass: rgba(0, 0, 0, 0.04);
--glass-bg: rgba(0, 0, 0, 0.04);
--glass-hover: rgba(0, 0, 0, 0.08);
--glass-border: rgba(0, 0, 0, 0.1);
/* Legacy --g-* aliases — ensure these flip in light mode even when
pages locally redefine them with dark hardcoded values. */
--g-bg-0: #f8fafc;
--g-bg-1: #f1f5f9;
--g-bg-2: #e2e8f0;
--g-surface: rgba(0, 0, 0, 0.04);
--g-surface-2: rgba(0, 0, 0, 0.06);
--g-border: rgba(0, 0, 0, 0.1);
--g-border-strong: rgba(0, 0, 0, 0.2);
--g-text: #111827;
--g-muted: #4b5563;
--g-accent: #4f46e5;
--g-accent-indigo: #4338ca;
--g-accent-purple: #6d28d9;
--g-accent-cyan: #0891b2;
--g-accent-soft: rgba(99, 102, 241, 0.1);
--g-indigo: #4338ca;
--g-purple: #6d28d9;
}
/* ═══════════════════════════════════════════════════════════════════════
12. RESPONSIVE OVERRIDES
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--ds-title-size: 2.25rem;
--ds-h1-size: 1.75rem;
--ds-h2-size: 1.25rem;
--ds-h3-size: 1rem;
}
}
@media (max-width: 480px) {
:root {
--ds-title-size: 1.75rem;
--ds-h1-size: 1.5rem;
--ds-h2-size: 1.125rem;
}
}
.ks-auth-input {
width: 100%;
padding: 0.6rem 0.75rem;
margin-bottom: 0.75rem;
background: var(--ds-glass-bg);
border: 1.5px solid rgba(148, 163, 184, 0.38);
border-radius: 8px;
color: var(--ds-text-body);
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ks-auth-input::placeholder {
color: var(--ds-text-dim);
}
.ks-auth-input:hover {
border-color: rgba(148, 163, 184, 0.55);
}
.ks-auth-input:focus {
outline: none;
border-color: var(--ds-indigo, #6366f1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
html[data-theme="light"] .ks-auth-input {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.18);
color: #0f172a;
}
html[data-theme="light"] .ks-auth-input:hover {
border-color: rgba(15, 23, 42, 0.32);
}
html[data-theme="light"] .ks-auth-input:focus {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.ks-auth-provider-btn {
width: 100%;
padding: 0.7rem;
background: var(--ds-glass-bg);
border: 1.5px solid rgba(148, 163, 184, 0.38);
border-radius: 8px;
color: var(--ds-text-body);
font-weight: 600;
cursor: pointer;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ks-auth-provider-btn:hover:not(:disabled) {
border-color: rgba(148, 163, 184, 0.6);
background: rgba(148, 163, 184, 0.08);
}
.ks-auth-provider-btn:disabled {
opacity: 0.6;
cursor: default;
}
html[data-theme="light"] .ks-auth-provider-btn {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
color: #0f172a;
}
html[data-theme="light"] .ks-auth-provider-btn:hover:not(:disabled) {
border-color: rgba(15, 23, 42, 0.28);
background: #f8fafc;
}
/* Homepage-specific layer: source public/css/homepage.css */
/*
* KoraSafe Homepage CSS
* Layout, animations, and glass effects for the static landing page.
* Uses --ds-* tokens from design-system.css exclusively.
*/
/* ═══════════════════════════════════════════════════════════════════════
BACKGROUND & BODY OVERRIDES
═══════════════════════════════════════════════════════════════════════ */
body.homepage {
background: radial-gradient(1200px 500px at 10% -10%, rgba(29, 78, 216, 0.2) 0%, transparent 60%),
radial-gradient(900px 420px at 85% -10%, rgba(37, 99, 235, 0.13) 0%, transparent 58%),
linear-gradient(135deg, var(--ds-bg), var(--ds-bg-elevated) 52%, #0d2248);
}
[data-theme="light"] body.homepage {
background: var(--ds-bg);
}
/* ═══════════════════════════════════════════════════════════════════════
LAYOUT CONTAINERS
═══════════════════════════════════════════════════════════════════════ */
.homepage-container {
max-width: 64rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.page-wrapper {
position: relative;
/* No top padding — the sticky header lays above content via position:
sticky, and .hero-section provides its own vertical padding. The
old 5rem top gap was showing the body background (white in light
mode) as a bright strip between header and hero. */
padding-top: 0;
padding-bottom: 4rem;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════════════
HERO SECTION
═══════════════════════════════════════════════════════════════════════ */
.hero-section {
min-height: 50vh;
display: flex;
align-items: center;
padding: 5rem 0;
}
.hero-inner {
max-width: 64rem;
margin: 0 auto;
padding: 0 1.5rem;
text-align: center;
}
.hero-title {
font-family: var(--ds-font-display);
font-size: var(--ds-title-size);
font-weight: var(--ds-title-weight);
line-height: var(--ds-title-leading);
letter-spacing: var(--ds-title-tracking);
margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
.hero-title {
font-size: 4.5rem;
}
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--ds-text-muted);
margin-bottom: 0.75rem;
max-width: 42rem;
margin-left: auto;
margin-right: auto;
line-height: 1.625;
}
.hero-sub-accent {
font-size: 0.875rem;
color: var(--ds-teal);
opacity: 0.8;
margin-bottom: 3rem;
max-width: 42rem;
margin-left: auto;
margin-right: auto;
font-weight: 500;
}
.hero-guardian-line {
font-size: 0.875rem;
color: var(--ds-teal);
opacity: 0.7;
font-weight: 600;
letter-spacing: 0.025em;
text-align: center;
margin-top: 1.5rem;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
STAT GRID (hero stats)
═══════════════════════════════════════════════════════════════════════ */
.stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
max-width: 56rem;
margin: 0 auto 1.5rem;
}
@media (min-width: 768px) {
.stat-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.stat-card {
border-radius: var(--ds-radius-xl);
padding: 1rem;
text-align: center;
}
.stat-value {
font-family: var(--ds-font-display);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0;
margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
.stat-value {
font-size: 1.875rem;
}
}
.stat-label {
font-size: 0.75rem;
color: var(--ds-text);
font-weight: 500;
line-height: 1.25;
}
.stat-sub {
font-size: 0.6rem;
color: var(--ds-text-dim);
margin-top: 0.25rem;
line-height: 1.25;
}
.stat-src {
font-size: 0.6875rem;
color: var(--ds-text-muted);
margin-top: 0.25rem;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════════════
ENFORCEMENT GRID
═══════════════════════════════════════════════════════════════════════ */
.enforcement-section {
padding: 5rem 0;
}
.enforcement-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 56rem;
margin: 0 auto 2.5rem;
}
@media (min-width: 768px) {
.enforcement-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ═══════════════════════════════════════════════════════════════════════
PROBLEM GRID
═══════════════════════════════════════════════════════════════════════ */
.problem-section {
padding: 5rem 0;
}
.problem-grid {
display: grid;
grid-template-columns: 1fr;
column-gap: 1.5rem;
row-gap: 2.5rem;
max-width: 56rem;
margin: 0 auto;
align-items: stretch;
}
@media (min-width: 768px) {
.problem-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.problem-card-wrapper {
border-radius: 1rem;
overflow: hidden;
transition: all 0.3s var(--ds-ease);
display: flex;
flex-direction: column;
}
.problem-card {
border-radius: 1rem;
padding: 1.5rem;
background: var(--ds-bg-card);
border: 1px solid var(--ds-border);
transition: all 0.3s var(--ds-ease);
flex: 1;
display: flex;
flex-direction: column;
}
.problem-card .ds-small {
flex: 1;
}
.problem-tag {
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.25rem 0.625rem;
border-radius: var(--ds-radius-full);
}
.problem-highlight {
font-size: 0.75rem;
color: var(--ds-text);
opacity: 0.8;
font-weight: 500;
border-top: 1px solid var(--ds-border);
padding-top: 0.75rem;
line-height: 1.625;
}
/* ═══════════════════════════════════════════════════════════════════════
CAPABILITY GRID (solution section)
═══════════════════════════════════════════════════════════════════════ */
.solution-section {
padding: 5rem 0;
}
.solution-stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 48rem;
margin: 0 auto 3rem;
}
@media (min-width: 640px) {
.solution-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.capability-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
max-width: 56rem;
margin: 0 auto 2.5rem;
}
@media (min-width: 768px) {
.capability-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.capability-card {
border-radius: var(--ds-radius-xl);
padding: 1rem;
text-align: left;
}
.capability-card .cap-title {
font-size: 0.875rem;
font-weight: 700;
color: var(--ds-text);
margin-bottom: 0.25rem;
}
.capability-card .cap-desc {
font-size: 0.75rem;
color: var(--ds-text-muted);
line-height: 1.625;
}
/* ═══════════════════════════════════════════════════════════════════════
CTA SECTION
═══════════════════════════════════════════════════════════════════════ */
.cta-section {
text-align: center;
}
.cta-buttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
}
.cta-primary {
display: inline-flex;
align-items: center;
gap: 0.625rem;
font-weight: 600;
padding: 1rem 2.5rem;
border-radius: var(--ds-radius-full);
font-size: 1rem;
letter-spacing: 0.025em;
color: var(--ds-teal-light);
cursor: pointer;
border: none;
transition: all 0.3s var(--ds-ease);
}
.cta-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
padding: 1rem 2rem;
border-radius: var(--ds-radius-full);
font-size: 1rem;
letter-spacing: 0.025em;
color: var(--ds-text-muted);
cursor: pointer;
border: none;
text-decoration: none;
transition: all 0.3s var(--ds-ease);
}
.alpha-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: var(--ds-radius-xl);
margin-top: 1.5rem;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
border: 1px solid rgba(99, 102, 241, 0.25);
}
.alpha-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ds-green);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
display: inline-block;
}
.alpha-cta-btn {
font-size: 0.875rem;
font-weight: 600;
color: #fff !important; /* Always white on gradient bg */
padding: 0.375rem 1rem;
border-radius: var(--ds-radius-md);
background: linear-gradient(135deg, var(--ds-indigo), var(--ds-purple));
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
border: none;
cursor: pointer;
transition: all 0.3s var(--ds-ease);
}
/* ═══════════════════════════════════════════════════════════════════════
SECTION DIVIDER
═══════════════════════════════════════════════════════════════════════ */
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
max-width: 56rem;
margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════════════
BACKGROUND ORBS
═══════════════════════════════════════════════════════════════════════ */
.bg-orbs {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(64px);
}
.orb-1 {
top: -5rem;
left: -5rem;
width: 32rem;
height: 32rem;
background: linear-gradient(to bottom right, rgba(96, 165, 250, 0.24), rgba(37, 99, 235, 0.08));
animation: float-orb-1 8s ease-in-out infinite;
}
.orb-2 {
top: 33%;
right: -5rem;
width: 28rem;
height: 28rem;
background: linear-gradient(to bottom right, rgba(129, 140, 248, 0.16), rgba(37, 99, 235, 0.08));
animation: float-orb-2 10s ease-in-out infinite;
}
.orb-3 {
bottom: -5rem;
left: 33%;
width: 24rem;
height: 24rem;
background: linear-gradient(to bottom right, rgba(56, 189, 248, 0.16), rgba(99, 102, 241, 0.08));
animation: float-orb-3 12s ease-in-out infinite;
}
[data-theme="light"] .bg-orbs {
display: none;
}
/* ═══════════════════════════════════════════════════════════════════════
GLASS EFFECTS (homepage-specific, extend design-system .ds-glass)
═══════════════════════════════════════════════════════════════════════ */
.glass {
backdrop-filter: blur(18px) saturate(130%);
background: var(--ds-glass-bg);
border: 1px solid var(--ds-glass-border);
box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset);
}
.glass-hover {
transition: all 0.3s var(--ds-ease);
}
.glass-hover:hover {
background: var(--ds-bg-hover);
border-color: var(--ds-border-strong);
box-shadow: 0 12px 44px rgba(2, 6, 23, 0.45), var(--ds-glass-inset);
transform: translateY(-1px);
}
.glass-deep {
backdrop-filter: blur(22px) saturate(140%);
background: var(--ds-bg-card);
border: 1px solid var(--ds-border);
box-shadow: 0 10px 42px rgba(2, 6, 23, 0.4), var(--ds-glass-inset);
}
[data-theme="light"] .glass,
[data-theme="light"] .glass-deep {
background: rgba(255, 255, 255, 0.9);
border-color: var(--ds-border);
}
/* Stat numbers use the full accent gradient, clipped to text in both
modes. !important on the clip+fill properties because some stacked
rules reset background-clip back to border-box for .gradient-text. */
.stat-value.gradient-text,
[data-theme="light"] .stat-value.gradient-text {
background: var(--ds-accent-gradient) !important;
background-size: 100% auto !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
display: inline-block;
}
/* Guardian line: always transparent bg */
[data-theme="light"] .hero-guardian-line {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Stat cards in light mode: visible border */
[data-theme="light"] .stat-card {
border: 1px solid var(--ds-border) !important;
}
.gradient-text {
background: linear-gradient(120deg, var(--ds-text) 0%, var(--ds-blue-light) 42%, var(--ds-blue-solid) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient-border {
position: relative;
}
.gradient-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(139, 92, 246, 0.3), rgba(0, 212, 255, 0.1));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.noise-overlay {
position: relative;
}
.noise-overlay::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
border-radius: inherit;
opacity: 0.5;
}
.glow-teal {
box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.2), 0 10px 28px rgba(37, 99, 235, 0.28);
}
.icon-glow {
filter: drop-shadow(0 0 3px currentColor);
}
[data-theme="light"] .icon-glow {
filter: none;
}
/* ═══════════════════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
@keyframes float-orb-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.05); }
66% { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes float-orb-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-40px, 20px) scale(0.95); }
66% { transform: translate(20px, -40px) scale(1.05); }
}
@keyframes float-orb-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, 40px) scale(1.05); }
66% { transform: translate(-30px, -20px) scale(0.95); }
}
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.25), inset 0 0 20px rgba(0, 212, 255, 0.05); }
50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5), inset 0 0 30px rgba(0, 212, 255, 0.08); }
}
@keyframes kora-rise-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes kora-soft-sweep {
0% { background-position: 100% center; }
100% { background-position: 0% center; }
}
@keyframes hero-word-reveal {
0% { opacity: 0; transform: translateY(12px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.fade-in-up { animation: fade-in-up 0.6s var(--ds-ease); }
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.kora-title-main {
opacity: 0;
animation: kora-rise-in 0.7s var(--ds-ease) forwards;
}
.kora-title-accent {
opacity: 0;
animation: kora-rise-in 0.85s var(--ds-ease) 0.08s forwards;
background: var(--ds-accent-gradient);
background-size: 180% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.kora-title-accent.is-ready {
animation: kora-rise-in 0.85s var(--ds-ease) 0.08s forwards, kora-soft-sweep 8s ease-in-out 1.2s infinite;
}
.kora-subtitle {
opacity: 0;
animation: kora-rise-in 0.75s var(--ds-ease) 0.18s forwards;
}
.kora-subtitle-2 {
opacity: 0;
animation: kora-rise-in 0.75s var(--ds-ease) 0.28s forwards;
}
.hero-word {
/* opacity: 1 fallback so the element never vanishes if the animation
is interrupted or never fires (browser replay glitches, click/copy
re-triggering animation, etc.). The animation still controls the
entrance via its 0% keyframe + forwards fill. */
opacity: 1;
display: inline-block;
animation: hero-word-reveal 0.7s var(--ds-ease) forwards;
}
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE OVERRIDES
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.bg-orbs {
display: none;
}
.hero-section,
.enforcement-section,
.problem-section,
.solution-section {
min-height: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
.hero-title {
font-size: 2rem;
}
.glass-deep.gradient-border {
padding: 1.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
.kora-title-main,
.kora-title-accent,
.kora-subtitle,
.kora-subtitle-2,
.hero-word {
opacity: 1;
animation: none;
}
.orb-1, .orb-2, .orb-3 {
animation: none;
}
}
/* Assessment widget mount point - hidden until activated */
#assessment-root {
display: none;
}
/* ── /index.html ── migrated 2026-05-23 per #3890 */
/* Homepage refresh styles ported from the design mockup. Only classes
not already in homepage-combined.css live here. Anything that exists in
the combined design-system/homepage stylesheet is intentionally not
redefined to avoid double-cascade fights. */
.section-divider {
height: 1px; max-width: 60rem; margin: 0 auto;
background: linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.28) 30%, rgba(139, 92, 246, 0.36) 50%, rgba(129, 140, 248, 0.28) 70%, transparent 100%);
}
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.8s var(--ds-ease), transform 0.8s var(--ds-ease); will-change: opacity, transform; }
.reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.icon-glow { filter: drop-shadow(0 0 6px currentColor); }
/* Animated hero video — auto-playing three-scene loop.
Scene 1: Governance diagram (rings + guardians + shield + flows)
Scene 2: Real in-app screenshots (Ken-Burns fade carousel)
Scene 3: KoraSafe shield finale with wordmark */
.hero-video {
position: relative;
width: 880px; height: 495px;
margin: 0 auto 2rem;
max-width: 100%;
border-radius: 20px;
overflow: hidden;
background: radial-gradient(circle at 50% 40%, rgba(30, 27, 75, 0.55), rgba(15, 23, 42, 0.78));
border: 1px solid rgba(139, 92, 246, 0.22);
box-shadow: 0 28px 80px rgba(79, 70, 229, 0.32), inset 0 0 0 1px rgba(196, 181, 253, 0.05);
opacity: 0; transform: translateY(-6px);
animation: hv-rise 0.9s var(--ds-ease) 0.15s forwards;
}
[data-theme="light"] .hero-video {
background: radial-gradient(circle at 50% 40%, rgba(237, 233, 254, 0.7), rgba(241, 245, 249, 0.92));
border-color: rgba(99, 102, 241, 0.24);
box-shadow: 0 12px 40px rgba(99, 102, 241, 0.18);
}
.hv-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 1.2s var(--ds-ease); pointer-events: none; }
.hv-scene.is-on { opacity: 1; }
.hv-scene svg.hv-diagram { width: 92%; height: 92%; overflow: visible; }
.hv-halo { transform-origin: center; transform-box: fill-box; animation: hv-halo 4.5s ease-in-out infinite; }
.hv-ring { fill: none; stroke-width: 1.25; opacity: 0.85; transform-origin: center; transform-box: fill-box; }
.hv-spin-cw { animation: hv-spin 30s linear infinite; transform-origin: center; transform-box: fill-box; }
.hv-spin-ccw { animation: hv-spin-rev 42s linear infinite; transform-origin: center; transform-box: fill-box; }
.hv-spin-slow { animation: hv-spin 60s linear infinite; transform-origin: center; transform-box: fill-box; }
.hv-guardian { transform-origin: center; transform-box: fill-box; animation: hv-pulse 3.2s ease-in-out infinite; }
.hv-guardian.g1 { animation-delay: 0s; }
.hv-guardian.g2 { animation-delay: 0.8s; }
.hv-guardian.g3 { animation-delay: 1.6s; }
.hv-guardian.g4 { animation-delay: 2.4s; }
.hv-shield-float { animation: hv-float 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hv-core-pulse { animation: hv-core 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hv-beam { fill: none; stroke-width: 1.25; stroke-linecap: round; opacity: 0.55; }
.hv-wire-in { stroke-dasharray: 2 6; animation: hv-dash-in 2.8s linear infinite; }
.hv-wire-out { stroke-dasharray: 2 6; animation: hv-dash-out 2.8s linear infinite; }
.hv-particle { transform-origin: center; transform-box: fill-box; }
.hv-particle.in1 { animation: hv-flow-in 2.9s ease-in-out infinite; }
.hv-particle.in2 { animation: hv-flow-in 2.9s ease-in-out infinite; animation-delay: 0.95s; }
.hv-particle.in3 { animation: hv-flow-in 2.9s ease-in-out infinite; animation-delay: 1.9s; }
.hv-particle.out1 { animation: hv-flow-out 2.9s ease-in-out infinite; animation-delay: 0.35s; }
.hv-particle.out2 { animation: hv-flow-out 2.9s ease-in-out infinite; animation-delay: 1.3s; }
.hv-particle.out3 { animation: hv-flow-out 2.9s ease-in-out infinite; animation-delay: 2.25s; }
@keyframes hv-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes hv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hv-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes hv-pulse { 0%, 100% { opacity: 0.62; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hv-core { 0%, 100% { filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.45)); } 50% { filter: drop-shadow(0 0 22px rgba(167, 139, 250, 0.65)); } }
@keyframes hv-halo { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.06); } }
@keyframes hv-dash-in { to { stroke-dashoffset: -32; } }
@keyframes hv-dash-out { to { stroke-dashoffset: 32; } }
@keyframes hv-flow-in { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(88px); opacity: 0; } }
@keyframes hv-flow-out { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(88px); opacity: 0; } }
.hv-endpoint { transform-origin: center; transform-box: fill-box; animation: hv-endpoint-pulse 3s ease-in-out infinite; }
.hv-endpoint.e-out { animation-delay: 1.5s; }
.hv-endpoint-label { font-family: var(--ds-font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ds-text-muted); }
@keyframes hv-endpoint-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
[data-theme="light"] .hv-ring { opacity: 0.55; }
[data-theme="light"] .hv-beam { opacity: 0.75; }
/* Scene 2 — product screenshot carousel framed as a Mac-style
laptop. Screen is .hv-frame; the scene wrapper paints the hinge
+ keyboard base below so the product screenshot reads as a
real device, not a generic window. Caption sits below the
laptop in design-system type. */
.hv-scene-2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px; box-sizing: border-box; }
.hv-frame {
position: relative;
width: 94%;
max-width: 920px;
aspect-ratio: 16 / 10;
border-radius: 12px;
overflow: hidden;
background: #0b1220;
box-shadow:
0 0 0 3px #111827,
0 0 0 4px rgba(148, 163, 184, 0.12),
0 28px 50px rgba(2, 6, 23, 0.55);
}
[data-theme="light"] .hv-frame {
background: #0f172a;
box-shadow:
0 0 0 3px #1e293b,
0 0 0 4px rgba(51, 65, 85, 0.28),
0 16px 36px rgba(15, 23, 42, 0.28);
}
/* Hinge + keyboard base drawn directly below the screen */
.hv-scene-2::after {
content: '';
width: 98%;
max-width: 960px;
height: 14px;
margin-top: -2px;
background:
linear-gradient(180deg, rgba(30, 41, 59, 1) 0%, rgba(30, 41, 59, 1) 3px, rgba(15, 23, 42, 0.9) 3px, rgba(15, 23, 42, 0.9) 4px, rgba(51, 65, 85, 0.95) 4px, rgba(30, 41, 59, 0.95) 100%);
border-radius: 0 0 22px 22px;
clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);
box-shadow: 0 16px 22px rgba(2, 6, 23, 0.45);
}
[data-theme="light"] .hv-scene-2::after {
background:
linear-gradient(180deg, rgba(100, 116, 139, 1) 0%, rgba(100, 116, 139, 1) 3px, rgba(71, 85, 105, 0.9) 3px, rgba(71, 85, 105, 0.9) 4px, rgba(148, 163, 184, 0.95) 4px, rgba(100, 116, 139, 0.95) 100%);
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
}
/* Carousel slides: gentle 4-variant transitions cycled per slide so the
carousel doesn't feel mechanical. Each slide opacity-crossfades; the
transform variant runs as a slow ~6s motion so only the first ~30% of
it plays during the slide's 1.7s on-screen time — keeps every shot
moving without ever feeling rushed. */
/* Cross-fade between slides is the graceful way to hide the
transform reset that happens when the next slide's animation
starts from 0%. 1.6s overlap is long enough to mask the swap
without holding two frames on screen too long. */
.hv-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0; transition: opacity 1.6s var(--ds-ease); will-change: opacity, transform; transform-origin: center center; }
.hv-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hv-slide.is-on { opacity: 1; }
/* Magnifying-glass zoom: push in toward the feature, hold briefly,
then gently pull back to scale(1.05). Ending close to scale 1.0
means the next slide (which starts at 1.0) crossfades without a
visible jump. Each slide sets --fx / --fy for the focal region. */
.hv-slide[data-tx="focus"] { transform-origin: var(--fx, 50%) var(--fy, 50%); }
.hv-slide.is-on[data-tx="focus"] { animation: hv-tx-focus 3.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hv-slide.is-on[data-tx="fade"] { animation: hv-tx-fade 3.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
/* Magnifying-glass push-in toward (--fx, --fy). Max scale 1.2 —
enough to feel like a zoom but doesn't crop the page titles
at the top of each screenshot. Ramps in the first 60% of the
animation, holds through the rest. Next slide starts at 1.0
so the cross-fade reads as a scene cut. */
@keyframes hv-tx-focus {
0% { transform: scale(1.0); }
60% { transform: scale(1.2); }
100% { transform: scale(1.2); }
}
@keyframes hv-tx-fade {
0% { transform: scale(1.0); }
60% { transform: scale(1.06); }
100% { transform: scale(1.06); }
}
/* Caption sits below the laptop base, in design-system type.
Theme-aware color so it's readable in both modes. */
.hv-scene-2-caption {
position: static;
margin-top: 10px;
max-width: 90%;
text-align: center;
font-family: var(--ds-font-display);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0;
color: var(--ds-text-secondary);
background: transparent;
padding: 0;
text-shadow: none;
opacity: 0; transform: translateY(6px);
transition: opacity 0.9s var(--ds-ease), transform 0.9s var(--ds-ease);
}
.hv-scene-2-caption.is-on { opacity: 1; transform: translateY(0); }
/* Scene 3 — finale */
.hv-finale { display: grid; place-items: center; gap: 0.9rem; width: 100%; height: 100%; }
.hv-finale-shield { position: relative; width: 140px; height: 140px; display: grid; place-items: center; }
.hv-finale-shield svg { width: 100%; height: 100%; position: relative; z-index: 2; filter: drop-shadow(0 14px 42px rgba(99, 102, 241, 0.5)) drop-shadow(0 0 30px rgba(167, 139, 250, 0.48)); }
.hv-finale-shield::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(167, 139, 250, 0.48), rgba(99, 102, 241, 0.18) 45%, transparent 70%); filter: blur(18px); animation: hv-halo 4.2s ease-in-out infinite; z-index: 0; }
.hv-finale-shield::after { content: ''; position: absolute; inset: -10%; border-radius: var(--ds-radius-full); border: 1px solid rgba(196, 181, 253, 0.26); animation: hv-ring-expand 4.2s var(--ds-ease) infinite; z-index: 1; }
[data-theme="light"] .hv-finale-shield::before { background: radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.14) 50%, transparent 72%); }
[data-theme="light"] .hv-finale-shield::after { border-color: rgba(99, 102, 241, 0.22); }
@keyframes hv-ring-expand { 0% { opacity: 0; transform: scale(0.92); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: scale(1.3); } }
.hv-finale-shield .shield-svg { animation: hv-float 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hv-finale-shield .shield-node,
.hv-shield-node { transform-origin: center; transform-box: fill-box; animation: hv-node-glow 2.4s ease-in-out infinite; }
.hv-finale-shield .shield-node.n2,
.hv-shield-node.n2 { animation-delay: 0.6s; }
.hv-finale-shield .shield-node.n3,
.hv-shield-node.n3 { animation-delay: 1.2s; }
@keyframes hv-node-glow { 0%, 100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 4px #a5b4fc); } 50% { opacity: 0.55; transform: scale(1.3); filter: drop-shadow(0 0 10px #a5b4fc); } }
.hv-finale-wordmark { font-family: var(--ds-font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: 0; color: var(--ds-text); }
.hv-finale-wordmark .accent { background: linear-gradient(90deg, #818cf8, #6366f1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hv-finale-tagline { font-family: var(--ds-font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ds-text-muted); }
.hv-scene-3.is-on .hv-finale-wordmark { animation: hv-finale-in 0.8s var(--ds-ease) 0.35s both; }
.hv-scene-3.is-on .hv-finale-tagline { animation: hv-finale-in 0.8s var(--ds-ease) 0.7s both; }
@keyframes hv-finale-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* Progress dots */
.hv-progress { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.hv-dot { width: 22px; height: 3px; border-radius: 2px; background: rgba(196, 181, 253, 0.22); transition: background 0.4s, width 0.4s; }
.hv-dot.is-on { background: linear-gradient(90deg, #818cf8, #6366f1); width: 32px; }
[data-theme="light"] .hv-dot { background: rgba(99, 102, 241, 0.22); }
@media (max-width: 680px) {
.hero-video { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 240px; border-radius: 14px; }
.hv-finale-shield { width: 104px; height: 104px; }
.hv-finale-wordmark { font-size: 1.35rem; }
.hv-finale-tagline { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
.hero-video, .hero-video * { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
.hv-scene { opacity: 1; }
.hv-scene-2, .hv-scene-3 { display: none; }
}
/* Section header pattern used by the new blades. */
.mu-section-head { text-align: center; margin-bottom: 2.5rem; max-width: 46rem; margin-left: auto; margin-right: auto; padding: 0 1rem; }
.mu-section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.5rem 0 1rem; }
.mu-section-head p { color: var(--ds-text-muted); max-width: 42rem; margin: 0 auto; font-size: 1rem; line-height: 1.6; }
.gradient-text { background: var(--ds-accent-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Old-controls-miss blade (gap-grid). */
.gap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; max-width: 64rem; margin: 0 auto; border-top: 1px solid var(--ds-border); border-left: 1px solid var(--ds-border); }
.gap-card { padding: 2rem 1.9rem 2.1rem; border-bottom: 1px solid var(--ds-border); border-right: 1px solid var(--ds-border); position: relative; transition: background 0.4s var(--ds-ease); }
.gap-card::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #c4b5fd 0%, #818cf8 100%); opacity: 0; transition: opacity 0.4s var(--ds-ease); }
.gap-card:hover { background: rgba(167, 139, 250, 0.035); }
.gap-card:hover::before { opacity: 1; }
.gap-label { font-family: var(--ds-font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: 1rem; display: inline-block; }
.gap-title { font-size: 1.125rem; margin-bottom: 0.7rem; }
.gap-body { font-size: 0.92rem; line-height: 1.65; color: var(--ds-text-secondary); max-width: 34rem; }
.gap-need { margin-top: 1.1rem; padding-left: 0.9rem; border-left: 1px solid rgba(167, 139, 250, 0.28); font-size: 0.82rem; line-height: 1.6; color: var(--ds-text-muted); }
@media (max-width: 720px) { .gap-grid { grid-template-columns: 1fr; border-left: none; border-right: none; } .gap-card { border-right: none; padding: 1.65rem 0.25rem 1.9rem; } }
/* Registry-console product sketch. */
.product-sketch { max-width: 64rem; margin: 0 auto; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, rgba(13, 34, 72, 0.7), rgba(9, 18, 43, 0.85)); border: 1px solid rgba(139, 92, 246, 0.35); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.12) inset; position: relative; }
[data-theme="light"] .product-sketch { background: linear-gradient(145deg, #ffffff, #f1f5f9); border-color: rgba(99, 102, 241, 0.2); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08); }
.product-sketch::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 220px at 20% 0%, rgba(139, 92, 246, 0.22), transparent 70%); pointer-events: none; }
.corner-marks::before, .corner-marks::after { content: ''; position: absolute; width: 22px; height: 22px; border: 1px solid rgba(139, 92, 246, 0.55); pointer-events: none; }
.corner-marks::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.corner-marks::after { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.ps-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(139, 92, 246, 0.2); background: rgba(5, 8, 20, 0.7); }
[data-theme="light"] .ps-chrome { background: rgba(241, 245, 249, 0.7); border-bottom-color: rgba(99, 102, 241, 0.15); }
.ps-dot { width: 10px; height: 10px; border-radius: 50%; }
.ps-dot.r { background: #ef4444; } .ps-dot.a { background: #f59e0b; } .ps-dot.g { background: #8b5cf6; }
.ps-url { margin-left: 0.75rem; font-family: var(--ds-font-mono); font-size: 0.72rem; color: var(--ds-text-dim); padding: 3px 12px; border: 1px solid var(--ds-border); border-radius: 999px; }
.ps-body { display: grid; grid-template-columns: 180px 1fr; min-height: 300px; }
@media (max-width: 700px) { .ps-body { grid-template-columns: 1fr; min-height: 0; min-width: 0; } }
.ps-side { border-right: 1px solid var(--ds-border); padding: 1rem 0.875rem; display: flex; flex-direction: column; gap: 0.375rem; background: rgba(5, 8, 20, 0.3); min-width: 0; }
[data-theme="light"] .ps-side { background: rgba(248, 250, 252, 0.5); }
.ps-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; border-radius: 8px; font-size: 0.72rem; color: var(--ds-text-muted); min-width: 0; }
.ps-item.active { background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.12)); color: var(--ds-text); border: 1px solid rgba(139, 92, 246, 0.35); }
@media (max-width: 700px) {
.ps-side { border-right: 0; border-bottom: 1px solid var(--ds-border); width: auto; max-width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.25rem; padding: 0.75rem 0.875rem; }
.ps-item { width: auto; flex: 0 1 auto; padding: 0.35rem 0.6rem; font-size: 0.7rem; }
}
.ps-main { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ps-row { display: flex; gap: 0.75rem; align-items: center; min-width: 0; flex-wrap: wrap; }
.ps-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.ps-pill.ok { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.3); }
.ps-pill.warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.ps-pill.live { background: rgba(196, 181, 253, 0.12); color: #a78bfa; border: 1px solid rgba(196, 181, 253, 0.3); position: relative; padding-left: 18px; }
.ps-pill.live::before { content: ''; position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px #a78bfa; animation: ps-live-pulse 1.6s ease-in-out infinite; }
@keyframes ps-live-pulse { 0%, 100% { box-shadow: 0 0 8px #a78bfa; } 50% { box-shadow: 0 0 18px #a78bfa; } }
.ps-h { font-weight: 600; font-size: 1.1rem; color: var(--ds-text); letter-spacing: 0; }
.ps-sub { color: var(--ds-text-muted); font-size: 0.8125rem; }
.ps-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 72px; }
.ps-bars span { display: block; background: linear-gradient(180deg, rgba(196, 181, 253, 0.95), rgba(99, 102, 241, 0.7)); border-radius: 3px 3px 0 0; }
.ps-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ps-tile { padding: 0.875rem; border-radius: 10px; background: rgba(13, 34, 72, 0.5); border: 1px solid var(--ds-border); }
[data-theme="light"] .ps-tile { background: rgba(248, 250, 252, 0.8); }
.ps-tile-n { font-size: 1.25rem; font-weight: 500; letter-spacing: 0; }
.ps-tile-l { font-size: 0.7rem; color: var(--ds-text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
/* Mobile reflow for the registry-console sketch: stack the header row,
let pills wrap, drop the bar count + padding so nothing overflows the
sketch frame at ≤ 700px (which is what the .ps-body single-column
collapse already targets). */
@media (max-width: 700px) {
.ps-main { padding: 1rem; gap: 0.875rem; }
.ps-row--between { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.ps-grid3 { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ps-tile { padding: 0.75rem; }
.ps-bars { grid-template-columns: repeat(8, 1fr); gap: 4px; height: 56px; }
.ps-bars span:nth-child(n+9) { display: none; }
}
/* Governance-moves blade (pov-grid). */
.pov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 64rem; margin: 0 auto; border-top: 1px solid var(--ds-border); border-left: 1px solid var(--ds-border); }
.pov-card { padding: 2rem 1.9rem 2.1rem; border-bottom: 1px solid var(--ds-border); border-right: 1px solid var(--ds-border); position: relative; transition: background 0.4s var(--ds-ease); }
.pov-card::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #c4b5fd 0%, #818cf8 100%); opacity: 0; transition: opacity 0.4s var(--ds-ease); }
.pov-card:hover { background: rgba(167, 139, 250, 0.035); }
.pov-card:hover::before { opacity: 1; }
.pov-label { font-family: var(--ds-font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: 1rem; display: inline-block; }
.pov-card:nth-child(3) .pov-label { color: var(--ds-indigo-light); }
.pov-title { font-size: 1.125rem; margin-bottom: 0.7rem; }
.pov-body { font-size: 0.92rem; line-height: 1.65; color: var(--ds-text-secondary); }
.pov-close { max-width: 52rem; margin: 2.5rem auto 0; text-align: center; font-size: 0.95rem; line-height: 1.7; color: var(--ds-text-muted); padding: 0 1rem; }
@media (max-width: 720px) { .pov-grid { grid-template-columns: 1fr; border-left: none; } .pov-card { border-right: none; padding: 1.65rem 0.25rem 1.9rem; } }
/* Why governance matters — editorial-style risk overview.
Replaces the older enforcement + problem sections. All spacing
and color tokens come from the design system so dark + light
themes work with no extra overrides. */
.wg-section { padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4rem); position: relative; }
.wg-inner { max-width: 1200px; margin: 0 auto; }
.wg-head { padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--ds-border-strong); }
.wg-kicker {
font-size: 0.7rem; font-family: var(--ds-font-mono); color: var(--ds-indigo-light);
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.25rem;
display: inline-flex; align-items: center; gap: 10px;
}
.wg-kicker::before { content: ''; width: 18px; height: 1px; background: var(--ds-indigo-light); }
.wg-h {
/* Match .ds-h1 site-wide so all section headlines look the same */
font-family: var(--ds-font-display);
font-size: var(--ds-h1-size);
font-weight: var(--ds-h1-weight);
line-height: var(--ds-h1-leading);
letter-spacing: var(--ds-h1-tracking);
color: var(--ds-text);
margin: 0 0 1.25rem;
max-width: 820px;
}
.wg-h em { font-style: normal; color: var(--ds-indigo-light); }
.wg-stat-line {
display: inline-flex; align-items: baseline; gap: 10px; padding: 0.45rem 0.9rem;
border: 1px solid var(--ds-border-strong); border-radius: 999px;
background: rgba(129, 140, 248, 0.06); margin-bottom: 1.4rem;
}
.wg-stat-num { font-size: 1.125rem; font-weight: 600; letter-spacing: 0; color: var(--ds-text); font-variant-numeric: tabular-nums; }
.wg-stat-num .tiny { color: var(--ds-indigo-light); margin-left: 1px; }
.wg-stat-label { font-size: 0.7rem; font-family: var(--ds-font-mono); color: var(--ds-text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.wg-intro { font-size: 1rem; color: var(--ds-text-secondary); line-height: 1.6; margin: 0; max-width: 720px; }
.wg-intro strong { color: var(--ds-text); font-weight: 500; }
.wg-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
border-top: 1px solid var(--ds-border); border-left: 1px solid var(--ds-border);
}
.wg-card {
border-right: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border);
padding: 2.25rem; display: flex; flex-direction: column; position: relative;
transition: background 200ms ease; min-height: 360px;
}
.wg-card:hover { background: rgba(129, 140, 248, 0.05); }
[data-theme="light"] .wg-card:hover { background: rgba(99, 102, 241, 0.04); }
.wg-viz { height: 140px; margin: -0.5rem -0.75rem 1.75rem; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ds-text-muted); }
.wg-viz svg { display: block; width: 100%; height: 100%; }
.wg-card-kicker { font-size: 0.625rem; font-family: var(--ds-font-mono); color: var(--ds-indigo-light); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.625rem; }
.wg-card-title { font-size: 1.375rem; font-weight: 500; letter-spacing: 0; color: var(--ds-text); line-height: 1.2; margin: 0 0 0.625rem; }
.wg-card-body { font-size: 0.875rem; color: var(--ds-text-secondary); line-height: 1.6; margin: 0; max-width: 460px; }
.wg-foot { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--ds-border-strong); display: flex; justify-content: space-between; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.wg-foot-note { font-size: 0.875rem; color: var(--ds-text-secondary); line-height: 1.55; max-width: 680px; }
.wg-foot-note strong { color: var(--ds-text); font-weight: 500; }
@media (max-width: 980px) {
.wg-grid { grid-template-columns: 1fr; }
.wg-foot { flex-direction: column; align-items: flex-start; }
}
/* 4-col variant — the "Is your GRC stack AI-ready?" blade.
Smaller viz (86px) + gap-pill header on each card. */
.wg-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .wg-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .wg-grid-4 { grid-template-columns: 1fr; } }
.wg-grid-4 .wg-card { padding: 1.4rem; min-height: 340px; }
.wg-grid-4 .wg-viz { height: 86px; margin: 0.25rem -0.25rem 1rem; }
.wg-gap-pill {
align-self: flex-start;
font-size: 0.625rem; font-family: var(--ds-font-mono); color: var(--ds-indigo-light);
letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
padding: 4px 10px; border: 1px solid var(--ds-border-strong);
border-radius: 999px; background: rgba(129, 140, 248, 0.05);
margin-bottom: 0.875rem;
}
.wg-h .strike { position: relative; color: var(--ds-text-muted); display: inline-block; }
.wg-h .strike::after {
content: ''; position: absolute; left: -2%; right: -2%; top: 54%;
height: 3px; background: var(--ds-red); transform: rotate(-1.5deg);
opacity: 0.9; border-radius: 2px;
}
/* Map legacy generic font-family attrs inside .wg-section SVGs onto
design-system tokens. Presentation attrs lose to any author CSS
rule, so "monospace" / "sans-serif" become JetBrains Mono / Inter
without rewriting every element. */
.wg-section svg text[font-family="monospace"],
.wg-section svg g[font-family="monospace"] { font-family: var(--ds-font-mono); }
.wg-section svg text[font-family="sans-serif"],
.wg-section svg g[font-family="sans-serif"] { font-family: var(--ds-font-body); }
/* SVG illustration animations (prefixed wg- to avoid name clashes) */
@keyframes wg-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes wg-pulse-s { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes wg-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
@keyframes wg-flow-slow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40; } }
@keyframes wg-blink { 0%, 60%, 100% { opacity: 0.85; } 30% { opacity: 0.2; } }
@keyframes wg-fade-in { 0%, 20% { opacity: 0; } 40%, 80% { opacity: 1; } 100% { opacity: 0; } }
.wg-anim-pulse { animation: wg-pulse 2.2s ease-in-out infinite; }
.wg-anim-pulse-s { animation: wg-pulse-s 1.6s ease-in-out infinite; }
.wg-anim-flow { animation: wg-flow 1.4s linear infinite; }
.wg-anim-flow-slow { animation: wg-flow-slow 3s linear infinite; }
.wg-anim-blink { animation: wg-blink 2.4s ease-in-out infinite; }
.wg-anim-fire > * { opacity: 0; animation: wg-fade-in 4s ease-in-out infinite; }
.wg-anim-fire > *:nth-child(1) { animation-delay: 0s; }
.wg-anim-fire > *:nth-child(2) { animation-delay: 0.5s; }
.wg-anim-fire > *:nth-child(3) { animation-delay: 1s; }
.wg-anim-fire > *:nth-child(4) { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
.wg-anim-pulse, .wg-anim-pulse-s, .wg-anim-flow, .wg-anim-flow-slow, .wg-anim-blink,
.wg-anim-fire > * { animation: none !important; }
.wg-anim-fire > * { opacity: 1; }
}
/* Interactive capability radar — Direction A from the design canvas.
12 nodes placed on a polygon, clickable → updates a proof panel
next to the radar (desktop) or below (mobile). Uses --ds-* tokens
so it composes in both themes. */
.kora-radar-section { padding: clamp(3.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 4rem); position: relative; }
.kora-radar-section .wg-inner { max-width: 1280px; margin: 0 auto; }
.radar-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
gap: 48px;
align-items: center;
margin-top: 2.5rem;
}
.radar { position: relative; aspect-ratio: 1; max-width: 620px; margin: 0 auto; width: 100%; }
.radar svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Proof panel — real screenshot for Shipped/Beta capabilities,
styled placeholder for Roadmap. Right of the radar on desktop,
below on mobile. */
.radar-proof-panel {
background: var(--ds-bg-card);
border: 1px solid var(--ds-border);
border-radius: 16px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.radar-proof-panel .rp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.68rem;
font-family: var(--ds-font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
width: fit-content;
transition: background-color 0.2s ease, color 0.2s ease;
}
.radar-proof-panel .rp-badge::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.radar-proof-panel .rp-badge.shipped { background: rgba(165, 180, 252, 0.14); color: #a5b4fc; }
.radar-proof-panel .rp-badge.beta { background: rgba(165, 180, 252, 0.16); color: #a5b4fc; }
.radar-proof-panel .rp-badge.roadmap { background: rgba(148, 163, 184, 0.14); color: var(--ds-text-secondary); }
.radar-proof-panel .rp-title {
margin: 0;
font-size: clamp(1.05rem, 1.1vw, 1.2rem);
font-family: var(--ds-font-display);
color: var(--ds-text);
font-weight: 600;
letter-spacing: 0;
line-height: 1.25;
transition: opacity 0.18s ease;
}
.radar-proof-panel .rp-desc {
margin: 0;
font-size: 0.85rem;
font-family: var(--ds-font-display);
color: var(--ds-text-secondary);
line-height: 1.55;
transition: opacity 0.18s ease;
}
.radar-proof-panel .rp-proof {
margin-top: 4px;
border-radius: 10px;
overflow: hidden;
background: var(--ds-bg-secondary);
border: 1px solid var(--ds-border);
aspect-ratio: 16 / 10;
position: relative;
transition: opacity 0.18s ease;
}
.radar-proof-panel .rp-proof img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
}
.radar-proof-panel .rp-mockup {
position: absolute; inset: 0;
display: flex; flex-direction: column;
padding: 16px; gap: 10px;
background-image:
linear-gradient(to right, rgba(129,140,248,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(129,140,248,0.06) 1px, transparent 1px);
background-size: 18px 18px;
}
.radar-proof-panel .rp-mockup-bar {
height: 10px; border-radius: 999px;
background: linear-gradient(90deg, rgba(129,140,248,0.28), rgba(129,140,248,0.08));
}
.radar-proof-panel .rp-mockup-bar.short { width: 40%; }
.radar-proof-panel .rp-mockup-bar.med { width: 62%; }
.radar-proof-panel .rp-mockup-bar.long { width: 88%; }
.radar-proof-panel .rp-mockup-blocks {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; margin-top: auto;
}
.radar-proof-panel .rp-mockup-blocks > div {
aspect-ratio: 1; border-radius: 6px;
background: linear-gradient(135deg, rgba(129,140,248,0.22), rgba(165, 180, 252,0.1));
border: 1px solid rgba(129,140,248,0.25);
}
.radar-proof-panel .rp-mockup-label {
position: absolute; bottom: 10px; right: 12px;
font-family: var(--ds-font-mono);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ds-text-dim);
}
.radar-proof-panel .rp-caption {
margin: 0;
font-size: 0.78rem;
font-family: var(--ds-font-display);
color: var(--ds-text-dim);
line-height: 1.5;
transition: opacity 0.18s ease;
}
.radar .node { cursor: pointer; }
.radar .node-hit { fill: transparent; pointer-events: all; }
.radar .node-medallion {
fill: var(--ds-bg-card);
stroke: rgba(129, 140, 248, 0.55);
stroke-width: 1.25;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
transition: stroke 0.2s ease, fill 0.2s ease, filter 0.2s ease;
filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.55));
}
.radar .node-glow {
fill: #818cf8; opacity: 0.4; pointer-events: none;
transform-box: fill-box; transform-origin: center;
animation: kora-radar-pulse 2.6s ease-out infinite;
}
.radar .node-glow.b { animation-delay: -1.3s; fill: #a5b4fc; }
@keyframes kora-radar-pulse {
0% { opacity: 0.5; transform: scale(1); }
70% { opacity: 0; transform: scale(2.4); }
100% { opacity: 0; transform: scale(2.4); }
}
.radar .node-burst {
fill: none; stroke: #a5b4fc; stroke-width: 2; opacity: 0;
pointer-events: none; transform-box: fill-box; transform-origin: center;
}
.radar .node.is-bursting .node-burst {
animation: kora-radar-burst 0.7s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes kora-radar-burst {
0% { opacity: 1; transform: scale(0.4); stroke-width: 3; }
100% { opacity: 0; transform: scale(2.8); stroke-width: 0.5; }
}
.radar .node-icon {
color: #c7d2fe;
transition: color 0.2s ease, transform 0.35s cubic-bezier(.25,.8,.3,1);
pointer-events: none; transform-box: fill-box; transform-origin: center;
}
[data-theme="light"] .radar .node-icon { color: var(--ds-indigo); }
.radar .node-label {
font-family: var(--ds-font-mono); font-size: 12px;
fill: var(--ds-text-secondary); letter-spacing: 0.08em;
text-transform: uppercase; font-weight: 500;
transition: fill 0.2s ease; pointer-events: none;
}
.radar .node:hover .node-medallion {
stroke: #c7d2fe;
filter: drop-shadow(0 0 14px rgba(199, 210, 254, 0.9));
}
.radar .node:hover .node-icon { color: var(--ds-text); }
.radar .node:hover .node-label { fill: var(--ds-text); }
.radar .node.is-active .node-medallion {
fill: rgba(165, 180, 252, 0.18);
stroke: #a5b4fc; stroke-width: 1.75;
filter: drop-shadow(0 0 18px rgba(165, 180, 252, 0.9));
animation: kora-radar-medallion-pulse 2.2s ease-in-out infinite;
}
@keyframes kora-radar-medallion-pulse {
0%, 100% { filter: drop-shadow(0 0 14px rgba(165, 180, 252, 0.7)); }
50% { filter: drop-shadow(0 0 22px rgba(165, 180, 252, 1)); }
}
.radar .node.is-active .node-icon {
/* No transform animation here — the icon's positioning comes from
the SVG transform attribute, and a CSS transform animation would
override it, teleporting the icon to the radar center for the
animation duration. Active state is still signalled by the
medallion color + glow pulse + click-burst. */
color: var(--ds-text);
}
.radar .node.is-active .node-label { fill: var(--ds-text); }
/* Center shield + halo — fills the polygon's empty interior so the
radar reads as a KoraSafe object, not a blank chart. Sits behind
the node medallions (rendered later in DOM). Pointer-events off so
it never intercepts clicks on nodes or the polygon. */
.radar .kora-radar-center { pointer-events: none; }
.radar .kora-radar-halo {
transform-box: fill-box;
transform-origin: center;
animation: kora-radar-halo-breathe 4.8s ease-in-out infinite;
}
.radar .kora-radar-ring-pulse {
transform-box: fill-box;
transform-origin: center;
animation: kora-radar-ring-expand 4.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.radar .kora-radar-ring-pulse.b { animation-delay: -2.4s; }
.radar .kora-radar-shield-float {
transform-box: fill-box;
transform-origin: center;
animation: kora-radar-shield-float 5.6s ease-in-out infinite;
}
.radar .kora-radar-K {
transform-box: fill-box;
transform-origin: center;
animation: kora-radar-k-glow 3.2s ease-in-out infinite;
}
.radar .kora-radar-shield-node {
transform-box: fill-box;
transform-origin: center;
animation: kora-radar-node-glow 2.4s ease-in-out infinite;
}
.radar .kora-radar-shield-node.n2 { animation-delay: 0.6s; }
.radar .kora-radar-shield-node.n3 { animation-delay: 1.2s; }
@keyframes kora-radar-halo-breathe {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.06); }
}
@keyframes kora-radar-ring-expand {
0% { opacity: 0.55; transform: scale(0.72); }
70% { opacity: 0; transform: scale(1.35); }
100% { opacity: 0; transform: scale(1.35); }
}
@keyframes kora-radar-shield-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes kora-radar-k-glow {
0%, 100% { filter: drop-shadow(0 0 3px rgba(196, 181, 253, 0.55)); }
50% { filter: drop-shadow(0 0 9px rgba(196, 181, 253, 0.95)); }
}
@keyframes kora-radar-node-glow {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.radar .kora-radar-halo,
.radar .kora-radar-ring-pulse,
.radar .kora-radar-shield-float,
.radar .kora-radar-K,
.radar .kora-radar-shield-node { animation: none !important; }
}
.radar .node.is-active .node-glow { fill: #a5b4fc; animation-duration: 1.6s; }
.radar .node.is-active .node-glow.b { fill: #818cf8; }
@media (max-width: 960px) {
.radar-wrap { grid-template-columns: 1fr; gap: 28px; }
.radar { max-width: 520px; }
.radar-proof-panel { margin: 0 auto; max-width: 520px; width: 100%; padding: 18px; }
}
/* On phones, the screenshot/mockup frame is the thing that eats
screen real estate. Drop it at phone width but keep the compact
text card (badge + title + description + caption) so tapping a
node still feels interactive. */
@media (max-width: 640px) {
.radar-proof-panel { width: auto; max-width: 100%; margin: 0; }
.radar-proof-panel .rp-proof { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.radar .node-glow, .radar .node-medallion { animation: none !important; }
}
/* Final CTA band lives in /js/footer.js?v=v6-hub-20260521-tm so every page renders the same
merged waitlist CTA section. Home no longer carries
a custom one. */
/* Atmospheric SVG banner behind the whole hero. Full-bleed, sits
below everything, never captures pointer events. Subtle drift on
the rings keeps it from feeling static without competing with the
foreground demo animation. Collapses in reduced-motion. */
.hero-section { position: relative; }
/* Override the homepage stylesheet cap of 64rem on .hero-inner — the two-col
banner needs the full viewport width up to 1600px so the video
and text have room to breathe like Glean. */
.hero-section .hero-inner {
position: relative;
z-index: 1;
max-width: none;
padding: 0;
text-align: left;
}
/* Push the hero section's vertical padding up a touch for more
airy/Glean-style breathing room. Min-height ensures the banner
owns a real chunk of the viewport instead of hugging content. */
.hero-section {
padding: clamp(3rem, 6vw, 7rem) 0 clamp(2rem, 4vw, 4rem);
min-height: clamp(480px, 72vh, 820px);
}
/* Banner-scale title typography — bigger than the generic hero
title on other pages. Scales fluidly. */
.hero-section .hero-title {
font-size: clamp(2.6rem, 5.2vw, 5.5rem);
line-height: 1.03;
letter-spacing: 0;
margin-bottom: clamp(1rem, 1.8vw, 1.75rem);
}
.hero-section .hero-subtitle {
font-size: clamp(1.05rem, 1.35vw, 1.3rem);
max-width: 40rem;
margin-bottom: 0.5rem;
line-height: 1.55;
}
.hero-col-left .hero-subtitle { margin-left: 0; margin-right: 0; }
/* Bump background art from 0.85 to full opacity — the atmospheric
composition now actually registers on the page. */
.hero-bg-art { opacity: 1; }
.hero-bg-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
.hero-bg-art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
.hero-bg-art { display: none; }
.hero-ticker-section { display: none !important; }
.hero-ticker-section .homepage-container { flex-wrap: wrap !important; gap: 10px !important; }
.hero-ticker-label { width: 100%; }
.ds-ticker { width: 100%; max-width: 100%; contain: paint; }
}
.hero-bg-art svg > g[transform*="translate(140 620)"] {
animation: hero-bg-ring-drift 60s linear infinite;
transform-origin: 140px 620px;
transform-box: fill-box;
}
.hero-bg-art svg > g[transform*="translate(1420 110)"] {
animation: hero-bg-ring-drift 85s linear infinite reverse;
transform-origin: 1420px 110px;
transform-box: fill-box;
}
@keyframes hero-bg-ring-drift { to { transform: rotate(360deg); } }
[data-theme="light"] .hero-bg-art { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
.hero-bg-art svg > g { animation: none !important; }
}
/* Hero two-column banner — fluid across phone → ultrawide.
- grid auto-fit + minmax() reflows naturally: two columns on wide
viewports, stacks when either column would drop below ~360px.
No breakpoint needed for the layout split.
- spacing values are clamp()ed so padding, gap, and margins scale
continuously with viewport width (no hard-coded pixel jumps).
- max-width caps at 1440px on ultrawide but stays fluid below. */
.hero-two-col {
display: grid;
/* Video column gets 1.5× the text column so the demo renders at
close to its original ~880px width on wide screens — Glean-style.
Single column below 48em. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: clamp(2rem, 4vw, 5rem);
align-items: center;
max-width: min(1600px, 100%);
margin: 0 auto clamp(1.5rem, 3vw, 3rem);
padding: 0 clamp(1rem, 4vw, 3rem);
}
@media (max-width: 48em) {
.hero-two-col { grid-template-columns: 1fr; }
}
.hero-col-left, .hero-col-right { min-width: 0; }
/* Visual order: text first (left), video second (right). DOM order
has video first because moving its 200-line SVG is risky, so
swap purely with grid 'order'. Text enters slightly earlier. */
.hero-col-left {
order: 1;
text-align: left;
opacity: 0;
transform: translateY(10px);
animation: hero-col-in 0.9s var(--ds-ease) 0.12s forwards;
}
.hero-col-right {
order: 2;
opacity: 0;
transform: translateY(10px);
animation: hero-col-in 0.9s var(--ds-ease) 0.28s forwards;
}
/* Flip margin too — video aligns to the right edge of its column */
.hero-col-right .hero-video { margin-inline: auto 0; }
/* Override the old centered title/subtitle/CTA styles inside the left col */
.hero-col-left .hero-title,
.hero-col-left .hero-subtitle {
text-align: left;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.hero-col-left .hero-cta-row {
justify-content: flex-start !important;
margin: clamp(1.25rem, 2.4vw, 1.75rem) 0 0 !important;
}
.hero-col-left .hero-cta-note {
text-align: left;
}
/* The existing .hero-video is 880×495 centered — reflow for the right col.
Fluid width via clamp() + aspect-ratio so height scales with width
instead of being locked at 495px on narrow viewports. Parent column
handles entrance; video just floats gently. */
.hero-col-right .hero-video {
width: 100%;
/* Fills the right column fully — no max-width cap so the demo
scales up to ~820px on 1520px viewports and even wider on
ultrawide. Aspect-ratio keeps the height proportional. */
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
opacity: 1;
transform: none;
animation: hv-video-float 8s ease-in-out 1.2s infinite;
}
@keyframes hero-col-in { to { opacity: 1; transform: translateY(0); } }
@keyframes hv-video-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* When the grid has stacked (columns too narrow for side-by-side),
re-center the text + video. The grid already reflows at ≈720px
effective viewport, so this em-based query catches the stacked state. */
@media (max-width: 48em) {
.hero-col-left,
.hero-col-left .hero-title,
.hero-col-left .hero-subtitle,
.hero-col-left .hero-cta-note { text-align: center; }
.hero-col-left .hero-cta-row { justify-content: center !important; }
.hero-col-right .hero-video { margin-inline-start: auto; margin-inline-end: auto; }
}
/* ── /index.html visual classes added 2026-05-23 per #3890 ── */
/* Hero animation delays (6 unique values for the staggered hero entrance) */
.hero-delay-115 { animation-delay: 1.15s; }
.hero-delay-125 { animation-delay: 1.25s; }
.hero-delay-130 { animation-delay: 1.30s; }
.hero-delay-142 { animation-delay: 1.42s; }
.hero-delay-154 { animation-delay: 1.54s; }
.hero-delay-166 { animation-delay: 1.66s; }
/* kora-title-main span styling */
.kora-title-main { color: var(--ds-text); opacity: 0.9; white-space: nowrap; }
/* Hero CTA row layout (the row that holds the primary CTA + note) */
.hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px auto 0; }
/* Hero CTA primary button styling (was inline) */
.hero-cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 30px;
border-radius: var(--ds-radius-md);
background: var(--ds-cta-gradient);
color: #fff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
box-shadow: var(--ds-cta-shadow);
transition: transform 0.2s, box-shadow 0.2s;
}
.hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(99, 102, 241, 0.4); }
[data-theme="light"] .hero-cta-primary { background: var(--ds-cta-gradient); color: #fff; }
/* Hero CTA note (small text below the CTA) */
.hero-cta-note { margin-top: 10px; font-size: 12px; color: var(--ds-text-dim); }
/* Stat card border-radius (was inline on each of 4 stat cards) */
.stat-card { border-radius: var(--ds-radius-xl); }
/* Hero ticker layout */
.hero-ticker-section { padding: 28px 0 20px; }
.hero-ticker-row { display: flex; align-items: center; gap: 22px; flex-wrap: nowrap; }
.hero-ticker-label {
flex-shrink: 0;
font-family: var(--ds-font-display);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ds-text-muted);
white-space: nowrap;
}
.hero-ticker-sep { margin-left: 8px; color: rgba(139, 92, 246, 0.45); }
.hero-ticker-track-wrap { flex: 1; min-width: 0; }
.hero-ticker-pill { border-color: rgba(165, 180, 252, 0.30); color: var(--ds-text); }
/* Product sketch container layout */
.product-sketch--centered { margin: 3.5rem auto 0; width: 100%; max-width: 64rem; }
.ps-row--between { justify-content: space-between; }
.ps-sub--header { margin-bottom: 6px; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; }
/* Surfaces section (Editor + browser surfaces) */
.idx-surfaces-section { padding: 5rem 0; }
.idx-surfaces-head { margin-top: 4rem; text-align: center; }
.idx-surfaces-sub { max-width: 640px; margin: 14px auto 0; color: var(--ds-text-muted); font-size: 16px; line-height: 1.6; }
.idx-surfaces-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 36px; }
.idx-surface-card {
display: block;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
text-decoration: none;
color: inherit;
transition: border-color 0.18s, transform 0.18s;
}
.idx-surface-card:hover {
border-color: rgba(167, 139, 250, 0.45);
transform: translateY(-2px);
}
.idx-surface-card-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a78bfa;
margin-bottom: 10px;
}
.idx-surface-card h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
.idx-surface-card p { font-size: 13.5px; line-height: 1.55; color: var(--ds-text-muted); margin: 0; }
.idx-surface-card-cta { display: inline-block; margin-top: 14px; font-size: 12.5px; color: #c4b5fd; font-weight: 500; }
/* Light-mode remap: theme.js auto-darkens inline color:#a78bfa/#c4b5fd; preserve that for these classes. */
[data-theme="light"] .idx-surface-card-eyebrow { color: #6d28d9; }
[data-theme="light"] .idx-surface-card-cta { color: #4338ca; }