per level can't do this, since its
body is stuck inside its own narrow column. */
.home-level-radio {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ── Segmented control ───────────────────────────────────────────────────────
A single sliding thumb rather than three segments that light up in place, so changing
level reads as one control moving instead of two things blinking. The thumb takes the
colour of the selected level from --lvl-1..3, which the TEMPLATE sets from
home_sections._LEVELS — the palette is not duplicated here. */
.home-level-thumb {
position: absolute;
/* Full-bleed: the strip has no padding and no gaps, so the pill is exactly one third of
it and touches every edge — no 5px groove around it. It still reads as a PILL: the
radius here is the strip's inner radius (its 1rem less the 1px border), so at the two
ends the pill's corners nest exactly inside the strip's own rather than showing a
sliver of track between them. */
left: 0;
top: 0;
bottom: 0;
width: calc(100% / 3);
border-radius: 15px;
background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.13));
box-shadow:
inset 0 0 0 1px rgba(var(--accent-rgb), 0.4),
inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
0 6px 18px -10px rgba(var(--accent-rgb), 0.8);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
background 0.25s ease, box-shadow 0.25s ease;
}
/* translateX percentages resolve against the THUMB's own width — exactly one segment —
so each step is a clean 100%, with no gap to add now that the segments tile. */
#home-level-igcse:checked ~ .home-level-tabs .home-level-thumb { --accent-rgb: var(--lvl-1); transform: translateX(0); }
#home-level-a_level:checked ~ .home-level-tabs .home-level-thumb { --accent-rgb: var(--lvl-2); transform: translateX(100%); }
#home-level-ap:checked ~ .home-level-tabs .home-level-thumb { --accent-rgb: var(--lvl-3); transform: translateX(200%); }
/* Segments sit ABOVE the thumb and are otherwise unstyled — the thumb is the only fill,
so nothing double-paints as it slides through.
min-w-0 in the markup is load-bearing: `flex-1` is `flex: 1 1 0%`, but a flex item's
default `min-width: auto` stops it shrinking below its content. "A-Level" is wider than
"AP", so without it the three segments come out UNEQUAL on a narrow viewport — and the
thumb, which is a fixed one third, then stops lining up with them (measured broken at
381-390px, where the icon reappears and space is tightest). */
.home-level-tab {
color: rgb(148, 163, 184);
transition: color 0.2s ease;
}
.home-level-icon {
background: rgba(var(--accent-rgb), 0.12);
color: rgb(var(--accent-rgb));
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.home-level-label { color: rgb(203, 213, 225); transition: color 0.2s ease; }
.home-level-tab:hover .home-level-label { color: #fff; }
.home-level-tab:hover .home-level-icon { background: rgba(var(--accent-rgb), 0.2); }
#home-level-igcse:checked ~ .home-level-tabs [data-level="igcse"] .home-level-label,
#home-level-a_level:checked ~ .home-level-tabs [data-level="a_level"] .home-level-label,
#home-level-ap:checked ~ .home-level-tabs [data-level="ap"] .home-level-label { color: #fff; }
#home-level-igcse:checked ~ .home-level-tabs [data-level="igcse"] .home-level-icon,
#home-level-a_level:checked ~ .home-level-tabs [data-level="a_level"] .home-level-icon,
#home-level-ap:checked ~ .home-level-tabs [data-level="ap"] .home-level-icon {
background: rgba(var(--accent-rgb), 0.24);
box-shadow: 0 0 16px -4px rgba(var(--accent-rgb), 0.6);
}
/* Where the icon has to go. A segment is (viewport - 32px page padding - 2px border) / 3;
the widest label, "A-Level" at 16px, needs ~60px, plus a 36px icon, a 10px gap and 24px
of padding — so the icon only fits from ~424px up. Below that it is dropped rather than
left to truncate the label (measured: at 381-390px it clipped to "A-Lev…"). */
@media (max-width: 440px) {
.home-level-icon { display: none; }
.home-level-tab { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.home-level-thumb { transition: none; }
}
/* The selected level's subject panel. Matched on data-level rather than :nth-of-type,
because nth-of-type counts among ALL sibling s — the tab strip is one, so the
panels would be off by one and the whole thing would silently show the wrong level. */
.home-level-panel { display: none; }
#home-level-igcse:checked ~ .home-level-panel[data-level="igcse"],
#home-level-a_level:checked ~ .home-level-panel[data-level="a_level"],
#home-level-ap:checked ~ .home-level-panel[data-level="ap"] {
display: block;
margin-top: 0.5rem;
}
/* Keyboard focus lands on the visually-hidden radio, so the ring must be drawn on its
label — otherwise arrow-keying through the group shows nothing at all. */
#home-level-igcse:focus-visible ~ .home-level-tabs [data-level="igcse"],
#home-level-a_level:focus-visible ~ .home-level-tabs [data-level="a_level"],
#home-level-ap:focus-visible ~ .home-level-tabs [data-level="ap"] {
outline: 2px solid rgba(var(--accent-rgb), 0.7);
outline-offset: -1px;
}
/* ─── Subject disclosure (chip → what you can do with it) ────────────────────
One per subject, exclusive via name="home-subject". Not overflow-hidden, so
the hover lift isn't clipped — hence the hover fill goes on the via
:has(> summary:hover) rather than on the summary, so it follows the rounded corners. */
.home-subject {
position: relative; /* anchor for the absolutely-positioned action overlay below */
/* A resting wash of the subject's own hue rather than flat white/3% — with 8 to 19 of
these in a panel, the colour is what makes the grid scannable, and it matches how the
Study tiles above carry their accent. */
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.09) 0%, rgba(255, 255, 255, 0.02) 62%);
border-color: rgba(var(--accent-rgb), 0.16);
transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease,
box-shadow 0.16s ease;
}
.home-subject:has(> summary:hover) {
border-color: rgba(var(--accent-rgb), 0.45);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.18) 0%, rgba(255, 255, 255, 0.03) 62%);
transform: translateY(-2px);
box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.9),
0 0 22px -12px rgba(var(--accent-rgb), 0.7);
}
.home-subject[open] {
border-color: rgba(var(--accent-rgb), 0.45);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(255, 255, 255, 0.03) 62%);
}
/* The longest name on the site — "Physics C: Electricity and Magnetism" — does not fit a
card's text column on one line at any width. Wrapping to two lines shows it in full
instead of ellipsising it; the grid stretches its row-mates to match. */
.home-subject-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* The subject symbol. Bigger than the old 28px chip and with a halo of its own hue — it
is the thing you actually scan for when picking a subject out of nineteen. */
.home-subject-icon {
background: rgba(var(--accent-rgb), 0.16);
color: rgb(var(--accent-rgb));
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.22),
0 0 18px -8px rgba(var(--accent-rgb), 0.75);
transition: background 0.16s ease, box-shadow 0.16s ease;
}
.home-subject:has(> summary:hover) .home-subject-icon,
.home-subject[open] .home-subject-icon {
background: rgba(var(--accent-rgb), 0.26);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35),
0 0 22px -6px rgba(var(--accent-rgb), 0.85);
}
.home-subject-chevron {
color: rgba(var(--accent-rgb), 0.6);
transition: transform 0.2s ease, color 0.18s ease;
}
.home-subject[open] .home-subject-chevron { transform: rotate(90deg); }
.home-subject[open] .home-subject-chevron,
.home-subject:has(> summary:hover) .home-subject-chevron { color: rgb(var(--accent-rgb)); }
/* The action overlay. Anchored to the subject card and absolutely positioned, so
unfolding overlays whatever is below instead of growing the grid row — the card itself
never changes size. Accent-tinted glass, the same vocabulary as the /code landing's
resources popover (16-code.css .code-resources-pop). */
.home-subject-pop {
position: absolute;
/* Right-aligned and only as wide as its labels: a full-card-width box around five
short buttons looked empty. The card's right half is blank anyway (subject names are
short), so the panel hangs under exactly that space. max-width keeps it inside the
card on the narrowest phone, where the name can run the full width. */
left: auto;
right: 0;
width: max-content;
min-width: 8.5rem;
max-width: 100%;
/* Flush with the card's OWN top edge — it sits ON the card's blank right half rather
than hanging beneath it. Exactly 0, not a negative offset: a few pixels of overhang
read as a misalignment rather than as intent. */
top: 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.3rem;
border-radius: 0.75rem;
border: 1px solid rgba(var(--accent-rgb), 0.34);
background: linear-gradient(162deg, rgba(var(--accent-rgb), 0.16) 0%, rgba(13, 21, 40, 0.94) 58%);
backdrop-filter: blur(22px) saturate(155%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
0 22px 48px -18px rgba(0, 0, 0, 0.85),
0 0 30px -14px rgba(var(--accent-rgb), 0.45);
}
/* An OPEN card must paint above the cards after it in the grid, or the overlay is
covered by them. z-index on a positioned element is what raises the whole card; the
hover lift is dropped while open because a transform would create a stacking context
that traps the overlay inside the card again. */
.home-subject[open] { z-index: 30; }
.home-subject[open]:has(> summary:hover) { transform: none; }
/* Menu rows. The icon carries the hue of the surface it goes to — the same cyan for Know
as the Know tile further down the page — while the label stays neutral so five colours
don't fight; hovering tints the whole row with that surface's accent. */
.home-action {
color: #cbd5e1;
transition: background 0.14s ease, color 0.14s ease;
}
.home-action > svg:first-child { color: rgb(var(--accent-rgb)); }
.home-action-go { color: transparent; transition: color 0.14s ease, transform 0.14s ease; }
.home-action:hover {
background: rgba(var(--accent-rgb), 0.18);
color: #fff;
}
.home-action:hover .home-action-go { color: rgba(var(--accent-rgb), 0.9); transform: translateX(2px); }
.home-action:focus-visible {
outline: 2px solid rgba(var(--accent-rgb), 0.6);
outline-offset: -1px;
}
/* Subject chips stagger in when a level tab is selected, and the action row when a
subject unfolds — same motion vocabulary as the code landing's lesson cards. */
.home-level-panel .home-subject {
animation: home-subject-in 0.3s cubic-bezier(0.22, 0.9, 0.32, 1) backwards;
animation-delay: calc(20ms + min(var(--i, 0), 18) * 16ms);
}
.home-subject[open] .home-action {
animation: home-subject-in 0.24s cubic-bezier(0.22, 0.9, 0.32, 1) backwards;
}
@keyframes home-subject-in {
from { opacity: 0; transform: translateY(6px) scale(0.985); }
}
/* ─── /about explainer cards ─────────────────────────────────────────────────
The four "how this site works" blocks. Same sheet as the landing because /about is
built from the landing's vocabulary — the section tiles above them are literally the
same `.practice-card` markup, driven by the same registry. */
.about-card {
transition: border-color 0.18s ease, background 0.18s ease;
}
.about-card:hover {
border-color: rgba(var(--accent-rgb), 0.28);
background: rgba(var(--accent-rgb), 0.04);
}
.about-card-icon {
background: rgba(var(--accent-rgb), 0.14);
color: rgb(var(--accent-rgb));
}
.about-link {
color: rgb(var(--accent-rgb));
text-underline-offset: 2px;
}
.about-link:hover { text-decoration: underline; }
/* ─── Blurbs ─────────────────────────────────────────────────────────────────
Titles are `truncate`, but a blurb must stay readable, so it wraps — capped at two
lines so one long translation can't make a tile taller than its row-mates. */
.home-tile-blurb {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* Tiny phones: a single column ~185px of text can't hold the longest blurbs in two
lines, so let them take three there rather than ellipsise — the column is single, so
uneven card heights cost nothing. */
@media (max-width: 379px) {
.home-tile-blurb { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* ─── Entrance stagger ───────────────────────────────────────────────────────
Tiles rise in sequence on load. `--i` is set inline per tile (its index within its
group), and the delay is capped with min() so a group can grow without the last tile
crawling in. `backwards` (not `both`) keeps the tile hidden through its delay while
still releasing transform afterwards, so hover lift works — same reasoning as
16-code.css's card stagger. Gated on the page-entrance class base.html toggles, so
this runs once per load and never on a re-render. */
body:not(.page-entered) .home-tile {
animation: home-tile-in 0.34s cubic-bezier(0.22, 0.9, 0.32, 1) backwards;
animation-delay: calc(60ms + min(var(--i, 0), 8) * 34ms);
}
@keyframes home-tile-in {
from { opacity: 0; transform: translateY(8px) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
body:not(.page-entered) .home-tile { animation: none; }
/* Only the movement goes — the glow is decoration, not motion, and dropping it here
would leave these users the one flat-looking version of the page. */
.home-tile--square:hover,
.home-tile--square:focus-visible,
.home-tile--square:hover .home-tile-icon,
.home-tile--square:focus-visible .home-tile-icon { transform: none; }
.home-level-panel .home-subject,
.home-subject[open] .home-action { animation: none; }
.home-subject:has(> summary:hover),
.home-level-tab:hover { transform: none; }
.home-subject-chevron { transition: none; }
}