/* ==========================================================================
site.css: the Exercise Book look (restyle, concept A, Joshua 19 Oct 2026)
The 田字格 practice book and the teacher's red pen: two inks on neutral paper. Square corners, rules (lines)
instead of boxes, no shadows, gradients, pills or blobs, left-aligned text, one reading column.
Linked from templates/base.html on every page, before any group stylesheet (/css/*.css, front matter
extra_css) and the few partials that carry their own styles.
========================================================================== */
/* Pinyin tone vowels in one face. Public Sans lacks ǎ ǐ ǒ and ǖ ǘ ǚ ǜ, so a syllable such as "xiǎng" took its ǎ
from another font mid-word. Every tone-marked vowel (and ü) comes from this Inter subset instead, first in --sans;
the browser fetches it (4.5 KB) only on a page that shows one. Made by scripts/build_pinyin_font.py. */
@font-face {
font-family: "Pinyin Tones";
src: url("/fonts/pinyin-tones.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
unicode-range: U+00C0-00C1, U+00C8-00C9, U+00CC-00CD, U+00D2-00D3, U+00D9-00DA, U+00DC, U+00E0-00E1,
U+00E8-00E9, U+00EC-00ED, U+00F2-00F3, U+00F9-00FA, U+00FC, U+0100-0101, U+0112-0113, U+011A-011B,
U+012A-012B, U+014C-014D, U+016A-016B, U+01CD-01DC;
}
/* --------------------------------------------------------------------------
Tokens. Light on :root; dark when the phone asks for it (unless the footer switch chose light), and again
when the switch chose dark. theme.js sets data-theme on before the page paints.
-------------------------------------------------------------------------- */
:root {
--paper: #FAFAF7;
--ink: #2148B8; /* cobalt: headings, buttons, rules, chosen state */
--ink-2: #1A3990; /* cobalt pressed / hover */
--text: #16224A; /* navy body text */
--muted: #4A5578;
--red: #C83232; /* kickers, ticks, crosses, links, error text only */
--tick: #C83232; /* the red tick on a chosen (solid cobalt) practice box */
--soft: rgba(33, 72, 184, .10); /* practice-grid tint, hairlines */
--serif: 'Source Serif 4', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
--sans: "Pinyin Tones", 'Public Sans', 'Noto Serif SC', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--zh: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
/* Ticks and crosses: Public Sans has no ✓/✕, and Noto Serif SC's (next in --sans) is a thin √. */
--glyph: system-ui, -apple-system, 'Segoe UI Symbol', 'Segoe UI', sans-serif;
--column: 680px; /* the reading column on a laptop */
--gutter: 16px;
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--paper: #0F1428;
--ink: #9FB4F2;
--ink-2: #C9D5F8;
--text: #E4E9F8;
--muted: #AEB8D6;
--red: #FF7B6E;
--tick: #C83232;
--soft: rgba(159, 180, 242, .14);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--paper: #0F1428;
--ink: #9FB4F2;
--ink-2: #C9D5F8;
--text: #E4E9F8;
--muted: #AEB8D6;
--red: #FF7B6E;
--tick: #C83232;
--soft: rgba(159, 180, 242, .14);
color-scheme: dark;
}
/* --------------------------------------------------------------------------
Base elements
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--text);
font: 400 17px/1.6 var(--sans);
-webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 {
font-family: var(--serif);
color: var(--ink);
font-weight: 700;
line-height: 1.15;
text-wrap: balance;
}
h1 { font-size: clamp(32px, 7vw, 44px); line-height: 1.08; letter-spacing: -.01em; margin: 8px 0 12px; }
/* A section head: a cobalt rule above it, like a new exercise on the page. */
h2 { font-size: clamp(25px, 4.4vw, 29px); margin: 40px 0 12px; padding-top: 14px; border-top: 1px solid var(--ink); }
h3 { font-size: 20px; line-height: 1.25; margin: 28px 0 8px; }
h4 { font-size: 17px; line-height: 1.3; margin: 24px 0 6px; }
/* A numbered red kicker set inside a section head:
01What's in the sample
*/
h2 > .kicker, h3 > .kicker { display: block; margin-bottom: 6px; }
p { margin: 0 0 1em; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin: .35em 0; }
li::marker { color: var(--red); }
img, picture, video { max-width: 100%; height: auto; }
img, video { display: block; }
hr { border: 0; border-top: 1px solid var(--ink); margin: 36px 0; }
blockquote {
margin: 24px 0;
padding: 2px 0 2px 14px;
border-left: 3px solid var(--red);
font: italic 400 18px/1.5 var(--serif);
color: var(--text);
}
table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 20px; }
th {
text-align: left;
font: 700 13px/1.3 var(--sans);
letter-spacing: .04em;
color: var(--ink);
border-bottom: 2px solid var(--ink);
padding: 8px 6px;
vertical-align: bottom;
}
td { padding: 9px 6px; border-bottom: 1px solid var(--soft); vertical-align: top; }
/* On a phone a three-column table must fit 358 px: tighter cells, broken between words ("Feature", not "Featur / e").
A word too long for its cell on its own ("$1,000–$2,000/month") still breaks rather than push the page sideways;
a table too wide even so (four or more columns) scrolls in .table-scroll. */
@media (max-width: 599px) {
th, td { padding-left: 4px; padding-right: 4px; overflow-wrap: break-word; hyphens: manual; }
/* Chrome still squeezes a break-word cell below its longest word; in the scrolling wrapper nothing breaks. */
.table-scroll th, .table-scroll td { overflow-wrap: normal; }
}
td.good { color: var(--ink); font-weight: 600; }
td.bad { color: var(--red); }
/* A table too wide for a phone even so (four or more columns) scrolls inside this wrapper, not the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="email"], input[type="text"], input[type="search"], input[type="tel"], input[type="number"], select, textarea {
width: 100%;
max-width: 100%;
padding: 14px;
border: 1.5px solid var(--ink);
border-radius: 0;
background: var(--paper);
color: var(--text);
font: 400 17px/1.3 var(--sans);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { font: 700 15px/1.4 var(--sans); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
::selection { background: var(--soft); color: inherit; }
/* Chinese words set in the Chinese face (Noto Serif SC is also in every stack, for Chinese inside English). */
:lang(zh), .zh { font-family: var(--zh); }
/* --------------------------------------------------------------------------
Layout: one reading column, centred, its text left-aligned
-------------------------------------------------------------------------- */
.column {
width: 100%;
max-width: calc(var(--column) + 2 * var(--gutter));
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* --------------------------------------------------------------------------
Header strip: the deck's name and "by Joshua Wong"; the menu below it (beside it on a laptop).
Its properties are all set here because old page styles still carry bare header/nav/a rules.
-------------------------------------------------------------------------- */
.site-header {
display: block;
width: 100%;
align-self: stretch; /* pages whose old body is a centred flex column (404) */
margin: 0;
padding: 0;
background: var(--paper);
border-bottom: 2px solid var(--ink);
text-align: left;
animation: none;
position: relative;
z-index: 2;
}
.site-header-inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
column-gap: 24px;
padding-top: 12px;
padding-bottom: 12px;
}
.site-brand {
display: flex;
flex: 1 1 100%;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.site-name {
font: 700 16px/1.3 var(--serif);
color: var(--ink);
text-decoration: none;
letter-spacing: 0;
}
a.site-name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.site-by { font: 600 13px/1.3 var(--sans); color: var(--ink); letter-spacing: .02em; white-space: nowrap; }
.site-nav {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
margin: 6px 0 -12px; /* the links sit on the header's bottom rule */
padding: 0;
background: none;
}
.site-nav a {
display: inline-block;
padding: 8px 0 10px;
font: 600 14px/1.2 var(--sans);
color: var(--text);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--red); }
@media (min-width: 760px) {
.site-header-inner { flex-wrap: nowrap; padding-top: 14px; padding-bottom: 14px; }
.site-brand { flex: 0 1 auto; justify-content: flex-start; gap: 14px; }
.site-nav { margin: 0 0 -14px; flex-wrap: nowrap; }
.site-nav a { padding: 6px 0 12px; }
}
/* --------------------------------------------------------------------------
Footer: the page's footer line and the "Dark mode" switch
-------------------------------------------------------------------------- */
.site-footer {
display: block;
width: 100%;
align-self: stretch;
margin: 56px 0 0;
padding: 0;
background: var(--paper);
border-top: 2px solid var(--ink);
text-align: left;
position: relative;
z-index: 1;
}
.site-footer-inner {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
padding-top: 14px;
padding-bottom: 28px;
}
.site-footer-text { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--muted); }
/* The switch is a text button with a small practice box that fills when dark mode is on (aria-pressed). */
.theme-switch {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 6px 0;
border: 0;
border-radius: 0;
background: none;
font: 600 14px/1.2 var(--sans);
color: var(--ink);
cursor: pointer;
white-space: nowrap;
}
.theme-switch::before {
content: "";
width: 13px;
height: 13px;
border: 1.5px solid var(--ink);
background: transparent;
}
.theme-switch[aria-pressed="true"]::before { background: var(--ink); }
.theme-switch:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --------------------------------------------------------------------------
Page hero: red kicker (+ date), h1, a muted line under it
-------------------------------------------------------------------------- */
.page-hero {
display: block;
padding-top: 24px;
padding-bottom: 4px;
background: none;
text-align: left;
animation: none;
}
/* Set in full here (not left to the h1 rule) so a page's old inline h1 rule does not reach the frame's hero. */
.page-hero h1 {
margin: 8px 0 12px;
font: 700 clamp(32px, 7vw, 44px)/1.08 var(--serif);
letter-spacing: -.01em;
color: var(--ink);
text-align: left;
}
.sub { margin: 0 0 8px; font: 400 18px/1.5 var(--sans); color: var(--muted); text-align: left; }
.kicker {
display: block;
margin: 0;
text-align: left;
font: 600 12px/1.4 var(--sans);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--red);
}
.kicker .date {
margin-left: 8px;
font-size: inherit;
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
color: var(--muted);
}
/* The faint 田字格 practice grid behind a band (the hero of a Level page). */
.grid-band {
background-image:
linear-gradient(var(--soft) 1px, transparent 1px),
linear-gradient(90deg, var(--soft) 1px, transparent 1px);
background-size: 44px 44px;
background-position: -1px -1px;
border-bottom: 1px solid var(--soft);
}
/* --------------------------------------------------------------------------
Buttons: square, cobalt, an arrow; full width on a phone
-------------------------------------------------------------------------- */
.btn {
display: block;
width: 100%;
margin: 0;
padding: 16px 20px;
border: 1.5px solid var(--ink);
border-radius: 0;
background: var(--ink);
color: var(--paper);
font: 700 17px/1.25 var(--sans);
text-align: center;
text-decoration: none;
cursor: pointer;
box-shadow: none;
transition: background-color .15s ease, border-color .15s ease;
}
.btn::after { content: "\00a0\2192"; }
.btn:hover, .btn:focus-visible { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); text-decoration: none; }
.btn:active { background: var(--ink-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* The quieter choice beside a .btn ("No thanks"): cobalt line and text, no arrow. */
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline::after { content: none; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.btn-plain::after { content: none; }
@media (min-width: 600px) {
.btn { display: inline-block; width: auto; min-width: 300px; padding: 15px 28px; }
}
/* --------------------------------------------------------------------------
Tick and cross lists: ruled rows, a cobalt tick for the good, a red cross for the bad
-------------------------------------------------------------------------- */
.check, .cross { list-style: none; margin: 0 0 1em; padding: 0; }
.check > li, .cross > li {
position: relative;
margin: 0;
padding: 10px 0 10px 30px;
border-bottom: 1px solid var(--soft);
}
.check > li::before, .cross > li::before {
position: absolute;
left: 4px;
top: 10px;
font: 700 17px/1.6 var(--glyph);
}
.check > li::before { content: "\2713"; color: var(--ink); }
.cross > li::before { content: "\2715"; color: var(--red); }
/* --------------------------------------------------------------------------
Quote: a red rule in the margin, like the teacher's pen
-------------------------------------------------------------------------- */
.quote {
margin: 24px 0;
padding: 2px 0 2px 14px;
border: 0;
border-left: 3px solid var(--red);
border-radius: 0;
background: none;
font: italic 400 18px/1.5 var(--serif);
color: var(--text);
}
.quote p { margin: 0 0 .5em; }
.quote cite, .quote small, .quote figcaption {
display: block;
margin-top: 6px;
font: normal 400 13px/1.4 var(--sans);
color: var(--muted);
}
/* --------------------------------------------------------------------------
Score as a practice box, and the verdict row it sits in
6/10
Our Verdict
…
-------------------------------------------------------------------------- */
.practice-grid-bg, .score, .practice-boxes > * {
background-image:
linear-gradient(90deg, transparent calc(50% - .5px), var(--soft) calc(50% - .5px), var(--soft) calc(50% + .5px), transparent calc(50% + .5px)),
linear-gradient(transparent calc(50% - .5px), var(--soft) calc(50% - .5px), var(--soft) calc(50% + .5px), transparent calc(50% + .5px));
}
.score {
position: relative;
display: grid;
place-items: center;
width: 96px;
aspect-ratio: 1;
border: 1.5px solid var(--ink);
border-radius: 0;
font: 700 34px/1 var(--serif);
color: var(--ink);
}
.score small { position: absolute; right: 6px; bottom: 4px; font: 600 12px/1 var(--sans); color: var(--ink); }
.verdict {
display: grid;
grid-template-columns: 96px 1fr;
gap: 16px;
align-items: center;
margin: 28px 0;
padding: 16px 0;
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.verdict h3 { margin: 0 0 4px; font-size: 18px; }
.verdict p { margin: 0; font-size: 15px; }
/* --------------------------------------------------------------------------
Call to action: a ruled block with a heading, a line and a .btn
-------------------------------------------------------------------------- */
.cta {
margin: 36px 0;
padding: 18px 0 0;
border: 0;
border-top: 2px solid var(--ink);
border-radius: 0;
background: none;
text-align: left;
}
.cta h2, .cta h3 { margin: 0 0 6px; padding: 0; border: 0; font-size: 22px; line-height: 1.2; }
.cta p { margin: 0 0 14px; }
/* The small line under a call to action's button ("The free sample is lessons 1 to 3 …"). */
.cta-note, .cta .cta-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
/* --------------------------------------------------------------------------
Notes and pairs (the old coloured boxes)
-------------------------------------------------------------------------- */
/* A note: a cobalt rule above, a faint one below. Straight under a section head, whose own rule is enough. */
.note { margin: 28px 0; padding: 14px 0 6px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--soft); }
.note > h3:first-child, .note > h4:first-child { margin-top: 0; }
h2 + .note { border-top: 0; padding-top: 0; }
/* A side note beside the text or the steps: a cobalt rule in the margin (the red one is for parents' quotes). */
.side-note { margin: 24px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--ink); }
.side-note > h3:first-child, .side-note > h4:first-child { margin-top: 0; }
.side-note > :last-child { margin-bottom: 0; }
/* Two things side by side (them and us), a word or a sign between them; stacked on a phone. */
.pair { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 28px; }
.pair-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1.5px solid var(--ink); }
.pair-item > h4:first-child { margin-top: 0; }
.pair-item p { margin: 0; }
@media (min-width: 600px) {
.pair { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; }
}
/* --------------------------------------------------------------------------
Practice boxes: the level picker as a 3 × 2 grid of 田字格 boxes; the chosen one solid cobalt with a red tick.