/**
* PaperBrain Design System — foundation layer.
*
* Single source of truth for typography, buttons, section spacing and
* alignment, driven entirely by theme.json design tokens (see
* theme.json settings.custom.typography/button/section/alignment and
* settings.typography.fontSizes/fontFamilies). Nothing in this file
* hardcodes a value that theme.json already owns — every declaration
* below is a var() reference with a safe fallback matching the
* current, already-shipped value, so adopting this file changes
* nothing visually on its own.
*
* Intent: a block should describe content, not styling. Any block
* whose text lives in a real -,
, or one of the utility
* classes below (.pb-caption, .pb-small, .pb-button) automatically
* gets the correct font family/size/weight/line-height/letter-spacing/
* text-transform/alignment from here — no per-block CSS required.
*
* 2026-07-10: PB Design typography is now enforced, not just a
* fallback — font-family/size/weight/line-height/letter-spacing/
* text-transform on the bare h1-h6 rules below carry `!important`, so
* a block's own historical class-based heading typography (e.g.
* .pb-blog-grid__title, .pb-hero-image-split__title) can no longer
* silently win the cascade via higher specificity. `color` is
* deliberately NOT `!important` — blocks keep full control of heading
* color (e.g. white text on a dark hero). The .pb-type--* visual-style
* classes further down are a separate, still-opt-in mechanism (for
* dissociating visual size from semantic tag, e.g. an
that should
* read as Body Large) and are untouched by this.
*/
/* ==========================================================================
* Headings — mobile-first: base rule uses each role's sizeMobile
* token, then two media queries step up to sizeTablet (>=768px) and
* sizeDesktop (>=1024px), matching the breakpoints already used
* throughout main.css/woocommerce.css. Weight/line-height/letter-
* spacing/text-transform come from the same per-role custom tokens
* and don't need a breakpoint (they don't currently vary responsively
* for any role). One rule per level, since theme.json's native
* `styles.elements.heading` can only style all six levels identically
* (it has no per-level concept) — this is the one place that
* per-level distinction has to live.
*
* H1/H2 are the only two roles whose desktop/tablet/mobile values
* actually differ (they previously used a fluid clamp() that's now
* been discretized into three explicit steps); H3-H6/Body/Small/
* Caption/Button use the same value at all three breakpoints,
* matching their current (non-responsive) behaviour exactly.
* ========================================================================*/
h1 {
font-family: var(--wp--custom--typography--h-1--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-1--size-mobile, 2.1rem) !important;
font-weight: var(--wp--custom--typography--h-1--weight, 800) !important;
line-height: var(--wp--custom--typography--h-1--line-height, 1.1) !important;
letter-spacing: var(--wp--custom--typography--h-1--letter-spacing, -0.02em) !important;
text-transform: var(--wp--custom--typography--h-1--transform, none) !important;
color: var(--wp--custom--typography--h-1--color, #111111);
}
h2 {
font-family: var(--wp--custom--typography--h-2--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-2--size-mobile, 1.65rem) !important;
font-weight: var(--wp--custom--typography--h-2--weight, 800) !important;
line-height: var(--wp--custom--typography--h-2--line-height, 1.2) !important;
letter-spacing: var(--wp--custom--typography--h-2--letter-spacing, -0.02em) !important;
text-transform: var(--wp--custom--typography--h-2--transform, none) !important;
color: var(--wp--custom--typography--h-2--color, #111111);
}
h3 {
font-family: var(--wp--custom--typography--h-3--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-3--size-mobile, 1.6rem) !important;
font-weight: var(--wp--custom--typography--h-3--weight, 800) !important;
line-height: var(--wp--custom--typography--h-3--line-height, 1.3) !important;
letter-spacing: var(--wp--custom--typography--h-3--letter-spacing, -0.01em) !important;
text-transform: var(--wp--custom--typography--h-3--transform, none) !important;
color: var(--wp--custom--typography--h-3--color, #111111);
}
h4 {
font-family: var(--wp--custom--typography--h-4--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-4--size-mobile, 1.3rem) !important;
font-weight: var(--wp--custom--typography--h-4--weight, 700) !important;
line-height: var(--wp--custom--typography--h-4--line-height, 1.35) !important;
letter-spacing: var(--wp--custom--typography--h-4--letter-spacing, -0.01em) !important;
text-transform: var(--wp--custom--typography--h-4--transform, none) !important;
color: var(--wp--custom--typography--h-4--color, #111111);
}
h5 {
font-family: var(--wp--custom--typography--h-5--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-5--size-mobile, 1.05rem) !important;
font-weight: var(--wp--custom--typography--h-5--weight, 700) !important;
line-height: var(--wp--custom--typography--h-5--line-height, 1.4) !important;
letter-spacing: var(--wp--custom--typography--h-5--letter-spacing, 0em) !important;
text-transform: var(--wp--custom--typography--h-5--transform, none) !important;
color: var(--wp--custom--typography--h-5--color, #111111);
}
h6 {
font-family: var(--wp--custom--typography--h-6--font, var(--wp--preset--font-family--theme-heading)) !important;
font-size: var(--wp--custom--typography--h-6--size-mobile, 0.85rem) !important;
font-weight: var(--wp--custom--typography--h-6--weight, 700) !important;
line-height: var(--wp--custom--typography--h-6--line-height, 1.4) !important;
letter-spacing: var(--wp--custom--typography--h-6--letter-spacing, 0.04em) !important;
text-transform: var(--wp--custom--typography--h-6--transform, uppercase) !important;
color: var(--wp--custom--typography--h-6--color, #111111);
}
@media (min-width: 768px) {
h1 { font-size: var(--wp--custom--typography--h-1--size-tablet, 2.6rem) !important; }
h2 { font-size: var(--wp--custom--typography--h-2--size-tablet, 1.8rem) !important; }
h3 { font-size: var(--wp--custom--typography--h-3--size-tablet, 1.6rem) !important; }
h4 { font-size: var(--wp--custom--typography--h-4--size-tablet, 1.3rem) !important; }
h5 { font-size: var(--wp--custom--typography--h-5--size-tablet, 1.05rem) !important; }
h6 { font-size: var(--wp--custom--typography--h-6--size-tablet, 0.85rem) !important; }
}
@media (min-width: 1024px) {
h1 { font-size: var(--wp--custom--typography--h-1--size-desktop, 3.25rem) !important; }
h2 { font-size: var(--wp--custom--typography--h-2--size-desktop, 2.1rem) !important; }
h3 { font-size: var(--wp--custom--typography--h-3--size-desktop, 1.6rem) !important; }
h4 { font-size: var(--wp--custom--typography--h-4--size-desktop, 1.3rem) !important; }
h5 { font-size: var(--wp--custom--typography--h-5--size-desktop, 1.05rem) !important; }
h6 { font-size: var(--wp--custom--typography--h-6--size-desktop, 0.85rem) !important; }
}
/* ==========================================================================
* Visual style tokens (.pb-type--*) — class-keyed, not element-keyed.
*
* The heading rules above style an element BY TAG (an always looks
* like H2). These classes exist so a component (PB Rich Heading/
* Paragraph) can separate the semantic tag from the visual style —
* e.g. an that should visually read as Display L, or an
* that should read as Body Large. Never used to replace the bare
* element rules above (those stay correct for ordinary page/post
* content); only PB Rich Heading/Paragraph output these classes.
* Same mobile/tablet/desktop step pattern as the element rules.
* ========================================================================*/
.pb-type--display-xl {
font-family: var(--wp--custom--typography--display-xl--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--display-xl--size-mobile, 1.5rem);
font-weight: var(--wp--custom--typography--display-xl--weight, 700);
line-height: var(--wp--custom--typography--display-xl--line-height, 1.25);
letter-spacing: var(--wp--custom--typography--display-xl--letter-spacing, 0em);
text-transform: var(--wp--custom--typography--display-xl--transform, none);
color: var(--wp--custom--typography--display-xl--color, #111111);
}
.pb-type--display-l {
font-family: var(--wp--custom--typography--display-l--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--display-l--size-mobile, 1.375rem);
font-weight: var(--wp--custom--typography--display-l--weight, 600);
line-height: var(--wp--custom--typography--display-l--line-height, 1.25);
letter-spacing: var(--wp--custom--typography--display-l--letter-spacing, 0em);
text-transform: var(--wp--custom--typography--display-l--transform, none);
color: var(--wp--custom--typography--display-l--color, #111111);
}
.pb-type--display-m {
font-family: var(--wp--custom--typography--display-m--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--display-m--size-mobile, clamp(1.5rem, 7vw, 1.9rem));
font-weight: var(--wp--custom--typography--display-m--weight, 400);
line-height: var(--wp--custom--typography--display-m--line-height, 1.25);
letter-spacing: var(--wp--custom--typography--display-m--letter-spacing, -0.01em);
text-transform: var(--wp--custom--typography--display-m--transform, none);
color: var(--wp--custom--typography--display-m--color, #111111);
}
.pb-type--h1 {
font-family: var(--wp--custom--typography--h-1--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-1--size-mobile, 2.1rem);
font-weight: var(--wp--custom--typography--h-1--weight, 800);
line-height: var(--wp--custom--typography--h-1--line-height, 1.1);
letter-spacing: var(--wp--custom--typography--h-1--letter-spacing, -0.02em);
text-transform: var(--wp--custom--typography--h-1--transform, none);
color: var(--wp--custom--typography--h-1--color, #111111);
}
.pb-type--h2 {
font-family: var(--wp--custom--typography--h-2--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-2--size-mobile, 1.65rem);
font-weight: var(--wp--custom--typography--h-2--weight, 800);
line-height: var(--wp--custom--typography--h-2--line-height, 1.2);
letter-spacing: var(--wp--custom--typography--h-2--letter-spacing, -0.02em);
text-transform: var(--wp--custom--typography--h-2--transform, none);
color: var(--wp--custom--typography--h-2--color, #111111);
}
.pb-type--h3 {
font-family: var(--wp--custom--typography--h-3--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-3--size-mobile, 1.6rem);
font-weight: var(--wp--custom--typography--h-3--weight, 800);
line-height: var(--wp--custom--typography--h-3--line-height, 1.3);
letter-spacing: var(--wp--custom--typography--h-3--letter-spacing, -0.01em);
text-transform: var(--wp--custom--typography--h-3--transform, none);
color: var(--wp--custom--typography--h-3--color, #111111);
}
.pb-type--h4 {
font-family: var(--wp--custom--typography--h-4--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-4--size-mobile, 1.3rem);
font-weight: var(--wp--custom--typography--h-4--weight, 700);
line-height: var(--wp--custom--typography--h-4--line-height, 1.35);
letter-spacing: var(--wp--custom--typography--h-4--letter-spacing, -0.01em);
text-transform: var(--wp--custom--typography--h-4--transform, none);
color: var(--wp--custom--typography--h-4--color, #111111);
}
.pb-type--h5 {
font-family: var(--wp--custom--typography--h-5--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-5--size-mobile, 1.1rem);
font-weight: var(--wp--custom--typography--h-5--weight, 700);
line-height: var(--wp--custom--typography--h-5--line-height, 1.4);
letter-spacing: var(--wp--custom--typography--h-5--letter-spacing, -0.01em);
text-transform: var(--wp--custom--typography--h-5--transform, none);
color: var(--wp--custom--typography--h-5--color, #111111);
}
.pb-type--h6 {
font-family: var(--wp--custom--typography--h-6--font, var(--wp--preset--font-family--theme-heading));
font-size: var(--wp--custom--typography--h-6--size-mobile, 0.95rem);
font-weight: var(--wp--custom--typography--h-6--weight, 700);
line-height: var(--wp--custom--typography--h-6--line-height, 1.4);
letter-spacing: var(--wp--custom--typography--h-6--letter-spacing, 0em);
text-transform: var(--wp--custom--typography--h-6--transform, uppercase);
color: var(--wp--custom--typography--h-6--color, #111111);
}
.pb-type--button {
font-family: var(--wp--custom--button--primary--font, var(--wp--preset--font-family--theme-button));
font-size: var(--wp--custom--button--primary--font-size, 0.75rem);
font-weight: var(--wp--custom--typography--button--weight, 700);
line-height: 1.2;
letter-spacing: var(--wp--custom--button--primary--letter-spacing, 0.08em);
text-transform: var(--wp--custom--typography--button--transform, none);
color: var(--wp--custom--typography--button--color, #111111);
}
.pb-type--body-large {
font-family: var(--wp--custom--typography--body-large--font, var(--wp--preset--font-family--theme-body));
font-size: var(--wp--custom--typography--body-large--size-mobile, clamp(1.75rem, 8vw, 2.25rem));
font-weight: var(--wp--custom--typography--body-large--weight, 400);
line-height: var(--wp--custom--typography--body-large--line-height, 1.15);
letter-spacing: var(--wp--custom--typography--body-large--letter-spacing, -0.01em);
text-transform: var(--wp--custom--typography--body-large--transform, none);
color: var(--wp--custom--typography--body-large--color, #1c2333);
}
.pb-type--body {
font-family: var(--wp--custom--typography--body--font, var(--wp--preset--font-family--theme-body));
font-size: var(--wp--preset--font-size--body, 1rem);
font-weight: var(--wp--custom--typography--body--weight, 400);
line-height: var(--wp--custom--typography--body--line-height, 1.6);
letter-spacing: var(--wp--custom--typography--body--letter-spacing, 0em);
text-transform: var(--wp--custom--typography--body--transform, none);
color: var(--wp--custom--typography--body--color, #111111);
}
.pb-type--small {
font-size: var(--wp--preset--font-size--small, 0.78rem);
font-weight: var(--wp--custom--typography--small--weight, 500);
line-height: var(--wp--custom--typography--small--line-height, 1.4);
letter-spacing: var(--wp--custom--typography--small--letter-spacing, 0.02em);
text-transform: var(--wp--custom--typography--small--transform, none);
color: var(--wp--custom--typography--small--color, #6b6b6b);
}
/* True bold for inline emphasis inside any .pb-type--* element — always
* one step heavier than the role's OWN base weight (capped at 900),
* not a flat 700 (2026-07-17 fix): h1/h2/h3's base is already 800, so
* a flat 700 rule made bolded text lighter than the
* surrounding heading, and toggling Bold off/on in the editor visibly
* did the opposite of what its label says. calc()+var() reads the same
* per-instance override custom property the base rule uses, so a
* "Typografie override" instance's still stays one step
* heavier than whatever weight it's overridden to. */
.pb-type--display-xl strong { font-weight: min(calc(var(--wp--custom--typography--display-xl--weight, 700) + 100), 900); }
.pb-type--display-l strong { font-weight: min(calc(var(--wp--custom--typography--display-l--weight, 600) + 100), 900); }
.pb-type--display-m strong { font-weight: min(calc(var(--wp--custom--typography--display-m--weight, 400) + 100), 900); }
.pb-type--h1 strong { font-weight: min(calc(var(--wp--custom--typography--h-1--weight, 800) + 100), 900); }
.pb-type--h2 strong { font-weight: min(calc(var(--wp--custom--typography--h-2--weight, 800) + 100), 900); }
.pb-type--h3 strong { font-weight: min(calc(var(--wp--custom--typography--h-3--weight, 800) + 100), 900); }
.pb-type--h4 strong { font-weight: min(calc(var(--wp--custom--typography--h-4--weight, 700) + 100), 900); }
.pb-type--h5 strong { font-weight: min(calc(var(--wp--custom--typography--h-5--weight, 700) + 100), 900); }
.pb-type--h6 strong { font-weight: min(calc(var(--wp--custom--typography--h-6--weight, 700) + 100), 900); }
.pb-type--body-large strong { font-weight: min(calc(var(--wp--custom--typography--body-large--weight, 400) + 100), 900); }
.pb-type--body strong { font-weight: min(calc(var(--wp--custom--typography--body--weight, 400) + 100), 900); }
.pb-type--small strong { font-weight: min(calc(var(--wp--custom--typography--small--weight, 500) + 100), 900); }
.pb-type--button strong { font-weight: min(calc(var(--wp--custom--typography--button--weight, 700) + 100), 900); }
@media (min-width: 768px) {
.pb-type--display-xl { font-size: var(--wp--custom--typography--display-xl--size-tablet, 1.5rem); }
.pb-type--display-l { font-size: var(--wp--custom--typography--display-l--size-tablet, 2.25rem); }
.pb-type--display-m { font-size: var(--wp--custom--typography--display-m--size-tablet, clamp(1.75rem, 3.4vw, 2.5rem)); }
.pb-type--h1 { font-size: var(--wp--custom--typography--h-1--size-tablet, 2.6rem); }
.pb-type--h2 { font-size: var(--wp--custom--typography--h-2--size-tablet, 1.8rem); }
.pb-type--h3 { font-size: var(--wp--custom--typography--h-3--size-tablet, 1.6rem); }
.pb-type--h4 { font-size: var(--wp--custom--typography--h-4--size-tablet, 1.3rem); }
.pb-type--body-large { font-size: var(--wp--custom--typography--body-large--size-tablet, clamp(2.25rem, 4vw, 3.25rem)); }
}
@media (min-width: 1024px) {
.pb-type--display-xl { font-size: var(--wp--custom--typography--display-xl--size-desktop, 1.5rem); }
.pb-type--display-l { font-size: var(--wp--custom--typography--display-l--size-desktop, 2.25rem); }
.pb-type--display-m { font-size: var(--wp--custom--typography--display-m--size-desktop, clamp(1.75rem, 3.4vw, 2.5rem)); }
.pb-type--h1 { font-size: var(--wp--custom--typography--h-1--size-desktop, 3.25rem); }
.pb-type--h2 { font-size: var(--wp--custom--typography--h-2--size-desktop, 2.1rem); }
.pb-type--h3 { font-size: var(--wp--custom--typography--h-3--size-desktop, 1.6rem); }
.pb-type--h4 { font-size: var(--wp--custom--typography--h-4--size-desktop, 1.3rem); }
.pb-type--body-large { font-size: var(--wp--custom--typography--body-large--size-desktop, clamp(2.25rem, 4vw, 3.25rem)); }
}
/* ==========================================================================
* Radius / shadow tokens — utility classes any PB component can opt
* into instead of hardcoding a border-radius/box-shadow value.
* ========================================================================*/
.pb-radius--none { border-radius: var(--wp--custom--radius--none, 0); }
.pb-radius--small { border-radius: var(--wp--custom--radius--small, 0.5rem); }
.pb-radius--medium { border-radius: var(--wp--custom--radius--medium, 0.75rem); }
.pb-radius--large { border-radius: var(--wp--custom--radius--large, 1.25rem); }
.pb-radius--pill { border-radius: var(--wp--custom--radius--pill, 999px); }
.pb-shadow--none { box-shadow: var(--wp--custom--shadow--none, none); }
.pb-shadow--small { box-shadow: var(--wp--custom--shadow--small, 0 4px 12px rgba(17, 17, 17, 0.08)); }
.pb-shadow--medium { box-shadow: var(--wp--custom--shadow--medium, 0 12px 28px rgba(17, 17, 17, 0.12)); }
.pb-shadow--large { box-shadow: var(--wp--custom--shadow--large, 0 24px 60px rgba(17, 17, 17, 0.18)); }
/* ==========================================================================
* Body text
* ========================================================================*/
body,
p {
font-weight: var(--wp--custom--typography--body--weight, 400);
line-height: var(--wp--custom--typography--body--line-height, 1.6);
letter-spacing: var(--wp--custom--typography--body--letter-spacing, 0em);
text-transform: var(--wp--custom--typography--body--transform, none);
color: var(--wp--custom--typography--body--color, #111111);
}
/* Note: alignment tokens (--wp--custom--alignment--heading/body) are
* deliberately NOT applied as a blanket text-align here — several
* existing sections (e.g. .pb-blog-single__header, .team-selector)
* center their heading/body text via a wrapper, relying on inherited
* alignment with no explicit value on the heading/paragraph itself.
* Forcing a global text-align here would silently un-center those.
* The tokens stay available for a future per-block "Alignment: Theme
* Default / Override" control (opt-in), not as a global rule.
* ========================================================================*/
/* ==========================================================================
* Small / UI and Caption utility classes — for the many small-text
* roles across blocks (breadcrumbs, meta, eyebrow labels, badges)
* that aren't semantic headings but still need a consistent, centrally
* configurable treatment. Opt-in via class since and
* aren't used consistently enough across existing markup to safely
* target as bare elements.
* ========================================================================*/
.pb-small,
small {
font-size: var(--wp--preset--font-size--small, 0.78rem);
font-weight: var(--wp--custom--typography--small--weight, 500);
line-height: var(--wp--custom--typography--small--line-height, 1.4);
letter-spacing: var(--wp--custom--typography--small--letter-spacing, 0.02em);
text-transform: var(--wp--custom--typography--small--transform, none);
}
.pb-caption,
figcaption {
font-size: var(--wp--preset--font-size--caption, 0.72rem);
font-weight: var(--wp--custom--typography--caption--weight, 500);
line-height: var(--wp--custom--typography--caption--line-height, 1.4);
letter-spacing: var(--wp--custom--typography--caption--letter-spacing, 0.01em);
text-transform: var(--wp--custom--typography--caption--transform, none);
}
/* ==========================================================================
* Button Design System — Primary / Secondary / Ghost / Link.
*
* The 4 centrally defined CTA styles every block's style picker (PB
* CTA's "Stijl" dropdown, assets/js/pb-cta.js STYLE_OPTIONS) offers,
* and the only ones pb_button_class() accepts. Existing contextual
* button classes (.button--primary/--ghost/--dark/--ghost-dark in the
* sections below) are deliberately left as-is — those exist because
* they sit on different backgrounds (Hero's image backdrop vs. a
* light section) and forcing them to look identical would be a
* visual change, not a cleanup. What *is* centralized here is the
* shape every one of them already shared (radius/padding/font-size/
* letter-spacing/transition) — see the ".button" base rule further
* down, now sourced from the same shape tokens as .pb-button.
*
* Primary = dark rectangular (#111111, ~10px radius) — the
* established PaperBrain CTA (2026-07-09: corrected from an accent-
* purple pill, which this dropdown's "Primary" option incorrectly
* rendered as before — every block that already gave its own CTA a
* scoped color override, e.g. every pb/hero-* block and
* pb/campaign-banner, is unaffected by this, since their own
* higher-specificity rule always wins regardless of this shared
* default; verified no other block's *unstyled* default CTA relied on
* the old purple pill look). Secondary now carries that accent-purple
* pill instead — "mag blijven bestaan", just correctly no longer
* labeled Primary.
* ========================================================================*/
.pb-button,
.wp-block-button.is-style-pb-primary .wp-block-button__link,
.wp-block-button.is-style-pb-secondary .wp-block-button__link,
.wp-block-button.is-style-pb-ghost .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
border-style: solid;
font-family: var(--wp--preset--font-family--theme-button, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif);
font-weight: var(--wp--custom--typography--button--weight, 700);
text-transform: var(--wp--custom--typography--button--transform, none);
cursor: pointer;
text-decoration: none;
}
/* Native core/button style variations (is-style-pb-primary/-secondary/
* -ghost, registered in inc/block-helpers.php) share these exact same
* rulesets via the combined selectors below — one button architecture,
* reachable either through a PB component's own .pb-button--* markup
* or a native core/button block. Never two independent definitions. */
.pb-button--primary,
.wp-block-button.is-style-pb-primary .wp-block-button__link {
font-family: var(--wp--custom--button--primary--font, var(--wp--preset--font-family--theme-button));
background: var(--wp--custom--button--primary--background, #111111);
color: var(--wp--custom--button--primary--text, #ffffff);
border-width: var(--wp--custom--button--primary--border-width, 1.5px);
border-color: var(--wp--custom--button--primary--border-color, #111111);
border-radius: var(--wp--custom--button--primary--radius, 10px);
/* 2026-07-16: fixed 46px height (was padding+line-height driven) —
* height:46px + box-sizing:border-box (global `* {box-sizing}`
* reset) includes padding/border in that 46px, so padding-y is
* dropped entirely; align-items:center on .pb-button (base rule)
* keeps the text vertically centered exactly as before.
* min-width matches the ~143.16px reference size; width stays auto
* (inline-flex default) so longer labels grow via the unchanged
* padding-x token, not a fixed box. */
height: 46px;
min-width: 143.16px;
padding: 0 var(--wp--custom--button--primary--padding-x, 2.25rem);
font-size: var(--wp--custom--button--primary--font-size, 0.75rem);
font-weight: var(--wp--custom--button--primary--font-weight, 700);
letter-spacing: var(--wp--custom--button--primary--letter-spacing, 0.08em);
transition: background-color var(--wp--custom--button--primary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), color var(--wp--custom--button--primary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), transform var(--wp--custom--button--primary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
}
.pb-button--primary:hover,
.pb-button--primary:focus-visible,
.wp-block-button.is-style-pb-primary .wp-block-button__link:hover,
.wp-block-button.is-style-pb-primary .wp-block-button__link:focus-visible {
background: var(--wp--custom--button--primary--hover-background, #2b2b2b);
color: var(--wp--custom--button--primary--hover-text, #ffffff);
transform: translateY(-2px);
box-shadow: var(--wp--custom--button--primary--shadow, 0 8px 20px rgba(17, 17, 17, 0.25));
outline: none;
}
/* Structure (height/min-width/padding/radius/font-size/weight/letter-
* spacing) is a deliberate byte-for-byte copy of .pb-button--primary's
* own box model (2026-07-16) — only the color tokens below differ.
* Same "one architecture" rule as is-style-pb-primary/-secondary/-ghost
* sharing these rulesets. */
.pb-button--secondary,
.wp-block-button.is-style-pb-secondary .wp-block-button__link {
font-family: var(--wp--custom--button--secondary--font, var(--wp--preset--font-family--theme-button));
background: var(--wp--custom--button--secondary--background, #ffffff);
color: var(--wp--custom--button--secondary--text, #6848f4);
border-width: var(--wp--custom--button--secondary--border-width, 1.5px);
border-color: var(--wp--custom--button--secondary--border-color, #6848f4);
border-radius: var(--wp--custom--button--secondary--radius, 10px);
height: 46px;
min-width: 143.16px;
padding: 0 var(--wp--custom--button--secondary--padding-x, 2.25rem);
font-size: var(--wp--custom--button--secondary--font-size, 0.75rem);
font-weight: var(--wp--custom--button--secondary--font-weight, 700);
letter-spacing: var(--wp--custom--button--secondary--letter-spacing, 0.08em);
transition: background-color var(--wp--custom--button--secondary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), color var(--wp--custom--button--secondary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), transform var(--wp--custom--button--secondary--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
}
.pb-button--secondary:hover,
.pb-button--secondary:focus-visible,
.wp-block-button.is-style-pb-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-pb-secondary .wp-block-button__link:focus-visible {
background: var(--wp--custom--button--secondary--hover-background, #ffffff);
color: var(--wp--custom--button--secondary--hover-text, #7e6fef);
transform: translateY(-2px);
box-shadow: var(--wp--custom--button--secondary--shadow, 0 8px 20px rgba(104, 72, 244, 0.25));
outline: none;
}
.pb-button--ghost,
.wp-block-button.is-style-pb-ghost .wp-block-button__link {
font-family: var(--wp--custom--button--ghost--font, var(--wp--preset--font-family--theme-button));
background: var(--wp--custom--button--ghost--background, transparent);
color: var(--wp--custom--button--ghost--text, #111111);
border-width: var(--wp--custom--button--ghost--border-width, 1.5px);
border-color: var(--wp--custom--button--ghost--border-color, rgba(17, 17, 17, 0.55));
border-radius: var(--wp--custom--button--ghost--radius, 999px);
padding: var(--wp--custom--button--ghost--padding-y, 0.95rem) var(--wp--custom--button--ghost--padding-x, 2.25rem);
font-size: var(--wp--custom--button--ghost--font-size, 0.8rem);
font-weight: var(--wp--custom--button--ghost--font-weight, 700);
letter-spacing: var(--wp--custom--button--ghost--letter-spacing, 0.08em);
transition: background-color var(--wp--custom--button--ghost--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), color var(--wp--custom--button--ghost--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1)), transform var(--wp--custom--button--ghost--transition, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
}
.pb-button--ghost:hover,
.pb-button--ghost:focus-visible,
.wp-block-button.is-style-pb-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-pb-ghost .wp-block-button__link:focus-visible {
background: var(--wp--custom--button--ghost--hover-background, rgba(17, 17, 17, 0.08));
color: var(--wp--custom--button--ghost--hover-text, #111111);
transform: translateY(-2px);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.pb-button--primary,
.pb-button--secondary,
.pb-button--ghost,
.wp-block-button.is-style-pb-primary .wp-block-button__link,
.wp-block-button.is-style-pb-secondary .wp-block-button__link,
.wp-block-button.is-style-pb-ghost .wp-block-button__link {
transition: none;
}
}
/* Sitewide CTA standardization to the Header CTA look (2026-07-23) —
* every Primary/Secondary/Ghost CTA (and native core/button style-
* variation equivalent) now renders identically to the header CTA
* (inc/header-icons.php, .pb-newsletter__cta--header in assets/css/
* main.css): filled brand-purple, white text, 4px radius, compact
* padding, flat color-only hover/focus (no lift/shadow). Reuses that
* same --pb-header-cta-background Customizer token, one source of
* truth. :not(.pb-newsletter__cta) is the one required exception — the
* pb/newsletter block's own CTAs keep their current distinct look/hover
* untouched (assets/css/main.css, .pb-newsletter__cta rules). :not()
* counts its argument's specificity, so each selector below is one
* class more specific than the matching rule above and wins without
* replacing it — no duplicate component, the variant rules above still
* define everything these selectors don't override (font-family, base
* display/align/justify). */
.pb-button--primary:not(.pb-newsletter__cta),
.pb-button--secondary:not(.pb-newsletter__cta),
.pb-button--ghost:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-primary .wp-block-button__link:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-secondary .wp-block-button__link:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-ghost .wp-block-button__link:not(.pb-newsletter__cta) {
background-color: var(--pb-header-cta-background, #6848f4);
color: #ffffff;
border-width: 1px;
border-color: var(--pb-header-cta-background, #6848f4);
border-radius: 4px;
height: auto;
min-width: 0;
padding: 0.6rem 1.25rem;
font-size: 12px;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pb-button--primary:not(.pb-newsletter__cta):hover,
.pb-button--primary:not(.pb-newsletter__cta):focus-visible,
.pb-button--secondary:not(.pb-newsletter__cta):hover,
.pb-button--secondary:not(.pb-newsletter__cta):focus-visible,
.pb-button--ghost:not(.pb-newsletter__cta):hover,
.pb-button--ghost:not(.pb-newsletter__cta):focus-visible,
.wp-block-button.is-style-pb-primary .wp-block-button__link:not(.pb-newsletter__cta):hover,
.wp-block-button.is-style-pb-primary .wp-block-button__link:not(.pb-newsletter__cta):focus-visible,
.wp-block-button.is-style-pb-secondary .wp-block-button__link:not(.pb-newsletter__cta):hover,
.wp-block-button.is-style-pb-secondary .wp-block-button__link:not(.pb-newsletter__cta):focus-visible,
.wp-block-button.is-style-pb-ghost .wp-block-button__link:not(.pb-newsletter__cta):hover,
.wp-block-button.is-style-pb-ghost .wp-block-button__link:not(.pb-newsletter__cta):focus-visible {
background-color: #7e6fef;
border-color: #7e6fef;
color: #ffffff;
transform: none;
box-shadow: none;
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.pb-button--primary:not(.pb-newsletter__cta),
.pb-button--secondary:not(.pb-newsletter__cta),
.pb-button--ghost:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-primary .wp-block-button__link:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-secondary .wp-block-button__link:not(.pb-newsletter__cta),
.wp-block-button.is-style-pb-ghost .wp-block-button__link:not(.pb-newsletter__cta) {
transition: none;
}
}
/* ==========================================================================
* Section / container tokens — utility classes any block can opt into
* instead of hardcoding its own max-width/padding.
* ========================================================================*/
.pb-container {
max-width: var(--wp--custom--section--container-width, 1440px);
margin-left: auto;
margin-right: auto;
}
.pb-container--content {
max-width: var(--wp--custom--section--content-width, 800px);
margin-left: auto;
margin-right: auto;
}
.pb-container--small {
max-width: var(--wp--custom--section--small-container, 640px);
margin-left: auto;
margin-right: auto;
}
/* Top/bottom are independently configurable tokens (theme.json
* settings.custom.section.paddingTop/paddingBottom), each with their
* own desktop/tablet/mobile value — both currently set to the same
* numbers, so nothing changes visually, but a block/section can now
* have different top vs. bottom spacing without a new mechanism. */
.pb-section-spacing {
padding-top: var(--wp--custom--section--padding-top--mobile, 2.5rem);
padding-bottom: var(--wp--custom--section--padding-bottom--mobile, 2.5rem);
}
@media (min-width: 768px) {
.pb-section-spacing {
padding-top: var(--wp--custom--section--padding-top--tablet, 3.5rem);
padding-bottom: var(--wp--custom--section--padding-bottom--tablet, 3.5rem);
}
}
@media (min-width: 1024px) {
.pb-section-spacing {
padding-top: var(--wp--custom--section--padding-top--desktop, 5rem);
padding-bottom: var(--wp--custom--section--padding-bottom--desktop, 5rem);
}
}