/* =================================================================
Tejas Test Prep — Master Stylesheet
Premium pastel-blue brand system, light & airy, parent-trusted.
================================================================= */
/* ---------- Tokens ---------- */
:root {
/* Core blues */
--bg: #F4F7FE;
--surface: #FFFFFF;
--surface-alt: #EAF0FE;
--pastel-1: #E0E8FF;
--pastel-2: #C4D3FB;
--blue-mid: #4F8DF5;
--blue-deep: #1F57D6;
--navy: #111A38;
--navy-soft: #1C2A52;
/* Warm gold */
--gold: #F59E0B;
--gold-soft: #FEF1D0;
--gold-deep: #AB4E08;
--gold-ink: #C2680A; /* gold that clears 3:1 for large display text */
/* Sage / teal-green family */
--sage: #5ECFB8;
--sage-soft: #D2F4EC;
--sage-deep: #0D6A63;
--teal: #38BDF8;
--teal-soft: #D5F1FB;
--teal-deep: #0E7490;
/* Lavender / periwinkle family */
--lavender: #818CF8;
--lavender-soft:#E3E7FF;
--lavender-deep:#4338CA;
/* Peach / coral family — warm balance */
--peach: #FB7C4D;
--peach-soft: #FFE7DB;
--peach-deep: #B83A12;
/* Rose / pink — dialed back to a berry-magenta, not candy pink */
--rose: #EC6FB0;
--rose-soft: #FCE3EF;
--rose-deep: #BE2C70;
/* Signature gradient — Electric: indigo -> magenta -> coral (pink dialed back) */
--grad-signal: linear-gradient(100deg, #5B54E0 0%, #D9479A 52%, #F97316 100%);
--grad-signal-hover:linear-gradient(100deg, #4F46E5 0%, #C42F86 52%, #E25E12 100%);
/* Button gradient — cooler indigo -> blue -> sky to keep balance */
--grad-btn: linear-gradient(100deg, #4F46E5 0%, #2563EB 55%, #0B78AE 100%);
--indigo: #5B54E0;
--cyan: #06B6D4;
/* Text & lines */
--text: #15203F;
--text-soft: #51607E;
--text-muted: #54627C;
/* Accent mid-tones — decorative display numerals. Each clears 3:1 on
both --surface and --bg; the pastel tints they replace were 1.1-2.9:1. */
--num-blue: #5F86E3;
--num-sage: #2E9C8C;
--num-peach: #E2673C;
--num-lavender: #6E76E8;
--num-gold: #C27D0A;
--num-teal: #2296C4;
--border: #E2E8F5;
--border-strong:#C6D2EA;
/* Effects */
--shadow-sm: 0 2px 6px rgba(20, 41, 74, 0.05);
--shadow: 0 8px 28px rgba(20, 41, 74, 0.08);
--shadow-lg: 0 18px 48px rgba(20, 41, 74, 0.12);
--radius-sm: 10px;
--radius: 18px;
--radius-lg: 28px;
/* Type */
--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Layout */
--container: 1200px;
--gutter: 24px;
--section-y: 104px;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--t-fast: 180ms;
--t: 320ms;
--t-slow: 600ms;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blue-deep); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--navy); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 500;
color: var(--navy);
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0 0 0.5em;
font-variation-settings: normal;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 400; line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0; color: var(--navy); }
p { margin: 0 0 1.1em; color: var(--text-soft); }
.lead { font-size: 1.18rem; color: var(--text-soft); line-height: 1.7; max-width: 56ch; }
.eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue-deep);
margin: 0 0 18px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 28px; height: 1px;
background: var(--gold);
display: inline-block;
}
/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-y) 0; }
.section-tight { padding: 64px 0; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
transition: all var(--t) var(--ease);
cursor: pointer;
white-space: nowrap;
border: 1px solid transparent;
}
.btn-primary {
background: var(--grad-btn);
background-size: 140% 100%;
background-position: 0% 50%;
color: #fff;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34);
}
.btn-primary:hover {
background: var(--grad-btn);
background-size: 140% 100%;
background-position: 100% 50%;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(79, 70, 229, 0.42);
}
.btn-secondary {
background: transparent;
color: var(--navy);
border-color: var(--border-strong);
}
.btn-secondary:hover {
background: var(--surface);
border-color: var(--navy);
color: var(--navy);
transform: translateY(-2px);
}
.btn-gold {
background: linear-gradient(135deg, #FBBF24, #F59E0B);
color: #3a2406;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(245, 158, 11, 0.4); }
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
/* ---------- Navigation ---------- */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(245, 248, 252, 0.78);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid transparent;
transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner {
max-width: var(--container);
margin: 0 auto;
padding: 18px var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.nav-brand { display: flex; align-items: center; gap: 14px; color: var(--navy); }
.nav-brand .mark { width: 42px; height: 42px; color: var(--navy); flex-shrink: 0; }
.nav-brand .wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand .wordmark-name {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 500;
color: var(--navy);
letter-spacing: -0.01em;
}
.nav-brand .wordmark-tag {
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue-mid);
margin-top: 2px;
}
.nav-links {
display: flex;
align-items: center;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
padding: 10px 13px;
white-space: nowrap;
border-radius: 999px;
color: var(--text);
font-size: 0.95rem;
font-weight: 500;
transition: all var(--t-fast) var(--ease);
}
.nav-links a:hover { background: var(--pastel-1); color: var(--navy); }
.nav-links a.active { color: var(--navy); background: var(--pastel-1); }
.nav-cta { margin-left: 12px; }
.nav-toggle { display: none; }
/* Mobile nav */
@media (max-width: 1200px) {
.nav-inner { padding: 14px var(--gutter); }
.nav-toggle {
display: flex;
position: relative;
z-index: 101;
flex-direction: column;
gap: 5px;
padding: 8px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
}
.nav-toggle span {
width: 22px; height: 2px;
background: var(--navy);
transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* The header carries a backdrop-filter, which makes IT the containing block
for any position:fixed child — so viewport insets here resolve against the
70px header, not the screen. Anchor to the header's own bottom edge instead,
and hide the closed menu with visibility + pointer-events so it can never
sit on top of the toggle button and swallow taps. */
.nav-links {
position: fixed;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 20px var(--gutter) 28px;
max-height: calc(100vh - 72px);
max-height: calc(100dvh - 72px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
border-top: 1px solid var(--border);
box-shadow: 0 18px 40px -24px rgba(16, 24, 55, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
visibility 0s linear var(--t);
z-index: 99;
}
.nav-links.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
visibility 0s;
}
.nav-links a { padding: 14px 18px; font-size: 1.05rem; border-radius: var(--radius-sm); }
.nav-cta { margin: 12px 0 0; align-self: flex-start; }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: 80px 0 96px;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 14% 8%, rgba(91, 84, 224, 0.13), transparent 60%),
radial-gradient(ellipse 50% 45% at 92% 18%, rgba(217, 71, 154, 0.10), transparent 60%),
radial-gradient(ellipse 55% 50% at 78% 92%, rgba(249, 115, 22, 0.11), transparent 60%),
radial-gradient(ellipse 45% 40% at 8% 88%, rgba(6, 182, 212, 0.11), transparent 60%),
linear-gradient(180deg, var(--bg), #ECF1FE 100%);
z-index: -1;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
}
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy h1 .accent {
background: var(--grad-signal);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--blue-deep);
font-style: normal;
font-weight: 500;
}
.hero-copy .lead { font-size: 1.22rem; max-width: 52ch; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-meta {
display: flex;
gap: 28px;
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.hero-meta .meta-item .num {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 500;
color: var(--navy);
line-height: 1;
}
.hero-meta .meta-item .lbl {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 6px;
font-weight: 600;
}
.hero-visual {
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(155deg, var(--pastel-1) 0%, var(--lavender-soft) 45%, var(--peach-soft) 100%);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
border: 1px solid var(--border);
}
.hero-visual::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 72% 22%, rgba(245, 158, 11, 0.28), transparent 48%),
radial-gradient(circle at 18% 82%, rgba(79, 70, 229, 0.38), transparent 55%),
radial-gradient(circle at 88% 78%, rgba(37, 99, 235, 0.45), transparent 50%);
}
.hero-visual .crest {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--navy);
opacity: 0.9;
}
.hero-visual .crest svg { width: 60%; height: auto; filter: drop-shadow(0 8px 24px rgba(20, 41, 74, 0.18)); }
.hero-badge {
position: absolute;
bottom: 28px;
left: 28px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-radius: var(--radius);
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--shadow);
max-width: calc(100% - 56px);
}
.hero-badge .crest-mini {
width: 44px; height: 44px;
background: var(--navy); color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.hero-badge .crest-mini svg { width: 26px; height: 26px; }
.hero-badge p { margin: 0; color: var(--text); font-size: 0.92rem; font-weight: 500; line-height: 1.4; }
.hero-badge p strong { color: var(--navy); }
@media (max-width: 920px) {
.hero { padding: 56px 0 72px; }
.hero-grid { grid-template-columns: 1fr; gap: 44px; }
.hero-visual { aspect-ratio: 5/4; max-width: 520px; margin: 0 auto; }
}
/* ---------- Stat band ---------- */
.stat-band {
background: linear-gradient(120deg, #111A38 0%, #1E2F73 55%, #0E5A8C 100%);
color: #fff;
padding: 68px 0;
position: relative;
overflow: hidden;
}
.stat-band::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 45%, rgba(79, 70, 229, 0.28), transparent 50%),
radial-gradient(circle at 88% 55%, rgba(245, 158, 11, 0.16), transparent 50%),
radial-gradient(circle at 50% 110%, rgba(37, 99, 235, 0.18), transparent 55%),
radial-gradient(circle at 50% -10%, rgba(245, 158, 11, 0.18), transparent 55%);
}
.stat-band .container { position: relative; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }
.stat-item { text-align: center; }
.stat-num {
font-family: var(--font-display);
font-size: clamp(2.6rem, 4.4vw, 3.6rem);
font-weight: 400;
color: #fff;
line-height: 1;
margin-bottom: 8px;
display: block;
}
.stat-num .plus { color: var(--gold); margin-left: 2px; }
.stat-lbl {
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
/* ---------- Section header ---------- */
.section-head {
max-width: 720px;
margin: 0 auto 64px;
text-align: center;
}
.section-head.left { text-align: left; margin-left: 0; margin-right: auto; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.1rem; color: var(--text-soft); }
/* ---------- Cards ---------- */
.card {
background: var(--surface);
border-radius: var(--radius);
padding: 34px 30px;
border: 1px solid var(--border);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
display: flex;
flex-direction: column;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
border-color: var(--border-strong);
}
.card-icon {
width: 56px; height: 56px;
background: var(--pastel-1);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
color: var(--blue-deep);
margin-bottom: 22px;
transition: background var(--t) var(--ease);
}
.card:hover .card-icon { background: var(--pastel-2); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-soft); font-size: 0.97rem; }
/* Course card */
.course-card {
position: relative;
overflow: hidden;
padding: 0;
}
.course-card-head {
position: relative;
padding: 36px 32px 30px;
background: linear-gradient(160deg, var(--pastel-1), var(--surface));
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.course-card-head::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.8), transparent 50%);
pointer-events: none;
}
.course-card-head::after {
content: "";
position: absolute;
bottom: -1px; left: 32px;
width: 48px; height: 2px;
background: var(--gold);
z-index: 1;
}
/* Course-card color variants */
.course-card.tint-blue .course-card-head { background: linear-gradient(160deg, var(--pastel-2), var(--pastel-1) 50%, var(--surface)); }
.course-card.tint-blue .course-tag { color: var(--blue-deep); }
.course-card.tint-blue .course-card-head::after { background: var(--blue-deep); }
.course-card.tint-sage .course-card-head { background: linear-gradient(160deg, var(--sage), var(--sage-soft) 50%, var(--surface)); }
.course-card.tint-sage .course-tag { color: var(--sage-deep); }
.course-card.tint-sage .course-card-head::after { background: var(--sage-deep); }
.course-card.tint-peach .course-card-head { background: linear-gradient(160deg, var(--peach), var(--peach-soft) 50%, var(--surface)); }
.course-card.tint-peach .course-tag { color: var(--peach-deep); }
.course-card.tint-peach .course-card-head::after { background: var(--peach-deep); }
.course-card.tint-lavender .course-card-head { background: linear-gradient(160deg, var(--lavender), var(--lavender-soft) 50%, var(--surface)); }
.course-card.tint-lavender .course-tag { color: var(--lavender-deep); }
.course-card.tint-lavender .course-card-head::after { background: var(--lavender-deep); }
.course-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue-deep);
margin-bottom: 10px;
}
.course-card-head h3 {
font-size: 1.9rem;
margin: 0;
}
.course-card-body { padding: 28px 32px 32px; flex-grow: 1; display: flex; flex-direction: column; }
.course-card-body p { margin-bottom: 22px; }
.course-card-body ul {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.course-card-body li {
font-size: 0.94rem;
color: var(--text);
display: flex;
align-items: flex-start;
gap: 10px;
}
.course-card-body li::before {
content: "";
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 4px;
background: var(--pastel-2);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
.course-card-body .btn { margin-top: auto; align-self: flex-start; }
/* ---------- Quote / founder block ---------- */
.founder {
background: var(--surface-alt);
border-radius: var(--radius-lg);
padding: 64px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 56px;
align-items: center;
}
.founder-portrait {
position: relative;
aspect-ratio: 4/5;
background:
radial-gradient(circle at 20% 25%, rgba(6, 182, 212, 0.65), transparent 55%),
radial-gradient(circle at 85% 80%, rgba(37, 99, 235, 0.55), transparent 55%),
linear-gradient(160deg, var(--pastel-2), var(--blue-mid));
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.founder-portrait .crest {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.9);
}
.founder-portrait .crest svg { width: 56%; height: auto; }
.founder-portrait .badge {
position: absolute;
bottom: 20px; left: 20px; right: 20px;
background: rgba(255,255,255,0.94);
border-radius: var(--radius-sm);
padding: 14px 18px;
font-size: 0.82rem;
text-align: center;
color: var(--navy);
}
.founder-portrait .badge strong { display: block; margin-bottom: 2px; }
.founder-quote {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
line-height: 1.5;
color: var(--navy);
font-weight: 400;
font-style: italic;
margin: 0 0 28px;
position: relative;
padding-left: 0;
}
.founder-quote::before {
content: "“";
font-family: var(--font-display);
font-size: 4rem;
line-height: 0;
color: var(--gold);
display: block;
margin-bottom: 20px;
}
.founder-attrib { display: flex; align-items: center; gap: 14px; }
.founder-attrib .name { font-weight: 600; color: var(--navy); font-size: 1rem; }
.founder-attrib .role { font-size: 0.88rem; color: var(--text-soft); margin-top: 2px; }
@media (max-width: 920px) {
.founder { padding: 40px 28px; grid-template-columns: 1fr; gap: 36px; }
.founder-portrait { max-width: 320px; margin: 0 auto; }
}
/* ---------- Pillars / why-us ---------- */
.pillar {
background: var(--surface);
border-radius: var(--radius);
padding: 36px 32px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--blue-mid);
opacity: 0.85;
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar .num {
font-family: var(--font-display);
font-size: 3.2rem;
font-weight: 300;
line-height: 1;
color: var(--pastel-2);
position: absolute;
top: 18px; right: 24px;
font-style: italic;
}
/* Rotate accent colors across pillars in a grid */
.pillar:nth-child(6n+1)::before { background: var(--blue-mid); }
.pillar:nth-child(6n+1) .num { color: var(--pastel-2); }
.pillar:nth-child(6n+2)::before { background: var(--sage-deep); }
.pillar:nth-child(6n+2) .num { color: var(--sage); }
.pillar:nth-child(6n+3)::before { background: var(--peach-deep); }
.pillar:nth-child(6n+3) .num { color: var(--peach); }
.pillar:nth-child(6n+4)::before { background: var(--lavender-deep); }
.pillar:nth-child(6n+4) .num { color: var(--lavender); }
.pillar:nth-child(6n+5)::before { background: var(--gold); }
.pillar:nth-child(6n+5) .num { color: var(--gold-soft); }
.pillar:nth-child(6n+6)::before { background: var(--teal-deep); }
.pillar:nth-child(6n+6) .num { color: var(--teal); }
.pillar h3 { font-size: 1.25rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; margin-bottom: 12px; color: var(--navy); }
.pillar p { font-size: 0.96rem; margin: 0; }
/* ---------- Feature list (course pages) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.feature-row {
display: flex;
gap: 22px;
padding: 28px;
background: var(--surface);
border-radius: var(--radius);
border: 1px solid var(--border);
transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.feature-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.feature-row .num-pill {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--pastel-1);
color: var(--blue-deep);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
}
.feature-row h4 { margin: 0 0 8px; }
.feature-row p { margin: 0; font-size: 0.95rem; }
/* ---------- Curriculum strip ---------- */
.curriculum {
background:
radial-gradient(ellipse at 0% 0%, rgba(37, 99, 235, 0.14), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(6, 182, 212, 0.13), transparent 55%),
var(--surface-alt);
border-radius: var(--radius-lg);
padding: 56px 48px;
}
.curriculum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; }
.curriculum-item {
background: var(--surface);
border-radius: var(--radius);
padding: 24px 22px;
text-align: center;
border: 1px solid var(--border);
}
.curriculum-item .num {
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 400;
color: var(--navy);
line-height: 1;
display: block;
margin-bottom: 6px;
}
.curriculum-item .num .plus { color: var(--gold); }
.curriculum-item .lbl {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
}
@media (max-width: 720px) { .curriculum { padding: 36px 24px; } }
/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: stretch; }
.tier {
background: var(--surface);
border-radius: var(--radius);
padding: 40px 36px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
position: relative;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tier.featured {
border: 1px solid transparent;
background: linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(135deg, var(--gold), var(--blue-mid)) border-box;
box-shadow: var(--shadow);
transform: translateY(-8px);
}
.tier:hover { box-shadow: var(--shadow); }
.tier-tag {
position: absolute;
top: 20px; right: 24px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
}
.tier h3 {
font-size: 1.7rem;
margin: 0 0 10px;
}
.tier .tier-meta { color: var(--text-soft); margin: 0 0 24px; font-size: 0.95rem; }
.tier-price {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--navy);
margin: 0 0 26px;
padding-bottom: 26px;
border-bottom: 1px solid var(--border);
font-style: italic;
}
.tier ul { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.tier li {
font-size: 0.93rem;
color: var(--text);
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.5;
}
.tier li::before {
content: "";
flex-shrink: 0;
width: 16px; height: 16px;
margin-top: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.tier .btn { margin-top: auto; }
/* ---------- Form ---------- */
.form-wrap {
max-width: 720px;
margin: 0 auto;
background: var(--surface);
padding: 48px 44px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.form-row.full { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-soft);
}
.field input, .field select, .field textarea {
padding: 14px 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--surface);
font-family: inherit;
font-size: 1rem;
color: var(--text);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--blue-deep);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-foot .privacy { font-size: 0.85rem; color: var(--text-muted); margin: 0; max-width: 380px; }
@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } .form-wrap { padding: 32px 24px; } }
/* ---------- Page header (interior pages) ---------- */
.page-head {
padding: 90px 0 60px;
background:
radial-gradient(ellipse at 18% 0%, rgba(99, 102, 241, 0.17), transparent 55%),
radial-gradient(ellipse at 92% 28%, rgba(6, 182, 212, 0.16), transparent 55%),
radial-gradient(ellipse at 78% 100%, rgba(37, 99, 235, 0.15), transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(245, 158, 11, 0.14), transparent 55%),
var(--bg);
border-bottom: 1px solid var(--border);
}
.page-head .container { max-width: 880px; }
.page-head h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); margin-bottom: 18px; }
.page-head .lead { max-width: 60ch; }
/* ---------- Footer ---------- */
.footer {
background: var(--navy);
color: rgba(255, 255, 255, 0.78);
padding: 80px 0 32px;
margin-top: 80px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; }
.footer-brand .mark { width: 52px; height: 52px; color: #fff; margin-bottom: 18px; }
.footer-brand .name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 500;
color: #fff;
margin-bottom: 14px;
letter-spacing: -0.01em;
}
.footer-brand p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); max-width: 36ch; }
.footer h4 {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 18px;
font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.footer a:hover { color: #fff; }
.footer-bottom {
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 920px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ---------- CTA strip ---------- */
.cta-strip {
background:
linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 55%, var(--teal-deep) 100%);
border-radius: var(--radius-lg);
padding: 64px 56px;
color: #fff;
display: grid;
grid-template-columns: 1.5fr auto;
gap: 36px;
align-items: center;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 92% 28%, rgba(245, 158, 11, 0.30), transparent 42%),
radial-gradient(circle at 8% 82%, rgba(245, 158, 11, 0.18), transparent 50%),
radial-gradient(circle at 78% 100%, rgba(37, 99, 235, 0.22), transparent 50%);
}
.cta-strip > * { position: relative; }
.cta-strip h2 { color: #fff; margin: 0 0 12px; }
.cta-strip p { color: rgba(255, 255, 255, 0.84); margin: 0; font-size: 1.08rem; }
.cta-strip .btn-primary { background: #fff; color: var(--navy); }
.cta-strip .btn-primary:hover { background: var(--gold-soft); color: var(--navy); }
@media (max-width: 720px) { .cta-strip { grid-template-columns: 1fr; padding: 44px 28px; } }
/* ---------- Timeline / steps ---------- */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.t-step {
background: var(--surface);
border-radius: var(--radius);
padding: 28px 26px;
border: 1px solid var(--border);
position: relative;
}
.t-step .step-num {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 0.95rem;
letter-spacing: 0.05em;
color: var(--gold);
margin-bottom: 8px;
}
.t-step h4 { margin: 0 0 8px; font-size: 1.05rem; }
.t-step p { margin: 0; font-size: 0.92rem; }
/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ---------- Misc utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 18px; }
.mt-4 { margin-top: 36px; }
.muted { color: var(--text-soft); }
.divider { height: 1px; background: var(--border); margin: 64px 0; }
/* ---------- Prose (long-form pages) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 1.05rem; line-height: 1.75; color: var(--text); margin-bottom: 1.4em; }
.prose p strong { color: var(--navy); font-weight: 600; }
.prose h2 { margin-top: 56px; margin-bottom: 18px; }
.prose h3 { margin-top: 36px; margin-bottom: 12px; font-size: 1.4rem; }
.prose blockquote {
margin: 36px 0;
padding: 28px 32px;
background: var(--surface-alt);
border-left: 3px solid var(--gold);
border-radius: 0 var(--radius) var(--radius) 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.18rem;
color: var(--navy);
}
/* ---------- Tinted section variants (warm color rotation) ---------- */
.section-sage { background: linear-gradient(180deg, var(--sage-soft), var(--bg)); }
.section-peach { background: linear-gradient(180deg, var(--peach-soft), var(--bg)); }
.section-lavender{ background: linear-gradient(180deg, var(--lavender-soft), var(--bg)); }
.section-rose { background: linear-gradient(180deg, var(--rose-soft), var(--bg)); }
.section-blue { background: linear-gradient(180deg, var(--surface-alt), var(--bg)); }
.section-mixed {
background:
radial-gradient(ellipse 60% 60% at 0% 0%, rgba(37, 99, 235, 0.15), transparent 55%),
radial-gradient(ellipse 60% 60% at 100% 0%, rgba(245, 158, 11, 0.14), transparent 55%),
radial-gradient(ellipse 60% 60% at 50% 100%, rgba(6, 182, 212, 0.14), transparent 55%),
var(--bg);
}
/* ---------- Card icon color variants ---------- */
.card-icon.tint-blue { background: var(--pastel-1); color: var(--blue-deep); }
.card-icon.tint-sage { background: var(--sage-soft); color: var(--sage-deep); }
.card-icon.tint-peach { background: var(--peach-soft); color: var(--peach-deep); }
.card-icon.tint-lavender { background: var(--lavender-soft); color: var(--lavender-deep); }
.card-icon.tint-gold { background: var(--gold-soft); color: var(--gold-deep); }
.card-icon.tint-teal { background: var(--teal-soft); color: var(--teal-deep); }
/* ---------- Testimonials ---------- */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px;
}
.testimonial {
position: relative;
background: var(--surface);
border-radius: var(--radius);
padding: 36px 32px;
border: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.testimonial::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 6px;
}
.testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.testimonial .quote-mark {
font-family: var(--font-display);
font-size: 4.2rem;
line-height: 0.5;
color: var(--gold);
font-style: italic;
margin-bottom: 14px;
display: block;
}
.testimonial blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.08rem;
line-height: 1.55;
color: var(--navy);
margin: 0 0 22px;
font-weight: 400;
}
.testimonial blockquote.short { font-size: 1.18rem; }
.testimonial .meta {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.testimonial .meta .name { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.testimonial .meta .role { font-size: 0.85rem; color: var(--text-soft); margin-top: 3px; }
.testimonial .score-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
margin-top: 12px;
}
/* Testimonial color variants */
.testimonial.tint-blue::before { background: linear-gradient(90deg, var(--blue-mid), var(--blue-deep)); }
.testimonial.tint-blue .score-pill { background: var(--pastel-1); color: var(--blue-deep); }
.testimonial.tint-sage::before { background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
.testimonial.tint-sage .score-pill { background: var(--sage-soft); color: var(--sage-deep); }
.testimonial.tint-peach::before { background: linear-gradient(90deg, var(--peach), var(--peach-deep)); }
.testimonial.tint-peach .score-pill{ background: var(--peach-soft); color: var(--peach-deep); }
.testimonial.tint-lavender::before { background: linear-gradient(90deg, var(--lavender), var(--lavender-deep)); }
.testimonial.tint-lavender .score-pill { background: var(--lavender-soft); color: var(--lavender-deep); }
.testimonial.tint-gold::before { background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep)); }
.testimonial.tint-gold .score-pill { background: var(--gold-soft); color: var(--gold-deep); }
.testimonial.tint-rose::before { background: linear-gradient(90deg, var(--rose), var(--rose-deep)); }
.testimonial.tint-rose .score-pill { background: var(--rose-soft); color: var(--rose-deep); }
/* ---------- Highlight stat (for results page) ---------- */
.highlight-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin-bottom: 8px;
}
.highlight {
background: var(--surface);
border-radius: var(--radius);
padding: 32px 26px;
border: 1px solid var(--border);
text-align: center;
position: relative;
overflow: hidden;
}
.highlight::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.highlight.tint-blue::before { background: var(--blue-deep); }
.highlight.tint-sage::before { background: var(--sage-deep); }
.highlight.tint-peach::before { background: var(--peach-deep); }
.highlight.tint-lavender::before { background: var(--lavender-deep); }
.highlight.tint-gold::before { background: var(--gold-deep); }
.highlight.tint-teal::before { background: var(--teal-deep); }
.highlight .h-num {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4vw, 3.2rem);
font-weight: 400;
line-height: 1;
color: var(--navy);
display: block;
margin-bottom: 10px;
}
.highlight .h-num .plus { color: var(--gold); }
.highlight .h-lbl {
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
}
/* ---------- Tagged badge (placeholder marker for sample testimonials) ---------- */
.sample-tag {
position: absolute;
top: 14px;
right: 14px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border-strong);
color: var(--text-muted);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
/* ===================================================================
CHART SYSTEM
================================================================ */
.chart-card {
background: var(--surface);
border-radius: var(--radius);
padding: 36px 32px 28px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.chart-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blue-mid), var(--sage), var(--peach), var(--lavender));
}
.chart-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.chart-head h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
color: var(--navy);
margin: 0 0 6px;
}
.chart-head p {
font-size: 0.92rem;
color: var(--text-soft);
margin: 0;
max-width: 56ch;
}
.chart-meta-pill {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-deep);
background: var(--pastel-1);
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.chart-svg {
width: 100%;
height: auto;
display: block;
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--text-soft);
}
.chart-legend .legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.chart-legend .swatch {
width: 14px;
height: 14px;
border-radius: 4px;
display: inline-block;
}
.chart-footnote {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 14px;
font-style: italic;
}
/* Chart axis text */
.chart-svg .axis-text {
font-family: var(--font-body);
font-size: 13px;
fill: var(--text-soft);
font-weight: 500;
}
.chart-svg .axis-strong {
font-family: var(--font-body);
font-size: 14px;
fill: var(--navy);
font-weight: 600;
}
.chart-svg .axis-line { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis-line-soft { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2,4; }
/* Bar value labels */
.chart-svg .bar-value {
font-family: var(--font-display);
font-size: 16px;
fill: var(--navy);
font-weight: 500;
}
.chart-svg .bar-value-big {
font-family: var(--font-display);
font-size: 22px;
fill: var(--navy);
font-weight: 500;
}
/* Line chart */
.chart-svg .data-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-svg .data-line.l-blue { stroke: var(--blue-deep); }
.chart-svg .data-line.l-gold { stroke: var(--gold-deep); }
.chart-svg .data-line.l-sage { stroke: var(--sage-deep); }
.chart-svg .data-fill { opacity: 0.18; }
.chart-svg .data-fill.f-blue { fill: var(--blue-mid); }
.chart-svg .data-fill.f-gold { fill: var(--gold); }
.chart-svg .data-point { stroke: #fff; stroke-width: 2.5; }
/* ---------- Donut chart (CSS conic-gradient) ---------- */
.donut-wrap {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 640px) {
.donut-wrap { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
}
.donut {
width: 100%;
max-width: 280px;
aspect-ratio: 1;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: conic-gradient(
var(--blue-deep) 0% 10%,
var(--sage-deep) 10% 32%,
var(--peach-deep) 32% 64%,
var(--lavender-deep) 64% 100%
);
box-shadow: 0 12px 36px rgba(20, 41, 74, 0.12);
}
.donut::before {
content: "";
position: absolute;
inset: 22%;
background: var(--surface);
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--border);
}
.donut-center {
position: relative;
text-align: center;
z-index: 1;
}
.donut-center .big {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 400;
color: var(--navy);
line-height: 1;
display: block;
}
.donut-center .lbl {
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
margin-top: 6px;
}
.donut-legend {
display: flex;
flex-direction: column;
gap: 14px;
}
.donut-legend .row {
display: grid;
grid-template-columns: 22px 1fr auto;
gap: 14px;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.donut-legend .row:last-child { border-bottom: none; }
.donut-legend .swatch {
width: 22px; height: 22px;
border-radius: 6px;
}
.donut-legend .label {
font-size: 0.95rem;
color: var(--navy);
font-weight: 500;
}
.donut-legend .label .sub {
display: block;
font-size: 0.78rem;
color: var(--text-soft);
font-weight: 400;
margin-top: 2px;
}
.donut-legend .pct {
font-family: var(--font-display);
font-size: 1.35rem;
color: var(--navy);
font-weight: 500;
}
/* ===================================================================
COMPARISON TABLE
================================================================ */
.compare-wrap {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.compare-table th, .compare-table td {
padding: 18px 20px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.compare-table thead th {
background: var(--surface-alt);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
padding-top: 22px;
padding-bottom: 22px;
}
.compare-table thead th.us {
background: linear-gradient(180deg, var(--pastel-1), var(--pastel-2));
color: var(--navy);
}
.compare-table tbody th {
font-weight: 600;
color: var(--navy);
font-size: 0.95rem;
width: 28%;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td.us {
background: var(--pastel-1);
color: var(--navy);
font-weight: 500;
}
.compare-table .check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--sage-soft);
color: var(--sage-deep);
margin-right: 8px;
font-weight: 700;
font-size: 12px;
vertical-align: middle;
}
.compare-table .x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--rose-soft);
color: var(--rose-deep);
margin-right: 8px;
font-weight: 700;
font-size: 12px;
vertical-align: middle;
}
.compare-table .partial {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--peach-soft);
color: var(--peach-deep);
margin-right: 8px;
font-weight: 700;
font-size: 12px;
vertical-align: middle;
}
@media (max-width: 720px) {
.compare-table { font-size: 0.85rem; }
.compare-table th, .compare-table td { padding: 14px 12px; }
.compare-table tbody th { width: 36%; }
}
/* ---------- FAQ blocks ---------- */
.faq-group {
margin-bottom: 56px;
}
.faq-group h2 {
font-size: 1.6rem;
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 2px solid var(--border);
display: flex;
align-items: baseline;
gap: 14px;
}
.faq-group h2 .num {
font-family: var(--font-display);
font-style: italic;
color: var(--gold);
font-size: 1rem;
font-weight: 400;
}
.faq-item {
padding: 22px 0;
border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
font-family: var(--font-body);
font-size: 1.05rem;
font-weight: 600;
color: var(--navy);
margin: 0 0 10px;
letter-spacing: 0;
}
.faq-item p {
margin: 0;
font-size: 0.97rem;
line-height: 1.65;
color: var(--text-soft);
}
.faq-item p strong { color: var(--navy); }
/* ===================================================================
QUIZ / INTERACTIVE TOOLS
================================================================ */
.quiz-card {
max-width: 720px;
margin: 0 auto;
background: var(--surface);
border-radius: var(--radius-lg);
padding: 44px 40px;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.quiz-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--blue-mid), var(--sage), var(--peach), var(--lavender));
}
.quiz-progress {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
font-size: 0.85rem;
color: var(--text-soft);
font-weight: 600;
}
.quiz-progress-bar {
flex: 1;
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.quiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--blue-mid), var(--blue-deep));
border-radius: 3px;
transition: width 0.4s var(--ease);
width: 0%;
}
.quiz-question h2 {
font-size: 1.45rem;
margin: 0 0 24px;
line-height: 1.3;
}
.quiz-options {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.quiz-option {
display: block;
padding: 18px 22px;
background: var(--bg);
border: 2px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all var(--t-fast) var(--ease);
font-size: 1rem;
color: var(--text);
font-weight: 500;
text-align: left;
width: 100%;
font-family: inherit;
line-height: 1.4;
}
.quiz-option:hover {
background: var(--pastel-1);
border-color: var(--border-strong);
transform: translateX(2px);
}
.quiz-option.selected {
background: var(--pastel-1);
border-color: var(--blue-deep);
color: var(--navy);
}
.quiz-option .opt-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
background: var(--surface);
color: var(--text-soft);
border-radius: 50%;
font-size: 0.78rem;
font-weight: 700;
margin-right: 12px;
border: 1px solid var(--border-strong);
vertical-align: middle;
transition: all var(--t-fast) var(--ease);
}
.quiz-option:hover .opt-letter,
.quiz-option.selected .opt-letter {
background: var(--blue-deep);
color: #fff;
border-color: var(--blue-deep);
}
.quiz-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 36px;
gap: 16px;
flex-wrap: wrap;
}
.quiz-controls .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Result panel */
.quiz-result {
text-align: center;
padding: 20px 0;
}
.quiz-result h2 {
font-size: 2rem;
margin: 0 0 14px;
}
.quiz-result .badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
background: linear-gradient(135deg, var(--pastel-1), var(--sage-soft));
color: var(--navy);
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 500;
margin-bottom: 24px;
}
.quiz-result .score-display {
font-family: var(--font-display);
font-size: 4.4rem;
font-weight: 400;
color: var(--navy);
line-height: 1;
margin: 12px 0 6px;
}
.quiz-result .score-sub {
font-size: 0.92rem;
color: var(--text-soft);
letter-spacing: 0.05em;
margin-bottom: 28px;
}
.section-breakdown {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
margin: 28px 0;
}
.section-breakdown .sb-item {
background: var(--bg);
border-radius: var(--radius-sm);
padding: 16px;
border: 1px solid var(--border);
}
.section-breakdown .sb-name {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
margin-bottom: 6px;
}
.section-breakdown .sb-score {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
color: var(--navy);
line-height: 1;
}
.section-breakdown .sb-bar {
height: 4px;
background: var(--border);
border-radius: 2px;
margin-top: 10px;
overflow: hidden;
}
.section-breakdown .sb-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--blue-mid), var(--blue-deep));
border-radius: 2px;
}
/* College picker (for score finder) */
.college-picker {
max-width: 720px;
margin: 0 auto;
}
.college-picker .selector-row {
display: flex;
gap: 14px;
margin-bottom: 32px;
align-items: stretch;
}
.college-picker select {
flex: 1;
padding: 16px 18px;
border-radius: var(--radius-sm);
border: 2px solid var(--border-strong);
background: var(--surface);
font-family: inherit;
font-size: 1.05rem;
color: var(--text);
cursor: pointer;
}
.college-picker select:focus {
outline: none;
border-color: var(--blue-deep);
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.college-result {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 36px;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.college-result::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold), var(--blue-mid));
}
.college-result h3 {
font-size: 1.7rem;
margin: 0 0 6px;
}
.college-result .location {
color: var(--text-soft);
font-size: 0.95rem;
margin-bottom: 24px;
}
.score-bands {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.score-band {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
border: 1px solid var(--border);
text-align: center;
}
.score-band .test-name {
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue-deep);
font-weight: 700;
margin-bottom: 8px;
}
.score-band .range {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
color: var(--navy);
line-height: 1;
margin-bottom: 4px;
}
.score-band .range-lbl {
font-size: 0.78rem;
color: var(--text-soft);
}
.competitive-note {
background: linear-gradient(160deg, var(--peach-soft), var(--surface));
border-radius: var(--radius);
padding: 22px 26px;
border-left: 3px solid var(--peach-deep);
}
.competitive-note h4 {
margin: 0 0 8px;
color: var(--navy);
}
.competitive-note p {
margin: 0;
font-size: 0.95rem;
color: var(--text-soft);
}
@media (max-width: 540px) {
.quiz-card { padding: 32px 24px; }
.score-bands { grid-template-columns: 1fr; }
.college-picker .selector-row { flex-direction: column; }
}
/* ===================================================================
ANALYTICS DASHBOARD MOCKUP
================================================================ */
.dashboard {
background: var(--surface);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
box-shadow: var(--shadow);
}
.dashboard-bar {
background: var(--navy);
color: rgba(255,255,255,0.9);
padding: 18px 28px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 0.88rem;
}
.dashboard-bar .student-info {
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.dashboard-bar .avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), var(--peach));
display: flex; align-items: center; justify-content: center;
color: var(--navy);
font-weight: 700;
font-size: 0.78rem;
}
.dashboard-bar .meta { color: rgba(255,255,255,0.6); font-size: 0.82rem; }
.dashboard-bar .live-pill {
background: rgba(255,255,255,0.12);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.06em;
font-weight: 600;
}
.dashboard-body { padding: 32px 28px; }
.dash-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.dash-kpi {
background: var(--bg);
border-radius: var(--radius);
padding: 20px 22px;
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.dash-kpi::before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
}
.dash-kpi.k-blue::before { background: var(--blue-deep); }
.dash-kpi.k-sage::before { background: var(--sage-deep); }
.dash-kpi.k-peach::before { background: var(--peach-deep); }
.dash-kpi.k-gold::before { background: var(--gold-deep); }
.dash-kpi .lbl {
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
margin-bottom: 8px;
}
.dash-kpi .val {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 500;
color: var(--navy);
line-height: 1;
}
.dash-kpi .sub {
font-size: 0.78rem;
color: var(--sage-deep);
font-weight: 600;
margin-top: 6px;
}
.dash-kpi .sub.neg { color: var(--peach-deep); }
.dash-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-panel {
background: var(--bg);
border-radius: var(--radius);
padding: 22px 24px;
border: 1px solid var(--border);
}
.dash-panel h4 {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
margin: 0 0 18px;
font-weight: 600;
}
/* Skill heatmap */
.skill-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.skill-row {
display: grid;
grid-template-columns: 1fr 60px;
gap: 14px;
align-items: center;
}
.skill-row .name {
font-size: 0.92rem;
color: var(--navy);
font-weight: 500;
}
.skill-row .bar {
flex: 1;
height: 8px;
background: var(--border);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.skill-row .bar-fill {
height: 100%;
border-radius: 4px;
}
.skill-row .pct {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-soft);
text-align: right;
}
.skill-row.strong .bar-fill { background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
.skill-row.medium .bar-fill { background: linear-gradient(90deg, var(--peach), var(--peach-deep)); }
.skill-row.weak .bar-fill { background: linear-gradient(90deg, var(--rose), var(--rose-deep)); }
.skill-row.strong .pct { color: var(--sage-deep); }
.skill-row.medium .pct { color: var(--peach-deep); }
.skill-row.weak .pct { color: var(--rose-deep); }
/* Section side-by-side */
.section-progress {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.section-progress .sp-card {
background: var(--surface);
border-radius: var(--radius-sm);
padding: 18px;
border: 1px solid var(--border);
}
.section-progress .sp-name {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-soft);
font-weight: 600;
margin-bottom: 8px;
}
.section-progress .sp-score {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--navy);
font-weight: 500;
line-height: 1;
margin-bottom: 4px;
}
.section-progress .sp-trend {
font-size: 0.78rem;
color: var(--sage-deep);
font-weight: 600;
}
/* Recommended actions list */
.dash-recs {
display: flex;
flex-direction: column;
gap: 10px;
}
.dash-rec {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-size: 0.92rem;
}
.dash-rec .rec-num {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--pastel-1);
color: var(--blue-deep);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 0.78rem;
}
.dash-rec .rec-body { flex: 1; }
.dash-rec .rec-body strong { color: var(--navy); }
.dash-rec .rec-body p { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-soft); line-height: 1.5; }
.dash-rec .rec-tag {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
background: var(--peach-soft);
color: var(--peach-deep);
}
/* ===================================================================
PHOTOGRAPHIC / ILLUSTRATION IMAGERY
All slots degrade gracefully: if a file is missing, onerror removes
the ![]()
and the underlying design (crest, icon, or text) remains.
================================================================ */
/* Hero panel photo — sits over the crest; crest shows if photo absent */
.hero-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
}
.hero-visual .hero-badge { z-index: 3; }
.hero-visual:has(.hero-photo)::after { opacity: 0; }
/* Full-width banner figure (course pages) */
.img-band { padding-top: 0; }
.img-figure { margin: 0; }
.img-figure img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
/* Photo at the top of a card (delivery cards) */
.card-photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius);
margin-bottom: 20px;
display: block;
border: 1px solid var(--border);
}
/* Feature band: image + text, two columns */
.feature-band {
background: var(--surface-alt);
border-radius: var(--radius-lg);
padding: 44px;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 48px;
align-items: center;
}
.feature-band .fb-text .eyebrow { margin-bottom: 14px; }
.feature-band .fb-img { margin: 0; }
.feature-band .fb-img img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border);
}
@media (max-width: 920px) {
.feature-band { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
}
/* ===================================================================
STUDENT SIGN-IN — PORTAL CHOOSER (portal.html)
================================================================ */
.portal-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 8px;
}
.portal-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 40px 38px 34px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.portal-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: var(--accent, var(--grad-btn));
}
.portal-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--border-strong);
}
.portal-card .portal-icon {
width: 64px;
height: 64px;
border-radius: 18px;
display: grid;
place-items: center;
margin-bottom: 22px;
}
.portal-card .portal-icon svg { width: 32px; height: 32px; }
.portal-card h2 { font-size: 1.7rem; margin-bottom: 6px; }
.portal-card .portal-sub {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 16px;
}
.portal-card > p { color: var(--text-soft); font-size: 0.98rem; }
.portal-card ul.portal-list {
list-style: none;
margin: 4px 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.portal-card ul.portal-list li {
position: relative;
padding-left: 26px;
font-size: 0.94rem;
color: var(--text-soft);
}
.portal-card ul.portal-list li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--accent-soft, var(--pastel-1));
box-shadow: inset 0 0 0 2px var(--accent-line, var(--blue-deep));
}
.portal-card .portal-cta { margin-top: auto; }
.portal-card .portal-cta .btn { width: 100%; justify-content: center; }
.portal-note {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 16px;
}
.portal-help {
text-align: center;
margin-top: 48px;
font-size: 0.95rem;
color: var(--text-soft);
}
@media (max-width: 760px) {
.portal-grid { grid-template-columns: 1fr; gap: 22px; }
.portal-card { padding: 32px 26px 28px; }
}
/* ===================================================================
ENROLLMENT WIZARD (enroll.html)
================================================================ */
.enroll-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: 44px;
align-items: start;
}
/* Progress steps */
.enroll-steps {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 38px;
}
.enroll-steps .estep {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.enroll-steps .estep .dot {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.85rem;
font-weight: 700;
background: var(--surface);
border: 2px solid var(--border-strong);
color: var(--text-muted);
transition: all var(--t) var(--ease);
}
.enroll-steps .estep .elabel {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.enroll-steps .estep.active .dot {
background: var(--grad-btn);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32);
}
.enroll-steps .estep.active .elabel { color: var(--navy); }
.enroll-steps .estep.done .dot {
background: var(--blue-deep);
border-color: transparent;
color: #fff;
}
.enroll-steps .bar {
flex: 1 1 auto;
height: 2px;
background: var(--border-strong);
margin: 0 12px;
min-width: 18px;
}
.enroll-steps .estep.done + .bar { background: var(--blue-deep); }
/* Wizard panes */
.enroll-pane { display: none; animation: fadeUp var(--t) var(--ease); }
.enroll-pane.active { display: block; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.enroll-pane h2 { font-size: 1.6rem; margin-bottom: 6px; }
.enroll-pane .pane-sub { color: var(--text-soft); margin-bottom: 26px; }
/* Option cards (radio tiles) */
.opt-grid { display: grid; gap: 16px; margin-bottom: 8px; }
.opt-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.opt-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.opt-tile { position: relative; }
.opt-tile input {
position: absolute;
opacity: 0;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.opt-tile label {
display: block;
height: 100%;
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 22px 22px 20px;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.opt-tile label .opt-title {
font-family: var(--font-body);
font-weight: 700;
color: var(--navy);
font-size: 1.05rem;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.opt-tile label .opt-desc { font-size: 0.9rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.opt-tile label .opt-price {
font-size: 0.82rem;
font-weight: 600;
color: var(--blue-deep);
margin-top: 10px;
}
.opt-tile input:hover + label { border-color: var(--border-strong); transform: translateY(-2px); }
.opt-tile input:checked + label {
border-color: var(--blue-deep);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), var(--shadow-sm);
}
.opt-tile input:checked + label .opt-title::after {
content: "✓";
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--blue-deep);
color: #fff;
font-size: 0.8rem;
flex: 0 0 auto;
}
.opt-tile input:focus-visible + label { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
/* Wizard nav buttons */
.enroll-nav {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.enroll-nav .btn-ghost {
background: transparent;
color: var(--text-soft);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 13px 24px;
font-weight: 600;
font-size: 0.95rem;
transition: all var(--t-fast) var(--ease);
}
.enroll-nav .btn-ghost:hover { color: var(--navy); border-color: var(--navy); }
.enroll-nav .spacer { flex: 1 1 auto; }
/* Summary sidebar */
.enroll-summary {
position: sticky;
top: 96px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px;
box-shadow: var(--shadow);
}
.enroll-summary h3 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 18px;
}
.enroll-summary .sum-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 12px 0;
border-bottom: 1px dashed var(--border);
}
.enroll-summary .sum-row:last-of-type { border-bottom: none; }
.enroll-summary .sum-row .k { font-size: 0.82rem; color: var(--text-muted); flex: 0 0 auto; }
.enroll-summary .sum-row .v { font-size: 0.94rem; font-weight: 600; color: var(--navy); text-align: right; }
.enroll-summary .sum-row .v.empty { color: var(--text-muted); font-weight: 400; font-style: italic; }
.enroll-summary .sum-foot {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.5;
}
.enroll-summary .sum-crest {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--blue-deep);
}
.enroll-summary .sum-crest svg { width: 26px; height: 26px; }
.enroll-summary .sum-crest span { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); }
/* Success / confirmation */
.enroll-success {
text-align: center;
max-width: 560px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 56px 40px;
box-shadow: var(--shadow);
}
.enroll-success .ok-mark {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--sage-soft);
color: var(--sage-deep);
display: grid;
place-items: center;
margin: 0 auto 24px;
}
.enroll-success .ok-mark svg { width: 36px; height: 36px; }
@media (max-width: 920px) {
.enroll-layout { grid-template-columns: 1fr; gap: 28px; }
.enroll-summary { position: static; order: -1; }
.opt-grid.cols-3 { grid-template-columns: 1fr; }
.enroll-steps .estep .elabel { display: none; }
.enroll-steps .estep { gap: 0; }
}
@media (max-width: 560px) {
.opt-grid.cols-2 { grid-template-columns: 1fr; }
}
/* ---------- Print ---------- */
@media print {
.nav, .footer, .cta-strip { display: none; }
body { background: #fff; }
}
/* ============================================================
Polish pass — typography, motion discipline, focus, numerals
============================================================ */
/* The pillar numeral is absolutely positioned top-right; reserve room for it
so long headings stop running underneath ("…practice library in DFW"). */
.pillar h3 { padding-right: 68px; }
.pillar .num { font-size: 2.9rem; top: 20px; }
/* Let headings break where the meaning is, not where the box ends. */
h1, h2, h3, .hero h1, .cur-head h3 { text-wrap: balance; }
p, .lead, .cur-sub { text-wrap: pretty; }
/* Figures that change should not make the line jitter. */
.stat-num, .stat-lbl, .cur-meta, .cur-q, .cur-n, .price-num, .stat-item {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Anchored sections must clear the sticky header. */
:target, [id] { scroll-margin-top: 92px; }
/* A visible keyboard ring everywhere, not just on the one control that had it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--blue-mid);
outline-offset: 3px;
border-radius: 6px;
}
/* Reveals are staggered from JS; keep the step small so it reads as one motion. */
.reveal { transition-duration: 520ms; }
/* Respect the system setting. Without this the whole site animates regardless,
and anyone who has asked for less motion gets none of that consideration. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 560px) {
.pillar h3 { padding-right: 58px; }
.pillar .num { font-size: 2.4rem; }
}
/* The brand is a flex item beside the links; once an eighth link was added it
began to shrink, wrapping "Dallas-Fort Worth" onto two lines. */
.nav-brand { flex-shrink: 0; }
.wordmark-name, .wordmark-tag { white-space: nowrap; }
/* Product screenshots — real lesson screens, shown large enough to read. */
.shot { margin: 0 0 48px; }
.shot:last-of-type { margin-bottom: 8px; }
.shot img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
box-shadow: 0 30px 60px -32px rgba(16, 24, 55, 0.42);
}
.shot figcaption,
.img-figure figcaption {
margin-top: 16px;
max-width: 68ch;
color: var(--text-soft);
font-size: 0.95rem;
line-height: 1.6;
}
.shot figcaption strong, .img-figure figcaption strong { color: var(--navy); font-weight: 600; }
.img-figure figcaption { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 640px) {
.shot { margin-bottom: 34px; }
.shot figcaption, .img-figure figcaption { font-size: 0.9rem; }
}
/* Syllabus totals strip — states the cadence instead of making the reader count. */
.syl-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:24px 0 8px;
padding:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.syl-totals div{text-align:center}
.syl-totals b{display:block;font-family:var(--font-display);font-size:1.9rem;font-weight:500;
color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.syl-totals span{display:block;margin-top:7px;font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--text-soft)}
@media (max-width:640px){.syl-totals{grid-template-columns:repeat(2,1fr);gap:16px}}
/* =====================================================================
Accessibility — WCAG 2.1 AA contrast corrections
Every ratio below was measured on the rendered page: text was made
transparent, the page screenshotted, and the real pixels under each
glyph line box sampled (gradients, blooms and overlays included).
===================================================================== */
/* The header CTA. `.nav-links a` (specificity 0,1,1) was beating
`.btn-primary` (0,1,0), so the Enroll button rendered --text navy on the
blue gradient: 2.62:1. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus { color: #fff; }
.nav-links a.btn-secondary { color: var(--navy); }
/* Gold is never legible as small ink: #F59E0B is 2.15:1 on white however big
the type. Small text takes --gold-deep (5.5:1); the large display marks take
--gold-ink (4.0:1, over the 3:1 large-text floor). */
.t-step .step-num,
.tier-tag,
.faq-group h2 .num,
.curriculum-item .num .plus,
.highlight .h-num .plus { color: var(--gold-deep); }
.testimonial .quote-mark { color: var(--gold-ink); }
/* Pillar numerals were pastel-on-white: 1.12:1 (gold-soft) to 2.98:1
(lavender). The mid-tones keep the watermark feel and clear 3:1. */
.pillar:nth-child(6n+1) .num { color: var(--num-blue); }
.pillar:nth-child(6n+2) .num { color: var(--num-sage); }
.pillar:nth-child(6n+3) .num { color: var(--num-peach); }
.pillar:nth-child(6n+4) .num { color: var(--num-lavender); }
.pillar:nth-child(6n+5) .num { color: var(--num-gold); }
.pillar:nth-child(6n+6) .num { color: var(--num-teal); }
/* Course-card tags sat on the saturated end of the card-head gradient
(2.20:1 on the peach card). Giving the tag its own near-opaque chip makes
the ratio independent of the tint behind it. */
.course-tag {
background: rgba(255, 255, 255, 0.96);
padding: 5px 11px;
border-radius: 999px;
box-shadow: 0 1px 2px rgba(17, 24, 55, 0.06);
}
/* At narrow widths the donut's centre text overlapped its coloured ring
(1.15:1 against the teal segment). An opaque disc guarantees the backdrop. */
.donut-center {
background: var(--surface);
border-radius: 16px;
padding: 10px 12px;
}
/* 0.84-alpha white on the CTA band measured 3.81:1. Full white is 4.65:1 on
the lightest point of that gradient. */
.cta-strip p { color: #fff; }
/* The strip's secondary button is white-on-translucent, which left it at
4.42:1 over the lighter end of the gradient. A dark scrim under it takes
the same white to 6.5:1 and keeps the ghost-button look. */
.cta-strip .btn-secondary {
background: rgba(17, 26, 56, 0.28);
border-color: rgba(255, 255, 255, 0.72);
color: #fff;
}
.cta-strip .btn-secondary:hover {
background: rgba(17, 26, 56, 0.44);
border-color: #fff;
color: #fff;
}
/* On its own page the header CTA also picks up .active, whose pale
--pastel-1 fill left white text at 1.22:1. Buttons keep their gradient. */
.nav-links a.btn.active,
.nav-links a.btn-primary.active { background: var(--grad-btn); color: #fff; }
.nav-links a.btn-secondary.active { background: var(--surface); color: var(--navy); }
/* The wordmark tagline in --blue-mid was 3.05:1 against the header, on every
page of the site. */
.nav-brand .wordmark-tag { color: var(--blue-deep); }
/* `.section-head p` (0,1,1) was beating `.eyebrow` (0,1,0), so interior
section eyebrows rendered in --text-soft instead of the accent blue. */
p.eyebrow { color: var(--blue-deep); }
/* The week pill's own gradient ends on --pastel-2, which left its label at
4.27:1. Navy-soft on that pill is 9.6:1 and reads as the same design. */
.syllabus-week .wk-num .lbl { color: var(--navy-soft); }
/* WCAG 1.4.1 — links inside running prose were distinguished from the
surrounding text by colour alone, and the two colours are under 3:1 apart.
Underlining them removes the reliance on colour. Buttons, nav items, cards
and pills are excluded: they are identifiable by shape. */
p a:not(.btn), li a:not(.btn), blockquote a:not(.btn),
dd a:not(.btn), td a:not(.btn), figcaption a:not(.btn),
.lead a:not(.btn), .muted a:not(.btn) {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
text-decoration-color: rgba(31, 87, 214, 0.45);
}
p a:not(.btn):hover, li a:not(.btn):hover, blockquote a:not(.btn):hover,
dd a:not(.btn):hover, td a:not(.btn):hover, figcaption a:not(.btn):hover,
.lead a:not(.btn):hover, .muted a:not(.btn):hover {
text-decoration-color: currentColor;
}
.nav-links a, .footer a, .cur-row a, .nf-links a,
.legal-toc a, .footer-legal a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
/* =====================================================================
Legal pages (privacy, terms, refunds, accessibility)
===================================================================== */
.legal-dates {
margin: 18px 0 0; font-size: .82rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-muted); font-weight: 600;
}
.legal-wrap { display: grid; grid-template-columns: 236px 1fr; gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: 104px; font-size: .9rem; }
.legal-toc-h {
margin: 0 0 10px; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-muted); font-weight: 700;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.legal-toc li { margin: 0; }
.legal-toc a {
display: block; padding: 6px 0 6px 14px; margin-left: -2px;
border-left: 2px solid transparent; color: var(--text-soft);
font-size: .88rem; line-height: 1.4; text-decoration: none;
transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.legal-toc a:hover { color: var(--navy); border-left-color: var(--blue-mid); }
.legal { max-width: 74ch; }
.legal > section { scroll-margin-top: 100px; }
.legal > section + section { margin-top: 48px; padding-top: 44px; border-top: 1px solid var(--border); }
.legal h2 {
font-size: 1.5rem; font-family: var(--font-display); font-weight: 500;
color: var(--navy); margin: 0 0 18px; letter-spacing: -0.01em;
}
.legal h3 {
font-size: 1.02rem; font-family: var(--font-body); font-weight: 700;
color: var(--navy); margin: 30px 0 12px; letter-spacing: 0;
}
.legal p { font-size: .98rem; line-height: 1.72; margin: 0 0 1.05em; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.25em; }
.legal li { font-size: .98rem; line-height: 1.68; color: var(--text-soft); margin-bottom: .5em; }
.legal strong { color: var(--navy); }
.legal-note {
background: var(--surface-alt);
border-left: 3px solid var(--blue-deep);
border-radius: 0 var(--radius) var(--radius) 0;
padding: 22px 26px; margin: 0 0 40px;
}
.legal-note p { margin: 0; font-size: .96rem; }
.legal-table {
width: 100%; border-collapse: collapse; margin: 6px 0 1.5em;
font-size: .92rem; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.legal-table th {
text-align: left; padding: 11px 14px; background: var(--surface-alt);
color: var(--navy); font-weight: 700; font-size: .72rem;
letter-spacing: .13em; text-transform: uppercase;
border-bottom: 1px solid var(--border);
}
.legal-table td {
padding: 11px 14px; border-bottom: 1px solid var(--border);
color: var(--text-soft); vertical-align: top; line-height: 1.55;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-flag {
display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
background: var(--sage-soft); color: var(--sage-deep);
font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.legal-contact {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 18px 22px; line-height: 1.8;
}
/* Bracketed placeholders are unfilled and must be obvious in review. */
.legal .placeholder {
background: var(--gold-soft); color: var(--gold-deep);
padding: 1px 6px; border-radius: 4px; font-weight: 700;
font-size: .92em;
/* These must wrap: a long note to counsel inside a table cell was forcing
660px of horizontal page scroll on a phone. */
white-space: normal; overflow-wrap: anywhere;
}
/* A table can still be wider than a phone; let it scroll inside its own box
rather than dragging the page sideways. */
.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5em; }
.legal-table { table-layout: auto; }
.legal-table td, .legal-table th { overflow-wrap: anywhere; }
@media (max-width: 960px) {
.legal-wrap { grid-template-columns: 1fr; gap: 32px; }
.legal-toc { position: static; }
.legal-toc ul { columns: 2; column-gap: 26px; }
}
@media (max-width: 560px) {
.legal-toc ul { columns: 1; }
.legal-table { font-size: .86rem; }
.legal-table th, .legal-table td { padding: 9px 10px; }
}
/* Footer legal row */
.footer-legal {
display: flex; flex-wrap: wrap; gap: 8px 20px;
margin-top: 10px; font-size: .84rem;
}
.footer-legal a { color: inherit; opacity: .8; text-decoration: none; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
/* =====================================================================
Primary navigation — disclosure menus
Eight flat links already wrapped at 1200px, so Programs and Resources
became menus. They are native /, which means they open
on click and on Enter or Space, are announced correctly, and keep working
with JavaScript disabled — every page on this site renders without JS, and
a nav that needed a script would have been the one exception.
===================================================================== */
.skip-link {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--navy); color: #fff;
padding: 11px 18px; border-radius: 0 0 10px 10px;
font-size: .92rem; font-weight: 600; text-decoration: none;
transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }
.nav-group { position: relative; }
.nav-group > summary {
display: inline-flex; align-items: center; gap: 7px;
padding: 10px 13px; border-radius: 999px;
cursor: pointer; list-style: none;
font-size: .95rem; font-weight: 500; color: var(--text);
white-space: nowrap; user-select: none;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::marker { content: ""; }
.nav-group > summary:hover { background: var(--pastel-1); color: var(--navy); }
.nav-group[open] > summary { background: var(--pastel-1); color: var(--navy); }
.nav-group > summary.active { color: var(--navy); background: var(--pastel-1); }
.nav-group .caret {
width: 0; height: 0; margin-top: 1px;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .65;
transition: transform var(--t-fast) var(--ease);
}
.nav-group[open] .caret { transform: rotate(180deg); }
.nav-menu {
position: absolute; top: calc(100% + 10px); left: 50%;
transform: translateX(-50%);
min-width: 308px; padding: 10px;
background: var(--surface);
border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 22px 48px -22px rgba(16, 24, 55, 0.4);
z-index: 120;
animation: navMenuIn 160ms var(--ease);
}
.nav-menu::before { /* keeps the pointer inside the group on the way down */
content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
@keyframes navMenuIn {
from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nav-menu a {
display: block; padding: 10px 13px; border-radius: 11px;
text-decoration: none; white-space: normal;
transition: background var(--t-fast) var(--ease);
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--surface-alt); }
.nav-menu a.active { background: var(--pastel-1); }
.nav-menu .nm-t {
display: block; font-size: .95rem; font-weight: 600; color: var(--navy);
line-height: 1.3;
}
.nav-menu .nm-d {
display: block; margin-top: 2px; font-size: .8rem; color: var(--text-soft);
line-height: 1.4;
}
@media (max-width: 1200px) {
/* Inside the mobile drawer the menus expand in place rather than floating. */
.nav-group { width: 100%; }
.nav-group > summary { width: 100%; justify-content: space-between; font-size: 1rem; }
.nav-menu {
position: static; transform: none; min-width: 0; animation: none;
margin: 2px 0 6px; padding: 4px 0 4px 12px;
border: 0; border-left: 2px solid var(--border);
border-radius: 0; box-shadow: none;
}
.nav-menu::before { display: none; }
.nav-menu .nm-d { display: none; }
.nav-menu .nm-t { font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) {
.nav-menu { animation: none; }
}
/* The fourth hero tile wraps to two lines, which left its label sitting below
the other three. Bottom-align the tiles so every label shares a baseline. */
.hero-meta { align-items: stretch; }
.hero-meta .meta-item {
display: flex; flex-direction: column; justify-content: flex-end;
}
/* =====================================================================
Heading levels vs heading looks
Several headings were picked for their size rather than their place in
the document, which made screen-reader navigation jump h2 -> h4. The
elements now carry the correct level; these classes carry the old look.
===================================================================== */
.as-h4 {
font-size: 1.1rem; font-weight: 600; font-family: var(--font-body);
letter-spacing: 0; color: var(--navy); line-height: 1.15;
}
.footer h2.as-h4 {
font-family: var(--font-body);
font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 18px;
}
.as-h3 {
font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500;
font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.15;
}
/* Components that restyled their own h3/h4 must keep winning over the base
sizes, so re-state them for the promoted elements. */
.pillar h3.as-h4, .card h3.as-h4, .t-step h3.as-h4, .feature-row h3.as-h4,
.syllabus-week h3.as-h4, .course-card h3.as-h4, .tier h3.as-h4 {
font-family: var(--font-body); font-weight: 600; font-size: 1.1rem;
letter-spacing: 0;
}
.tier h2.as-h3, .course-card-head h2.as-h3 {
font-family: var(--font-display); font-weight: 500;
}