, a leftover from before 20.11, and initRails() returns early only on .rail--static — so two .rail-nav buttons and two ResizeObservers are still built on every home page load. They are invisible today by luck rather than by rule: 58.6's overflow: visible makes scrollWidth equal clientWidth, so measure() writes display:none on both. The moment anything makes that grid overflow by more than the 1px of slack — a fifth educator, a longer name, a web font landing between the observer firing and the reflow — two terracotta discs appear over a grid that does not scroll, and pressing them does nothing. (0,3,0) against .rail-nav's (0,1,0) at 4403, so it holds inside the same query, and it survives the script: measure() writes the empty string to turn a button back on, which clears the inline value and hands the decision back to this rule rather than overriding it. The tidier fix is dropping the .rail wrapper from the educators template — the same trade 58.5 states about .rail--static on the program page. This is the lock until then. */ .rail:has(> .collab-grid) .rail-nav { display: none; } /* ---- 60.2 The footer link columns go two across ------------------------- 1,427px, and 960 of that is three lists of short links each holding a column to itself: Explore at 8 links, Programs at 7, Get in Touch at 3, every row 44px since the touch-target pass at 4716 and rightly so. Two columns of 165px take the first two lists side by side. Only one link in either is long enough to wrap — "School & Study-Abroad English", to two lines, on its ampersand — so the row costs the height of the taller list rather than the sum of both, and the footer comes back about 336px with nothing hidden and nothing behind a gesture: 1,427px to roughly 1,091px, 1.4 screens instead of 1.9. The brand block spans both columns. Its blurb carries max-width: 300px and sets its own measure; in a 165px column the same sentence runs to six lines and the 46px logo sits in a third of the width it was drawn for. The column gap comes down to 20 from the 26 the row gap keeps: 26px between two 162px columns is a sixth of the width spent on air, and it is the vertical rhythm between the blocks that was doing the work. Scoped to .site-footer so it is (0,2,0) against .footer__grid's (0,1,0) at 1842, and confined to this query so the 640px and 900px templates at 2906 and 2990 are untouched. */ .site-footer .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } .site-footer .footer__brand { grid-column: 1 / -1; } /* Get in Touch is the fourth block, so it landed in a half column on its own, where the email address and phone number broke mid-string. It takes the full row instead. */ .site-footer .footer__col:last-child { grid-column: 1 / -1; } } /* Tablet: three columns and four blocks. Get in Touch wrapped to a second row that started below the long Programs list, leaving a tall empty gap under the brand. The two link lists span both rows, so it tucks in under the brand block instead. */ @media (min-width: 640px) and (max-width: 899.98px) { .site-footer .footer__col:nth-child(2), .site-footer .footer__col:nth-child(3) { grid-row: span 2; } .site-footer .footer__grid { grid-template-rows: auto 1fr; } } /* ========================================================================== 61. The parent quotes swipe 58's table measured this row at three cards and about 970px — 1.4 screens — and left it stacked, because 1.5.32 deliberately moved it AWAY from one-at-a-time on the grounds that "almost nobody waited seven seconds" to meet the second and third quotes. That call has been overruled: the quotes are a rail on phones. 58's table stands as written; this is the one row in it that moves, and this comment is where the disagreement is recorded. MEASURED, against the real metrics in the shipped Open Sans at the shipped root of 122% — 1rem is 19.52px, so the quote is 19.91px on a 31.86px line — for the three quotes the home page renders today: viewport card text col t1 t2 t3 tallest card rail 320 256 214 6 ln 8 ln 8 ln 429px 465px 375 311 269 5 ln 7 ln 7 ln 397px 433px 390 326 284 5 ln 7 ln 7 ln 370px 406px 430 366 324 4 ln 6 ln 6 ln 339px 375px The card adds 88px of fixed chrome to whatever the quote costs — 22px of padding twice, a 1px edge twice, the 26px quote mark and the 16px under the blockquote — plus an author row of 59px. Below 390px that row is 86px instead: "Parent · Summer Camp 2026" measures 219.6px against a 221px column at 390px, 1.4px of slack, and wraps to two lines the moment the screen is any narrower. So the tallest card on the commonest phone is 370px and the rail is 406px, half a screen. NO CLAMP IS NEEDED FOR THE COPY ON THE PAGE TODAY. The clamp at 61.3 is for the copy that is not on the page today: these are editor records, mm_quote is free text, and a card taller than the viewport cannot be swiped at all — the thumb scrolls the page instead of the rail. Eight lines is a CEILING, not a trim. The longest quote shipping is exactly eight lines at 320px and seven everywhere above it, so nothing truncates and no ellipsis is ever painted on the current content; a three-paragraph review lands at 402px instead of running off the bottom of the screen. WHY THIS IS NOT A LINE ADDED TO 58.1'S SELECTOR LIST Every other scroller in that list holds a card that is a flex column or a plain block. .testi-card is a GRID — three rows, one per element, a subgrid on desktop so the quote marks and the author blocks line up across the row (1152, and the note above it at 1140). 4728 already drops the subgrid here and restates the rows as auto auto auto, and that is the shape that breaks in a rail: a flex item at align-items: stretch is as tall as the tallest card, and a grid whose tracks are ALL auto splits the leftover height EQUALLY ACROSS ALL THREE under the initial align-content: normal. The short card would open a gap above its quote mark, another under its quote and another under its author row — 1140's complaint arriving by a different door. Nothing in 58 prevents it, so this row cannot simply join the list. auto 1fr auto at 61.2 is the fix, and it is knowingly the arrangement 1140 rejected. That note is about three cards SIDE BY SIDE, where the eye compares one card's gap against its neighbour's and any difference reads as a fault. In a centre-snapped rail no two cards are ever on screen together. What matters instead is that the card keeps ONE SILHOUETTE as the reader swipes — same height, same author row on the same line above the same bottom edge — and the slack a short quote leaves lands between the quote and the attribution, where it reads as air under a short quote. 1140 is still correct at 640px and up and is untouched there. WHAT THIS DELIBERATELY DOES NOT REPEAT .testi-grid is ALREADY in 17's hidden-scrollbar list (4204), its focus-visible list (4340) and its reduced-motion list (4351). It has been in all three since 1.5.9, which removed the rail and left the three lists alone. 58 had to add .map-grid and its two new rails to those lists; this section adds nothing to any of them, because nothing is missing. Likewise the hover latch: .testi-card:hover is already neutralised at 4490, so there is no 58.8 to write here. -------------------------------------------------------------------------- */ @media (max-width: 639.98px) { /* ---- 61.1 The rail, exactly as 58.1 draws it --------------------------- One departure, and it is the point of the section: align-items: stretch reverses 4727's align-items: start. That rule was written for the stacked layout, where letting a short quote size its own card was the whole point; in a rail it makes the card's bottom edge jump under the reader's thumb. grid-template-rows: none from the same rule is inert on a flex container and is left where it is. */ .testi-grid { --rail-peek: 16px; --rail-gap: 16px; --rail-pad: calc(var(--rail-gap) + var(--rail-peek)); --rail-card: calc(100vw - var(--rail-pad) * 2); display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--rail-gap); overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; /* The two-axis rule. Never the shorthand — see 58's note. */ overscroll-behavior-inline: contain; overscroll-behavior-block: auto; width: auto; min-width: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--rail-pad); padding-block: 10px 26px; scroll-padding-inline: 0; /* Load-bearing, 4165. */ contain: paint; scrollbar-width: none; } /* ::-webkit-scrollbar is already handled at 4204. */ .testi-grid > * { flex: 0 0 var(--rail-card); min-width: 0; scroll-snap-align: center; overflow-wrap: anywhere; } /* ---- 61.2 The card's own three rows ------------------------------------ 4728 already does the first half — the subgrid at 1157 only resolves against a grid parent and the parent is a flex container now. Restated in full so a rail card cannot inherit span 3 if that rule ever moves, which is the same insurance 58.4 takes at 6235. The second half is the middle track; see the note above for why 1fr is right here and wrong at 640 up. */ .testi-card { grid-row: auto; grid-template-rows: auto 1fr auto; } /* ---- 61.3 A ceiling on the quote, not a trim --------------------------- Eight lines is 255px of quote and a 402px card. The longest quote on the page is eight lines at 320px and seven above it, so this paints no ellipsis on anything shipping today — it is here for the review an editor writes next year. The native ellipsis rather than a gradient fade: a fade needs one hard-coded gradient per tint, because the card's ground is #5E2E0D, #2B4A48 or #5C4310 and a fade to transparent over a dark ground goes grey in Safari. Three declarations that never need revisiting beat three gradients that break on the fourth tint. Qualified by blockquote so the selector says what it clamps: the author's name and the attribution are a and a and must never be caught by this. */ .testi-card blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; } /* ---- 61.4 Fewer than three quotes, and it is not a rail ---------------- mm_resolve_posts() caps at three but does not guarantee three: a site with two published testimonials renders two cards, and at two a rail hides half the content to save about 400px. 58.2's shape, its declarations, and .rail--static's originals at 4384, so a quote row that falls back and a rail that was never one land in the same place. (0,3,0), and last in the file besides. */ .testi-grid:not(:has(> :nth-child(3))) { display: grid; grid-template-columns: 1fr; gap: 16px; flex-wrap: wrap; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; padding-block: 0; contain: none; overscroll-behavior-inline: auto; } .testi-grid:not(:has(> :nth-child(3))) > * { flex: none; width: auto; scroll-snap-align: none; } /* ---- 61.5 The arrows, on the one rail whose cards are dark ------------- 17b drew the buttons terracotta on white with a white ring at 38%, and the sage pass at 5458 then took the colour off it — .rail-nav with no media query, same specificity, later in the file — so every rail on the site actually ships a sage-tint disc with a sage-deep chevron. That composite, measured on the card grounds 48 gives these quotes, at 17b's opacity of .38: over #5E2E0D disc #917762 chevron #584C37 2.00:1 over #2B4A48 disc #718886 chevron #385D5B 1.93:1 Invisible, and this is the only rail where it happens: every other one shows a white card or a photograph. The pair below is 56's own answer to a control on a dark ground — soft gold with ink on it, the same flip 18.5 and the home hero already make — and it is NOT marigold, so 17b's reason for holding the buttons back from the primary CTA colour still holds. over #5E2E0D disc #C6AB6F chevron #342011 6.94:1 over #2B4A48 disc #B8B380 chevron #262721 7.00:1 .72 rather than .38 for the same reason and no further: the swipe is still the primary gesture. The white ring at 4424 is inherited and wanted — it is what separates the disc from the card it half sits on. :active is restated because 4451's .rail-nav:active is (0,2,0), a tie with the selector here, and would otherwise put terracotta back on press. */ .testimonials .rail-nav { background: var(--dark-cta-bg); color: var(--dark-cta-fg); opacity: .72; } .testimonials .rail-nav:active { background: var(--dark-cta-bg); opacity: 1; } } /* ========================================================================== 62. The phone: the hero's announcement, and the filter bar back at the top Two things asked for on a phone, and one of them reverses a decision this file argued at 1970. 62.1 THE HERO ANNOUNCEMENT. The badge is a pill holding a second pill: a date chip and a sentence. At 390px the two together need about 363px against 350px of content width, so both wrapped — "Summer 2026" broke across two lines INSIDE the white chip, which turned the chip from a pill into a tall rounded box, and the outer capsule stretched to a lozenge with a lot of dead space in it. The chip breaking is the actual fault; the capsule looking wrong is what that fault produced. Three things fix it and the third is the one that matters. The chip never wraps, because a date is one token. The type comes down a step so the common announcement fits one line. And the outer radius goes from --r-pill to 22px, which at a one-line badge of about 40px tall still reads as a pill — the radius is more than half the height — and at two lines reads as a rounded box rather than a stretched capsule. That is what makes this robust: the announcement is an editor field, the seed default is the longer "Saturday School — enrollment is now open", and anything that only works because today's text is short would break the first time it is edited. 62.2 THE FILTER BAR. 1988 makes it position: static on a phone and the note above it is right about why: three dropdowns going full width turns one row into three, measured at 274px, which with the header pins 351px — 46% of a 375x760 viewport. Browsing tall cards through a half-height window costs more than the filters are worth once set. But that note also says what the trade would take: "Keeping it pinned would mean shrinking the controls to earn the space." So they are shrunk. The three drops go on one row instead of stacking, and the row pays for itself by dropping the leading icon — the label already says PROGRAM, AGE and SCHOOLS, and a 17px terracotta glyph in front of a word that repeats it is the most expendable 25px on the bar. At 390px that is 111px a drop, which holds the label and the caret with room, and the whole bar comes to about 96px against 274px. Pinned, that is 96 + 72 = 168px, 22% of a 760px viewport rather than 46%. The 46px tap target is untouched — 1970's condition was that a 44px target must not be what pays, and it is not: the icon paid. What this buys is the thing the static bar lost. The count is live — it reads "12 programs available" and drops as filters narrow — and that number is the only feedback the filter gives. Static, it scrolls away the moment you start reading the results it describes. -------------------------------------------------------------------------- */ @media (max-width: 639.98px) { /* ---- 62.1 The hero announcement fits ------------------------------------ */ .hero__badge { font-size: .78rem; gap: 8px; padding: 6px 14px 6px 6px; /* A pill at one line, a rounded box at two. --r-pill would be a lozenge the moment the sentence wraps, and the sentence is an editor field. */ border-radius: 22px; max-width: 100%; /* Two even lines, not "Enrollment now" and a stranded "open". */ text-wrap: balance; } .hero__badge .pill { /* The one real bug: a date is a single token and must never break. */ white-space: nowrap; font-size: .7rem; padding: 4px 9px; } /* ---- 62.2 The filter bar is pinned, and compact enough to deserve it ---- */ .filter-bar { position: sticky; top: var(--header-h); } .filter-bar__inner { padding-block: 10px 8px; gap: 8px; } /* One row of three rather than three rows of one. minmax(0, 1fr) rather than 1fr so a long label shrinks the track instead of overflowing it. */ .filter-bar__drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .filter-drop, .filter-drop__btn { width: 100%; } .filter-drop__btn { justify-content: center; gap: 4px; padding: 8px 8px; min-height: 46px; } /* The 25px that pays for the row. The label says what the icon says. */ .filter-drop__ico { display: none; } .filter-drop__label { font-size: .66rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* With three tracks there is no room for label and value side by side, so a chosen value replaces the label rather than joining it — the drop still says what it is filtering by, in the words the reader picked. */ .filter-drop.has-selection .filter-drop__label { display: none; } .filter-drop__value { font-size: .78rem; margin-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .filter-bar__meta { width: 100%; justify-content: space-between; margin-left: 0; } .filter-bar__count { font-size: .84rem; } .filter-bar__count b { font-size: .94rem; } /* The menu spans the bar rather than its own 111px track. Anchored with left/right and NOT with a transform, which is the whole point of writing it this way: .filter-drop.is-open runs the dropIn keyframe at 2104 with fill-mode both, and an animation's transform beats a declared one in the cascade — so a translateX centring here is wiped the instant the menu opens. Measured before this rule: the middle menu opened at x=195 and ran to x=545 in a 390px viewport, 155px off the right edge. .filter-drop goes static and .filter-bar__inner becomes the containing block, so `top: calc(100% + 8px)` from 2081 resolves against the whole bar rather than against one 111px drop, and left/right 0 span the content width. The dropIn translateY still plays, because nothing here touches transform. */ .filter-bar__inner { position: relative; } .filter-drop { position: static; } .filter-drop__menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; } .filter-drop[data-filter="venue"] .filter-drop__menu { min-width: 0; } } /* ========================================================================== 63. The partner wall, arranged 20.7 replaced a six-and-one wrap with a grid and said why: "seven fit across a desktop, and narrower screens break to four-and-three or three-and-two rather than stranding one." On a phone that is not what happens. The track is auto-fit minmax(98px, 1fr) with an 18px gap inside a panel padded 20px, so at 390px there is room for two columns and seven marks come out 2+2+2+1 — the seventh alone on a fourth row, against the left edge, which is precisely the stranding 20.7 set out to stop. It only ever avoided it at widths where three or four columns fit. Three things, and none of them change the mark sizes. The columns are pinned to two rather than left to auto-fit. At this width auto-fit already resolves to two, so nothing moves — but it moves for a reason now rather than by arithmetic that happens to land there, and a later change to the minimum cannot quietly make it three 95px columns, at which the two wordmarks would be 20px tall. The odd mark out spans both columns, so it centres under the pair above instead of hanging at the left margin. Written as :last-child:nth-child(odd) so it is the COUNT that triggers it rather than the number seven: at six partners nothing spans, at seven or nine the last one centres. The count is editor data and will not stay at seven. And the rows get a little more air than the columns, 22px against 18px. Marks of different aspect need vertical separation more than horizontal to read as a grid rather than as a texture: a 48px square beside a 150px wordmark already has generous white space at its sides and almost none above it. The section keeps the cream ground it has always had. See the note at 57.4 for the dark band that was tried here and taken back out. -------------------------------------------------------------------------- */ @media (max-width: 639.98px) { .partners__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; align-items: center; } /* A common row height so the wall reads as a matrix. The tallest mark is a 48px square and the shortest a 35px wordmark; without this each row takes its height from whichever mark happens to land in it. */ .partners__item { min-height: 52px; } .partners__item:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* ========================================================================== 64. "Meet the educators" takes the safety band's sage Asked for directly: the same cool ground the safety band uses higher up the page. It is the only cool hue this brand has — the guidelines list five hexes and none of them is blue — and #A5C3C2 is what the page already means when it looks blue. This reverses 53, which took the band OFF a cool green for two stated reasons, and both are worth keeping on the record because one of them is still true and visible: First, 53 avoided "a second sage after the safety band". That is a real repeat — safety is sage, and now the band three sections below it is too — but the two are separated by the partner wall, they are different values of the idea (one is a full band of white cards, this is faces on a sheet), and it was a preference rather than a fault. Second, and this one is a genuine consequence: "the portraits on it are warm — one on dark olive, one on white, two cut out onto brand orange — and there is no card between them and the ground, so the ground is doing the job a card would." That is still the case. .section--tint .collab-card at 7094 strips the card to nothing, so each face sits directly on this sheet, and two of the four are cut out onto #EB940E. Orange on sage is close to a complementary pair, so those two will read louder than the other two. The orange is baked into the image files and no rule here can reach it; if it grates, the fix is to re-cut those two photographs onto the sage rather than to change anything in this stylesheet. THE PART THAT IS NOT OPTIONAL --muted measures 3.04:1 on #A5C3C2, under the 4.5 body copy needs, and two things in this band use it: the section's supporting line and every educator's role. On cream they were fine at 4.9. Both go to --ink-soft, 6.32:1, which is the same ink the safety band puts on this exact ground. The names are --ink already and clear at 9.08. Scoped to the home page. #collaborations also renders on About and For Schools, where the cards are .team-grid and carry biographies on their own surfaces, and neither was asked for. -------------------------------------------------------------------------- */ /* (0,3,0) against 53's (0,2,0) at 9758. */ .mm-page-home #collaborations, .mm-page-home #collaborations.section--tint { background: var(--accent-sage); } .mm-page-home #collaborations .section-sub, .mm-page-home #collaborations .collab-card__role { color: var(--ink-soft); } @media (prefers-contrast: more) { .mm-page-home #collaborations .section-sub, .mm-page-home #collaborations .collab-card__role { color: var(--ink); } } /* ========================================================================== 65. The programme page: no photograph in the hero, no FAQ, dark outcomes Three things asked for on a course detail page. 65.1 THE HERO LOSES ITS PHOTOGRAPH. 1.5.60 put one back deliberately — 22.2 had dropped hero photographs site-wide because heroes were using them as ground and darkening them until they could not be seen, and that also hid .detail-hero__media, so a programme with a 600x800 picture rendered a band of flat terracotta with nothing beside the heading. The answer then was to bring the photograph back as an OBJECT on the ground rather than as the ground: unscrimmed, inside the white panel, above the tuition and the trial fee. That reasoning was about the empty half of the band, and the panel is what fixed it — the picture was never the part doing the work. The panel stays and keeps everything that states money and what is paid when; only the photograph goes, so the hero is the programme's name, its facts and its price, and nothing else. 65.2 THE FAQ BAND GOES. Hidden rather than deleted from the template: the questions and answers are editor content on the record, and a rule that stops painting them leaves every word in the database and in the page source. Putting the band back is deleting one rule. Nothing else on the page refers to it, and the closing panel directly below it already carries the ask. 65.3 THE OUTCOME BOXES GO DARK, the way the parent quotes did on the home page. They are the same device: a three-tint cycle, t1/t2/t3, cycling so a list of four or five reads as a set rather than as a stack. On the home page 48 took that cycle to the deep end of each hue — #5E2E0D, #2B4A48, #5C4310 — and these boxes kept the pale end, #FCF4EC, #E4EDEC, #F9F3DC. Same three colours, three steps lighter. This brings them into line, using 48's exact values rather than new ones. Measured on each ground, white / cream #EFEEE4 / soft gold: t1 deep clay #5E2E0D 11.21 9.62 8.19 t2 deep teal #2B4A48 9.65 8.28 7.05 t3 deep amber #5C4310 9.27 7.95 6.77 Everything inside the box needs naming, because all of it was drawn against a pale tint. The heading is --ink and would be ink on near-black. The body inherits --ink-soft. And the numeral chip is --brand-dark on --brand-tint, a pale blob with a mid-warm number on it, which on these grounds is both the brightest thing in the box and the least readable: --muted-class values measure under 2:1 on all three. It takes the flip the rest of this site makes when a warm ground will not carry a terracotta object — soft gold with ink on it, 12.46:1 inside the chip and 6.77:1 at worst against the ground behind it. -------------------------------------------------------------------------- */ /* ---- 65.1 The hero photograph -------------------------------------------- */ .mm-view-mm_class .detail-hero .program-panel__photo { display: none; } /* ---- 65.2 The FAQ band ---------------------------------------------------- Back on (24 Sep 2026): the copy document (v2, section 4) writes three FAQs for every program page, so the rule that hid the band is gone. */ /* ---- 65.3 The outcome boxes ----------------------------------------------- */ .mm-view-mm_class .outcomes .outcome-list__item { color: var(--dark-fg); border-color: transparent; } .mm-view-mm_class .outcomes .outcome-list__item--t1 { background: var(--dark-clay); } .mm-view-mm_class .outcomes .outcome-list__item--t2 { background: var(--dark-teal); } .mm-view-mm_class .outcomes .outcome-list__item--t3 { background: #5C4310; } .mm-view-mm_class .outcomes .outcome-list__item h3 { color: var(--dark-fg-head); } .mm-view-mm_class .outcomes .outcome-list__body, .mm-view-mm_class .outcomes .outcome-list__body p { color: var(--dark-fg); } /* The numeral. Soft gold with ink on it — the flip 18.3 makes in the hero and 35.9 makes on the closing band, for the same reason: a terracotta object on a warm dark ground is not there. */ .mm-view-mm_class .outcomes .outcome-list__num { background: var(--dark-cta-bg); color: var(--dark-cta-fg); } @media (prefers-contrast: more) { .mm-view-mm_class .outcomes .outcome-list__item { border-color: rgba(239, 238, 228, .4); } } /* ========================================================================== 66. Two things off the About page 66.1 THE VALUE CARDS LOSE THEIR NUMBERS. Each core-value card carries an 01/02/03/04 chip on the photograph. A number earns its place when the order is the meaning — a sequence of steps, a ranking — and these four are not that: "Child at the center", "Joy in learning", "Measurable growth", "Safety & trust" are four simultaneous principles, in no order, and numbering them tells a reader there is a first and a fourth when there is not. The chip is also the one opaque object sitting on each photograph. Hidden rather than cut from the template, because the markup emits the number from the loop index in two places (values/render.php, the media and the plain variants) and the count follows whatever an editor adds. 66.2 THE SAFETY BAND COMES OFF ABOUT. It renders on exactly two pages, home and About, with the same heading, the same supporting line and the same four facts — word for word, the same block. On the home page it belongs: it is what a parent checks before enquiring, it carries a photograph, and 31 placed it deliberately in the calmest colour the brand has. On About it is a repeat, and it renders WITHOUT the photograph — .safety-band rather than .safety-band--photo — so its two-column grid keeps a column for media that never arrives and the four cards bunch into the left half with the right half left as bare pattern. That is the dead space in the band. So it goes from About rather than being redesigned. Nothing is lost: every word of it is still on the home page, one click away, where a parent actually asks the question. Replacing it with new copy would mean writing and approving a section that About does not currently need — About already runs the story, the values, the team and the closing ask. Hidden rather than removed from the page's block list, so the content stays in the database and putting it back is deleting one rule. */ /* ---- 66.1 ---------------------------------------------------------------- */ .mm-page-about .value-card__num { display: none; } /* ---- 66.2 ---------------------------------------------------------------- */ .mm-page-about .safety-band { display: none; } /* ========================================================================== 67. Hero readability Reported as "readability is getting compromised in the hero sections", and it is measurable. The cause is not the text colour. It is that the pattern runs behind the words, and a flat-ground contrast figure does not describe what a reader actually sees: wherever a doodle stroke passes behind a letter, the local ground is not the band colour, it is the band colour with white painted over it at the tile's opacity. Measured that way — white text sitting ON a stroke, not beside one: home hero --brand #BC5A1B tile .14 3.62:1 FAIL programme hero --brand-dark tile .20 3.88:1 FAIL Both under the 4.5 body copy needs, and both worse than the flat-ground numbers that made them look acceptable (4.14 and 5.26). The important part: on --brand, NO tile opacity fixes this. At .06 — far fainter than the pattern is worth having — the worst case is still 4.12. The ground itself is too light to carry reversed body copy. --brand is a mid-tone at L=0.18; that is the same finding 56 recorded when it refused to make terracotta one of the dark grounds. So two levers, and both are needed: ground --brand -> --brand-dark an existing brand token, one step down, and already the programme hero's ground tile .14/.20 -> .12 the strength the worst case clears at Worst case after: 4.57:1, over a stroke, on both heroes. The flat ground is 5.78. Nothing else about the band changes — same hue, same family, same pattern, same size. The reversed body copy also goes solid white. .hero__sub was 93% white and .hero__proof 90%, which cost 0.4 and 0.6 of a ratio point for no perceptible softening — a transparency that only ever subtracted. The headings were already #fff. THE LIGHT HEROES are almost all fine and are left alone: ink on a stroke measures 5.70 on marigold, 7.33 on sage, 10.33 on soft gold, 12+ on the two creams. The one exception is About's supporting line, which is --ink-soft and lands at 3.97 over a stroke on marigold, the darkest of the light grounds. It goes to --ink, 5.70. -------------------------------------------------------------------------- */ /* ---- 67.1 The home hero takes the darker terracotta ---------------------- */ .hero { background: var(--brand-dark); } .hero::before { opacity: .12; } /* ---- 67.2 The programme hero's tile comes down ---------------------------- */ .mm-view-mm_class .detail-hero::before, .mm-view-mm_class .detail-hero--panel::before, .mm-view-mm_class .page-hero::before { opacity: .12; } @media (max-width: 760px) { .mm-view-mm_class .detail-hero--panel::before { opacity: .13; } } /* ---- 67.3 Reversed body copy is solid white ------------------------------- */ .hero__sub, .hero__proof { color: #fff; } /* ---- 67.4 About's supporting line on marigold ---------------------------- */ .mm-page-about .page-hero .section-sub, .mm-page-about .page-hero p { color: var(--ink); } /* ========================================================================== 68. The Programs and For Schools heroes get their pattern back The band looked like a rendering fault: soft gold with the element tile visible only on the right-hand third, nothing at all across the left, and the strongest part of it hidden behind the white venue panel. It is a mask, applied twice — 7569 on .listing-hero--split / .page-hero--split and again at 7681 for .mm-page-classes and .mm-page-schools: linear-gradient(90deg, transparent 0%, transparent 46%, #000 74%, #000 100%) Fully erased for the left 46%, fading in to 74%, full only after that. Both were written when these heroes carried a photograph and the tile had to keep off the copy. The photographs went in 26 — .listing-hero > .photo-band is display: none — so the mask is now clearing a pattern away from a flat ground for a reason that no longer exists, and hiding the rest behind a panel. 18.3 already settled this for the home hero, in as many words: "Full width, no mask: on a flat ground the pattern should run right across rather than fade out halfway, which is what made it look like a rendering fault." Both 6689 and 6510 set mask-image: none on exactly these selectors to do that — and 7681 is later in the file at higher specificity, so it put the mask back and quietly reverted the fix. Readability is not a reason to keep it. These are light grounds and the tile is inverted to ink at .10, where ink body copy over a stroke measures 10.33:1 on soft gold and 7.33:1 on sage — far past the 4.5 needed, and nothing like the reversed-white problem 67 had to solve on the terracotta bands. The centre-clearing mask at 7563 is left alone. That one is on the centred heroes, it clears the middle rather than a whole half, and it is doing the job it was written for. -------------------------------------------------------------------------- */ .mm-page-classes .listing-hero::before, .mm-page-schools .listing-hero::before, .mm-page-classes .page-hero::before, .mm-page-schools .page-hero::before, .listing-hero--split::before, .page-hero--split::before { -webkit-mask-image: none; mask-image: none; } /* ========================================================================== 69. The programme hero: the copy on white, and the photograph back Two corrections to 65. 65.1 hid .program-panel__photo. It comes back — the course's own picture is the one thing on this page that says what the session looks like, and the panel has room for it above the tuition. And the copy goes on a white panel of its own. It was white type straight on the terracotta band, which is the pairing 67 had to rescue with a darker ground and a fainter tile; on a white card the same words are ink on white at 14.6:1 and nothing about the band has to carry them. It also gives the hero two objects of the same family — the copy card on the left, the tuition card on the right — instead of one floating panel beside loose type. Everything inside it was drawn to be reversed out of terracotta, so each piece is named back to its ink-on-white value. The tag pills go from frosted white to the brand tint; the secondary button, which was a frosted rule on a dark ground and would be invisible on white, takes a terracotta outline. The primary stays soft gold with ink on it: 12.46:1, and it is the same button the band used, so the page does not gain a new CTA colour. -------------------------------------------------------------------------- */ /* The photograph, back. */ .mm-view-mm_class .detail-hero .program-panel__photo { display: block; } /* The copy takes a card. */ .mm-view-mm_class .detail-hero__copy { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 36px); box-shadow: var(--shadow-md); color: var(--ink-soft); } .mm-view-mm_class .detail-hero__copy h1 { color: var(--ink); } .mm-view-mm_class .detail-hero__lead { color: var(--ink-soft); } /* Pills were frosted white on the band. */ .mm-view-mm_class .detail-hero__tags > * { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; } .mm-view-mm_class .detail-hero__tags svg { color: var(--brand); } /* The secondary action was a white rule on a dark ground; on white it needs a real edge. The primary keeps the soft gold the band already gave it. */ .mm-view-mm_class .detail-hero__copy .btn--secondary { background: transparent; border: 1.5px solid var(--brand); color: var(--brand-dark); -webkit-backdrop-filter: none; backdrop-filter: none; } .mm-view-mm_class .detail-hero__copy .btn--secondary:hover { background: var(--brand-tint-2); border-color: var(--brand-dark); } @media (max-width: 639.98px) { .mm-view-mm_class .detail-hero__copy { padding: 20px 18px; } } /* ========================================================================== 70. The dark tint cycle, put back on brand hues Asked for: the three dark cards read as brown, teal and olive rather than as Mirai Minds. Measured by hue against the five official colours (terracotta 23.5 deg, marigold 36.4, sage 178): t1 #5E2E0D hue 24.4 sat 76% L 21% terracotta, hue exact t2 #2B4A48 hue 176.1 sat 27% L 23% sage, hue exact t3 #5C4310 hue 40.3 sat 70% L 21% marigold, drifted So two of the three were already right and only read wrong because any warm orange this dark gets called brown in English. t3 is the real fault: the hue is four degrees off marigold, the saturation is eighteen points down and the lightness is halved — and yellow has no dark reading the way orange does, so what comes out is olive. It was the one card that had stopped being a brand colour at all. t1 takes --brand-darker #843E11, already a token and already the exact terracotta hue, so the deep card and the closing panel are the same colour rather than two browns a few degrees apart. t3 takes #6E4A10, hue 37, which is marigold's own hue at card depth. t2 is untouched. Cream #EFEEE4 and white stay well clear on both: #843E11 cream 6.73:1 white 7.84:1 #6E4A10 cream 6.80:1 white 7.92:1 Applied to both places the cycle runs — the parent quotes on the home page (48) and the programme page's outcome boxes (65) — so the two stay one device rather than drifting apart again. -------------------------------------------------------------------------- */ .testi-card--t1, .mm-view-mm_class .outcomes .outcome-list__item--t1 { background: var(--brand-darker); } .testi-card--t3, .mm-view-mm_class .outcomes .outcome-list__item--t3 { background: #6E4A10; } /* ========================================================================== 71. Only the five colours in the guidelines Instruction: the darkened versions are not to be used at all — the site uses the colours the brand guidelines name, and nothing derived from them. That retires --brand-dark, --brand-darker, --dark-clay, --dark-teal, the #6E4A10 of 70 and the #5C4310 before it, as GROUNDS. Sections 56, 57, 65, 67 and 70 are all wound back to the five hexes here. #BC5A1B terracotta #EB940E marigold #A5C3C2 sage #EFDC95 soft gold #EFEEE4 cream Which text each one takes is not a choice, it is arithmetic: terracotta white 4.55 ink 3.75 -> white, and only white marigold white 2.39 ink 7.13 -> ink sage white 1.88 ink 9.08 -> ink soft gold white 1.37 ink 12.46 -> ink cream white 1.17 ink 14.63 -> ink So terracotta is the only one of the five that can carry reversed copy, and it carries it with nothing to spare: 4.55 against the 4.5 body text needs. That single number governs the rest of this section. THE PATTERN COMES OFF THE WORDS. 67 measured the real fault — the tile runs behind the copy, so where a stroke passes behind a letter the local ground is terracotta with white over it, and white-on-white-over-terracotta is 3.62 at the shipped .14. 67 solved it by darkening the ground, which is no longer available. The only other lever is to stop painting the tile where the words are, so the copy sits on flat #BC5A1B at the full 4.55. On the home hero the copy is the left column and the photograph the right, so a gradient that is clear to 44% and full from 72% keeps every word on flat ground and leaves the tile across the picture side, at full strength rather than the reduced .12 the darker ground needed. This is the same device 68 removed from the Programs hero — correctly, because there the band is soft gold with INK copy, which measures 10.33 straight through a stroke and needs no help. A mask is right where the copy is reversed out and wrong where it is not. THE TINT CYCLE stops being a dark cycle and becomes the brand's own three primaries: terracotta with white on it, sage with ink, marigold with ink. Same rotation, same job, no invented shades. -------------------------------------------------------------------------- */ /* ---- 71.1 The heroes go back to the brand colour ------------------------- */ .hero { background: var(--brand); } .hero::before { opacity: .14; } /* Clear of the copy column, full over the picture. */ @media (min-width: 900px) { .hero::before { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 72%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 72%, #000 100%); } } /* One column on a phone, so there is no picture side to keep it on: the tile comes right down instead, which is the only way white clears 4.5 there. */ @media (max-width: 899.98px) { .hero::before { opacity: .05; } } .mm-view-mm_class .detail-hero, .mm-view-mm_class .detail-hero--panel { background: var(--brand); } /* ---- 71.2 The tint cycle, on the three primaries ------------------------- */ .testi-card--t1, .mm-view-mm_class .outcomes .outcome-list__item--t1 { background: var(--brand); } .testi-card--t2, .mm-view-mm_class .outcomes .outcome-list__item--t2 { background: var(--accent-sage); } .testi-card--t3, .mm-view-mm_class .outcomes .outcome-list__item--t3 { background: var(--accent-sun); } /* Terracotta keeps white. The other two take ink — white on sage is 1.88 and on marigold 2.39, which is not a near miss, it is unreadable. */ .testi-card--t1, .testi-card--t1 blockquote p, .mm-view-mm_class .outcomes .outcome-list__item--t1, .mm-view-mm_class .outcomes .outcome-list__item--t1 .outcome-list__body { color: #fff; } .testi-card--t1 .testi-card__author b, .mm-view-mm_class .outcomes .outcome-list__item--t1 h3 { color: #fff; } .testi-card--t1 .testi-card__author small { color: rgba(255, 255, 255, .88); } .testi-card--t2, .testi-card--t3, .testi-card--t2 blockquote p, .testi-card--t3 blockquote p, .mm-view-mm_class .outcomes .outcome-list__item--t2, .mm-view-mm_class .outcomes .outcome-list__item--t3, .mm-view-mm_class .outcomes .outcome-list__item--t2 .outcome-list__body, .mm-view-mm_class .outcomes .outcome-list__item--t3 .outcome-list__body { color: var(--ink-soft); } .testi-card--t2 .testi-card__author b, .testi-card--t3 .testi-card__author b, .mm-view-mm_class .outcomes .outcome-list__item--t2 h3, .mm-view-mm_class .outcomes .outcome-list__item--t3 h3 { color: var(--ink); } .testi-card--t2 .testi-card__author small, .testi-card--t3 .testi-card__author small { color: var(--ink-soft); } /* The quote mark was cream at 28% for a dark card. */ .testi-card--t2 .quote-mark, .testi-card--t3 .quote-mark { color: rgba(36, 26, 18, .26); } /* The numeral chip: ink on cream reads on all three without a fourth colour. */ .mm-view-mm_class .outcomes .outcome-list__num { background: var(--canvas); color: var(--ink); } /* ---- 71.3 The two remaining bands --------------------------------------- */ /* For Schools' onboarding was deep teal; sage is the colour it was a shade of. Its pattern was white-not-inverted for a dark ground and goes back to ink, which is what every light ground in 28 uses. */ .mm-page-schools .steps-section--photo { --mm-band: var(--accent-sage); color: var(--ink-soft); } .mm-page-schools .steps-section--photo .section-title { color: var(--ink); } .mm-page-schools .steps-section--photo .section-sub { color: var(--ink-soft); } .mm-page-schools .steps-section--photo::before { filter: invert(1); opacity: .10; } .mm-page-schools .steps-section--photo .eyebrow { background: rgba(255, 255, 255, .72); color: var(--brand-dark); } /* Trial's "what happens" band was deep clay; soft gold is the brand's own quiet ground and takes ink at 12.46. */ .mm-page-trial .section--tint:has(.outcome-grid) { --mm-band: var(--accent-yellow); color: var(--ink-soft); } .mm-page-trial .section--tint:has(.outcome-grid) .section-title { color: var(--ink); } .mm-page-trial .section--tint:has(.outcome-grid) .section-sub { color: var(--ink-soft); } .mm-page-trial .section--tint:has(.outcome-grid) .outcome-item { border-color: var(--line); box-shadow: var(--shadow-sm); } .mm-page-trial .section--tint:has(.outcome-grid) .eyebrow { background: rgba(255, 255, 255, .72); color: var(--brand-dark); } /* ========================================================================== 72. Two layout faults 72.1 THE PROGRAMME HERO'S COPY CARD — a regression from 69, and a bad one: the lead paragraph and the two tag pills went invisible. 69 put the copy on a white card and named h1 and .detail-hero__lead back to ink, but the rules that paint this hero's text white are more specific than the ones it wrote, so they kept winning and the copy stayed white on white. What showed was a title, a gap where the description should be, and two empty outlines where the age and venue pills should be. Named again at (0,4,0), scoped through .detail-hero__copy so nothing outside the card is touched, and stated for every text node in it rather than for the two elements that happened to be noticed — a card that turns its own contents invisible is the one failure mode worth over-specifying against. 72.2 THE SAFETY ROWS. The icon is vertically centred against the whole row, so on a card with a heading and three lines of copy it floats level with the second line, beside nothing. 1.5.24 centred these markers deliberately and was right about the case it fixed — a 34px tile against a 20px label rides high when top-aligned — but that argument holds for a row that is one or two short lines, not for one carrying a heading and a paragraph. The comment at the time said as much: rows whose body can run to a paragraph are left top-aligned on purpose. This row grew a paragraph and never got the exception. Top-aligned, with a small nudge down so the 36px tile sits on the heading's centre line rather than on its cap height. -------------------------------------------------------------------------- */ /* ---- 72.1 ---------------------------------------------------------------- */ .mm-view-mm_class .detail-hero .detail-hero__copy, .mm-view-mm_class .detail-hero .detail-hero__copy p, .mm-view-mm_class .detail-hero .detail-hero__copy li, .mm-view-mm_class .detail-hero .detail-hero__copy .detail-hero__lead { color: var(--ink-soft); } .mm-view-mm_class .detail-hero .detail-hero__copy h1, .mm-view-mm_class .detail-hero .detail-hero__copy strong, .mm-view-mm_class .detail-hero .detail-hero__copy b { color: var(--ink); } .mm-view-mm_class .detail-hero .detail-hero__copy .detail-hero__tags > * { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .mm-view-mm_class .detail-hero .detail-hero__copy .detail-hero__tags svg { color: var(--brand); } /* ---- 72.2 ---------------------------------------------------------------- */ .safety__row { align-items: flex-start; } .safety__row .ico { margin-top: 2px; } /* ========================================================================== 73. The safety photograph squares up with its section Measured: .wrap.safety is a two-column grid, 649px of copy and 403px of picture, set to align-items: center. The copy column runs 506px — eyebrow, heading, supporting line and four cards — and the photograph is 362px, so centring left it floating with about 72px of band above it and 72px below, lining up with neither the heading it sits beside nor the cards it sits above. It read as a picture dropped into the band rather than as half of it. Stretched instead, so the photograph is exactly the height of the column next to it and the band has one top edge and one bottom edge across its whole width. The image was already object-fit: cover, so it crops to the new height rather than distorting; at 403 x 506 it is close to 4:5, which is a kinder frame for a room full of people than the 4:3 it had. align-items only — the column widths, the gap and everything inside both columns are left exactly as they were. -------------------------------------------------------------------------- */ .safety-band .wrap.safety { align-items: stretch; } .safety-band .safety__media { height: 100%; } /* The frame between the two kept its 4:3.6 ratio, so the column stretched and the photograph did not: 362px of picture in a 508px column. */ .safety-band .safety__frame { height: 100%; aspect-ratio: auto; } .safety-band .safety__media img { width: 100%; height: 100%; object-fit: cover; } /* One column below the split, where stretching would make the photograph as tall as the whole stack of cards. The frame sets the shape (a landscape 3:2, so a full-width tablet photo is not 620px tall) and the image fills it: height: auto here let a 4:3 photo sit short inside the frame, leaving an empty band under the picture. */ @media (max-width: 899.98px) { .safety-band .wrap.safety { align-items: center; } .safety-band .safety__media { height: auto; } .safety-band .safety__frame { height: auto; aspect-ratio: 3 / 2; } .safety-band .safety__media img { height: 100%; } } /* ========================================================================== 74. The partner cards drop their label Every card in the partner-schools slider carried the same pill: "Partner school - Japan", three times across a row and identically on every card in the set. A label that never varies is not telling the reader anything the section heading has not already said, and here it was the only coloured object on an otherwise white card, so it drew the eye away from the mark and the name, which are the two things the card exists to show. Hidden rather than removed from the template: the string is built from the record's own type and country, so it stays available to anything else that renders these cards, and putting it back is deleting one rule. -------------------------------------------------------------------------- */ .case-card__tag { display: none; } /* --------------------------------------------------------------------- The booking form on the program page. It replaces the two standalone booking pages, so it carries their weight: the .booking two-column shell, the summary aside with the photograph, the facts, the cost and the numbered steps, and the form grouped into numbered steps of its own rather than one long column of inputs. Enrolling leads \u2014 it is what the program is for \u2014 and the trial is offered beside it as the way in. --------------------------------------------------------------------- */ .booking-band { background: var(--canvas); border-top: 1px solid var(--line); } .booking-band__head { max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; } .booking-band__head h2 { margin: 6px 0 10px; } .booking-band__head p { color: var(--muted); } /* The form column, grouped into steps -------------------------------- */ .booking-step { border: 0; margin: 0 0 clamp(24px, 3vw, 34px); padding: 0; min-width: 0; } .booking-step:last-of-type { margin-bottom: 26px; } .booking-step__title { display: flex; /* baseline, not center: when the title wraps on a phone the number stays on its first line instead of floating between the two. */ align-items: baseline; gap: 12px; float: none; width: 100%; padding: 0; margin-bottom: 16px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; } .booking-step__n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; } /* Two fields on one line where they are a natural pair, so the form is not a single tall column. */ .field-pair { display: grid; gap: 0 18px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 560px) { .field-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* The choice ---------------------------------------------------------- */ .booking-form__options { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .pick { display: flex; align-items: flex-start; gap: 13px; margin: 0; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: #fff; cursor: pointer; transition: border-color var(--fast), box-shadow var(--fast); } .pick:hover { border-color: var(--brand); } .pick:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand) inset; } .pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } .pick__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pick__body b { font-family: var(--font-head); font-weight: 700; line-height: 1.25; } .pick__body small { color: var(--muted); font-size: .85rem; line-height: 1.35; } /* Radios, matched to the checkbox treatment already in the sheet. */ .pick input[type="radio"], .check input[type="radio"] { flex-shrink: 0; appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--canvas); cursor: pointer; display: grid; place-content: center; transition: background var(--fast), border-color var(--fast); } .pick input[type="radio"]::after, .check input[type="radio"]::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--fast); } .pick input[type="radio"]:checked, .check input[type="radio"]:checked { background: var(--brand); border-color: var(--brand); } .pick input[type="radio"]:checked::after, .check input[type="radio"]:checked::after { transform: scale(1); } /* The closing reassurance line. */ .booking-form__note { margin-top: 14px; text-align: center; color: var(--muted); font-size: .85rem; } /* A swapped-out panel leaves no gap behind it. */ #book [data-booking-panel][hidden], #book [data-booking-swap][hidden] { display: none; } /* Compact pass on the booking band: it sits near the foot of a long page, so it should read as a short, finishable task rather than a second page of its own. Everything below only tightens spacing — no size, colour or layout decision above is changed. */ .booking-band { padding-block: clamp(34px, 5vw, 56px); } .booking-band__head { margin-bottom: clamp(18px, 2.5vw, 26px); } .booking-band__head h2 { margin: 0 0 6px; } .booking-band__head p { font-size: .95rem; margin: 0; } .booking-band .booking { gap: 20px; } .booking-band .booking__summary { padding: clamp(16px, 2vw, 22px); } .booking-band .booking__photo { margin-bottom: 14px; } /* One column below 900px: at tablet width the 16/10 photo stood 350px tall above the form. Held to a band, as it already is on a phone (180px). */ @media (min-width: 640px) and (max-width: 899.98px) { .booking-band .booking__photo { max-height: 15rem; } } .booking-band .booking__title { margin-bottom: 12px; } .booking-band .booking__facts { gap: 8px; margin-bottom: 14px; } .booking-band .booking__steps-title { margin: 16px 0 10px; } .booking-band .booking__steps li { margin-bottom: 8px; } .booking-band .booking__steps li:last-child { margin-bottom: 0; } .booking-band .form-card { padding: clamp(20px, 2.6vw, 30px); } .booking-step { margin-bottom: 22px; } .booking-step:last-of-type { margin-bottom: 18px; } .booking-step__title { margin-bottom: 12px; font-size: 1rem; } .booking-step__n { width: 23px; height: 23px; font-size: .75rem; } .booking-form .field { margin-bottom: 14px; } .booking-form .field:last-child { margin-bottom: 0; } /* ...except the second field of a pair with more of the step shown after it: on a phone the pair stacks, and without this the next label sat flush on the input above it. [hidden] siblings are the enrollment/trial panels the choice swaps out, so they do not count. Side by side it changes nothing (the row is as tall as its first field, which has the margin). */ .booking-form .field-pair:has(~ :not([hidden])) > .field:last-child { margin-bottom: 14px; } .booking-form .field__help { margin-top: 4px; font-size: .8rem; } .booking-form .check { padding: 8px 0; } .booking-form__options { gap: 10px; } .pick { padding: 13px 15px; gap: 11px; } .pick__body small { font-size: .82rem; } .booking-form__note { margin-top: 10px; font-size: .8rem; } /* --------------------------------------------------------------------- Partner and trust marks: colour by default, quiet only where hovering is possible. The greyed-at-rest treatment exists so the logo strip does not shout next to the cards above it, and it relies on hover to give a visitor the colour back. That bargain only holds with a mouse. It had been attached to width instead (760px and 900px), so phones and tablets got full colour while laptops got grey — the same section reading as two different designs, and on touch no way to reach the colour at all. hover: hover keeps it off every touch device whatever its width, and the 1024px floor keeps it off small laptops in tablet mode. --------------------------------------------------------------------- */ @media (hover: hover) and (min-width: 1024px) { .logo-carousel__item img { filter: grayscale(1); opacity: .62; } .logo-carousel__item img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.06); } .partners__mark img { filter: grayscale(1); opacity: .75; } .partners__item:hover .partners__mark img { filter: none; opacity: 1; } } /* --------------------------------------------------------------------- The programme row on the home page. Four across only once there is room for four. This card carries a photo, a two-line title and three fact rows, and below about 300px wide it goes tall and thin and the venue and schedule start wrapping again. So the count follows the available width rather than being fixed at four: two on a small tablet, three on a laptop, four only on a wide screen. On a phone the cards stack (see rail--static on the block) instead of becoming a one-card swipe rail. --------------------------------------------------------------------- */ #homeClassGrid { gap: 18px; } @media (min-width: 640px) { #homeClassGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { #homeClassGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } @media (min-width: 1280px) { #homeClassGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } } /* Only the four-across case needs the type stepped down; at three the card is the same width as it is on the Programs listing and should read identically. */ @media (min-width: 1280px) { #homeClassGrid .class-card__body { padding: 16px 16px 18px; } #homeClassGrid .class-card__title { font-size: 1.08rem; line-height: 1.25; } #homeClassGrid .class-card__meta, #homeClassGrid .class-card__when { font-size: .82rem; } #homeClassGrid .class-card__foot { padding-top: 14px; } #homeClassGrid .class-card__price { font-size: .95rem; } } #homeClassGrid .class-card { height: 100%; } #homeClassGrid .class-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } #homeClassGrid .class-card__foot { margin-top: auto; } /* --------------------------------------------------------------------- Programme card: marker alignment and the row under it. A marker is centred against its label, which is right for one line and wrong the moment the label wraps: on a phone the venue and the schedule both run to two lines and the pin floated into the gap between them. These rows can wrap, so their markers sit on the first line. --------------------------------------------------------------------- */ .class-card__meta span, .class-card__when { align-items: flex-start; } .class-card__meta svg, .class-card__when svg { flex-shrink: 0; margin-top: .15em; } /* The schedule is a sentence, so it gets the same treatment as the meta rows rather than being centred on its own line. */ .class-card__when { display: flex; gap: 6px; line-height: 1.4; } /* Air between the last card and the link that follows the row, which were almost touching on a phone. */ .section-more { margin-top: 26px; text-align: center; } /* --------------------------------------------------------------------- Programme cards: one height, everywhere. The photo already has a fixed ratio and the title already clamps to two lines, so the parts that still moved were: a title running to one line instead of two, a venue or schedule wrapping, and a programme with no schedule at all. Each of those shortened one card in a row of four. Rather than let the grid sort it out per row, every row inside the body now holds its space whether or not it has content, and the card fills its track. A card is then the same height as its neighbours regardless of what the record happens to carry. --------------------------------------------------------------------- */ .class-grid { align-items: stretch; } .class-card { height: 100%; } .class-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } /* The second title line is no longer held open. Most titles are one line, so the reservation was a blank line under nearly every card. The price and the buttons still land level across a row because the foot is pushed down with margin-top: auto, which is what actually kept them aligned; the reservation only lined up the rows in between. */ /* The facts rows keep their slot when a record has no venue or no schedule, so the price line lands in the same place on every card. */ .class-card__meta { min-height: 1.4em; } .class-card__when { min-height: 1.4em; margin-bottom: 10px; } /* A phone lists the cards one under another, so there is no neighbour to line up with, and the reserved second title line was only a blank gap under a one-line title. The program page's "More programs" row stays a side-by-side swipe rail on a phone, so it keeps the reservation. */ @media (max-width: 639.98px) { .rail--static .class-grid:not(.siblings-band *) > .class-card h3 { min-height: 0; } } /* On a phone the cards are a swipe rail; rail items do not stretch on their own, so they are told to. */ .rail .class-grid > .class-card, .rail > .class-grid > .class-card { height: 100%; } /* ========================================================================== 75. Each page hero draws its own marks (MIRAI-82) Every hero drew all fifteen marks of pattern-elements.svg, so Programs, For Schools, About, Contact and the blog opened on the same band. 19 took the pattern off everything but the hero to stop it reading as wallpaper; this finishes the job across pages rather than within one. Each of those five takes nine marks chosen for the page, built by tools/build-hero-patterns.py into pattern-{page}.svg. Only the image changes. Those tiles keep the source's contract: 640px, white on transparent, every mark at its source scale and rotation. So the sizes, the 420px phone tile, the opacities, the masks and section 28's invert above all still apply as written. The home page, the programme pages and the 404 keep the full sheet. The Japanese twin of a page is "{slug}-ja" (tools/seed-ja.php), so each rule names both. ========================================================================== */ /* The home page had no set of its own, so the first band a visitor ever sees was the generic fifteen-mark sheet every other hero falls back to - the one page that should look most like itself looked most like everywhere else. */ .mm-page-home .hero::before, .mm-page-home-ja .hero::before { background-image: url(../images/pattern-home.svg); } .mm-page-classes :is(.page-hero, .listing-hero)::before, .mm-page-classes-ja :is(.page-hero, .listing-hero)::before { background-image: url(../images/pattern-programs.svg); } .mm-page-schools :is(.page-hero, .listing-hero)::before, .mm-page-schools-ja :is(.page-hero, .listing-hero)::before { background-image: url(../images/pattern-schools.svg); } .mm-page-about .page-hero::before, .mm-page-about-ja .page-hero::before { background-image: url(../images/pattern-about.svg); } .mm-page-contact .page-hero::before, .mm-page-contact-ja .page-hero::before { background-image: url(../images/pattern-contact.svg); } .mm-page-blog .page-hero::before, .mm-page-blog-ja .page-hero::before { background-image: url(../images/pattern-blog.svg); } /* ========================================================================== 76. Copy doc v2 (24 Sep 2026) Structure the copy document asks for by name: the home proof row, the programs grouped by age, stars on the quotes, the program page's reviews and interest form, the For Schools additions and the footer newsletter. Nothing here restyles a section the document did not touch. ========================================================================== */ /* ---- 76.1 Home proof row (doc 1.4, 1.5) ---------------------------------- */ .trust--facts .trust__facts { list-style: none; margin: 0 0 clamp(18px, 2.4vw, 26px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); } .trust__fact { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); } .trust__fact b { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.25; color: var(--ink); } .trust__fact b.stars { color: var(--accent-sun); letter-spacing: .08em; } .trust__fact small { font-size: .86rem; color: var(--muted); } .trust__heading { margin: 0 0 12px; font-size: .9rem; font-weight: 600; color: var(--muted); } @media (max-width: 899.98px) { .trust--facts .trust__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust--facts .trust__fact:last-child { grid-column: 1 / -1; } } /* ---- 76.2 Home programs grouped by age (doc 1.7) --------------------------- */ .age-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(22px, 3vw, 32px); } .age-tabs__list[hidden] { display: none; } .age-tabs__tab { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 10px 22px; border: 1.5px solid rgba(255, 255, 255, .55); border-radius: 999px; background: transparent; color: #fff; font: inherit; cursor: pointer; transition: background var(--base) var(--ease), color var(--base) var(--ease); } .age-tabs__tab b { font-family: var(--font-head); font-size: 1rem; } .age-tabs__tab small { font-size: .8rem; opacity: .9; } .age-tabs__tab:hover { background: rgba(255, 255, 255, .12); } .age-tabs__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--brand-dark); } .age-tabs__tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Without the script every group shows under its own heading; with it the tabs say which group is showing. */ .age-tabs__heading { margin: 0 0 16px; color: #fff; font-size: 1.25rem; } .age-tabs__heading small { font-size: .85rem; font-weight: 400; opacity: .9; } .age-tabs.is-tabbed .age-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .age-tabs__panel + .age-tabs__panel { margin-top: clamp(28px, 4vw, 40px); } .age-tabs.is-tabbed .age-tabs__panel + .age-tabs__panel { margin-top: 0; } /* The three bands were separate lozenges, each sized to its own label, so "Primary" came out half the width of "Middle & High School" and the row read as three unrelated blobs rather than one control with one of them chosen. From tablet up they sit in a single track as equal segments - grid columns of 1fr inside a fit-content track all take the width of the widest - and the chosen one is the only filled thing in it. The track carries the edge, so a segment needs no border of its own. Below 768px there is no room for three equal segments - "Middle & High School" breaks in two and takes all three with it - so they stay separate pills there and keep their own edge. */ .age-tabs__tab { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .72); gap: 3px; padding: 11px 22px; } .age-tabs__tab:hover { background: rgba(255, 255, 255, .22); } .age-tabs__tab small { opacity: 1; color: rgba(255, 255, 255, .88); } .age-tabs__tab[aria-selected="true"] small { color: var(--brand-dark); opacity: .82; } /* The groups hold 4, 7 and 2 programs. On the shared three-column grid that was a lone card under a full row (4) and a half-empty row (2). A centred wrapping row instead: four across a desktop, and any short last row sits in the middle rather than hanging off the left edge. */ @media (min-width: 760px) { .age-tabs__panel .class-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* height: auto, so the row's stretch gives every card one height (the card's own height: 100% is for a grid cell and blocks stretch here). */ .age-tabs__panel .class-grid > .class-card { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; height: auto; } } @media (min-width: 1000px) { .age-tabs__panel .class-grid { gap: 24px; } .age-tabs__panel .class-grid > .class-card { flex-basis: calc((100% - 48px) / 3); } } /* Four across from 1180px, not 1280. The Early Years band holds four programmes, so at three columns the fourth sat alone on a row of its own, and a 1280px threshold dropped every laptop window narrower than that into it. 1180px is the measured point where four cards still leave the action pill wide enough for its longest label on one line; at 1100px it breaks. */ @media (min-width: 1180px) { .age-tabs__panel .class-grid > .class-card { flex-basis: calc((100% - 72px) / 4); } } /* Phone: the three tabs wrap two-and-one, and each row fills the width, so the pills are not three different widths stacked down the middle. */ @media (max-width: 639.98px) { .age-tabs__list { gap: 8px; } .age-tabs__tab { flex: 1 1 auto; padding: 10px 14px; } } @media (min-width: 768px) { .age-tabs__list { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; max-width: 100%; margin: 0 auto clamp(22px, 3vw, 32px); gap: 4px; padding: 5px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .30); border-radius: 999px; } .age-tabs__tab { background: transparent; border-color: transparent; } .age-tabs__tab:hover { background: rgba(255, 255, 255, .16); } .age-tabs__tab[aria-selected="true"]:hover { background: #fff; } .age-tabs__tab[aria-selected="true"] { box-shadow: 0 1px 3px rgba(0, 0, 0, .14); } } /* Between tablet portrait and desktop a track sized to its own content left each segment about 185px, which broke "Middle & High School" over two lines and took all three to 114px tall. The track takes the row instead, so the segments are wide enough for the label to stay on one line. */ @media (min-width: 768px) and (max-width: 899.98px) { .age-tabs__list { width: 100%; } .age-tabs__tab { padding-inline: 14px; } .age-tabs__tab b { font-size: .92rem; } } /* The one thing to do on a programme card was a line of text set at the body size, sitting under a rule: it read as a caption, not as the action. A pill across the card's width makes it the control it already was - the whole card has been clickable all along through .class-card__link::after, so this changes what the card LOOKS like it does, not what it does. Filling on card hover ties the pill to the card the pointer is actually over. */ .class-card--age .class-card__foot { display: block; padding-top: 16px; } .class-card--age .class-card__link { display: flex; justify-content: center; width: 100%; min-height: 46px; padding: 10px 18px; border: 1.5px solid var(--brand); border-radius: 999px; background: transparent; color: var(--brand-dark); text-align: center; transition: background var(--base) var(--ease), color var(--base) var(--ease), border-color var(--base) var(--ease); } .class-card--age .class-card__link:hover, .class-card--age:hover .class-card__link, .class-card--age:focus-within .class-card__link { background: var(--brand); border-color: var(--brand); color: #fff; } @media (prefers-reduced-motion: reduce) { .class-card--age .class-card__link { transition: none; } } /* Four across from 1280px leaves the pill 208px, six short of what the longest label needs, so "Ask about this class" broke over two lines beside three neighbours that kept one. Less air in the pill and a slightly smaller label buy the room back rather than letting one card stand taller than its row. */ /* Matches where the band goes four across (1180px). At four columns the pill is about 257px of card, six short of what "Ask about this class" needs, so without this it breaks over two lines beside three neighbours that keep one. */ @media (min-width: 1180px) { .class-card--age .class-card__link { padding-inline: 12px; font-size: .88rem; gap: 6px; } } /* The head of this band was carrying a lot of air: a pill, a heading, two lines of copy and then 52px before the age control. With the pill gone the heading opens the band, and the gaps close up so the programmes themselves start higher up the screen. */ #classes .section-head { margin-bottom: clamp(20px, 2.6vw, 30px); } #classes .section-title { margin-bottom: 8px; } .class-card--age .class-card__meta { display: block; margin-bottom: 8px; color: var(--muted); font-size: .86rem; } .class-card--age .class-card__meta a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; } .class-card--age .class-card__line { margin-bottom: 16px; } .class-card--age h3 { min-height: 0; } /* The title link was a 31px tap target on a phone. The padding takes it past 44px and the matching negative margin keeps the card's spacing as it was. */ .class-card--age .class-card__title a { display: inline-block; padding-block: 9px; margin-block: -9px; } /* ---- 76.3 Stars on the quotes, and the parent's photo (doc 1.8) ----------- */ .testi-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .testi-card__stars { font-size: .95rem; line-height: 1; letter-spacing: .08em; color: var(--accent-sun); } .testi-card--t3 .testi-card__stars { color: var(--ink); } .testi-card__avatar--photo { padding: 0; overflow: hidden; background: none; } .testi-card__avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ---- 76.4 Meet the educators: photo, name, subject, one line (doc 1.11) --- 20.11 hid the bio to keep the row to faces and names; the document asks for the one line back. The "does" line stays hidden. */ .collab-card:not(.collab-card--school) .collab-card__bio { display: block; margin: 8px auto 0; max-width: 26ch; text-align: center; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); } /* ---- 76.5 Programs page (doc 2) ------------------------------------------ */ .btn--sm { min-height: 40px; padding: 8px 16px; font-size: .88rem; gap: 6px; } /* The card's six rows, then the two buttons side by side under the price. The rows keep their slot when empty so the price and buttons line up across a row of cards. */ .class-card__body .class-card__status { min-height: 1.4em; margin: 0 0 8px; font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--sage-deep); } .class-card__body p.class-card__line { margin-bottom: 12px; } .class-card__foot { flex-direction: column; align-items: stretch; gap: 12px; } /* Two equal buttons while both labels fit on one line each; when they do not, each takes the full width rather than breaking into a two-line pill ("See / program" in a 3-up row at 1024px, "Register / interest" on every width). The wrap is decided by the labels themselves, so a longer translation wraps too. 44px keeps them a finger's width on a phone. */ .class-card { container: class-card / inline-size; } .class-card__actions { display: flex; flex-wrap: wrap; gap: 8px; } .class-card__actions .btn { flex: 1 1 0; min-width: fit-content; min-height: 44px; padding-inline: 10px; white-space: normal; text-align: center; line-height: 1.2; } /* In a row of cards the neighbours must agree, or the price and buttons stop lining up across the row. So from two columns up, a card too narrow for the longest pair (Register interest + Ask a question) stacks its buttons whatever it carries. On a phone the list is one column and each card decides for itself. */ @media (min-width: 640px) { @container class-card (inline-size < 17.5rem) { .class-card__actions .btn { flex-basis: 100%; } } } /* How to choose: the area over the title. */ .feature-card__kicker { display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); } .feature-card__more { margin-top: 8px; font-size: .9rem; } /* The areas line under the Programs lead. */ .split-hero__note { margin-top: 10px; font-weight: 600; letter-spacing: .02em; } .listing-hero--photo .split-hero__note { color: #fff; } /* ---- 76.6 Program page (doc 3) ------------------------------------------- */ /* The line under the hero buttons. */ .detail-hero__note { margin: 14px 0 0; font-size: .95rem; color: var(--muted); max-width: 52ch; } /* The teacher: the photo slot keeps its square with no photo set (the placeholder of 14g paints it), and the button sits under the line. */ .people-band .teacher-card__photo { aspect-ratio: 1; } .people-band .teacher-card__photo img { width: 100%; height: 100%; object-fit: cover; } .people-band .teacher-card--general { grid-template-columns: 1fr !important; max-width: 760px; margin-inline: auto; text-align: center; } .people-band .teacher-card--general p { margin-inline: auto; } /* What parents say about this program. */ .reviews-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .review-card { margin: 0; padding: clamp(22px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 12px; } .review-card__stars { color: var(--accent-sun); letter-spacing: .08em; } .review-card blockquote { margin: 0; } .review-card blockquote p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; } .review-card figcaption { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .review-card figcaption b { font-family: var(--font-head); color: var(--ink); } .review-card figcaption span { color: var(--muted); font-size: .88rem; } /* Register interest: one column, the width of the booking form's card. */ .interest-form { max-width: 640px; margin-inline: auto; } /* The email field is the last child of its pair, so `.booking-form .field:last-child` took its bottom margin. Side by side that is hidden by the name field's margin; stacked on a phone it put the phone label flush against the email input. Both fields in the pair keep the form's spacing. */ .interest-form .field-pair > .field { margin-bottom: 14px; } /* ---- 76.7 Program skills carry their icon (doc 4) ------------------------- */ .outcome-list__num--ico svg { width: 18px; height: 18px; } /* ---- 76.8 For Schools (doc 6) --------------------------------------------- */ /* The two buttons never fit side by side in the copy column, so they stack, and a grid makes the stack one width: as a wrapping flex row each button kept its own length, the second visibly wider than the first. On a phone both take the full column. */ .split-hero__actions { display: grid; justify-content: start; gap: 12px; margin-top: 22px; } .split-hero__actions .btn { justify-content: center; } @media (max-width: 599.98px) { .split-hero__actions { justify-content: stretch; } } .split-hero__stats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .split-hero__stats li { display: flex; flex-direction: column; gap: 2px; } .split-hero__stats b { font-family: var(--font-head); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; } .split-hero__stats small { font-size: .84rem; opacity: .9; } @media (max-width: 599.98px) { .split-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- 76.9 About team card lines (doc 7.4, 7.5) ----------------------------- */ .team-card__points { order: 3; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .92rem; line-height: 1.5; } .team-card__points li + li { margin-top: 4px; } /* ---- 76.10 Contact FAQ in two tabs, and the programs line (doc 8) ---------- */ .faq-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(20px, 3vw, 28px); } .faq-tabs__list[hidden] { display: none; } .faq-tabs__tab { min-height: 44px; padding: 10px 22px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .95rem var(--font-head); cursor: pointer; } .faq-tabs__tab[aria-selected="true"] { background: var(--brand); border-color: var(--brand); color: #fff; } .faq-tabs__tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; } .faq-tabs__heading { margin: 0 0 14px; font-size: 1.2rem; text-align: center; } .is-faq-tabbed .faq-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .faq-tabs__panel + .faq-tabs__panel { margin-top: 28px; } .is-faq-tabbed .faq-tabs__panel + .faq-tabs__panel { margin-top: 0; } .map-box__detail { margin-top: 4px; font-size: .88rem; color: var(--ink-soft); } /* ---- 76.11 Footer newsletter (doc 9.2) ------------------------------------ */ .footer__newsletter { display: grid; gap: 10px 24px; grid-template-columns: 1fr; align-items: center; padding-bottom: clamp(24px, 3vw, 36px); margin-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid rgba(255, 255, 255, .14); } .footer__newsletter h3 { margin: 0; color: #fff; font-size: clamp(1.15rem, 2vw, 1.35rem); } .footer__newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; } .footer__newsletter-form input { flex: 1 1 220px; min-height: 48px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; } .footer__newsletter-form input::placeholder { color: rgba(255, 255, 255, .7); } .footer__newsletter-note, .footer__newsletter-done { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .75); } @media (min-width: 900px) { .footer__newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .footer__newsletter-note { grid-column: 2; } } .footer__newsletter-form .btn { --btn-bg: #fff; --btn-fg: var(--brand-dark); box-shadow: none; } .footer__newsletter-form .btn:hover { background: var(--brand-tint); } /* ========================================================================== 77. The school marks under the hero, at a width they can be read (MIRAI-86) The marks were still unreadable at 104px, and the ring was the reason. A circle hands every mark the same square to live in, about 68px across once the padding and border are taken out, and most of these marks are not square. A wordmark fills the width and gets a third of the height: Ryozan Park drew at 68x20, ASIJ at 68x31, TIK and Tokyo YMCA at about 68x33, Global Indian at 68x36, and the name set in each of them came out a few pixels tall. The ring becomes a pill: the same 2px line on the same white, the radius the buttons and the hero badge already use, and the same 104px height, so the band does not grow. What changes is the width. The drawing gets about 148x76 instead of 68x68, so a wordmark roughly doubles and a square crest gains a little. Every tile is still the same size, so the row still reads as one row of equal objects. The height limit is written in pixels. max-height: 100% never resolved here, because the wrapper span is a grid item whose row has no definite height; the ring hid that, since in a square the width always ran out first. United School of Tokyo, the one tall mark, was already drawing 102px high in a ring meant to hold 68. The limit is the tile's height less its padding and its 2px border top and bottom. Width and height stay auto, which never draws a mark larger than its own file: a small source stays at its own size rather than being blown up soft. ========================================================================== */ .trust__track .logos .trust__logo { width: 200px; height: 104px; padding: 12px 24px; border-radius: 999px; } .trust__track .logos .trust__logo img { max-height: 76px; } @media (max-width: 639.98px) { /* The phone size from 39, widened the same way: about 110x54 for the drawing against 50x50 in the ring. */ .trust__track .logos .trust__logo { width: 150px; height: 78px; padding: 10px 18px; } .trust__track .logos .trust__logo img { max-height: 54px; } } /* ---- 77. Long parent quotes fold to a few lines --------------------------- The quotes are printed as the parents wrote them, and some run to a paragraph. initQuoteClamp() in site-effects.js adds .is-clamped only when the quote overflows these lines, and a "Read more" button that opens it in place; without JavaScript the quote reads in full. Seven lines keeps the row of three level with the short quotes beside it. The button takes the card's text colour (white on terracotta, ink on sage and gold), bold and underlined so it reads as an action rather than more of the quote. */ .testi-card__quote.is-clamped p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; } .testi-card__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .testi-card__more:hover { text-decoration-thickness: 2px; } .testi-card__more:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; } /* ---- 78. The testimonials carousel (MIRAI-93) ----------------------------- Copy doc 1.8 asks for a carousel, and new quotes (principals, children) join it in the same format, so the row has to read the same with one quote, three or fifteen. The cards are untouched; this is the container. The track is .testi-grid itself, still a grid, so a card keeps its three- row subgrid and every quote and author row still lines up across what is in view. From 640px it is one row that flows sideways: two cards across, three from 760px, the counts and gaps the grid had in 16, and a scroll- snap scroller for the rest. Below 640px the phone rail in 61 is left as it was: one centred card with a peek of the next either side. justify-content: safe center is what makes one or two quotes on a desktop a centred card or pair rather than a left-hand column with a blank beside it; `safe` drops back to start the moment the row overflows, so the first card can never be pushed out of reach. A browser without `safe` ignores the declaration and starts the row at the left, which is what it did. The track bleeds --testi-bleed past .wrap's content box on each side, and takes the same back as padding. overflow-x clips whatever reaches past the scroller's edge, and without the bleed that would be the hover lift and the shadow of every end card. The bleed is less than the smallest gutter (20px), so the scroller never reaches the edge of the page. scroll-padding matches it, so a snapped card lines up with the section heading as before. */ .testi-carousel__nav[hidden] { display: none; } @media (min-width: 640px) { .testi-carousel { --testi-per-view: 2; --testi-gap: 24px; --testi-bleed: 16px; } .testi-grid--carousel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--testi-per-view) - 1) * var(--testi-gap)) / var(--testi-per-view)); gap: var(--testi-gap); justify-content: safe center; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--testi-bleed); scrollbar-width: none; margin: -12px calc(var(--testi-bleed) * -1) -30px; padding: 12px var(--testi-bleed) 30px; /* The card just out of view still casts its shadow into the bleed, and the scroller's edge cut it off in a hard vertical line beside the first card. Fading the bleed takes the line away; the cards in view sit wholly inside the opaque part. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--testi-bleed), #000 calc(100% - var(--testi-bleed)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--testi-bleed), #000 calc(100% - var(--testi-bleed)), transparent); } .testi-grid--carousel > * { scroll-snap-align: start; } } @media (min-width: 760px) { .testi-carousel { --testi-per-view: 3; --testi-gap: 16px; } } @media (min-width: 900px) { .testi-carousel { --testi-gap: 24px; } } .testi-grid--carousel::-webkit-scrollbar { display: none; } /* 17's reduced-motion rule turns snapping off on every rail; this section's own scroll-snap-type above would otherwise put it back from 640px. */ @media (prefers-reduced-motion: reduce) { .testi-grid--carousel { scroll-snap-type: none; } } /* ---- 78.1 The controls: previous, the dots, next -------------------------- Under the row at every width rather than over the cards: on a phone the rail's own buttons sat on the quote, and on a desktop a button beside the row would need gutter the wrap does not have at 640 to 1100px. White discs with a terracotta chevron, the For Schools slider's buttons (4899) and its sage hover (5470), so the site has one kind of arrow. The dots are sage, the old quote panel's colours (5466), one per stop, and the current one stretches to a bar so it reads as "here" without relying on colour alone. When there are more than fit on one line between the arrows (fifteen quotes on a 320px phone), the script swaps them for a "3 / 15" count in the same place rather than wrap them onto a second row. An arrow at the end of the row is dimmed, not removed or disabled: it keeps its place so the dots do not shift, and it keeps keyboard focus, so a reader pressing Next through to the last quote is not dropped to the top of the page. */ .testi-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; } .testi-carousel__btn { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #fff; color: var(--brand-dark); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), opacity var(--fast) var(--ease); } .testi-carousel__btn svg { width: 20px; height: 20px; } .testi-carousel__btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; } .testi-carousel__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } .testi-carousel__btn[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; background: #fff; border-color: var(--line); color: var(--brand-dark); } .testi-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; } .testi-carousel__dots.is-count { min-width: 4.5em; color: var(--sage-deep); font-family: var(--font-head); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .testi-carousel__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(63, 102, 100, .3); transition: width var(--fast) var(--ease), background var(--fast) var(--ease); } .testi-carousel__dot.is-active { width: 22px; background: var(--sage-deep); } @media (max-width: 639.98px) { .testi-carousel__nav { gap: 14px; margin-top: 0; } } /* -------------------------------------------------------------------------- 78. The team card's text sits under the role, flush with the name The About team cards showed three faults, and each had its own cause. A gap of about 48px between the role and the lines below it: 40 and 47 held three lines open under every role for "Business Development Manager", a title nobody on the team has any more, so a one-line role carried two empty lines. The lines were indented about 20px: the list kept the 1.1em of padding a bullet needs, but the base reset hides the bullets, so the padding was all that showed. And extra space under the last line: the list kept a 16px margin below it, on top of the card's own padding. The reserve existed so the text starts level across a row, and that still matters: at two columns a role such as "Finance & Administration" can wrap. So the row now lines up from what it actually contains. Each card becomes four rows of the grid it sits in (photo, name, role, text) through subgrid, and each row of the grid is as tall as the tallest name or role in that row of cards. A role that wraps pushes its neighbours' text down with it, and when every role is one line, no space is held open. Only where the cards are a grid. On phones they are a rail of one card at a time, with no row to line up with, and the flex column from 40 stays. A browser without subgrid keeps the flex column too: the text starts straight under each card's own role. -------------------------------------------------------------------------- */ @media (min-width: 640px) { @supports (grid-template-rows: subgrid) { .team-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } .team-card__body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; } } } /* ---- The programme card's type scale ------------------------------------ The card had no hierarchy between its name and its fee. The two fact rows sat at different sizes although they are the same kind of information one under the other - the ages and venue at .82rem, the schedule at .95rem because nothing set it and it inherited the body size - and the teaser matched the schedule exactly, so a sentence and a data row carried the same weight. Everything between the title and the price was also one colour. Four steps, with size and tone both doing work: the name 1.32rem 700 ink what it is the facts .82rem 400 muted ages, place, schedule - scanned the sentence .9rem 400 ink-soft what the child does - read the fee 1.06rem 700 ink the decision */ .class-card .class-card__meta, .class-card .class-card__when { font-size: .82rem; line-height: 1.45; color: var(--muted); } .class-card p.class-card__line { font-size: .9rem; line-height: 1.5; color: var(--ink-soft); } /* The trial note in the booking panel (copy doc 5.2 and 5.5). It reads as reassurance beside the fee, so it sets quieter than the panel's own facts and keeps a rule above it to separate it from the figure. */ .booking__trial-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .booking__trial-note p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); } .booking__trial-note p:last-child { margin-bottom: 0; } .booking__trial-note[hidden] { display: none; } /* ---- Bands alternate, however many an editor adds ----------------------- The design alternates the page's cream ground with white bands, which works while the sections alternate. For Schools runs two white ones back to back (the formats and the pricing ask) directly under a third, so a long stretch of that page is one unbroken white field - which is what reads as bland. A white band that directly follows another takes the cream ground back, so the alternation holds whatever order the sections end up in. Positional rather than a class on each section, so nothing needs re-tagging when a section is added, moved or removed. Contact is untouched: its bands already alternate. */ .section--tint + .section--tint { background: var(--canvas-2); } .section--tint + .section--tint + .section--tint { background: var(--canvas); } .section--tint + .section--tint + .section--tint + .section--tint { background: var(--canvas-2); } /* The catalog's padding was collapsed into the band above it precisely because the two shared a ground. They no longer do, so it needs its own top padding back or its card sits on the seam between two colours. */ .section--tint + .section--tint:has(> .wrap > .catalog) { padding-top: var(--band); } /* ---- The hero's primary button keeps a white label ---------------------- Measured on For Schools: ink on terracotta, 2.61:1, where a label needs 4.5:1 - and the same at rest as on hover, so the button was hard to read before the pointer ever reached it. --btn-fg was #fff the whole time; something downstream set `color` directly and won, so this says it at the end of the sheet where nothing follows. Every hero band, because they all put the same terracotta button on a coloured ground. */ .page-hero .btn--primary, .page-hero .btn--primary:hover, .page-hero .page-hero__actions .btn--primary, .page-hero .page-hero__actions .btn--primary:hover, .listing-hero .btn--primary, .listing-hero .btn--primary:hover, .detail-hero .btn--primary, .detail-hero .btn--primary:hover { color: #fff; } /* The buttons that sit on the soft gold keep their ink. White on gold is 1.37:1 - the pair that actually fails - and these flip their ground rather than their label, so they were already right. The home hero's button is gold at rest, not only on hover. */ .hero .btn--primary, .hero .btn--primary:hover, .detail-hero--panel .btn--primary, .detail-hero--panel .btn--primary:hover, .mm-view-mm_class .detail-hero--panel .btn--primary, .mm-view-mm_class .detail-hero--panel .btn--primary * { color: var(--ink); } /* ---- The hero's copy sits on its own surface ---------------------------- Every inner-page hero set its heading and copy straight onto the band, with the page's marks showing through behind the words. The programme page had already solved this - .detail-hero__copy is a white card on the terracotta band - and this is the same treatment on the rest of them, so a heading never has a compass drawn through it. The home page is excluded: its hero is the photograph and the copy beside it, and a panel there would box in the one band that should feel open. */ .page-hero--split .split-hero__copy, .listing-hero .split-hero__copy, .page-hero .page-hero__inner { background: var(--surface); border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 36px); box-shadow: var(--shadow-md); } /* A centred hero's panel should not run the full measure of the band. */ .page-hero .page-hero__inner { max-width: 720px; margin-inline: auto; } @media (max-width: 639.98px) { .page-hero--split .split-hero__copy, .listing-hero .split-hero__copy, .page-hero .page-hero__inner { padding: 20px 18px; } }