/** * @file * The page headline band. CHR-7 / DONI-718. * * Canonical Figma `PMOumVEsuQEHJFYkbGBD84`, canvas `24410:65586` * 🟢 `🖥️ Layouts (For PHASE 2) 7-29-2026`. Every number below was read from a * node, not from a label. Node ids are cited inline. * * ── GEOMETRY ──────────────────────────────────────────────────────────────── * * | Width | Band | Padding | Title box | Art rotation | * |-------|----------|------------------------|-----------|--------------| * | 1440 | 1440×70 | 24 / 720 / 20 / 120 | 769px | -143.78deg | * | 375 | 375×70 | 24 / 0 / 20 / 24 | 227px | -157.01deg | * * The band has NO fixed height. 70 is what 24 + one 22px line + 20 comes to. * `3.0 SWITCHING` measures 375×96 at mobile (`24581:14495`, `24581:9948`) * because its title wraps to two lines in the 227px box — 24 + 52 + 20. A * fixed height would have to be wrong on one of those two pages. * * ── 🔴 THE 720px RIGHT PADDING IS NOT BUILT, AND MUST NOT BE ──────────────── * * Figma reports `pr-[720px]` on the desktop band. It is internally * inconsistent with the same frame's own title box: * * 1440 - 120 (left) - 720 (right) = 600px content box * title text node = 769px ← overflows by 169 * * A fixed-width text node inside a padding box narrower than itself is a * Figma artifact, not a layout instruction. CHR-7's acceptance criterion says * so outright: the 720 "collapses to the gutter in the build". So the band * takes `--layout-gutter` on both sides via `.l-band`, per the FND-4 contract * in css/base/layout.css, and the 769 survives as the title's max width * because THAT number is load-bearing at mobile (see the 227px note above). * * Mobile's measured right padding is 0, not 24. Also inert: the title box is * a fixed 227px, so nothing ever reaches the right edge to be padded off it. * `.l-band`'s symmetric gutter renders identically and keeps this band inside * the alignment check instead of escaping it. * * ── 🔴 THE ART OFFSETS ARE NOT THE RAW FIGMA x/y. FND-8's TRAP ────────────── * * Figma gives the art as a wrapper box that CENTRES a smaller rotated square. * That wrapper is the AXIS-ALIGNED BOUNDING BOX of the rotated square, not the * square itself: * * desktop wrapper 1696.816 @ left 229 / top -409 ┐ square 1214.069 * mobile wrapper 792.044 @ right -397.16 / bottom -548.85 ┘ square 604.074 * * 1214.069 × (|cos 143.78°| + |sin 143.78°|) = 1696.8 ✓ it is the AABB * * CSS `transform: rotate()` rotates about the element's own centre and does * NOT change its layout box, so there is no wrapper to reproduce — but the * offsets have to be re-expressed against the SQUARE's edge, which sits * (AABB - square) / 2 further in on every side: * * desktop (1696.816 - 1214.069) / 2 = 241.374 * left 229 + 241.374 = 470.374 * top -409 + 241.374 = -167.627 * mobile ( 792.044 - 604.074) / 2 = 93.985 * right -397.16 + 93.985 = -303.175 * bottom -548.85 + 93.985 = -454.865 * * 🔴 Using the raw 229 / -409 shifts the swoop 241px and looks nearly right. * That is the whole failure mode — it never errors and it never looks broken. * * ── 🔴 THE ARTWORK IS NAMED FOR THE WRONG SITE ───────────────────────────── * * The layer is `DONI_Circles_HCP_RGB 1` — HCP — on a DTC page, in every * headline instance measured. The file is shipped under that name on purpose. * DO NOT rename it and DO NOT substitute `DONI_Circles_DTC_RGB`. It is a * naming defect in the design file, raised for a designer; swapping the asset * silently would change what renders on eight pages on a guess. * * ── WHAT THIS FILE DELIBERATELY DOES NOT DEFINE ──────────────────────────── * * - ⛔ Per-page art offset modifiers, and no prop to set one. Measured on 13 * instances across all 8 pages — 5 desktop, 8 mobile — the offset, wrapper * size, inner size and rotation are IDENTICAL within each breakpoint. The * generated JSX is byte-identical apart from the node id. CHR-7's AC says * the offset is "per page"; it is not, in the canonical file. Eight * modifiers would be eight empty rules pretending to be coverage. * - ⛔ A `--coral` variant. The band is one colour. * - ⛔ A size token for 22px. `--size-h4` is 26px. Figma binds this text to a * variable literally NAMED `Desktop/H4` whose size is 22 — the file has two * disagreeing H4s. 22 is what the node renders, so 22 is what ships, as a * component-local property rather than a raw literal. */ .page-headline { /* #eb6f56, via --color-coral-band. Read as a value, not as a label: `get_variable_defs` on `24581:19246` returns `Coral: #eb6f56`, while the same call on the page node `24410:65661` returns `Coral: #f16b50`. Two things answer to that name in this file. --color-coral-band is the one that matches what this node renders. Codegen's `var(--coral,#eb6f56)` is a fallback and proves nothing on its own. */ position: relative; overflow: hidden; padding-block: 24px 20px; background-color: var(--color-coral-band); color: var(--color-white); /* Mobile, from `24581:5774` and seven identical siblings. The art is anchored from the END/BOTTOM edges here and from START/TOP at desktop — two different placements of one asset, neither derivable from the other, so all four insets are declared at both widths. */ --page-headline-title-width: 227px; --page-headline-art-size: 604.074px; --page-headline-art-rotate: -157.01deg; --page-headline-art-inset-inline: auto -303.175px; --page-headline-art-inset-block: auto -454.865px; } /* The column. `.l-container` is capped and never padded — FND-4. `z-index` rather than `position: relative` alone so the title always wins against the art, which is painted first but is 1214px tall against a 70px band. */ .page-headline__inner { position: relative; z-index: 1; } .page-headline__title { margin: 0; max-inline-size: var(--page-headline-title-width); font-family: var(--font-agenda); color: var(--color-white); /* `24581:19246` / `24581:5774`: 22px both widths. `normal` is correct on agenda — it resolves to 1.16 there. It would be a 25% inflation on tilt-neon, which is why css/base/type.css bans it on that face only. */ font-size: 22px; font-weight: 700; line-height: normal; } /** * The decorative swoop. * * A background rather than an ``: it carries no information, so there is * no honest `alt` to write. `object-fit: cover` in Figma over a square asset * in a square box is `background-size: cover` here — identical framing. */ .page-headline__art { position: absolute; inset-inline: var(--page-headline-art-inset-inline); inset-block: var(--page-headline-art-inset-block); inline-size: var(--page-headline-art-size); block-size: var(--page-headline-art-size); transform: rotate(var(--page-headline-art-rotate)); /* 🔴 HCP-named asset on a DTC page. Measured on all 13 headline instances: 13 say `DONI_Circles_HCP_RGB 1`, 0 say `..._DTC_RGB`. Body sections on the SAME page frames do use `..._DTC_RGB` (`24581:20984`, `24581:7496`, `24581:14232`), so both names exist in the file and only the headline uses HCP. Raised for a designer. Not renamed here — a layer name is not proof the pixels are wrong, and swapping the asset would change eight pages on a guess. */ background-image: url("../../images/decorative/DONI_Circles_HCP_RGB--headline-band.webp"); background-size: cover; pointer-events: none; } /* Desktop. Same 768 switch as css/base/layout.css and css/base/type.css — the design supplies 1440 and 375 and nothing between, so one width is chosen for the whole foundation. Do not introduce 1024 here. */ @media (min-width: 768px) { .page-headline { /* `24581:19246` and four identical siblings. */ --page-headline-title-width: 769px; --page-headline-art-size: 1214.069px; --page-headline-art-rotate: -143.78deg; /* DONI-718: the raw `left: 470.374px` this was re-expressed from is only correct AT 1440 — it is measured from `.page-headline`'s own left edge (the full-bleed band), so above/below 1440 the art held a fixed screen position instead of tracking `.l-container`'s right edge, drifting away from the design at every width but the one Figma frame. `right`-anchor it instead, reproducing FND-4's own centering math so the art's offset from the container's right edge is constant at every width >= 768: `100%` (the band's own width, not `100vw`) minus the container's total width (gutter*2 + content) gives the container's extra side margin above 1440, `max(0px, …)` keeps it flush (0) at/below 1440, and -244.443px (`1440 - 470.374 - 1214.069`) is the original left/width pair re-expressed as an offset from the band's right edge, unchanged from what shipped. */ --page-headline-art-inset-inline: auto calc( -244.443px + max(0px, (100% - (var(--layout-gutter) * 2 + var(--layout-content))) / 2) ); --page-headline-art-inset-block: -167.627px auto; } }