/* Convexity Design Tokens ======================= Single source of truth for the marketing site. Every color, radius, font, spacing value comes from here. No hardcoded hex values in components. Usage: @import url('tokens.css'); in each page, or inline the contents. Toggle: [data-theme="light"] on flips all values. */ :root, [data-theme="dark"] { /* ── Backgrounds ── */ --bg: #0A0B14; --bg-card: #14161F; --bg-elevated: #1A1D28; --bg-overlay: rgba(10, 11, 20, 0.85); /* ── Brand ── */ --brand: #6366F1; --brand-light: #818CF8; --brand-dark: #4338CA; --gradient-brand: linear-gradient(135deg, #818CF8, #4338CA); --gradient-brand-h: linear-gradient(90deg, #818CF8, #4338CA); /* ── Text ── */ --text-primary: #F5F5F7; --text-secondary: #A1A1AA; --text-tertiary: #71717A; --text-brand: #818CF8; /* ── Borders ── */ --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.14); --border-strong: rgba(255, 255, 255, 0.20); --border-width: 0.5px; --border-width-emphasis: 1px; /* ── Functional ── */ --success: #10B981; --danger: #EF4444; --warning: #F59E0B; --success-bg: color-mix(in srgb, var(--success) 8%, transparent); --warning-bg: color-mix(in srgb, var(--warning) 8%, transparent); --danger-bg: color-mix(in srgb, var(--danger) 8%, transparent); /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.08); /* ── Nav ── */ --nav-bg: rgba(10, 11, 20, 0.0); --nav-bg-scrolled: rgba(10, 11, 20, 0.72); --nav-height: 56px; /* ── Typography ── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 44px; --text-5xl: 56px; --text-6xl: 72px; --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-meta: 1.4; --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-tightest:-0.04em; --tracking-normal: 0em; --tracking-wide: 0.08em; --weight-regular: 400; --weight-medium: 500; /* ── Spacing ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --gutter-desktop: 24px; --gutter-mobile: 16px; --padding-mobile: 20px; --container-max: 1200px; /* ── Radii ── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px; /* ── Transitions ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 400ms; } /* ── Light Mode ── */ [data-theme="light"] { --bg: #FFFFFF; --bg-card: #FAFAFB; --bg-elevated: #F4F4F7; --bg-overlay: rgba(255, 255, 255, 0.85); --text-primary: #0A0B14; --text-secondary: #52525B; --text-tertiary: #71717A; --text-brand: #6366F1; --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.14); --border-strong: rgba(0, 0, 0, 0.20); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 60px rgba(99, 102, 241, 0.06); --nav-bg: rgba(255, 255, 255, 0.0); --nav-bg-scrolled: rgba(255, 255, 255, 0.72); } /* ── Accessibility ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Base reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { overflow-x: hidden; } /* ── Ticker bar ── */ .ticker-bar { height: 34px; display: flex; align-items: center; justify-content: center; gap: 24px; background: var(--bg-card); border-bottom: var(--border-width) solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; padding: 0 var(--gutter-desktop); } .ticker-bar > span { display: inline-flex; align-items: baseline; padding: 8px 16px; line-height: 1; } .ticker-bar .ticker-label { margin-right: 6px; } .ticker-bar .up { color: var(--success); } .ticker-bar .down { color: var(--danger); } .ticker-bar .sep { opacity: 0.3; padding: 0; } @media (max-width: 600px) { .ticker-bar { display: none; } } /* ── Navigation ── */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; background: var(--nav-bg); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); border-bottom: 0.5px solid transparent; transition: background var(--duration-base) ease, backdrop-filter var(--duration-base) ease, -webkit-backdrop-filter var(--duration-base) ease, border-color var(--duration-base) ease; } .nav.is-scrolled { background: var(--nav-bg-scrolled); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-bottom-color: var(--border); } .nav-inner { max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-left { display: flex; align-items: center; justify-self: start; } .nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-primary); white-space: nowrap; } .nav-brand img { width: 24px; height: 24px; border-radius: 6px; } .nav-brand span { font-family: var(--font-mono); font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.12em; } .nav-links { display: flex; align-items: center; gap: 2px; justify-self: center; } .nav-links a { padding: 6px 12px; font-size: 13px; font-weight: var(--weight-regular); color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--duration-fast); white-space: nowrap; position: relative; } .nav-links a:hover, .nav-links a.nav-active { color: var(--text-primary); } .nav-links a.nav-active::after { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--brand); } .nav-actions { display: flex; align-items: center; gap: 6px; justify-self: end; } .nav-actions a { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-sm); transition: color var(--duration-fast); white-space: nowrap; } .nav-actions a:hover { color: var(--text-primary); } .btn-nav-cta { background: var(--gradient-brand); color: #fff !important; font-weight: var(--weight-medium); padding: 7px 16px !important; border-radius: var(--radius-sm); border: none; cursor: pointer; white-space: nowrap; font-size: 13px; line-height: 1; } [data-theme-toggle] { background: none; border: none; cursor: pointer; color: var(--text-tertiary); padding: 6px; border-radius: var(--radius-sm); transition: color var(--duration-fast); display: flex; align-items: center; } [data-theme-toggle]:hover { color: var(--text-primary); } /* Hamburger */ [data-hamburger] { display: none; background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 768px) { [data-hamburger] { display: flex; } .nav-links, .nav-actions > *:not([data-hamburger]) { display: none !important; } .nav-inner { padding: 0 var(--padding-mobile); display: flex; } .nav-left { flex: 1; } } /* Mobile drawer: promote Sign in to an outlined button so it reads as an action, not a demoted text link lost next to Join waitlist. */ .mobile-drawer-links a[href="/login"] { margin-top: 8px !important; border: 1px solid var(--border) !important; background: transparent !important; color: var(--text-primary) !important; font-weight: var(--weight-medium); text-align: center; justify-content: center; } .mobile-drawer-links a[href="/login"]:hover { background: var(--bg-elevated) !important; } /* ── Tabular nums for all numbers ── */ .mono, code, pre, [data-mono], .price, .stat-value, .ticker { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ── Focus rings ── */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* ── Container ── */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-desktop); } @media (max-width: 768px) { .container { padding: 0 var(--padding-mobile); } } /* ── Grid ── */ .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter-desktop); } @media (max-width: 768px) { .grid-12 { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-mobile); } } /* ── Eyebrow labels ── */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-brand); line-height: var(--leading-meta); } /* ── Section dividers ── */ .section-divider { height: 0; border: none; border-top: 0.5px solid rgba(255, 255, 255, 0.06); } [data-theme="light"] .section-divider { border-top-color: rgba(0, 0, 0, 0.06); } /* ── Scroll-triggered fade-in ── */ .fade-up { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ── Screenshot frame ── */ .screenshot-frame { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; position: relative; box-shadow: var(--shadow-glow); } .screenshot-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); pointer-events: none; } /* ── View Transitions (cross-document) ── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fade-out 150ms ease-out; } ::view-transition-new(root) { animation: fade-in 150ms ease-in; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }