/* * sitepilot-blocks — canonical-class compatibility layer (Gutenberg conversion, Phase 7). * * The ~52 `semantic` families already style the canonical class vocabulary * (.hero-content, .services-grid, .service-card, .section-heading-group …) in * their base.css. The ~28 `bem` + 2 `bem-under` families do NOT — their base.css * styles .card/.grid/.section__header instead. This stylesheet gives the canonical * classes a sensible, ON-BRAND layout (it consumes each family's own --color-, * --radius and --space CSS variables, with fallbacks) so block-rendered pages * look right on every family. * * EVERY selector is wrapped in :where() → ZERO specificity. Any real family rule * (even a single-class selector) overrides these, so semantic families are * completely unaffected; only the gaps on bem families get filled. * * WS-B (run3 design-fix, 2026-07-12): the button/contact-info-card/about- * rhythm/form-input/icon-chip rules added below use PLAIN (non-:where()) * low-but-non-zero-specificity selectors — a bare single class, e.g. * `.btn-primary` (specificity 0,1,0) — instead of the :where() pattern * above. This plugin enqueues canonical-compat.css on `enqueue_block_assets` * priority 5, BEFORE the family's own base.css/custom.css (see * sitepilot-blocks.php), so on an equal-specificity tie the family's real * rule (loaded later in the cascade) still wins — preserving family * identity/colors exactly like :where() did for those cases — while a plain * class selector, unlike :where(), reliably beats accidental * zero-specificity universal/element resets (e.g. `* { margin: 0 }`, a bare * `input {}`) that were silently zeroing out the old :where() spacing/ * surface rules regardless of load order. That was the actual residual bug * (about-section overlaps 008/027/030/031, invisible dark-form inputs) — * not family rules "correctly" overriding compat, but compat losing to * unrelated resets it should have beaten. NO `!important` is used anywhere * in this file. * * The contract doc (docs/gutenberg-run3-fix-playbook.md) asks for these * rules to be scoped under a plugin-root class `.sp-block-page`. Verified * via repo-wide grep that this class is NOT emitted anywhere in the * codebase yet (no PHP/theme template adds it to or a content * wrapper), and this task's scope is this CSS file only. Selectors below * are therefore left unscoped (bare classes) rather than nested under a * currently-nonexistent ancestor, which would silently match nothing. If/ * when a `.sp-block-page` wrapper is added by another workstream, prefixing * these selectors with it is a pure specificity increase (0,1,0 → 0,2,0) * and safe to do at that point — it will not change which rules currently * apply, only add an extra namespace/specificity margin. */ /* ---- role tokens (WS-B) — resolved per family from existing family variables, so family branding always drives the actual color; these are just canonical NAMES for "what a button/highlight/card-surface is", matching the shared contract in docs/gutenberg-run3-fix-playbook.md. ---- */ :root { --sp-action: var(--color-accent, var(--color-primary, currentColor)); --sp-action-contrast: var(--color-on-accent, var(--color-white, #fff)); --sp-highlight: var(--color-primary, var(--color-accent, currentColor)); --sp-surface-card: var(--color-bg-card, var(--color-surface, rgba(128, 128, 128, .05))); } /* ---- buttons (canonical .btn vocabulary) — previously UNDEFINED in this file; the direct cause of 22 bare-link CTAs + 16 pale/unstyled submit buttons (report P1#1). Verified against render-helpers.php sp_cta()/ sp_static_contact_form(_custom)() and blocks/hero, blocks/cta-banner, blocks/product-highlight, blocks/pricing-table render.php: real markup emits `btn btn-primary`, `btn btn-outline`, and `btn btn-lg` (on CTAs and the static-form