/* ============================================================ JETPAY DESIGN TOKENS Single source of truth for color, type, spacing, radii. Colors + fonts confirmed from the Webflow export. ============================================================ */ :root { /* ---- Brand color ---- CONFIRMED from the real Webflow stylesheet (jetpay.webflow.css). */ --jp-ink: #101828; /* dominant dark — hero, footer, dark sections (most-used color) */ --jp-ink-2: #1D2939; /* secondary dark surface */ --jp-ink-navy: #142B3A; /* navy variant used in gradients */ --jp-lime: #D1F646; /* primary lime accent */ --jp-lime-deep: #799822; /* darker lime/olive — used for lime text on light, hover */ --jp-purple: #8125D2; /* secondary accent — sign-up button, gradients */ --jp-purple-2: #6941C6; /* purple mid */ --jp-purple-3: #53389E; /* purple deep */ --jp-purple-light: #9b3df0; /* purple light — finalcta gradient end */ --jp-white: #FFFFFF; --jp-cream: #FFFCF5; /* warm off-white section bg */ --jp-grey-50: #F7F7F8; /* light section background */ --jp-grey-300: #DAE0E8; /* borders / dividers */ --jp-grey-500: #576872; /* muted body text on light */ --jp-grey-700: #1F2A31; /* ---- Semantic ---- */ --jp-bg: var(--jp-white); --jp-bg-dark: var(--jp-ink); --jp-text: var(--jp-ink); --jp-text-muted: var(--jp-grey-500); --jp-text-on-dark: var(--jp-white); --jp-accent: var(--jp-lime); --jp-accent-text: #000; /* text that sits on lime buttons — pure black for max contrast */ /* ---- Typography ---- CONFIRMED from export. Display = Adobe Typekit "acumin-pro" (kit bqs1gvi — needs the Typekit in ). Body = Inter (Google). acumin-pro-wide for big display, semi-condensed for sub-display/UI. */ --jp-font-wide: "acumin-pro-wide", "acumin-pro-semi-condensed", system-ui, sans-serif; --jp-font-display: "acumin-pro-semi-condensed", system-ui, sans-serif; --jp-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --jp-size-hero: clamp(2.75rem, 6vw, 4.5rem); --jp-size-h2: clamp(2rem, 4vw, 3rem); --jp-size-h3: clamp(1.25rem, 2.2vw, 1.6rem); --jp-size-body: 1.0625rem; --jp-size-small: 0.875rem; --jp-size-eyebrow: 0.8125rem; --jp-weight-regular: 400; --jp-weight-medium: 500; --jp-weight-semibold: 600; /* display headings — matches live site's Acumin weight */ --jp-weight-bold: 700; --jp-leading-tight: 1.08; --jp-leading-body: 1.6; /* ---- Spacing scale (8px base) ---- */ --jp-space-1: 0.5rem; --jp-space-2: 1rem; --jp-space-3: 1.5rem; --jp-space-4: 2rem; --jp-space-6: 3rem; --jp-space-8: 4rem; --jp-space-12: 6rem; --jp-space-16: 8rem; /* ---- Radii ---- */ --jp-radius-sm: 8px; --jp-radius-md: 16px; --jp-radius-lg: 24px; --jp-radius-pill: 999px; /* ---- Layout ---- */ --jp-maxw: 1200px; --jp-gutter: clamp(1rem, 4vw, 3rem); /* ---- Motion ---- */ --jp-ease: cubic-bezier(0.22, 1, 0.36, 1); --jp-dur: 0.4s; }