/* ============================================================ * MODULAR BANDS — the Monzo pattern, site-wide (5 Aug 2026) * * LOADED LAST ON EVERY PAGE, and it has to be. The section tints are declared in * gsap-trial.css, product-v3.css, onsite-v2.css and school-types.css, all of * which load after home-v2.css — so the same rules living there lost on both load * order and specificity (`.hv2 .band--blog` is 0,2,0 against a bare class). A * separate last-loaded sheet wins on order without a specificity arms race. * * WHAT MONZO ACTUALLY DOES, measured on monzo.com at 1440x900, 5 Aug 2026: * - NO full-bleed coloured areas anywhere. I checked every element whose width * equals the viewport and paints a background: the list came back empty. * - Section backgrounds: 6 white, 7 transparent (so white), 4 on a tint, 3 dark. * That tint is #F2F8F3 — about 1.5% off pure white, which is why Rebecca read * the whole page as white. * - Their real colour is in SIX cards, none full-bleed: the hero, three dark * panels, one red card and the footer. 24px inset, 64px radius. * * SO THE RULE IS: * 1. Every section background is WHITE. No tints, no washes. * 2. Colour survives only in DARK cards — inset 24px, 64px radius. * * ⚠ THIS RETIRES TWO RULES IN CLAUDE.md, which still carries both: * - "No flat seams: every section boundary has one element crossing it." * Cards cannot be crossed, so the seam overlaps are flattened below. * - "Colour-block sections: pages read as a rhythm of full-width colour * washes... no two adjacent sections sharing a background." With every * section white there is no rhythm to hold; the dark cards carry it instead. * ============================================================ */ :root { /* ⚠ 64px, MEASURED off monzo.com/current-account/personal (the page Rebecca linked) at 1440: their hero card is 1312 wide in a 1440 window, i.e. 64px each side, radius 64. Ours was 24 — the cards ran much closer to the screen edge than theirs. "we should be doing number one across site." One token, so every carded band on every page moves together. */ /* ⚠ THE INSET CAN NEVER EXCEED THE PAGE'S OWN TEXT INSET, or the card's edge ends up further in than the words beside it and the two can never line up. Measured at 1200px: a flat 64px put module headings at 64 while everything else sat at 32 — unalignable, because you cannot give a container negative padding. So it is derived, not fixed: the page's effective text inset is (viewport − container cap) ÷ 2 + the container's own padding, i.e. (100vw − 1280px)/2 + 32px. Capped at Monzo's 64 and floored at 16 for phones. 1440 → 112 → 64 (Monzo's number, which is the point of the exercise) 1344 → 64 → 64 1280 → 32 → 32 1200 → −8 → 16 Below the cap the card tucks in as the page does, and everything stays in line without a single hard-coded breakpoint. */ --band-inset: clamp(16px, calc((100vw - 1280px) / 2 + 32px), 64px); /* the widest any card, hero or content column ever gets — her rule from 3 Aug, previously only obeyed by the heroes. See the wide-screen note below. */ --page-cap: 1500px; --band-seam: 24px; /* card-to-card gap DOWN the page */ --band-radius: 64px; /* Monzo's */ } /* THE PAGE ITSELF. gsap-trial.css sets `body.hv2 { background: #F7F6F3 }` — the home page's whole page background is the warm off-white, which made it the single biggest non-white surface on the site. Monzo's page background is pure white. This is the change that actually delivers "only white backgrounds"; the section rules below were being read against a tinted page. */ body.hv2 { background: #fff; } /* ---------- 1. every section tint becomes white ---------- */ /* Every selector carries body.hv2 (0,2,1) on purpose. gsap-trial.css declares `.hv2 .band--sky, .hv2 .band--price, .hv2 .band--blog { background: #F7F6F3 }` at 0,2,0 — a bare class here loses to that no matter how late this file loads, which is exactly what happened on the first attempt: every page went white except the home page. */ body.hv2 .band--sky, body.hv2 .band--quote, body.hv2 .band--light, body.hv2 .band--price, body.hv2 .band--blog, body.hv2 .band--readmore, body.hv2 .band--mtx, body.hv2 .ml-faqs, body.hv2 .os-says, body.hv2 .os-ml, body.hv2 .pcband, /* .dm-steps and Founders Club's .band--light are modules now — see below */ body.hv2 .ph-support, body.hv2 .pol-hero, body.hv2 .st-lineup, body.hv2 .st-proof, body.hv2 .ab2-benefits, body.hv2 .ab2-jobs--close, body.hv2 .bp-trust, body.hv2 .auth-wrap, body.hv2 .trust2, body.hv2 .pv3-acc, body.hv2 .pv3-appall, body.hv2 .pv3-benefits, body.hv2 .pv3-chapters, body.hv2 .pv3-feat, body.hv2 .pv3-parents, body.hv2 .pv3-voice, body.hv2 .pv3-steps, body.hv2 .os-mods, body.hv2 .os-trust, body.hv2 .os-used, body.hv2 .os-mis { background: #fff; /* deliberately NOT cards. A card on a white section is an invisible box whose only effect is to inset the content — which is why Monzo's white sections are not cards either. */ margin-inline: 0; border-radius: 0; } /* ---------- 2. dark bands are the cards ---------- * Our equivalent of Monzo's six coloured cards, and now the only place colour * appears at section scale. */ /* .band--quote was here and has been removed (5 Aug): the home testimonial is a plain white section now, not a card. See the note on .band--quote in home-v2.css — four surfaces have been tried and dropped for that one quote. */ body.hv2 .band--blue, body.hv2 .band--navy, body.hv2 .band--mlviolet, body.hv2 .pv3-switch, body.hv2 .pp-band { margin-inline: var(--band-inset); border-radius: var(--band-radius); overflow: hidden; } /* ---------- 2a. NEUTRAL MODULES ---------- * Monzo's modules come in two flavours, not one: DARK cards and a neutral * near-white card. Their neutral is #F2F8F3 — 4.2% off pure white. Rebecca asked * for the equivalent in our own palette, so this uses the brand's cool near-white * --ge-bg-light #F3F7FA, which is 3.3% off white: on-brand with the navy/sky * family, and a shade subtler than theirs. * Add `band--module` to any section that should read as a distinct panel rather * than as part of the white page. Use it sparingly — the whole point of the white * page is that a module means something. * Must come AFTER rule 1, which sets these same sections to white at the same * specificity (0,2,1); this only wins by being later in the file. */ body.hv2 .band--module { background: var(--ge-bg-light, #F3F7FA); margin-inline: var(--band-inset); border-radius: var(--band-radius); overflow: hidden; } /* ---------- 2b. PHOTO BANDS are modules too ---------- * Rebecca, 5 Aug: "the full width photos need to be put into modules too." * Two sections carry a full-bleed blurred photograph behind their content — the * home page's "How switching works" band and Classroom's testimonial. Both wear * .band--photo. Their sections went white with rule 1, but the PHOTO inside was * still running the full width of the viewport, so they were the last full-width * areas left on the site. * Must come AFTER rule 1: .band--photo co-occurs with .band--light and * .pv3-voice, which rule 1 sets to `margin-inline: 0; border-radius: 0` at the * same specificity (0,2,1) — so this only wins by being later in the file. * overflow: hidden is what clips the photo to the rounded corners; the photo's * own `inset: -30px` blur bleed is clipped with it, which is correct. * The home hero's photo needs nothing — it already sits inside .hero2__frame, * which has been an inset 64px-radius card all along. */ body.hv2 .band--photo { margin-inline: var(--band-inset); border-radius: var(--band-radius); overflow: hidden; } /* ---------- 3. flatten the seams ---------- * The -56px margin on .seam-curve pulled each band up under the one above so * elements could cross the join. Cards must not overlap. */ .seam-curve { margin-bottom: 0; } /* ⚠ --band-seam, NOT --band-inset. These were one token until the inset went to Monzo's 64px, and the vertical gap between cards silently went with it: the section rhythm jumped from 176px to 216 on every page at once. They are different measurements. --band-inset is how far a card sits from the SIDE of the window (Monzo: 64). --band-seam is the gap between one card and the next going DOWN the page, which stays at the 24px it was designed as — the rhythm is set by the sections' own padding, and 2×76 + 24 = 176, Monzo's measured median. */ main > section + section { margin-top: var(--band-seam); } /* ---------- 4. straddling elements come back inside ---------- * Each was built to hang out of a band edge. With cards there is no edge to * cross. ⚠ NOT .crests or .proof — those are ordinary blocks with a legitimate * top margin, and zeroing it made the crest strip collide with the element above * on Primary, Secondary and LAs & MATs. Only true straddlers belong here. */ .proofrow, .stepscard, .pricegrid, .roigrid, .pv3-acc__media, .pp-final__card { margin-top: 0; margin-bottom: 0; transform: none; } /* ⚠ .pcband__card TAKEN OUT of the straddle reset above (5 Aug: "i dont like how close the card is to the module edge"). It was never a straddler — it is a white card sitting INSIDE a photo frame, and its margin is the inset that holds it off the frame's edges. Zeroing margin-top/bottom with the genuine straddlers pinned it flush to the top and bottom of the module while it kept its left inset, so it read as a card that had been cropped rather than placed. Inset restored, and widened while we are here: was clamp(20px,3vw,48px), now clamp(24px,4vw,64px) — 58px at 1440 against 43px. transform:none is kept, because that part of the reset was doing real work. */ .pcband__card { transform: none; margin: clamp(24px, 4vw, 64px); } /* The footer contact-band straddle is left alone on purpose: the footer is not a carded band, so it still has a flat edge to cross. */ @media (max-width: 700px) { :root { --band-inset: 16px; --band-radius: 32px; --band-seam: 16px; } /* 64px would leave ~260px of card on a phone */ } /* ============================================================ * ONE MARGIN FOR EVERY SECTION (5 Aug 2026) * "can we make sure all sections of the home page are using the same margins." * Measured on the home page: content was starting at THREE different x positions * — 88px in a plain white section, but 112px inside a module, because the module's * own 24px inset stacks on top of the container's 88px padding. The 24px shift was * visible as headings not lining up down the page. * Fix: inside a carded section the container gives back exactly what the card took. * 88 - 24 = 64, so content lands at 88px either way. * --page-gutter has to exist because the container's padding differs by page (the * home page runs Monzo's 88px, every other page 32px) and CSS cannot read a * sibling's padding. * ============================================================ */ /* ⚠ These MUST mirror .container's real padding at every breakpoint, because the product scroller's full-bleed maths subtracts this value from the viewport. They did not: body.home .container drops to 24px at max-width 900 (home-v2.css), but this only dropped at 767 — so between 768 and 900 they disagreed by 64px, which pulled the scroller 64px wider than the page and gave the whole page a horizontal scrollbar on an iPad. If you change .container's padding, change these too. */ body.hv2 { --page-gutter: 32px; } body.home { --page-gutter: 88px; } @media (max-width: 900px) { body.home { --page-gutter: 24px; } } @media (max-width: 767px) { /* :not(.home) matters. body.hv2 and body.home are the same specificity, and this block sits AFTER the 900px one, so an unscoped body.hv2 here won the cascade on the home page and set 20px while its container was actually on 24px. */ body.hv2:not(.home) { --page-gutter: 20px; } } body.hv2 .band--module > .container, body.hv2 .band--photo > .container, body.hv2 .band--blue > .container, body.hv2 .band--navy > .container, body.hv2 .band--mlviolet > .container, body.hv2 .pv3-switch > .container, body.hv2 .pp-band > .container { /* ⚠ NO COMPENSATION *WHILE THE CONTAINER IS CAPPED* — and it depends on width, which is why this took two goes and a measurement to get right. · When the card is WIDER than the container's max-width, the container is capped and centred inside the card. The card is also centred in the page, so the inset cancels exactly and the container's left edge is identical inside or out. Any compensation here is padding removed for no reason — that was the old bug: headings inside modules sat at 86px against 110px everywhere else. · When the card is NARROWER than the cap, the container FILLS it, and the inset really does push the content in. Then it must be subtracted. The two cases are split by media query below, per container cap. ⚠ SUPERSEDED FOR NON-HOME hv2 PAGES by the ONE MARGIN block further down, which uncaps .container entirely — the two cases above stop existing once there is no cap to be inside or outside of. This rule and its 1407px companion still run the HOME page, which keeps its 1440 cap. */ padding-inline: var(--page-gutter); } /* ============================================================ * ONE MARGIN, PART 2: THE CONTENT COLUMN (6 Aug 2026) * Rebecca: "everything on this site bar the home page hero should have this * margin", then — shown that card edges and body text had ended up on two * different lines — "what does monzo do?" * * MEASURED LIVE on monzo.com at 1440×900, not from memory: * · their card edges sit at 64px, radius 64 * · their body text and section headings, when NOT inside a card, sit at 64px * too — it is the single most common left edge on the page (9 of 49 text * blocks) and every big H2 outside a card is on it exactly * · text INSIDE a card is indented by that card's own padding (100, 360, 744) * · their widest text block runs 1392px — no narrow reading cap * So Monzo puts page text on the same margin as its cards. An earlier note in * my own memory said their text sat at 112 and the cards at 64; that came off a * different page and is wrong for the home page. The live numbers win. * * Therefore: uncap .container on every hv2 page except the home page, and let * --band-inset position it. Non-carded sections move out from 112 to 64 at 1440. * * ⚠ CARDS ARE DELIBERATELY UNCHANGED. Inside a card the container gets its own * padding instead, sized so in-card content lands on 112 at 1440 — exactly where * it sits today. Without it, content would touch the card's rounded edge. * * ⚠ THE HOME PAGE IS EXCLUDED, same as everywhere else in this file: it caps at * 1440 with an 88px gutter of its own and Rebecca has asked twice for it to be * left alone. * ============================================================ */ body.hv2:not(.home) .container { max-width: none; padding-inline: var(--band-inset, 24px); } /* ---- and the same box above 1628px ---- * Heroes have been capped at 1500px and centred since 3 Aug, her rule. Cards and * the content column had no cap, so past 1628px (where 100vw − 2×64 exceeds * 1500) they carried on to the window while the hero stopped — measured at 1920: * hero 1500 starting at 210, cards 1792 starting at 64. One margin has to mean * one margin at every width, not just on a laptop. * * Rather than add a max-width to seven card rules in two files, the CAP goes into * --band-inset itself: once the page is wider than 1500 + 2×64, the inset grows * to whatever centres a 1500px box. Everything that reads the token — every card, * the content column, the nav, and --hero-gutter — follows automatically and * lands on the identical edge. * 1440 → 64 (unchanged) 1628 → 64 (the crossover, no jump) * 1920 → 210 (box = 1500) 2560 → 530 (box = 1500) * ⚠ Scoped to :not(.home) like everything else today — the home page runs a 1440 * container with an 88px gutter and Rebecca has asked twice for it to be left as * it is. */ @media (min-width: 1628px) { body.hv2:not(.home) { --band-inset: calc((100vw - var(--page-cap)) / 2); } } body.hv2:not(.home) .band--module > .container, body.hv2:not(.home) .band--photo > .container, body.hv2:not(.home) .band--blue > .container, body.hv2:not(.home) .band--navy > .container, body.hv2:not(.home) .band--mlviolet > .container, body.hv2:not(.home) .pv3-switch > .container, body.hv2:not(.home) .pp-band > .container { /* the card's own breathing room, replacing what the 1280 cap used to provide by accident. 48px at desktop keeps in-card content on 112 — unchanged. */ padding-inline: clamp(20px, 3.4vw, 48px); } /* ============================================================ * HOME PAGE: ONE SECTION RHYTHM (5 Aug 2026) * Rebecca: "i love the home page now - the spacing between sections is the only * thing we need to tidy up." * * MEASURED before touching anything: the gap between one section's content and * the next's ran 153, 181, 198, 234, 266, 273, 283, 290, 299px — NINE different * values down one page. Three causes, all historical: * - Four bands carry padding-BOTTOM only, no top: .band--proof, .band--sky * (1px, see below), .band--blog, .band--mtx. That is left over from the * retired straddle system, where the element above hung down into the gap * and the top padding would have pushed it away. * - The bottoms disagree: 140px on some bands, 130 on others, 120 on the blue. * - .statement is 160px, the biggest on the page, and sits right under the hero. * * One token now sets both sides of every band, so the gap is 2×pad + the 24px * card margin and there is exactly one number to change. 96px at 1440 gives a * ~216px gap: tighter than the loose end it replaces, looser than the tight end, * and the page loses about 700px of dead height overall. * * ⚠ HOME ONLY for now, deliberately — every other page shares these band * classes, and this is her home-page judgement, not a site-wide sign-off. * Rolling it out is a one-line change: drop `body.home` from the selectors. * * ⚠ The pinned switching band is NOT a child of main — GSAP wraps it in a * .pin-spacer — so it needs its own selector or it keeps the old padding. * * Three deliberate exceptions: * - the hero keeps its tiny top inset and zero bottom (the frame is the edge) * - .final2 keeps its deep bottom padding; the contact band straddles up into * it from the footer, which is the one straddle the modular system kept * - .band--sky's padding-top: 1px was a margin-collapse guard; a real padding * value satisfies that just as well, so the guard is now redundant here. * ============================================================ */ /* MEASURED off monzo.com at 1440x900, 5 Aug 2026, when Rebecca asked to copy their section spacing. Their ink-to-ink gaps between consecutive sections: 104, 128, 128, 152, 168, 176, 192, 192, 197, 280, 325 — median 176. (They are not rigidly uniform; the 280 and 325 are around their pricing block.) Ours was 202. This token is set so 2×pad + the 24px card seam = 176 at 1440, landing us exactly on their median: 76px each side. Their own section padding is mostly 0 with a few 64s — the space lives in the content wrappers, not the sections. We do it on the section instead, which gets the same result with one number instead of thirteen. */ /* MEASURED off monzo.com at 1440x900, 5 Aug 2026, when Rebecca asked to copy their section spacing. Their ink-to-ink gaps between consecutive sections: 104, 128, 128, 152, 168, 176, 192, 192, 197, 280, 325 — median 176. (They are not rigidly uniform; the 280 and 325 are around their pricing block.) This token is set so 2×pad + the 24px card seam = 176 at 1440, landing us on their median: 76px each side. Their own section padding is mostly 0 with a few 64s — the space lives in the content wrappers, not the sections. We do it on the section instead, which gets the same result with one number instead of thirteen. ⚠ EXTENDED TO THE PRODUCT PAGES 5 Aug ("can you apply all the styling and rules we did for the home page"). They were looser and less even than the home page had been: gaps of 282–283px with a 78px odd one out, a 101px band on Parent App and a 383px outlier — a 182px spread on three pages and 282px on Parent App. Same single token now drives One, OnSite, Classroom and Parent App, which takes roughly 850px of dead height off each of them. */ /* ⚠ THE FLOOR IS THE MOBILE VALUE — 10 Aug 2026. Rebecca: "whilst looking on mobile i dont think the section spacing looks good". This was clamp(56px, 5.3vw, 80px). 5.3vw only reaches 56px at a 1057px viewport, so the FLOOR was what every phone, tablet and small laptop actually got — the clamp scaled nothing below 1057 and every screen from 320 to 1057 had an identical 56/56. With the 16px card gap that is 128px between one section's content and the next, on a screen 844px tall. Measured monzo.com at 390x844 over CDP for comparison: their sections run mostly 32/32 (several at 0, one at 48) with gaps of 0, 8, 24, 32, 56 and 64 — roughly 64-88px between content, and deliberately varied so related blocks sit close and only real topic changes get air. Dropping the floor to 32 makes the clamp do its job: 32 on a phone, ~44 on iPad portrait, ~54 on iPad landscape, 80 on desktop. Desktop is unchanged. */ body.hv2 { --band-pad: clamp(32px, 5.3vw, 80px); } /* ⚠ :not(:first-child) rather than naming the hero classes. Every page's first section IS its hero — .hero2, .pv3g, .dm-hero, .ab2-open, .fs-hero, the statement on About us — and naming them meant six exclusions that a new page would silently miss. This way a hero keeps its own padding by construction. The pinned selector is for the home page's switching band, which GSAP wraps in a .pin-spacer so `main > section` cannot reach it. */ /* ⚠ :first-OF-TYPE, not :first-child — 7 Aug 2026. Rebecca: "when i click on the home page the hero isnt in place like it on the other pages." 13 pages open
with an invisible skip-link target, ``. That anchor is the first CHILD, so the hero section after it was not :first-child and picked up the 76px band padding instead of the hero's own 18px — measured on the home page: a 76px white gap under the nav where every other page has 11–19px. :first-of-type counts only
siblings, so the anchor stops mattering. It also cannot be broken again by adding anything non-section above the hero. */ body.hv2 main > section:not(:first-of-type), body.hv2 main > .pin-spacer > section { padding-top: var(--band-pad); padding-bottom: var(--band-pad); } /* ⚠ ONE HERO SEAM SITE-WIDE. Every page's first section is its hero and keeps its own padding — but their BOTTOM paddings all differed (0 on .hero2 and .pv3g, 43 on About's statement, 92 on Careers' ab2-open), so the gap between a hero and the band under it measured 100, 143 and 192 depending which page you were on. Zeroed, so it is 100 everywhere: the 24px seam plus the next band's own padding. Deliberately tighter than the 176 between ordinary bands — a hero's bottom is a card edge, and the same gap after an edge reads larger than it does after a line of text. */ body.hv2 main > section:first-of-type { padding-bottom: 0; } /* :first-of-type — see the note above */ /* ============================================================ * .statement--hero — THE PALE CARD HERO (About us · Book a Demo · Launch Deal) * * Started as the About us hero on 6 Aug ("i dont think the hero looks defined * enough what can we do to make it look more monzo"), and the same day she asked * for it on the other two: "lets use the same hero style for the book a demo and * the launch deal page". So it is a component, not a page style. * * ⚠ IT HAS TO LIVE IN THIS FILE. `body.hv2 main > section.statement--hero` is * (0,2,3) and the `:first-of-type { padding-bottom: 0 }` rule above is also * (0,2,3) — a tie modular wins on load order. Written from any earlier * stylesheet the bottom padding silently vanished and the closing paragraph sat * flat on the card's rounded edge (Rebecca, 6 Aug: "the text looks too close to * the bottom edge"). Keeping the whole component here means the two halves * cannot drift apart again. * * The base type — .statement, .statement__line (84px/600/30ch) and * .statement__sub — is in home-v2.css and loads on every page, so this file only * has to supply the card and the pieces the two CTA pages add. * * Geometry is the site's module geometry, not the --hero-frame-w one: the same * --band-inset and 64px radius as every other card down the page, so the hero * belongs to the family below it instead of introducing a fourth surface. * ============================================================ */ body.hv2 main > section.statement--hero { background: var(--ge-bg-light, #F3F7FA); margin-inline: var(--band-inset, 24px); /* the breath between the nav and the top of the card. Every other hero on the site gets this from `.hero2 { padding-top: clamp(10px,1.4vw,18px) }` (and .pv3g's identical copy), but on a carded hero padding is INSIDE the card, so it has to be a margin or the card still butts up under the nav — which is what it did (Rebecca, 6 Aug: "the about us hero doesnt have a gap up the top like the school types and product pages do"). Same clamp, so all three hero families sit on one line. */ margin-top: clamp(10px, 1.4vw, 18px); border-radius: var(--band-radius, 64px); overflow: hidden; /* equal top and bottom, and deliberately tighter than the 56–96 they replace, so the headline starts ~30px higher up the fold (Rebecca, 6 Aug: "can we move content up so its above the fold more") */ padding-top: clamp(40px, 3.6vw, 56px); padding-bottom: clamp(40px, 3.6vw, 56px); } /* ⚠ text-align is INHERITED as centre from an ancestor — no rule sets it on .statement__sub itself, which is why it read as indented and ragged on both sides while its box was correctly left-aligned with the headline. Stated explicitly rather than hunting the ancestor, so it cannot drift again. */ body.hv2 .statement--hero, body.hv2 .statement--hero .statement__sub, body.hv2 .statement--hero .statement__line { text-align: left; } /* the eyebrow pill. White chip with navy type — the same component the school-type heroes use, so a visitor moving between pages sees one thing. */ body.hv2 .statement--hero .statement__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 clamp(18px, 2vw, 26px); padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ge-navy, #0F1438); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(15, 20, 56, 0.06); } /* ---- the parts only the two CTA pages use ---- About us is copy-only; Book a Demo and the Launch Deal both close their hero with a button, and Book a Demo carries a time line above it and a quiet confirmation line below. */ body.hv2 .statement--hero .statement__when { margin: clamp(16px, 1.8vw, 22px) 0 0; font-size: clamp(18px, 1.6vw, 23px); font-weight: 700; color: var(--ge-blue, #1B367E); } body.hv2 .statement--hero .statement__cta { margin-top: clamp(24px, 2.6vw, 34px); /* .btn on its own paints no background — it needs a modifier or an explicit fill, which is how the footer CTA button once shipped invisible. Navy fill with a white arrow disc, the same recipe as the pre-footer CTA card. */ background: var(--ge-navy, #0F1438); color: #fff; border: none; } body.hv2 .statement--hero .statement__cta .btn__arrow { background: #fff; color: var(--ge-navy, #0F1438); } /* ⚠ the About us hero's paragraph runs to TWO lines, not three — 7 Aug 2026, at her request. The fix is the MEASURE, not the words: .statement__sub caps at 48ch, which at 19px is ~598px and broke this particular sentence over three lines. 74ch takes it to two without touching her copy or the shared 48ch cap that every other statement band relies on. ⚠ If the copy is ever rewritten, re-check the line count — a measure tuned to one sentence is not a rule, it is a fit. */ body.hv2 .statement--hero .statement__sub { max-width: 74ch; } body.hv2 .statement--hero .statement__note { margin: 16px 0 0; font-size: 14.5px; color: #4A5876; } /* the closing CTA bands keep a deep bottom: the footer's contact card straddles UP into them by ~210px, and without the reserve it would sit on the copy */ body.hv2 main > section.final2, body.hv2 main > section.pp-final, /* ⚠ .fc-how, not .fc-claim-section. The Launch Deal's blue claim board carried this reserve until 6 Aug, when its message moved into the pre-footer card and the board was removed — leaving "What claiming a place involves" as the last section on that page, with nothing holding the footer's card off it. The .fc-claim-section selector is kept below it, inert, because the class is still defined in founders-club.css and could be used again. */ /* ⚠ 6 Aug 2026 — THIS IS NOW STRUCTURAL, NOT A LIST OF CLASSES, and that change is the point. The rule used to name each page's closing section by hand (.final2, .pp-final, .fc-how, .cta-close…). Rebecca found the consequence on the school-type pages: "bugs here on the school type pages" — the footer's contact card straddles UP out of the footer, and any closing section not on the list reserved no room for it, so the card landed ON TOP of the copy. Measured at 1440: SIX pages were broken this way — primary-schools, secondary-schools and local-authorities-and-trusts (.st-final), martyns-law (.ml-final), onsite-launch-campaign-v2 (.hi-final) and compare-school-mis (.band) — each overlapping by 210-226px with only 76px of padding. Keyed off the STRAIGHT FACTS instead: this page has a straddling footer card, and this is the last section in
. A new page cannot miss it now. ⚠ :has(.cb--footer) is load-bearing — pages with no contact band (Blog articles, the policy pages) must NOT get 380px of dead space at the bottom. ⚠ My own site-wide overlap sweep missed all six because it only compared sections inside
, and the offending card lives in the