/* ============================================================================
MyEO palette — THE RISING INDEX
----------------------------------------------------------------------------
The base stylesheets (redesign.css + warm-theme.css) are inherited from the
sibling Explorer sites and are built on a turquoise/gold ramp. Rather than
fork ~93 KB of CSS, this file retargets the handful of custom properties the
whole theme is expressed through onto MyEO's own identity.
THE IDENTITY: the competition's own mark, read as a page. The MyEO logo is
three colours and nothing else — navy for the letters, gold for the bars, a
sky-blue trendline cutting up through them — so the palette is those three
rather than a fourth thing invented alongside them. Navy ink on a cool ice
ground, gold for everything that asks to be acted on, sky for the analytical
half of the subject. All six Explorer sites share this layout engine, so the
palette is the main thing that tells them apart, and this one is chosen to
sit clear of all five siblings:
MyAO deep space — blue into violet, on dark
MyBO turquoise and gold
MyESO deep green and amber, on cream
MyGeo navy and orange, on parchment
MyCLO plum and rose, on lilac paper
MyEO plum and gold, on the badge's violet <- here
TWO SIBLINGS TO KEEP A DISTANCE FROM, since the ground went violet.
MyCLO is "plum and rose, on lilac paper". Three things hold them apart and
all three are load-bearing: this violet is the badge's magenta-violet rather
than a plum-and-rose pair; the ink over it is the plum with GOLD CTAs, never
rose; and the ornament layer here is the ledger and the plot. Change any of
those three and the two sites start to converge.
MyGeo is also dark-inked, and gold and orange are neighbours. The GROUND was
already what held them apart — MyGeo's paper is warm because an atlas is
printed on warm stock — and the violet widens that gap rather than narrowing
it. The THIRD COLOUR is the second guard: the sky-blue trendline has no
counterpart on MyGeo, and it is what carries every rising line, chart rule
and stage marker on this site.
#5c1c58 Explorer plum headings, links, hairlines 11.9:1 on white
#7a2a76 plum mid secondary links and rules 8.7:1
#6a2168 Explorer violet the badge plate 10.3:1
#9a2183 Explorer magenta the badge ring 7.2:1
#45163f deep plum ink on gold and lilac fills 14.6:1
#0f5578 market sky the analytical side 8.1:1
#8a5a06 gold ink gold that has to be read 5.9:1
#f7b72d gold primary accent / CTAs 1.8:1 — FILL ONLY
#f4eef7 lilac paper section washes
#e2d6e8 lilac slate chips and pale fills
#2b0f28 deep plum footer and dark grounds
#c9a6d0 pale lilac highlights
Contrast is load-bearing here, not decoration. Gold is a FILL colour on this
brand and never carries text — the same rule MyGeo's orange and MyBO's amber
both have, for the same reason. Anything that needs to be read runs in the
plum, or in the gold ink, which is a different colour with a different job.
The primary CTA is the one place the two meet: gold fill with deep-plum text,
at 9.8:1, which is how the badge itself reads and well clear of the floor.
White on gold would be 1.8:1 and is never used.
Run `php docs/contrast.php` after any palette edit.
Loaded last in the layout so it wins on specificity ties.
========================================================================== */
/* ---------------------------------------------------------------------------
SELECTOR NOTE — read before editing either token block below.
warm-theme.css declares its palette under `:root[data-theme="warm"]`, which is
specificity (0,2,0). A bare `[data-theme="warm"]` is (0,1,0) and LOSES to it no
matter which file the browser loads last. Both blocks here therefore have to
carry `:root` as well, or they are dead rules that compute to turquoise.
This is not hypothetical: it is exactly what shipped on the site this was
forked from. Until that audit --brand computed to the inherited turquoise and
every border with it, so the site's own palette only ever reached the
components that set literal hex values.
--------------------------------------------------------------------------- */
:root,
:root[data-theme="warm"] {
/* brand ramp — gold through to the Explorer plum the site uses for headings */
--brand: #f7b72d;
--brand-100: #ecf0f9;
--brand-200: #e3e9fa;
--brand-300: #fbdd9e;
--brand-400: #fbc757;
--brand-500: #f7b72d;
--brand-600: #e3931b;
--brand-700: #7a2a76;
--brand-800: #3a1136;
--brand-900: #5c1c58;
/* accents */
--accent: #5c1c58;
--accent-2: #0f5578; /* market sky — the palette’s second accent, readable at 8.1:1 */
--accent-3: #c9a6d0;
/* THE EXPLORER PURPLE, and where it came from.
------------------------------------------------------------------
Sampled off the Economics Explorer badge itself — the deer roundel in
the header and the home hero. Quantised, the mark is #602060 and
#902080 over #f0c060: a violet-magenta plate, a gold deer, and nothing
else. The gold on it is within a shade of this site's own --brand-500,
which is why the two sit together without either being retuned.
The palette had no purple at all until now. It was built off the MyEO
wordmark — navy letters, gold bars, a sky trendline — and the badge that
names the whole competition was the one brand asset it did not read. The
ground is now that badge's violet, and the ink stays navy.
KEEPING CLEAR OF MyCLO. The sibling table in the README lists MyCLO as
"plum and rose, on lilac paper", so purple is not a free colour in this
family. Three things hold them apart and all three are load-bearing:
this violet is the badge's magenta-violet rather than a plum; the ink
over it stays Explorer plum with gold CTAs, not plum and rose; and the
ornament layer is still the ledger and the plot. Change any of those
three and the two sites start to converge. */
--plum-900: #45163f; /* deepest — ink on lilac fills */
--plum-700: #6a2168; /* the badge plate */
--plum-500: #9a2183; /* the badge magenta */
--plum-200: #ddc9db; /* lilac fill */
--plum-050: #f4eef7; /* lilac paper */
/* Retargeted onto the violet ground: these are the pale fills behind chips,
count pills and spec cards, and on ice they now read as a leftover blue. */
--water: #e2d6e8;
--water-soft: #f4eef7;
/* Link ink. Gold is a FILL colour on this brand, never a text colour:
--brand is 1.78:1 on white and --brand-600 only 2.48:1, so neither is
within reach of body copy at any weight. Links and the active nav
item run in the Explorer plum instead, which measures 11.92:1 and is the
colour the palette opens on. */
--link: #5c1c58;
--link-hover: #3f1039;
/* Inherited names that only warm-theme.css declares, retargeted here so no
rule downstream can reach back into the turquoise ramp. */
--teal: #f7b72d; /* accent hairlines, ring progress arc */
--gold: #0f5578; /* kept name → market sky */
--violet: #5c1c58; /* kept name → Explorer plum */
--pink: #e3931b;
--muted: #545b70; /* 6.8:1 on white, clear of the AA floor */
--brand-glow: rgba(43, 15, 40, .14); /* navy shadow, not a sky halo */
/* Gradients. --grad-title is what paints the second half of every section
heading ("Intro|duction"), via `.section-title .grad` in redesign.css at
(0,2,0) — which outranks this file's own `.grad` rule, so the token is the
only place the fix can live. */
--grad-brand: linear-gradient(135deg, #f7b72d 0%, #e3931b 100%);
--grad-gold: linear-gradient(135deg, #f7b72d, #0f5578);
/* The tail was #5c1c58 (--accent) until it was measured against the text it
paints. A gradient from a saturated warm gold to a dark COOL colour has to
cross the neutral axis to get there, so the middle of the ramp lands on
desaturated olive-grey. On a short accent the dark end never arrives and it
looks fine; on a long one — "Explorer" in the 64px hero lockup — the last
letters sit right in the crossing and read as mud rather than as a colour.
The tail is #7a2a76 (--brand-700) now: same job, same brand, but analogous to
the gold, so the ramp stays chromatic end to end and never passes through
grey. The 3px rule on .eo-facts keeps the old cool sweep on purpose —
a hairline reads as a colour sweep, not as text. */
--grad-text: linear-gradient(92deg, #e3931b 0%, #f7b72d 45%, #7a2a76 100%);
--grad-title: linear-gradient(92deg, #e3931b 0%, #f7b72d 45%, #7a2a76 100%);
}
/* Footer. warm-theme.css ends the page on a teal ink panel with a turquoise
accent — the sibling sites' colours, and the last thing a visitor sees. On the
MyEO palette it is deep plum with the gold accent, so the page closes in the
same colours it opened in.
Set through `:root[data-theme="warm"]`, not the plain `[data-theme="warm"]`
above: warm-theme.css declares these under that same compound selector, which
out-specifies a bare attribute selector no matter which file loads last. */
:root[data-theme="warm"] {
--footer-bg: linear-gradient(165deg, #2b0f28 0%, #1b0819 100%);
--footer-text: #f4ecf3;
--footer-muted: #cba9c7;
--footer-border: rgba(255, 255, 255, .14);
--footer-accent: #f7b72d;
}
/* Light theme — the Explorer badge's violet paper, not the ice one it opened on.
`:root` prefix required; see the selector note above. */
:root[data-theme="warm"] {
--bg: #faf8fc;
--bg-2: #efe7f3;
--surface: #ffffff;
--surface-2: #f2edf6;
--surface-3: #e6dcec;
/* The --bg-9xx ramp is warm-theme's aqua-white stack, and redesign.css builds
the fallback page backdrop out of it. Retargeted to the violet wash so the
backdrop is on-palette even before this file's own body rules apply. */
--bg-950: #faf8fc;
--bg-900: #ece2f0;
--bg-850: #e0d2e6;
--text: #1d1120;
--text-soft: #4b3d4b;
--text-mute: #5e4d5c; /* 5.4:1 on white — the palest ink allowed to carry copy */
--border: rgba(69, 22, 63, .14);
--border-strong: rgba(69, 22, 63, .28);
}
/* =============================================================================
THE SURFACE LANGUAGE — outlined, flat, cast on a hard plate
=============================================================================
Every card, panel, chip, tab and button on this site is built from the four
tokens below. Change them here and the whole site changes; that is the point
of them being here rather than repeated down the file.
WHERE IT COMES FROM. The Economics Explorer badge — the deer roundel in the
header, the mark that names the competition — is drawn in exactly one way:
flat colour, a heavy dark outline, no gradient anywhere in it, and no glow.
The interface it sat on was drawn the opposite way in every respect: 28px
radii, pale gradient fills, translucent glass, and wide blurred drop shadows
at very low opacity. The badge and the page it sits on now agree.
THE FOUR RULES, and none of them is decoration:
1. FLAT FILLS. A card is one colour. Every `linear-gradient` that was
painting a surface has gone; the ones that remain are painting a MARK —
the cohort strip's segments, the primary button, the gold flags — where
the gradient is the thing being drawn rather than the paper under it.
2. A VISIBLE OUTLINE. 2px, not 1px. A hairline reads as a seam between two
similar tones; 2px reads as a drawn edge, which is what the badge has.
Ordinary surfaces take --eo-edge; the ones that have to be found without
reading take --eo-edge-ink, the full navy.
3. A HARD CAST, NEVER A BLUR. `4px 4px 0` — an offset plate with no blur
radius at all. This is the single biggest departure and the one that does
most of the work: a blurred shadow says "floating above the page", and
every interface drawn in the last five years says it. A hard cast says
"printed, one layer over another", which is what a competition paper is.
4. SMALL RADII. 6px on surfaces, 4px on the small ones. Pills stay pills —
999px on chips and buttons — because a pill is a shape, not a rounded
rectangle, and the badge has plenty of them.
HOVER LIFTS OFF THE PLATE. The card moves up and left by 2px while its cast
grows to 6px, so the gap between card and cast opens. Nothing fades, nothing
blurs, nothing scales. Suspended under prefers-reduced-motion, where the cast
still grows but the card stays put.
THE CAST IS VIOLET, not black or navy. It is the ground's own colour at low
alpha, so on the lilac page it reads as the card lifting off the paper rather
than as a grey smear laid on top of it. */
:root[data-theme="warm"] {
/* The one radius, and its small sibling. Overriding redesign.css's ramp
(12 / 18 / 28) rather than dodging it, so every inherited component that
reaches for --r-md follows without being listed here. */
--r-sm: 4px;
--r-md: 6px;
--r-lg: 8px;
--eo-r: 6px;
--eo-r-sm: 4px;
--eo-line: 2px;
/* Outlines. .30 is the lightest an edge can be and still read as drawn
rather than as a join; the ink is for the cards that carry the section. */
--eo-edge: rgba(69, 22, 63, .42);
--eo-edge-strong: rgba(69, 22, 63, .68);
--eo-edge-ink: #5c1c58;
/* The cast. Zero blur in every one of these — if a blur radius ever appears
in one, the whole system stops being this system. */
--eo-cast: rgba(69, 22, 63, .22);
--eo-cast-2: rgba(69, 22, 63, .32);
--eo-drop: 4px 4px 0 var(--eo-cast);
--eo-drop-lift: 6px 6px 0 var(--eo-cast-2);
--eo-drop-sm: 3px 3px 0 var(--eo-cast);
--eo-drop-ink: 4px 4px 0 rgba(69, 22, 63, .22);
/* redesign.css's blurred shadow ramp, retargeted so anything still reaching
for --shadow or --shadow-md casts a plate instead of a cloud. */
--shadow-sm: 3px 3px 0 var(--eo-cast);
--shadow: 4px 4px 0 var(--eo-cast);
--shadow-md: 4px 4px 0 var(--eo-cast);
--shadow-lg: 6px 6px 0 var(--eo-cast-2);
}
/* ---- The panel ------------------------------------------------------------
.gx-glass is the shared surface: every page's big panels are one. The name is
now a lie — there is no glass left in it, no blur and no translucency — and it
is kept because it is on seven templates and renaming it would be a diff with
no reader. What it means here is "the site's panel". */
[data-theme="warm"] .gx-glass {
background: var(--surface);
border: var(--eo-line) solid var(--eo-edge);
border-radius: var(--eo-r);
box-shadow: var(--eo-drop);
/* the inherited blur cost a compositor layer on every panel and, with an
opaque fill above it, blurred nothing */
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Panels do not lift. Only things a visitor can click do — a page whose every
panel moves under the cursor reads as loose. */
[data-theme="warm"] .gx-glass:hover {
border-color: var(--eo-edge);
box-shadow: var(--eo-drop);
}
/* …except the ones that are themselves links. */
[data-theme="warm"] a.gx-glass:hover,
[data-theme="warm"] a.gx-glass:focus-visible {
border-color: var(--eo-edge-strong);
box-shadow: var(--eo-drop-lift);
transform: translate(-2px, -2px);
}
/* ---- Buttons --------------------------------------------------------------
Same construction as a card, at pill radius: flat fill, drawn edge, hard cast.
The primary keeps its gold gradient — that one IS the mark, it is how the
logo's bars are drawn, and it is the pairing contrast.php checks. */
[data-theme="warm"] .btn {
border: var(--eo-line) solid var(--eo-edge-ink);
box-shadow: var(--eo-drop-ink);
transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
[data-theme="warm"] .btn:hover,
[data-theme="warm"] .btn:focus-visible {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 rgba(69, 22, 63, .28);
filter: none;
}
[data-theme="warm"] .btn:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 rgba(69, 22, 63, .22);
}
[data-theme="warm"] .btn-ghost {
background: var(--surface);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
[data-theme="warm"] .btn-ghost:hover { background: var(--plum-050); }
/* ---- Chips ----------------------------------------------------------------
The eyebrow over every section title, and every count and label pill that
follows its shape. Pill radius, drawn edge, small cast. */
[data-theme="warm"] .eyebrow {
color: var(--accent);
background: var(--surface);
border: var(--eo-line) solid var(--eo-edge);
box-shadow: var(--eo-drop-sm);
}
@media (prefers-reduced-motion: reduce) {
[data-theme="warm"] .btn,
[data-theme="warm"] a.gx-glass { transition: none; }
[data-theme="warm"] .btn:hover,
[data-theme="warm"] .btn:focus-visible,
[data-theme="warm"] .btn:active,
[data-theme="warm"] a.gx-glass:hover,
[data-theme="warm"] a.gx-glass:focus-visible { transform: none; }
}
/* The page backdrop: the Explorer badge's violet paper, palest at the head and
settling into a deeper lilac, so the badge's own colour reads across the whole
page rather than only inside the roundel in the header. */
/* …and the sheet that was covering it.
warm-theme.css paints `body::before` — fixed, inset:0, z-index:-3, opacity:1 —
with four turquoise/aqua blooms over an opaque aqua-white gradient. That is a
LAYER ABOVE the body's own background, so the warm wash directly above was
computed correctly and then hidden on every page. It is the single reason the
site read as turquoise despite an orange-and-navy component set.
Repainted rather than removed: the ambient field is what stops the page feeling
like a flat wall, and it is worth keeping — in the right colours. Ice paper
at the top corners, a gold bloom low and right, over the pale base. The 40s
drift is inherited and already suspended under prefers-reduced-motion. */
/* ============================================================================
THE GROUND — a plum wash, and paper grain over it. Nothing else.
============================================================================
There are no drawings on the background any more. Not a scatter, not drifting
marks, not margin figures. What is behind the words is paper.
WHY, after all the work that went into those. The motif was right — a ledger,
a plotted series, a crossing — and each layer was defensible on its own. The
trouble was that there were three of them at once, tuned separately and never
judged together: a tiled scatter, ~28 drifting canvas marks and a haze of
tally specks, all behind body copy. Every attempt to calm it treated a
symptom — fewer marks, lower alpha, a wider tile, a mask, a white sheet under
the stages row. The honest read is that a competition site does not need
anything behind its text, and this one has a badge, a plum ground and a set of
outlined cards to carry its identity. The motif still appears where it is
attached to something: the ruled bands in the hero, the seam and baseline on
every tinted band, the coins in their corners, the tally rail in the footer.
WHAT REPLACED IT. Fractal noise from an SVG filter, tiled at 180px and held at
very low opacity. It is a texture rather than an image: at this strength you
cannot see a grain, you can only tell that the surface is not flat. That is
the point — it makes the ground read as stock rather than as a screen, which
is the same argument the outlined cards and their hard cast are making.
IT IS PAINTED, NOT DOWNLOADED. The whole thing is one data URI and one
gradient, so the ground costs no request, no image file and no script. What it
replaced was 24 KB of JavaScript running a requestAnimationFrame loop on every
page for the life of the visit.
baseFrequency .9 with 4 octaves gives a fine, even grain with no visible
repeat at 180px. Coarser than that and the tile starts to show; finer and it
disappears into the display's own pixel grid on a high-DPI screen. */
[data-theme="warm"] body {
background:
radial-gradient(1100px 620px at 12% -8%, #f2eaf6 0%, rgba(242, 234, 246, 0) 62%),
radial-gradient(900px 520px at 92% 4%, #f6eff7 0%, rgba(246, 239, 247, 0) 58%),
linear-gradient(180deg, #faf8fc 0%, #f1e9f4 46%, #e9dcee 100%);
background-attachment: fixed;
}
/* The wash sheet that warm-theme.css paints — emptied out. It is a fixed,
inset-0, z-index -3 layer, and leaving it painting anything would put a second
ground under the one above. The rule stays rather than being deleted because
warm-theme.css sets four turquoise blooms on it, and without something here
those come back. */
[data-theme="warm"] body::before {
background: none;
opacity: 1;
}
/* The motif — irregular inside the tile, and drifting.
---------------------------------------------------------------------------
THIS IS THE THIRD ARRANGEMENT AND THE OTHER TWO ARE WORTH NAMING, because it
sits deliberately between them.
Random placement came first: figures at random positions, random sizes, three
parallax depths, with a canvas drifting more over the top. At that density
randomness does not read as decoration, it reads as noise.
A strict grid came second — four icons, one per quadrant, identical size and
weight. That fixed the noise and bought a new problem: rows and columns. A
page ruled into squares reads as regimented, and the eye finds the lattice
before it finds anything else.
So: irregular WITHIN the tile, regular in how the tile repeats. Five icons at
unaligned positions, each rotated a few degrees off square and at two sizes,
so nothing lines up with anything. The tile still repeats on a fixed grid —
that is what keeps it calm — but there is no visible row, column or diagonal
inside it to find.
TWO LAYERS AT DIFFERENT SCALES, drifting opposite ways. One tile at 300px and
the same tile at 220px, offset from each other and moving in opposite
directions at different speeds. Two repeats whose periods do not divide into
each other never re-align in any position a visitor will see, so the field
reads as unrepeating even though both halves of it repeat perfectly. It is
also the cheapest parallax there is: two elements, no script.
THE DRIFT IS IN TRANSFORM, NOT background-position. Both layers are inset by
-12% so they overhang the viewport, and each translates by exactly one tile
width before looping — so the loop is seamless and the browser composites it
on the GPU instead of repainting a full-viewport background every frame.
90s and 140s. Slow enough that nothing appears to move while you are reading
and only a returning eye notices the field has shifted, which is the whole
idea of a float. */
:root[data-theme="warm"] {
--eo-motif: url("data:image/svg+xml,");
--eo-grain: url("data:image/svg+xml,");
}
/* Layer one — the larger repeat, drifting up and left. */
[data-theme="warm"] body::before {
content: "";
position: fixed;
inset: -12%;
z-index: -3;
pointer-events: none;
background-image: var(--eo-motif);
background-size: 300px 300px;
opacity: .5;
mix-blend-mode: multiply;
animation: eo-float-a 90s linear infinite;
}
/* Layer two — the smaller repeat drifting the other way, with the grain over
it. The grain tile matches this layer's travel so it loops seamlessly too. */
[data-theme="warm"] body::after {
content: "";
position: fixed;
inset: -12%;
z-index: -2;
pointer-events: none;
background-image: var(--eo-grain), var(--eo-motif);
background-size: 220px 220px, 220px 220px;
background-position: 0 0, 70px 130px;
opacity: .42;
mix-blend-mode: multiply;
animation: eo-float-b 140s linear infinite;
}
/* One tile width each, so the frame the loop restarts on is identical to the
one before it and there is no jump. */
@keyframes eo-float-a {
to { transform: translate3d(-300px, -300px, 0); }
}
@keyframes eo-float-b {
to { transform: translate3d(220px, -220px, 0); }
}
/* The drift carries nothing. The pattern stays. */
@media (prefers-reduced-motion: reduce) {
[data-theme="warm"] body::before,
[data-theme="warm"] body::after { animation: none; }
}
/* A turbulence fill and a motif grid are a page of grey toner for nothing. */
@media print {
[data-theme="warm"] body::before,
[data-theme="warm"] body::after { display: none; }
}
/* Gradient text used for the second half of most headings. */
.grad-text,
.grad {
background: linear-gradient(92deg, #e3931b 0%, #f7b72d 45%, #7a2a76 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Primary CTA — amber fill, navy text, which is how the live buttons read. */
[data-theme="warm"] .btn-primary {
background: linear-gradient(135deg, #f7b72d 0%, #dea425 100%);
border-color: #e3931b;
color: #2b0f28;
}
[data-theme="warm"] .btn-primary:hover {
background: linear-gradient(135deg, #fdce6a 0%, #e6a720 100%);
color: #101421;
}
/* The accent line along the top edge of the header. The base stylesheet paints it
with --grad-brand, which this file never retargets (the primary CTA is overridden
directly instead), so it was still running the inherited turquoise — identical to
MyBO's, since both sites inherit the same ramp. Retargeted here onto the MyEO
palette: navy through sky into gold, the site's three inks in the order the
palette lists them, so the sites are told apart at the first pixel of the page. */
[data-theme="warm"] .site-header::before {
background: linear-gradient(135deg, #5c1c58 0%, #0f5578 45%, #f7b72d 100%);
}
/* ---- Navigation chrome ------------------------------------------------------
warm-theme.css paints all four of these in `rgba(245, 250, 252)` / `#f5f8fe` — a
turquoise-tinted white. Against the cream page above they read visibly cool, so
they are restated here on the warm white the rest of the site uses. */
[data-theme="warm"] .site-header { background: rgba(251, 252, 254, .78); border-bottom-color: var(--border); }
[data-theme="warm"] .site-header.scrolled { background: rgba(251, 252, 254, .96); box-shadow: var(--shadow-sm); }
[data-theme="warm"] .dropdown { background: rgba(251, 252, 254, .99); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* The header runs wider than the 1180px reading column.
MyEO's nav is comfortably inside it — four top-level items, one of them a
menu — so the extra width is headroom rather than a fix. It is kept because
the row it has to hold is not the row an editor leaves it as: every menu item
is behind page_visible(), and a longer label typed at /admin lands here. The
reading column stays at 1180: prose does not want to be wider, and only the
header ever has this problem.
white-space: nowrap is the other half. A flex row that has run out of width
wraps INSIDE the words — "Registratio / n" — which is how the miss showed up
both times it happened on the sibling site this was forked from. With nowrap a
future miss overflows instead, which is at least legible as a bug rather than
looking like a design. */
.site-header > .container { max-width: 1320px; }
.nav-links > li > a { white-space: nowrap; padding-inline: 12px; }
@media (min-width: 1200px) and (max-width: 1439px) {
/* A gentle tightening, not the squeeze this inherited. On the sibling site
the row held eight items and needed 7px padding at .86rem plus a shrunken
CTA to fit. Four items fit here with room to spare, so this only takes the
edge off — and it is what absorbs a longer label before the nowrap above
has to. */
.nav-links > li > a { padding-inline: 11px; }
}
/* A .dropdown-rule lived here on the sibling site: a hairline dividing one menu
where it stopped listing one page's anchors and started listing another page.
The single menu here lists six pages of one subject, so there is nothing to
divide and the rule went with the arrangement that needed it. */
@media (max-width: 1199px) {
/* the open burger menu is a full overlay panel — fully opaque, or the hero
ghosts through it */
[data-theme="warm"] .nav-links { background: #f9fafd; border-bottom-color: var(--border-strong); }
}
/* Scroll-to-top. This kept warm-theme's flat turquoise (#e3931b) — it was the last
piece of the sibling palette still visible on every page after a scroll. */
[data-theme="warm"] .to-top {
background: linear-gradient(140deg, #f7b72d, #dea425);
border-color: #e3931b;
color: #2b0f28;
box-shadow: var(--shadow-md);
}
[data-theme="warm"] .to-top:hover { background: linear-gradient(140deg, #fdce6a, #e6a720); }
/* ---- Link ink --------------------------------------------------------------
Every one of these rules previously resolved to --brand-600. While that token
was still the inherited teal it passed contrast by accident; retargeting it to
the MyEO gold (#e3931b) would have left every body link and the active nav
item sitting on the AA floor rather than clear of it. So text links take --link
(the Explorer plum, 11.92:1) and gold stays a fill colour.
Selectors mirror warm-theme.css exactly rather than out-specifying it — this
file loads last, so an equal-specificity rule wins, and keeping them identical
means a future edit there is easy to find here. */
[data-theme="warm"] .nav-links a:hover { color: var(--link-hover); background: var(--surface-2); }
[data-theme="warm"] .nav-links a.active { color: var(--link); }
[data-theme="warm"] .gx-glass a:not(.btn) { color: var(--link); }
[data-theme="warm"] .gx-glass.prose a:not(.btn),
[data-theme="warm"] .gx-glass .prose a:not(.btn) { color: var(--link); }
[data-theme="warm"] .step-row a { color: var(--link); }
/* Prose links are UNDERLINED, and that is not decoration.
The link colour is the Explorer plum (#5c1c58) and body copy is --text-soft
(#414757). Those two measure 1.48:1 against each other — WCAG asks 3:1 before
colour alone may distinguish a link, and 1.48 is not close. Without a second
signal the IEO link in the About introduction, and every link inside an FAQ
answer, are invisible until the pointer happens to cross one.
Darkening the link is not the fix: it is already nearly black, and pulling the
body text lighter to make room would cost the paragraph's own contrast.
The underline is drawn in GOLD under navy text, which does two things at once:
it is unmistakable at a glance, and it uses the gold the way this palette
allows gold to be used — as a mark rather than as type. The same reason the
registration steps have underlined their links all along. */
[data-theme="warm"] .prose a:not(.btn) {
color: var(--link);
text-decoration: underline;
text-decoration-color: rgba(247, 183, 45, .55);
text-decoration-thickness: 2px;
/* clear of descenders — an underline through a 'g' is harder to read than
no underline at all */
text-underline-offset: 3px;
transition: color .2s ease, text-decoration-color .2s ease;
}
[data-theme="warm"] .prose a:not(.btn):hover,
[data-theme="warm"] .prose a:not(.btn):focus-visible {
color: var(--link-hover);
text-decoration-color: var(--brand);
}
@media (prefers-reduced-motion: reduce) {
[data-theme="warm"] .prose a:not(.btn) { transition: none; }
}
/* Widows: no heading left with one word on its last line.
---------------------------------------------------------------------------
redesign.css already balances .section-title, the hero titles and the h2/h3
inside a glass panel. That covers the headings the sibling sites had and
misses the ones this site added: the FAQ questions (long, and many of them
end on "…Economics Explorer Competition?", which lands alone), the stage and
legend names that end in a bracketed acronym, and the card headings on the
home page.
`balance` for headings — it evens the line lengths, which is what pulls the
last word back up. `pretty` for the leads and body copy, which is the value
built for this exact problem: it leaves the line breaking alone except to
avoid a short final line.
Both are progressive: a browser without them breaks lines as it always did.
Neither can fix a heading whose last word is longer than the space left on
the line before it — those are down to the wording. */
h1, h2, h3,
.eo-step-name, .eo-legend-name, .faq-q, summary h2 {
text-wrap: balance;
}
p.lead, .prose p, .eo-head-text p {
text-wrap: pretty;
}
/* Sub-headings inside rich text.
The IEO 2025 write-up runs to three of them ("Silver Medallists", "Bronze
Medallists" and "The Australasian Economics Olympiad"), and 2024 to two.
They are h3, one level under the h2 the write-up opens on; upstream sets them
as bold paragraphs, which are headings to a reader and nothing at all to a
screen reader.
Both levels are listed so that moving one does not silently drop its styling —
redesign.css sets .prose h3 in the sibling sites' navy at 1.25rem and has no
rule for h4 at all, which meant an h4 drew at bold body size, indistinguishable
from a paragraph that already bolds every name in it.
Sized just under .prose h3's 1.25rem and set in the Explorer plum rather than
that navy — the whole palette moved and these headings should not be the one
thing still pointing back at it. */
[data-theme="warm"] .prose h3,
[data-theme="warm"] .prose h4 {
color: var(--brand-900);
font-size: 1.12rem;
letter-spacing: -.005em;
/* Asymmetric on purpose: a heading belongs to what follows it, so the space
above it has to be clearly larger than the space below, or it reads as a
caption on the paragraph it has just ended. */
margin: 1.7em 0 .45em;
}
/* the small-caps tagline under the wordmark — orange at 10px was the worst
offender on the page for size and contrast together */
[data-theme="warm"] .brand-sub { color: var(--accent); }
/* The eyebrow chip above each page title. */
[data-theme="warm"] .eyebrow {
background: var(--water-soft);
border-color: rgba(69, 22, 63, .22);
color: #5c1c58;
}
/* Section headings sit in the Explorer plum rather than the inherited teal. */
[data-theme="warm"] h1,
[data-theme="warm"] h2,
[data-theme="warm"] h3 {
color: #2b0f28;
}
/* …but not on the dark surfaces. The rule above is a bare element selector, so it
ties with `.footer h2` on specificity and wins only because this file loads
last — which painted EXPLORE / GET IN TOUCH / FOLLOW US navy on the dark
footer panel, where they were all but invisible. The footer keeps its own ink. */
[data-theme="warm"] .footer h2,
[data-theme="warm"] .footer h3 { color: var(--footer-text); }
/* Panel fill. Flat, and one line rather than a gradient: see THE SURFACE
LANGUAGE near the top of this file for why nothing here fades any more. The
edge and the cast are set there too; this rule owns the colour only. */
[data-theme="warm"] .gx-glass {
background: var(--surface);
}
/* The icon chips on tiles. */
[data-theme="warm"] .gx-icon {
background: linear-gradient(140deg, var(--a, #f7b72d) 0%, rgba(69, 22, 63, .85) 130%);
color: #fff;
}
/* ---- Page-level helpers shared across the site ----------------------------- */
/* Two-column "label | value" tables used for the competition format, categories
and award bands. Plain definition rows, not a full table widget. */
.kv-list { display: grid; gap: 10px; margin: 0; }
.kv-row {
display: grid;
grid-template-columns: minmax(140px, 34%) 1fr;
gap: 8px 18px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { font-weight: 700; color: #5c1c58; margin: 0; }
.kv-row dd { margin: 0; color: var(--text-soft); }
@media (max-width: 560px) {
.kv-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
}
/* Numbered step list — Galaxy's timeline, in MyEO's colours: numbered discs
threaded on a vertical rail, one plain paragraph of text hanging off each.
Nothing on this site uses it today: MyEO has no registration page, so the
steps it was written for live on the sibling sites. Kept rather than deleted
because it is the shape any "do this, then this" section on this site would
want, and re-deriving it costs more than carrying it.
Everything the earlier version did to a step is gone. No bold title with a
muted detail beside or beneath it: at two weights and two columns, a step
with no detail read as a different kind of row from one that had a detail,
and the panel filled with ragged half-width blocks. Set as one sentence at
one weight, every row is the same shape and the rail carries the sequence. */
.step-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 20px;
counter-reset: step;
line-height: 1.65;
color: var(--text-soft);
}
.step-list li {
counter-increment: step;
position: relative;
padding-left: 52px;
min-height: 32px;
}
.step-list li::before {
content: counter(step);
position: absolute;
left: 0; top: -3px; /* centres the disc on the first line of text */
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #f7b72d 0%, #dea425 100%);
color: #2b0f28;
font-weight: 800;
font-size: .95rem;
}
/* the two things a step marks up: the buttons and menu items to look for, and
the address to go to. Both are darker than the surrounding line, since that
line is set in the soft body colour. */
.step-list strong { color: var(--text); font-weight: 700; }
.step-list a {
color: #5c1c58;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: color .2s ease;
}
.step-list a:hover, .step-list a:focus-visible { color: #e2a41d; }
/* sub-actions inside a step: own line, arrow hanging in the margin so a wrapped
one lines up with the text above it rather than with the arrow */
.step-list .step-sub {
display: block;
margin-top: 2px;
padding-left: 1.35em;
text-indent: -1.35em;
}
.step-list .step-sub::before {
content: "→";
display: inline-block;
width: 1.35em;
text-indent: 0;
color: #e2a41d;
}
/* the rail: disc centre is 16px in, so a 2px line sits at 15px. It runs from
the bottom of this disc to the top of the next one (20px gap, less the 3px
the disc is raised by), and the last step has none to run to. */
.step-list li:not(:last-child)::after {
content: "";
position: absolute;
left: 15px;
top: 34px;
bottom: -17px;
width: 2px;
border-radius: 1px;
background: linear-gradient(180deg, rgba(247, 183, 45, .45), rgba(247, 183, 45, .14));
}
/* the panel around it: capped so the lines keep a readable measure, centred in
the section, and — with the heading gone — holding only the steps */
.step-panel { max-width: 880px; margin-inline: auto; }
/* The mark over a results-page hero. redesign.css sets .badge-mini to 88px, which
suits the sibling sites' round badges — but the MyEO mark is a landscape
speech bubble with lettering inside it, and at 88px the lettering is a smudge.
--wide gives it the width the letters need, capped against the viewport.
200px, down from 260. At 260 the mark was the largest thing in the hero and
outweighed the h1 below it, which is the page's actual title; the eyebrow and
the heading between them already say what competition this is, so the mark is
identifying a page the reader has arrived at rather than announcing it. The
floor is the strapline inside the artwork — below about 180px "Malaysian
Economics Olympiad" stops resolving, and that line is not repeated anywhere
else in the hero. */
.page-hero .badge-mini { height: auto; }
.page-hero .badge-mini--wide { width: min(200px, 58vw); }
/* ---- Explorer → MyEO lockup ----------------------------------------------
The competition badge feeding the olympiad it leads into, over the copy that
describes that route — the siblings' .about-lockup, in MyEO's colours. */
.about-lockup {
/* One place the plate height is written, because three rules need to agree
on it: the plate itself, and the arrow that has to sit on the plate's
centreline rather than on the row's. */
--al-plate-h: clamp(120px, 13vw, 168px);
display: flex;
/* flex-start, not center. The two captions wrap to different numbers of
lines — "Economics Explorer Competition" fits on one, "Malaysian
Economics Olympiad" may take two — so centring the row
centres two figures of different heights and the PLATES come out on
different lines. Topped, the plates align and the captions hang below at
whatever height they need. */
align-items: flex-start;
justify-content: center;
gap: clamp(14px, 2.6vw, 34px);
margin-bottom: clamp(22px, 3vw, 34px);
}
/* The figure is exactly as wide as its plate, and the caption wraps inside it.
It used to be `flex: 0 0 auto` with no width, so each figure sized to its
widest child — which is the caption, not the plate. "MALAYSIAN ECONOMICS
OLYMPIAD" is 28 characters on one line, so that figure came out far wider
than the 264px plate it held, and the plate sat against its left edge. `text-align: center` did not help: it centres inline content, and a
plate with a set width is a block.
Two things came out of fixing it rather than one. The plate is centred under
its caption, and both figures are now the same width — before, the two
captions were different lengths, so the pair was lopsided around the arrow
between them. */
.al-item {
flex: 0 0 auto;
width: clamp(190px, 21vw, 264px);
margin: 0;
text-align: center;
}
/* One shared plate height, so the square badge and the wide wordmark sit on the
same line. One box for both, not one per artwork: the plates used to be sized
height-led with width:auto, so each came out as wide as its own logo — a
square badge in a narrow plate beside a 2:1 wordmark in a wide one, which read
as two different kinds of card rather than as a pair.
The logo is fitted inside the box instead (max-width and max-height, never
stretched), so the square one fills the height, the wide one fills the width,
and both sit on identical plates. */
.al-plate {
width: 100%;
height: var(--al-plate-h);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(14px, 1.8vw, 22px);
border-radius: var(--eo-r);
background: var(--surface);
border: 1px solid rgba(69, 22, 63, .12);
box-shadow: var(--eo-drop);
}
.al-plate img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.al-cap {
margin: 10px 0 0;
font-weight: 700;
font-size: .72rem;
/* Tightened from .14em. The caption now wraps to the plate's width rather
than running on one line, and at 44 characters over two or three lines the
wider tracking was costing a whole extra line. */
letter-spacing: .1em;
line-height: 1.45;
text-transform: uppercase;
color: var(--text-soft);
text-wrap: balance;
}
/* the connector: a dashed trail running toward MyEO, ending in a gold chip.
Pushed down to the plates' centreline and then pulled back by half its own
height, so it lands on that line whatever height it happens to be. Doing it
with align-items on the row instead would put it in the middle of the tallest
FIGURE — caption included — which is about 26px below the plates. */
.al-arrow {
flex: 1 1 auto;
max-width: 190px;
min-width: 54px;
display: flex;
align-items: center;
gap: 8px;
margin-top: calc(var(--al-plate-h) / 2);
transform: translateY(-50%);
}
.al-trail {
flex: 1 1 auto;
height: 3px;
border-radius: 999px;
background: repeating-linear-gradient(90deg, #e3931b 0 9px, transparent 9px 18px);
background-size: 18px 100%;
animation: al-flow 1.1s linear infinite;
}
.al-tip {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
/* dark ink on orange, as everywhere else on this palette — white on #f7b72d is
nowhere near readable at an 18px glyph */
color: #2b0f28;
background: linear-gradient(135deg, #f7b72d 0%, #dea425 100%);
box-shadow: var(--eo-drop);
animation: al-nudge 1.7s ease-in-out infinite;
}
@keyframes al-flow { to { background-position: 18px 0; } }
@keyframes al-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes al-flow-down { to { background-position: 0 18px; } }
@keyframes al-nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* the motion is pure decoration — nothing is lost by holding it still */
@media (prefers-reduced-motion: reduce) {
.al-trail, .al-tip { animation: none; }
}
@media (max-width: 760px) {
/* stack the lockup and turn the arrow to point down the column */
.about-lockup { flex-direction: column; }
/* stacked, the plates have the column's full width to share, so they can be
squarer without either logo shrinking — but still the same box as each other */
.al-item { width: min(260px, 78vw); }
.al-plate { height: 132px; }
/* Stacked, the arrow sits between the two plates in the flow, so the
centreline offset above is not just unnecessary — it would push it into
the second plate. */
.al-arrow {
flex: 0 0 auto; max-width: none; min-width: 0;
flex-direction: column; height: 74px;
margin-top: 0; transform: none;
}
.al-trail {
width: 3px;
height: auto;
background: repeating-linear-gradient(180deg, #e3931b 0 9px, transparent 9px 18px);
background-size: 100% 18px;
animation-name: al-flow-down;
}
.al-tip { animation-name: al-nudge-down; }
.al-tip .gx-ico { transform: rotate(90deg); }
}
/* Justified body copy — the About page's introduction and every write-up under
it, the same treatment the home page's introduction gets.
max-width is released because .prose p is otherwise held to a reading measure,
and justifying a column that stops short of the panel edge just looks like a
ragged block that missed. text-wrap:pretty keeps the closing lines from
stranding a single word on its own.
Lists come with it: a justified paragraph beside a ragged list reads as an
inconsistency rather than a distinction.
Justified at EVERY width, phones included. This used to be gated behind
min-width 45em, which meant the About page's write-ups were squared off on a
desktop and ragged on a phone — the same copy set two different ways depending
on the device, which is the inconsistency that gate was meant to prevent.
Hyphens stay OFF, so words are never broken. That is a deliberate choice, not
an oversight — please do not "fix" it by switching hyphens:auto back on.
Know the cost before touching either line. With no hyphenation the only thing
a justified line can stretch is its word spaces, so they open wider than
normal, and the narrower the column the more it shows. hyphens:auto would
tighten that up (it gives the breaker somewhere to break other than a space,
and supplies the language it needs) — it was tried here and
rejected, because whole words were preferred to perfectly even spacing.
So there are two supported states, and mixing them is what to avoid:
justify + hyphens:none <- current: whole words, looser spacing
ragged-right <- the fallback if the spacing is ever too loose
text-wrap:pretty stays either way; with hyphenation gone it is the only thing
left helping the line breaks. */
/* The block takes the panel's full width. No measure cap.
---------------------------------------------------------------------------
ASKED FOR, AND KEPT ON PURPOSE — do not put the cap back without checking.
This was capped at 75ch on the container for a long time, which centred the
write-up inside its panel with a clear margin either side. The reasoning was
the usual one: past about 80 characters the eye starts losing its place on the
return sweep, and justified setting makes that worse rather than better,
because every line ends flush and there is no ragged edge left to navigate by.
The site owner wanted the copy to fill its card, and that is the call being
honoured here.
Note what the cap was NOT doing, in case it looks like the fix for something
else: it was never holding the paragraphs to the panel's padding. `.eo-justify
p` already clears the `--measure` cap that `.prose p` and the `.gx-glass`
fallback set, so removing the container cap lets paragraphs, sub-headings and
lists all range to the same edge — which is the alignment the cap was
originally introduced to protect. That still holds; only the width changed.
The one thing the wide measure does buy back: justification gets EASIER as the
line gets longer, not harder. With hyphens off (see above) the only slack a
line has is its word spaces, and a long line has more of them to spread the
slack across. The ugly case for this block was always the narrow one, which is
why the phone breakpoint further down drops to ragged-right. */
.eo-justify {
margin-inline: auto;
}
.eo-justify p,
.eo-justify li {
max-width: none;
hyphens: none;
text-align: justify;
text-wrap: pretty;
}
/* ---- Fee tiers ------------------------------------------------------------
The live site's registration-fee cards: a filled header naming the tier, the
figure large underneath it, then the two facts that decide the tier — who it
is for and the window it is open — and the button.
Not filled cards with the price on a coloured ground, which is what these
were: at two tiers, colour has nothing left to encode, and a rate is easier
to read as dark text on white than as white text on gold. The colour moves to
the header band, where it separates the tiers without touching the figures. */
.fee-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(16px, 2vw, 26px);
/* stretch, not start: a closed tier carries no Register button and so came out
visibly shorter than the open one beside it. Two rates are two alternatives,
and drawing one of them as a smaller card says something about them that is
not true — it is closed, not lesser. */
align-items: stretch;
}
.fee-card {
position: relative;
display: flex;
flex-direction: column;
/* clips the ribbon's tails to the card's corner */
overflow: hidden;
border-radius: var(--eo-r);
border: var(--eo-line) solid var(--eo-edge);
background: #fafbfd;
box-shadow: var(--eo-drop);
transition: transform .3s ease, box-shadow .3s ease;
}
.fee-card:hover { transform: translate(-2px, -2px); box-shadow: var(--eo-drop-lift); }
/* ---- header: the tier's name on the brand band ----------------------------
Navy into gold, not the navy-into-teal the hue rotation produced. Both ends
were on the palette, but the interpolation between a plum mid and a sky runs
through desaturated grey at the midpoint — which is exactly where the band is
widest, so the header read as muddy rather than as either colour. Navy and gold
are neighbours on the wheel, so the whole band stays in the brand. */
.fee-card-head {
padding: 15px 18px;
background: linear-gradient(160deg, #5c1c58 0%, #b5790f 100%);
text-align: center;
}
/* both selectors: warm-theme.css paints every h3 inside a .gx-glass in the dark
body colours, and this one sits on the dark brand band, where it needs the
light ink instead */
.fee-card-head h3,
[data-theme="warm"] .gx-glass .fee-card-head h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .01em;
color: #fff;
}
/* the corner ribbon on the tier that closes. Rotated through the card's clipped
corner, so it reads as a band laid over the card rather than a label stuck to
it. Earth brown: the header is orange, and the ribbon has to carry across it.
Enlarged from .64rem (~10.2px). This is the only thing on the page telling a
teacher the RM40 rate expires, and at 10px uppercase, tracked out and rotated
45°, it was the least readable text on the site — the exact inverse of its
importance. .8rem is the floor for anything carrying words rather than acting
as a mark; the band grows with it. */
.fee-flag {
position: absolute;
top: 18px;
right: -42px;
width: 168px;
padding: 6px 0;
transform: rotate(45deg);
background: linear-gradient(135deg, #7a2a76 0%, #2b0f28 100%);
color: #fff;
font-size: .8rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
box-shadow: var(--eo-drop);
}
/* Which rate applies today. Exactly one card is ever "current"; a closed one is
drained of colour rather than hidden, so the price history still reads. */
.fee-pill {
align-self: center;
margin-bottom: 12px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(69, 22, 63, .1);
border: 1px solid rgba(69, 22, 63, .28);
color: #5c1c58;
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.fee-pill--muted {
background: rgba(43, 15, 40, .07);
border-color: rgba(43, 15, 40, .16);
color: var(--text-soft);
}
.fee-card.is-ended { opacity: .72; }
/* An ended tier keeps the shape and loses the colour: the same band desaturated
toward the page's own ink, so the row still reads as two cards of one kind
rather than as one card and a mistake. */
/* Flat, like every other fill. Grey rather than plum is the point of it — a
window that has closed should not carry the brand colour — but it was the one
remaining two-stop surface gradient in the file. */
.fee-card.is-ended .fee-card-head { background: #5f5a63; }
/* A closed window does not lift. It keeps its resting cast, which is the
difference between "not interactive" and "interactive but not moving". */
.fee-card.is-ended:hover { transform: none; box-shadow: var(--eo-drop); }
/* ---- body: figure, then what the figure buys ------------------------------ */
.fee-card-body {
/* takes the height the card was stretched to, so the header bands stay level
across the row and the difference falls at the foot of the card */
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
text-align: center;
}
/* the button sits on the card's floor rather than directly under the dates, so the
two cards' buttons line up whatever is written above them */
.fee-card-body .btn { margin-top: auto; }
.fee-price,
[data-theme="warm"] .gx-glass .fee-price {
margin: 0;
font-size: clamp(2.6rem, 4.4vw, 3.4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
color: var(--text);
}
/* the currency rides small and high against the figure, the way a price is set */
.fee-cur {
font-size: .38em;
font-weight: 800;
vertical-align: .95em;
margin-right: .12em;
letter-spacing: 0;
}
.fee-note,
[data-theme="warm"] .gx-glass .fee-note {
margin: 8px 0 0;
font-size: .92rem;
color: var(--text-soft);
}
/* the two facts that pick the tier, ruled apart so neither is skimmed past */
.fee-points {
list-style: none;
width: 100%;
margin: 20px 0 22px;
padding: 0;
display: grid;
gap: 10px;
}
.fee-points li {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding-top: 10px;
border-top: 1px solid var(--border);
font-size: .95rem;
color: var(--text-soft);
}
.fee-points li:first-child { padding-top: 0; border-top: 0; }
.fee-points .gx-ico { flex: 0 0 auto; width: 19px; height: 19px; color: #5c1c58; }
/* Stat counters ("previous competition"). */
/* ============================================================================
SCALE — deliberately none
----------------------------------------------------------------------------
This file used to carry a density pass: section padding, panel padding, the
section title and the ring counters were all retargeted smaller, on the
argument that an Explorer home page runs twelve sections where the inherited
engine assumes three or four.
It is gone, and nothing here should bring it back. The Explorer sites are meant
to read as one family, and every value it overrode is identical in this site's
own redesign.css and in Biology's:
.section clamp(32px, 5vw, 64px) both
.section--tight clamp(22px, 3.5vw, 40px) both
.gx-pad clamp(24px, 3.4vw, 44px) both
.section-title clamp(1.9rem, 4.2vw, 3.1rem) both (--fs-h2)
So the fix for "MyEO looks smaller than Biology" is always to delete an
override here, never to add one. If the page ever needs to be shorter, cut
sections or content — not the scale everything is drawn at.
========================================================================== */
/* the heading block above each section's body: eyebrow chip over title. Matches
Biology's .gx-head (margin 0 auto clamp(26px, 4vw, 44px); eyebrow 14px). */
.eo-head-text .eyebrow { margin-bottom: 14px; }
.eo-head + .lead { margin-bottom: 12px; text-align: center; margin-inline: auto; }
/* A lead directly under a head belongs TO that head — eyebrow, title, rule, then
the sentence — so it closes up to it. .eo-head is spaced for the gap between a
head and the section BODY (clamp(26px, 4vw, 44px), Biology's .gx-head to the
pixel), and at 44px under the rule the sentence read as a stray paragraph
floating above the section rather than as part of the heading.
:has(), as .eo-links already uses: which heads are followed by a lead is a
property of the markup, and a browser without it simply keeps the wider gap. */
.eo-head:has(+ .lead) { margin-bottom: clamp(14px, 1.6vw, 20px); }
/* A sentence set apart inside a lead. The lead is deliberately soft, so its bold
has to be both heavier and darker than the line around it to read as emphasis
rather than as a rendering accident. */
.lead strong { font-weight: 800; color: var(--text); }
/* ---- Section head: eyebrow + title ----------------------------------------
The eyebrow chip above each title is the sibling sites' pattern, so a section
is labelled by kind ("Timeline", "Eligibility") before its name is read. */
.eo-head-text { min-width: 0; }
.eo-head-text .eyebrow { margin-bottom: 10px; }
/* ---- Introduction ----------------------------------------------------------
The paragraph, then the objectives it promises. Nothing else.
This section was the sibling sites' "opening leaf of an edition": a ruled
margin of tally strokes down the left, a dropped initial on the first
paragraph, and the objectives numbered in lower-case roman with the numerals
hanging in their own gutter. It is a careful piece of typography and all
three of its ornaments were borrowed.
A ruled margin and a drop cap belong to a site about reading manuscripts.
The roman numerals were that site's way of keeping its apparatus distinct
from its 01/02 plates — a problem this site does not have, and a solution
that reads here as a numbering style nobody chose.
What the section has to do is state what the competition is and list what it
is for, and the ornament was competing with both: the margin strokes sat
closer to the text than anything else on the page, and a reader met the drop
cap before the sentence.
So: a plain panel, a paragraph at reading size, and a ticked list. The width
cap is the one thing kept from the leaf, and for the reason given below.
Section headings sit on the page field, not inside the panel, and the panel
holds only content — twelve sections each boxing their own title read as a
stack of near-identical cards.
========================================================================== */
/* NARROWER than the container, and that is the one piece of the old leaf worth
keeping.
Every other panel on this page runs the full 1180px because every other panel
holds cards, and cards want width. This one holds a paragraph, and a paragraph
wants a measure — at 1180px it would run to about 110 characters a line, which
is roughly double what anybody reads comfortably.
880px is what makes the text block right. */
.eo-intro {
max-width: 880px;
margin-inline: auto;
border-radius: var(--eo-r);
}
/* The opening paragraph, a size above body copy: this is the first prose on the
page and the only paragraph on it anybody reads start to finish.
No max-width. `.prose` sets 66ch and that is right everywhere else on the site,
but here the PANEL is what holds the measure — capping the paragraph as well
would stop it short of the panel it sits in and leave a stripe of empty card
down its right side, which is what a second measure inside a measured column
always does. One thing sets the width, and it is the thing you can see. */
.eo-lede p {
max-width: none;
font-size: clamp(1rem, 1.05vw, 1.08rem);
line-height: 1.75;
color: var(--text-soft);
}
.eo-lede p + p { margin-top: .85em; }
/* The label over the list, with a hairline running off it to the right. Not a
section title: this sits INSIDE the panel and must not compete with the one
over it. */
.eo-aims-label {
display: flex;
align-items: center;
gap: 14px;
max-width: none; /* a
in a glass panel inherits the 66ch measure */
margin: clamp(24px, 3.2vw, 36px) 0 clamp(16px, 2vw, 22px);
font-size: .76rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.eo-aims-label::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(69, 22, 63, .3), transparent);
}
/* The objectives: a tick, a sentence, a hairline between.
The same shape /about-us uses for its own ticked lists, which is the point —
this site already had a way of setting "a short list of things that are true",
and the Introduction was the one place not using it.
Ticks rather than numerals because the five are a SET, not a sequence: nothing
on the site refers to "objective three", and the moment they are numbered the
question of which numbering style comes back. */
.eo-aims { list-style: none; margin: 0; padding: 0; display: grid; }
.eo-aim {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: clamp(12px, 1.6vw, 16px) 0;
border-top: 1px solid var(--border);
}
.eo-aim:first-child { border-top: 0; padding-top: 0; }
.eo-aim:last-child { padding-bottom: 0; }
/* The tick sits on the first line of its sentence rather than centred on the
block — a two-line objective with a vertically centred mark reads as a mark
between two lines rather than at the head of one. */
.eo-aim-tick {
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-top: -1px;
border-radius: var(--eo-r-sm);
color: var(--accent-2);
background: rgba(247, 183, 45, .16);
border: 1px solid rgba(69, 22, 63, .12);
}
.eo-aim p {
margin: 0;
max-width: none;
color: var(--text-soft);
line-height: 1.6;
align-self: center;
}
/* ---- Feature rows ----------------------------------------------------------
A mark on a tinted tile, a sentence beside it, a hairline between.
Only .eo-feature-ico is still in use, by the two "how to register" rows in
the pricing panel. The row rules themselves are kept because they are the
shape any "a mark, then a sentence" list on this site would want, and because
two sections have already been built out of them and taken back out again —
the Introduction's objectives (now its own ticked list) and the
Benefits section (removed: hidden upstream, see ContentSeeder). Deleting them
would mean re-deriving them the next time. */
.eo-features { list-style: none; margin: 0; padding: 0; display: grid; }
.eo-feature {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
align-items: center;
padding: 13px 0;
border-bottom: 1px solid rgba(69, 22, 63, .10);
}
.eo-feature:last-child { border-bottom: 0; padding-bottom: 0; }
.eo-feature p {
margin: 0;
max-width: none;
color: var(--text-soft);
font-size: 1rem;
line-height: 1.55;
}
.eo-feature-ico {
display: grid; place-items: center;
width: 42px; height: 42px; border-radius: var(--eo-r);
background: rgba(247, 183, 45, .18);
border: 1px solid rgba(69, 22, 63, .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
color: #5c1c58;
transition: transform .3s ease, border-color .3s ease;
}
.eo-feature:hover .eo-feature-ico {
transform: scale(1.07);
border-color: rgba(247, 183, 45, .55);
}
@media (prefers-reduced-motion: reduce) {
.eo-feature-ico { transition: none; }
.eo-feature:hover .eo-feature-ico { transform: none; }
}
/* ---- Competition format: THE SPEC CARDS ------------------------------------
Two cards to a row, and a long value takes the row to itself.
Three arrangements came before this. The first was a flex wrap of
content-sized cells, which packed three then two and left the second row
centred on nothing. The second was a full-width table of hairline rows, which
fixed the ragged edge and introduced a worse problem: these values are mostly
two or three words, so more than half of every row was empty card, and a page
of hairlines directly under five saturated plates read as unfinished.
So: cards again, but on a real grid rather than a wrap — and the width of a
card is decided by the length of its own value, which is the thing the first
two attempts each got half right. See the note in x-eo-spec for where the
threshold comes from.
The section still has a job the quick-facts bar under the hero does not. That
bar carries four of these five values as big figures; this is the
specification a teacher checks before the day, and it is the only place the
fifth (Necessity) appears at all. Same values, different question — which is
why the two are drawn differently rather than merged.
========================================================================== */
.eo-spec {
max-width: 1000px;
margin: clamp(20px, 3vw, 30px) auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 1.4vw, 16px);
/* Dense, or a full-width card leaves a hole beside the one before it: the
grid will not put a later short card into a gap a wide card could not
fit. With five specs and one wide one that is two holes, which is what
the layout looked like before this line.
Dense reorders what you SEE against source order, which is a real cost
and is affordable here for one reason: nothing in this list is a
sequence. They are five independent facts about the same paper, and none
of them is focusable, so nothing tabs through them in an order that could
now disagree with the page. Do not carry this line to a list where the
order means something. */
grid-auto-flow: dense;
}
/* Three short specs go three to a row instead of two-and-a-hole.
---------------------------------------------------------------------------
The MyEO paper on /about-us is exactly three: Paper 1, Paper 2 and Mode. In
two columns the third sat alone with an empty half-row beside it, which reads
as a card that failed to load rather than as a list of three.
x-eo-spec adds this class only when there are three rows and none of them is
wide — a wide card spans the whole row, so on a three-column grid it would
have to break across two of the three and the hole comes straight back.
Between 980px and the phone breakpoint the three do not fit, so it falls back
to two columns and the last card takes the row rather than half of it. Below
720px the shared rule beneath this one puts every card on its own row and
there is nothing left for either to decide. */
.eo-spec--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
.eo-spec--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eo-spec--trio .eo-spec-item:last-child { grid-column: 1 / -1; }
}
/* A
's
and
are siblings, so each pair is wrapped to make a card.
The wrapper is the grid item; the pair inside it gets its own two-column
grid, with the mark spanning both rows down the left. */
.eo-spec-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 2px 16px;
padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 20px);
border: var(--eo-line) solid var(--eo-edge);
border-radius: var(--eo-r);
background: var(--surface);
box-shadow: var(--eo-drop);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eo-spec-item:hover {
transform: translate(-2px, -2px);
border-color: var(--border-strong);
box-shadow: var(--eo-drop-lift);
}
/* The long ones. A sentence in half a row wraps to four lines; across the whole
row it is one or two. */
.eo-spec-item.is-wide { grid-column: 1 / -1; }
/* The mark, on a tinted tile, spanning the label and the value beside it. The
tile is back after the table experiment dropped it: with hairlines gone, the
drawings had nothing to sit on and floated in the corner of each card. */
.eo-spec-ico {
grid-row: span 2;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: var(--eo-r);
background: rgba(247, 183, 45, .18);
border: 1px solid rgba(69, 22, 63, .13);
}
/* 1.05rem/.08em. Was .76rem/.13em, then .9rem/.1em to match .eso-fmt-label and
.geo-fmt-label on the sibling sites; now raised again on this site only, so MyEO
no longer matches those two — sync them if the spec sheet is ever compared
side by side. The reasoning behind the first rise still holds and is why the
tracking keeps coming down as the size goes up: "PAPER 1" and "MODE" are
uppercase, and caps under wide tracking are the hardest thing to read small,
so tracking was compensating for size. With the size raised it is needed less,
not more.
.eo-gate-label and .eo-route-label move with it — see the note on the first of
them. They are the same object, a small-caps label over its value, and they
were unified at .9rem precisely because they had drifted to .76/.8/.76. */
.eo-spec-label {
align-self: end;
margin: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
}
/* The [data-theme] prefix is not decoration: warm-theme.css sets a colour on
every
at a weight this would otherwise lose to. */
[data-theme="warm"] .eo-spec-value {
align-self: start;
margin: 0;
max-width: none;
color: var(--text);
font-weight: 600;
font-size: 1.04rem;
line-height: 1.4;
}
/* One column below 720px: two cards at that width give "Stable internet
connection and scientific calculator" about four words a line. Every card is
full width there, so `is-wide` has nothing left to say. */
@media (max-width: 720px) {
.eo-spec { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.eo-spec-item { transition: none; }
.eo-spec-item:hover { transform: none; }
}
/* ---- Category cards --------------------------------------------------------
Artwork on the left, the levels on the right. The two categories are the
page's fork in the road, so each one gets its own drawing: a first reading for
Primary, a worked correspondence for Secondary. */
/* One card per row, not two side by side. Side by side, each card got about a
third of the page for its text, and every line broke — "Standard 4, 5, and 6"
left "6" alone on a second line, and Secondary's "Year 7, 8, 9, 10, 11, and 12"
was worse. Full width, each school and its levels sit on one line. */
/* One column sized to the widest card's content, centred in the panel — so each
card wraps its planet and levels instead of stretching the full width and
carrying empty space on both sides. max-content on the column (rather than a
width on each card) is what keeps the two cards the same width, so the planets
line up; minmax(0, …) lets them shrink on a phone rather than overflow. */
.eo-cats {
display: grid; gap: 18px;
grid-template-columns: minmax(0, 1fr);
}
/* Side by side once there is room for it. The two categories are the page's fork in
the road — a visitor belongs to exactly one of them — and stacked they read as a
sequence rather than a choice, with the section running to twice the height it
needs.
One pair of equal cards, like the fee tiers: 1fr columns rather than max-content,
and stretched rather than aligned to the top. Sized to their own content they came
out visibly different — Secondary carries three rows and a line that wraps, Primary
two — so a choice between two equal options was drawn as one big box and one small
one. Equal cards say the two are alternatives; unequal cards say one matters more. */
@media (min-width: 900px) {
.eo-cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: clamp(18px, 2.2vw, 28px);
}
}
.eo-cat {
display: grid;
/* planet, then the text taking whatever is left. 1fr rather than max-content now
that the cards are equal: the rules stretch to the card's edge instead of
stopping at the longest line and leaving a ragged gap beside them. */
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: clamp(14px, 2.4vw, 26px);
padding: clamp(18px, 2.4vw, 26px);
border-radius: var(--eo-r);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.eo-cat:hover {
transform: translate(-2px, -2px);
box-shadow: var(--eo-drop-lift);
border-color: rgba(247, 183, 45, .45);
}
.eo-cat-art {
display: grid; place-items: center;
filter: drop-shadow(0 10px 18px rgba(43, 15, 40, .22));
}
.eo-cat-art .eo-cat-art-svg { display: block; width: clamp(84px, 11vw, 112px); height: auto; }
.eo-cat-body { min-width: 0; }
.eo-cat h3 { margin: 0 0 12px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.eo-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eo-cat li {
max-width: none;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 9px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.eo-cat li:last-child { padding-bottom: 0; border-bottom: 0; }
/* the icon is the only thing on the row that is not text, so it aligns to the
text baseline rather than the row box */
.eo-cat li svg { justify-self: center; color: #5c1c58; position: relative; top: 3px; }
.eo-cat-txt { line-height: 1.5; }
.eo-cat li b { color: #2b0f28; }
.eo-cat-txt span { color: var(--text-soft); }
@media (max-width: 520px) {
/* stacked: at this width the planet and a wrapped school name fight for room */
.eo-cat { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.eo-cat-body { width: 100%; }
.eo-cat li { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.eo-cat { transition: none; }
.eo-cat:hover { transform: none; }
}
/* ---- Ring counters ---------------------------------------------------------
The figure sits inside a dashed orbit, as on the sibling sites, so last
cycle's reach reads as an achievement rather than as another spec row. */
/* Geometry matched to Biology's .gx-count: same ring diameter, same gap, same
label and figure sizes — only the colours differ, because the palette is what
is supposed to tell the two sites apart, not the scale. */
.eo-counters {
display: flex; justify-content: center;
gap: clamp(28px, 7vw, 90px); flex-wrap: wrap;
}
.eo-count { text-align: center; }
.eo-ring {
position: relative;
width: clamp(130px, 20vw, 168px); aspect-ratio: 1;
margin: 0 auto 8px;
display: grid; place-items: center; border-radius: 50%;
/* a near-white disc under the figure, as on the sibling sites: it separates the
ring from the page wash, which is what the travelling arc needs to read against */
background: radial-gradient(circle at 50% 42%, rgba(247, 183, 45, .22), rgba(255, 255, 255, .9) 66%);
border: 1px dashed rgba(69, 22, 63, .42);
}
/* The travelling arc. At 1px in pale orange it was invisible against a pale
background — the ring looked static. It is now 3px, in the darker end of the
brand ramp, and runs over two borders so the arc is a quarter of the circle
rather than a tick: a longer, darker mark is what makes the rotation readable
at a glance. The track it runs on is darkened to match. */
.eo-ring::before {
content: ""; position: absolute; inset: -9px; border-radius: 50%;
border: 3px solid rgba(69, 22, 63, .16);
border-top-color: #e3931b;
border-right-color: rgba(222, 164, 37, .55);
filter: drop-shadow(0 0 4px rgba(222, 164, 37, .35));
animation: eo-ring-spin 12s linear infinite;
}
@keyframes eo-ring-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .eo-ring::before { animation: none; } }
.eo-ring b {
font-family: var(--font-display); font-weight: 800;
font-size: clamp(2.4rem, 5.5vw, 3.4rem); line-height: 1;
background: linear-gradient(92deg, #e3931b, #5c1c58);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.eo-count > span {
display: block; margin-top: 10px;
font-size: .86rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
/* ---- Timeline --------------------------------------------------------------
The dates are a sequence, so they run as cards along a rule rather than as
stacked label/value pairs. Competition day is the one a visitor must not miss,
so it is pulled out with the orange wash. */
.eo-rail {
list-style: none; margin: 0; padding: 0;
position: relative;
display: grid;
grid-template-columns: repeat(var(--stations, 4), minmax(0, 1fr));
gap: 18px;
}
/* the rail: one line threaded behind the discs, stopped short of the first and
last so it does not dangle past the run */
.eo-rail::before {
content: "";
position: absolute; z-index: 0;
left: 10%; right: 10%; top: 37px; height: 3px; /* half the disc */
border-radius: 2px;
background: linear-gradient(90deg, rgba(69, 22, 63, .35), #0f5578 45%, #f7b72d);
opacity: .5;
}
.eo-station { position: relative; z-index: 1; text-align: center; }
/* The station disc.
Kept white rather than tinted, and now for a different reason than it was: it
held full-colour illustrations that a tint would have muddied, and it holds a
navy line icon that a tint would flatten against. White is what gives the
stroke somewhere to sit on a page whose own ground is pale ice. */
.eo-station-node {
position: relative;
display: grid; place-items: center;
width: 78px; height: 78px; margin: 0 auto 14px;
border-radius: 50%;
background: #fff;
/* the drawn edge the rest of the site has, on the one ornament that is a
circle rather than a card */
border: var(--eo-line) solid var(--eo-edge);
/* the cream halo punches the rail out behind each disc */
box-shadow: var(--eo-drop);
color: #5c1c58;
transition: transform .3s ease, box-shadow .3s ease;
}
.eo-station:hover .eo-station-node {
transform: translate(-2px, -2px);
box-shadow: var(--eo-drop-lift);
}
.eo-station h3 {
margin: 0 0 8px; font-size: .98rem; line-height: 1.35;
color: #2b0f28; text-wrap: balance;
}
.eo-station-date {
display: inline-block; margin: 0;
padding: 5px 12px; border-radius: 999px;
background: var(--water-soft);
border: 1px solid rgba(69, 22, 63, .16);
font-size: .86rem; font-weight: 700; color: #5c1c58;
}
/* Competition day: the one date a visitor must not miss. An amber ring and glow
rather than an amber fill — gold is a fill colour on this brand and a navy
icon on a gold disc at 30px is the one place it would have to carry a line
weight rather than a block. The icon itself takes the gold instead. */
.eo-station.is-hl .eo-station-node {
border: 2px solid #dea425;
box-shadow: var(--eo-drop);
color: #b5790f;
}
/* the date itself, not just the disc: a tinted pill sat too close to the pale-water
ones beside it to register as the date that matters, so this one is a solid amber
chip with the CTA's own fill */
.eo-station.is-hl .eo-station-date {
background: linear-gradient(135deg, #f7b72d, #dea425);
border-color: #e3931b;
color: #2b0f28;
font-weight: 800;
box-shadow: var(--eo-drop);
}
.eo-station.is-hl h3 { color: #5c1c58; font-weight: 800; }
/* Below 780px the rail turns vertical: four stations across a phone leaves each
title three words wide. Same run, rotated — not a different component. */
@media (max-width: 780px) {
.eo-rail {
grid-template-columns: 1fr; gap: 4px;
/* the run is only as wide as a disc plus a title, so left-aligned it left
half the panel empty and read as pushed to one side. Capped and centred
instead, so it sits in the middle of the panel at any width. */
max-width: 470px; margin-inline: auto;
}
/* One line down the whole list overshot the last disc and dangled. Drawn per
station instead: each segment runs between two discs, so the run starts at
the first disc's centre and stops at the last one's. */
.eo-rail::before { display: none; }
.eo-station::before {
content: "";
position: absolute; z-index: 0;
left: 35.5px; width: 3px;
top: -4px; bottom: -4px; /* -4px = the row gap, so segments meet */
border-radius: 2px;
background: rgba(122, 42, 118, .42);
}
.eo-station:first-child::before { top: 50%; }
.eo-station:last-child::before { bottom: 50%; }
.eo-station:only-child::before { display: none; }
/* Title and date are ONE stacked block beside the disc, not two grid rows.
------------------------------------------------------------------------
They used to be: `grid-template-columns: 74px 1fr` with the title placed in
column 2 row 1 and the pill in column 2 row 2. Row 1 is as tall as the disc
that shares it — 74px — so `align-items: center` floated the title in the
middle of that 74px and dropped the pill onto a row that begins BELOW the
whole disc. The two lines of one station ended up ~30px apart, which read
as a date belonging to nothing rather than to the title above it.
Spanning the disc across both rows does not fix it: a 74px item spanning
two rows whose content only adds up to ~59px makes the grid share the
surplus between them, which pushes the title and pill apart again.
So the disc comes out of flow entirely and the station becomes a centred
flex column holding just the two text lines. Their spacing is then the h3's
own margin and nothing else, and `justify-content: center` centres the pair
against the disc as a unit — which is what the row was always meant to be.
Height comes from min-height alone, with no vertical padding — under
border-box the two would argue about whether the 74px includes the padding,
and the disc is centred on the station box, so one number is easier to
reason about than three.
110px, not 74px. 74 is the disc, and at 74 the stations stack so tightly
that each disc's 7px cream halo meets the next one's and erases the rail
running between them — the sequence stops looking like a sequence. 110
leaves 18px clear above and below the disc, so with the 4px row gap there
is ~26px of visible rail between one halo and the next. Still shorter than
the old grid version, which ran 131px a station because the pill sat on a
row of its own below the disc. */
.eo-station {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 110px;
padding: 0 0 0 90px; /* 74px disc + the 16px gutter it used to have */
text-align: left;
}
/* Centred with a negative margin, NOT translateY(-50%): the hover rule owns
`transform` on this element and would wipe the centring the moment a finger
or cursor touched the station. -37px is half the 74px disc. */
.eo-station-node {
position: absolute;
left: 0;
top: 50%;
margin: -37px 0 0;
}
.eo-station h3 { margin: 0 0 6px; }
/* Flex blockifies the inline-block pill and stretch would run it the full
column width — same reason the grid version needed justify-self. */
.eo-station-date { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.eo-station-node { transition: none; }
.eo-station:hover .eo-station-node { transform: none; }
}
/* ============================================================================
PREPARATORY WORKSHOP — the one section that is not on the page field
----------------------------------------------------------------------------
Everything else on this page is a panel on the cream wash. The workshop is the
only paid add-on and the only thing besides registering that a visitor can act
on, so it gets the page's one strong visual break: a deep-green band, its own
panel, and amber cards inside it. That is the whole point of keeping the rest
of the page quiet — a page where every section shouts has no way to say
"this one is different".
========================================================================== */
/* The band carries the figure motif too, in the light-ink set. It is the one big
opaque surface on the site, so the page-wide backdrop scatter (painted on
body::before, far below this) cannot reach it — left alone it was the only
section on any page with nothing drawn on it.
Six layers, front to back: a coin in each bottom corner, the bars-and-grid
scatter tiled over the whole field, then the two blooms and the base that were
already here. Restated as one `background` shorthand rather than layered on
with a second rule: a stray `background-image` would win the image list while
leaving this declaration's repeat/position/size in place, and the two would
then disagree about how many layers exist.
The three list properties below must stay the same length as the image list —
six entries each, in the same order. Add a layer and all four lines change. */
.eo-workshop {
position: relative;
margin: clamp(18px, 3vw, 36px) 0;
padding-block: clamp(34px, 5vw, 62px);
background:
var(--eo-coin-light),
var(--eo-coin-light),
var(--eo-ground-tex-light),
radial-gradient(120% 90% at 12% -10%, rgba(247, 183, 45, .20), transparent 58%),
radial-gradient(110% 90% at 92% 4%, rgba(201, 166, 208, .16), transparent 55%),
linear-gradient(165deg, #2b0f28 0%, #5c1c58 46%, #3a1136 100%);
/* the two seals sit past the bottom edge so they read as pressed into the
band's foot rather than as stickers floating on it; the negative insets are
clipped by the border box, which is exactly what is wanted */
background-position:
left -26px bottom -30px,
right -34px bottom -38px,
left top, 0 0, 0 0, 0 0;
background-size:
188px 140px,
224px 166px,
440px 440px, auto, auto, auto;
background-repeat:
no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
border-block: 1px solid rgba(247, 183, 45, .35);
color: #ebeef4;
}
/* A ruled baseline along the foot, the same close the tinted bands get — in
pale ink, and sitting inside the band's own bottom padding so it never meets
the panel. */
.eo-workshop::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 22px;
background: var(--eo-baseline-tile-light) bottom center / 220px 22px repeat-x;
pointer-events: none;
}
/* the ruled seam the other bands use, in the light ink this one needs */
.eo-workshop::before {
content: "";
position: absolute; inset-inline: 0; top: 0; height: 6px;
background-image: radial-gradient(circle at 3px 3px, rgba(247, 183, 45, .45) 1px, transparent 1.2px);
background-size: 12px 6px;
pointer-events: none;
}
/* Head: on the dark band the deep-green heading colour is invisible, and the
gradient half of the title reads as a smudge, so both are set in light ink. */
.eo-workshop .eo-head .section-title,
[data-theme="warm"] .eo-workshop .eo-head .section-title { color: #fff; }
/* "Economics Explorer Preparatory Workshop 2026/2027" is the longest heading on
the site, and it was setting as THREE lines with "Preparatory" alone in the
middle. Two things were doing it, and both had to go.
The first is .eo-head's shared max-width: 720px. That is right for a two-word
title over a centred lead, and this heading needs 803px at its own size — the
band has well over a thousand to give it. The year heads on /about-us release
the same cap for the same reason; see the note there.
The second is text-wrap: balance, set on .section-title in redesign.css. Once
a heading needs a second line, balance evens the two rather than filling the
first — so widening the box alone just bought a longer, still-balanced pair
("Economics Explorer" / "Preparatory Workshop 2026/2027"). `pretty` fills
greedily and only guards the last line, which is what puts the break where
the words want it: the name, then the year.
MEASURED: "Economics Explorer Preparatory" is 16.19em in this face, so it
needs 803px at the 49.6px this heading takes from 1180px up. 880 leaves it
77px of margin. Use docs/measure-workshop-heading.html — copy it into public/ to run, as with
the hero harness.
Below ~600px it wraps again and that is left alone: the column is 509px at a
560px viewport and the run needs 622px there, so holding it would mean
shrinking the band's own title to something smaller than the body copy under
it. */
.eo-workshop .eo-head {
max-width: 880px;
}
.eo-workshop .eo-head .section-title {
text-wrap: pretty;
}
/* The band's own gradient for the title, and both selectors are needed.
---------------------------------------------------------------------------
`.section-title .grad` is the site's usual arrangement — a span wrapping the
second half of a heading the template writes in two pieces. The workshop title
is one content block typed at /admin, so it has no second half and the class
goes on the heading itself: `.section-title.grad`, no space.
A DIFFERENT RAMP FROM THE PAGE'S. The site's `--grad-title` ends in Explorer plum,
which is the right close on white paper and invisible on this band — the one
section that is solid deep plum with light text. This one runs pale lilac
through the gold and out to a lilac tint, so every stop sits well clear of the
ground: #ede4f0 is 15.5:1 on #2b0f28, the gold 9.5:1, and #c9a6d0 6.8:1, all
above the 4.5 floor for body text and far above the 3:1 a heading needs. */
/* 1.3 on the workshop title alone. Its second line carries a "/", and Poppins
Bold's slash rises .95em while a descender on the line above falls .28em: they
need 1.23em between baselines, and the site's tight 1.1 leaves them 6px into
each other. 1.3 clears by 3px — the value MyBO's title already uses. */
.eo-workshop .section-title { line-height: 1.3; }
.eo-workshop .section-title .grad,
.eo-workshop .section-title.grad {
background: linear-gradient(92deg, #ede4f0 0%, #f7b72d 50%, #c9a6d0 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* The chip is darkened, not lightened, and that is the whole fix.
#d6def2 on a rgba(255,255,255,.12) chip over this band measured 4.37:1, and
3.53:1 over the band's lightest patch (the amber bloom in the top-left corner)
— under the 4.5 AA floor for text this small, which the eyebrow is at .72rem.
Lifting the text instead does not get there: even #e9edf7, almost white and
well off the amber, only reaches 4.29:1 on that lightest patch, because the
white chip is carrying the background up as fast as the text goes. Tinting the
chip DOWN moves the two apart instead of together — .20 black gives 7.72:1
average and 6.28:1 worst case with the amber text left exactly as designed. */
[data-theme="warm"] .eo-workshop .eyebrow {
background: rgba(0, 0, 0, .20);
border-color: rgba(247, 183, 45, .5);
color: #d6def2;
}
/* .eo-badge is kept legible on the band in case the eligibility chip is ever put
back, but nothing renders it on this page today. */
.eo-workshop .eo-badge {
background: linear-gradient(135deg, #f7b72d, #dea425);
border-color: #e3931b;
color: #2b0f28;
}
/* The panel is a light sheet laid on the dark band, not another translucent green
layer. Two tones, not one: the band alone carries the "this section is
different" signal, and the reading happens on cream — the workshop is the
longest run of text on the page, and it was all set on dark green. */
[data-theme="warm"] .eo-workshop .gx-glass {
background: var(--surface);
border-color: rgba(255, 255, 255, .45);
box-shadow: var(--eo-drop);
/* the band sets light ink for the heading above; the panel has to set it back,
or list items — which no base rule colours — inherit white onto white */
color: var(--text-soft);
}
[data-theme="warm"] .eo-workshop .gx-glass p,
[data-theme="warm"] .eo-workshop .gx-glass li { max-width: none; color: var(--text-soft); }
/* Tabs: the underline treatment is built for a light panel and vanishes on the
band, so on this section they become pills — amber for the tabs you can go to,
dark for the one you are on, which is how the workshop's own material sets
them out. Centred, because the panel below is symmetrical. */
.eo-workshop .eo-tabs {
justify-content: center; gap: 10px;
border-bottom: 0;
margin-bottom: clamp(18px, 2.4vw, 26px);
}
/* The tabs, and they were the wrong way round.
---------------------------------------------------------------------------
Unselected tabs were filled with the brand gold and the selected one was
plum, so the two tabs you are NOT on shouted and the one you were on went
quiet. Gold is this brand's "act on this" colour — it is the primary button
and nothing else — and a tab you are already reading is state, not an action.
Selected is now the solid plum with the cast, which is the loudest thing in
the row; the others are paper with the drawn edge, like every other surface
on the site. Gold is left for the buttons. */
.eo-workshop .eo-tab {
border-radius: 999px;
padding: 10px 20px;
background: var(--surface);
border: var(--eo-line) solid var(--eo-edge);
color: var(--accent);
box-shadow: var(--eo-drop-sm);
}
.eo-workshop .eo-tab:hover {
background: var(--plum-050);
border-color: var(--eo-edge-strong);
color: var(--accent);
}
.eo-workshop .eo-tab[aria-selected="true"] {
background: #5c1c58;
border-color: #45163f;
color: #fff;
box-shadow: var(--eo-drop);
}
.eo-workshop .eo-tab:focus-visible { outline: 2px solid #f7b72d; outline-offset: 2px; }
/* Blocks inside the panel — the workshop's own material runs as titled blocks,
not as loose prose. */
.eo-wk-block {
padding: clamp(16px, 2vw, 24px);
border-radius: var(--eo-r);
background: #fff;
border: 1px solid rgba(69, 22, 63, .14);
box-shadow: var(--eo-drop);
}
.eo-wk-block + .eo-wk-block,
.eo-wk-facts + .eo-wk-block,
.eo-wk-block + .eo-wk-facts { margin-top: 16px; }
.eo-wk-block h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.15rem; }
.eo-wk-block h4 { display: flex; align-items: center; gap: 9px; margin: 18px 0 8px; font-size: 1rem; }
.eo-wk-block h3 + p, .eo-wk-block h4 + ul { margin-top: 0; }
.eo-wk-block ul { margin: 0; padding-left: 1.15em; }
.eo-wk-block li { margin-bottom: .4em; }
.eo-wk-note {
margin: 14px 0 0; padding: 10px 14px;
border-left: 3px solid #f7b72d; border-radius: 0 var(--eo-r) var(--eo-r) 0;
background: rgba(247, 183, 45, .12);
font-size: .92rem; font-style: italic;
}
.eo-wk-cta { margin: 18px 0 0; }
/* the Infopack tab is a centred sheet of posters, so its button centres with them */
.eo-wk-posters + .eo-wk-cta { text-align: center; margin-top: 22px; }
/* Date / Time / Venue and Dates / Fees — amber cards, the one place on the page
that colour is used as a fill rather than an accent. */
.eo-wk-facts {
display: grid; gap: 14px; margin-top: 16px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.eo-wk-facts--two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Amber cards, flat. They were a #fdce6a-to-#e6a720 gradient, which is the
primary button's own ramp — three saturated buttons' worth of gold sitting
in a row carrying no action at all. Flat and paler, with the gold drawn edge
the rest of the site would give them, so they still read as the amber set the
section wants without competing with the button under them. */
.eo-wk-fact {
padding: 16px 18px;
border-radius: var(--eo-r);
background: #fbe3ad;
border: var(--eo-line) solid #e3931b;
color: #2b0f28;
box-shadow: var(--eo-drop-sm);
}
/* .gx-glass is an ancestor of these cards, so the panel's light-ink rules above
out-specify a plain `.eo-wk-fact p`. Matched through the panel here, which is
what keeps the ink dark on the amber fill. */
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact h4 { margin: 0 0 8px; color: #2b0f28; font-size: .95rem; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact p { margin: 0; color: #2b0f28; font-weight: 600; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact li { color: #2b0f28; }
.eo-wk-fact dl { margin: 0; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact dt { margin-top: 8px; font-weight: 700; color: #2b0f28; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact dt:first-child { margin-top: 0; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact dd { margin: 0 0 0 14px; color: #3f1039; }
[data-theme="warm"] .eo-workshop .gx-glass .eo-wk-fact b { color: #2b0f28; }
/* Contact + social, two columns inside one block */
.eo-wk-contact { display: grid; gap: clamp(14px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.eo-wk-contact h4:first-child { margin-top: 0; }
[data-theme="warm"] .eo-wk-contact li span { color: var(--text-mute); }
/* Infopack posters. Capped and centred rather than stretched to the panel: they
are portrait, and auto-fit with one or two posters blew a single sheet up to
the full width of the section. */
.eo-wk-posters {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(210px, 300px));
justify-content: center;
}
.eo-wk-posters a {
display: block; border-radius: var(--eo-r); overflow: hidden;
border: 1px solid rgba(69, 22, 63, .18);
box-shadow: var(--eo-drop);
transition: transform .3s ease;
}
.eo-wk-posters a:hover { transform: translateY(-4px); }
.eo-wk-posters img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
.eo-wk-posters a { transition: none; }
.eo-wk-posters a:hover { transform: none; }
}
/* ---- Workshop tabs ---------------------------------------------------------
The workshop carries more content than the rest of the page combined, so it is
split across three panels rather than run as one column. */
.eo-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 0 18px;
border-bottom: 1px solid rgba(69, 22, 63, .18);
}
.eo-tab {
appearance: none; background: transparent; cursor: pointer;
border: 0; border-bottom: 2px solid transparent; border-radius: var(--eo-r) var(--eo-r) 0 0;
font-family: var(--font-display); font-weight: 600; font-size: .95rem;
padding: 9px 15px;
color: var(--text-soft);
transition: color .2s, background .2s, border-color .2s;
}
.eo-tab:hover { color: var(--accent); background: rgba(247, 183, 45, .10); }
.eo-tab[aria-selected="true"] { color: #5c1c58; background: rgba(247, 183, 45, .14); border-bottom-color: #f7b72d; }
.eo-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* !important: [hidden] loses to any display rule that lands on the panel later —
the popup overlay was invisible-but-clickable for exactly this reason. */
.eo-panel[hidden] { display: none !important; }
/* ---- Syllabus --------------------------------------------------------------
Four statement cards, two up. The sibling sites run a Primary block beside a
Secondary one because their syllabuses genuinely differ by age; this one does
not — see the note on the section in home.blade.php — so what is laid out here
is four claims about the paper rather than two lists of topics.
auto-fit with a 300px floor rather than a fixed two columns: at three cards
the row would otherwise leave a hole, and an editor adding a fifth point
should not have to touch CSS. */
.eo-syl-points {
display: grid;
/* 240px, not 300: the home page has four points and the container is 1148px
of usable width, so a 300px floor gives three columns and leaves the fourth
card alone on a row of its own. At 240 all four sit on one line at desktop
width, and the pages that carry three points still get three columns. */
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 16px;
}
.eo-syl-point {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 16px;
padding: clamp(18px, 2.2vw, 26px);
border-radius: var(--eo-r);
}
/* The mark sits on a tinted disc, the same treatment .eo-feature-ico gives the
objectives — the two sections are both "a mark and a sentence", so they read
as one family rather than two inventions. */
.eo-syl-ico {
display: grid; place-items: center;
width: 46px; height: 46px; flex: none;
border-radius: var(--eo-r);
color: var(--accent);
background: #fbf1de;
border: var(--eo-line) solid var(--eo-edge);
}
.eo-syl-point p { margin: 0; max-width: none; }
.eo-syl-point h3 { margin: 0 0 8px; font-size: 1.05rem; }
/* A ticked list inside one of those cards. Not
's own bullets: the tick is a
drawn icon that takes the accent, and a marker plus an icon is two bullets. */
.eo-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eo-ticks li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
max-width: none;
}
.eo-ticks li > svg { margin-top: .28em; color: var(--accent-2); flex: none; }
/* ---- Page banner -----------------------------------------------------------
The single decorative image the Format and Study Guide pages open on, both of
which the live site leads with. Rounded and edged so it reads as a plate on the
paper rather than as a photograph bleeding to the container's edges, and capped
in height so a wide screen does not turn a decorative header into the page. */
.eo-banner {
display: block;
width: 100%;
max-height: 340px;
object-fit: cover;
border-radius: var(--eo-r);
border: var(--eo-line) solid var(--eo-edge);
box-shadow: var(--shadow-sm);
}
/* ---- About: what it costs --------------------------------------------------
Two column headings on the section's own ground, with a card under each
holding one sentence — the live page's arrangement, and the right one.
Two shapes came before it. Two .eo-syl-point cards drew both answers
identically, so a reader had to read each in full to find out which was
"free" and which was "you may have to pay" — the one distinction the section
exists to make. Putting the heading inside the card fixed nothing: the
headings are long (one names three olympiads) and inside a card the heading
became the largest thing in it, leaving the sentence it introduces reading as
a footnote to its own title.
Out on the ground the headings behave as what they are — a pair of column
headings — and each card holds one short answer.
The answers are told apart by colour, not by a label: sky is this palette's
settled ink (the ticks in the section above, the solved cells in the
ornament), gold is the one that asks for attention. It lands on the phrase
upstream itself emphasises, so nothing is invented to carry it.
========================================================================== */
.eo-costs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Two explicit rows so both headings share the first and both cards start at
the top of the second. A column wrapper each would let a three-line
heading push its card below its neighbour's. */
grid-template-rows: auto auto;
align-items: start;
gap: clamp(14px, 1.8vw, 20px) clamp(16px, 2.4vw, 30px);
margin-top: clamp(20px, 3vw, 30px);
}
.eo-cost-title {
grid-row: 1;
margin: 0;
text-align: center;
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
line-height: 1.32;
color: #2b0f28;
text-wrap: balance;
}
.eo-cost-title.is-free { grid-column: 1; }
.eo-cost-title.is-payable { grid-column: 2; }
.eo-cost {
grid-row: 2;
align-self: start;
padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
border: var(--eo-line) solid var(--eo-edge);
/* the answer, drawn: a band along the top edge in the colour of the answer */
border-top-width: 4px;
border-radius: var(--eo-r);
background: var(--surface);
box-shadow: var(--eo-drop);
}
.eo-cost.is-free { grid-column: 1; }
.eo-cost.is-payable { grid-column: 2; }
.eo-cost p {
margin: 0;
max-width: none;
text-align: center;
color: var(--text-soft);
line-height: 1.62;
}
/* The emphasis upstream puts on the answering phrase, in the colour of that
answer. This is the whole distinction: no badge, no label, no extra words. */
.eo-cost strong { font-weight: 800; }
.eo-cost.is-free { border-top-color: var(--accent-2); }
.eo-cost.is-free strong { color: var(--accent-2); }
.eo-cost.is-payable { border-top-color: var(--brand); }
/* the gold ink, not the fill gold — #f7b72d is 3.98:1 and this is body text */
.eo-cost.is-payable strong { color: #8a5a06; }
@media (max-width: 760px) {
/* Stacked, each heading has to sit with its own card, so the two explicit
rows go and the four children fall into source order — which is already
heading, card, heading, card. */
.eo-costs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.eo-cost-title,
.eo-cost { grid-column: 1; grid-row: auto; }
}
/* ---- About: the gate, and the pair -----------------------------------------
"Who It Is For, and Why" holds three things that are not the same kind of
thing, and it used to draw them as three equal cards.
"Who can participate?" is a RULE — one sentence, and the only fact on the page
a reader has to check against themselves before the rest of it matters.
Objectives and Advantages are lists, and they answer a question nobody asks
until they know they qualify. Equal cards said all three were the same weight,
and gave a one-line rule the same box as a four-item list, which left the rule
floating in empty card and the list cramped.
These classes are this section's own rather than the .eo-syl-point cards
below — those still serve the Costs section on this page and the syllabus on
/format-of-question, where three genuinely equal things ARE the content.
========================================================================== */
/* The gate. A gold edge down the left rather than a border all round: it is a
called-out passage, not a card, and a full border would put it back in the
family this section was taken out of. */
.eo-gate {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: clamp(16px, 2vw, 22px);
/* Full width, and the sentence inside it runs the full width too. It was
capped at 62ch for a while, which is a good measure and looked like a
mistake: the bar is one gold-edged block and two-thirds of it was empty.
The panel below it is uncapped for the same reason — see .eo-justify. */
margin: clamp(20px, 3vw, 30px) 0 clamp(26px, 3.4vw, 40px);
padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
border-left: 4px solid var(--brand);
border-radius: 0 var(--eo-r) var(--eo-r) 0;
background: #fdf6e6;
}
.eo-gate-mark {
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: var(--eo-r);
color: #fff;
background: linear-gradient(140deg, #dea425, #a06a0c);
box-shadow: var(--eo-drop);
}
/* 1.05rem/.08em, the same as .eo-spec-label — these are all the same thing, a
small caps label over its value, and they were drifting at .76, .8 and .76.
Uppercase under heavy tracking is the hardest combination to read small, and the
tracking was compensating for the size rather than the other way round; both were
raised together so the family stays one decision rather than three. */
.eo-gate-label {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
}
/* The largest body type in the section, because this is the sentence the whole
section is gating on. */
.eo-gate-text {
margin: 0;
font-size: clamp(1.02rem, 1.2vw, 1.12rem);
line-height: 1.6;
color: var(--text);
font-weight: 600;
}
/* ---- The route: gate → connector → panel -----------------------------------
The Selection section's heading asks two questions, and this is the pair that
answers them: the gate ("Who can participate?") and the panel ("How you get
in"), joined by a short gold connector so the second reads as following from
the first rather than as a second box.
The connector is the home page's stages rail, stood up and used once. Same
two marks — a 2px gold line and a filled tip — because this is the same idea
in a smaller place: one thing leading to the next. It is aria-hidden and the
labels either side carry the meaning, so nothing is lost when it is not seen.
Both halves take the panel's full width. The gate's sentence used to be held
to 62ch, which left the bar two-thirds full and the rest empty; the panel
under it now runs edge to edge (see .eo-justify), and a capped gate beside an
uncapped panel read as a mistake rather than as a measure.
========================================================================== */
.eo-route .eo-gate { margin-bottom: 0; }
.eo-route-link {
position: relative;
display: grid;
place-items: center;
height: clamp(44px, 4.4vw, 58px);
}
/* Fading in from the gate and arriving solid at the tip: the line has a
direction, and this is the cheapest way to say so on a run this short. */
.eo-route-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, rgba(247, 183, 45, .18), rgba(247, 183, 45, .85));
}
.eo-route-tip {
position: relative;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 999px;
color: #2b0f28;
background: linear-gradient(135deg, #f7b72d, #dea425);
border: 1px solid #e3931b;
box-shadow: var(--eo-drop);
}
/* One arrow drawing in the set, turned. A separate arrow-down case would be the
same path at a different angle and one more thing to keep in step. */
.eo-route-tip .gx-ico { transform: rotate(90deg); }
/* The panel's own head. Small caps and a hairline, so it names the panel
without competing with the section title above it. */
.eo-route-head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 clamp(14px, 1.8vw, 20px);
padding-bottom: clamp(12px, 1.6vw, 16px);
border-bottom: 1px solid var(--border);
}
.eo-route-mark {
flex: none;
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: var(--eo-r);
color: var(--accent-2);
background: rgba(247, 183, 45, .18);
border: 1px solid rgba(69, 22, 63, .13);
}
/* Matches .eo-gate-label and .eo-spec-label — see the note on the first of them. */
.eo-route-label {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent);
}
/* The IEO mark at the head of the "Malaysia at the IEO" panel.
---------------------------------------------------------------------------
It used to carry .badge-mini, and every .badge-mini rule on this site is
scoped to .page-hero — which is where the two results pages use it. Inside a
panel none of them matched, so the file rendered at its intrinsic 947px: the
full width of the panel, with the paragraph closing up under it.
Sized here on its own class, and set on a hairline so it reads as the head of
the panel rather than as a picture that happens to be first. Same rule the
selection panel's head uses on this page, so the two panels open the same way.
min(240px, 58%) rather than a flat width: at 240px the wordmark is legible and
the roundel beside it is about the size of a section eyebrow, and the
percentage takes over on a phone where 240px would be most of the panel. */
.eo-ieo-head {
margin: 0 0 clamp(16px, 2vw, 22px);
padding-bottom: clamp(14px, 1.8vw, 18px);
border-bottom: 1px solid var(--border);
}
.eo-ieo-mark {
display: block;
width: min(240px, 58%);
height: auto;
}
/* ---- the pair ------------------------------------------------------------
Two halves of one answer, divided by a hairline rather than by two card
edges. */
.eo-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3.4vw, 46px);
}
.eo-pair-col + .eo-pair-col {
padding-left: clamp(24px, 3.4vw, 46px);
border-left: 1px solid var(--border);
/* the gap is already between them, so the divider needs the padding back
rather than a second gap's worth of space */
margin-left: calc(clamp(24px, 3.4vw, 46px) * -1);
}
.eo-pair-title {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 14px;
font-size: 1.02rem;
color: #2b0f28;
}
.eo-pair-title > svg { color: var(--accent); flex: none; }
@media (max-width: 760px) {
/* Stacked, the divider becomes a rule above the second list — a left border
on a full-width column is a stripe down the page. */
.eo-pair { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 26px); }
.eo-pair-col + .eo-pair-col {
padding: clamp(20px, 3vw, 26px) 0 0;
margin-left: 0;
border-left: 0;
border-top: 1px solid var(--border);
}
}
/* ---- Downloads: THE SPECIMEN -----------------------------------------------
Four files, beside a drawing of the paper they are about.
The sibling sites run a Syllabus here — four claims about what the paper is
like, which the page then has to be believed on. MyEO publishes the papers
themselves, one sample for each category, so the claims are unnecessary: a
student settles the question in thirty seconds by opening the file. The
layout is inherited and the content is not.
It also breaks a rhythm that had run too long. By the time a reader reaches
this section they have passed the quick-facts strip, the objectives, the date
rail, five plates and five spec cards — every one of them a grid of boxes.
A fourth grid here would have been the point at which the page stops having
sections and starts having a texture.
The drawing comes SECOND in the source and first on screen. The files are the
content; a phone and a screen reader both get them before the picture.
========================================================================== */
.eo-specimen {
display: grid;
/* The art column is fixed rather than fractional. It is a drawing at a fixed
aspect ratio, and giving it a fraction of the row means it grows on a wide
monitor into the largest thing on the page — which it is not. */
grid-template-columns: minmax(0, 1fr) 340px;
align-items: center;
gap: clamp(28px, 4vw, 56px);
margin-top: clamp(20px, 3vw, 30px);
}
/* Second in the source, first on screen. */
.eo-specimen-art { grid-column: 2; grid-row: 1; }
.eo-downloads { grid-column: 1; grid-row: 1; }
@media (min-width: 981px) {
/* The drawing to the LEFT of the files on a wide screen: it is the thing
they are downloads OF, and English reads the subject before the comment
on it. */
.eo-specimen-art { grid-column: 1; }
.eo-downloads { grid-column: 2; }
.eo-specimen { grid-template-columns: 340px minmax(0, 1fr); }
}
.eo-specimen-svg {
display: block;
width: 100%;
height: auto;
/* the leaf sits at a slight angle, the way a sheet lies on a desk — the one
thing that stops a rectangle of ruled lines reading as a screenshot */
transform: rotate(-1.6deg);
filter: drop-shadow(0 18px 34px rgba(43, 15, 40, .16));
}
/* ---- the four downloads ---------------------------------------------------
Rows, not cards. Four bordered tiles beside a drawing would have made the
section a grid inside a grid, and these are a LIST — four files a reader
works down, two of which they will open and two of which they will send to
somebody else.
The whole row is the link. A title-only hit area on a row this wide leaves
most of it dead to the pointer, and the note under each title is exactly the
thing somebody aims at when they cannot remember which sample is which. */
.eo-downloads .lead { margin-bottom: clamp(16px, 2vw, 22px); }
.eo-dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eo-dl-list li { max-width: none; }
.eo-dl {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 14px 16px;
border: var(--eo-line) solid var(--eo-edge);
border-radius: var(--eo-r);
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.eo-dl:hover,
.eo-dl:focus-visible {
border-color: rgba(247, 183, 45, .75);
transform: translate(-2px, -2px);
box-shadow: var(--eo-drop-lift);
}
.eo-dl-ico {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--eo-r);
color: var(--accent);
background: rgba(247, 183, 45, .18);
border: 1px solid rgba(69, 22, 63, .13);
}
.eo-dl-text { display: grid; gap: 2px; min-width: 0; }
.eo-dl-text b { font-weight: 700; color: var(--accent); line-height: 1.35; }
.eo-dl-text span { color: var(--text-soft); font-size: .93rem; line-height: 1.5; }
/* The download mark is not a second link and says nothing the row does not —
the row is already announced as a link to the file. */
.eo-dl-go { color: var(--accent-2); flex: none; }
.eo-dl:hover .eo-dl-go { color: var(--brand-600); }
@media (prefers-reduced-motion: reduce) {
.eo-dl { transition: none; }
.eo-dl:hover, .eo-dl:focus-visible { transform: none; }
}
/* On a phone the mark is smaller, and the row is what it is for.
---------------------------------------------------------------------------
The 46px tile is sized for the desktop row, where it sits beside two lines of
comfortable width. At 390px the same tile takes an eighth of the row and the
title beside it — "Sample Questions — Secondary" — is pushed onto a third
line to get past it. 36px keeps the mark legible and gives the words back the
width they were losing to it.
The glyph is set to 22 by the template, which writes width/height ATTRIBUTES
on the