/* =============================================================
JTC EDUCATION — Design Tokens
Import this file first; every component reads from these vars.
============================================================= */
/* ── FONTS ─────────────────────────────────────────
Load these in BEFORE this stylesheet:
────────────────────────────────────────────────── */
:root {
/* ── COLORS — PRIMITIVE ─────────────────────── */
--navy: #0F1946; /* primary — headings, dark sections, text emphasis */
--navy-tint: #1a2560; /* lighter navy for radial gradients on dark bg */
--gold: #D3B166; /* the brand gold — decoration (icons, dots, button bg) + eyebrows on any surface */
--gold-hover: #e0c488; /* lighter gold for button-hover lift (internal tools only) */
--gold-soft: rgba(211, 177, 102, 0.15); /* gold-wash for pills, badges, icon tile backgrounds */
--cream: #f8f6f1; /* primary light surface (page alt bg) */
--cream-warm: #f3efe6; /* secondary light surface (warmer, card fallback) */
--body-text: #4a4a4a; /* default body paragraph color */
--body-soft: #5a5a5a; /* secondary body, captions */
--rule: rgba(15, 25, 70, 0.08); /* hairline dividers */
/* ── COLORS — STATUS / FEEDBACK ───────────────
Used on internal tools, billing, forms. NOT used on marketing surfaces. */
--success: #4a7c59; --success-bg: rgba(74, 124, 89, 0.10);
--warning: #a67a2d; --warning-bg: rgba(166, 122, 45, 0.12);
--error: #B3261E; --error-bg: rgba(179, 38, 30, 0.08);
--critical: #7F1D1D; --critical-bg: rgba(127, 29, 29, 0.08);
/* ── COLORS — SEMANTIC ──────────────────────── */
--fg: var(--navy);
--fg-body: var(--body-text);
--fg-muted: var(--body-soft);
--fg-accent: var(--gold);
--fg-on-dark: #ffffff;
--fg-on-dark-muted: rgba(255,255,255,0.6);
--bg: #ffffff;
--bg-alt: var(--cream);
--bg-alt-2: var(--cream-warm);
--bg-dark: var(--navy);
--border: var(--rule);
/* ── TYPE FAMILIES ──────────────────────────── */
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
/* ── TYPE — WEIGHTS ─────────────────────────── */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
--weight-bold: 700;
/* ── TYPE SCALE (fluid where it matters) ────── */
--fs-display: clamp(48px, 6.5vw, 88px); /* hero heading */
--fs-h1: clamp(40px, 5vw, 64px); /* page title */
--fs-h2: clamp(32px, 4vw, 46px); /* section title */
--fs-h3: clamp(26px, 2.8vw, 34px); /* feature title */
--fs-h4: 22px; /* card title */
--fs-body-lg: 17px; /* default body */
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-caption: 13px;
--fs-eyebrow: 11px; /* uppercase gold labels */
--fs-numeral: clamp(140px, 22vw, 280px); /* giant editorial numerals */
/* ── LETTER-SPACING ─────────────────────────── */
--tracking-tight: -0.01em;
--tracking-snug: -0.005em;
--tracking-normal: 0;
--tracking-caps-sm: 0.12em; /* small caps, labels */
--tracking-caps-md: 0.15em; /* elegant link */
--tracking-caps-lg: 0.25em; /* eyebrow */
--tracking-caps-xl: 0.30em; /* subject strip */
/* ── LINE-HEIGHT ────────────────────────────── */
--lh-display: 1.1;
--lh-heading: 1.2;
--lh-body: 1.7;
--lh-tight: 1.3;
/* ── 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;
--space-24: 96px;
--space-section-y: clamp(80px, 10vw, 140px); /* vertical padding of a .section */
/* ── LAYOUT ─────────────────────────────────── */
--container-max: 1180px;
--container-pad: 40px;
--content-max: 720px; /* body paragraphs in editorial sections */
--content-narrow: 560px;
/* ── RADII ──────────────────────────────────── */
--radius-none: 0;
--radius-xs: 2px; /* buttons, dashboard chrome */
--radius-sm: 4px; /* app buttons */
--radius-md: 8px; /* app cards */
--radius-lg: 10px; /* tutor avatar ring, tutor card */
--radius-pill: 999px;
/* ── BORDERS ────────────────────────────────── */
--border-hairline: 1px solid var(--rule);
--border-strong: 1px solid rgba(15,25,70,0.14);
/* ── SHADOWS ────────────────────────────────── */
--shadow-hair: 0 1px 2px rgba(15,25,70,0.06);
--shadow-card: 0 1px 2px rgba(15,25,70,0.04), 0 20px 60px -20px rgba(15,25,70,0.18);
--shadow-lift: 0 40px 80px -30px rgba(15,25,70,0.45), 0 20px 40px -20px rgba(15,25,70,0.35);
/* ── MOTION ─────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* primary easing — all reveals */
--ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
--dur-quick: 0.3s;
--dur-normal: 0.4s;
--dur-slow: 0.9s; /* scroll reveals, image reveals */
/* ── Z-INDEX ────────────────────────────────── */
--z-header: 100;
--z-overlay: 200;
--z-grain: 9999;
}
/* =============================================================
SEMANTIC TYPE STYLES — use class names, not raw tokens
============================================================= */
.display {
font-family: var(--font-serif);
font-size: var(--fs-display);
font-weight: var(--weight-regular);
line-height: var(--lh-display);
letter-spacing: var(--tracking-tight);
color: var(--fg);
}
.h1 {
font-family: var(--font-serif);
font-size: var(--fs-h1);
font-weight: var(--weight-regular);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-snug);
color: var(--fg);
}
.h2 {
font-family: var(--font-serif);
font-size: var(--fs-h2);
font-weight: var(--weight-regular);
line-height: 1.2;
letter-spacing: var(--tracking-snug);
color: var(--fg);
}
.h3 {
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: var(--weight-medium);
line-height: 1.25;
color: var(--fg);
}
.h4 {
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: var(--weight-medium);
line-height: 1.3;
color: var(--fg);
}
/* Italic emphasis in headings — ALWAYS gold, regular weight */
.display em, .h1 em, .h2 em, .h3 em, .h4 em {
font-style: italic;
color: var(--gold);
font-weight: var(--weight-regular);
}
.lede {
font-family: var(--font-sans);
font-size: var(--fs-body-lg);
font-weight: var(--weight-light);
line-height: var(--lh-body);
color: var(--fg-body);
max-width: var(--content-max);
}
.body {
font-family: var(--font-sans);
font-size: var(--fs-body-lg);
font-weight: var(--weight-regular);
line-height: var(--lh-body);
color: var(--fg-body);
}
.caption {
font-family: var(--font-sans);
font-size: var(--fs-caption);
color: var(--fg-muted);
}
/* Gold uppercase micro-label above any heading */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: var(--weight-regular);
text-transform: uppercase;
letter-spacing: var(--tracking-caps-lg);
color: var(--fg-accent);
display: inline-block;
}
/* Gold serif micro-link with animated arrow */
.elegant-link {
font-family: var(--font-serif);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-caps-md);
color: var(--fg-accent);
display: inline-block;
transition: letter-spacing var(--dur-normal) var(--ease-out), color var(--dur-normal);
}
.elegant-link::after {
content: ' →';
opacity: 0.7;
display: inline-block;
transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal);
}
.elegant-link:hover { letter-spacing: 0.22em; }
.elegant-link:hover::after { transform: translateX(4px); opacity: 1; }
/* Giant editorial numeral — used in journey / approach pages */
.numeral {
font-family: var(--font-serif);
font-size: var(--fs-numeral);
font-weight: var(--weight-regular);
line-height: 0.85;
color: var(--gold);
opacity: 0.9;
letter-spacing: -0.04em;
font-variant-numeric: lining-nums;
}
.numeral--ghost { /* used as watermark behind content */
color: var(--gold);
opacity: 0.08;
position: absolute;
pointer-events: none;
}
/* Body element defaults when this file is the stylesheet */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body-lg);
line-height: var(--lh-body);
color: var(--fg-body);
background: var(--bg);
margin: 0;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }