/* ═══════════════════════════════════════════════════════════
DESIGN SYSTEM TOKENS
Single source of truth: design-system/design-system.md
═══════════════════════════════════════════════════════════ */
:root {
/* Spacing (8px grid; --space-1 is the 4px half-step) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* Vertical clearance below the fixed nav for any hero/first-section. */
--hero-top: 140px;
/* Typography */
--font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.25rem;
--text-xl: 1.5rem;
--text-2xl: 2rem;
--text-3xl: 2.5rem;
--text-4xl: 3rem;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* Backgrounds & surfaces */
--color-bg: #0C0A12;
--color-surface: #13101E;
--color-surface-2: #1B1628;
--color-surface-hover: #1F1A30;
--color-surface-active: #251E38;
/* Borders */
--color-border: #2A2240;
--color-border-strong: #3D3060;
/* Text */
--color-text: #ECE6F5;
--color-text-2: #9B8FBA;
--color-text-muted: #877CAA;
/* Brand */
--color-brand: #8530D1;
--color-brand-light: #A855F7;
--color-brand-subtle: #1C1231;
--color-brand-hover: #9B45E8;
--color-brand-active: #7228B8;
--color-brand-text: #F0EAF8;
--color-brand-light-text: #0C0A12;
--color-brand-dim: #29193E;
/* Semantic */
--color-success: #34D399;
--color-warning: #FBBF24;
--color-error: #F87171;
/* Focus */
--color-focus-ring: rgba(168, 85, 247, 0.5);
/* Brand glow rgbas — derived from --color-brand-light (168,85,247)
for use in luminous shadows, gradients, and translucent fills */
--brand-glow-04: rgba(168, 85, 247, 0.04);
--brand-glow-08: rgba(168, 85, 247, 0.08);
--brand-glow-12: rgba(168, 85, 247, 0.12);
--brand-glow-18: rgba(168, 85, 247, 0.18);
--brand-glow-25: rgba(168, 85, 247, 0.25);
--brand-glow-35: rgba(168, 85, 247, 0.35);
--brand-glow-50: rgba(168, 85, 247, 0.5);
/* Shadows — luminous glow style (design-system.md §Shadows) */
--shadow-sm: 0 0 0 1px rgba(133, 48, 209, 0.10);
--shadow-md: 0 0 0 1px rgba(133, 48, 209, 0.15), 0 0 20px rgba(133, 48, 209, 0.08);
--shadow-lg: 0 0 0 1px rgba(133, 48, 209, 0.22), 0 0 40px rgba(133, 48, 209, 0.12), 0 0 80px rgba(133, 48, 209, 0.06);
/* Transitions */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 320ms ease;
/* Radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Layout */
--maxw: 1240px;
}
/* ═══════════════════════════════════════════════════════════
RESET
═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
line-height: var(--leading-normal);
font-size: var(--text-base);
font-weight: var(--weight-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--color-brand); color: var(--color-brand-text); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); border-radius: var(--radius-sm); }
/* Background atmosphere — luminous brand wash */
body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(114, 40, 184, 0.18), transparent 60%),
radial-gradient(ellipse 900px 500px at 10% 30%, var(--brand-glow-08), transparent 60%),
radial-gradient(ellipse 800px 800px at 50% 120%, rgba(114, 40, 184, 0.10), transparent 60%);
z-index: -2;
pointer-events: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(168, 85, 247, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 900px 700px at 50% 20%, #000, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 900px 700px at 50% 20%, #000, transparent 80%);
z-index: -1;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════
LAYOUT PRIMITIVES
═══════════════════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--space-8); }
.eyebrow {
font-family: var(--font-mono);
font-size: 15px;
font-weight: var(--weight-medium);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-brand-light);
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.eyebrow::before {
content: "";
width: 6px; height: 6px;
background: var(--color-brand-light);
border-radius: var(--radius-full);
box-shadow: 0 0 12px var(--brand-glow-50);
}
/* Eyebrow modifiers — combine freely (e.g. `eyebrow eyebrow--plain eyebrow--compact`).
The eyebrow owns the gap to the heading it introduces: 24px standard, 12px compact.
Headings must NOT add their own margin-top, or the two would stack. */
.eyebrow--compact { font-size: 12px; letter-spacing: 0.16em; margin-bottom: var(--space-3); }
.eyebrow--plain { gap: 0; }
.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--color-text-muted); }
.eyebrow--warning { color: var(--color-warning); }
/* Cards that space their children with a flex `gap` shouldn't also carry the eyebrow margin. */
.roi-out-card .eyebrow,
.resource-card .eyebrow { margin-bottom: 0; }
.h1 {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-text);
}
.h2 {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2rem, 4vw, 3rem);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
color: var(--color-text);
}
.h3 {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: clamp(1.25rem, 2vw, var(--text-xl));
line-height: var(--leading-snug);
letter-spacing: -0.01em;
color: var(--color-text);
}
.h4 {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
line-height: var(--leading-snug);
letter-spacing: -0.005em;
color: var(--color-text);
}
.lead {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text-2);
font-weight: var(--weight-normal);
}
.muted { color: var(--color-text-muted); }
em.accent {
font-style: italic;
color: var(--color-brand-light);
font-weight: var(--weight-normal);
}
/* ═══════════════════════════════════════════════════════════
NAV
═══════════════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: #0A0810;
border-bottom: 1px solid var(--color-border);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.5),
0 1px 0 var(--brand-glow-18);
transition: box-shadow var(--transition-slow), background var(--transition-slow);
}
.nav.scrolled {
background: #07050C;
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.65),
0 1px 0 var(--brand-glow-25);
}
.nav-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: var(--space-6) var(--space-8);
display: flex;
align-items: center;
gap: var(--space-10);
}
.logo {
display: inline-flex;
align-items: center;
margin-right: var(--space-12);
}
.logo img {
height: 30px;
width: auto;
display: block;
}
.nav-links {
display: flex;
gap: var(--space-8);
flex: 1;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links > .nav-item { position: relative; }
.nav-links a,
.nav-trigger {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
transition: color var(--transition-base);
}
.nav-links a:hover,
.nav-trigger:hover,
.nav-item.has-submenu:focus-within > .nav-trigger {
color: var(--color-brand-light);
}
.nav-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.nav-caret {
font-size: 10px;
line-height: 1;
transition: transform var(--transition-base);
}
.nav-item.has-submenu:hover .nav-caret,
.nav-item.has-submenu:focus-within .nav-caret {
transform: rotate(180deg);
}
.nav-submenu {
position: absolute;
top: 100%;
left: calc(-1 * var(--space-3));
margin: 0;
padding: var(--space-2);
min-width: 220px;
list-style: none;
background: rgba(19, 16, 30, 0.96);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.nav-item.has-submenu:hover .nav-submenu,
.nav-item.has-submenu:focus-within .nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-submenu a {
display: block;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
white-space: nowrap;
}
.nav-submenu a:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.nav-ctas { display: flex; gap: var(--space-2); align-items: center; }
/* Hamburger — hidden on desktop, shown ≤960px via the existing media query */
.nav-hamburger {
display: none;
margin-left: auto;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
position: relative;
z-index: 110;
}
.nav-hamburger span {
display: block;
width: 22px;
height: 2px;
margin: 5px auto;
background: var(--color-text);
border-radius: 2px;
transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav.is-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
font-family: var(--font-sans);
border-radius: var(--radius-full);
transition: all var(--transition-base);
white-space: nowrap;
}
.btn-ghost { color: var(--color-text-2); }
.btn-ghost:hover { color: var(--color-text); }
.btn-outline {
color: var(--color-text);
border: 1px solid var(--color-border-strong);
background: var(--brand-glow-04);
}
.btn-outline:hover { border-color: var(--color-brand-light); background: var(--brand-glow-12); }
.btn-primary {
color: var(--color-brand-light-text);
background: linear-gradient(180deg, #C084FC 0%, var(--color-brand-light) 100%);
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.5), 0 8px 24px -6px var(--brand-glow-35), inset 0 1px 0 rgba(255,255,255,0.3);
font-weight: var(--weight-semibold);
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.6), 0 12px 32px -4px var(--brand-glow-35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn .arrow { transition: transform 250ms ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* ═══════════════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════════════ */
.hero {
padding: var(--hero-top) 0 var(--space-24);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-16);
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 6px 14px 6px 6px;
background: var(--brand-glow-08);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-text-2);
margin-bottom: var(--space-8);
font-weight: var(--weight-medium);
line-height: 1.4;
animation: fadeUp 0.8s 0.05s both;
}
/* The badge can hold a link with a tag chip + label; keep them aligned and
let the label wrap as a block while the trailing arrow stays attached. */
.hero-badge a {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: inherit;
}
.hero-badge-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--color-brand-light);
color: var(--color-brand-light-text);
padding: 3px var(--space-2);
border-radius: var(--radius-full);
flex-shrink: 0;
}
.hero h1 {
margin-bottom: var(--space-8);
animation: fadeUp 0.9s 0.1s both;
text-wrap: balance;
font-size: clamp(2rem, 4.5vw, 3.5rem);
}
.hero h1 .line { display: block; text-wrap: balance; }
.hero h1 .big-statement {
font-style: italic;
color: var(--color-brand-light);
font-weight: var(--weight-normal);
}
.hero-sub {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text-2);
max-width: 560px;
margin-bottom: var(--space-10);
animation: fadeUp 0.9s 0.2s both;
}
.hero-sub strong { color: var(--color-text); font-weight: var(--weight-medium); }
.hero-ctas {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
align-items: center;
animation: fadeUp 0.9s 0.3s both;
}
.hero-ctas .btn {
padding: 13px 22px;
font-size: 15px;
}
/* Single-column hero content well — used by simple subpage heroes
(About, Platform, Inspector, Developers, etc.). Page-specific hero classes
like .whitepaper-hero / .casestudy-hero / .oss-hero own their own layout. */
.hero-inner { max-width: 820px; }
.hero-inner .h1 { margin-top: var(--space-6); }
.hero-inner .hero-sub { margin-top: var(--space-6); max-width: 720px; }
.hero-inner .hero-ctas { margin-top: var(--space-8); }
.hero-stats {
display: flex;
gap: var(--space-8);
margin-top: 56px;
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
animation: fadeUp 0.9s 0.4s both;
}
.hero-stat-val {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: var(--text-3xl);
line-height: 1;
color: var(--color-text);
letter-spacing: -0.02em;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.hero-stat-val span { font-size: 0.8em; color: var(--color-brand-light); font-weight: var(--weight-medium); }
.hero-stat-lbl {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: 1.35;
max-width: 140px;
}
/* Dependency graph visualization */
.graph-stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 520px;
margin-left: auto;
animation: fadeUp 1.2s 0.4s both;
}
.graph-stage svg { width: 100%; height: 100%; overflow: visible; }
.graph-frame {
position: absolute;
inset: -1px;
border-radius: var(--radius-xl);
background:
radial-gradient(ellipse at 50% 50%, var(--brand-glow-18), transparent 55%),
linear-gradient(180deg, rgba(27, 22, 40, 0.8), rgba(19, 16, 30, 0.6));
border: 1px solid var(--color-border);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.03),
var(--shadow-lg);
backdrop-filter: blur(8px);
}
.graph-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 18px var(--space-6);
pointer-events: none;
font-family: var(--font-mono);
font-size: 11px;
}
.graph-top-row {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.graph-dots {
display: flex;
gap: 6px;
}
.graph-dots span {
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: rgba(168, 85, 247, 0.3);
}
.graph-dots span:last-child {
background: var(--color-error);
box-shadow: 0 0 8px var(--color-error);
animation: pulse-crit 2s ease-in-out infinite;
}
.graph-bottom-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
color: var(--color-text-muted);
}
.graph-label {
background: rgba(19, 16, 30, 0.8);
padding: 4px var(--space-2);
border-radius: 4px;
border: 1px solid var(--color-border);
}
.graph-label.alert { color: var(--color-error); border-color: rgba(248, 113, 113, 0.3); }
/* Alert card popover */
.graph-alert-card {
position: absolute;
top: 22%;
right: -28px;
background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid rgba(248, 113, 113, 0.3);
border-radius: var(--radius-md);
padding: var(--space-3) 14px;
width: 220px;
font-family: var(--font-mono);
font-size: 11px;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(248, 113, 113, 0.15);
animation: fadeInCard 1s 1.2s both;
z-index: 2;
}
.graph-alert-head {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
color: var(--color-error);
font-weight: var(--weight-semibold);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.graph-alert-head::before {
content: "";
width: 8px; height: 8px;
background: var(--color-error);
border-radius: var(--radius-full);
box-shadow: 0 0 8px var(--color-error);
animation: pulse-crit 1.2s ease-in-out infinite;
}
.graph-alert-title {
color: var(--color-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
}
.graph-alert-meta {
color: var(--color-text-muted);
line-height: 1.4;
font-size: 10px;
}
.graph-alert-meta span { color: var(--color-brand-light); }
.graph-score-card {
position: absolute;
bottom: 22%;
left: -28px;
background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
padding: var(--space-3) 14px;
width: 180px;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), var(--shadow-md);
animation: fadeInCard 1s 1.6s both;
z-index: 2;
}
.graph-score-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand-light);
margin-bottom: 6px;
}
.graph-score-val {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: 28px;
color: var(--color-text);
line-height: 1;
margin-bottom: var(--space-2);
font-variant-numeric: tabular-nums;
}
.graph-score-val span { color: var(--color-text-muted); font-size: 0.5em; font-weight: var(--weight-medium); }
.graph-score-bar {
height: 3px;
background: rgba(168, 85, 247, 0.15);
border-radius: 2px;
overflow: hidden;
}
.graph-score-bar-fill {
height: 100%;
width: 84%;
background: linear-gradient(90deg, var(--color-brand-light), var(--color-warning));
border-radius: 2px;
}
/* ═══════════════════════════════════════════════════════════
INCIDENT TICKER
═══════════════════════════════════════════════════════════ */
.ticker-section {
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.4), rgba(27, 22, 40, 0.2));
padding: var(--space-6) 0;
overflow: hidden;
position: relative;
}
.ticker-section::before, .ticker-section::after {
content: "";
position: absolute; top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.ticker-section::before { left: 0; background: linear-gradient(90deg, var(--color-bg), transparent); }
.ticker-section::after { right: 0; background: linear-gradient(270deg, var(--color-bg), transparent); }
.ticker-incident-label {
position: absolute;
left: var(--space-8);
top: 50%;
transform: translateY(-50%);
background: var(--color-bg);
padding: var(--space-2) var(--space-4) var(--space-2) 0;
z-index: 3;
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-error);
display: flex;
align-items: center;
gap: var(--space-3);
}
.ticker-incident-label::before {
content: "";
width: 8px; height: 8px;
background: var(--color-error);
border-radius: var(--radius-full);
box-shadow: 0 0 10px var(--color-error);
animation: pulse-crit 1.2s ease-in-out infinite;
}
.ticker-track {
display: flex;
width: max-content;
/* The ticker-fill JS (main.js) measures content vs. viewport, clones the
list to cover the screen, and sets the real animation-duration for a
constant scroll speed. The 60s here is only a fallback if that JS
doesn't run. */
animation: ticker 60s linear infinite;
/* No left padding and no flex `gap`. An animated padding offset scrolls with
the track and reappears as a gap after the last item on every loop. And a
flex `gap` isn't added after the last item, so the duplicated-list seam
would be half-a-gap off. Instead each .ticker-item owns its trailing space
via margin-right, so the track is *exactly* two identical copies and a
plain -50% loops seamlessly. The opaque label + edge fade mask the left. */
}
.ticker-item {
display: flex;
align-items: center;
gap: 14px;
/* Trailing space lives on the item (not flex `gap`) so every copy is
identical — see .ticker-track. */
margin-right: var(--space-12);
font-family: var(--font-mono);
font-size: 13px;
color: var(--color-text-2);
white-space: nowrap;
}
.ticker-item-date {
color: var(--color-text-muted);
font-size: 11px;
opacity: 0.8;
}
.ticker-item-title {
color: var(--color-text);
font-weight: var(--weight-medium);
}
.ticker-item-tag {
padding: 2px var(--space-2);
border-radius: 4px;
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(248, 113, 113, 0.12);
color: var(--color-error);
border: 1px solid rgba(248, 113, 113, 0.2);
}
.ticker-item-tag.worm { background: rgba(251, 191, 36, 0.12); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.2); }
/* Small viewports: stack the label above the track so the feed scrolls
beneath it instead of being covered by the overlaid label. */
@media (max-width: 640px) {
.ticker-incident-label {
position: static;
transform: none;
padding: 0 0 var(--space-4) 0;
margin-left: var(--space-6);
}
.ticker-track {
padding-left: var(--space-6);
}
}
/* ═══════════════════════════════════════════════════════════
SECTIONS COMMON
═══════════════════════════════════════════════════════════ */
section { padding: 120px 0; }
/* Tightens the gap to the preceding section when two read as one group. */
.section--tight-top { padding-top: 60px; }
.section-head {
max-width: 760px;
margin-bottom: var(--space-16);
}
.section-head .lead { margin-top: var(--space-6); max-width: 640px; }
.section-head .hero-ctas { margin-top: var(--space-8); }
/* ═══════════════════════════════════════════════════════════
PROBLEM DIAGRAM
═══════════════════════════════════════════════════════════ */
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-20);
align-items: center;
}
.diagram-stage {
position: relative;
padding: var(--space-8);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.6), rgba(19, 16, 30, 0.4));
border: 1px solid var(--color-border);
aspect-ratio: 1 / 1;
}
.diagram-ring {
border-radius: 50%;
border: 1px dashed rgba(168, 85, 247, 0.25);
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.diagram-ring.r1 { width: 35%; height: 35%; }
.diagram-ring.r2 { width: 62%; height: 62%; }
.diagram-ring.r3 { width: 88%; height: 88%; }
.ring-tag {
position: absolute;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: var(--space-1) var(--space-2);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 4px;
}
.ring-tag.r1 { top: 35%; right: 35%; color: var(--color-brand-light); }
.ring-tag.r2 { top: 22%; right: 22%; color: var(--color-text-2); }
.ring-tag.r3 { top: 9%; right: 9%; color: var(--color-text-muted); }
.diagram-app {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 72px; height: 72px;
background: linear-gradient(180deg, var(--color-brand-light), var(--color-brand-active));
border-radius: var(--radius-lg);
display: grid; place-items: center;
box-shadow: 0 0 40px var(--brand-glow-35);
z-index: 4;
}
.diagram-app svg { width: 32px; height: 32px; color: var(--color-text); }
.diagram-app-label {
position: absolute;
top: calc(50% + 52px); left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-brand-light);
white-space: nowrap;
}
.node-dot {
position: absolute;
width: 10px; height: 10px;
border-radius: var(--radius-full);
background: var(--color-brand-light);
box-shadow: 0 0 8px var(--brand-glow-35);
transform: translate(-50%, -50%);
}
.node-dot.warn { background: var(--color-warning); box-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
.node-dot.crit { background: var(--color-error); box-shadow: 0 0 10px rgba(248, 113, 113, 0.8); animation: pulse-crit 1.8s ease-in-out infinite; }
.node-dot.transitive { width: 6px; height: 6px; background: var(--color-text-muted); box-shadow: none; opacity: 0.6; }
.diagram-callout {
position: absolute;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text);
box-shadow: 0 12px 24px -6px rgba(0,0,0,0.4), var(--shadow-sm);
}
.diagram-callout::before {
content: "";
position: absolute;
width: 20px; height: 1px;
background: var(--color-border-strong);
}
.diagram-callout-stat {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: 22px;
line-height: 1;
color: var(--color-brand-light);
margin-bottom: 2px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.diagram-callout-stat + span {
font-size: 10px;
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.diagram-cb-1 { top: 12%; right: -20px; }
.diagram-cb-1::before { top: 50%; left: -24px; }
.diagram-cb-2 { bottom: 12%; left: -20px; }
.diagram-cb-2::before { top: 50%; right: -24px; }
/* Once the problem grid is single-column, keep the ring diagram from
ballooning into a giant square. */
@media (max-width: 960px) {
.diagram-stage { width: 100%; max-width: 420px; margin: 0 auto; }
}
/* On phones the side callouts sit on top of the rings/dots and only repeat
the copy beside them — drop them so the diagram reads cleanly. */
@media (max-width: 600px) {
.diagram-cb-1,
.diagram-cb-2 { display: none; }
}
/* The center "app" tile is a fixed 72px; once the stage scales down on a
phone it grows relative to the rings and covers the "Direct" ring tag.
Shrink it (and its label offset) to keep it inside the inner ring. */
@media (max-width: 520px) {
.diagram-app { width: 48px; height: 48px; }
.diagram-app svg { width: 22px; height: 22px; }
.diagram-app-label { top: calc(50% + 38px); }
}
.problem-copy h2 { margin-bottom: var(--space-6); }
.problem-copy .lead { margin-bottom: var(--space-8); }
.problem-points { display: flex; flex-direction: column; gap: var(--space-6); }
.problem-point {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
}
.problem-point-num {
font-family: var(--font-mono);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
color: var(--color-brand-light);
line-height: 1;
min-width: 32px;
letter-spacing: 0.05em;
}
.problem-point-body h4 { margin-bottom: 6px; }
.problem-point-body p { font-size: 15px; color: var(--color-text-2); line-height: var(--leading-normal); }
/* ═══════════════════════════════════════════════════════════
PLATFORM — FOUR PILLARS
═══════════════════════════════════════════════════════════ */
.pillars-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.pillar {
position: relative;
padding: 36px;
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.8), rgba(19, 16, 30, 0.4));
border: 1px solid var(--color-border);
overflow: hidden;
transition: border-color var(--transition-slow), transform var(--transition-slow);
}
.pillar:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--color-brand-light), transparent);
opacity: 0.5;
}
.pillar-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
.pillar-name {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
letter-spacing: -0.01em;
color: var(--color-text);
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.pillar-icon {
width: 34px; height: 34px;
background: var(--brand-glow-12);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
display: grid; place-items: center;
color: var(--color-brand-light);
}
.pillar-icon svg { width: 16px; height: 16px; }
.pillar-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: var(--weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand-light);
padding: 3px var(--space-2);
background: var(--brand-glow-08);
border-radius: 4px;
border: 1px solid var(--color-border-strong);
flex-shrink: 0;
}
.pillar-desc {
font-size: 15px;
color: var(--color-text-2);
line-height: var(--leading-snug);
margin-bottom: var(--space-6);
}
.pillar-caps {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip {
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-medium);
padding: 5px 10px;
background: rgba(12, 10, 18, 0.6);
border: 1px solid var(--color-border);
border-radius: 4px;
color: var(--color-text-2);
}
/* ═══════════════════════════════════════════════════════════
PRODUCT DEEP-DIVE SECTIONS
═══════════════════════════════════════════════════════════ */
.product-row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-20);
align-items: center;
}
.product-row.reverse { grid-template-columns: 1.2fr 1fr; }
.product-row.reverse .product-copy { order: 2; }
.product-row.reverse .product-visual { order: 1; }
.product-copy h2 { margin-bottom: var(--space-6); }
.product-copy .lead { margin-bottom: var(--space-8); }
/* Default: inline rows. Bullet · bold label · continuation text all on one line. */
.product-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.product-list li {
display: flex;
gap: var(--space-3);
font-size: 15px;
color: var(--color-text-2);
line-height: var(--leading-snug);
list-style: none;
}
.product-list li::before {
content: "";
flex-shrink: 0;
width: 6px; height: 6px;
margin-top: 9px;
background: var(--color-brand-light);
border-radius: var(--radius-full);
box-shadow: 0 0 8px var(--brand-glow-35);
}
.product-list li strong { color: var(--color-text); font-weight: var(--weight-medium); }
/* Stacked variant: bold label on its own line above the description. Use when
the labels are full sentences of varying length and you want descriptions to
share a consistent left edge. */
.product-list--stacked { gap: var(--space-4); }
.product-list--stacked li {
display: block;
position: relative;
padding-left: 22px;
}
.product-list--stacked li::before {
position: absolute;
left: 0;
top: 9px;
margin-top: 0;
}
.product-list--stacked li strong { display: block; margin-bottom: 2px; }
/* ── Inspector PR Mock ── */
.pr-mock {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), var(--shadow-md);
font-family: var(--font-sans);
}
.pr-head {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--color-border);
background: rgba(27, 22, 40, 0.6);
display: flex;
align-items: center;
justify-content: space-between;
}
.pr-title { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.pr-branch {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-muted);
padding: 3px var(--space-2);
background: var(--color-surface-2);
border-radius: 4px;
}
.pr-status {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-error);
}
.pr-status::before {
content: "";
width: 8px; height: 8px;
border-radius: var(--radius-full);
background: var(--color-error);
box-shadow: 0 0 8px var(--color-error);
}
.pr-body { padding: var(--space-6); }
.pr-check {
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
display: flex;
gap: 14px;
align-items: flex-start;
background: rgba(12, 10, 18, 0.4);
}
.pr-check.pass { border-color: rgba(52, 211, 153, 0.2); background: rgba(52, 211, 153, 0.04); }
.pr-check.fail { border-color: rgba(248, 113, 113, 0.25); background: rgba(248, 113, 113, 0.05); }
.pr-check-icon {
width: 24px; height: 24px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
flex-shrink: 0;
}
.pr-check.pass .pr-check-icon { background: rgba(52, 211, 153, 0.15); color: var(--color-success); }
.pr-check.fail .pr-check-icon { background: rgba(248, 113, 113, 0.15); color: var(--color-error); }
.pr-check-icon svg { width: 14px; height: 14px; }
.pr-check-body { flex: 1; min-width: 0; }
.pr-check-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); margin-bottom: var(--space-1); }
.pr-check-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); line-height: var(--leading-normal); }
.pr-check-meta span.dep {
color: var(--color-text);
background: var(--color-surface-2);
padding: 1px 6px;
border-radius: 3px;
}
.pr-check-meta span.cve { color: var(--color-error); }
.pr-check-meta span.score { color: var(--color-warning); }
.pr-check-meta span.fix { color: var(--color-success); }
.pr-fix {
margin-top: 14px;
padding: var(--space-3) 14px;
background: var(--color-bg);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-2);
}
.pr-fix-label {
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-brand-light);
margin-bottom: 6px;
}
.pr-diff-rem { color: var(--color-error); background: rgba(248, 113, 113, 0.08); padding: 2px var(--space-1); border-radius: 3px; }
.pr-diff-add { color: var(--color-success); background: rgba(52, 211, 153, 0.08); padding: 2px var(--space-1); border-radius: 3px; margin-top: 2px; display: inline-block; }
.pr-foot {
padding: 14px var(--space-6);
border-top: 1px solid var(--color-border);
background: rgba(27, 22, 40, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-muted);
}
.pr-foot-kusari {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-brand-light);
font-weight: var(--weight-semibold);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* On phones the footer is too narrow for both items side by side — stack
them so "kusari/inspector" sits on its own line below the check summary. */
@media (max-width: 520px) {
.pr-foot {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
}
/* ── Agent Terminal ── */
.terminal-mock {
background: linear-gradient(180deg, var(--color-surface), var(--color-bg));
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), var(--shadow-md);
font-family: var(--font-mono);
position: relative;
}
.terminal-head {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 11px;
color: var(--color-text-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.terminal-head-dots {
display: flex; gap: 6px;
margin-right: 10px;
}
.terminal-head-dots span {
width: 10px; height: 10px;
border-radius: var(--radius-full);
background: var(--color-surface-hover);
}
.terminal-head-dots span:nth-child(1) { background: #FF5F56; opacity: 0.8; }
.terminal-head-dots span:nth-child(2) { background: var(--color-warning); opacity: 0.8; }
.terminal-head-dots span:nth-child(3) { background: var(--color-success); opacity: 0.8; }
.terminal-title {
flex: 1;
text-align: center;
font-weight: var(--weight-medium);
}
.terminal-title span { color: var(--color-brand-light); }
.terminal-body {
padding: var(--space-6) 22px 26px;
min-height: 320px;
font-size: 13px;
line-height: var(--leading-relaxed);
}
.term-prompt {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
/* Keep "kusari ▸" intact and let the (growing) query text wrap beside it,
instead of the flex squeeze pushing the arrow onto its own line. */
.term-prompt-sign {
color: var(--color-brand-light);
font-weight: var(--weight-semibold);
flex-shrink: 0;
white-space: nowrap;
}
.term-query { color: var(--color-text); min-width: 0; overflow-wrap: anywhere; }
.term-query .cursor {
display: inline-block;
width: 7px; height: 15px;
background: var(--color-brand-light);
margin-left: 2px;
vertical-align: middle;
animation: blink 1s step-end infinite;
}
.term-response {
margin-top: 10px;
margin-bottom: 22px;
color: var(--color-text-2);
font-size: var(--text-xs);
padding-left: var(--space-4);
border-left: 2px solid var(--color-border-strong);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s, transform 0.4s;
}
.term-response.show { opacity: 1; transform: translateY(0); }
.term-response-summary {
color: var(--color-brand-light);
margin-bottom: 6px;
font-weight: var(--weight-medium);
}
.term-response-row {
display: flex; gap: 10px; align-items: baseline;
padding: 2px 0;
}
.term-response-tag {
display: inline-block;
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
background: rgba(248, 113, 113, 0.12);
color: var(--color-error);
border: 1px solid rgba(248, 113, 113, 0.2);
min-width: 50px;
text-align: center;
}
.term-response-tag.ok { background: rgba(52, 211, 153, 0.12); color: var(--color-success); border-color: rgba(52, 211, 153, 0.2); }
.term-response-tag.warn { background: rgba(251, 191, 36, 0.12); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.2); }
.term-response-path { color: var(--color-text-2); flex: 1; font-size: var(--text-xs); }
.term-response-meta { color: var(--color-text-muted); font-size: 11px; opacity: 0.7; }
/* ═══════════════════════════════════════════════════════════
COMPLIANCE / CRA
═══════════════════════════════════════════════════════════ */
.compliance-wrap {
padding: 56px;
border-radius: var(--radius-xl);
background:
radial-gradient(ellipse at 80% 20%, var(--brand-glow-18), transparent 60%),
linear-gradient(180deg, rgba(38, 30, 56, 0.8), rgba(19, 16, 30, 0.6));
border: 1px solid var(--color-border-strong);
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-12);
align-items: center;
}
.countdown-block {
padding: var(--space-8);
background: rgba(12, 10, 18, 0.6);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.countdown-block::before {
content: "";
position: absolute;
top: -1px; left: -1px; right: -1px; height: 2px;
background: linear-gradient(90deg, var(--color-brand-light), var(--color-warning), var(--color-brand-light));
}
.countdown-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-warning);
margin-bottom: 14px;
}
.countdown-digits {
display: flex;
gap: var(--space-2);
margin-bottom: 18px;
}
.countdown-unit {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 14px 18px;
min-width: 72px;
text-align: center;
}
.countdown-val {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: 36px;
line-height: 1;
color: var(--color-text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.countdown-txt {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 6px;
}
.countdown-footer {
font-size: 13px;
color: var(--color-text-2);
line-height: var(--leading-snug);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.countdown-footer strong { color: var(--color-text); font-weight: var(--weight-medium); }
.compliance-copy h2 { margin-bottom: var(--space-6); }
.compliance-copy .lead { margin-bottom: 26px; }
.compliance-frameworks {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.framework-chip {
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-medium);
letter-spacing: 0.05em;
padding: 6px var(--space-3);
background: var(--brand-glow-08);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
color: var(--color-brand-light);
}
/* ═══════════════════════════════════════════════════════════
QUOTE
═══════════════════════════════════════════════════════════ */
.quote-block {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.quote-open {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: 96px;
line-height: 0.5;
color: var(--color-brand-light);
opacity: 0.6;
margin-bottom: var(--space-6);
display: inline-block;
}
.quote-text {
font-family: var(--font-sans);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: var(--leading-snug);
color: var(--color-text);
letter-spacing: -0.015em;
margin-bottom: var(--space-6);
font-style: italic;
font-weight: var(--weight-normal);
}
.quote-text em { color: var(--color-brand-light); font-style: italic; }
.quote-attrib {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-muted);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.quote-attrib span { color: var(--color-text); font-weight: var(--weight-medium); }
/* ═══════════════════════════════════════════════════════════
STANDARDS ROW
═══════════════════════════════════════════════════════════ */
.standards-section {
padding: 120px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.3), transparent);
}
.standards-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--space-20);
align-items: center;
}
.standards-copy h2 { margin-bottom: var(--space-6); }
.standards-copy .lead { margin-bottom: var(--space-6); }
.standards-copy p { color: var(--color-text-2); font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.standards-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.standard-card {
padding: 22px;
background: rgba(27, 22, 40, 0.5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color var(--transition-base);
}
.standard-card:hover { border-color: var(--color-border-strong); }
.standard-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: var(--weight-semibold);
letter-spacing: 0.08em;
color: var(--color-brand-light);
margin-bottom: var(--space-2);
}
.standard-desc {
font-size: 13px;
color: var(--color-text-2);
line-height: var(--leading-normal);
}
.adopter-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding-top: var(--space-8);
margin-top: var(--space-8);
border-top: 1px solid var(--color-border);
align-items: center;
}
.adopter-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-right: var(--space-1);
}
.adopter-name {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: -0.01em;
color: var(--color-text-2);
position: relative;
}
/* ═══════════════════════════════════════════════════════════
INTEGRATIONS
═══════════════════════════════════════════════════════════ */
.integrations {
padding: 100px 0;
}
.integrations-head {
text-align: center;
max-width: 680px;
margin: 0 auto 56px;
}
.integrations-head h2 { margin-bottom: var(--space-4); }
.integ-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.integ-cell {
background: var(--color-surface);
padding: var(--space-6) var(--space-4);
text-align: center;
transition: background var(--transition-base);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-text-2);
letter-spacing: 0.02em;
display: flex;
align-items: center;
justify-content: center;
min-height: 72px;
}
.integ-cell:hover {
background: var(--brand-glow-08);
color: var(--color-text);
}
/* ═══════════════════════════════════════════════════════════
CTA
═══════════════════════════════════════════════════════════ */
.cta-section {
padding: 140px 0;
position: relative;
}
.cta-wrap {
padding: var(--space-16) 56px;
border-radius: 28px;
background:
radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.22), transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(114, 40, 184, 0.18), transparent 60%),
linear-gradient(180deg, rgba(38, 30, 56, 0.9), rgba(19, 16, 30, 0.8));
border: 1px solid var(--color-border-strong);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-wrap::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60%; height: 1px;
background: linear-gradient(90deg, transparent, var(--color-brand-light), transparent);
}
.cta-wrap h2 {
margin-bottom: var(--space-4);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.cta-wrap .lead {
max-width: 560px;
margin: 0 auto 36px;
}
.cta-wrap .hero-ctas { justify-content: center; margin-top: var(--space-8); }
.cta-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.cta-path {
padding: var(--space-6);
background: rgba(12, 10, 18, 0.6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition: border-color 250ms ease, transform 250ms ease;
}
.cta-path:hover { border-color: var(--color-brand-light); transform: translateY(-2px); }
.cta-path-title {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: 6px;
}
.cta-path-desc {
font-size: 13px;
color: var(--color-text-2);
line-height: var(--leading-normal);
margin-bottom: 18px;
}
.cta-path-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: var(--weight-medium);
color: var(--color-brand-light);
}
.cta-path:hover .cta-path-link .arrow { transform: translateX(3px); }
/* ═══════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════ */
footer {
padding: var(--space-20) 0 var(--space-10);
border-top: 1px solid var(--color-border);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-10);
margin-bottom: var(--space-16);
}
.footer-brand .logo { margin-bottom: var(--space-6); }
.footer-tagline {
font-family: var(--font-sans);
font-style: italic;
font-size: var(--text-lg);
color: var(--color-text-2);
line-height: 1.45;
max-width: 280px;
}
.footer-col-title {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 18px;
transition: color var(--transition-base);
}
a.footer-col-title:hover { color: var(--color-text); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a {
font-size: var(--text-sm);
color: var(--color-text-2);
transition: color var(--transition-base);
}
.footer-col a:hover { color: var(--color-text); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
/* ═══════════════════════════════════════════════════════════
BLOG LANDING
═══════════════════════════════════════════════════════════ */
.blog-head {
padding: var(--hero-top) 0 var(--space-12);
border-bottom: 1px solid var(--color-border);
}
.blog-title {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.blog-lede {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text-2);
max-width: 640px;
}
.blog-list {
padding: var(--space-16) 0 var(--space-24);
}
.blog-list-grid {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-6);
}
.blog-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.blog-card:hover {
border-color: var(--color-border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.blog-card-image {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 — locks every card's image area to the same height regardless of source image dimensions */
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
overflow: hidden;
background: var(--color-surface);
}
.blog-card-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card-body {
padding: var(--space-6);
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card-title {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: var(--text-lg);
line-height: var(--leading-snug);
letter-spacing: -0.015em;
color: var(--color-text);
margin-bottom: var(--space-3);
transition: color var(--transition-base);
}
.blog-card:hover .blog-card-title { color: var(--color-brand-light); }
.blog-card-desc {
font-size: 15px;
line-height: var(--leading-snug);
color: var(--color-text-2);
margin-bottom: var(--space-4);
}
.blog-card-byline {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
}
.blog-card-byline-photos { display: flex; align-items: center; flex-shrink: 0; }
.blog-card-byline-photo {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
background: var(--color-surface);
display: block;
object-fit: cover;
}
.blog-card-byline-photos .blog-card-byline-photo + .blog-card-byline-photo {
margin-left: -8px;
box-shadow: 0 0 0 2px var(--color-surface);
}
.blog-card-byline-text {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.blog-card-byline-names { color: var(--color-text-2); }
@media (max-width: 520px) {
.blog-head { padding: 100px 0 var(--space-8); }
.blog-list { padding: var(--space-12) 0 var(--space-16); }
}
/* ═══════════════════════════════════════════════════════════
LEARNING CENTER
═══════════════════════════════════════════════════════════ */
.lc-featured {
padding: var(--space-16) 0 var(--space-12);
border-bottom: 1px solid var(--color-border);
}
.lc-featured-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.lc-featured-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-8);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface);
transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.lc-featured-card:hover {
border-color: var(--color-border-strong);
background: var(--color-surface-2);
transform: translateY(-2px);
}
.lc-featured-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-text);
margin: 0;
}
.lc-featured-desc {
font-size: var(--text-base);
line-height: var(--leading-snug);
color: var(--color-text-2);
margin: 0;
}
.lc-featured-cta {
margin-top: auto;
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-brand-light);
}
.lc-featured-cta .arrow {
transition: transform var(--transition-base);
display: inline-block;
}
.lc-featured-card:hover .lc-featured-cta .arrow {
transform: translateX(4px);
}
.lc-index {
padding: var(--space-16) 0 var(--space-24);
}
.lc-jumpnav {
position: sticky;
top: 64px;
z-index: 10;
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
margin: 0 0 var(--space-12);
background: rgba(12, 10, 18, 0.85);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
}
.lc-jumpnav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--space-2);
border-radius: var(--radius-full);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
color: var(--color-text-2);
transition: background var(--transition-base), color var(--transition-base);
}
.lc-jumpnav a:hover {
background: var(--color-brand-subtle);
color: var(--color-brand-light);
}
.lc-letter-group {
margin-top: var(--space-16);
scroll-margin-top: 140px;
}
.lc-letter-group:first-of-type { margin-top: var(--space-8); }
.lc-letter {
font-family: var(--font-mono);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-brand-light);
margin: 0 0 var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.lc-entry-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3) var(--space-8);
}
.lc-entry-link {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
transition: background var(--transition-base), border-color var(--transition-base);
}
.lc-entry-link:hover {
background: var(--color-surface);
border-color: var(--color-border);
}
.lc-entry-name {
display: block;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-text);
margin-bottom: 2px;
}
.lc-entry-desc {
display: block;
font-size: var(--text-sm);
line-height: var(--leading-snug);
color: var(--color-text-2);
}
@media (max-width: 768px) {
.lc-featured-grid { grid-template-columns: 1fr; }
.lc-entry-list { grid-template-columns: 1fr; }
.lc-jumpnav { top: 56px; }
}
/* ═══════════════════════════════════════════════════════════
DEMO PAGE (/demo)
═══════════════════════════════════════════════════════════ */
.demo-hero {
padding: var(--hero-top) 0 var(--space-20);
}
.demo-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: start;
}
.demo-title {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-text);
margin: 0 0 var(--space-6);
}
.demo-lede p {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text-2);
margin: 0 0 var(--space-4);
max-width: 56ch;
}
.demo-lede p:last-child { margin-bottom: 0; }
.demo-bullets {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
max-width: 56ch;
}
.demo-bullets li {
position: relative;
padding-left: var(--space-6);
font-size: var(--text-base);
line-height: var(--leading-snug);
color: var(--color-text-2);
margin-bottom: var(--space-3);
}
.demo-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand);
}
.demo-bullets li:last-child { margin-bottom: 0; }
.demo-bullets strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.demo-form-wrap {
position: sticky;
top: 96px;
background: #fff;
color: #0c0a12;
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
/* HubSpot form overrides — gently theme the embedded markup */
#demo-form .hs-form-field { margin-bottom: var(--space-4); }
#demo-form .hs-form-field > label {
display: block;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: #0c0a12;
margin-bottom: var(--space-1);
}
#demo-form .hs-form-required { color: var(--color-brand); margin-left: 2px; }
#demo-form .hs-input,
#demo-form input.hs-input,
#demo-form select.hs-input,
#demo-form textarea.hs-input {
width: 100%;
box-sizing: border-box;
padding: 10px var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-base);
color: #0c0a12;
background: #fff;
border: 1px solid #d4cce5;
border-radius: var(--radius-sm);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
#demo-form .hs-input:focus,
#demo-form .hs-input:focus-visible {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
#demo-form textarea.hs-input { min-height: 120px; resize: vertical; }
#demo-form .hs-error-msgs,
#demo-form .hs-error-msg {
list-style: none;
margin: var(--space-1) 0 0;
padding: 0;
color: var(--color-error);
font-size: var(--text-xs);
}
#demo-form .hs-richtext,
#demo-form .hs-richtext p {
font-size: var(--text-xs);
color: #555;
line-height: var(--leading-snug);
}
#demo-form .hs-richtext a { color: var(--color-brand); text-decoration: underline; }
#demo-form .hs_submit { margin-top: var(--space-4); }
#demo-form .hs-button,
#demo-form input.hs-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: #fff;
background: var(--color-brand);
border: 0;
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--transition-base);
}
#demo-form .hs-button:hover,
#demo-form input.hs-button:hover {
background: var(--color-brand-hover);
}
#demo-form .hs-fieldtype-checkbox ul,
#demo-form .hs-fieldtype-radio ul {
list-style: none;
padding: 0;
margin: 0;
}
#demo-form .hs-form-checkbox-display,
#demo-form .hs-form-radio-display {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
}
#demo-form .submitted-message {
font-size: var(--text-base);
color: #0c0a12;
}
@media (max-width: 960px) {
.demo-grid { grid-template-columns: 1fr; }
.demo-form-wrap { position: static; }
}
/* ═══════════════════════════════════════════════════════════
BLOG POST
═══════════════════════════════════════════════════════════ */
.post {
padding: var(--hero-top) 0 var(--space-24);
}
.post-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--space-8);
}
.post-head {
margin-bottom: var(--space-12);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
}
.post-back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: var(--space-8);
transition: color var(--transition-base);
}
.post-back:hover { color: var(--color-brand-light); }
.post-back .arrow { transition: transform var(--transition-base); }
.post-back:hover .arrow { transform: translateX(-3px); }
.post-title {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-text);
margin-bottom: var(--space-6);
}
.post-lede {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text-2);
margin-bottom: var(--space-6);
}
.post-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.post-byline {
display: flex;
align-items: center;
gap: var(--space-3);
}
.post-byline-photos {
display: flex;
align-items: center;
flex-shrink: 0;
}
.post-byline-photo {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
display: block;
object-fit: cover;
background: var(--color-surface);
}
.post-byline-photos .post-byline-photo + .post-byline-photo {
margin-left: -12px;
box-shadow: 0 0 0 2px var(--color-bg);
}
.post-byline-name {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text);
line-height: 1.2;
}
.post-byline-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-top: 4px;
}
.post-feature {
margin-bottom: var(--space-12);
}
.post-feature img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
.post-body {
font-size: 17px;
line-height: var(--leading-relaxed);
color: var(--color-text-2);
}
.post-body > p,
.post-body > ul,
.post-body > ol,
.post-body > blockquote,
.post-body > pre {
margin-bottom: var(--space-6);
}
.post-body > p:first-of-type {
font-size: var(--text-lg);
line-height: var(--leading-snug);
color: var(--color-text);
}
.post-body h2 {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: var(--text-2xl);
line-height: var(--leading-snug);
letter-spacing: -0.015em;
color: var(--color-text);
margin-top: var(--space-12);
margin-bottom: var(--space-4);
}
.post-body h3 {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-xl);
line-height: var(--leading-snug);
letter-spacing: -0.01em;
color: var(--color-text);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.post-body strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.post-body em { font-style: italic; }
.post-body a {
color: var(--color-brand-light);
text-decoration: underline;
text-decoration-color: var(--color-border-strong);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color var(--transition-base), color var(--transition-base);
}
.post-body a:hover {
text-decoration-color: var(--color-brand-light);
color: var(--color-brand-hover);
}
.post-body ul, .post-body ol {
padding-left: var(--space-6);
}
.post-body li { margin-bottom: var(--space-2); }
.post-body li::marker { color: var(--color-brand-light); }
.post-body code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
padding: 2px 6px;
border-radius: var(--radius-sm);
color: var(--color-text);
}
.post-body pre {
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow-x: auto;
}
.post-body pre code {
background: transparent;
border: 0;
padding: 0;
font-size: var(--text-sm);
}
.post-body blockquote {
border-left: 2px solid var(--color-brand-light);
padding-left: var(--space-4);
font-style: italic;
color: var(--color-text);
}
.post-body hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
.post-body .sl-embed { margin-bottom: var(--space-8); }
@media (max-width: 520px) {
.post { padding: 100px 0 var(--space-16); }
.post-inner { padding: 0 var(--space-6); }
.post-body { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInCard {
from { opacity: 0; transform: translate(0, 8px); }
to { opacity: 1; transform: translate(0, 0); }
}
@keyframes ticker {
from { transform: translateX(0); }
/* Each item owns its trailing margin (see .ticker-item), so the track is
exactly two identical copies — a plain -50% lands the second copy on the
first with no seam. */
to { transform: translateX(-50%); }
}
@keyframes pulse-crit {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.75; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes dashflow {
to { stroke-dashoffset: -20; }
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
.hero-grid, .problem-grid, .product-row, .product-row.reverse, .compliance-wrap, .standards-grid, .cta-pair {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.product-row.reverse .product-copy { order: 1; }
.product-row.reverse .product-visual { order: 2; }
.pillars-grid { grid-template-columns: 1fr; }
.graph-stage { margin-left: 0; }
.integ-grid { grid-template-columns: repeat(3, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
/* Mobile nav: hide desktop layout, show hamburger */
.nav-hamburger { display: block; }
.nav-ctas { display: none; }
/* When the drawer is open, drop the nav's backdrop-filter so `position: fixed`
descendants are sized against the viewport, not the 64px nav bar. */
.nav.is-open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: transparent;
border-bottom-color: transparent;
}
.nav-links {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 88px var(--space-8) 200px;
margin: 0;
background: rgba(13, 11, 22, 0.98);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
overflow-y: auto;
opacity: 0;
visibility: hidden;
/* Closed drawer covers the whole viewport (position: fixed, inset 0). Kill
pointer events so taps fall through to the page — otherwise hidden submenu
links (which re-enable visibility below) capture taps and navigate. */
pointer-events: none;
transform: translateY(-8px);
transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
z-index: 90;
}
.nav.is-open .nav-links {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.nav.is-open .nav-ctas {
display: flex;
position: fixed;
bottom: var(--space-6);
left: var(--space-8);
right: var(--space-8);
flex-direction: column;
gap: var(--space-3);
z-index: 100;
}
.nav.is-open .nav-ctas .btn { width: 100%; justify-content: center; padding: 14px 18px; }
.nav-links > .nav-item { width: 100%; }
.nav-links a, .nav-trigger {
display: block;
padding: var(--space-3) var(--space-2);
font-size: var(--text-lg);
color: var(--color-text);
}
.nav-trigger { width: 100%; text-align: left; }
.nav-item.has-submenu .nav-caret { display: none; }
.nav-submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
background: transparent;
border: 0;
box-shadow: none;
padding: 0 0 var(--space-2) var(--space-4);
backdrop-filter: none;
-webkit-backdrop-filter: none;
min-width: 0;
}
.nav-submenu a {
color: var(--color-text-2);
font-size: var(--text-base);
padding: var(--space-2) var(--space-2);
}
.hero { padding: var(--hero-top) 0 60px; }
section { padding: var(--space-20) 0; }
.compliance-wrap, .cta-wrap { padding: var(--space-8) var(--space-6); }
.hero-stats { flex-wrap: wrap; gap: var(--space-6); }
}
@media (max-width: 520px) {
.wrap { padding: 0 var(--space-6); }
.nav-inner { padding: var(--space-3) var(--space-6); }
.integ-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
.hero-ctas .btn { font-size: var(--text-sm); padding: 11px 18px; }
.graph-alert-card { right: 8px; width: 180px; }
.graph-score-card { left: 8px; width: 140px; }
/* Countdown digits: let the three units share the row and shrink the
numerals so they don't overflow their boxes. */
.countdown-unit { min-width: 0; flex: 1; padding: 12px 8px; }
.countdown-val { font-size: 26px; }
}
/* ═══════════════════════════════════════════════════════════
AUTH PAGES (/login, /signup) — ported from SignUpContent.vue
═══════════════════════════════════════════════════════════ */
.auth-page .mobile-logo { display: none; }
.signup-grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
justify-items: stretch;
padding: var(--space-8);
gap: var(--space-8);
}
.signup-logo-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
text-align: left;
}
.signup-logo-section .content-container { max-width: 540px; }
.signup-logo-section .logo img {
height: 2rem;
width: auto;
}
.welcome-heading {
font-size: var(--text-4xl);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--color-text);
margin: var(--space-10) 0 0;
}
.tagline {
font-size: var(--text-lg);
font-weight: var(--weight-normal);
letter-spacing: 0.04em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--color-brand-light), var(--color-brand));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: var(--space-2) 0 0;
}
.body-text {
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-text);
margin-top: var(--space-6);
}
.audience-cards {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-8);
}
.audience-card {
position: relative;
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
transition: border-color var(--transition-base), background var(--transition-base);
}
.audience-card:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.14);
}
.card-accent {
position: absolute;
top: 0; left: 0;
width: 3px;
height: 100%;
border-radius: 3px 0 0 3px;
}
.card-oss .card-accent {
background: linear-gradient(135deg, var(--color-brand-light), var(--color-brand));
}
.card-enterprise .card-accent {
background: linear-gradient(to bottom, var(--color-warning), var(--color-brand-light));
}
.card-label {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: 0.03em;
text-transform: uppercase;
margin: 0 0 10px;
}
.card-oss .card-label { color: var(--color-brand-light); }
.card-enterprise .card-label { color: var(--color-warning); }
.card-body {
font-size: 0.925rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.signup-form-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(to bottom right, var(--color-brand-subtle), var(--color-brand-dim));
padding: var(--space-6);
border-radius: var(--radius-lg);
text-align: center;
}
.signup-form-section .content-container { max-width: 500px; }
.signup-title {
font-size: var(--text-4xl);
font-weight: var(--weight-medium);
color: #fff;
margin: 0 0 var(--space-8);
}
.auth-buttons { display: flex; flex-direction: column; gap: var(--space-3); }
.login-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: #fff;
color: var(--color-bg);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1;
padding: 12px var(--space-4);
border-radius: var(--radius-full);
transition: background var(--transition-base), transform var(--transition-base);
}
.login-button:hover { background: var(--color-text); transform: translateY(-1px); }
.button-icon { height: 24px; width: auto; }
.signup-form-section .divider {
margin-top: var(--space-6);
border-top: 1px solid rgba(255, 255, 255, 0.25);
padding-top: var(--space-4);
}
@media (max-width: 768px) {
.signup-grid { grid-template-columns: 1fr; }
.signup-grid .signup-logo-section { order: 2; }
.signup-grid .signup-form-section { padding-bottom: var(--space-16); }
.signup-logo-section .logo { display: none; }
.auth-page .mobile-logo {
display: block;
margin: var(--space-4) auto;
}
.auth-page .mobile-logo img {
height: 3rem;
width: auto;
margin: 0 auto;
}
}
/* ═══════════════════════════════════════════════════════════
DEVELOPERS PAGE — /developers/
═══════════════════════════════════════════════════════════ */
/* Hero (single-column variant of .hero) */
/* Framing — two-up "code you wrote is solid" / "OSS + AI have risks" */
.dev-framing { padding: var(--space-12) 0; }
.dev-framing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: start;
}
.dev-framing-col .lead { margin-top: var(--space-4); max-width: 460px; }
@media (max-width: 880px) {
.dev-framing-grid { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* Testimonials */
.dev-testimonials { padding: var(--space-20) 0; }
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.testimonial-card {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-6);
transition: border-color var(--transition-base), transform var(--transition-base);
}
.testimonial-card:hover {
border-color: var(--color-border-strong);
transform: translateY(-2px);
}
.testimonial-mark {
font-family: var(--font-sans);
font-size: 3rem;
line-height: 0.6;
color: var(--color-brand-light);
opacity: 0.5;
}
.testimonial-quote {
color: var(--color-text);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
flex: 1;
}
.testimonial-attrib {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.testimonial-name {
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.testimonial-title {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
@media (max-width: 960px) {
.testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.testimonial-grid { grid-template-columns: 1fr; }
}
/* Comparison table */
.dev-compare { padding: var(--space-20) 0; }
.compare-table {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-top: var(--space-12);
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.compare-col {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8);
}
.compare-col-kusari {
background: linear-gradient(180deg, var(--brand-glow-08), var(--color-surface));
border-color: var(--color-brand);
box-shadow: var(--shadow-md);
}
.compare-head {
font-family: var(--font-mono);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
padding-bottom: var(--space-4);
margin-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border);
}
.compare-col-kusari .compare-head { color: var(--color-brand-light); }
.compare-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.compare-list li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
color: var(--color-text);
}
.compare-list li::before {
content: "";
width: 16px; height: 16px;
border-radius: var(--radius-full);
background: var(--color-brand-light);
box-shadow: 0 0 12px var(--brand-glow-50);
flex-shrink: 0;
background-image: linear-gradient(135deg, var(--color-brand-light), var(--color-brand));
}
.compare-list-muted li::before {
background: var(--color-surface-active);
background-image: none;
box-shadow: none;
}
.compare-list-muted .compare-empty { color: var(--color-text-muted); }
.compare-list-muted .compare-empty::before { display: none; }
@media (max-width: 720px) {
.compare-table { grid-template-columns: 1fr; }
}
/* Surfaces — two-up GitHub App + CLI */
.dev-surfaces { padding: var(--space-20) 0; }
.surface-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-top: var(--space-12);
}
.surface-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-6);
transition: border-color var(--transition-base), transform var(--transition-base);
}
.surface-card:hover {
border-color: var(--color-brand);
transform: translateY(-2px);
}
.surface-card-tag {
display: inline-flex;
align-self: flex-start;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-brand-light);
padding: 6px var(--space-3);
background: var(--brand-glow-12);
border: 1px solid var(--color-brand);
border-radius: var(--radius-full);
}
.surface-card-desc {
color: var(--color-text-2);
line-height: var(--leading-relaxed);
flex: 1;
}
.surface-card .btn { align-self: flex-start; }
@media (max-width: 720px) {
.surface-pair { grid-template-columns: 1fr; }
}
/* Avoid costly rework */
.dev-rework { padding: var(--space-20) 0; }
.dev-rework-inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-16);
align-items: center;
}
.rework-chart {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-md);
}
.rework-chart svg { width: 100%; height: auto; }
.rework-caption {
margin-top: var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-muted);
text-align: center;
}
@media (max-width: 880px) {
.dev-rework-inner { grid-template-columns: 1fr; gap: var(--space-10); }
}
/* Open source leaders */
.dev-oss { padding: var(--space-20) 0; }
.dev-oss-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.dev-oss-inner .eyebrow { justify-content: center; display: inline-flex; }
.dev-oss-inner .lead { margin: var(--space-6) auto var(--space-8); }
/* Resources */
.dev-resources { padding: var(--space-20) 0; }
.section-head-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}
.resources-all-link {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-brand-light);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.resources-all-link:hover { color: var(--color-text); }
.resources-all-link .arrow { transition: transform var(--transition-base); }
.resources-all-link:hover .arrow { transform: translateX(3px); }
.resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.resource-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8);
color: var(--color-text);
transition: border-color var(--transition-base), transform var(--transition-base);
}
button.resource-card {
width: 100%;
text-align: left;
font: inherit;
}
.resource-card:hover {
border-color: var(--color-brand);
transform: translateY(-2px);
}
.resource-card-feature {
background: linear-gradient(180deg, var(--brand-glow-12), var(--color-surface));
border-color: var(--color-brand);
}
.resource-card-title {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-text);
}
.resource-card-desc {
color: var(--color-text-2);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
flex: 1;
}
.resource-card-cta {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-brand-light);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.resource-card:hover .resource-card-cta .arrow { transform: translateX(3px); }
.resource-card-cta .arrow { transition: transform var(--transition-base); }
@media (max-width: 960px) {
.resource-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.resource-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════
INSPECTOR PAGE — /inspector/
═══════════════════════════════════════════════════════════ */
/* Hero (single-column variant) */
.hero-trust {
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
/* Two parallel "legs" of the trust claim — inline when they fit, stacked when they wrap */
.hero-trust-points {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-3) var(--space-6);
font-size: var(--text-sm);
color: var(--color-text-2);
}
.hero-trust-points strong { color: var(--color-text); font-weight: var(--weight-medium); }
.hero-trust-line {
font-size: var(--text-sm);
color: var(--color-text);
display: inline-flex;
align-items: baseline;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Inline CTA — "Deploy faster" and DevSecOps guide blocks */
.inspector-guide-cta { padding: var(--space-12) 0; }
.inline-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
flex-wrap: wrap;
background: linear-gradient(135deg, var(--brand-glow-12), var(--color-surface));
border: 1px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-8);
box-shadow: var(--shadow-md);
}
.inline-cta-copy {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
color: var(--color-text);
}
.inline-cta-guide .inline-cta-copy {
display: flex;
flex-direction: column;
gap: 4px;
}
.inline-cta-title {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
/* ═══════════════════════════════════════════════════════════
PLATFORM PAGE — /platform/
═══════════════════════════════════════════════════════════ */
/* Hero */
/* Partners strip — extends .adopter-row, centered, more padding */
.platform-partners { padding: var(--space-8) 0; }
.partners-row {
justify-content: center;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: var(--space-8) 0;
margin-top: 0;
gap: var(--space-6) var(--space-8);
}
/* Use cases — 3-col grid of .pillar cards */
.platform-use-cases { padding: var(--space-20) 0 var(--space-16); }
.use-case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-top: var(--space-12);
}
.use-case-grid .pillar { padding: var(--space-8); }
.use-case-grid .pillar .btn { align-self: flex-start; margin-top: var(--space-2); }
@media (max-width: 960px) {
.use-case-grid { grid-template-columns: 1fr; }
}
/* Case study stat callout */
.case-stat-callout {
margin-top: var(--space-12);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
flex-wrap: wrap;
background: linear-gradient(135deg, var(--brand-glow-12), var(--color-surface));
border: 1px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-10);
box-shadow: var(--shadow-md);
}
.case-stat-num {
display: flex;
align-items: baseline;
gap: var(--space-4);
flex-wrap: wrap;
}
.case-stat-val {
font-family: var(--font-sans);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
line-height: 1;
color: var(--color-text);
}
.case-stat-val span {
color: var(--color-brand-light);
font-size: 0.6em;
margin-left: 2px;
}
.case-stat-lbl {
font-size: var(--text-base);
color: var(--color-text-2);
max-width: 320px;
}
/* Features section — reuses .pillars-grid, just spacing */
.platform-features { padding: var(--space-20) 0; }
.platform-features .pillars-grid { margin-top: var(--space-12); }
.platform-features .pillar .btn { align-self: flex-start; margin-top: var(--space-2); }
/* Scale section — 8 compact mini-cards in 4-col grid */
.platform-scale { padding: var(--space-20) 0; }
.scale-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-top: var(--space-12);
}
/* Languages & ecosystems chip band under the surfaces grid (Inspector page) */
.interop-langs {
margin-top: var(--space-10);
text-align: center;
}
.interop-langs-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-text-muted);
margin-bottom: var(--space-4);
}
.interop-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
}
.scale-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: border-color var(--transition-base);
}
.scale-card:hover { border-color: var(--color-border-strong); }
.scale-card-title {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
line-height: var(--leading-snug);
}
.scale-card-desc {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-snug);
}
/* Docs/setup link inside a scale-card; bottom-aligned so links line up across a row */
.scale-card-link {
margin-top: auto;
padding-top: var(--space-2);
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-brand-light);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.scale-card-link .arrow { transition: transform var(--transition-base); }
.scale-card-link:hover .arrow { transform: translateX(3px); }
/* 2-click install — numbered steps (Inspector page) */
.install-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
margin-top: var(--space-12);
}
/* Equal padding + transparent border on every step keeps content aligned;
only the featured (step 1) box shows the border + tint, so its lone CTA
reads as intentional next to the two link-less steps. */
.install-step {
display: flex;
flex-direction: column;
padding: var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-md);
}
.install-step-feature {
border-color: var(--color-brand);
background: linear-gradient(180deg, var(--brand-glow-12), transparent);
}
.install-step-cta {
margin-top: var(--space-6);
align-self: flex-start;
}
.install-step-num {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-brand-light);
margin-bottom: var(--space-6);
}
.install-step-title {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.install-step-desc {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-snug);
}
@media (max-width: 640px) {
.install-steps { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 960px) {
.scale-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.scale-grid { grid-template-columns: 1fr; }
}
/* Centered variant: flex-based so a partial final row (e.g. 6 cards = 4 + 2)
centers instead of leaving a gap at the lower right. Roomier gap than the
base grid. Breakpoints mirror .scale-grid (4 → 2 → 1). */
.scale-grid--center {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-6);
}
.scale-grid--center .scale-card {
flex: 0 1 calc((100% - 3 * var(--space-6)) / 4);
}
@media (max-width: 960px) {
.scale-grid--center .scale-card { flex-basis: calc((100% - var(--space-6)) / 2); }
}
@media (max-width: 540px) {
.scale-grid--center .scale-card { flex-basis: 100%; }
}
/* CISO CTA wrapper */
.platform-ciso-cta { padding: var(--space-12) 0; }
/* Case study quote section */
.platform-case-quote { padding: var(--space-20) 0; }
.quote-cta { margin-top: var(--space-8); }
/* Vertical step flow — shared by the Trust Fabric stages (Ingest → Graph →
Enrich → Act) and the ingest → enrich → route pipeline. */
.platform-flow {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.6), rgba(19, 16, 30, 0.3));
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.flow-step {
display: flex;
gap: var(--space-4);
align-items: flex-start;
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
position: relative;
}
.flow-step::after {
content: "";
position: absolute;
left: 33px; bottom: -10px;
width: 1px; height: 10px;
background: linear-gradient(180deg, var(--color-border-strong), transparent);
}
.flow-step:last-child::after { display: none; }
.flow-step-icon {
width: 34px; height: 34px;
flex-shrink: 0;
background: var(--brand-glow-12);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
display: grid; place-items: center;
color: var(--color-brand-light);
}
.flow-step-icon svg { width: 16px; height: 16px; }
.flow-step-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand-light);
margin-bottom: 2px;
}
.flow-step-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: 2px;
}
.flow-step-desc {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-snug);
}
/* Zero-day timeline — without / with Kusari, near the bottom of the page */
.platform-zero-day { padding: var(--space-20) 0; }
.platform-timeline {
/* Single source of truth for the "Without/With Kusari" colors — used by the
desktop header cells, the outcome-row text, and the mobile inline labels
(which inherit these via the timeline container). */
--timeline-without: var(--color-error);
--timeline-with: var(--color-success);
margin-top: var(--space-12);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.5), rgba(19, 16, 30, 0.25));
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
}
.timeline-head,
.timeline-row {
display: grid;
grid-template-columns: 110px 1fr 1fr;
}
.timeline-head {
padding: var(--space-6) var(--space-8);
border-bottom: 1px solid var(--color-border);
background: rgba(12, 10, 18, 0.5);
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.timeline-head .t-without { color: var(--timeline-without); }
.timeline-head .t-with { color: var(--timeline-with); }
.timeline-row {
padding: var(--space-6) var(--space-8);
border-bottom: 1px solid var(--color-border);
font-size: 15px;
line-height: var(--leading-snug);
transition: background var(--transition-base);
}
.timeline-row:last-child { border-bottom: none; }
.timeline-row:hover { background: var(--brand-glow-04); }
.timeline-time {
font-family: var(--font-mono);
font-size: 13px;
font-weight: var(--weight-medium);
letter-spacing: 0.04em;
color: var(--color-brand-light);
}
.timeline-without {
color: var(--color-text-muted);
padding-right: var(--space-6);
border-right: 1px solid var(--color-border);
}
.timeline-with { color: var(--color-text); padding-left: var(--space-6); }
.timeline-with strong { color: var(--color-brand-light); font-weight: var(--weight-medium); }
.timeline-row.outcome { background: var(--brand-glow-08); }
.timeline-row.outcome .timeline-without { color: var(--timeline-without); font-weight: var(--weight-medium); }
.timeline-row.outcome .timeline-with { color: var(--timeline-with); font-weight: var(--weight-medium); }
@media (max-width: 720px) {
/* The 3-column side-by-side can't fit a phone, so stack each row: the
time, then the "Without" and "With" states one above the other, each
given its own inline label since the table header is dropped. */
.timeline-head { display: none; }
.timeline-row {
grid-template-columns: 1fr;
gap: var(--space-3);
padding: var(--space-6);
}
.timeline-without,
.timeline-with {
padding: 0;
border: none;
}
.timeline-without::before,
.timeline-with::before {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: var(--weight-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 2px;
}
.timeline-without::before { content: "Without Kusari"; color: var(--timeline-without); }
.timeline-with::before { content: "With Kusari"; color: var(--timeline-with); }
}
/* ═══════════════════════════════════════════════════════════
LEGAL PAGE — /terms/, /privacy-policy/
Reuses .post-body typography; this section is just the wrapper.
═══════════════════════════════════════════════════════════ */
.legal-page { padding: var(--hero-top) 0 var(--space-24); }
.legal-inner {
max-width: 760px;
margin: 0 auto;
padding: 0 var(--space-8);
}
.legal-head {
margin-bottom: var(--space-12);
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
}
.legal-title {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--color-text);
margin-bottom: var(--space-4);
}
.legal-meta {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Override .post-body's first-paragraph lede styling — legal text reads better evenly weighted */
.legal-body > p:first-of-type {
font-size: 17px;
line-height: var(--leading-relaxed);
color: var(--color-text-2);
}
@media (max-width: 520px) {
.legal-page { padding: 100px 0 var(--space-16); }
.legal-inner { padding: 0 var(--space-6); }
}
/* ═══════════════════════════════════════════════════════════
ABOUT PAGE — /about/
═══════════════════════════════════════════════════════════ */
/* Hero — single column, centered max-width */
/* Origin story & OSS prose blocks */
.about-origin { padding: var(--space-20) 0 var(--space-12); }
.about-oss { padding: var(--space-12) 0 var(--space-20); }
.about-prose {
max-width: 720px;
margin-top: var(--space-10);
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-text-2);
}
.about-prose > p { margin-bottom: var(--space-6); }
.about-prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.about-prose em { color: var(--color-text); font-style: italic; }
.about-prose-pull {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--weight-semibold);
color: var(--color-text);
letter-spacing: -0.015em;
line-height: var(--leading-tight);
padding: var(--space-4) 0 var(--space-4) var(--space-6);
border-left: 2px solid var(--color-brand-light);
margin: var(--space-8) 0;
}
.about-prose-ctas { margin-top: var(--space-8); }
/* Founders */
.about-founders { padding: var(--space-20) 0; }
.founder-stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
margin-top: var(--space-12);
}
.founder-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--space-10);
align-items: start;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-10);
transition: border-color var(--transition-base);
}
.founder-card:hover { border-color: var(--color-border-strong); }
.founder-card-photo img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
background: var(--color-surface-2);
}
.founder-card-body { display: flex; flex-direction: column; gap: var(--space-3); }
.founder-card-role {
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--color-brand-light);
font-weight: var(--weight-medium);
}
.founder-card-name {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
letter-spacing: -0.02em;
color: var(--color-text);
line-height: 1.1;
}
.founder-card-tagline {
font-size: var(--text-base);
color: var(--color-text-2);
font-style: italic;
margin-bottom: var(--space-2);
}
.founder-card-bio {
color: var(--color-text-2);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
}
.founder-card-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.founder-card-links a {
color: var(--color-brand-light);
display: inline-flex;
align-items: center;
gap: var(--space-1);
transition: color var(--transition-base);
}
.founder-card-links a:hover { color: var(--color-text); }
.founder-card-links .arrow { transition: transform var(--transition-base); }
.founder-card-links a:hover .arrow { transform: translateX(2px); }
@media (max-width: 720px) {
.founder-card { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8); }
.founder-card-photo img { max-width: 160px; }
}
/* Funding callout — reuses .case-stat-callout from platform page; just spacing */
.about-funding { padding: var(--space-12) 0 var(--space-20); }
.about-funding .case-stat-callout { margin-top: var(--space-8); }
/* Logo strip — shared base for rows of third-party logos (investors, partners).
Layout only; each modifier sets its own sizing/treatment. */
.logo-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-12);
flex-wrap: wrap;
}
/* Investors — bare logos (light/transparent art) directly on the dark bg. */
.logo-row--investors { margin-top: var(--space-10); }
.logo-row--investors img {
height: 48px;
width: auto;
max-width: 200px;
opacity: 0.85;
transition: opacity 0.2s ease;
}
.logo-row--investors img:hover { opacity: 1; }
@media (max-width: 720px) {
.logo-row--investors { gap: var(--space-8); }
.logo-row--investors img { height: 36px; }
}
/* Partners — monochrome white logos directly on the dark bg (each source is a
white/reverse version). Kept compact so the strip doesn't dominate the page. */
.logo-row--partners { gap: var(--space-8) var(--space-12); }
.logo-row--partners img {
height: 30px;
width: auto;
max-width: 150px;
}
@media (max-width: 720px) {
.logo-row--partners { gap: var(--space-6) var(--space-8); }
.logo-row--partners img { height: 24px; max-width: 120px; }
}
/* Partner logos — centered static strip on the home page. */
.partner-logos { padding: var(--space-16) 0; text-align: center; }
/* News section — reuses .resource-grid / .resource-card */
.about-news { padding: var(--space-12) 0 var(--space-20); }
/* Whitepaper detail page */
.whitepaper-hero { padding: var(--hero-top) 0 var(--space-12); }
.whitepaper-hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-12);
align-items: start;
}
.whitepaper-byline {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-text-2);
margin-top: var(--space-4);
}
.whitepaper-hero .hero-sub { margin-top: var(--space-6); }
.whitepaper-form-wrap {
background: #fff;
color: #0c0a12;
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
position: sticky;
top: 96px;
}
.whitepaper-form-heading {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: #0c0a12;
margin: 0;
}
.whitepaper-form-sub {
font-size: var(--text-sm);
color: #4a4458;
margin: var(--space-2) 0 var(--space-6);
}
.whitepaper-body { padding: var(--space-12) 0 var(--space-20); }
.whitepaper-body-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-12);
align-items: start;
}
.whitepaper-cover {
width: 100%;
height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
display: block;
}
.whitepaper-content {
font-size: var(--text-base);
color: var(--color-text-2);
line-height: var(--leading-relaxed);
}
.whitepaper-content h2 {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: var(--space-8) 0 var(--space-4);
}
.whitepaper-content h2:first-child { margin-top: 0; }
.whitepaper-content p { margin: 0 0 var(--space-4); }
.whitepaper-content strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.whitepaper-content ul { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.whitepaper-content ul li { margin-bottom: var(--space-3); }
@media (max-width: 960px) {
.whitepaper-hero-grid { grid-template-columns: 1fr; }
.whitepaper-form-wrap { position: static; }
.whitepaper-body-grid { grid-template-columns: 1fr; }
.whitepaper-cover { max-width: 280px; }
}
/* Webinar detail page */
.webinar-hero { padding: var(--hero-top) 0 var(--space-12); }
.webinar-hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-12);
align-items: start;
}
.webinar-hero .hero-sub { margin-top: var(--space-6); }
.webinar-people {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin-top: var(--space-10);
}
.webinar-person {
display: flex;
align-items: center;
gap: var(--space-3);
}
.webinar-person-photo {
width: 56px;
height: 56px;
border-radius: var(--radius-full);
object-fit: cover;
border: 1px solid var(--color-border-strong);
}
.webinar-person-role {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand-light);
}
.webinar-person-name {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.webinar-meta {
margin-top: var(--space-8);
font-size: var(--text-sm);
color: var(--color-text-2);
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.webinar-meta-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.webinar-meta-value { color: var(--color-text); }
.webinar-form-wrap {
background: #fff;
color: #0c0a12;
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
position: sticky;
top: 96px;
}
.webinar-form-heading {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: #0c0a12;
margin: 0;
}
.webinar-form-sub {
font-size: var(--text-sm);
color: #4a4458;
margin: var(--space-2) 0 var(--space-6);
}
.webinar-body { padding: 0 0 var(--space-20); }
.webinar-body-wrap { max-width: 760px; }
.webinar-content {
font-size: var(--text-base);
color: var(--color-text-2);
line-height: var(--leading-relaxed);
}
.webinar-content p { margin: 0 0 var(--space-4); }
.webinar-content strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.webinar-content ul { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.webinar-content ul li { margin-bottom: var(--space-3); }
@media (max-width: 960px) {
.webinar-hero-grid { grid-template-columns: 1fr; }
.webinar-form-wrap { position: static; }
}
/* Event detail page */
.event-hero { padding: var(--hero-top) 0 var(--space-12); }
.event-hero .hero-sub { margin-top: var(--space-6); max-width: 760px; }
.event-hero-image { margin: var(--space-12) 0 0; }
.event-hero-image img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
border-radius: var(--radius-lg);
display: block;
}
.event-body { padding: var(--space-8) 0 var(--space-20); }
.event-body-wrap { max-width: 760px; }
.event-content {
font-size: var(--text-base);
color: var(--color-text-2);
line-height: var(--leading-relaxed);
}
.event-content h2 {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: var(--space-10) 0 var(--space-4);
}
.event-content h2:first-child { margin-top: 0; }
.event-content p { margin: 0 0 var(--space-4); }
.event-content strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.event-content a { color: var(--color-brand-light); text-decoration: underline; }
.event-content ul { padding-left: var(--space-6); margin: 0 0 var(--space-6); }
.event-content ul li { margin-bottom: var(--space-2); }
.event-content code {
font-family: var(--font-mono);
font-size: 0.9em;
padding: 2px 6px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
/* Case study detail page */
.casestudy-hero { padding: var(--hero-top) 0 var(--space-12); }
.casestudy-hero .hero-sub { margin-top: var(--space-6); max-width: 760px; }
.casestudy-hero-image {
margin: var(--space-12) 0 0;
}
.casestudy-hero-image img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: cover;
border-radius: var(--radius-lg);
display: block;
}
.casestudy-body { padding: var(--space-12) 0 var(--space-20); }
.casestudy-body-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--space-12);
align-items: start;
}
.casestudy-facts {
position: sticky;
top: 96px;
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.casestudy-fact-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-brand-light);
margin-bottom: var(--space-2);
}
.casestudy-fact-value {
font-size: var(--text-sm);
color: var(--color-text);
margin: 0;
}
.casestudy-fact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.casestudy-fact-list li {
position: relative;
padding-left: var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-snug);
}
.casestudy-fact-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--color-brand-light);
}
.casestudy-content {
font-size: var(--text-base);
color: var(--color-text-2);
line-height: var(--leading-relaxed);
}
.casestudy-content h2 {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: var(--space-10) 0 var(--space-4);
}
.casestudy-content h2:first-child { margin-top: 0; }
.casestudy-content p { margin: 0 0 var(--space-4); }
.casestudy-content strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.casestudy-content a { color: var(--color-brand-light); text-decoration: underline; }
.casestudy-content ul { padding-left: var(--space-6); margin: 0 0 var(--space-6); }
.casestudy-content ul li { margin-bottom: var(--space-2); }
.casestudy-content blockquote {
margin: var(--space-6) 0;
padding: var(--space-2) var(--space-6);
border-left: 3px solid var(--color-brand);
color: var(--color-text);
font-style: italic;
}
.casestudy-content blockquote p { margin: 0; }
@media (max-width: 960px) {
.casestudy-body-grid { grid-template-columns: 1fr; }
.casestudy-facts { position: static; }
}
/* Storylane CTA wrapper. The Storylane embed snippet ships its own inline
button styles, so we leave those alone and just give the button breathing
room from surrounding content. Apply to a wrapping element (or the button
directly for vertical spacing only):
*/
.storylane {
display: flex;
justify-content: center;
padding: var(--space-6) 0;
}
/* Resources listing */
.resource-listing { padding: var(--hero-top) 0 var(--space-20); }
.resource-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-8);
border-bottom: 1px solid var(--color-border);
padding-bottom: var(--space-1);
}
.resource-tab {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-text-2);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full) var(--radius-full) 0 0;
text-decoration: none;
border: 1px solid transparent;
border-bottom: 0;
margin-bottom: -1px;
transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.resource-tab:hover { color: var(--color-text); background: var(--brand-glow-08); }
.resource-tab.is-active {
color: var(--color-text);
background: var(--color-surface);
border-color: var(--color-border);
}
.resource-card-image {
margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
background: var(--color-surface);
}
.resource-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.resource-empty {
margin-top: var(--space-12);
padding: var(--space-12);
text-align: center;
color: var(--color-text-2);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
}
/* Open source page */
.oss-hero { padding: var(--hero-top) 0 var(--space-12); }
.oss-hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-12);
align-items: center;
}
.oss-hero-text .hero-sub { margin-top: var(--space-6); }
.oss-hero-art img {
display: block;
width: 100%;
height: auto;
max-height: 480px;
object-fit: contain;
}
@media (max-width: 960px) {
.oss-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.oss-hero-art { order: -1; }
.oss-hero-art img { max-height: 280px; }
}
.oss-principle { padding: var(--space-16) 0; }
.oss-principle-lede {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text);
margin-top: var(--space-6);
max-width: 800px;
}
.oss-principle-body {
font-size: var(--text-base);
color: var(--color-text-2);
margin-top: var(--space-4);
max-width: 800px;
line-height: var(--leading-snug);
}
.oss-subhead {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: var(--space-12) 0 var(--space-6);
}
.oss-project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.oss-project {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-8);
background: linear-gradient(180deg, rgba(27, 22, 40, 0.8), rgba(19, 16, 30, 0.4));
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
transition: border-color var(--transition-base), transform var(--transition-base);
}
.oss-project:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.oss-project-logo {
height: 64px;
width: auto;
max-width: 100%;
object-fit: contain;
align-self: flex-start;
}
.oss-project-title {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: 0;
line-height: var(--leading-snug);
}
.oss-project-desc {
font-size: 15px;
color: var(--color-text-2);
line-height: var(--leading-snug);
margin: 0;
}
.oss-advisory-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.oss-advisory {
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.oss-advisory-title {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: 0 0 var(--space-3);
line-height: var(--leading-snug);
}
.oss-advisory-desc {
font-size: 15px;
color: var(--color-text-2);
line-height: var(--leading-snug);
margin: 0;
}
.contributor-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.contributor-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.contributor-photo {
width: 120px;
height: 120px;
border-radius: var(--radius-full);
object-fit: cover;
border: 1px solid var(--color-border-strong);
}
.contributor-body { display: flex; flex-direction: column; gap: var(--space-2); }
.contributor-role {
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-brand-light);
}
.contributor-name {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin: 0;
}
.contributor-chip {
align-self: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: var(--weight-medium);
padding: 4px 10px;
color: var(--color-brand-light);
background: var(--brand-glow-08);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
}
.contributor-blurb {
font-size: 14px;
color: var(--color-text-2);
line-height: var(--leading-snug);
margin: var(--space-2) 0 0;
}
.oss-tech-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-12);
padding: var(--space-10) var(--space-8);
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.oss-tech-row img {
max-height: 56px;
max-width: 240px;
width: auto;
height: auto;
}
.oss-project-logo[src*="clearly-defined"] { filter: invert(1); }
@media (max-width: 960px) {
.oss-project-grid { grid-template-columns: repeat(2, 1fr); }
.oss-advisory-grid { grid-template-columns: 1fr; }
.contributor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.oss-project-grid { grid-template-columns: 1fr; }
.oss-tech-row { gap: var(--space-8); padding: var(--space-6); }
.oss-tech-row img { max-height: 40px; max-width: 180px; }
}
/* Contact page */
.contact-form-section { padding: var(--space-12) 0; }
.contact-form-section .wrap { max-width: 720px; }
.contact-form-wrap {
background: #fff;
color: #0c0a12;
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
.contact-info { padding: 0 0 var(--space-20); }
.contact-info-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-10);
padding-top: var(--space-12);
border-top: 1px solid var(--color-border);
}
.contact-info-item { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-info-heading {
font-family: var(--font-sans);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin: 0;
}
.contact-info-link {
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--color-brand);
text-decoration: none;
}
.contact-info-link:hover { text-decoration: underline; }
@media (max-width: 720px) {
.contact-info-row { grid-template-columns: 1fr; gap: var(--space-8); }
}
/* ═══════════════════════════════════════════════════════════
ROI CALCULATOR PAGE — /roi-calculator/
═══════════════════════════════════════════════════════════ */
.roi-hero {
padding: var(--hero-top) 0 var(--space-12);
}
.roi-hero .hero-inner { max-width: none; }
.roi-hero .hero-sub { margin-top: var(--space-6); max-width: none; }
.roi-section { padding: 0 0 var(--space-20); }
/* Inputs panel — featured "stand out" card with brand-glow tint */
.roi-inputs {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 20%, var(--brand-glow-18), transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(114, 40, 184, 0.15), transparent 60%),
linear-gradient(180deg, var(--color-surface-active), var(--color-surface-2));
border: 1px solid var(--color-border-strong);
border-left: 6px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-10);
margin-bottom: var(--space-10);
box-shadow: var(--shadow-lg);
}
.roi-inputs > * { position: relative; }
.roi-input-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8) var(--space-10);
}
.roi-field-wide { grid-column: 1 / -1; }
.roi-field label {
display: block;
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.roi-hint {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-top: var(--space-2);
line-height: var(--leading-snug);
}
.roi-field select,
.roi-field input[type="text"],
.roi-field input[type="number"] {
width: 100%;
padding: 12px var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-base);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Selects rendered as native controls showed tiny text and an arrow jammed
against the right edge. Reset the native chrome, draw our own chevron with
room to breathe, and keep the 16px font (also avoids iOS focus-zoom). */
.roi-field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Restate the size next to appearance:none — WebKit/iOS can fall back to a
tiny native control font when it isn't co-located with the reset. */
font-size: var(--text-base);
line-height: var(--leading-snug);
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23877CAA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px;
}
/* The open option list is a separate native popup — with appearance:none it
no longer inherits the select's font, so its rows render tiny. Size the
options directly (and theme them to match the dark inputs). */
.roi-field select option {
font-size: var(--text-base);
background: var(--color-surface);
color: var(--color-text);
}
.roi-field select:focus,
.roi-field input:focus {
outline: none;
border-color: var(--color-brand-light);
box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/* Slider */
.roi-slider-row {
display: flex;
align-items: center;
gap: var(--space-4);
}
.roi-slider-row input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 8px;
background: var(--color-surface);
border-radius: var(--radius-full);
outline: none;
border: 1px solid var(--color-border);
}
.roi-slider-row input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: var(--color-brand-light);
border-radius: var(--radius-full);
cursor: pointer;
box-shadow: 0 0 0 3px var(--brand-glow-25);
}
.roi-slider-row input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--color-brand-light);
border-radius: var(--radius-full);
cursor: pointer;
border: none;
}
.roi-slider-value {
min-width: 130px;
font-family: var(--font-mono);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-brand-light);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Checkbox */
.roi-check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
user-select: none;
margin-top: var(--space-8);
font-size: var(--text-base);
}
.roi-check input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--color-brand);
margin-top: 2px;
flex-shrink: 0;
cursor: pointer;
}
.roi-check-sub {
display: block;
font-weight: var(--weight-normal);
color: var(--color-text-muted);
font-size: var(--text-sm);
margin-top: var(--space-1);
}
/* Results */
.roi-results { margin-top: var(--space-12); }
.roi-results-title {
margin-top: var(--space-4);
margin-bottom: var(--space-8);
}
/* Headline number card */
.roi-headline-card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-border);
border-left: 5px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-10) var(--space-10);
margin-bottom: var(--space-6);
box-shadow: var(--shadow-md);
}
.roi-headline-card::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 320px; height: 320px;
background: radial-gradient(circle, var(--brand-glow-25), transparent 70%);
pointer-events: none;
}
.roi-headline-number {
font-family: var(--font-sans);
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: var(--weight-bold);
font-style: italic;
color: var(--color-text);
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
margin-bottom: var(--space-3);
}
.roi-headline-caption {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.roi-headline-body {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-normal);
margin-bottom: var(--space-3);
}
.roi-source {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-muted);
font-style: italic;
}
/* Conditional insights */
.roi-insight {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-warning);
border-radius: var(--radius-md);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.roi-insight-hidden { display: none; }
.roi-insight-body {
font-size: var(--text-sm);
color: var(--color-text);
line-height: var(--leading-normal);
}
.roi-insight-body strong { color: var(--color-brand-light); font-weight: var(--weight-semibold); }
/* 2x2 grid */
.roi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.roi-out-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-3);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.roi-out-card:hover {
border-color: var(--color-border-strong);
box-shadow: var(--shadow-md);
}
.roi-out-number {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
letter-spacing: -0.02em;
line-height: var(--leading-tight);
}
.roi-out-caption {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.roi-out-body {
font-size: var(--text-sm);
color: var(--color-text-2);
line-height: var(--leading-normal);
}
.roi-out-body strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.roi-out-math {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-brand-light);
background: var(--brand-glow-08);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 8px var(--space-3);
}
/* Three-year composite */
.roi-composite {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 20%, var(--brand-glow-18), transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(114, 40, 184, 0.18), transparent 60%),
linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-border-strong);
border-left: 5px solid var(--color-brand);
border-radius: var(--radius-lg);
padding: var(--space-10);
margin-bottom: var(--space-10);
box-shadow: var(--shadow-md);
}
.roi-composite-number {
font-family: var(--font-sans);
font-size: clamp(2.5rem, 5.5vw, 3.5rem);
font-weight: var(--weight-bold);
font-style: italic;
color: var(--color-text);
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
margin-bottom: var(--space-3);
}
.roi-composite-caption {
font-size: var(--text-lg);
color: var(--color-text-2);
line-height: var(--leading-snug);
}
.roi-composite-caption strong {
color: var(--color-brand-light);
font-weight: var(--weight-semibold);
font-style: italic;
}
/* Sources / methodology strip */
.roi-sources {
margin-top: var(--space-10);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}
.roi-sources p {
font-size: var(--text-xs);
color: var(--color-text-muted);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-6);
}
.roi-sources p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
.roi-input-grid { grid-template-columns: 1fr; gap: var(--space-6); }
.roi-grid { grid-template-columns: 1fr; }
/* The inputs panel's desktop padding eats most of a phone's width and
makes the fields feel oversized — pull it in to match the result cards. */
.roi-inputs { padding: var(--space-8); }
.roi-headline-card,
.roi-composite { padding: var(--space-8); }
.roi-check { margin-top: 0; }
}
@media (max-width: 520px) {
.roi-inputs { padding: var(--space-6); border-left-width: 4px; }
/* The slider needs room next to its value readout on a narrow screen. */
.roi-slider-value { min-width: 0; }
}
/* ─────────────────── Integrations hero ─────────────────── */
/* Two columns on desktop: copy on the left, the hub graphic alongside it.
Collapses to a single column (graphic below the copy) on narrow viewports. */
.integrations-hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-16);
align-items: center;
}
@media (max-width: 900px) {
.integrations-hero-grid {
grid-template-columns: 1fr;
gap: var(--space-10);
}
}
.integrations-hub {
width: 100%;
max-width: 460px;
margin: 0 auto;
}
.integrations-hub svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* dotted connectors with a flowing dash to read as a live link */
.ihub-line {
stroke: var(--color-border-strong);
stroke-width: 1.5;
stroke-dasharray: 1.5 9;
stroke-linecap: round;
opacity: 0.75;
animation: ihub-dash 1.6s linear infinite;
}
@keyframes ihub-dash { to { stroke-dashoffset: -21; } }
/* data packets travelling between the hub and the tools */
.ihub-packet {
fill: var(--color-brand-light);
filter: drop-shadow(0 0 5px var(--brand-glow-50));
animation: ihub-flow 2.6s ease-in-out infinite;
}
@keyframes ihub-flow {
0% { transform: translate(0, 0); opacity: 0; }
14% { opacity: 1; }
86% { opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
}
/* spoke nodes */
.ihub-node circle {
fill: var(--color-surface-2);
stroke: var(--color-border-strong);
stroke-width: 1.5;
transition: stroke var(--transition-base);
}
.ihub-glyph {
fill: var(--color-text-2);
transition: fill var(--transition-base);
}
.ihub-node:hover circle { stroke: var(--color-brand-light); }
.ihub-node:hover .ihub-glyph { fill: var(--color-text); }
/* Kusari hub */
.ihub-core circle {
fill: var(--color-surface);
stroke: var(--color-brand);
stroke-width: 2;
filter: drop-shadow(0 0 22px var(--brand-glow-35));
}
.ihub-mark { fill: var(--color-brand-light); }
@media (prefers-reduced-motion: reduce) {
.ihub-line { animation: none; }
.ihub-packet { animation: none; opacity: 0.9; }
}
/* ═══════════════════════════════════════════════════════════
MESSAGE-TEST LANDING PAGE (/start)
Reuses the homepage spine; only the pieces below are new.
═══════════════════════════════════════════════════════════ */
/* Under-CTA microcopy in the hero */
.hero-note {
margin-top: var(--space-4);
font-size: 14px;
color: var(--color-text-muted);
animation: fadeUp 0.9s 0.4s both;
}
/* Three-up variant of the pillars grid, for the value props */
.pillars-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .pillars-grid--3 { grid-template-columns: 1fr; } }
/* The Stakes: stacked body paragraphs — the first .lead's top margin comes
from .section-head; this owns the gap between the two paragraphs. */
.stakes .lead + .lead { margin-top: var(--space-6); }
/* FAQ accordion — no existing component covers this */
.faq {
max-width: 760px;
border-top: 1px solid var(--color-border);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-6) 0;
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-text);
transition: color var(--transition-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand-light); }
.faq-item summary::after {
content: "+";
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 20px;
line-height: 1;
color: var(--color-brand-light);
transition: transform var(--transition-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
padding: 0 0 var(--space-6);
max-width: 640px;
font-size: 15px;
line-height: var(--leading-normal);
color: var(--color-text-2);
}
/* Naked footer (footer-naked.njk) — centered brand, single Privacy link.
Reuses