/* JBH Color Mode System */
/* ================================================================
JBH Starter Blocks — Frontend Styles
Self-contained CSS for the 10 starter blocks.
No build step required. | v1.0.9
================================================================ */
/* ── Global CSS Custom Properties ────────────────────────────── */
/* Brand palette exposed as CSS custom properties so child themes and
user-authored CSS can tap into the JBH palette with
`var(--jbh-teal-light)` / `var(--jbh-coral-light)` for subtle tinted
surfaces. The plugin currently inlines the literal rgba values at
~30 spots because those values rarely need to retint per-site; the
variables remain as public API contract for extenders. */
:root {
--jbh-teal: #2A9D8F;
--jbh-teal-dark: #1F5F5B;
--jbh-teal-light: rgba(42, 157, 143, 0.10);
--jbh-coral: #D64F42;
--jbh-coral-light: rgba(214, 79, 66, 0.10);
/* Brighter coral used by the studio modal submit-button hover state
(modal.css L1119-1121) and the recommended-card CTA hover (line 1171
below). Defined HERE rather than only in class-jbh-starter-blocksy-compat.php
so the live frontend has it too — the editor previewed correctly via
the Blocksy-compat injection but the published page resolved the
var() to its initial value, making the modal submit button's
background flash transparent on hover whenever the user hadn't
set a hover-bg picker. Same hex as the Blocksy-compat definition
(#E76F51) so the editor preview and live page are pixel-identical. */
--jbh-coral-hover: #E76F51;
--jbh-bg: #121212;
--jbh-card: #1A1A1A;
--jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF;
--jbh-border: rgba(31, 95, 91, 0.20);
--jbh-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--jbh-font-serif: "Playfair Display", Georgia, serif;
--jbh-font-mono: "Fira Code", monospace;
--jbh-gap: 20px;
--jbh-card-radius: 4px;
--jbh-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF;
--jbh-card-heading: #ffffff;
/* ── Ambience Tokens — Mode-Reactive Shadows, Backdrops & Decorations
These handle the "light-mode feels wrong" class of UX bugs where a
design decision tuned for dark mode (aggressive black shadows, heavy
near-opaque backdrops, near-invisible teal watermarks on light cards)
reads as sloppy when the site toggles light.
The defaults here are the dark-mode values the plugin has always
shipped (so nothing visually regresses on dark-mode sites). The
light-mode overrides live under html[data-theme="light"] / .light /
[data-color-mode="light"] / body[data-ct-color-mode="light"] + an
OS-level prefers-color-scheme fallback, so they react in lock-step
with Blocksy Pro's Colour Mode Switch, JBH Platform, and system
preference without any JS.
Because tokens are declared at :root (or body for Blocksy), they
cascade through the DOM into every descendant — including #jbh-modal-
overlay which is rendered in wp_footer outside any block wrapper. */
--jbh-modal-backdrop: rgba(0, 0, 0, 0.65);
--jbh-modal-panel-shadow: -8px 0 48px rgba(0, 0, 0, 0.5), -2px 0 8px rgba(0, 0, 0, 0.2);
--jbh-modal-popup-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
--jbh-pm-backdrop: rgba(0, 0, 0, 0.80);
--jbh-pm-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
--jbh-watermark-color: rgba(42, 157, 143, 0.05);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.10);
--jbh-card-shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.08);
--jbh-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.14);
/* ── Dual-palette token defaults — see §"Dual-Palette Color Resolver" below.
These -dk / -lt slots are written inline by render.php ONLY when the
admin picks an explicit colour in the block inspector. Without these
:root defaults, an unset slot makes the alias `--jbh-filter-text:
var(--jbh-filter-text-dk)` resolve to invalid, which IACVT-poisons
every consumer (color/background/border) on the toolbar — the
inline fallback in `var(--jbh-filter-text, var(--jbh-text-color))`
does NOT kick in because the outer custom property IS defined,
just defined to invalid (CSS Custom Properties §3.2). The consumer
reverts to `unset`, color inherits the body's color (white on most
light themes) and renders white-on-white. Defining these defaults
here makes the alias chain resolve at use site to the mode-specific
global token (substitution is lazy / cascade-aware), so the toolbar
text/border are always visible regardless of admin overrides.
Only filter / sort / search toolbar tokens need this treatment —
every other dual-palette token is unconditionally written inline by
its block's render.php (it always has a base value to fall back
on, even with no admin override). */
--jbh-filter-bg-dk: var(--jbh-card);
--jbh-filter-bg-lt: var(--jbh-card);
/* Toolbar text defaults — LITERAL slate values, not `var(--jbh-text-color)`.
Rationale: in `selfPalette:false` blocks, `--jbh-text-color` is mapped
to Blocksy `--theme-palette-color-3` (body text). When a `.jbh-light`
block lives on a Blocksy site whose colour-mode toggle is set to dark,
palette-3 holds a LIGHT cream-grey value while `.jbh-light` paints the
card #FFFFFF — net effect: invisible white-on-white search text /
placeholder. Same trap fires under Chrome's "Auto Dark" experiment,
where browser-applied colour transformations leak through any chain
that doesn't break free of `--jbh-text-color`.
The Inspector pickers (`filterText` / `filterTextLight`) still
override these literals via render.php inline writes, so editors
keep full retint freedom. */
--jbh-filter-text-dk: #9CA3AF;
--jbh-filter-text-lt: #4B5563;
--jbh-filter-border-dk: var(--jbh-border);
/* Light-mode default bumped above the global `--jbh-border` (rgba 0/0/0/0.12)
because a 12 %% black border on a #FFFFFF card reads as essentially
white in real-world lighting — the toolbar / search bar / sort dropdown
all silently lost their outline in light mode while dark mode still got
the teal-tinted line at 20 %% opacity. 22 %% black gives a clean visible
neutral that mirrors the dark-mode line’s perceived weight without
pulling in a brand colour the editor may not want on light surfaces.
Editors who do want a different tint can still override it via the
block’s `filterBorderLight` Inspector picker. */
--jbh-filter-border-lt: rgba(0, 0, 0, 0.22);
--jbh-filter-active-bg-dk: var(--jbh-teal);
--jbh-filter-active-bg-lt: var(--jbh-teal);
--jbh-filter-active-text-dk: #ffffff;
--jbh-filter-active-text-lt: #ffffff;
}
/* ── Dark / Light Mode — Block-level classes ────────────────── */
.jbh-dark {
--jbh-bg: #121212; --jbh-card: #1A1A1A; --jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF; --jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF; --jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
}
.jbh-light {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
}
/* ── Dual-Palette Color Resolver ────────────────────────────────
render.php outputs -dk (dark) and -lt (light) suffixed custom
property variants. The active .jbh-dark / .jbh-light class on
each block resolves them into the mode-agnostic variable that
the rest of the CSS already consumes via var(--jbh-custom-*, …).
IMPORTANT: when a -dk / -lt slot is NOT defined inline by render.php,
the alias chain `--jbh-X: var(--jbh-X-dk)` resolves to the guaranteed-
invalid value, which IACVT-poisons every consumer property per
CSS Custom Properties §3.2 — the inline fallback in
`var(--jbh-X, fallback)` is NOT used because the outer custom
property IS defined (just defined to invalid). Two strategies in
this stylesheet keep that from breaking real pages:
1. For tokens that render.php ALWAYS writes inline (every grid /
hero / CTA / about / insights / page-intro / section-header
colour pair), the inline write itself is the safety net — the
slot is never undefined in practice.
2. For tokens render.php writes CONDITIONALLY (only when the admin
explicitly picks a toolbar colour: the five filter / sort /
search slots), the slot has a `:root` default above that points
at the corresponding mode-agnostic global token (`--jbh-text-color`,
`--jbh-card`, `--jbh-border`, etc.). Substitution is lazy, so the
default resolves to the active mode's value at the consumer's
use site, regardless of which `.jbh-dark` / `.jbh-light` block
is in scope. */
.jbh-dark {
/* Grid blocks shared */
--jbh-custom-header: var(--jbh-custom-header-dk);
--jbh-custom-price: var(--jbh-custom-price-dk);
--jbh-custom-desc: var(--jbh-custom-desc-dk);
--jbh-custom-icon: var(--jbh-custom-icon-dk);
--jbh-custom-btn: var(--jbh-custom-btn-dk);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-dk);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-dk);
--jbh-custom-card-border: var(--jbh-custom-card-border-dk);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-dk);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-dk);
--jbh-custom-badge: var(--jbh-custom-badge-dk);
--jbh-custom-target: var(--jbh-custom-target-dk);
--jbh-custom-tag: var(--jbh-custom-tag-dk);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-dk);
/* Studio grid — Target band text + price/timeline footer text.
Previously these elements had no independent customisation
path, so user-picked Target Band / Timeline / Price Label
colours could only affect the *label* and not the *text*.
Adding dedicated aliases fixes that asymmetry end-to-end. */
--jbh-custom-target-text: var(--jbh-custom-target-text-dk);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-dk);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-dk);
--jbh-custom-price-label: var(--jbh-custom-price-label-dk);
/* Studio grid — Card header / icon-box / target-band surfaces. */
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-dk);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-dk);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-dk);
/* Studio grid — Includes section */
--jbh-custom-includes-label: var(--jbh-custom-includes-label-dk);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-dk);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-dk);
/* Studio grid — Add-ons section */
--jbh-custom-addons-label: var(--jbh-custom-addons-label-dk);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-dk);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-dk);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-dk);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-dk);
/* Studio grid — Card footer tint (behind the CTA button) */
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-dk);
/* Pricing plans — Billing-period toggle (track off / track on / dot).
Lets users retint the tiny switch that flips Monthly ↔ Yearly so
it matches the rest of the block's palette in either mode. */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-dk);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-dk);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-dk);
/* Store grid — Product badge ("NEW" etc.) colours */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-dk);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-dk);
/* Store grid — Featured-product outline picker */
--jbh-featured-outline: var(--jbh-featured-outline-dk);
/* Store grid — Filter / sort / search toolbar colours */
--jbh-filter-bg: var(--jbh-filter-bg-dk);
--jbh-filter-text: var(--jbh-filter-text-dk);
--jbh-filter-border: var(--jbh-filter-border-dk);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-dk);
--jbh-filter-active-text: var(--jbh-filter-active-text-dk);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-dk);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-dk);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-dk);
--jbh-hero-badge-color: var(--jbh-hero-badge-dk);
--jbh-hero-btn-bg: var(--jbh-hero-btn-dk);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-dk);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-dk);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-dk);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-dk);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-dk);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-dk);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-dk);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-dk);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-dk);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-dk);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-dk);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-dk);
--jbh-sh-badge-color: var(--jbh-sh-badge-dk);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-dk);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-dk);
--jbh-pi-label-color: var(--jbh-pi-label-dk);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-dk);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-dk);
--jbh-pi-callout-border: var(--jbh-pi-callout-border-dk);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-dk);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-dk);
--jbh-cta-badge-color: var(--jbh-cta-badge-dk);
--jbh-cta-btn-bg: var(--jbh-cta-btn-dk);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-dk);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-dk);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-dk);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-dk);
--jbh-about-bio-color: var(--jbh-about-bio-dk);
--jbh-about-label-color: var(--jbh-about-label-dk);
--jbh-about-card-bg: var(--jbh-about-card-bg-dk);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-dk);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-dk);
--jbh-ig-category-color: var(--jbh-ig-category-dk);
--jbh-ig-link-color: var(--jbh-ig-link-dk);
--jbh-ig-date-color: var(--jbh-ig-date-dk);
--jbh-ig-tag-color: var(--jbh-ig-tag-dk);
--jbh-ig-author-color: var(--jbh-ig-author-dk);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-dk);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-dk);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-dk);
--jbh-ig-card-border: var(--jbh-ig-card-border-dk);
--jbh-ig-icon-color: var(--jbh-ig-icon-dk);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-dk);
--jbh-pf-meta-color: var(--jbh-pf-meta-dk);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-dk);
}
.jbh-light {
/* Grid blocks shared */
--jbh-custom-header: var(--jbh-custom-header-lt);
--jbh-custom-price: var(--jbh-custom-price-lt);
--jbh-custom-desc: var(--jbh-custom-desc-lt);
--jbh-custom-icon: var(--jbh-custom-icon-lt);
--jbh-custom-btn: var(--jbh-custom-btn-lt);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-lt);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-lt);
--jbh-custom-card-border: var(--jbh-custom-card-border-lt);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-lt);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-lt);
--jbh-custom-badge: var(--jbh-custom-badge-lt);
--jbh-custom-target: var(--jbh-custom-target-lt);
--jbh-custom-tag: var(--jbh-custom-tag-lt);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-lt);
/* Studio grid — Target band text + price/timeline footer text. */
--jbh-custom-target-text: var(--jbh-custom-target-text-lt);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-lt);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-lt);
--jbh-custom-price-label: var(--jbh-custom-price-label-lt);
/* Studio grid — Card header / icon-box / target-band surfaces. */
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-lt);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-lt);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-lt);
/* Studio grid — Includes section */
--jbh-custom-includes-label: var(--jbh-custom-includes-label-lt);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-lt);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-lt);
/* Studio grid — Add-ons section */
--jbh-custom-addons-label: var(--jbh-custom-addons-label-lt);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-lt);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-lt);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-lt);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-lt);
/* Studio grid — Card footer tint (behind the CTA button) */
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-lt);
/* Pricing plans — Billing-period toggle (light-mode aliases). */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-lt);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-lt);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-lt);
/* Store grid — Product badge (light-mode aliases). */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-lt);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-lt);
/* Store grid — Featured-product outline (light-mode alias). */
--jbh-featured-outline: var(--jbh-featured-outline-lt);
/* Store grid — Filter / sort / search toolbar (light-mode aliases). */
--jbh-filter-bg: var(--jbh-filter-bg-lt);
--jbh-filter-text: var(--jbh-filter-text-lt);
--jbh-filter-border: var(--jbh-filter-border-lt);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-lt);
--jbh-filter-active-text: var(--jbh-filter-active-text-lt);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-lt);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-lt);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-lt);
--jbh-hero-badge-color: var(--jbh-hero-badge-lt);
--jbh-hero-btn-bg: var(--jbh-hero-btn-lt);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-lt);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-lt);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-lt);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-lt);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-lt);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-lt);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-lt);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-lt);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-lt);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-lt);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-lt);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-lt);
--jbh-sh-badge-color: var(--jbh-sh-badge-lt);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-lt);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-lt);
--jbh-pi-label-color: var(--jbh-pi-label-lt);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-lt);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-lt);
--jbh-pi-callout-border: var(--jbh-pi-callout-border-lt);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-lt);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-lt);
--jbh-cta-badge-color: var(--jbh-cta-badge-lt);
--jbh-cta-btn-bg: var(--jbh-cta-btn-lt);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-lt);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-lt);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-lt);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-lt);
--jbh-about-bio-color: var(--jbh-about-bio-lt);
--jbh-about-label-color: var(--jbh-about-label-lt);
--jbh-about-card-bg: var(--jbh-about-card-bg-lt);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-lt);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-lt);
--jbh-ig-category-color: var(--jbh-ig-category-lt);
--jbh-ig-link-color: var(--jbh-ig-link-lt);
--jbh-ig-date-color: var(--jbh-ig-date-lt);
--jbh-ig-tag-color: var(--jbh-ig-tag-lt);
--jbh-ig-author-color: var(--jbh-ig-author-lt);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-lt);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-lt);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-lt);
--jbh-ig-card-border: var(--jbh-ig-card-border-lt);
--jbh-ig-icon-color: var(--jbh-ig-icon-lt);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-lt);
--jbh-pf-meta-color: var(--jbh-pf-meta-lt);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-lt);
}
/* ── Auto Mode — Follows site-wide color-mode switch ────────────
Blocks with colorMode="auto" emit `.jbh-auto` instead of
`.jbh-dark` / `.jbh-light`. Unlike those, `.jbh-auto` deliberately
does NOT declare the base surface vars (--jbh-bg, --jbh-card, …)
— those cascade down naturally from the html-level cascade at
lines 182-207, which already reacts to Blocksy's Colour Mode
Switch, JBH Platform's data-theme, and OS prefers-color-scheme.
Leaving them unset means the block's base palette follows the
site in real-time with zero extra JS.
What `.jbh-auto` DOES define is the dual-palette custom-var
resolver, because those aliases only exist at block scope and
can't cascade from html. Default branch aliases the `-dk`
variants (matching :root's dark seed); the three selector sets
below flip them to `-lt` when any of the four recognised
light-mode site signals are active. ────────────────────── */
.jbh-auto {
/* Grid blocks shared — dark aliases (default branch) */
--jbh-custom-header: var(--jbh-custom-header-dk);
--jbh-custom-price: var(--jbh-custom-price-dk);
--jbh-custom-desc: var(--jbh-custom-desc-dk);
--jbh-custom-icon: var(--jbh-custom-icon-dk);
--jbh-custom-btn: var(--jbh-custom-btn-dk);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-dk);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-dk);
--jbh-custom-card-border: var(--jbh-custom-card-border-dk);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-dk);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-dk);
--jbh-custom-badge: var(--jbh-custom-badge-dk);
--jbh-custom-target: var(--jbh-custom-target-dk);
--jbh-custom-tag: var(--jbh-custom-tag-dk);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-dk);
/* Studio grid — Target band text + price/timeline footer text. */
--jbh-custom-target-text: var(--jbh-custom-target-text-dk);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-dk);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-dk);
--jbh-custom-price-label: var(--jbh-custom-price-label-dk);
/* Studio grid — Card header / icon-box / target-band surfaces. */
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-dk);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-dk);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-dk);
/* Studio grid — Includes section */
--jbh-custom-includes-label: var(--jbh-custom-includes-label-dk);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-dk);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-dk);
/* Studio grid — Add-ons section */
--jbh-custom-addons-label: var(--jbh-custom-addons-label-dk);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-dk);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-dk);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-dk);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-dk);
/* Studio grid — Card footer tint */
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-dk);
/* Pricing plans — Billing-period toggle (dark-mode aliases). */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-dk);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-dk);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-dk);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-dk);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-dk);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-dk);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-dk);
--jbh-filter-text: var(--jbh-filter-text-dk);
--jbh-filter-border: var(--jbh-filter-border-dk);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-dk);
--jbh-filter-active-text: var(--jbh-filter-active-text-dk);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-dk);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-dk);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-dk);
--jbh-hero-badge-color: var(--jbh-hero-badge-dk);
--jbh-hero-btn-bg: var(--jbh-hero-btn-dk);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-dk);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-dk);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-dk);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-dk);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-dk);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-dk);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-dk);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-dk);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-dk);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-dk);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-dk);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-dk);
--jbh-sh-badge-color: var(--jbh-sh-badge-dk);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-dk);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-dk);
--jbh-pi-label-color: var(--jbh-pi-label-dk);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-dk);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-dk);
--jbh-pi-callout-border: var(--jbh-pi-callout-border-dk);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-dk);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-dk);
--jbh-cta-badge-color: var(--jbh-cta-badge-dk);
--jbh-cta-btn-bg: var(--jbh-cta-btn-dk);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-dk);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-dk);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-dk);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-dk);
--jbh-about-bio-color: var(--jbh-about-bio-dk);
--jbh-about-label-color: var(--jbh-about-label-dk);
--jbh-about-card-bg: var(--jbh-about-card-bg-dk);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-dk);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-dk);
--jbh-ig-category-color: var(--jbh-ig-category-dk);
--jbh-ig-link-color: var(--jbh-ig-link-dk);
--jbh-ig-date-color: var(--jbh-ig-date-dk);
--jbh-ig-tag-color: var(--jbh-ig-tag-dk);
--jbh-ig-author-color: var(--jbh-ig-author-dk);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-dk);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-dk);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-dk);
--jbh-ig-card-border: var(--jbh-ig-card-border-dk);
--jbh-ig-icon-color: var(--jbh-ig-icon-dk);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-dk);
--jbh-pf-meta-color: var(--jbh-pf-meta-dk);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-dk);
}
/* Site signalled LIGHT mode → flip auto-block custom-var aliases
to the -lt variants. Four selector families cover the supported
toggles:
· html[data-theme="light"] (JBH Platform / WP core convention)
· html.light (class-based convention)
· html[data-color-mode="light"] (some custom themes)
· body[data-ct-color-mode="light"] (Blocksy Pro Colour Mode Switch) */
html[data-theme="light"] .jbh-auto,
html.light .jbh-auto,
html[data-color-mode="light"] .jbh-auto,
body[data-ct-color-mode="light"] .jbh-auto {
/* Grid blocks shared */
--jbh-custom-header: var(--jbh-custom-header-lt);
--jbh-custom-price: var(--jbh-custom-price-lt);
--jbh-custom-desc: var(--jbh-custom-desc-lt);
--jbh-custom-icon: var(--jbh-custom-icon-lt);
--jbh-custom-btn: var(--jbh-custom-btn-lt);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-lt);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-lt);
--jbh-custom-card-border: var(--jbh-custom-card-border-lt);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-lt);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-lt);
--jbh-custom-badge: var(--jbh-custom-badge-lt);
--jbh-custom-target: var(--jbh-custom-target-lt);
--jbh-custom-tag: var(--jbh-custom-tag-lt);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-lt);
/* Studio grid — Target band text + price/timeline footer text. */
--jbh-custom-target-text: var(--jbh-custom-target-text-lt);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-lt);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-lt);
--jbh-custom-price-label: var(--jbh-custom-price-label-lt);
/* Studio grid — Card header / icon-box / target-band surfaces. */
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-lt);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-lt);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-lt);
/* Studio grid — Includes section */
--jbh-custom-includes-label: var(--jbh-custom-includes-label-lt);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-lt);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-lt);
/* Studio grid — Add-ons section */
--jbh-custom-addons-label: var(--jbh-custom-addons-label-lt);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-lt);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-lt);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-lt);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-lt);
/* Studio grid — Card footer tint */
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-lt);
/* Pricing plans — Billing-period toggle (light-mode aliases). */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-lt);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-lt);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-lt);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-lt);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-lt);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-lt);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-lt);
--jbh-filter-text: var(--jbh-filter-text-lt);
--jbh-filter-border: var(--jbh-filter-border-lt);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-lt);
--jbh-filter-active-text: var(--jbh-filter-active-text-lt);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-lt);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-lt);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-lt);
--jbh-hero-badge-color: var(--jbh-hero-badge-lt);
--jbh-hero-btn-bg: var(--jbh-hero-btn-lt);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-lt);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-lt);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-lt);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-lt);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-lt);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-lt);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-lt);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-lt);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-lt);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-lt);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-lt);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-lt);
--jbh-sh-badge-color: var(--jbh-sh-badge-lt);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-lt);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-lt);
--jbh-pi-label-color: var(--jbh-pi-label-lt);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-lt);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-lt);
--jbh-pi-callout-border: var(--jbh-pi-callout-border-lt);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-lt);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-lt);
--jbh-cta-badge-color: var(--jbh-cta-badge-lt);
--jbh-cta-btn-bg: var(--jbh-cta-btn-lt);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-lt);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-lt);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-lt);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-lt);
--jbh-about-bio-color: var(--jbh-about-bio-lt);
--jbh-about-label-color: var(--jbh-about-label-lt);
--jbh-about-card-bg: var(--jbh-about-card-bg-lt);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-lt);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-lt);
--jbh-ig-category-color: var(--jbh-ig-category-lt);
--jbh-ig-link-color: var(--jbh-ig-link-lt);
--jbh-ig-date-color: var(--jbh-ig-date-lt);
--jbh-ig-tag-color: var(--jbh-ig-tag-lt);
--jbh-ig-author-color: var(--jbh-ig-author-lt);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-lt);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-lt);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-lt);
--jbh-ig-card-border: var(--jbh-ig-card-border-lt);
--jbh-ig-icon-color: var(--jbh-ig-icon-lt);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-lt);
--jbh-pf-meta-color: var(--jbh-pf-meta-lt);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-lt);
}
/* OS-level preference fallback — only when no explicit site mode
signal is present. Must match the same "no explicit toggle"
predicate used at line 202 so both cascades stay in lock-step. */
@media (prefers-color-scheme: light) {
html:not([data-theme]):not(.dark):not(.light):not([data-color-mode]) .jbh-auto {
/* Grid blocks shared */
--jbh-custom-header: var(--jbh-custom-header-lt);
--jbh-custom-price: var(--jbh-custom-price-lt);
--jbh-custom-desc: var(--jbh-custom-desc-lt);
--jbh-custom-icon: var(--jbh-custom-icon-lt);
--jbh-custom-btn: var(--jbh-custom-btn-lt);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-lt);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-lt);
--jbh-custom-card-border: var(--jbh-custom-card-border-lt);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-lt);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-lt);
--jbh-custom-badge: var(--jbh-custom-badge-lt);
--jbh-custom-target: var(--jbh-custom-target-lt);
--jbh-custom-tag: var(--jbh-custom-tag-lt);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-lt);
/* Studio grid — Target band text + price/timeline footer text. */
--jbh-custom-target-text: var(--jbh-custom-target-text-lt);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-lt);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-lt);
--jbh-custom-price-label: var(--jbh-custom-price-label-lt);
/* Studio grid — Card header / icon-box / target-band surfaces. */
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-lt);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-lt);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-lt);
/* Studio grid — Includes section */
--jbh-custom-includes-label: var(--jbh-custom-includes-label-lt);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-lt);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-lt);
/* Studio grid — Add-ons section */
--jbh-custom-addons-label: var(--jbh-custom-addons-label-lt);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-lt);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-lt);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-lt);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-lt);
/* Studio grid — Card footer tint */
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-lt);
/* Pricing plans — Billing-period toggle (light-mode aliases). */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-lt);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-lt);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-lt);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-lt);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-lt);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-lt);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-lt);
--jbh-filter-text: var(--jbh-filter-text-lt);
--jbh-filter-border: var(--jbh-filter-border-lt);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-lt);
--jbh-filter-active-text: var(--jbh-filter-active-text-lt);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-lt);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-lt);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-lt);
--jbh-hero-badge-color: var(--jbh-hero-badge-lt);
--jbh-hero-btn-bg: var(--jbh-hero-btn-lt);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-lt);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-lt);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-lt);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-lt);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-lt);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-lt);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-lt);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-lt);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-lt);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-lt);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-lt);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-lt);
--jbh-sh-badge-color: var(--jbh-sh-badge-lt);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-lt);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-lt);
--jbh-pi-label-color: var(--jbh-pi-label-lt);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-lt);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-lt);
--jbh-pi-callout-border: var(--jbh-pi-callout-border-lt);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-lt);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-lt);
--jbh-cta-badge-color: var(--jbh-cta-badge-lt);
--jbh-cta-btn-bg: var(--jbh-cta-btn-lt);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-lt);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-lt);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-lt);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-lt);
--jbh-about-bio-color: var(--jbh-about-bio-lt);
--jbh-about-label-color: var(--jbh-about-label-lt);
--jbh-about-card-bg: var(--jbh-about-card-bg-lt);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-lt);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-lt);
--jbh-ig-category-color: var(--jbh-ig-category-lt);
--jbh-ig-link-color: var(--jbh-ig-link-lt);
--jbh-ig-date-color: var(--jbh-ig-date-lt);
--jbh-ig-tag-color: var(--jbh-ig-tag-lt);
--jbh-ig-author-color: var(--jbh-ig-author-lt);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-lt);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-lt);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-lt);
--jbh-ig-card-border: var(--jbh-ig-card-border-lt);
--jbh-ig-icon-color: var(--jbh-ig-icon-lt);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-lt);
--jbh-pf-meta-color: var(--jbh-pf-meta-lt);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-lt);
}
}
/* ── Global Dark / Light Mode — html-level selectors ────────── */
/* Supports: JBH Platform toggle (data-theme / .dark / .light),
Blocksy Colour Mode Switch (palette var swap + [data-color-mode]),
and OS-level prefers-color-scheme auto-detection. */
/* ── INVERTED: site dark → plugin light ──────────────────────── */
html[data-jbh-invert][data-theme="dark"],
html[data-jbh-invert].dark,
html[data-jbh-invert][data-color-mode="dark"] {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
/* Ambience tokens flip to "soft" variants. Rationale:
· Backdrops tuned to #0F172A (slate-900) at lower opacity feel
like premium modal dimming rather than the heavy black curtain
a dark-mode backdrop imposes on a light page.
· Panel/content shadows soften dramatically — light cards need
only a hint of shadow to read as elevated; keeping the dark
rgba(0,0,0,0.5) looks like a mistake on an off-white surface.
· Watermark opacity bumps ~1.5× so the teal decoration stays
perceptible against a white card (0.05 teal on white is
practically invisible; 0.08 reads like intentional texture).
· Card shadows pick up slightly so hover affordance survives
on light backgrounds. */
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
/* INVERTED: site light → plugin dark */
html[data-jbh-invert][data-theme="light"],
html[data-jbh-invert].light,
html[data-jbh-invert][data-color-mode="light"] {
--jbh-bg: #121212; --jbh-card: #1A1A1A; --jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF; --jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF; --jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
}
/* ── STANDARD (non-inverted): site dark → plugin dark ──────── */
html:not([data-jbh-invert])[data-theme="dark"],
html:not([data-jbh-invert]).dark,
html:not([data-jbh-invert])[data-color-mode="dark"] {
--jbh-bg: #121212; --jbh-card: #1A1A1A; --jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF; --jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF; --jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
}
/* STANDARD: site light → plugin light */
html:not([data-jbh-invert])[data-theme="light"],
html:not([data-jbh-invert]).light,
html:not([data-jbh-invert])[data-color-mode="light"] {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
/* Blocksy Pro Colour Mode Switch — writes data-ct-color-mode on body,
not html. Must be a separate rule because :root/html-level selectors
don't match body. Tokens still cascade into #jbh-modal-overlay via
body → footer DOM inheritance. */
/* INVERTED Blocksy body selector */
html[data-jbh-invert] body[data-ct-color-mode="dark"] {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
/* STANDARD Blocksy body selectors */
html:not([data-jbh-invert]) body[data-ct-color-mode="dark"] {
--jbh-bg: #121212; --jbh-card: #1A1A1A; --jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF; --jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF; --jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
}
html:not([data-jbh-invert]) body[data-ct-color-mode="light"] {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
/* Auto-detect OS preference when no explicit mode is set */
/* INVERTED: OS dark → plugin light */
@media (prefers-color-scheme: dark) {
html[data-jbh-invert]:not([data-theme]):not(.dark):not(.light):not([data-color-mode]) {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
}
/* STANDARD: OS dark → plugin dark (no-op, :root already seeds dark) */
/* STANDARD: OS light → plugin light */
@media (prefers-color-scheme: light) {
html:not([data-jbh-invert]):not([data-theme]):not(.dark):not(.light):not([data-color-mode]) {
--jbh-bg: #F9F8F6; --jbh-card: #FFFFFF; --jbh-creme: #121212;
--jbh-slate: #4B5563; --jbh-heading-color: #121212;
--jbh-text-color: #4B5563; --jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
--jbh-modal-backdrop: rgba(15, 23, 42, 0.40);
--jbh-modal-panel-shadow: -8px 0 40px rgba(15, 23, 42, 0.18), -2px 0 6px rgba(15, 23, 42, 0.08);
--jbh-modal-popup-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
--jbh-pm-backdrop: rgba(15, 23, 42, 0.50);
--jbh-pm-shadow: 0 20px 60px rgba(15, 23, 42, 0.20);
--jbh-watermark-color: rgba(42, 157, 143, 0.08);
--jbh-watermark-color-hover: rgba(42, 157, 143, 0.16);
--jbh-card-shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
--jbh-card-shadow-hover: 0 8px 30px rgba(15, 23, 42, 0.10);
}
}
/* ── Same-Frame Site-Mode Reactivity — CSS-Only ─────────────────
Root cause of the "dark → light feels laggy" bug before this rule
existed: `.jbh-dark { --jbh-bg: #121212; … }` and `.jbh-light {…}`
declared the full palette at BLOCK scope (specificity 0,1,0),
which blocked the page-level cascade from `html[data-theme]` /
`body[data-ct-color-mode]` (specificity 0,1,1). When Blocksy's
Colour Mode Switch flipped body's attribute, every non-JBH
element on the page re-resolved palette INSTANTLY — but JBH
blocks stayed stuck on their class-level palette until the
MutationObserver microtask fired and JS swapped `.jbh-dark` for
`.jbh-light`. Between the paint after Blocksy's mutation and the
paint after our class swap, one-to-two frames of laggy
transition were visible (watermark color fading, card-header
gradient reshuffling, etc.).
The fix: one ancestor-qualified rule per direction that reaches
INTO the block and re-declares palette + custom-var aliases with
specificity 0,3,1 — higher than `.jbh-dark` / `.jbh-light`'s
0,1,0, so it wins without `!important`. Specificity breakdown:
:is(html[data-theme="light"], …) → 0,1,1 (attr + element)
:is(.jbh-dark, .jbh-light, …) → 0,1,0 (one class)
:not(.jbh-override-theme) → 0,1,0 (one class)
total → 0,3,1
Because the paint triggered by Blocksy's attribute mutation
is the SAME frame that re-resolves these rules, the block
changes palette in lock-step with the rest of the site — zero
JS dependency, zero observable lag.
Opt-out: any block with `.jbh-override-theme` skips this cascade
entirely (that class is the explicit "I want to stay in MY mode
regardless of site mode" marker emitted by render.php when the
Inspector's Override Site Mode toggle is on).
────────────────────────────────────────────────────────────── */
/* INVERTED: SITE LIGHT → blocks DARK */
:is(html[data-jbh-invert][data-theme="light"], html[data-jbh-invert].light, html[data-jbh-invert][data-color-mode="light"]) :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme),
html[data-jbh-invert] body[data-ct-color-mode="light"] :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme) {
--jbh-bg: #121212;
--jbh-card: #1A1A1A;
--jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF;
--jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF;
--jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
/* Grid blocks shared — dark aliases */
--jbh-custom-header: var(--jbh-custom-header-dk);
--jbh-custom-price: var(--jbh-custom-price-dk);
--jbh-custom-desc: var(--jbh-custom-desc-dk);
--jbh-custom-icon: var(--jbh-custom-icon-dk);
--jbh-custom-btn: var(--jbh-custom-btn-dk);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-dk);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-dk);
--jbh-custom-card-border: var(--jbh-custom-card-border-dk);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-dk);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-dk);
--jbh-custom-badge: var(--jbh-custom-badge-dk);
--jbh-custom-target: var(--jbh-custom-target-dk);
--jbh-custom-tag: var(--jbh-custom-tag-dk);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-dk);
/* Studio grid */
--jbh-custom-target-text: var(--jbh-custom-target-text-dk);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-dk);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-dk);
--jbh-custom-price-label: var(--jbh-custom-price-label-dk);
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-dk);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-dk);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-dk);
--jbh-custom-includes-label: var(--jbh-custom-includes-label-dk);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-dk);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-dk);
--jbh-custom-addons-label: var(--jbh-custom-addons-label-dk);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-dk);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-dk);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-dk);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-dk);
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-dk);
/* Pricing plans — billing toggle */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-dk);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-dk);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-dk);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-dk);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-dk);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-dk);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-dk);
--jbh-filter-text: var(--jbh-filter-text-dk);
--jbh-filter-border: var(--jbh-filter-border-dk);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-dk);
--jbh-filter-active-text: var(--jbh-filter-active-text-dk);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-dk);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-dk);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-dk);
--jbh-hero-badge-color: var(--jbh-hero-badge-dk);
--jbh-hero-btn-bg: var(--jbh-hero-btn-dk);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-dk);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-dk);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-dk);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-dk);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-dk);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-dk);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-dk);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-dk);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-dk);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-dk);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-dk);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-dk);
--jbh-sh-badge-color: var(--jbh-sh-badge-dk);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-dk);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-dk);
--jbh-pi-label-color: var(--jbh-pi-label-dk);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-dk);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-dk);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-dk);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-dk);
--jbh-cta-badge-color: var(--jbh-cta-badge-dk);
--jbh-cta-btn-bg: var(--jbh-cta-btn-dk);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-dk);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-dk);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-dk);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-dk);
--jbh-about-bio-color: var(--jbh-about-bio-dk);
--jbh-about-label-color: var(--jbh-about-label-dk);
--jbh-about-card-bg: var(--jbh-about-card-bg-dk);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-dk);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-dk);
--jbh-ig-category-color: var(--jbh-ig-category-dk);
--jbh-ig-link-color: var(--jbh-ig-link-dk);
--jbh-ig-date-color: var(--jbh-ig-date-dk);
--jbh-ig-tag-color: var(--jbh-ig-tag-dk);
--jbh-ig-author-color: var(--jbh-ig-author-dk);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-dk);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-dk);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-dk);
--jbh-ig-card-border: var(--jbh-ig-card-border-dk);
--jbh-ig-icon-color: var(--jbh-ig-icon-dk);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-dk);
--jbh-pf-meta-color: var(--jbh-pf-meta-dk);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-dk);
}
/* INVERTED: SITE DARK → blocks LIGHT */
:is(html[data-jbh-invert][data-theme="dark"], html[data-jbh-invert].dark, html[data-jbh-invert][data-color-mode="dark"]) :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme),
html[data-jbh-invert] body[data-ct-color-mode="dark"] :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme) {
/* Surface tokens (mirror frontend.css:64-69 .jbh-light {}) */
--jbh-bg: #F9F8F6;
--jbh-card: #FFFFFF;
--jbh-creme: #121212;
--jbh-slate: #4B5563;
--jbh-heading-color: #121212;
--jbh-text-color: #4B5563;
--jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
/* Grid blocks shared — light aliases */
--jbh-custom-header: var(--jbh-custom-header-lt);
--jbh-custom-price: var(--jbh-custom-price-lt);
--jbh-custom-desc: var(--jbh-custom-desc-lt);
--jbh-custom-icon: var(--jbh-custom-icon-lt);
--jbh-custom-btn: var(--jbh-custom-btn-lt);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-lt);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-lt);
--jbh-custom-card-border: var(--jbh-custom-card-border-lt);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-lt);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-lt);
--jbh-custom-badge: var(--jbh-custom-badge-lt);
--jbh-custom-target: var(--jbh-custom-target-lt);
--jbh-custom-tag: var(--jbh-custom-tag-lt);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-lt);
/* Studio grid */
--jbh-custom-target-text: var(--jbh-custom-target-text-lt);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-lt);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-lt);
--jbh-custom-price-label: var(--jbh-custom-price-label-lt);
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-lt);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-lt);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-lt);
--jbh-custom-includes-label: var(--jbh-custom-includes-label-lt);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-lt);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-lt);
--jbh-custom-addons-label: var(--jbh-custom-addons-label-lt);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-lt);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-lt);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-lt);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-lt);
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-lt);
/* Pricing plans — billing toggle */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-lt);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-lt);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-lt);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-lt);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-lt);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-lt);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-lt);
--jbh-filter-text: var(--jbh-filter-text-lt);
--jbh-filter-border: var(--jbh-filter-border-lt);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-lt);
--jbh-filter-active-text: var(--jbh-filter-active-text-lt);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-lt);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-lt);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-lt);
--jbh-hero-badge-color: var(--jbh-hero-badge-lt);
--jbh-hero-btn-bg: var(--jbh-hero-btn-lt);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-lt);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-lt);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-lt);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-lt);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-lt);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-lt);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-lt);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-lt);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-lt);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-lt);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-lt);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-lt);
--jbh-sh-badge-color: var(--jbh-sh-badge-lt);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-lt);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-lt);
--jbh-pi-label-color: var(--jbh-pi-label-lt);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-lt);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-lt);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-lt);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-lt);
--jbh-cta-badge-color: var(--jbh-cta-badge-lt);
--jbh-cta-btn-bg: var(--jbh-cta-btn-lt);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-lt);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-lt);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-lt);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-lt);
--jbh-about-bio-color: var(--jbh-about-bio-lt);
--jbh-about-label-color: var(--jbh-about-label-lt);
--jbh-about-card-bg: var(--jbh-about-card-bg-lt);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-lt);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-lt);
--jbh-ig-category-color: var(--jbh-ig-category-lt);
--jbh-ig-link-color: var(--jbh-ig-link-lt);
--jbh-ig-date-color: var(--jbh-ig-date-lt);
--jbh-ig-tag-color: var(--jbh-ig-tag-lt);
--jbh-ig-author-color: var(--jbh-ig-author-lt);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-lt);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-lt);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-lt);
--jbh-ig-card-border: var(--jbh-ig-card-border-lt);
--jbh-ig-icon-color: var(--jbh-ig-icon-lt);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-lt);
--jbh-pf-meta-color: var(--jbh-pf-meta-lt);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-lt);
}
/* ── STANDARD (non-inverted) mega-selectors ─────────────────────
When data-jbh-invert is absent, site mode maps straight through:
site dark → blocks dark, site light → blocks light. ────────── */
/* STANDARD: SITE LIGHT → blocks LIGHT */
:is(html:not([data-jbh-invert])[data-theme="light"], html:not([data-jbh-invert]).light, html:not([data-jbh-invert])[data-color-mode="light"]) :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme),
html:not([data-jbh-invert]) body[data-ct-color-mode="light"] :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme) {
--jbh-bg: #F9F8F6;
--jbh-card: #FFFFFF;
--jbh-creme: #121212;
--jbh-slate: #4B5563;
--jbh-heading-color: #121212;
--jbh-text-color: #4B5563;
--jbh-card-heading: #121212;
--jbh-border: rgba(0, 0, 0, 0.12);
/* Grid blocks shared — light aliases */
--jbh-custom-header: var(--jbh-custom-header-lt);
--jbh-custom-price: var(--jbh-custom-price-lt);
--jbh-custom-desc: var(--jbh-custom-desc-lt);
--jbh-custom-icon: var(--jbh-custom-icon-lt);
--jbh-custom-btn: var(--jbh-custom-btn-lt);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-lt);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-lt);
--jbh-custom-card-border: var(--jbh-custom-card-border-lt);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-lt);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-lt);
--jbh-custom-badge: var(--jbh-custom-badge-lt);
--jbh-custom-target: var(--jbh-custom-target-lt);
--jbh-custom-tag: var(--jbh-custom-tag-lt);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-lt);
/* Studio grid */
--jbh-custom-target-text: var(--jbh-custom-target-text-lt);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-lt);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-lt);
--jbh-custom-price-label: var(--jbh-custom-price-label-lt);
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-lt);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-lt);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-lt);
--jbh-custom-includes-label: var(--jbh-custom-includes-label-lt);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-lt);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-lt);
--jbh-custom-addons-label: var(--jbh-custom-addons-label-lt);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-lt);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-lt);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-lt);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-lt);
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-lt);
/* Pricing plans — billing toggle */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-lt);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-lt);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-lt);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-lt);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-lt);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-lt);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-lt);
--jbh-filter-text: var(--jbh-filter-text-lt);
--jbh-filter-border: var(--jbh-filter-border-lt);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-lt);
--jbh-filter-active-text: var(--jbh-filter-active-text-lt);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-lt);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-lt);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-lt);
--jbh-hero-badge-color: var(--jbh-hero-badge-lt);
--jbh-hero-btn-bg: var(--jbh-hero-btn-lt);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-lt);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-lt);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-lt);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-lt);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-lt);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-lt);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-lt);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-lt);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-lt);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-lt);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-lt);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-lt);
--jbh-sh-badge-color: var(--jbh-sh-badge-lt);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-lt);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-lt);
--jbh-pi-label-color: var(--jbh-pi-label-lt);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-lt);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-lt);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-lt);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-lt);
--jbh-cta-badge-color: var(--jbh-cta-badge-lt);
--jbh-cta-btn-bg: var(--jbh-cta-btn-lt);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-lt);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-lt);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-lt);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-lt);
--jbh-about-bio-color: var(--jbh-about-bio-lt);
--jbh-about-label-color: var(--jbh-about-label-lt);
--jbh-about-card-bg: var(--jbh-about-card-bg-lt);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-lt);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-lt);
--jbh-ig-category-color: var(--jbh-ig-category-lt);
--jbh-ig-link-color: var(--jbh-ig-link-lt);
--jbh-ig-date-color: var(--jbh-ig-date-lt);
--jbh-ig-tag-color: var(--jbh-ig-tag-lt);
--jbh-ig-author-color: var(--jbh-ig-author-lt);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-lt);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-lt);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-lt);
--jbh-ig-card-border: var(--jbh-ig-card-border-lt);
--jbh-ig-icon-color: var(--jbh-ig-icon-lt);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-lt);
--jbh-pf-meta-color: var(--jbh-pf-meta-lt);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-lt);
}
/* STANDARD: SITE DARK → blocks DARK */
:is(html:not([data-jbh-invert])[data-theme="dark"], html:not([data-jbh-invert]).dark, html:not([data-jbh-invert])[data-color-mode="dark"]) :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme),
html:not([data-jbh-invert]) body[data-ct-color-mode="dark"] :is(.jbh-dark, .jbh-light, .jbh-auto):not(.jbh-override-theme) {
--jbh-bg: #121212;
--jbh-card: #1A1A1A;
--jbh-creme: #F0EAD6;
--jbh-slate: #9CA3AF;
--jbh-heading-color: #F0EAD6;
--jbh-text-color: #9CA3AF;
--jbh-card-heading: #ffffff;
--jbh-border: rgba(31, 95, 91, 0.20);
/* Grid blocks shared — dark aliases */
--jbh-custom-header: var(--jbh-custom-header-dk);
--jbh-custom-price: var(--jbh-custom-price-dk);
--jbh-custom-desc: var(--jbh-custom-desc-dk);
--jbh-custom-icon: var(--jbh-custom-icon-dk);
--jbh-custom-btn: var(--jbh-custom-btn-dk);
--jbh-custom-btn-text: var(--jbh-custom-btn-text-dk);
--jbh-custom-card-bg: var(--jbh-custom-card-bg-dk);
--jbh-custom-card-border: var(--jbh-custom-card-border-dk);
--jbh-custom-btn-hover: var(--jbh-custom-btn-hover-dk);
--jbh-custom-btn-hover-text: var(--jbh-custom-btn-hover-text-dk);
--jbh-custom-badge: var(--jbh-custom-badge-dk);
--jbh-custom-target: var(--jbh-custom-target-dk);
--jbh-custom-tag: var(--jbh-custom-tag-dk);
--jbh-custom-block-bg: var(--jbh-custom-block-bg-dk);
/* Studio grid */
--jbh-custom-target-text: var(--jbh-custom-target-text-dk);
--jbh-custom-timeline-label: var(--jbh-custom-timeline-label-dk);
--jbh-custom-timeline-value: var(--jbh-custom-timeline-value-dk);
--jbh-custom-price-label: var(--jbh-custom-price-label-dk);
--jbh-custom-card-header-bg: var(--jbh-custom-card-header-bg-dk);
--jbh-custom-icon-box-bg: var(--jbh-custom-icon-box-bg-dk);
--jbh-custom-target-band-bg: var(--jbh-custom-target-band-bg-dk);
--jbh-custom-includes-label: var(--jbh-custom-includes-label-dk);
--jbh-custom-includes-text: var(--jbh-custom-includes-text-dk);
--jbh-custom-includes-icon: var(--jbh-custom-includes-icon-dk);
--jbh-custom-addons-label: var(--jbh-custom-addons-label-dk);
--jbh-custom-addons-pill-bg: var(--jbh-custom-addons-pill-bg-dk);
--jbh-custom-addons-pill-bd: var(--jbh-custom-addons-pill-bd-dk);
--jbh-custom-addons-pill-tx: var(--jbh-custom-addons-pill-tx-dk);
--jbh-custom-addons-price: var(--jbh-custom-addons-price-dk);
--jbh-custom-card-footer-bg: var(--jbh-custom-card-footer-bg-dk);
/* Pricing plans — billing toggle */
--jbh-custom-toggle-track: var(--jbh-custom-toggle-track-dk);
--jbh-custom-toggle-track-active: var(--jbh-custom-toggle-track-active-dk);
--jbh-custom-toggle-dot: var(--jbh-custom-toggle-dot-dk);
/* Store grid — Product badge */
--jbh-custom-badge-bg: var(--jbh-custom-badge-bg-dk);
--jbh-custom-badge-text: var(--jbh-custom-badge-text-dk);
/* Store grid — Featured-product outline */
--jbh-featured-outline: var(--jbh-featured-outline-dk);
/* Store grid — Filter / sort / search toolbar */
--jbh-filter-bg: var(--jbh-filter-bg-dk);
--jbh-filter-text: var(--jbh-filter-text-dk);
--jbh-filter-border: var(--jbh-filter-border-dk);
--jbh-filter-active-bg: var(--jbh-filter-active-bg-dk);
--jbh-filter-active-text: var(--jbh-filter-active-text-dk);
/* Hero section */
--jbh-hero-heading-color: var(--jbh-hero-heading-dk);
--jbh-hero-heading2-color: var(--jbh-hero-heading2-dk);
--jbh-hero-subtitle-color: var(--jbh-hero-subtitle-dk);
--jbh-hero-badge-color: var(--jbh-hero-badge-dk);
--jbh-hero-btn-bg: var(--jbh-hero-btn-dk);
--jbh-hero-btn-text: var(--jbh-hero-btn-text-dk);
--jbh-hero-btn-hover-bg: var(--jbh-hero-btn-hover-dk);
--jbh-hero-btn-hover-text: var(--jbh-hero-btn-hover-text-dk);
--jbh-hero-sec-btn-bg: var(--jbh-hero-sec-btn-dk);
--jbh-hero-sec-btn-text: var(--jbh-hero-sec-btn-text-dk);
--jbh-hero-feat-card-bg: var(--jbh-hero-feat-card-bg-dk);
--jbh-hero-feat-heading: var(--jbh-hero-feat-heading-dk);
--jbh-hero-feat-desc: var(--jbh-hero-feat-desc-dk);
--jbh-hero-feat-icon: var(--jbh-hero-feat-icon-dk);
--jbh-hero-feat-eyebrow: var(--jbh-hero-feat-eyebrow-dk);
/* Section header */
--jbh-sh-heading-color: var(--jbh-sh-heading-dk);
--jbh-sh-subtitle-color: var(--jbh-sh-subtitle-dk);
--jbh-sh-badge-color: var(--jbh-sh-badge-dk);
/* Page intro */
--jbh-pi-heading-color: var(--jbh-pi-heading-dk);
--jbh-pi-subtitle-color: var(--jbh-pi-subtitle-dk);
--jbh-pi-label-color: var(--jbh-pi-label-dk);
--jbh-pi-callout-text-color: var(--jbh-pi-callout-text-dk);
--jbh-pi-status-text-color: var(--jbh-pi-status-text-dk);
/* CTA banner */
--jbh-cta-heading-color: var(--jbh-cta-heading-dk);
--jbh-cta-subtitle-color: var(--jbh-cta-subtitle-dk);
--jbh-cta-badge-color: var(--jbh-cta-badge-dk);
--jbh-cta-btn-bg: var(--jbh-cta-btn-dk);
--jbh-cta-btn-text: var(--jbh-cta-btn-text-dk);
--jbh-cta-btn-hover-bg: var(--jbh-cta-btn-hover-dk);
--jbh-cta-btn-hover-text: var(--jbh-cta-btn-hover-text-dk);
/* About section */
--jbh-about-heading-color: var(--jbh-about-heading-dk);
--jbh-about-bio-color: var(--jbh-about-bio-dk);
--jbh-about-label-color: var(--jbh-about-label-dk);
--jbh-about-card-bg: var(--jbh-about-card-bg-dk);
/* Insights grid */
--jbh-ig-heading-color: var(--jbh-ig-heading-dk);
--jbh-ig-excerpt-color: var(--jbh-ig-excerpt-dk);
--jbh-ig-category-color: var(--jbh-ig-category-dk);
--jbh-ig-link-color: var(--jbh-ig-link-dk);
--jbh-ig-date-color: var(--jbh-ig-date-dk);
--jbh-ig-tag-color: var(--jbh-ig-tag-dk);
--jbh-ig-author-color: var(--jbh-ig-author-dk);
--jbh-ig-link-hover-color: var(--jbh-ig-link-hover-dk);
--jbh-ig-meta-bg: var(--jbh-ig-meta-bg-dk);
--jbh-ig-card-bg: var(--jbh-ig-card-bg-dk);
--jbh-ig-card-border: var(--jbh-ig-card-border-dk);
--jbh-ig-icon-color: var(--jbh-ig-icon-dk);
/* Portfolio grid */
--jbh-pf-subtitle-color: var(--jbh-pf-subtitle-dk);
--jbh-pf-meta-color: var(--jbh-pf-meta-dk);
--jbh-pf-icon-label-color: var(--jbh-pf-icon-label-dk);
}
/* ── Smooth Dark ↔ Light Mode Flip ──────────────────────────────
Two historical implementations existed before the current one:
v1 (laggy) — added `.jbh-theme-transitioning` for 400 ms and
ran a 0.4s cross-fade on every palette-touching
property. The dark gradient on a studio-grid
card header (painted via `background:
linear-gradient(…, var(--jbh-bg), …)`) ended up
cross-fading with its light-mode counterpart
for almost half a second — the toggle felt
broken, not fluid.
v2 (jarring)— added `.jbh-mode-flipping` and nuked every
transition to 0 s so the palette repainted
INSTANTLY. Solid colors snapped hard while
Blocksy's own site-wide UI continued fading
smoothly over 0.3s, so JBH blocks looked out of
sync with the rest of the page.
v4 (current) — the best of both: during the flip we APPLY a
fast 0.15s ease-out transition — but ONLY on the solid color
properties (`background-color`, `color`, `border-color`, `fill`,
`stroke`, `outline-color`). `background-image` is intentionally
omitted, so any element painting a gradient (studio card header,
hero ambience ring, CTA banner neon wash) swaps its computed
gradient instantly — dodging the v1 cross-fade artifact entirely
— while every flat-color element fades in lock-step with
Blocksy Pro's default 150 ms chrome fade. v3 used 0.25s which
visibly trailed the surrounding page; 0.15s locks JBH blocks to
the same cadence as Blocksy's own palette swap.
`!important` is required to beat element-level `transition:`
shorthands that might otherwise re-specify `transition-property:
all`. The class is only present for ~170 ms (one 0.15s
transition cycle + a 20 ms safety margin) so hover transitions
resume normal behavior as soon as the fade completes.
Scope is the 13 JBH block wrappers + the two modal overlays.
Universal selectors (`.jbh-mode-flipping *`) would interfere
with Blocksy's own mode-switch transitions, so we stay opt-in.
v1.2.4: added page-intro, contact-section, testimonials and
tools-resources so the cross-fade applies uniformly to every
block the plugin ships — previously these 4 snapped while their
neighbours faded, which read as a glitch on multi-block pages. */
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
),
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
) *,
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
) *::before,
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
) *::after {
transition:
background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
outline-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Accessibility — honour the user's prefers-reduced-motion setting.
When reduced motion is requested, we go back to the v2 instant
flip so the mode swap happens without any fade whatsoever. */
@media (prefers-reduced-motion: reduce) {
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
),
html.jbh-mode-flipping :is(
.jbh-studio-grid,
.jbh-store-grid,
.jbh-pricing-plans,
.jbh-portfolio-grid,
.jbh-hero-section,
.jbh-section-header,
.jbh-about-section,
.jbh-insights-grid,
.jbh-cta-banner,
.jbh-page-intro,
.jbh-contact-section,
.jbh-testimonials,
.jbh-tools-resources,
#jbh-modal-overlay,
.jbh-portfolio-modal-overlay
) * {
transition: none !important;
animation-duration: 0s !important;
}
}
/* ── Gap / Radius Variants ───────────────────────────────────── */
.jbh-gap-small { --jbh-gap: 12px; }
.jbh-gap-medium { --jbh-gap: 20px; }
.jbh-gap-large { --jbh-gap: 32px; }
.jbh-radius-none { --jbh-card-radius: 0; }
.jbh-radius-small { --jbh-card-radius: 4px; }
.jbh-radius-medium { --jbh-card-radius: 8px; }
.jbh-radius-large { --jbh-card-radius: 16px; }
/* ================================================================
1. STUDIO GRID
================================================================ */
.jbh-studio-grid { background: var(--jbh-custom-block-bg, var(--jbh-bg)); padding: 60px 24px; font-family: var(--jbh-font-sans); }
.jbh-studio-grid .jbh-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.jbh-service-grid { display: grid; gap: var(--jbh-gap); grid-template-columns: repeat(var(--jbh-cols, 3), 1fr); }
.jbh-service-card { position: relative; background: var(--jbh-custom-card-bg, var(--jbh-card)); border-radius: var(--jbh-card-radius); padding: 0; display: flex; flex-direction: column; transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition); overflow: hidden; border: 1px solid rgba(42,157,143,0.10); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.jbh-service-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.14); }
.jbh-service-card.jbh-recommended { border: 2px solid var(--jbh-custom-badge-bg, var(--jbh-teal-dark)); box-shadow: 0 8px 30px rgba(42,157,143,0.15); z-index: 10; overflow: visible !important; }
@media (min-width: 1024px) {
.jbh-studio-grid .jbh-service-grid .jbh-service-card { margin-top: 16px; }
.jbh-studio-grid .jbh-service-grid .jbh-service-card.jbh-recommended { margin-top: 0; transform: translateY(-16px); }
.jbh-studio-grid .jbh-service-grid .jbh-service-card.jbh-recommended:hover { transform: translateY(-18px); }
}
.jbh-card-rec-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--jbh-custom-badge-bg, var(--jbh-teal-dark)); color: var(--jbh-custom-badge-text, #fff); font-size: 10px; font-family: var(--jbh-font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; padding: 6px 20px; border-radius: 999px; white-space: nowrap; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
/* Card header surface. When no picker is set the background falls back
to the original `linear-gradient(to bottom, var(--jbh-bg), transparent)`
so existing sites keep their look. When the Inspector's "Card Header
Background" picker is set (per mode), that value wins. This is also
what makes the dark-mode gradient vanish instantly on mode flip —
the user-set bg shares a single token which the cascade resolver
swaps atomically. */
.jbh-card-header { padding: 32px 32px 24px; position: relative; overflow: hidden; border-bottom: 1px solid var(--jbh-border); background: var(--jbh-custom-card-header-bg, linear-gradient(to bottom, var(--jbh-bg), transparent)); border-radius: var(--jbh-card-radius) var(--jbh-card-radius) 0 0; }
.jbh-recommended .jbh-card-header { padding-top: 40px; }
.jbh-no-header-gradient .jbh-card-header { background: var(--jbh-custom-card-header-bg, var(--jbh-card)); }
/* Mode-reactive watermark opacity. 0.05 teal reads fine on a dark card but
is practically invisible on white — light mode bumps to 0.08 so it stays
perceptible as intentional texture instead of a rendering bug. */
/* Watermark color change is INSTANT on mode flip — the previous
`transition: color 0.5s ease` was the primary visible culprit in
the "dark → light has a lingering teal ghost" bug. Hover fade-in
is still smooth because the transition lives on the :hover
selector only, which means palette changes (which bypass :hover)
skip the transition entirely and repaint at the site's new mode. */
.jbh-card-watermark { position: absolute; bottom: -40px; right: -40px; width: 192px; height: 192px; color: var(--jbh-watermark-color, rgba(42,157,143,0.05)); pointer-events: none; }
.jbh-service-card:hover .jbh-card-watermark { color: var(--jbh-watermark-color-hover, rgba(42,157,143,0.10)); transition: color 0.3s ease; }
.jbh-card-watermark svg { width: 100%; height: 100%; }
.jbh-card-header-inner { position: relative; z-index: 2; }
.jbh-card-icon-box { width: 56px; height: 56px; background: var(--jbh-custom-icon-box-bg, rgba(42,157,143,0.10)); color: var(--jbh-custom-icon, var(--jbh-teal)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
.jbh-card-icon-box svg { width: 28px; height: 28px; }
.jbh-card-title { font-family: var(--jbh-font-serif); font-size: 22px; font-weight: 700; color: var(--jbh-card-heading); margin: 0 0 10px; }
.jbh-card-desc { color: var(--jbh-text-color); font-size: 14px; line-height: 1.7; margin: 0; font-weight: 300; }
.jbh-card-target-band { padding: 16px 32px; background: var(--jbh-custom-target-band-bg, rgba(42,157,143,0.05)); border-bottom: 1px solid var(--jbh-border); display: flex; flex-direction: column; gap: 4px; }
.jbh-card-target-label { font-size: 10px; font-family: var(--jbh-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--jbh-custom-target, var(--jbh-text-color)); }
.jbh-card-target-text { font-size: 12px; font-weight: 500; color: var(--jbh-custom-target-text, var(--jbh-heading-color)); line-height: 1.4; }
.jbh-card-body { padding: 32px; flex-grow: 1; display: flex; flex-direction: column; }
.jbh-card-includes-label { font-size: 10px; font-family: var(--jbh-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--jbh-custom-includes-label, var(--jbh-text-color)); margin: 0 0 16px; font-weight: 400; }
.jbh-card-includes { list-style: none; padding: 0; margin: 0 0 24px; }
.jbh-card-includes li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--jbh-custom-includes-text, var(--jbh-heading-color)); font-weight: 300; line-height: 1.5; padding: 8px 0; }
.jbh-check-icon { width: 16px; height: 16px; min-width: 16px; margin-top: 2px; color: var(--jbh-custom-includes-icon, var(--jbh-custom-icon, var(--jbh-teal))); }
.jbh-card-addons-wrap { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--jbh-border); }
.jbh-card-addons-label { font-size: 10px; font-family: var(--jbh-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--jbh-custom-addons-label, var(--jbh-text-color)); margin: 0 0 12px; font-weight: 400; }
/* Vertical-stacked add-on rows. Each add-on is a full-width row with the
label on the left (flex-grows so long names like "Key Concept Illustration"
wrap rather than collide with the price column) and the price right-aligned.
Switched from a horizontal pill strip because the labels are long enough
that 2-up pills got cramped on 3-column desktop grids and every viewport on
mobile, and because each add-on now always shows its price (boolean add-ons
render "+$X", quantity add-ons render "$X/ea"), which makes a cleaner
tabular reading order than wrapping pills. */
.jbh-card-addons-pills { display: flex; flex-direction: column; gap: 6px; }
.jbh-addon-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-family: var(--jbh-font-mono); color: var(--jbh-custom-addons-pill-tx, var(--jbh-text-color)); border: 1px solid var(--jbh-custom-addons-pill-bd, rgba(42,157,143,0.20)); background: var(--jbh-custom-addons-pill-bg, var(--jbh-bg)); padding: 8px 14px; border-radius: 8px; transition: border-color var(--jbh-transition); cursor: default; }
.jbh-service-card:hover .jbh-addon-pill { border-color: var(--jbh-custom-addons-pill-bd, rgba(42,157,143,0.40)); }
.jbh-addon-label { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.jbh-addon-price { color: var(--jbh-custom-addons-price, var(--jbh-teal)); font-weight: 700; flex-shrink: 0; white-space: nowrap; }
.jbh-card-footer { padding: 24px 32px; margin-top: auto; border-top: 1px solid var(--jbh-border); background: color-mix(in srgb, var(--jbh-bg) 50%, transparent); border-radius: 0 0 var(--jbh-card-radius) var(--jbh-card-radius); }
.jbh-card-pricing { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.jbh-card-price-group, .jbh-card-timeline-group { display: flex; flex-direction: column; }
/* Price label ("Digital Product Investment" by default) inherits from
the Timeline Label picker when its own picker is empty. This removes
the friction of having to pick the same colour twice for what reads
as one visual row in the card footer. Users who want independent
control still get it by setting the Price Label Color explicitly. */
.jbh-card-price-label { font-size: 10px; font-family: var(--jbh-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--jbh-custom-price-label, var(--jbh-custom-timeline-label, var(--jbh-text-color))); margin-bottom: 4px; }
.jbh-card-timeline-label { font-size: 10px; font-family: var(--jbh-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--jbh-custom-timeline-label, var(--jbh-text-color)); margin-bottom: 4px; }
.jbh-card-price { font-family: var(--jbh-font-serif); font-size: 36px; font-weight: 700; color: var(--jbh-custom-price, var(--jbh-card-heading)); line-height: 1; }
.jbh-card-timeline { font-family: var(--jbh-font-serif); font-size: 14px; font-weight: 700; color: var(--jbh-custom-timeline-value, var(--jbh-custom-icon, var(--jbh-teal))); }
.jbh-card-timeline-group { text-align: right; }
.jbh-get-started-btn { display: block; width: 100%; padding: 16px; border-radius: var(--jbh-card-radius); font-size: 14px; font-weight: 700; font-family: var(--jbh-font-serif); letter-spacing: 0.02em; cursor: pointer; transition: all var(--jbh-transition); text-align: center; background: var(--jbh-custom-btn, var(--jbh-teal)); color: var(--jbh-custom-btn-text, #ffffff); border: 2px solid var(--jbh-custom-btn, var(--jbh-teal)); }
.jbh-get-started-btn:hover, .jbh-get-started-btn:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }
.jbh-get-started-btn.jbh-btn-coral { background: var(--jbh-coral); border-color: var(--jbh-coral); box-shadow: 0 4px 14px rgba(214,79,66,0.25); }
.jbh-get-started-btn.jbh-btn-coral:hover { background: var(--jbh-coral-hover, #E76F51); border-color: var(--jbh-coral-hover, #E76F51); }
.jbh-layout-list .jbh-service-grid { grid-template-columns: 1fr !important; }
.jbh-layout-list .jbh-service-card { flex-direction: row; }
.jbh-layout-list .jbh-card-header { border-bottom: none; border-right: 1px solid var(--jbh-border); min-width: 280px; border-radius: var(--jbh-card-radius) 0 0 var(--jbh-card-radius); }
.jbh-layout-list .jbh-card-footer { border-top: none; }
/* ── 4-column compact sizing for studio cards ──────────────────
With the new four-card default (blueprint / ecosystem / acoustic /
kinetic) each card drops to ~287px wide on a 1280px viewport.
Tighten structural padding + icon-box so headline / target band /
includes list / add-on pills breathe inside the narrower track.
Desktop 4-column cards need slightly tighter title rhythm so longer
service names fit their card width without weakening the naming.
Scoped to min-width:1025px because the existing
responsive rule already collapses to 2-up below that width and the
tightening would otherwise over-shrink the 2-up layout. */
@media (min-width: 1025px) {
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-header { padding: 24px 22px 18px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-recommended .jbh-card-header { padding-top: 32px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-target-band { padding: 14px 22px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-body { padding: 22px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-footer { padding: 20px 22px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-icon-box { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 10px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-icon-box svg { width: 24px; height: 24px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-title { font-size: clamp(17px, 1.15vw, 18.5px); line-height: 1.16; letter-spacing: -0.01em; min-height: 2.35em; text-wrap: balance; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-desc { min-height: 4.25em; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-card-includes { margin: 0 0 18px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-addon-pill { padding: 8px 12px; font-size: 12px; }
.jbh-studio-grid[style*="--jbh-cols:4"] .jbh-get-started-btn { padding: 14px; font-size: 13px; }
}
/* ── Studio card title balance — tablet/mobile ─────────────────
Desktop keeps the 4-column tightening above. This adds softer
responsive title sizing for 2-column tablet and 1-column mobile
Studio cards without touching Store, Plans, Portfolio, or modals. */
@media (max-width: 1024px) {
.jbh-studio-grid .jbh-service-card .jbh-card-title {
font-size: clamp(19px, 3.2vw, 21px);
line-height: 1.18;
letter-spacing: -0.01em;
text-wrap: balance;
}
}
@media (max-width: 480px) {
.jbh-studio-grid .jbh-service-card .jbh-card-title {
font-size: clamp(18px, 5vw, 20px);
line-height: 1.18;
min-height: 0;
}
}
/* ── Container overflow — break out of parent width ────────────
When the user enables "Break Out of Container Width" in the
inspector the wrapper escapes its parent's `max-width` cap via
the negative-margin recenter trick (`margin-left: calc((100% -
breakoutWidth) / 2)`). The breakout extent is driven by the
`--jbh-overflow-w` variable that render.php emits from the
inspector slider value (60vw–100vw). The variable defaults to
`100vw` so any pre-existing block saved with only the toggle
attribute still produces a true edge-to-edge bleed. The inner
`.jbh-service-grid` carries the user's optional max-width cap
(--jbh-overflow-max-width) so the cards stay readable while the
wrapper background can still bleed full-bleed — a pattern
WP-core's `.alignfull` doesn't support out of the box.
`box-sizing: border-box` keeps the existing 24px horizontal
padding inside the breakout bounds (without it the wrapper
would overflow horizontally and produce a phantom scrollbar).
Selector specificity (0,2,0) is intentionally LOWER than the
constraint rule's (0,4,0) at the bottom of this file — the
constraint self-excludes via `:not(.jbh-overflow-container)` so
the two rules cleanly partition the element space without
relying on a specificity contest. */
.jbh-studio-grid.jbh-overflow-container {
width: var(--jbh-overflow-w, 100vw);
max-width: var(--jbh-overflow-w, 100vw);
margin-left: calc((100% - var(--jbh-overflow-w, 100vw)) / 2);
margin-right: calc((100% - var(--jbh-overflow-w, 100vw)) / 2);
box-sizing: border-box;
}
.jbh-studio-grid.jbh-overflow-container .jbh-service-grid {
max-width: var(--jbh-overflow-max-width, none);
margin-left: auto;
margin-right: auto;
}
/* ================================================================
COMPACT CARDS — collapse card bodies; expand ALL simultaneously
when ANY card in the grid is hovered / focused / when the user
clicks the "Expand All" button (toggles .jbh-force-expanded on
the wrapper).
================================================================ */
.jbh-compact-cards .jbh-card-body {
max-height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1),
padding 0.35s ease,
opacity 0.35s ease;
}
/* ── Hover behaviour: ALL mode (default) ─────────────────────────
Grid-level hover/focus expands EVERY card body in lockstep so the
visitor can compare packages without chasing the pointer
card-by-card. .jbh-force-expanded is the persistent state toggled
by the Expand All button (see frontend.js → initStudioExpandAll).
The `:not(.jbh-hover-single)` guard hands control over to the
single-card rule set further below when the editor opts in. */
.jbh-compact-cards:not(.jbh-hover-single) .jbh-service-grid:hover .jbh-card-body,
.jbh-compact-cards:not(.jbh-hover-single) .jbh-service-grid:focus-within .jbh-card-body,
.jbh-compact-cards.jbh-force-expanded .jbh-card-body {
max-height: 1200px;
padding-top: 32px;
padding-bottom: 32px;
opacity: 1;
}
/* ── Hover behaviour: SINGLE mode (.jbh-hover-single) ────────────
Restores the classic per-card hover/focus — only the card the
visitor is interacting with reveals its body; the rest stay
compact. .jbh-force-expanded still wins (the rule above already
matches because it doesn't carry the :not(.jbh-hover-single)
guard for that branch — see the third selector). */
.jbh-compact-cards.jbh-hover-single .jbh-service-card:hover .jbh-card-body,
.jbh-compact-cards.jbh-hover-single .jbh-service-card:focus-within .jbh-card-body {
max-height: 1200px;
padding-top: 32px;
padding-bottom: 32px;
opacity: 1;
}
/* SINGLE mode compact-height balance —
Tablet/desktop only: minimized cards share the same height.
Mobile stays natural because cards stack vertically. */
@media (min-width: 768px) {
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-grid:not(:hover):not(:focus-within) {
align-items: stretch;
grid-auto-rows: 1fr;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-grid:not(:hover):not(:focus-within) .jbh-service-card {
height: 100%;
}
/* During single-card hover/focus, keep only the active card expanding naturally. */
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-service-grid:hover,
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-service-grid:focus-within {
align-items: start;
grid-auto-rows: auto;
}
/* Minimized text safety: prevents long text from forcing one compact card taller. */
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-title,
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-desc,
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-target-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-title {
-webkit-line-clamp: 2;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-desc {
-webkit-line-clamp: 3;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-target-text {
-webkit-line-clamp: 3;
}
}
/* Mobile: natural stacked card heights. */
@media (max-width: 767px) {
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-service-grid {
align-items: stretch;
grid-auto-rows: auto;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-service-card {
height: auto;
}
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-card-title,
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-card-desc,
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-card-target-text {
display: block;
overflow: visible;
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
}
}
/* Belt-and-braces: also clamp `flex-grow` to 0 on non-hovered card
bodies in SINGLE mode so even if a parent layout (theme grid
override, FSE pattern, custom CSS) reintroduces stretching, the
card body itself refuses to consume the extra space and won't
create the "empty content" gap the user reported. The hovered
card's body still keeps its expanded max-height from the rule
above, so this only neutralises the empty-stretch bug. */
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded) .jbh-service-card:not(:hover):not(:focus-within) .jbh-card-body {
flex-grow: 0;
}
/* ── Studio card description height balance ─────────────────────
Keeps the description directly under each Studio card title aligned
across cards even when description word counts differ. Extra text is
line-clamped so the following "Best For" ribbon starts at the same
vertical position in every card. */
.jbh-studio-grid .jbh-service-card .jbh-card-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
overflow: hidden;
min-height: calc(1.7em * 4);
max-height: calc(1.7em * 4);
}
/* Tablet: wider cards need less reserved description space. */
@media (max-width: 1024px) {
.jbh-studio-grid .jbh-service-card .jbh-card-desc {
-webkit-line-clamp: 3;
line-clamp: 3;
min-height: calc(1.7em * 3);
max-height: calc(1.7em * 3);
}
}
/* Mobile: keep stacked cards consistent while preserving readability. */
@media (max-width: 480px) {
.jbh-studio-grid .jbh-service-card .jbh-card-desc {
-webkit-line-clamp: 4;
line-clamp: 4;
min-height: calc(1.7em * 4);
max-height: calc(1.7em * 4);
}
}
.jbh-compact-cards .jbh-card-target-band {
transition: opacity 0.3s ease, padding 0.3s ease;
}
/* Target band — ALL mode: compress only when the grid is fully idle
(no hover, no focus, not force-expanded) so every card looks
consistently compact before any interaction. */
.jbh-compact-cards:not(.jbh-hover-single):not(.jbh-force-expanded)
.jbh-service-grid:not(:hover):not(:focus-within) .jbh-card-target-band {
padding-top: 8px;
padding-bottom: 8px;
}
/* Target band — SINGLE mode: compress on every non-hovered card
individually so the band only "blooms" on the active card. */
.jbh-compact-cards.jbh-hover-single:not(.jbh-force-expanded)
.jbh-service-card:not(:hover):not(:focus-within) .jbh-card-target-band {
padding-top: 8px;
padding-bottom: 8px;
}
/* Subtle indicator hint — fades out when the matching card expands
so the visitor gets feedback that the content is now live. */
.jbh-compact-cards .jbh-service-card::after {
content: '';
display: block;
height: 3px;
background: linear-gradient(90deg, transparent, var(--jbh-custom-icon, var(--jbh-teal)), transparent);
opacity: 0.3;
transition: opacity 0.3s ease;
}
/* ::after fade — ALL mode: fade across every card on grid hover/focus */
.jbh-compact-cards:not(.jbh-hover-single) .jbh-service-grid:hover .jbh-service-card::after,
.jbh-compact-cards:not(.jbh-hover-single) .jbh-service-grid:focus-within .jbh-service-card::after,
.jbh-compact-cards.jbh-force-expanded .jbh-service-card::after {
opacity: 0;
}
/* ::after fade — SINGLE mode: fade only on the hovered/focused card */
.jbh-compact-cards.jbh-hover-single .jbh-service-card:hover::after,
.jbh-compact-cards.jbh-hover-single .jbh-service-card:focus-within::after {
opacity: 0;
}
/* Honour prefers-reduced-motion — collapse/expand without the
max-height easing curve so users on that setting don't see a
multi-second height crawl. */
@media (prefers-reduced-motion: reduce) {
.jbh-compact-cards .jbh-card-body {
transition: none;
}
}
/* ── Expand / Collapse All button ────────────────────────────────
Customisable position (top | bottom) + style (primary | outline |
ghost | subtle). The button toggles .jbh-force-expanded on the
wrapper; CSS rules above handle the visual state, JS just swaps
the class and updates aria-expanded for screen-readers. */
.jbh-expand-all-wrap {
display: flex;
justify-content: center;
width: 100%;
}
.jbh-expand-all-wrap-top { margin: 0 0 20px; }
.jbh-expand-all-wrap-bottom { margin: 24px 0 0; }
.jbh-expand-all-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px;
font-family: var(--jbh-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease,
border-color 0.25s ease, box-shadow 0.25s ease,
transform 0.15s ease;
border: 1.5px solid var(--jbh-custom-icon, var(--jbh-teal));
background: transparent;
color: var(--jbh-custom-icon, var(--jbh-teal));
}
.jbh-expand-all-btn:hover,
.jbh-expand-all-btn:focus-visible {
background: var(--jbh-custom-icon, var(--jbh-teal));
color: #fff;
outline: none;
box-shadow: 0 6px 18px color-mix(in srgb, var(--jbh-custom-icon, var(--jbh-teal)) 32%, transparent);
}
.jbh-expand-all-btn:active { transform: translateY(1px); }
/* Style variants — primary (filled), ghost (text only), subtle (low-emphasis) */
.jbh-expand-all-btn.is-primary {
background: var(--jbh-custom-icon, var(--jbh-teal));
color: #fff;
}
.jbh-expand-all-btn.is-primary:hover,
.jbh-expand-all-btn.is-primary:focus-visible {
filter: brightness(1.1);
box-shadow: 0 8px 24px color-mix(in srgb, var(--jbh-custom-icon, var(--jbh-teal)) 40%, transparent);
}
.jbh-expand-all-btn.is-ghost {
border-color: transparent;
padding-left: 12px;
padding-right: 12px;
}
.jbh-expand-all-btn.is-ghost:hover,
.jbh-expand-all-btn.is-ghost:focus-visible {
background: color-mix(in srgb, var(--jbh-custom-icon, var(--jbh-teal)) 10%, transparent);
color: var(--jbh-custom-icon, var(--jbh-teal));
box-shadow: none;
}
.jbh-expand-all-btn.is-subtle {
border-color: var(--jbh-border);
color: var(--jbh-card-desc);
background: color-mix(in srgb, var(--jbh-custom-icon, var(--jbh-teal)) 4%, transparent);
}
.jbh-expand-all-btn.is-subtle:hover,
.jbh-expand-all-btn.is-subtle:focus-visible {
border-color: var(--jbh-custom-icon, var(--jbh-teal));
color: var(--jbh-custom-icon, var(--jbh-teal));
background: color-mix(in srgb, var(--jbh-custom-icon, var(--jbh-teal)) 10%, transparent);
box-shadow: none;
}
.jbh-expand-all-icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.jbh-expand-all-btn[aria-expanded="true"] .jbh-expand-all-icon {
transform: rotate(180deg);
}
/* Label toggle — show "Expand" label when collapsed, "Collapse" when expanded */
.jbh-expand-all-btn .jbh-expand-label-collapse { display: none; }
.jbh-expand-all-btn[aria-expanded="true"] .jbh-expand-label-expand { display: none; }
.jbh-expand-all-btn[aria-expanded="true"] .jbh-expand-label-collapse { display: inline; }
/* ================================================================
CAROUSEL MODE — horizontal scroll with snap
================================================================ */
.jbh-carousel-mode {
position: relative;
}
.jbh-carousel-mode .jbh-service-grid {
display: flex !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--jbh-custom-icon, var(--jbh-teal)) transparent;
padding-bottom: 8px;
gap: var(--jbh-gap);
}
.jbh-carousel-mode .jbh-service-grid::-webkit-scrollbar { height: 6px; }
.jbh-carousel-mode .jbh-service-grid::-webkit-scrollbar-track { background: transparent; }
.jbh-carousel-mode .jbh-service-grid::-webkit-scrollbar-thumb { background: var(--jbh-custom-icon, var(--jbh-teal)); border-radius: 3px; }
.jbh-carousel-mode .jbh-service-card {
flex: 0 0 auto;
width: calc((100% - var(--jbh-gap) * (var(--jbh-cols, 3) - 1)) / var(--jbh-cols, 3));
min-width: 280px;
scroll-snap-align: start;
}
/* Carousel arrows */
.jbh-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--jbh-border);
background: var(--jbh-custom-card-bg, var(--jbh-card));
color: var(--jbh-card-heading);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all var(--jbh-transition);
opacity: 0.85;
}
.jbh-carousel-arrow:hover {
opacity: 1;
background: var(--jbh-custom-icon, var(--jbh-teal));
color: #fff;
border-color: var(--jbh-custom-icon, var(--jbh-teal));
}
.jbh-carousel-arrow svg { width: 20px; height: 20px; }
.jbh-carousel-prev { left: -16px; }
.jbh-carousel-next { right: -16px; }
@media (max-width: 768px) {
.jbh-carousel-mode .jbh-service-card { min-width: 85vw; }
.jbh-carousel-prev { left: 4px; }
.jbh-carousel-next { right: 4px; }
.jbh-carousel-arrow { width: 36px; height: 36px; }
}
/* ================================================================
ROW LIMIT — cap visible rows with gradient fade + show-more
================================================================ */
.jbh-row-limit {
position: relative;
}
.jbh-row-limit .jbh-service-grid {
overflow: hidden;
/* Each row height ≈ 1fr auto. We approximate with a generous
max-height per row. The transition animates the expansion. */
max-height: calc(var(--jbh-max-rows, 2) * 520px);
transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1);
}
.jbh-row-limit.jbh-rows-expanded .jbh-service-grid {
max-height: 9999px;
}
/* Gradient fade overlay */
.jbh-row-limit-fade {
position: absolute;
bottom: 52px;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, transparent, var(--jbh-custom-block-bg, var(--jbh-bg)));
pointer-events: none;
transition: opacity 0.4s ease;
z-index: 5;
}
.jbh-row-limit.jbh-rows-expanded .jbh-row-limit-fade {
opacity: 0;
}
/* Show More / Show Less button */
.jbh-show-more-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 24px auto 0;
padding: 12px 32px;
border: 1px solid var(--jbh-border);
border-radius: 999px;
background: var(--jbh-custom-card-bg, var(--jbh-card));
color: var(--jbh-custom-icon, var(--jbh-teal));
font-family: var(--jbh-font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--jbh-transition);
position: relative;
z-index: 10;
}
.jbh-show-more-btn:hover {
background: var(--jbh-custom-icon, var(--jbh-teal));
color: #fff;
border-color: var(--jbh-custom-icon, var(--jbh-teal));
}
.jbh-show-more-icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.jbh-rows-expanded .jbh-show-more-icon {
transform: rotate(180deg);
}
/* Toggle text visibility */
.jbh-show-more-btn .jbh-show-less-text { display: none; }
.jbh-rows-expanded .jbh-show-more-btn .jbh-show-more-text { display: none; }
.jbh-rows-expanded .jbh-show-more-btn .jbh-show-less-text { display: inline; }
/* ── Tooltip palette resolvers ─────────────────────────────────
Inline `--jbh-tooltip-*-dk` / `-lt` custom properties from
render.php get aliased into the canonical `--jbh-tooltip-*`
slots that the global `[data-jbh-tooltip]` rendering rules
consume. Defaults sit on the same fallback line as the
var() consumers so tooltips render correctly even on blocks
where the user never opens the Inspector. */
.jbh-studio-grid.jbh-dark,
.jbh-studio-grid.jbh-auto {
--jbh-tooltip-bg: var(--jbh-tooltip-bg-dk, #1F2937);
--jbh-tooltip-text: var(--jbh-tooltip-text-dk, #FFFFFF);
--jbh-tooltip-border: var(--jbh-tooltip-border-dk, transparent);
}
.jbh-studio-grid.jbh-light {
--jbh-tooltip-bg: var(--jbh-tooltip-bg-lt, #FFFFFF);
--jbh-tooltip-text: var(--jbh-tooltip-text-lt, #1F2937);
--jbh-tooltip-border: var(--jbh-tooltip-border-lt, rgba(0,0,0,0.10));
}
/* Same-frame site-mode reactivity \u2014 mirrors the pattern at
line 753 / 850 so site-toggle flips swap tooltip palette
instantly without waiting for the MutationObserver tick. */
:is(html[data-theme="light"], html.light, html[data-color-mode="light"], body[data-ct-color-mode="light"]) .jbh-studio-grid:not(.jbh-override-theme) {
--jbh-tooltip-bg: var(--jbh-tooltip-bg-lt, #FFFFFF);
--jbh-tooltip-text: var(--jbh-tooltip-text-lt, #1F2937);
--jbh-tooltip-border: var(--jbh-tooltip-border-lt, rgba(0,0,0,0.10));
}
:is(html[data-theme="dark"], html.dark, html[data-color-mode="dark"], body[data-ct-color-mode="dark"]) .jbh-studio-grid:not(.jbh-override-theme) {
--jbh-tooltip-bg: var(--jbh-tooltip-bg-dk, #1F2937);
--jbh-tooltip-text: var(--jbh-tooltip-text-dk, #FFFFFF);
--jbh-tooltip-border: var(--jbh-tooltip-border-dk, transparent);
}
/* ── Tooltip rendering — JBH-scoped, no JS ─────────────────────
Pure CSS pseudo-element approach scoped to the two surfaces
that actually emit `data-jbh-tooltip`: studio-grid block
wrappers (cards) and the modal overlay (sections). Scoping
avoids cross-plugin/theme bleed onto unrelated elements that
happen to carry the attribute. The `position: relative` is
only declared on tooltipped elements that aren't already
positioned — established positioning contexts (e.g.
.jbh-card-rec-badge with position:absolute) keep their
existing context, so the tooltip pseudo-element anchors
to the badge itself rather than sliding to the nearest
positioned ancestor.
Hover OR focus-visible triggers — keyboard users get the
same help-text by tabbing to the element. Card surfaces
inside .jbh-studio-grid that have `overflow: hidden`
(.jbh-service-card, .jbh-card-header) get a paired override
below to release the clip when tooltips are configured. */
.jbh-studio-grid [data-jbh-tooltip],
#jbh-modal-overlay [data-jbh-tooltip] {
position: relative;
}
/* Tooltip body — uses ::after, with explicit resets for
`top/height/width/border-radius` because two existing button
styles (`.jbh-get-started-btn::after` and `.jbh-submit-btn::after`,
defined later in source) use the same pseudo-element for the
click-ripple animation. Without these resets the ripple's
`top: 50%; height: 0; border-radius: 50%` would leak into the
tooltip's box and produce a zero-height tooltip pinned to the
button's centre. Specificity 0,3,1 (two classes + attribute +
pseudo) beats the ripple's 0,1,1 in idle state and ties with
the ripple's `:active` state, where the later source position
of the ripple wins on the click — which is the intended UX
(tooltip during hover, ripple during click). */
.jbh-studio-grid [data-jbh-tooltip]:hover::after,
.jbh-studio-grid [data-jbh-tooltip]:focus-visible::after,
#jbh-modal-overlay [data-jbh-tooltip]:hover::after,
#jbh-modal-overlay [data-jbh-tooltip]:focus-visible::after {
content: attr(data-jbh-tooltip);
position: absolute;
/* Resets neutralise the ripple ::after's `top: 50%; height: 0;
width: 0; border-radius: 50%` legacy when the tooltipped
element is also a CSS-ripple button. */
top: auto;
height: auto;
z-index: 99999;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
background: var(--jbh-tooltip-bg, #1F2937);
color: var(--jbh-tooltip-text, #FFFFFF);
padding: 8px 12px;
border-radius: var(--jbh-tooltip-radius, 6px);
font-family: var(--jbh-font-sans, system-ui, sans-serif);
font-size: var(--jbh-tooltip-font-size, 12px);
font-weight: 500;
line-height: 1.4;
max-width: var(--jbh-tooltip-max-width, 280px);
width: max-content;
white-space: normal;
text-align: center;
/* Combined drop-shadow + outline so the optional border has
zero layout impact. Transparent default renders no outline,
user-customised colour renders as a sharp 1px ring. */
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.18),
0 0 0 1px var(--jbh-tooltip-border, transparent);
pointer-events: none;
animation: jbh-tooltip-fade 0.18s ease-out backwards;
}
/* Arrow — drawn as a CSS triangle so its color follows the bg
variable automatically without extra markup or SVG. Uses
::before since none of our tooltip targets currently use
::before for anything else (verified by repo-wide audit). */
.jbh-studio-grid [data-jbh-tooltip]:hover::before,
.jbh-studio-grid [data-jbh-tooltip]:focus-visible::before,
#jbh-modal-overlay [data-jbh-tooltip]:hover::before,
#jbh-modal-overlay [data-jbh-tooltip]:focus-visible::before {
content: '';
position: absolute;
top: auto;
z-index: 99999;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: var(--jbh-tooltip-bg, #1F2937);
background: transparent;
pointer-events: none;
animation: jbh-tooltip-fade 0.18s ease-out backwards;
}
@keyframes jbh-tooltip-fade {
from { opacity: 0; transform: translateX(-50%) translateY(4px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Release the parent overflow:hidden clips on card and header so
tooltip pseudo-elements can extend beyond the card box. Scoped
to wrappers that actually have tooltips configured (render.php
only emits `data-tooltip-position` when the tooltip map is
non-empty), so blocks without tooltips keep their existing
overflow behaviour and watermark clipping unchanged.
The ripple-button selectors are scoped via `[data-jbh-tooltip]`
directly so only buttons the user has actually configured a
tooltip for lose their overflow clip. Side-effect on those
buttons: the click-ripple animation circle briefly extends past
the button border (acceptable since the ripple ends transparent
inside half a second). All other buttons keep their ripple
clipping intact. */
.jbh-studio-grid[data-tooltip-position] .jbh-service-card,
.jbh-studio-grid[data-tooltip-position] .jbh-card-header,
.jbh-studio-grid .jbh-get-started-btn[data-jbh-tooltip],
#jbh-modal-overlay #jbh-submit-btn[data-jbh-tooltip] {
overflow: visible;
}
/* Position variants — driven by `data-tooltip-position` attribute
on the studio-grid wrapper or modal overlay. Each variant
repositions the tooltip body and rotates the arrow. */
.jbh-studio-grid[data-tooltip-position="bottom"] [data-jbh-tooltip]:hover::after,
.jbh-studio-grid[data-tooltip-position="bottom"] [data-jbh-tooltip]:focus-visible::after,
#jbh-modal-overlay[data-tooltip-position="bottom"] [data-jbh-tooltip]:hover::after,
#jbh-modal-overlay[data-tooltip-position="bottom"] [data-jbh-tooltip]:focus-visible::after {
bottom: auto;
top: calc(100% + 10px);
}
.jbh-studio-grid[data-tooltip-position="bottom"] [data-jbh-tooltip]:hover::before,
.jbh-studio-grid[data-tooltip-position="bottom"] [data-jbh-tooltip]:focus-visible::before,
#jbh-modal-overlay[data-tooltip-position="bottom"] [data-jbh-tooltip]:hover::before,
#jbh-modal-overlay[data-tooltip-position="bottom"] [data-jbh-tooltip]:focus-visible::before {
bottom: auto;
top: calc(100% + 4px);
border-top-color: transparent;
border-bottom-color: var(--jbh-tooltip-bg, #1F2937);
}
.jbh-studio-grid[data-tooltip-position="left"] [data-jbh-tooltip]:hover::after,
.jbh-studio-grid[data-tooltip-position="left"] [data-jbh-tooltip]:focus-visible::after,
#jbh-modal-overlay[data-tooltip-position="left"] [data-jbh-tooltip]:hover::after,
#jbh-modal-overlay[data-tooltip-position="left"] [data-jbh-tooltip]:focus-visible::after {
bottom: 50%;
left: auto;
right: calc(100% + 10px);
transform: translateY(50%);
}
.jbh-studio-grid[data-tooltip-position="left"] [data-jbh-tooltip]:hover::before,
.jbh-studio-grid[data-tooltip-position="left"] [data-jbh-tooltip]:focus-visible::before,
#jbh-modal-overlay[data-tooltip-position="left"] [data-jbh-tooltip]:hover::before,
#jbh-modal-overlay[data-tooltip-position="left"] [data-jbh-tooltip]:focus-visible::before {
bottom: 50%;
left: auto;
right: calc(100% + 4px);
transform: translateY(50%);
border-top-color: transparent;
border-left-color: var(--jbh-tooltip-bg, #1F2937);
}
.jbh-studio-grid[data-tooltip-position="right"] [data-jbh-tooltip]:hover::after,
.jbh-studio-grid[data-tooltip-position="right"] [data-jbh-tooltip]:focus-visible::after,
#jbh-modal-overlay[data-tooltip-position="right"] [data-jbh-tooltip]:hover::after,
#jbh-modal-overlay[data-tooltip-position="right"] [data-jbh-tooltip]:focus-visible::after {
bottom: 50%;
left: calc(100% + 10px);
right: auto;
transform: translateY(50%);
}
.jbh-studio-grid[data-tooltip-position="right"] [data-jbh-tooltip]:hover::before,
.jbh-studio-grid[data-tooltip-position="right"] [data-jbh-tooltip]:focus-visible::before,
#jbh-modal-overlay[data-tooltip-position="right"] [data-jbh-tooltip]:hover::before,
#jbh-modal-overlay[data-tooltip-position="right"] [data-jbh-tooltip]:focus-visible::before {
bottom: 50%;
left: calc(100% + 4px);
right: auto;
transform: translateY(50%);
border-top-color: transparent;
border-right-color: var(--jbh-tooltip-bg, #1F2937);
}
/* Reduced-motion preference — disable fade animation per OS
accessibility setting. */
@media (prefers-reduced-motion: reduce) {
.jbh-studio-grid [data-jbh-tooltip]:hover::after,
.jbh-studio-grid [data-jbh-tooltip]:hover::before,
.jbh-studio-grid [data-jbh-tooltip]:focus-visible::after,
.jbh-studio-grid [data-jbh-tooltip]:focus-visible::before,
#jbh-modal-overlay [data-jbh-tooltip]:hover::after,
#jbh-modal-overlay [data-jbh-tooltip]:hover::before,
#jbh-modal-overlay [data-jbh-tooltip]:focus-visible::after,
#jbh-modal-overlay [data-jbh-tooltip]:focus-visible::before {
animation: none;
}
}
/* Editor-only cancellation — Gutenberg renders studio-grid via
ServerSideRender inside `.editor-styles-wrapper` (post editor)
or `.block-editor-block-list__layout` (FSE). The frontend
breakout trick (`width: 100vw; margin: calc(50% - 50vw)`)
resolves `100vw` against the editor iframe's viewport, which
is wider than the visible block-list column — without this
guard the block would visually escape into the editor sidebar
and inspector chrome at edit time. */
.editor-styles-wrapper .jbh-studio-grid.jbh-overflow-container,
.block-editor-block-list__layout .jbh-studio-grid.jbh-overflow-container {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.editor-styles-wrapper .jbh-studio-grid.jbh-overflow-container .jbh-service-grid,
.block-editor-block-list__layout .jbh-studio-grid.jbh-overflow-container .jbh-service-grid {
max-width: 100%;
}
/* ================================================================
2. STORE GRID
================================================================ */
.jbh-store-grid { background: var(--jbh-custom-block-bg, var(--jbh-bg)); padding: 60px 24px; font-family: var(--jbh-font-sans); }
.jbh-store-heading { margin-bottom: 40px; }
.jbh-store-tag { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--jbh-teal); margin: 0 0 8px; }
.jbh-store-title { font-family: var(--jbh-font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--jbh-heading-color); margin: 0 0 8px; }
.jbh-store-subtitle { color: var(--jbh-text-color); font-size: 16px; line-height: 1.6; margin: 0; }
.jbh-product-grid { display: grid; gap: var(--jbh-gap); grid-template-columns: repeat(var(--jbh-cols, 2), 1fr); align-items: stretch; grid-auto-rows: 1fr; }
.jbh-product-card { background: var(--jbh-custom-card-bg, var(--jbh-card)); border-radius: var(--jbh-card-radius); padding: 40px; display: flex; flex-direction: column; transition: transform var(--jbh-transition), box-shadow var(--jbh-transition), border-color var(--jbh-transition); min-height: 0; }
/* `[hidden]` guard. When frontend.js's store-grid toolbar filters out a
card via `card.hidden = true`, the browser's UA rule
`[hidden] { display: none }` is *silently overridden* by author
rules like `.jbh-product-card { display: flex }` — author wins over
UA at equal specificity, so cards stayed visible even when matched
as "hidden" in JS. This was the actual root cause of the reported
"search doesn't filter products" bug.
Scoped to every hideable card type so search + category filter work
identically across all four grid blocks. `!important` guarantees the
guard also beats preset rules (`.jbh-cards-glass`, `.jbh-img-left`,
`.jbh-layout-list` etc.) that explicitly set `display: flex` on the
card themselves. */
.jbh-service-card[hidden],
.jbh-product-card[hidden],
.jbh-plan-card[hidden],
.jbh-project-card[hidden],
.jbh-project-stacked[hidden],
.jbh-project-grid[hidden],
.jbh-project-split[hidden],
.jbh-insight-card[hidden] { display: none !important; }
.jbh-product-type { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--jbh-text-color); margin: 0 0 8px; opacity: 0.7; font-family: var(--jbh-font-mono); }
.jbh-product-title { font-family: var(--jbh-font-serif); font-size: 18px; font-weight: 700; color: var(--jbh-custom-header, var(--jbh-card-heading)); margin: 0 0 8px; transition: color var(--jbh-transition); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.jbh-product-desc { color: var(--jbh-custom-desc, var(--jbh-text-color)); font-size: 14px; line-height: 1.5; margin: 0 0 16px; flex-grow: 1; font-weight: 300; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--jbh-desc-lines, 2); line-clamp: var(--jbh-desc-lines, 2); -webkit-box-orient: vertical; word-break: break-word; }
.jbh-product-price { font-size: 16px; font-weight: 700; color: var(--jbh-custom-price, var(--jbh-teal)); margin: 0; font-family: var(--jbh-font-mono); white-space: nowrap; }
.jbh-product-price del, .jbh-product-price ins { display: inline; text-decoration: inherit; background: none; color: inherit; }
.jbh-product-price del { opacity: 0.55; margin-right: 6px; }
.jbh-product-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--jbh-custom-badge-bg, var(--jbh-coral-light)); color: var(--jbh-custom-badge-text, var(--jbh-coral)); padding: 4px 10px; border-radius: var(--jbh-card-radius); margin-bottom: 12px; flex-shrink: 0; }
.jbh-product-btn { display: inline-block; padding: 8px 16px; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; border-radius: 8px; transition: all var(--jbh-transition); cursor: pointer; font-family: var(--jbh-font-serif); white-space: nowrap; flex-shrink: 0; }
.jbh-product-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--jbh-font-mono); padding: 3px 8px; border-radius: 4px; margin: 0 0 8px; flex-shrink: 0; width: fit-content; }
.jbh-product-stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.jbh-product-stock-in { color: var(--jbh-teal); background: rgba(42, 157, 143, 0.12); }
.jbh-product-stock-low { color: #D97706; background: rgba(217, 119, 6, 0.12); }
.jbh-product-stock-out { color: var(--jbh-slate); background: rgba(156, 163, 175, 0.15); }
/* Featured badge — overlaid on the icon panel so it reads as a ribbon
without competing with the regular .jbh-product-badge inside the
body. Uses the accent/teal palette but can be retinted via the
Badge Colors panel since it inherits the same custom-badge tokens.
(position: relative is set on .jbh-product-icon-panel itself below.) */
.jbh-product-featured-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-block;
padding: 4px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-family: var(--jbh-font-mono);
color: var(--jbh-custom-badge-text, #fff);
background: var(--jbh-custom-badge-bg, var(--jbh-teal));
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: none;
}
/* Featured highlight outline. Gated by render.php on the `highlightFeatured`
Inspector toggle so it no longer lights up unexpectedly on any WC product
that the editor marked as "Featured" for unrelated purposes. Colour flows
through `--jbh-featured-outline` (new dedicated picker slot) → falls back
to the badge background so sites that already picked a badge colour get
automatic outline matching → finally falls back to brand teal. */
.jbh-product-card.is-featured { outline: 1px solid var(--jbh-featured-outline, var(--jbh-custom-badge-bg, var(--jbh-teal))); outline-offset: -1px; }
/* ── Horizontal product card ──────────────────────────────── */
/* Horizontal product card — route the outer border + the icon-panel
divider through the custom-card-border picker token so users who pick
the horizontal layout AND set a card-border colour see both surfaces
retint. Previous hardcoded `rgba(42,157,143,0.10)` value ignored the
Inspector pickers on this preset. */
.jbh-product-horizontal { flex-direction: row; padding: 0; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); }
.jbh-product-horizontal:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.jbh-product-horizontal:hover .jbh-product-title { color: var(--jbh-custom-icon, var(--jbh-teal)); }
.jbh-product-icon-panel { position: relative; width: 33.333%; display: flex; align-items: center; justify-content: center; background: var(--jbh-bg); border-right: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); flex-shrink: 0; padding: 24px; min-height: 180px; }
.jbh-product-panel-image { max-width: 80%; max-height: 120px; object-fit: contain; }
.jbh-product-panel-icon { color: rgba(42,157,143,0.50); }
.jbh-product-panel-icon svg { width: 48px; height: 48px; }
.jbh-product-horizontal:hover .jbh-product-panel-icon { color: var(--jbh-custom-icon, var(--jbh-teal)); transition: color 0.3s ease; }
.jbh-product-horizontal .jbh-product-body { width: 66.666%; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; min-width: 0; }
.jbh-product-body-top { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; }
.jbh-product-footer-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; margin-top: auto; border-top: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
.jbh-product-horizontal { flex-direction: column; }
.jbh-product-icon-panel { width: 100%; min-height: 100px; border-right: none; border-bottom: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); }
.jbh-product-horizontal .jbh-product-body { width: 100%; }
}
/* ── Vertical product card (stacked: icon/image top, body below) ── */
.jbh-product-vertical { flex-direction: column; padding: 0; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); transition: box-shadow var(--jbh-transition), transform var(--jbh-transition); }
.jbh-product-vertical:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.jbh-product-vertical:hover .jbh-product-title { color: var(--jbh-custom-icon, var(--jbh-teal)); }
.jbh-product-vertical .jbh-product-icon-panel { width: 100%; min-height: 140px; max-height: 180px; border-right: none; border-bottom: 1px solid var(--jbh-custom-card-border, rgba(42,157,143,0.10)); padding: 32px 24px; overflow: hidden; }
.jbh-product-vertical .jbh-product-panel-image { max-width: 100%; max-height: 160px; }
.jbh-product-vertical .jbh-product-panel-icon svg { width: 56px; height: 56px; }
.jbh-product-vertical .jbh-product-body { width: 100%; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; min-width: 0; }
/* ── Uniform card height — all cards in a row share the same height
via the grid's implicit row stretch. Content that overflows is
clamped so cards never grow unevenly.
The .jbh-store-height-* modifier applies a hard min/max-height
cap so every card matches the icon-panel dimensions regardless
of how much text its product description contains. Bodies clip
overflow; description line-clamp + title line-clamp + footer
flex-shrink: 0 together guarantee the CTA is always visible. */
.jbh-product-horizontal .jbh-product-icon-panel { max-height: 220px; overflow: hidden; }
.jbh-product-vertical:hover .jbh-product-panel-icon { color: var(--jbh-custom-icon, var(--jbh-teal)); }
/* Card height presets — each clamps the card to a predictable range
matching the icon-panel footprint so long descriptions never
stretch the card unevenly. Descriptions truncate via line-clamp;
the footer (price + CTA) is pinned via flex-shrink: 0 and
`margin-top: auto` so it's always visible at the bottom edge. */
.jbh-store-height-compact .jbh-product-horizontal { min-height: 180px; max-height: 200px; }
.jbh-store-height-compact .jbh-product-horizontal .jbh-product-icon-panel { min-height: 180px; max-height: 200px; }
.jbh-store-height-compact .jbh-product-vertical { min-height: 340px; max-height: 380px; }
.jbh-store-height-compact .jbh-product-vertical .jbh-product-icon-panel { min-height: 120px; max-height: 140px; }
.jbh-store-height-standard .jbh-product-horizontal { min-height: 220px; max-height: 240px; }
.jbh-store-height-standard .jbh-product-horizontal .jbh-product-icon-panel { min-height: 220px; max-height: 240px; }
.jbh-store-height-standard .jbh-product-vertical { min-height: 400px; max-height: 440px; }
.jbh-store-height-standard .jbh-product-vertical .jbh-product-icon-panel { min-height: 160px; max-height: 180px; }
.jbh-store-height-tall .jbh-product-horizontal { min-height: 280px; max-height: 320px; }
.jbh-store-height-tall .jbh-product-horizontal .jbh-product-icon-panel { min-height: 280px; max-height: 320px; }
.jbh-store-height-tall .jbh-product-vertical { min-height: 480px; max-height: 540px; }
.jbh-store-height-tall .jbh-product-vertical .jbh-product-icon-panel { min-height: 200px; max-height: 240px; }
/* `auto` preset skips the cap so site owners who genuinely want
"grow-to-fit" behaviour can opt out of the clamp entirely — no
selector needed; the base card CSS already behaves that way. */
.jbh-layout-list .jbh-product-grid { grid-template-columns: 1fr !important; }
.jbh-layout-list .jbh-product-card { flex-direction: row; gap: 32px; align-items: center; }
/* ── Product image support — image position / aspect-ratio / fit
classes are emitted on the block root by store-grid render.php
(`jbh-img-{position}`, `jbh-img-ratio-{ratio}`, `jbh-img-{fit}`).
The actual ![]()
element renders inside `.jbh-product-icon-panel`
with class `.jbh-product-panel-image` (see L2333-2334 below for
the responsive sizing rules). ─────────────────────────────────── */
.jbh-product-body { display: flex; flex-direction: column; flex-grow: 1; }
.jbh-has-images .jbh-product-card { padding: 0; overflow: hidden; }
.jbh-has-images .jbh-product-body { padding: 24px; }
/* ── Image position: left (horizontal card) ────────────────── */
.jbh-img-left .jbh-product-card { flex-direction: row; }
/* ── Image position: right ──────────────────────────────────── */
.jbh-img-right .jbh-product-card { flex-direction: row-reverse; }
/* ── Image position: background (overlay) ───────────────────── */
.jbh-img-background .jbh-product-card { position: relative; min-height: 280px; }
.jbh-img-background .jbh-product-body { position: relative; z-index: 2; margin-top: auto; color: #fff; padding: 24px; }
.jbh-img-background .jbh-product-title { color: #fff; }
.jbh-img-background .jbh-product-type { color: rgba(255,255,255,0.7); }
.jbh-img-background .jbh-product-desc { color: rgba(255,255,255,0.8); }
.jbh-img-background .jbh-product-price { color: #fff; }
/* ── Card padding variants ──────────────────────────────────── */
.jbh-card-pad-none .jbh-product-body { padding: 0; }
.jbh-card-pad-small .jbh-product-body { padding: 16px; }
.jbh-card-pad-medium .jbh-product-body { padding: 24px; }
.jbh-card-pad-large .jbh-product-body { padding: 40px; }
/* ── Preset: Magazine (featured first item + sidebar) ───────── */
.jbh-preset-magazine .jbh-product-grid { grid-template-columns: 1.5fr 1fr; }
.jbh-preset-magazine .jbh-product-card:first-child { grid-row: span 2; }
/* ── Preset: Compact (tight grid, smaller cards) ────────────── */
.jbh-preset-compact .jbh-product-card { padding: 0; }
.jbh-preset-compact .jbh-product-body { padding: 16px; }
.jbh-preset-compact .jbh-product-title { font-size: 15px; }
.jbh-preset-compact .jbh-product-desc { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.jbh-preset-compact .jbh-product-price { font-size: 16px; margin: 12px 0 8px; }
.jbh-preset-compact .jbh-product-btn { padding: 8px 16px; font-size: 13px; }
/* ── Preset: Showcase (large images, overlay text) ──────────── */
.jbh-preset-showcase .jbh-product-card { position: relative; min-height: 320px; overflow: hidden; padding: 0; }
.jbh-preset-showcase .jbh-product-body { position: relative; z-index: 2; margin-top: auto; padding: 28px; color: #fff; }
.jbh-preset-showcase .jbh-product-title { color: #fff; font-size: 22px; }
.jbh-preset-showcase .jbh-product-type { color: rgba(255,255,255,0.65); }
.jbh-preset-showcase .jbh-product-price { color: #fff; }
/* ── Preset: Minimal (no borders, clean) ────────────────────── */
.jbh-preset-minimal .jbh-product-card { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
.jbh-preset-minimal .jbh-product-body { padding: 16px 0; }
.jbh-preset-minimal .jbh-product-btn { padding: 0; background: transparent; border: none; color: var(--jbh-teal); text-decoration: underline; text-underline-offset: 3px; }
/* ── 3+ column compact sizing — tighter padding / font so 4 cards
fit comfortably in a single row without overflow ──────────────── */
.jbh-store-grid[style*="--jbh-cols:3"] .jbh-product-vertical .jbh-product-body,
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-vertical .jbh-product-body { padding: 16px; }
.jbh-store-grid[style*="--jbh-cols:3"] .jbh-product-title,
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-title { font-size: 15px; }
.jbh-store-grid[style*="--jbh-cols:3"] .jbh-product-desc,
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-desc { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 16px; }
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-vertical .jbh-product-icon-panel { min-height: 100px; max-height: 140px; padding: 16px; }
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-panel-image { max-height: 100px; }
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-type { font-size: 9px; margin-bottom: 4px; }
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-price { font-size: 14px; }
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-btn { padding: 6px 12px; font-size: 11px; }
@media (max-width: 1024px) {
.jbh-store-grid[style*="--jbh-cols:4"] .jbh-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.jbh-img-left .jbh-product-card, .jbh-img-right .jbh-product-card { flex-direction: column; }
.jbh-preset-magazine .jbh-product-grid { grid-template-columns: 1fr; }
.jbh-preset-magazine .jbh-product-card:first-child { grid-row: span 1; }
.jbh-store-grid[style*="--jbh-cols:3"] .jbh-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.jbh-product-grid { grid-template-columns: 1fr !important; }
}
/* ── Filter / Sort / Search toolbar ──────────────────────────────
Sits above the product grid. All controls are client-side-only —
JS in frontend.js hides/shows cards based on data-category /
data-title / data-price attributes rendered by render.php.
Design tokens (--jbh-filter-bg / --jbh-filter-text /
--jbh-filter-active-bg / --jbh-filter-active-text /
--jbh-filter-border) resolve through the usual dual-palette chain
(`-dk` / `-lt`) so Inspector colour overrides work in both
modes. All sensible fallbacks degrade to the block's existing
card/text palette so the toolbar still looks on-brand even if the
user never opens the filter-colour panel. */
.jbh-store-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin: 0 0 32px;
padding: 16px 20px;
background: var(--jbh-filter-bg, var(--jbh-card));
border: 1px solid var(--jbh-filter-border, var(--jbh-border));
border-radius: var(--jbh-card-radius);
color: var(--jbh-filter-text, var(--jbh-text-color));
font-family: var(--jbh-font-sans);
}
.jbh-store-toolbar-filters {
display: flex;
align-items: center;
/* `nowrap` keeps the "Filter:" label locked beside the pills on the
same baseline as the search input and sort dropdown. Vertical
wrapping here is undesirable — the pills themselves scroll
horizontally when there are too many to fit (see
`.jbh-filter-pills` below), so the filter *group* never needs
to break onto a new row. */
flex-wrap: nowrap;
gap: 8px;
/* `1 1 0` + `min-width: 0` is the canonical "shrink-to-available"
recipe for flex children that contain their own overflow:
- `flex-grow: 1` — claim remaining toolbar width after the
side-group has taken its intrinsic size
- `flex-shrink: 1` — give width back when the side-group
grows (e.g. long sort option text)
- `flex-basis: 0` — start from zero so the filter strip
never forces a reflow wider than its
container
- `min-width: 0` — CRITICAL: without this the intrinsic
min-content width of the pills container
would leak upward and push the side-group
to a new row anyway, defeating the whole
single-row layout. */
flex: 1 1 0;
min-width: 0;
}
.jbh-store-toolbar-side {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-left: auto;
}
/* Sort label + select grouped as one atomic flex unit so they NEVER
separate when the toolbar narrows. Previously they were loose
siblings inside `.jbh-store-toolbar-side` (which has `flex-wrap:
wrap`), which allowed the dropdown to drop below the "Sort:" label
on cramped widths, leaving the label orphaned on its own row.
`flex-shrink: 0` keeps the group from being squeezed under its
intrinsic width, and `align-items: center` aligns the label's
baseline with the select's center for visual harmony. */
.jbh-sort-group {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.jbh-filter-label,
.jbh-sort-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
font-family: var(--jbh-font-mono);
color: var(--jbh-filter-text, var(--jbh-text-color));
opacity: 0.7;
margin-right: 4px;
flex-shrink: 0;
}
/* ── Filter style: pills (default) ─────────────────────────── */
/* Horizontally-scrolling pill strip. `nowrap` is the core of the
single-row toolbar layout — when a shop has 10+ categories the
pills overflow their container horizontally instead of wrapping
downward, which would otherwise push Search / Sort to a new row.
`overflow-x: auto` + `-webkit-overflow-scrolling: touch` gives
mobile users inertial scroll through the pills. The UA scrollbar
is hidden because the pills themselves are large and obvious
scroll targets — showing a thin track below them would add
visual clutter in the toolbar's tight vertical budget. */
.jbh-filter-pills {
display: flex;
flex-wrap: nowrap;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
min-width: 0;
}
.jbh-filter-pills::-webkit-scrollbar { display: none; }
.jbh-filter-pills > .jbh-filter-pill { scroll-snap-align: start; flex-shrink: 0; }
.jbh-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
font-family: var(--jbh-font-sans);
line-height: 1;
border-radius: 999px;
background: transparent;
color: var(--jbh-filter-text, var(--jbh-text-color));
border: 1px solid var(--jbh-filter-border, var(--jbh-border));
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.jbh-filter-pill:hover {
border-color: var(--jbh-filter-active-bg, var(--jbh-teal));
color: var(--jbh-filter-active-bg, var(--jbh-teal));
}
.jbh-filter-pill.is-active {
background: var(--jbh-filter-active-bg, var(--jbh-teal));
color: var(--jbh-filter-active-text, #fff);
border-color: var(--jbh-filter-active-bg, var(--jbh-teal));
}
.jbh-filter-pill:focus-visible {
outline: 2px solid var(--jbh-filter-active-bg, var(--jbh-teal));
outline-offset: 2px;
}
/* ── Sort dropdown ──────────────────────────────────────── */
.jbh-sort-select {
appearance: none;
-webkit-appearance: none;
padding: 8px 32px 8px 12px;
font-size: 13px;
font-family: var(--jbh-font-sans);
font-weight: 500;
color: var(--jbh-filter-text, var(--jbh-text-color));
background: transparent;
border: 1px solid var(--jbh-filter-border, var(--jbh-border));
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s ease;
/* Caret icon — default for DARK surfaces.
IMPORTANT: `currentColor` does NOT propagate into CSS data URLs.
The SVG is parsed in isolation by the browser, so `stroke='currentColor'`
resolves to the SVG default (black) regardless of the element’s
`color` property — which is exactly the bug that made the dark-mode
caret render dark-on-dark, invisible. Both modes now use literal
strokes that match `--jbh-text-color` for the active mode (dark =
#9CA3AF, light override below = #4B5563). */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* Light-mode caret swap. Full site-signal coverage so the caret stays
readable regardless of which colour-mode source is active. */
.jbh-light .jbh-sort-select,
html[data-theme="light"] .jbh-sort-select,
html.light .jbh-sort-select,
html[data-color-mode="light"] .jbh-sort-select,
body[data-ct-color-mode="light"] .jbh-sort-select {
background-image: url("data:image/svg+xml;utf8,");
}
.jbh-sort-select:hover { border-color: var(--jbh-filter-active-bg, var(--jbh-teal)); }
.jbh-sort-select:focus {
outline: none;
border-color: var(--jbh-filter-active-bg, var(--jbh-teal));
box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.15);
}
.jbh-sort-select option {
/* Native