/* ===========================================================
TruMath Canada — Design System
Concept: "The Graded Paper" — a teacher's red-pen marks on
a test, rendered as the site's signature motif. Numbers
(years, ranks, prices, course codes) get a monospace,
stamped treatment; key proof points get hand-drawn coral
circles/underlines, like marks on a returned exam.
=========================================================== */
/* Fonts are loaded with tags in each page's , not @import.
An @import here forces a serial chain (HTML -> style.css -> Google CSS ->
font files) which delays first paint; the version starts the font
request in parallel with this stylesheet. */
:root {
/* Color tokens */
--ink: #14213D;
--ink-70: #14213Db3;
--paper: #FAF3E7;
--paper-dim: #F0E7D6;
--white: #FFFDF9;
--cobalt: #3452E1;
--cobalt-dark: #2138A8;
--amber: #FFB020;
--coral: #FF5A46;
--mint: #1FAE7A;
--line: #E4D8C2;
/* Type */
--font-display: 'Fraunces', serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Layout */
--max: 1180px;
--radius: 18px;
--radius-sm: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--paper);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 28px;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
margin: 0;
letter-spacing: -0.01em;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cobalt);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow::before {
content: '';
width: 18px;
height: 2px;
background: var(--coral);
display: inline-block;
}
.stat-num {
font-family: var(--font-mono);
font-weight: 700;
}
p.lead { font-size: 19px; color: var(--ink-70); max-width: 54ch; }
/* Reduced motion respected everywhere */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
padding: 14px 26px;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
white-space: nowrap; /* "Start Free Week" must stay on one line */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--coral); color: var(--white); box-shadow: 0 6px 0 #C2402F; }
.btn-primary:hover { box-shadow: 0 8px 0 #C2402F; }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 3px 0 #C2402F; }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: 0 6px 0 #060D1F; }
.btn-dark:active { transform: translateY(2px); box-shadow: 0 3px 0 #060D1F; }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
/* ---------- Nav ---------- */
.site-nav {
position: sticky; top: 0; z-index: 100;
background: var(--paper);
border-bottom: 2px solid var(--ink);
}
/* Three zones: brand (left) | links (centre) | CTAs (right).
.nav-links takes flex:1 so it owns the whole middle band and centres
inside it — without that the links are just a clump floating in the
leftover space, which reads as one continuous strip. */
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; flex-shrink: 0; white-space: nowrap; }
.brand .mark { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
.nav-links { display: flex; flex: 1; align-items: center; justify-content: center; gap: 30px; font-weight: 600; font-size: 15px; }
.nav-links a { position: relative; padding: 4px 0; white-space: nowrap; }
.nav-links a:hover { color: var(--cobalt); }
.nav-cta { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.nav-toggle { display: none; }
/* Login lives in the .nav-cta bar on desktop. That bar's ghost button is
hidden on phones (no room), so this duplicate rides inside the slide-in
menu instead — otherwise a signed-up student on a phone has no way in.
Hidden at desktop widths so nothing changes there. */
.nav-links .nav-login-m { display: none; }
/* Between the mobile breakpoint and ~1080px all six links plus both
buttons are still on one row, so tighten the middle band rather than
let the three zones run together. */
@media (min-width: 881px) and (max-width: 1080px) {
.site-nav .wrap { gap: 24px; }
.nav-links { gap: 18px; font-size: 14px; }
}
@media (max-width: 880px) {
/* justify-content resets to flex-start: centring is for the desktop
middle band only, and would otherwise centre this full-height panel. */
.nav-links { position: fixed; inset: 68px 0 0 0; background: var(--paper); flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 30px 28px; gap: 22px; font-size: 18px; transform: translateX(100%); transition: transform 0.25s ease; }
.nav-links.open { transform: translateX(0); }
.nav-toggle { display: block; background: none; border: 2px solid var(--ink); border-radius: 8px; width: 42px; height: 38px; cursor: pointer; }
.nav-cta .btn-ghost { display: none; }
/* ...and the in-menu Login takes over, styled to stand apart from the
plain nav links so it reads as an account action. */
.nav-links .nav-login-m { display: inline-flex; margin-top: 6px; padding: 11px 22px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 16px; }
}
/* ---------- Dropdowns (nav Courses + course-page Enrol) ----------
One pattern for both: a .dd wrapper, a .dd-btn that toggles aria-expanded,
and a .dd-menu revealed by .dd.open. Driven by JS click rather than :hover
so it works on touch; hover only pre-opens on real pointer devices. */
.dd { position: relative; display: inline-flex; }
.dd-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
min-width: 236px; padding: 8px; background: var(--white);
border: 2px solid var(--ink); border-radius: var(--radius-sm);
box-shadow: 5px 5px 0 var(--ink);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .14s ease, transform .14s ease, visibility .14s; }
.dd.open > .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
border-radius: 7px; }
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--paper-dim); outline: none; }
.dd-caret { transition: transform .15s ease; flex-shrink: 0; }
.dd.open .dd-caret { transform: rotate(180deg); }
/* nav "Courses" */
.nav-links .dd-btn { display: inline-flex; align-items: center; gap: 6px;
background: none; border: 0; padding: 4px 0; cursor: pointer;
font-family: var(--font-body); font-weight: 600; font-size: 15px; color: inherit; }
.nav-links .dd-btn:hover { color: var(--cobalt); }
.nav-links .dd-btn:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.nd-code { font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; color: var(--cobalt); }
.nd-g { font-size: 12px; color: var(--ink-70); }
.dd-menu .nd-all { border-top: 2px dashed var(--line); margin-top: 6px; padding-top: 11px;
font-weight: 700; font-size: 13.5px; color: var(--coral); }
/* course-page "Enrol" */
.enroll-menu { min-width: 262px; }
.em-price { font-family: var(--font-mono); font-weight: 700; font-size: 19px; color: var(--ink); }
.em-price span { font-size: 13px; font-weight: 500; color: var(--ink-70); }
.em-note { font-size: 12.5px; color: var(--ink-70); }
@media (max-width: 880px) {
/* In the slide-in menu the dropdown expands in flow instead of floating. */
.nav-links .dd { display: block; width: 100%; }
.nav-links .dd-btn { font-size: 18px; }
.nav-links .dd-menu { position: static; box-shadow: none; border: 0; padding: 6px 0 0 14px;
min-width: 0; opacity: 1; visibility: hidden; transform: none; height: 0; overflow: hidden; }
.nav-links .dd.open > .dd-menu { visibility: visible; height: auto; }
}
@media (max-width: 560px) {
.dd-menu { left: auto; right: 0; }
}
/* ---------- Hero ---------- */
.hero { padding: 72px 0 40px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
/* Without this the hero stayed two columns at every width, squeezing the
headline and the stat card into ~180px each on a phone. */
@media (max-width: 880px) {
.hero { padding-top: 48px; }
.hero-grid { grid-template-columns: 1fr; gap: 38px; }
/* The card is decorative tilt on desktop; straighten it once it is
full-width so it does not crowd the section edges. */
.hero-grid .paper-card { transform: rotate(1deg); }
}
.hero h1 { font-size: clamp(38px, 5vw, 62px); }
.hero .annotate { position: relative; white-space: nowrap; display: inline-block; }
.hero .annotate svg { position: absolute; left: -2%; bottom: -6px; top: auto; width: 104%; height: 22px; pointer-events: none; }
.hero-sub { margin-top: 22px; }
.ontario-highlight {
color: var(--ink);
background: linear-gradient(transparent 38%, rgba(255, 176, 32, 0.40) 38%);
border-radius: 4px;
padding: 0 0.12em;
margin: 0 -0.04em;
font-weight: 800;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.hero-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust { margin-top: 30px; display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; color: var(--ink-70); font-weight: 600;}
.hero-trust span { display: flex; align-items: center; gap: 8px; }
.hero-trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.paper-card {
background: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius);
padding: 26px;
box-shadow: 8px 8px 0 var(--ink);
transform: rotate(2deg);
}
.paper-card .stamp {
display: inline-block;
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
background: var(--amber);
color: var(--ink);
padding: 4px 10px;
border-radius: 6px;
transform: rotate(-4deg);
margin-bottom: 14px;
}
.paper-card .big-stat { font-size: 54px; color: var(--coral); line-height: 1; }
.paper-card .big-stat-label { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-top: 6px; }
.paper-card .divider { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); margin: 18px 0; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini-stats .n { font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--ink); }
.mini-stats .l { font-size: 12.5px; color: var(--ink-70); font-weight: 600; }
.mini-stats .span-2 { grid-column: 1 / -1; }
/* The rank list is long enough to wrap inside the card, so it gets a smaller
size and real line-height rather than the single-figure treatment. Coral
picks out that these are ranks, not a generic stat. */
.mini-stats .n.ranks { font-size: 15px; line-height: 1.4; color: var(--coral); letter-spacing: -0.01em; }
/* ---------- Hero "try one" widget ----------
The site's central claim is that the student solves inside the lesson
rather than watching. This demonstrates that in the first screen instead
of asserting it. All three questions live in the DOM as real text, so
they still index; JS only wires up the interaction. */
.try-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
padding: 22px 24px; box-shadow: 8px 8px 0 var(--cobalt); transform: rotate(-1.5deg); margin-bottom: 30px; }
.try-card .stamp { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 12px;
letter-spacing: .06em; background: var(--cobalt); color: var(--white); padding: 4px 10px;
border-radius: 6px; transform: rotate(2deg); margin-bottom: 14px; }
.try-q { display: none; }
.try-q.on { display: block; }
.try-grade { font-family: var(--font-mono); font-size: 12px; color: var(--ink-70); margin: 0 0 6px; }
.try-stem { font-size: 17px; font-weight: 700; line-height: 1.45; margin: 0 0 14px; }
.try-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.try-opt { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; text-align: left; color: var(--ink);
background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-sm);
padding: 11px 13px; cursor: pointer; opacity: 1;
transition: transform .12s ease, background .12s ease; }
.try-opt:hover:not(:disabled) { transform: translateY(-2px); background: var(--paper-dim); }
.try-opt:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.try-opt:disabled { cursor: default; }
.try-opt.right { background: var(--mint); color: var(--white); }
.try-opt.wrong { background: var(--coral); color: var(--white); }
.try-why { font-size: 13.5px; line-height: 1.55; color: var(--ink-70); margin: 14px 0 0;
padding-top: 12px; border-top: 2px dashed var(--line); display: none; }
.try-q.answered .try-why { display: block; }
.try-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 16px; flex-wrap: wrap; }
.try-status { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.try-next { background: none; border: 0; padding: 4px 0; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: 13.5px; color: var(--coral); }
.try-next:hover { color: var(--cobalt); }
.try-next:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (max-width: 880px) { .try-card { transform: rotate(-1deg); } }
@media (max-width: 480px) { .try-opts { grid-template-columns: 1fr; } }
/* ---------- Press strip ---------- */
.press-strip { padding: 30px 0 10px; }
.press-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-70); text-align: center; margin: 0 0 18px; }
.press-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 34px; }
.press-logos span, .press-logos a { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); opacity: 0.55; transition: opacity 0.2s ease; letter-spacing: -0.01em; }
.press-logos a:hover { opacity: 1; color: var(--cobalt); }
/* auto-fit rather than a fixed 3: the press list changes as coverage is
added or retired, and a fixed count strands the last card on its own row. */
.press-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; margin-top: 34px; }
.press-card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 20px 22px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.press-card:hover { transform: translateY(-3px); box-shadow: 5px 5px 0 var(--ink); }
.press-card .outlet { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cobalt); }
.press-card .headline { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.press-card .read { font-size: 13px; font-weight: 700; color: var(--coral); margin-top: auto; }
@media (max-width: 560px) { .press-cards { grid-template-columns: 1fr; } .press-logos span, .press-logos a { font-size: 18px; } .press-logos { gap: 12px 22px; } }
.hl {
background: linear-gradient(to bottom, transparent 62%, var(--amber) 62%);
padding: 0 2px;
font-weight: 700;
}
/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 12px; }
.notch { border-top: 2px dashed var(--line); }
/* ---------- Why / feature cards ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.feature-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); padding: 26px; }
.feature-card .icon { width: 44px; height: 44px; margin-bottom: 18px; }
.feature-card h3 { font-size: 19px; margin-bottom: 10px; }
.feature-card p { font-size: 14.5px; color: var(--ink-70); margin: 0; }
.old-vs-new { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.compare-card { border-radius: var(--radius); padding: 28px; border: 2px solid var(--ink); }
.compare-card.old { background: var(--paper-dim); }
.compare-card.new { background: var(--ink); color: var(--paper); }
.compare-card h3, .compare-card h4 { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; }
.compare-card ul { padding-left: 0; list-style: none; margin: 0; }
.compare-card li { padding: 9px 0; border-top: 1px solid rgba(0,0,0,0.08); font-size: 15px; }
.compare-card.new li { border-top-color: rgba(255,255,255,0.15); }
/* Label/value rows. Both columns carry the same five labels in the same
order, so the rows read across as a spec sheet — and each column still
stands on its own once they stack on mobile. */
.spec { margin: 4px 0 0; }
.spec > div { padding: 12px 0; border-top: 1px solid rgba(20,33,61,0.12); }
.compare-card.new .spec > div { border-top-color: rgba(255,255,255,0.16); }
.spec dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-70); margin-bottom: 5px; }
.compare-card.new .spec dt { color: rgba(250,243,231,0.6); }
.spec dd { margin: 0; font-size: 15px; line-height: 1.55; }
/* Cost is the last spec row, set exactly like every other row rather than as
a headline number — the substance rows above are what carry the comparison.
Only the figures themselves are picked out, and only on our own card. */
.spec .fig { font-family: var(--font-mono); font-weight: 700; }
.compare-card.new .spec .fig { color: var(--amber); }
/* "unlimited classes" is the claim, so it stays full-strength paper white —
amber is reserved for the figures, or the row ends up all highlight. */
.compare-card.new .spec dd strong { color: var(--paper); font-weight: 700; }
.spec > div:last-child { border-bottom: 1px solid rgba(20,33,61,0.12); }
.compare-card.new .spec > div:last-child { border-bottom-color: rgba(255,255,255,0.16); }
/* Closing line under the two columns — the one place the comparison is stated
outright, so it is set as a sentence, not another price block. */
.compare-bottom { margin: 26px auto 0; max-width: 660px; text-align: center; font-size: 17px; line-height: 1.65; color: var(--ink); font-family: var(--font-display); }
@media (max-width: 1040px) {
.feature-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
.feature-grid { grid-template-columns: 1fr 1fr; }
.old-vs-new { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.feature-grid { grid-template-columns: 1fr; }
}
/* ---------- Courses ---------- */
/* auto-fit rather than a fixed count: five courses fit one row at full width
and reflow to 4/3/2 as it narrows, so adding a course needs no CSS change. */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 20px; }
.course-card { background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--ink); }
.course-card .top { background: var(--cobalt); color: var(--white); padding: 20px 22px; }
/* Reserve two lines for the grade label so every blue header is the same
height, whether the label wraps ("Grade 12 · Advanced Fn.") or not
("MTH1W"). Without this the headers end up ragged across the row. */
.course-card .top .grade { font-family: var(--font-mono); font-size: 13px; opacity: 0.85; line-height: 1.35; min-height: 2.7em; }
.course-card .top .code { font-family: var(--font-mono); font-size: 26px; font-weight: 700; margin-top: 4px; }
.course-card .body { padding: 20px 22px 24px; }
.course-card .body p { font-size: 14.5px; color: var(--ink-70); min-height: 60px; }
.course-card .body a { font-weight: 700; font-size: 14.5px; color: var(--coral); display: inline-flex; align-items: center; gap: 6px; }
/* Flex column instead of the old min-height guess, so "View course" lines up
along the bottom of every card whatever the blurb length. */
.course-card { display: flex; flex-direction: column; }
.course-card .body { display: flex; flex-direction: column; flex: 1; }
.course-card .body p { flex: 1; min-height: 0; }
@media (max-width: 560px) { .course-grid { grid-template-columns: 1fr; } }
/* ---------- Curriculum road (course pages) ----------
"What's Covered" is a route, not a set. The units become waypoints on a
road that weaves down the section, with a car that drives it as you
scroll. The path is generated in JS from where the nodes actually land,
so it stays correct at any width and after webfonts reflow the layout.
Geometry: the node offset is a PERCENTAGE (68%/32% of the content width)
rather than a fixed pixel value, so the road spreads on wide screens but
still leaves the labels room to breathe as it narrows. Offset and row
pitch have to stay in proportion — at roughly 1.45:1 the bends still read
as a road; squeeze the pitch much below this and they flatten into
switchbacks.
Scoped to .topic-list.spine; the practice-links list keeps its grid. The