/** * Bonza, homepage template. 23 content sections under the hero banner. * * Config investigated: checked Blocksy Customizer General > Colors (8-slot * palette), Typography, Buttons and Forms sections plus Companion Pro's * Header/Footer Builder before writing any of this. None of those screens * can express this page's per-section background bands (cream/green/white * alternating full-bleed rows), the multi-column card grids with per-card * accent borders, the horizontal-scroll product/review rows, or the * gut-organ accordion grid, none of that maps to a global Customizer * setting, it is unique page layout, so it is built as block content * (core/group, core/columns, core/details, core/buttons) with this CSS * providing the layout/spacing/color the blocks alone cannot express, the * same pattern already used by footer.css and checkout-header-footer.css * on this site. The homepage content itself lives in the page's block * editor (post_content), portable per this project's scope note, not * hardcoded here. This file is presentation only, no markup. * * Every color below resolves through var(--wp--preset--color--bhp-*, hex), * generated by the wp_theme_json_data_theme palette entries registered in * homepage/homepage.php, so editor palette changes cascade (Gate 2/3: * editor matches frontend). The hex after the comma is only the fallback * if that filter is ever removed. add_editor_style() loads this same file * into the block editor. * * Figma: cY9QX6IwGVaaGI4r7J2RRF (Bonza Dog), "Content Homepage" component * set 20121:99698, instance 34457:304330 inside Home Page - D 21316:76923 * (desktop 1512), Home Page - T 23310:35537 (tablet 744), Home Page - M * 23313:52672 (mobile 428). Button states from component set "Button" * 29049:58925: enumerated Default / Hover / Disabled, each x Primary * (yellow FFC125, hover coral FF6256) / Secondary (green 247B4E, hover * yellow FFC125) / Outline (transparent border-green, hover fills white) / * Naked (bottom-border only), all Disabled at 60% opacity. ClickUp * 86eypb6m6. * * Colour tokens and font-family fallback chain otherwise follow the same * pattern already established by footer.css on this site (no site-wide * theme.json colour preset existed before this file, 86eyk8nqd "Design * foundations" is still in progress; Nominee/Kobe1.1 have no @font-face * anywhere on the site yet, open project-wide font question, see ClickUp * 86eypb6m6 "Fonts" section). * * Contrast pairs measured with the WCAG relative-luminance formula (not a * mockup color picker): black text on the FFC125 yellow button fill is * 12.91 to 1; white text on the 247B4E green button fill is 5.23 to 1 * (CORRECTED 2026-09-21, 86eyxb3yu: was cited 4.62 to 1, wrong math; still * passes AA either way); * black text on the FF6256 coral hover fill is 7.13 to 1 (CORRECTED * 2026-09-21, 86eyxb3yu: was cited 8.02 to 1, wrong math -- this pairing * is not what ships anyway, see the ink-on-coral NOTE further down); the 247B4E green * outline-button label on the page's white/cream background is 5.23 to 1 on * white (CORRECTED 2026-09-21, 86eyxb3yu: was cited 4.62 to 1, wrong math; * contrast is symmetric so this is the same figure as the white-on-green * pairing above; still passes AA either way); * the 2E2A2A ink naked-button label on white is 14.18 to 1 (86eyv0k44 * GL-05 recompute, was 494545 at 8.35 to 1); the F8EDE3 * cream and 247B4E green section bands and the FFA825/FFC125/FF9572/6E5D84 * accent border strips are decorative fills, not text pairs, contrast-exempt * as backgrounds/borders rather than foreground-on-background text. All * measured text pairs clear WCAG 2.2 AA's 4.5 to 1 floor for normal text. * * @date 2026-08-27 */ .bhp-page { --bhp-cream: var(--wp--preset--color--bhp-cream, #F8EDE3); --bhp-green: var(--wp--preset--color--bhp-green, #247B4E); --bhp-ink: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white / 12.30:1 on cream naked-button labels (WCAG AA/AAA) */ --bhp-white: var(--wp--preset--color--bhp-white, #FFFFFF); --bhp-black: var(--wp--preset--color--bhp-black, #000000); --bhp-amber: var(--wp--preset--color--bhp-amber, #FFA825); --bhp-yellow: var(--wp--preset--color--bhp-yellow, #FFC125); --bhp-coral: var(--wp--preset--color--bhp-coral, #FF6256); --bhp-peach: var(--wp--preset--color--bhp-peach, #FF9572); --bhp-purple: var(--wp--preset--color--bhp-purple, #6E5D84); --bhp-taupe: var(--wp--preset--color--bhp-taupe, #6F683B); /* Missing from this branch until 2026-09-28 -- present on bc-sc-wt-86eypb6m6-waves-1790421531 (PR #940) since it introduced the S7 pill; without it `var(--bhp-callout-pink)` below resolved to nothing and the pill background rendered transparent. */ --bhp-callout-pink: var(--wp--preset--color--bhp-callout-pink, #FFEFEE); --bhp-heading-font: var(--wp--preset--font-family--bhp-heading, "Nominee", var(--theme-font-family, sans-serif)); --bhp-body-font: var(--wp--preset--font-family--bhp-body, "Kobe1.1", var(--theme-font-family, sans-serif)); /* Figma sets a handful of labels in Inter ExtraBold (800), a heavy geometric sans. Inter 800 is self-hosted (footer.css @font-face). Those labels had drifted to Kobe1.1, which ships 700 max, so they read lighter than the design. Use this token for every Figma "Inter 800" text node. */ --bhp-inter-font: var(--wp--preset--font-family--inter, "Inter", var(--theme-font-family, sans-serif)); font-family: var(--bhp-body-font); color: var(--bhp-ink); } .bhp-page h1, .bhp-page h2, .bhp-page h3, .bhp-page h4, .bhp-page h5, .bhp-page h6, .bhp-page .bhp-eyebrow, .bhp-page .wp-block-button__link { font-family: var(--bhp-heading-font); font-weight: 900; text-transform: uppercase; } .bhp-page h1 { font-size: 48px; line-height: 1; color: var(--bhp-green); } .bhp-page h2 { font-size: 36px; line-height: 40px; color: var(--bhp-green); } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): D above is exact (36px/40px). T-744 is 30px/36px and M-428 is 24px/32px, confirmed node-by-node on 2 separate H2s (sections 2 and 4); the previous mobile override (26px, no line-height) matched neither. Tablet had no override at all before, so it inherited the D value. */ @media (min-width: 768px) and (max-width: 1439px) { .bhp-page h2 { font-size: 30px; line-height: 36px; } } /* Figma "H6/bold" text style, ink default + Figma-green on section 8's own instance via `.bhp-biotics-h6`. RETAGGED (86eypb6m6, hp-fix-a): both headings were bare `
` skipping h3-h5 under the page's h2s, an axe heading-order violation; markup is now `

`, so this rule moved from the element selector to the two classes to keep the size. */ .bhp-page .bhp-gutcentre-card-h, .bhp-page .bhp-biotics-h6 { font-size: 18px; line-height: 20px; color: var(--bhp-ink); } .bhp-page .bhp-biotics-h6 { color: var(--bhp-green); } @media (max-width: 1439px) { .bhp-page .bhp-gutcentre-card-h, .bhp-page .bhp-biotics-h6 { font-size: 16px; line-height: 16px; } } .bhp-page p, .bhp-page li { font-family: var(--bhp-body-font); font-weight: 400; font-size: 18px; line-height: 24px; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): this was a flat 20px/1.2 (24px) at every width. Figma's D-1512 frame is 20px/24px, but T-744 and M-428 both read 18px/24px, the SAME 18px at tablet and mobile (line-height stays a constant 24px across all three, not scaling with font-size) -- confirmed node-by-node against 4 separate body paragraphs across 3 different sections (2, 5, 10), same values every time. Base above is now the T/M value (18px), with the desktop-only bump scoped to >=1440 (this project's D anchor), matching the same D-anchor convention already used for `.bhp-section`'s own padding fix. This is a global `.bhp-page p`/`li` rule, so it affects every section on the page, not only mine; flagged to hp-sec-b/lead since sections 11-20 were not re-verified against this new base by this branch. Any more specific selector (`.bhp-symptom-card p`, etc.) already overrides this and is unaffected. */ @media (min-width: 1440px) { .bhp-page p, .bhp-page li { font-size: 20px; } } /* GL-03: `.bhp-page .bhp-eyebrow` (0,2,0) must outrank `.bhp-page p` (0,1,1) or eyebrows inherit body-copy sizing (86eyv0k44). 86eypb6m6: Figma centres every eyebrow, so centred on the shared rule instead of per-section (the align-center utility + nth-of-type(9-17) overrides below now duplicate this -- left as-is to keep this diff one rule). */ .bhp-page .bhp-eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: var(--bhp-ink); display: block; text-align: center; margin-bottom: 4px; } @media (min-width: 768px) { .bhp-page .bhp-eyebrow { font-size: 14px; } } /* 86eypb6m6: Figma's tablet frame (744) sets every eyebrow to 14px, but the 14px step above starts at 768, so 744-767 rendered 12px (mobile size). Confined to that band so 320-743 (12px, mobile frame) and 768+ don't move. */ @media (min-width: 744px) and (max-width: 767px) { .bhp-page .bhp-eyebrow { font-size: 14px; } } /* 86eypb6m6 S02 "Does This Sound Familiar?": the eyebrow is a HUG-width text node at x:0 in Figma (Frame 2147229735 > "You're Not Imagining It", 34151:188839; y:0, H2 at y:32 = 16px gap at 428/744/1512), so it sits flush left with the H2 and intro. Its textAlignHorizontal:CENTER is inert on a hug box. Scoped by the unique `.bhp-symptom-row` child, so every other section's centred eyebrow above is untouched. */ .bhp-page > section:has(> .bhp-symptom-row) > .bhp-eyebrow { text-align: left; } /* "The Gut Sits at the Centre" text block (34213:84582) is Figma textAlignHorizontal:CENTER, unlike every other section's left-aligned header. Utility class rather than editing every block's own alignment. */ .bhp-align-center .bhp-eyebrow { display: block; text-align: center; } .bhp-align-center > h2 { text-align: center; } /* Figma itemSpacing is a flat px per section (16/12/22), but WP core's `:root :where(.is-layout-flow) > *` sets margin-top to 1.5em of the heading's own font-size instead. post_content is frozen, so these key off markup ALREADY live -- no new classNames. */ .bhp-page .bhp-eyebrow + .wp-block-heading { margin-top: 16px; } /* science_caught_up: pre-existing `.bhp-science-h2` class on the heading. Ties the rule above at (0,3,0); wins by coming after it. */ .bhp-page .bhp-eyebrow + .bhp-science-h2 { margin-top: 12px; } /* formulated_with_science: `.bhp-feature-row` is a later, non-adjacent sibling (hence `~`) and unique to this section. */ .bhp-page .bhp-eyebrow + .wp-block-heading:has(~ .bhp-feature-row) { margin-top: 12px; } /* reviews: `.bppm-reviews__widget` is the Feefo carousel's live-rendered wrapper (confirmed on host, not just the static shortcode tag). */ .bhp-page .bhp-eyebrow + .wp-block-heading:has(~ .bppm-reviews__widget) { margin-top: 12px; } /* planet_badges: heading directly followed by `.bhp-badge-row`. */ .bhp-page .bhp-eyebrow + .wp-block-heading:has(+ .bhp-badge-row) { margin-top: 12px; } /* transparency: heading directly followed by `.bhp-transparency-inner`. */ .bhp-page .bhp-eyebrow + .wp-block-heading:has(+ .bhp-transparency-inner) { margin-top: 22px; } /* one_gut_whole_dog: below 1024px, the 16px above is the only source of this gap. Above it, flex items don't margin-collapse, so the eyebrow's own margin-bottom:4px stacks with the flex gap:16px unless re-zeroed. */ @media (min-width: 1024px) { .bhp-onegut__copy .bhp-eyebrow { margin-bottom: 0; } .bhp-onegut__copy .bhp-eyebrow + .wp-block-heading { margin-top: 0; } } /* Photo band (34213:85237): the photo itself IS the section, no padding. !important: plain padding:0 loses to a WP core block-gap rule at equal specificity, leaking padding-top through (86eypb6m6 S03a). */ .bhp-section.bhp-gutcentre-photo { padding: 0 !important; line-height: 0; } .bhp-gutcentre-photo__img, .bhp-gutcentre-photo__pattern { margin: 0; } .bhp-gutcentre-photo__img img { display: block; width: 100%; height: auto; object-fit: cover; /* The uploaded media library file is 1920x1078, not the original 2448x1374 downloaded from Figma: WordPress's own resize-on-upload scaled it down to a max width of 1920px. Matched here and in the markup's width/height attrs to the REAL live file, confirmed via `wp eval getimagesize()` against the actual uploaded attachment, not the pre-upload source file (2026-09-10 audit). */ aspect-ratio: 1920 / 1078; } .bhp-gutcentre-photo__pattern { display: block; position: relative; width: 100%; height: auto; } .bhp-gutcentre-photo__pattern img { display: block; width: 100%; height: auto; /* CORRECTED (86eypb6m6 parity audit, hp-sec-a): this section's own two patterns are "Frame 2147229786 1"/"2" in Figma, the same shared torn-edge component instanced across sections 3/5/9/19, always 1512x129.32 at D (11.69:1), not the previously-declared 1959/120 (16.325:1) -- see the `.bhp-pattern-strip img` rule above for the full cross-section measurement and live-verification detail; the same reasoning applies here. */ aspect-ratio: 1512 / 129.32; object-fit: cover; } /* % margins track the strip's own aspect-ratio height at every width (86eypb6m6 S03a; -129.3125/1512 = -8.5524%). z-index:1 keeps the strip painted over the photo it now overlaps (hp-pr-review #968: the photo's in-flow layer otherwise covers it). */ .bhp-gutcentre-photo__pattern--top { margin-bottom: -8.5524%; position: relative; z-index: 1; } .bhp-gutcentre-photo__pattern--bottom { margin-top: -8.5524%; position: relative; z-index: 1; } /* Reusable torn-edge pattern strip (imageRefs a3d4bd6d.../91a5139...), the page's general section-transition texture, referenced by bonza_hp_pattern_strip(). Sits between two full-bleed .bhp-section bands with its own full-bleed break-out so there is no gap or side margin. */ .bhp-section-wrap { position: relative; } /* Now a
(Editor-Friendly Standard), not a bare , so the UA/theme figure margin (block-axis, typically 1em) needs zeroing explicitly, not just the horizontal break-out. */ .bhp-pattern-strip { display: block; position: relative; width: 100vw; margin: 0 calc(50% - 50vw); height: auto; } .bhp-pattern-strip img { display: block; width: 100%; height: auto; object-fit: cover; /* CORRECTED (86eypb6m6 parity audit, hp-sec-a): every torn-edge strip on this page traces back to the SAME Figma component ("Frame 2147229786", instances 1-11+), and every instance measures a constant 1512x129.32 at D / 744x63.63 at T / 428x36.61 at M (11.69:1) -- confirmed by walking the actual Figma child rectangle nodes inside sections 5 ("One Gut. Whole Dog.") and 9 ("The Eight Gut-Organ Axes"), both flanked by "Frame 2147229786 1"/"2" at these exact dimensions, and cross-checked against the standalone divider sections 3, 7 and 19 in the section index, all identical. The previously-declared 1920/84 here was measured against the real, already-uploaded bonza-hp-pattern-top-a.png/-bottom-a.png files via `wp eval getimagesize()` (2026-09-10 audit) and that measurement was correct for THOSE FILES, but the files themselves are the wrong export: half the intended height relative to their width versus what Figma actually draws. Re-pointing the CSS at the true ratio is safe with `object-fit: cover` regardless (verified live via a same-technique `page.evaluate` injection at 1440: the existing torn-edge artwork scales up and crops symmetrically left/right with no visible seam, repeat or distortion, just a taller and more pronounced wave -- see `strip-before-1440.png`/`strip-after-1440.png`), but the two PNGs should still be re-exported at the correct proportions and re-uploaded when possible so nothing is being cropped needlessly. */ aspect-ratio: 1512 / 129.32; } /* CORRECTED alongside the base rule above, same reasoning: this section's own bottom strip (bonza-hp-pattern-science.png) traces to Figma node 34241:136210, also 1512x129.32 at D, not the previously-declared 1920/118 (measured against the real uploaded file, which is the same class of under-height export as the reusable pair above). */ .bhp-pattern-strip--science img { aspect-ratio: 1512 / 129.32; } /* `.bhp-pattern-strip--nutrition-biotics` (Figma "Frame 2147229786 4", I...;34765:80362) is live, rendered by bonza_hp_biotics_triad(). No dedicated rule needed here -- it inherits ratio/margin from the shared `.bhp-pattern-strip img` and `--top` rules. */ .bhp-pattern-strip--top { margin-bottom: -1px; } .bhp-pattern-strip--bottom { margin-top: -1px; } /* Planet Band's own internal strip (86eypb6m6, Sec17 photo-panel gap): sits above the green band the same way `--top` does elsewhere on this page, so it takes the same raw/un-flipped orientation per the audit comment below -- the native green-on-bottom half already matches the band it leads into. Needs both edges tucked (photo above, band below). */ .bhp-pattern-strip--mid { margin-top: -1px; margin-bottom: -1px; } /* FIX (86eypb6m6): this strip's asset is ~44% solid white padding before the wave starts, and the base rule's height-driven `cover` shows that padding untouched -- a detached white slab between photo and band. Force width-driven cropping so only the wave + green tail shows. */ .bhp-pattern-strip--mid { aspect-ratio: 1512 / 129.32; overflow: hidden; } .bhp-pattern-strip--mid img { position: absolute; left: 0; bottom: 0; width: 100%; height: 180%; aspect-ratio: auto; object-fit: cover; } /* Lifestyle photo (Figma node 34259:225227, "good environment", 1512x846.97 / 744x416.76 / 428x239.75 -- a constant 1.785:1 at every breakpoint, so one aspect-ratio covers all three -- scaleMode FILL). Full-bleed like `.bhp-pattern-strip` above, same break-out technique. */ .bhp-planetband-photo { display: block; position: relative; width: 100vw; margin: 0 calc(50% - 50vw); height: auto; } .bhp-planetband-photo img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 1512 / 846.97; } /* 86eypb6m6 visual audit (17 Sep): the reusable pair's two source PNGs (bonza-hp-pattern-top-a.png = imageRef a3d4bd6d..., -bottom-a.png = imageRef 91a5139...) each have the SAME native orientation baked in -- the green half always sits in the file's own BOTTOM half, sky colour (white or cream) in the TOP half (confirmed by pixel sampling both PNGs, green starts ~y50 of 84). Figma's own node transforms (relativeTransform matrices pulled from every 34215-, 34241- and 34323-prefixed instance on the 1512 desktop frame, nodes-1.json) never rotate either file; they only ever mirror it about the horizontal axis (a=-1,d=1, left-right only, no vertical component) when the strip sits ABOVE a green band -- where the file's native green-on-bottom already matches the band immediately below -- and flip it about the vertical axis (a=1,d=-1, scaleY) when the strip sits BELOW a green band, so the native green-on-bottom becomes green-on-top and touches the band above it instead. This build applies neither transform: every strip renders raw and un-flipped regardless of which side of the band it is on. Above a green band that coincidentally still looks right; below one it does not -- the strip's sky-colour half touches the green band it should be flush against, and its green half spills into the next section instead. That mismatch holds regardless of which of the two `top`/`bottom` named variants a given call site uses: bonza_hp_formulated_with_science() deliberately swaps the labels (its own code comment: "the pair's usual order is reversed here") to get the right raw file on each side, and Figma's transform for that swapped instance still calls for the scaleY flip on the strip trailing the band even though it carries the `--top` class there. A structural sibling selector -- any pattern-strip figure that is the very next element after a `.bhp-band-green` section -- catches every one of these regardless of which named class it carries, with no markup change: One Gut Whole Dog's bottom strip, the Eight Gut-Organ Axes' bottom strip, Full Transparency's bottom strip, Formulated With Science's swapped `--top`-classed trailing strip, and A Good Reason to Stay's bottom strip. Verified live at https://bonza-retheme.blz.au/ after applying: all five now show green flush against the band above and cream/white flush against the section below, torn edge in between. */ .bhp-band-green + .bhp-pattern-strip { transform: scaleY(-1); } /* FIX (86eypb6m6): One Gut's trailing strip is a DEDICATED asset, sampled native green-top/cream-bottom (opposite of the reusable pair above), so it is already correct here -- the inherited flip adds a second green band before the cream Nutrition section. */ .bhp-onegut + .bhp-pattern-strip { transform: none; } /* The science pair (bonza-hp-pattern-science.png, imageRef 021f5d95...) is reused unmodified for two roles: the science section's own bottom edge (cream above, white below -- Figma applies only the horizontal-only mirror there, no flip, because the raw file is already cream-top/white-bottom, matching as-is) and the routines section's top edge (white above, cream below -- Figma applies a scaleY flip there, same relativeTransform check, because the un-flipped file would put white on the wrong side of that join). Only the second role needs fixing; scoping to `--top` here (not the sibling selector above -- this strip never sits next to a `.bhp-band-green`) leaves the science section's own correct-as-built bottom strip untouched. */ .bhp-pattern-strip--top.bhp-pattern-strip--science { transform: scaleY(-1); } /* One Gut Whole Dog side photo (Figma 34215:174747, 370.37px tall, 24px radius). Section itself becomes a row on desktop (copy | photo). */ .bhp-onegut { display: flex; flex-direction: column; gap: 32px; } /* 86eypb6m6 audit: every text node in this section (34215:174081/82/83, 34755:69380, 34215:174735) is bound to a cream fill (#F8EDE3), not the pure white `.bhp-band-green` sets as its default foreground for every other green band on the page. Confirmed as a real, per-section choice and not a rendering artifact: the fill is a bound Figma variable, not a loose hex, and a different green section ("Formulated With Science. Not Marketing.", 34241:139880) IS pure white on the same fresh export, so this is not the shared rule being wrong. Needs its own selector rather than editing `.bhp-band-green` (would recolor the 5 other green sections). Compound `.bhp-section.bhp-onegut` for the base text color to beat `.bhp-band-green`'s own (0,1,0) on specificity regardless of source order; `h2`/`.bhp-eyebrow` need their own line since `.bhp-band-green h2` / `.bhp-band-green .bhp-eyebrow` are themselves compound selectors that would otherwise still win. */ .bhp-section.bhp-onegut { color: var(--bhp-cream); } .bhp-section.bhp-onegut h2, .bhp-section.bhp-onegut .bhp-eyebrow { color: var(--bhp-cream); } .bhp-onegut__img { margin: 0; } .bhp-onegut__img img { display: block; width: 100%; height: auto; border-radius: 24px; object-fit: cover; } @media (min-width: 1024px) { .bhp-onegut { flex-direction: row; align-items: center; /* Figma's D row gap is 64px, not the 32px column gap above (that value is mobile/tablet-only); the 32px carried through unchanged into this row layout and undersized the photo column as a result. */ gap: 64px; } /* Copy lives in one .bhp-onegut__copy wrapper (not loose direct children) so this is a real 2-column row: copy | photo, not one flex item per paragraph. */ .bhp-onegut__copy { flex: 1 1 50%; display: flex; flex-direction: column; gap: 16px; } .bhp-onegut__img { flex: 1 1 50%; align-self: stretch; } .bhp-onegut__img img { height: 100%; } } /* "The Gut Sits at the Centre" (34761:78405): 2 cards left, circular icon diagram center, 2 cards right, wrapping below 1024px. */ .bhp-gutcentre-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; width: 100%; } .bhp-gutcentre-col { display: flex; flex-direction: column; /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, team-lead follow-up): a column-aware live measurement (group cards by LEFT edge instead of top edge, since a 2-column layout puts no two cards on the same row) read 44px between the 2 stacked cards in each column, against Figma's confirmed 22px (`Frame 2147229905`, identical at D/T/M). The bulk of that 44px was the SAME "phantom block spacing" bug already diagnosed and reset for every other card row on this page (Blocksy's own `margin-block-end` surviving on a stretched flex child) -- the reset list below only ever covered `.bhp-gutcentre-row > *` (the 2 COLUMNS), never `.bhp-gutcentre-col > *` (the CARDS one level deeper), so this particular nesting slipped through. Declared gap was already 20px, not 22px, a real but smaller second delta; corrected here too. */ gap: 22px; flex: 1 1 300px; max-width: 360px; } .bhp-gutcentre-card { background: var(--bhp-white); border: 1px solid var(--bhp-yellow); border-radius: 24px; padding: 32px; box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.04); text-align: left; } /* FIX (visual audit vs Figma, 86eypb6m6): the fifth card, "The Effects Can Show Up Elsewhere", is a direct child of the section rather than of the flanking columns, so it stretched the full 1312px content width where Figma draws it at 497px centred under the diagram. Capped and centred; the cap is inert below 497px, so mobile keeps the full column. */ .bhp-page > section > .bhp-gutcentre-card { max-width: 497px; margin-inline: auto; } .bhp-gutcentre-card h6 ,.bhp-gutcentre-card h3 { margin: 0 0 8px; } .bhp-gutcentre-card p { margin: 0; } /* Circular diagram (34761:78417). FIX (visual audit vs Figma, 86eypb6m6): the section rendered TWO offset copies of the five-circle cluster. `bonza-gutdiagram-center.png` is not the bare ring this block was written against; pulled off the live host and viewed on its own, the 676x704 asset is the COMPLETE diagram, pentagon backdrop, centre gut and all five labelled icon circles, and on its own it matches Figma. The five absolutely-positioned `__badge` spans layered a second set of circles on top at a different radius, which is the doubled "BALANCE / ..LANCE" and "BACTERIA / BAC.." seen on the deployed page. The badges are hidden visually rather than deleted, because the image carries `alt=""` and its labels are baked into the raster: dropping the spans outright would take those five words out of the accessibility tree as well as off the screen. Hidden this way a screen reader still reads balance, bacteria, immune, body, health. With the badges gone the box holds the whole diagram, so it takes the whole diagram's Figma size: 324 x 339 measured off the rendered desktop frame, against the 248 x 248 this had, and the aspect ratio comes from the asset itself so the box never letterboxes it. */ .bhp-gutcentre-diagram { position: relative; width: clamp(240px, 24vw, 324px); height: auto; aspect-ratio: 676 / 704; flex: 0 0 auto; margin: 48px 0; } .bhp-gutcentre-diagram__ring { display: block; width: 100%; height: auto; object-fit: contain; } /* 86eypb6m6 audit: was two same-selector blocks. clip-path:inset(50%) clips this to zero visible area either way, so the later block's flex/width/border/background never painted a pixel; merged to one. */ .bhp-gutcentre-diagram__badge { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; background: none; box-shadow: none; aspect-ratio: auto; } .bhp-gutcentre-diagram__badge img { width: 42%; height: auto; } .bhp-gutcentre-diagram__badge em { font-style: normal; /* Figma specs Inter/800 for this label; Inter is self-hosted at 800 (footer.css), so it can be used here instead of the Kobe1.1 stand-in. */ font-family: var( --wp--preset--font-family--inter, "Inter", var( --theme-font-family, sans-serif ) ); font-weight: 800; /* Corrected (86eypb6m6 hp-audit-a): node data across every badge label (Balance/bacteria/immune/body/health) reads 10px/16px fixed, not the 8px/unitless-1 this shipped with. */ font-size: 10px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bhp-ink); } /* Offsets as a percentage of the 248px ring box (Figma raw px / 248). */ .bhp-gutcentre-diagram__badge--balance { left: -2.8%; top: -14.8%; } .bhp-gutcentre-diagram__badge--bacteria { left: 62.9%; top: -14.8%; } .bhp-gutcentre-diagram__badge--immune { left: -15.3%; top: 41.7%; } .bhp-gutcentre-diagram__badge--body { left: 76.6%; top: 41.7%; } .bhp-gutcentre-diagram__badge--health { left: 30.6%; top: 82.8%; } /* FIX (visual audit vs Figma, 86eypb6m6): the "One Gut. Whole Dog." copy column ran at roughly double Figma's vertical rhythm. Measured gaps between the five blocks were 74, 36, 46 and 46 against a uniform 16 in the design (eyebrow -10627, heading -10595, then -10539, -10499, -10435 in the pinned export, each block sitting exactly 16px below the one above). The column already declares `gap: 16px`; what it did not do was clear the theme's own block margins on its children, so every gap was the flex gap plus a stray margin. */ .bhp-onegut__copy > * { margin-block-start: 0; margin-block-end: 0; } /* ========================================================================== FIX (visual audit vs Figma, 86eypb6m6): section banding. A 24px SLIVER OF PAGE BACKGROUND BETWEEN EVERY SECTION. Sampling a 6px column down both edges of the deployed page and grouping the colour runs found rgb(250, 251, 252), the body's own background, showing in a 24px band at all sixteen section boundaries: 1058, 3578, 4172, 4258, 5020, 5663, 6342, 6428, 8461, 9251, 9338, 9862, 10599, 10685, 11104, 11477 and on. In Figma the bands butt straight against each other and the only thing between two of them is the torn-edge strip. The gap is the theme's block spacing again, this time on the sections themselves, so the cream, white and green bands never touch and every torn strip has a pale line under it. Zeroing it closes all sixteen and takes 384px off the page at 1440. SEVEN SECTIONS WERE NOT FULL BLEED. Every section frame in Figma is the full 1512 canvas width; the contents inside sit on the 1384 wide measure (or on the 1000 and 600 centred measures for section intros). Seven of the `.bhp-section-wrap` sections rendered at 1290 starting at x=75 on desktop and, worse, at 330 starting at x=23 on a 375 viewport, so their backgrounds and torn strips stopped short of both edges with the page background either side. Their own children were already breaking out to the full width, which is what made this read as a stray edge sliver rather than an obviously boxed section. Same alignfull break-out the hero already uses, so the technique is not new to this codebase. ========================================================================== */ .bhp-page > section { margin-block-start: 0; margin-block-end: 0; } .bhp-page > .bhp-section-wrap { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Section band backgrounds, alternating per Figma order */ .bhp-band-cream { background-color: var(--bhp-cream); } .bhp-band-green { background-color: var(--bhp-green); color: var(--bhp-white); } .bhp-band-green h2, .bhp-band-green .bhp-eyebrow { color: var(--bhp-white); } /* Tagline strong is cream, not this band's own white default, with a fixed 30px line-height at every tier. `:not(.bhp-section)` is the only bare `.bhp-band-green` on this page, so it stays off the rest. */ .bhp-band-green:not(.bhp-section) strong { line-height: 30px; color: rgb(248, 237, 227); } .bhp-band-white { background-color: var(--bhp-white); } /* "The Science Caught Up" (86eypb6m6 Figma-parity audit, section 8, node 34241:136183). This section's own eyebrow is amber (#FFA825, node 34241:138162), not the page-wide ink default set by `.bhp-page .bhp-eyebrow` above, confirmed against the refreshed cY9QX6IwGVaaGI4r7J2RRF export. Scoped to this section only via the `.bhp-science` marker class added in homepage/patterns/homepage.php, not a change to the shared eyebrow rule (would recolor the other 15 sections that DO use ink). */ /* REVERTED 2026-09-17, same day it was added, on measured evidence. Figma node 34241:138162 does specify amber for this eyebrow, and that is why the rule below was written earlier today. Deployed and then scanned with axe: amber #FFA825 on the section's own cream #F8EDE3 measures 1.67:1. At 14px/900 this is normal-size text and needs 4.5:1, so the rule shipped a WCAG 2.2 AA failure that did not exist before, on a project carrying AA as one of three contractual guarantees. Restoring the inherited ink, which measures 12.30:1 on the same cream. This is the same call already made on the footer copyright line, where the build deliberately diverges from a design value that fails contrast: match the design everywhere it is accessible, and report the design defect where it is not. Flagged to Vita for a corrected eyebrow colour; no replacement colour is invented here. Once a compliant amber is specified, re-add the rule with it. .bhp-science .bhp-eyebrow { color: var(--bhp-amber); } */ /* This h2's own size/colour (node 34241:136183, re-confirmed vs spec, not a wrong-node match) was losing live to `.bhp-page h2`'s higher specificity. Rescoped under `.bhp-page` to win (86eypb6m6, hpfix-b). */ .bhp-page .bhp-science-h2 { font-size: 20px; line-height: 28px; color: var(--bhp-ink); } @media (max-width: 1439px) { .bhp-page .bhp-science-h2 { font-size: 18px; line-height: 24px; } } @media (max-width: 767px) { .bhp-page .bhp-science-h2 { font-size: 16px; line-height: 20px; } } /* Two-column layout: white card (copy+stats+quote+CTA) left, photo right. Photo column collapses to a named empty slot until team-lead imports the located asset (see this function's own docblock). */ .bhp-science-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: 32px; } .bhp-science-card { flex: 1 1 480px; background: var(--bhp-white); border-radius: 16px; padding: 32px; box-sizing: border-box; } .bhp-science-card__photo { flex: 1 1 360px; min-height: 320px; /* 86eypb6m6 hp-thumbs2 radius audit: Figma node "image 677" (34241:138158) and its parent frame both carry radius:null at 1512/744/428 -- square corners by design, not the 16px this card inherited from the sibling .bhp-science-card rule's own radius. */ border-radius: 0; background-color: var(--bhp-cream); overflow: hidden; } @media (max-width: 767px) { .bhp-science-card__photo { min-height: 200px; } } /* splice-hp-rebuild.php now renders a real (attachment 145856, bhp-science-photo.jpg) inside this slot instead of the empty placeholder; fill/crop it to the card box rather than showing native 1024x617 size. min-height/background above are untouched so nothing changes until the splice script actually runs against bonza-retheme. */ .bhp-science-card__photo img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Amber left-border quote box (Figma node 34241:138181's containing frame); the quote text rule below is unchanged. */ /* Figma 34241:138180 (D/T/M): cream fill, 24px 18px padding, no radius, 1px amber inside-stroke on the left only. The stroke sits inside the 18px padding, so the CSS border takes 1px of it (17px + 1px border). */ .bhp-page .bhp-science__quote-box { background-color: var(--bhp-cream); border-left: 1px solid var(--bhp-amber); border-radius: 0; padding: 24px 18px 24px 17px; margin: 24px 0; } /* Figma's quote/tagline text style here (node 34241:138181) is Kobe1.1 Regular, not italic; this paragraph carries no , so no override is needed beyond matching the page's own p/li rule, kept only for the section-scoped hook other rules below can target. */ .bhp-science__quote { font-style: normal; } /* Figma 34259:219809: the S09 button is 346x48 with 12px 16px padding at D and M; the shared outline button pads 16px 24px, which made it 362 wide and 54 tall here. Scoped to S09 so the other outline buttons keep theirs. The 1px border is part of the 12px vertical padding. */ .bhp-science .bhp-btn-outline .wp-block-button__link { padding: 11px 15px; line-height: 24px; } /* Figma M428 (34259:219597): the S09 card pads 24px, so its content is 340px wide, and the 346px button hangs 6px past it into that padding. Live padded 32px (324px content), which forced the button to wrap. */ @media (max-width: 767px) { .bhp-science-card { padding: 24px; } .bhp-science .wp-block-buttons { margin-right: -6px; } } /* Figma body-run fill on the cream callout is #403A31 at D/T/M. */ .bhp-page .bhp-science__quote-box .bhp-science__quote { --bhp-quote-ink: var(--wp--preset--color--bhp-quote-ink, #403A31); color: var(--bhp-quote-ink); margin: 0; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2): the T-744/M-428 placed instances of this quote (node 34241:138181) bold + colour a middle clause ("the Biotics Triad, diverse plant fibres, PhytoPlus(R) and botanicals") -- see the new $quote_bold splice in bonza_hp_science_caught_up()'s own docblock for the exact character range and source. Base rule here carries the T/M treatment per this file's own D-anchor convention (no media = T/M default). NEEDS HUMAN -- DELIBERATE, OPERATOR-APPROVED DEVIATION, same pattern as the Button Naked hover note above: do not "fix" this colour back to Figma's raw measured value without reading this comment first. Figma's own placed value for this run is rgb(47,160,102) / #2FA066, not the site's --bhp-green token (#247B4E) -- measured 3.31:1 on white at 18px bold (NOT WCAG large text; bold only reaches the 3:1 threshold at 14pt/18.67px+, this run is 18px), failing the 4.5:1 normal-text floor. Bonza carries a contractual WCAG 2.2 AA guarantee, so the guarantee wins: swapped to the existing --bhp-green token, which measures 5.23:1 on white and passes. ACTION FOR DESIGN: confirm --bhp-green as the approved substitute, or supply an AA-passing exact value. */ .bhp-page .bhp-quote-highlight { font-weight: 700; color: var(--bhp-green); } /* D-1512 has no bold run (fontWeight uniform 400) but its fills are MIXED, i.e. the same phrase is coloured. The desktop export carries no per-run segments, so the green is taken from the T/M run and the weight stays 400 at 1440px and up. */ @media (min-width: 1440px) { .bhp-page .bhp-quote-highlight { font-weight: 400; color: var(--bhp-green); } } /* Stat row (Figma node 34241:138166): 3 fixed 196x110 cards, bg #247B4E, radius 13px, padding 24px top/bottom, 16px left/right, 12px gap. Card width is fixed at desktop (three cards fill the 612px copy column exactly: 3x196 + 2x12 = 612) but flexes below 768px so the row does not overflow narrow viewports; Figma's own tablet/mobile frames were not independently re-walked for this row so 768px/425px below follow the same stacking convention already used by `.bhp-symptom-row` above rather than a second Figma pull, flagged in the report for anyone re-auditing this section against T744/M428 directly. */ .bhp-stat-row { display: flex; gap: 12px; margin: 24px 0; } .bhp-stat-card { flex: 1 1 196px; max-width: 196px; background-color: var(--bhp-green); color: var(--bhp-white); border-radius: 13px; padding: 24px 16px; box-sizing: border-box; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): both rules below were plain single-class selectors (0,1,0) on a `

` element, so `.bhp-page p` (0,1,1) always won regardless of source order -- confirmed on the deployed page: "240"/"~half" rendered at 20px/400/Kobe1.1/none (the generic p default) instead of any of THIS rule's own declared values. Same specificity bug this file already fixed once for `.bhp-eyebrow` (see the GL-03 comment above); scoped under `.bhp-page` here for the same (0,2,0) fix. Figma is 18px/20px at D, 16px/16px at T and M (confirmed node-by-node on "240" and "~half", both frames). 86eypb6m6 residual audit: text-transform restored to Figma's own textCase=UPPER per explicit instruction ("~half" now renders "~HALF") -- font-family stays Kobe1.1/body-font, an accepted deviation, untouched. */ /* "240"/"25%"/"~half" (10:Frame 2147229920): figma font=Inter (Kobe1.1-accepted), build was Nominee/heading-font. */ .bhp-page .bhp-stat-card__value { font-family: var( --wp--preset--font-family--inter, "Inter", var( --theme-font-family, sans-serif ) ); font-weight: 800; font-size: 18px; line-height: 20px; color: var(--bhp-white); margin: 0; text-transform: uppercase; } @media (max-width: 1439px) { .bhp-page .bhp-stat-card__value { font-size: 16px; line-height: 16px; } } .bhp-stat-card__value--arrow { display: flex; align-items: center; gap: 4px; } .bhp-stat-card__arrow { width: 24px; height: 24px; flex: none; } .bhp-page .bhp-stat-card__caption { font-size: 14px; font-weight: 700; line-height: 16px; color: var(--bhp-white); margin: 0; } @media (max-width: 767px) { .bhp-stat-row { flex-direction: column; } .bhp-stat-card { max-width: none; } /* Caption text (10:Frame 2147229920): figma M=12, D/T=14. */ .bhp-page .bhp-stat-card__caption { font-size: 12px; } } /* 86eypb6m6 S09 "The Science Caught Up" (q55 + q56), Figma Sign-Off D/T/M nodes 34241:138162 (eyebrow), 34241:138166 / 34259:219900 (stat cards). q55 eyebrow: the shared `.bhp-page .bhp-eyebrow` rule centres every eyebrow, but in this section Figma sets a hug-width text at x=0 of the left-aligned header stack, so it sits on the H2/paragraph left edge. Colour is #AB6600, not Figma's #FFA825 (D/T/M). Size 14px at D and T, 12px at M; 900, letter-spacing 2%, line-height 16px are already correct on the base rule. NOTE: the eyebrow sits on the white .bhp-science-card (measured rgb(255,255,255)). #FFA825 there is 1.93:1, below WCAG AA 4.5:1, so it is darkened to the same-hue (HSL 36deg, 100% sat) #AB6600 = 4.53:1. Deliberate AA deviation from Figma, reported to QA (see PR body). q56 stat cards: Figma cards are a centred flex column (padding 24/16, number->label gap 6px, radius 13). The number sits in a 24px-tall box at every width (line-height 20/16 inside it), which is what makes the D card 110px and the stacked T/M cards 94px. Live left-aligned the text and had no gap. The stacked layout (<=767) also let `flex: 1 1 196px` apply to the column's HEIGHT (196px cards), so the basis is reset there. */ .bhp-page .bhp-science .bhp-eyebrow { text-align: left; color: #AB6600; /* 4.53:1 on white; Figma #FFA825 is 1.93:1 */ } @media (max-width: 599px) { .bhp-page .bhp-science .bhp-eyebrow { font-size: 12px; } } @media (min-width: 600px) { .bhp-page .bhp-science .bhp-eyebrow { font-size: 14px; } } .bhp-page .bhp-science .bhp-stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; } .bhp-page .bhp-science .bhp-stat-card__value, .bhp-page .bhp-science .bhp-stat-card__caption { text-align: center; margin: 0; } .bhp-page .bhp-science .bhp-stat-card__value { min-height: 24px; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .bhp-page .bhp-science .bhp-stat-card { flex: none; width: 100%; } } @media (min-width: 600px) and (max-width: 767px) { .bhp-page .bhp-science .bhp-stat-card__caption { font-size: 14px; } } .bhp-section { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 64px; padding-bottom: 64px; padding-left: max(64px, calc((100vw - 1512px) / 2 + 64px)); padding-right: max(64px, calc((100vw - 1512px) / 2 + 64px)); box-sizing: border-box; } /* `.bhp-section-wrap:where(:has(> .bhp-planetband-photo))` (the S16 outer

; matches existing markup on all 5 locales, 86eypb6m6): position-based nth-of-type broke across locale/section-order changes, so this and every other S16 rule below key off that class instead. Figma wants 20px top here, not the base 64px. */ .bhp-section-wrap:where(:has(> .bhp-planetband-photo)) .bhp-band-green { padding-top: 20px; } /* CORRECTED (86eypb6m6 parity audit, team-lead assignment): the base rule above is the D-1512 default (64px all sides); Figma's own T-744 frame uses 24px on EVERY side for every section that follows the general pattern (walked node by node: sections 2, 5's inner band, 6, 8, 9's inner band all read T pad 24/24/24/24 against D's 64/64/64/64), not a flat 64px carried down from desktop. Re-measured left/right specifically (not just top/bottom): the base rule's own `max(64px, calc((100vw - 1512px) / 2 + 64px))` formula resolves to a flat 64px for ANY viewport under 1512 (the calc term goes negative and max() always picks 64px), so side padding was ALSO stuck at the desktop value through the entire 768-1439 range, confirmed live via the cached build snapshot at 768 and 1024 (both showed "64px 64px 64px 64px", not "24px" on any side). Scoped to 744-1439px so it sits strictly between the mobile rule below and the D-anchor default above; nothing assumes an intermediate value at 1024, since Figma has no dedicated 1024 frame and the project's own D-to-1024 interpolation note only covers content WIDTH, not padding, a flat T value across the whole tablet range is the simplest defensible reading and avoids inventing an unspecified interpolation formula. The two sections whose top/bottom padding is NOT the general D/T/M-scaling pattern (Gut Sits at the Centre's 20px top, Science Caught Up's 0 top/bottom) are unaffected: both are confirmed CONSTANT across all three Figma frames on TOP/BOTTOM only, their LEFT/RIGHT padding follows the same general 64/24/20 pattern as everything else, so the existing `:nth-of-type` overrides below (unconditional from 768px up, top/bottom only) remain correct at both this same tablet range and desktop without any change. */ @media (min-width: 744px) and (max-width: 1439px) { .bhp-section { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } } @media (max-width: 743px) { /* CORRECTED alongside the tablet rule above: Figma's M-428 frame is 20px top/bottom for the same general-pattern sections (confirmed node-by-node), not the previously-declared 32px (that value matched no measured Figma frame at any width). Side padding at this breakpoint was already 20px and is unchanged. 86eypb6m6 (PR #947, live re-verify): ceiling narrowed from 767 to 743 -- same-specificity as the shared tablet tier above (now min-width:744), and this rule's later source position was winning the 744-767 overlap, confirmed live (computed padding read 20px at 744 instead of 24 before this split). h1/h2 sizing moved to its own <=767 block below, unaffected. */ .bhp-section { padding-top: 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; } } @media (max-width: 767px) { .bhp-page h1 { font-size: 32px; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): Figma's M-428 H2 is 24px/32px (confirmed node-by-node), not the previous 26px with no line-height override. */ .bhp-page h2 { font-size: 24px; line-height: 32px; } } /* FIX 5 + S08 744-767 overrides REMOVED (86eypb6m6, PR #947, team-lead sweep): both scoped this exact 24/24/24/24 value to 744-767 only, pending a check of whether the shared .bhp-section tablet tier (above) should widen from 768 to 744. Every T-744 section-padding node in tablet-744.jsonl reads a uniform 24/24/24/24 -- no section differs -- so the tier above now starts at 744 and covers both cases; these two :has() overrides are redundant with it. */ /* HM-14 (86eypb6m6 parity audit): the base .bhp-section rule above is a flat 64px-all-sides desktop default, but Figma gives each of the 16 homepage sections its own vertical padding (left/right stay 64px on every one, so only padding-top/bottom need a positional exception here). Source of truth: reference/figma-context/manifest.json, Home Page - D 21316:76923, walked node by node per section (each section's Figma id is already recorded next to its markup in homepage/patterns/homepage.php). Live post_content is frozen (BLK-01) with none of the wrapper/utility classes the current pattern file has grown since, so every section here is still a plain sibling `.bhp-section.bhp-band-*`, addressable only by document position; that position is stable (content order, not something an editor reorders casually) and is exactly what was walked against the live DOM to pick these indices, so nth-of-type is the correct, lowest-risk selector without touching post_content. One rule per distinct padding value, not one per section, so this stays a single source-of-truth fix: #2 "The Gut Sits at the Centre" (34213:84581) -> 20px top #8 "The Science Caught Up" (34241:136183) -> 0 top/bottom (CORRECTED 86eypb6m6 PR #947, team-lead spacing.md sweep: this row originally read "#7". Ledger grep confirms node 34241:136183 belongs to Frame 2147229920 (order9, "The Science Caught Up" heading), which is live DOM position 8 ("The Most Significant Mapping..." subheading), not position 7 ("The Eight Gut-Organ Axes"). Position 7 has no Figma override at all -- its own nested padding node (Frame 2147229895 under Frame 2147229901) reads a plain 64/64/64/64 (D) / 24/24/24/24 (T) / 20/20/20/20 (M), exactly the base tier with no exception. The rule below was firing on #7 instead of #8 the whole time: #7 was wrongly zeroed and #8 never got its real 0/0 override. Fixed selector moved to the unconditional block further down -- idx8's own nested node (Frame 2147229898 under Frame 2147229920) reads pad_t/pad_b=0 at all 3 breakpoints, not just desktop; pad_l/pad_r already scale correctly via the base tier since the drilled-into child carries class bhp-section.) #12 "The Founder" (quote) (34241:145502) -> no override, base tier applies #13 "What Owners Are Saying" (Reviews)(34347:192683) -> 32px top/bottom #14 "Feed Your Dog Well..." (green) (34241:157916) -> 20px top #15 "Our Responsibility" (badge row) (34323:190186) -> 32px top/bottom #16 "Good Questions" (FAQ, green) (34323:194305) -> 32px top/bottom All 9 unlisted sections keep the base rule's 64px-uniform default, which already matches Figma for those. Scoped to min-width:768px only: the audit's figma_expected values are D1512-sourced, mobile/tablet's own per-section scale (20px/24px-all vs today's flat 32px/20px) is a separate, not-yet-scoped delta, left untouched here to avoid changing 9 sections' mobile spacing on a fix this item never asked for. TODO(BLK-01 regen): every :nth-of-type selector in this file and the HM-13 rule below assumes the current 16-section live post_content order. The moment BLK-01 is resolved and post_content is regenerated from the pattern file, re-walk that order (the pattern file has since grown extra wrapper sections, e.g. bhp-gutcentre-photo, that are not live yet) and update or replace these positional rules; a regen will not error, it will just silently point these rules at the wrong sections. Tracked in ClickUp 86eypb6m6. */ @media (min-width: 768px) { .bhp-section:nth-of-type(2) { padding-top: 20px; } /* Positions 8/13/15/17 are -wrap: their outer
lacks class bhp-section, so a plain .bhp-section:nth-of-type(n) form matches nothing there -- drill into the inner .bhp-section child instead. idx8's own override now lives, unconditional, with idx13/17 below, since its Figma node reads 0/0 top/bottom at every breakpoint. */ /* Founder (idx12) needs no override at all: its Figma node is uniform 64/64/64/64 (D) / 24/24/24/24 (T) / 20/20/20/20 (M) on every side, exactly what the base .bhp-section tier already produces here -- forcing 64px vertical from 768px mismatched Figma's 24px tablet range, so the override is gone and this falls through to base. */ } /* idx8 "The Science Caught Up" pins top/bottom to 0 at every width -- its Figma node reads 0/0 at D/T/M alike, so this stays unconditional rather than gated to a breakpoint. */ section:nth-of-type(8) > .bhp-section { padding-top: 0; padding-bottom: 0; } /* 86eypb6m6 (round 4, team-lead 744 sweep): S13/S14/S16 ledger-confirmed 32/32 top+bottom at T-744 (nodes 34306:180165, 35066:65510, 34323:190187), not just 768+. S12 needs no override -- its T-744 node reads the plain 24/24 tablet base. */ /* FIX (PR #947 final sweep): S13/S14/S16's M-428 nodes also read pad_t/pad_b=32 -- live had no override below 744px (plain 20/20). These 3 rules move out of the min-width:744px gate, now apply unconditionally. */ section:nth-of-type(13) > .bhp-section { padding-top: 32px; padding-bottom: 32px; } .bhp-section:nth-of-type(16) { padding-top: 32px; padding-bottom: 32px; } /* section-audit-b: RealExperiences (S15, idx13) measured 20/64 (inherited from the nth-of-type(2) rule + base), Figma spec is symmetric 32/32; carved out of the nth-of-type(2) group above. */ .bhp-section:nth-of-type(14) { padding-top: 32px; padding-bottom: 32px; } /* FIX (PR #947 final sweep): FAQ "Your Questions Answered" (idx17, self=no/wrap) has NO padding override today, so it sits on the plain base tier everywhere. Figma's Container node pins top/bottom to 32 at every width; left/right keep following the base-tier scale. */ section:nth-of-type(17) > .bhp-section { padding-top: 32px; padding-bottom: 32px; } @media (min-width: 744px) { /* 86eypb6m6 (round 4b, task-2 Figma walk): idx3 "The Gut Sits at the Centre" (desktop-1512.jsonl:161, tablet-744.jsonl:186, mobile-428.jsonl:185, node "Frame 2147229851") specs a constant 20px top padding at every width from 744 up -- pad_r/b/l follow the normal base-tier scale, only pad_t is pinned to 20. Live had no override, so top was scaling with the base tier (24/64) instead of staying at 20. */ .bhp-section:nth-of-type(3) { padding-top: 20px; } } /* HM-13 (86eypb6m6 parity audit), CORRECTED (sec-low pass, sections 10-16 re-audit): the rule below originally read `.bhp-section:nth-of-type(11)`, reasoned as "the 11th .bhp-section", but :nth-of-type counts by TAG across ALL siblings sharing that tag, not by class -- and every top-level child of .bhp-page is a
regardless of whether it carries class bhp-section or bhp-section-wrap. The 11th section-tag sibling (0-indexed section 10, "Formulated With Science") is a .bhp-section-wrap, which lacks class bhp-section, so the compound selector matched nothing at all: a dead rule, confirmed live (target.matches('.bhp-section:nth-of-type(11)') === false for "The Founder"; matches('.bhp-section:nth-of-type(12)') === true instead). "The Founder" has been rendering the default cream background this entire time instead of Figma's white (34241:145502, rgb(255,255,255)). Corrected index to 12, re-verified live: matches uniquely, background now white at 1440/768/375, no other section affected. Rest of the original HM-13 reasoning (why band-cream/band-white can't be edited directly, why this needs a positional exception) still holds. */ .bhp-section:nth-of-type(12) { background-color: var(--bhp-white); } /* "Does This Sound Familiar?" symptom cards. CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, team-lead follow-up, 2nd pass): the immediately-prior fix in this file's history (removing the old ">=1024px switches to a 4-up CSS Grid" rule outright) was itself incomplete -- it made every breakpoint scroll, but Figma's OWN D-1512 frame shows all 4 cards with NO scroll: 4x334 + 3x16 = 1384, which exactly fills the 1512-canvas's 1384px content width. This section's own `.bhp-section` base rule caps real content width at 1384px for any viewport >=1512px (`padding-left/right: max(64px, calc((100vw-1512px)/2 + 64px))`), so >=1512 genuinely has room for 4 fixed 334px cards with zero leftover -- only the 1440-1511px sliver (this project's own D-anchor threshold, narrower than Figma's actual 1512 canvas) does not. Required behaviour, per team-lead: below 1440 (T/M) keeps the fixed 334px card + horizontal scroll (matches the T/M frames, which are genuinely narrower than their own content). >=1440 needs every card visible with no scroll: `flex: 1 1 0; max- width: 334px` lets each card grow/shrink to fill the available row width (316px at exactly 1440, growing toward the 334px cap as the viewport widens toward 1512) and hard-caps at Figma's real 334px from 1512 up to and including 2560 (where `.bhp-section`'s own max-width keeps the row's content area pinned at 1384px, so the 4 capped cards fill it exactly with no leftover space to centre). */ .bhp-symptom-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; } /* Section rhythm vs Figma Frame 2085664920 (86eypb6m6 audit L02): H2 -> intro 16 (was the theme's 0.52em: +4.8 at D, +3 at T, +1.2 at M), the 285px card row -> closing line 28 (the row's own 8px scroll padding + 20), and no phantom 22px under the closing line (it is the last child; Figma's 22 is the header->row gap only). Gives 599 / 539 / 607 at D / T / M. */ .bhp-page > section:has(> .bhp-symptom-row) > h2.wp-block-heading { margin-bottom: 16px; } .bhp-page > section:has(> .bhp-symptom-row) > .bhp-symptom-row { margin-bottom: 20px; } .bhp-page > section.bhp-section:has(> .bhp-symptom-row) > p.wp-block-paragraph:last-child:not(.bhp-eyebrow) { /* beats .bhp-section:nth-of-type(1) > p:not(.bhp-eyebrow) */ margin-bottom: 0; } .bhp-symptom-card { flex: 0 0 334px; background: var(--bhp-white); border-radius: 8px; padding: 28px; /* Figma Frame 2147229722 (and its three siblings) is a fixed 285px tall at D1512, T744 and M428 alike (86eypb6m6 audit L02). */ min-height: 285px; box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.04); } @media (min-width: 1440px) { .bhp-symptom-card { flex: 1 1 0; /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, team-lead follow-up, 3rd pass): hp-audit-build's live measurement at 1440 (the one width this fix doesn't hard-cap to 334px) found uneven widths -- 2 cards pinned at 334, the other 2 squeezed to 294-301 -- even though the 1312px/4 = 316px-each math is right. Root cause: a flex item's default `min-width: auto` measures its OWN content's intrinsic minimum width, which can exceed `flex-basis: 0`'s computed 316px share for whichever card has the longest quote text, so THAT card refuses to shrink below its own text's width and the shorter-text cards absorb the shortfall instead of splitting it evenly. `min- width: 0` overrides that default, letting every card actually reach its equal computed share regardless of content length (the card's own text still wraps inside the fixed 28px padding either way, nothing is lost). */ min-width: 0; max-width: 334px; } } /* ========================================================================== FIX (visual audit vs Figma, 86eypb6m6): phantom block spacing inside every horizontal card row on this page. Figma draws each row's cards flush top and bottom. The build rendered the last card in every row taller than its siblings, at every breakpoint: .bhp-symptom-row 250, 250, 250, 274 .bhp-gutcentre-row 416, 248, 440 .bhp-onegut 379, 403 .bhp-axis-grid 76 x 7, then 100 .bhp-stat-row 120, 120, 144 .bhp-card-row 165 x 4, then 189 (class removed 2026-09-22) .bhp-feature-row 184, 184, 160 .bhp-transparency-row 212, 236 .bhp-review-row 109 x 4, then 133 The cards are not the problem. Blocksy applies the theme's block spacing as `margin-block-end: var(--theme-content-spacing)` to every child but the last, and inside a stretched flex or grid row that margin comes out of the child's own height rather than sitting below it. So every card except the last lost 24px of height, and each row ended up 24px taller than its content needed. Found by walking the page for flex/grid rows whose children have unequal heights and a non-zero `margin-block-end`, which returned all nine at once rather than one section at a time. Safe to zero in every case because each of these rows declares its own `gap` (32px, 12px, 16px, 20px, 12px, 24px, 16px), so the wrapped rows keep their vertical spacing from that and the margin was only ever duplicating it. Verified by injection: all four symptom cards come out at 250px at 1440, 768 and 375, and the row loses its spare 24px. CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, team-lead follow-up): the "CARD WIDTH BELOW 1024" override below this comment (28px gap / 320px card under 1024px) is REMOVED. A row-aware live gap measurement (grouping DOM siblings into rows by top edge, not a naive DOM-order vertical diff) found the symptom row's real horizontal gap reading 28px at T-768/M-375 against Figma's 16px, while D-1440 (unaffected by this override) already matched at 16px. Reading the raw Figma node data directly settles which one is right: `Frame 2147229724` (the actual 4-card row, one level inside the outer `Frame 2147229892` this file's prior comment mis-measured) carries `gap:16` and 334px-wide children at EVERY one of D/T/M's own frame exports, identical absolute pixel positions (x=0/350/700/1050) at all three -- confirmed this is a deliberate single 1384px-wide composition reused via horizontal overflow/scroll at every breakpoint (Figma's own frame is narrower than its content at T/M, same affordance this row's `overflow-x:auto` already implements), not three separately-authored sizes. The 319px/ 322px/28px figures the removed override cited were a measurement of the BUG's own rendered output, not of Figma. Base rule above (334px card, 16px gap) is already correct at every breakpoint now that this override is gone. ========================================================================== */ .bhp-symptom-row > *, .bhp-gutcentre-row > *, /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2, team-lead follow-up): `.bhp-gutcentre-col`'s own children (the 2 stacked cards in each of section 4's 2 columns) never got this reset -- only the ROW's direct children (the columns themselves) did. Same phantom- margin bug, one level deeper than this fix originally reached. See `.bhp-gutcentre-col`'s own comment above for the measured delta. */ .bhp-gutcentre-col > *, .bhp-onegut > *, .bhp-axis-grid > *, .bhp-stat-row > *, .bhp-feature-row > *, .bhp-transparency-row > * { margin-block-end: 0; } .bhp-symptom-card.bhp-accent-green { border-left: 3px solid var(--bhp-green); } .bhp-symptom-card.bhp-accent-coral { border-left: 3px solid var(--bhp-coral); } .bhp-symptom-card.bhp-accent-peach { border-left: 3px solid var(--bhp-peach); } .bhp-symptom-card.bhp-accent-purple { border-left: 3px solid var(--bhp-purple); } .bhp-symptom-card.bhp-accent-yellow { border-left: 3px solid var(--bhp-yellow); } /* The Figma stroke is strokeAlign INSIDE (left weight 3, others 0), so the 28px padding is measured from the outer edge: take the 3px border out of the left padding or every card's content sits 3px right of Figma (86eypb6m6 audit L02, text-left-x +2.6). */ .bhp-symptom-card[class*="bhp-accent-"] { padding-left: 25px; } /* Quote glyph above each symptom card's quote (Figma "Union" icon, 60% opacity, accent-colored). Inlined SVG with fill="currentColor" (same pattern bonza_hero_icon() already uses), colored per card via the accent-class `color`. */ .bhp-symptom-card__quote-icon { display: block; /* Figma "Union" (34213:83742) is 35.77x28.46 with its 1px stroke bleeding to a 37.04x29.46 render box; the 38x30 viewBox carries that bleed, so the element is the render box and the margins hand back the bleed (-0.5px each side) to keep the 28.46 layout box (86eypb6m6 audit L02: icon was 24x19). */ width: 37.04px; height: 29.46px; /* Figma Auto Layout itemSpacing is 16px between every child in this card (icon, quote, divider, body), not 8px (86eypb6m6 audit, node 34213:83741). */ margin: -0.5px 0 15.5px -0.5px; opacity: 0.6; } .bhp-symptom-card.bhp-accent-green .bhp-symptom-card__quote-icon { color: var(--bhp-green); } .bhp-symptom-card.bhp-accent-coral .bhp-symptom-card__quote-icon { color: var(--bhp-coral); } .bhp-symptom-card.bhp-accent-peach .bhp-symptom-card__quote-icon { color: var(--bhp-peach); } .bhp-symptom-card.bhp-accent-purple .bhp-symptom-card__quote-icon { color: var(--bhp-purple); } .bhp-symptom-card.bhp-accent-yellow .bhp-symptom-card__quote-icon { color: var(--bhp-yellow); } /* Card copy (86eypb6m6 audit, nodes 34213:83744/83745/83746): both paragraphs measured live at 20px/400 (inherited from `.bhp-page p` above), but Figma sets 16px throughout, the quote at 22px line-height (italic, matching the existing `` wrap in bonza_hp_sound_familiar() already, no PHP change needed) and the body at 700 weight/20px line-height. A 1px solid divider (node 34213:83745, 278px, full black) sits between them in Figma and was missing entirely; added here as a border on the quote paragraph rather than a new PHP element, since it is a purely decorative rule between two paragraphs that already exist. Gaps: Figma itemSpacing 16px vs the live 30px default WP paragraph margin. */ .bhp-symptom-card p { font-size: 16px; margin: 0 0 16px; } .bhp-symptom-card p:last-of-type { font-weight: 700; line-height: 1.25; margin-bottom: 0; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): D above (16px/20px via the 1.25 multiplier) is correct, but T-744 AND M-428 both drop this specific paragraph (only the body, not the quote above it) to 14px, confirmed node-by-node; line-height stays a constant 20px so it is set explicitly rather than left as a multiplier once the size changes. */ @media (max-width: 1439px) { .bhp-symptom-card p:last-of-type { font-size: 14px; line-height: 20px; } } .bhp-symptom-card p:first-of-type { /* Figma specs Poppins for this quote (node 34213:83744). Poppins is not loaded on this site (the old var(--theme-font-family) fallback computed to -apple-system, HP-474); per the accepted exception (Lan 2026-09-24) Kobe1.1 substitutes for Poppins/Inter, so use the page body font. */ font-family: var(--bhp-body-font) !important; line-height: 1.375; /* Figma quote text boxes are 22px x lines + 11px (77 / 55 for 3 / 2 lines, nodes 34213:83744 / :83853), then 16px to the divider (the 1px line is drawn ON that 0-high vector, not added to it) and 16px to the body: 11 + 15 + 1 (border) = 27. Was 16, which put every body 9.5px high (audit L02). */ padding-bottom: 26px; border-bottom: 1px solid var(--bhp-ink); } /* "one hidden root cause." run, Figma text 34213:83760 ts2 span colors it green. */ .bhp-highlight-green { color: var(--bhp-green); } /* Concern picker grid ("Start with the Foundation" CTA lives here). margin-top beats the body paragraph's margin-bottom in the collapse (larger wins, not sum); safe since this class has no other instance on the page. Figma ledger (86eypb6m6, tablet-vs-desktop re-audit): M428=20, T744=24, D1512=64 -- three distinct values, not two, so the 744-1439 band needs its own tier instead of inheriting either edge. */ .bhp-concern-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } @media (min-width: 744px) { .bhp-concern-grid { margin-top: 24px; } } @media (min-width: 1440px) { .bhp-concern-grid { margin-top: 64px; } } /* core/paragraph wrapper the concern-card link lives in (Gutenberg needs a real

around it to stay valid, see bonza_hp_find_support() PHP); reset its default block margin so the card grid spacing above controls layout instead. */ .bhp-concern-card-wrap { margin: 0; flex: 1 1 280px; } .bhp-concern-card { display: flex; align-items: center; gap: 16px; background: var(--bhp-cream); border-radius: 8px; padding: 16px 12px; text-decoration: none; color: var(--bhp-ink); } .bhp-concern-card .bhp-concern-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--bhp-amber); flex: 0 0 42px; } /* basis:auto sizes the column to its unwrapped width for the wrap decision, so a long label drops the whole column under the icon. basis:0 fixes plain cards; the flag card has a 3rd flex item and needs basis:auto or its column starves to a sliver. */ .bhp-concern-card:not(:has(.bhp-concern-flag)) .bhp-concern-icon + span { flex: 1 1 0%; min-width: 0; } .bhp-concern-card:has(.bhp-concern-flag) .bhp-concern-icon + span { flex: 1 1 auto; min-width: 0; } .bhp-concern-card .bhp-concern-label { font-family: var(--bhp-heading-font); font-size: 14px; text-transform: uppercase; display: block; } .bhp-concern-card .bhp-concern-sub { font-family: var(--bhp-body-font); font-weight: 700; font-size: 14px; display: block; } .bhp-concern-card .bhp-concern-flag { margin-left: auto; background: var(--bhp-green); color: var(--bhp-white); font-family: var(--bhp-heading-font); font-size: 14px; text-transform: uppercase; padding: 8px 11px; border-radius: 50px; white-space: nowrap; } /* hp-sec-b, 2026-09-24: a duplicate, higher-specificity concern-icon background-image block (nth-child 1-6) used to live here, added before grepping origin/main first. Removed: origin/main already ships all 7 concern-card icon glyphs (b7a15692, "section 8 seven concern-card icons were empty spans"), and this block's extra .bhp-concern-grid ancestor class made it win over and silently shadow those, a real regression risk the lead caught via hp-audit-build's live sweep. Compared the existing 7 glyphs against Figma directly instead (see the per-rule removal history in git log for this file if the comparison is ever needed again); no existing glyph needed changing. */ /* Real overflow at 320px (86eypb6m6 audit, live-measured with the fixed parity-measure.js harness): `.bhp-concern-card-wrap` is a flex item in `.bhp-concern-grid` with `flex: 1 1 280px`, but flex items default to `min-width: auto`, which floors the item at its content's own min size rather than the 280px basis. That content is `.bhp-concern-card`'s single-row layout (icon 42px + text column + the `.bhp-concern-flag` pill's fixed nowrap width, 126px at this card's copy), which together exceed the 280px available at 320px, so the card pushed 15px past the viewport. `min-width: 0` lets the flex item actually shrink to its container; `flex-wrap: wrap` on the card then drops the flag pill onto its own line instead of forcing the row wider than its parent. Verified pre-deploy against the live page with a temporary `addStyleTag` + before/after `getBoundingClientRect` pass (not just re-reading this file): wrap/card went from right=335 (15px over the 320px viewport) to right=300; the flag itself went from right=323 (3px over) to right=288, both confirmed as the winning rule via `document.styleSheets` + `el.matches()`, not assumed. */ @media (max-width: 767px) { .bhp-concern-card-wrap { min-width: 0; } .bhp-concern-card { flex-wrap: wrap; } } /* Gut-organ axes card grid: descriptor stays visible; only "The science" disclosure collapses. */ /* FIX (86eypb6m6, PR #940 defect review): flex-wrap + flex-grow stretched an incomplete last row's cards to fill the leftover space (e.g. 249.6px -> 426.7px at 1440), because flex distributes free space per-row instead of sharing fixed column tracks. Grid keeps every card the same width regardless of how many land in the last row, while auto-fill (not auto-fit) preserves the same column count Figma shows at every BP, including the 4/row@1024 and 1/row@<=428 cases this must not disturb. */ .bhp-axis-grid { display: grid; /* 86eypb6m6 (PR #947, team-lead correction): the earlier note here ("Figma seats all 8 axis cards in one row at every measured D/T width... 8x162 row at T-744") was a misread -- node I34457:304330;34241:134871's T-744 instance measures h=410.42 (two rows of 197.21 + a 16px row-gap), not one, and its w=696 only resolves to 4x162+3x16, not 8x162. T-744 is 4 columns x 2 rows; only D-1512 (w=1384 = 8x159+7x16, single row) is 8 columns. Mobile- first base is the M-428 2-col spec; 744px and 1440px tiers below. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; } /* T-744 (4 cols x 2 rows, node I29629:123474;34241:134871, w=696=4x162+3x16) -- 744/768/1024 all judge against this frame per team-lead's mapping. 1025-1439 has no dedicated Figma frame; it interpolates from this same T-744 rule (nearest-frame rule) up to the D-1512 ceiling below, which only takes over at min-width:1440 (node I34457:304330;34241:134871). */ @media (min-width: 744px) { .bhp-axis-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Desktop stays 4 x 2 on purpose (QA, z8udzke6d9): Figma D-1512's 8 x 1 row leaves ~150px tiles, where DE/FR/ES/NL titles broke mid-word over up to 4 lines. Listed in the bonza client-approved Figma deviations register. */ /* Radius/padding must match Figma node I34457:304330;34241:134878 "Frame 2147229723" exactly: radius 8, pad 24 top/bottom x 16 left/right (not a uniform 16px box) -- re-ported from backup/947-polluted-e6fff8b6 after the origin/main merge overwrote it with #940's 12px/16px placeholder. */ .bhp-axis-grid > .bhp-axis-card { background: var(--bhp-white); border-radius: 8px; padding: 24px 16px; color: var(--bhp-ink); /* Column flex so "The science" sits at the same height in every tile of a row, however many lines the title and descriptor take. */ display: flex; flex-direction: column; } .bhp-axis-grid > .bhp-axis-card > .bhp-axis-card__science { margin-top: auto; } .bhp-page .bhp-axis-card__title { font-family: var(--bhp-heading-font); font-size: 14px; line-height: 16px; font-weight: 900; text-transform: uppercase; /* hp2-l08: Figma tracking is 2% (0.24px at 12, 0.28px at 14). */ letter-spacing: 0.02em; margin: 8px 0 0; } .bhp-page .bhp-axis-card__descriptor { font-size: 14px; line-height: 16px; font-weight: 700; /* Full shorthand: Blocksy's phantom block-gap (line ~2394) otherwise inflates margin-bottom past Figma's 8px auto-layout gap. */ margin: 8px 0; } /* hp2-l08 (86eypb6m6): the 12px step is the M-428 value only; Figma T-744 is 14px (nodes under I29629:123474;34241:*), so the drop-down stops at 743 instead of 767. */ @media (max-width: 743px) { .bhp-page .bhp-axis-card__title, .bhp-page .bhp-axis-card__descriptor { font-size: 12px; } } .bhp-axis-card__toggle { cursor: pointer; list-style: none; color: var(--bhp-ink); font-family: var(--bhp-heading-font); font-size: 14px; line-height: 16px; /* Figma's "Title" text layer is weight 700, sentence-case ("The science"), not 900/uppercase -- the bolder/wider glyphs wrapped to 2 lines at the ~160px card width used at 744px and 1512px+. */ font-weight: 700; /* Full shorthand + explicit line-height: same phantom block-gap bug plus an inherited ~24px line-height vs Figma's 16px closed row. */ margin: 8px 0 0; } .bhp-axis-card__toggle::-webkit-details-marker { display: none; } /* hp2-l08: the placed "Explore The Gut-Organ Axes" button (node 34259:219525) is a fixed 48px pill with a 1.5px #b86e00 border at D/T/M; the shared .bhp-btn-primary rule gives 16px+26px+16px padding and a 1px transparent border (60px tall). Scoped to this section's own button so the other .bhp-btn-primary placements are untouched. */ .bhp-page .bhp-section:has(> .bhp-axis-grid) .bhp-btn-primary .wp-block-button__link { box-sizing: border-box; height: 48px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 270px; border: 1.5px solid #b86e00; } /* The stroke above outranked the coral hover rule, so the hovered button kept a brown ring; same selector plus :hover restores the coral border (86eyzmwuc). */ .bhp-page .bhp-section:has(> .bhp-axis-grid) .bhp-btn-primary .wp-block-button__link:hover, .bhp-page .bhp-section:has(> .bhp-axis-grid) .bhp-btn-primary .wp-block-button__link:focus-visible { border-color: var(--bhp-coral); } /* hp2-l08: Figma "Accordion" instance fill is #fff @100% (the card behind is also white, so this changes no pixel; it just states the fill). */ .bhp-axis-card__science { background-color: #fff; } .bhp-page .bhp-axis-card__science p { font-size: 14px; line-height: 20px; margin-top: 8px; } .bhp-axis-card__science a { color: var(--bhp-green); font-weight: 700; } /* "Formulated With Science" feature cards (86eypb6m6 audit, node 34612:68432): 3 white cards, 453x218 at desktop, radius 12, padding 20, 12px gap both directions. New this pass, previously 3 single-line columns with no such cards at all. */ .bhp-feature-row { display: flex; flex-wrap: wrap; gap: 12px; } .bhp-feature-card { flex: 1 1 300px; background: var(--bhp-white); border-radius: 12px; padding: 20px; color: var(--bhp-ink); } @media (min-width: 1024px) { .bhp-feature-card { flex-basis: 453px; } } /* Why Bonza Is Different -- 86eypb6m6: shared .bhp-section only reaches its full 1384px content cap at >=1512px, so a fixed 453px x3 + 12px gaps overflows and wraps 2+1 in the 1440-1511 band. flex:1 1 0 + min-width:0 share the container's real width instead of demanding a fixed size; max-width caps at Figma's 453.33px once the container is wide enough. */ @media (min-width: 1440px) { .bhp-feature-card { flex: 1 1 0; min-width: 0; max-width: 453.33px; } } .bhp-feature-card p { margin: 0 0 12px; } .bhp-feature-card p:last-child { margin-bottom: 0; } /* 86eypb6m6 hp-sec-b audit, register entry 2026-09-19 "css-cascade": these three were bare single-class selectors (0,1,0) applied to

tags, so `.bhp-page p` (0,1,1, a tag selector beats a bare class regardless of source order -- the same GL-03 bug already fixed for `.bhp-eyebrow` near the top of this file) silently won on every property both rules set: font-size, font-weight and font-family all fell back to the page's 20px/400/Kobe1.1 body-copy default instead of Figma's 14px/900/Nominee (title), 16px/700 (sub) and 14px (body). Confirmed live via the build-measurement audit (homepage-build-1440.json section 11): title/sub/body all reported Kobe1.1/400/20px, not the values these rules already declared. Same `.bhp-page` prefix fix as `.bhp-page .bhp-eyebrow`, applied here too -- this was logged as a known pattern but not yet actually applied to this selector. */ .bhp-page .bhp-feature-card__title { font-family: var(--bhp-heading-font); font-size: 14px; font-weight: 900; text-transform: uppercase; } .bhp-page .bhp-feature-card__sub { font-size: 16px; font-weight: 700; color: var(--bhp-green); } /* 13:Frame 2147229923: figma sub size D=16/T=14/M=14, title D=14/T=14/M=12. */ @media (max-width: 1439px) { .bhp-page .bhp-feature-card__sub { font-size: 14px; } } @media (max-width: 767px) { .bhp-page .bhp-feature-card__title { font-size: 12px; } } .bhp-page .bhp-feature-card__body { font-size: 14px; line-height: 1.4; } /* Reviews row: RETIRED 2026-09-24 (86eypb6m6). .bhp-review-row / .bhp-review-card / ".bhp-review-card p" styled the five hardcoded Figma placeholder testimonials that used to live inside bonza_hp_reviews() (homepage/patterns/homepage.php) -- that markup is gone (replaced by the live [bonza_feefo_reviews] carousel, styled by css/feefo-reviews.css's own .bfr-* classes instead), and grep confirms nothing else in this repo references either class, so the rules are removed rather than left dead. The focus-visible rule and the parity- audit override further down this file for the same two classes are removed in this same pass; see their own removal notes. */ /* Trust badge row. hp-sec-b fresh-capture audit (86eypb6m6): gap was 32px, Figma's "Review Copy Variant" row (18_Frame_2147229955) declares autoLayout gap 24. Per-badge height, corrected per the lead's direction 2026-09-24: each logo has its OWN natural height in Figma, not a uniform 56px -- forcing 56 on all five was stretching/squashing the B Corp and Rainforest Trust marks specifically. `.bhp-badge-row img` below is now just the shared width:auto/display rule; each badge's real height is set by its own nth-of-type rule underneath, citing the exact D1512 node id (nth-of-type counts among the row's

siblings only, the OneTribe

in between them does not break the count): 1 certified-b-corporation-pending-logo 1 I34457:304330;34323:193416 80px 2 1percent-for-the-planet-logo 1 I34457:304330;34323:193457 56px 3 trees-for-the-future-logo 2 I34457:304330;34323:193477 56px 4 rainforest-trust-logo 1 I34457:304330;34323:193498 48px */ .bhp-badge-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; } .bhp-badge-row img { width: auto; display: block; } .bhp-badge:nth-of-type(1) img { height: 80px; } .bhp-badge:nth-of-type(2) img { height: 56px; } .bhp-badge:nth-of-type(3) img { height: 56px; } .bhp-badge:nth-of-type(4) img { height: 48px; } /* FAQ list */ .bhp-faq-list > details { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 16px 0; } .bhp-faq-list summary { cursor: pointer; list-style: none; font-family: var(--bhp-body-font); /* 86eypb6m6 audit: Figma (34323:195185 etc) is 900 weight, not 700. */ font-weight: 900; font-size: 16px; color: var(--bhp-white); } .bhp-faq-list summary::-webkit-details-marker { display: none; } /* Answer links sit inside the green band; the theme's global link colour is unknown and may itself be brand green (invisible on this bg), so set an explicit, measured pair rather than inherit. */ .bhp-faq-list a { color: var(--bhp-white); text-decoration: underline; } /* Ingredient regulatory / sourcing note (EFSA + prebiotics fibre sentence). CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): same specificity bug as `.bhp-stat-card__*` above -- a plain single-class selector (0,1,0) on a `

` always lost to `.bhp-page p` (0,1,1), so this rule's own 14px never actually applied; confirmed live at 20px (the generic default). */ /* 86eypb6m6 (PR #947, team-lead correction): re-pulled all three widths -- D-1512=20px, T-744=18px, M-428=18px (nodes 34765:79945/79973/79999, I29629:123474;* at T-744, I29600:92223;* at M-428). T and M share the same value, so base is 18px and only D-1512 bumps to 20px, not the inverse this rule shipped before (20px base with an <=767 drop-down, which left 768-1439 on the D value instead of T-744's 18). Line-height is a constant 24px at every width. */ .bhp-page .bhp-ingredient-note { font-size: 18px; line-height: 24px; /* hp2-l07 property pass: Figma note text nodes (34765:79945/79973/79999) are #2e2a2a at 100% opacity, not 90%. */ opacity: 1; } @media (min-width: 1440px) { .bhp-page .bhp-ingredient-note { font-size: 20px; } } .bhp-ingredient-note sup { font-size: 0.65em; } /* NEW (86eypb6m6 numeric parity audit, hp-sec-a2): the 3 missing "Prebiotics feed" / "Probiotics produce" / "Postbiotics deliver" caption labels (node 34765:79944 + siblings) that sit directly above their matching `.bhp-ingredient-note` footnote -- see bonza_hp_biotics_triad()'s own docblock for the full sourcing note and the scope decision (labels only, not Figma's full numbered-timeline layout). Figma: 14px/16px at D-1512 AND T-744 (same value both), 12px/16px at M-428 (line-height is a constant 16px across all three, confirmed node-by-node) -- base rule below carries the M value per this file's own mobile-first convention for this property pair, with a single >=768px bump covering both T and D since they're identical. */ .bhp-page .bhp-triad-label { /* hp2-l07: Figma label is a hug-width box with CENTER text alignment; a fit-content box makes the alignment explicit without moving the glyphs. */ width: fit-content; text-align: center; font-family: var(--bhp-heading-font); font-weight: 900; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bhp-green); margin-bottom: 4px; } /* hp2-l07: T-744 is 14px too (audit row: 12px at 744); step at 744, not 768. */ @media (min-width: 744px) { .bhp-page .bhp-triad-label { font-size: 14px; } } /* "Always Inside" / "Never Inside" comparison lists (86eypb6m6 audit, node 34241:146546): new this pass, previously flagged as un-transcribed. White cards on the green band, matching this file's existing white-card-on-green-band pattern; exact padding/radius not independently re-measured, see the function's own docblock. */ .bhp-transparency-col { /* 86eypb6m6 S14: Figma's col (row + footer paragraphs) is a 24px-gap flex column at every width -- was plain block flow. Zeroing the children's own margin-bottom (WP block/paragraph defaults) stops them stacking on top of the gap. */ display: flex; flex-direction: column; gap: 24px; } .bhp-transparency-col > * { margin-bottom: 0; } .bhp-transparency-row { /* 86eypb6m6 S14: Figma's card row is NO_WRAP with a 12px gap at every width down to 428 -- cards never stack, was wrap + 24px. No longer needs its own margin: .bhp-transparency-col's gap above now supplies the row-to-footer spacing. */ display: flex; flex-wrap: nowrap; gap: 12px; } .bhp-transparency-card { /* 86eypb6m6 S14 height parity: Figma's card frames declare a fixed 612px at every width regardless of content -- the padding/gap sum doesn't reconcile to it (~28px design slack), so height is set directly rather than derived. Was flat 24px padding, auto height. */ /* 86eypb6m6 S14: equal-share flex, no minimum -- a 300px basis forced the row above to wrap under ~624px, which Figma's row never does. */ flex: 1 1 0; min-width: 0; background: var(--bhp-white); color: var(--bhp-ink); border-radius: 12px; padding: 40px 20px; height: 612px; box-sizing: border-box; display: flex; flex-direction: column; } .bhp-transparency-card--out { /* 86eypb6m6 S14: Figma's "out" card pad-bottom is 32, not 40. */ padding-bottom: 32px; } .bhp-transparency-card h4 ,.bhp-transparency-card h3 { /* 86eypb6m6 hp-audit-c: figma (34306:181049/181074) is 14px at T/M, 16px only from the 1440px desktop breakpoint up -- was a flat 16px at every size. */ font-size: 14px; /* 86eyy8hud: fonts.css now excludes this selector from the sitewide h1-h6 !important rule via :not(), so the existing higher-specificity `.bhp-page .bhp-transparency-card h4` rule below (~line 2943, its own accepted-exception weight-700 decision) sets font-family/weight without a fight -- no need to duplicate those here. */ /* 86eypb6m6 S14: Figma header-to-list gap is 20, was 12. */ margin: 0 0 20px; flex: none; } .bhp-transparency-card--in h4 ,.bhp-transparency-card--in h3 { color: var(--bhp-green); } .bhp-transparency-card--out h4 ,.bhp-transparency-card--out h3 { color: var(--bhp-ink); } .bhp-transparency-card ul { /* 86eypb6m6 S14: fills the card's fixed 612px height so per-row spacing (Figma rows are 88/128px, positional not content-driven) isn't hardcoded against a box that can't actually fit it. */ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding-left: 20px; } .bhp-transparency-card li { /* 86eypb6m6 hp-audit-c: same 14px-until-1440px figma step as the h4 above (e.g. node 34306:181055), was flat 16px at every size. */ font-size: 14px; font-weight: 700; /* 86eypb6m6 S14: Figma rows carry no margin-gap, only internal padding (added on the align-items rule below) -- was 8px. */ margin-bottom: 0; } .bhp-transparency-card li:last-child { margin-bottom: 0; } @media (min-width: 1440px) { .bhp-transparency-card h4, .bhp-transparency-card h3, .bhp-transparency-card li { font-size: 16px; } } /* Founder credit/qualifications lines (86eypb6m6 audit, nodes 34241:146374/146375): new this pass, previously absent. hp-sec-b audit: same `.bhp-page p` (0,1,1) specificity bug as `.bhp-feature-card__title` above -- both were bare single-class selectors (0,1,0) on

tags, so font-size/font-weight silently lost to the page's 20px/400 default (color survived only because `.bhp-page p` never sets color). Confirmed live: both reported Kobe1.1/400/20px in the build audit instead of the 16px/900 and 14px/700 these rules already declared. Same `.bhp-page` prefix fix. */ /* hp-sec-b fresh-capture audit (86eypb6m6, post 2-col row fix): this line was still rendering Kobe1.1 (`--bhp-body-font`, `.bhp-page p`'s inherited family), Figma (node 34241:146374) specifies Nominee, the page's heading font. Every other property on this node already matched at D1512 (size/weight/color/letter-spacing/case, the rule directly above), only font-family was missing there. Separately, this node is NOT flat across breakpoints the way it was assumed to be: Figma's own T744 and M428 frames both give it 14px (confirmed in both frame exports), only D1512 is 16px -- the SAME 14px the quals line below already uses. 14px is the mobile-first default here now; the 16px-desktop rule below applies at the project's standard D boundary (>=1440, matching hp-sec-a's D/T/M band split: D >=1440, T 768-1439, M <768), corrected 2026-09-24 from an earlier 1280px guess per the lead's direction to use one boundary set across the whole page. */ .bhp-page .bhp-founder-credit { font-family: var(--bhp-heading-font); font-size: 14px; font-weight: 900; color: var(--bhp-green); /* Figma Frame 2147229960 gap 40 between the bio text and the credit block (audit L13 gap-above +182/+110/+140 rows were mis-paired boxes; real delta was 27 vs 40). */ margin-top: 40px; margin-bottom: 0; } @media (min-width: 1440px) { .bhp-page .bhp-founder-credit { font-size: 16px; } } .bhp-page .bhp-founder-quals { font-size: 14px; font-weight: 700; color: var(--bhp-taupe); /* Figma Frame 2147229862 itemSpacing 12 (credit -> quals); the theme's block margin under it (21px) is not in Figma. */ margin-top: 12px; margin-bottom: 0; } /* The Figma quals box is 392px wide at every frame; at 428 the column is 388, and the line is 389.8px, so it wrapped to two lines here and Figma's is one. */ @media (min-width: 428px) { .bhp-page .bhp-founder-quals { width: 392px; max-width: none; } } /* The two bio paragraphs are ONE Figma text node (34241:146372) with a blank line between them: 24px, not the theme's 1.5em block margin (27px at 18px, 30px at 20px). Measured line counts already match Figma (16 / 10 / 11 lines at M / T / D including the blank line), so the "wrapped-lines" and "extra-text" audit rows for this paragraph were a first-paragraph-only pairing. */ .bhp-page .bhp-founder-col > p.wp-block-paragraph:not([class*="bhp-founder-"]) { margin: 0; } .bhp-page .bhp-founder-col > p.wp-block-paragraph:not([class*="bhp-founder-"]):first-child { margin-bottom: 24px; } /* "Meet the founder" link (node 34241:146377, recorded spec 16/700/green, 86eypb6m6). No decoration/hover value was captured for this node during the audit, so an underline-on-hover is used rather than inventing an exact Figma-verified state. */ .bhp-page .bhp-founder-link { /* Figma 34241:146377: Kobe1.1 Bold 16, line-height 120% (19.2px); the link was Nominee at 24px. Frame 2147229741 sits 12px under the quals box (whose text box is 9px tall in Figma, 16.8px here), and its text is inset 2px in a 14px row: 2px margin puts the glyphs where Figma's are. */ font-family: var(--bhp-body-font); font-size: 16px; font-weight: 700; line-height: 1.2; margin-top: 2px; /* Figma's column ends with the 14px link frame; the 19.2px line box overshoots it by 3px, which put every founder height 3px over. */ margin-bottom: -3px; } .bhp-page .bhp-founder-link a { color: var(--bhp-green); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } /* Figma "arrow_right_alt" (34241:146378) 14x14, inner Vector 34241:146379 9.33x7 at 2.33,3.5, fill #247B4E: exact path from the extractor asset. */ .bhp-page .bhp-founder-link a::after { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath transform='translate(2.33 3.5)' d='M5.83333 7L5.01667 6.15417L7.0875 4.08333H0V2.91667H7.0875L5.01667 0.845833L5.83333 0L9.33333 3.5L5.83333 7Z' fill='%23247B4E'/%3E%3C/svg%3E") no-repeat center / 14px 14px; } .bhp-page .bhp-founder-link a:hover, .bhp-page .bhp-founder-link a:focus-visible { text-decoration: underline; } /* Founder and transparency photos (86eypb6m6, 2026-09-21). Both were recorded in an earlier handoff as assets that "do not exist"; both were in the pinned Figma export all along and are now in the Media Library. The source files are deliberately larger than the boxes Figma draws, so the sizes WordPress generated have retina candidates to pick from: the founder file is 1920x1280 for a 672x367 slot, the transparency file 682x1000 for 430x631. max-width pins the drawn size, width:100% lets them shrink below it rather than overflowing the narrow breakpoints, and height:auto keeps the explicit width/height attributes from squashing them. The founder photo needs object-fit. Figma draws it at 672x367 (1.83:1) but the photograph is 1.5:1, so the design crops it; scaling the whole frame instead would letterbox it and shift the subject off the composition Figma chose. aspect-ratio plus cover reproduces that crop at every width. The transparency photo needs none of this: 682x1000 is 0.682:1 against Figma's 430x631 at 0.681:1, the same shape, so it scales cleanly. */ .bhp-founder-photo, .bhp-transparency-photo { margin-top: 24px; margin-bottom: 0; } .bhp-founder-photo img { width: 100%; height: auto; display: block; border-radius: 16px; max-width: 672px; aspect-ratio: 672 / 367; object-fit: cover; object-position: center; } /* Figma Rectangle 9782 fills the column below the two-column tier: 696x380.1 at T744 and 388x211.9 at M428 (same 1.831 ratio as 672x367); the 672 cap was clipping T744 to 672x367 (audit L13 img-w/img-h). Below 1024 only: there is no Figma frame between T744 and D1512, so 1024-1439 keeps the 672 cap it had. */ @media (max-width: 1023px) { .bhp-founder-photo img { max-width: none; } } .bhp-transparency-photo img { width: 100%; height: auto; display: block; /* 86eypb6m6 hp-thumbs2 radius audit: Figma node "image 674" (34306:185699, Content Homepage instance) and its parent frame both carry radius:null at 1512/744/428 -- square corners by design. */ border-radius: 0; max-width: 430px; } /* Biotics Triad numbered timeline (S7, 86eypb6m6, hp-fix-a) -- reworked 2026-09-28 to target the classes actually baked into live post 144943's post_content (`bhp-triad-grid`/`bhp-triad-illus`/`bhp-triad-timeline`/ `__item`/`__icon`/`__row`/`__badge`/`bhp-triad-callout-pill`, PR #940 lineage). S7 renders from that frozen post_content row, not from homepage.php's `bonza_hp_biotics_triad()` pattern function (confirmed via SSH class-count audit) -- an earlier push here introduced a parallel `.bhp-triad-item`/`.bhp-triad-badge`/`.bhp-triad-pill` class set that never matched what's actually rendered and, via v1's "incoming PR wins" conflict resolution, clobbered PR #940's already-correct rules for the classes that DO render, leaving the live section unstyled. Reverted here: base rules below are #940's own (from bc-sc-wt-86eypb6m6-waves-1790421531/sites/bonza/custom/css/homepage.css), unchanged except for the specific Figma deltas called out inline. */ .bhp-triad-illus { margin-top: 24px; margin-bottom: 0; } .bhp-triad-illus img { width: 100%; height: auto; display: block; max-width: 600px; margin-left: auto; margin-right: auto; } /* Grid: illustration + numbered list side by side, wrapping to a single column once the two flex-basis floors (320px + 360px + 48px gap) no longer fit -- this is what carries the M-428 mobile stack, unchanged from #940's base since it already satisfies the narrow-viewport layout. */ .bhp-triad-grid { display: flex; flex-wrap: wrap; align-items: flex-start; /* 86eypb6m6 (PR #947, team-lead correction): row gap is NOT constant in Figma (node 34765:79923) -- 20 at M-428, 24 at T-744, 64 at D-1512; tiers set below. Base here is the M-428 value (mobile-first convention). The flex-basis floors below (600 + 720, matching the D-1512 illus/timeline children) sum to 1384 with the 64px D gap -- exactly that frame's own row width -- so the layout naturally stays single-column below it and only goes side-by-side once the container reaches ~1384px, which is why 744/768/1024 (all judged against the narrower T-744 frame, itself only 696px wide) stay stacked instead of side-by-side as the old 320/360 floors wrongly allowed from 1024 up. */ gap: 20px; /* hp2-l07: Figma frame 34765:79923 is CENTER/CENTER, so the fixed 600px image sits centred (T-744: x=72 in a 696 frame), not flush left. */ justify-content: center; margin-top: 24px; } .bhp-triad-grid .bhp-triad-illus { /* hp2-l07 property pass: Figma "image 704" (35858:80075) has a 24px corner radius on all four corners. */ border-radius: 24px; overflow: hidden; /* delta: was flex:1 1 320px -- Figma "image 704" (node 35858:80075, Home Page's own instance, not the Product Category Page node of the same name) is a fixed 600x800 rectangle at both D-1512 and T-744, not a scaling column. */ flex: 0 1 600px; margin-top: 0; } .bhp-triad-timeline { /* delta: was flex:1 1 360px -- Figma timeline frame (node 34765:79925) measures 720px at D-1512. (696px at T-744, but 744-1024 stay single-column per the note above, so only the D-1512 value drives the side-by-side floor.) */ flex: 0 1 720px; list-style: none; margin: 0; padding: 0; position: relative; } .bhp-page .bhp-triad-timeline__item { position: relative; /* hp2-l07: Figma's text column starts 57px from the list edge (35px badge + 22px gap) at every width, and the badge itself sits at x=0. The old 44px pad + 13px margins on each child gave the same 57px for the text but pushed the badge (and icon) 44px/34px too far right. */ padding-left: 57px; /* delta: was 40px -- Figma list gap (Frame 2147229661) is 96 */ margin: 0 0 96px; } .bhp-page .bhp-triad-timeline__item:last-child { margin-bottom: 0; } /* One continuous line on the list (Figma node 34765:79926), not a per-item segment: Figma runs a single dashed rule through all three badges. Left is the badge's horizontal centre (44 + 35/2 - 2/2); top sits 3px above badge 1's own rendered top (icon 80px + margin 18px). */ .bhp-page .bhp-triad-timeline::before { content: ""; position: absolute; /* hp2-l07: Figma "Vector 1" is x=18 (2px line centred on the badge column), y=76 from the list top at D/T, 124 at M; 608 tall. */ left: 17px; top: 76px; width: 2px; height: 608px; background: repeating-linear-gradient( to bottom, rgba(46, 42, 42, 0.12) 0, rgba(46, 42, 42, 0.12) 5px, transparent 5px, transparent 10px ); } .bhp-page .bhp-triad-timeline__icon { display: block; width: 80px; height: 80px; margin: 0 0 18px; } .bhp-page .bhp-triad-timeline__icon svg { display: block; width: 100%; height: 100%; } /* hp2-l07: item 3 icon->text gap is 12 at D, T and M alike (204/204/252 tall frames sum with 12), not only from 1024. */ .bhp-page .bhp-triad-timeline__item:last-child .bhp-triad-timeline__icon { margin-bottom: 12px; } .bhp-triad-timeline__row { /* hp2-l07: badge is lifted out of the row (see badge rule) so the label starts at the text column's left edge like Figma; label->note gap 8. */ display: block; margin-bottom: 8px; } .bhp-page .bhp-triad-timeline__badge { flex: 0 0 auto; width: 35px; /* delta: was 35px -- Figma badge (node 34765:79929 et al.) is 35x35.58 */ height: 35.58px; border-radius: 999px; background: var(--bhp-amber); color: var(--bhp-ink); display: flex; align-items: center; justify-content: center; font-family: var(--bhp-heading-font); /* hp2-l07: Figma numeral (node 34765:79929 et al.) is Inter 400 at 18.06px. Inter -> Kobe1.1 is the accepted substitution (Lan 2026-09-24). */ font-family: var(--bhp-body-font); font-weight: 400; font-size: 18.06px; line-height: 1; margin: 0; /* Figma centres the badge on the whole item (35.58px badge in a 194/170/204 frame => y=79.2/357.2/640.2). */ position: absolute; left: 0; top: calc(50% - 17.79px); z-index: 1; } .bhp-page .bhp-triad-timeline__row .bhp-triad-label { margin: 0; } /* delta: was 44px, double-counting the item's own 44px padding-left -- Figma (node 34765:79945/79973/79999) sets this text box 57px from the item's left edge, so the margin on top of that 44px padding is 13px. */ .bhp-page .bhp-triad-timeline__item .bhp-ingredient-note { margin: 0; } /* Item-3 pill, "Two postbiotics, the layer most brands skip" (Figma node 34765:80000). delta: was `var(--bhp-coral)` (#FF6256) on `var(--bhp-callout-pink)`, 2.71:1 -- fails both the 3:1 large-text and 4.5:1 normal-text floors. Remapped to #C93D2D, the nearest coral that clears 4.5:1 on both this tinted pill background (4.50:1) and plain white (5.01:1) -- same "remap to nearest passing coral" convention as S1/S9. */ .bhp-page p.bhp-triad-callout-pill, .bhp-page .bhp-triad-callout-pill { /* delta: left was 44px (double-counted the item's 44px padding-left, same bug as .bhp-ingredient-note above) -- Figma node 34765:80000 sits 57px from the item's left edge at both breakpoints, so 13px on top of that 44px padding. */ margin: 8px 0 0; /* hp2-l07: Figma frame 34765:80000 is FILL in the 331px text column at M and a 380px pill at T/D, text centred inside it. */ display: block; text-align: center; /* Height must land on Figma's 32px (D, 1 line) and 56px (M, 2 lines) -- both solve to the same 4px vertical padding at this 24px line-height (4+4+24=32, 4+4+48=56), so one value covers both breakpoints. */ /* 86eypb6m6 (PR #947, team-lead re-verify): was 20px sides -- node 34765:80000 pads 4/16/4/16 at D/T/M alike. */ padding: 4px 16px; border-radius: 999px; /* hp2-l07: Figma fill is #ff6256 @ 10% (composites to the same #ffefee on the white band); written as the alpha value the design states. */ background: rgba(255, 98, 86, 0.1); text-align: center; /* delta: was flat 18px -- node 34765:80001 is D-1512=20, T-744=18, M-428=18 (base carries the shared T/M value, bump below). */ font-size: 18px; font-weight: 700; /* hp2-l07: Figma text is #ff6256, which is 2.64:1 on this pill (2.94:1 on white) and fails WCAG AA. #C83C2C is the same hue nudged darker: 4.55:1 on the pill, 5.07:1 on white. DEVIATION from Figma, recorded for sign-off. (The previous #C93D2D measured 4.496:1 on the pill, just under 4.5.) */ color: #C83C2C; } @media (min-width: 744px) { .bhp-page p.bhp-triad-callout-pill, .bhp-page .bhp-triad-callout-pill { width: 380px; max-width: 100%; box-sizing: border-box; white-space: nowrap; } } @media (min-width: 1440px) { .bhp-page p.bhp-triad-callout-pill, .bhp-page .bhp-triad-callout-pill { font-size: 20px; } } /* hp2-l07: M-428 "image 704" (node 35858:80075) is the same 600x800 tile as T/D, centred in the 388px column (x=-86) and clipped by it -- not scaled down to 388x517, which left the section 282px short. Below 744 the figure is a 388-wide, 800-tall window onto the centred 600px image. */ @media (max-width: 743px) { .bhp-triad-grid .bhp-triad-illus { flex: 0 0 100%; width: 100%; height: 800px; overflow: hidden; position: relative; } .bhp-triad-grid .bhp-triad-illus img { position: absolute; left: 50%; top: 0; width: 600px; max-width: none; height: 800px; margin: 0; transform: translateX(-50%); } } /* M-428 delta (read from figma/mobile-428.jsonl, node I29600:92223;34765:79923 "Frame 2147229915" -- the illus+timeline row): HORIZONTAL/WRAP auto-layout, gap 20, vs 48 on D-1512 (same node's desktop pass). Everything else measured from the same mobile pass matches desktop already in the base rules above (list gap 96 -- node 34765:79925 "Frame 2147229661"; badge 35x35.58 amber -- node 34765:79928 "Frame 2147229653"; stack order illus-then-timeline -- order:0 "image 704" w600/h800 before order:1 "Frame 2147229661"), so this is the only value that needs a breakpoint override. */ @media (max-width: 767px) { /* Same badge-relative anchor as desktop, but M-428's pass on node 34765:79926 puts the line's top past badge 1's bottom, not above its top -- so the offset from the badge's rendered top flips sign. */ .bhp-page .bhp-triad-timeline::before { top: 124px; } } /* 86eypb6m6 (PR #947, team-lead correction): T-744 row gap (node 34765:79923) is 24px, not the 48px this page previously fell back to for the whole >=768 range, nor the 20px M-428 value. 744/768/1024 all judge against this same T-744 frame per team-lead's mapping, and stay single-column here (illus+timeline floors sum to 1384 with the 64px D-1512 gap, well past any of these three widths' container). */ @media (min-width: 744px) { .bhp-triad-grid { gap: 24px; } } /* 86eypb6m6 (PR #947, self-correction): D-1512 row gap is 64px (node 34765:79923); 1440/1512/2560 all judge against this frame. The natural wrap sum (600+720+64=1384) only clears at viewport>=1512, where .bhp-section's own padding formula finally reaches a 1384px container -- at 1440 the formula still gives 64px/side (container 1312), so without an explicit nowrap here the layout stayed stacked through 1440-1511 instead of matching D-1512 as required. */ @media (min-width: 1440px) { .bhp-triad-grid { gap: 64px; flex-wrap: nowrap; } } /* Contrast recorded, not silently accepted: coral on this pink fill is 2.71:1, worse than the 2.94:1 already flagged against white -- a design defect needing sign-off, not a guessed darker coral. */ /* CTA "Foundation Routine" band and buttons already use core/buttons; pill shape and weight matched here since Blocksy's global button radius is not necessarily 999px pill on this site. */ .bhp-page .wp-block-button__link { border-radius: 999px; font-size: 12px; letter-spacing: 0.04em; padding: 16px 24px; } /* Button kind variants, from Figma component set "Button" 29049:58925. Enumerated states: Default / Hover / Disabled, each x Primary / Secondary / Outline / Naked. Apply the matching class to the core/buttons wrapper (e.g. "bhp-btn-primary") via the block's additional CSS class field. Contrast pairs for every color pairing below are measured and recorded in the file header comment. */ /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): Button component set 29049:58925, State=Default/Kind=Primary/Size=Large text colour is rgb(46,42,42) (ink), confirmed against the component-set data pulled at the start of this audit; `--bhp-black` (#000000, pure black) was never this component's own value on any state. Both pass WCAG AA on the yellow fill regardless (black ~12.91:1, ink measures similarly high per this file's own header contrast table), so this is a genuine token mismatch, not a documented accessibility override like the deviations recorded elsewhere in this block. */ .bhp-btn-primary .wp-block-button__link { background-color: var(--bhp-yellow); color: var(--bhp-ink); border: 1px solid transparent; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08); /* FIX (live-verified 2026-09-21, 86eyxb3yu): transition must live on the REST-state rule, the one that actually matches the rendered `.wp-block-button__link` element -- declaring it only on the `:hover` selector (this file's prior mistake) leaves Blocksy's own core rule (static/bundle/main.min.css, `.button, .ct-button, ...`) as the only transition source browsers pick up on this element, measured live as 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955) instead of the contract's 300ms ease-out. */ transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2): this class's placed instance ("Explore The Gut-Organ Axes", node 34457:304330;34259:219525, confirmed identical D/T/M) is font-weight 800 / line-height 26px, not the shared `.bhp-page ... .wp-block-button__link` default of 900/unset (browser default ~1.2). The computed value stays 800 regardless of whether Nominee ships an 800 face (browser fallback weight-matches to the nearest available face without changing the computed style, per MDN font-weight). Left UNRESOLVED by the prior numeric pass pending this check: `.bhp-btn-primary` is used 4x in this file (bonza_hp_complete_nutrition x2, bonza_hp_gut_axes x1, both hp-sec-a2-owned sections 5 and 9) plus bonza_hp_routines x1 (section 14, hp-sec-b-owned, NOT re-verified by this branch against the same node) -- flagged to hp-sec-b/lead since this shared-class change reaches outside sections 1-10. */ font-weight: 800; line-height: 26px; } /* Corrected 2026-09-21 (hover/type audit 86eyxb3yu): Button 29049:58925, State=Hover, Kind=Primary, Size=Small. This class's own 12px/pill sizing matches Small, not Large, and Small's hover is a genuinely different hue than Large's (contract-confirmed inconsistency, not harmonised away): coral fill was already correct, but the border add, white text and shadow removal that come with it were missing. */ /* NEEDS HUMAN (2026-09-21, accessibility override of the Figma contract). DELIBERATE, OPERATOR-APPROVED DEVIATION -- do not "fix" this back to match Figma without reading this comment first. Figma's Button Primary/Small hover pairs white text with the coral fill. Measured: white #FFFFFF on coral #FF6256 is 2.94:1. These button labels render at 12px (see `.bhp-page .wp-block-button__link` above), which is NOT WCAG large text, so the threshold is 4.5:1, not 3:1. It fails both. Bonza carries a contractual WCAG 2.2 AA guarantee, so the guarantee wins over the measured design value. Kept Figma's coral fill exactly and swapped only the label to ink #2E2A2A, which measures 4.82:1 and passes. Nothing here is an invented brand colour; both values are existing tokens in this file. CORRECTED 2026-09-21 (86eyxb3yu): this comment previously claimed the file header's "black text on the FF6256 coral hover fill is 8.02 to 1" recomputes to 4.82:1 -- that was ALSO wrong, and conflated two different pairs. 4.82:1 is the ink #2E2A2A on coral pairing directly above (what actually ships). Black #000000 on coral #FF6256, the pairing the header comment is actually about, recomputes to 7.13:1 -- corrected at the header itself now, both pass, this note stays only as the paper trail for why the header number moved. ACTION FOR DESIGN: supply an AA-passing hover treatment for Button Primary/Small, or confirm ink-on-coral as the approved pairing. */ .bhp-btn-primary .wp-block-button__link:hover, .bhp-btn-primary .wp-block-button__link:focus-visible { background-color: var(--bhp-coral); border-color: var(--bhp-coral); color: var(--bhp-ink); box-shadow: none; } .bhp-btn-primary .wp-block-button__link[aria-disabled="true"] { background-color: var(--bhp-cream); border: 1px solid var(--bhp-peach); opacity: 0.6; } /* "Shop the Foundation Routine" is figma Inter (Kobe1.1 substitute). CORRECTED (86eypb6m6, hp-fix-a): "every sibling needs Nominee" below was wrong -- section 7's CTA needs this same substitute too, see its own rule further down. */ .bhp-band-green:not(.bhp-section) .bhp-btn-primary .wp-block-button__link { /* Figma "Button" 34749:52949 label is Inter 800 12px/26px, ls 0.48px. It was forced to the body font (Kobe1.1, no 800 cut), which drew it thin and narrower (238px vs Figma 274px). */ font-family: var(--bhp-inter-font); font-weight: 800; } /* 86eypb6m6: Figma wants weight 700 here (node 29600:92223). The shared .bhp-page p{400} rule wins since no class exists on this

. Frozen post_content (BLK-01) can't add one, so scope by position instead, like the HM-14 fix above. */ .bhp-page > section:nth-child(5) .bhp-band-green > p:first-child { font-weight: 700; } .bhp-btn-secondary .wp-block-button__link { background-color: var(--bhp-green); color: var(--bhp-white); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08); /* FIX (live-verified 2026-09-21, 86eyxb3yu): same rest-state placement fix as .bhp-btn-primary above -- see that rule's comment. */ transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; } /* Corrected 2026-09-21: Secondary/Small drops its shadow on hover same as every other Kind; only the shadow removal was missing here, the green-to-gold fill and text-to-dark swap already matched. */ .bhp-btn-secondary .wp-block-button__link:hover, .bhp-btn-secondary .wp-block-button__link:focus-visible { background-color: var(--bhp-yellow); color: var(--bhp-black); box-shadow: none; } .bhp-btn-secondary .wp-block-button__link[aria-disabled="true"] { opacity: 0.6; } .bhp-btn-outline .wp-block-button__link { background-color: transparent; color: var(--bhp-green); border: 1px solid var(--bhp-green); /* FIX (live-verified 2026-09-21, 86eyxb3yu): same rest-state placement fix as .bhp-btn-primary above -- see that rule's comment. */ transition: background-color 300ms ease-out; } .bhp-btn-outline .wp-block-button__link:hover, .bhp-btn-outline .wp-block-button__link:focus-visible { background-color: var(--bhp-white); } .bhp-btn-outline .wp-block-button__link[aria-disabled="true"] { background-color: var(--bhp-white); opacity: 0.6; } /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a): `.bhp-btn-naked` is used exactly once on this page (bonza_hp_science_caught_up()'s "Read the full research breakdown" link), so this override is safe to make instance-specific rather than a shared-component change. Figma's own placed instance for this button (not just the abstract component-set default, which IS ink) is green rgb(36,123,78) and 400-weight, not the page's blanket 900-weight `.wp-block-button__link` uppercase default; confirmed against the real placed node, not the component defaults. */ .bhp-btn-naked .wp-block-button__link { background-color: transparent; color: var(--bhp-green); font-weight: 400; border-radius: 0; border-bottom: 2px solid var(--bhp-peach); padding: 4px 0; /* FIX (live-verified 2026-09-21, 86eyxb3yu): same rest-state placement fix as .bhp-btn-primary above -- see that rule's comment. Only the two properties the hover rule actually changes (color, the underline via border-bottom-color) get a transition -- padding/border-radius are static so animating them would be a no-op. */ transition: color 300ms ease-out, border-bottom-color 300ms ease-out; /* CORRECTED (86eypb6m6 numeric parity audit, hp-sec-a2): "Read the full research breakdown" (node 34457:304330;34241:... under Frame 2147229941) is line-height 26px at D-1512 AND M-428, but a distinct 14px at T-744 only -- confirmed node-by-node, not a typo; Figma's own placed instance genuinely tightens the line-height at tablet while D/M share the value. Base below carries the D/M value (this file's convention: no-media rule = T/M default, `min-width:1440px` = D-only bump -- see the `.bhp-page p, .bhp-page li` comment above), with the T-only exception declared just below. */ line-height: 26px; } @media (min-width: 768px) and (max-width: 1439px) { .bhp-btn-naked .wp-block-button__link { line-height: 14px; } } /* Added 2026-09-21 (hover/type audit 86eyxb3yu): Naked/Large and Small both change only text colour on hover, dark to coral #FF9572. This Kind had no hover rule at all -- a real gap, not a design no-op like the wishlist heart's Outline/Large. NEEDS HUMAN -- DELIBERATE, OPERATOR-APPROVED DEVIATION. Do not "fix" this back to match Figma without reading this comment first. Figma's measured value #FF9572 as the LABEL colour is not shippable here: on white it measures 2.14:1, and these labels render at 12px (see `.bhp-page .wp-block-button__link` above), so the threshold is 4.5:1, not the 3:1 large-text floor. It fails both by a wide margin. Bonza carries a contractual WCAG 2.2 AA guarantee, so the guarantee wins over the measured design value. Resolution: hold the label at ink #2E2A2A (14.18:1 on white, 12.30:1 on cream) and carry the hover on the existing underline instead, shifting it peach -> green #247B4E. That is 5.23:1 against white, well past the 3:1 required for a non-text indicator. Colour-only change, so nothing reflows, which also respects the contract's proven negative that no Figma hover ever changes element size. ACTION FOR DESIGN: supply an AA-passing label colour for Button Naked hover, or confirm the underline shift as the approved affordance. */ .bhp-btn-naked .wp-block-button__link:hover, .bhp-btn-naked .wp-block-button__link:focus-visible { color: var(--bhp-ink); border-bottom-color: var(--bhp-green); } .bhp-btn-naked .wp-block-button__link[aria-disabled="true"] { opacity: 0.6; } .bhp-page a:focus-visible, .bhp-page button:focus-visible, .bhp-page summary:focus-visible { outline: 2px solid var(--bhp-green); outline-offset: 2px; } /* ---- Focus indicator for the review scroller: RETIRED 2026-09-24 ------- (86eypb6m6). Was the WCAG 2.4.7 focus-visible fix for the old tabindex="0" `.bhp-review-row` horizontal scroller (axe scrollable-region-focusable). That markup is gone -- see the "Reviews row" removal note above -- so this scoped rule is dead with it. The live [bonza_feefo_reviews] carousel that replaced it is its own component with its own CSS (css/feefo-reviews.css) and script (js/feefo-carousel.js, "real DOM ... real pagination dots" per its own enqueue docblock); any focus-visible treatment it needs belongs there, not duplicated here for a scroller that no longer exists. */ /* ========================================================================== 86eypb6m6 parity audit (sec-low pass), sections 10-16 vs Figma export figma-context-20260917. Section 10 "Formulated With Science. Not Marketing." (Figma node 34612:68432, three feature cards): 1) Icon badges were entirely absent -- confirmed via raw DOM dump, no icon markup exists in the frozen post_content at all (only .bhp-feature-card__title/__sub/__body

tags). CSS-only fix: bake each icon's exact Figma vector path (fillGeometry pulled from raw/nodes-1.json, ids 34612:68435/68442/68449) into a ::before background-image, no markup change needed since post_content is frozen (BLK-01). Badge is Figma's own 44x44 circle, #FFA825 (--bhp-amber) fill, 12px gap to the text block (auto-layout itemSpacing on node 34612:68433). Icon glyph colour is dark ink (#2E2A2A / --bhp-ink), not white. Card 1 = a document/search icon, card 2 = a linked-circles/molecule icon, card 3 = a snowflake -- three genuinely different icons, not one icon reused (their shared Figma layer name "fluid_balance_24dp..." is a leftover Material Symbols placeholder name, the actual vector geometry differs per instance, verified by extracting each instance's own fillGeometry). 2) Cards were missing their 1px solid amber border entirely (Figma node 34612:68433 stroke, confirmed via raw JSON: strokes:[{color:#FFA825}], strokeWeight:1) -- .bhp-feature-card had background/radius/padding but no border property at all. Verified via Playwright injection before writing: gap and border/icon render confirmed at 1440/768/375 (screenshots scratchpad/seclow/s10-after2-*.png). ========================================================================== */ .bhp-feature-card { border: 1px solid var(--bhp-amber); } .bhp-feature-card__title { display: block; } .bhp-feature-card__title::before { content: ""; display: block; width: 44px; height: 44px; border-radius: 50%; background-color: var(--bhp-amber); background-repeat: no-repeat; background-position: center; margin-bottom: 12px; } .bhp-feature-card:nth-child(1) .bhp-feature-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2021%2019%27%3E%3Cpath%20fill%3D%27%232E2A2A%27%20d%3D%27M2%2016C1.45%2016%200.979167%2015.8042%200.5875%2015.4125C0.195833%2015.0208%200%2014.55%200%2014L0%202C0%201.45%200.195833%200.979167%200.5875%200.5875C0.979167%200.195833%201.45%200%202%200L18%200C18.55%200%2019.0208%200.195833%2019.4125%200.5875C19.8042%200.979167%2020%201.45%2020%202L2%202L2%2014L10%2014L10%2016L2%2016ZM17%2019C16.45%2019%2015.9792%2018.8042%2015.5875%2018.4125C15.1958%2018.0208%2015%2017.55%2015%2017L15%2015.9C13.85%2015.6667%2012.8958%2015.0958%2012.1375%2014.1875C11.3792%2013.2792%2011%2012.2167%2011%2011L11%206C11%205.45%2011.1917%204.97917%2011.575%204.5875C11.9583%204.19583%2012.4333%204%2013%204L19%204C19.55%204%2020.0208%204.19583%2020.4125%204.5875C20.8042%204.97917%2021%205.45%2021%206L21%2011C21%2012.2167%2020.6208%2013.2792%2019.8625%2014.1875C19.1042%2015.0958%2018.15%2015.6667%2017%2015.9L17%2017L20%2017L20%2019L17%2019ZM17.75%2010L19%2010L19%206L13%206L13%208L13.75%208C14.3%208%2014.8208%208.125%2015.3125%208.375C15.8042%208.625%2016.2167%208.96667%2016.55%209.4C16.6833%209.6%2016.8583%209.75%2017.075%209.85C17.2917%209.95%2017.5167%2010%2017.75%2010ZM16%2014C16.65%2014%2017.2333%2013.8125%2017.75%2013.4375C18.2667%2013.0625%2018.625%2012.5833%2018.825%2012L17.75%2012C17.2%2012%2016.6792%2011.8792%2016.1875%2011.6375C15.6958%2011.3958%2015.2833%2011.05%2014.95%2010.6C14.8%2010.4167%2014.6208%2010.2708%2014.4125%2010.1625C14.2042%2010.0542%2013.9833%2010%2013.75%2010L13%2010L13%2011C13%2011.85%2013.2875%2012.5625%2013.8625%2013.1375C14.4375%2013.7125%2015.15%2014%2016%2014ZM4%207L9%207L9%205L4%205L4%207ZM4%2011L9%2011L9%209L4%209L4%2011Z%27%2F%3E%3C%2Fsvg%3E"); background-size: 21px 19px; } .bhp-feature-card:nth-child(2) .bhp-feature-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20fill%3D%27%232E2A2A%27%20d%3D%27M14%2020C12.3333%2020%2010.9167%2019.4167%209.75%2018.25C8.58333%2017.0833%208%2015.6667%208%2014C8%2012.3333%208.58333%2010.9167%209.75%209.75C10.9167%208.58333%2012.3333%208%2014%208C15.6667%208%2017.0833%208.58333%2018.25%209.75C19.4167%2010.9167%2020%2012.3333%2020%2014C20%2015.6667%2019.4167%2017.0833%2018.25%2018.25C17.0833%2019.4167%2015.6667%2020%2014%2020ZM14%2018C15.1%2018%2016.0417%2017.6083%2016.825%2016.825C17.6083%2016.0417%2018%2015.1%2018%2014C18%2012.9%2017.6083%2011.9583%2016.825%2011.175C16.0417%2010.3917%2015.1%2010%2014%2010C12.9%2010%2011.9583%2010.3917%2011.175%2011.175C10.3917%2011.9583%2010%2012.9%2010%2014C10%2015.1%2010.3917%2016.0417%2011.175%2016.825C11.9583%2017.6083%2012.9%2018%2014%2018ZM2%2018C1.45%2018%200.979167%2017.8042%200.5875%2017.4125C0.195833%2017.0208%200%2016.55%200%2016L0%208.4C0%208.26667%200.0125%208.13333%200.0375%208C0.0625%207.86667%200.1%207.73333%200.15%207.6L2.15%203L2%203C1.71667%203%201.47917%202.90417%201.2875%202.7125C1.09583%202.52083%201%202.28333%201%202L1%201C1%200.716667%201.09583%200.479167%201.2875%200.2875C1.47917%200.0958333%201.71667%200%202%200L9%200C9.28333%200%209.52083%200.0958333%209.7125%200.2875C9.90417%200.479167%2010%200.716667%2010%201L10%202C10%202.28333%209.90417%202.52083%209.7125%202.7125C9.52083%202.90417%209.28333%203%209%203L8.85%203L10.5%206.8C10.1833%206.96667%209.88333%207.14167%209.6%207.325C9.31667%207.50833%209.05%207.71667%208.8%207.95L6.7%203L4.3%203L2%208.4L2%2016L6.25%2016C6.33333%2016.35%206.44583%2016.6958%206.5875%2017.0375C6.72917%2017.3792%206.9%2017.7%207.1%2018L2%2018ZM14%207C13.3%207%2012.7083%206.75833%2012.225%206.275C11.7417%205.79167%2011.5%205.2%2011.5%204.5C11.5%203.8%2011.7417%203.20833%2012.225%202.725C12.7083%202.24167%2013.3%202%2014%202L14%207C14%206.3%2014.2417%205.70833%2014.725%205.225C15.2083%204.74167%2015.8%204.5%2016.5%204.5C17.2%204.5%2017.7917%204.74167%2018.275%205.225C18.7583%205.70833%2019%206.3%2019%207L14%207Z%27%2F%3E%3C%2Fsvg%3E"); background-size: 20px 20px; } .bhp-feature-card:nth-child(3) .bhp-feature-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20fill%3D%27%232E2A2A%27%20d%3D%27M9%2020L9%2015.85L5.75%2019.05L4.35%2017.65L9%2013L9%2011L7%2011L2.35%2015.65L0.95%2014.25L4.15%2011L0%2011L0%209L4.15%209L0.95%205.75L2.35%204.35L7%209L9%209L9%207L4.35%202.35L5.75%200.95L9%204.15L9%200L11%200L11%204.15L14.25%200.95L15.65%202.35L11%207L11%209L13%209L17.65%204.35L19.05%205.75L15.85%209L20%209L20%2011L15.85%2011L19.05%2014.25L17.65%2015.65L13%2011L11%2011L11%2013L15.65%2017.65L14.25%2019.05L11%2015.85L11%2020L9%2020Z%27%2F%3E%3C%2Fsvg%3E"); background-size: 20px 20px; } /* Phantom Blocksy block-gap (`:is(.is-layout-flow, .is-layout-constrained) > :where(:not(h1..h6)) { margin-block-end: var(--theme-content-spacing) }`, main.min.css) also lands on the inner div.bhp-section INSIDE a .bhp-section-wrap triad (strip, content, strip) -- distinct from the already-fixed `.bhp-page > section` case, since this div is nested one level deeper. Confirmed via winning-rule walk (computed margin-block-end: 24px on the div, 0 or -1px on the following strip depending on whether it carries --top/--bottom) on sections 10 ("Formulated With Science"), 12 ("What Goes In Matters") and 14 ("Feed Your Dog Well"): every trailing torn-edge strip sat 23-24px away from the green/cream band instead of flush against it. Re-verified after this rule at all three: gap now 0px at 1440/768/375. */ .bhp-section-wrap > .bhp-section { margin-block-end: 0; } /* 86eypb6m6 mid-page audit (sec-mid, sections 4-9). Two verified CSS-layer defects; everything else found in this range (product-card markup in "Complete Nutrition", the gut-diagram + 3 biotics icons, the 8 axis-card icons/descriptions, the 7 concern-card icon glyphs, the 5 routine-card photos/prices/tags) is missing page CONTENT, not a stylesheet bug -- see the CHANGELOG entry for the full list; not touched here. */ /* "What's Your Dog Dealing With?" (.bhp-concern-grid, node 34241:135853+): Figma groups the 7 concern cards into two fixed rows -- 3 wider cards (453px @ desktop's 1384 measure) then 4 narrower cards (337px) -- at EVERY anchor (D 1440, T 768, M 425 all confirmed against index.json, the M frame instead uses 1-full-width + 2-column x3). The live grid is a single flex-wrap list with every card at the same `flex: 1 1 280px` basis, so the browser just fits as many 280px-basis cards per line as the container allows -- 4 first, then 3 -- the reverse of the design. Fix: give the first 3 items a ~33% basis and the rest ~25%, forcing the same row break Figma draws; `min-width: 0` is needed alongside it or a card's own intrinsic content (icon + label + the amber flag pill) floors the flex-basis and wraps early (the same gotcha the existing ≀767 rule already documents). Below 767px Figma's grouping flips to 1-then-2-col, so a second, narrower override replaces it there instead of stacking. Verified via addStyleTag + getBoundingClientRect row counts on the live page at 1440/1024/768/425/375/320: rows are [3,4] at >=768 and [1,2,2,2] at <768, matching the Figma frame at each width, before/after screenshots match. */ .bhp-concern-card-wrap { min-width: 0; } .bhp-concern-card-wrap:nth-child(-n+3) { flex: 0 1 calc(33.333% - 8px); } .bhp-concern-card-wrap:nth-child(n+4) { flex: 0 1 calc(25% - 9px); } .bhp-concern-card { flex-wrap: wrap; } @media (max-width: 767px) { .bhp-concern-card-wrap:nth-child(1) { flex: 1 1 100%; } .bhp-concern-card-wrap:nth-child(n+2) { flex: 0 1 calc(50% - 6px); } } /* "The Eight Gut-Organ Axes" accordion (.bhp-axis-grid, native core/details): Figma (34241:134882 component set) draws a chevron-down affordance on every one of the 8 cards ("heroicons-mini/chevron-down", 8 instances, confirmed in the offline nodes-*.json export). The live markup already hides the UA default triangle (`summary::-webkit-details-marker: none`, see above) but never replaced it with anything, so none of the 8 cards show ANY expand affordance at all. This restores a generic chevron using the same mask-image-on-currentColor technique already used elsewhere on this site (see header-navigation.css's icon masks) rather than a new icon asset, and flips it on [open] the same way native disclosure triangles rotate. This does not touch the still-open, separate question of whether the card's icon badge + description + "The science" link should be visible by default per Figma instead of collapsed -- that's a content/behaviour call, not a CSS one, and is flagged in the CHANGELOG rather than decided here. */ .bhp-axis-card__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bhp-axis-card__toggle::after { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.15s ease; } .bhp-axis-card__science[open] .bhp-axis-card__toggle::after { transform: rotate(180deg); } /* 86eypb6m6 parity audit (sec-low pass), section 11 "The Founder" pull quote. Figma (node 34215/34241 chain, walked via Frame 2147229735) centers only the eyebrow + quote heading on the 1000px measure (x=9386 in the export's coordinates, i.e. the "1000 centred" measure); the paragraphs, attribution and the (missing, see below) photo/text row stay left-aligned on the full 1384 measure. Live had every child left-aligned at the section's own edge, no measure distinction at all. */ .bhp-section:nth-of-type(12) > .bhp-eyebrow, .bhp-section:nth-of-type(12) > h2.wp-block-heading { text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto; } /* NOT FIXED HERE, flagged for a markup/content decision: Figma's founder section also has an entire photo/video block (Frame 2147229945, a 672px left column with a real photo and a video-play affordance, Rectangle 9782 + Media/video_circle instance) and a "Meet the founder ->" link with an arrow icon (Frame 2147229741) after the credentials line. NONE of this exists in the live post_content (confirmed via outerHTML dump: only eyebrow/h2/2 paragraphs/credit/quals

tags, no , no , no icon). This is a missing CONTENT block, not a style bug -- there is no image asset or link href to attach via CSS, and inventing one (e.g. a background-image cropped from the Figma render standing in for a real photo, or a href-less clickable-looking div) would fabricate content this build does not have. Needs an actual markup/content change against the frozen post_content (BLK-01), out of a CSS-only fix's scope. */ /* ========================================================================== 86eypb6m6 parity audit (sec-low pass), section 12 "What Goes In Matters. What Stays Out Matters More." (Figma node 34241:146546): 1) The check/X badge icons -- both the centered header badge above each card's title and the small badge before every single list item -- were entirely absent from post_content (plain browser `disc` bullets on the `