/* ============================================================
shared/theme.css — MLH shared theme
------------------------------------------------------------
One calm, clear, uncramped look for every page. Plain CSS, no build
step, no framework. Link it with:
(hub)
(modules)
and load Lexend in the page head:
CONTENTS
1. Tokens (custom properties on :root)
2. Base and typography
3. Layout utilities
4. Components (.mlh-*)
5. Strand accents [data-strand]
6. Tone [data-tone] on
7. Icons
8. Motion and accessibility
COLOUR RULE: every text/background pair in this file meets WCAG AA
(4.5:1 for body text, 3:1 for large text and UI edges). If you add a
colour, compute the ratio before you ship it.
============================================================ */
/* ------------------------------------------------------------
1. TOKENS
------------------------------------------------------------ */
:root {
/* Ink and surfaces */
--mlh-ink: #172033;
--mlh-muted: #4A5568;
--mlh-line: #E3E8F0;
--mlh-ground: #F5F7FB;
--mlh-surface: #FFFFFF;
/* Brand */
--mlh-primary: #3B4CCA;
--mlh-primary-tint: #ECEFFD;
--mlh-primary-strong: #2A39A8;
/* Strand accents (see section 5) */
--mlh-number: #0F766E;
--mlh-number-tint: #E3F4F2;
--mlh-algebra: #6D3FC4;
--mlh-algebra-tint: #F0EAFB;
/* Feedback */
--mlh-correct: #14683B;
--mlh-correct-bg: #E8F5EE;
--mlh-correct-line: #BFE3CE;
--mlh-try: #8A4B00;
--mlh-try-bg: #FFF4E0;
--mlh-try-line: #F2D9A6;
/* Radius */
--mlh-r-1: 12px;
--mlh-r-2: 20px;
--mlh-r-3: 24px;
--mlh-r-pill: 999px;
/* Spacing scale */
--mlh-s-1: 4px;
--mlh-s-2: 8px;
--mlh-s-3: 12px;
--mlh-s-4: 16px;
--mlh-s-5: 24px;
--mlh-s-6: 32px;
--mlh-s-7: 48px;
--mlh-s-8: 64px;
/* Shadows */
--mlh-shadow-1: 0 1px 2px rgba(23, 32, 51, .04);
--mlh-shadow-2: 0 8px 24px rgba(23, 32, 51, .06);
/* Type scale */
--mlh-fs-1: 13px;
--mlh-fs-2: 14px;
--mlh-fs-3: 16px;
--mlh-fs-4: 18px;
--mlh-fs-5: 22px;
--mlh-fs-6: 30px;
--mlh-fs-7: 44px;
/* Type */
--mlh-font: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mlh-display-weight: 600;
--mlh-btn-shadow: none;
/* Accent defaults: a strand block overrides these two. */
--mlh-accent: var(--mlh-primary);
--mlh-accent-tint: var(--mlh-primary-tint);
/* Layout */
--mlh-shell-max: 1120px;
--mlh-shell-pad: 32px;
--mlh-tap: 44px;
}
/* ------------------------------------------------------------
2. BASE AND TYPOGRAPHY
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
font-family: var(--mlh-font);
color: var(--mlh-ink);
background: var(--mlh-ground);
}
body {
margin: 0;
font-size: var(--mlh-fs-3);
line-height: 1.55;
background: var(--mlh-ground);
color: var(--mlh-ink);
/* Never let a wide child create a horizontal scrollbar. */
overflow-x: hidden;
}
h1, h2, h3 {
margin: 0;
color: var(--mlh-ink);
line-height: 1.2;
letter-spacing: -0.01em;
font-weight: var(--mlh-display-weight);
}
h1 { font-size: var(--mlh-fs-7); }
h2 { font-size: var(--mlh-fs-5); }
h3 { font-size: var(--mlh-fs-4); font-weight: 600; }
p { margin: 0; }
a { color: var(--mlh-primary-strong); }
img, svg { max-width: 100%; }
/* Visually hidden but announced. Same clip pattern used elsewhere. */
.mlh-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.mlh-muted { color: var(--mlh-muted); }
/* ------------------------------------------------------------
3. LAYOUT UTILITIES
------------------------------------------------------------ */
.mlh-shell {
max-width: var(--mlh-shell-max);
margin-inline: auto;
padding-inline: var(--mlh-shell-pad);
}
/* Responsive grid used for module cards. */
.mlh-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--mlh-s-4);
}
.mlh-hero {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: var(--mlh-s-5);
align-items: start;
margin-block: var(--mlh-s-6) var(--mlh-s-5);
}
.mlh-lead {
margin-top: var(--mlh-s-3);
max-width: 46ch;
font-size: var(--mlh-fs-4);
color: var(--mlh-muted);
}
/* ------------------------------------------------------------
4. COMPONENTS
------------------------------------------------------------ */
/* Top bar ------------------------------------------------ */
.mlh-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mlh-s-4);
flex-wrap: wrap;
padding-block: var(--mlh-s-4);
border-bottom: 1px solid var(--mlh-line);
}
.mlh-brand {
display: inline-flex;
align-items: center;
gap: var(--mlh-s-3);
min-height: var(--mlh-tap);
text-decoration: none;
color: var(--mlh-ink);
}
.mlh-brand-mark {
display: inline-grid;
place-items: center;
width: 36px; height: 36px;
border-radius: var(--mlh-r-1);
background: var(--mlh-primary);
color: #FFFFFF;
flex: none;
}
.mlh-brand-name {
font-size: var(--mlh-fs-4);
font-weight: 600;
letter-spacing: -0.01em;
}
.mlh-topbar-tools {
display: flex;
align-items: center;
gap: var(--mlh-s-3);
flex-wrap: wrap;
/* Never shrink into a wrapped two-line block: take the width the tools
need and let the top bar itself wrap on small screens instead. */
flex: none;
justify-content: flex-end;
}
/* Buttons ------------------------------------------------- */
.mlh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mlh-s-2);
min-height: var(--mlh-tap);
padding-inline: var(--mlh-s-4);
border-radius: var(--mlh-r-pill);
border: 1px solid transparent;
font: inherit;
font-size: var(--mlh-fs-2);
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
box-shadow: var(--mlh-btn-shadow);
}
.mlh-btn--primary {
background: var(--mlh-primary);
color: #FFFFFF;
border-color: var(--mlh-primary);
}
.mlh-btn--primary:hover { background: var(--mlh-primary-strong); border-color: var(--mlh-primary-strong); }
.mlh-btn--quiet {
background: var(--mlh-surface);
color: var(--mlh-ink);
border-color: var(--mlh-line);
}
.mlh-btn--quiet:hover { background: var(--mlh-primary-tint); border-color: var(--mlh-primary); }
.mlh-btn--text {
background: transparent;
color: var(--mlh-primary-strong);
border-color: transparent;
padding-inline: var(--mlh-s-2);
}
.mlh-btn--text:hover { background: var(--mlh-primary-tint); }
/* Chips (filter pills) ------------------------------------ */
.mlh-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--mlh-tap);
padding-inline: var(--mlh-s-4);
border-radius: var(--mlh-r-pill);
border: 1px solid var(--mlh-line);
background: var(--mlh-surface);
color: var(--mlh-ink);
font: inherit;
font-size: var(--mlh-fs-2);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mlh-chip:hover { border-color: var(--mlh-primary); color: var(--mlh-primary-strong); }
.mlh-chip[aria-pressed="true"] {
background: var(--mlh-primary);
border-color: var(--mlh-primary);
color: #FFFFFF;
}
/* Segmented control: a row of chips on a soft track. */
.mlh-seg {
display: flex;
align-items: center;
gap: var(--mlh-s-2);
padding: var(--mlh-s-1);
border-radius: var(--mlh-r-pill);
background: var(--mlh-surface);
border: 1px solid var(--mlh-line);
overflow-x: auto;
scrollbar-width: none;
min-width: 0;
}
.mlh-seg::-webkit-scrollbar { display: none; }
.mlh-seg > .mlh-chip { border-color: transparent; background: transparent; }
.mlh-seg > .mlh-chip[aria-pressed="true"] { background: var(--mlh-primary); color: #FFFFFF; }
/* Cards --------------------------------------------------- */
.mlh-card {
background: var(--mlh-surface);
border: 1px solid var(--mlh-line);
border-radius: var(--mlh-r-2);
box-shadow: var(--mlh-shadow-1);
padding: var(--mlh-s-5);
}
/* Mastery bar --------------------------------------------- */
.mlh-bar {
position: relative;
height: 8px;
border-radius: var(--mlh-r-pill);
background: var(--mlh-line);
overflow: hidden;
}
.mlh-bar > span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--mlh-accent);
transition: width .3s ease;
}
/* Field (label + input) ----------------------------------- */
.mlh-field {
display: block;
}
.mlh-field > .mlh-field-label {
display: block;
margin-bottom: var(--mlh-s-2);
font-size: var(--mlh-fs-2);
font-weight: 600;
color: var(--mlh-ink);
}
.mlh-field > input,
.mlh-field > select,
.mlh-field > textarea {
display: block;
width: 100%;
min-height: var(--mlh-tap);
padding: var(--mlh-s-3) var(--mlh-s-4);
font: inherit;
font-size: var(--mlh-fs-3);
color: var(--mlh-ink);
background: var(--mlh-surface);
border: 1px solid var(--mlh-line);
border-radius: var(--mlh-r-1);
}
.mlh-field > textarea { min-height: 112px; resize: vertical; }
.mlh-field > input::placeholder,
.mlh-field > textarea::placeholder { color: var(--mlh-muted); }
/* Banner (feedback) --------------------------------------- */
.mlh-banner {
display: flex;
align-items: flex-start;
gap: var(--mlh-s-3);
padding: var(--mlh-s-3) var(--mlh-s-4);
border-radius: var(--mlh-r-1);
border: 1px solid transparent;
font-size: var(--mlh-fs-2);
}
.mlh-banner--correct {
color: var(--mlh-correct);
background: var(--mlh-correct-bg);
border-color: var(--mlh-correct-line);
}
.mlh-banner--try {
color: var(--mlh-try);
background: var(--mlh-try-bg);
border-color: var(--mlh-try-line);
}
/* Strand tag ---------------------------------------------- */
.mlh-tag {
display: inline-flex;
align-items: center;
gap: var(--mlh-s-2);
padding: 3px var(--mlh-s-3);
border-radius: var(--mlh-r-pill);
font-size: var(--mlh-fs-1);
font-weight: 600;
letter-spacing: .02em;
color: var(--mlh-accent);
background: var(--mlh-accent-tint);
}
/* ------------------------------------------------------------
5. STRAND ACCENTS
------------------------------------------------------------
Apply a strand to any container with a single attribute:
That sets --mlh-accent and --mlh-accent-tint for everything inside, so
.mlh-tag, .mlh-bar and .mlh-strand-swatch pick up the colour on their own.
To add a strand: add two tokens to :root and one block below. That is all.
--mlh-measurement: #8A4B00;
--mlh-measurement-tint: #FFF4E0;
[data-strand="measurement"] {
--mlh-accent: var(--mlh-measurement);
--mlh-accent-tint: var(--mlh-measurement-tint);
}
------------------------------------------------------------ */
[data-strand="number"] {
--mlh-accent: var(--mlh-number);
--mlh-accent-tint: var(--mlh-number-tint);
}
[data-strand="algebra"] {
--mlh-accent: var(--mlh-algebra);
--mlh-accent-tint: var(--mlh-algebra-tint);
}
.mlh-strand-swatch {
display: inline-block;
width: 14px; height: 14px;
border-radius: 4px;
background: var(--mlh-accent);
flex: none;
}
/* ------------------------------------------------------------
6. TONE
------------------------------------------------------------
html[data-tone="calm"] is the default and the only tone the hub uses.
html[data-tone="playful"] is defined but reserved for primary modules,
where more colour and bounce is wanted. It only overrides tokens, so
no component needs a second set of rules.
------------------------------------------------------------ */
html[data-tone="calm"] {
--mlh-display-weight: 600;
--mlh-btn-shadow: none;
}
html[data-tone="playful"] {
/* Larger radius, friendlier headings, bolder buttons, stronger tints. */
--mlh-r-1: 16px;
--mlh-r-2: 24px;
--mlh-r-3: 32px;
--mlh-display-weight: 800;
--mlh-btn-shadow: 0 4px 0 var(--mlh-primary-strong);
--mlh-number-tint: #D3EFEA;
--mlh-algebra-tint: #E8DDFA;
}
/* ------------------------------------------------------------
7. ICONS
------------------------------------------------------------
Icons are inline SVG, never an icon font and never emoji:
- 24 x 24 viewBox
- stroke: currentColor, stroke-width: 2
- stroke-linecap: round, stroke-linejoin: round
- fill: none (except decorative dots)
- no width/height attributes; size comes from CSS
That way an icon inherits the text colour, including the strand accent.
Wrap in an element with aria-hidden="true" when the adjacent text already
names the thing; give the