/** * Bonza PDP: accordion below the buy box (ClickUp 86eypb6me, queue item 31). * Pairs with product-page/faq-accordion.php. See that file's header for * the full node id, provenance and native-first check notes -- this file * is named faq-accordion.css for the same file-ownership reason. * * Config checked: Blocksy Companion ships no accordion element anywhere in * the plugin (grepped the full plugin tree, zero matches, logged via * figma-config-check.sh as checked-does-not-satisfy), and * `.bc-product-info-items` (Blocksy's own Shipping/Returns/FAQ meta row, * removed sitewide by queue item 29) has no styling hook that reaches six * mixed rows in this layout. No native config surface satisfies this, so a * bespoke stylesheet is the right call. * * editor-friendly-ok: this section is PHP output hooked onto * `woocommerce_single_product_summary` (see faq-accordion.php), the same * WooCommerce buy-box template area product-page-marketing.css and * checkout-header-footer.css already carry the identical, previously * -documented exception for: there is no Gutenberg block/pattern * counterpart to register add_editor_style() against, so literal font * families match the established sibling files in this same directory * (.bppm-accordion in product-page-marketing.css, .bcp-faq__item in * category-page.css) rather than introducing a one-off var() pattern here. * * Namespaced `.bppm-info-accordion` (not `.bppm-accordion`) so nothing here * collides with the existing accordion class already shipped in * product-page-marketing.css, which this file does not touch. * * Every colour is a var(--wp--preset--color--*, #hex) token, matching the * established pattern in category-page.css / checkout-header-footer.css for * this same #247B4E / #2E2A2A pair, never a bare hex. */ .bppm-info-accordion { display: flex; flex-direction: column; } .bppm-info-accordion__item { /* Native
, no extra box styling: the row IS the summary. */ } .bppm-info-accordion__summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 12px; cursor: pointer; list-style: none; font-family: 'Nominee', sans-serif; font-weight: 900; font-size: 16px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white (WCAG AA/AAA), same figure already verified for this pair in category-page.css */ } .bppm-info-accordion__summary::-webkit-details-marker { display: none; } /* Focus ring: Figma draws no focus state for this element at all (see the PHP header). Kept visible per the accessibility gate rather than relying on inherited/none behaviour; :focus-visible so a mouse click does not show it. */ .bppm-info-accordion__summary:focus-visible { outline: 2px solid var(--wp--preset--color--bhp-green, #247B4E); outline-offset: -2px; } .bppm-info-accordion__label { flex: 1 1 auto; } /* Plus icon, 20x20, Figma node 34345:186540. Drawn with CSS instead of an inline SVG copy since it is two straight bars in the section's own green token -- no visual detail an SVG would preserve that currentColor-on-two pseudo-elements does not, and it avoids a fourth new file for one glyph. */ .bppm-info-accordion__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; } .bppm-info-accordion__icon::before, .bppm-info-accordion__icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--wp--preset--color--bhp-green, #247B4E); transform: translate(-50%, -50%); transition: transform 0.15s ease; } .bppm-info-accordion__icon::before { width: 16.875px; /* Figma path bounds, 2.1875-17.8125 on a 20px box */ height: 1.875px; } .bppm-info-accordion__icon::after { width: 1.875px; height: 16.875px; } /* Open state: plus rotates 45deg into a close cross. Not drawn in Figma (only the closed row exists, see the PHP header) -- this theme's own decision so an open row still signals "tap to close." Plain [open] attribute selector, not :open, for the widest possible support. */ .bppm-info-accordion__item[open] .bppm-info-accordion__icon::before, .bppm-info-accordion__item[open] .bppm-info-accordion__icon::after { transform: translate(-50%, -50%) rotate(45deg); } .bppm-info-accordion__detail { padding: 0 12px 15px; font-family: 'Kobe1.1', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 14.18:1 on white (WCAG AA/AAA) */ } .bppm-info-accordion__detail :is(h1, h2, h3, h4, h5, h6) { font-size: 16px; line-height: 20px; } /* Defensive containment for real page/product content (tables, images) rendered inside a narrow accordion panel -- not a Figma value, just keeping arbitrary WordPress block content from overflowing the row. */ .bppm-info-accordion__detail img { max-width: 100%; height: auto; } .bppm-info-accordion__detail table { display: block; max-width: 100%; overflow-x: auto; } /* Embedded page content inside a panel. The pages carry their own headings * and lists, so the rhythm is set here rather than inherited from whatever a * page template would have given them. Figma draws no open state for this * accordion (34345:186537 is a plain frame of header rows), so this follows * the body type already established elsewhere on the page. */ .bppm-info-accordion__content { display: flex; flex-direction: column; gap: 12px; font-family: var(--wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif); /* was --wp--preset--font-family--kobe: a second, orphaned preset slug for the same font, not used anywhere else in these 9 files -- collapsed onto the sitewide --bhp-body/--bhp-heading namespace also used 70 lines below in this same content block. Literal "Kobe1.1" fallback unchanged, so this renders identically whether or not the "kobe" preset was ever actually registered in theme.json (not checked here, CSS-only fix). */ font-weight: 400; /* * Every descendant inherits this, so it is the one place the panel's body * size is decided. 14px is what Figma draws for accordion body copy at * 1512; product-page-typescale.css lowers it at the narrower breakpoints. */ font-size: 14px; line-height: 20px; color: var(--wp--preset--color--bhp-ink, #2E2A2A); } .bppm-info-accordion__content > * { margin: 0; } /* * Panel content is flattened to the accordion's own scale, and the selectors * below are deliberately heavier than they look. * * These panels embed published page and product content, so whatever markup * and classes those pages carry come with it. Measured on the deployed page * before this rule existed: a plain `` inside the guarantee panel * rendered at 36.75px in purple rgb(110, 93, 132), and `h3.wp-block-heading` * rendered 16px in rgb(25, 42, 61) even though the rule this replaces asked * for 14px green. Both were losing to Gutenberg's own block classes, which is * why matching on the element alone was not enough. * * Every element is reset to the panel's type first, then headings and emphasis * are given back only what the design specifies. A source page can still bold * a word or add a heading; it can no longer choose the size, family or colour * that word renders at. */ .bppm-info-accordion__content * { font-family: inherit; /* * `inherit`, not a literal size. A literal would flatten the responsive * type scale that product-page-typescale.css sets for this accordion, * which asks for a smaller size at 428 than at 1512, and undo that work * here. Inheriting means the container alone decides the size and every * descendant follows it at every breakpoint, while a source page's own * sizing is still discarded. */ font-size: inherit; line-height: inherit; /* * Set explicitly, NOT inherited. `inherit` looked right and was wrong: the * source pages carry Gutenberg palette classes, and a parent such as * `p.has-central-palette-10-color` sets purple rgb(110, 93, 132), which an * inheriting child then reproduces faithfully. Measured after the first * attempt at this rule: four elements in the subscription panel * still rendered purple, including "How does it Work?", because their * parent paragraph carried that palette class. Naming the colour stops a * palette class on any ancestor from reaching the text. * * font-size stays `inherit` on purpose, so the responsive type scale in * product-page-typescale.css still decides the size per breakpoint. */ color: var(--wp--preset--color--bhp-ink, #2E2A2A); letter-spacing: normal; text-transform: none; } .bppm-info-accordion__content h1, .bppm-info-accordion__content h2, .bppm-info-accordion__content h3, .bppm-info-accordion__content h4, .bppm-info-accordion__content h5, .bppm-info-accordion__content h6, .bppm-info-accordion__content summary { font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif); font-weight: 900; font-size: 14px; line-height: 20px; text-transform: uppercase; color: var(--wp--preset--color--bhp-green, #247B4E); } /* Emphasis keeps its weight and gives up everything else. */ .bppm-info-accordion__content strong, .bppm-info-accordion__content b { font-weight: 700; } .bppm-info-accordion__content em, .bppm-info-accordion__content i { font-style: italic; } /* * 86eypb6me: colour alone (green on ink, measured 1.81:1) does not clear * WCAG 1.4.1's 3:1 bar for a link distinguished only by colour, and * thickness/offset were both computing to `auto` -- left to the browser * instead of set explicitly, which is what the reviewer's comment asked to * stop. Values (1px thickness, 2px offset) match the Article detail * template's own inline-link rule, `.bnz-ad-reading a:not([class*= * "wp-block-button"])` in article-detail/css/article-detail.css, chosen * over inventing new ones so every reading surface underlines the same way. * * `.gb-accordion-text a` is added alongside `.bppm-info-accordion__content * a` (same (0,1,1) specificity, so both apply independently rather than one * overriding the other) because the product's `gb-accordion-text` markup * also renders a second time, unwrapped, further down this same template * (confirmed live: `.product > .clear > .wp-block-genesis-blocks-gb- * accordion > details > .gb-accordion-text a`, a real visible element, * `getBoundingClientRect()` off-screen only by page length, not hidden). * That duplicate render is a separate, pre-existing template bug -- the * product's full `post_content` printing twice -- outside a CSS-only fix * and outside this task's file ownership; flagged in the PR/task notes, * not silently left blue here since it is the same visible-link defect the * reviewer measured. * * Links inside a panel were rendering in the browser default blue, * rgb(40, 114, 250), which is neither the theme's colour nor legible against * the design. Green at 5.14:1 on white, the same value this file already uses * for its own link class. */ .bppm-info-accordion__content a, .gb-accordion-text a { color: var(--wp--preset--color--bhp-green, #247B4E); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .bppm-info-accordion__content a:hover, .bppm-info-accordion__content a:focus-visible, .gb-accordion-text a:hover, .gb-accordion-text a:focus-visible { /* source:DERIVED -- embedded body-content link, default already green (no Figma hover delta to reuse/extrapolate for this element). Underline-thickness-only affordance; text-decoration-thickness is a paint property, not a layout one, so this does not violate the proven negative (no box resize/reflow on hover). */ text-decoration-thickness: 2px; } .bppm-info-accordion__content ul, .bppm-info-accordion__content ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; } .bppm-info-accordion__content img { max-width: 100%; height: auto; } .bppm-info-accordion__link { color: var(--wp--preset--color--bhp-green, #247B4E); /* 5.14:1 on white, WCAG AA */ font-weight: 700; text-decoration: underline; } .bppm-info-accordion__placeholder { font-style: italic; opacity: 0.75; margin: 0; } /* Divider, Figma imageRef b999c7fc1b4732d3080a26fb69eb4bfc7cd3f07c, already exported to disk at custom/assets/category-page/bcp-faq-separator.png (see category-page.php's CT-07 comment on this exact imageRef) -- reused here rather than exporting a duplicate binary. Native export is 1794x61; Figma places it at a 2px rendered height with 30% opacity. */ .bppm-info-accordion__divider { height: 2px; background-image: url('../assets/category-page/bcp-faq-separator.png'); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0.3; } /* The product's own block titles, kept as subheads inside a panel. A product carries several source rows for one Figma row (Composition and Nutritional Facts both land under Ingredients), so each keeps its name rather than the panel running them together as one unlabelled wall of text. */ .bppm-info-accordion__subhead { font-family: var(--wp--preset--font-family--bhp-heading, "Nominee", sans-serif); font-weight: 900; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--bhp-green, #247B4E); margin: 0; } /* The OneTribe "trees protected" counter embedded in the long description (an from apixel.onetribeglobal.com inside a link, no plugin on either site). The description used to carry its own