/* Sapiensly design system tokens. * Merged 1:1 from _ds/sapiensly-final/tokens/*.css so the site carries the * same roles as the product. :root is the light theme; `.dark` on * switches the whole page to the navy palette. Never write a literal white * or navy in site.css — reach for a role below. */ /* Fonts are loaded from in index.html (preconnect + stylesheet link). */ :root { --sp-font-sans: 'Poppins', 'Instrument Sans', system-ui, sans-serif; --sp-font-display: 'Montserrat', 'Poppins', sans-serif; --sp-font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ---- colour ---------------------------------------------------------- */ :root, .theme-light { color-scheme: light; --sp-bg-primary: #f3f5fb; --sp-bg-secondary: #ffffff; --sp-bg-elevated: #eef1f9; --sp-bg-footer: #e7ebf4; --sp-text-primary: #0b0f29; --sp-text-secondary: #56607a; --sp-text-tertiary: rgba(11, 15, 41, 0.45); --sp-text-faint: rgba(11, 15, 41, 0.28); --sp-accent-blue: #0096ff; --sp-accent-blue-hover: #007acc; --sp-accent-cyan: #00b3b3; --sp-spectrum-magenta: #d946ef; --sp-spectrum-cyan: #00e5ff; --sp-spectrum-indigo: #4f46e5; --sp-success: #22c55e; --sp-warning: #f59e0b; --sp-danger: #ef4444; --sp-border-soft: rgba(11, 15, 41, 0.08); --sp-border-medium: rgba(11, 15, 41, 0.14); --sp-border-strong: rgba(11, 15, 41, 0.22); --sp-surface: rgba(11, 15, 41, 0.04); --sp-surface-hover: rgba(11, 15, 41, 0.07); --sp-grid-line: rgba(11, 15, 41, 0.05); --sp-tint-weak: rgba(11, 15, 41, 0.05); --sp-tint: rgba(11, 15, 41, 0.07); --sp-tint-strong: rgba(11, 15, 41, 0.12); } .dark, .theme-dark { color-scheme: dark; --sp-bg-primary: #00031c; --sp-bg-secondary: #0b0f29; --sp-bg-elevated: #1a2255; --sp-bg-footer: #000210; --sp-text-primary: #ffffff; --sp-text-secondary: #8890a6; --sp-text-tertiary: rgba(255, 255, 255, 0.4); --sp-text-faint: rgba(255, 255, 255, 0.25); --sp-accent-blue: #0096ff; --sp-accent-blue-hover: #007acc; --sp-accent-cyan: #00ffff; --sp-spectrum-magenta: #d946ef; --sp-spectrum-cyan: #00e5ff; --sp-spectrum-indigo: #4f46e5; --sp-success: #22c55e; --sp-warning: #f59e0b; --sp-danger: #ef4444; --sp-border-soft: rgba(255, 255, 255, 0.05); --sp-border-medium: rgba(255, 255, 255, 0.1); --sp-border-strong: rgba(255, 255, 255, 0.2); --sp-surface: rgba(255, 255, 255, 0.05); --sp-surface-hover: rgba(255, 255, 255, 0.1); --sp-grid-line: rgba(255, 255, 255, 0.03); --sp-tint-weak: rgba(255, 255, 255, 0.04); --sp-tint: rgba(255, 255, 255, 0.06); --sp-tint-strong: rgba(255, 255, 255, 0.12); } /* ---- type, spacing, radii ------------------------------------------- */ :root { --sp-display-hero: clamp(2.5rem, 5vw, 4.5rem); --sp-display-section: 2.5rem; --sp-body-lead: 1.1rem; --sp-body: 1rem; --sp-leading-marketing: 1.6; --sp-leading-heading: 1.2; --sp-eyebrow-size: 10px; --sp-eyebrow-tracking: 0.18em; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 20px; --sp-space-6: 24px; --sp-space-10: 40px; --sp-radius-xs: 8px; --sp-radius-sm: 15px; --sp-radius-md: 20px; --sp-radius-lg: 30px; --sp-radius-pill: 9999px; --sp-container-max: 1240px; --sp-gutter: clamp(20px, 4vw, 40px); } /* ---- effects --------------------------------------------------------- */ :root { --sp-shadow-btn-primary: 0 0 20px rgba(0, 150, 255, 0.3); --sp-shadow-float: 0 10px 30px rgba(11, 15, 41, 0.12); --sp-shadow-image: 0 20px 60px rgba(11, 15, 41, 0.18); --sp-blur-glass: 10px; --sp-glass-saturate: 1.2; } .dark, .theme-dark { --sp-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.35); --sp-shadow-image: 0 20px 60px rgba(0, 0, 0, 0.45); } /* ---- motion ---------------------------------------------------------- */ :root { --sp-dur-fast: 150ms; --sp-dur-hover: 180ms; --sp-dur-marketing: 300ms; --sp-dur-reveal: 800ms; --sp-ease: ease; --sp-ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1); --sp-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); } @keyframes sp-gradient-flow { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } @keyframes sp-blink { 50% { opacity: 0; } } @keyframes sp-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } /* ---- base ------------------------------------------------------------ */ body { margin: 0; background: var(--sp-bg-primary); color: var(--sp-text-secondary); font-family: var(--sp-font-sans); line-height: var(--sp-leading-marketing); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--sp-text-primary); line-height: var(--sp-leading-heading); margin: 0 0 1rem; } a { color: var(--sp-accent-blue); text-decoration: none; transition: color var(--sp-dur-marketing) var(--sp-ease); } a:hover { color: var(--sp-accent-blue-hover); } button:not(:disabled), [role='button']:not([aria-disabled='true']) { cursor: pointer; } button:disabled { cursor: not-allowed; } /* The 50px technical grid, masked so it fades toward the edges. */ .sp-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--sp-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--sp-grid-line) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 90%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000, transparent 90%); } /* Brand gradient text treatment, from the landing page. */ .sp-text-gradient { background-image: linear-gradient(to right, var(--sp-text-primary), var(--sp-text-secondary)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }