/* ─────────────────────────────────────────────── Vanta Flows — Phase 4 Direction A · The Architect · light + dark ─────────────────────────────────────────────── */ :root { /* Brand gradient — constant across modes */ --teal: #2DD4BF; --blue: #2563EB; --deep-blue: #1E3A8A; --grad: linear-gradient(90deg, #2DD4BF 0%, #2563EB 55%, #1E3A8A 100%); --grad-135: linear-gradient(135deg, #2DD4BF 0%, #2563EB 50%, #1E3A8A 100%); /* Semantic */ --success: #10B981; --warning: #F59E0B; --error: #EF4444; /* Type */ --f-display: 'Rajdhani', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* ─ Light mode defaults ─ */ --paper: #FFFFFF; --canvas: #F8FAFC; --canvas-2: #F1F5F9; --line: #E2E8F0; --line-strong: #CBD5E1; --ink: #1E293B; --ink-soft: #475569; --ink-faint: #94A3B8; /* Dark surfaces (for dark CTA / footer sections that appear even in light mode) */ --ink-dark: #0A0E1A; --ink-dark-2: #111827; --ink-dark-3: #1C2333; --paper-dark: #F1F5F9; --focus-ring: rgba(37,99,235,.45); --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 12px 24px -12px rgba(15, 23, 42, .08); --shadow-lg: 0 1px 3px rgba(15, 23, 42, .06), 0 40px 80px -30px rgba(15, 23, 42, .18); color-scheme: light; } /* Dark mode — applied via [data-theme="dark"] on */ html[data-theme="dark"] { --paper: #0A0E1A; --canvas: #0A0E1A; --canvas-2: #111827; --line: #1C2333; --line-strong: #273449; --ink: #F1F5F9; --ink-soft: #CBD5E1; --ink-faint: #64748B; --focus-ring: rgba(45,212,191,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 1px 3px rgba(0,0,0,.4), 0 12px 24px -12px rgba(0,0,0,.5); --shadow-lg: 0 1px 3px rgba(0,0,0,.4), 0 40px 80px -30px rgba(0,0,0,.6); color-scheme: dark; } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--f-body); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; transition: background-color .3s ease, color .3s ease; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ::selection { background: var(--teal); color: #0A0E1A; } .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 80px); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mono { font-family: var(--f-mono); } /* ─── Logo ─── */ .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: .005em; color: var(--ink); white-space: nowrap; } .logo-mark { width: 28px; height: 28px; flex-shrink: 0; background: url("../assets/vanta-flows-checkmark.png") center/contain no-repeat; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; letter-spacing: -.005em; transition: transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; } .btn-primary { background: var(--grad); color: #FFFFFF; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -8px rgba(37,99,235,.55); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 14px 28px -8px rgba(37,99,235,.65); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); } .btn-ghost:hover { border-color: var(--ink); } .btn-arrow::after { content: "→"; font-family: var(--f-mono); font-weight: 400; display: inline-block; transition: transform .18s ease; } .btn-arrow:hover::after { transform: translateX(3px); } /* ─── Section primitives ─── */ .sec { padding: 96px 0; border-bottom: 1px solid var(--line); background: var(--canvas); } .sec-head { text-align: center; max-width: 900px; margin: 0 auto 56px; } .sec-head .num { font-family: var(--f-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; display: block; margin: 0 0 16px; } .sec-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.05; letter-spacing: -.015em; margin: 0 auto 24px; max-width: 760px; color: var(--ink); text-wrap: balance; } .sec-head h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .sec-head .kicker { color: var(--ink-soft); font-size: 14px; line-height: 1.55; text-wrap: pretty; max-width: 600px; margin: 0 auto; } /* ─── Focus ─── */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; } /* ─── Utility ─── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }