/* === 0-shared utilities === * Cross-section design utilities for ssla/* sections. * Loaded first (alphabetical sort puts it before section files). * Per "1 source of truth, 2 editing surfaces" — these classes are referenced * by section render templates AND respected by section CSS files. Both * Gutenberg block editor and overlay pill render the same surface. * * @since 3.5.54 */ /* v3.9.17 — Pair the data-ssla-bg-color attribute (emitted by * SSLA_Block_Bridge::render since v3.5.79) with an actual paint rule. * * Pre-v3.9.17 the attribute was metadata-only — overlay JS read it for * picker hydration but no CSS rule consumed it, so saved bg_color * values never rendered. The overlay color picker has been writing to * a contract no consumer respected since v3.5.79. * * Picker's previewColor() writes --ssla-bg-color CSS var on the section * for live preview; render layer writes data-ssla-bg-color attr post- * save. This rule reads the var (live preview path) and falls back to * the attr (server-rendered post-save state). When neither is present, * transparent — preserves whatever native bg the section CSS sets. * * Known limitation: sections with child-painted bg (heros with tint * overlays, hero-fullbleed background images) won't preview because * their visible bg layer isn't the
root. Save still writes * the attr for future render-layer fix when the section primitive ↔ * preset paint architecture standardizes (parked Item 1a Option α). */ section[data-ssla-bg-color] { background-color: var( --ssla-bg-color, transparent ); } /* v3.18.27 / f3.background.b — background media (image-first). * Pairs with data-ssla-bg-media + inline --ssla-bg-media (a url(...) value) * emitted by SSLA_Block_Bridge::render() and mirrored on the editor canvas by * augmentCanvasRoot (canvas == FE). cover/center is the universal section * backdrop default. The tint ::after layer (z-index 0) overlays this media and * keeps content at z-index 1, so tint-over-media needs no extra rule. Video * (data-ssla-bg-media-type=video) is .b2; this band paints image only. */ section[data-ssla-bg-media] { background-image: var( --ssla-bg-media ); background-size: cover; background-position: var( --ssla-bg-media-position, center ); background-repeat: no-repeat; } /* v3.12.21 (revised v3.12.23) — Inner-wrapper paint for sections whose * visible background lives on a child element, not the
root. * Closes Glenn 2026-05-21 walk: "all sections need to paint bg color * live only a few do". * * Pre-v3.12.21 the bg-color picker wrote --ssla-bg-color + background- * color + data-ssla-bg-color on the
root, but ~58 of 81 * sections paint their visible bg on an inner wrapper (.sab-outer, * .c3tm-outer, .sc3-inner, etc.) that doesn't reference --ssla-bg-color. * Result: section root painted the color (invisibly, under the opaque * inner) and the user saw no preview until save+reload. * * v3.12.21 first attempt used `.ssla-section[data-ssla-bg-color] > *` * which painted EVERY direct child including SSLA overlay chrome * (.ssla-ov-section-tag, popovers) and clobbered multi-zone sections * like contact-split (the hero band lost its hero_bg paint). * * v3.12.23 fix has three exclusions: * - :not([class*="ssla-ov-"]) — skip SSLA overlay chrome * - :not([data-ssla-chrome]) — skip header/footer chrome regions * - Sections marked data-ssla-multi-zone="1" don't get the global * paint AT ALL — they manage their own per-zone paint via the * openMultiZoneBgPicker popover writing per-zone CSS vars * (--ssla-hero-bg, etc.) that the section's own CSS reads. * * Single-zone sections continue to get the live paint they were * missing pre-v3.12.21. Multi-zone sections own their zones cleanly. * Chrome stays untouched. * * Specificity (0,3,1) beats per-section .class { background: … } * (0,1,0). Sections that paint a gradient on the inner (cards-3-dark) * get overridden — matches user intent: explicit bg-color choice * overrides the section's stock gradient. * * v3.18.45 / WALK-7 — Greenfield sections (g-*) paint bg on the section * ROOT, not an inner wrapper, so the children-paint rule double-painted * them (Glenn 2026-05-30 DevTools trace). Added :not([data-ssla-greenfield]) * exclusion below + positive greenfield rule painting the section element * itself. data-ssla-greenfield="1" already emitted by the bridge on every * greenfield section root. */ .ssla-section[data-ssla-bg-color]:not([data-ssla-multi-zone]):not([data-ssla-greenfield]) > *:not([class*="ssla-ov-"]):not([data-ssla-chrome]) { background-color: var( --ssla-bg-color, transparent ); } /* v3.18.45 / WALK-7 — Greenfield positive paint rule: section root only. No descendant paint propagation since greenfield CSS already handles inner wrappers with their own per-token chains. */ .ssla-section[data-ssla-bg-color][data-ssla-greenfield] { background-color: var( --ssla-bg-color, transparent ); } /* ─── Eyebrow component ─────────────────────────────────────────────── * Render: EYEBROW TEXT * * Visual: small uppercase tracked text preceded by a 36×2 colored rule. * ── EYEBROW TEXT * * Color: --shell-accent (preset accent), with optional muted variant for * cases where the eyebrow should de-emphasize. * * Used by: hero-split, hero-image-overlay, cards-3-tier, cards-3-numbered, * cards-4-domain, cta-* and any future section that has an eyebrow. Section * CSS files do NOT redefine eyebrow appearance — they reference this class. */ .ssla-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: var(--paint-eyebrow-weight, 700); letter-spacing: var(--paint-eyebrow-letter-spacing, 3px); text-transform: var(--paint-eyebrow-case, uppercase); color: var(--shell-accent, currentColor); margin: 0 0 16px; vertical-align: middle; } .ssla-eyebrow::before { content: ''; display: inline-block; width: 36px; height: 2px; background: currentColor; flex-shrink: 0; } .ssla-eyebrow.is-centered { /* Centered eyebrows still align rule + text horizontally. Parent applies * text-align:center; this just ensures the inline-flex container itself * centers within its parent. */ margin-left: auto; margin-right: auto; } .ssla-eyebrow.is-muted { color: var(--shell-m, #6b7280); } .ssla-eyebrow.is-on-dark { color: var(--shell-accent, currentColor); } .ssla-eyebrow.is-plain { /* v3.7.08 / Pass 4 Band 4b — agnostic-keys retirement. * The 14 RSD-namespaced sections (hero-fullbleed, feature-split-2, etc.) * historically used .rsd-eyebrow which lacked the canonical .ssla-eyebrow * 36×2 rule glyph. The .is-plain modifier removes the glyph so those * sections retain their original visual treatment after converging on * .ssla-eyebrow. Future work: reconcile design intent — should those * sections gain the glyph too, or stay plain? Lyra/Glenn call. */ display: inline-block; gap: 0; } .ssla-eyebrow.is-plain::before { content: none; } /* Center-align variant for sections where eyebrow sits above a centered * heading. Apply on the parent (text-align:center) to position both the * eyebrow and heading horizontally. */ .ssla-section-center .ssla-eyebrow { margin-left: auto; margin-right: auto; } /* ─── Accent text inline span ──────────────────────────────────────── * Render:

Lead with strength

* * Used inside rich-text headings to color a highlight word with the * preset accent. Shorter than .gold (preset-specific) and reusable * across presets. Translator must allowlist this class. * * Sections may extend with section-scoped variants (e.g. .ctd .ssla-accent * may be visually different from .shs .ssla-accent). */ .ssla-accent { color: var(--shell-accent, currentColor); } /* For ASK preset (and others) that use .gold as accent class, retain * compatibility — .gold gets the same treatment as .ssla-accent. Custom * presets can redefine .gold within their custom_css if they want it * different. */ .gold { color: var(--shell-accent, currentColor); } /* ─── Section-level helpers ───────────────────────────────────────── */ /* Tone variants are emitted by SSLA_Block_Bridge::render() as both: * (a) class-modifier per contract §7.6: .ssla-{slug}--tone-{value} * (b) data attribute: data-ssla-variant-tone="{value}" (added v3.5.81) * * Section CSS files MAY use either signal. The class-modifier pattern is * older; the data-attribute pattern enables generic section-scope rules * like the dark-tone shell-var flip below. * * v3.5.81 dark-tone flip rule (was orphaned in launch-sections.css bundle * without a source file, restored to source here in v3.6.1 so build-css.php * regeneration preserves it): */ .ssla-section[data-ssla-variant-tone="dark"] { --shell-bg: var(--shell-bg-dark); --shell-card: var(--shell-bg-dark); --shell-h: var(--shell-h-on-dark); --shell-t: var(--shell-t-on-dark); --shell-m: var(--shell-m-on-dark); --shell-line: var(--shell-line-on-dark); } /* ─── v3.5.58 (B16) Section font inheritance ───────────────────────── * All Launch sections inherit the painting class's font-family. Without * this, body copy in sections fell through to whatever the theme set * (typically Arial/system) instead of the preset's typography. Section * CSS files MAY override this for headings (see hero-bg .shb h1) but * body text inherits cleanly. * * Scope: every section root identified by data-ssla-type. The painting * class emits --paint-font-family as the canonical declaration; --shell-hf * is the fallback (legacy alias still emitted by SSLA_Preset_Painting). */ [data-ssla-type] { font-family: var(--paint-font-family, var(--shell-hf, inherit)); } /* ─── v3.5.60 (B15) Rich-field div containers ──────────────────────── * Pre-v3.5.60, rich fields were template-wrapped in

tags: *

{{key}}

* When the saved rich content contained

markup (multi-paragraph copy), * the HTML parser auto-closed the outer

on encountering the nested

, * orphaning the content as siblings WITHOUT data-ssla-field attribution. * Click-to-edit broke (B15 root cause). * * v3.5.60 systemic fix: all

converted to *

across every section template (35 files, * 93 occurrences).
accepts nested

as valid HTML — no auto-close. * * Most section CSS files already had `X p { margin: 0 0 0.6em }` rules * anticipating rich content. This safety net catches any section whose CSS * didn't define inner-

margins, so the

→

conversion never * regresses paragraph spacing. Section CSS may override; this is the floor. */ [data-ssla-type] [data-ssla-field-type="rich"] > p { margin: 0 0 0.6em; } [data-ssla-type] [data-ssla-field-type="rich"] > p:last-child { margin-bottom: 0; } /* ─── v3.5.61.01 (B26-headings final) Heading-tag rich-field safety net ── * Headings with rich field type (e.g.

) * receive content that may contain nested

tags from the rich editor. * Browser HTML5 parsing allows

as flow content inside , but the *

's default block-level margins, font-size, and font-weight cascade * REPLACE the heading's intended typography in render — producing the * regression Glenn first reported on home cta-accent (heading rendering * smaller/wrong on "A Few Minutes. A lot of Insight."). * * Three prior fix attempts (v3.5.60.1 .60.2 selector extension, v3.5.61.00 * specificity hardening) targeted body-text spacing or h2-element specifity * but did not address the nested-

-cascading-typography mechanism. * * Fix: nested

inside any heading-tag rich field inherits all typography * from the parent heading, with margin zeroed so the heading lays out as * a single line. Display:inline collapses the

's block context entirely * — the heading appears semantically and visually as the heading it is. * * Architectural note: the cleaner long-term fix is to strip

from saved * heading-field content server-side on POST /block-attr (heading fields * are never multi-paragraph by definition). Deferred to v3.6.x with the * tone-attribute refactor. */ [data-ssla-type] h1[data-ssla-field-type="rich"] > p, [data-ssla-type] h2[data-ssla-field-type="rich"] > p, [data-ssla-type] h3[data-ssla-field-type="rich"] > p, [data-ssla-type] h4[data-ssla-field-type="rich"] > p, [data-ssla-type] h5[data-ssla-field-type="rich"] > p, [data-ssla-type] h6[data-ssla-field-type="rich"] > p { display: inline; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } /* ─── Focus affordance — keyboard users only ────────────────────────── * Suppress click-induced focus borders on mouse interaction; preserve * keyboard-navigation outlines per :focus-visible. Applies across all * section primitives + overlay-edited content. * * Keyboard navigation (Tab/Shift+Tab) triggers :focus-visible — these * users get a clear 2px outline so they know where focus has landed. * Mouse users who click links or buttons trigger :focus but NOT * :focus-visible — these users get no outline, since they already know * where they clicked. * * @since 3.6.1 */ a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; box-shadow: none; } a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ─── Section tint layer (v3.8.7 / Pass 6 Component 6C) ─────────────── * Section-level tint is applied by writing a colored layer over the * section's content. Honors the Gutenberg-as-truth invariant locked at * v3.8.5/6A: tint_color + tint_opacity are real block attrs (visible in * the block sidebar), not postmeta side-table; the renderer emits them * as data attrs + CSS vars on the section root, and this rule applies * them visually. * * Implementation notes: * - Sections opt in by ALWAYS having the `position: relative` baseline * in their own CSS (most do already; sections with non-default * positioning may need a one-line override authored when their tint * lands). * - The tint layer is ::after, positioned absolute, full inset. * pointer-events: none so it doesn't eat clicks/edits. * - z-index: 0 (above bg, below content). Sections with elaborate * z-stacks (heroes with bg-image + overlay + content) can override * with a higher specificity rule when needed. * - background-color = the tint color; opacity from the CSS var. * * Tone-aware contrast (data-ssla-tone) is enforced via separate CSS * rules below — body text token flips when the section is tinted in a * way that crosses contrast thresholds. The runtime supplies tone=auto * by default; designers override per-section when explicit tone is * required by design integrity. * * @since 3.8.7 */ .ssla-section[data-ssla-tint-color][data-ssla-tint-opacity] { position: relative; } .ssla-section[data-ssla-tint-color][data-ssla-tint-opacity]::after { content: ""; position: absolute; inset: 0; background-color: var(--section-tint-color); opacity: var(--section-tint-opacity); pointer-events: none; z-index: 0; } .ssla-section[data-ssla-tint-color][data-ssla-tint-opacity] > * { position: relative; z-index: 1; } /* Tone-aware text token resolution. data-ssla-tone="dark" forces the * dark-surface text token; "light" forces the light-surface token; * "auto" (default) lets section CSS / preset tokens decide. The picker * advisory contrast warning (G3 guidance, not enforcement) flags * configurations that drop below WCAG AA — the runtime emits the * computed-correct token regardless. */ .ssla-section[data-ssla-tone="dark"] { color: var(--text-on-dark, #f7f7f7); } .ssla-section[data-ssla-tone="light"] { color: var(--text-on-light, #1a1d21); } /* v3.12.02 — Inline link styling polish (Glenn 2026-05-20 walk). * * Rich-typed fields embed inline anchors via the mini-toolbar link button. * Default browser anchor styling (theme-default underline + theme color) * doesn't distinguish links from text in section copy. Pattern: bold + * accent color, underline preserved as the discoverability signal. * * Targets anchors INSIDE rich field wrappers only — does NOT affect * anchors that ARE themselves the field (data-ssla-field-type="link" * fields render as buttons/CTAs with their own styling). */ [data-ssla-field-type="rich"] a[href] { font-weight: 700; color: var(--shell-accent, var(--preset-accent, currentColor)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } [data-ssla-field-type="rich"] a[href]:hover { opacity: 0.85; } /* ─── v3.12.23 — Gravity Forms style unification ────────────────────── * * Closes Glenn 2026-05-21 walk #6: "can we force any form in that * section to conform to our ui styles? font border etc?" * * Pre-v3.12.23 GF rendered with its own native styling regardless of * which SSLA section embedded it — labels in different fonts, inputs * with rounded corners, default submit button colors. The form felt * pasted-in rather than designed-in. * * Fix: scope a minimal style overlay to GF forms rendered INSIDE * sections that carry the ssla-gf-form-{id} wrapper class (emitted by * v3.12.17 resolve_form_picker_value). Targets the common fieldset * surface — labels, inputs, textareas, selects, submit button — and * inherits SSLA design tokens for color/spacing. * * Conservative scope: only paints what an admin would otherwise need * to override via custom CSS. Doesn't touch field validation styling * (GF's red-error state stays), conditional logic, or HTML5 form * widget rendering (native pickers stay native). * * The .ssla-gf-form-{id} wrapper is mandatory for the rules to fire, * so GF forms rendered outside SSLA sections (sidebars, widgets) keep * their native theme styling. */ /* Labels — match section body type. */ [class*="ssla-gf-form-"] .gfield_label { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--shell-h, currentColor); letter-spacing: 0; text-transform: none; margin-bottom: 6px; } /* Required-asterisk styling. */ [class*="ssla-gf-form-"] .gfield_required { color: var(--shell-accent, currentColor); font-weight: 600; } /* Inputs, textareas, selects — flat-edge, SSLA border treatment. */ [class*="ssla-gf-form-"] input[type="text"], [class*="ssla-gf-form-"] input[type="email"], [class*="ssla-gf-form-"] input[type="tel"], [class*="ssla-gf-form-"] input[type="url"], [class*="ssla-gf-form-"] input[type="number"], [class*="ssla-gf-form-"] input[type="password"], [class*="ssla-gf-form-"] input[type="search"], [class*="ssla-gf-form-"] textarea, [class*="ssla-gf-form-"] select { font-family: inherit; font-size: 14px; color: var(--shell-t, #1a1a1a); background: #ffffff; border: 0.5px solid rgba(0, 0, 0, 0.2); border-radius: 0; padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color 120ms ease; } [class*="ssla-gf-form-"] input:focus, [class*="ssla-gf-form-"] textarea:focus, [class*="ssla-gf-form-"] select:focus { outline: none; border-color: var(--shell-accent, #1a1a1a); } [class*="ssla-gf-form-"] textarea { min-height: 120px; line-height: 1.5; resize: vertical; } /* Field spacing. */ [class*="ssla-gf-form-"] .gfield { margin-bottom: 18px; } /* Description text (smaller helper copy under labels). */ [class*="ssla-gf-form-"] .gfield_description { font-size: 12px; color: rgba(0, 0, 0, 0.55); margin-top: 4px; } /* Submit button — picks up the modal's btn_bg / btn_text vars when set, * falls back to shell-accent. Flat edges to match SSLA pattern. The * inline-style scope from resolve_form_picker_value carries the per-form * paint overrides; this rule supplies the base treatment. */ [class*="ssla-gf-form-"] .gform_button, [class*="ssla-gf-form-"] input[type="submit"] { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--ssla-gf-btn-bg, var(--shell-accent, #1a1a1a)); color: var(--ssla-gf-btn-text, #ffffff); border: none; border-radius: 0; padding: 12px 28px; cursor: pointer; transition: opacity 120ms ease; } [class*="ssla-gf-form-"] .gform_button:hover, [class*="ssla-gf-form-"] input[type="submit"]:hover { opacity: 0.88; } /* Validation error state — keep red but flat-edged + smaller text. */ [class*="ssla-gf-form-"] .validation_message { font-size: 12px; color: #c0392b; margin-top: 4px; } [class*="ssla-gf-form-"] .gfield_error input, [class*="ssla-gf-form-"] .gfield_error textarea, [class*="ssla-gf-form-"] .gfield_error select { border-color: #c0392b; } /* ───────────────────────────────────────────────────────────────── * v3.12.24 (#7) — Standard form style unification. * * Mirrors the v3.12.23 Gravity Forms unification pattern for the * baked-in "Standard" form rendered by SSLA_Form_Renderer::standard_form_html. * Pre-v3.12.24 the standard form rendered un-styled with native browser * input/button chrome that didn't match SSLA's flat-edge design language. * * Scope: only paints elements inside .ssla-form-standard so this rule * doesn't affect any other forms that might happen to use .ssla-form. * * Tokens mirror the GF block: --shell-h for labels, --shell-t for body, * --shell-accent for focus + submit. No --ssla-gf-btn-* var hookup — * the Standard form doesn't have per-form picker overrides today; if * we add them later, mirror the GF pattern with --ssla-std-btn-bg vars. */ /* Labels — match section body type. */ .ssla-form-standard label { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--shell-h, currentColor); letter-spacing: 0; text-transform: none; margin-bottom: 6px; display: block; } /* Row spacing. */ .ssla-form-standard .ssla-form-row { margin-bottom: 18px; } /* Inputs, textareas — flat-edge, SSLA border treatment. */ .ssla-form-standard input[type="text"], .ssla-form-standard input[type="email"], .ssla-form-standard input[type="tel"], .ssla-form-standard input[type="url"], .ssla-form-standard textarea { font-family: inherit; font-size: 14px; color: var(--shell-t, #1a1a1a); background: #ffffff; border: 0.5px solid rgba(0, 0, 0, 0.2); border-radius: 0; padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color 120ms ease; } .ssla-form-standard input:focus, .ssla-form-standard textarea:focus { outline: none; border-color: var(--shell-accent, #1a1a1a); } .ssla-form-standard textarea { min-height: 120px; line-height: 1.5; resize: vertical; } /* Submit button — flat edges, SSLA accent. */ .ssla-form-standard .ssla-form-submit { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--shell-accent, #1a1a1a); color: #ffffff; border: none; border-radius: 0; padding: 12px 28px; cursor: pointer; transition: opacity 120ms ease; } .ssla-form-standard .ssla-form-submit:hover { opacity: 0.88; } /* Status messages — success/error. */ .ssla-form-standard .ssla-form-status { font-size: 13px; padding: 12px 14px; margin-bottom: 16px; border-left: 3px solid; } .ssla-form-standard .ssla-form-status-success { border-left-color: #2c7a3a; background: rgba(44, 122, 58, 0.06); color: #1d5028; } .ssla-form-standard .ssla-form-status-error { border-left-color: #c0392b; background: rgba(192, 57, 43, 0.06); color: #7a1f12; } /* ───────────────────────────────────────────────────────────────── * v3.12.24 (#5) — Unified button hover treatment. * * Glenn 2026-05-21 directive: "what if the hover state were to show * the same as the active edit state for all buttons - simple and clean" * * Posture: button hover preserves at-rest paint (no color shift, no * background flip, no text fade). Only tactile change is a small lift * via translateY for affordance. Matches the simplicity of the SSLA * edit-mode treatment — hovering reveals nothing visually shocking. * * Per-section button-hover paint declarations were retired in v3.12.24 * (bin/retire-button-hover-paint.py); originals preserved as commented * reference in each section CSS for future audit if needed. * * Scope: link-type fields AND every button-shape class used catalog-wide. * The selector list mirrors the retire script's BUTTON_PATTERNS. New * button-shape classes must be added here to inherit the lift. */ .ssla-section [data-ssla-field-type="link"]:hover, .ssla-section .btn:hover, .ssla-section [class*="-btn"]:hover, .ssla-section [class*="-cta"]:hover, .ssla-section .ssla-btn:hover, .ssla-section .ssla-tier-cta:hover, .ssla-section .ssla-pct-tier-cta:hover, .ssla-section .ssla-tile-link:hover, .ssla-section .rts-chip:hover, .ssla-section .c3n-link:hover { transform: translateY(var(--paint-hover-lift, -2px)); transition: transform 150ms ease; } /* Disable transform on link affordances inside chrome / overlay UI. */ .ssla-section .ssla-ov-chrome [data-ssla-field-type="link"]:hover, .ssla-section [class*="ssla-ov-"][data-ssla-field-type="link"]:hover { transform: none; } /* ═══ Phase 0.1.f2 — Skeleton state brand block per preset-architecture-v1.md §3.5 ═══ */ /* Loaded first; preset emission overrides via cascade order (§4.2). When no preset is */ /* active, every g-* section's CSS resolves slot tokens through these brand-level */ /* defaults — rendering muted-but-functional. Operators see "vanilla site, needs a */ /* brand preset" — recognizable but unbranded. */ .ssla-section[class*="ssla-g-"] { /* Brand palette — neutral skeleton */ --brand-bg: #ffffff; --brand-bg-deep: #1a1a1a; --brand-fg: #1a1a1a; --brand-fg-inverse: #ffffff; --brand-accent: #888888; /* deliberately muted: this is "no preset" */ --brand-line: #e5e5e5; /* Brand typography */ --brand-heading-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --brand-body-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --brand-heading-weight: 800; --brand-h1-size-clamp: clamp(32px, 5vw, 56px); --brand-h2-size-clamp: clamp(28px, 4vw, 44px); --brand-h3-size: 20px; --brand-body-size: 16px; --brand-body-line-height: 1.6; --brand-eyebrow-size: 13px; --brand-letter-spacing-h1: -1.5px; --brand-letter-spacing-h2: -0.5px; --brand-letter-spacing-eyebrow: 2px; /* Brand spacing + primitives */ --brand-section-padding: 80px; --brand-content-max-width: 1200px; --brand-content-max-width-narrow: 720px; --brand-gutter: 80px; --brand-button-padding: 14px 32px; --brand-button-radius: 0; } /* v3.18.23 / f3.tone — class-form tone_override flip for slot-token sections. * tone_override emits the .ssla-tone-{dark|light} CLASS (block-bridge render() * L330; canvas augmentCanvasRoot mirrors it as of v3.18.23). Every legacy * tone rule keys off that class. Greenfield g-* sections carry NO per-section * .ssla-tone-* rules by design (tone cascade is theme emission, preset- * architecture-v1 §4.2); they resolve text through the --brand-fg slot chain. * This is the no-preset baseline: under an explicit tone override, flip the * brand fg token so heading/body invert. Specificity 0,3,0 beats the skeleton * brand block (0,2,0) regardless of source order. Canvas == FE: same class, * same rule, both surfaces. Accent/CTA tokens are intentionally left (brand * accent reads on either surface); rich per-section tone treatment is f3.preset. */ .ssla-section[class*="ssla-g-"].ssla-tone-dark { --brand-fg: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"].ssla-tone-light { --brand-fg: #1a1a1a; } /* v3.18.24 / f3.tone — heading flip for the tone_override fallback (legacy / * no-variant sections). The block theme colors h1-h6 directly, so an inherited * --brand-fg can't reach them; flip headings explicitly. */ .ssla-section[class*="ssla-g-"].ssla-tone-dark :where(h1,h2,h3,h4,h5,h6) { color: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"].ssla-tone-light :where(h1,h2,h3,h4,h5,h6) { color: #1a1a1a; } /* v3.18.24 / f3.tone — greenfield tone is VARIANT-driven (single Tone control). * Preset emission paints the section's slot tokens per tone value via the * `ssla-{slug}--tone-{value}` class hook. This is the no-preset baseline so * Light/Dark are usable in the lab: Dark = dark surface + light text, Light = * light surface + dark text. Heading elements flipped explicitly (theme colors * them directly, beating inherited --brand-fg). Default tone is 'light', which * resolves identical to the skeleton defaults — zero change at rest. Specificity * 0,2,0 ties the skeleton brand block; this rule is later in source so it wins. * Background paint (data-ssla-bg-color) overrides the surface fill; an active * preset overrides everything via slot emission. */ [class*="ssla-g-"][class*="--tone-dark"] { --brand-bg: #1a1a1a; --brand-fg: var(--brand-fg-inverse, #f7f7f7); } [class*="ssla-g-"][class*="--tone-dark"] :where(h1,h2,h3,h4,h5,h6) { color: var(--brand-fg-inverse, #f7f7f7); } [class*="ssla-g-"][class*="--tone-light"] { --brand-bg: #ffffff; --brand-fg: #1a1a1a; } [class*="ssla-g-"][class*="--tone-light"] :where(h1,h2,h3,h4,h5,h6) { color: #1a1a1a; } /* ═══════════════════════════════════════════════════════════════════════ * v3.18.35 / N2-editor — canvas == FE inter-section spacing. * On the front end SSLA sections butt together (inter-section margin = 0). * The block-editor canvas adds WP's default vertical block spacing, so the * editor didn't match the published page. Zero the default margin for ssla/* * section blocks in the canvas. Scoped to .editor-styles-wrapper, so this is * inert on the FE. No !important: a user-set margin (native Dimensions * control) is applied inline on the block wrapper and still wins. * ═══════════════════════════════════════════════════════════════════════ */ .editor-styles-wrapper [data-type^="ssla/"] { margin-block: 0; } /* ═══ v3.18.36 / .b2 — background video layer ═══ *