/* ============================================================================= * bn-globals.css — Black Note design system (project_42) * ----------------------------------------------------------------------------- * ADDITIVE / OPT-IN. Styles ONLY our namespaced `.bn-*` classes, inside a `.bnds` * token scope. NO bare-tag reset. NO prose/auto-styling. It is therefore safe to * load site-wide or drop on any page — it cannot affect anything that isn't * explicitly class-named `.bn-*`. (Bare tags are only styled WHEN they live inside * one of our `.bn-*` components, e.g. an answer's

inside `.bn-fa` — contained.) * * Structure: * .bnds = token scope + design-system region marker (wraps components) * .bnds .bn-… = the actual namespaced components * Patterns bring their own `.bnds` wrapper, so components resolve the tokens. * ========================================================================== */ /* ============================================================================= * 1. TOKENS — CSS variables on .bnds. Variables don't style anything by * themselves, so this touches nothing. * ========================================================================== */ .bnds{ --blue:#255373; --blue-d:#1E425C; --blue-deep:#16334A; --blue-l:#5C8CAD; --gold:#D19138; --gold-l:#E3BD87; --gold-bright:#E0A948; --brown:#5A3B36; --brown-l:#997873; --cream:#F8F4EE; --tint:#F6ECDD; --white:#FFFFFF; --err:#B23A2E; --ok:#4F7355; --hair:#E6DCC8; --serif:"Source Serif 4",Georgia,serif; --ui:"Montserrat",system-ui,sans-serif; --body:"Source Sans 3",system-ui,sans-serif; } /* ============================================================================= * 2. FAQ ACCORDION — .bn-faq wrapper + .bn-fitem / .bn-fq / .bn-fa (JS-toggled) * ========================================================================== */ .bnds.bn-faq{ max-width:none; margin-top:50px; } .bnds.module-single-faq > div{ max-width:1200px; margin-inline:auto; } /* project_47: was 1080 — relaxed to the 1200 container (Gerald 2026-07-23) */ /* Section heading — LAYOUT ONLY. The heading carries `bn-h2` in the markup (inc/faq.php, the FAQ block pattern in inc/bn-patterns.php, and the FAQ-group module), so face / weight / size / colour all come from the bn-h2 token and a change there reaches every FAQ on the site. ⚠ Do NOT re-add type declarations here: this selector is (0,3,1) and would out-specify .bn-h2 (0,1,0), silently freezing FAQ headings at whatever value was copied in — the exact propagation failure this migration exists to fix. The old mobile step-down (25px) went with them: bn-h2 has no responsive variant, so FAQ headings now match every other H2 at every width. */ .bnds.bn-faq > .bn-faq-title, .bnds.bn-faq > h2, .bnds.bn-faq > .wp-block-group__inner-container > h2{ text-align:left !important; margin:.125rem 0 1rem !important; } .bnds .bn-fitem{ padding:.875rem 0; border-bottom:1px solid rgba(90,59,54,.14); margin:0; } .bnds .bn-fq, body.single-post .bnds .bn-fq, body.page-acf .bnds .bn-fq{ /* doubled: body.single-post/page-acf h3 legacy rules (0,2,2 !important) out-specified the bare token (0,2,0) on blog + ACF pages */ position:relative; padding-left:1.75rem; cursor:pointer; display:block; font-family:var(--serif) !important; font-weight:600 !important; font-size:1.125rem !important; /* 18px */ line-height:1.35; color:var(--blue) !important; margin:0 !important; text-align:left; } .bnds .bn-fq a{ color:var(--blue-l) !important; } .bnds .bn-fq::before{ content:""; position:absolute; left:.2rem; top:.55em; width:.5rem; height:.5rem; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-135deg); transition:transform .2s ease; } .bnds .bn-fitem.is-open .bn-fq::before{ transform:rotate(45deg); } .bnds .bn-fa{ padding-left:1.75rem; margin:.375rem 0 0 !important; font-family:var(--body) !important; font-size:1.125rem !important; color:var(--brown) !important; line-height:1.5; } .bnds .bn-fa p{ margin:0 0 .75rem !important; font-family:var(--body) !important; color:var(--brown) !important; } .bnds .bn-fa p:last-child{ margin-bottom:0 !important; } .bnds .bn-fa a{ color:var(--blue-l) !important; } .bnds .bn-fa strong{ font-weight:700 !important; } .bnds .bn-fa ul{ list-style:disc !important; padding-left:1.25rem !important; margin:.5rem 0 !important; } .bnds .bn-fa ol{ list-style:decimal !important; padding-left:1.25rem !important; margin:.5rem 0 !important; } .bnds .bn-fa li{ display:list-item !important; margin:.25rem 0 !important; font-family:var(--body) !important; color:var(--brown) !important; } .bnds .bn-fitem .bn-fa{ display:none; } .bnds .bn-fitem.is-open .bn-fa{ display:block; } @media (prefers-reduced-motion:reduce){ .bnds .bn-fq::before{ transition:none; } } /* FAQ as a Gutenberg pattern using core

(zero-JS). Gated by .bn-faq. */ .bnds.bn-faq .wp-block-details{ margin:0; padding:.875rem 0; border-bottom:1px solid rgba(90,59,54,.14); } .bnds.bn-faq .wp-block-details summary{ list-style:none; cursor:pointer; position:relative; padding-left:1.75rem; font-family:var(--serif) !important; font-weight:600 !important; font-size:1.125rem !important; line-height:1.35; color:var(--blue) !important; } .bnds.bn-faq .wp-block-details summary::-webkit-details-marker{ display:none; } .bnds.bn-faq .wp-block-details summary::marker{ content:""; } .bnds.bn-faq .wp-block-details summary::before{ content:""; position:absolute; left:.2rem; top:.5em; width:.5rem; height:.5rem; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(-135deg); transition:transform .2s ease; } .bnds.bn-faq .wp-block-details[open] summary::before{ transform:rotate(45deg); } .bnds.bn-faq .wp-block-details summary a{ color:var(--blue-l) !important; } .bnds.bn-faq .wp-block-details > *:not(summary){ padding-left:1.75rem; margin-top:.375rem; font-family:var(--body) !important; font-size:1.125rem !important; color:var(--brown) !important; line-height:1.5; } .bnds.bn-faq .wp-block-details:not([open]) > *:not(summary){ display:none !important; } /* ============================================================================= * 3. SECTION HEADER PARTS — .bnds-eyebrow / .bn-headline / .bn-subhead * (renamed off the generic .eyebrow/.headline/.text that collided with the * ACF module system). Centered by default; page can override. * ========================================================================== */ .bnds .bnds-eyebrow{ display:block; text-align:center; margin:0 0 .5rem; } .bnds .bnds-eyebrow span{ display:inline-block; font-family:var(--ui) !important; font-weight:700 !important; font-size:.875rem !important; /* 14px */ letter-spacing:.14em !important; text-transform:uppercase; line-height:1.2 !important; color:var(--gold) !important; border-bottom:1px solid var(--blue) !important; padding:0 0 .25rem !important; } .bnds .bn-headline{ display:block; text-align:center; margin:0 0 .25rem; } .bnds .bn-headline h1, .bnds .bn-headline h2, .bnds .bn-headline h3{ font-family:var(--serif) !important; color:var(--blue); text-align:center; margin:0; } body.single-faq .bnds .bn-headline h1{ font-size:42px !important; } .bnds .bn-subhead{ display:block; text-align:center; margin:.25rem 0 1.25rem; font-family:var(--serif) !important; font-weight:600 !important; font-size:1.5rem !important; /* 24px */ color:var(--ok) !important; line-height:1.25; } .bnds .bn-subhead h1,.bnds .bn-subhead h2,.bnds .bn-subhead h3,.bnds .bn-subhead h4{ font-family:var(--serif) !important; font-weight:600 !important; font-size:1.5rem !important; color:var(--ok) !important; line-height:1.25; margin:0; } /* ============================================================================= * 4. CHIPS / PILLS — .bn-chips / .bn-chip (.is-on active). Matches blog chips. * ========================================================================== */ .bnds .bn-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:20px 0 6px; } .bnds .bn-chip{ display:inline-block; font-family:var(--ui) !important; font-weight:600; font-size:13.5px; color:var(--blue) !important; border:1px solid var(--hair); border-radius:999px; padding:9px 18px; text-decoration:none !important; background:var(--cream); transition:background .15s, color .15s; } .bnds .bn-chip:hover{ background:var(--gold-l); border-color:var(--gold-l); color:var(--blue-d) !important; } .bnds .bn-chip.is-on{ background:var(--blue); border-color:var(--blue); color:#fff !important; } /* ============================================================================= * 5. HEADINGS + BUTTONS (block patterns) — .bn-h1/2/3, .bn-btn-dark/white * ========================================================================== */ .bnds .bn-h1,.bnds .bn-h2,.bnds .bn-h3{ text-align:left !important; } .bnds .bn-h1{ font-family:var(--serif) !important; font-weight:700 !important; font-size:2.75rem !important; color:var(--blue); line-height:1.1; margin:0; } /* 44px — matched to /bn-design/ .t-hero */ .bnds .bn-h2{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.875rem !important; color:var(--blue); line-height:1.18; margin:0; } /* 30px */ .bnds .bn-h3{ font-family:var(--serif) !important; font-weight:600 !important; font-size:1.5rem !important; color:var(--blue); line-height:1.25; margin:0; } /* 24px */ .bnds .bn-btn-dark .wp-block-button__link, .bnds .bn-btn-white .wp-block-button__link{ font-family:var(--ui) !important; font-weight:700 !important; font-size:.9375rem !important; padding:.75rem 1.6rem !important; border-radius:8px !important; border:2px solid var(--blue) !important; text-decoration:none !important; display:inline-block; transition:background .15s, color .15s, border-color .15s; } .bnds .bn-btn-dark .wp-block-button__link{ background:var(--blue) !important; color:#fff !important; } .bnds .bn-btn-dark .wp-block-button__link:hover{ background:var(--blue-d) !important; border-color:var(--blue-d) !important; } .bnds .bn-btn-white .wp-block-button__link{ background:var(--white) !important; color:var(--blue) !important; } /* hover: fill solid blue with white text (like the dark button) */ .bnds .bn-btn-white .wp-block-button__link:hover{ background:var(--blue) !important; color:#fff !important; border-color:var(--blue) !important; } /* ============================================================================= * 6. DIVIDERS — .bnds-divider (gold faded hairline = section change) / * .bn-rowhair (faint line = rows inside one section). From /bn-design/ §07. * ========================================================================== */ .bnds .bnds-divider{ height:1px !important; border:0 !important; margin:.875rem 0; background:linear-gradient(to right,transparent,rgba(209,145,56,.3) 16%,rgba(209,145,56,.3) 84%,transparent) !important; } .bnds .bn-rowhair{ height:1px !important; border:0 !important; margin:.875rem 0; background:rgba(90,59,54,.12) !important; } /* ============================================================================= * 7. TABLE — .bn-table on a core Table block (figure.wp-block-table.bn-table). * Rounded, blue header, cream rows, blue label column. Fully editable — the * client adds/removes columns & rows in the block editor. Mobile = scroll. * ========================================================================== */ .bnds .bn-table{ margin:0; } .bnds .bn-table table{ width:100%; border-collapse:separate !important; border-spacing:0 !important; border:1px solid var(--hair) !important; border-radius:14px; overflow:hidden; font-family:var(--body); } .bnds .bn-table th{ background:var(--blue) !important; color:#fff !important; font-family:var(--ui) !important; font-weight:600 !important; font-size:1rem !important; /* R2: >=16px */ letter-spacing:.04em; text-transform:uppercase; text-align:left; padding:.6875rem .9375rem !important; border:0 !important; } .bnds .bn-table td{ font-family:var(--body) !important; font-size:1rem !important; color:#3a2f2c !important; text-align:left; padding:.6875rem .9375rem !important; border:0 !important; border-top:1px solid rgba(90,59,54,.1) !important; background:var(--cream) !important; } .bnds .bn-table td:first-child{ font-family:var(--ui) !important; font-weight:600 !important; color:var(--blue) !important; } /* Mobile: stack each row into a card — blend name = title band, remaining cells become "Label: value" rows. Labels come from data-label (injected from by the bnTableStack script, since the core Table block has no data-label). */ @media (max-width:760px){ .bnds .bn-table{ overflow:visible; } .bnds .bn-table table{ border:0 !important; border-radius:0 !important; } .bnds .bn-table thead{ display:none; } .bnds .bn-table tbody, .bnds .bn-table tr, .bnds .bn-table td{ display:block; width:100%; } .bnds .bn-table tr{ border:1px solid var(--hair) !important; border-radius:14px; overflow:hidden; margin:0 0 1rem !important; background:var(--white); } .bnds .bn-table tr:last-child{ margin-bottom:0 !important; } .bnds .bn-table td{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; text-align:right; background:var(--white) !important; color:var(--brown) !important; border:0 !important; border-top:1px solid rgba(90,59,54,.1) !important; padding:.625rem .9375rem !important; font-size:1rem !important; } .bnds .bn-table td::before{ content:attr(data-label); text-align:left; flex:0 0 auto; font-family:var(--ui) !important; font-weight:600 !important; font-size:1rem !important; /* R2 */ letter-spacing:.04em; text-transform:uppercase; color:var(--blue) !important; } .bnds .bn-table td:first-child{ display:block; text-align:left; border-top:0 !important; background:var(--cream) !important; padding:.75rem .9375rem !important; font-family:var(--serif) !important; font-weight:700 !important; font-size:1.125rem !important; color:var(--blue) !important; } .bnds .bn-table td:first-child::before{ content:none !important; } } /* ============================================================================= * 8. CARDS — .bnds-card (white, 14px, hairline, hover-lift). Put inside core * Columns for an editable column count. * ========================================================================== */ .bnds .bnds-card{ background:var(--white); border:1px solid var(--hair); border-radius:14px; padding:1.5rem 1.375rem; box-shadow:0 1px 3px rgba(0,0,0,.05); transition:box-shadow .15s ease, transform .15s ease; text-align:center; } .bnds .bnds-card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.10); } /* title = Montserrat 600 18px blue (R2 §9: NOT serif, not the old gold-uppercase) */ .bnds .bnds-card :is(h1,h2,h3,h4,h5,h6){ font-family:var(--ui) !important; font-weight:600 !important; font-size:18px !important; color:var(--blue) !important; text-align:center !important; margin:0 0 .625rem !important; } .bnds .bnds-card p{ font-family:var(--body) !important; font-size:1rem !important; color:var(--brown) !important; line-height:1.55; margin:0; text-align:center; } /* Cream "fold" — a section band (cream bg); white cards sit on it. Self-contained (hard color) so it works whether or not inside a .bnds scope. */ .wp-block-group.is-style-bn-cream{ background:#F8F4EE !important; border-radius:16px; padding:clamp(1.25rem,4vw,2rem) !important; } .wp-block-group.is-style-bn-cream > .wp-block-group__inner-container{ background:transparent; } /* White fold — white band w/ hairline; cards step to cream on it. */ .wp-block-group.is-style-bn-white{ background:#fff !important; border:1px solid #E6DCC8; border-radius:16px; padding:clamp(1.25rem,4vw,2rem) !important; } .wp-block-group.is-style-bn-white .bnds-card{ background:#F8F4EE !important; } /* ============================================================================= * 9. BADGES / PILLS — .bnds-pill (+ promo .bn-best/.bn-new/.bn-sale, stock * .bn-in/.bn-low/.bn-out with .bnds-pill-dot, attribute .bn-attr) * ========================================================================== */ .bnds .bnds-pills{ display:flex; gap:.5625rem; flex-wrap:wrap; margin-bottom:.625rem; } .bnds .bnds-pill{ font-family:var(--ui) !important; font-weight:700; font-size:1rem; letter-spacing:.05em; /* R2 16px */ text-transform:uppercase; padding:.3125rem .75rem; border-radius:999px; display:inline-flex; align-items:center; gap:.375rem; } .bnds .bnds-pill-dot{ width:.4375rem; height:.4375rem; border-radius:50%; display:inline-block; } .bnds .bn-best{ background:var(--gold); color:#4a3326; } .bnds .bn-new{ background:var(--blue); color:#fff; } .bnds .bn-sale{ background:var(--err); color:#fff; } .bnds .bn-in{ background:rgba(79,115,83,.16); color:#34512f; border:1px solid rgba(79,115,83,.55); } .bnds .bn-in .bnds-pill-dot{ background:var(--ok); } .bnds .bn-low{ background:rgba(209,145,56,.2); color:#6e4d12; border:1px solid rgba(209,145,56,.6); } .bnds .bn-low .bnds-pill-dot{ background:var(--gold); } .bnds .bn-out{ background:var(--white); color:#6b6256; border:1px solid #b9ac95; } .bnds .bn-out .bnds-pill-dot{ background:#9a8e78; } .bnds .bn-attr{ background:var(--white); border:1.5px solid #d8cbb2; color:var(--blue); } /* Badges/pills as core Button STYLE VARIATIONS (editable, no HTML). Self-contained so they work anywhere — client adds a Buttons row, picks a color per button. */ .wp-block-button[class*="is-style-bn-badge"] .wp-block-button__link, .wp-block-button[class*="is-style-bn-pill"] .wp-block-button__link{ font-family:"Montserrat",system-ui,sans-serif !important; font-weight:700 !important; font-size:1rem !important; /* 16px */ letter-spacing:.05em !important; text-transform:uppercase !important; line-height:1.65 !important; /* matches /bn-design/ .pill (inherited 1.65) — taller pill */ padding:.3125rem .75rem !important; border-radius:999px !important; border:0; min-height:0 !important; } .wp-block-button.is-style-bn-badge-gold .wp-block-button__link{ background:#D19138 !important; color:#4a3326 !important; } .wp-block-button.is-style-bn-badge-blue .wp-block-button__link{ background:#255373 !important; color:#fff !important; } .wp-block-button.is-style-bn-badge-red .wp-block-button__link{ background:#B23A2E !important; color:#fff !important; } .wp-block-button.is-style-bn-pill-attr .wp-block-button__link{ background:#fff !important; color:#255373 !important; border:1.5px solid #d8cbb2 !important; } .wp-block-button.is-style-bn-pill-in .wp-block-button__link{ background:rgba(79,115,83,.16) !important; color:#34512f !important; border:1px solid rgba(79,115,83,.55) !important; } .wp-block-button.is-style-bn-pill-low .wp-block-button__link{ background:rgba(209,145,56,.2) !important; color:#6e4d12 !important; border:1px solid rgba(209,145,56,.6) !important; } .wp-block-button.is-style-bn-pill-out .wp-block-button__link{ background:#fff !important; color:#6b6256 !important; border:1px solid #b9ac95 !important; } .wp-block-button[class*="is-style-bn-pill-"] .wp-block-button__link::before{ content:""; display:inline-block; width:.4375rem; height:.4375rem; border-radius:50%; margin-right:.375rem; vertical-align:middle; } .wp-block-button.is-style-bn-pill-attr .wp-block-button__link::before{ display:none; } .wp-block-button.is-style-bn-pill-in .wp-block-button__link::before{ background:#4F7355; } .wp-block-button.is-style-bn-pill-low .wp-block-button__link::before{ background:#D19138; } .wp-block-button.is-style-bn-pill-out .wp-block-button__link::before{ background:#9a8e78; } /* Spacing for BN badge/pill rows so pills never touch — row + column gap inside a row (wrapped pills get vertical breathing room too), plus even rhythm between stacked rows. margin-top is NOT !important so the client's Margin control wins. */ .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-badge"]), .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-pill"]){ gap:.5rem .5625rem !important; } .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-badge"]) + .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-badge"]), .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-pill"]) + .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-pill"]), .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-badge"]) + .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-pill"]), .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-pill"]) + .wp-block-buttons:has(.wp-block-button[class*="is-style-bn-badge"]){ margin-top:.875rem; } /* ============================================================================= * 10. ALERTS / BANNERS — .bn-alert (+ .bn-a-ok/.bn-a-err/.bn-a-warn/.bn-a-info, * .bn-ic icon), .bn-topbar (nicotine warning), .bn-shipbar (free shipping) * ========================================================================== */ /* Alerts as core Paragraph STYLE VARIATIONS (editable, no HTML). Icon = ::before. Self-contained so a plain paragraph anywhere becomes an alert when styled. */ /* Icon is absolutely positioned so the text (bold lead + the rest) flows as ONE continuous block that wraps naturally — NOT flex (flex split and the trailing text into two columns). */ .is-style-bn-alert-ok, .is-style-bn-alert-err, .is-style-bn-alert-warn, .is-style-bn-alert-info{ position:relative; padding:.75rem .9375rem .75rem 2.625rem !important; border-radius:10px; border-left:4px solid; font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1rem !important; line-height:1.45; } .is-style-bn-alert-ok::before, .is-style-bn-alert-err::before, .is-style-bn-alert-warn::before, .is-style-bn-alert-info::before{ position:absolute; left:.9375rem; top:.85rem; font-family:"Montserrat",system-ui,sans-serif; font-weight:700; width:1.1875rem; height:1.1875rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.75rem; flex:0 0 auto; } .is-style-bn-alert-ok{ background:rgba(79,115,83,.12); border-color:#4F7355; color:#33502f; } .is-style-bn-alert-ok::before{ content:"\2713"; background:#4F7355; } .is-style-bn-alert-err{ background:rgba(178,58,46,.1); border-color:#B23A2E; color:#8a2f26; } .is-style-bn-alert-err::before{ content:"!"; background:#B23A2E; } .is-style-bn-alert-warn{ background:rgba(209,145,56,.14); border-color:#D19138; color:#7a5618; } .is-style-bn-alert-warn::before{ content:"!"; background:#D19138; color:#4a3326; } .is-style-bn-alert-info{ background:rgba(37,83,115,.1); border-color:#255373; color:#1f4361; } .is-style-bn-alert-info::before{ content:"i"; background:#255373; } .bnds .bn-topbar{ background:#1c1c1c; color:#fff; font-family:var(--ui); font-weight:600; font-size:1rem; text-align:center; padding:.625rem; border-radius:8px; margin-bottom:.5rem; } .bnds .bn-shipbar{ background:var(--blue); color:#fff; font-family:var(--ui); font-weight:600; font-size:1rem; text-align:center; padding:.625rem; border-radius:8px; } /* ============================================================================= * 11. LISTS — ul.bn-dot (gold dots), ul.bn-chk (gold checks), ol.bn-step (steps) * ========================================================================== */ .bnds ul.bn-dot, .bnds ul.bn-chk, .bnds ol.bn-step{ list-style:none !important; padding-left:0 !important; margin:0 !important; } .bnds ul.bn-dot li, .bnds ul.bn-chk li{ position:relative; display:block; margin-bottom:.5rem; padding-left:1.625rem; font-family:var(--body) !important; font-size:1.125rem !important; color:var(--brown) !important; line-height:1.5; } .bnds ul.bn-dot li::before{ content:""; position:absolute; left:0; top:.6rem; width:.4375rem; height:.4375rem; border-radius:50%; background:var(--gold); } .bnds ul.bn-chk li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; } .bnds ol.bn-step{ counter-reset:s; } .bnds ol.bn-step li{ position:relative; display:block; padding-left:2.5rem; margin-bottom:.75rem; font-family:var(--body) !important; font-size:1.125rem !important; color:var(--brown) !important; line-height:1.5; } .bnds ol.bn-step li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--ui); font-weight:700; font-size:.875rem; display:flex; align-items:center; justify-content:center; } /* ============================================================================= * 12. FEATURED TESTIMONIAL — .bn-feat (dark blue band) + stars/avatar/footer * ========================================================================== */ /* Featured review as a core Quote STYLE VARIATION (editable, no HTML). Self-contained. Client types the quote + a citation (name); dark band + 5 gold stars via CSS. */ .wp-block-quote.is-style-bn-featured{ background:#255373 !important; color:#fff !important; border:0 !important; border-left:0 !important; border-radius:14px !important; padding:1.75rem !important; margin:0; } .wp-block-quote.is-style-bn-featured::before{ content:"\2605\2605\2605\2605\2605"; display:block !important; color:#D19138; font-size:.875rem; letter-spacing:2px; line-height:1; margin:0 0 .5rem !important; padding:0 !important; /* reset anything the theme's decorative blockquote::before might leak in */ white-space:nowrap !important; writing-mode:horizontal-tb !important; width:auto !important; height:auto !important; float:none !important; position:static !important; text-align:center; text-indent:0 !important; } .wp-block-quote.is-style-bn-featured p{ font-family:"Source Serif 4",Georgia,serif !important; font-size:1.375rem !important; line-height:1.4; color:#fff !important; margin:0 0 .5rem !important; } .wp-block-quote.is-style-bn-featured cite{ font-family:"Montserrat",system-ui,sans-serif !important; font-weight:700 !important; font-style:normal !important; font-size:1rem !important; color:#fff !important; display:block; margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.18); } /* Structured featured review (PATTERN "BN — Featured review") — LEFT aligned, with stars, quote, hairline, and an avatar + name + Verified-buyer footer row. Group carries `bnds bnds-review` (both on one element) so use compound `.bnds.bnds-review`. The group renders a .wp-block-group__inner-container wrapper on this theme. */ .bnds.bnds-review{ background:var(--blue) !important; color:#fff !important; border:0 !important; border-radius:16px !important; padding:1.875rem 2rem !important; margin:0; } .bnds.bnds-review .bn-rvstars{ color:var(--gold) !important; font-size:1.25rem !important; letter-spacing:3px; /* R2 20px */ line-height:1; margin:0 0 .875rem !important; text-align:left; } .bnds.bnds-review .bn-rvquote{ font-family:var(--serif) !important; font-weight:400 !important; font-style:normal !important; font-size:1.375rem !important; line-height:1.45 !important; color:#fff !important; margin:0 0 1.125rem !important; text-align:left; } .bnds.bnds-review .bn-rvhr{ border:0 !important; border-top:1px solid rgba(255,255,255,.18) !important; background:none !important; margin:0 0 1.125rem !important; } .bnds.bnds-review .bn-rvfoot > .wp-block-group__inner-container{ display:flex !important; align-items:center; gap:.9375rem; } .bnds.bnds-review .bn-rvavatar{ flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:50%; background:linear-gradient(135deg,#5C8CAD,#255373) !important; /* R2 standard gradient */ border:2px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; font-family:var(--ui) !important; font-weight:700 !important; font-size:.875rem !important; color:#fff !important; margin:0 !important; letter-spacing:.01em; } .bnds.bnds-review .bn-rvname{ font-family:var(--ui) !important; font-weight:700 !important; font-size:1rem !important; color:#fff !important; line-height:1.2; margin:0 !important; text-align:left; } .bnds.bnds-review .bn-rvverified{ font-family:var(--ui) !important; font-weight:700 !important; font-size:1rem !important; /* R2 16px */ letter-spacing:.08em; text-transform:uppercase; color:var(--gold) !important; line-height:1; margin:.2rem 0 0 !important; text-align:left; } /* ============================================================================= * 13. BODY TEXT — .is-style-bn-body (one paragraph) + .is-style-bn-content * (a Group the client marks as prose; everything inside auto-styles). * Self-contained + opt-in (only affects blocks the client picks the style for). * ========================================================================== */ .is-style-bn-body{ font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.0625rem !important; line-height:1.65 !important; color:#5A3B36 !important; } .is-style-bn-content{ font-family:"Source Sans 3",system-ui,sans-serif; color:#5A3B36; } .is-style-bn-content :is(h1,h2,h3,h4){ font-family:"Source Serif 4",Georgia,serif !important; color:#255373 !important; line-height:1.2; } .is-style-bn-content h1{ font-size:2.75rem !important; font-weight:700 !important; margin:0 0 .5em !important; } /* 44px */ .is-style-bn-content h2{ font-size:1.875rem !important; font-weight:700 !important; margin:1.4em 0 .4em !important; } .is-style-bn-content h3{ font-size:1.5rem !important; font-weight:600 !important; margin:1.3em 0 .35em !important; } .is-style-bn-content h4{ font-size:1.25rem !important; font-weight:600 !important; margin:1.2em 0 .3em !important; } .is-style-bn-content p{ font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.0625rem !important; line-height:1.65 !important; color:#5A3B36 !important; margin:0 0 1em !important; } .is-style-bn-content a{ color:#5C8CAD !important; text-decoration:underline; } .is-style-bn-content strong{ font-weight:700 !important; } .is-style-bn-content em{ font-style:italic !important; } .is-style-bn-content ul{ list-style:disc !important; padding-left:1.4em !important; margin:0 0 1em !important; } .is-style-bn-content ol{ list-style:decimal !important; padding-left:1.4em !important; margin:0 0 1em !important; } .is-style-bn-content li{ display:list-item !important; margin:.35em 0 !important; font-family:"Source Sans 3",system-ui,sans-serif !important; color:#5A3B36 !important; } .is-style-bn-content blockquote{ border-left:3px solid #D19138; padding:.3em 0 .3em 1.1em; margin:1em 0 1.2em; color:#997873; font-style:italic; } /* ============================================================================= * 14. SPACING — vertical rhythm between elements. * Two ways to use, both fully namespaced (only touch the block they're on): * (a) Utility class: add .bn-space-sm|md|lg|xl in a block's * Advanced -> Additional CSS class(es). Pushes THAT block down. * (b) BN Spacer: insert a core Spacer block, pick "BN Spacer -> ..." in the * Styles panel. Fixed, on-brand height (overrides the drag height). * Scale lives on .bnds; utilities carry a hard px fallback so they still work * outside a .bnds region. * ========================================================================== */ .bnds{ --sp-xs:8px; --sp-sm:16px; --sp-md:28px; --sp-lg:48px; --sp-xl:80px; } /* (a) margin utilities — additive top gap on the element they're placed on */ .bn-space-xs{ margin-top:var(--sp-xs,8px) !important; } .bn-space-sm{ margin-top:var(--sp-sm,16px) !important; } .bn-space-md{ margin-top:var(--sp-md,28px) !important; } .bn-space-lg{ margin-top:var(--sp-lg,48px) !important; } .bn-space-xl{ margin-top:var(--sp-xl,80px) !important; } /* (b) core Spacer block style variations — fixed BN heights */ .wp-block-spacer.is-style-bn-sp-xs{ height:var(--sp-xs,8px) !important; } .wp-block-spacer.is-style-bn-sp-sm{ height:var(--sp-sm,16px) !important; } .wp-block-spacer.is-style-bn-sp-md{ height:var(--sp-md,28px) !important; } .wp-block-spacer.is-style-bn-sp-lg{ height:var(--sp-lg,48px) !important; } .wp-block-spacer.is-style-bn-sp-xl{ height:var(--sp-xl,80px) !important; } /* ============================================================================= * 15. BREADCRUMBS — .bn-crumbs (a Paragraph). Muted links, gold "/" separators * auto-inserted via ::before (so the client edits only the items, no manual * slashes), blue current page via .bn-cur. From /bn-design/ .bc. * ========================================================================== */ .bnds .bn-crumbs{ font-family:var(--ui) !important; font-size:.8125rem !important; font-weight:600 !important; letter-spacing:.02em; line-height:1.5; color:var(--brown-l) !important; margin:0 0 1rem !important; } .bnds .bn-crumbs a{ color:var(--brown-l) !important; text-decoration:none !important; } .bnds .bn-crumbs a:hover{ color:var(--blue) !important; } .bnds .bn-crumbs > *:not(:first-child)::before{ content:"/"; color:var(--gold) !important; margin:0 .5rem; font-weight:600; text-decoration:none; display:inline-block; } .bnds .bn-crumbs .bn-cur{ color:var(--blue) !important; } /* ============================================================================= * 16. ZERO-REVIEW EMPTY STATE — .bnds-empty (cream box). Muted stars + prompt + * a "Write a review" outline button (reuses .bn-btn-white). Group carries * both classes, so compound .bnds.bnds-empty. * ========================================================================== */ .bnds.bnds-empty{ background:var(--cream) !important; border:1px solid var(--hair) !important; border-radius:12px !important; padding:1.25rem 1.375rem !important; width:fit-content !important; max-width:100% !important; /* size to content, not full width */ } .bnds.bnds-empty .bnds-empty-line{ font-family:var(--body) !important; font-size:1rem !important; color:var(--brown) !important; margin:0 0 1rem !important; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap; } .bnds.bnds-empty .bnds-empty-stars{ color:#C9BEA9 !important; letter-spacing:3px; font-size:1rem; } .bnds.bnds-empty .wp-block-button__link{ text-transform:uppercase; letter-spacing:.06em; } /* ============================================================================= * 17. PRODUCT CARD — .bnds-pcard (shop tile). White card, white image area, * overlay badge, gold stars + count, serif name, price (strikethrough on * sale), full-width Add-to-cart. Namespaced off the demo's generic .pc/.badge. * ========================================================================== */ .bnds .bnds-pcard{ position:relative; background:#fff !important; border:1px solid var(--hair); border-radius:14px; overflow:hidden; } .bnds .bnds-pcard > .wp-block-group__inner-container{ display:flex; flex-direction:column; } .bnds .bnds-pcard .bnds-pimg{ background:#fff !important; aspect-ratio:16/10; border:0; border-bottom:1px solid var(--hair); margin:0; } .bnds .bnds-pcard .bnds-pimg img{ width:100%; height:100%; object-fit:contain; } .bnds .bnds-pcard .bnds-pbadge{ position:absolute; top:.75rem; left:.75rem; z-index:2; margin:0 !important; font-family:var(--ui) !important; font-weight:700 !important; font-size:.6875rem !important; letter-spacing:.05em; text-transform:uppercase; padding:.3125rem .75rem !important; border-radius:999px; } .bnds .bnds-pcard .bnds-pbadge.is-best{ background:var(--gold) !important; color:#4a3326 !important; } .bnds .bnds-pcard .bnds-pbadge.is-new { background:var(--blue) !important; color:#fff !important; } .bnds .bnds-pcard .bnds-pbadge.is-sale{ background:var(--err) !important; color:#fff !important; } .bnds .bnds-pcard .bnds-pbody{ padding:.9375rem 1.125rem 1.125rem !important; } .bnds .bnds-pcard .bnds-pbody > .wp-block-group__inner-container{ display:flex; flex-direction:column; } .bnds .bnds-pcard .bnds-pstars{ color:var(--gold) !important; font-size:.9375rem !important; letter-spacing:1px; margin:0 0 .25rem !important; } .bnds .bnds-pcard .bnds-pstars .cnt{ color:var(--brown-l) !important; font-family:var(--ui) !important; font-size:.8125rem !important; letter-spacing:0; } .bnds .bnds-pcard .bnds-pname{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.125rem !important; color:var(--blue) !important; margin:.0625rem 0 .25rem !important; } .bnds .bnds-pcard .bnds-pprice{ font-family:var(--ui) !important; font-weight:700 !important; font-size:1.0625rem !important; color:var(--brown) !important; margin:0 0 .75rem !important; } .bnds .bnds-pcard .bnds-pprice s{ color:var(--brown-l) !important; font-weight:400 !important; margin-right:.4375rem; } .bnds .bnds-pcard .wp-block-buttons, .bnds .bnds-pcard .wp-block-button{ width:100%; margin:0; } .bnds .bnds-pcard .bn-btn-dark .wp-block-button__link{ width:100%; display:block; text-align:center; text-transform:uppercase; letter-spacing:.05em; } /* ============================================================================= * 18. REVIEW CARD — .bnds-rvcard (white card, 2-up on a cream fold). Gold stars, * serif blue title, quote, hairline, avatar + name + Verified·date footer. * ========================================================================== */ .bnds .bnds-rvcard{ background:#fff !important; border:1px solid var(--hair); border-radius:14px; padding:1.5rem 1.5rem 1.25rem !important; } .bnds .bnds-rvcard .bnds-rvc-stars{ color:var(--gold) !important; font-size:1.25rem !important; letter-spacing:2px; /* R2 20px */ margin:0 0 .5rem !important; } .bnds .bnds-rvcard .bnds-rvc-title{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.125rem !important; color:var(--blue) !important; margin:0 0 .5rem !important; } .bnds .bnds-rvcard .bnds-rvc-quote{ font-family:var(--body) !important; font-size:1rem !important; color:var(--brown) !important; line-height:1.55; margin:0 0 1.125rem !important; } .bnds .bnds-rvcard .bnds-rvc-foot{ border-top:1px solid var(--hair); padding-top:1rem !important; margin-top:auto; } .bnds .bnds-rvcard .bnds-rvc-foot > .wp-block-group__inner-container{ display:flex; align-items:center; gap:.75rem; } .bnds .bnds-rvcard .bnds-rvc-av, .bnds .bnds-rvcard .bnds-rvc-av.is-c2{ flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 !important; font-family:var(--ui) !important; font-weight:700 !important; font-size:.8125rem !important; color:#fff !important; background:linear-gradient(135deg,#5C8CAD,#255373) !important; } /* R2: one gradient for every avatar, no rotation */ .bnds .bnds-rvcard .bnds-rvc-who{ font-family:var(--ui) !important; font-weight:700 !important; font-size:1rem !important; color:var(--blue-d) !important; margin:0 !important; line-height:1.2; } .bnds .bnds-rvcard .bnds-rvc-l2{ font-family:var(--ui) !important; font-size:.75rem !important; margin:.1875rem 0 0 !important; line-height:1; } .bnds .bnds-rvcard .bnds-rvc-vb{ font-family:var(--ui) !important; color:var(--ok) !important; font-weight:700 !important; font-size:1rem !important; letter-spacing:.06em; text-transform:uppercase; } /* R2 16px */ .bnds .bnds-rvcard .bnds-rvc-date{ color:var(--brown-l) !important; } /* ============================================================================= * 19. SHARED KICKER (eyebrow) for the page-section components below — * .bnds-kick (gold uppercase + underline). Left by default. * ========================================================================== */ .bnds .bnds-kick{ display:inline-block; font-family:var(--ui) !important; font-weight:700 !important; font-size:.75rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--gold) !important; line-height:1.3; padding:0 0 .375rem !important; margin:0 0 .75rem !important; border-bottom:1px solid rgba(209,145,56,.5); } .bnds.bnds-hero .bnds-kick, .bnds.bnds-stmt .bnds-kick{ border-bottom-color:rgba(255,255,255,.3); } .bnds .bnds-arrow, .bnds .bnds-arrow a{ display:inline-block; font-family:var(--ui) !important; font-weight:600 !important; font-size:.9375rem !important; color:var(--blue-l) !important; text-decoration:none !important; border-bottom:1px solid var(--gold); padding-bottom:2px; } /* ============================================================================= * 20. HERO (dark band) — .bnds-hero. Eyebrow, serif headline, lead, primary * button (white) + secondary text link. * ========================================================================== */ .bnds.bnds-hero{ background:var(--blue) !important; border-radius:18px; padding:clamp(1.75rem,5vw,3.25rem) !important; color:#fff; } .bnds.bnds-hero .bnds-hero-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:clamp(2rem,5vw,3.25rem) !important; line-height:1.08; color:#fff !important; margin:.25rem 0 .875rem !important; } .bnds.bnds-hero .bnds-hero-lead{ font-family:var(--body) !important; font-size:1.0625rem !important; color:rgba(255,255,255,.82) !important; line-height:1.55; margin:0 0 1.5rem !important; max-width:34rem; } .bnds.bnds-hero .bnds-linkbtn .wp-block-button__link{ background:transparent !important; color:#fff !important; border:0 !important; text-decoration:underline !important; padding:.75rem .5rem !important; font-family:var(--ui) !important; font-weight:700 !important; font-size:.9375rem !important; } /* ============================================================================= * 21. IMAGE + TEXT FOLD — .bnds-fold. Image placeholder (4:3, 20px) + text col. * ========================================================================== */ .bnds .bnds-fold-img{ background:var(--tint,#F6ECDD) !important; border-radius:20px !important; aspect-ratio:4/3; display:flex !important; align-items:center; justify-content:center; margin:0; } .bnds .bnds-fold-img > .wp-block-group__inner-container{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; } .bnds .bnds-fold-ph{ font-family:var(--body) !important; color:var(--brown-l) !important; font-size:.9375rem !important; margin:0 !important; } .bnds .bnds-fold-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.75rem !important; color:var(--blue) !important; margin:0 0 .625rem !important; line-height:1.2; } .bnds .bnds-fold-body{ font-family:var(--body) !important; font-size:1.0625rem !important; color:var(--brown) !important; line-height:1.55; margin:0 0 1.125rem !important; } /* ============================================================================= * 22. STATEMENT CARD (contained blue) — .bnds-stmt. Centered eyebrow, headline, * body, outline button. * ========================================================================== */ .bnds.bnds-stmt{ background:var(--blue) !important; border-radius:18px; padding:clamp(1.75rem,5vw,3rem) !important; text-align:center; color:#fff; } .bnds.bnds-stmt .bnds-stmt-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.875rem !important; color:#fff !important; margin:0 0 .75rem !important; line-height:1.15; } .bnds.bnds-stmt .bnds-stmt-body{ font-family:var(--body) !important; font-size:1.0625rem !important; color:rgba(255,255,255,.82) !important; line-height:1.5; margin:0 auto 1.5rem !important; max-width:36rem; } .bnds.bnds-stmt .wp-block-buttons{ justify-content:center; } .bnds.bnds-stmt .wp-block-button__link{ background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.6) !important; border-radius:8px !important; font-family:var(--ui) !important; font-weight:700 !important; font-size:.9375rem !important; padding:.75rem 1.6rem !important; } .bnds.bnds-stmt .wp-block-button__link:hover{ background:rgba(255,255,255,.1) !important; } /* ============================================================================= * 23. PROOF BAND (3-up) — .bnds-proof header + .bnds-proof-card (stat / quote / * since). White cards, centered. * ========================================================================== */ .bnds .bnds-proof-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.875rem !important; color:var(--blue) !important; margin:0 0 1.25rem !important; line-height:1.18; } .bnds .bnds-proof-card{ background:#fff !important; border:1px solid var(--hair); border-radius:14px; padding:1.75rem 1.5rem !important; text-align:center; height:100%; } .bnds .bnds-proof-stars{ color:var(--gold) !important; font-size:1.6875rem !important; letter-spacing:2px; /* R2 27px */ margin:0 0 .5rem !important; } .bnds .bnds-proof-stat{ font-family:var(--serif) !important; font-weight:700 !important; font-size:2.625rem !important; /* R2 42px */ color:var(--blue) !important; margin:0 0 .375rem !important; } .bnds .bnds-proof-sub{ font-family:var(--body) !important; color:var(--brown) !important; font-size:.9375rem !important; line-height:1.45; margin:0 !important; } .bnds .bnds-proof-quote{ font-family:var(--serif) !important; font-style:italic !important; font-weight:400 !important; font-size:1.125rem !important; color:var(--blue) !important; line-height:1.4; margin:0 0 .5rem !important; } .bnds .bnds-proof-src{ font-family:var(--ui) !important; color:var(--brown-l) !important; font-size:.875rem !important; margin:0 !important; } /* ============================================================================= * 24. PROVENANCE (nine-step strip) — .bnds-prov header + .bnds-provlist (ordered * list styled as numbered blue circles, wrapping) + footnote + arrow link. * ========================================================================== */ .bnds .bnds-prov-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.75rem !important; color:var(--blue) !important; margin:0 0 .625rem !important; line-height:1.18; } .bnds .bnds-prov-body{ font-family:var(--body) !important; font-size:1.0625rem !important; color:var(--brown) !important; line-height:1.55; margin:0 0 .5rem !important; max-width:40rem; } .bnds ol.bnds-provlist{ list-style:none !important; counter-reset:bnprov; display:flex !important; flex-wrap:wrap; gap:.875rem 1.5rem; padding:0 !important; margin:1.25rem 0 !important; } .bnds ol.bnds-provlist li{ counter-increment:bnprov; display:flex !important; align-items:center; gap:.5rem; margin:0 !important; font-family:var(--ui) !important; font-weight:600 !important; font-size:.9375rem !important; color:var(--brown) !important; } .bnds ol.bnds-provlist li::before{ content:counter(bnprov); flex:0 0 auto; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--ui); font-weight:700; font-size:.8125rem; } .bnds .bnds-prov-foot{ font-family:var(--body) !important; color:var(--brown-l) !important; font-size:.9375rem !important; margin:.5rem 0 1rem !important; } /* ============================================================================= * 25. SECTION HEADER — .bnds-sechead (eyebrow + serif headline, left). * ========================================================================== */ .bnds .bnds-sechead-h{ font-family:var(--serif) !important; font-weight:700 !important; font-size:1.75rem !important; color:var(--blue) !important; margin:0 !important; line-height:1.15; } /* ============================================================================= * 26. EXPLORE LINK — .bnds-explore. Text-link CTA: blue bold + gold underline. * ========================================================================== */ .bnds .bnds-explore{ margin:0; } .bnds .bnds-explore, .bnds .bnds-explore a{ display:inline-block; font-family:var(--ui) !important; font-weight:700 !important; font-size:1rem !important; color:var(--blue) !important; text-decoration:none !important; border-bottom:2px solid var(--gold); padding-bottom:3px; line-height:1.3; } .bnds .bnds-explore a:hover{ color:var(--blue-d) !important; border-bottom-color:var(--gold-bright,#E0A948); } /* ============================================================================= * 27. ALERTS — 2 extra colors: black (nicotine warning bar) + blue (shipping * bar). Centered banner, no icon. Paragraph style variations, self-contained. * ========================================================================== */ .is-style-bn-alert-black, .is-style-bn-alert-blue{ border:0 !important; border-radius:8px !important; padding:.8125rem 1rem !important; text-align:center; font-family:"Montserrat",system-ui,sans-serif !important; font-weight:600 !important; font-size:1rem !important; color:#fff !important; line-height:1.4; } .is-style-bn-alert-black::before, .is-style-bn-alert-blue::before{ content:none !important; display:none !important; } .is-style-bn-alert-black{ background:#1c1c1c !important; } .is-style-bn-alert-blue { background:#255373 !important; } /* ============================================================================= * 28. PAGINATION — .bnds-pag (paragraph). Numbered cells; current = filled blue. * ========================================================================== */ .bnds .bnds-pag{ display:flex !important; flex-wrap:wrap; gap:.5rem; margin:0; } .bnds .bnds-pag .bnds-pg{ display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 .5rem; border:1px solid var(--hair); border-radius:8px; background:var(--cream); font-family:var(--ui) !important; font-weight:600; font-size:.9375rem; color:var(--blue) !important; text-decoration:none; } .bnds .bnds-pag .bnds-pg:hover{ border-color:var(--gold-l); background:var(--tint,#F6ECDD); } .bnds .bnds-pag .bnds-pg.is-on{ background:var(--blue) !important; border-color:var(--blue); color:#fff !important; } /* Left-align section headlines (the theme centers bare headings). Statement card stays centered via its own wrapper. */ .bnds .bnds-sechead-h, .bnds .bnds-hero-h, .bnds .bnds-proof-h, .bnds .bnds-prov-h, .bnds .bnds-fold-h{ text-align:left !important; } .bnds .bnds-sechead .bnds-kick{ display:inline-block; } /* Separators full-width (core Separator defaults to a short centered line). */ .bnds .bnds-divider, .bnds .bn-rowhair{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } /* Hero primary button: clean white on the dark band, hovers to CREAM (not the global blue hover, which would vanish on the blue band). */ .bnds.bnds-hero .bn-btn-white .wp-block-button__link{ border-color:#fff !important; } .bnds.bnds-hero .bn-btn-white .wp-block-button__link:hover{ background:var(--cream) !important; color:var(--blue) !important; border-color:var(--cream) !important; } /* ============================================================================= * 29. BUTTONS ON A DARK SURFACE — .bnds-darkrow band with solid-white primary * (bn-btn-white), ghost-white secondary (.bnds-btn-ghost), and a white link * with gold-bright underline (.bnds-darklink). (bn-btn-ghost is taken on live.) * ========================================================================== */ .bnds.bnds-darkrow{ background:var(--blue) !important; border-radius:16px; padding:clamp(1.25rem,4vw,1.75rem) !important; } .bnds.bnds-darkrow .wp-block-buttons{ align-items:center; gap:.75rem 1rem; } .bnds.bnds-darkrow .bn-btn-white .wp-block-button__link{ border-color:#fff !important; text-transform:uppercase; letter-spacing:.03em; } .bnds.bnds-darkrow .bn-btn-white .wp-block-button__link:hover{ background:var(--cream) !important; color:var(--blue) !important; border-color:var(--cream) !important; } .bnds .bnds-btn-ghost .wp-block-button__link{ background:transparent !important; color:#fff !important; border:2px solid rgba(255,255,255,.6) !important; border-radius:8px !important; font-family:var(--ui) !important; font-weight:700 !important; font-size:.9375rem !important; padding:.75rem 1.6rem !important; text-transform:uppercase; letter-spacing:.03em; } .bnds .bnds-btn-ghost .wp-block-button__link:hover{ background:rgba(255,255,255,.12) !important; border-color:#fff !important; } .bnds .bnds-darklink .wp-block-button__link{ background:transparent !important; border:0 !important; border-radius:0 !important; color:#fff !important; text-decoration:none !important; border-bottom:2px solid var(--gold-bright,#E0A948) !important; padding:.4rem .25rem !important; font-family:var(--ui) !important; font-weight:600 !important; font-size:.9375rem !important; } .bnds .bnds-darklink .wp-block-button__link:hover{ color:var(--gold-l) !important; } /* ============================================================================= * 30. LIST STYLE VARIATIONS — pick per List block: gold dots / gold checks / * numbered (blue circles, counter-based so it works on ul or ol). Plus the * "Three list styles" pattern (.bnds-lists) with column labels. * Self-contained (hard colors) so the style works anywhere. * ========================================================================== */ .is-style-bn-dots, .is-style-bn-checks, .is-style-bn-steps{ list-style:none !important; padding-left:0 !important; margin:0 !important; } .is-style-bn-dots li, .is-style-bn-checks li, .is-style-bn-steps li{ position:relative; list-style:none !important; margin:0 0 .625rem !important; font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.0625rem !important; color:#5A3B36 !important; line-height:1.4; } .is-style-bn-dots li{ padding-left:1.5rem; } .is-style-bn-dots li::before{ content:""; position:absolute; left:.25rem; top:.62em; width:.4375rem; height:.4375rem; border-radius:50%; background:#D19138; } .is-style-bn-checks li{ padding-left:1.75rem; } .is-style-bn-checks li::before{ content:"\2713"; position:absolute; left:0; top:0; color:#D19138; font-weight:700; } .is-style-bn-steps{ counter-reset:bnstep; } .is-style-bn-steps li{ counter-increment:bnstep; padding-left:2.375rem; min-height:1.75rem; display:flex; align-items:center; } .is-style-bn-steps li::before{ content:counter(bnstep); position:absolute; left:0; top:0; width:1.75rem; height:1.75rem; border-radius:50%; background:#255373; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Montserrat",system-ui,sans-serif; font-weight:700; font-size:.8125rem; } /* three-column list showcase */ .bnds .bnds-collabel{ font-family:var(--ui) !important; font-weight:700 !important; font-size:.75rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-l) !important; margin:0 0 .875rem !important; } /* ============================================================================= * 31. TABS — .bnds-tabs row + .bnds-tab (.is-on active). Active = blue + 2px gold * underline; row scrolls, never clips. From /bn-design/ §20. * Values HARDCODED (not var()) because the WC product tabs live OUTSIDE the * .bnds token scope — var()s would be undefined there and get dropped. * EXTEND-OVERRIDE on the WC product tabs: `.tabs.wc-tabs.bnds-tabs` (one extra * class) out-specifies the theme's `.tabs.wc-tabs` + documents it for removal. * ========================================================================== */ .bnds .bnds-tabs, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs{ display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start !important; gap:1.75rem; margin:0 !important; padding:0 !important; text-align:left !important; border-bottom:1px solid #E6DCC8 !important; overflow-x:auto; scrollbar-width:none; } .bnds .bnds-tabs::-webkit-scrollbar, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs::-webkit-scrollbar{ height:0; width:0; } .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs::before, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs::after{ display:none !important; content:none !important; border:0 !important; } .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li{ margin:0 !important; padding:0 !important; border:0 !important; background:none !important; float:none !important; } .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li::before, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li::after{ display:none !important; content:none !important; } .bnds .bnds-tab, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li > a{ flex:0 0 auto; position:relative; white-space:nowrap; cursor:pointer; text-decoration:none !important; display:block; font-family:"Montserrat",system-ui,sans-serif !important; font-weight:600 !important; font-size:1rem !important; color:#9a8e78 !important; padding:0 .125rem .625rem !important; background:none !important; border:0 !important; border-radius:0 !important; } .bnds .bnds-tab:hover, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li > a:hover{ color:#255373 !important; } .bnds .bnds-tab.is-on, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li.active > a{ color:#255373 !important; } .bnds .bnds-tab.is-on::after, .woocommerce div.product .woocommerce-tabs .tabs.wc-tabs.bnds-tabs > li.active > a::after{ content:"" !important; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#D19138 !important; } /* ============================================================================ * 32. THEME ADOPTION — FOOTER (project_42, 2026-07-18) * ---------------------------------------------------------------------------- * Switch the footer's headings / menu / Klaviyo signup text onto the design- * system fonts (Source Serif 4 for headings, Source Sans 3 for body/list — both * loaded site-wide via Google Fonts). Footer is OUTSIDE .bnds, so var() would be * dropped → fonts are HARDCODED here (same pattern as the product tabs, §31). * NOTE: the footer renders TWO ways — footer.php (e.g. /blog/) AND an Elementor * theme-builder footer (home, products, most pages) — but BOTH emit identical * classes (.footer-main div.h2 / ul.menu / .footer-gravityform). The Elementor * markup can't take our class, so instead of adding a class we out-specify the * shared legacy selector directly with a `body ` prefix (beats the legacy * (0,2,1) !important). Applies to both footers → consistent everywhere. * LEGACY still lives in bn-customizer.css (.footer-main div.h2 ~L5222, * .footer-gravityform h1 ~L5335) + lost-vape parent (.footer-main ul.menu :575) * — recorded here so those font-family rules can be stripped later. * ========================================================================== */ /* 1. column headings ("Tobacco E-Liquids" / "About" / "Help" / "Resources") — full design-system H2 (bn-h2). These aren't

but should read as one. Shared `body .footer-main div.h2` covers BOTH footer templates (footer.php + Elementor); the bn-h2 class added in footer.php documents the intent. */ body .footer-main div.h2, body .footer-main div.h2.bn-h2{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:1.875rem !important; color:#255373 !important; line-height:1.18 !important; } /* 2. Klaviyo signup heading ("Special offers, straight to your inbox"). font-weight:700 (a loaded Source Serif weight) — legacy forced 900, which the browser faux-bolds since only 400/600/700 are loaded → mismatched heavier look. */ body .footer-main .footer-gravityform h1, body .footer-main .footer-gravityform h1 span, body .footer-main .footer-gravityform h2, body .footer-main .footer-gravityform h2 span{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; } /* 3. Klaviyo body paragraph ("Plus switching guides…") — our body font + color (#5A3B36) */ body .footer-main .footer-gravityform .klaviyo-form-richtext p, body .footer-main .footer-gravityform .klaviyo-form-richtext p span{ font-family:"Source Sans 3",system-ui,sans-serif !important; color:#5A3B36 !important; font-size:1.125rem !important; } /* 4. footer menu links (design-system list font; markers already off via list-style:none) */ body .footer-main ul.menu li a, body .footer-main ul.menu .elementor-icon-list-text{ font-family:"Source Sans 3",system-ui,sans-serif !important; } /* ============================================================================ * 33. THEME ADOPTION — onecol module (module-single_onecol_img_headline_text_cta) * ---------------------------------------------------------------------------- * Convert its eyebrow + headline onto the design system. The module is OUTSIDE * .bnds, so values are HARDCODED (Source Serif 4 / Montserrat / tokens — var() * would drop). FORMULA: the bn-h1/2/3 + bn-eyebrow classes added in the template * out-specify the legacy `.headline h1` (BookMania, bn-main/bn-customizer) and * `.eyebrow span`. Legacy rules left in place — recorded here to strip later. * Values match the /bn-design/ reference (eyebrow 18px per the 2026-07-18 amend). * ========================================================================== */ /* headline — Source Serif 4 (was BookMania). alignment left to the module's text-* class. */ .headline h1.bn-h1{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:2.75rem !important; color:#255373 !important; line-height:1.1 !important; } .headline h2.bn-h2{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:1.875rem !important; color:#255373 !important; line-height:1.18 !important; } .headline h3.bn-h3{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:600 !important; font-size:1.5rem !important; color:#255373 !important; line-height:1.25 !important; } /* contextual color modifiers (default blue owned above; these are the non-blue cases) */ .headline h1.bn-h-gold,.headline h2.bn-h-gold,.headline h3.bn-h-gold{ color:#D19138 !important; } .headline h1.bn-h-white,.headline h2.bn-h-white,.headline h3.bn-h-white{ color:#fff !important; } /* eyebrow — Montserrat 700, gold, .14em, uppercase, blue underline (matches /bn-design/) */ .eyebrow span.bn-eyebrow{ display:inline-block !important; font-family:"Montserrat",system-ui,sans-serif !important; font-weight:700 !important; font-size:1.125rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; line-height:1.2 !important; color:#D19138 !important; border-bottom:1px solid #255373 !important; padding:0 0 .25rem !important; } .eyebrow span.bn-eyebrow-white{ color:#fff !important; border-bottom-color:#fff !important; } /* body paragraph — Source Sans 3, 18px, --brown #5A3B36 (matches /bn-design/ lead). WYSIWYG

styled via the .bn-text container. */ .text.bn-text p{ font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.125rem !important; font-weight:400 !important; color:#5A3B36 !important; line-height:1.8 !important; } .text.bn-text-white p{ color:#fff !important; } /* ============================================================================ * 34. STANDALONE design-system utility classes — apply on ANY element, anywhere * (theme sections / snippet-styled pages that live OUTSIDE .bnds). Hardcoded + * !important so they override non-!important legacy/snippet rules cleanly. Values * match the .bnds .bn-* / /bn-design/ spec. Just add these class names in markup. * (If the legacy rule ALSO uses !important with higher specificity — e.g. the onecol * module's `.headline h1` — use an element-scoped extend like §33 instead.) * ========================================================================== */ .bn-eyebrow{ display:inline-block !important; font-family:"Montserrat",system-ui,sans-serif !important; font-weight:700 !important; font-size:1.125rem !important; letter-spacing:.14em !important; text-transform:uppercase !important; line-height:1.2 !important; color:#D19138 !important; border-bottom:1px solid #255373 !important; padding-bottom:.25rem !important; } .bn-eyebrow::after{ content:none !important; } /* drop snippet-drawn ::after underlines; we use border-bottom */ .bn-h1{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:2.75rem !important; color:#255373 !important; line-height:1.1 !important; } .bn-h2{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:1.875rem !important; color:#255373 !important; line-height:1.18 !important; } .bn-h3{ font-family:"Source Serif 4",Georgia,serif !important; font-weight:600 !important; font-size:1.5rem !important; color:#255373 !important; line-height:1.25 !important; } .bn-text{ font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.125rem !important; font-weight:400 !important; color:#5A3B36 !important; line-height:1.7 !important; } /* short subtitle (product sub-title, e.g. "0.45-2.5Ω, 1700mAh, 5-40W"). Canonical definition — matches what single-product already renders; adding our class makes ARCHIVE pages match too (they were #255373 / 18px / 500 from bn-customizer L4329). Class added in functions.php. */ .bn-subtitle, .short-sub-title.bn-subtitle{ font-family:"Montserrat",system-ui,sans-serif !important; font-weight:600 !important; font-size:16px !important; color:#666666 !important; text-transform:uppercase !important; letter-spacing:.08em !important; line-height:1.5 !important; } /* Buttons — matched to /bn-design/ .btn (2026-07-20): Montserrat 600, 16px, .04em, uppercase, 14×28 padding, 10px radius, 1.65 line-height (his inherits it). solid = filled + soft shadow, hover→blue-ink #0F2536; ghost = transparent + 2px blue border, hover→filled. */ .bn-btn-dark, .bn-btn-ghost{ display:inline-block !important; font-family:"Montserrat",system-ui,sans-serif !important; font-weight:600 !important; font-size:1rem !important; letter-spacing:.04em !important; text-transform:uppercase !important; line-height:1.65 !important; padding:.875rem 1.75rem !important; border-radius:10px !important; text-decoration:none !important; transition:background .15s ease,box-shadow .15s ease,color .15s ease,border-color .15s ease; cursor:pointer; } .bn-btn-dark{ background:#255373 !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(38,83,122,.18) !important; } .bn-btn-dark:hover, .bn-btn-dark:focus-visible{ background:#0F2536 !important; color:#fff !important; } .bn-btn-ghost{ background:transparent !important; color:#255373 !important; border:2px solid #255373 !important; } .bn-btn-ghost:hover, .bn-btn-ghost:focus-visible{ background:#255373 !important; color:#fff !important; } /* ============================================================================ * 35. THEME ADOPTION — WooCommerce loop product title IS our H2. * The title carries `bn-h2` in the markup (added via the WooCommerce filter * `woocommerce_product_loop_title_classes` in mu-plugins/bn-design-system.php), * so EVERYTHING — face, size, weight, color, line-height — comes from the one * .bn-h2 definition in §34. Edit .bn-h2 and product titles follow. Do not * re-pin any of those properties here; that is exactly what breaks propagation. * Legacy rules it now beats: `.product h1,.product h2` (bookmania !important, * bn-customizer L1191 — given :not(.bn-h2) so it steps aside) and project_41's * font-family lock (L1201, removed). All other legacy font-sizes (22/24/30px) * are non-!important and lose to ours outright. * ========================================================================== */ /* Product loop title: the ONLY declaration needed here is display:block — the theme forces display:inline, which hands line-box control to the parent and makes line-height a no-op. Font / size / weight / color / line-height all come from .bn-h2 itself, so editing .bn-h2 propagates straight through to product titles. The legacy `.product h1/h2` bookmania!important rule was given :not(.bn-h2) in bn-customizer so ours always wins. */ h2.woocommerce-loop-product__title.bn-h2{ display:block !important; } /* --- new-to-vaping (page 1497636) TRANSITIONAL overrides while snippet #86 is still active. Container -> our 1200px width system + gutters; fix ghost-button color that snippet's `.bn-nv .btn{color:#fff!important}` otherwise wins. REMOVE these once #86 is retired and its layout is moved into our stylesheet. --- */ .bn-nv .wrap{ max-width:var(--bn-container,1200px) !important; padding-left:var(--bn-gutter,24px) !important; padding-right:var(--bn-gutter,24px) !important; } .bn-nv a.bn-btn-ghost{ background:#fff !important; color:#255373 !important; } .bn-nv a.bn-btn-ghost:hover{ background:#255373 !important; color:#fff !important; } /* ============================================================================ * 36. THEME ADOPTION — classic (non-blog-kit) single posts. * Two jobs: (a) put the post on our 1200px width system, (b) put its type on the * design system. Everything is scoped to `.bn-post-classic` (set in single.php * only when bn_blog_kit_is_active() is FALSE), because single.php and * tmpl/content-post-full.php are SHARED with the new ACF blog-kit layout — this * keeps the two apart until the kit layout is converted too. When that happens, * drop the `.bn-post-classic` scope and these rules cover both. * * WIDTH: the shell (.container.main-wrapper 1200 + 24px gutter -> .inner-page * 1152) was already correct; the squeeze came from two INNER clamps — * bootstrap's col-xl-9 (75% -> 882px) and a hard `max-width:700px` on * section.blog-post. Neutralize both and the single outer 1200 governs, exactly * like the blog index fix (project_40, blog-index.css L18). * ========================================================================== */ .bn-post-wide > .row{ margin-left:0 !important; margin-right:0 !important; } .bn-post-wide > .row > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; } .bn-post-wide section.blog-post{ max-width:none !important; width:100% !important; } /* TYPE — post title. The class is in the markup (content-post-full.php L23), so .bn-h1 in §34 already governs face/size/weight/color. SPACING: the legacy `body.single-post h1` rule we stepped aside with :not(.bn-h1) (bn-main.css) also carried `margin-top:20px` — so excluding it silently removed the gap between the header and the title. Restated here as OUR declaration, which is where it belongs: the design system now owns the title's spacing too, instead of inheriting it as a side effect of a legacy font rule. */ .bn-post-classic .entry-content > h1.bn-h1{ margin-top:20px !important; } /* TYPE — editor content. the_content() output can't carry per-element classes, so we style descendants of the .bn-post-body hook instead. This is the documented fallback for markup we don't own; the values are the SAME ones §34 defines, so a change there must be mirrored here (the one place that's true in this sheet). ⚠ `:not(.bnds *)` is LOAD-BEARING. These are blunt element selectors, and a converted .bnds block dropped into post content (FAQ, tabs, cards) already has its own design-system tokens — without the guard these out-specify them and silently break them. Caught 2026-07-20: `.bn-post-body h3` (0,2,1) beat `.bnds .bn-fq` (0,2,0) and blew FAQ questions up from 18px to 24px. Rule of thumb: element-level rules must never reach inside .bnds. */ .bn-post-classic .bn-post-body p:not(.bnds *), .bn-post-classic .bn-post-body li:not(.bnds *){ font-family:"Source Sans 3",system-ui,sans-serif !important; font-size:1.125rem !important; font-weight:400 !important; color:#5A3B36 !important; line-height:1.7 !important; } .bn-post-classic .bn-post-body h2:not(.bnds *){ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:1.875rem !important; color:#255373 !important; line-height:1.18 !important; } .bn-post-classic .bn-post-body h3:not(.bnds *){ font-family:"Source Serif 4",Georgia,serif !important; font-weight:700 !important; font-size:1.5rem !important; color:#255373 !important; line-height:1.2 !important; } /* ============================================================================ * 37. STANDALONE TOKEN — lists (bn-list). * Companion to §34's bn-text. Editor HTML gets these classes stamped ON the tags * by bn_ds_classify_html() (mu-plugins/bn-design-system.php), so a