/** * Section: Hero * * Ported from _mockups/index.html `.c-hero`, `.c-hero-copy`, `.c-underline`, * `.lede` and `.ask`. One page, no drift to resolve. * * WHAT IS NOT IN THIS FILE, AND WHY. Three of the mock-up's five hero layers * already exist globally and are reused rather than re-declared: * * `.pg-hero-photo` assets/css/base.css, identical to `.c-hero-photo`, and * the selector assets/js/main.js initParallax() looks for. * `.pg-hero-ridge` assets/css/base.css, plus the three ridge fills and the * two sun discs, all from tokens. * `.eyebrow.on-dark` assets/css/tokens.css. * * Only the wash, the copy column and the type are this section's own, so only * they are here. * * CONTRAST, MEASURED RATHER THAN ASSUMED, AND MEASURED ON EVERY LAYER. * * An earlier version of this header measured the wash and stopped there. That * was wrong: the ridge SVG sits at z-index -1 and the wash at -2, so the two * `` discs paint BETWEEN the wash and the text and lighten * the ground wherever copy crosses them. The table below was measured when this * hero's copy column was centred and did cross them. Since 7 October 2026 the * column is left-aligned like `.pg-hero` and stays clear of the discs, so the * "+ discs" rows describe a layout this file no longer has; they are kept as * the bound to re-check if the column is ever re-centred. * * The four grounds, worst point of each, with the discs as this file now sets * them (see the override below): * * --paper --on-dark-strong --gold-bright * --deep-forest, no disc 14.48 10.16 7.20 * --deep-forest + both discs 9.27 6.87 4.61 * wash on white photo 10.72 7.81 5.34 * wash + both discs 7.15 5.46 3.56 * * Against what each element actually needs: * * h1 --paper --text-hero 40-80px large, 3.0 PASSES all four * h1 em --gold-bright --text-hero large, 3.0 PASSES all four * .lede --on-dark-strong --text-lg 18-22px normal, 4.5 PASSES all four * .ask --gold-bright --text-lg normal, 4.5 see below * .eyebrow --gold-bright --text-xs bold normal, 4.5 see below * * ON THE BAND THIS SECTION DECLARES, --deep-forest, every one of those passes * with the discs included. The single residual is --gold-bright normal text * crossing a disc on top of a very bright photograph: 3.56 against 4.5. * * The table above is arithmetic and it is a CONSERVATIVE BOUND, because it * ignores that the wash darkens towards the foot. Sampling the actual painted * pixels out of a rendered screenshot, at the worst point the copy can reach, * which is the centre of the inner disc: * * painted ground rgb(54,70,48) --paper 10.12 --on-dark-strong 7.06 * --gold-bright 5.03 * * Identical at 768 and 1440, and identical with and without a photograph. At * 375 the discs do not reach the copy column at all. So every element clears * its threshold in practice as well as on paper. * * That residual is NOT specific to the discs and NOT specific to this section. * --gold-bright on the wash over a white photograph is 5.34 before any disc is * drawn, 0.84 above the line, and `.pg-hero` puts a --gold-bright eyebrow on * that same wash on 26 pages. It is a property of --hero-overlay's 0.9, which * is a token, and it is recorded rather than absorbed here. * * NO TINT TOKEN IS USED AS A TEXT COLOUR ANYWHERE IN THIS FILE. --brand-tint * and --brand-tint-soft are translucent forest and composite to 1.00:1 on this * ground. AGENTS.md §1.7. * * --gold on the underline is a decorative stroke under text that is already * --gold-bright. It carries no meaning of its own. */ /* --------------------------------------------------------------------------- * The band. * * Own ground, --deep-forest, per docs/pasia-section-inventory.md. No `.section` * class, because the hero owns its padding: the bottom value is the room the * route cards pull up into, and it has no token because it is one component's * clearance for another rather than a step on the spacing scale. The matching * negative margin lives in sections/path-cards.css, keyed on `.hero + …`. * * `isolation: isolate` gives the three negative z-index layers a stacking * context of their own, so they sit behind the copy without falling behind the * page. `overflow: hidden` clips the ridge, which is drawn oversized. * ------------------------------------------------------------------------ */ .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--deep-forest); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(9rem, 16vw, 13rem); } /* The wash over the photograph, about 90 per cent at the top and deeper at the foot, which is what turns a photograph into texture. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--hero-overlay), var(--hero-wash-deep)); } /* The sun discs are left at base.css's .16/.22. Until 7 October 2026 this file dimmed them to .10/.14, because the copy column was centred and 760px wide and crossed them. The column is now left-aligned like `.pg-hero`, the discs sit in the empty right-hand side of the band, and no copy crosses them at any width, so the mock-up's value is correct here too. If the column is ever re-centred, the dimming has to come back: see the contrast table in the header. */ /* The focus ring on a dark ground. base.css:87-91 keeps a list of dark surfaces that swap the global --gold-deep ring for --gold-bright, and says in as many words to add the selector there when a section goes dark. --gold-deep measures 2.53:1 on --deep-forest, under the 3:1 SC 1.4.11 asks of a focus indicator; --gold-bright is 7.20:1. The rule is here rather than there only because base.css is a shared file with other agents' work pending in the index, and a section-scoped rule has no blast radius. Fold it into that list next time base.css is touched. Nothing in this section is focusable today, which is why this is insurance rather than a fix. */ .hero :focus-visible { outline-color: var(--gold-bright); } /* --------------------------------------------------------------------------- * The copy column. * * Left-aligned on the container edge since 7 October 2026, so its left edge is * the first path card's left edge and the copy, the cards and the 26 inner * `.pg-hero` headers all share one axis. It was centred before, which put the * type in the one part of the band the photograph, the ridge peaks and the * sun all avoided, and every language re-centred its own ragged line lengths. * A left edge holds still in English and in a one-line Chinese headline alike. * * --container-narrow, 760px, caps the column; the heading and lede are capped * again in `ch`. The children are spaced by the column's gap, never by margins * on the children. * ------------------------------------------------------------------------ */ .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); max-width: var(--container-narrow); text-align: start; } .hero .hero-copy > * { margin: 0; } .hero h1 { max-width: 15ch; font-size: var(--text-hero); font-weight: 600; color: var(--paper); } /* Fraunces has no CJK glyphs, so an italic Chinese clause is a slant the browser synthesises by shearing the fallback face. Gold and the stroke carry the emphasis on their own there. */ .hero h1 em:lang(zh) { font-style: normal; } /* `position: relative` is what the underline is positioned against, and `nowrap` is what keeps the emphasised clause on one line so a single stroke can follow it. Both are the mock-up's `.c-underline`, which was verified at 320px across all 27 pages in the design phase. DELIBERATELY WIDER THAN THE MOCK-UP: it scopes these to `.c-underline`, an explicit class on one , and this scopes them to every . The class cannot come from the field, because pasia_the_heading_html() strips attributes from , so the choice is every em or none. Every em is the better of the two: only the first em gets the stroke, but a second one in a hero headline is a phrase the design has no treatment for either way, and nowrap keeps both of them from breaking mid-clause. The cost is that a long second em cannot wrap, which is the same constraint the first one already has and which the field instruction now states for all of them. */ .hero h1 em { position: relative; white-space: nowrap; font-style: italic; font-weight: 500; color: var(--gold-bright); } /* The hand-drawn stroke. The section emits the path with no `stroke` attribute, the same way parts/page-hero-ridge.php emits the ridge with no `fill`, so the colour is a token and not markup. The bare numbers are the path's geometry inside its own 260 x 12 viewBox. */ .hero-underline { position: absolute; left: 0; bottom: -.14em; width: 100%; height: .16em; overflow: visible; fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; } /* 44ch rather than the centred column's 52ch: a left-aligned block reads better at a shorter measure, and it keeps the lede's right edge well clear of the sun at 1024. */ .hero .lede { max-width: 44ch; font-size: var(--text-lg); color: var(--on-dark-strong); } /* `.ask` is the third client field in this hero and the only one base.css cannot reach: `h1` is covered by the heading element rule in tokens.css, `.lede` by the bare `.lede` rule in base.css, and this name belongs to one section. One 66-character unbreakable token cut it 437px at 320 and 101px at 1440, silently, inside `section.hero`'s `overflow: hidden`. `break-word` for the same reason `.lede` uses it: an ordinary block inside a hero that clips, so the document cannot move and min-content is not the mechanism. */ .hero .ask { font-family: var(--display); font-style: italic; font-weight: 500; font-size: var(--text-lg); color: var(--gold-bright); overflow-wrap: break-word; }