/* The long-form content pages: About (98:2109 / 115:3203) and My approach (98:2496 / 122:4085). Same page model as the home — a pinned layer behind a centred column with a veil between them — except the pinned layer is the portrait rather than the video, and the column gap is 8 rather than 32. The two pages share everything here. Where they differ, the rule is scoped to `.approach` on ; About is the unscoped default. */ /* Hero-image-container 115:3101: the portrait is pinned for the whole page. Its own 16px top padding is what puts it at y=16 in the Figma frame. */ .page-hero-range { position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 0; pointer-events: none; } .page-hero-sticky { position: sticky; top: 0; padding-top: var(--space-16); } /* The portrait's last stretch is painted over with the page's own colour. Its mask can only fade it towards whatever is behind it, and behind it is the veil's fill rather than the page, so the last rows landed a few levels off #e7e7e7 — which is exactly the line that showed on the home. This ends ON the background instead of near it. Same fix, same reason. */ .page-hero-sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none; background: linear-gradient( to bottom, rgba(231, 231, 231, 0) 0%, rgba(231, 231, 231, 0.85) 55%, var(--grey-background-100) 100% ); } /* Image 115:3096, 488 wide at the natural 976x1242 of the asset */ .page-portrait { width: 488px; height: 621px; margin: 0 auto; object-fit: cover; /* The default already, written out because the footer portrait that becomes this one says it too: the two are one picture in two places, and anything left implicit on one side is a difference waiting to be introduced. */ object-position: center; /* Two fades, intersected. Down: a pinned layer's bottom edge travels with you, and these assets end on her blurred shoulder rather than on page grey. It ends by 72%, before the veil above starts thinning at 78%. Across: the exports run 80% opaque straight off their left and right edges — measured — so a 488-wide image in a 640 column would draw two hard verticals. Same feathering as the home hero clip. */ -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 0, #000 92%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 91%, rgba(0, 0, 0, 0) 100%); mask-composite: intersect; } /* Blur 98:2130 / 98:2501, the same node as the home's Hero-Overlay and built the same way: the range carries the fill, page-tall and static so the 5.82% stop lands in page coordinates; the sticky child carries the blur, one portrait tall, as a ramp of layers (progressive-blur.css). No mask anywhere in this subtree — it would make the ancestor a backdrop root and leave the filter with nothing to sample. */ .page-veil-range { position: absolute; top: 331px; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(237, 237, 237, 0) 0%, rgba(231, 231, 231, 0.55) 5.82% ); } .page-veil { position: sticky; /* 16 rather than 0, to sit on the portrait's own 16px top padding */ top: var(--space-16); /* 120 past the portrait, so the blur dissolves its bottom edge rather than stopping level with it — see hero.css */ margin-top: 300px; /* begins where .veil-onset ends */ height: 741px; /* the blur itself is a ramp of layers — see progressive-blur.css */ } /* Container 98:2352: the column runs at 8 between blocks, not the home's 32 */ .page-scroll { gap: var(--space-8); } /* Hero-Headline 106:2837 */ .page-headline-wrap { width: 576px; max-width: 100%; padding: var(--space-16); } .page-headline { margin: 0; font-family: var(--font-headings); font-weight: var(--weight-book); font-size: var(--h1-size); line-height: var(--h1-line); color: var(--headline-ink); /* No white halo. The Figma puts a 34 blur behind this text — a 17px CSS radius — and it is deliberately not carried over: removed on the headlines first, then everywhere, because it reads as a smudge on a screen where in Figma it reads as separation. Whatever a text needs to sit on, it gets from what is behind it, not from a glow around each letter. */ } /* Texts-container 106:2957 */ .page-texts { display: flex; flex-direction: column; gap: var(--space-8); width: 576px; max-width: 100%; } /* Textsection-main 106:2741 */ .textsection { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-16); width: 100%; font-family: var(--font-headings); font-weight: var(--weight-book); font-size: var(--h3-size); line-height: var(--h3-line); /* No white halo. The Figma puts a 34 blur behind this text — a 17px CSS radius — and it is deliberately not carried over: removed on the headlines first, then everywhere, because it reads as a smudge on a screen where in Figma it reads as separation. Whatever a text needs to sit on, it gets from what is behind it, not from a glow around each letter. */ } .textsection-title { margin: 0; color: var(--text-about-title); } .textsection-body { margin: 0; color: var(--text-about-body); } .textsection-body a { color: inherit; text-decoration: underline; text-underline-position: from-font; } /* Text-photo 98:2382: a section, a photo, then a section, 32 apart */ .page-textphoto { display: flex; flex-direction: column; gap: var(--space-32); width: 100%; } /* Textsection-Image 115:2966, variant Rectangle */ .textfigure { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); margin: 0; width: 100%; } .textfigure img { width: 100%; aspect-ratio: 544 / 406; object-fit: cover; border-radius: var(--radius-12); } /* Variant Square (115:3893), the one the Approach page uses */ .textfigure--square img { aspect-ratio: 1 / 1; } .textfigure figcaption { display: flex; flex-direction: column; width: 100%; font-family: var(--font-headings); font-weight: var(--weight-book); /* Suisse Intl Book Italic is not among the licensed weights we self-host, so this is the browser's synthesised slant. Swap it the day the italic is bought — see PLAN.md challenge 1. */ font-style: italic; font-size: var(--caption-size); line-height: var(--caption-line); } .textfigure-tagline { margin: 0; color: var(--caption-ink); } .textfigure-place { margin: 0; color: var(--caption-location-ink); } /* Hero-Testimonials 106:2797 sits at 24/16 padding on this page */ .page-texts .hero-testimonials { padding: var(--space-24) var(--space-16); gap: var(--space-16); } /* ── My approach — Figma 98:2496 ────────────────────────────────────────── */ /* Image 98:2499 is a 408x506 box holding a 488-wide container offset -40. I first read that as a crop window and clipped the portrait to it, which cut her at both sides and reduced the blur to a 408-wide slice of itself. The frame does not clip: it is a placement box, and 118 - 40 puts the full 488 portrait centred in the 640 column, exactly where About has it. So the hero needs no override at all here — only the veil below differs. */ /* Nothing to override for the veil here any more: 98:2501 carries the same fill and the same blur(50px) as the About one, and the fill is a proportion of its own height, so a shorter node ramps in over a shorter distance by itself. The baked overlays this page and About used are no longer painted — the filter does that work now — but `tools-bake-about-shadow.sh` and its output stay in the repo as the fallback if the filter ever has to go. */ /* Container 98:2502 sits at 48 between blocks in the desktop frame, but the variable is 8 and every other frame uses it — confirmed with Flora as a stray nudge, so the shared gap stands and there is no override here. */ /* The 393 layout lives in mobile.css, which loads last. */