/* ============================================================
Self-hosted Manrope (variable, weights 100–900)
Replaces the former Google Fonts so no visitor IP/UA is
sent to Google before cookie consent (UK GDPR). woff2 binaries
live in web/public/assets/fonts/, pulled from the latin and
latin-ext Google subsets (single variable file per subset).
============================================================ */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(../assets/fonts/manrope-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(../assets/fonts/manrope-latin.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;
}
/* ============================================================
Coverin Design Tokens — colours, typography, radii, shadows
Mirrors lib/core/theme/app_theme.dart (+ AppPalette.dark for the
.dark block).
Dark-mode strategy (WS6 / Chat 14):
· :root — light defaults. Every token's light value is
BYTE-IDENTICAL to the pre-WS6 hex, so the var()
migration is a provable no-op in light.
· .dark — explicit user override (or `documentElement.classList
.add('dark')` from the FOUC head snippet).
· @media (prefers-color-scheme: dark) :root:not(.theme-light):not(.dark)
— system follow ONLY when the user hasn't picked.
Scoping to `:not(.theme-light):not(.dark)` is what
makes explicit-light + OS-dark stay light (and
explicit-dark + OS-light stay dark).
The matching `--*-rgb` companions are the Tailwind 3.x ``
substrate (see tailwind.config.js): `bg-white/50` etc. resolve via
`rgb(var(--surface-rgb) / 0.5)`.
============================================================ */
:root {
/* ── Brand ──────────────────────────────────────────────── */
--brand-primary: #6B2FA0; /* Brand purple — buttons, accents */
--brand-primary-dark: #4A1F70; /* AAA text/link on white (7:1) */
--brand-primary-light: #9C6DC5; /* Dark-mode primary, soft accents */
--brand-primary-deep: #2E1149; /* Cookie-link hover (deeper than -dark) */
--brand-primary-50: #F5F0FA;
--brand-primary-100: #EBE0F5;
--brand-primary-200: #D4BFE8;
--brand-primary-500: #8B5BC4;
--brand-secondary: #2D8B37; /* Brand green — "filled/success" */
--brand-secondary-light: #E8F5E9;
--brand-accent: #F59E0B;
/* RGB triplet companions (for slash-opacity + rgb()/rgba() consumers).
Triplet form is `R G B` (space-separated), used as `rgb(var(--x) / N)`.
Brand triplets are CONSTANTS — purple stays purple in dark. */
--brand-primary-rgb: 107 47 160;
--brand-primary-dark-rgb: 74 31 112;
--brand-primary-light-rgb: 156 109 197;
--brand-secondary-rgb: 45 139 55;
/* Constant white ink used on brand-tone surfaces (CTA buttons, hero
gradients, cookie primary button). Stays #FFFFFF in BOTH modes — the
CTA bg is brand purple in both modes, so its ink must not flip with
the rest of the surface scale. */
--on-brand-fg: #FFFFFF;
/* ── Semantic / State ───────────────────────────────────── */
--warning: #E3A008;
--warning-light: #FDF6B2;
--error: #BA1A1A;
--error-light: #FDECEA;
--error-dark: #FFB4AB;
--urgent-job: #FDE8E8;
--urgent-job-border: #E02424;
--agency-badge-bg: #F3E8FF;
--agency-badge-text: #6B2FA0;
--teacher-badge-bg: #E8F5E9;
--teacher-badge-text: #2D8B37;
/* ── Neutrals (light) ───────────────────────────────────── */
--surface: #FFFFFF;
--background: #F9FAFB;
--card: #FFFFFF;
--fg-1: #111928;
--fg-2: #6B7280;
--fg-3: #6B7280;
--divider: #E5E7EB;
--border: #D1D5DB;
/* ── Tailwind-mirror core scales (RGB triplets) ─────────────
Light values BYTE-IDENTICAL to Tailwind 3.x defaults — proven via
`rgb(R G B / 1) == #RRGGBB`. Dark values mirror AppPalette.dark.
─────────────────────────────────────────────────────────── */
--surface-rgb: 255 255 255; /* white (bg-white, text-white) */
--ink-strong-rgb: 0 0 0; /* black (bg-black, text-black) */
--gray-50-rgb: 249 250 251; /* #F9FAFB */
--gray-100-rgb: 243 244 246; /* #F3F4F6 */
--gray-200-rgb: 229 231 235; /* #E5E7EB */
--gray-300-rgb: 209 213 219; /* #D1D5DB */
--gray-400-rgb: 156 163 175; /* #9CA3AF */
--gray-500-rgb: 107 114 128; /* #6B7280 */
--gray-600-rgb: 75 85 99; /* #4B5563 */
--gray-700-rgb: 55 65 81; /* #374151 */
--gray-800-rgb: 31 41 55; /* #1F2937 */
--gray-900-rgb: 17 24 39; /* #111827 */
--gray-950-rgb: 3 7 18; /* #030712 */
/* Shadow base (cool-ink). Light defaults match the existing
rgba(15, 23, 42, …) used by .navbar.scrolled / cookie banner. */
--shadow-cool-rgb: 15 23 42;
/* ── Focus + composition tokens (semantic) ──────────────── */
--focus-ring: var(--brand-primary-dark); /* 7.0:1 on white */
/* ── Cookie banner / panel ──────────────────────────────── */
--cookie-panel-bg: #FFFFFF;
--cookie-panel-fg: #1F2937;
--cookie-panel-title-fg: #111827;
--cookie-panel-intro-fg: #4B5563;
--cookie-banner-bg-rgb: 255 255 255; /* used with /0.98 */
--cookie-banner-border-rgb: 107 47 160; /* used with /0.12 */
--cookie-banner-shadow:
0 18px 50px rgb(15 23 42 / 0.12),
0 4px 12px rgb(15 23 42 / 0.06);
--cookie-panel-shadow: 0 30px 80px rgb(15 23 42 / 0.25);
--cookie-overlay-scrim-rgb: 17 24 39; /* used with /0.55 */
--cookie-btn-secondary-bg: #FFFFFF;
--cookie-btn-secondary-fg: #1F2937;
--cookie-btn-secondary-border: #D1D5DB;
--cookie-btn-secondary-hover-bg: #F9FAFB;
--cookie-btn-secondary-hover-border: #9CA3AF;
--cookie-link-fg: #4A1F70;
--cookie-link-hover-fg: #2E1149;
--cookie-category-bg: #FFFFFF;
--cookie-category-border: #E5E7EB;
--cookie-category-title-fg: #111827;
--cookie-category-desc-fg: #4B5563;
--cookie-category-badge-bg: #F3F4F6;
--cookie-category-badge-fg: #6B7280;
--cookie-close-fg: #6B7280;
--cookie-close-hover-bg: #F3F4F6;
--cookie-close-hover-fg: #111827;
--cookie-toggle-track: #D1D5DB;
--cookie-toggle-track-checked: #6B2FA0;
--cookie-toggle-track-disabled: #E5E7EB;
--cookie-toggle-thumb: #FFFFFF;
--cookie-toggle-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
--cookie-toggle-focus-ring: rgb(107 47 160 / 0.25);
--cookie-panel-footer-border: #F3F4F6;
/* ── Navbar (glassmorphism) ─────────────────────────────── */
--navbar-bg-rgb: 255 255 255; /* used with /0.8 */
--navbar-bg-scrolled-rgb: 255 255 255; /* used with /0.95 */
--navbar-shadow:
0 1px 3px rgb(0 0 0 / 0.08),
0 1px 2px rgb(0 0 0 / 0.06);
/* ── Floating blob tints (radial bg art) ────────────────── */
--blob-purple-soft-rgb: 107 47 160; /* used with /0.08 */
--blob-purple-faint-rgb: 107 47 160; /* used with /0.05 */
--blob-green-soft-rgb: 45 139 55; /* used with /0.06 */
/* ── Hero radial gradient base + sky ────────────────────── */
--hero-sky-top: #FDFBFF; /* top of linear hero */
--hero-sky-bottom: #FFFFFF; /* bottom of hero */
/* ── Timeline + popular-badge accents ───────────────────── */
--timeline-line-start: #6B2FA0;
--timeline-line-end: #2D8B37;
--popular-glow-shadow:
0 0 0 1px rgb(107 47 160 / 0.2),
0 8px 32px rgb(107 47 160 / 0.15);
/* ── Feature-card hover (purple-tinted) ─────────────────── */
--feature-card-hover-shadow: 0 20px 40px rgb(107 47 160 / 0.1);
--card-hover-shadow: 0 12px 24px rgb(107 47 160 / 0.12);
/* ── Typography families ────────────────────────────────── */
--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* ── Type scale ─────────────────────────────────────────── */
--fs-display-lg: 48px;
--fs-display-md: 36px;
--fs-display-sm: 28px;
--fs-headline-lg: 24px;
--fs-title-lg: 20px;
--fs-title-md: 16px;
--fs-body-lg: 16px;
--fs-body-md: 14px;
--fs-body-sm: 12px;
--fs-label-lg: 14px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--fw-black: 900;
/* ── Radii ──────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-3xl: 24px;
--radius-pill: 9999px;
/* ── Shadows ────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-lg: 0 12px 24px rgb(107 47 160 / 0.12);
--shadow-xl: 0 18px 50px rgb(15 23 42 / 0.12), 0 4px 12px rgb(15 23 42 / 0.06);
--shadow-2xl: 0 20px 40px rgb(107 47 160 / 0.10);
--shadow-cta: 0 8px 32px rgb(107 47 160 / 0.25);
/* ── 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;
--control-height: 48px;
/* ── Motion ─────────────────────────────────────────────── */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 150ms;
--dur-base: 250ms;
--dur-slow: 600ms;
/* ── Gradients (hero + CTA) ─────────────────────────────── */
--gradient-brand-text:
linear-gradient(135deg, #6B2FA0, #9C6DC5, #6B2FA0);
--gradient-cta-bg:
linear-gradient(135deg, #6B2FA0 0%, #4A1F70 50%, #3B1A5E 100%);
--gradient-hero:
radial-gradient(ellipse 80% 60% at 50% 0%, rgb(107 47 160 / 0.08) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgb(156 109 197 / 0.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgb(45 139 55 / 0.04) 0%, transparent 60%),
linear-gradient(180deg, #FDFBFF 0%, #FFFFFF 100%);
}
/* ============================================================
.dark — explicit override (toggle = "Dark")
============================================================ */
.dark {
/* ── Neutrals ───────────────────────────────────────────── */
--surface: #1C1D21;
--background: #121316;
--card: #1C1D21;
--fg-1: #ECEDEF; /* primary text on dark surfaces */
--fg-2: #B5B6BC; /* secondary text */
--fg-3: #8D8E96; /* tertiary / muted */
--divider: #2A2B30;
--border: #34353B;
/* ── Tailwind-mirror core scales (dark inversion) ───────── */
--surface-rgb: 28 29 33;
--ink-strong-rgb: 0 0 0;
--gray-50-rgb: 21 22 26;
--gray-100-rgb: 28 29 33;
--gray-200-rgb: 38 39 44;
--gray-300-rgb: 52 53 59;
--gray-400-rgb: 90 91 98;
--gray-500-rgb: 141 142 150;
--gray-600-rgb: 181 182 188;
--gray-700-rgb: 208 209 214;
--gray-800-rgb: 228 229 233;
--gray-900-rgb: 236 237 239;
--gray-950-rgb: 245 246 248;
/* Shadows: darker base + stronger alpha so card separation survives. */
--shadow-cool-rgb: 0 0 0;
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
--shadow-md: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.35);
--shadow-lg: 0 12px 24px rgb(0 0 0 / 0.45);
--shadow-xl: 0 18px 50px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.40);
--shadow-2xl: 0 20px 40px rgb(0 0 0 / 0.55);
--shadow-cta: 0 8px 32px rgb(0 0 0 / 0.55);
/* ── Brand: keep purple constant in dark for CTA recognition;
lift the "dark" variant to a light purple so focus rings + cookie
links remain ≥4.5:1 on the dark surface. */
--brand-primary-dark: #C9A4E8; /* lifted: ~AAA on #1C1D21 */
--focus-ring: var(--brand-primary-dark);
/* --brand-primary stays #6B2FA0 in dark (white ink on it ≈4.7:1 ✓). */
/* ── Semantic state colours (lifted for dark) ───────────── */
--warning-light: #3A3008; /* dim amber container */
--error-light: #3A0F0F; /* dim crimson container */
--urgent-job: #3A1212;
--agency-badge-bg: #2A1936;
--agency-badge-text:#C9A4E8;
--teacher-badge-bg: #16321B;
--teacher-badge-text:#7BC384;
/* ── Cookie banner / panel (dark) ───────────────────────── */
--cookie-panel-bg: #1C1D21;
--cookie-panel-fg: #ECEDEF;
--cookie-panel-title-fg: #ECEDEF;
--cookie-panel-intro-fg: #B5B6BC;
--cookie-banner-bg-rgb: 28 29 33;
--cookie-banner-border-rgb: 156 109 197;
--cookie-banner-shadow:
0 18px 50px rgb(0 0 0 / 0.55),
0 4px 12px rgb(0 0 0 / 0.40);
--cookie-panel-shadow: 0 30px 80px rgb(0 0 0 / 0.65);
--cookie-overlay-scrim-rgb: 0 0 0;
--cookie-btn-secondary-bg: #26272C;
--cookie-btn-secondary-fg: #ECEDEF;
--cookie-btn-secondary-border: #34353B;
--cookie-btn-secondary-hover-bg: #34353B;
--cookie-btn-secondary-hover-border: #5A5B62;
--cookie-link-fg: #C9A4E8;
--cookie-link-hover-fg: #E1C5F1;
--cookie-category-bg: #26272C;
--cookie-category-border: #2A2B30;
--cookie-category-title-fg: #ECEDEF;
--cookie-category-desc-fg: #B5B6BC;
--cookie-category-badge-bg: #34353B;
--cookie-category-badge-fg: #B5B6BC;
--cookie-close-fg: #B5B6BC;
--cookie-close-hover-bg: #26272C;
--cookie-close-hover-fg: #ECEDEF;
--cookie-toggle-track: #34353B;
--cookie-toggle-track-checked: #9C6DC5;
--cookie-toggle-track-disabled: #26272C;
--cookie-toggle-thumb: #ECEDEF;
--cookie-toggle-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.40);
--cookie-toggle-focus-ring: rgb(156 109 197 / 0.35);
--cookie-panel-footer-border: #26272C;
/* ── Navbar (dark glassmorphism) ────────────────────────── */
--navbar-bg-rgb: 28 29 33;
--navbar-bg-scrolled-rgb: 28 29 33;
--navbar-shadow:
0 1px 3px rgb(0 0 0 / 0.45),
0 1px 2px rgb(0 0 0 / 0.35);
/* ── Floating blob tints (dimmer on dark) ───────────────── */
--blob-purple-soft-rgb: 107 47 160;
--blob-purple-faint-rgb: 107 47 160;
--blob-green-soft-rgb: 45 139 55;
/* ── Hero gradient base (dark sky) ──────────────────────── */
--hero-sky-top: #15161A;
--hero-sky-bottom: #1C1D21;
/* ── Timeline + popular accents stay brand-purple ───────── */
--popular-glow-shadow:
0 0 0 1px rgb(156 109 197 / 0.30),
0 8px 32px rgb(156 109 197 / 0.25);
--feature-card-hover-shadow: 0 20px 40px rgb(0 0 0 / 0.55);
--card-hover-shadow: 0 12px 24px rgb(0 0 0 / 0.55);
/* ── Gradients ──────────────────────────────────────────── */
--gradient-brand-text:
linear-gradient(135deg, #9C6DC5, #C9A4E8, #9C6DC5);
--gradient-cta-bg:
linear-gradient(135deg, #6B2FA0 0%, #4A1F70 50%, #3B1A5E 100%);
--gradient-hero:
radial-gradient(ellipse 80% 60% at 50% 0%, rgb(107 47 160 / 0.20) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgb(156 109 197 / 0.15) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgb(45 139 55 / 0.08) 0%, transparent 60%),
linear-gradient(180deg, #15161A 0%, #1C1D21 100%);
}
/* ============================================================
System follow — apply the dark overrides ONLY when the user
hasn't explicitly chosen Light or Dark. This is what makes
explicit-light + OS-dark stay light (and vice versa).
============================================================ */
@media (prefers-color-scheme: dark) {
:root:not(.theme-light):not(.dark) {
/* Mirrors the .dark block above. Keep these blocks in sync. */
--surface: #1C1D21;
--background: #121316;
--card: #1C1D21;
--fg-1: #ECEDEF;
--fg-2: #B5B6BC;
--fg-3: #8D8E96;
--divider: #2A2B30;
--border: #34353B;
--surface-rgb: 28 29 33;
--ink-strong-rgb: 0 0 0;
--gray-50-rgb: 21 22 26;
--gray-100-rgb: 28 29 33;
--gray-200-rgb: 38 39 44;
--gray-300-rgb: 52 53 59;
--gray-400-rgb: 90 91 98;
--gray-500-rgb: 141 142 150;
--gray-600-rgb: 181 182 188;
--gray-700-rgb: 208 209 214;
--gray-800-rgb: 228 229 233;
--gray-900-rgb: 236 237 239;
--gray-950-rgb: 245 246 248;
--shadow-cool-rgb: 0 0 0;
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40);
--shadow-md: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.35);
--shadow-lg: 0 12px 24px rgb(0 0 0 / 0.45);
--shadow-xl: 0 18px 50px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.40);
--shadow-2xl: 0 20px 40px rgb(0 0 0 / 0.55);
--shadow-cta: 0 8px 32px rgb(0 0 0 / 0.55);
--brand-primary-dark: #C9A4E8;
--focus-ring: var(--brand-primary-dark);
--warning-light: #3A3008;
--error-light: #3A0F0F;
--urgent-job: #3A1212;
--agency-badge-bg: #2A1936;
--agency-badge-text:#C9A4E8;
--teacher-badge-bg: #16321B;
--teacher-badge-text:#7BC384;
--cookie-panel-bg: #1C1D21;
--cookie-panel-fg: #ECEDEF;
--cookie-panel-title-fg: #ECEDEF;
--cookie-panel-intro-fg: #B5B6BC;
--cookie-banner-bg-rgb: 28 29 33;
--cookie-banner-border-rgb: 156 109 197;
--cookie-banner-shadow:
0 18px 50px rgb(0 0 0 / 0.55),
0 4px 12px rgb(0 0 0 / 0.40);
--cookie-panel-shadow: 0 30px 80px rgb(0 0 0 / 0.65);
--cookie-overlay-scrim-rgb: 0 0 0;
--cookie-btn-secondary-bg: #26272C;
--cookie-btn-secondary-fg: #ECEDEF;
--cookie-btn-secondary-border: #34353B;
--cookie-btn-secondary-hover-bg: #34353B;
--cookie-btn-secondary-hover-border: #5A5B62;
--cookie-link-fg: #C9A4E8;
--cookie-link-hover-fg: #E1C5F1;
--cookie-category-bg: #26272C;
--cookie-category-border: #2A2B30;
--cookie-category-title-fg: #ECEDEF;
--cookie-category-desc-fg: #B5B6BC;
--cookie-category-badge-bg: #34353B;
--cookie-category-badge-fg: #B5B6BC;
--cookie-close-fg: #B5B6BC;
--cookie-close-hover-bg: #26272C;
--cookie-close-hover-fg: #ECEDEF;
--cookie-toggle-track: #34353B;
--cookie-toggle-track-checked: #9C6DC5;
--cookie-toggle-track-disabled: #26272C;
--cookie-toggle-thumb: #ECEDEF;
--cookie-toggle-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.40);
--cookie-toggle-focus-ring: rgb(156 109 197 / 0.35);
--cookie-panel-footer-border: #26272C;
--navbar-bg-rgb: 28 29 33;
--navbar-bg-scrolled-rgb: 28 29 33;
--navbar-shadow:
0 1px 3px rgb(0 0 0 / 0.45),
0 1px 2px rgb(0 0 0 / 0.35);
--hero-sky-top: #15161A;
--hero-sky-bottom: #1C1D21;
--popular-glow-shadow:
0 0 0 1px rgb(156 109 197 / 0.30),
0 8px 32px rgb(156 109 197 / 0.25);
--feature-card-hover-shadow: 0 20px 40px rgb(0 0 0 / 0.55);
--card-hover-shadow: 0 12px 24px rgb(0 0 0 / 0.55);
--gradient-brand-text:
linear-gradient(135deg, #9C6DC5, #C9A4E8, #9C6DC5);
--gradient-cta-bg:
linear-gradient(135deg, #6B2FA0 0%, #4A1F70 50%, #3B1A5E 100%);
--gradient-hero:
radial-gradient(ellipse 80% 60% at 50% 0%, rgb(107 47 160 / 0.20) 0%, transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgb(156 109 197 / 0.15) 0%, transparent 60%),
radial-gradient(ellipse 50% 40% at 20% 80%, rgb(45 139 55 / 0.08) 0%, transparent 60%),
linear-gradient(180deg, #15161A 0%, #1C1D21 100%);
}
}
/* ============================================================
Body-level font enforcement
Tailwind's `font-sans` class is built from tailwind.config.js →
it already resolves to Manrope after our config change, but this
rule guarantees the override wherever `font-sans` isn't applied.
============================================================ */
html, body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
code, pre, .mono { font-family: var(--font-mono); }
/* ============================================================
Eyebrow pill — reusable hero/section eyebrow marker
Used on home FinalCTA, pricing CTA, about CTA per bundle design.
============================================================ */
.eyebrow-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: var(--radius-pill);
background: rgb(var(--brand-primary-rgb) / 0.08);
color: var(--brand-primary);
border: 1px solid rgb(var(--brand-primary-rgb) / 0.15);
font-size: 13px;
font-weight: 700;
}
.eyebrow-pill__dot {
width: 6px; height: 6px;
border-radius: var(--radius-pill);
background: var(--brand-primary);
}