/* ============================================================================ Frontpagely — marketing.css The self-contained stylesheet for the unauthenticated marketing site (frontpagely.com). Linked once per page as . Implements the Frontpagely Design System (frontpagely-design-system/project): light-first, flat backgrounds, hairline 1px borders doing the structural work, soft cool-tinted shadows, deep-indigo brand for actions/nav/links only, Space Grotesk for big metrics, and the semantic red→amber→green score ramp as the ONLY place color carries meaning. Calm, credible instrument — never a growth-hack SaaS landing page. No gradients, no photos, no textures. NEVER pink (that is the competitor). Tokens below are inlined verbatim from tokens/*.css so this file is self-contained — the page links only this one stylesheet. Sentence case everything; UPPERCASE only for the small letter-spaced labels. ============================================================================ */ /* Webfonts — Geist (UI), Space Grotesk (big numbers, tabular), Geist Mono (code/JSON-LD/domains). Mirrors tokens/fonts.css. The page also async-loads the same families; this @import is the self-contained fallback. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* ──────────────────────────────────────────────────────────────────────── 1. Design tokens (:root custom properties) — copied from tokens/*.css ──────────────────────────────────────────────────────────────────────── */ :root { /* --- Neutral foundation: a slightly cool gray scale --- */ --gray-50: #F7F9FB; --gray-100: #F1F4F7; --gray-150: #E9EDF2; --gray-200: #E2E7EE; --gray-300: #D0D7E0; --gray-400: #AAB4C2; --gray-500: #828D9D; --gray-600: #5B6675; --gray-700: #3C4552; --gray-800: #262C36; --gray-900: #161A21; /* --- Brand: confident deep indigo-blue. Actions / nav / links only. NEVER used for the score ramp, never pink. --- */ --color-brand: #2F46DB; --color-brand-hover: #2336B4; --color-brand-active: #1C2C95; --color-brand-subtle: #EEF1FD; /* selected rows, info banners */ --color-brand-ghost: #F6F8FE; /* lighter wash for hover rows */ --color-on-brand: #FFFFFF; /* --- Surfaces (flat, light-first) --- */ --color-bg: #FAFBFC; --color-surface: #FFFFFF; --color-surface-2: #F4F6F9; --color-overlay: rgba(22, 26, 33, 0.45); /* --- Lines (hairline borders do the structural work) --- */ --color-border: #E2E7EE; --color-border-strong: #D0D7E0; --color-border-faint: #EDF0F4; /* --- Text --- */ --color-text: #161A21; --color-text-muted: #5B6675; --color-text-subtle: #828D9D; --color-text-onfill: #FFFFFF; /* --- Focus --- */ --color-focus-ring: #2F46DB; --focus-ring: 0 0 0 3px rgba(47, 70, 219, 0.35); /* --- Semantic: status --- */ --color-success: #15935A; --color-success-bg: #E4F3EC; --color-warning: #B5710E; --color-warning-bg: #FCF1DF; --color-warning-mark:#E8A317; --color-danger: #CE3A2C; --color-danger-bg: #FBEAE8; --color-info: #2563C9; --color-info-bg: #E7EFFB; /* --- Honesty markers (first-class, never fine print) --- */ --color-directional: #6F6AA6; --color-directional-bg: #EDECF5; --color-low-confidence: #7C879B; --color-low-confidence-bg: #EEF1F5; /* --- SeenRate score ramp (poor → strong). Absolute, independent of brand. The ONLY place color carries meaning. --- */ --score-poor: #DA3B2C; /* 0–24 */ --score-fair: #E58A22; /* 25–49 */ --score-good: #8FAE2A; /* 50–74 */ --score-strong: #15935A; /* 75–100 */ --score-track: #E6EAF0; --score-poor-bg: #FBEAE8; --score-fair-bg: #FCF1E1; --score-good-bg: #F1F4E1; --score-strong-bg: #E4F3EC; --score-ramp-0: #DA3B2C; --score-ramp-25: #E58A22; --score-ramp-50: #C7B12B; --score-ramp-75: #8FAE2A; --score-ramp-100: #15935A; /* --- Typography --- */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Space Grotesk', 'Geist', system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-display: 64px; --text-h1: 30px; --text-h2: 22px; --text-h3: 18px; --text-body: 15px; --text-sm: 13.5px; --text-xs: 12px; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-label: 0.06em; --fonts-tabular: 'tnum' 1, 'lnum' 1; /* --- Spacing (4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; /* default card padding */ --space-6: 32px; /* section gap */ --space-8: 48px; --space-10: 64px; --card-pad: var(--space-5); --section-gap: var(--space-6); --control-height: 40px; --control-height-sm: 32px; /* Marketing reading column */ --container-max: 1080px; --prose-max: 720px; /* --- Radius --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* --- Elevation (soft, cool-tinted, low-contrast) --- */ --elev-0: none; --elev-1: 0 1px 2px rgba(28, 42, 92, 0.06), 0 1px 1px rgba(28, 42, 92, 0.04); --elev-2: 0 4px 12px rgba(28, 42, 92, 0.08), 0 1px 3px rgba(28, 42, 92, 0.06); --elev-3: 0 16px 40px rgba(20, 30, 66, 0.16), 0 4px 12px rgba(20, 30, 66, 0.10); --elev-toast: 0 10px 30px rgba(20, 30, 66, 0.22), 0 2px 8px rgba(20, 30, 66, 0.14); /* --- Motion --- */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 400ms; --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.40, 1); /* --- Marketing landing page (the Salient-style horizontal home). The design's default "Blend" theme, recreated statically. These drive the hero gradient blobs, the tilted marquee strips, and the pricing toggle. Brand stays indigo (--mkt-accent). --- */ --mkt-accent: #2F46DB; /* = --color-brand; the landing accent */ --mkt-gA: #3A5BFF; /* hero blob gradient start */ --mkt-gB: #8EA2FF; /* hero blob gradient end */ --mkt-gC: #FFB35C; /* warm accent circle */ --mkt-marquee: #2F46DB; /* first marquee strip fill */ --mkt-mtext: #ffffff; /* first marquee strip text */ --mkt-warm: #E8A317; /* underline-squiggle stroke */ --mkt-strip2: #FFD9A6; /* second marquee strip fill */ --mkt-strip2text: #7a4a12; /* second marquee strip text */ --mkt-radius: 20px; /* card radius on the landing */ --mkt-radius-sm: 12px; /* button radius on the landing */ /* Pricing toggle state — flipped by the inline vanilla