/* =============================================================
Verbis Edu — Foundations
Color, type, spacing, motion tokens. Import anywhere in the system.
Sourced from the live /apply landing page + brand system (CLAUDE.md).
Ratio rule: ~80% white/cream canvas · ~15% teal (text + dark cards)
· ~5% gold (CTAs, accent words, selected states). Never a full
teal background wash. Never gradient the brand colors.
============================================================= */
/* Exo 2 loads via in the page (preconnect + parallel fetch) — an
@import here would chain a render-blocking round trip behind this file. */
:root {
/* ---------- BRAND CORE ----------
Teal is the system: text, lines, contained dark cards.
Gold is the spark: CTAs, the one accent word, selected states. */
--teal-50: #EAF0F1;
--teal-100: #CBDBDE;
--teal-200: #9DBBC0;
--teal-300: #5E8C95;
--teal-light:#1A6475; /* teal-light — secondary surfaces, hovers */
--teal: #0E4852; /* ◆ PRIMARY — brand teal */
--teal-dark: #092F37; /* deep panels, button text on gold */
--teal-950: #061E23; /* footer, deepest ink */
--gold-soft: #FEF3D6; /* faint gold wash for pills/soft bg */
--gold-light:#FCD56A; /* gold-light — highlights */
--gold: #FBBD29; /* ◆ ACCENT — brand gold (CTAs only) */
--gold-600: #E0A50F; /* gold text on light, for AA contrast */
/* ---------- NEUTRALS (warm cream + paper) ---------- */
--white: #FFFFFF;
--paper: #F7F5F0; /* canvas — warm cream */
--paper-warm:#F5F0EA; /* hero band */
--paper-card:#F9F7F3; /* soft inset cards */
--cream-dark:#E8E4DD; /* bands, dividers */
--line: rgba(14,72,82,0.10); /* teal hairline */
--line-soft: rgba(14,72,82,0.06);
--ink: #1A1A1A; /* near-black for hero display */
/* ---------- SEMANTIC (foreground / surfaces) ---------- */
--fg-display: var(--ink); /* hero headline near-black */
--fg-1: var(--teal); /* primary headings + text */
--fg-2: rgba(14,72,82,0.70); /* body copy */
--fg-3: rgba(14,72,82,0.55); /* sub/muted */
--fg-soft: rgba(26,26,26,0.60); /* near-black at 60% */
--fg-on-teal: var(--paper); /* text on teal cards */
--fg-on-teal-soft: rgba(247,245,240,0.55);
--fg-on-gold: var(--teal-dark); /* text on gold */
--bg-1: var(--white);
--bg-2: var(--paper);
--bg-warm: var(--paper-warm);
--bg-card: var(--paper-card);
--bg-inverse: var(--teal);
--border-1: var(--line);
--border-soft: var(--line-soft);
--border-gold: rgba(251,189,41,0.12);
--accent: var(--gold);
--accent-soft: var(--gold-soft);
/* ---------- STATUS ---------- */
--success: #1F8866;
--danger: #C2362F;
/* ---------- TYPE ---------- */
--font-sans: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Fluid scale — display matches the /apply hero geometry */
--fs-display: clamp(2.5rem, 6vw, 3.5rem); /* hero H1 */
--fs-h1: clamp(2rem, 4.5vw, 3rem); /* section H2 */
--fs-h2: clamp(1.6rem, 3vw, 2.25rem);
--fs-h3: 1.375rem;
--fs-h4: 1.125rem;
--fs-body-l: 1.0625rem; /* 17px */
--fs-body: 1rem;
--fs-body-s: 0.9375rem; /* 15px */
--fs-caption: 0.8125rem; /* 13px */
--fs-micro: 0.75rem; /* 12px */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--lh-tight: 1.08;
--lh-snug: 1.2;
--lh-normal: 1.55;
--lh-loose: 1.75;
--tracking-tight: -0.025em;
--tracking-eyebrow: 0.14em;
/* ---------- SPACING (8pt) ---------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ---------- RADII (rounded, generous) ---------- */
--radius-sm: 8px;
--radius-md: 12px; /* inputs, country tiles */
--radius-lg: 16px;
--radius-xl: 24px; /* cards — rounded-3xl */
--radius-pill: 999px;
/* ---------- SHADOWS (soft, teal-tinted; gold glow for CTAs) ---------- */
--shadow-1: 0 1px 2px rgba(14,72,82,0.05);
--shadow-card: 0 2px 8px -2px rgba(14,72,82,0.06);
--shadow-lift: 0 24px 60px -22px rgba(14,72,82,0.14), 0 8px 20px -12px rgba(14,72,82,0.08);
--shadow-gold: 0 12px 30px -10px rgba(251,189,41,0.30);
--shadow-teal: 0 14px 34px -12px rgba(14,72,82,0.22);
/* ---------- MOTION (the /apply easing) ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
--dur-1: 120ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 600ms;
/* ---------- LAYOUT ---------- */
--container: 1152px; /* max-w-6xl — sections */
--container-wide: 1280px; /* max-w-7xl — hero */
}
/* =============================================================
Base element styles
============================================================= */
html {
font-family: var(--font-sans);
font-size: var(--fs-body);
color: var(--fg-2);
background: var(--bg-2);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body { margin: 0; }
* { box-sizing: border-box; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
font-family: var(--font-sans);
color: var(--fg-1);
font-weight: var(--fw-extrabold);
letter-spacing: var(--tracking-tight);
line-height: var(--lh-tight);
text-wrap: balance;
margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-display); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-display); text-wrap: balance; margin: 0; }
p, .body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); margin: 0; font-weight: var(--fw-medium); text-wrap: pretty; }
.lead { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); font-weight: var(--fw-medium); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }
.micro { font-size: var(--fs-micro); color: var(--fg-3); }
/* The one gold accent word inside a heading — brand signature.
Use or .accent. Italic version mirrors the /apply hero. */
.accent, em.accent { color: var(--gold); font-style: normal; }
.accent-italic { color: var(--gold); font-style: italic; }
.muted-tail { color: var(--fg-soft); font-weight: var(--fw-regular); }
/* Eyebrow / pill — tiny spaced label, often with a gold dot. */
.eyebrow {
font-size: var(--fs-micro);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--fg-3);
}
.pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: var(--radius-pill);
background: rgba(251,189,41,0.10);
font-size: var(--fs-micro); font-weight: var(--fw-bold);
letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
color: var(--fg-3);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.pill.on-teal { background: rgba(255,255,255,0.08); color: var(--fg-on-teal-soft); }
/* Buttons — pill-shaped. Primary = gold; secondary = teal. */
.btn {
font-family: var(--font-sans); font-weight: var(--fw-bold);
font-size: var(--fs-body-s); line-height: 1;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 26px; border-radius: var(--radius-pill);
border: 0; cursor: pointer; text-decoration: none;
transition: transform var(--dur-2) var(--ease-out),
box-shadow var(--dur-3) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: var(--fg-on-gold); box-shadow: var(--shadow-gold); }
.btn-primary:hover { box-shadow: 0 16px 38px -10px rgba(251,189,41,0.45); }
.btn-secondary { background: var(--teal); color: var(--white); }
.btn-secondary:hover { background: var(--teal-light); }
.btn-ghost { background: transparent; color: var(--teal); border: 1px solid var(--line); }
.btn-lg { padding: 17px 32px; font-size: var(--fs-body-l); }
.btn-block { width: 100%; justify-content: center; }
/* Cards */
.card {
background: var(--white); border: 1px solid var(--border-soft);
border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.card-lift { box-shadow: var(--shadow-lift); }
.card-inset { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); }
.card-teal { background: var(--teal); color: var(--fg-on-teal); border-radius: var(--radius-xl); }
/* Gold check chip used on selected / included items */
.check {
width: 20px; height: 20px; border-radius: 50%; flex: none;
background: var(--gold); color: var(--teal-dark);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900;
}
/* Layout helpers */
.container { max-width: var(--container); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
a { color: var(--teal); text-decoration: none; }
::selection { background: var(--gold-light); color: var(--teal-dark); }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}