/* ============================================================================
MyGeo palette — THE PRINTED ATLAS
----------------------------------------------------------------------------
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 MyGeo's own identity.
THE IDENTITY: a printed atlas. Navy chart ink on warm parchment, orange
waypoints, sky-blue water. Every one of the four Explorer sites shares this
layout engine, so the palette is the main thing that tells them apart, and
this one is chosen to sit clear of all three 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 <- here
The parchment stays WARM on purpose. Navy on cool grey is a corporate
dashboard; navy on warm paper is an atlas, and that warmth is the thing
keeping this clear of MyAO at a glance.
#123c63 chart navy headings, links, hairlines 11.3:1 on white
#0a5299 chart blue links, routes, water lines 7.8:1
#ff980d orange primary accent / CTAs 2.2:1 — FILL ONLY
#fbe6c8 parchment section washes
#f6cf9e sand cards and panels
#08243f deep navy footer and dark grounds
#7fb2f0 water blue highlights
#a8752b chart ochre secondary accent (#8a5d1e for text)
Contrast is load-bearing here, not decoration. Orange is a FILL colour on
this brand and never carries text — the same rule the amber it replaced had,
for the same reason. Anything that needs to be read runs in the navy.
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. Until the audit, --brand
computed to #0d867b, --text to #123b3a and every border to teal, so the MyGeo
palette only ever reached the components that set literal hex values.
--------------------------------------------------------------------------- */
:root,
:root[data-theme="warm"] {
/* brand ramp — orange through to the chart navy the site uses for headings */
--brand: #ff980d;
--brand-100: #fff2e0;
--brand-200: #fbe6c8;
--brand-300: #f9cf96;
--brand-400: #ffa445;
--brand-500: #ff980d;
--brand-600: #c96806;
--brand-700: #1d5a94;
--brand-800: #10334f;
--brand-900: #123c63;
/* accents */
--accent: #123c63;
--accent-2: #8a5d1e; /* darkened from #a8752b — that was 4.14:1 on white, under AA */
--accent-3: #7fb2f0;
--water: #cfe0f5;
--water-soft: #eff4fb;
/* Link ink. Amber is a FILL colour on this brand, never a text colour:
--brand-600 is 2.70:1 on white and --brand is 1.91:1, both far under the
4.5:1 AA floor. Body links and the active nav item run in the brand deep
green instead, which measures 7.91:1 and is already in the palette. */
--link: #123c63;
--link-hover: #0c2b4b;
/* Inherited names that only warm-theme.css declares, retargeted here so no
rule downstream can reach back into the turquoise ramp. */
--teal: #ff980d; /* accent hairlines, ring progress arc */
--gold: #a8752b;
--violet: #123c63; /* kept name → chart navy */
--pink: #c96806;
--muted: #5d6b7a; /* was #4f6e6c teal; also raised to 5.2:1 */
--brand-glow: rgba(16, 40, 62, .14); /* neutral warm shadow, not a teal 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, #ff980d 0%, #c96806 100%);
--grad-gold: linear-gradient(135deg, #ff980d, #a8752b);
--grad-text: linear-gradient(92deg, #c96806 0%, #ff980d 45%, #123c63 100%);
--grad-title: linear-gradient(92deg, #c96806 0%, #ff980d 45%, #123c63 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
MyGeo palette it is navy with the orange 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, #08243f 0%, #05192b 100%);
--footer-text: #eef4fa;
--footer-muted: #9db9d6;
--footer-border: rgba(255, 255, 255, .14);
--footer-accent: #ff980d;
}
/* Light theme — a warm map-paper wash instead of the aqua one.
`:root` prefix required; see the selector note above. */
:root[data-theme="warm"] {
--bg: #fffaf1;
--bg-2: #fbf0df;
--surface: #ffffff;
--surface-2: #fcf2e4;
--surface-3: #f6ead3;
/* 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 cream wash so the
backdrop is warm even before this file's own body rules apply. */
--bg-950: #fffaf1;
--bg-900: #f8eeda;
--bg-850: #f2e5cf;
--text: #0d151d;
--text-soft: #4a5a69;
--text-mute: #5d6b7a; /* was #6d7b89 — 4.04:1 on white, under the AA floor */
--border: rgba(18, 60, 99, .14);
--border-strong: rgba(18, 60, 99, .28);
--shadow-sm: 0 2px 8px rgba(16, 40, 62, .07);
--shadow: 0 10px 28px rgba(16, 40, 62, .11);
--shadow-md: 0 14px 34px rgba(16, 40, 62, .12);
--shadow-lg: 0 24px 60px rgba(16, 40, 62, .15);
}
/* The page backdrop: pale cream settling into warm parchment, so the map-paper
palette reads across the whole page rather than only on the accents. */
[data-theme="warm"] body {
background:
radial-gradient(1200px 600px at 15% -10%, #e0ebf8 0%, rgba(246, 207, 158, 0) 60%),
radial-gradient(900px 500px at 95% 5%, #ffedd4 0%, rgba(255, 240, 205, 0) 55%),
linear-gradient(180deg, #fffaf1 0%, #f7f2e2 100%);
}
/* …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. Lowland cream
at the top corners, warm gold low and right, over the cream base. The 40s drift
animation is inherited and already suspended under prefers-reduced-motion. */
[data-theme="warm"] body::before {
background:
radial-gradient(900px 700px at 84% -8%, rgba(251, 230, 200, .55), transparent 62%),
radial-gradient(780px 640px at 2% 22%, rgba(246, 207, 158, .42), transparent 60%),
radial-gradient(860px 660px at 98% 56%, rgba(255, 152, 13, .16), transparent 62%),
radial-gradient(900px 720px at 10% 88%, rgba(145, 123, 41, .10), transparent 62%),
linear-gradient(180deg, #fffaf1 0%, #faf1dd 48%, #f4e7d0 100%);
background-repeat: no-repeat;
}
/* Gradient text used for the second half of most headings. */
.grad-text,
.grad {
background: linear-gradient(92deg, #c96806 0%, #ff980d 45%, #123c63 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, #ff980d 0%, #e07a0c 100%);
border-color: #c96806;
color: #101b26;
}
[data-theme="warm"] .btn-primary:hover {
background: linear-gradient(135deg, #ffab50 0%, #ef8410 100%);
color: #0d151d;
}
/* 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 MyGeo
palette: the hypsometric ramp the hero uses, lowland cream through gold to
orange, so the two sites are told apart at the very first pixel of the page. */
[data-theme="warm"] .site-header::before {
background: linear-gradient(135deg, #123c63 0%, #a8752b 45%, #ff980d 100%);
}
/* ---- Navigation chrome ------------------------------------------------------
warm-theme.css paints all four of these in `rgba(245,252,251)` / `#f6fdfc` — 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(255, 253, 246, .78); border-bottom-color: var(--border); }
[data-theme="warm"] .site-header.scrolled { background: rgba(255, 253, 246, .96); box-shadow: var(--shadow-sm); }
[data-theme="warm"] .dropdown { background: rgba(255, 253, 246, .99); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* The header runs wider than the 1180px reading column.
MyGeo's nav is three menus plus five links — MyGeo, iGeo, Moments, and Home /
Registration / Contact Us / FAQs / Shop — and inside 1180px, minus the wordmark
and the Register button, the row has about 705px to live in and needs more. The
reading column stays at 1180: prose does not want to be wider, and only the
header 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", "MyGe / o" — which is how the miss
showed up both times it happened here. 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 used to be. The row held eight
items — including a Registration link beside a Register button, and a Shop
link to another site — and needed 7px padding at .86rem plus a shrunken
CTA to fit. Both extras moved (Registration into MyGeo, Shop to the
footer), so six items fit with room and this only takes the edge off. */
.nav-links > li > a { padding-inline: 11px; }
}
/* A .dropdown-rule lived here: a hairline dividing the iGeo menu where it stopped
listing /igeo and started listing /olympiad-moments. Each menu holds one page
now, so there is nothing left 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: #fffaf1; border-bottom-color: var(--border-strong); }
}
/* Scroll-to-top. This kept warm-theme's flat turquoise (#c96806) — 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, #ff980d, #e07a0c);
border-color: #c96806;
color: #101b26;
box-shadow: var(--shadow-md);
}
[data-theme="warm"] .to-top:hover { background: linear-gradient(140deg, #ffab50, #ef8410); }
/* ---- 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 MyGeo orange (#c96806, 2.70:1 on white) would have made every body link and
the active nav item fail WCAG AA. So text links take --link (the brand deep
navy, 11.3:1) and orange 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); }
[data-theme="warm"] .prose a:not(.btn) { color: var(--link); }
[data-theme="warm"] .prose a:not(.btn):hover { color: var(--link-hover); }
/* 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(18, 60, 99, .22);
color: #123c63;
}
/* Section headings sit in the deep green rather than the inherited teal. */
[data-theme="warm"] h1,
[data-theme="warm"] h2,
[data-theme="warm"] h3 {
color: #08243f;
}
/* …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); }
/* Glass panels pick up the warm cream instead of the aqua tint. */
[data-theme="warm"] .gx-glass {
background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(253, 247, 232, .92) 100%);
border-color: var(--border);
}
/* The icon chips on tiles. */
[data-theme="warm"] .gx-icon {
background: linear-gradient(140deg, var(--a, #ff980d) 0%, rgba(18, 60, 99, .85) 130%);
color: #fff;
}
/* ---- Page-level helpers shared by the MyGeo pages -------------------------- */
/* 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: #123c63; 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 (registration procedure) — Galaxy's timeline, in MyGeo's
colours: numbered discs threaded on a vertical rail, one plain paragraph of
text hanging off each.
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, #ff980d 0%, #e07a0c 100%);
color: #101b26;
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: #123c63;
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: #cf7409; }
/* 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: #cf7409;
}
/* 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(255, 152, 13, .45), rgba(255, 152, 13, .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 and the Geography Explorer one — but MyGeo's
own mark is a wordmark carrying a strapline, and at 88px that line is a smudge.
--wide gives it the width the lettering needs, capped against the viewport. */
.page-hero .badge-mini { height: auto; }
.page-hero .badge-mini--wide { width: min(260px, 66vw); }
/* ---- Explorer → MyGeo lockup ----------------------------------------------
The competition badge feeding the olympiad it leads into, over the copy that
describes that route — Biology's .about-lockup, in MyGeo's colours. */
.about-lockup {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.6vw, 34px);
margin-bottom: clamp(22px, 3vw, 34px);
}
.al-item { flex: 0 0 auto; 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: clamp(190px, 21vw, 264px);
height: clamp(120px, 13vw, 168px);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(14px, 1.8vw, 22px);
border-radius: 18px;
background: linear-gradient(180deg, #fff 0%, #fcf2e4 100%);
border: 1px solid rgba(18, 60, 99, .12);
box-shadow: 0 14px 34px rgba(16, 40, 62, .16);
}
.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;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-soft);
}
/* the connector: a dashed trail running toward MyGeo, ending in an orange chip */
.al-arrow {
flex: 1 1 auto;
max-width: 190px;
min-width: 54px;
display: flex;
align-items: center;
gap: 8px;
}
.al-trail {
flex: 1 1 auto;
height: 3px;
border-radius: 999px;
background: repeating-linear-gradient(90deg, #c96806 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 #ff980d is
nowhere near readable at an 18px glyph */
color: #101b26;
background: linear-gradient(135deg, #ff980d 0%, #e07a0c 100%);
box-shadow: 0 6px 16px rgba(176, 110, 12, .4);
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-plate { width: min(260px, 78vw); height: 132px; }
.al-arrow { flex: 0 0 auto; max-width: none; min-width: 0; flex-direction: column; height: 74px; }
.al-trail {
width: 3px;
height: auto;
background: repeating-linear-gradient(180deg, #c96806 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 ON THE PARAGRAPH 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 MEASURE IS NOT CAPPED HERE, and that is a decision, not an omission.
It used to be. This block carried `max-width: var(--measure); margin-inline:
auto`, which held the column to 66ch and centred it inside the panel — the
paragraph still filled its column edge to edge, so justification had a right
edge to reach, and the copy sat at a readable width. That reasoning was sound
and the result was not: on a panel spanning the container it left 180-280px of
empty card either side of every paragraph, worst of all on /igeo, where the
floated .igeo-mark pushed the centred column further off the left edge. Read as
a page rather than as a paragraph, the panel looked like a frame around a
column that had missed it — which is precisely the failure the cap was there
to avoid, arriving from the other direction.
So the block fills its panel and the panel decides the width. Know the cost:
these run 102-118ch at 1440px (measured, in the panels on About, /igeo, both
Olympiad pages and Explorer Results) where comfortable is 60-75ch. Requested
deliberately, with the white space understood to be the bigger problem of the
two.
If that ever needs pulling back, narrow the PANEL, not this block — see
.moment-card, which sets its card to the width of three photographs and lets
the copy fill it. Re-capping here just puts the gutters back inside the card.
Not applied to .geo-intro-lead, which has its own justify rule further down:
the Introduction sheet caps that copy at 66ch rather than letting it fill its
panel, because on that layout the copy has the whole field to itself and the
panel is the full container width. */
.geo-justify p,
.geo-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: 16px;
border: 1px solid var(--border);
background: #fffaf2;
box-shadow: 0 12px 30px rgba(16, 40, 62, .12);
transition: transform .3s ease, box-shadow .3s ease;
}
.fee-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(16, 40, 62, .2); }
/* ---- header: the tier's name on brand gold -------------------------------- */
.fee-card-head {
padding: 15px 18px;
background: linear-gradient(160deg, #1d5a94 0%, #8a5610 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 gold band — see the same note on the
video playlist header */
.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, #1a5183 0%, #08243f 100%);
color: #fff;
font-size: .8rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
box-shadow: 0 3px 10px rgba(8, 36, 63, .35);
}
/* 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(18, 60, 99, .1);
border: 1px solid rgba(18, 60, 99, .28);
color: #123c63;
font-size: .72rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.fee-pill--muted {
background: rgba(16, 40, 62, .07);
border-color: rgba(16, 40, 62, .16);
color: var(--text-soft);
}
.fee-card.is-ended { opacity: .72; }
.fee-card.is-ended .fee-card-head { background: linear-gradient(160deg, #8d8168 0%, #746a55 100%); }
.fee-card.is-ended:hover { transform: none; box-shadow: 0 12px 30px rgba(16, 40, 62, .12); }
/* ---- 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: #123c63; }
/* 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 MyGeo's home page runs twelve sections where the inherited
engine assumes three or four.
It is gone, and nothing here should bring it back. The three Explorer sites
are meant to read as one family, and every value it overrode is identical in
MyGeo'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 "MyGeo 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). */
.geo-head-text .eyebrow { margin-bottom: 14px; }
.geo-head + .lead { margin-bottom: 12px; text-align: center; margin-inline: auto; }
/* A lead that is one sentence and just over the reading measure, so `.lead`'s
`max-width: var(--measure)` broke it onto a second line carrying three words —
which looks like a mistake rather than a paragraph. Off the cap, it sets on one
line on a desktop and still wraps to the container on a phone, where wrapping is
what it should do.
Opt-in per sentence, not a change to `.lead`. The measure is right for every
lead that is actually a paragraph; this is for the ones that are a single line
and miss by a few words. Check the sentence still fits before adding it — a
genuinely long lead set to the full container width is much worse than a wrap. */
.geo-lead-wide { max-width: none; }
/* 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. */
.geo-head-text { min-width: 0; }
.geo-head-text .eyebrow { margin-bottom: 10px; }
/* ---- Introduction: the map sheet -------------------------------------------
A sheet laid out the way a printed map sheet is: the statement across the
FIELD with the compass rose out in the right margin, and the objectives ruled
into a LEGEND BLOCK along the foot.
WHY THIS ONE IS NOT A .gx-glass PANEL, AND NOT A COLUMN SPLIT.
----------------------------------------------------------------------------
All four Explorer sites share this layout engine, and each is meant to carry
its own design rather than its own hue. The first attempt at that changed only
the trim — a sheet instead of a glass card, waypoint markers instead of
rounded icon tiles — and kept the sibling composition underneath: paragraph in
a left column, list in a right column, ornament under the paragraph. It still
read as their section, because arrangement is what the eye takes in before any
of the detail.
So the arrangement is what changed here. Stacked, not split: the copy owns the
full width of the field at a reading measure, and the objectives run ACROSS the
foot in a bordered key divided by dashed rules, rather than DOWN a column
beside the copy. It is also shorter than the split, because the paragraph is no
longer setting the panel's height against a list standing next to it.
Not the Important Dates rail with different trim either: that is stations
threaded on a line with nothing boxing them, and its own comment says the rail
is the shape the siblings use. This is a ruled key with a titled tab.
A deliberate ONE-SECTION treatment, not a panel style to roll out. The rest of
the page stays on .gx-glass — a sheet everywhere is a sheet nowhere. */
.geo-intro-sheet {
/* the paper tone, named because the sheet, the legend block and anything that
has to punch a hole in the graticule all have to agree on it exactly */
--sheet-paper: #fdf7ec;
position: relative;
padding: clamp(24px, 3vw, 40px) clamp(22px, 2.8vw, 38px);
border: 1px solid rgba(18, 60, 99, .45);
border-radius: 3px; /* all but square — a trimmed sheet, not a card */
background:
repeating-linear-gradient(0deg, rgba(18, 60, 99, .06) 0 1px, transparent 1px 56px),
repeating-linear-gradient(90deg, rgba(18, 60, 99, .06) 0 1px, transparent 1px 56px),
var(--sheet-paper);
box-shadow: 0 12px 30px rgba(16, 40, 62, .07);
}
/* the inner neatline */
.geo-intro-sheet::before {
content: "";
position: absolute; inset: 8px;
border: 1px solid rgba(18, 60, 99, .20);
pointer-events: none;
}
/* Corner ticks, where a sheet's neatline is trimmed. Eight background layers on
one pseudo-element: a horizontal and a vertical bar pinned to each corner of
the inner rule. */
.geo-intro-sheet::after {
--tick: rgba(18, 60, 99, .55);
content: "";
position: absolute; inset: 8px;
pointer-events: none;
background:
linear-gradient(var(--tick), var(--tick)) 0 0 / 18px 2px no-repeat,
linear-gradient(var(--tick), var(--tick)) 0 0 / 2px 18px no-repeat,
linear-gradient(var(--tick), var(--tick)) 100% 0 / 18px 2px no-repeat,
linear-gradient(var(--tick), var(--tick)) 100% 0 / 2px 18px no-repeat,
linear-gradient(var(--tick), var(--tick)) 0 100% / 18px 2px no-repeat,
linear-gradient(var(--tick), var(--tick)) 0 100% / 2px 18px no-repeat,
linear-gradient(var(--tick), var(--tick)) 100% 100% / 18px 2px no-repeat,
linear-gradient(var(--tick), var(--tick)) 100% 100% / 2px 18px no-repeat;
}
/* ---- The field: statement, and the rose in the margin ----------------------
`auto` on the second track, not a fraction: the rose is a fixed ornament and
should take exactly its own width, leaving the copy the rest up to its measure
and the slack between them as margin. A fractional track would have grown the
rose on wide screens, which is the one thing a marginal ornament must not do. */
.geo-intro-field {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(24px, 4vw, 56px);
align-items: center;
}
.geo-intro-lead p {
/* A reading measure, capped. The copy has the field to itself now, and a
justified line running the full 1130px of the sheet would be unreadable —
the cap is what keeps this a text block on a sheet rather than a banner. */
max-width: 66ch;
margin: 0;
font-size: clamp(1rem, 1.15vw, 1.08rem);
line-height: 1.75;
color: var(--text-soft);
/* Justified, with whole words — hyphens deliberately off, as in .geo-justify.
------------------------------------------------------------------------
Worth knowing what changed: in the old column split this was the tightest
justified measure on the site, about 45-50 characters, and the loose word
spacing that produced was weighed and accepted. On the field it runs to the
66ch cap, which is a forgiving measure — so the setting that was the risky
one here is now the comfortable one. If it ever reads as too loose again,
the fix is ragged-right, not hyphens. */
text-align: justify;
hyphens: none;
text-wrap: pretty;
}
.geo-intro-lead p + p { margin-top: .8em; }
/* the sheet is not a .gx-glass, so the panel link rule up in the palette block
no longer reaches this copy — say it here instead */
.geo-intro-lead a:not(.btn) { color: var(--link); }
/* ---- The compass rose ------------------------------------------------------
MyGeo's drawn map sheet inside a surveyor's bearing ring: two hairline circles
with graduations between them, one every 15°, and an orange north mark on the
limb. Decoration only.
In the margin beside the copy, which is where a map carries its rose. It used
to sit under the paragraph, filling the foot of a column — a job that no longer
exists now that the copy is not in a column. */
.geo-intro-art {
position: relative;
justify-self: end;
width: clamp(116px, 12vw, 150px);
aspect-ratio: 1;
display: grid; place-items: center;
}
/* The limb, and the inner circle the graduations are struck against. `inset: 7%`
is the radius arithmetic: inset from all four edges of a square shrinks the
radius by the same fraction, so 7% in gives a circle at r=43% — exactly the
inner edge of the tick band below. Keep the two numbers in step or the ticks
float free of their circle. */
.geo-intro-art::before {
content: "";
position: absolute; inset: 0; border-radius: 50%;
border: 1px solid rgba(18, 60, 99, .38);
}
.geo-intro-art::after {
content: "";
position: absolute; inset: 7%; border-radius: 50%;
border: 1px solid rgba(18, 60, 99, .22);
}
/* The graduations: a repeating conic gradient masked down to the band between
the two circles, so 24 ticks fall at 15° each. One slow rotation, which reads
as a bezel being turned rather than as anything asking for attention.
The ticks are 2° wide, not the 1.1° first tried: at this size that came out
about a pixel across, and at .5 opacity a one-pixel navy hairline on cream is
effectively invisible. Widen the tick before reaching for more contrast.
`closest-side` IS LOAD-BEARING, and the percentages are doubled because of it.
A radial-gradient sizes itself `farthest-corner` by default, so on a square box
100% is the corner — 70.7% of the width, not 50%. Written the obvious way, as
`transparent 0 43%, #000 43% 49.5%`, the band lands at r=30-35% of the box
instead of 43-49.5% and the graduations are struck straight through the drawn
sheet. `closest-side` puts 100% on the edge midpoint, so the stops are simply
twice the radius wanted: 43% -> 86%, 49.5% -> 99%. Anything reading this to
move the band should convert the same way. */
.geo-rose-ticks {
position: absolute; inset: 0; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, #123c63 0 2deg, transparent 2deg 15deg);
-webkit-mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 86%, #000 86% 99%, transparent 99%);
mask: radial-gradient(circle closest-side at 50% 50%, transparent 0 86%, #000 86% 99%, transparent 99%);
opacity: .6;
animation: geo-ring-spin 26s linear infinite;
}
/* Unmasked, that gradient is a solid striped disc sitting over the drawing —
far worse than no graduations at all, so drop them rather than let it render. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
.geo-rose-ticks { display: none; }
}
/* The north mark: one orange arrowhead in the clear paper between the inner
circle (r=43%, i.e. 7% in) and the drawn sheet (r=31%, 19% in), pointing out at
the graduations. Orange as a FILL, which is the only thing this brand's orange
is allowed to do. */
.geo-rose-north {
position: absolute; top: 8.5%; left: 50%;
width: 0; height: 0;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 9px solid #ff980d;
filter: drop-shadow(0 1px 2px rgba(16, 40, 62, .28));
}
/* the drawn sheet fills the inner circle */
.geo-intro-art-core {
display: grid; place-items: center;
width: 70%; height: 70%; border-radius: 50%;
box-shadow: 0 10px 24px rgba(16, 40, 62, .18);
}
.geo-sheet { display: block; width: 100%; height: 100%; overflow: visible; }
/* ---- The legend block ------------------------------------------------------
The objectives along the foot of the sheet: a titled tab, then one cell per
objective, divided by dashed rules and read ACROSS. A map's legend.
Read across, not down, is the whole difference. A vertical list of icon-and-
sentence rows beside the copy is the sibling shape no matter what the icon is
drawn as, and it is what made the first pass at this section still read as
theirs. It is also the cheaper layout by height: three sentences side by side
cost one block of three lines instead of three blocks of two. */
.geo-key {
margin-top: clamp(20px, 2.6vw, 30px);
border: 1px solid rgba(18, 60, 99, .30);
background: rgba(255, 255, 255, .40); /* lifts the block off the graticule */
}
.geo-key-label {
margin: 0;
padding: 9px clamp(14px, 1.6vw, 18px);
border-bottom: 1px solid rgba(18, 60, 99, .22);
max-width: none; /* a
in a prose column inherits the 66ch measure */
font-size: .72rem; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: #123c63;
}
/* `--keys` comes from the row count in the markup, the way the Important Dates
rail takes `--stations`. Fixed tracks rather than auto-fit on purpose: the
dashed dividers below are drawn with an adjacent-sibling selector, which has no
way to know which cell starts a wrapped row, so the row must not wrap. Below
900px it becomes one column and the dividers turn horizontal. */
.geo-key-row {
display: grid;
grid-template-columns: repeat(var(--keys, 3), minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
max-width: none;
}
.geo-key-cell {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 15px clamp(14px, 1.6vw, 18px);
max-width: none;
}
.geo-key-cell + .geo-key-cell { border-left: 1px dashed rgba(18, 60, 99, .26); }
.geo-key-cell p {
margin: 0;
max-width: none;
color: var(--text-soft);
font-size: .95rem;
line-height: 1.55;
}
/* A legend swatch: square, because that is what a key uses, and because the
rounded chip and the circle are both already spoken for on this page — the
chip is the siblings' feature tile, the circle is the Important Dates station. */
.geo-key-sym {
display: grid; place-items: center;
width: 32px; height: 32px;
border-radius: 3px;
color: #123c63;
background: var(--sheet-paper, #fdf7ec);
border: 1.5px solid #123c63;
transition: background-color .3s ease;
}
/* orange as a FILL under the navy icon stroke, never as the ink itself */
.geo-key-cell:hover .geo-key-sym { background: #ffb44a; }
/* One column below 900px: at that width the cells are each too narrow to hold a
sentence without breaking it into three or four words a line, and the field's
two tracks are too narrow to sit side by side. */
@media (max-width: 900px) {
.geo-intro-field { grid-template-columns: 1fr; gap: clamp(18px, 3vw, 26px); }
.geo-intro-art { justify-self: center; }
.geo-intro-lead p { max-width: none; }
.geo-key-row { grid-template-columns: 1fr; }
.geo-key-cell + .geo-key-cell {
border-left: 0;
border-top: 1px dashed rgba(18, 60, 99, .26);
}
}
@media (prefers-reduced-motion: reduce) {
.geo-rose-ticks { animation: none; }
.geo-key-sym { transition: none; }
}
/* ---- Competition format ----------------------------------------------------
Five specs, a handful of words each. As full-width label/value rows they made
a panel that was mostly rule and empty space; as cells they fit two to a row
and the section is about a third of the height.
TWO EQUAL COLUMNS, not content-sized chips. These packed like chips before —
flex, each cell as wide as its own words, the row wrapping where it ran out.
That reads as a tag cloud rather than a spec sheet: no two cells lined up, so
the eye had no column to run down, and the last row centred itself under
whatever the row above happened to be. Two equal columns give the labels one
left edge each and the section reads as a table without being one.
An odd last spec takes the whole row rather than sitting half-width with a gap
beside it — five specs come out 2/2/1, which is also the row that suits the
longest value. .geo-links uses this same :last-child:nth-child(odd) trick for
the same reason.
Which spec lands there is the CONTENT's business, not this rule's: it is
whichever one is last in admin. That is now Necessity — the longest value —
which is the one that suits the wide row, so the two agree. This note used to
record the opposite (Languages last, Necessity stranded in a half cell); the
rows were reordered in admin since. If they are reordered again the wide row
follows, which is the point: it is the editor's call, not this rule's, because
it changes which spec the section emphasises. */
/* Narrower than the container, and centred. At the full 1132px of content width
the cells came out 559px each against ~78px tall — wide, flat slabs holding
two short words, which is the proportion this was asked to move away from.
1040 puts a cell at 511px, and the padding and icon below bring it to ~94px
tall, which is about 5.4:1 rather than 7:1. The section still spans wider than
the copy anywhere else on the page, so it does not read as inset. */
.geo-format {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
max-width: 1040px;
margin-inline: auto;
}
.geo-fmt {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 16px;
padding: 20px 22px;
border-radius: 18px;
}
.geo-fmt:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* One column on a phone: at 560px a half cell is ~250px, which is narrower than
the longest value's first word run and breaks the label off its own line. */
@media (max-width: 560px) {
.geo-format { grid-template-columns: minmax(0, 1fr); }
}
.geo-fmt-ico {
display: grid; place-items: center;
width: 54px; height: 54px; border-radius: 15px;
background: linear-gradient(140deg, rgba(255, 152, 13, .18), rgba(251, 230, 200, .38));
border: 1px solid rgba(18, 60, 99, .14);
}
.geo-fmt-text { min-width: 0; }
/* set at the same size as the stage labels, so the two card sets on this page
name themselves at one size rather than two */
.geo-fmt-label {
display: block;
font-size: .9rem; font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: #123c63;
margin-bottom: 3px;
}
[data-theme="warm"] .geo-fmt p {
margin: 0; max-width: none;
color: var(--text); font-weight: 600; font-size: 1.04rem; line-height: 1.4;
}
/* ---- 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 a drawn globe: the globe in its sky for
Primary, cut away to the core 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. */
.geo-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) {
.geo-cats {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: clamp(18px, 2.2vw, 28px);
}
}
.geo-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: 20px;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.geo-cat:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(16, 40, 62, .13);
border-color: rgba(255, 152, 13, .45);
}
.geo-cat-art {
display: grid; place-items: center;
filter: drop-shadow(0 10px 18px rgba(16, 40, 62, .22));
}
.geo-cat-art .geo-cat-art-svg { display: block; width: clamp(84px, 11vw, 112px); height: auto; }
.geo-cat-body { min-width: 0; }
.geo-cat h3 { margin: 0 0 12px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.geo-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.geo-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);
}
.geo-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 */
.geo-cat li svg { justify-self: center; color: #123c63; position: relative; top: 3px; }
.geo-cat-txt { line-height: 1.5; }
.geo-cat li b { color: #08243f; }
.geo-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 */
.geo-cat { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.geo-cat-body { width: 100%; }
.geo-cat li { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.geo-cat { transition: none; }
.geo-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. */
.geo-counters {
display: flex; justify-content: center;
gap: clamp(28px, 7vw, 90px); flex-wrap: wrap;
}
.geo-count { text-align: center; }
.geo-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(255, 152, 13, .22), rgba(255, 255, 255, .9) 66%);
border: 1px dashed rgba(18, 60, 99, .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. */
.geo-ring::before {
content: ""; position: absolute; inset: -9px; border-radius: 50%;
border: 3px solid rgba(18, 60, 99, .16);
border-top-color: #c96806;
border-right-color: rgba(217, 141, 24, .55);
filter: drop-shadow(0 0 4px rgba(217, 141, 24, .35));
animation: geo-ring-spin 12s linear infinite;
}
@keyframes geo-ring-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .geo-ring::before { animation: none; } }
.geo-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, #c96806, #123c63);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.geo-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. */
.geo-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 */
.geo-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(18, 60, 99, .35), #a8752b 45%, #ff980d);
opacity: .5;
}
.geo-station { position: relative; z-index: 1; text-align: center; }
/* the station disc: icon, with the step number tucked into its corner. Kept white
rather than tinted — the icons inside are full-colour illustrations, and a tinted
disc muddies them. */
.geo-station-node {
position: relative;
display: grid; place-items: center;
width: 74px; height: 74px; margin: 0 auto 14px;
border-radius: 50%;
background: #fff;
border: 1px solid rgba(18, 60, 99, .2);
/* the cream halo punches the rail out behind each disc */
box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px rgba(18, 60, 99, .12), 0 8px 18px rgba(16, 40, 62, .1);
color: #123c63;
transition: transform .3s ease, box-shadow .3s ease;
}
.geo-station:hover .geo-station-node {
transform: translateY(-4px);
box-shadow: 0 0 0 7px var(--bg), 0 0 0 8px rgba(255, 152, 13, .45), 0 14px 26px rgba(16, 40, 62, .16);
}
.geo-station h3 {
margin: 0 0 8px; font-size: .98rem; line-height: 1.35;
color: #08243f; text-wrap: balance;
}
.geo-station-date {
display: inline-block; margin: 0;
padding: 5px 12px; border-radius: 999px;
background: var(--water-soft);
border: 1px solid rgba(18, 60, 99, .16);
font-size: .86rem; font-weight: 700; color: #123c63;
}
/* competition day: the one date a visitor must not miss. Marked with an orange ring
and glow rather than an orange fill — a fill would sit under the illustration and
flatten it. */
.geo-station.is-hl .geo-station-node {
border: 2px solid #e07a0c;
box-shadow: 0 0 0 7px var(--bg), 0 0 0 9px rgba(217, 141, 24, .4), 0 10px 26px rgba(217, 141, 24, .3);
}
/* 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 */
.geo-station.is-hl .geo-station-date {
background: linear-gradient(135deg, #ff980d, #e07a0c);
border-color: #c96806;
color: #101b26;
font-weight: 800;
box-shadow: 0 6px 16px rgba(217, 141, 24, .34);
}
.geo-station.is-hl h3 { color: #123c63; 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) {
.geo-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. */
.geo-rail::before { display: none; }
.geo-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(145, 123, 41, .42);
}
.geo-station:first-child::before { top: 50%; }
.geo-station:last-child::before { bottom: 50%; }
.geo-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. */
.geo-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. */
.geo-station-node {
position: absolute;
left: 0;
top: 50%;
margin: -37px 0 0;
}
.geo-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. */
.geo-station-date { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.geo-station-node { transition: none; }
.geo-station:hover .geo-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 cartography 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 compass rose in each bottom corner, the pin and
graticule 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. */
.geo-workshop {
position: relative;
margin: clamp(18px, 3vw, 36px) 0;
padding-block: clamp(34px, 5vw, 62px);
background:
var(--geo-rose-light),
var(--geo-rose-light),
var(--geo-ground-tex-light),
radial-gradient(120% 90% at 12% -10%, rgba(255, 152, 13, .20), transparent 58%),
radial-gradient(110% 90% at 92% 4%, rgba(127, 178, 240, .14), transparent 55%),
linear-gradient(165deg, #08243f 0%, #123c63 46%, #0a2b48 100%);
/* the two roses sit past the bottom edge so they read as continuing off 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(255, 152, 13, .35);
color: #f6efe2;
}
/* A contour line 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. */
.geo-workshop::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 22px;
background: var(--geo-contour-tile-light) bottom center / 220px 22px repeat-x;
pointer-events: none;
}
/* the relief seam the other bands use, in the light ink this one needs */
.geo-workshop::before {
content: "";
position: absolute; inset-inline: 0; top: 0; height: 6px;
background-image: radial-gradient(circle at 3px 3px, rgba(255, 152, 13, .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. */
.geo-workshop .geo-head .section-title,
[data-theme="warm"] .geo-workshop .geo-head .section-title { color: #fff; }
.geo-workshop .section-title .grad {
background: linear-gradient(92deg, #f6cf9e 0%, #ff980d 50%, #7fb2f0 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.
#f6cf9e 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 #ffefdb, 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"] .geo-workshop .eyebrow {
background: rgba(0, 0, 0, .20);
border-color: rgba(255, 152, 13, .5);
color: #f6cf9e;
}
/* .geo-badge is kept legible on the band in case the eligibility chip is ever put
back, but nothing renders it on this page today. */
.geo-workshop .geo-badge {
background: linear-gradient(135deg, #ff980d, #e07a0c);
border-color: #c96806;
color: #101b26;
}
/* 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"] .geo-workshop .gx-glass {
background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(253, 247, 232, .97) 100%);
border-color: rgba(255, 255, 255, .45);
box-shadow: 0 24px 60px rgba(10, 30, 18, .4);
/* 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"] .geo-workshop .gx-glass p,
[data-theme="warm"] .geo-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. */
.geo-workshop .geo-tabs {
justify-content: center; gap: 10px;
border-bottom: 0;
margin-bottom: clamp(18px, 2.4vw, 26px);
}
.geo-workshop .geo-tab {
border-radius: 999px;
padding: 10px 20px;
background: linear-gradient(150deg, #fbac53, #ef8410);
border: 1px solid #c96806;
color: #101b26;
}
.geo-workshop .geo-tab:hover {
background: linear-gradient(150deg, #ffbe85, #ff980d);
color: #0d151d;
}
/* Solid, not translucent: this was tuned when the panel behind it was dark green,
and on the cream panel a translucent fill washes out to grey. */
.geo-workshop .geo-tab[aria-selected="true"] {
background: linear-gradient(150deg, #1d5a94, #0c3050);
border-color: #123c63;
color: #fff;
}
.geo-workshop .geo-tab:focus-visible { outline: 2px solid #f6cf9e; outline-offset: 2px; }
/* Blocks inside the panel — the workshop's own material runs as titled blocks,
not as loose prose. */
.geo-wk-block {
padding: clamp(16px, 2vw, 24px);
border-radius: 16px;
background: #fff;
border: 1px solid rgba(18, 60, 99, .14);
box-shadow: 0 6px 18px rgba(16, 40, 62, .05);
}
.geo-wk-block + .geo-wk-block,
.geo-wk-facts + .geo-wk-block,
.geo-wk-block + .geo-wk-facts { margin-top: 16px; }
.geo-wk-block h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.15rem; }
.geo-wk-block h4 { display: flex; align-items: center; gap: 9px; margin: 18px 0 8px; font-size: 1rem; }
.geo-wk-block h3 + p, .geo-wk-block h4 + ul { margin-top: 0; }
.geo-wk-block ul { margin: 0; padding-left: 1.15em; }
.geo-wk-block li { margin-bottom: .4em; }
.geo-wk-note {
margin: 14px 0 0; padding: 10px 14px;
border-left: 3px solid #ff980d; border-radius: 0 10px 10px 0;
background: rgba(255, 152, 13, .12);
font-size: .92rem; font-style: italic;
}
.geo-wk-cta { margin: 18px 0 0; }
/* the Infopack tab is a centred sheet of posters, so its button centres with them */
.geo-wk-posters + .geo-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. */
.geo-wk-facts {
display: grid; gap: 14px; margin-top: 16px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.geo-wk-facts--two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.geo-wk-fact {
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(155deg, #fbac53, #ef8410);
border: 1px solid #c96806;
color: #101b26;
}
/* .gx-glass is an ancestor of these cards, so the panel's light-ink rules above
out-specify a plain `.geo-wk-fact p`. Matched through the panel here, which is
what keeps the ink dark on the amber fill. */
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact h4 { margin: 0 0 8px; color: #101b26; font-size: .95rem; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact p { margin: 0; color: #13202d; font-weight: 600; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact li { color: #13202d; }
.geo-wk-fact dl { margin: 0; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact dt { margin-top: 8px; font-weight: 700; color: #101b26; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact dt:first-child { margin-top: 0; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact dd { margin: 0 0 0 14px; color: #35301a; }
[data-theme="warm"] .geo-workshop .gx-glass .geo-wk-fact b { color: #101b26; }
/* Contact + social, two columns inside one block */
.geo-wk-contact { display: grid; gap: clamp(14px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.geo-wk-contact h4:first-child { margin-top: 0; }
[data-theme="warm"] .geo-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. */
.geo-wk-posters {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(210px, 300px));
justify-content: center;
}
.geo-wk-posters a {
display: block; border-radius: 14px; overflow: hidden;
border: 1px solid rgba(18, 60, 99, .18);
box-shadow: 0 12px 26px rgba(16, 40, 62, .14);
transition: transform .3s ease;
}
.geo-wk-posters a:hover { transform: translateY(-4px); }
.geo-wk-posters img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
.geo-wk-posters a { transition: none; }
.geo-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. */
.geo-tabs {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 0 0 18px;
border-bottom: 1px solid rgba(18, 60, 99, .18);
}
.geo-tab {
appearance: none; background: transparent; cursor: pointer;
border: 0; border-bottom: 2px solid transparent; border-radius: 10px 10px 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;
}
.geo-tab:hover { color: var(--accent); background: rgba(255, 152, 13, .10); }
.geo-tab[aria-selected="true"] { color: #123c63; background: rgba(255, 152, 13, .14); border-bottom-color: #ff980d; }
.geo-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. */
.geo-panel[hidden] { display: none !important; }
/* ---- Syllabus --------------------------------------------------------------
Two full-width blocks rather than two columns: Primary is three subject groups
and Secondary is four, and each group needs the width to hold a topic name. */
.geo-syl { display: grid; gap: 16px; }
.geo-syl-block { padding: clamp(18px, 2.2vw, 26px); border-radius: 18px; }
.geo-syl-block h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
/* The legend: a track per subject group, numbered topics down each.
auto-fit rather than a track count from the markup, and the count is left to
come out of the content. The grid lays as many 210px tracks as fit and
collapses the ones nothing lands in, so Primary's three groups make three
columns and Secondary's four make four, off the same rule — and a fifth group
added in the admin gets a track without anyone editing this file. It steps
down to two tracks and then one as the viewport narrows, which is the whole
of the responsive behaviour; no media query below.
min() on the minimum: a bare minmax(210px, 1fr) cannot go under 210px, so on a
narrow phone the track would overflow the panel it sits in rather than
shrink. */
.geo-syl-map {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: clamp(14px, 2vw, 28px) clamp(18px, 2.4vw, 34px);
}
/* The rule over each group is the legend's key line. Every group carries the
same one — nothing here ranks them, and the order is the editor's.
Amber rather than --brand-300, which was the first choice and measured 1.36:1
against the panel. That is a line you have to look for. A key line that has to
be looked for is not doing the one job it has, which is to say where a group
starts. --brand is 2.02:1 and carries on hue besides, and amber is a FILL here
— never text — which is the only way this palette permits it. */
.geo-syl-group { border-top: 2px solid var(--brand); padding-top: 11px; }
.geo-syl-group-name {
margin: 0 0 9px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
/* The colour has to carry the theme and the panel, or it does not land at all.
warm-theme.css paints every h4 inside a .gx-glass with `[data-theme="warm"]
.gx-glass h4`, which is (0,2,1); a bare `.geo-syl-group-name` is (0,1,0) and
loses to it no matter which file the browser reads last. Written the short
way, this declaration was dead and the names rendered --text — legible, so
nothing looked broken, which is exactly how the palette bug in the :root note
at the top of this file shipped. Same shape, same fix. */
[data-theme="warm"] .gx-glass .geo-syl-group-name { color: var(--accent); }
.geo-syl-topics { list-style: none; margin: 0; padding: 0; }
/* Grid, not a bullet: the number sits in its own track so a topic that wraps
hangs under itself instead of running back beneath its marker. The second
track is the anonymous item the topic text forms — which is also why the
space before it in the markup has to stay. */
.geo-syl-topics li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 9px;
align-items: start;
max-width: none;
margin: 0 0 7px;
font-size: .95rem;
line-height: 1.45;
}
.geo-syl-topics li:last-child { margin-bottom: 0; }
/* A waypoint, squared off at one corner so it reads as a marker dropped on a
map rather than as a bullet. Navy on amber measures 5.2:1 — amber stays a
fill here, which is the one way this palette is allowed to use it. */
.geo-syl-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 8px 8px 8px 3px;
background: var(--brand);
color: var(--accent);
font-size: .72rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* The fallback path, for a block syllabus_groups() cannot read: the editor's
rich text as written, in two text columns, each subject kept whole across the
break. This is what both blocks used to be. */
.geo-syl-cols ul { columns: 2; column-gap: clamp(24px, 3vw, 48px); margin: 0; padding-left: 18px; }
.geo-syl-cols li { break-inside: avoid; margin-bottom: .55em; max-width: none; }
.geo-syl-cols li:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
.geo-syl-cols ul { columns: 1; }
}
/* ---- Syllabus chips --------------------------------------------------------
Subject keywords, not a sequence — chips let the eye count the ground covered. */
.geo-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.geo-chips li {
max-width: none;
padding: 5px 12px; border-radius: 999px;
background: var(--water-soft);
border: 1px solid rgba(18, 60, 99, .18);
font-size: .88rem; font-weight: 600; color: #123c63;
}
/* ---- Quick facts bar -------------------------------------------------------
The four-up strip under the hero, as on both sibling sites. Hairline dividers
between cells rather than four separate cards: it is one fact read four ways,
not four unrelated tiles. The amber rule along the top ties it to the header's
accent line. */
.geo-facts {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
overflow: hidden;
}
.geo-facts::after {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(135deg, #ff980d 0%, #a8752b 55%, #123c63 100%);
}
/* Padding left at the sibling sites' value, not tightened with the rest of the page:
this bar is the first thing under the hero and carries only four figures, so it is
the one place on the page where the air is doing work.
The side padding is the exception — 12px was not enough for the longest label
("Objective Questions"), which ran within a few pixels of the hairline divider and
made a four-up bar read as cramped. It scales with the viewport now, so the gutter
holds at the widths where the labels are closest to wrapping. */
.geo-fact { position: relative; text-align: center; padding: clamp(18px, 2.4vw, 26px) clamp(16px, 1.8vw, 28px); }
.geo-fact + .geo-fact::before {
content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px;
background: rgba(18, 60, 99, .16);
}
.geo-fact b {
display: block;
font-family: var(--font-display); font-weight: 800;
font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.1;
color: #123c63;
}
/* Its own class rather than `.geo-fact span`. That selector is (0,1,1) and used to also
match the icon's span at (0,1,0), overriding it and turning the disc into a block —
which is why the icons once sat hard left of centred figures. The icons are gone now,
but the class stays: naming the label directly is what stops the next element added
to this cell from inheriting label styling by accident. */
.geo-fact-label {
display: block; margin-top: 8px;
font-size: .8rem; font-weight: 600; letter-spacing: .02em;
color: var(--text-soft);
text-wrap: balance;
}
@media (max-width: 700px) {
.geo-facts { grid-template-columns: repeat(2, 1fr); }
/* with two per row, cells 1 and 3 start a row and must not carry a divider */
.geo-fact:nth-child(odd)::before { display: none; }
}
/* ---- Centred card ----------------------------------------------------------
The closing-CTA pattern: a glass card whose heading, copy and button all sit on
the centre line.
The second rule is the one that matters. redesign.css gives every paragraph in a
glass card `max-width: var(--measure)` (66ch) to keep long prose readable. That
constrains the box but does not move it, so in a centred card the words inside
were centring while the box itself stayed flush left — the copy and the button
ended up left of the heading, which is full-width and genuinely centred. Putting
the box back on the centre line is what margin-inline does here.
redesign.css already carries `.books-empty p, .pyq-empty p { margin-inline: auto }`
for the same reason; those two classes do not exist on this site, so this is the
general form rather than a third one-off.
NOT written as `.geo-card-center :where(p, .prose)`. :where() contributes zero
specificity, which put that selector at (0,1,0) — under `.prose p` at (0,1,1), whose
`margin: 0 0 1rem` SHORTHAND resets margin-inline back to 0. Richtext copy (which is
always wrapped in .prose) therefore stayed flush left while plain
in the same
card centred fine. Each selector below is deliberately specific enough to win on its
own rather than on file order. */
.geo-card-center { text-align: center; }
.geo-card-center p,
.geo-card-center .prose,
.geo-card-center .prose p { margin-inline: auto; }
/* A list is the one thing that should NOT have its items centred: bullets have to line
up under each other or the list stops reading as one. The block is centred and the
items inside it stay left-aligned. Neither card carries a list today — this is here
because the copy is editor-written richtext, so one can appear without a deploy. */
.geo-card-center .prose :is(ul, ol) {
width: fit-content;
max-width: 100%;
margin-inline: auto;
text-align: left;
}
/* ---- Quick links -----------------------------------------------------------
Three onward routes above the closing CTA. Two-up, with the third centred
across the full width rather than left hanging in an empty second column. */
.geo-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.geo-links > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 520px; width: 100%; }
.geo-link { text-align: center; }
.geo-link h3 { margin: 0 0 14px; font-size: var(--fs-h4); color: var(--accent); }
@media (max-width: 700px) {
.geo-links { grid-template-columns: minmax(0, 1fr); }
.geo-links > :last-child:nth-child(odd) { max-width: none; }
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.stat { text-align: center; padding: 22px 16px; }
.stat-num {
display: block;
font-size: clamp(2.2rem, 6vw, 3.4rem);
font-weight: 800;
line-height: 1;
background: linear-gradient(92deg, #c96806, #123c63);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.stat-label { display: block; margin-top: 8px; font-size: .9rem; letter-spacing: .1em;
text-transform: uppercase; font-weight: 600; color: var(--text-soft); }
/* Generic responsive tile grid used by categories, stages, disciplines, awards. */
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tile { padding: 20px 22px; }
/* flex so a leading icon sits on the text baseline row rather than pushing the
heading onto two lines */
.tile h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 1.05rem; }
.tile h3 .gx-ico { flex: 0 0 auto; color: var(--accent); }
/* text-wrap: pretty as the tile default — these are the narrowest text column on the
site (240px minimum in the auto-fit grid), so they are where a wrapping line is most
likely to strand its last word. The address overrides this to `balance` just below;
see there for why the two differ. */
.tile p, .tile li { color: var(--text-soft); text-wrap: pretty; }
.tile ul { margin: 0; padding-left: 18px; }
/* The postal address. Its longest line is 41 characters and this tile's text column
holds about 32 (the "Taman Danau Kota…" line fits exactly), so the street line
cannot fit and will wrap whatever we do here — the only question is where.
`pretty` optimises against a stranded last word, which broke it as
"…Off Jalan / Genting Klang," and split the road name. `balance` evens the two
halves instead, which puts the break before "Jalan" and keeps "Jalan Genting Klang"
whole. Balanced per segment, so the hard breaks the editor typed still stand.
Written as `.tile p.geo-addr` on purpose: `.tile p` above is (0,1,1), so a bare
`.geo-addr` at (0,1,0) would lose to it and keep inheriting `pretty`. */
.tile p.geo-addr { text-wrap: balance; }
/* ---- The five MyGeo objectives, set as a chart legend ----------------------
Three cards across with the last two centred left an orphan pair and told the
reader nothing about order. A plotted route fixed the order but cost a screen
and a half of height: alternating cards means every row carries an empty side,
so half the section was blank by construction.
A legend is what a chart uses when it has to explain five things in the least
room possible — a key, one line per entry, symbols in a column down the left.
It keeps the numbering, so the order still reads, and it has no facing side to
leave empty. Two columns on a wide screen, one on a phone. About 340px tall
against the route's 1250px, for the same five objectives and the same words.
The rule between entries is a hairline, not a border: a legend's entries are
separated, not boxed, and five boxes inside a panel that is itself a box was
the visual noise the cards had in the first place. */
.geo-legend {
list-style: none;
margin: 0;
padding: 0;
/* redesign.css caps `.gx-glass li` at the reading measure, which is right for
a bullet of prose and wrong for a list item that is the layout. It is
written in :where(), so it carries no specificity and nothing was
overriding it. */
max-width: none;
}
.geo-legend > li { max-width: none; break-inside: avoid; }
.geo-legend-entry {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 0;
border-top: 1px solid rgba(18, 60, 99, .13);
}
.geo-legend-key {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #fffdf7;
border: 2px solid #123c63;
color: #123c63;
font-weight: 800;
font-size: .82rem;
/* tabular figures so 01 and 05 are the same width and the discs do not jitter */
font-variant-numeric: tabular-nums;
}
.geo-legend-name {
margin: 0 0 .15em;
font-size: 1rem;
line-height: 1.3;
color: #08243f;
}
.geo-legend-note {
margin: 0;
font-size: .92rem;
line-height: 1.5;
color: var(--text-soft);
}
/* No entry is picked out. The last one was filled orange while this section was a
plotted route, where it read as the destination the line ended at. Without the
line it only reads as a rank, and the source claims none: the live site lists
five objectives with no emphasis on any. It was also keyed to :last-child —
position, not meaning — so a sixth objective would have moved the emphasis to
whatever happened to end up last. */
@media (min-width: 820px) {
/* Two COLUMNS, not a two-column grid. A grid makes both columns share a row
height, so the tallest entry of each pair sets the height of the entry
beside it and leaves a hole under the shorter one — with entries running
from two lines to five, that hole was most of the saving. Column flow lets
each entry take only the height it needs and fills down then across, so
01–03 sit left and 04–05 right with nothing padded to match.
Every entry keeps its top rule here, including the first of each column:
with column flow there is no way to know which entry starts column two,
and a rule across the top of both columns reads as the legend's own head
rule rather than as one column being ruled and the other not. */
.geo-legend {
columns: 2;
column-gap: clamp(24px, 3vw, 44px);
}
}
/* ---- The twelve syllabus topics, set as an index ---------------------------
See the note in about-us.blade.php for why this is not a grid of cards. The
short version: four cards across gave each topic 215px, which turned a
forty-word description into twelve lines and broke the topic names mid-word,
and every grid row was as tall as its tallest card.
Column flow rather than a two-column grid, for the same reason the Objectives
legend uses it: a grid would make each pair of entries share a height, and
these run from three lines to six. */
.geo-index {
list-style: none;
margin: 0;
padding: 0;
/* redesign.css caps `.gx-glass li` at the reading measure — right for a
bullet of prose, wrong for a list item that is the layout, and written in
:where() so it carries no specificity to notice. */
max-width: none;
}
.geo-index > li { max-width: none; break-inside: avoid; }
.geo-index-entry {
padding: 13px 0;
border-top: 1px solid rgba(18, 60, 99, .13);
}
.geo-index-topic {
margin: 0 0 .2em;
font-size: .98rem;
line-height: 1.3;
color: #08243f;
/* redesign.css sets `overflow-wrap: anywhere` on every heading, which breaks
INSIDE a word as soon as the word does not fit and also shrinks the
heading's min-content — which is how "resource management" came to be set
as "resource manageme / nt" in the old narrow cards. `break-word` breaks
only when a word genuinely cannot fit and leaves min-content alone, the
same correction geo-theme.css already makes for table cells. */
overflow-wrap: break-word;
}
/* The number sits in the margin rather than in the text, so the topic names line
up with each other instead of starting at four different x positions behind
"1", "10", "11", "12". Padding on the heading makes room for it. */
.geo-index-topic { padding-left: 32px; }
.geo-index-num {
display: inline-block;
width: 32px;
margin-left: -32px;
color: #8a5d1e;
font-weight: 700;
/* tabular figures so 01 and 12 occupy the same width */
font-variant-numeric: tabular-nums;
}
.geo-index-note {
margin: 0;
padding-left: 32px;
font-size: .9rem;
line-height: 1.5;
color: var(--text-soft);
}
@media (min-width: 820px) {
.geo-index {
columns: 2;
column-gap: clamp(28px, 3.4vw, 48px);
}
}
/* Discipline / partner imagery. */
.media-tile img { width: 100%; height: 168px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
/* Partner logos. One box per logo rather than a shared height cap: the marks run
from a 3.2:1 wordmark (Universiti Malaya) to a near-square crest (USM), and
capping height alone gave the wide ones three times the width of the narrow
ones. That is what pushed the seventh partner onto a row of its own — the row
was 6 + 1 not because seven is too many, but because two of the seven were
taking the space of six.
Boxed and gapped as below, all seven fit the panel's 1044px at full width with
room to spare (7 x 128 + 6 x 20 = 1016). Narrower than that it wraps centred,
which is the right behaviour once one row genuinely cannot hold them. */
.logo-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 20px);
}
.logo-strip img {
flex: 0 0 auto;
width: clamp(100px, 10vw, 128px);
height: clamp(44px, 4.2vw, 56px);
/* contain, so a logo is fitted into its box rather than cropped to it */
object-fit: contain;
opacity: .85;
}
/* Download / link rows (reading materials, past year papers, results). */
.link-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.link-row {
display: flex; align-items: center; gap: 12px;
padding: 13px 16px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
text-decoration: none;
color: inherit;
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.link-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.link-row svg { flex: 0 0 auto; color: #c96806; }
.link-row span { font-weight: 600; font-size: .95rem; }
/* ---- Past-year papers, one column per year --------------------------------
The years come from the database, so auto-fit rather than a stated column
count: two years give two columns, three give three, and a single year fills
the panel rather than sitting in half of it with a hole alongside.
320px is the floor because a paper title plus its icon needs about that
much before the row starts wrapping; below it the columns stack.
align-items: start so a year with three papers does not stretch the heading
of the year beside it that has one. */
.geo-years {
display: grid;
gap: clamp(20px, 3vw, 36px);
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
align-items: start;
}
/* The year is a column head now, not a section heading with the panel to
itself, so it drops from the h2 display size to something proportionate to
the one or two rows beneath it. */
.geo-year-title {
margin: 0 0 12px;
font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
/* The paper itself, previewed in the browser's own PDF viewer.
---------------------------------------------------------------------------
A4 by aspect-ratio rather than a fixed height, so the preview keeps the
proportions of the thing it is previewing at any column width.
Hidden below 820px, where the columns have stacked: a phone would be showing
a page of A4 at ~340px wide — unreadable — and iOS Safari renders only the
first page of a PDF in an iframe, often nothing at all. The download link
underneath is the whole interaction there, which is what it was before. */
.paper { display: grid; gap: 10px; }
.paper + .paper { margin-top: 18px; }
.paper-preview {
display: block;
width: 100%;
aspect-ratio: 1 / 1.414;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: #fff;
box-shadow: var(--shadow-sm);
}
/* Shown by