/* ============================================================ * HOME — personality layer (July 2026) * Holds the "bright, human, layered" personality elements as they * get approved, section by section. Layered over home-v2.css. * * Brief v3 (locked from Rebecca's annotated inspo, 2026-07-22): * - KEEP the full-width photo hero TILE — do not change its shape. * - Rebecca is building the layered hero graphic in Illustrator and * will supply it. Until then the hero tile is a PLAIN BLUE block * (no photo) — see .hero2--flat below. * - Composition language for supplied artwork: LAYERING * (shape -> photo -> UI on top); GroupEd icon-shape echoes behind * & in front of people; UI/pills over real photos; faint gradient * grounds; big words behind photos; chat bubbles for the parent * app page. Palette stays OURS, used bolder. * ============================================================ */ /* ---------- hero: Rebecca's Illustrator graphic (home only) ---------- Full-bleed 2:1 artwork (navy left kept calm for the white headline + CTA; GroupEd mark + person on the right). We drop the photo scrim and the floating chips — the artwork is self-contained. Fallback navy (#253A7D, sampled from the artwork) fills any crop gap. (.hero2 is shared by other pages, so this is scoped to .hero2--graphic.) */ .hero2--graphic .hero2__frame { background: #253A7D; } .hero2--graphic .hero2__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero2--graphic .hero2__scrim, .hero2--graphic .hero2__chip { display: none; } /* ---------- mobile: copy first, then her (13 Aug 2026) ---------- Rebecca, after go-live: "the home page hero doesnt look good — put the photo of the women under the content." ⚠ THE PREVIOUS VERSION SHOWED THE ARTWORK UNCROPPED AS A BANNER ON TOP, and the reason it looked wrong is the artwork itself. It is 2600x1300 — a 2:1 image whose LEFT HALF IS DELIBERATELY EMPTY NAVY, because on desktop that empty half is where the headline sits. Shown whole on a 366px phone it became a 183px strip that was half blank navy with a very small person on the right, sitting above the words. ⚠ It also used `object-fit: fill`, which stretches rather than crops — safe only while the box matched the image's 2:1 exactly, and silently distorting the moment anything changed the height. So on a phone the artwork is now CROPPED to the part worth seeing and moved BELOW the copy: · order — copy first, photo second. Flex order, not column-reverse, so a third child (badges, chips) can never land somewhere unexpected. · aspect-ratio — 4/3 instead of the image's 2/1, so she has real height. · object-position — RIGHT, measured: she occupies roughly 49%-94% of the artwork's width, and a 4:3 window over a 2:1 source shows 66.7% of it. Anchored right, the visible window is 33%-100%, which holds all of her plus the edge of the sky mark, and drops the empty navy. ⚠ DOM order is unchanged (image before copy), so this only moves it visually. The image is not focusable and the only tabbable thing here is the CTA inside the copy, so reading and focus order still agree. */ @media (max-width: 900px) { .hero2--graphic .hero2__frame { display: flex; flex-direction: column; min-height: 0; } .hero2--graphic .hero2__copy { order: 1; padding-top: clamp(28px, 7vw, 48px); padding-bottom: clamp(24px, 5vw, 36px); } .hero2--graphic .hero2__photo { order: 2; position: relative; inset: auto; width: 100%; height: auto; /* 13 Aug 2026: "could we centralise the women and increase the size so she fills the width of the tile." ⚠ The two halves of that are ONE number each, and they interact — work them in this order or you will chase your tail. SIZE first. Under object-fit:cover a portrait box over a 2:1 source scales the image by HEIGHT, so the box's height is the only zoom control there is. She occupies ~44% of the artwork's width, so to have her span the full 370px tile the artwork must be drawn ~840px wide, which needs a 420px-tall box: 370/420 ≈ 7/8. At the old 4/3 the artwork drew 556px wide and she covered just 66% of the tile — the complaint. POSITION second, and it is NOT "the % she sits at". object-position aligns the image's X% point with the BOX's X% point, so with 476px of horizontal overflow the sum is: her centre (0.70 × 846 = 594px) minus 476p must equal the box centre (185px), giving p = 86%. Setting it to her own 70% would leave her 76px left of centre. */ aspect-ratio: 7 / 8; object-fit: cover; object-position: 86% 50%; /* 13 Aug 2026: "just zoom in on the image so that the icon behind her is bigger than the width of the tile." ⚠ THE ZOOM HAS TO BE A TRANSFORM, NOT A BIGGER BOX. Under object-fit:cover a portrait window over this 2:1 artwork scales by HEIGHT, so the only way to zoom via the box is to make it taller — 1.25x would mean a 529px-tall photo under the copy. transform scales the painted content and leaves the layout box alone, so the hero keeps its height. ⚠ transform-origin: center TOP is load-bearing, not a nicety. The photo is the last item in a flex column and a transform paints outside its own box: with the default centre origin the extra 106px of height would spill UPWARDS over the "Book a free demo" button sitting directly above it. Anchored to the top, the top edge stays put and the overflow goes down and sideways, where .hero2__frame's overflow:hidden clips it. ⚠ Safe only because the 40-second GSAP Ken Burns zoom on .hero2__photo was removed on 7 Aug (see gsap-trial.js) — it set an inline transform that would have overwritten this one. If that ever comes back, they collide. Why 1.25: measured off the artwork, the sky mark occupies 49.6% of its width and bleeds top to bottom. At 1x it drew 420px against a 370px tile — already wider, but its left edge landed just inside the tile, so you could see it end. 1.25 draws it at 525px and puts the visible window entirely inside the shape, so it runs off both sides and reads as a backdrop rather than a logo. */ transform: scale(1.25); transform-origin: center top; } } /* ---------- "whole school" CTA board: hero-style sky mark behind the 3 device mockups (same sky #2FB7F1 as the hero graphic) ---------- */ .final2__inner { position: relative; z-index: 1; } /* copy + montage sit above the mark */ /* clip layer: keeps the oversized corner mark inside the board's rounded shape (the board is overflow:visible on desktop for the montage step-out, so we can't clip on the board itself) */ .final2__markwrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } /* big GroupEd mark tucked into the TOP-RIGHT corner, behind the mockups */ .final2__mark { position: absolute; top: clamp(-110px, -7vw, -50px); right: clamp(-110px, -7vw, -50px); width: clamp(360px, 40vw, 620px); height: auto; display: block; } /* ⛔ The flourish used to be desktop-only here — `.final2__markwrap { display: none }` under this same breakpoint — on the reasoning that the montage stacks below the copy on a phone. Reinstated 13 Aug 2026: "can we make the photo bigger and put the watermark logo behind it." Both halves are below. */ @media (max-width: 1020px) { .final2__markwrap { display: block; } /* The mark follows the montage. Stacked, the devices sit at the FOOT of the board, so a mark tucked into the top-right corner (the desktop position) would sit behind the heading instead of behind the artwork — which is the one thing she asked for. Anchored bottom-right, bleeding off both edges, and clipped by .final2__markwrap's own overflow so nothing escapes the tile. */ .final2__mark { top: auto; bottom: clamp(-80px, -14vw, -34px); right: clamp(-150px, -28vw, -70px); width: clamp(320px, 86vw, 520px); } } @media (max-width: 900px) { /* "make the photo bigger": the montage was capped at the copy column's width, leaving 32px of empty navy either side of it while the board itself had room. It now bleeds out to the board's edges by cancelling .final2__inner's own side padding — written as the SAME clamp() that sets that padding rather than the 32px it happens to compute to at 390px, so the two cannot drift apart at other widths. The board is overflow:hidden, so this can never spill. */ .final2__phonewrap { margin-inline: calc(-1 * clamp(32px, 4.5vw, 72px)); } .final2__devices { width: 100%; max-width: none; } } /* (Numbers-band brand-shape flourish trial removed 23 July 2026 — Rebecca didn't like the ghost icon on "The numbers schools actually feel".) */ /* ------------------------------------------------------------ * HOME HERO: two buttons instead of one (13 Aug 2026) * Rebecca: "the launch deal butoon needs to be in the hero too." * "Book a free demo" stays the primary — white pill, navy arrow chip, which is * the standing treatment for a CTA sitting on photography. The Launch Deal takes * the site's white-ghost-on-dark secondary (btn--ghost + btn--on-dark from * foundation.css) rather than a second solid pill, so the hierarchy still reads * at a glance; two filled buttons would compete. * It carries the same .rb__dot as the nav, so the two are recognisably one thing. * ⚠ The is now wrapped in .hero2__actions. gsap-trial.js animates the hero CTA * via `document.querySelector('.hero2__cta')`, which still matches — but it is a * flat selector, so the new sibling gets NO entrance animation. That is deliberate * (the secondary shouldn't fly in on its own); don't "fix" it by animating the * wrapper without checking the hero entrance timeline. * ------------------------------------------------------------ */ .hero2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .hero2__deal.btn { font-weight: 700; gap: 10px; } @media (max-width: 560px) { /* Side by side these need 500px against a 370px tile, so they wrap anyway — this just makes the wrap deliberate and tidy. Grid rather than a wrapping flex row because grid makes both rows the width of the WIDEST item, so the two pills come out equal (243px, set by "Claim the Launch Deal") instead of each shrinking to its own label and stepping. ⚠ They are NOT full-bleed, and `width: 100%` would not make them so: .hero2__copy is a flex column with align-items:flex-start, so .hero2__actions is already shrink-to-fit at 243px and 100% just resolves against that. If you ever do want them edge to edge, the fix is `align-self: stretch` here, not a width on the buttons. */ .hero2__actions { display: grid; gap: 12px; } .hero2__actions .btn { justify-content: center; } }