/* * Footer CTA and Home Hero Card — shared badge chassis and icon styles, plus * footer button icons, hover/active/focus states. * Icons are Phosphor SVGs embedded as CSS mask-image data URIs so they * inherit currentColor and can be swapped per block style variation. Both * badge classes share these rules (rather than duplicating the SVGs) so a * new badge icon only needs registering once — see register_block_styles() * in functions.php. * * Step 6 moved the badge's own chassis here too, from hero-card.css. The * icon rules were already shared across both classes in this file, so this * is where the one definition belongs — keeping the chassis in hero-card.css * would have meant either duplicating it for .idia-cta-badge or having the * two halves of one component live in two files. The icon CHOICE stays * per-instance (each badge keeps its own is-style-badge-icon-* class). */ .idia-cta-badge, .idia-hero-card__badge { position: relative; } /* ---- Shared badge chassis ---- Matches the reference's .tag-block > .tag-wrapper: a solid light chip with near-black mono text. These are also exactly AGENTS.md §9.3's eyebrow-label rules (mono family, uppercase, weight 500, size preset `s`), so the reference and the house spec agree. No border: the reference has none, and both blocks' border-width attributes were removed from the markup rather than being zeroed here, so nothing is left to override. */ .idia-cta-badge, .idia-hero-card__badge { width: fit-content; background-color: var(--wp--preset--color--tertiary); color: var(--wp--preset--color--main); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s); font-weight: var(--wp--custom--font-weight--medium); text-transform: uppercase; /* Explicit reset, not a leftover. theme.json sets a NEGATIVE body letter-spacing (--wp--custom--letter-spacing--body, -0.033em — measured -0.528px at 16px) on the element defaults, and it inherits into this chip. Tracking that tightens uppercase mono text is wrong at any size; the reference computes `normal` here. Removing this line does not restore a neutral default — it reinstates the negative value. */ letter-spacing: normal; line-height: 1.5; /* No `gap` here on purpose. Core emits `:root :where(.is-layout-flex){gap: var(--wp--custom--gap--24)}` — (0,1,0) specificity, which TIES a single class, and core's inline