/** * Bonza, PDP section-nav strip (ClickUp 86eypb6me). See * product-page/section-nav.php for the full sourcing docblock: Figma node * 34384:224257 (Superfoods) / 34920:66099 (Biotics), file cY9QX6IwGVaaGI4r7J2RRF. * * Config investigated: same conclusion product-page-marketing.css's own * header already reached for every section this strip links to -- no * Blocksy Customizer surface, and no installed plugin (Blocksy Companion * Pro's own `#product-info-panel` quick-info tabs are a separate, unrelated * component, see section-nav.php's "CONFIG-FIRST" note), renders a jump nav * for this bespoke marketing stack. editor-friendly-ok: this styles * WooCommerce's own after-summary hook output, which has no Gutenberg * block/pattern counterpart to register add_editor_style() against, the * same documented exception every sibling file in this stack already uses. * * MEASURED FROM checklist-pdp.json (both variants, both identical shape): * - Row: 1384px wide, 56px tall, flex row, 0px gap between items (pills are * edge-to-edge, not spaced). * - Each pill: padding 20px 16px, font Nominee 900 16px, uppercase, * letter-spacing 0.02em, color #2E2A2A (--bppm-ink). * - DEFAULT-SELECTED item (item 1 on both variants, "why it's different"): * background #FFFFFF, border-radius 12px 12px 0px 0px (rounded top only, * flat bottom -- reads as attached to the section it sits above). * - Every other item: background #F8EDE3 (--bppm-cream, identical to the * page background surrounding it, i.e. no visible pill boundary until * selected -- this is the Figma-drawn "unselected" treatment), border- * radius 8px. * - No `position` value recorded on the row's own Figma node, and it sits * flush (0px gap) against the section below on both variants -- not * made sticky here, see section-nav.php's own docblock. * * ACTIVE-STATE INDICATOR (WCAG 2.2 AA 1.4.11, contractual on this build): * Figma draws the selected/unselected split as a flat background swap only, * #FFFFFF vs #F8EDE3. That pair's own contrast is ~1.15:1 (relative- * luminance formula, L(#FFFFFF)=1.0, L(#F8EDE3)=0.8609 -> * (1.0+0.05)/(0.8609+0.05)=1.15), far under the 3:1 floor 1.4.11 sets for a * non-text indicator of UI-component state. The #2E2A2A-on-#F8EDE3 text * contrast product-page-marketing.css measures at 12.30:1 answers a * different question -- text legibility, not state legibility -- so it does * not close this gap; `aria-current` covers assistive tech but gives a * low-vision sighted visitor nothing. This file deliberately diverges from * the Figma fill-only treatment: the selected link additionally gets * `box-shadow: inset 0 3px 0 0 var(--bppm-ink)`, a solid ink rule following * the pill's own rounded-top corners without adding to its box height (an * inset shadow, unlike a border, doesn't grow the box), so the 56px row * height Figma specs is unaffected. Ink (#2E2A2A) against the active pill's * own #FFFFFF background measures 14.18:1 (same relative-luminance formula: * L(#2E2A2A)=0.02406 -> (1.0+0.05)/(0.02406+0.05)=14.18 -- matches the * 14.18:1 this file's own FOCUS note below already cites for this same pair), * comfortably over the 3:1 floor. * * HOVER (FIX, follow-up to the ACTIVE-STATE INDICATOR change above): not * this file's guess about Figma's intent, because there IS no Figma intent * recorded -- every c-label node's own `interactions` field is null in * checklist-pdp.json (checked for all 14 label nodes, both variants). The * original decision here reused the "selected" background (white) as the * hover preview; once the active pill's own inset rule shipped, that made * a hovered pill and the active pill both plain white in the same row, with * only the inset rule (which a mouse-hovering, non-keyboard visitor has no * reason to notice) telling them apart. Fixed: hover now uses #FCF6F1, the * arithmetic midpoint of --bppm-white (#FFFFFF) and --bppm-cream (#F8EDE3) * per channel -- (255,255,255)+(248,237,227) halved = (251.5,246,241), * rounded to (252,246,241). Relative-luminance formula: L(#FCF6F1)=0.9300. * Against white (L=1.0): (1.0+0.05)/(0.9300+0.05)=1.07:1. Against cream * (L=0.8609): (0.9300+0.05)/(0.8609+0.05)=1.08:1. Both steps are small * because white and cream themselves are only 1.15:1 apart (see the * ACTIVE-STATE INDICATOR note) -- there is no way to split that budget into * two visually large steps, so this is a genuine, if subtle, third value * rather than a repeat of either endpoint; it stops the hover state from * being bit-for-bit identical to the active pill's background. Text colour * is unchanged (still --bppm-ink), so text contrast on this new background * only improves relative to cream (12.30:1) and stays effectively * unchanged relative to white (14.18:1 -> ~13.23:1 by the same formula), * nowhere near the 4.5:1 floor either way. * * FOCUS: WCAG 2.2 AA is a contractual guarantee on this build, so a visible * focus ring is not optional even where Figma records no such state. * --bppm-ink on white/cream measures 12.30:1/14.18:1 (product-page-marketing * .css's own comment), comfortably over the 3:1 floor a non-text focus * indicator needs against either pill background. * * FOCUS SHAPE (FIX): the `:focus-visible` rule used to set `border-radius: * 8px` unconditionally on every link, which is the box's own corner radius, * not a separate outline-radius -- so keyboard-focusing the active pill * overwrote its `12px 12px 0 0` and the pill visibly changed shape mid- * navigation. Modern browsers already clip/round the focus outline to * whatever border-radius the box currently has, so the override served no * purpose even for the unselected pill; removed rather than re-scoped. * * CASCADE CHECK NOT PERFORMED LIVE: no browser tool was available in this * session to walk document.styleSheets and confirm which rule wins for * `:focus-visible` on this exact new selector. Not fabricated as "checked" * -- flagged in the branch report instead. Risk is low because * `.bppm-section-nav__link` is new markup with no existing site-wide rule * targeting it by that class. */ .bppm-section-nav { padding-inline: max(64px, calc((100% - 1384px) / 2)); /* * The stack's own top gutter. Figma's raw wrapper padding is 64px on * all sides (checklist-pdp.json node 34631:78347 / 34920:66098), but * product-page-marketing.css already replaced that literal value with a * 32px-per-section rhythm when it moved to the full-bleed band recipe * (see that file's own header comment) -- this reuses that already- * shipped rhythm rather than reintroducing the un-shipped 64px figure. * The strip's own bottom edge stays flush (0px) against bppm-why below, * matching Figma; that section's own padding-block:32px supplies the * visible gap on that side. */ padding-block-start: 32px; } /* * FIX: tablet range recovers width from the desktop 64px-per-side floor. * `max(64px, calc((100% - 1384px) / 2))` only grows past 64px above a * 1512px viewport (1384 + 64 + 64); at every width below that the floor is * a flat 64px per side, 128px combined, on a strip that already scrolls * horizontally because it doesn't fit. Only the existing @media(max-width: * 480px) block below gave any relief, so 481px-1512px (which includes the * full 1024px "Blocksy tablet range" this same codebase already treats as * its own breakpoint elsewhere -- see checkout-trust-signal.css, * checkout-header-footer.css, footer.css, all @media(max-width: 1024px)) * pushed more pills off-screen than the 375px-viewport check above needed. * 32px matches the rhythm this same file's own padding-block-start comment * above already cites (product-page-marketing.css's shipped 32px-per- * section value) rather than inventing a new figure. */ @media (max-width: 1024px) { .bppm-section-nav { padding-inline: 32px; } } .bppm-section-nav__list { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; /* * Narrow-viewport requirement: scroll horizontally rather than wrap * into an unusable stack. Checked at 375px: seven full-length pills * (this project's longest label, "Feeding Calculator", plus its 32px * horizontal padding) do not fit a 375px viewport at any reasonable * font size, so overflow is the only option that keeps every label on * one legible line. */ overflow-x: auto; /* * FIX (86eypb6me q3): the strip's own scroll container was rendering a * persistent gray track BELOW the pills at every width this row * overflows (measured live 2026-09-23: this row's scrollWidth (1445px * at 768px viewport) exceeds its clientWidth (704px) at every width up * to the 1512px frame this Figma node itself was authored at, so the * bar shows almost everywhere it is used). Neither Figma frame (node * 34384:224257 Superfoods / 34920:66099 Biotics) draws a scrollbar -- * Figma never renders browser chrome for a scroll container at all -- * so this was reported as an unwanted "black shadow bar" sitting under * the active pill. * * Hidden here rather than removing overflow-x:auto: the row still needs * to scroll (it doesn't fit at any width per the comment above), and the * existing is-scrollable-start/-end gradient masks below already supply * the "there's more" affordance a visible scrollbar would have given, * so hiding the native track loses no functionality or wayfinding. * scrollbar-width:none replaces the previous Firefox-only "thin" value * (thin still paints a visible track, just a slimmer one -- not what * this fix needs); the sibling -ms-overflow-style targets legacy * Edge/IE, still shipped by some enterprise clients. */ scrollbar-width: none; -ms-overflow-style: none; /* * B14/S6: keep scrolled-to pills clear of the 48px fades, and stop a * swipe on the strip chaining into the browser's page back-swipe. */ scroll-padding-inline: 48px; overscroll-behavior-x: contain; } /* Chrome/Safari/Arc/Edge-Chromium: no scrollbar-width support, needs the pseudo-element hidden directly. Same fix as the property above, only the syntax differs per engine. */ .bppm-section-nav__list::-webkit-scrollbar { display: none; } .bppm-section-nav__item { flex: none; } .bppm-section-nav__link { display: block; white-space: nowrap; padding: 20px 16px; font-family: 'Nominee', var(--theme-font-heading-family, sans-serif); font-weight: 900; font-size: 16px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-align: left; text-decoration: none; color: var(--bppm-ink); background: var(--bppm-cream); border-radius: 8px; } .bppm-section-nav__link:hover { /* This file's own decision; see the file header, "HOVER". Deliberately not --bppm-white: that value is now the active pill's own signal. editor-friendly-ok: same raw-hex exception documented at the top of this file (no Gutenberg surface for this component) -- raw because this exact midpoint value has no --wp--preset--color token of its own, same as the sibling raw-hex precedent in cart-drawer-filled.css. */ background: #FCF6F1; } .bppm-section-nav__link[aria-current='true'] { background: var(--bppm-white); border-radius: 12px 12px 0 0; /* * Second, non-colour state signal -- see the file header's ACTIVE-STATE * INDICATOR note. Inset so it follows the rounded top corners and adds * no box height. Ink-on-white contrast for this rule: 14.18:1. */ box-shadow: inset 0 3px 0 0 var(--bppm-ink); } .bppm-section-nav__link:focus-visible { /* No border-radius here on purpose -- see the file header, "FOCUS SHAPE (FIX)". Each state (base 8px, aria-current 12px 12px 0 0) keeps its own radius; the outline follows it automatically. */ outline: 3px solid var(--bppm-ink); outline-offset: -3px; position: relative; z-index: 1; } @media (max-width: 480px) { .bppm-section-nav { padding-inline: 20px; } } /* B14: a pill never outgrows the row, at any width. Labels up to 476px (FR, 390px viewport) sat in a 330px row and could never be shown whole, so the pill is capped at the row width and the label wraps to two lines. 481-620px had the same fault (DE tabs of 339-424px in a 332-382px row), so the cap is no longer limited to <=480px. The link fills its item and centres the text, so a two-line pill and a one-line pill keep the same 56px minimum height (tap target >= 44px). A word longer than the pill (DE compounds at 320px) is broken instead of running past the edge, and nothing else is hyphenated. The selectors carry the body and list context because a 743px rule in product-page-vita-qa.css (PR #1404, on v1 while it was open) set max-width:none and white-space:nowrap on `html body.single-product .bppm-section-nav__item/__link`, which outranks a bare class selector and left this rule with no effect. */ html body.single-product .bppm-section-nav__list .bppm-section-nav__item { display: flex; max-width: 100%; } html body.single-product .bppm-section-nav__list .bppm-section-nav__link { /* A grid with a 0-min column, not a flex row: the label has to be able to shrink to the pill so that overflow-wrap can break an over-long word (a flex item keeps its longest word as its minimum width and overflows). */ display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; box-sizing: border-box; width: 100%; min-height: 56px; white-space: normal; /* Only a word wider than the pill is broken; short labels are never hyphenated or split ("INSIDE THIS FOR-MULA" at 375). */ overflow-wrap: break-word; hyphens: manual; /* Figma: 56px tab = 20px padding around a 16px line. The 1.5 line height from the 16px type floor made it 64px. */ line-height: 16px; } /* * STICKY-HEADER OFFSET (measured defect, fixed here). * * The theme header is `position: sticky; top: 0` with `z-index: 100`, and * it is 97px tall at 1512 on the deployed page (measured with * getComputedStyle + getBoundingClientRect on bonza-retheme.blz.au, not * read off the design). Every section this strip links to had * `scroll-margin-top: 0`, so a jump put the section's top edge at viewport * 0 and its eyebrow at 32px -- both underneath the header. The visitor * clicked "Reviews" and arrived at a view whose first ~97px was covered. * * `scroll-margin-top` is honoured by `scrollIntoView` and by the browser's * own native anchor jump, so one declaration fixes both the scripted path * and the no-JS fallback. * * The value comes from a custom property the script keeps in step with the * header's real measured height (see js/product-page-section-nav.js, * bppmSyncHeaderOffset). The fallback here is what applies before that * first measurement and if the script never runs: 97px for the header plus * 16px of breathing room, so the eyebrow is not flush against it. */ .bppm-section[id] { scroll-margin-top: var( --bppm-header-offset, 113px ); } /* * OVERFLOW AFFORDANCE (measured defect, fixed here). * * The row is horizontally scrollable by design, but nothing told the reader * there was more to the right. Measured on the deployed page at the design * breakpoint of 1512, where the row is 1384px wide: content ran to 1761px * on Superfoods and 1896px on Biotics, leaving three and four items * respectively outside the visible row with no visible cue. Shortening the * labels to Figma's own strings (see section-nav.php) closes most of that * gap; this closes the rest, and still applies at the narrow widths where * the row can never fit whatever the labels say. * * A mask rather than an overlaid gradient, so the fade works over whatever * background the section behind it happens to use and adds no element that * could sit over a link and swallow a click. The script adds * `is-scrollable-start` / `is-scrollable-end` only for the edge that * actually has content beyond it, so a fade never implies scrolling that * is not there. */ .bppm-section-nav__list.is-scrollable-end { mask-image: linear-gradient( to right, #000 calc( 100% - 48px ), transparent 100% ); } .bppm-section-nav__list.is-scrollable-start { mask-image: linear-gradient( to right, transparent 0, #000 48px ); } .bppm-section-nav__list.is-scrollable-start.is-scrollable-end { mask-image: linear-gradient( to right, transparent 0, #000 48px, #000 calc( 100% - 48px ), transparent 100% ); } /* * TYPE SCALE BELOW DESKTOP (measured mismatch, fixed here). * * The strip shipped at 16px everywhere. Figma steps it down: the 1440, * 1512 and 2560 frames draw the `c-label` at 16px, and the 1024, 744, 428, * 425, 375 and 320 frames all draw it at 14px, with the pill narrowing * from 242px to 215px as a result of the same 16px horizontal padding * around shorter text. Read straight off checklist-pdp.json, the seven * strip labels per frame, both variants, every breakpoint. * * A property check against the deployed page found this at five of seven * breakpoints and nowhere else: weight 900, letter-spacing 0.02em, 56px * height, 20px by 16px padding and the Nominee family all already matched * at every width. * * The breakpoint is 1439px because 1440 is the narrowest frame Figma draws * at 16px. Letter-spacing needs no companion rule, being in em. * * line-height is pinned to 16px here for the same reason the pill stays * 56px tall in every Figma frame: the base rule uses `line-height: 1`, so * dropping the font to 14px alone took the pill to 54px. 20px padding top * and bottom around a 16px line box is Figma's 56px at every width. */ @media (max-width: 1439px) { .bppm-section-nav__link { font-size: 14px; line-height: 16px; } } /* * B14/S6/G6 scroll arrows. Same treatment as the routines row * (css/category-page.css .bcp-routine-carousel__arrow): solid brand green on * the cream band (4.9:1, needs 3:1), 44px target, visible focus ring, disabled * at each end, outside the pills. Shown only while the row overflows * (js/product-page-section-nav.js toggles [hidden]). */ .bppm-section-nav__row { display: flex; align-items: center; gap: 8px; } .bppm-section-nav__row > .bppm-section-nav__list { flex: 1 1 auto; min-width: 0; } .bppm-section-nav__arrow { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: var(--wp--preset--color--bhp-green, #247B4E); color: var(--wp--preset--color--bhp-white, #FFFFFF); cursor: pointer; } .bppm-section-nav__arrow[hidden] { display: none; } .bppm-section-nav__arrow:hover:not(:disabled) { background: #1c5f3c; /* editor-friendly-ok: same hover shade as the routines arrows */ } .bppm-section-nav__arrow:focus-visible { outline: 2px solid var(--bppm-ink, #2E2A2A); outline-offset: 2px; } .bppm-section-nav__arrow:disabled { opacity: 0.35; cursor: default; } /* * G6 indicator, progress-bar variant (client: "one dot per position (or a * progress bar) with the current one highlighted"). A thin track under the * row; the green thumb is the visible share and sits at the scroll position. * Hidden by [hidden] whenever the row fits. Thumb: brand green on a 15% ink * track, well over 3:1 against the cream band. */ .bppm-section-nav__progress { height: 4px; margin-top: 8px; border-radius: 999px; background: rgba( 46, 42, 42, 0.15 ); /* editor-friendly-ok: ink at 15%, no preset token for an alpha */ overflow: hidden; } .bppm-section-nav__progress[hidden] { display: none; } .bppm-section-nav__progress-bar { display: block; height: 100%; border-radius: 999px; background: var(--wp--preset--color--bhp-green, #247B4E); } /* G6 peek: while the row scrolls it stops 20px short, so the last visible tab is always partly cut off instead of landing flush on the edge. */ .bppm-section-nav__row > .bppm-section-nav__list.has-peek { margin-inline-end: 20px; }