/* ============================================================================ MyCLO — PLATE & RULE ---------------------------------------------------------------------------- THE PALETTE IS THE ORIGINAL SITE'S, AND THE COLOUR WORDS BELOW ARE OLDER THAN IT. On 2 Sep 2026 the whole site moved off the lilac/rose scheme onto the crimson and gold that myclo.my itself uses — the colours of the seal in the logo, which the old palette did not match. The mapping was: manuscript plum #3d1b57 -> heading near-black #2e293c (14:1, as before) rose #e0447a -> crimson var(--brand) lilac highlight #c3a0e0 -> gold #f1c46a cipher teal #0f6f78 -> teal #04788a lilac papers -> warm off-whites Comments further down still say "plum", "rose" and "lilac". Where they are describing what a thing USED to look like they are history and correct as written; where they name a colour a rule paints TODAY, read the mapping above. Two things genuinely changed rather than being renamed: the rose was 3.98:1 and could only ever be a fill, so links borrowed the heading ink — the crimson is 7.49:1 and carries text, so --link is the brand colour now; and on the dark band and the footer the crimson falls to ~2.2:1, so the accent there is the gold, not a lighter red. Colours deliberately NOT remapped: the social icons' own brand colours, the red PDF file-type badge, and the grey head on an ended registration card, which means "this is over" by being grey. ---------------------------------------------------------------------------- The fourth and last stylesheet layer. Loaded after clo-plate's three predecessors: redesign.css the layout engine, shared by all five Explorer sites warm-theme.css the light-theme overlay, shared clo-theme.css the MyCLO palette and component set clo-plate.css <- here: the SURFACE grammar WHAT THIS FILE CHANGES, AND WHY IT IS A SEPARATE FILE The three files above render every card the same way: a white sheet with a ~20px radius and a wide, soft, blurred drop shadow, floating on a pale gradient. That treatment is inherited — it is the sibling sites' — and it is the single thing that made this site look like every other one. Twelve sections on the home page, each one a centred pill over a two-tone gradient heading over one more floating white rectangle. This layer replaces that surface grammar with one taken from the thing the site is actually about: a printed edition of a text being deciphered. ELEVATION IS INK, NOT AIR. A card is a plate resting ON paper, so its shadow is a hard offset in the manuscript plum with NO blur radius. Nothing on this site floats any more; it is laid down. EVERY EDGE IS DRAWN. 1.5px rules instead of 1px near-invisible hairlines, and radii drop from 14-28px to 4px. A drawn edge is what tells a reader where one thing stops and the next begins; the inherited cards relied on a shadow for that, which is why they all read as the same object. LABELS ARE RULED, NOT BUBBLED. Card and list labels are set flat in letterspaced capitals against a hairline rather than in a tinted capsule. Section headings lose the clipped gradient and run in two SOLID inks. The one exception is the .eyebrow, which is a mark all five Explorer sites share and keeps its chip — see section 4. BUTTONS PRESS. A button carries a hard plum cast and moves INTO it on hover, the way a key travels. Nothing glows. Kept as its own file rather than edited into clo-theme.css for two reasons: the change is reversible by deleting one , and the surface grammar is now stated in one place instead of being spread across ~40 component blocks. SPECIFICITY. Nearly everything here is written `[data-theme="warm"] .x` (0,1,1) even where a bare class would compute, because warm-theme.css sets many of these same properties at exactly that weight. Matching it and loading last is what wins; it is not decoration. Token blocks carry `:root` for the same reason — see the SELECTOR NOTE at the head of clo-theme.css. ========================================================================== */ /* --------------------------------------------------------------------------- 1. THE PLATE TOKENS --------------------------------------------------------------------------- One set of numbers that every surface below is built from, so the site's elevation reads as one system rather than as forty independent shadows. The cast shadows have NO blur. That is the whole idea and it is worth stating plainly, because a blur radius is the first thing that gets added back when somebody thinks a shadow looks "hard": at 0 blur the shadow is a second copy of the card's silhouette in ink, which is what a plate on paper actually throws under a raking light, and it is legible at any size. A blurred shadow is a photographic effect and it is what every one of these cards had. --------------------------------------------------------------------------- */ :root, :root[data-theme="warm"] { /* Geometry. 4px is not "nearly square" — it is the radius a trimmed sheet has. 0 would read as a browser default; 12px+ is the inherited look. */ --plate-r: 4px; --plate-r-sm: 3px; /* Rules. Three weights, because a card's outer edge, an inner division and a decorative keyline are three different statements. */ --plate-rule: rgba(46, 41, 60, .22); --plate-rule-soft: rgba(46, 41, 60, .11); --plate-rule-hard: rgba(46, 41, 60, .40); --plate-rule-rose: rgb(var(--brand-rgb) / .40); /* The cast. Two steps, the second lighter and further out, so a card has a near shadow and a far one — the near edge is what reads as contact. These started at .085/.045, which is where a BLURRED shadow of this size would sit. A hard shadow needs more: it has no falloff to suggest depth, so if it is not dark enough to read as a second edge it reads as nothing at all, and the card is left looking merely borderless. */ --plate-cast-1: rgba(46, 41, 60, .15); --plate-cast-2: rgba(46, 41, 60, .07); --plate-cast-rose: rgb(var(--brand-rgb) / .34); --plate-lift: 3px 3px 0 var(--plate-cast-1), 8px 8px 0 var(--plate-cast-2); --plate-lift-hi: 5px 5px 0 var(--plate-cast-rose), 11px 11px 0 var(--plate-cast-2); --plate-lift-sm: 2px 2px 0 var(--plate-cast-1); /* Panels sit further off the paper than the cards inside them. */ --plate-lift-panel: 5px 5px 0 var(--plate-cast-1), 12px 12px 0 var(--plate-cast-2); /* On the dark workshop band ink is invisible; the cast goes the other way. */ --plate-lift-dark: 5px 5px 0 rgba(9, 8, 13, .38); } /* The shared radius scale, retargeted at the source. redesign.css builds the dropdown, the lightbox, the poster frame, the FAQ rows and a dozen smaller things out of these three names, so squaring them here is what keeps the parts of the site this file does not name explicitly in step with the parts it does. --r-pill is deliberately NOT touched: a few things on the site are genuinely pill-shaped (the social discs, the scroll-to-top), and the labels that should stop being pills are squared one at a time below. */ :root[data-theme="warm"] { --r-sm: 4px; --r-md: 5px; --r-lg: 6px; /* The soft-shadow names the inherited files reach for. Retargeted rather than hunted down: any component still asking for --shadow-md now gets a cast instead of a bloom, which covers the long tail. */ --shadow-sm: 2px 2px 0 var(--plate-cast-1); --shadow: 3px 3px 0 var(--plate-cast-1), 8px 8px 0 var(--plate-cast-2); --shadow-md: 3px 3px 0 var(--plate-cast-1), 8px 8px 0 var(--plate-cast-2); --shadow-lg: 5px 5px 0 var(--plate-cast-1), 12px 12px 0 var(--plate-cast-2); } /* --------------------------------------------------------------------------- 2. THE PANEL — a sheet with crop marks --------------------------------------------------------------------------- .gx-glass is the site's one universal container: every section's body sits in one, and several component cards (.clo-cat, .clo-link) are one too. Flat white, not a gradient. The inherited panel is a 94%-opaque white-to- lilac ramp over a backdrop blur, which on a pale ground reads as a smudge rather than as paper. A printed sheet has one tone. --------------------------------------------------------------------------- */ [data-theme="warm"] .gx-glass { background: #ffffff; border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift-panel); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Panels do not respond to the pointer. The inherited file brightens their border on hover, which on a page where the panel IS the section means the whole page twitches as the mouse crosses it. Cards below still respond — they are the things a reader is choosing between. */ [data-theme="warm"] .gx-glass:hover { border-color: var(--plate-rule); box-shadow: var(--plate-lift-panel); } /* CROP MARKS. Four corner Ls, inset 9px, drawn only on the padded panels — which is exactly the set that behaves as a printed sheet rather than as a card inside one. This is the layer's one piece of pure ornament and it earns its place by being the mark a printer actually leaves: it says "this is a trimmed plate" in a way no border radius can. Eight background gradients, four corners, two arms each; the pattern is 14px x 1px and 1px x 14px so the arms are the same length whichever way they run. z-index -1 puts it above the panel's own background and below its in-flow content — .gx-glass sets position:relative and z-index:1, so it opens a stacking context and the negative index cannot escape upward. */ [data-theme="warm"] .gx-glass.gx-pad::before { content: ""; position: absolute; inset: 9px; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-image: linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)), linear-gradient(var(--plate-rule), var(--plate-rule)); background-size: 14px 1px, 1px 14px, /* top-left */ 14px 1px, 1px 14px, /* top-right */ 14px 1px, 1px 14px, /* bottom-left */ 14px 1px, 1px 14px; /* bottom-right*/ background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; } /* A panel nested inside another panel is a card, not a sheet — no second set of marks. (The workshop tab panels are the case this exists for.) */ [data-theme="warm"] .gx-glass .gx-glass.gx-pad::before { display: none; } /* --------------------------------------------------------------------------- 3. THE UNIVERSAL CARD --------------------------------------------------------------------------- Every card family on the site, given the same edge and the same cast, so that what tells them apart is their CONTENT and their one distinguishing move (section 8 onward) rather than forty slightly different shadows. Listed explicitly rather than matched with a wildcard: this is the whole inventory of things that are drawn as a card, and writing it out is what makes a missing one visible when the next page is added. --------------------------------------------------------------------------- */ [data-theme="warm"] :is( .clo-cat, .clo-link, .clo-step-main, .clo-award, .clo-spec-item, .clo-syl-point, .clo-rule, .clo-cost, .clo-wk-block, .clo-howto-row, .link-row, .book-row, .fee-card, .faq-item, .clo-banner, .clo-note, .video-item, .tile ) { border-radius: var(--plate-r); } [data-theme="warm"] :is( .clo-step-main, .clo-syl-point, .clo-rule, .clo-cost, .clo-howto-row, .link-row, .book-row ) { border: 1.5px solid var(--plate-rule); background: #ffffff; box-shadow: var(--plate-lift-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* The lift. A card moves UP AND LEFT, away from its own cast, and the cast grows to match — so the movement is the card getting further off the paper rather than the page scrolling under it. The inherited translateY(-4px) with a spreading blur is the same idea done in air; this is it done in ink. The near shadow turns rose on hover. It is the only place the accent is used as an elevation colour and it is what makes a hovered card unmistakable on a page where every card is otherwise the same object. */ [data-theme="warm"] :is( .clo-cat, .clo-link, .clo-step-main, .clo-syl-point, .clo-rule, .clo-howto-row, .link-row, .book-row, .video-item ):hover { transform: translate(-2px, -2px); border-color: var(--plate-rule-hard); box-shadow: var(--plate-lift-hi); } /* .clo-step-main and .clo-cat are hovered through their parent, not directly */ [data-theme="warm"] .clo-step:hover .clo-step-main { transform: translate(-2px, -2px); border-color: var(--plate-rule-hard); box-shadow: var(--plate-lift-hi); } [data-theme="warm"] .clo-cat:hover, [data-theme="warm"] .clo-link:hover { transform: translate(-2px, -2px); border-color: var(--plate-rule-hard); box-shadow: 5px 5px 0 var(--plate-cast-rose), 12px 12px 0 var(--plate-cast-2); } @media (prefers-reduced-motion: reduce) { [data-theme="warm"] :is(.clo-cat, .clo-link, .clo-step-main, .clo-syl-point, .clo-rule, .clo-howto-row, .link-row, .book-row, .video-item):hover, [data-theme="warm"] .clo-step:hover .clo-step-main { transform: none; } } /* --------------------------------------------------------------------------- 4. SECTION HEADS --------------------------------------------------------------------------- THE EYEBROW IS DELIBERATELY NOT RESTYLED HERE — do not add a rule for it. This layer once stripped the chip to a bare ruled label: background, border and radius removed, type down to .715rem, tracking out to .26em. The reasoning was that a pastel capsule is the most recognisable ornament of a generated page and that a flat label sits better in the plate grammar. On the site it read as thin and undersized beside its four siblings, all of which keep the chip. It was rejected. What redesign.css (geometry: inline-flex, 7px 15px, pill radius, 1px border, --fs-eyebrow / --ls-label) and clo-theme.css:374 (inks: --water-soft fill, plum text and border) already give between them IS the correct eyebrow — so the fix was to delete this layer's override, not to write a new one that restates them. The lesson generalises: the eyebrow is a family mark across all five Explorer competitions. The plate grammar governs surfaces — cards, bands, buttons, rules — and stops at the marks the family shares. --------------------------------------------------------------------------- */ /* THE HEADING. The clipped gradient goes. `.section-title .grad` is where the two-tone comes from, and the two-tone itself is right — it is how the brand sets a title, and it is in every one of this site's own screenshots. What was wrong is that it was painted with a three-stop gradient clipped to the glyphs, which puts a different colour on each letter of the accented word and is the reason the headings read as generated. Two SOLID inks say the same thing and are set the way a printer would set them: the sentence in the heading near-black, the accented half in the brand crimson, which is a real text colour at 7.5:1 on white. Both inks are written literally here and must stay distinct. The dark half was once #2c1240 — a hex this site also used for --link-hover — and a palette sweep that mapped it by value rather than by role turned it crimson too, collapsing the two-tone into one flat colour across the whole heading. -webkit-text-fill-color has to be reset explicitly. `color` alone loses to it wherever the inherited rule still applies. */ [data-theme="warm"] .section-title .grad, [data-theme="warm"] .grad, [data-theme="warm"] .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--brand); color: var(--brand); } [data-theme="warm"] .section-title, [data-theme="warm"] .page-hero h1, [data-theme="warm"] .clo-head h2 { color: #2e293c; } /* THE DIVIDER under a head. It was a 64px rounded bar with a rose-to-lilac ramp — a soft capsule under a soft heading. It becomes a printer's rule: one long hairline, one short heavy rose bar centred on it. Same footprint, and it now belongs to the same drawing as everything else on the page. */ [data-theme="warm"] .clo-head::after { width: clamp(120px, 22vw, 210px); height: 3px; margin-top: 16px; border-radius: 0; background: linear-gradient(var(--brand), var(--brand)) center / 34px 3px no-repeat, linear-gradient(var(--plate-rule), var(--plate-rule)) center / 100% 1px no-repeat; } [data-theme="warm"] .clo-workshop .clo-head::after { filter: none; opacity: 1; background: linear-gradient(#f1c46a, #f1c46a) center / 34px 3px no-repeat, linear-gradient(rgba(255, 255, 255, .34), rgba(255, 255, 255, .34)) center / 100% 1px no-repeat; } /* The dark band. While the eyebrow was a bare label this only had to relight the text; now that the chip is back, --water-soft would put pale lilac on pale lilac and the label would vanish. The chip is tinted DOWN instead of up, which is what mygeo does on its amber band and for the same reason: darkening the fill moves ground and text apart, where lightening it carries them together. #ecd2cf over the tinted band is 9.2:1 at the lightest point of the crimson wash in the top-left corner, and better everywhere else. */ [data-theme="warm"] .clo-workshop .eyebrow { background: rgba(0, 0, 0, .22); border-color: rgba(241, 196, 106, .45); color: #ecd2cf; } /* Gold, not a pale tint of the crimson. On the dark band a washed-out pink reads as a leftover of the rose palette this replaced, where the gold is the colour the original pairs with its red. A gold GRADIENT now, not the solid #f1c46a this was. The solid was a fix for clo-theme.css's gradient having a crimson middle stop that vanished into the band; that base rule is corrected, so this layer no longer has to flatten it. Flat gold was also the one thing making this title read differently from the five sibling sites, which all set "Workshop 2026/2027" in their band's gradient. Every stop stays in the gold family the note above asks for, and every stop clears the band: 11.0, 9.1 and 13.2 to 1. */ [data-theme="warm"] .clo-workshop .section-title .grad { background: linear-gradient(92deg, #ffd98a 0%, #f1c46a 50%, #fff1c2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --------------------------------------------------------------------------- 5. BUTTONS — a key that travels --------------------------------------------------------------------------- Pill, gradient fill, wide coloured glow, lifts 3px on hover. Squared plate, flat fill, hard plum cast, presses INTO the cast on hover and sits flat on :active. The press is the whole point: a control that moves toward the page when you push it is the one interaction on a site that can feel physical, and it costs two rules. --------------------------------------------------------------------------- */ [data-theme="warm"] .btn { border-radius: var(--plate-r); font-weight: 700; letter-spacing: .015em; transition: transform .12s ease, box-shadow .12s ease, background .18s, color .18s; } /* #9b1c2a, not the #d8384b this was first set to, and not --brand (var(--brand)). The palette's rule is that rose is a FILL colour and never carries text — see the head of clo-theme.css — and this button breaks it in the other direction: the text is white and the ROSE is the ground, so the fill is what has to be dark enough. White on var(--brand) is 2.6:1 and on #d8384b is 4.45:1; both fail AA for 16px bold, which is under the 18.66px large-text threshold. #9b1c2a measures 5.27:1 and the pressed state 6.66:1. Recompute both if either changes — docs/contrast.php checks INK on grounds and will not catch this. */ [data-theme="warm"] .btn-primary { background: #9b1c2a; border: 1.5px solid #7d202b; color: #ffffff; box-shadow: 3px 3px 0 #2e293c; } [data-theme="warm"] .btn-primary:hover { background: #ab2736; color: #ffffff; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #2e293c; filter: none; } [data-theme="warm"] .btn-primary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #2e293c; } [data-theme="warm"] .btn-ghost { background: #ffffff; border: 1.5px solid var(--plate-rule-hard); color: #2e293c; box-shadow: 3px 3px 0 var(--plate-cast-1); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="warm"] .btn-ghost:hover { background: #fbf6f6; border-color: var(--brand-ink); color: #2e293c; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--plate-cast-rose); } [data-theme="warm"] .btn-ghost:active { transform: translate(3px, 3px); box-shadow: 0 0 0 transparent; } [data-theme="warm"] .btn-gold { background: #04788a; border: 1.5px solid #0a5159; color: #ffffff; box-shadow: 3px 3px 0 #2e293c; } [data-theme="warm"] .btn-gold:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #2e293c; filter: none; } /* The registration-closed slot. It occupies the same space as the button it replaces, so it keeps the plate silhouette and loses the cast — a plate that is lying flat and cannot be pressed. */ [data-theme="warm"] .btn-closed { background: #f5edec; border: 1.5px dashed var(--plate-rule-hard); color: #6a6a6a; box-shadow: none; transform: none; } /* The nav CTA's breathing blur-glow is the last soft-focus object on the page. Replaced with a cast that breathes in ink: the shadow steps out and back, so the button still asks for attention and still does not glow. */ [data-theme="warm"] .btn-cta::before { display: none; } [data-theme="warm"] .btn-cta { animation: cloPlatePulse 2.6s ease-in-out infinite; } @keyframes cloPlatePulse { 0%, 100% { box-shadow: 3px 3px 0 #2e293c; } 50% { box-shadow: 5px 5px 0 #2e293c; } } [data-theme="warm"] .btn-cta:hover { animation: none; transform: translate(1px, 1px); box-shadow: 2px 2px 0 #2e293c; } @media (prefers-reduced-motion: reduce) { [data-theme="warm"] .btn-cta { animation: none; } [data-theme="warm"] .btn:hover, [data-theme="warm"] .btn:active { transform: none; } } /* --------------------------------------------------------------------------- 6. TAGS — squared, not capsuled --------------------------------------------------------------------------- Everything on the site that was a small tinted capsule. A tag with a corner reads as something stamped onto the page; a capsule reads as a chat bubble. --------------------------------------------------------------------------- */ [data-theme="warm"] :is( .clo-badge, .fee-pill, .clo-station-date, .clo-step-count, .clo-chips li, .badge-mini, .clo-award-flag, .video-time, .faq-count ) { border-radius: var(--plate-r-sm); letter-spacing: .08em; } /* The stage counts and the timeline dates get the cast too — they are the one thing in their row a reader is scanning for. */ [data-theme="warm"] .clo-step-count, [data-theme="warm"] .clo-station-date { border: 1px solid var(--plate-rule); box-shadow: 2px 2px 0 var(--plate-cast-1); } /* Tabs. The workshop's three are pills on a light sheet; squared and ruled they read as the file tabs they are standing in for. */ [data-theme="warm"] .clo-tab { border-radius: var(--plate-r-sm) var(--plate-r-sm) 0 0; letter-spacing: .04em; } /* --------------------------------------------------------------------------- 7. ICON MARKS — a ruled square, not a pastel bubble --------------------------------------------------------------------------- Nine components put their drawing on a tinted rounded tile with a gradient fill. One treatment, flat: paper, a hairline, and a rose tick across the top-left corner so the mark is stamped rather than floating. --------------------------------------------------------------------------- */ [data-theme="warm"] :is( .clo-spec-ico, .clo-feature-ico, .clo-syl-ico, .clo-rule-ico, .gx-icon, .book-cover ) { border-radius: var(--plate-r-sm); background: #fcf7f6; border: 1.5px solid var(--plate-rule); box-shadow: 2px 2px 0 var(--plate-cast-1); } [data-theme="warm"] :is(.clo-spec-ico, .clo-feature-ico, .clo-syl-ico, .clo-rule-ico, .gx-icon) svg { color: #2e293c; } /* The tick. Two 9px arms in the rose, hung on the mark's top-left corner — a registration mark, and the one warm note on an otherwise ink-only object. */ [data-theme="warm"] :is(.clo-spec-ico, .clo-feature-ico, .clo-syl-ico, .clo-rule-ico) { position: relative; } [data-theme="warm"] :is(.clo-spec-ico, .clo-feature-ico, .clo-syl-ico, .clo-rule-ico)::after { content: ""; position: absolute; top: -1.5px; left: -1.5px; width: 11px; height: 11px; border-top: 2.5px solid var(--brand); border-left: 2.5px solid var(--brand); border-radius: var(--plate-r-sm) 0 0 0; pointer-events: none; } /* --------------------------------------------------------------------------- 8. THE SPEC BLOCK — ruled apparatus --------------------------------------------------------------------------- Five facts about the paper, drawn as five separate floating cards with gaps between them. They are not five things; they are one specification, and a specification is set as a ruled block. So the gaps close and the cards share their rules. The hairlines are drawn with box-shadow rather than borders — an outward 1px shadow on the right and bottom of every cell, clipped by the block's own overflow, which means the outer edges take care of themselves however the dense auto-flow packs the cells. With borders this needs a :nth-child rule per column count and breaks the moment a wide cell moves. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-spec { gap: 0; overflow: hidden; border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift); } [data-theme="warm"] .clo-spec-item { border: 0; border-radius: 0; background: none; box-shadow: 1px 0 0 var(--plate-rule-soft), 0 1px 0 var(--plate-rule-soft); transition: background .18s ease; } [data-theme="warm"] .clo-spec-item:hover { transform: none; background: #fcf8f8; box-shadow: 1px 0 0 var(--plate-rule-soft), 0 1px 0 var(--plate-rule-soft); } /* The label takes the accent so the block reads as two columns of information rather than one wall of ink. It ran in the teal, which was the second colour of the old palette; on this one that is the crimson. THE CARDS VARIANT IS EXEMPTED, and that is a bug being fixed rather than a preference. clo-theme.css sets `.clo-spec--cards .clo-spec-label` to the near black on purpose — there the pair is stacked and centred under a drawing, so size and weight already separate label from value and a colour on top only competes with it. That rule is (0,2,0) and so is this one, so this file won simply by loading later and six large coloured labels came back. Scoping this to :not() hands the cards variant back to the rule that was written for it. */ [data-theme="warm"] .clo-spec:not(.clo-spec--cards) .clo-spec-label { color: var(--brand); letter-spacing: .17em; } /* The About page reuses this block as free-standing cards (.clo-spec--cards), where the ruled treatment would be wrong: those are separate statements. */ [data-theme="warm"] .clo-spec--cards { gap: clamp(12px, 1.4vw, 16px); overflow: visible; border: 0; background: none; box-shadow: none; } [data-theme="warm"] .clo-spec--cards .clo-spec-item { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift-sm); /* PADDING BELONGS WITH THE FRAME. clo-theme.css sets padding:0 on this variant because it designed it unframed — with no border there is nothing for the text to collide with. This file put the border back and did not put the padding back, so the longest value (Necessity) ran to within 2px of the card edge on both sides and the row looked broken rather than full. It cannot be left to .clo-spec-value: its max-width is 34ch, and `ch` in the display face is wide enough that 34ch is about 344px — wider than the 349px card. The cap never engages, so the breathing room has to be here. */ padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 26px); } [data-theme="warm"] .clo-spec--cards .clo-spec-item:hover { background: #ffffff; border-color: var(--plate-rule-hard); box-shadow: var(--plate-lift-hi); transform: translate(-2px, -2px); } /* NO CHIP AND NO TICK ON THIS VARIANT, and it has to be said here because section 7 above would otherwise put both back. clo-theme.css strips the tinted plate from .clo-spec--cards .clo-spec-ico on purpose — "at this size the illustration is the thing, and a tinted chip behind it only crops it into a badge" — and leaves the box at width:auto / height:auto so it shrink-wraps whatever drawing is in it. Section 7's icon rule is (0,2,0), the same weight, and loads later, so it won the fill and the border back but NOT the sizing. The result was the worst of both: a pale auto-sized box cropping each illustration, with the rose corner tick hung on that box's corner rather than on the drawing — so the tick read as a stray mark floating clear of the icon rather than as a registration mark on it. Six illustrations at this size need no chip. The plate around the whole spec is the frame; a second frame 12px inside it is the badge the original note was warning about. */ [data-theme="warm"] .clo-spec--cards .clo-spec-ico { border: 0; background: none; box-shadow: none; border-radius: 0; } [data-theme="warm"] .clo-spec--cards .clo-spec-ico::after { display: none; } /* --------------------------------------------------------------------------- 9. THE CATEGORY PAIR --------------------------------------------------------------------------- THE TWO CARDS SIT LEVEL. This block briefly dropped the second one 26px, on the reasoning that two cards landing on the same two horizontal lines is what makes a layout look machine-set. That is true of a row of six tiles and it is wrong here, for the reason clo-theme.css already gives in its own note on .clo-cats: this pair is the page's fork in the road and a visitor belongs to exactly ONE of them, so the two have to be drawn as equals. An offset reads as a ranking — Primary above Secondary — which is a claim the page does not make and cannot support. So the stagger is gone and `align-items: stretch` (clo-theme's own value at ≥900px) stands, which also keeps the two cards the same height even though Secondary carries a third row. What distinguishes the pair is the drawing and the tile rule below, not their position on the page. --------------------------------------------------------------------------- */ /* The tile rule in ROSE — this pair is a choice, not a route. See THE TILE RULE in section 15 for why the coloured segment leads rather than trails. */ [data-theme="warm"] .clo-cat { position: relative; background: #ffffff; overflow: hidden; } [data-theme="warm"] .clo-cat::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--brand) 0 34%, var(--plate-rule) 34% 100%); pointer-events: none; } /* The drawing loses its blurred drop-shadow: on a flat plate a soft shadow under the artwork is the one thing left floating. */ [data-theme="warm"] .clo-cat-art { filter: none; } /* --------------------------------------------------------------------------- 10. THE FIVE STAGES — the numeral in the margin --------------------------------------------------------------------------- The order marker sat inline at the head of its card, level with the stage name, where it competes with the name for the start of the line. Hung in its own ruled square instead it becomes what it is: an index, readable straight down the column without reading a word. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-step-n { display: inline-grid; place-items: center; min-width: 2.15em; padding: .12em .2em; font-size: clamp(1.05rem, 1.35vw, 1.2rem); color: #ffffff; background: #2e293c; border-radius: var(--plate-r-sm); box-shadow: 2px 2px 0 var(--plate-cast-rose); } [data-theme="warm"] .clo-step-head { align-items: center; } /* --------------------------------------------------------------------------- 11. THE AWARDS PODIUM — three plates, three heights --------------------------------------------------------------------------- Three identical boxes in a row, told apart only by a tint. They describe a ranking, so they are set as one: the top award keeps the full height and the heaviest rule, and the two below it step down. The difference is small on purpose — every participant gets one of the three, so this is an order, not a hierarchy of worth. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-award { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift); transition: transform .18s ease, box-shadow .18s ease; } [data-theme="warm"] .clo-award:hover { transform: translate(-2px, -2px); box-shadow: var(--plate-lift-hi); } /* The band across each plate's top edge, in that award's own ink. The three kinds are `gold`, `honorable` and `participation` — the names the home page's own match() produces, NOT gold/silver/bronze. The first draft of this block guessed the latter and two of the three rules were dead. NO overflow:hidden on the plate. The "Highest award" flag is positioned at top:-14px and hangs OUT of its card by design; clipping it to the plate cut the flag in half. The band is given the plate's own top corner radius instead, which is what overflow was there to do. */ [data-theme="warm"] .clo-award::after { content: ""; position: absolute; inset-inline: -1.5px; /* out over the 1.5px rule, so the band IS the edge */ top: -1.5px; height: 4px; border-radius: var(--plate-r) var(--plate-r) 0 0; background: var(--plate-rule-hard); pointer-events: none; } /* Three tiers, three colours — the band across the top of the card is the only thing that tells them apart. The gold tier was rose and honorable was violet; on this palette both would land on the brand crimson and the two cards would become indistinguishable, so the gold tier takes the actual gold. */ [data-theme="warm"] .clo-award--gold::after { background: #c8912f; } [data-theme="warm"] .clo-award--honorable::after { background: var(--brand); } [data-theme="warm"] .clo-award--participation::after { background: #04788a; } /* The podium. clo-theme.css already raises the prize plate 14px above the row at ≥880px; this adds the other half of the step, so the three top edges descend in order rather than two of them sitting level. Same breakpoint as the rule it completes — below it the cards stack and a step is just a gap. */ @media (min-width: 880px) { [data-theme="warm"] .clo-awards { align-items: start; } [data-theme="warm"] .clo-award--honorable { margin-top: 12px; } [data-theme="warm"] .clo-award--participation { margin-top: 24px; } } /* The highest-award plate keeps a rose wash and the rose cast — it is the one card the section is built around, and with the tinted fills gone a top rule alone was not enough to make it the first thing seen. */ [data-theme="warm"] .clo-award--gold { border-color: #c1737c; background: #fbf4f3; box-shadow: 4px 4px 0 var(--plate-cast-rose), 11px 11px 0 var(--plate-cast-2); } /* Same fill as the primary button, for the same reason: white on it, at .72rem bold, so the ground has to clear AA on its own. See the note there. */ /* z-index, and it is the whole fix for this element. The flag hangs off the plate's top edge at top:-14px, so the 4px band above runs straight through its middle. A pseudo-element is painted as its originating element's LAST CHILD, so ::after was landing on top of the flag — a brighter rose stripe across white text, which read as a strike-through rather than as two objects overlapping. Both are positioned, so tree order decided it and the flag lost. Lifting the flag puts the band behind it, where it belongs: the band still runs the full width of the plate and shows as two stubs either side, so the flag reads as a label pasted over a ruled edge — which is the thing it is. Contained by .gx-glass, which sets position:relative and z-index:1 and so is a stacking context; this cannot rise past the panel. */ [data-theme="warm"] .clo-award-flag { z-index: 2; background: #9b1c2a; color: #ffffff; border: 0; box-shadow: 2px 2px 0 #2e293c; } /* The split bar above the plates. Three capsules with vertical gradient fills and an inset ring — the last capsule row on the page. Squared, flat, and ruled at the same weight as the plates they key to, with the gap closed so the bar reads as ONE hundred-percent divided three ways rather than as three chips. */ [data-theme="warm"] .clo-award-split { gap: 0; border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); overflow: hidden; box-shadow: var(--plate-lift-sm); } [data-theme="warm"] .clo-award-seg { border-radius: 0; height: 32px; letter-spacing: .1em; box-shadow: 1px 0 0 rgba(46, 41, 60, .3); /* the division, clipped at the last */ } [data-theme="warm"] .clo-award-seg--gold { background: #f3b6bd; color: #6c121c; } [data-theme="warm"] .clo-award-seg--honorable { background: #eacfcd; color: #2e293c; } [data-theme="warm"] .clo-award-seg--participation { background: #c3dcde; color: #0b555c; } /* --------------------------------------------------------------------------- 12. THE FEE TIERS — a stub, not a card --------------------------------------------------------------------------- A price on a dated window is a ticket, so it is drawn as one: the tier's name on a solid head, the figure on the stub below it, and a perforation between the figure and what the figure buys. --------------------------------------------------------------------------- */ [data-theme="warm"] .fee-card { border: 1.5px solid var(--plate-rule-hard); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift); } [data-theme="warm"] .fee-card:hover { transform: translate(-2px, -2px); box-shadow: var(--plate-lift-hi); } [data-theme="warm"] .fee-card-head { background: #2e293c; /* the perforation, riding the seam between the head and the stub */ border-bottom: 1.5px solid #2e293c; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18); } /* The tear line. A dotted rule the width of the card, sitting above the points list — the point at which the ticket would come apart. */ [data-theme="warm"] .fee-points { border-top: 0; background: radial-gradient(circle at 4px 2px, var(--plate-rule) 1.5px, transparent 1.7px) top left / 11px 4px repeat-x; padding-top: 18px; } [data-theme="warm"] .fee-pill { border: 1px solid var(--plate-rule); box-shadow: 2px 2px 0 var(--plate-cast-1); } /* --------------------------------------------------------------------------- 13. THE FAQ — a ruled list --------------------------------------------------------------------------- Sixteen white capsules in two columns, each with its own soft shadow, is sixteen of the same object. They are entries in a list, so they are ruled like one: a plate per entry with a plum tab carrying the number, and an open entry marked by a rose rule down its left edge rather than by a shadow. --------------------------------------------------------------------------- */ [data-theme="warm"] .faq-item { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift-sm); transition: box-shadow .18s ease, border-color .18s ease; } [data-theme="warm"] .faq-item:hover { border-color: var(--plate-rule-hard); box-shadow: 3px 3px 0 var(--plate-cast-rose); } [data-theme="warm"] .faq-item[open] { border-color: var(--plate-rule-hard); border-left: 4px solid var(--brand); background: #ffffff; box-shadow: var(--plate-lift); } /* The numeral. A round chip on a squared card is the one thing in this layer that would still read as the old grammar, so it becomes a tab. */ [data-theme="warm"] .faq-item summary .q-num { border-radius: var(--plate-r-sm); background: #2e293c; color: #ffffff; border: 0; font-weight: 800; box-shadow: 2px 2px 0 var(--plate-cast-rose); } [data-theme="warm"] .faq-item summary .chev { color: var(--brand); } /* The panel behind the two columns is a sheet like any other. warm-theme.css leaves it on the inherited cream, which is the only tan surface on the site. */ [data-theme="warm"] .faq-panel { background: #ffffff; } /* --------------------------------------------------------------------------- 14. ROWS — how-to, downloads, links, papers --------------------------------------------------------------------------- The horizontal rows that carry an action. They keep the plate edge from section 3; what they get here is a MARGIN RULE — a 3px bar down the left edge in the teal, so a row reads as an entry with a hanging mark rather than as a wide button. --------------------------------------------------------------------------- */ [data-theme="warm"] :is(.clo-howto-row, .link-row, .book-row) { border-left: 3px solid var(--plate-rule); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } [data-theme="warm"] :is(.clo-howto-row, .link-row, .book-row):hover { border-left-color: #04788a; } /* The one row that is not like the others — the sample paper — is the thing on the page a visitor can take away today. It keeps its tint and takes the rose margin rule, so it is marked by the same device as everything else rather than by a shape of its own. */ [data-theme="warm"] .clo-howto-row--feature { border-color: var(--plate-rule-hard); border-left: 3px solid var(--brand); background: #fbf5f4; box-shadow: 3px 3px 0 var(--plate-cast-rose); } [data-theme="warm"] .clo-howto-row--feature:hover { border-left-color: var(--brand); } /* The IOL year rows on About. Squared and given the plate's cast shadow like every other card on this theme; the open state lifts a little further, which is what tells a reader at a glance which of the three they left expanded. */ [data-theme="warm"] .iol-year { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift-sm); } [data-theme="warm"] .iol-year[open] { border-color: rgb(var(--brand-rgb) / .34); box-shadow: 3px 3px 0 var(--plate-cast-rose); } [data-theme="warm"] .iol-year:hover { border-color: rgb(var(--brand-rgb) / .34); } /* The note strip. Same margin-rule idea, in the violet, squared. */ [data-theme="warm"] .clo-note { border: 1.5px solid var(--plate-rule); border-left: 4px solid var(--brand); border-radius: var(--plate-r); background: #faf4f4; box-shadow: var(--plate-lift-sm); } /* The gate panel on About keeps its rose left edge — it was already built on this idea — and only loses its rounded right corners and its gradient fill. */ [data-theme="warm"] .clo-gate { border-radius: 0 var(--plate-r) var(--plate-r) 0; border-left-width: 5px; border-top-color: var(--plate-rule-rose); border-right-color: var(--plate-rule-rose); border-bottom-color: var(--plate-rule-rose); background: #fbf5f4; box-shadow: var(--plate-lift-sm); } /* --------------------------------------------------------------------------- 15. THE ONWARD-ROUTE CARDS --------------------------------------------------------------------------- The three quick links that close the home page. Each is a .gx-glass in its own right, so it already carries the panel treatment; what it needs is the tile family's mark. THE TILE RULE, stated once because three families share it. A tile carries a 3px rule along its TOP edge, coloured for the first third and dropping to the plain hairline for the rest — long enough to read as an accent, short enough that it does not become a coloured header band. The colour says what kind of tile it is: ROSE where the reader is choosing between alternatives (the two category cards), TEAL where the tile is a route out of the page (these, and the three study-guide doors). The first version of this put the rule along the FOOT of these cards and split it the other way — hairline for 62%, then teal. Against white the hairline half was invisible, so what actually appeared was a short teal bar floating under the card, which read as a rendering fault rather than as a mark. Same 3px of teal; the difference is entirely which end it starts from and whether the eye meets it before or after the card's content. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-link { position: relative; overflow: hidden; border: 1.5px solid var(--plate-rule); box-shadow: var(--plate-lift); } [data-theme="warm"] .clo-link::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, #04788a 0 34%, var(--plate-rule) 34% 100%); pointer-events: none; } [data-theme="warm"] .clo-link h3 { color: #2e293c; } /* --------------------------------------------------------------------------- 16. THE WORKSHOP BAND — ink on a dark ground --------------------------------------------------------------------------- The one dark section on the site. Everything above is drawn in plum on paper, which is invisible here, so the band gets the same grammar with the cast turned the other way: a near-black offset under a light sheet. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-workshop .gx-glass { background: #ffffff; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--plate-r); box-shadow: var(--plate-lift-dark); } [data-theme="warm"] .clo-workshop .gx-glass:hover { box-shadow: var(--plate-lift-dark); } [data-theme="warm"] .clo-workshop .clo-wk-block { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift-sm); } /* The three Date / Time / Venue cards are the band's one saturated object. Flat rose with a plum cast rather than a gradient with a hairline. */ [data-theme="warm"] .clo-workshop .clo-wk-fact { border-radius: var(--plate-r); background: #e45b6b; border: 1.5px solid #7a1622; box-shadow: 3px 3px 0 rgba(46, 41, 60, .5); } /* --------------------------------------------------------------------------- 17. THE PAPER --------------------------------------------------------------------------- Two changes, both subtractive. The section bands were a top-to-bottom lilac ramp, so a band and the page under it differed by a wash that faded out before it reached the band's own foot. A band is a different sheet, so it gets ONE flat tone and a rule at each edge — which is also what lets the ruled seam and the baseline tally marks (both already in clo-theme.css) read as belonging to the band rather than as marks scattered near it. And the page's own backdrop loses a stop. Four overlapping radial blooms under a vertical ramp is what gives a pale page that airbrushed cast; three quieter ones leave the paper reading as paper. --------------------------------------------------------------------------- */ /* #f2e3e2, not the #f7edec this was first set to. That value was within two points of the page's own paper at the same scroll position, so the band and the page it was meant to be distinguished from were the same colour — the band's seam and its baseline tally marks were the only thing marking it, which is precisely the "faint tint that reads as nothing" the clo-theme note about .clo-band--deep warns against. A band is a different sheet; it looks it. */ [data-theme="warm"] .clo-band { background: #f2e3e2; border-block: 1.5px solid var(--plate-rule-soft); } [data-theme="warm"] .clo-band--deep { background: var(--clo-seal-dark), var(--clo-seal-dark), #f7eceb; background-position: left -22px bottom -26px, right -30px bottom -34px, 0 0; background-size: 168px 125px, 200px 148px, auto; background-repeat: no-repeat, no-repeat, repeat; border-block: 1.5px solid rgba(156, 31, 46, .34); } /* This file used to repaint body::before with a third gradient stack, which — loading last — beat the two in clo-theme.css and became the ground nobody was editing when they edited the ground. THE GROUND in clo-theme.css is now the only place it is described, and body::before carries the drifting motif there. Do not paint it here: a background set in this file would load last again and take the motif off the page. */ /* --------------------------------------------------------------------------- 18. THE CHROME — header, dropdown, floating controls --------------------------------------------------------------------------- The header keeps its blur: it is glass over moving content, which is the one place on the site where that is the honest description. Everything it drops onto the page, though, is a plate. --------------------------------------------------------------------------- */ [data-theme="warm"] .site-header.scrolled { box-shadow: 0 1.5px 0 var(--plate-rule), 0 3px 0 var(--plate-cast-2); } [data-theme="warm"] .dropdown { background: #ffffff; border: 1.5px solid var(--plate-rule-hard); border-radius: var(--plate-r); box-shadow: 4px 4px 0 var(--plate-cast-1); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="warm"] .dropdown a { border-radius: var(--plate-r-sm); } [data-theme="warm"] .nav-toggle { border-radius: var(--plate-r); border-width: 1.5px; } /* The two floating controls stay round — they are the only round things left, which is what keeps them reading as controls rather than as content — but they trade their coloured haloes for a cast. */ [data-theme="warm"] .to-top { background: #2e293c; border: 1.5px solid #231f2e; box-shadow: 3px 3px 0 var(--plate-cast-rose); } [data-theme="warm"] .to-top:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--plate-cast-rose); } [data-theme="warm"] .wa-float { box-shadow: 3px 3px 0 rgba(20, 90, 45, .3); } [data-theme="warm"] .wa-float:hover { transform: translate(1px, 1px) scale(1.03); box-shadow: 2px 2px 0 rgba(20, 90, 45, .3); } /* Images that were floating: the hero banner and the About page's photographs. */ [data-theme="warm"] .clo-banner { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift); } [data-theme="warm"] .gx-glass img:not(.clo-cat-art-svg):not(.clo-specimen-svg) { border-radius: var(--plate-r-sm); } /* --------------------------------------------------------------------------- 19. THE QUICK-FACTS BAR AND THE COUNTERS --------------------------------------------------------------------------- The bar under the hero carries four numbers and is the first surface on the page. It is a .gx-glass, so it already has the plate edge; what it needs is its dividers drawn at the same weight as everything else, and the numbers set in solid ink rather than in the clipped gradient. --------------------------------------------------------------------------- */ [data-theme="warm"] .clo-fact + .clo-fact { border-left: 1px solid var(--plate-rule-soft); } [data-theme="warm"] .clo-fact b { color: #2e293c; } [data-theme="warm"] .clo-fact-label { color: #6a6a6a; letter-spacing: .14em; } [data-theme="warm"] .stat-num, [data-theme="warm"] .clo-count b { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: #2e293c; color: #2e293c; } /* --------------------------------------------------------------------------- 20. THE SWEEP --------------------------------------------------------------------------- Every remaining surface that carried a radius of 9px or more or a blurred shadow, found by running the two stylesheets above through: awk '/\{/{sel=$0} /border-radius:/{print sel, $0}' public/css/clo-theme.css and checking each hit against the sections above. Doing it by eye missed six — the study-guide doors most visibly, which kept their 18px radius and their blur while the panel around them had already been squared, so that page was the one place the old grammar and the new one were side by side. Grouped by what the thing IS rather than by which file it came from, because that is the axis the treatment differs on. --------------------------------------------------------------------------- */ /* --- Doors: the study-guide tiles. Three routes out of the page, so they take the tile rule in TEAL — see THE TILE RULE in section 15. */ [data-theme="warm"] .guide-tile { position: relative; overflow: hidden; border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } [data-theme="warm"] .guide-tile::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, #04788a 0 34%, var(--plate-rule) 34% 100%); pointer-events: none; } [data-theme="warm"] .guide-tile:hover, [data-theme="warm"] .guide-tile:focus-visible { transform: translate(-2px, -2px); border-color: var(--plate-rule-hard); box-shadow: var(--plate-lift-hi); } @media (prefers-reduced-motion: reduce) { [data-theme="warm"] .guide-tile:hover, [data-theme="warm"] .guide-tile:focus-visible { transform: none; } } /* --- The opening leaf. It is the one surface on the site that is explicitly a SHEET OF MANUSCRIPT — ruled margin, drop cap, roman numerals — so it is the last place a 22px radius belongs. Trimmed, ruled, and given the deeper cast a leaf laid on a leaf would throw. */ [data-theme="warm"] .clo-leaf { border-radius: var(--plate-r); border: 1.5px solid var(--plate-rule); background: #ffffff; box-shadow: var(--plate-lift-panel); } /* --- Plates carrying artwork: the About lockup, the specimen, the photographs, the paper preview, the map. All of them are a picture ON something, so they take the plain plate and nothing else. */ [data-theme="warm"] :is( .al-plate, .paper-preview, .map-embed, .media-tile img, .photo-grid img, .moment-strip img, .lb-img, .clo-wk-posters a, .video-thumb ) { border-radius: var(--plate-r-sm); } [data-theme="warm"] .al-plate { border: 1.5px solid var(--plate-rule); background: #ffffff; box-shadow: var(--plate-lift); } [data-theme="warm"] :is(.paper-preview, .map-embed, .clo-wk-posters a) { border: 1.5px solid var(--plate-rule); box-shadow: var(--plate-lift-sm); } /* The key-dates table on About. Its own rule rather than a name added to the group above, because the table is the only thing on the site whose plate has to keep `overflow-x: auto` — squaring the corners here and inheriting the group's radius there would have clipped the scroll at a 16px curve. */ [data-theme="warm"] .clo-table-wrap { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift-sm); } /* …and gives the plate up on a phone, where clo-theme.css stacks the table into one card per row. This override has to live here rather than inside that media query: [data-theme="warm"] out-specifies a bare class, and a media query adds no specificity of its own, so the plate would otherwise be drawn around the six cards it has been replaced by. */ @media (max-width: 700px) { [data-theme="warm"] .clo-table-wrap { border: 0; box-shadow: none; } [data-theme="warm"] .clo-table tbody tr { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift-sm); } } /* --- Blocks that are neither card nor picture: the cost pair on About, the syllabus statements, the workshop's titled blocks, the video playlist. */ [data-theme="warm"] :is(.clo-syl-point, .clo-cost, .video-playlist, .video-side) { border-radius: var(--plate-r); } [data-theme="warm"] :is(.video-playlist, .video-side) { border: 1.5px solid var(--plate-rule); box-shadow: var(--plate-lift-sm); } [data-theme="warm"] .video-item { border-radius: var(--plate-r-sm); } /* --- Marks that sit on a tinted tile and were missed by section 7 because they are not named *-ico: the gate's mark, the stage rail's marks, the legend keys, the past-year icons. */ [data-theme="warm"] :is(.clo-gate-mark, .clo-step-mark, .clo-legend-key, .pyq-item .pyq-ico) { border-radius: var(--plate-r-sm); } [data-theme="warm"] :is(.clo-gate-mark, .clo-legend-key) { border: 1.5px solid var(--plate-rule); box-shadow: 2px 2px 0 var(--plate-cast-1); } /* …except the last stage's key on About, which is filled rather than outlined because it is the route's destination. It takes the rose cast the other plum-filled plates take, not the soft glow the base theme gives it — a lone soft shadow in a theme built on hard offsets reads as a stray element. */ [data-theme="warm"] .clo-legend > li:last-child .clo-legend-key { border-color: transparent; box-shadow: 3px 3px 0 var(--plate-cast-rose); } /* --- The last capsules. .clo-place is the host-country chip on the results pages; .ph-link and .dropdown a are navigation. */ [data-theme="warm"] :is(.clo-place, .ph-link, .dropdown a) { border-radius: var(--plate-r-sm); } [data-theme="warm"] .clo-place { border: 1px solid var(--plate-rule); box-shadow: 2px 2px 0 var(--plate-cast-1); } /* --- THE SKIP LINK, which had three faults and is the one control on the site that exists purely for accessibility. It is off-screen until focused, so nothing about it shows in a screenshot and all three survived every visual pass over this page; a probe enumerating computed box-shadows across all ten pages is what turned it up, as the last blurred shadow left anywhere on the site. 1. CONTRAST. It took `background: var(--grad-brand)`, which clo-theme.css retargets to a var(--brand) → var(--brand-deep) ramp. White on the rose end measures 2.6:1 — far under AA, and rose is a FILL colour on this brand for exactly that reason. Now the flat #9b1c2a the primary button uses, at 5.27:1; see the note in section 5. 2. THE FOCUS RING was `outline: 2px solid #fff`. That is a dark-theme value: white on a white page is an invisible focus ring, on the element whose entire job is being visible when focused. 3. The blurred dark-theme cast, replaced with the plum one. Kept fixed, kept off-screen until focus, and still the first thing in the tab order — only how it is drawn changes. */ [data-theme="warm"] .skip-link { border-radius: var(--plate-r); background: #9b1c2a; color: #ffffff; border: 1.5px solid #7d202b; box-shadow: 3px 3px 0 #2e293c; } [data-theme="warm"] .skip-link:focus { outline: 3px solid #2e293c; outline-offset: 3px; } /* --- The registration procedure's numbered discs. Squared to match the two other places a number is set as a tag — the stage markers on the home page and the FAQ numerals — so a numbered thing is one object across the site rather than three. Solid plum with a rose cast, which is the tag treatment section 10 settled on. */ [data-theme="warm"] .step-list li::before { border-radius: var(--plate-r-sm); background: #2e293c; color: #ffffff; box-shadow: 2px 2px 0 var(--plate-cast-rose); } /* --- Past-year paper tiles. A row per year on /past-year-questions; the same object as a link row, so it takes the same margin rule. */ [data-theme="warm"] .pyq-item { border: 1.5px solid var(--plate-rule); border-left: 3px solid var(--plate-rule); border-radius: var(--plate-r); background: #ffffff; box-shadow: var(--plate-lift-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } [data-theme="warm"] .pyq-item:hover { transform: translate(-2px, -2px); border-color: var(--plate-rule-hard); border-left-color: #04788a; box-shadow: var(--plate-lift-hi); } @media (prefers-reduced-motion: reduce) { [data-theme="warm"] .pyq-item:hover { transform: none; } } /* --- The poster popup. The dialog IS the frame — a gradient border with the poster inset 10px inside it and a white keyline round the image. The class is .popup-dialog, and its radius is written calc(var(--r-md) + 10px), so the retargeted --r-md has already brought it from 28px to 15px; this takes it the rest of the way. The gradient frame stays: it is the one place on the site where all three inks appear in one object, and a modal over a dimmed page is the one thing that should not look like the page. */ [data-theme="warm"] .popup-dialog { border-radius: 12px; } [data-theme="warm"] .popup-posters img { border-radius: var(--plate-r-sm); } [data-theme="warm"] .popup-dialog { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 10px 10px 0 rgba(20, 18, 28, .3); } /* --------------------------------------------------------------------------- 21. RESPONSIVE — the cast at phone width --------------------------------------------------------------------------- A 5px/12px cast is a tenth of a 360px screen. Halved below 640px so the plates stay plates instead of becoming plates with a stripe beside them. --------------------------------------------------------------------------- */ @media (max-width: 640px) { :root[data-theme="warm"] { --plate-lift: 2px 2px 0 var(--plate-cast-1), 5px 5px 0 var(--plate-cast-2); --plate-lift-panel: 3px 3px 0 var(--plate-cast-1), 7px 7px 0 var(--plate-cast-2); --plate-lift-hi: 3px 3px 0 var(--plate-cast-rose), 7px 7px 0 var(--plate-cast-2); } /* Crop marks at 9px inset on a card that is 16px from the screen edge read as a drawing error rather than as a printer's mark. */ [data-theme="warm"] .gx-glass.gx-pad::before { display: none; } } /* ============================================================================ THE NATIONAL PAGE — /about-us, in its own colour ============================================================================ WHY ONE PAGE IS DRAWN DIFFERENTLY AT ALL. This site is the Language Explorer Competition: a school-level first round, open to every child in the country. MyCLO is what comes after it — the national olympiad, sat by the top tenth, and the route to the Malaysian team. Nine pages describe the competition; this one describes the thing the competition feeds. The secretariat asked for it to look like that. THIS REPLACED A WEIGHT-ONLY TREATMENT, and that is worth recording. The first attempt kept the rose and went deeper — deeper ground, a real rose field on the bands, heavier hero rulings, gold as a second accent. It was the cautious answer and it was too quiet: shown the two pages the secretariat could not tell them apart. A page that is meant to announce itself has to actually do it, so the hue changes. HOW IT WORKS. Every rule in clo-theme.css and clo-plate.css that used to hold a rose literal now reads --brand, --brand-deep or --brand-rgb — 121 lines of them, tokenised in one pass and verified pixel-identical on the other pages before a single value was changed. So the whole component set follows these declarations: heads, marks, rules, the gate, the table, the accordion, the buttons, the plate shadows. There is no second copy of anything. --brand-rgb MUST BE KEPT IN STEP with --brand by hand; see the note at the token definitions in clo-theme.css for why, and for what a mismatch looks like. The six inherited tokens below (--brand-500 … --pink) are re-declared rather than pointed at --brand, because a custom property declared on :root as `var(--brand)` resolves against :root's own value and would quietly ignore an override further down the tree. Scoped to `body.page-about-us`; layout.blade.php stamps `page-` on every page, so the hook already existed. It lives at the end of clo-plate.css because that file loads last — the page treatment then wins on source order and none of these rules needs inflated specificity. Header, footer and chrome are deliberately untouched: they are the same on all ten pages, and a page that restyled them would stop reading as part of the site and start reading as a broken one. ============================================================================ */ body.page-about-us { /* THE OLYMPIAD'S OWN COLOUR. The MyCLO mark is cyan, and it is already on this page twice — in the hero and in the stage rail — so the page is not being given a colour, it is being given the one it already had. TWO TONES, and the split is a contrast requirement rather than a decoration. The mark's cyan (#29abe2) is 2.3:1 on white: it can fill a shape but it cannot carry a word. --brand is therefore the deepened teal-blue, 5.9:1 on white, which is what headings, links, rules and the small uppercase labels are set in; the bright cyan is kept for fills where nothing has to be read off it. */ --brand: #0f6f92; --brand-rgb: 15 111 146; --brand-deep: #0a5470; --brand-500: #0f6f92; --brand-600: #0a5470; /* THE LINK INK IS THE DEEP TONE, NOT --brand, and it is measured rather than chosen. On white #0f6f92 is 5.9:1 and fine — but the Contact block sits on a band, and against the darkest stop of that gradient (#d5e5ec) it falls to 4.40:1. docs/contrast-runtime.php reports the WORST stop of a gradient rather than its average, which is what caught it; the email address is the one link on this page that lands there. #0a5470 is 7.4:1 on white and 5.5:1 on that stop. */ --link: #0a5470; --link-hover: #083f56; --teal: #0f6f92; --pink: #0a5470; --grad-brand: linear-gradient(135deg, #1187b0 0%, #0a5470 100%); --grad-text: linear-gradient(92deg, #0a5470 0%, #0f6f92 45%, #2e293c 100%); --grad-title: linear-gradient(92deg, #0a5470 0%, #0f6f92 45%, #2e293c 100%); /* The plate treatment's cast shadows are a rose wash in clo-plate.css's own token block. Left as rose everywhere else; retargeted here so a page in cyan is not casting pink shadows. */ --plate-cast-rose: rgba(15, 111, 146, .34); /* The eyebrow pill's fill. --water/--water-soft are the palette's pale rose washes; on a cool page they were the one element still reading pink at every section head. */ --water: #dcecf3; --water-soft: #eef6f9; /* The two darker gradient stops and the readable ink. --brand-ink is the one with a contrast floor: it carries the bolded phrases in the cost cards and the selection thresholds, so it has to clear 4.5:1 on white. This teal is 7.4:1. */ --brand-2: #0c6383; --brand-3: #0b5c79; --brand-ink: #0a5470; /* --plate-rule-rose and --plate-cast-rose are declared on :root as rgb(var(--brand-rgb) / …). A custom property resolves where it is DECLARED, so both would have kept :root's rose no matter what --brand-rgb says here — they have to be restated, not inherited. This is the trap the note at the token definitions describes, and these two are the only places in the stylesheets where it bites. */ --plate-rule-rose: rgb(15 111 146 / .4); } /* The gate panel's fill — a warm near-white everywhere else. Restated cool so the one large tinted card on the page is not a pink sheet in a blue room. */ [data-theme="warm"] body.page-about-us .clo-gate { background: #f4f9fb; } /* The selection-criteria card takes the plate treatment like every other card on this theme — squared corners and the hard offset cast, not the soft shadow the base rule gives it. Declared here rather than beside that rule because this is where the plate idiom lives. */ [data-theme="warm"] .clo-criteria-block { border: 1.5px solid var(--plate-rule); border-radius: var(--plate-r); box-shadow: var(--plate-lift-sm); } /* ---- The ground ---------------------------------------------------------- #f9f2f0 on the other pages — a warm lilac-cream. Here it cools to match, so the page reads as one temperature rather than as cyan marks scattered over a pink sheet. Still paper, not a coloured panel: the white glass panels have to keep separating from it. */ [data-theme="warm"] body.page-about-us { background: #eef4f7; } /* The banded sections, in the new hue and a shade stronger than the rose blush they use elsewhere — on a cooler ground a 28%-alpha tint disappears. */ [data-theme="warm"] body.page-about-us .clo-band { background: linear-gradient(180deg, rgb(15 111 146 / .11) 0%, rgb(15 111 146 / .035) 100%); border-block-color: rgb(15 111 146 / .2); } /* The hero's five ruled slabs. The ramp still deepens DOWNWARD for the reason the base rule gives — the heading and the next-contest block sit in the top third, so the palest bands stay where the text is and the strongest land in the space beneath it. */ body.page-about-us .clo-hero-relief span:nth-child(1) { background: linear-gradient(180deg, rgb(241 196 106 / 0) 0%, rgb(241 196 106 / .26) 34%, rgb(241 196 106 / 0) 100%); } body.page-about-us .clo-hero-relief span:nth-child(2) { background: linear-gradient(180deg, rgb(198 226 236 / 0) 0%, rgb(198 226 236 / .7) 34%, rgb(198 226 236 / 0) 100%); } body.page-about-us .clo-hero-relief span:nth-child(3) { background: linear-gradient(180deg, rgb(15 111 146 / 0) 0%, rgb(15 111 146 / .14) 34%, rgb(15 111 146 / .02) 100%); } body.page-about-us .clo-hero-relief span:nth-child(4) { background: linear-gradient(180deg, rgb(41 171 226 / 0) 0%, rgb(41 171 226 / .22) 34%, rgb(41 171 226 / .03) 100%); } body.page-about-us .clo-hero-relief span:nth-child(5) { background: linear-gradient(180deg, rgb(20 40 56 / 0) 0%, rgb(20 40 56 / .26) 34%, rgb(20 40 56 / .03) 100%); } /* ---- The one thing that stays gold --------------------------------------- The last key of The Selection Process — the IOL, which is what the whole route ends at. Cyan-on-cyan would say nothing, which is the fault the rose version of this page had. FILL GOLD, INK PLUM. The reverse, white on gold, is 2.4:1 and fails outright; the plum on the darker end of this gradient is about 6.3:1. */ [data-theme="warm"] body.page-about-us .clo-legend > li:last-child .clo-legend-key { background: linear-gradient(140deg, #f1c46a 0%, #d9a544 100%); border: 1.5px solid #b98a2c; color: #2e293c; box-shadow: 3px 3px 0 rgb(15 111 146 / .24); } /* The page texture, in the new hue. --------------------------------------------------------------------------- The drifting sheet of manuscript marks behind every page is an SVG data URI with its ink baked in — %237a1622, a deep rose. A data URI cannot read a custom property, so a second copy of the string is the only way to recolour it, and leaving it rose was the single loudest thing still warm on a cool page: it covers the whole viewport. GENERATED FROM THE ORIGINAL, not retyped — scratchpad/motif.mjs reads the token out of clo-theme.css and swaps the one colour. If the motif's SHAPE ever changes, regenerate this rather than editing it: the two copies are meant to differ in exactly one hex value. */ body.page-about-us { --clo-motif: url("data:image/svg+xml,"); }