/* ============================================================ KAIVRA — Design Token System Version 1.0 · April 2026 Usage: Import this file first in your global stylesheet. All tokens are CSS custom properties on :root. Tailwind users: map these to your tailwind.config.js Next.js users: import in app/globals.css or _app.tsx ============================================================ */ /* ============================================================ 1. COLOR RAMP All color decisions trace back to the logo gradient: Cerulean (#4A8FB8) → Ocean (#1C5D8A) → Navy (#1C3252) → Abyss (#0B1A2E) ============================================================ */ :root { /* Blue-navy ramp (primary brand) */ --color-abyss: #0B1A2E; /* footer bg, deepest dark */ --color-navy: #1C3252; /* headlines, wordmark-match */ --color-ocean: #1C5D8A; /* CTAs, links, interactive */ --color-cerulean: #4A8FB8; /* icons, decorative, logo mark */ --color-sky: #7DB8D6; /* disabled states, subtle dividers */ --color-mist: #C4DCE9; /* input borders, table borders */ --color-fog: #EDF4F9; /* alternate section background */ --color-nearwhite: #F8F9FB; /* primary page background */ /* Slate ramp (text hierarchy) */ --color-slate-900: #1C3252; /* same as navy — unified dark text */ --color-slate-700: #3D4F63; /* body text */ --color-slate-500: #6B7E93; /* secondary/muted text, placeholders */ --color-slate-300: #A8B8C6; /* disabled text, tertiary labels */ --color-slate-100: #D8E4EF; /* hairline borders, dividers */ /* Semantic (feedback states) */ --color-success: #1D7A5A; --color-success-bg: #E8F5F0; --color-warning: #9A6400; --color-warning-bg: #FEF4E0; --color-danger: #B92D2D; --color-danger-bg: #FDEAEA; --color-info: #1C5D8A; /* same as ocean — reuse brand color */ --color-info-bg: #EDF4F9; /* same as fog */ /* ============================================================ 2. SEMANTIC COLOR ALIASES Use these throughout your components — NOT the raw ramp. This means future theming only touches this section. ============================================================ */ /* Backgrounds */ --bg-page: var(--color-nearwhite); /* */ --bg-section-alt: var(--color-fog); /* every other section */ --bg-card: #FFFFFF; /* cards, panels, modals */ --bg-card-hover: var(--color-nearwhite); /* card hover state */ --bg-footer: var(--color-abyss); /* site footer */ --bg-nav: rgba(248, 249, 251, 0.92); /* sticky nav w/ blur */ --bg-overlay: rgba(11, 26, 46, 0.55); /* modal overlays */ --bg-input: #FFFFFF; --bg-input-focus: #FFFFFF; /* Text */ --text-heading: var(--color-navy); /* h1–h3 */ --text-subheading: var(--color-slate-700); /* h4–h6 */ --text-body: var(--color-slate-700); /* paragraphs */ --text-muted: var(--color-slate-500); /* captions, labels */ --text-disabled: var(--color-slate-300); --text-inverse: #FFFFFF; /* text on dark bg */ --text-inverse-muted: rgba(255,255,255,0.65); /* secondary on dark bg */ --text-link: var(--color-ocean); --text-link-hover: var(--color-navy); --text-eyebrow: var(--color-ocean); /* section eyebrow labels */ /* Borders */ --border-subtle: var(--color-slate-100); /* cards, sections */ --border-default: var(--color-mist); /* inputs, dividers */ --border-strong: var(--color-sky); /* focused/active inputs */ --border-brand: var(--color-ocean); /* CTA borders, badges */ /* Interactive / Brand */ --color-cta: var(--color-ocean); /* primary button fill */ --color-cta-hover: #175074; /* darken 8% */ --color-cta-active: #0F3A56; /* darken 15% */ --color-cta-text: #FFFFFF; --color-accent: var(--color-cerulean); /* logo icon, decorative */ /* ============================================================ 3. TYPOGRAPHY Stack: EB Garamond (display/headlines) + DM Sans (UI/body) Rationale: Garamond adds inherited institutional trust without feeling old. DM Sans is neutral and highly legible at small sizes. Both are free on Google Fonts — no licensing cost. Fallback stack covers: macOS, Windows, Linux, mobile. To load: add to your ============================================================ */ --font-display: 'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; --font-body: 'DM Sans', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Scale (Major Third — 1.25×) */ --text-xs: 0.64rem; /* ~10px */ --text-sm: 0.8rem; /* ~13px */ --text-base: 1rem; /* ~16px */ --text-md: 1.25rem; /* ~20px */ --text-lg: 1.563rem; /* ~25px */ --text-xl: 1.953rem; /* ~31px */ --text-2xl: 2.441rem; /* ~39px */ --text-3xl: 3.052rem; /* ~49px */ --text-hero: clamp(2.4rem, 5vw, 3.8rem); /* responsive hero */ /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* Leading */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.65; --leading-loose: 1.85; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.12em; /* eyebrow labels */ /* ============================================================ 4. SPACING Base: 4px unit. Scale follows 4-8-12-16-24-32-48-64-96-128. ============================================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section vertical padding (desktop) */ --section-py: var(--space-24); --section-py-sm: var(--space-16); /* Container */ --container-max: 1140px; --container-prose: 680px; --container-px: clamp(1.25rem, 4vw, 3rem); /* ============================================================ 5. BORDERS & RADIUS ============================================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 9999px; --border-width: 1px; --border-width-thin: 0.5px; /* ============================================================ 6. SHADOWS Restrained — health/trust context. No dramatic glow. ============================================================ */ --shadow-xs: 0 1px 2px rgba(11, 26, 46, 0.06); --shadow-sm: 0 1px 4px rgba(11, 26, 46, 0.08), 0 0 1px rgba(11, 26, 46, 0.04); --shadow-md: 0 4px 12px rgba(11, 26, 46, 0.10), 0 0 1px rgba(11, 26, 46, 0.04); --shadow-lg: 0 8px 24px rgba(11, 26, 46, 0.12), 0 0 1px rgba(11, 26, 46, 0.06); --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-md); --shadow-modal: 0 20px 60px rgba(11, 26, 46, 0.20); /* Focus ring (accessibility) */ --ring-focus: 0 0 0 3px rgba(28, 93, 138, 0.30); /* ============================================================ 7. TRANSITIONS ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 380ms; --transition-base: var(--duration-base) var(--ease-out); /* ============================================================ 8. Z-INDEX SCALE ============================================================ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ BASE STYLES Global resets using tokens. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--text-body); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-regular); /* Garamond reads heavy at 400 — trust it */ } h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); font-family: var(--font-body); font-weight: var(--weight-medium); } h5 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-medium); } h6 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: var(--weight-medium); } p { line-height: var(--leading-normal); color: var(--text-body); } a { color: var(--text-link); text-decoration: none; transition: color var(--transition-base); } a:hover { color: var(--text-link-hover); } /* Eyebrow label — use on section category labels above headings */ .eyebrow { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-eyebrow); } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-px); padding-right: var(--container-px); } .container--prose { max-width: var(--container-prose); } .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .section--sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); } .section--alt { background-color: var(--bg-section-alt); } .section--dark { background-color: var(--bg-footer); color: var(--text-inverse); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-inverse); } .section--dark p, .section--dark li { color: var(--text-inverse-muted); } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--bg-nav); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--border-width-thin) solid var(--border-subtle); transition: box-shadow var(--transition-base); } .nav--scrolled { box-shadow: var(--shadow-sm); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav__logo-mark { height: 32px; width: auto; } .nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .nav__link { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); transition: color var(--transition-base); } .nav__link:hover, .nav__link--active { color: var(--text-heading); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); border: var(--border-width) solid transparent; cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--duration-fast) var(--ease-out); text-decoration: none; white-space: nowrap; user-select: none; } .btn:active { transform: scale(0.985); } .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } /* Primary */ .btn--primary { background-color: var(--color-cta); color: var(--color-cta-text); border-color: var(--color-cta); } .btn--primary:hover { background-color: var(--color-cta-hover); border-color: var(--color-cta-hover); color: var(--color-cta-text); } .btn--primary:active { background-color: var(--color-cta-active); } /* Secondary (ghost) */ .btn--secondary { background-color: transparent; color: var(--color-ocean); border-color: var(--color-ocean); } .btn--secondary:hover { background-color: var(--color-fog); color: var(--color-navy); border-color: var(--color-navy); } /* Ghost on dark background */ .btn--ghost-dark { background-color: transparent; color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.30); } .btn--ghost-dark:hover { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.55); color: #fff; } /* Size variants */ .btn--sm { font-size: var(--text-xs); padding: 0.5rem 1rem; } .btn--lg { font-size: var(--text-base); padding: 1rem 2rem; border-radius: var(--radius-lg); } /* ============================================================ CARDS ============================================================ */ .card { background-color: var(--bg-card); border: var(--border-width-thin) solid var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--duration-base) var(--ease-out); } .card--hoverable:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } .card__eyebrow { composes: eyebrow; margin-bottom: var(--space-3); } .card__title { font-size: var(--text-md); color: var(--text-heading); margin-bottom: var(--space-3); } .card__body { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-loose); } /* Feature card (numbered, for "How it works" etc.) */ .card--feature { position: relative; } .card--feature::before { content: attr(data-step); position: absolute; top: var(--space-6); right: var(--space-6); font-size: var(--text-3xl); font-family: var(--font-display); color: var(--color-fog); line-height: 1; pointer-events: none; } /* ============================================================ FORMS & INPUTS ============================================================ */ .input-wrap { display: flex; flex-direction: column; gap: var(--space-2); } .input-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-subheading); } .input { width: 100%; height: 44px; padding: 0 var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--text-heading); background-color: var(--bg-input); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-base), box-shadow var(--transition-base); outline: none; appearance: none; } .input::placeholder { color: var(--text-disabled); } .input:hover { border-color: var(--border-strong); } .input:focus { border-color: var(--color-ocean); box-shadow: var(--ring-focus); background-color: var(--bg-input-focus); } /* Email signup (hero / CTA sections) */ .signup-row { display: flex; gap: var(--space-3); max-width: 480px; } .signup-row .input { flex: 1; min-width: 0; } @media (max-width: 480px) { .signup-row { flex-direction: column; } .signup-row .input, .signup-row .btn { width: 100%; } } /* ============================================================ HERO SECTION ============================================================ */ .hero { padding-top: clamp(var(--space-16), 10vw, var(--space-32)); padding-bottom: clamp(var(--space-12), 8vw, var(--space-24)); text-align: center; } .hero__eyebrow { composes: eyebrow; margin-bottom: var(--space-5); } .hero__headline { font-size: var(--text-hero); letter-spacing: var(--tracking-tight); color: var(--text-heading); max-width: 820px; margin: 0 auto var(--space-6); line-height: 1.1; } .hero__sub { font-size: clamp(var(--text-base), 1.8vw, var(--text-md)); color: var(--text-body); max-width: 580px; margin: 0 auto var(--space-10); line-height: var(--leading-loose); font-weight: var(--weight-light); } .hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .hero__trust-strip { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-12); flex-wrap: wrap; } .hero__trust-item { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } /* ============================================================ BADGE / PILL ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); } .badge--brand { background-color: var(--color-fog); color: var(--color-ocean); border: var(--border-width-thin) solid var(--color-mist); } .badge--navy { background-color: var(--color-navy); color: #fff; } .badge--success { background-color: var(--color-success-bg); color: var(--color-success); } /* ============================================================ FOOTER ============================================================ */ .footer { background-color: var(--bg-footer); padding-top: var(--section-py-sm); padding-bottom: var(--space-8); } .footer__logo-mark { height: 28px; width: auto; filter: brightness(0) invert(1) opacity(0.9); margin-bottom: var(--space-4); } .footer__tagline { font-size: var(--text-sm); color: var(--text-inverse-muted); max-width: 280px; line-height: var(--leading-loose); } .footer__nav-heading { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgba(255,255,255,0.40); margin-bottom: var(--space-4); } .footer__nav-link { display: block; font-size: var(--text-sm); color: rgba(255,255,255,0.60); margin-bottom: var(--space-3); transition: color var(--transition-base); } .footer__nav-link:hover { color: rgba(255,255,255,0.95); } .footer__legal { font-size: var(--text-xs); color: rgba(255,255,255,0.30); line-height: var(--leading-loose); padding-top: var(--space-8); border-top: var(--border-width-thin) solid rgba(255,255,255,0.08); margin-top: var(--space-12); } /* ============================================================ DIVIDERS ============================================================ */ .divider { width: 100%; height: var(--border-width-thin); background-color: var(--border-subtle); border: none; margin: var(--space-8) 0; } .divider--brand { width: 40px; height: 2px; background-color: var(--color-cerulean); border: none; border-radius: var(--radius-pill); margin: var(--space-5) auto; } /* ============================================================ PROSE (long-form text blocks) ============================================================ */ .prose p { margin-bottom: var(--space-4); } .prose p:last-child { margin-bottom: 0; } .prose strong { font-weight: var(--weight-medium); color: var(--text-heading); } .prose ul { padding-left: var(--space-5); } .prose li { margin-bottom: var(--space-2); } .prose a { text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ RESPONSIVE BREAKPOINTS Mobile-first. Override at sm/md/lg. ============================================================ */ /* sm: 640px — two-column grid starts */ @media (min-width: 640px) { h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-xl); } } /* md: 768px — navigation switches to horizontal */ @media (min-width: 768px) { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } .hero__headline { font-size: var(--text-2xl); } } /* lg: 1024px — full desktop layout */ @media (min-width: 1024px) { .hero__headline { font-size: var(--text-hero); } } /* Mobile nav override */ @media (max-width: 767px) { .nav__links { display: none; } .section { padding-top: var(--space-16); padding-bottom: var(--space-16); } } /* ============================================================ ACCESSIBILITY UTILITIES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }