/* Corepay - Design Tokens ---------------------------------------------------------------------------- Breakpoint canon (CSS custom properties can't be used in @media queries, so these are documentation. Keep all media queries in component CSS aligned to these values): @media (max-width: 600px) {} - mobile only @media (max-width: 1099px) {} - mobile + tablet (most common) @media (min-width: 768px) {} - small tablet up (hero/marquee secondary) @media (min-width: 1100px) {} - desktop up (most common) @media (min-width: 1440px) {} - wide desktop The 600 / 1100 pair is the canonical mobile / tablet / desktop split. 768 is the documented secondary breakpoint used by hero, bento, and logo-marquee components. Avoid introducing new breakpoints (1023, 640, etc.) without need. Exception: 782px is the WordPress admin convention and is allowed inside admin-only blocks. ---------------------------------------------------------------------------- */ @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Geist-variable.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Instrument Serif — italic only, used for editorial emphasis via .cp-span-serif */ @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Tailwind Neutral Scale */ --slate-100: #f5f5f5; --slate-200: #e5e5e5; --slate-300: #d4d4d4; --slate-400: #a3a3a3; --slate-500: #737373; --slate-600: #525252; --slate-800: #262626; --slate-900: #171717; --slate-950: #0a0a0a; /* Brand */ --accent: #009ADE; --accent-solid: #0070A2; /* darker variant of --accent for AA white-text contrast */ --accent-light: color-mix(in oklch, var(--accent) 65%, white); --accent-pale: color-mix(in oklch, var(--accent) 35%, white); --accent-dim: rgba(0, 154, 222, 0.1); --accent-ring: rgba(0, 154, 222, 0.22); --accent-fade: rgba(0, 154, 222, 0.03); --accent-halo: rgba(0, 154, 222, 0.06); --text-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 55%, var(--accent-pale) 100%); /* Semantic Aliases - light by default */ --bg-base: #fff; --bg-surface: color-mix(in srgb, var(--bg-base) 96%, var(--slate-400)); --bg-raised: var(--slate-100); --text-base: var(--slate-900); --text-muted: var(--slate-500); --text-inverse: #fff; --border: var(--slate-200); --border-hover: var(--slate-300); --radius: 0.75rem; /* 12px - cards, panels */ --radius-sm: 0.25rem; /* 4px - badges, inputs, small elements */ --radius-pill: 9999px; /* buttons */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Shadows */ --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05); --shadow-card-hover: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06); /* Motion - hover */ --transition-fast: 0.2s; --transition-base: 0.3s; --stagger-delay: 80ms; /* Typography - scale */ --fs-sm: 0.875rem; /* 14px - captions, badges */ --fs-base: 1rem; /* 16px - body copy */ --fs-body-lg: clamp(1.0625rem, 2vw, 1.25rem); /* 17–20px - ledes, intro body */ --fs-lg: 1.125rem; /* 18px - card titles, sub-heads */ --fs-xl: clamp(1.25rem, 2vw, 1.5rem); /* 20–24px - small headings */ --fs-display: clamp(2.5rem, 5.5vw, 4.5rem); /* 40–72px - section headings, matches hero */ --fs-stat: clamp(2rem, 3.5vw, 2.5rem); /* 32–40px - stat numbers */ /* Typography - serif (editorial italic emphasis — see .cp-span-serif) */ --font-serif: "Instrument Serif", Georgia, Cambria, "Times New Roman", Times, serif; /* Typography - mono */ --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --fs-mono: 0.875rem; --fs-mono-sm: 0.8125rem; --fs-mono-xs: 0.75rem; --letter-spacing-caps: 0.14em; /* Generic spacing scale - use for gap, padding, margin in components. Card- and icon-specific tokens below remain for legacy callsites. */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 2.5rem; /* 40px */ --space-3xl: 3rem; /* 48px */ --space-4xl: 4rem; /* 64px */ /* Cards & Grids */ --card-gap: 1rem; --card-pad: 1.5rem; --card-gap-inner: 1rem; /* gap between elements inside a card */ --icon-gap: 0.5rem; /* Card typography */ --fs-card-title: clamp(1.25rem, 2vw, 1.5rem); /* 20-24px - card headings (matches --fs-xl) */ --fs-card-title-sm: 0.9375rem; /* 15px - compact card headings */ --fs-card-body: 1rem; /* 16px - card descriptions */ --fs-card-body-sm: 0.875rem; /* 14px - compact card descriptions */ --lh-card-body: 1.65; /* Icon containers */ --icon-box: 2.75rem; /* 44px - standard card icon box */ --grid-gap: clamp(3rem, 6vw, 5rem); --cell-pad: clamp(2.5rem, 5vw, 4rem); /* bordered grid cell inner padding */ /* Layout */ --header-height: 4rem; --gutter: clamp(1rem, 5vw, 2.5rem); --container-width: 1600px; --grid-width: calc(var(--container-width) - var(--gutter) * 2); /* bordered grid aligns with nav content */ --section-space: clamp(5rem, 10vw, 8rem); /* Glass / Frosted Effect */ --glass-shadow: none; /* Overlays */ --nav-bg: rgba(255, 255, 255, 0.8); --nav-bg-scroll: rgba(255, 255, 255, 0.96); --overlay-dim: rgba(0, 0, 0, 0.6); /* Status */ --success: #4ade80; --success-dim: rgba(74, 222, 128, 0.08); --success-ring: rgba(74, 222, 128, 0.25); --error: #f87171; --error-dim: rgba(248, 113, 113, 0.15); --error-ring: rgba(248, 113, 113, 0.3); --warning: #fbbf24; /* Avatar palette */ --avatar-1: #4F46E5; --avatar-2: #0EA5E9; --avatar-3: #10B981; --avatar-4: #F59E0B; --avatar-5: #8B5CF6; /* Section dividers */ --section-border: var(--border); /* Icon containers - accent tint */ --icon-light-bg: rgba(0, 156, 220, 0.08); --icon-light-border: rgba(0, 156, 220, 0.2); /* Accent text - gradient in both modes */ --text-gradient: linear-gradient(135deg, #0072A0 0%, #009CDC 45%, #06b6d4 100%); } /* -- Dark mode ------------------------------------------------------------- System-aware via prefers-color-scheme, with manual override via [data-theme="light"|"dark"] on . Toggle saved to localStorage. Selector strategy: - :root holds LIGHT defaults (above). - @media (prefers-color-scheme: dark) :root:not([data-theme]) applies dark ONLY when the user has not explicitly chosen a mode. - [data-theme="dark"] and the .cp-section--*-dark classes share one block. - [data-theme="light"] no longer needs its own block — it falls back to :root defaults because the @media is scoped to :not([data-theme]). ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-base: var(--slate-950); --bg-surface: color-mix(in srgb, var(--bg-base) 96%, var(--slate-400)); --bg-raised: var(--slate-800); --text-base: #eef2ff; --text-muted: var(--slate-400); --border: rgba(255, 255, 255, 0.14); --border-hover: rgba(255, 255, 255, 0.3); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-card-hover: none; --section-border: rgba(255, 255, 255, 0.08); --text-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 55%, var(--accent-pale) 100%); --icon-light-bg: rgba(0, 156, 220, 0.12); --icon-light-border: rgba(0, 156, 220, 0.25); --nav-bg: rgba(10, 10, 10, 0.8); --nav-bg-scroll: rgba(10, 10, 10, 0.96); } } /* Manual dark override + per-section dark contexts. .cp-section--dark is the legacy alias; .cp-section--force-dark is preferred. */ [data-theme="dark"], .cp-section--force-dark, .cp-section--dark { --bg-base: var(--slate-950); --bg-surface: color-mix(in srgb, var(--bg-base) 96%, var(--slate-400)); --bg-raised: var(--slate-800); --text-base: #eef2ff; --text-muted: var(--slate-400); --border: rgba(255, 255, 255, 0.14); --border-hover: rgba(255, 255, 255, 0.3); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-card-hover: none; --section-border: rgba(255, 255, 255, 0.08); --text-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 55%, var(--accent-pale) 100%); --icon-light-bg: rgba(0, 156, 220, 0.12); --icon-light-border: rgba(0, 156, 220, 0.25); --nav-bg: rgba(10, 10, 10, 0.8); --nav-bg-scroll: rgba(10, 10, 10, 0.96); } /* .cp-section--*-dark also forces text color for sections within light contexts. */ .cp-section--force-dark, .cp-section--dark { color: #eef2ff; }