/* ══════════════════════════════════════════════════════════════════════════ /home-v2 ONLY — loaded after site.css, never by any live page. EVERY rule here is scoped to .home2 on . Nothing overrides a shared class globally, so /about, /results, /faq, /pricing and the rest are untouched by design — the tightening below cannot leak. If a future edit needs a base rule changed, that is a different decision and belongs in site.css with every page re-checked. The brief: header + hero + emblems + record card must clear an 800px fold (MacBook Air, Chrome with its chrome). Budget at 1440x800: header 77 · hero 463 · emblems ~90 · record card ~150 = variant A header 77 · hero 545 (emblems inside its foot) · card 86 = variant B ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero ──────────────────────────────────────────────────────────────── Half the saving is padding, half is the headline. The 18ch cap on .hero h1 was tuned for a 70px display size; at the size that fits an 800px fold it forces a ragged four-line stack, so it is opened up to 26ch. */ .home2 .hero-home{padding:3rem 0 3.1rem} .home2 .hero h1{max-width:26ch} .home2 .hero-lede{max-width:58ch} /* Type sizes and the tightened vertical margins live in the desktop block at the foot of this file, NOT here. They exist only to win an 800px desktop fold, and when they were unscoped they applied on phones too — where that fold does not exist. Measured at 390px the cost was: hero h1 30.4px every section h2 below it 31.2px The page's biggest promise set smaller than each of its own subheadings, at the same 300 weight. site.css runs h1 clamp(2.6rem,6.1vw,4.35rem) against h2 clamp(1.95rem,3.9vw,2.95rem) — 41.6/31.2 on a phone, a 1.33x step. Leaving these unset lets mobile inherit that step instead of inverting it. */ /* ── Frame 54, and why it needs both of these ─────────────────────────────── The hero box is 2.24:1 against a 1.50:1 file, so cover crops 312px of height and gives no horizontal freedom at all: the speaker sits at 69% across in the file and lands at 980px, which is exactly where .hero-notice starts (905px). The only lever is the vertical crop, and it works: pinned to the bottom, the frame shows rows 351-1066, which puts his head at 169px — clear above the notice card — with the banner behind him and the audience rows beneath. Any value below ~44% buries him behind the card entirely. `center top`, which was right for the -seated cut, showed ceiling and shutters here. The scrim is the second half. The base .hero-overlay was built for the King's photograph: bright daylight architecture that could take .93→.40 across and .30→.72 down. This frame carries its information in mid-tones (the lit banner, the projector screen) and at the speaker's position only ~18% of the image survived that stack — the hero read as a black wall. Dropping to the .page-hero values (.20→.60 down, plus the gold radial) is the treatment the _demo/photos page used, which is where this frame was chosen from. */ .home2 .hero-home .hero-bg{object-position:center bottom} /* A's hero is 479px against B's 637, so the same keyword lands somewhere else: a shorter box is a wider crop, `bottom` shows source rows 528-1066 and cuts the speaker's head off entirely. A's usable band is 34-81% (below that the notice card covers him, above it his head leaves the frame); 60% seats his head 123px into the hero, clear of the card at 245px. */ @media (min-width:900px){ .home2-a .hero-home .hero-bg{object-position:center 60%} } .home2 .hero-home .hero-overlay{ background: radial-gradient(120% 150% at 84% 18%,rgba(214,188,136,.13),transparent 54%), linear-gradient(90deg,rgba(17,26,44,.93) 0%,rgba(17,26,44,.70) 46%,rgba(17,26,44,.34) 100%), linear-gradient(rgba(23,33,54,.20),rgba(17,26,44,.60)); } @media (min-width:900px){ /* A narrower notice column buys the headline ~30px of line — the difference between two lines and three. */ .home2 .hero-grid{grid-template-columns:minmax(0,1fr) 22.5rem;gap:2rem} .home2 .hero-notice{margin-bottom:0;padding:.95rem 1.3rem .9rem} } .home2 .hero-notice-lbl{margin-bottom:.4rem} .home2 .hero-notice-body{font-size:.845rem;line-height:1.48} .home2 .hero-notice-more{margin-top:.55rem;min-height:28px;font-size:.84rem} /* ── Emblem strip, horizontal ──────────────────────────────────────────── The vertical stack (crest above wordmark, 108px tall) costs ~300px. Laid on its side — crest beside wordmark, framing line to the left of the marquee — the same content costs ~90px and reads as a credential rail rather than a feature section. The framing line stays: crests shown silently imply affiliation, crests shown under a stated relationship do not. */ .home2 .crest-strip{padding:.75rem 0 .8rem;border-bottom:1px solid var(--line-soft)} .home2 .crest-inline{display:flex;align-items:center;gap:1.8rem} .home2 .crest-lede{ text-align:left;margin:0;flex:0 0 12.5rem; line-height:1.35;font-size:.72rem; } /* The track is width:max-content and translates; it needs a clipping viewport of its own or it blows the flex row open. */ .home2 .crest-vp{ flex:1 1 auto;min-width:0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .home2 .crest-track{margin-top:0} /* The rail runs at the base ratios (--em:1). Every mark carries its own university's name, so there is nothing to caption. */ .home2 .crest-row{gap:2.6rem;padding-right:2.6rem;align-items:center;--em:1} /* The marquee existed because five 108px crests could not sit still in a row. At 50px they fit with room to spare — and a scrolling rail this short shows its own seam (Cambridge appears twice in one screen). So on desktop it stops moving and simply spaces out: five marks, held, which reads as more certain than five marks drifting past. */ @media (min-width:900px){ .home2 .crest-vp,.home2 .crest-track{-webkit-mask-image:none;mask-image:none} /* site.css drives the marquee from `html.js .crest-track`, which carries a type selector and therefore outranks a plain `.home2 .crest-track`. Match its shape to stop it. */ html.js .home2 .crest-track,.home2 .crest-track{animation:none;width:100%} .home2 .crest-row[aria-hidden="true"]{display:none} .home2 .crest-row{width:100%;justify-content:space-between;gap:1.4rem;padding-right:0} } @media (max-width:899px){ /* Below 900 the hero box turns portrait (375x694 at a 390px viewport, 0.54:1), so cover flips: it now crops 1024px off the WIDTH and nothing off the height, showing only 576px of a 1600px file. Centred, that window is 512-1088 and the speaker at x=1100 falls just outside it — the vertical fix above does nothing here because there is no vertical crop left to move. Bias the window right so he sits at ~70% of the frame with the banner still behind him. */ .home2 .hero-home .hero-bg{object-position:68% center} .home2 .crest-inline{flex-direction:column;align-items:stretch;gap:.9rem} .home2 .crest-lede{flex:0 0 auto;text-align:center} /* Five crests cannot marquee across 327px without slicing one in half — the rail was showing "ord" and a cropped LSE at any given moment, which reads as a rendering fault rather than a scrolling rail. Hold it still instead: five marks named, sized to share the width, exactly as it behaves on desktop. */ html.js .home2 .crest-track,.home2 .crest-track{animation:none;width:100%} .home2 .crest-vp{-webkit-mask-image:none;mask-image:none} .home2 .crest-row[aria-hidden="true"]{display:none} /* Five across does not survive contact with a 327px column any more. The old shields were all ~1:1, so five of them fit at 33px; three of these five are wide lockups, and holding them in one row means scaling to --em .47, which puts IMPERIAL at 11px tall. So it wraps and centres instead: the marks stay at a size worth reading and the rail takes two lines. */ .home2 .crest-row{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; width:100%;gap:.85rem 1.35rem;padding-right:0;--em:.78; } .home2 .crest-row li{flex:0 0 auto;min-width:0} /* Ronnie: swap Imperial and UCL on mobile so the wrap balances. Done with `order`, not by moving the markup, so desktop keeps the sequence it was balanced in and the marquee decoy row stays a pixel-identical copy. All five need an explicit order: with only two set, the three left on the default 0 jump ahead of both and you get a reshuffle rather than a swap. */ .home2 .crest-row li:nth-child(1){order:1} /* Oxford */ .home2 .crest-row li:nth-child(2){order:2} /* Cambridge */ .home2 .crest-row li:nth-child(3){order:5} /* Imperial */ .home2 .crest-row li:nth-child(4){order:4} /* LSE */ .home2 .crest-row li:nth-child(5){order:3} /* UCL */ /* ── The headline has to WIN, not just measure larger ────────────────── Inheriting the site scale fixed the inversion against the section headings (41.6 vs 31.2), but the hero reads against the lede sitting directly under it, and there the comparison is by BLOCK, not by type size. At 41.6/19.2 the headline took 2 lines (88px) and the lede took 4 (123px), so the subtext was the bigger object on the screen and the headline did not lead. Push the headline up and the lede down until the headline is the largest thing in the hero by both measures. */ .home2 .hero h1{font-size:clamp(2.95rem,9.5vw,3.2rem);line-height:1.06} .home2 .hero-lede{font-size:1.05rem;line-height:1.55;margin:1.25rem 0 1.7rem} } /* ── Cookie bar ────────────────────────────────────────────────────────── PROPOSED SITE-WIDE, shown here only. On a first visit the consent bar is fixed to the bottom of the window and eats ~95px of the fold — which is ~95px of the very thing this page is trying to fit. Nothing about it needs to be that tall: the copy runs to three lines only because it is capped at 62ch inside a full-width bar. */ .home2 .consent{padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom))} .home2 .consent-copy{flex:1 1 42rem;max-width:none;font-size:.8rem;line-height:1.45} .home2 .consent-inner{gap:.7rem 1.4rem} .home2 .consent-btn{padding:.45rem 1.25rem} /* ── Record card ───────────────────────────────────────────────────────── Same four cells, same figures. Only the air comes out. */ .home2 .proof-title{padding:.6rem 1.2rem .42rem} .home2 .proof-cell{padding:.8rem 1.2rem .78rem;gap:.28rem} .home2 .proof-num{font-size:1.6rem} .home2 .proof-cta{gap:.5rem} .home2 .proof-note{font-size:.74rem;line-height:1.4} .home2 .proof-cta .btn{padding:.6rem 1.15rem;font-size:.84rem} /* ══ VARIANT A — the order as briefed: hero → emblems → record card ══════ The card can no longer ride up over the hero: there is now a strip between them. That overlap was one of the page's better moves and this is what it costs. */ .home2-a .proof-card{margin-top:0} /* A carries the emblem rail as a separate strip, so its hero has ~70px less to work with than B's and the padding has to come back in. */ .home2-a .hero-home{padding:2.6rem 0 2.7rem} /* ══ VARIANT B — emblems along the foot of the hero photograph ═══════════ Deviates from the briefed order. Buys the hero ~80px back and keeps the record card overlapping the photograph as it does today. */ /* B recovers ~80px against A. Spend it in the hero rather than leaving it as dead air above the fold — that recovery is the whole argument for B. */ .home2-b .hero-home{padding:3.5rem 0 3.2rem} /* position/z-index only: this is the stacking context for the card at the foot of this file. Spacing, ground and shadow are set there, not here. */ .home2-b .crest-foot{position:relative;z-index:1} /* ── Desktop relax ─────────────────────────────────────────────────────── The measured cause of "the top section is a lot more crammed than every other section": below the fold this page runs 88/88 everywhere, while the hero ran 56/51.2 and its internals were cut by a third. The top of the page was the least generous part of a page that is otherwise airy. B is relaxed the whole way back to 4.75rem/4.25rem — the .page-hero rhythm the _demo/photos heroes use, which is the spacing Ronnie pointed at. Only B can absorb it: measured at 1440x800 the record card now closes at 797px, so the four blocks still clear the fold. A cannot (829px), which is the second argument for B on top of the card overlap. */ @media (min-width:900px){ .home2-b .hero-home{padding:4.75rem 0 4.25rem} /* A gets every pixel of relax it can afford, which is not the same amount. Carrying the emblems as a separate strip costs A the card overlap AND ~80px, so where B reaches the full 76/68 demo rhythm, A tops out at 53/54 with the strip at 22/24 — spend one pixel more and the record card falls past 800. Both variants close at 797. That A cannot take the same relax as B is not a tuning detail; it is the second argument for B, after the overlap. */ /* Trimmed again at v2.7 (3.3/3.4 -> 3.05/3.15). A's rail sits BETWEEN the hero and the record card, so the rail's own height is inside A's fold budget in a way B's is not: the tallest new mark is 52px against the old 46px row, which put A's card at 802 and over the fold while B absorbed the same change. That is the third independent argument for B, after the card overlap and the relax ceiling. */ .home2-a .hero-home{padding:3.05rem 0 3.15rem} /* .home2-a, NOT .home2: B's emblem rail carries class="crest-foot crest-strip", so an unscoped .crest-strip rule here lands on B as well and pushed its record card from 797 to 808, past the fold. A's strip is a section of its own; B's is inside the hero and is spaced by .home2-b .crest-foot below. */ .home2-a .crest-strip{padding:1.4rem 0 1.5rem} /* the headline squeeze, now where it belongs: the 18ch cap in site.css was tuned for a 70px display size and forces a ragged four-line stack at the size that fits an 800px fold, so the cap opens to 26ch (set above) and the size comes down to meet it. */ .home2 .hero h1{font-size:clamp(1.9rem,3.95vw,3.55rem);line-height:1.05} .home2 .hero-lede{font-size:1.1rem;line-height:1.5;margin:1.5rem 0 2rem} .home2 .hero-eyebrow{margin-bottom:1.35rem} .home2 .hero-copy .hero-how{margin-top:1.5rem} .home2 .hero-notice{padding:1.15rem 1.4rem 1.1rem} /* B's rail is a card now; its desktop measurements sit with the rest of the card at the foot of this file. */ } /* ══════════════════════════════════════════════════════════════════════════ B's RAIL — FOUR VERSIONS TO COMPARE (Ronnie, 14 Aug) ══════════════════════════════════════════════════════════════════════════ The rail's whole idea was emblems ON the photograph, and that worked while they were heraldic shields: solid, high-contrast, legible over anything. The universities' own logos are not. Measured on our navy: Cambridge's black wordmark and LSE's black strapline disappear, UCL's #361A54 is all but invisible, and Oxford's navy tile dissolves into the ground it is supposed to sit on. Only Imperial survives, because it is #0000CD. Grounds tried and binned: a full-bleed paper band (read as a stripe painted across the photograph); a wrap-width paper panel (worked, but stacked with the record card into one heavy credential block); the wash, where the photograph dissolved into the page over its last ~110px (removed the edge but made the picture read SHORTER, which threw away B's only argument over A). RONNIE, 13 Aug: "what difference is this between a and b? no difference." Correct, and it was my error. His call on 14 Aug is to see the two live candidates side by side rather than one at a time, plus two tests. So the shared `.home2-b` rules above stay shared, and everything that differs is hung off a modifier: .home2-b1 bare on the photograph, no ground at all (option d, 13 Aug) .home2-b2 the card as built at v2.11 — FROZEN, "don't change" .home2-b3 a narrower, shallower card: same marks, less paper .home2-b4 B2's card + a transparent header on mobile only .home2-b5 B2 on desktop, card at 86% on the phone .home2-b6 B2 on desktop, card at 78% on the phone RONNIE, 14 Aug, settled two of these. Desktop is B2: "on desktop b2 card width is most balanced. i like it." And B4 is BINNED, with a reason worth keeping because it is not the one I expected — "abandon the transparent header on mobile, looks like we need it because of the white emblem box, otherwise color not balanced (top looks missing)." The card and the header are one composition: two blocks of paper at the top of a dark photograph balance each other, and removing the upper one leaves the lower one unanswered. B4's page stays on disk as the record of a test that ran; it is off the chooser so nothing sends him back to a dead build. B3 is not binned but is superseded on mobile by B5/B6, which go further in the direction it was pointing. Its desktop remains the only place the narrow-card idea is still live for comparison. B1 WAS DELIBERATELY NOT HELPED, AND NOW IS. That earlier note said nudging the mark colours to flatter it would make the comparison a fake. RONNIE, 14 Aug, overrode it: "b1 ofc is most premium but a bit pointless given illegibility... i want you to work on b1 now... fix the 'invisibleness' of the logos." So B1 is no longer the control — it is a live candidate, and the illegibility it was measuring is now the thing being removed. What changed is the ART, not the scrim and not the mark colours. Imperial, Cambridge and UCL each publish a dark-background lockup, and B1 now points at those instead of the light-background ones the other variants use. The rule is the same for all three (verified 14 Aug against each university's own guidance, written up in work/design/2026-08-14-g5-emblems-dark-bg-audit.md): KEEP THE COLOUR MARK, SWAP ONLY THE WORDMARK TO WHITE. None of them flatten the whole lockup. The reversed files are SEPARATE assets (`emblem-*-rev.*`) and only B1 loads them. They must never be swapped into the shared `.em-*` rules or into B2/B3/B5/B6, whose marks sit on a WHITE CARD — a white wordmark there is invisible in the opposite direction. Same reason nothing was recoloured in place: `assets/img/emblem-*` is loaded by nine pages. Oxford and LSE are untouched and were outside the audit's scope. LSE is a red panel and survives the dark ground on its own. Oxford is the one real remaining hole and is NOT fixed here: its panel is #002147 against a scrim floor of #111A2C, so the panel itself is invisible (1.07:1) and only the white lettering inside it reads (13.6). CHECKED, so nobody re-derives it: `g5-emblems/oxford-logo.svg` is byte-identical to the asset already in use (md5 75dc81b1…), so there is no unused Oxford reversed art on disk. De- panelling it — deleting the #002147 rect and floating the white wordmark bare — would work optically but would be OUR invention, not Oxford's, so it is a question for Ronnie rather than something to ship quietly. Rule of the set: only B2 is frozen. B1 restores the pre-card spacing, B3 takes its own, and none of them may inherit another's, which is why the card-era hero padding below is listed variant by variant instead of sitting on the shared `.home2-b`. ══════════════════════════════════════════════════════════════════════════ */ /* ── B1: bare, exactly as option (d) shipped at a71fa14 ──────────────────── Restored verbatim, spacing included. The card versions run a deeper hero bottom padding (5.15rem) because a card needs a band of photograph between itself and the record card or the two glue into one block. B1 has no card, so it has no seam to open and takes back the 4.25rem it was tuned at. Its own fold number is therefore NOT B2's and is measured separately below. */ .home2-b1 .crest-foot{ margin-top:1.7rem;padding-top:1.05rem; border-top:1px solid rgba(214,188,136,.28); /* THE CREAM HAIRLINE STAYS, ON HIS OVERRULE, AND IT IS INHERITED NOT SET. It comes from `.home2 .crest-strip{border-bottom:1px solid var(--line-soft)}`, written for variant A where the rail sits on paper below the hero. On B1 the rail is INSIDE the hero, on the photograph, so it draws a solid rgb(232,227,216) line across the picture — sampled off the rendered page, ~12:1 against the rgb(25,33,51) beside it, one of the brightest things in the lower hero. Every other variant switches it off in its own block; B1 never did, so nobody chose this. I removed it as a defect and he put it back: RONNIE, 14 Aug — "keep the cream hairline, it's the cherry on top." Recorded as an override rather than quietly re-derived as intent, so the next session does not read this line as an accident and delete it again. NOT restored with a `border-bottom` of its own: leaving it inherited keeps one source for the value, and if A's rail ever changes colour this follows it, which is the behaviour a shared rule is for. The two edges are deliberately unequal for now — a 28%-alpha gold whisper above the marks, a solid cream rule below. That asymmetry is the open question: `/_demo/rail-edges/` shows this against both matched treatments at full size, and he picks. Until he does, this is what he asked to keep. */ } /* light gold, not bronze: on B1 the lede sits on the photograph, not on paper */ .home2-b1 .crest-foot .crest-lede{color:var(--gold-lt)} @media (min-width:900px){ /* ── The rail takes B2's vertical metrics outright ─────────────────────── RONNIE, 14 Aug: "apply the b1 padding fix to match b2." He had spotted it himself: "b1 seems inconsistent with vertical spacing re emblem line - top seems to have more padding than bottom?" It was, and it was not deliberate — this block was restored verbatim from option (d), so the numbers were inherited rather than chosen, exactly like the 106px emblem gap in E119. Measured above/below the marks: B1 22.6/12.8 against B2's 13.6/14.4 and B3's 12/12.8, so B1 was the outlier and the other two were already level. Not a nudge, a match: margin-top 1.85 -> 1.35rem and padding-top 1.35 -> .8rem are B2's own numbers, and .8rem is what `.home2 .crest-strip` already sets at the bottom, so the band closes symmetrically. Verified by preview before it was written: it lands B1's mark row at 550.3 against B2's 550.1, which is his literal ask — "so the height position is same as b2" — to a fifth of a pixel. MOBILE IS NOT IN THIS BLOCK. It is below, and the reason it is below is that the first answer for it was wrong — see the 14 Aug note there. */ .home2-b1 .crest-foot{margin-top:1.35rem;padding-top:.8rem} /* ── The emblem gaps, which nothing ever set on purpose ───────────────── RONNIE, 14 Aug: "fix the spacing and distance on b1, just like the other ones. notice how in b3 or b5 logos are closer to each other?" Measured, and he is reading a real number: at 1440 the gap between marks is 106px on B1 against 38 on B2/B5 and 22 on B3. Nobody chose 106. The shared rule is `justify-content:space-between` on a row of `width:100%`, so the gap is whatever is left over after the five marks — which makes it a function of the CARD's width. B2's card is 880 and B3's 736, so their rows are 600 and 491 wide and the marks pull in. B1 has no card at all, so its row inherits the full 1104 wrap and the same rule spreads the same five marks over 875px. So the fix is not a smaller number in place of a bigger one, it is to stop dividing leftover space and set the gap outright. 2.4rem lands at 38.4px, which is B2's 38 to within half a pixel — B1 now reads at the same rhythm as the desktop it is competing against, which is the only way the comparison is about the CARD rather than about the spacing. Left-aligned, and the two alternatives were built and looked at rather than reasoned about. Narrowing the whole rail to B2's 880 so the rule ended near the marks gave a stub that lined up with nothing — neither the record card below nor the marks themselves. Centring the marks opened a 165px void between the lede and Oxford and orphaned the lede. Left it is. The upside is not only compositional. The hero scrim runs .93 dark at the left and .40 at the right, so pulling the rail left moves every mark onto darker ground: re-measured worst-pixel, Imperial 10.54 -> 14.36, UCL's wordmark 11.16 -> 11.41, and UCL's purple device — the weakest thing on the rail — 1.62 -> 2.35. Cambridge gives some back, 17.60 -> 13.76, and has it to give. Oxford is unchanged at 1.06 because its problem is the panel colour, not the ground. The 272px of photograph now left at the right end is the point rather than a leftover: the top rule still spans the full 1104 and still lines up with the record card below, so the architecture is unchanged and only the marks moved. */ .home2-b1 .crest-foot .crest-row{justify-content:flex-start;gap:2.4rem} } /* ── The phone rail, which I told him was already level and was not ──────── RONNIE, 14 Aug: "re emblem section, there's still more space above 'where our students have been admitted' than the space below the imperial logo. decrease spacing between the thin hairline and 'where our students have been admitted'." The "still" is fair — he raised this yesterday and I closed it on the phone as a 4px surplus not worth a rule. THAT WAS MEASURED OFF BOXES, WHICH IS THE ERROR. A line box is taller than the letters in it, and a 720x284 canvas is bigger than the mark on it — the same class of mistake as the header logo in E120. Re-measured off INK, sampled on the rendered page rather than computed from line-height: gold hairline (y 120.6) -> first ink of the lede (y 141) 20.4px last ink of IMPERIAL (y 238) -> cream hairline (y 251.4) 13.4px So it is a 7px surplus, not 4, and it is on the side he says it is. The emblem PNGs were checked for the transparent-padding trap before trusting the lower figure: `emblem-imperial-rev.png` and `emblem-cambridge-rev.png` both carry ink to all four edges (alpha > 16 at every border row and column), so on that side the box IS the mark and 13.4 is real. .6rem = 9.6px takes the upper gap to 13.2 against the lower 13.4. Only the top moves: the bottom already sits where the shared `.home2 .crest-strip` puts it, and matching to it rather than splitting the difference keeps one number doing the work. Costs nothing below — the hero shortens by 7.2px, so the record card rides 7.2px higher on the fold. */ @media (max-width:899px){ .home2-b1 .crest-foot{padding-top:.6rem} } /* ══ B1's TUTOR BAND TAKES A REAL PHOTOGRAPH, AND THE SCRIM HAD TO MOVE WITH IT ═════════════════════════════════════════════════════════════════════════════ RONNIE, 14 Aug: "change the background image for 'some of our tutors…' to hero section of about… a big trust section demands a real photo." The image is expo-stand.jpg, /about's hero, reused with his explicit permission and on the record as temporary: "we'll think of another one for about later but allow this duplicate/reuse on this occasion for now." B1 ONLY. Every other variant still carries hero-kings.jpg, so the desktop comparison stays a comparison. WHY THE SRC SWAP ALONE IS NOT THE JOB. `.band-plate`'s scrim was already retuned once, at E109, for a photograph of an audience — but that photograph was a wide dim hall, and this one is three people in close-up under exhibition lighting. Under the inherited scrim the swap measured a mean luminance of 49.5 across the strips of picture the cards leave visible: the faces went to a smear and the section lost the exact thing he asked for it. Meanwhile the TEXT measured 8.03 at its worst pixel against a 4.5 requirement, i.e. the scrim was spending contrast it did not need on picture it could not afford. Measured on the rendered composite, brightest pixel inside each text box, ink against ground — the method E118 used on the emblems: inherited scrim worst text 8.03 picture mean 49.5 stddev 45.7 THIS worst text 6.28 picture mean 69.3 stddev 48.5 So the picture is 40% brighter and holds more detail while every string still clears AA with 1.4x to spare. Three other candidates were built and measured rather than argued about, and two of them failed: a flat lift of every stop put the "See where they took our students" link at 4.47 and the body copy at 4.75, and OPENING THE CENTRE — which sounds right, because the faces are centre-left — dropped the headline to 4.17, because the headline's own box ends where the student's white shirt begins. That is why the vertical layer below exists and the horizontal one was left alone. THE THIRD LAYER IS THE ONE DOING THE WORK. The two inherited gradients are radial (depth) and 90deg (dark under the left-set headline). Neither can tell the top of the band from the bottom, and this band is split by its own cards: the picture shows through only ABOVE them, where the faces are, and BELOW them, where the body copy and the link sit on a bright striped shirt. So the 180deg layer holds the bottom third down to protect those two strings, which is what pays for opening the top. Transparent to 44% so it costs the faces nothing. `object-position` is 32%, not the default 50%. The band crops 337px off this image's height, and centred that put the heads half under the card row. 32% lifts the window so all three faces sit in the strip above the cards, which is the only part of the frame the reader ever sees uncovered. BOTH OF THOSE ARE DESKTOP-ONLY, and the reason is that the phone is not a narrower version of this — it is a different photograph. */ /* ── 14 Aug, SECOND PASS: "make it dimmer… the white shirt and light is clashing with the white text" ────────────────────────────────────────── He also asked, as a question rather than an instruction: "or use a gradient so it's darker on the left?" The honest answer is that his instinct points the wrong way, and the reason is worth keeping. Measured, mean luminance of the visible picture across ten equal columns of the strip ABOVE the cards, left to right: 37.3 38.5 40.6 45.8 46.3 76.5 76.9 49.8 102.7 107.1 The picture RISES to the right: the left third is the adviser's hair and the navy backdrop, the right third is the exhibition poster wall, which is the brightest thing in the frame. And the scrim it inherited ramped .70 at the left down to .32 at the right — darkest over the dark end, lightest over the bright end. It was fighting the photograph rather than carrying it, and that inversion IS the clash he is describing. Darkening the left would have deepened the wrong half. So the horizontal layer is flattened and lifted at both ends instead of ramped down (.68 / .60 / .74), and the radial's open point moves off the poster wall (70% -> 40%). Same ten columns after: 38.9 39.1 39.9 42.9 41.4 54.6 49.9 35.6 51.0 48.7 Measured on the rendered composite at the brightest GROUND pixel inside each text run, with the text itself set to visibility:hidden so no antialiased ink can leak into the sample: inherited worst string 5.67 picture mean 61.8 THIS worst string 6.97 picture mean 44.0 So it is 29% dimmer, which is what he asked for, and every string went UP rather than down, which a flat dimming would not have done. The poster wall falls 108 -> 51 and the student's face 89 -> 61, i.e. the thing that was shouting is quieted roughly twice as hard as the thing worth seeing. HIS OTHER THOUGHT, "shift the photo more to the right on the desktop", was built as `/_demo/band-crop/` rather than as a change, because he raised it as a question. RULED, same day: "no need to render wider. option a is better." So the frame stays as photographed and the over-scale is not used. The demo stays on disk with the ruling written into it. Worth keeping the finding even though the option lost: on desktop `object-position`'s x value is INERT — the band is 1425x810 and this file is 1600x1288, so cover scales by WIDTH and crops 337px off the HEIGHT only, with no horizontal overflow to move. Shifting would have needed width:118% AND `max-width:none`, or the `img` reset silently caps it back to 100% and nothing happens. SECOND PASS ON THE DARKNESS, same ruling: "just make the image darker overall so the text is more legible." The first pass took the picture to 44.0 and the worst string to 6.97, which cleared AA comfortably but is not what he asked for — he asked for legible, not adequate. Deepened again on all three layers, keeping the corrected left-to-right shape: inherited worst string 5.67 picture mean 61.8 first pass worst string 6.97 picture mean 44.0 THIS worst string 7.92 picture mean 37.1 37.1 is deliberately close to the phone's 35.7, so the band now reads at the same depth on both screens — which is the other half of what he asked for earlier ("a bit darker i think same as desktop re darkness"). Every string is now at least 7.92:1, i.e. 1.76x the requirement, and the weakest is the gold link rather than anything structural. */ @media (min-width:900px){ .home2-b1 .band-plate .band-bg{object-position:50% 32%} .home2-b1 .band-plate .band-overlay{ background: radial-gradient(120% 120% at 40% 24%,rgba(23,33,54,.46),rgba(17,26,44,.74) 72%), linear-gradient(180deg,rgba(17,26,44,0) 0%,rgba(17,26,44,0) 44%,rgba(17,26,44,.50) 100%), linear-gradient(90deg,rgba(17,26,44,.76) 0%,rgba(17,26,44,.70) 45%,rgba(17,26,44,.80) 100%); } } /* ── The phone frame, which cover chooses and which was wrong ────────────── RONNIE, mid-build: "remember to optimise for mobile too." He was right to say it, because the phone had a real failure and it was not a smaller version of the desktop one. At 390 the band is 375x1443, so `cover` scales this image by HEIGHT and crops 1403px off the WIDTH — the opposite axis to desktop. Centred, that left a 348px slice of original x 626-974: the parent's hair and the student's white shirt, with our adviser, our stand and our own numbers all cropped away. The desktop `object-position` y-value does nothing here (there is no vertical overflow to move), so it was silently inert. Measured, it also broke: the gold eyebrow "Some of our tutors" came out at 3.74:1 against the brightest pixel under it — a FAIL, and the only string on this build that has ever measured below 4.5. A white shirt at full exhibition lighting is the brightest thing in the frame and the phone had framed it. 6% moves the window to original x 75-423, which is the adviser in profile mid-sentence with our own "12 / Oxford & Cambridge offers" panel behind him. Better picture and darker ground at once: the eyebrow goes 3.74 -> 8.10 and the worst string on the phone is 5.21. The desktop scrim is NOT carried down here, and neither is the shared one. Above 900 the desktop scrim opens the TOP of the band, because that is where the faces are and no text sits there. On the phone the cards stack, so the only uncovered picture is the strip above them and the strip below — and BOTH carry text — so there is no region to open in that sense. But the shared `.band-plate` scrim is wrong here for a different reason: its main ramp is 90deg, .88 to .52 ACROSS THE BAND, and it was drawn for a 1425px desktop band. Squeezed into a 375px column that ramp stops being direction and just reads as uniformly dark — measured, it left the picture at a mean luminance of 47.2 while the weakest string still sat at 7.52, which is contrast spent on nothing. On the phone the useful axis is VERTICAL: the picture at the top, the body copy and the link at the foot. So the phone gets its own, on the same ramp shape as the desktop's third layer: mean luminance 47.2 -> 57.5 with the worst string at 5.74. The headline is what caps it, and not for the reason you would guess — its box sits over the stand's own white "Tutor's A…" lettering, which is the brightest thing in this crop. A lighter first pass put it at 3.08 and a second at 5.04; this is the third. */ /* ── 14 Aug, SECOND PASS on the phone: "on mobile i can't tell the difference, also a bit darker i think same as desktop re darkness." ───────────────── Two things came out of re-measuring this, and one of them is a correction to what I told him yesterday. THE CORRECTION. The phone eyebrow was reported at 7.16 after the first pass. It was not. Re-measured with the text hidden so the sample can only see GROUND, "Some of our tutors" was sitting at 3.32:1 — still a fail, and worse than the 3.74 the first pass was built to fix. The earlier figure came from sampling a composite that still carried the text, where the "brightest pixel under the string" quietly finds the string. The number moved; the conclusion did not, because the fix pushes the same way. WHY THAT PIXEL IS THERE, since it is not the white shirt this time. At a 6% crop the top-left of the frame carries the tail of the stand's own "…cess" wordmark in light grey, and the eyebrow's first two words land on it. The radial this block inherited was centred at 42% 13% — 13% of a 1443px band is y=188, i.e. its LIGHTEST point sat directly over the eyebrow and the headline. Same inversion as the desktop, arrived at independently. Deepened rather than re-shaped, because on a 375px column there is nowhere to move it to: the only picture the reader ever sees is the strip above the cards and the strip below, and BOTH carry text. inherited worst string 3.32 (FAIL) picture mean 42.3 THIS worst string 5.09 picture mean 35.7 A lighter version was built and measured first and is the reason this one is as deep as it is: at .44/.70 on the radial and .54/.50/.68 on the ramp the eyebrow came out at 4.39, i.e. still short. AND A DIFFERENT CROP IS NOT THE WAY OUT, WHICH WAS WORTH TESTING RATHER THAN ASSUMING. Moving the window to 16% takes the "…cess" lettering out of frame and the worst string jumps 5.16 -> 7.50 at the same darkness — but the top of the band then renders as featureless navy, because what 16% frames is the backdrop between the adviser and the parent. It buys contrast by having no picture at all. So on a 375px column this photograph has no window that is both dark under the text and worth looking at; 6% is the one with a person in it. Worth telling him plainly that at a mean of 35.7 the phone picture is doing very little work either way, and that the fix is a photograph SHOT for a portrait crop, not another crop of this one. */ @media (max-width:899px){ .home2-b1 .band-plate .band-bg{object-position:6% 50%} .home2-b1 .band-plate .band-overlay{ background: radial-gradient(140% 64% at 42% 13%,rgba(23,33,54,.50),rgba(17,26,44,.74) 68%), linear-gradient(180deg,rgba(17,26,44,.58) 0%,rgba(17,26,44,.56) 55%,rgba(17,26,44,.72) 100%); } } /* ── B2 and B4: the card as built ───────────────────────────────────────── Why this is not the wrap-width panel he rejected: that one failed because it matched the record card's width, so the two read as one stacked block. Narrower is the exact lever that breaks that — a smaller object stepped above a wider one is a composition, two objects of the same width are a repeat. The card is subordinate to the record card by every measure on purpose: narrower, shallower, no gold top rule (that is the record card's signature), softer shadow. B4 shares this card byte for byte. B4 tests ONE thing, the header, and a test that changed two things at once would tell him nothing about either. */ /* B5 and B6 join this list because their DESKTOP is B2 exactly — Ronnie, 14 Aug: "on desktop b2 card width is most balanced. i like it." Everything they change is inside the max-width:899 block further down. */ .home2-b2 .crest-foot,.home2-b4 .crest-foot, .home2-b5 .crest-foot,.home2-b6 .crest-foot{ /* 880px against the record card's 1104 on a wide screen. The percentage matters as much as the cap: a flat `min(100%,55rem)` stops narrowing anything once the wrap itself drops under 55rem, so between 900 and 975px the two cards came out exactly the same width — which is the one thing this must never be. 94% keeps it narrower at every width it is horizontal at. The floor is safe: at a 900px viewport the marks still measure 450px inside a 520px viewport, so the row only tightens its gaps from 22px to 17px and nothing is cropped or scaled. */ width:min(94%,55rem); margin:1.5rem auto 0; padding:.8rem 1.5rem .85rem; background:var(--bg); border-top:none;border-bottom:none; /* A card on a dark photograph needs a deeper cast than a card on paper, or it reads as pasted rather than lifted. The inset top line is the same pressed-paper highlight .proof-card uses, so they read as one material. */ box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 38px rgba(17,26,44,.34); } /* ── B3: the same card with less of it ──────────────────────────────────── Ronnie, 14 Aug: "less padding (so the logos remain the same but the white card is smaller, so less obstructive and shows more of the bg picture?)" Both levers, and they are not the same lever. On DESKTOP the gap between marks is not an input: `justify-content:space-between` divides whatever the card leaves over, so the card's width sets the spacing and not the other way round. Narrowing the card from 55rem to 46rem (880px -> 736px at 1440) is therefore the only move available, and it tightens the emblem spacing for free, which is the thing he asked for. On MOBILE the lockup stacks and the card is wrap-width, so width is the lever there: 92% insets it and lets the photograph run down both sides. Padding comes off with it, but not to zero. Paper needs a visible margin around its contents or it stops reading as a card and starts reading as a swatch someone laid the logos on. .7rem/1.15rem is the floor I would defend; below that the marks touch the edge. */ .home2-b3 .crest-foot{ width:min(88%,46rem); margin:1.5rem auto 0; padding:.7rem 1.15rem .75rem; background:var(--bg); border-top:none;border-bottom:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 32px rgba(17,26,44,.32); } /* The wash needed a second layer on .hero-overlay to lift the picture ~110px before the rail's own ramp started. That layer went with it: leaving it in would keep washing the foot of the photograph out, which is the fault being fixed. Every B now inherits the plain .home2 scrim, so all four pictures are pixel-identical to A's treatment and the only differences between the variants are structural, which is what a comparison is for. */ /* bronze, not --gold-lt: on the card versions the lede is on paper */ .home2-b2 .crest-foot .crest-lede, .home2-b3 .crest-foot .crest-lede, .home2-b4 .crest-foot .crest-lede, .home2-b5 .crest-foot .crest-lede, .home2-b6 .crest-foot .crest-lede{color:var(--gold-ink)} @media (min-width:900px){ /* The hero's bottom padding and the record card's -4rem overlap are what decide how much photograph is left BETWEEN the two cards. At 4.25rem the answer was 4px, which is not a gap, it is a seam: the two read as one glued block, which is the fault that killed the wrap-width panel. 5.15rem leaves 18px of picture showing between them, so the crest card is plainly a separate object sitting ON the photograph and the photograph plainly continues behind it. Paid for by taking 6px back off the card's own top margin; the record card still closes at 794, same as it did. B1 is absent from this list on purpose: no card, no seam, no bill. */ .home2-b2 .hero-home,.home2-b3 .hero-home,.home2-b4 .hero-home, .home2-b5 .hero-home,.home2-b6 .hero-home{padding-bottom:5.15rem} .home2-b2 .crest-foot,.home2-b4 .crest-foot, .home2-b5 .crest-foot,.home2-b6 .crest-foot{margin-top:1.35rem;padding:.85rem 1.6rem .9rem} .home2-b3 .crest-foot{margin-top:1.35rem;padding:.75rem 1.2rem .8rem} /* ── B3's own emblem sizing, and why it needs a rule at EVERY desktop width ── First cut of B3 borrowed B2's 900-1023 tightening and left everything above 1023 on the base --em:1 / 22.4px gap. That was wrong by a mile and only measurement caught it: B2's card is 880px wide so its marquee viewport is ~600px and 450px of marks sit in it comfortably, but B3's card is a FIXED 736px from 900 all the way up (88% of the wrap only falls under 736 below a 884px window), which leaves a 469px viewport. Five marks at full size plus four 22.4px minimum gaps need 539. .crest-vp is overflow:hidden, so the row was running 71px past its right edge at 1440 and 1600 — Imperial and UCL both sliced — and a screenshot showed nothing, exactly as it did the last time this happened. Two levers, spent in this order. The lede column comes down from 12.5rem to 11.5rem and the gap beside it from 1.8rem to 1.4rem, because a 200px label eating 29% of a 736px card is the wrong thing to protect; that hands 22px back to the marks. Only then do the marks shrink, to .9 with a 13.6px gap: 405 + 54.4 = 459 inside 491, clear by 32px. Shrinking the marks first would have cost B3 the very thing the test is for — same logos, less paper. */ .home2-b3 .crest-inline{gap:1.4rem} .home2-b3 .crest-lede{flex:0 0 11.5rem} .home2-b3 .crest-foot .crest-row{--em:.9;gap:.85rem} } @media (min-width:900px) and (max-width:1023px){ /* Narrowing the card costs the marquee viewport ~50px, and flex `gap` is a MINIMUM, not a target: space-between cannot go under it. At a 900px viewport the five marks plus their 22.4px gaps measured 539px inside a 507px viewport, so .crest-vp's overflow:hidden sliced the right edge off UCL. A screenshot at review size showed nothing — the mark just looked like a mark. 8% off the emblems and 6px off each gap clears it by ~29px at the tightest width the horizontal lockup is ever asked to hold. */ .home2-b2 .crest-foot .crest-row,.home2-b4 .crest-foot .crest-row, .home2-b5 .crest-foot .crest-row,.home2-b6 .crest-foot .crest-row{--em:.92;gap:1rem} } @media (max-width:899px){ /* The lockup stacks below 900 (lede centred over two wrapped rows of marks), so B2's card is wrap-width here and earns its keep by padding and shadow rather than by being narrower than something. B3 is the version that does narrow on mobile, which is where Ronnie said the width is most noticeable. */ .home2-b2 .crest-foot,.home2-b4 .crest-foot{margin-top:1.35rem;padding:1rem 1.15rem 1.05rem} .home2-b3 .crest-foot{width:92%;margin:1.35rem auto 0;padding:.85rem .85rem .9rem} /* ── B5 and B6: the mobile narrowing, two candidates ──────────────────── Ronnie, 14 Aug: "on mobile difference not noticeable between b2 and b3. so perhaps mobile only make the box a bit narrower just on mobile?" He is right and the numbers say why. On a 430px phone `.wrap` is 430 - 48 = 382px, so B2's card is 382 and B3's 92% is 351. A 31px difference split across two edges is 15px a side, which is under the threshold at which anyone sees a margin change. B3 was never going to read as narrower on a phone; that width was chosen for the desktop where it also buys tighter emblem spacing, and it simply did not translate. So these two go further, and there are two of them because the useful information is the RANGE, not one more guess. At 430: B5 86% -> 329px, 26px of photograph each side B6 78% -> 298px, 42px of photograph each side Below that the marks themselves would have to shrink, which is the one thing this whole card exists to avoid. The padding narrows with the card. It has to: at 298px the old 1.15rem inset leaves the lockup 261px, and the emblem row is the thing that gets squeezed. .9rem/.8rem is the floor at which paper still reads as paper. Where the row WRAPS is not a separate question from this one. On a 430px phone the row currently breaks four marks then IMPERIAL alone, which is the fault noted on the chooser. Narrowing the card narrows the row, so these two variants move that break as a side effect and it is measured alongside the width rather than after it. */ .home2-b5 .crest-foot{width:86%;margin:1.35rem auto 0;padding:.95rem 1rem 1rem} /* The 16rem floor is not tidiness, it is the point at which the row breaks a third time. A flat 78% gives 286px on a 430 phone and 255 on a 390, both of which hold two rows; on a 360 it gives 232 and the marks go to THREE lines, Oxford+Cambridge / LSE+UCL / Imperial, which is worse than the fault this is trying to fix. 256px is the narrowest width at which two rows survive, so below a 375px phone B6 simply stops narrowing. Wrapped in min(100%, ...) because max() alone is a floor with no ceiling: at a 20px root, which is a browser zoom or an OS text-size setting, 16rem is 320px against a 297px column, and the card would break its own wrap and push horizontal scroll onto the page. */ .home2-b6 .crest-foot{width:min(100%,max(78%,16rem));margin:1.35rem auto 0;padding:.9rem .8rem .95rem} /* same seam as desktop, measured at 3px here: the hero's bottom padding has to clear the record card's overlap by enough to leave picture between the two cards. Mobile has no fold to protect, so it simply gets the room. */ .home2-b2 .hero-home,.home2-b3 .hero-home,.home2-b4 .hero-home, .home2-b5 .hero-home,.home2-b6 .hero-home{padding-bottom:4.3rem} } @media (min-width:601px) and (max-width:899px){ /* One value cannot serve the whole of "mobile": site.css drops the record card's overlap from -4rem to -3rem at 600, not at 900, so the same 4.3rem left 21px of picture at 390 and 5px at 820. This band pays the 16px difference back. */ .home2-b2 .hero-home,.home2-b3 .hero-home,.home2-b4 .hero-home, .home2-b5 .hero-home,.home2-b6 .hero-home{padding-bottom:5.3rem} } /* ══ B4 — transparent header, MOBILE ONLY ═════════════════════════════════ Ronnie, 14 Aug, asked three things in one breath: a transparent mobile header with the white lockup, a 5-10% cut to the header height and the logo, and a 5-10% cut to the space between header and hero. The first one answers the other two, which is why B4 tests only the first. Today the header is an opaque 52px bar STACKED ABOVE the photograph, so its height is a straight subtraction from the picture. Taking it out of flow costs the photograph nothing and gives it the top of the screen: the image now runs edge to edge behind the mark. There is no longer a space between header and hero to trim, because they occupy the same 52px. Not sticky, and that is a decision rather than an omission. A transparent sticky header is white type on a cream page the moment it leaves the photograph, so it would need a scroll listener and a solidified state to avoid dying on a bug instead of on its merits. For a test page, absolute is fewer moving parts and honest about what it is. If he takes B4, the sticky state is the follow-up build, not a thing to smuggle in now. Height stays at 52px whatever he decides. The row is 44px of content plus 4px of padding each side, and 44px is the burger's tap target — Apple's HIG and WCAG 2.5.5 both put the floor there. The 5-10% he asked about is available on the MARK (the lockup box is 54% transparent padding) but not on the row, and shrinking the mark alone just makes it small beside a burger that cannot follow it down. */ @media (max-width:900px){ .home2-b4 .site-header{ position:absolute;top:0;left:0;right:0; background:transparent;border-bottom:none; } .home2-b4 .brand-navy{display:none} /* The burger is the header's other half and has to change with it. Its bars go white for the obvious reason; its border is the less obvious one — the base rule is `1px solid var(--line)`, a warm cream hairline built for a cream bar, and on the photograph that reads as a small pale box parked in the corner rather than as part of the header. A white rule at 38% belongs to the same object as the lockup. */ .home2-b4 .nav-toggle span{background:#FFFFFF} .home2-b4 .nav-toggle{border-color:rgba(255,255,255,.38)} /* The hero starts at y=0 now, so its own top padding is the only thing holding the eyebrow clear of the mark. 3.5rem (56px) against a 52px header left 4px, which is a collision, not a gap. 5.6rem seats the eyebrow 90px down — 38px of clear air under the header, the same air B2 has — and the page still starts 52px of photograph higher than B2 does, because the header no longer takes a slice of its own. */ .home2-b4 .hero-home{padding-top:5.6rem} } /* Desktop B4 is B2. The white lockup only exists inside the block above, so it is hidden by default rather than shown by default — a display rule that fails open would put a white mark on the cream desktop header. */ .home2-b4 .brand-white{display:none} @media (max-width:900px){.home2-b4 .brand-white{display:block}}