/* SimpleSuite Launch — bundled section stylesheet * Generated by bin/build-css.php at 2026-06-10 22:44:00 UTC * Source files: 102 sections from assets/sections/ * DO NOT EDIT — regenerate via `php bin/build-css.php` */ /* ─────── 0-shared ─────── */ /* === 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. v3.19.0 / Band A removed the former greenfield * exclusion here: greenfield now reads ONE surface token --ssla-bg-color in its * OWN section CSS (the tone rule and the picker both write that token), so the * children-paint rule below is harmless on greenfield inners — same colour as * the root in the flat-surface model. */ .ssla-section[data-ssla-bg-color]:not([data-ssla-multi-zone]):not([data-ssla-type^="g-"]) > *:not([class*="ssla-ov-"]):not([data-ssla-chrome]) { background-color: var( --ssla-bg-color, transparent ); } /* v3.19.0 / Band A (Glenn walk 2026-06-02) — former positive greenfield picker rule was gated on the greenfield attribute, absent on the canvas root. Removed: every greenfield root reads --ssla-bg-color in its OWN CSS and the picker writes that var inline on the section, so the picker paints without this rule. */ /* ─── 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.19.0 / Band A — Canonical greenfield tone core (greenfield-core-contract §4, §5.1). * ONE surface token. Tone (data-ssla-variant-tone, written by flipGreenfieldTone) * and the bg-color picker both write --ssla-bg-color; every greenfield root reads it * (§7.1). The paired --ssla-fg-color flips alongside the surface, and --brand-fg is * flipped in the SAME rule so the per-section *-fg slot chains keep inverting and the * theme-colored headings flip explicitly. background-color ONLY so background-image * media survives. Attribute-keyed, specificity 0,3,0 — one rule, every greenfield * section, no per-section surface tone rule. Replaces the three disconnected * namespaces (--g-{slug}-bg / --brand-bg / hardcoded attr paint). */ .ssla-section[class*="ssla-g-"][class*="--tone-dark"], .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="dark"] { --ssla-bg-color: #1a1a1a; --ssla-fg-color: var(--brand-fg-inverse, #f7f7f7); --brand-fg: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"][class*="--tone-light"], .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="light"] { --ssla-bg-color: #ffffff; --ssla-fg-color: #1a1a1a; --brand-fg: #1a1a1a; } .ssla-section[class*="ssla-g-"][class*="--tone-accent"], .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="accent"] { --ssla-bg-color: var(--preset-accent-bg, #f5f3ef); --ssla-fg-color: var(--preset-accent-fg, #1a1a1a); --brand-fg: var(--preset-accent-fg, #1a1a1a); } .ssla-section[class*="ssla-g-"][class*="--tone-dark"] :where(h1,h2,h3,h4,h5,h6), .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="dark"] :where(h1,h2,h3,h4,h5,h6) { color: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"][class*="--tone-light"] :where(h1,h2,h3,h4,h5,h6), .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="light"] :where(h1,h2,h3,h4,h5,h6) { color: #1a1a1a; } .ssla-section[class*="ssla-g-"][class*="--tone-accent"] :where(h1,h2,h3,h4,h5,h6), .ssla-section[class*="ssla-g-"][data-ssla-variant-tone="accent"] :where(h1,h2,h3,h4,h5,h6) { color: var(--preset-accent-fg, #1a1a1a); } /* v3.19.0 walk (Glenn 2026-06-02) — legacy tone_override shim, GATED. The Gutenberg * variant tone (ssla-{slug}--tone-{value}) is the sole authority: this shim only * paints when NO variant tone class is present (:not([class*="--tone-"])), so a stale * tone_override can never override the dropdown. Was the content-split/faq regression. * Original note: greenfield sections saved before * v3.18.64 stored tone in the legacy tone_override field, which the bridge still emits * as the .ssla-tone-{value} CLASS. Map that class to the SAME canonical tokens so those * sections paint identically; the next tone flip rewrites them to variants.tone and the * attribute rule above takes over. No data migration, no backend change. There is NO * greenfield tone_override SAVE path — flipGreenfieldTone routes g-* to variants.tone. */ .ssla-section[class*="ssla-g-"]:not([class*="--tone-"]).ssla-tone-dark { --ssla-bg-color: #1a1a1a; --ssla-fg-color: var(--brand-fg-inverse, #f7f7f7); --brand-fg: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"]:not([class*="--tone-"]).ssla-tone-light { --ssla-bg-color: #ffffff; --ssla-fg-color: #1a1a1a; --brand-fg: #1a1a1a; } .ssla-section[class*="ssla-g-"]:not([class*="--tone-"]).ssla-tone-dark :where(h1,h2,h3,h4,h5,h6) { color: var(--brand-fg-inverse, #f7f7f7); } .ssla-section[class*="ssla-g-"]:not([class*="--tone-"]).ssla-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 ═══ *

/

/

still allocated vertical space equal to its line-height × font-size, producing a giant white gap between the eyebrow and whatever followed. Real-world example: RSD home hero authored eyebrow + cta_1 + cta_2 but no heading; result was eyebrow → 200px void → image. This collapses empty headings cleanly. Targets the heading's :empty state OR a state where it contains only whitespace + br tags (rich-text "empty" produces
or

from most editors). The :has() check is broadly supported in modern browsers. ──────────────────────────────────────────────────────────────────────── */ .ssla-h1:empty, .ssla-h2:empty, .ssla-h2-large:empty{ display: none; } /* Catch rich-text "empty" that isn't strictly :empty — e.g.


or

. Browsers that support :has() collapse these too. */ .ssla-h1:has(> br:only-child:empty:first-child), .ssla-h2:has(> br:only-child:empty:first-child), .ssla-h2-large:has(> br:only-child:empty:first-child){ display: none; } /* Same treatment for descriptions / lede / body when empty */ .ssla-lede:empty{ display: none; } /* ─── v3.5.85 — Empty image collapse ───────────────────────────────────────── Images with empty src render as broken-image glyphs in most browsers. Block_Bridge::substitute_tokens trims whitespace-only image values to empty string in v3.5.85; this CSS hides the resulting elements so they don't take up layout space. Applies to images authored with data-ssla-field-type="image" — the selector is specific enough to not catch legitimate elements that happen to have empty src during loading. ──────────────────────────────────────────────────────────────────────── */ img[data-ssla-field-type="image"][src=""], img[data-ssla-field-type="image"]:not([src]){ display: none; } /* For showcase-large specifically: when the image is empty, the placeholder slot still needs to be visible to the AUTHOR in overlay edit mode (so they can click to add an image). The overlay editor JS already handles empty-state affordances via the v3.5.83 image pill. On the FE (no overlay class), images are simply hidden as above. */ body.ssla-ov-active img[data-ssla-field-type="image"][src=""], body.ssla-ov-active img[data-ssla-field-type="image"]:not([src]){ display: block; min-height: 240px; background: repeating-linear-gradient( 45deg, rgba(45,42,38,0.04), rgba(45,42,38,0.04) 8px, rgba(45,42,38,0.07) 8px, rgba(45,42,38,0.07) 16px ); border: 1px dashed var(--shell-hairline-strong, rgba(45,42,38,0.20)); } /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── .ssla-text-link is a shared inline-link treatment used as the secondary-CTA pattern across feature-split-2 and pricing-simple. Templates emit it; manifests declare it; no rule existed until now. */ .ssla-text-link{ display: inline-block; color: var(--shell-accent); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .ssla-text-link:hover{ color: var(--shell-accent-strong); } [data-ssla-variant-tone="dark"] .ssla-text-link{ color: var(--shell-accent); } [data-ssla-variant-tone="dark"] .ssla-text-link:hover{ color: var(--shell-accent-hover); } /* ─────── about-bio ─────── */ /* === about-bio === */ /* v3.12.25 — Token compliance pass. Glenn 2026-05-21 walk: "about bio * has hard coded font sizes that do not conform to the site wise * design." Pre-v3.12.25 used literal rem values (0.58rem, 2.2rem, * 1.7rem, 0.85rem, 0.62rem, 0.82rem) that ignored preset paint tokens. * Now consumes --paint-*-size + --paint-eyebrow-* tokens with the * original literals as fallbacks — preserves visual continuity for * pages without preset paint, and inherits canonical sizing when * preset is active. */ .sab-outer{padding:100px 48px} .sab-header{text-align:center;margin-bottom:64px} .sab-label{font-size:var(--paint-eyebrow-size, .58rem);font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent));margin-bottom:16px} .sab-header h2{font-family:var(--shell-hf);font-size:var(--paint-h2-size, 2.2rem);font-weight:var(--paint-heading-weight,600);color:var(--shell-h)} .sab-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:320px 1fr;gap:64px;align-items:start} .sab-photo-wrap{position:relative;width:100%;height:420px;overflow:hidden} .sab-photo{width:100%;height:100%;object-fit:cover} .sab-photo[src=""]{display:none} .sab-photo-wrap:not(:has(img[src]:not([src=""])))::after{content:"Add Photo";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--shell-card,rgba(255,255,255,.03));border:1px dashed var(--shell-line,rgba(0,0,0,.1));color:var(--shell-m);font-size:.7rem;font-weight:600;letter-spacing:1px;text-transform:uppercase} .sab-photo-overlay{position:absolute;bottom:0;left:0;right:0;padding:20px 24px;background:linear-gradient(to top,rgba(15,43,76,.85),transparent)} .sab-photo-overlay span{font-size:var(--paint-eyebrow-size, .58rem);font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,1.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent))} .sab-photo[src=""]~.sab-photo-overlay{display:none} .sab-body h3{font-family:var(--shell-hf);font-size:var(--paint-h3-size, 1.7rem);font-weight:var(--paint-heading-weight,600);color:var(--shell-h);margin-bottom:4px} .sab-role{font-size:var(--paint-eyebrow-size, .62rem);font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,1px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent));margin-bottom:28px} .sab-text p{font-size:var(--paint-body-size, .85rem);line-height:var(--paint-body-line-height, 1.85);color:var(--shell-t);margin-bottom:16px} .sab-callout{margin-top:24px;padding:24px;background:rgba(var(--sc,184),var(--sc,146),var(--sc,47),.06);border-left:3px solid var(--sc,var(--shell-accent))} .sab-callout p{font-size:var(--paint-body-size, .82rem);font-style:italic;color:var(--shell-h);margin:0;line-height:var(--paint-body-line-height, 1.7)} .sab-callout:has(p:empty){display:none} @media(max-width:768px){.sab-outer{padding:60px 24px}.sab-grid{grid-template-columns:1fr;gap:32px}.sab-photo-wrap{height:300px}} /* ─────── bio-full ─────── */ /* === bio-full === */ /* ── RSC About ── */ /* v3.11.0 Phase 1: Bar 2 bg_color resolution chain, Bar 3 typography token consumption */ .ssla-section[data-ssla-type="bio-full"]{padding:var(--paint-section-padding,100px) 0;background-color:var(--ssla-bg-color, var(--sc, var(--shell-bg-warm,#F3EDE4)))} .rab-layout{display:grid;grid-template-columns:300px 1fr;grid-template-areas:"heading heading" "photo content";gap:40px 72px;align-items:start} .rab-heading-row{grid-area:heading} .rab-photo-wrap{grid-area:photo} .rab-content{grid-area:content} .rab-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px} .rab-photo[src=""]{display:none} .rab-heading-row h2{font-size:var(--paint-h2-size, 36px);font-weight:800;margin-bottom:0;color:var(--shell-h,currentColor)} .rab-content p{font-size:var(--paint-body-size, 16px);color:var(--shell-m,#6b7280);line-height:var(--paint-body-line-height, 1.85);margin-bottom:14px} .rab-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px} .rab-tag{padding:7px 16px;background:var(--shell-bg-warm,#FAF7F2);border:1px solid var(--shell-line,rgba(0,0,0,0.1));border-radius:100px;font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,11.5px);font-weight:600;color:var(--shell-m,#6b7280);transition:all 0.3s} /* v3.12.25 — false-positive correction. v3.12.24 #5 retired this hover * via the button-pattern script (.rab-tag matched the -tag selector). * But .rab-tag is a tag/label affordance, not a button — its hover * accent paint is intentional UX. Glenn 2026-05-21 walk: "no hover no * link just plain text." Restoring the v3.12.23 paint. */ .rab-tag:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)} .rab-tag:empty{display:none} @media(max-width:900px){.rab-layout{grid-template-columns:1fr;grid-template-areas:"heading" "photo" "content";gap:32px}} /* ─────── cards-2-path ─────── */ /* === cards-2-path === */ .c2p{width:100%;background:var(--ssla-bg-color, transparent)} .c2p-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px} .c2p-eyebrow{text-align:center;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} .c2p-heading{text-align:center;font-size:var(--paint-h2-size, 36px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 16px;letter-spacing:var(--paint-heading-letter-spacing-h2,-1px);text-transform:var(--paint-heading-case-h2,none)} .c2p-desc{text-align:center;font-size:var(--paint-body-size, 16px);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height, 1.7);margin:0 0 48px} .c2p-desc p{margin:0} .c2p-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px} .c2p-card{border:1px solid var(--shell-line,rgba(0,0,0,0.1));border-top:4px solid var(--cc);padding:40px 32px} .c2p-badge{font-size:10px;font-weight:var(--paint-eyebrow-weight,800);letter-spacing:var(--paint-eyebrow-letter-spacing,2.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--cc);margin:0 0 16px} .c2p-card h3{font-size:var(--paint-h3-size, 24px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 8px;letter-spacing:var(--paint-heading-letter-spacing-h3,normal);text-transform:var(--paint-heading-case-h3,none)} .c2p-tagline{font-size:14px;color:var(--shell-m,#6b7280);font-style:italic;margin:0 0 20px} .c2p-body{font-size:14px;color:var(--shell-t,#1a1a1a);line-height:1.75;margin-bottom:28px} .c2p-body p{margin:0} .c2p-cta{display:inline-block;background:var(--cc);color:#fff!important;padding:14px 32px;font-size:var(--paint-button-size, 12px);font-weight:700;letter-spacing:1.5px;text-decoration:none!important;text-transform:uppercase;border-radius:var(--paint-button-radius,0);transition:all var(--paint-motion-timing,.3s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .c2p-cta:hover{filter:brightness(.9);transform:translateY(var(--paint-hover-lift,-2px))} */ .c2p-cta:hover{/* paint retired; global rule provides lift */} .c2p-cta:empty{display:none} @media(max-width:768px){.c2p-grid{grid-template-columns:1fr}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .c2p-heading{color: #ffffff} .ssla-tone-dark .c2p-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .c2p-card h3{color: #ffffff} .ssla-tone-dark .c2p-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .c2p-heading{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c2p-desc{color: var(--shell-t, #1a1a1a)} .ssla-tone-light .c2p-card h3{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c2p-body{color: var(--shell-t, #1a1a1a)} /* ─────── cards-3-accent ─────── */ /* === cards-3-accent === */ /* ── RSC ASK System ── */ .ssla-section[data-ssla-type="cards-3-accent"]{padding:100px 0;background:var(--ssla-bg-color, var(--shell-bg-dark,#2A2520));color:var(--shell-text-inverted,#F3EDE4);position:relative;overflow:hidden} .rask-texture{position:absolute!important;z-index:0!important;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none} .rask-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;position:relative;z-index:2} .rask-card{background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:40px 32px;transition:all 0.4s} .rask-card:hover{background:rgba(255,255,255,0.06);transform:translateY(-4px);border-color:rgba(255,255,255,0.12)} .rask-bar{width:32px;height:3px;margin-bottom:24px;border-radius:2px} .rask-bar-align{background:var(--shell-accent-2,#C4703A)} .rask-bar-shift{background:var(--shell-accent-3,#5C7A94)} .rask-bar-keep{background:var(--shell-accent-3,#6B8F5E)} .rask-card-label{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px} .rask-label-align{color:var(--shell-accent-2,#C4703A)} .rask-label-shift{color:var(--shell-accent-3,#5C7A94)} .rask-label-keep{color:var(--shell-accent-3,#6B8F5E)} .rask-card h3{font-size:var(--paint-h3-size, 20px);font-weight:700;color:var(--shell-text-inverted,#F3EDE4);margin-bottom:12px} .rask-card p{font-size:var(--paint-body-size, 14.5px);color:var(--shell-m,#B5AAA0);line-height:var(--paint-body-line-height, 1.75)} .rask-domains{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;position:relative;z-index:2} .rask-domain{padding:9px 20px;border-radius:100px;background:rgba(0,0,0,0.2);border:1px solid rgba(0,0,0,0.35);font-family:"Montserrat",sans-serif;font-size:12.5px;font-weight:600;color:var(--shell-text-inverted,#E8A0A0)} .rask-domain:empty{display:none} .rask-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px;position:relative;z-index:2} @media(max-width:768px){.rask-cards{grid-template-columns:1fr}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .rask-card h3{color: var(--shell-text-inverted, #F3EDE4)} .ssla-tone-dark .rask-card p{color: var(--shell-m, #B5AAA0)} .ssla-tone-light[data-ssla-type="cards-3-accent"]{color: var(--shell-h, #1a1d21)} .ssla-tone-light .rask-card{background: #ffffff} .ssla-tone-light .rask-card h3{color: var(--shell-h, #1a1d21)} .ssla-tone-light .rask-card p{color: var(--shell-t, #4a5568)} /* ─────── cards-3-dark ─────── */ /* === cards-3-dark === */ /* ── Cards 3 Dark ── */ .ssla-section[data-ssla-type="cards-3-dark"]{background:linear-gradient(135deg,var(--shell-bg-dark-cool,#0f1b2e) 0%,var(--shell-bg-dark-cool-end,#1a2a45) 100%);padding:var(--paint-section-padding,100px) 48px;position:relative;overflow:hidden} .ssla-section[data-ssla-type="cards-3-dark"]::before{content:"";position:absolute;top:-30%;right:-15%;width:600px;height:600px;background:radial-gradient(circle,rgba(226,160,63,0.06) 0%,transparent 60%);border-radius:50%;pointer-events:none} .c3d-inner{max-width:1140px;margin:0 auto;position:relative;z-index:2} .c3d-center{text-align:center} .c3d-label{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,11px);font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 12px} .c3d-heading{font-family:var(--shell-hf,"Montserrat",sans-serif);font-size:var(--paint-h2-size,36px);font-weight:var(--paint-heading-weight,800);color:var(--shell-bg,#fff);line-height:1.15;letter-spacing:-0.8px;margin:0 0 16px} .c3d-desc{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-body-size,16px);color:var(--shell-m,#7a98b5);line-height:var(--paint-body-line-height,1.7);margin:0 auto 60px;max-width:560px} .c3d-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .c3d-card{padding:48px 36px;border-right:1px solid var(--shell-line,rgba(255,255,255,0.08));text-align:left} .c3d-card:last-child{border-right:none} .c3d-badge{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,11px);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin-bottom:16px} .c3d-card h3{font-family:var(--shell-hf,"Montserrat",sans-serif);font-size:var(--paint-h3-size,22px);font-weight:700;color:var(--shell-bg,#fff);margin:0 0 14px} .c3d-card p{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-body-size,14.5px);color:var(--shell-m,#7a98b5);line-height:var(--paint-body-line-height,1.7);margin:0 0 20px} .c3d-price{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-body-size,14px);font-weight:700;color:var(--shell-accent,currentColor);margin-bottom:24px} .c3d-btn{display:inline-block;background:var(--shell-accent,currentColor);color:var(--shell-bg,#fff);padding:14px 32px;font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-button-size,13px);font-weight:700;letter-spacing:1px;text-decoration:none;text-transform:uppercase;transition:all 0.25s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .c3d-btn:hover{filter:brightness(0.9);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.2)} */ .c3d-btn:hover{/* paint retired; global rule provides lift */} @media(max-width:900px){.c3d-grid{grid-template-columns:1fr}.c3d-card{border-right:none;border-bottom:1px solid var(--shell-line,rgba(255,255,255,0.08))}.c3d-card:last-child{border-bottom:none}} @media(max-width:640px){.ssla-section[data-ssla-type="cards-3-dark"]{padding:var(--paint-section-padding-mobile,72px) 24px}} /* ─────── cards-3-icon ─────── */ /* === cards-3-icon === */ .c3ic{width:100%;background:var(--ssla-bg-color, transparent)} .c3ic-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px} .c3ic-eyebrow{text-align:center;font-size:var(--paint-eyebrow-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} .c3ic-heading{text-align:center;font-size:var(--paint-h2-size, 36px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 16px;letter-spacing:var(--paint-heading-letter-spacing-h2,-1px);text-transform:var(--paint-heading-case-h2,none)} .c3ic-desc{text-align:center;font-size:var(--paint-body-size, 16px);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height, 1.7);margin:0 0 64px} .c3ic-desc p{margin:0} .c3ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .c3ic-card{border:1px solid var(--shell-line,rgba(0,0,0,0.1));padding:36px 28px;transition:all var(--paint-motion-timing,.35s)} .c3ic-card:hover{transform:translateY(var(--paint-hover-lift,-3px));box-shadow:0 8px 24px rgba(0,0,0,.06)} .c3ic-icon{font-size:36px;font-weight:900;color:var(--cc);margin:0 0 16px;line-height:1} .c3ic-card h3{font-size:var(--paint-h3-size, 18px);font-weight:var(--paint-heading-weight,700);color:var(--shell-h,currentColor);margin:0 0 12px;line-height:1.3;letter-spacing:var(--paint-heading-letter-spacing-h3,normal);text-transform:var(--paint-heading-case-h3,none)} .c3ic-body{font-size:14px;color:var(--shell-t,#1a1a1a);line-height:1.75} .c3ic-body p{margin:0} @media(max-width:768px){.c3ic-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .c3ic-heading{color: #ffffff} .ssla-tone-dark .c3ic-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .c3ic-card h3{color: #ffffff} .ssla-tone-dark .c3ic-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .c3ic-heading{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3ic-desc{color: var(--shell-t, #1a1a1a)} .ssla-tone-light .c3ic-card h3{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3ic-body{color: var(--shell-t, #1a1a1a)} /* ─────── cards-3-index ─────── */ /* === cards-3-index === */ .c3i{width:100%;position:relative;overflow:hidden;background:var(--ssla-bg-color, var(--shell-bg-dark, #1F2937))} .c3i-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .c3i-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px} .c3i-eyebrow::before{content:"";width:28px;height:2px;background:var(--shell-accent,currentColor)} .c3i-eyebrow span{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)} .c3i h2{font-size:var(--paint-h2-size, 32px);font-weight:var(--paint-heading-weight,800);color:#fff;line-height:1.15;letter-spacing:var(--paint-heading-letter-spacing-h2,-1px);text-transform:var(--paint-heading-case-h2,none);margin:0 0 20px} .c3i-desc{font-size:var(--paint-body-size, 15px);color:rgba(255,255,255,.55);line-height:var(--paint-body-line-height, 1.8);margin:0 0 28px} .c3i-desc p{margin:0} .c3i-cta{display:inline-block;background:var(--paint-button-primary-fill,var(--shell-accent,currentColor));color:var(--paint-button-primary-text,#fff)!important;padding:16px 38px;font-size:var(--paint-button-size, 13px);font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;border-radius:var(--paint-button-radius,0);transition:all var(--paint-motion-timing,.3s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .c3i-cta:hover{filter:brightness(.9);transform:translateY(var(--paint-hover-lift,-2px))} */ .c3i-cta:hover{/* paint retired; global rule provides lift */} .c3i-cta:empty{display:none} .c3i-cards{display:grid;gap:12px} .c3i-card{display:flex;align-items:center;gap:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:20px 24px;transition:all var(--paint-motion-timing,.3s)} .c3i-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} .c3i-dot{width:10px;height:10px;flex-shrink:0} /* v3.12.18 — Card name is now an anchor (.c3i-card-link) instead of *

. Per Glenn 2026-05-21 walk: "objects in the boxes need to be * linkable." Style mirrors the prior h4 visual (size, weight, color, * flex sizing, letter-spacing/case tokens) plus link-specific rules: * remove default underline; add subtle hover affordance. * * The legacy .c3i-card h4 rule is retained for back-compat with * pre-v3.12.18 saved pages that still emit

. */ .c3i-card h4, .c3i-card-link{font-size:14px;font-weight:var(--paint-heading-weight,700);color:#fff;margin:0;flex:1;letter-spacing:var(--paint-heading-letter-spacing-h4,normal);text-transform:var(--paint-heading-case-h4,none);text-decoration:none} .c3i-card-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .c3i-price{font-size:13px;font-weight:600;color:var(--shell-accent,currentColor);white-space:nowrap} @media(max-width:768px){.c3i-inner{grid-template-columns:1fr}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .c3i h2{color: #ffffff} .ssla-tone-dark .c3i-desc{color: rgba(255, 255, 255, 0.55)} .ssla-tone-dark .c3i-card h4, .ssla-tone-dark .c3i-card-link{color: #ffffff} .ssla-tone-light .c3i h2{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3i-desc{color: var(--shell-t, #4a5568)} .ssla-tone-light .c3i-card{background: #ffffff; border-color: rgba(0, 0, 0, 0.08)} .ssla-tone-light .c3i-card h4, .ssla-tone-light .c3i-card-link{color: var(--shell-h, #1a1d21)} /* ─────── cards-3-numbered ─────── */ /* === cards-3-numbered === */ .c3n{width:100%;background:var(--ssla-bg-color, transparent)} .c3n-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px} /* .c3n-eyebrow scope retained for layout (margin) — appearance handled by shared .ssla-eyebrow */ .c3n-eyebrow{display:inline-flex;margin:0 auto 16px} .c3n-heading{text-align:center;font-size:var(--paint-h2-size, 36px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 16px;letter-spacing:var(--paint-heading-letter-spacing-h2,-1px);text-transform:var(--paint-heading-case-h2,none)} .c3n-desc{text-align:center;font-size:var(--paint-body-size, 16px);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height, 1.7);margin:0 0 64px} .c3n-desc p{margin:0} .c3n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .c3n-card{border:1px solid var(--shell-line,rgba(0,0,0,0.1));overflow:hidden;transition:all var(--paint-motion-timing,.35s)} .c3n-card:hover{transform:translateY(var(--paint-hover-lift,-4px));box-shadow:0 12px 40px rgba(0,0,0,.08);border-color:var(--shell-line,rgba(0,0,0,0.1))} .c3n-card-top{padding:36px 32px 0} .c3n-num{font-size:48px;font-weight:900;line-height:1;letter-spacing:-2px;color:var(--cc);margin:0 0 16px} .c3n-card h3{font-size:var(--paint-h3-size, 20px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 12px;letter-spacing:var(--paint-heading-letter-spacing-h3,normal);text-transform:var(--paint-heading-case-h3,none)} .c3n-card-body{font-size:14px;color:var(--shell-t,#1a1a1a);line-height:1.75;padding:0 32px 32px} .c3n-card-body p{margin:0} .c3n-link{display:flex;align-items:center;gap:8px;padding:16px 32px;border-top:1px solid var(--shell-line,rgba(0,0,0,0.1));font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none!important;color:var(--cc)!important;transition:all var(--paint-motion-timing,.2s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .c3n-link:hover{padding-left:40px;background:var(--shell-card,transparent)} */ .c3n-link:hover{/* paint retired; global rule provides lift */} .c3n-link svg{width:14px;height:14px;transition:transform var(--paint-motion-timing,.2s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .c3n-link:hover svg{transform:translateX(4px)} */ .c3n-link:hover svg{/* paint retired; global rule provides lift */} .c3n-link:empty{display:none} @media(max-width:768px){.c3n-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .c3n-heading{color: #ffffff} .ssla-tone-dark .c3n-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .c3n-card h3{color: #ffffff} .ssla-tone-dark .c3n-card-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .c3n-heading{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3n-desc{color: var(--shell-t, #1a1a1a)} .ssla-tone-light .c3n-card h3{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3n-card-body{color: var(--shell-t, #1a1a1a)} /* ─────── cards-3-testimonial ─────── */ /* === cards-3-testimonial === */ .c3tm{width:100%} .c3tm-inner{max-width:1000px;margin:0 auto;padding:100px 48px} .c3tm-eyebrow{text-align:center;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 16px} .c3tm-heading{text-align:center;font-size:36px;font-weight:800;color:var(--shell-h,currentColor);margin:0 0 48px;letter-spacing:-1px} .c3tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .c3tm-card{background:#fff;border:1px solid var(--shell-line,rgba(0,0,0,0.1));padding:32px 28px} .c3tm-card blockquote{font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.75;margin:0 0 20px;font-style:italic;border:none;padding:0} .c3tm-card blockquote p{margin:0} .c3tm-author{font-size:14px;font-weight:700;color:var(--shell-h,currentColor);margin:0 0 4px} .c3tm-role{font-size:12px;color:var(--shell-m,#6b7280);margin:0} @media(max-width:768px){.c3tm-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}} /* ─────── cards-3-tier ─────── */ /* === cards-3-tier === * Centered eyebrow + heading + desc, then 3 cards with accent stripe. * Per-card color via --cc field (inline style). * * @updated 3.5.54 — accent stripe top-border, tightened typography, shared eyebrow */ .c3t { width: 100%; background: var(--ssla-bg-color, transparent); } .c3t-inner { max-width: 980px; margin: 0 auto; padding: var(--paint-section-padding, 100px) 48px; text-align: center; } /* Eyebrow handled by shared .ssla-eyebrow.is-centered. * Center the inline-flex container itself within the centered text. */ .c3t-eyebrow { display: inline-flex; margin: 0 auto 16px; } .c3t-heading { font-size: var(--paint-h2-size, clamp(28px, 3.6vw, 38px)); font-weight: var(--paint-heading-weight, 800); color: var(--shell-h, var(--preset-primary, currentColor)); margin: 0 0 16px; letter-spacing: var(--paint-heading-letter-spacing-h2, -1px); text-transform: var(--paint-heading-case-h2, none); line-height: 1.15; } .c3t-desc { font-size: var(--paint-body-size, 16px); color: var(--shell-t, var(--preset-text-body, #4a5568)); line-height: var(--paint-body-line-height, 1.7); margin: 0 auto 56px; max-width: 640px; } .c3t-desc p { margin: 0; } .c3t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; } .c3t-card { background: #fff; border: 1px solid var(--shell-line, var(--preset-hairline, rgba(0, 0, 0, 0.08))); border-top: 3px solid var(--cc, var(--shell-accent, var(--preset-accent, currentColor))); padding: 36px 30px; transition: all var(--paint-motion-timing, 0.35s); } .c3t-card:hover { transform: translateY(var(--paint-hover-lift, -3px)); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); } .c3t-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cc, var(--shell-accent, currentColor)); margin: 0 0 12px; } .c3t-card h3 { font-size: var(--paint-h3-size, 22px); font-weight: var(--paint-heading-weight, 800); color: var(--shell-h, var(--preset-primary, currentColor)); margin: 0 0 6px; letter-spacing: -0.3px; line-height: 1.2; } .c3t-sub { font-size: 14px; color: var(--shell-m, var(--preset-text-muted, #8896a4)); margin: 0 0 16px; font-weight: 600; } .c3t-body { font-size: 14px; color: var(--shell-t, var(--preset-text-body, #4a5568)); line-height: 1.7; } .c3t-body p { margin: 0 0 0.6em; } .c3t-body p:last-child { margin-bottom: 0; } .c3t-body ul { margin: 0; padding-left: 18px; } .c3t-body li { margin-bottom: 4px; } @media (max-width: 768px) { .c3t-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } .c3t-inner { padding: 64px 24px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .c3t-heading{color: #ffffff} .ssla-tone-dark .c3t-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .c3t-card{background: rgba(255, 255, 255, 0.04)} .ssla-tone-dark .c3t-card h3{color: #ffffff} .ssla-tone-dark .c3t-sub{color: rgba(255, 255, 255, 0.7)} .ssla-tone-dark .c3t-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .c3t-heading{color: var(--shell-h, #1a1d21)} .ssla-tone-light .c3t-desc{color: var(--shell-t, #4a5568)} .ssla-tone-light .c3t-card{background: #ffffff} .ssla-tone-light .c3t-card h3{color: var(--shell-h, #1a1d21)} /* ─────── cards-4-domain ─────── */ /* === cards-4-domain === * 2-col header (text + side image) + 4-card grid. * Per-card color via --cc CSS var (set by inline style on card from c{n}_color field). * * @updated 3.5.54 — shared eyebrow, --cc-driven cards, hover lift, dark variant */ .c4d { width: 100%; } .c4d-inner { max-width: 1100px; margin: 0 auto; padding: var(--paint-section-padding, 100px) 48px; } /* Header (text + side image) */ .c4d-header { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 56px; } .c4d-eyebrow { margin: 0 0 12px; } .c4d h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: var(--paint-heading-weight, 800); color: var(--shell-h, var(--preset-primary, currentColor)); margin: 0 0 16px; letter-spacing: var(--paint-heading-letter-spacing-h2, -1px); text-transform: var(--paint-heading-case-h2, none); line-height: 1.15; } .c4d-desc { font-size: 16px; color: var(--shell-t, var(--preset-text-body, #4a5568)); line-height: 1.7; } .c4d-desc p { margin: 0 0 0.6em; } .c4d-desc p:last-child { margin-bottom: 0; } .c4d-header-img img { width: 100%; height: auto; display: block; } .c4d-header-img img[src=""] { display: none; } /* Hide the entire side image column when no image set, give text full width. */ .c4d-header:not(:has(.c4d-header-img img[src]:not([src=""]))) { grid-template-columns: 1fr; } .c4d-header:not(:has(.c4d-header-img img[src]:not([src=""]))) .c4d-header-img { display: none; } /* Card grid */ .c4d-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .c4d-card { background: var(--shell-card, #fff); border: 1px solid var(--shell-line, var(--preset-hairline, rgba(0, 0, 0, 0.08))); border-top: 3px solid var(--cc, var(--shell-accent, currentColor)); padding: 28px 24px; transition: all var(--paint-motion-timing, 0.3s); } .c4d-card:hover { transform: translateY(var(--paint-hover-lift, -3px)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05); } .c4d-card h4 { font-size: 16px; font-weight: var(--paint-heading-weight, 800); letter-spacing: var(--paint-heading-letter-spacing-h4, -0.2px); text-transform: var(--paint-heading-case-h4, none); color: var(--cc, var(--shell-h, currentColor)); margin: 0 0 10px; line-height: 1.3; } .c4d-card-body { font-size: 13.5px; color: var(--shell-t, var(--preset-text-body, #4a5568)); line-height: 1.7; } .c4d-card-body p { margin: 0; } /* Tone variant: dark — for use when section sits adjacent to a dark hero */ .ssla-cards-4-domain--tone-dark .c4d { background: var(--shell-bg-dark-cool, var(--preset-primary-dark, #1a2a45)); color: #fff; } .ssla-cards-4-domain--tone-dark .c4d h2 { color: #fff; } .ssla-cards-4-domain--tone-dark .c4d-desc { color: rgba(255, 255, 255, 0.78); } .ssla-cards-4-domain--tone-dark .c4d-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } .ssla-cards-4-domain--tone-dark .c4d-card-body { color: rgba(255, 255, 255, 0.7); } @media (max-width: 960px) { .c4d-header { grid-template-columns: 1fr; gap: 32px; } .c4d-grid { grid-template-columns: repeat(2, 1fr); } .c4d-inner { padding: 64px 24px; } } @media (max-width: 600px) { .c4d-grid { grid-template-columns: 1fr; } } /* ─────── cards-4-feature ─────── */ /* === cards-4-feature === */ .c4f{width:100%} .c4f-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px} .c4f-eyebrow{text-align:center;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} .c4f h2{text-align:center;font-size:36px;font-weight:var(--paint-heading-weight,800);letter-spacing:var(--paint-heading-letter-spacing-h2,-.8px);text-transform:var(--paint-heading-case-h2,none);color:#fff;margin:0 0 16px} .c4f-desc{text-align:center;font-size:16px;color:rgba(255,255,255,.6);line-height:1.7;margin:0 0 64px} .c4f-desc p{margin:0} .c4f-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px} .c4f-item{border:1px solid rgba(255,255,255,.1);padding:32px 28px} .c4f-item h4{font-size:16px;font-weight:var(--paint-heading-weight,700);letter-spacing:var(--paint-heading-letter-spacing-h4,normal);text-transform:var(--paint-heading-case-h4,none);color:#fff;margin:0 0 12px} .c4f-body{font-size:14px;color:rgba(255,255,255,.55);line-height:1.7} .c4f-body p{margin:0} @media(max-width:600px){.c4f-grid{grid-template-columns:1fr}} /* ─────── columns-3 ─────── */ /* === columns-3 === */ .sc3-inner{padding:100px 48px} .sc3-inner h2{font-family:var(--shell-hf);font-size:2.3rem;font-weight:700;color:var(--shell-h,#1A1D21);margin-bottom:8px} .sc3-sub{font-size:.82rem;color:var(--shell-m,#4a5568);margin-bottom:48px;max-width:500px} .sc3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--shell-line,rgba(255,255,255,.06))} .sc3-card{background:var(--shell-bg);padding:44px 32px} .sc3-label{font-size:.52rem;letter-spacing:3px;color:var(--sc,var(--shell-accent));font-weight:700;text-transform:uppercase;margin-bottom:14px} .sc3-card h3{font-family:var(--shell-hf);font-size:1.4rem;color:var(--shell-h,#1A1D21);margin-bottom:10px;font-weight:600} .sc3-card p{font-size:.8rem;color:var(--shell-m,#4a5568)} @media(max-width:768px){.sc3-inner{padding:60px 24px}.sc3-grid{grid-template-columns:1fr}} /* ─────── columns-4 ─────── */ /* === columns-4 === */ .sc4-inner{padding:100px 48px;max-width:1100px;margin:0 auto} .sc4-inner h2{font-family:var(--shell-hf);font-size:2rem;font-weight:700;color:var(--shell-h);margin-bottom:8px} .sc4-sub{font-size:.82rem;color:var(--shell-m);margin-bottom:40px} .sc4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .sc4-card{padding:28px 24px;border:1px solid var(--shell-line,rgba(255,255,255,.06));background:var(--shell-card,rgba(255,255,255,.02));transition:.3s} .sc4-card:hover{border-color:var(--sc,var(--shell-accent));transform:translateY(-2px)} .sc4-card h3{font-size:.88rem;font-weight:700;color:var(--shell-h);margin-bottom:8px} .sc4-card p{font-size:.78rem;color:var(--shell-m)} @media(max-width:768px){.sc4-inner{padding:60px 24px}.sc4-grid{grid-template-columns:1fr 1fr}@media(max-width:480px){.sc4-grid{grid-template-columns:1fr}}} /* ─────── columns-icon-row ─────── */ /* === columns-icon-row === */ .sir-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--shell-line,rgba(255,255,255,.06));padding:0} .sir-item{background:var(--shell-bg);padding:40px 20px;text-align:center} .sir-val{font-family:var(--shell-hf);font-size:2.4rem;font-weight:700;color:var(--sc,var(--shell-accent));line-height:1} .sir-lbl{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--shell-m);margin-top:8px;font-weight:600} @media(max-width:768px){.sir-inner{grid-template-columns:1fr 1fr}} /* ─────── consulting-cta ─────── */ /* === consulting-cta === */ /* v3.12.14 — Live paint contract. * Pre-v3.12.14 the section's HTML carried an inline * `style="background:{{bg_color}};"` on the inner wrapper, which won * over the section-root paint that 0-shared.css applies via * --ssla-bg-color. The picker's live-preview setProperty wrote the * var on the section root but the inner inline style covered it, so * the live preview never updated. Save still persisted (next render * substituted the new {{bg_color}} token), so the change appeared * after a reload — but the live editing affordance was effectively * broken on this section. * * Fix: strip the inline bg style from the inner wrapper. Read the * paint signal from the section root's --ssla-bg-color custom * property (set by render AND by picker live-preview) with a * three-tier fallback that matches the cta-banner pattern shipped * in v3.10.02. * * Three-tier resolution: * 1. --ssla-bg-color set by picker → wins (admin override) * 2. --sc (preset section-color override) → preset palette slot * 3. --shell-bg-brand → preset brand surface, falls through to * --shell-accent if brand surface unset * * The 0-shared `section[data-ssla-bg-color]` rule already paints the * section root in the same cascade; the inner-wrapper rule below * makes the visible surface (the one with padding) inherit that * paint via direct read instead of relying on bg transparency. Both * the section root and the inner wrapper paint the same color so * there's no z-stacking visual artifact. */ .consulting-cta-wrap { background: var(--ssla-bg-color, var(--sc, var(--shell-bg-brand, var(--shell-accent)))); } /* ─────── consulting-hero ─────── */ /* === consulting-hero === */ /* Consulting — Hero — responsive breakpoints */ @media(max-width:1100px){ .consulting-hero-wrap{grid-template-columns:1fr 1fr!important;} .consulting-hero-left{padding:60px 40px 60px 48px!important;} } @media(max-width:900px){ .consulting-hero-wrap{ grid-template-columns:1fr!important; min-height:auto!important; padding-top:80px!important; } .consulting-hero-left{ padding:48px 28px 40px!important; order:2; } .consulting-hero-right{ min-height:55vw!important; max-height:480px; order:1; } } @media(max-width:600px){ .consulting-hero-left{padding:36px 20px 32px!important;} .consulting-hero-right{min-height:72vw!important;} } /* Editor sidebar open — the scaler shrinks to 0.72, so at 1389px viewport the effective content width is ~1389*0.72 = 1000px. Keep two-col layout. */ body.ssla-sidebar-open .consulting-hero-wrap{ grid-template-columns:1fr 1fr!important; } body.ssla-sidebar-open .consulting-hero-left{ padding:48px 32px 48px 40px!important; } .consulting-hero-wrap .em{color:var(--shell-accent)} /* ─────── consulting-speaking ─────── */ /* === consulting-speaking === */ @media(max-width:900px){.consulting-speaking-img+*{padding-top:0!important}} /* ─────── contact-split ─────── */ /* === contact-split === */ /* v3.21.21 / R-E primitive — body surface paints on the section ROOT * (mirrors bio-full), not the .cs-content child. The root carries * --ssla-bg-color (bridge seed on save + multi-zone picker live * setProperty on sectionEl); .cs-content is transparent and the root * shows through it, while the opaque .cs-hero overlays its own * --ssla-hero-bg zone. Background only — no padding (the inner wrappers * own their padding). */ .ssla-section[data-ssla-type="contact-split"]{background-color:var(--ssla-bg-color, var(--shell-bg, #ffffff))} .cs-hero{width:100%;text-align:center} .cs-hero-inner{max-width:700px;margin:0 auto;padding:120px 48px 80px} .cs-hero-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 16px} .cs-hero h1{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1.5px;margin:0 0 20px} .cs-hero-body{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7} .cs-hero-body p{margin:0} /* ─── v3.12.15 — Hero paint contract (closes Glenn 2026-05-21 finding #1). * * Pre-v3.12.15 the hero paint was a one-shot inline style="background:{{hero_bg}}" * with no overlay editor surface and white-only text. The cog modal's * Colors tab now exposes hero_bg as a paint zone; the picker writes * --ssla-hero-bg on the section root via live preview. * * Three-tier paint resolution: * 1. --ssla-hero-bg set by picker → wins (admin override, live) * 2. --shell-bg-dark-cool → preset dark surface * 3. #1F2937 literal → fallback for unpainted state * * The .cs-hero element carries `style="--ssla-hero-bg:{{hero_bg}}"` * at server-render time (the registry default `#1F2937` is the * initial value). The picker's setProperty overwrites the inline var * on each input event; section CSS reads the var with fallback chain. */ .cs-hero { background: var(--ssla-hero-bg, var(--shell-bg-dark-cool, #1F2937)); } /* ─── v3.12.15 — Tone-aware hero text. * * When admin picks a light hero_bg, white text becomes unreadable. * Overlay JS writes data-ssla-hero-tone="light|dark" on .cs-hero * based on the picked color's luminance (computed on commit). Section * CSS branches text colors on the attribute so light hero gets dark * text and vice versa. * * Default (no attr) = dark hero / white text — preserves pre-v3.12.15 * visual contract for sites that don't open the cog modal. */ .cs-hero[data-ssla-hero-tone="light"] h1 { color: var(--shell-h, #1a1a1a); } .cs-hero[data-ssla-hero-tone="light"] .cs-hero-body { color: var(--shell-m, rgba(0,0,0,0.6)); } .cs-hero[data-ssla-hero-tone="light"] .cs-hero-eyebrow { color: var(--shell-accent, currentColor); } .cs-content{width:100%} .cs-content-inner{max-width:1000px;margin:0 auto;padding:80px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .cs-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-m,#6b7280);margin:0 0 12px} .cs-content h2{font-size:32px;font-weight:800;color:var(--shell-h,currentColor);letter-spacing:-1px;margin:0 0 16px} .cs-body{font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0 0 32px} .cs-body p{margin:0} .cs-reasons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px} .cs-reason{border:1px solid var(--shell-line,rgba(0,0,0,0.1));padding:20px 16px} .cs-reason h4{font-size:14px;font-weight:700;color:var(--shell-h,currentColor);margin:0 0 6px} .cs-reason p{font-size:12px;color:var(--shell-m,#6b7280);margin:0;line-height:1.5} .cs-email{font-size:14px;color:var(--shell-accent,currentColor);font-weight:600;text-decoration:none;display:inline-block} .cs-email:hover{text-decoration:underline} .cs-email:empty{display:none} @media(max-width:768px){.cs-content-inner{grid-template-columns:1fr}.cs-reasons{grid-template-columns:1fr}} /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── The .cs-left and .cs-right divs are placed by the parent grid (.cs-content-inner: grid-template-columns: 1fr 1fr). These rules give each side a defined CSS presence so manifest selectors resolve to a real CSS rule. .cs-right hosts the form_picker field. */ .cs-left { min-width: 0; } .cs-right { min-width: 0; } /* ─── v3.12.13 — Symmetric paint (D-1/A) + empty-zone placeholder (S-4) ─ When the form_picker has no value, .cs-right renders empty. Pre-v3.12.13 that meant a zero-height column with no click target — the parent bg_color bled through and the picker was effectively unreachable. Two coordinated fixes here: (1) min-height on .cs-right so the column has presence even when empty. Matches the visual rhythm of the left column on the typical intro+form pairing. 200px chosen empirically — enough to anchor the column without being so tall it dwarfs short left content. (2) Edit-mode-only placeholder when the zone is empty. CSS-only via :empty + body.ssla-ov-editing scope. No JS, no FE pollution — the placeholder is purely an editor affordance and disappears the moment a form is chosen OR the user views the page outside edit mode. Pseudo-element content is selectable and acts as click target for the form_picker popover. */ .cs-right { min-height: 200px; } body.ssla-ov-editing .cs-right:empty { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--shell-line, rgba(0,0,0,0.15)); background: var(--shell-bg-warm, rgba(0,0,0,0.02)); } body.ssla-ov-editing .cs-right:empty::before { content: "Click to choose form"; font-size: 13px; font-weight: 500; color: var(--shell-m, #6b7280); letter-spacing: 0.5px; pointer-events: none; } /* ─────── content-formula ─────── */ /* === content-formula === */ .cfml{width:100%;background:var(--ssla-bg-color, transparent)} .cfml-inner{max-width:800px;margin:0 auto;padding:100px 48px;text-align:center} .cfml-equation{display:flex;align-items:center;justify-content:center;gap:32px;margin-bottom:48px} .cfml-term{text-align:center} .cfml-letter{display:block;font-size:72px;font-weight:900;color:var(--tc);line-height:1} .cfml-sub{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tc);margin-top:8px} .cfml-op{font-size:36px;font-weight:300;color:var(--shell-m,#6b7280)} .cfml-body{font-size:var(--paint-body-size, 16px);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height, 1.8);max-width:600px;margin:0 auto} .cfml-body p{margin:0} @media(max-width:600px){.cfml-letter{font-size:48px}.cfml-equation{gap:20px}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .cfml-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .cfml-op{color: rgba(255, 255, 255, 0.5)} .ssla-tone-light .cfml-body{color: var(--shell-t, #1a1a1a)} .ssla-tone-light .cfml-op{color: var(--shell-m, #6b7280)} /* ─────── content-split-deep ─────── */ /* === content-split-deep === */ /* v3.12.26 (#19) — Grid breakage fix. * * Glenn 2026-05-21 walk: visual column rendering below text column, * entire .csd-inner expanding to 2087px wide. * * Root cause: section template had `data-ssla-field="reverse"` on * the .csd structural wrapper. Made the wrapper contenteditable. * Any text edit in the section (including the body field) saved * to `reverse` field. On re-render, the {{reverse}} substitution * injected the corrupted text INTO the class attribute: * `
` * Broken class meant .csd-inner CSS rule (max-width, grid) never * matched, so the container expanded uncontrolled. * * Two-part fix: * 1. PHP template: removed data-ssla-field="reverse" from .csd * (no more contenteditable on the wrapper). * 2. PHP template + CSS: moved reverse toggle from class concat * to data-attribute. Even if a page has corrupted `reverse` * data from pre-v3.12.26 saves, the data-attribute receives * the garbage cleanly without breaking the class. CSS branches * on the attribute; non-matching values produce no rule match * and the default (non-reversed) layout holds. * * Reverse toggle values: * '' — default (text-left, visual-right) * 'reverse' — flipped (visual-left, text-right) * anything else — treated as default (CSS rule won't match) */ .csd{width:100%} .csd-inner{max-width:1000px;margin:0 auto;padding:100px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .csd-inner[data-csd-reverse="reverse"]{direction:rtl} .csd-inner[data-csd-reverse="reverse"]>*{direction:ltr} .csd-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin-bottom:16px} .csd-eyebrow:empty{display:none} .csd h2{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--shell-h,currentColor);margin:0 0 16px} .csd-body{font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.8} .csd-body p{margin:0 0 16px}.csd-body p:last-child{margin-bottom:0} .csd-body strong{color:var(--shell-h,currentColor)} .csd-img{max-width:100%;height:auto;display:block;margin-bottom:24px} .csd-img[src=""]{display:none;margin:0} .csd-pillars{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .csd-pillar{padding:32px 16px;text-align:center} .csd-pillar-icon{font-size:28px;font-weight:900;color:var(--pc);margin:0 0 12px;line-height:1} .csd-pillar-label{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pc);margin:0} .csd-pillar:has(.csd-pillar-icon:empty){display:none} /* v3.16.0 / Band 2a — pillar_style=stats variant. * When the variant attribute pillar_style=stats is set, the section wrapper * receives class .ssla-content-split-deep--pillar_style-stats. We re-style * the pillar icon as a large numeric stat value, and tighten the label * spacing to feel like a stat caption rather than a pillar tag. Pillars * still hide when empty (the :has(:empty) rule above continues to apply). */ .ssla-content-split-deep--pillar_style-stats .csd-pillar-icon{font-size:40px;font-weight:800;letter-spacing:-1px;margin:0 0 6px;line-height:1} .ssla-content-split-deep--pillar_style-stats .csd-pillar-label{font-size:11px;letter-spacing:1.5px;margin:0;opacity:.85} .ssla-content-split-deep--pillar_style-stats .csd-pillar{padding:24px 12px} @media(max-width:768px){.csd-inner{grid-template-columns:1fr;gap:40px}.csd-inner.reverse{direction:ltr}} /* ─────── content-split ─────── */ /* === content-split === */ .scs-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:var(--paint-section-padding,100px) 48px;max-width:1100px;margin:0 auto} .scs-inner h2{font-family:var(--shell-hf,inherit);font-size:2rem;font-weight:var(--paint-heading-weight,700);letter-spacing:var(--paint-heading-letter-spacing-h2,normal);text-transform:var(--paint-heading-case-h2,none);color:var(--shell-h,currentColor);margin-bottom:16px} .scs-body{font-size:.85rem;color:var(--shell-t,#1a1a1a);line-height:1.8} .scs-body p{margin-bottom:12px} .scs-cta{display:inline-block;margin-top:20px;padding:12px 28px;background:var(--paint-button-primary-fill,var(--sc,var(--shell-accent,currentColor)));color:var(--paint-button-primary-text,var(--shell-cta-t,#111));font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;border-radius:var(--paint-button-radius,0);transition:var(--paint-motion-timing,.3s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .scs-cta:hover{filter:brightness(1.1)} */ .scs-cta:hover{/* paint retired; global rule provides lift */} .scs-media{aspect-ratio:4/3;background:var(--shell-card,rgba(255,255,255,.03));border:1px solid var(--shell-line,rgba(0,0,0,0.1));overflow:hidden;display:flex;align-items:center;justify-content:center} .scs-img{width:100%;height:100%;object-fit:cover} .scs-img[src=""]{display:none} @media(max-width:768px){.scs-inner{grid-template-columns:1fr;padding:60px 24px;gap:30px}} /* ─────── content-stats ─────── */ /* === content-stats === * 3-column stats row. Tone variant for dark/light adjacency. * * @updated 3.5.54 — tone variant */ .sts-inner { background: var(--ssla-bg-color, transparent); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 60px 48px; gap: 40px; max-width: 1100px; margin: 0 auto; } .sts-val { font-family: var(--paint-font-family, var(--shell-hf, inherit)); font-size: var(--paint-h2-size, clamp(2rem, 4vw, 3rem)); font-weight: var(--paint-heading-weight, 800); color: var(--shell-accent, var(--preset-accent, currentColor)); line-height: 1; letter-spacing: -1px; } .sts-lbl { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--shell-m, var(--preset-text-muted, #6b7280)); margin-top: 10px; font-weight: 700; } /* Tone: dark — for adjacency with dark hero sections. * Background uses preset-primary-dark so it aesthetically continues * the dark hero. Numbers use preset-accent (gold). Labels muted-light. * * v3.5.70 W4 paint sweep — body color was hardcoded #fff and label color * was hardcoded rgba(255,255,255,0.65). Both now route through paint * tokens with the previous hardcoded values as fallback so any palette * that supplies --shell-fg-dark / --shell-m-dark wins, while presets that * don't supply those tokens render exactly as before. */ .ssla-content-stats--tone-dark .sts-inner { background: var(--ssla-bg-color, var(--shell-bg-dark-cool, var(--preset-primary-dark, #1a2a45))); color: var(--shell-fg-dark, var(--preset-text-on-dark, #fff)); } .ssla-content-stats--tone-dark .sts-val { color: var(--shell-accent, var(--preset-accent, #E2A03F)); } .ssla-content-stats--tone-dark .sts-lbl { color: var(--shell-m-dark, var(--preset-text-muted-on-dark, rgba(255, 255, 255, 0.65))); } /* Tone: dark with full-bleed bg (when used between two dark sections — unifies). */ .ssla-content-stats--tone-dark[data-ssla-type="content-stats"] { background: var(--ssla-bg-color, var(--shell-bg-dark-cool, var(--preset-primary-dark, #1a2a45))); } @media (max-width: 768px) { .sts-inner { grid-template-columns: 1fr; padding: 40px 24px; gap: 24px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .sts-inner{color: var(--shell-fg-dark, #ffffff)} .ssla-tone-dark .sts-val{color: var(--shell-accent, #E2A03F)} .ssla-tone-dark .sts-lbl{color: rgba(255, 255, 255, 0.65)} .ssla-tone-light .sts-inner{color: var(--shell-h, #1a1d21)} .ssla-tone-light .sts-val{color: var(--shell-accent, #B23232)} .ssla-tone-light .sts-lbl{color: var(--shell-m, #6b7280)} /* ─────── content-text ─────── */ /* === content-text === */ .sct-inner{background:var(--ssla-bg-color, transparent);padding:var(--paint-section-padding,100px) 48px;max-width:800px;margin:0 auto} .sct-inner h2{font-family:var(--shell-hf,inherit);font-size:var(--paint-h2-size, 2.3rem);font-weight:var(--paint-heading-weight,700);letter-spacing:var(--paint-heading-letter-spacing-h2,normal);text-transform:var(--paint-heading-case-h2,none);color:var(--shell-h,currentColor);margin-bottom:8px} .sct-sub{font-size:.82rem;color:var(--shell-m,#6b7280);margin-bottom:32px} .sct-body{font-size:var(--paint-body-size, .88rem);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height, 1.8)} .sct-body p{margin-bottom:16px} .sct-body p:last-child{margin-bottom:0} @media(max-width:768px){.sct-inner{padding:60px 24px}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .sct-inner h2{color: #ffffff} .ssla-tone-dark .sct-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-dark .sct-sub{color: rgba(255, 255, 255, 0.6)} .ssla-tone-light .sct-inner h2{color: var(--shell-h, #1a1d21)} .ssla-tone-light .sct-body{color: var(--shell-t, #1a1a1a)} .ssla-tone-light .sct-sub{color: var(--shell-m, #6b7280)} /* ─────── content-tracks ─────── */ /* === content-tracks === */ .ct{width:100%;background-color:var(--ssla-bg-color,#1F2937)} .ct-inner{max-width:1000px;margin:0 auto;padding:100px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start} .ct-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 16px} .ct h2{font-size:32px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-1px;margin:0 0 20px} .ct-body{font-size:15px;color:rgba(255,255,255,.55);line-height:1.8} .ct-body p{margin:0} .ct-tracks{display:grid;gap:16px} .ct-track{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:28px 24px;transition:all .3s} .ct-track:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .ct-tlabel{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 8px} .ct-track h4{font-size:16px;font-weight:700;color:#fff;margin:0 0 8px} .ct-tbody{font-size:13px;color:rgba(255,255,255,.5);line-height:1.7} .ct-tbody p{margin:0} /* v3.21.20 / R-E — tone fold. Default (no class) = dark surface / white * text (the historical baked look, now via --ssla-bg-color fallback). * .ssla-tone-light flips text + card chrome to read on a light bg so a * preset (or the Tone picker) can repaint the section. Eyebrow/tlabel * ride --shell-accent already, so they're tone-agnostic. */ .ssla-tone-light[data-ssla-type="content-tracks"] .ct h2{color:var(--shell-h,#1a1d21)} .ssla-tone-light[data-ssla-type="content-tracks"] .ct-body{color:var(--shell-m,#6b7280)} .ssla-tone-light[data-ssla-type="content-tracks"] .ct-track{border-color:var(--shell-line,rgba(0,0,0,.1));background:rgba(0,0,0,.02)} .ssla-tone-light[data-ssla-type="content-tracks"] .ct-track:hover{background:rgba(0,0,0,.04);border-color:var(--shell-line,rgba(0,0,0,.18))} .ssla-tone-light[data-ssla-type="content-tracks"] .ct-track h4{color:var(--shell-h,#1a1d21)} .ssla-tone-light[data-ssla-type="content-tracks"] .ct-tbody{color:var(--shell-m,#6b7280)} @media(max-width:768px){.ct-inner{grid-template-columns:1fr}} /* ─────── credential-strip ─────── */ /* === credential-strip === */ /* ── RSC Trust Bar ── */ .ssla-section[data-ssla-type="credential-strip"]{padding:0;border-top:1px solid transparent;border-bottom:1px solid transparent;background:var(--shell-bg,transparent);border-image:linear-gradient(90deg,transparent,#D4CBC0,transparent) 1} .rt-bar{display:flex;justify-content:center;align-items:center;gap:24px;padding:28px 36px;flex-wrap:wrap} .rt-item{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;color:var(--shell-m,#6b7280);letter-spacing:0.5px} .rt-dot{width:5px;height:5px;border-radius:50%;background:var(--shell-accent,currentColor);opacity:0.4} .rt-item:empty,.rt-item:empty+.rt-dot{display:none} @media(max-width:600px){.rt-bar{gap:16px}.rt-item{font-size:12.5px}} /* ─────── cta-3-button ─────── */ /* === cta-3-button === */ .cta3{width:100%;position:relative;overflow:hidden} .cta3-inner{max-width:1000px;margin:0 auto;padding:var(--paint-section-padding,100px) 48px;text-align:center;position:relative;z-index:1} .cta3-heading{font-size:var(--paint-h2-size,36px);font-weight:var(--paint-heading-weight,800);color:var(--shell-h,currentColor);margin:0 0 16px;letter-spacing:-1px} .cta3-body{font-size:var(--paint-body-size,16px);color:var(--shell-t,#1a1a1a);line-height:var(--paint-body-line-height,1.7);max-width:500px;margin:0 auto 40px} .cta3-body p{margin:0} .cta3-actions{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap} .cta3-btn{display:inline-block;font-size:var(--paint-button-size,13px);font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s;border-radius:var(--paint-button-radius,0)} .cta3-btn:empty{display:none} .cta3-btn-primary{background:var(--paint-button-primary-fill,var(--shell-accent,currentColor));color:var(--paint-button-primary-text,var(--shell-bg,#fff))!important;padding:16px 38px} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .cta3-btn-primary:hover{filter:brightness(.9);transform:translateY(-2px)} */ .cta3-btn-primary:hover{/* paint retired; global rule provides lift */} /* Secondary solid — paint-button-secondary-fill resolves to a palette slug or "transparent"; when it resolves to transparent (common default), fall back to shell-h for a filled navy button rather than rendering as near-invisible text. */ .cta3-btn-solid{background:var(--shell-h,currentColor);color:var(--shell-bg,#fff)!important;padding:16px 38px} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .cta3-btn-solid:hover{filter:brightness(1.15);transform:translateY(-2px)} */ .cta3-btn-solid:hover{/* paint retired; global rule provides lift */} /* Outline — the A4 "near-invisible" fix: when secondary_fill=transparent (painting default), keep the outline visible by pinning text+border to secondary_text with a readable navy fallback, rather than letting undefined vars collapse to inherited color. */ .cta3-btn-outline{background:transparent;border:2px solid var(--paint-button-secondary-text,var(--shell-h,currentColor));color:var(--paint-button-secondary-text,var(--shell-h,currentColor))!important;padding:14px 36px;font-weight:700} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .cta3-btn-outline:hover{background:var(--paint-button-secondary-text,var(--shell-h,currentColor));color:#fff!important} */ .cta3-btn-outline:hover{/* paint retired; global rule provides lift */} /* v3.16.0 / Band 2a — button_style=chip variant. * When variant attribute button_style=chip is set, all three buttons render * as uniform pill-style outline chips. Hides the primary/solid/outline * hierarchy in favor of an equal-treatment row of pills. This unblocks the * consulting-tech → cta-3-button canonical conversion (per Band 2c map). * Selector specificity uses the wrapper class; per-button overrides hold * for solid mode. */ .ssla-cta-3-button--button_style-chip .cta3-btn{ background:transparent; color:var(--shell-h,currentColor)!important; border:1.5px solid var(--shell-h,currentColor); padding:10px 22px; font-size:var(--paint-button-size,12px); font-weight:700; letter-spacing:1.5px; border-radius:999px; } .ssla-cta-3-button--button_style-chip .cta3-btn-primary, .ssla-cta-3-button--button_style-chip .cta3-btn-solid, .ssla-cta-3-button--button_style-chip .cta3-btn-outline{ /* Force-reset the per-button paint set so chip treatment wins. */ background:transparent; color:var(--shell-h,currentColor)!important; border:1.5px solid var(--shell-h,currentColor); } @media(max-width:600px){.cta3-heading{font-size:var(--paint-h2-size-mobile,28px)}.cta3-actions{gap:12px}} /* ─────── cta-accent ─────── */ /* === cta-accent === * Full-width accent-color CTA bridge. Heading + body + button row. * v3.5.54 — texture moved from child div to ::before pseudo (editor-friendly). * * @updated 3.5.54 */ .ssla-section[data-ssla-type="cta-accent"] { padding: var(--paint-section-padding, 100px) 48px; background: var(--ssla-bg-color, var(--shell-accent, var(--preset-primary, currentColor))); text-align: center; position: relative; overflow: hidden; } /* Texture: dot pattern overlay. Replaces v3.5.53's
. * ::before is editor-invisible but renders identically on the front-end. */ .ssla-section[data-ssla-type="cta-accent"]::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; } /* Legacy texture div (if any preset still emits it from old translator) * is hidden — not removed in render but rendered invisibly. */ .rct-texture { display: none !important; } /* v3.5.61 (B26-headings) — Specificity hardened. * Two selectors: (1) the h2 directly, (2) h2 with rich field-type marker. * (2) is required because if heading content contains nested

(rich * editor brings paragraph tags into short headings), the h2 itself was * being de-prioritized in cascade order on Glenn's home cta-accent walk. * The [data-ssla-field-type] qualifier raises specificity to (0,1,2) * which beats any single-class rule from the theme that might be * targeting `h2` generically. */ .ssla-section[data-ssla-type="cta-accent"] h2, .ssla-section[data-ssla-type="cta-accent"] h2[data-ssla-field-type="rich"] { font-size: var(--paint-h2-size, clamp(30px, 4vw, 46px)); font-weight: var(--paint-heading-weight, 800); letter-spacing: var(--paint-heading-letter-spacing-h2, -0.5px); text-transform: var(--paint-heading-case-h2, none); color: var(--shell-text-inverted, #F3EDE4); margin: 0 auto 16px; max-width: 720px; position: relative; z-index: 2; line-height: 1.15; } .ssla-section[data-ssla-type="cta-accent"] h2 em { font-weight: 300; font-style: italic; } .ssla-section[data-ssla-type="cta-accent"] h2 .gold, .ssla-section[data-ssla-type="cta-accent"] h2 .ssla-accent { color: var(--shell-accent, var(--preset-accent, #E2A03F)); } .ssla-section[data-ssla-type="cta-accent"] p, .ssla-section[data-ssla-type="cta-accent"] [data-ssla-field-type="rich"] { /* v3.5.60.2 (B26-padding) — Both selectors needed. * Pre-v3.5.60: `

` — * the field wrapper itself was the

that this `p` rule selected. * Post-v3.5.60 (B15 systemic

→

): wrapper is now `
`, not `

`. * The original `p` selector still matches NESTED

inside the div * (rich content brings its own paragraph tags), so font-size/color/ * line-height effectively cascade — but properties that need to apply * at the WRAPPER level (max-width, margin: 0 auto for centering, the * 36px bottom margin holding buttons clear) were lost. Re-attach those * to the rich-field div directly. cta-accent is the only section where * this regressed visibly per Glenn's v3.5.60.1 staging walk. */ font-size: var(--paint-body-size, 17px); color: rgba(255, 255, 255, 0.75); max-width: 560px; margin: 0 auto 36px; line-height: var(--paint-body-line-height, 1.7); position: relative; z-index: 2; } .rct-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; } /* Local button styles. Ship D will move these to a shared utility but for now * keep them in the section to avoid cross-section dependency. */ .ssla-section[data-ssla-type="cta-accent"] .btn { display: inline-block; padding: 14px 32px; font-size: var(--paint-button-size, 0.78rem); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-radius: var(--paint-button-radius, 0); transition: var(--paint-motion-timing, 0.3s); } .ssla-section[data-ssla-type="cta-accent"] .btn-white { background: var(--shell-bg-warm, #F3EDE4); color: var(--shell-accent, var(--preset-primary, currentColor)); font-weight: 800; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section[data-ssla-type="cta-accent"] .btn-white:hover { * background: #fff; * transform: translateY(var(--paint-hover-lift, -2px)); * box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); * } */ .ssla-section[data-ssla-type="cta-accent"] .btn-white:hover{ transform: translateY(var(--paint-hover-lift, -2px)); } .ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.32); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white:hover { * border-color: rgba(255, 255, 255, 0.6); * background: rgba(255, 255, 255, 0.08); * } */ .ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white:hover{/* paint retired; global rule provides lift */} .ssla-section[data-ssla-type="cta-accent"] .btn:empty { display: none; } @media (max-width: 768px) { .ssla-section[data-ssla-type="cta-accent"] { padding: 80px 24px; } .rct-btns { flex-direction: column; align-items: center; } .ssla-section[data-ssla-type="cta-accent"] .btn { width: 100%; max-width: 280px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="cta-accent"] h2{color: var(--shell-text-inverted, #F3EDE4)} .ssla-tone-dark[data-ssla-type="cta-accent"] p{color: rgba(255, 255, 255, 0.75)} .ssla-tone-light[data-ssla-type="cta-accent"] h2{color: var(--shell-h, #1a1d21)} .ssla-tone-light[data-ssla-type="cta-accent"] p{color: var(--shell-t, #4a5568)} /* ─────── cta-banner ─────── */ /* === cta-banner === */ /* v3.10.01 — Background paint contract (Glenn 2026-05-19 walk). * Three-tier resolution: * 1. --ssla-bg-color set by picker → wins (admin override) * 2. --sc (preset section-color override) → preset palette * 3. --shell-accent → default preset accent * v3.9.17's section[data-ssla-bg-color] rule paints the wrapper * via custom property; this section's :has() selector reads the * same chain so the banner inner respects all three sources * uniformly. */ .ssla-section:has(.ctab-inner){background:var(--ssla-bg-color, var(--sc, var(--shell-accent)))} .ctab-inner{display:flex;align-items:center;justify-content:space-between;padding:60px 48px;gap:40px} .ctab-text h2{font-family:var(--shell-hf);font-size:1.8rem;font-weight:700;color:var(--shell-cta-t,#111);margin-bottom:4px} .ctab-text p{font-size:.85rem;color:var(--shell-cta-t,#111);opacity:.7} .ctab-btn{padding:14px 36px;background:var(--shell-cta-t,#111);color:var(--sc,var(--shell-accent));font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:.3s;white-space:nowrap} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ctab-btn:hover{opacity:.9;transform:translateY(-1px)} */ .ctab-btn:hover{/* paint retired; global rule provides lift */} @media(max-width:768px){.ctab-inner{flex-direction:column;text-align:center;padding:40px 24px}} /* ─────── cta-card ─────── */ /* === cta-card === */ .ctac-outer{background:var(--ssla-bg-color, transparent);padding:80px 48px;display:flex;justify-content:center} .ctac-card{text-align:center;padding:60px 48px;max-width:600px;border:1px solid var(--shell-line,rgba(255,255,255,.06));background:var(--shell-card,rgba(255,255,255,.02))} .ctac-card h2{font-family:var(--shell-hf);font-size:var(--paint-h2-size, 2rem);font-weight:700;color:var(--shell-h);margin-bottom:12px} .ctac-card p{font-size:var(--paint-body-size, .85rem);color:var(--shell-m);margin-bottom:28px;line-height:var(--paint-body-line-height, 1.7)} .ctac-btn{display:inline-block;padding:14px 36px;background:var(--sc,var(--shell-accent));color:var(--shell-cta-t,#111);font-size:var(--paint-button-size, .72rem);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:.3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ctac-btn:hover{filter:brightness(1.1);transform:translateY(-2px)} */ .ctac-btn:hover{/* paint retired; global rule provides lift */} @media(max-width:768px){.ctac-outer{padding:40px 24px}.ctac-card{padding:40px 24px}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .ctac-card h2{color: #ffffff} .ssla-tone-dark .ctac-card p{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .ctac-card h2{color: var(--shell-h, #1a1d21)} .ssla-tone-light .ctac-card p{color: var(--shell-m, #6b7280)} /* ─────── cta-closing ─────── */ /** * Section: CTA — Closing * RSD Design Language Wave 7 Primitive 1. * Companion to: pages/sections/cta-closing.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="cta-closing"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--ssla-bg-color, var(--shell-surface-darker)); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="darker"]{ background: var(--ssla-bg-color, var(--shell-surface-darker)); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="brand"]{ background: var(--ssla-bg-color, var(--shell-surface-brand)); } .ssla-cta-closing{ max-width: var(--shell-text-max-width); margin: 0 auto; text-align: center; } [data-ssla-type="cta-closing"][data-ssla-variant-alignment="left"] .ssla-cta-closing{ margin: 0; text-align: left; max-width: var(--shell-content-max-width); } .ssla-cta-closing > * + *{ margin-top: 24px; } .ssla-cta-closing .ssla-eyebrow.is-plain{ margin-bottom: 0; } .ssla-cta-closing .ssla-eyebrow.is-plain:empty{ display: none; } .ssla-cta-closing .ssla-h2-large{ font-size: var(--paint-h2-size, var(--shell-h2-size-large)); line-height: 1.05; } [data-ssla-variant-tone="dark"] .ssla-cta-closing .ssla-h2-large{ color: var(--shell-text-on-dark); } [data-ssla-type="cta-closing"][data-ssla-variant-surface="brand"] .ssla-cta-closing .ssla-h2-large, [data-ssla-type="cta-closing"][data-ssla-variant-surface="brand"] .ssla-cta-closing .ssla-lede{ color: #F5F0E8; } .ssla-cta-closing-actions{ margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } [data-ssla-type="cta-closing"][data-ssla-variant-alignment="left"] .ssla-cta-closing-actions{ justify-content: flex-start; } @media (max-width: 767px) { [data-ssla-type="cta-closing"]{ padding: 96px 24px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="cta-closing"] .ssla-h2-large{color: var(--shell-text-on-dark, #ffffff)} .ssla-tone-dark[data-ssla-type="cta-closing"] .ssla-lede{color: var(--shell-text-on-dark-muted, rgba(255,255,255,0.78))} .ssla-tone-light[data-ssla-type="cta-closing"] .ssla-h2-large{color: var(--shell-text-dark, #1a1d21)} .ssla-tone-light[data-ssla-type="cta-closing"] .ssla-lede{color: var(--shell-text-body, #4a5568)} /* ─────── cta-dark ─────── */ /* === cta-dark === * Dark gradient bg with grid pattern overlay (::before). * Centered heading + body + button + secondary text link. * * @updated 3.5.54 — paint font-family (was hardcoded Montserrat), gold-accent support */ .ssla-section[data-ssla-type="cta-dark"] { background: var(--ssla-bg-color, linear-gradient(135deg, var(--shell-bg-dark-cool, var(--preset-primary-dark, #0f1b2e)) 0%, var(--shell-bg-dark-cool-end, var(--preset-primary, #1a2a45)) 100%)); padding: var(--paint-section-padding, 120px) 48px; position: relative; overflow: hidden; } .ssla-section[data-ssla-type="cta-dark"]::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,0.015)' stroke-width='1'/%3E%3C/svg%3E"); pointer-events: none; } .ctd-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; } .ctd-center { text-align: center; } .ctd-heading { font-family: var(--paint-font-family, "Montserrat", sans-serif); font-size: var(--paint-h2-size, clamp(28px, 4vw, 44px)); font-weight: var(--paint-heading-weight, 800); letter-spacing: var(--paint-heading-letter-spacing-h2, -0.5px); text-transform: var(--paint-heading-case-h2, none); color: #fff; line-height: 1.15; margin: 0 0 24px; } .ctd-heading em { font-style: italic; color: var(--shell-accent, var(--preset-accent, currentColor)); } .ctd-heading .gold, .ctd-heading .ssla-accent { color: var(--shell-accent, var(--preset-accent, currentColor)); } .ctd-desc { font-family: var(--paint-font-family, "Montserrat", sans-serif); font-size: var(--paint-body-size, 17px); color: var(--cta-dark-desc-color, rgba(255, 255, 255, 0.78)); line-height: var(--paint-body-line-height, 1.7); max-width: 560px; margin: 0 auto 36px; } .ctd-desc p { margin: 0 0 0.6em; } .ctd-desc p:last-child { margin-bottom: 0; } .ctd-btn { display: inline-block; background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor))); color: var(--paint-button-primary-text, #fff); padding: 18px 48px; font-family: var(--paint-font-family, "Montserrat", sans-serif); font-size: var(--paint-button-size, 0.85rem); font-weight: 800; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; border-radius: var(--paint-button-radius, 0); transition: all var(--paint-motion-timing, 0.25s); margin-bottom: 20px; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ctd-btn:hover { * filter: brightness(1.06); * transform: translateY(var(--paint-hover-lift, -2px)); * box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); * } */ .ctd-btn:hover{ transform: translateY(var(--paint-hover-lift, -2px)); } .ctd-btn:empty { display: none; } .ctd-link { display: block; font-family: var(--paint-font-family, "Montserrat", sans-serif); font-size: 14px; color: rgba(255, 255, 255, 0.65); text-decoration: none; font-weight: 500; letter-spacing: 0.3px; transition: color var(--paint-motion-timing, 0.2s); } .ctd-link:hover { color: var(--shell-accent, var(--preset-accent, #E2A03F)); } .ctd-link:empty { display: none; } @media (max-width: 640px) { .ssla-section[data-ssla-type="cta-dark"] { padding: 80px 24px; } .ctd-heading { font-size: 28px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .ctd-heading{color: #ffffff} .ssla-tone-dark .ctd-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .ctd-heading{color: var(--shell-h, #1a1d21)} .ssla-tone-light .ctd-desc{color: var(--shell-t, #4a5568)} /* ─────── custom-css ─────── */ /* === custom-css === */ /* Page-level CSS overrides */ /* ─────── events-upcoming ─────── */ /* === events-upcoming === */ .seu-inner{padding:100px 48px;max-width:1100px;margin:0 auto}.seu-inner h2{font-family:var(--shell-hf);font-size:2rem;font-weight:700;color:var(--shell-h);margin-bottom:8px}.seu-sub{font-size:.82rem;color:var(--shell-m);margin-bottom:40px} /* ─────── faq-list ─────── */ /* === faq-list === */ .sfq-outer{padding:var(--paint-section-padding,100px) 48px} .sfq-header{text-align:center;margin-bottom:64px} .sfq-label{font-size:.58rem;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent,currentColor));margin-bottom:16px} .sfq-header h2{font-family:var(--shell-hf,inherit);font-size:2.2rem;font-weight:var(--paint-heading-weight,600);letter-spacing:var(--paint-heading-letter-spacing-h2,normal);text-transform:var(--paint-heading-case-h2,none);color:var(--shell-h,currentColor)} .sfq-list{max-width:800px;margin:0 auto} .sfq-item{padding:32px 0;border-bottom:1px solid var(--shell-line,rgba(0,0,0,.08))} .sfq-item:first-child{border-top:1px solid var(--shell-line,rgba(0,0,0,.08))} .sfq-item:has(.sfq-q:empty),.sfq-q:empty{display:none} .sfq-q{font-family:var(--shell-hf,inherit);font-size:1.1rem;font-weight:var(--paint-heading-weight,600);letter-spacing:var(--paint-heading-letter-spacing-h3,normal);text-transform:var(--paint-heading-case-h3,none);color:var(--shell-h,currentColor);margin-bottom:12px;display:flex;align-items:flex-start;gap:16px} .sfq-badge{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--shell-h,currentColor);color:var(--sc,var(--shell-accent,currentColor));font-family:inherit;font-size:.6rem;font-weight:700} .sfq-a{font-size:.82rem;line-height:1.85;color:var(--shell-m,#6b7280);padding-left:44px} .sfq-a:empty{display:none} @media(max-width:768px){.sfq-outer{padding:60px 24px}.sfq-q{font-size:1rem}} /* ─────── feature-grid ─────── */ /** * Section: Feature — Grid * RSD Design Language Wave 4 Primitive 3. * Companion to: pages/sections/feature-grid.php * * Grid of small feature tiles. 12 tile slots; empty tiles hide via :empty. * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="feature-grid"]{ padding: var(--shell-section-padding-y-standard) 48px; background: var(--shell-surface-cream); } [data-ssla-type="feature-grid"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="feature-grid"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="feature-grid"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="feature-grid"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } .ssla-feature-grid{ max-width: var(--shell-content-max-width); margin: 0 auto; } /* Header block */ .ssla-feature-grid-header{ text-align: center; margin-bottom: 64px; } .ssla-feature-grid-header > * + *{ margin-top: 16px; } .ssla-feature-grid-header .ssla-h2{ max-width: 800px; margin: 16px auto 0; } .ssla-feature-grid-header .ssla-lede{ max-width: 620px; margin: 0 auto; } /* When section heading is empty (per spec), hide header block */ .ssla-feature-grid-header:has(.ssla-h2:empty):has(.ssla-eyebrow.is-plain:empty):has(.ssla-lede:empty){ display: none; } /* Tiles grid */ .ssla-feature-grid-tiles{ display: grid; gap: var(--shell-grid-gap-standard); grid-template-columns: repeat(3, 1fr); } [data-ssla-type="feature-grid"][data-ssla-variant-columns="2"] .ssla-feature-grid-tiles{ grid-template-columns: repeat(2, 1fr); } [data-ssla-type="feature-grid"][data-ssla-variant-columns="3"] .ssla-feature-grid-tiles{ grid-template-columns: repeat(3, 1fr); } [data-ssla-type="feature-grid"][data-ssla-variant-columns="4"] .ssla-feature-grid-tiles{ grid-template-columns: repeat(4, 1fr); } /* Tile */ .ssla-tile{ padding: 32px; background: transparent; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } /* tile-style variants */ [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="bordered"] .ssla-tile{ border: 1px solid var(--shell-hairline-strong); background: var(--shell-surface-light); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2); } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="bordered"] .ssla-tile:hover{ border-color: var(--shell-accent); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2), var(--shell-shadow-lift-3); transform: translateY(-2px); } /* Gold accent rule on top of bordered tiles — design language signature */ [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="bordered"] .ssla-tile::before{ content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background: var(--shell-accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="bordered"] .ssla-tile:hover::before{ transform: scaleX(1); } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="card"] .ssla-tile{ background: var(--shell-surface-light); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2), var(--shell-shadow-lift-3); border: 1px solid var(--shell-hairline); } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="card"] .ssla-tile:hover{ transform: translateY(-3px); border-color: var(--shell-accent); } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="flat"] .ssla-tile{ border: 0; background: transparent; box-shadow: none; } [data-ssla-type="feature-grid"][data-ssla-variant-tile-style="flat"] .ssla-tile:hover{ background: var(--shell-accent-soft); } /* Dark-tone tile overrides */ [data-ssla-variant-tone="dark"][data-ssla-variant-tile-style="bordered"] .ssla-tile, [data-ssla-variant-tone="dark"][data-ssla-variant-tile-style="card"] .ssla-tile{ background: rgba(245, 240, 232, 0.04); border-color: var(--shell-hairline-on-dark); box-shadow: none; } [data-ssla-variant-tone="dark"][data-ssla-variant-tile-style="bordered"] .ssla-tile:hover, [data-ssla-variant-tone="dark"][data-ssla-variant-tile-style="card"] .ssla-tile:hover{ background: rgba(245, 240, 232, 0.07); border-color: var(--shell-accent); transform: translateY(-2px); } /* Hide empty tile slots (no heading authored) */ .ssla-tile:has(.ssla-tile-heading:empty){ display: none; } /* Icon */ .ssla-tile-icon{ width: 32px; height: 32px; color: var(--shell-accent); margin-bottom: 16px; } .ssla-tile-icon:empty{ display: none; } /* Inline icon position — beside text */ [data-ssla-type="feature-grid"][data-ssla-variant-icon-position="inline"] .ssla-tile{ display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; } [data-ssla-type="feature-grid"][data-ssla-variant-icon-position="inline"] .ssla-tile-icon{ margin-bottom: 0; grid-row: span 2; } /* Headings */ .ssla-tile-heading{ font-family: var(--shell-font-family-heading); font-size: 20px; font-weight: 700; color: var(--shell-text-dark); line-height: 1.25; letter-spacing: -0.3px; margin: 0 0 12px; } [data-ssla-variant-tone="dark"] .ssla-tile-heading{ color: var(--shell-text-on-dark); } .ssla-tile-lede{ font-size: 15px; color: var(--shell-text-body); line-height: 1.55; margin: 0; } [data-ssla-variant-tone="dark"] .ssla-tile-lede{ color: var(--shell-text-on-dark-muted); } /* Tile link */ .ssla-tile-link{ display: inline-block; margin-top: 12px; color: var(--shell-accent-strong); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.2s; } .ssla-tile-link:hover{ text-decoration: underline; } .ssla-tile-link:empty{ display: none; } [data-ssla-variant-tone="dark"] .ssla-tile-link{ color: var(--shell-accent); } @media (max-width: 1023px) { [data-ssla-type="feature-grid"][data-ssla-variant-columns="4"] .ssla-feature-grid-tiles{ grid-template-columns: repeat(2, 1fr); } [data-ssla-type="feature-grid"][data-ssla-variant-columns="3"] .ssla-feature-grid-tiles{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { [data-ssla-type="feature-grid"]{ padding: 64px 24px; } [data-ssla-type="feature-grid"] .ssla-feature-grid-tiles{ grid-template-columns: 1fr; } } /* ─────── feature-image ─────── */ /* === feature-image === */ /* ── RSC Speaking ── */ .ssla-section[data-ssla-type="feature-image"]{padding:100px 0;background:var(--shell-bg,transparent)} .rsp-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:start;margin-top:56px} .rsp-img-frame{position:relative} .rsp-img{width:100%;aspect-ratio:6/5;object-fit:cover;border-radius:16px;filter:saturate(0.85)} .rsp-img[src=""]{display:none} .rsp-img-tag{position:absolute;bottom:16px;left:16px;background:var(--shell-accent,currentColor);color:var(--shell-text-inverted,#F3EDE4);padding:8px 18px;border-radius:8px;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase} .rsp-img-tag:empty{display:none} .rsp-right p{font-size:16px;color:var(--shell-m,#6b7280);line-height:1.85;margin-bottom:14px} .rsp-lead{font-size:17px!important;color:var(--shell-t,#1a1a1a)!important;font-weight:400} .rsp-topics{list-style:none;margin:28px 0 36px;padding:0} .rsp-topics li{padding:15px 0;border-bottom:1px solid var(--shell-line,rgba(0,0,0,0.1));font-size:15.5px;color:var(--shell-t,#1a1a1a);font-weight:400;display:flex;align-items:flex-start;gap:14px;transition:padding-left 0.3s,color 0.3s} .rsp-topics li:hover{padding-left:6px;color:var(--shell-accent,currentColor)} .rsp-dot{width:7px;height:7px;margin-top:9px;background:var(--shell-accent,currentColor);border-radius:50%;flex-shrink:0} .rsp-topics li:empty{display:none} @media(max-width:900px){.rsp-grid{grid-template-columns:1fr;gap:40px}} /* ─────── feature-split-2 ─────── */ /** * Section: Feature — Split 2 (Design Language) * RSD Design Language Wave 4 Primitive 1. * Companion to: pages/sections/feature-split-2.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="feature-split-2"]{ padding: var(--shell-section-padding-y-standard) 48px; background: var(--shell-surface-cream); } [data-ssla-type="feature-split-2"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="feature-split-2"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="feature-split-2"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="feature-split-2"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } [data-ssla-type="feature-split-2"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); } .ssla-feature-split-2{ max-width: var(--shell-content-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-text{ order: 2; } [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-visual{ order: 1; } .ssla-feature-split-2-text > * + *{ margin-top: 20px; } .ssla-feature-split-2-text .ssla-h2{ font-size: clamp(32px, 3.5vw, 44px); line-height: 1.1; } /* Visual */ .ssla-feature-split-2-img-wrap{ overflow: hidden; } .ssla-feature-split-2-img{ display: block; width: 100%; height: auto; max-height: 500px; object-fit: cover; } [data-ssla-type="feature-split-2"][data-ssla-variant-image-style="lifted"] .ssla-feature-split-2-img-wrap{ border-radius: 4px; border: 1px solid var(--shell-hairline-strong); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2), var(--shell-shadow-lift-3); } [data-ssla-type="feature-split-2"][data-ssla-variant-image-style="bordered"] .ssla-feature-split-2-img-wrap{ border: 1px solid var(--shell-hairline-strong); } .ssla-feature-split-2-img-caption{ margin-top: 12px; font-size: 13px; color: var(--shell-text-muted); } [data-ssla-variant-tone="dark"] .ssla-feature-split-2-img-caption{ color: var(--shell-text-on-dark-muted); } /* Stats / Pull-quote (mutually exclusive per spec) */ .ssla-feature-split-2 .ssla-stats-row{ margin-top: 32px; } @media (max-width: 767px) { [data-ssla-type="feature-split-2"]{ padding: 64px 24px; } .ssla-feature-split-2{ grid-template-columns: 1fr; gap: 32px; } [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-text{ order: 1; } [data-ssla-type="feature-split-2"][data-ssla-variant-layout="image-left"] .ssla-feature-split-2-visual{ order: 2; } } /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── Templates emit shorter class names (.ssla-bullets, .ssla-pull-quote-*) than the existing per-section CSS (.ssla-feature-split-2-quote-*). The manifest selectors{} declares the template's names. These rules give the manifest-declared classes a real CSS rule so painting and overlay targeting both resolve. */ .ssla-bullets{ margin: 0 0 24px; padding: 0; list-style: none; } .ssla-bullets li{ padding: 8px 0 8px 24px; position: relative; font-size: 16px; line-height: 1.6; color: var(--shell-text-body); } .ssla-bullets li::before{ content: "—"; position: absolute; left: 0; top: 8px; color: var(--shell-accent); font-weight: 600; } [data-ssla-variant-tone="dark"] .ssla-bullets li{ color: var(--shell-text-on-dark-muted); } .ssla-pull-quote-text{ font-family: var(--shell-font-family-heading); font-size: 19px; line-height: 1.5; color: var(--shell-text-dark); font-style: italic; margin: 0; } [data-ssla-variant-tone="dark"] .ssla-pull-quote-text{ color: var(--shell-text-on-dark); } .ssla-pull-quote-attribution{ margin-top: 12px; font-size: 14px; color: var(--shell-text-muted); } [data-ssla-variant-tone="dark"] .ssla-pull-quote-attribution{ color: var(--shell-text-on-dark-muted); } /* ─────── feature-split ─────── */ /* === feature-split === */ /* ── RSC Giving ── */ .ssla-section[data-ssla-type="feature-split"]{padding:100px 0;background:var(--shell-bg,transparent)} .rgv-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:56px} .rgv-img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:16px;filter:saturate(0.9)} .rgv-img[src=""]{display:none} .rgv-text h3{font-size:26px;font-weight:700;margin-bottom:16px;color:var(--shell-h,currentColor)} .rgv-text p{font-size:16px;color:var(--shell-m,#6b7280);line-height:1.85;margin-bottom:14px} .rgv-nums{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px} .rgv-num-val{font-family:"Montserrat",sans-serif;font-size:30px;font-weight:800;color:var(--shell-accent-3,#6B8F5E)} .rgv-num-lbl{font-size:13px;color:var(--shell-m,#6b7280)} .rgv-num-val:empty{display:none} @media(max-width:900px){.rgv-grid{grid-template-columns:1fr;gap:40px}} /* ─────── features-4 ─────── */ /* === features-4 === */ /* ── Features 4 Bordered ── */ .ssla-section[data-ssla-type="features-4"]{background:#fff;padding:100px 48px} .f4-inner{max-width:1140px;margin:0 auto} .f4-label{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-m,#6b7280);margin:0 0 12px} .f4-heading{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:800;color:var(--shell-h,currentColor);line-height:1.15;letter-spacing:-0.8px;margin:0 0 16px} .f4-desc{font-family:"Montserrat",sans-serif;font-size:16px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0;max-width:560px} .f4-top{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px} .f4-photo{position:relative;height:360px;overflow:hidden} .f4-photo img{width:100%;height:100%;object-fit:cover} .f4-photo::after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--shell-accent,currentColor),var(--shell-accent,currentColor),var(--shell-accent,currentColor),var(--shell-accent,currentColor))} .f4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .f4-card{padding:36px 32px;border-top:3px solid transparent} .f4-card.c1{border-top-color:var(--shell-accent,currentColor)} .f4-card.c2{border-top-color:var(--shell-accent-2,currentColor)} .f4-card.c3{border-top-color:var(--shell-accent-3,currentColor)} .f4-card.c4{border-top-color:var(--shell-accent,currentColor)} .f4-card:not(:last-child){border-right:1px solid var(--shell-line,rgba(0,0,0,0.1))} .f4-card h4{font-family:"Montserrat",sans-serif;font-size:18px;font-weight:700;color:var(--shell-h,currentColor);margin:0 0 10px} .f4-card p{font-family:"Montserrat",sans-serif;font-size:14.5px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0} @media(max-width:900px){.f4-top{grid-template-columns:1fr;gap:32px}.f4-photo{height:260px}.f4-grid{grid-template-columns:repeat(2,1fr)}.f4-card:nth-child(2){border-right:none}.f4-card{border-right:none;border-bottom:1px solid #eaeaea}} @media(max-width:640px){.ssla-section[data-ssla-type="features-4"]{padding:72px 24px}.f4-grid{grid-template-columns:1fr}.f4-card:not(:last-child){border-right:none;border-bottom:1px solid #eaeaea}.f4-heading{font-size:28px}} /* ─────── footer-expanded ─────── */ /* === footer-expanded === */ .ssla-ftr-exp{padding:36px 48px;background:rgba(15,27,46,0.97);text-align:center} .ssla-ftr-exp .ftr-l1{color:rgba(255,255,255,0.5);font-size:12px;margin:0} .ssla-ftr-exp .ftr-l2{color:rgba(255,255,255,0.35);font-size:11px;margin:6px 0 0} @media(max-width:768px){.ssla-ftr-exp{padding:28px 24px}} /* ─────── footer-standard ─────── */ /* === footer-standard === */ .ssla-ftr-std{padding:28px 48px;background:rgba(15,27,46,0.97);text-align:center} .ssla-ftr-std p{color:rgba(255,255,255,0.5);font-size:12px;margin:0} @media(max-width:768px){.ssla-ftr-std{padding:24px}} /* ─────── form-full ─────── */ /* === form-full === */ .sff-inner{text-align:center;padding:100px 48px} .sff-inner h2{font-family:var(--shell-hf);font-size:2.2rem;color:var(--shell-h);margin-bottom:12px} .sff-inner>p{font-size:.85rem;color:var(--shell-m);max-width:440px;margin:0 auto 32px} .sff-form{max-width:420px;margin:0 auto} .sff-row{margin-bottom:10px} .sff-input{width:100%;padding:13px 16px;background:var(--shell-card,rgba(255,255,255,.03));border:1px solid var(--shell-bdr,var(--shell-line,#d1d5db));color:var(--shell-t,#1A1D21);font-family:inherit;font-size:.8rem;outline:0;transition:.3s} .sff-input:focus{border-color:var(--sc,var(--shell-accent))} .sff-ta{height:90px;resize:vertical} .sff-btn{width:100%;padding:15px;background:var(--sc,var(--shell-accent));border:0;color:var(--shell-cta-t,#111);font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:.3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .sff-btn:hover{filter:brightness(1.1)} */ .sff-btn:hover{/* paint retired; global rule provides lift */} .sff-ok{text-align:center;margin-top:10px;font-size:.76rem;color:var(--sc,var(--shell-accent));display:none} @media(max-width:768px){.sff-inner{padding:60px 24px}} /* ─────── form-minimal ─────── */ /* === form-minimal === */ .sfm-inner{padding:60px 48px;text-align:center} .sfm-inner h3{font-size:.9rem;font-weight:700;color:var(--shell-h);margin-bottom:16px;letter-spacing:.5px} .sfm-row{display:flex;gap:0;max-width:400px;margin:0 auto} .sfm-input{flex:1;padding:13px 16px;background:var(--shell-card,rgba(255,255,255,.03));border:1px solid var(--shell-bdr,var(--shell-line,#d1d5db));border-right:0;color:var(--shell-t,#1A1D21);font-family:inherit;font-size:.8rem;outline:0} .sfm-input:focus{border-color:var(--sc,var(--shell-accent))} .sfm-btn{padding:13px 24px;background:var(--sc,var(--shell-accent));border:0;color:var(--shell-cta-t,#111);font-family:inherit;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:.3s;white-space:nowrap} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .sfm-btn:hover{filter:brightness(1.1)} */ .sfm-btn:hover{/* paint retired; global rule provides lift */} .sfm-ok{margin-top:10px;font-size:.76rem;color:var(--sc,var(--shell-accent));display:none} @media(max-width:768px){.sfm-inner{padding:40px 24px}.sfm-row{flex-direction:column}.sfm-input{border-right:1px solid var(--shell-line)}} /* ─────── g-about-bio ─────── */ /* === g-about-bio — greenfield canonical, slot-contract form === */ /* Conform of legacy about-bio. Archetype C (Testimonial-adjacent profile card). */ /* Consumes the core: one surface token (--ssla-bg-color), shared tone authority */ /* (no per-section --tone-* rule), no bespoke .sab-* classes, no private surface */ /* token used as a background value. Display delta vs g-testimonial-single: bio */ /* body + identity stack + accented callout instead of a single big quote. */ /* ── Base layout ── */ .ssla-g-about-bio { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-about-bio-fg); } .ssla-g-about-bio-inner { max-width: var(--g-about-bio-content-max-width); margin: 0 auto; padding: var(--g-about-bio-section-padding) 24px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } /* ── Fullbleed ── */ .alignfull .ssla-g-about-bio-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Header (eyebrow + heading) ── */ .ssla-g-about-bio-header { display: flex; flex-direction: column; gap: 12px; } .ssla-g-about-bio-eyebrow { color: var(--g-about-bio-eyebrow); font-size: var(--g-about-bio-eyebrow-size); letter-spacing: var(--g-about-bio-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0; } .ssla-g-about-bio-heading { font-family: var(--g-about-bio-heading-family); font-size: var(--g-about-bio-heading-size); font-weight: var(--g-about-bio-heading-weight); letter-spacing: var(--g-about-bio-heading-letter); line-height: 1.2; margin: 0; } /* ── Identity card (avatar + name + role) ── */ .ssla-g-about-bio-card { display: flex; flex-direction: column; align-items: center; gap: 16px; } .ssla-g-about-bio-avatar { width: var(--g-about-bio-avatar-size); height: var(--g-about-bio-avatar-size); overflow: hidden; flex-shrink: 0; background: var(--g-about-bio-accent-line); } .ssla-g-about-bio-avatar img, .ssla-g-about-bio-avatar video, .ssla-g-about-bio-avatar iframe { width: 100%; height: 100%; object-fit: cover; display: block; } body.ssla-ov-editing .ssla-g-about-bio-avatar:empty { border: 2px dashed var(--g-about-bio-accent-line); display: flex; align-items: center; justify-content: center; } .ssla-g-about-bio-ident { display: flex; flex-direction: column; gap: 4px; } .ssla-g-about-bio-author { font-family: var(--g-about-bio-heading-family); font-size: var(--g-about-bio-author-size); font-weight: 700; color: var(--g-about-bio-author); line-height: 1.2; } .ssla-g-about-bio-role { font-size: var(--g-about-bio-role-size); letter-spacing: var(--g-about-bio-role-letter); font-weight: 700; text-transform: uppercase; color: var(--g-about-bio-eyebrow); } /* ── Bio body ── */ .ssla-g-about-bio-body { font-family: var(--g-about-bio-body-family); font-size: var(--g-about-bio-body-size); line-height: var(--g-about-bio-body-line-height); max-width: 600px; margin: 0; } .ssla-g-about-bio-body p { margin: 0 0 14px; } .ssla-g-about-bio-body p:last-child { margin-bottom: 0; } /* ── Callout (mapped from legacy callout → quote) ── */ .ssla-g-about-bio-quote { max-width: 600px; margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--g-about-bio-eyebrow); text-align: left; font-style: italic; color: var(--g-about-bio-quote); font-size: var(--g-about-bio-quote-size); line-height: 1.7; } .ssla-g-about-bio-quote p { margin: 0; } .ssla-g-about-bio-quote:has(p:empty) { display: none; } /* ── Structural variant: density ── */ .ssla-g-about-bio--density-minimal .ssla-g-about-bio-header, .ssla-g-about-bio--density-minimal .ssla-g-about-bio-body, .ssla-g-about-bio--density-minimal .ssla-g-about-bio-quote { display: none; } .ssla-g-about-bio--density-standard .ssla-g-about-bio-eyebrow, .ssla-g-about-bio--density-standard .ssla-g-about-bio-quote { display: none; } /* density-rich: all visible */ /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-about-bio-inner { padding: 60px 24px; gap: 20px; } } /* ═══ Skeleton state per preset-architecture §3.5 ═══ */ /* Maps every private token to a --brand-* so the shared tone authority */ /* (launch-sections.css §7.1 block) flips fg/bg with the tone attribute — no */ /* per-section tone rule needed. */ .ssla-section.ssla-g-about-bio { --g-about-bio-fg: var(--brand-fg); --g-about-bio-eyebrow: var(--brand-accent); --g-about-bio-author: var(--brand-fg); --g-about-bio-quote: var(--brand-fg); --g-about-bio-heading-family: var(--brand-heading-family); --g-about-bio-heading-size: var(--brand-h2-size-clamp); --g-about-bio-heading-weight: var(--brand-heading-weight); --g-about-bio-heading-letter: var(--brand-letter-spacing-h2); --g-about-bio-body-family: var(--brand-body-family); --g-about-bio-body-size: var(--brand-body-size); --g-about-bio-body-line-height: var(--brand-body-line-height); --g-about-bio-eyebrow-size: var(--brand-eyebrow-size); --g-about-bio-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-about-bio-author-size: var(--brand-h3-size, 1.4rem); --g-about-bio-role-size: var(--brand-eyebrow-size); --g-about-bio-role-letter: var(--brand-letter-spacing-eyebrow); --g-about-bio-quote-size: var(--brand-body-size); --g-about-bio-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-about-bio-content-max-width:var(--brand-content-max-width); --g-about-bio-avatar-size: 160px; --g-about-bio-accent-line: var(--brand-line); } /* ─────── g-bio-full ─────── */ /* === g-bio-full — greenfield canonical, slot-contract form === */ /* Conform of legacy bio-full. Archetype B (Split). Consumes the core: */ /* one surface token (--ssla-bg-color), shared tone authority, no bespoke */ /* .rab-* classes, no per-section tone rule, no private surface token. */ /* Display delta vs g-content-split: portrait (3/4) media, media-left default. */ /* ── Base layout ── */ .ssla-g-bio-full { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-bio-full-fg); } .ssla-g-bio-full-inner { max-width: var(--g-bio-full-content-max-width); margin: 0 auto; padding: var(--g-bio-full-section-padding) 48px; position: relative; z-index: 1; display: grid; grid-template-columns: 320px 1fr; gap: var(--g-bio-full-media-side-gap); align-items: start; } /* ── Fullbleed ── */ .alignfull .ssla-g-bio-full-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Text column ── */ .ssla-g-bio-full-text { grid-area: text; } .ssla-g-bio-full-eyebrow { color: var(--g-bio-full-eyebrow); font-size: var(--g-bio-full-eyebrow-size); letter-spacing: var(--g-bio-full-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0 0 20px; } .ssla-g-bio-full-heading { font-family: var(--g-bio-full-heading-family); font-size: var(--g-bio-full-heading-size); font-weight: var(--g-bio-full-heading-weight); letter-spacing: var(--g-bio-full-heading-letter); line-height: 1.15; margin: 0 0 24px; } .ssla-g-bio-full-body { font-family: var(--g-bio-full-body-family); font-size: var(--g-bio-full-body-size); line-height: var(--g-bio-full-body-line-height); margin: 0 0 32px; } .ssla-g-bio-full-body p { margin: 0 0 14px; } .ssla-g-bio-full-body p:last-child { margin-bottom: 0; } /* ── CTA ── */ .ssla-g-bio-full-cta { display: inline-block; background: var(--ssla-button-fill, var(--g-bio-full-cta-bg)); color: var(--ssla-button-text, var(--g-bio-full-cta-fg)); padding: var(--g-bio-full-button-padding); border-radius: var(--g-bio-full-button-radius); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } .ssla-g-bio-full-cta:empty { display: none; } /* ── Media column (portrait) ── */ .ssla-g-bio-full-media { grid-area: media; width: 100%; aspect-ratio: 3 / 4; background: var(--g-bio-full-media-line); overflow: hidden; } .ssla-g-bio-full-media img, .ssla-g-bio-full-media video, .ssla-g-bio-full-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; } body.ssla-ov-editing .ssla-g-bio-full-media:empty { border: 2px dashed var(--g-bio-full-media-line); display: flex; align-items: center; justify-content: center; min-height: 240px; } /* ── Structural variant: media_side ── */ /* Source order is text→media (text left). Default media_side=left swaps to */ /* portrait-left via grid areas; media_side=right falls back to source order. */ .ssla-g-bio-full-inner { grid-template-areas: "text media"; } .ssla-g-bio-full--media-side-left .ssla-g-bio-full-inner { grid-template-columns: 320px 1fr; grid-template-areas: "media text"; } .ssla-g-bio-full--media-side-right .ssla-g-bio-full-inner { grid-template-columns: 1fr 320px; grid-template-areas: "text media"; } /* ── Structural variant: density ── */ .ssla-g-bio-full--density-minimal .ssla-g-bio-full-eyebrow, .ssla-g-bio-full--density-minimal .ssla-g-bio-full-body, .ssla-g-bio-full--density-minimal .ssla-g-bio-full-cta { display: none; } .ssla-g-bio-full--density-standard .ssla-g-bio-full-eyebrow, .ssla-g-bio-full--density-standard .ssla-g-bio-full-cta { display: none; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-bio-full-inner, .ssla-g-bio-full--media-side-left .ssla-g-bio-full-inner, .ssla-g-bio-full--media-side-right .ssla-g-bio-full-inner { grid-template-columns: 1fr; grid-template-areas: "media" "text"; gap: 32px; padding: 60px 24px; } } /* ═══ Skeleton state per preset-architecture §3.5 ═══ */ .ssla-section.ssla-g-bio-full { --g-bio-full-fg: var(--brand-fg); --g-bio-full-eyebrow: var(--brand-accent); --g-bio-full-cta-bg: var(--brand-accent); --g-bio-full-cta-fg: var(--brand-bg); --g-bio-full-heading-family: var(--brand-heading-family); --g-bio-full-heading-size: var(--brand-h2-size-clamp); --g-bio-full-heading-weight: var(--brand-heading-weight); --g-bio-full-heading-letter: var(--brand-letter-spacing-h2); --g-bio-full-body-family: var(--brand-body-family); --g-bio-full-body-size: var(--brand-body-size); --g-bio-full-body-line-height: var(--brand-body-line-height); --g-bio-full-eyebrow-size: var(--brand-eyebrow-size); --g-bio-full-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-bio-full-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-bio-full-content-max-width:var(--brand-content-max-width); --g-bio-full-button-padding: var(--brand-button-padding); --g-bio-full-button-radius: var(--brand-button-radius); --g-bio-full-media-side-gap: var(--brand-gutter); --g-bio-full-media-line: var(--brand-line); } /* ─────── g-cards ─────── */ /** * Greenfield canonical: Cards * v3.18.48 */ .ssla-section.ssla-g-cards { background-color: var(--ssla-bg-color, transparent); color: var(--g-cards-fg); padding: var(--g-cards-section-padding); } .ssla-g-cards-inner { max-width: var(--g-cards-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 40px; } .ssla-g-cards-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } .ssla-g-cards-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-cards-eyebrow); } .ssla-g-cards-heading { font: 700 var(--g-cards-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-cards-heading-family, var(--shell-hf, system-ui)); color: var(--g-cards-heading); margin: 0; } .ssla-g-cards-intro { font: 400 var(--g-cards-body-size, 18px)/1.55 var(--g-cards-body-family, var(--shell-bf, system-ui)); color: var(--g-cards-body); margin: 0; } .ssla-g-cards-grid { display: grid; gap: var(--g-cards-gap, 24px); } .ssla-g-cards-card { display: flex; flex-direction: column; gap: 8px; padding: var(--g-cards-card-padding, 24px); background: var(--g-cards-card-bg, transparent); border: 1px solid var(--g-cards-card-border, transparent); } .ssla-g-cards-card-eyebrow { font: 600 11px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-cards-eyebrow); } .ssla-g-cards-card-heading { font: 600 20px/1.3 var(--g-cards-heading-family, var(--shell-hf, system-ui)); color: var(--g-cards-heading); margin: 0; } .ssla-g-cards-card-body { font: 400 15px/1.55 var(--g-cards-body-family, var(--shell-bf, system-ui)); color: var(--g-cards-body); margin: 0; } .ssla-g-cards-card-cta { margin-top: auto; padding-top: 8px; font: 600 14px/1 var(--shell-bf, system-ui); color: var(--g-cards-heading); text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; } /* Count */ .ssla-g-cards--count-two .ssla-g-cards-grid { grid-template-columns: repeat(2, 1fr); } .ssla-g-cards--count-three .ssla-g-cards-grid { grid-template-columns: repeat(3, 1fr); } .ssla-g-cards--count-four .ssla-g-cards-grid { grid-template-columns: repeat(4, 1fr); } /* Card style */ .ssla-g-cards--card-style-plain { --g-cards-card-bg: transparent; --g-cards-card-border: transparent; } .ssla-g-cards--card-style-bordered { --g-cards-card-bg: transparent; --g-cards-card-border: rgba(0,0,0,0.20); } .ssla-g-cards--card-style-filled { --g-cards-card-bg: rgba(0,0,0,0.06); --g-cards-card-border: transparent; } /* Density */ .ssla-g-cards--density-minimal .ssla-g-cards-head { display: none; } .ssla-g-cards--density-standard .ssla-g-cards-eyebrow, .ssla-g-cards--density-standard .ssla-g-cards-intro { display: none; } /* density-rich: all visible */ /* Skeleton */ .ssla-g-cards { --g-cards-fg: var(--brand-fg); --g-cards-eyebrow: var(--brand-accent); --g-cards-heading: var(--brand-fg); --g-cards-body: var(--brand-fg); --g-cards-card-bg: transparent; --g-cards-card-border: transparent; --g-cards-heading-family: var(--shell-hf, system-ui); --g-cards-heading-size: clamp(26px, 3.5vw, 40px); --g-cards-body-family: var(--shell-bf, system-ui); --g-cards-body-size: 18px; --g-cards-section-padding: 0; --g-cards-content-max-width: 1200px; --g-cards-gap: 24px; --g-cards-card-padding: 24px; } /* Tone */ .ssla-g-cards--tone-light { --g-cards-fg: #1a1a1a; --g-cards-heading: #1a1a1a; --g-cards-body: #4a4a4a; } .ssla-g-cards--tone-dark { --g-cards-fg: #f5f5f5; --g-cards-heading: #ffffff; --g-cards-body: #d0d0d0; --g-cards-card-border: rgba(255,255,255,0.12); } .ssla-g-cards--tone-dark.ssla-g-cards--card-style-bordered { --g-cards-card-border: rgba(255,255,255,0.28); } .ssla-g-cards--tone-dark.ssla-g-cards--card-style-filled { --g-cards-card-bg: rgba(255,255,255,0.10); } .ssla-g-cards--tone-accent { --g-cards-fg: var(--preset-accent-fg, #1a1a1a); --g-cards-heading: var(--preset-accent-fg, #1a1a1a); --g-cards-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-cards-inner { padding: 40px 16px; gap: 28px; } .ssla-g-cards-grid { grid-template-columns: 1fr !important; } .ssla-g-cards-heading { font-size: clamp(22px, 5vw, 30px); } } /* ─────── g-columns ─────── */ /** * Greenfield canonical: Columns * v3.18.48 */ .ssla-section.ssla-g-columns { background-color: var(--ssla-bg-color, transparent); color: var(--g-columns-fg); padding: var(--g-columns-section-padding); } .ssla-g-columns-inner { max-width: var(--g-columns-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 40px; } .ssla-g-columns-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } .ssla-g-columns-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-columns-eyebrow); } .ssla-g-columns-heading { font: 700 var(--g-columns-heading-size, clamp(24px, 3.5vw, 36px))/1.2 var(--g-columns-heading-family, var(--shell-hf, system-ui)); color: var(--g-columns-heading); margin: 0; } .ssla-g-columns-intro { font: 400 var(--g-columns-body-size, 18px)/1.55 var(--g-columns-body-family, var(--shell-bf, system-ui)); color: var(--g-columns-body); margin: 0; } .ssla-g-columns-grid { display: grid; gap: var(--g-columns-gap, 32px); } .ssla-g-columns-cell { display: flex; flex-direction: column; gap: 8px; } .ssla-g-columns-cell-heading { font: 600 18px/1.3 var(--g-columns-heading-family, var(--shell-hf, system-ui)); color: var(--g-columns-column-heading); margin: 0; } .ssla-g-columns-cell-body { font: 400 16px/1.55 var(--g-columns-body-family, var(--shell-bf, system-ui)); color: var(--g-columns-body); margin: 0; } /* Column count */ .ssla-g-columns--count-two .ssla-g-columns-grid { grid-template-columns: repeat(2, 1fr); } .ssla-g-columns--count-three .ssla-g-columns-grid { grid-template-columns: repeat(3, 1fr); } .ssla-g-columns--count-four .ssla-g-columns-grid { grid-template-columns: repeat(4, 1fr); } /* Density */ .ssla-g-columns--density-minimal .ssla-g-columns-head { display: none; } .ssla-g-columns--density-standard .ssla-g-columns-eyebrow, .ssla-g-columns--density-standard .ssla-g-columns-intro { display: none; } /* density-rich: all visible */ /* Skeleton */ .ssla-g-columns { --g-columns-fg: var(--brand-fg); --g-columns-eyebrow: var(--brand-accent); --g-columns-heading: var(--brand-fg); --g-columns-body: var(--brand-fg); --g-columns-column-heading: var(--brand-fg); --g-columns-heading-family: var(--shell-hf, system-ui); --g-columns-heading-size: clamp(24px, 3.5vw, 36px); --g-columns-body-family: var(--shell-bf, system-ui); --g-columns-body-size: 18px; --g-columns-section-padding: 0; --g-columns-content-max-width: 1200px; --g-columns-gap: 32px; } /* Tone */ .ssla-g-columns--tone-light { --g-columns-fg: #1a1a1a; --g-columns-heading: #1a1a1a; --g-columns-column-heading: #1a1a1a; --g-columns-body: #4a4a4a; } .ssla-g-columns--tone-dark { --g-columns-fg: #f5f5f5; --g-columns-heading: #ffffff; --g-columns-column-heading: #ffffff; --g-columns-body: #d0d0d0; } .ssla-g-columns--tone-accent { --g-columns-fg: var(--preset-accent-fg, #1a1a1a); --g-columns-heading: var(--preset-accent-fg, #1a1a1a); --g-columns-column-heading: var(--preset-accent-fg, #1a1a1a); --g-columns-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-columns-inner { padding: 40px 16px; gap: 28px; } .ssla-g-columns-grid { grid-template-columns: 1fr !important; gap: 24px; } .ssla-g-columns-heading { font-size: clamp(22px, 5vw, 28px); } } /* ─────── g-composer-shell ─────── */ /* === g-composer-shell — greenfield canonical (archetype D, typed-row composer) === */ /* Consumes the core: root background reads --ssla-bg-color, shared tone authority */ /* flips fg (no per-section tone rule), no private surface token painted as a bg. */ /* Per-row TYPE is data-row-type on each row; CSS reveals the active type's markup. */ /* ── Base ── */ .ssla-g-composer-shell { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-composer-shell-fg); } .ssla-g-composer-shell-inner { max-width: var(--g-composer-shell-content-max-width); margin: 0 auto; padding: var(--g-composer-shell-section-padding) 24px; position: relative; z-index: 1; } .alignfull .ssla-g-composer-shell-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Header ── */ .ssla-g-composer-shell-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; } .ssla-g-composer-shell-eyebrow { color: var(--g-composer-shell-eyebrow); font-size: var(--g-composer-shell-eyebrow-size); letter-spacing: var(--g-composer-shell-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0; } .ssla-g-composer-shell-heading { font-family: var(--g-composer-shell-heading-family); font-size: var(--g-composer-shell-heading-size); font-weight: var(--g-composer-shell-heading-weight); letter-spacing: var(--g-composer-shell-heading-letter); line-height: 1.2; margin: 0; } /* FE: collapse an all-empty header; keep it visible while editing for placeholders */ body:not(.ssla-ov-editing) .ssla-g-composer-shell-eyebrow:empty, body:not(.ssla-ov-editing) .ssla-g-composer-shell-heading:empty { display: none; } body:not(.ssla-ov-editing) .ssla-g-composer-shell-header:not(:has(:not(:empty))) { display: none; } /* ── Rows grid (columns + gap variants) ── */ .ssla-g-composer-shell-rows { display: grid; grid-template-columns: 1fr; gap: var(--g-composer-shell-gap-standard); align-items: start; } .ssla-g-composer-shell--columns-two .ssla-g-composer-shell-rows { grid-template-columns: repeat(2, 1fr); } .ssla-g-composer-shell--columns-three .ssla-g-composer-shell-rows { grid-template-columns: repeat(3, 1fr); } .ssla-g-composer-shell--gap-tight .ssla-g-composer-shell-rows { gap: var(--g-composer-shell-gap-tight); } .ssla-g-composer-shell--gap-wide .ssla-g-composer-shell-rows { gap: var(--g-composer-shell-gap-wide); } /* heading rows span the full grid width (section dividers) */ .ssla-g-composer-shell--columns-two .ssla-g-composer-shell-row[data-row-type="heading"], .ssla-g-composer-shell--columns-three .ssla-g-composer-shell-row[data-row-type="heading"] { grid-column: 1 / -1; } /* ── Row content (rich) ── */ .ssla-g-composer-shell-rich { font-family: var(--g-composer-shell-body-family); font-size: var(--g-composer-shell-body-size); line-height: var(--g-composer-shell-body-line-height); } .ssla-g-composer-shell-rich p { margin: 0 0 14px; } .ssla-g-composer-shell-rich p:last-child { margin-bottom: 0; } /* type=heading → the rich slot paints as a heading */ .ssla-g-composer-shell-row[data-row-type="heading"] .ssla-g-composer-shell-rich { font-family: var(--g-composer-shell-heading-family); font-size: var(--g-composer-shell-row-heading-size); font-weight: var(--g-composer-shell-heading-weight); line-height: 1.25; } .ssla-g-composer-shell-row[data-row-type="heading"] .ssla-g-composer-shell-rich p { margin: 0; } /* ── Button row ── */ .ssla-g-composer-shell-btn { display: none; } .ssla-g-composer-shell-row[data-row-type="button"] .ssla-g-composer-shell-rich { display: none; } .ssla-g-composer-shell-row[data-row-type="button"] .ssla-g-composer-shell-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: var(--g-composer-shell-btn-size); font-weight: 700; text-decoration: none; background: var(--g-composer-shell-btn-bg); color: var(--g-composer-shell-btn-fg); } /* FE: a button row with no label collapses; editing keeps it for the placeholder */ body:not(.ssla-ov-editing) .ssla-g-composer-shell-row[data-row-type="button"] .ssla-g-composer-shell-btn:empty { display: none; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-composer-shell-inner { padding: 60px 24px; } .ssla-g-composer-shell--columns-two .ssla-g-composer-shell-rows, .ssla-g-composer-shell--columns-three .ssla-g-composer-shell-rows { grid-template-columns: 1fr; } } /* ═══ Skeleton state per preset-architecture §3.5 ═══ */ /* Maps private tokens to --brand-* so the shared tone authority flips fg. The */ /* section surface (--ssla-bg-color) is owned by Paint + the tone authority — */ /* this section never paints a private surface token as a background. */ .ssla-section.ssla-g-composer-shell { --g-composer-shell-fg: var(--brand-fg); --g-composer-shell-eyebrow: var(--brand-accent); --g-composer-shell-btn-bg: var(--brand-accent); --g-composer-shell-btn-fg: var(--brand-fg-inverse, #ffffff); --g-composer-shell-heading-family: var(--brand-heading-family); --g-composer-shell-heading-size: var(--brand-h2-size-clamp); --g-composer-shell-heading-weight: var(--brand-heading-weight); --g-composer-shell-heading-letter: var(--brand-letter-spacing-h2); --g-composer-shell-row-heading-size: var(--brand-h3-size, 1.6rem); --g-composer-shell-body-family: var(--brand-body-family); --g-composer-shell-body-size: var(--brand-body-size); --g-composer-shell-body-line-height: var(--brand-body-line-height); --g-composer-shell-eyebrow-size: var(--brand-eyebrow-size); --g-composer-shell-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-composer-shell-btn-size: var(--brand-body-size); --g-composer-shell-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-composer-shell-content-max-width: var(--brand-content-max-width); --g-composer-shell-gap-tight: 16px; --g-composer-shell-gap-standard: 32px; --g-composer-shell-gap-wide: 56px; } /* ─────── g-contact-split ─────── */ /* === g-contact-split — greenfield OUTLIER (multi-zone), slot-contract form === */ /* Body surface = core --ssla-bg-color on root (§7.1). Hero zone = sanctioned */ /* sub-element token --ssla-hero-bg (§7.2 carve-out). Tone classes set */ /* FOREGROUND only; body bg tone comes from the shared [data-ssla-variant-tone] */ /* rule in 0-shared.css (§7.3) — no per-section surface tone rule here. */ /* ── Root / body surface ── */ .ssla-g-contact-split { width: 100%; position: relative; background-color: var(--ssla-bg-color, #ffffff); color: var(--g-contact-split-fg, #1a1a1a); } /* ── Hero zone (sub-element token; opaque overlay above the body surface) ── */ .ssla-g-contact-split-hero { background-color: var(--ssla-hero-bg, var(--shell-bg-dark-cool, #1F2937)); color: #ffffff; } /* Luminance-driven tone flip (overlay JS writes data-ssla-hero-tone from the hero picker's resolved hex). FOREGROUND only — never repaints the surface. */ .ssla-g-contact-split-hero[data-ssla-hero-tone="light"] { color: #1a1a1a; } .ssla-g-contact-split-hero[data-ssla-hero-tone="dark"] { color: #ffffff; } .ssla-g-contact-split-hero-inner { max-width: var(--g-contact-split-content-max-width, 1120px); margin: 0 auto; padding: var(--g-contact-split-section-padding, 80px) 48px; text-align: center; } .ssla-g-contact-split-hero-eyebrow { font-size: var(--g-contact-split-eyebrow-size, 13px); letter-spacing: var(--g-contact-split-eyebrow-letter, 0.12em); font-weight: 800; text-transform: uppercase; opacity: 0.85; margin: 0 0 16px; } .ssla-g-contact-split-hero-heading { font-family: var(--g-contact-split-heading-family, inherit); font-size: var(--g-contact-split-heading-size, 44px); font-weight: var(--g-contact-split-heading-weight, 800); line-height: 1.1; margin: 0 0 18px; } .ssla-g-contact-split-hero-body { font-family: var(--g-contact-split-body-family, inherit); font-size: var(--g-contact-split-body-size, 18px); line-height: var(--g-contact-split-body-line-height, 1.6); max-width: 640px; margin: 0 auto; } /* ── Content zone: two-column split (info + form) ── */ .ssla-g-contact-split-inner { max-width: var(--g-contact-split-content-max-width, 1120px); margin: 0 auto; padding: var(--g-contact-split-section-padding, 80px) 48px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-contact-split-column-gap, 56px); align-items: start; } .alignfull .ssla-g-contact-split-inner, .alignfull .ssla-g-contact-split-hero-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* Info column */ .ssla-g-contact-split-eyebrow { color: var(--g-contact-split-eyebrow, inherit); font-size: var(--g-contact-split-eyebrow-size, 13px); letter-spacing: var(--g-contact-split-eyebrow-letter, 0.12em); font-weight: 800; text-transform: uppercase; margin: 0 0 16px; } .ssla-g-contact-split-heading { font-family: var(--g-contact-split-heading-family, inherit); font-size: var(--g-contact-split-heading-size, 30px); font-weight: var(--g-contact-split-heading-weight, 800); line-height: 1.15; margin: 0 0 16px; } .ssla-g-contact-split-body { font-family: var(--g-contact-split-body-family, inherit); font-size: var(--g-contact-split-body-size, 16px); line-height: var(--g-contact-split-body-line-height, 1.6); margin: 0 0 28px; } /* Reason cards (rich repeater content) */ .ssla-g-contact-split-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 28px; } .ssla-g-contact-split-reason h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; } .ssla-g-contact-split-reason p { margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.85; } .ssla-g-contact-split-cta { display: inline-block; font-weight: 700; color: inherit; border-bottom: 1.5px solid currentColor; text-decoration: none; } /* Form column — host for the embedded SSLA_Form_Renderer output */ .ssla-g-contact-split-form { width: 100%; } @media (max-width: 860px) { .ssla-g-contact-split-inner { grid-template-columns: 1fr; gap: 40px; } .ssla-g-contact-split-reasons { grid-template-columns: 1fr; } } /* ─────── g-content-split ─────── */ /* === g-content-split — greenfield canonical, slot-contract form === */ /* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5. */ /* ── Base layout ── */ .ssla-g-content-split { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-content-split-fg); } .ssla-g-content-split-inner { max-width: var(--g-content-split-content-max-width); margin: 0 auto; padding: var(--g-content-split-section-padding) 48px; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-content-split-media-side-gap); align-items: center; } /* ── Fullbleed ── */ .alignfull .ssla-g-content-split-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Text column ── */ .ssla-g-content-split-eyebrow { color: var(--g-content-split-eyebrow); font-size: var(--g-content-split-eyebrow-size); letter-spacing: var(--g-content-split-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0 0 20px; } .ssla-g-content-split-heading { font-family: var(--g-content-split-heading-family); font-size: var(--g-content-split-heading-size); font-weight: var(--g-content-split-heading-weight); letter-spacing: var(--g-content-split-heading-letter); line-height: 1.15; margin: 0 0 24px; } .ssla-g-content-split-body { font-family: var(--g-content-split-body-family); font-size: var(--g-content-split-body-size); line-height: var(--g-content-split-body-line-height); margin: 0 0 32px; } .ssla-g-content-split-body p { margin: 0 0 14px; } .ssla-g-content-split-body p:last-child { margin-bottom: 0; } /* ── CTA ── */ .ssla-g-content-split-cta { display: inline-block; background: var(--ssla-button-fill, var(--g-content-split-cta-bg)); color: var(--ssla-button-text, var(--g-content-split-cta-fg)); padding: var(--g-content-split-button-padding); border-radius: var(--g-content-split-button-radius); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; } .ssla-g-content-split-cta:empty { display: none; } /* ── Media column ── */ .ssla-g-content-split-media { width: 100%; aspect-ratio: 4 / 3; background: var(--g-content-split-media-line); overflow: hidden; } .ssla-g-content-split-media img, .ssla-g-content-split-media video, .ssla-g-content-split-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; } body.ssla-ov-editing .ssla-g-content-split-media[data-required="1"]:empty { border: 2px dashed var(--g-content-split-media-line); display: flex; align-items: center; justify-content: center; } /* ── Structural variant: media_side (per §3.4) ── */ .ssla-g-content-split--media-side-left .ssla-g-content-split-inner { grid-template-areas: "media text"; } .ssla-g-content-split--media-side-left .ssla-g-content-split-text { text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */ grid-area: text; } .ssla-g-content-split--media-side-left .ssla-g-content-split-media { grid-area: media; } /* ── Structural variant: density (per §3.4) ── */ .ssla-g-content-split--density-minimal .ssla-g-content-split-eyebrow, .ssla-g-content-split--density-minimal .ssla-g-content-split-body, .ssla-g-content-split--density-minimal .ssla-g-content-split-cta { display: none; } .ssla-g-content-split--density-standard .ssla-g-content-split-eyebrow, .ssla-g-content-split--density-standard .ssla-g-content-split-cta { display: none; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-content-split-inner { grid-template-columns: 1fr; gap: 48px; padding: 60px 24px; } .ssla-g-content-split--media-side-left .ssla-g-content-split-inner { grid-template-areas: none; } } /* ═══ Skeleton state per §3.5 ═══ */ .ssla-section.ssla-g-content-split { --g-content-split-fg: var(--brand-fg); --g-content-split-eyebrow: var(--brand-accent); --g-content-split-cta-bg: var(--brand-accent); --g-content-split-cta-fg: var(--brand-bg); --g-content-split-heading-family: var(--brand-heading-family); --g-content-split-heading-size: var(--brand-h2-size-clamp); --g-content-split-heading-weight: var(--brand-heading-weight); --g-content-split-heading-letter: var(--brand-letter-spacing-h2); --g-content-split-body-family: var(--brand-body-family); --g-content-split-body-size: var(--brand-body-size); --g-content-split-body-line-height: var(--brand-body-line-height); --g-content-split-eyebrow-size: var(--brand-eyebrow-size); --g-content-split-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-content-split-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-content-split-content-max-width:var(--brand-content-max-width); --g-content-split-button-padding: var(--brand-button-padding); --g-content-split-button-radius: var(--brand-button-radius); --g-content-split-media-side-gap: var(--brand-gutter); --g-content-split-media-line: var(--brand-line); } /* ─────── g-content-text ─────── */ /** * Greenfield canonical: Content — Text * v3.18.48 */ .ssla-section.ssla-g-content-text { background-color: var(--ssla-bg-color, transparent); color: var(--g-content-text-fg); padding: var(--g-content-text-section-padding); } .ssla-g-content-text-inner { max-width: var(--g-content-text-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 16px; } .ssla-g-content-text-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-content-text-eyebrow); } .ssla-g-content-text-heading { font: 700 var(--g-content-text-heading-size, clamp(28px, 4vw, 44px))/1.15 var(--g-content-text-heading-family, var(--shell-hf, system-ui)); color: var(--g-content-text-heading); margin: 0; } .ssla-g-content-text-body { font: 400 var(--g-content-text-body-size, 18px)/1.65 var(--g-content-text-body-family, var(--shell-bf, system-ui)); color: var(--g-content-text-body); margin: 0; } .ssla-g-content-text-body p { margin: 0 0 16px; } .ssla-g-content-text-body p:last-child { margin-bottom: 0; } /* Density */ .ssla-g-content-text--density-standard .ssla-g-content-text-eyebrow { display: none; } /* density-rich: all visible */ /* Width */ .ssla-g-content-text--width-narrow .ssla-g-content-text-inner { max-width: 720px; } .ssla-g-content-text--width-standard .ssla-g-content-text-inner { max-width: 1200px; } /* Skeleton */ .ssla-g-content-text { --g-content-text-fg: var(--brand-fg); --g-content-text-eyebrow: var(--brand-accent); --g-content-text-heading: var(--brand-fg); --g-content-text-body: var(--brand-fg); --g-content-text-heading-family: var(--shell-hf, system-ui); --g-content-text-heading-size: clamp(28px, 4vw, 44px); --g-content-text-body-family: var(--shell-bf, system-ui); --g-content-text-body-size: 18px; --g-content-text-section-padding: 0; --g-content-text-content-max-width: 720px; } /* Tone variants */ .ssla-g-content-text--tone-light { --g-content-text-fg: #1a1a1a; --g-content-text-heading: #1a1a1a; --g-content-text-body: #333333; } .ssla-g-content-text--tone-dark { --g-content-text-fg: #f5f5f5; --g-content-text-heading: #ffffff; --g-content-text-body: #d0d0d0; } .ssla-g-content-text--tone-accent { --g-content-text-fg: var(--preset-accent-fg, #1a1a1a); --g-content-text-heading: var(--preset-accent-fg, #1a1a1a); --g-content-text-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-content-text-inner { padding: 40px 16px; } .ssla-g-content-text-heading { font-size: clamp(24px, 6vw, 32px); } } /* ─────── g-content-tracks ─────── */ /* === g-content-tracks — greenfield survivor conform (last survivor) === */ /* Surface = core --ssla-bg-color on root (§7.1). Tone surface from the shared */ /* [data-ssla-variant-tone] rule (§7.3); the tone classes below set FOREGROUND */ /* + track chrome ONLY — never the section bg. Legacy .ssla-tone-light dead */ /* branch is gone. */ .ssla-section.ssla-g-content-tracks { background-color: var(--ssla-bg-color, transparent); color: var(--g-content-tracks-fg, #e6e8eb); } .ssla-g-content-tracks-inner { max-width: var(--g-content-tracks-content-max-width, 1120px); margin: 0 auto; padding: var(--g-content-tracks-section-padding, 80px) 24px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-content-tracks-column-gap, 56px); align-items: start; } .alignfull .ssla-g-content-tracks-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* Text zone */ .ssla-g-content-tracks-eyebrow { display: block; font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-content-tracks-eyebrow, inherit); margin: 0 0 14px; } .ssla-g-content-tracks-heading { font: 700 var(--g-content-tracks-heading-size, clamp(26px, 3.4vw, 38px))/1.15 var(--g-content-tracks-heading-family, var(--shell-hf, system-ui)); color: var(--g-content-tracks-heading, inherit); margin: 0 0 16px; } .ssla-g-content-tracks-body { font: 400 var(--g-content-tracks-body-size, 17px)/1.6 var(--g-content-tracks-body-family, var(--shell-bf, system-ui)); color: var(--g-content-tracks-body, inherit); margin: 0; } /* Tracks zone (vertical stack of cards) */ .ssla-g-content-tracks-tracks { display: flex; flex-direction: column; gap: var(--g-content-tracks-track-gap, 16px); } .ssla-g-content-tracks-track { padding: var(--g-content-tracks-track-padding, 24px); background: var(--g-content-tracks-track-bg, rgba(127,127,127,0.06)); border: 1px solid var(--g-content-tracks-track-border, rgba(127,127,127,0.18)); transition: background .2s, border-color .2s; } .ssla-g-content-tracks-track-label { display: block; font: 600 11px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-content-tracks-eyebrow, inherit); margin: 0 0 6px; } .ssla-g-content-tracks-track-heading { font: 600 19px/1.3 var(--g-content-tracks-heading-family, var(--shell-hf, system-ui)); color: var(--g-content-tracks-heading, inherit); margin: 0 0 8px; } .ssla-g-content-tracks-track-body { font: 400 15px/1.55 var(--g-content-tracks-body-family, var(--shell-bf, system-ui)); color: var(--g-content-tracks-body, inherit); margin: 0; } /* Density: hide leading text-zone fields */ .ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-eyebrow, .ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-heading, .ssla-g-content-tracks--density-minimal .ssla-g-content-tracks-body, .ssla-g-content-tracks--density-standard .ssla-g-content-tracks-eyebrow, .ssla-g-content-tracks--density-standard .ssla-g-content-tracks-body { display: none; } @media (max-width: 860px) { .ssla-g-content-tracks-inner { grid-template-columns: 1fr; gap: 36px; } } /* ─────── g-cta ─────── */ /* === g-cta — greenfield canonical, slot-contract form === */ /* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5. */ /* button_style: structural shape cascades; paint slots resolve fill/ */ /* text/border per variant value (per §3.4 + handoff §7 resolution). */ /* ── Base layout ── */ .ssla-g-cta { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-cta-fg); } .ssla-g-cta-inner { max-width: var(--g-cta-content-max-width); margin: 0 auto; padding: var(--g-cta-section-padding) 48px; position: relative; z-index: 1; text-align: var(--ssla-text-align, center); } /* ── Fullbleed ── */ .alignfull .ssla-g-cta-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Typography ── */ .ssla-g-cta-heading { font-family: var(--g-cta-heading-family); font-size: var(--g-cta-heading-size); font-weight: var(--g-cta-heading-weight); color: var(--g-cta-heading); line-height: 1.2; margin: 0 0 16px; } .ssla-g-cta-body { font-family: var(--g-cta-body-family); font-size: var(--g-cta-body-size); line-height: var(--g-cta-body-line-height); color: var(--g-cta-body); margin: 0 0 32px; } .ssla-g-cta-body p { margin: 0; } /* ── Button base (paint comes from slot tokens; shape from button_style) ── */ .ssla-g-cta-button { display: inline-block; background: var(--ssla-button-fill, var(--g-cta-button-fill)); color: var(--ssla-button-text, var(--g-cta-button-text)); border: var(--g-cta-button-border); padding: var(--g-cta-button-padding); border-radius: var(--g-cta-button-radius); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: transform .25s ease; } .ssla-g-cta-button:empty { display: none; } /* ── Structural variant: button_style shape (per §3.4 + handoff §7) ── */ /* Border/radius/padding shape lives in CSS; fill/text/border color is */ /* slot-driven per variant value via Simple Theme emission. */ .ssla-g-cta--button-style-chip .ssla-g-cta-button { border-radius: 999px; padding: 14px 32px; } /* v3.18.31 — outline button. Was declared in the manifest (button_style: * outline) but had no rule, so it fell back to the solid base and looked * identical to Solid. Outline inverts the solid treatment: transparent fill * with border + text in the FILL/accent token (--g-cta-button-fill), which the * skeleton block (§3.5) already resolves to --brand-accent, so it's visible in * the bare lab and a preset recolors it. No currentColor fallback (§3.3/§3.5). */ .ssla-g-cta--button-style-outline .ssla-g-cta-button { background: transparent; border: 1.5px solid var(--ssla-button-fill, var(--g-cta-button-fill)); color: var(--ssla-button-fill, var(--g-cta-button-fill)); } .ssla-g-cta--button-style-ghost .ssla-g-cta-button { padding: 0; /* v3.21.19 — ghost is text-only: drop the inherited base fill + border and ride the accent/fill slot for the label so it contrasts the section tone (mirrors button-style-outline's slot-driven, tone-aware treatment). */ background: transparent; border: 0; color: var(--ssla-button-fill, var(--g-cta-button-fill)); } .ssla-g-cta--button-style-ghost .ssla-g-cta-button::after { content: ' →'; } /* ── Structural variant: width (per §3.4; was 'treatment' — alignment * moved to universal text_align in v3.18.32, banner kept as a layout) ── */ .ssla-g-cta--width-banner .ssla-g-cta-inner { max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; /* v3.18.33 / TA-banner — text-align is inert on flex children, so the * universal alignment must drive justify-content here (it accepts * left/center/right). Unset keeps the banner's space-between signature. */ justify-content: var(--ssla-text-align, space-between); gap: 32px; text-align: var(--ssla-text-align, left); } .ssla-g-cta--width-banner .ssla-g-cta-heading { margin: 0; flex: 1 1 60%; } .ssla-g-cta--width-banner .ssla-g-cta-body { margin: 0; flex: 1 1 100%; } .ssla-g-cta--width-banner .ssla-g-cta-button { flex: 0 0 auto; } /* ── Structural variant: spacing (per §3.4) ── */ .ssla-g-cta--spacing-compact .ssla-g-cta-inner { padding-top: 48px; padding-bottom: 48px; } .ssla-g-cta--spacing-roomy .ssla-g-cta-inner { padding-top: 140px; padding-bottom: 140px; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-cta-inner { padding: 60px 24px; } } /* ═══ Skeleton state per §3.5 ═══ */ .ssla-section.ssla-g-cta { --g-cta-fg: var(--brand-fg); --g-cta-heading: var(--brand-fg); --g-cta-body: var(--brand-fg); --g-cta-button-fill: var(--brand-accent); --g-cta-button-text: var(--brand-bg); --g-cta-button-border: 0; --g-cta-heading-family: var(--brand-heading-family); --g-cta-heading-size: var(--brand-h2-size-clamp); --g-cta-heading-weight: var(--brand-heading-weight); --g-cta-body-family: var(--brand-body-family); --g-cta-body-size: var(--brand-body-size); --g-cta-body-line-height: var(--brand-body-line-height); --g-cta-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-cta-content-max-width: var(--brand-content-max-width-narrow); --g-cta-button-padding: var(--brand-button-padding); --g-cta-button-radius: var(--brand-button-radius); } /* ─────── g-faq ─────── */ /* === g-faq — greenfield canonical, slot-contract form === */ /* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5. */ /* ── Base layout ── */ .ssla-g-faq { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-faq-fg); } .ssla-g-faq-inner { text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */ max-width: var(--g-faq-content-max-width); margin: 0 auto; padding: var(--g-faq-section-padding) 48px; position: relative; z-index: 1; } /* ── Fullbleed ── */ .alignfull .ssla-g-faq-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Header ── */ .ssla-g-faq-header { text-align: center; margin: 0 auto 64px; max-width: 720px; } .ssla-g-faq-eyebrow { color: var(--g-faq-eyebrow); font-size: var(--g-faq-eyebrow-size); letter-spacing: var(--g-faq-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0 0 20px; } .ssla-g-faq-heading { font-family: var(--g-faq-heading-family); font-size: var(--g-faq-heading-size); font-weight: var(--g-faq-heading-weight); line-height: 1.15; margin: 0; } /* ── Items (stacked, default) ── */ .ssla-g-faq-items { max-width: 800px; margin: 0 auto; } .ssla-g-faq-item { padding: 32px 0; border-top: 1px solid var(--g-faq-line); } .ssla-g-faq-item:last-child { border-bottom: 1px solid var(--g-faq-line); } .ssla-g-faq-question { font-family: var(--g-faq-question-family); font-size: var(--g-faq-question-size); font-weight: var(--g-faq-question-weight); line-height: 1.4; margin: 0 0 12px; } .ssla-g-faq-answer { font-family: var(--g-faq-answer-family); font-size: var(--g-faq-answer-size); line-height: var(--g-faq-answer-line-height); opacity: 0.85; } .ssla-g-faq-answer p { margin: 0 0 12px; } .ssla-g-faq-answer p:last-child { margin-bottom: 0; } /* ── Structural variant: layout (per §3.4) ── */ .ssla-g-faq--layout-two-col .ssla-g-faq-items { max-width: 1100px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; } .ssla-g-faq--layout-two-col .ssla-g-faq-item { padding: 24px 0; border-top: 1px solid var(--g-faq-line); border-bottom: none; } .ssla-g-faq--layout-two-col .ssla-g-faq-item:last-child { border-bottom: none; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-faq--layout-two-col .ssla-g-faq-items { grid-template-columns: 1fr; gap: 0; } .ssla-g-faq-inner { padding: 60px 24px; } } /* ═══ Skeleton state per §3.5 ═══ */ .ssla-section.ssla-g-faq { --g-faq-fg: var(--brand-fg); --g-faq-eyebrow: var(--brand-accent); --g-faq-line: var(--brand-line); --g-faq-heading-family: var(--brand-heading-family); --g-faq-heading-size: var(--brand-h2-size-clamp); --g-faq-heading-weight: var(--brand-heading-weight); --g-faq-question-family: var(--brand-heading-family); --g-faq-question-size: var(--brand-h3-size); --g-faq-question-weight: 700; --g-faq-answer-family: var(--brand-body-family); --g-faq-answer-size: var(--brand-body-size); --g-faq-answer-line-height: var(--brand-body-line-height); --g-faq-eyebrow-size: var(--brand-eyebrow-size); --g-faq-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-faq-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-faq-content-max-width: var(--brand-content-max-width); } /* ─────── g-form ─────── */ /** * Greenfield canonical: Form * v3.21.19 */ .ssla-section.ssla-g-form { background-color: var(--ssla-bg-color, transparent); color: var(--g-form-fg); padding: var(--g-form-section-padding); } .ssla-g-form-inner { max-width: var(--g-form-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: var(--g-form-gap, 40px); } .ssla-g-form-content { display: flex; flex-direction: column; gap: 14px; } .ssla-g-form-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-form-eyebrow); } .ssla-g-form-heading { font: 700 var(--g-form-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-form-heading-family, var(--shell-hf, system-ui)); color: var(--g-form-heading); margin: 0; } .ssla-g-form-lede { font: 400 var(--g-form-body-size, 18px)/1.55 var(--g-form-body-family, var(--shell-bf, system-ui)); color: var(--g-form-body); margin: 0; } .ssla-g-form-secondary-cta { font: 600 14px/1 var(--shell-bf, system-ui); color: var(--g-form-heading); text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; } .ssla-g-form-formwrap { display: flex; flex-direction: column; gap: 12px; } .ssla-g-form-form :where(input, textarea, select) { border: 1px solid var(--g-form-field-border); background: transparent; color: inherit; font: 400 15px/1.4 var(--g-form-body-family, var(--shell-bf, system-ui)); padding: 12px 14px; width: 100%; } /* Layout — split places content beside the form */ .ssla-g-form--layout-split .ssla-g-form-inner { flex-direction: row; align-items: flex-start; } .ssla-g-form--layout-split .ssla-g-form-content { flex: 1 1 45%; } .ssla-g-form--layout-split .ssla-g-form-formwrap { flex: 1 1 55%; } .ssla-g-form--layout-stacked .ssla-g-form-inner { max-width: 640px; } /* Density — minimal hides eyebrow, lede, secondary CTA */ .ssla-g-form--density-minimal .ssla-g-form-eyebrow, .ssla-g-form--density-minimal .ssla-g-form-lede, .ssla-g-form--density-minimal .ssla-g-form-secondary-cta { display: none; } /* Skeleton */ .ssla-g-form { --g-form-fg: var(--brand-fg); --g-form-eyebrow: var(--brand-accent); --g-form-heading: var(--brand-fg); --g-form-body: var(--brand-fg); --g-form-field-border: rgba(0,0,0,0.20); --g-form-heading-family: var(--shell-hf, system-ui); --g-form-heading-size: clamp(26px, 3.5vw, 40px); --g-form-body-family: var(--shell-bf, system-ui); --g-form-body-size: 18px; --g-form-section-padding: 0; --g-form-content-max-width: 1100px; --g-form-gap: 40px; } /* Tone */ .ssla-g-form--tone-light { --g-form-fg: #1a1a1a; --g-form-heading: #1a1a1a; --g-form-body: #4a4a4a; --g-form-field-border: rgba(0,0,0,0.20); } .ssla-g-form--tone-dark { --g-form-fg: #f5f5f5; --g-form-heading: #ffffff; --g-form-body: #d0d0d0; --g-form-field-border: rgba(255,255,255,0.22); } .ssla-g-form--tone-accent { --g-form-fg: var(--preset-accent-fg, #1a1a1a); --g-form-heading: var(--preset-accent-fg, #1a1a1a); --g-form-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-form-inner { padding: 40px 16px; } .ssla-g-form--layout-split .ssla-g-form-inner { flex-direction: column; } .ssla-g-form-heading { font-size: clamp(22px, 5vw, 30px); } } /* ─────── g-hero-full ─────── */ /* === g-hero-full — greenfield canonical, slot-contract form === */ /* Phase 0.1.f2 — rewritten per preset-architecture-v1.md §3.3 + §3.5. */ /* Section CSS consumes only var(--g-hero-full-*) and var(--brand-*). */ /* No --shell-*, no --paint-*, no currentColor fallbacks. Tone cascade */ /* lives in Simple Theme emission (§4.2), not here. */ /* ── Base layout ── */ .ssla-g-hero-full { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-hero-full-fg); } .ssla-g-hero-full-inner { text-align: var(--ssla-text-align, left); /* v3.18.32 f3.text-align */ max-width: var(--g-hero-full-content-max-width); margin: 0 auto; padding: var(--g-hero-full-section-padding) 48px; position: relative; z-index: 1; } /* ── Fullbleed ── */ .alignfull .ssla-g-hero-full-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } .ssla-g-hero-full.alignfull .ssla-g-hero-full-inner { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; } /* ── Typography ── */ .ssla-g-hero-full-eyebrow { color: var(--g-hero-full-eyebrow); font-size: var(--g-hero-full-eyebrow-size); letter-spacing: var(--g-hero-full-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0 0 24px; } .ssla-g-hero-full-heading { font-family: var(--g-hero-full-heading-family); font-size: var(--g-hero-full-heading-size); font-weight: var(--g-hero-full-heading-weight); letter-spacing: var(--g-hero-full-heading-letter); line-height: 1.05; margin: 0 0 24px; } .ssla-g-hero-full-body { font-family: var(--g-hero-full-body-family); font-size: var(--g-hero-full-body-size); line-height: var(--g-hero-full-body-line-height); max-width: 720px; margin: 0 0 40px; } .ssla-g-hero-full-body p { margin: 0 0 12px; } .ssla-g-hero-full-body p:last-child { margin-bottom: 0; } /* ── CTA ── */ .ssla-g-hero-full-actions { margin: 40px 0 0; } .ssla-g-hero-full-cta { display: inline-block; background: var(--ssla-button-fill, var(--g-hero-full-cta-bg)); color: var(--ssla-button-text, var(--g-hero-full-cta-fg)); padding: var(--g-hero-full-button-padding); border-radius: var(--g-hero-full-button-radius); font-weight: 800; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: transform .25s ease; } .ssla-g-hero-full-cta:empty { display: none; } /* ── Media slot — background mode (default) ── */ .ssla-g-hero-full-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .ssla-g-hero-full-media:empty { display: none; } .ssla-g-hero-full-media img, .ssla-g-hero-full-media video, .ssla-g-hero-full-media iframe { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Structural variant: media_position (per §3.4) ── */ .ssla-g-hero-full--media-position-inline .ssla-g-hero-full-media { position: static; margin: 40px 0 0; height: auto; inset: auto; } /* ── Structural variant: density (per §3.4) ── */ .ssla-g-hero-full--density-minimal .ssla-g-hero-full-eyebrow, .ssla-g-hero-full--density-minimal .ssla-g-hero-full-body, .ssla-g-hero-full--density-minimal .ssla-g-hero-full-actions, .ssla-g-hero-full--density-minimal .ssla-g-hero-full-media { display: none; } .ssla-g-hero-full--density-standard .ssla-g-hero-full-eyebrow, .ssla-g-hero-full--density-standard .ssla-g-hero-full-actions, .ssla-g-hero-full--density-standard .ssla-g-hero-full-media { display: none; } /* ── Mobile ── */ @media (max-width: 768px) { .ssla-g-hero-full-inner { padding: 60px 24px; } } /* ═══ Skeleton state per §3.5 ═══ */ /* Per-section slot defaults pointing to brand-level skeleton tokens. */ /* Simple Theme emission overrides via cascade order (§4.2). When no */ /* preset is active, these resolve via brand-level defaults in */ /* 0-shared.css and the section renders muted-but-functional. */ .ssla-section.ssla-g-hero-full { --g-hero-full-fg: var(--brand-fg); --g-hero-full-eyebrow: var(--brand-accent); --g-hero-full-cta-bg: var(--brand-accent); --g-hero-full-cta-fg: var(--brand-bg); --g-hero-full-heading-family: var(--brand-heading-family); --g-hero-full-heading-size: var(--brand-h1-size-clamp); --g-hero-full-heading-weight: var(--brand-heading-weight); --g-hero-full-heading-letter: var(--brand-letter-spacing-h1); --g-hero-full-body-family: var(--brand-body-family); --g-hero-full-body-size: var(--brand-body-size); --g-hero-full-body-line-height: var(--brand-body-line-height); --g-hero-full-eyebrow-size: var(--brand-eyebrow-size); --g-hero-full-eyebrow-letter: var(--brand-letter-spacing-eyebrow); --g-hero-full-section-padding: var(--paint-section-padding, var(--brand-section-padding, 80px)); --g-hero-full-content-max-width:var(--brand-content-max-width); --g-hero-full-button-padding: var(--brand-button-padding); --g-hero-full-button-radius: var(--brand-button-radius); } /* ─────── g-hero-half ─────── */ /** * Greenfield canonical: Hero — Half * v3.18.48 * * Skeleton + tone variants + density variants + text_align. */ /* ═══ Base shell ═══ */ .ssla-section.ssla-g-hero-half { background-color: var(--ssla-bg-color, transparent); color: var(--g-hero-half-fg); padding: var(--g-hero-half-section-padding); } .ssla-g-hero-half-inner { max-width: var(--g-hero-half-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 16px; min-height: 40vh; justify-content: center; } /* ═══ Components ═══ */ .ssla-g-hero-half-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-hero-half-eyebrow); } .ssla-g-hero-half-heading { font: 700 var(--g-hero-half-heading-size, clamp(28px, 4vw, 48px))/1.15 var(--g-hero-half-heading-family, var(--shell-hf, system-ui)); color: var(--g-hero-half-heading); margin: 0; } .ssla-g-hero-half-body { font: 400 var(--g-hero-half-body-size, 18px)/1.55 var(--g-hero-half-body-family, var(--shell-bf, system-ui)); color: var(--g-hero-half-body); margin: 0; max-width: 60ch; } .ssla-g-hero-half-cta { display: inline-block; padding: 12px 22px; font: 600 14px/1 var(--shell-bf, system-ui); text-decoration: none; background: var(--ssla-button-fill, var(--g-hero-half-heading, #1a1a1a)); color: var(--ssla-button-text, var(--g-hero-half-bg, #fff)); border: 1px solid var(--ssla-button-fill, var(--g-hero-half-heading, #1a1a1a)); align-self: flex-start; margin-top: 8px; } /* ═══ Density variants ═══ */ .ssla-g-hero-half--density-minimal .ssla-g-hero-half-eyebrow, .ssla-g-hero-half--density-minimal .ssla-g-hero-half-body, .ssla-g-hero-half--density-minimal .ssla-g-hero-half-cta { display: none; } .ssla-g-hero-half--density-standard .ssla-g-hero-half-eyebrow, .ssla-g-hero-half--density-standard .ssla-g-hero-half-cta { display: none; } /* density-rich: all visible (default) */ /* ═══ Text alignment ═══ */ .ssla-g-hero-half--text-align-center .ssla-g-hero-half-inner { align-items: center; text-align: center; } .ssla-g-hero-half--text-align-center .ssla-g-hero-half-cta { align-self: center; } .ssla-g-hero-half--text-align-center .ssla-g-hero-half-body { margin-left: auto; margin-right: auto; } /* ═══ Skeleton state per §3.5 ═══ */ .ssla-g-hero-half { --g-hero-half-fg: var(--brand-fg); --g-hero-half-eyebrow: var(--brand-accent); --g-hero-half-heading: var(--brand-fg); --g-hero-half-body: var(--brand-fg); --g-hero-half-heading-family: var(--shell-hf, system-ui); --g-hero-half-heading-size: clamp(28px, 4vw, 48px); --g-hero-half-body-family: var(--shell-bf, system-ui); --g-hero-half-body-size: 18px; --g-hero-half-section-padding: 0; --g-hero-half-content-max-width: 1200px; } /* ═══ Tone variants ═══ */ .ssla-g-hero-half--tone-light { --g-hero-half-fg: #1a1a1a; --g-hero-half-heading: #1a1a1a; --g-hero-half-body: #4a4a4a; } .ssla-g-hero-half--tone-dark { --g-hero-half-fg: #f5f5f5; --g-hero-half-heading: #ffffff; --g-hero-half-body: #d0d0d0; } .ssla-g-hero-half--tone-accent { --g-hero-half-fg: var(--preset-accent-fg, #1a1a1a); --g-hero-half-heading: var(--preset-accent-fg, #1a1a1a); --g-hero-half-body: var(--preset-accent-fg, #1a1a1a); } /* Mobile */ @media (max-width: 768px) { .ssla-g-hero-half-inner { padding: 32px 16px; min-height: 30vh; } .ssla-g-hero-half-heading { font-size: clamp(24px, 6vw, 36px); } .ssla-g-hero-half-body { font-size: 16px; } } /* ─────── g-hero-split ─────── */ /** * Greenfield canonical: Hero — Split * v3.18.48 */ .ssla-section.ssla-g-hero-split { background-color: var(--ssla-bg-color, transparent); color: var(--g-hero-split-fg); padding: var(--g-hero-split-section-padding); } .ssla-g-hero-split-inner { max-width: var(--g-hero-split-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .ssla-g-hero-split-text { display: flex; flex-direction: column; gap: 16px; } .ssla-g-hero-split-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-hero-split-eyebrow); } .ssla-g-hero-split-heading { font: 700 var(--g-hero-split-heading-size, clamp(32px, 4.5vw, 56px))/1.1 var(--g-hero-split-heading-family, var(--shell-hf, system-ui)); color: var(--g-hero-split-heading); margin: 0; } .ssla-g-hero-split-body { font: 400 var(--g-hero-split-body-size, 18px)/1.55 var(--g-hero-split-body-family, var(--shell-bf, system-ui)); color: var(--g-hero-split-body); margin: 0; } .ssla-g-hero-split-cta { display: inline-block; padding: 12px 22px; font: 600 14px/1 var(--shell-bf, system-ui); text-decoration: none; background: var(--ssla-button-fill, var(--g-hero-split-heading, #1a1a1a)); color: var(--ssla-button-text, var(--g-hero-split-bg, #fff)); border: 1px solid var(--ssla-button-fill, var(--g-hero-split-heading, #1a1a1a)); align-self: flex-start; margin-top: 8px; } .ssla-g-hero-split-media { aspect-ratio: 4 / 3; background: rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; overflow: hidden; } .ssla-g-hero-split-media img, .ssla-g-hero-split-media video, .ssla-g-hero-split-media iframe { width: 100%; height: 100%; object-fit: cover; border: none; } /* ═══ Media side variants ═══ */ .ssla-g-hero-split--media-side-left .ssla-g-hero-split-inner { grid-template-columns: 1fr 1fr; } .ssla-g-hero-split--media-side-left .ssla-g-hero-split-media { order: 0; } .ssla-g-hero-split--media-side-left .ssla-g-hero-split-text { order: 1; } /* ═══ Density variants ═══ */ .ssla-g-hero-split--density-minimal .ssla-g-hero-split-eyebrow, .ssla-g-hero-split--density-minimal .ssla-g-hero-split-body, .ssla-g-hero-split--density-minimal .ssla-g-hero-split-cta { display: none; } .ssla-g-hero-split--density-standard .ssla-g-hero-split-eyebrow, .ssla-g-hero-split--density-standard .ssla-g-hero-split-cta { display: none; } /* density-rich: all visible */ /* ═══ Skeleton ═══ */ .ssla-g-hero-split { --g-hero-split-fg: var(--brand-fg); --g-hero-split-eyebrow: var(--brand-accent); --g-hero-split-heading: var(--brand-fg); --g-hero-split-body: var(--brand-fg); --g-hero-split-heading-family: var(--shell-hf, system-ui); --g-hero-split-heading-size: clamp(32px, 4.5vw, 56px); --g-hero-split-body-family: var(--shell-bf, system-ui); --g-hero-split-body-size: 18px; --g-hero-split-section-padding: 0; --g-hero-split-content-max-width: 1200px; } /* Tone variants */ .ssla-g-hero-split--tone-light { --g-hero-split-fg: #1a1a1a; --g-hero-split-heading: #1a1a1a; --g-hero-split-body: #4a4a4a; } .ssla-g-hero-split--tone-dark { --g-hero-split-fg: #f5f5f5; --g-hero-split-heading: #ffffff; --g-hero-split-body: #d0d0d0; } .ssla-g-hero-split--tone-accent { --g-hero-split-fg: var(--preset-accent-fg, #1a1a1a); --g-hero-split-heading: var(--preset-accent-fg, #1a1a1a); --g-hero-split-body: var(--preset-accent-fg, #1a1a1a); } /* Mobile */ @media (max-width: 768px) { .ssla-g-hero-split-inner { padding: 40px 16px; grid-template-columns: 1fr; gap: 24px; } .ssla-g-hero-split--media-side-left .ssla-g-hero-split-media { order: 1; } .ssla-g-hero-split--media-side-left .ssla-g-hero-split-text { order: 0; } .ssla-g-hero-split-heading { font-size: clamp(28px, 7vw, 40px); } } /* ─────── g-hero-stats ─────── */ /** * Greenfield canonical: Hero — Stats * v3.18.48 */ .ssla-section.ssla-g-hero-stats { background-color: var(--ssla-bg-color, transparent); color: var(--g-hero-stats-fg); padding: var(--g-hero-stats-section-padding); } .ssla-g-hero-stats-inner { max-width: var(--g-hero-stats-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px 64px; display: flex; flex-direction: column; gap: 48px; } .ssla-g-hero-stats-text { display: flex; flex-direction: column; gap: 16px; max-width: 720px; } .ssla-g-hero-stats-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-hero-stats-eyebrow); } .ssla-g-hero-stats-heading { font: 700 var(--g-hero-stats-heading-size, clamp(32px, 5vw, 56px))/1.1 var(--g-hero-stats-heading-family, var(--shell-hf, system-ui)); color: var(--g-hero-stats-heading); margin: 0; } .ssla-g-hero-stats-body { font: 400 var(--g-hero-stats-body-size, 18px)/1.55 var(--g-hero-stats-body-family, var(--shell-bf, system-ui)); color: var(--g-hero-stats-body); margin: 0; } .ssla-g-hero-stats-cta { display: inline-block; padding: 12px 22px; font: 600 14px/1 var(--shell-bf, system-ui); text-decoration: none; background: var(--ssla-button-fill, var(--g-hero-stats-heading, #1a1a1a)); color: var(--ssla-button-text, var(--g-hero-stats-bg, #fff)); border: 1px solid var(--ssla-button-fill, var(--g-hero-stats-heading, #1a1a1a)); align-self: flex-start; margin-top: 8px; } .ssla-g-hero-stats-strip { display: grid; gap: 24px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); } .ssla-g-hero-stats-cell { display: flex; flex-direction: column; gap: 4px; } .ssla-g-hero-stats-value { font: 700 var(--g-hero-stats-value-size, clamp(32px, 4.5vw, 48px))/1 var(--g-hero-stats-heading-family, var(--shell-hf, system-ui)); color: var(--g-hero-stats-value); } .ssla-g-hero-stats-label { font: 600 12px/1.3 var(--g-hero-stats-body-family, var(--shell-bf, system-ui)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-hero-stats-body); opacity: 0.8; } /* Count */ .ssla-g-hero-stats--count-three .ssla-g-hero-stats-strip { grid-template-columns: repeat(3, 1fr); } .ssla-g-hero-stats--count-four .ssla-g-hero-stats-strip { grid-template-columns: repeat(4, 1fr); } /* Density */ .ssla-g-hero-stats--density-standard .ssla-g-hero-stats-eyebrow, .ssla-g-hero-stats--density-standard .ssla-g-hero-stats-cta { display: none; } /* density-rich: all visible */ /* Skeleton */ .ssla-g-hero-stats { --g-hero-stats-fg: var(--brand-fg); --g-hero-stats-eyebrow: var(--brand-accent); --g-hero-stats-heading: var(--brand-fg); --g-hero-stats-body: var(--brand-fg); --g-hero-stats-value: var(--brand-fg); --g-hero-stats-heading-family: var(--shell-hf, system-ui); --g-hero-stats-heading-size: clamp(32px, 5vw, 56px); --g-hero-stats-body-family: var(--shell-bf, system-ui); --g-hero-stats-body-size: 18px; --g-hero-stats-value-size: clamp(32px, 4.5vw, 48px); --g-hero-stats-section-padding: 0; --g-hero-stats-content-max-width: 1200px; } /* Tone */ .ssla-g-hero-stats--tone-light { --g-hero-stats-fg: #1a1a1a; --g-hero-stats-heading: #1a1a1a; --g-hero-stats-body: #4a4a4a; --g-hero-stats-value: #1a1a1a; } .ssla-g-hero-stats--tone-light .ssla-g-hero-stats-strip { border-top-color: rgba(0,0,0,0.12); } .ssla-g-hero-stats--tone-dark { --g-hero-stats-fg: #f5f5f5; --g-hero-stats-heading: #ffffff; --g-hero-stats-body: #d0d0d0; --g-hero-stats-value: #ffffff; } .ssla-g-hero-stats--tone-accent { --g-hero-stats-fg: var(--preset-accent-fg, #1a1a1a); --g-hero-stats-heading: var(--preset-accent-fg, #1a1a1a); --g-hero-stats-body: var(--preset-accent-fg, #1a1a1a); --g-hero-stats-value: var(--preset-accent-fg, #1a1a1a); } .ssla-g-hero-stats--tone-accent .ssla-g-hero-stats-strip { border-top-color: rgba(0,0,0,0.12); } @media (max-width: 768px) { .ssla-g-hero-stats-inner { padding: 48px 16px 40px; gap: 32px; } .ssla-g-hero-stats-strip { grid-template-columns: repeat(2, 1fr) !important; } .ssla-g-hero-stats-heading { font-size: clamp(28px, 7vw, 40px); } .ssla-g-hero-stats-value { font-size: clamp(28px, 7vw, 40px); } } /* ─────── g-list ─────── */ /* === g-list — greenfield canonical, slot-contract form === */ /* v3.18.40 / BE-B0 — general-purpose list section. Marker glyph is CSS-driven via .ssla-g-list--marker-{value} wrapper class; PHP stays glyph-agnostic. */ /* ── Slot defaults (fallbacks; presets override via Hub) ── */ .ssla-g-list { --g-list-fg: var(--shell-h, #1d1d1b); --g-list-eyebrow: var(--shell-h, #1d1d1b); --g-list-line: rgba(0, 0, 0, 0.08); --g-list-marker-accent: var(--shell-h, #1d1d1b); --g-list-heading-family: var(--shell-hf, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif); --g-list-heading-size: clamp(28px, 4vw, 44px); --g-list-heading-weight: 700; --g-list-text-family: var(--shell-bf, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif); --g-list-text-size: 17px; --g-list-text-line-height: 1.55; --g-list-detail-size: 15px; --g-list-detail-color: rgba(29, 29, 27, 0.72); --g-list-marker-size: 15px; --g-list-marker-gap: 16px; --g-list-eyebrow-size: 13px; --g-list-eyebrow-letter: 0.16em; --g-list-section-padding: var(--paint-section-padding, 80px); --g-list-content-max-width: 1200px; } /* ── Base layout ── */ .ssla-g-list { width: 100%; position: relative; overflow: hidden; background-color: var(--ssla-bg-color, transparent); color: var(--g-list-fg); } .ssla-g-list-inner { text-align: var(--ssla-text-align, left); max-width: var(--g-list-content-max-width); margin: 0 auto; padding: var(--g-list-section-padding) 48px; position: relative; z-index: 1; } /* ── Fullbleed ── */ .alignfull .ssla-g-list-inner { max-width: 100%; padding-left: 48px; padding-right: 48px; } /* ── Header ── */ .ssla-g-list-header { text-align: center; margin: 0 auto 56px; max-width: 720px; } .ssla-g-list-eyebrow { color: var(--g-list-eyebrow); font-size: var(--g-list-eyebrow-size); letter-spacing: var(--g-list-eyebrow-letter); font-weight: 800; text-transform: uppercase; margin: 0 0 20px; } .ssla-g-list-heading { font-family: var(--g-list-heading-family); font-size: var(--g-list-heading-size); font-weight: var(--g-list-heading-weight); line-height: 1.15; margin: 0; } /* ── Items (stacked, default) ── */ .ssla-g-list-items { list-style: none; margin: 0 auto; padding: 0; max-width: 800px; } .ssla-g-list-item { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0 var(--g-list-marker-gap); padding: 14px 0; } .ssla-g-list-item + .ssla-g-list-item { border-top: 1px solid var(--g-list-line); } .ssla-g-list-marker { font-family: var(--g-list-text-family); font-size: var(--g-list-marker-size); font-weight: 700; line-height: var(--g-list-text-line-height); color: var(--g-list-marker-accent); min-width: 22px; text-align: center; user-select: none; } .ssla-g-list-body { min-width: 0; } .ssla-g-list-text { font-family: var(--g-list-text-family); font-size: var(--g-list-text-size); line-height: var(--g-list-text-line-height); margin: 0; } .ssla-g-list-detail { font-family: var(--g-list-text-family); font-size: var(--g-list-detail-size); line-height: var(--g-list-text-line-height); color: var(--g-list-detail-color); margin: 6px 0 0; } /* ── Marker glyphs (CSS-driven per wrapper class) ── */ .ssla-g-list--marker-bullet .ssla-g-list-marker::before { content: "\2022"; /* • */ font-size: 1.4em; line-height: 1; position: relative; top: 0.05em; } .ssla-g-list--marker-number .ssla-g-list-item { counter-increment: ssla-g-list-counter; } .ssla-g-list--marker-number .ssla-g-list-items { counter-reset: ssla-g-list-counter; } .ssla-g-list--marker-number .ssla-g-list-marker::before { content: counter(ssla-g-list-counter) "."; } .ssla-g-list--marker-check .ssla-g-list-marker::before { content: "\2713"; /* ✓ */ font-size: 1.05em; font-weight: 700; } .ssla-g-list--marker-none .ssla-g-list-item { grid-template-columns: 1fr; } .ssla-g-list--marker-none .ssla-g-list-marker { display: none; } /* ── Layout: two-column ── */ .ssla-g-list--layout-two-col .ssla-g-list-items { max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; } .ssla-g-list--layout-two-col .ssla-g-list-item + .ssla-g-list-item { border-top: 1px solid var(--g-list-line); } /* Reset top-border for the row 1 item in the right column */ .ssla-g-list--layout-two-col .ssla-g-list-item:nth-child(2) { border-top: none; } /* ── Layout: three-column ── */ .ssla-g-list--layout-three-col .ssla-g-list-items { max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .ssla-g-list--layout-three-col .ssla-g-list-item { padding: 0; border: none !important; } /* ── Tone variants ── */ .ssla-g-list--tone-light { --g-list-fg: #1d1d1b; --g-list-eyebrow: #1d1d1b; --g-list-line: rgba(0, 0, 0, 0.08); --g-list-marker-accent: #1d1d1b; --g-list-detail-color: rgba(29, 29, 27, 0.72); } .ssla-g-list--tone-dark { --g-list-fg: #ffffff; --g-list-eyebrow: rgba(255, 255, 255, 0.85); --g-list-line: rgba(255, 255, 255, 0.10); --g-list-marker-accent: #ffffff; --g-list-detail-color: rgba(255, 255, 255, 0.70); } .ssla-g-list--tone-accent { --g-list-fg: var(--preset-accent-fg, #1d1d1b); --g-list-eyebrow: var(--preset-accent-fg, #1d1d1b); --g-list-line: var(--preset-accent-line, rgba(0, 0, 0, 0.10)); --g-list-marker-accent: var(--preset-accent-h, #1d1d1b); --g-list-detail-color: var(--preset-accent-detail, rgba(29, 29, 27, 0.72)); } /* ── Responsive ── */ @media (max-width: 768px) { .ssla-g-list-inner { padding: 48px 24px; } .ssla-g-list--layout-two-col .ssla-g-list-items, .ssla-g-list--layout-three-col .ssla-g-list-items { grid-template-columns: 1fr; } .ssla-g-list--layout-two-col .ssla-g-list-item:nth-child(2) { border-top: 1px solid var(--g-list-line); } } /* ─────── g-pricing-comparison-table ─────── */ /** * Greenfield canonical: Pricing Comparison Table * v3.21.19 */ .ssla-section.ssla-g-pricing-comparison-table { background-color: var(--ssla-bg-color, transparent); color: var(--g-pct-fg); padding: var(--g-pct-section-padding); } .ssla-g-pct-inner { max-width: var(--g-pct-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 32px; } .ssla-g-pct-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .ssla-g-pct-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-pct-eyebrow); } .ssla-g-pct-heading { font: 700 var(--g-pct-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-pct-heading-family, var(--shell-hf, system-ui)); color: var(--g-pct-heading); margin: 0; } /* Table grid — rows use display:contents so cells align in the parent grid */ .ssla-g-pct-table { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: stretch; } .ssla-g-pct-row { display: contents; } .ssla-g-pct-cell { padding: var(--g-pct-row-padding, 16px 20px); font: 400 var(--g-pct-body-size, 15px)/1.4 var(--g-pct-body-family, var(--shell-bf, system-ui)); color: var(--g-pct-body); border-bottom: 1px solid var(--g-pct-line); display: flex; align-items: center; justify-content: center; text-align: center; } .ssla-g-pct-cell--label { justify-content: flex-start; text-align: left; font-weight: 600; color: var(--g-pct-heading); } .ssla-g-pct-row--head .ssla-g-pct-cell { border-bottom: 2px solid var(--g-pct-line); padding-top: 8px; } .ssla-g-pct-cell--tier { flex-direction: column; gap: 2px; } .ssla-g-pct-tier-name { font: 700 16px/1.2 var(--g-pct-heading-family, var(--shell-hf, system-ui)); color: var(--g-pct-heading); } .ssla-g-pct-tier-price { font: 400 13px/1.2 var(--shell-bf, system-ui); color: var(--g-pct-body); } /* Tier count — set visible columns + hide surplus cells */ .ssla-g-pricing-comparison-table--tier-count-two .ssla-g-pct-table { grid-template-columns: 2fr 1fr 1fr; } .ssla-g-pricing-comparison-table--tier-count-three .ssla-g-pct-table { grid-template-columns: 2fr 1fr 1fr 1fr; } .ssla-g-pricing-comparison-table--tier-count-four .ssla-g-pct-table { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } .ssla-g-pricing-comparison-table--tier-count-two .ssla-g-pct-col-3, .ssla-g-pricing-comparison-table--tier-count-two .ssla-g-pct-col-4, .ssla-g-pricing-comparison-table--tier-count-three .ssla-g-pct-col-4 { display: none; } /* Featured tier — tint the highlighted column */ .ssla-g-pricing-comparison-table--featured-tier-one .ssla-g-pct-col-1, .ssla-g-pricing-comparison-table--featured-tier-two .ssla-g-pct-col-2, .ssla-g-pricing-comparison-table--featured-tier-three .ssla-g-pct-col-3, .ssla-g-pricing-comparison-table--featured-tier-four .ssla-g-pct-col-4 { background: var(--g-pct-featured-accent); } /* Row style — sectioned adds heavier separators every other row */ .ssla-g-pricing-comparison-table--category-style-sections .ssla-g-pct-row:nth-child(odd) .ssla-g-pct-cell { border-bottom-width: 2px; } /* Skeleton */ .ssla-g-pricing-comparison-table { --g-pct-fg: var(--brand-fg); --g-pct-eyebrow: var(--brand-accent); --g-pct-heading: var(--brand-fg); --g-pct-body: var(--brand-fg); --g-pct-line: rgba(0,0,0,0.12); --g-pct-featured-accent: rgba(0,0,0,0.04); --g-pct-heading-family: var(--shell-hf, system-ui); --g-pct-heading-size: clamp(26px, 3.5vw, 40px); --g-pct-body-family: var(--shell-bf, system-ui); --g-pct-body-size: 15px; --g-pct-section-padding: 0; --g-pct-content-max-width: 1100px; --g-pct-row-padding: 16px 20px; } /* Tone */ .ssla-g-pricing-comparison-table--tone-light { --g-pct-fg: #1a1a1a; --g-pct-heading: #1a1a1a; --g-pct-body: #4a4a4a; --g-pct-line: rgba(0,0,0,0.12); --g-pct-featured-accent: rgba(0,0,0,0.04); } .ssla-g-pricing-comparison-table--tone-dark { --g-pct-fg: #f5f5f5; --g-pct-heading: #ffffff; --g-pct-body: #d0d0d0; --g-pct-line: rgba(255,255,255,0.14); --g-pct-featured-accent: rgba(255,255,255,0.06); } .ssla-g-pricing-comparison-table--tone-accent { --g-pct-fg: var(--preset-accent-fg, #1a1a1a); --g-pct-heading: var(--preset-accent-fg, #1a1a1a); --g-pct-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-pct-inner { padding: 40px 12px; } .ssla-g-pct-cell { padding: 12px 10px; font-size: 13px; } .ssla-g-pct-tier-name { font-size: 14px; } } /* ─────── g-pricing-tiers ─────── */ /** * Greenfield canonical: Pricing Tiers * v3.21.19 */ .ssla-section.ssla-g-pricing-tiers { background-color: var(--ssla-bg-color, transparent); color: var(--g-pricing-tiers-fg); padding: var(--g-pricing-tiers-section-padding); } .ssla-g-pricing-tiers-inner { max-width: var(--g-pricing-tiers-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 40px; } .ssla-g-pricing-tiers-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 720px; margin: 0 auto; } .ssla-g-pricing-tiers-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-pricing-tiers-eyebrow); } .ssla-g-pricing-tiers-heading { font: 700 var(--g-pricing-tiers-heading-size, clamp(26px, 3.5vw, 40px))/1.2 var(--g-pricing-tiers-heading-family, var(--shell-hf, system-ui)); color: var(--g-pricing-tiers-heading); margin: 0; } .ssla-g-pricing-tiers-lede { font: 400 var(--g-pricing-tiers-body-size, 18px)/1.55 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui)); color: var(--g-pricing-tiers-body); margin: 0; } /* Billing toggle control (hidden unless billing_toggle variant on) */ .ssla-g-pricing-tiers-billing { display: none; gap: 0; margin-top: 4px; border: 1px solid var(--g-pricing-tiers-tier-border); } .ssla-g-pricing-tiers-billing-opt { font: 600 13px/1 var(--shell-bf, system-ui); padding: 10px 18px; background: transparent; color: var(--g-pricing-tiers-body); border: 0; cursor: pointer; } .ssla-g-pricing-tiers-billing-opt.is-active { background: var(--g-pricing-tiers-featured-accent, var(--brand-accent)); color: var(--g-pricing-tiers-bg, #fff); } /* Grid + tier card */ .ssla-g-pricing-tiers-grid { display: grid; gap: var(--g-pricing-tiers-gap, 24px); align-items: start; } .ssla-g-pricing-tiers-tier { display: flex; flex-direction: column; gap: 16px; padding: var(--g-pricing-tiers-tier-padding, 32px); background: var(--g-pricing-tiers-tier-bg, transparent); border: 1px solid var(--g-pricing-tiers-tier-border, transparent); } .ssla-g-pricing-tiers-tier-name { font: 600 13px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-pricing-tiers-eyebrow); } .ssla-g-pricing-tiers-tier-pricewrap { display: flex; align-items: baseline; gap: 4px; } .ssla-g-pricing-tiers-tier-price { font: 700 var(--g-pricing-tiers-heading-size, clamp(28px, 3vw, 44px))/1 var(--g-pricing-tiers-heading-family, var(--shell-hf, system-ui)); color: var(--g-pricing-tiers-heading); } .ssla-g-pricing-tiers-tier-price.ssla-is-annual { display: none; } .ssla-g-pricing-tiers-tier-period { font: 400 15px/1 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui)); color: var(--g-pricing-tiers-body); } .ssla-g-pricing-tiers-tier-features { font: 400 15px/1.7 var(--g-pricing-tiers-body-family, var(--shell-bf, system-ui)); color: var(--g-pricing-tiers-body); margin: 0; } .ssla-g-pricing-tiers-tier-features ul { margin: 0; padding-left: 18px; } .ssla-g-pricing-tiers-tier-features li { margin: 0 0 6px; } .ssla-g-pricing-tiers-tier-cta { margin-top: auto; font: 600 14px/1 var(--shell-bf, system-ui); color: var(--g-pricing-tiers-heading); text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; } /* Count */ .ssla-g-pricing-tiers--count-one .ssla-g-pricing-tiers-grid { grid-template-columns: minmax(0, 420px); justify-content: center; } .ssla-g-pricing-tiers--count-two .ssla-g-pricing-tiers-grid { grid-template-columns: repeat(2, 1fr); } .ssla-g-pricing-tiers--count-three .ssla-g-pricing-tiers-grid { grid-template-columns: repeat(3, 1fr); } .ssla-g-pricing-tiers--count-four .ssla-g-pricing-tiers-grid { grid-template-columns: repeat(4, 1fr); } /* Featured tier — accent border + lift on the nth tier */ .ssla-g-pricing-tiers--featured-tier-one .ssla-g-pricing-tiers-tier:nth-child(1), .ssla-g-pricing-tiers--featured-tier-two .ssla-g-pricing-tiers-tier:nth-child(2), .ssla-g-pricing-tiers--featured-tier-three .ssla-g-pricing-tiers-tier:nth-child(3), .ssla-g-pricing-tiers--featured-tier-four .ssla-g-pricing-tiers-tier:nth-child(4) { border-color: var(--g-pricing-tiers-featured-accent, var(--brand-accent)); border-width: 2px; box-shadow: 0 8px 32px rgba(0,0,0,0.10); } /* Billing toggle — show control + swap monthly/annual price on .ssla-billing-annual */ .ssla-g-pricing-tiers--billing-toggle-monthly-annual .ssla-g-pricing-tiers-billing { display: inline-flex; } .ssla-g-pricing-tiers--billing-toggle-monthly-annual.ssla-billing-annual .ssla-g-pricing-tiers-tier-price:not(.ssla-is-annual) { display: none; } .ssla-g-pricing-tiers--billing-toggle-monthly-annual.ssla-billing-annual .ssla-g-pricing-tiers-tier-price.ssla-is-annual { display: inline; } /* CTA emphasis — strong renders the CTA as a filled button */ .ssla-g-pricing-tiers--cta-emphasis-strong .ssla-g-pricing-tiers-tier-cta { background: var(--g-pricing-tiers-featured-accent, var(--brand-accent)); color: var(--g-pricing-tiers-bg, #fff); border-bottom: 0; padding: 12px 24px; text-align: center; align-self: stretch; } /* Skeleton */ .ssla-g-pricing-tiers { --g-pricing-tiers-fg: var(--brand-fg); --g-pricing-tiers-eyebrow: var(--brand-accent); --g-pricing-tiers-heading: var(--brand-fg); --g-pricing-tiers-body: var(--brand-fg); --g-pricing-tiers-tier-bg: transparent; --g-pricing-tiers-tier-border: rgba(0,0,0,0.14); --g-pricing-tiers-featured-accent: var(--brand-accent); --g-pricing-tiers-heading-family: var(--shell-hf, system-ui); --g-pricing-tiers-heading-size: clamp(26px, 3.5vw, 40px); --g-pricing-tiers-body-family: var(--shell-bf, system-ui); --g-pricing-tiers-body-size: 18px; --g-pricing-tiers-section-padding: 0; --g-pricing-tiers-content-max-width: 1200px; --g-pricing-tiers-gap: 24px; --g-pricing-tiers-tier-padding: 32px; } /* Tone */ .ssla-g-pricing-tiers--tone-light { --g-pricing-tiers-fg: #1a1a1a; --g-pricing-tiers-heading: #1a1a1a; --g-pricing-tiers-body: #4a4a4a; --g-pricing-tiers-tier-border: rgba(0,0,0,0.14); } .ssla-g-pricing-tiers--tone-dark { --g-pricing-tiers-fg: #f5f5f5; --g-pricing-tiers-heading: #ffffff; --g-pricing-tiers-body: #d0d0d0; --g-pricing-tiers-tier-border: rgba(255,255,255,0.16); --g-pricing-tiers-tier-bg: rgba(255,255,255,0.04); } .ssla-g-pricing-tiers--tone-accent { --g-pricing-tiers-fg: var(--preset-accent-fg, #1a1a1a); --g-pricing-tiers-heading: var(--preset-accent-fg, #1a1a1a); --g-pricing-tiers-body: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-pricing-tiers-inner { padding: 40px 16px; gap: 28px; } .ssla-g-pricing-tiers-grid { grid-template-columns: 1fr !important; } .ssla-g-pricing-tiers-heading { font-size: clamp(22px, 5vw, 30px); } } /* ─────── g-stats ─────── */ /** * Greenfield canonical: Stats * v3.18.48 */ .ssla-section.ssla-g-stats { background-color: var(--ssla-bg-color, transparent); color: var(--g-stats-fg); padding: var(--g-stats-section-padding); } .ssla-g-stats-inner { max-width: var(--g-stats-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; gap: 40px; } .ssla-g-stats-head { display: flex; flex-direction: column; gap: 8px; text-align: center; } .ssla-g-stats-eyebrow { font: 600 12px/1.2 var(--shell-bf, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-stats-eyebrow); } .ssla-g-stats-heading { font: 700 var(--g-stats-heading-size, clamp(24px, 3.5vw, 36px))/1.2 var(--g-stats-heading-family, var(--shell-hf, system-ui)); color: var(--g-stats-heading); margin: 0; } .ssla-g-stats-grid { display: grid; gap: var(--g-stats-gap, 32px); text-align: center; } .ssla-g-stats-cell { display: flex; flex-direction: column; gap: 4px; align-items: center; } .ssla-g-stats-value { font: 700 var(--g-stats-value-size, clamp(36px, 5vw, 64px))/1 var(--g-stats-heading-family, var(--shell-hf, system-ui)); color: var(--g-stats-value); } .ssla-g-stats-label { font: 600 14px/1.3 var(--g-stats-body-family, var(--shell-bf, system-ui)); text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-stats-label); } .ssla-g-stats-caption { font: 400 13px/1.4 var(--g-stats-body-family, var(--shell-bf, system-ui)); color: var(--g-stats-label); opacity: 0.75; } /* Count */ .ssla-g-stats--count-three .ssla-g-stats-grid { grid-template-columns: repeat(3, 1fr); } .ssla-g-stats--count-four .ssla-g-stats-grid { grid-template-columns: repeat(4, 1fr); } .ssla-g-stats--count-five .ssla-g-stats-grid { grid-template-columns: repeat(5, 1fr); } /* Density */ .ssla-g-stats--density-minimal .ssla-g-stats-head { display: none; } .ssla-g-stats--density-standard .ssla-g-stats-eyebrow { display: none; } /* density-rich: all visible */ /* Skeleton */ .ssla-g-stats { --g-stats-fg: var(--brand-fg); --g-stats-eyebrow: var(--brand-accent); --g-stats-heading: var(--brand-fg); --g-stats-value: var(--brand-fg); --g-stats-label: var(--brand-fg); --g-stats-heading-family: var(--shell-hf, system-ui); --g-stats-heading-size: clamp(24px, 3.5vw, 36px); --g-stats-value-size: clamp(36px, 5vw, 64px); --g-stats-body-family: var(--shell-bf, system-ui); --g-stats-section-padding: 0; --g-stats-content-max-width: 1200px; --g-stats-gap: 32px; } /* Tone */ .ssla-g-stats--tone-light { --g-stats-fg: #1a1a1a; --g-stats-heading: #1a1a1a; --g-stats-value: #1a1a1a; --g-stats-label: #555555; } .ssla-g-stats--tone-dark { --g-stats-fg: #f5f5f5; --g-stats-heading: #ffffff; --g-stats-value: #ffffff; --g-stats-label: #c0c0c0; } .ssla-g-stats--tone-accent { --g-stats-fg: var(--preset-accent-fg, #1a1a1a); --g-stats-heading: var(--preset-accent-fg, #1a1a1a); --g-stats-value: var(--preset-accent-fg, #1a1a1a); --g-stats-label: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-stats-inner { padding: 40px 16px; gap: 28px; } .ssla-g-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; } .ssla-g-stats-value { font-size: clamp(32px, 9vw, 48px); } } /* ─────── g-testimonial-single ─────── */ /** * Greenfield canonical: Testimonial — Single * v3.18.48 */ .ssla-section.ssla-g-testimonial-single { background-color: var(--ssla-bg-color, transparent); color: var(--g-testimonial-single-fg); padding: var(--g-testimonial-single-section-padding); } .ssla-g-testimonial-single-inner { max-width: var(--g-testimonial-single-content-max-width); margin: 0 auto; padding: var(--paint-section-padding, 80px) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .ssla-g-testimonial-single-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: rgba(0,0,0,0.06); flex-shrink: 0; } .ssla-g-testimonial-single-avatar img { width: 100%; height: 100%; object-fit: cover; } .ssla-g-testimonial-single-quote { font: 400 var(--g-testimonial-single-quote-size, clamp(20px, 2.5vw, 28px))/1.45 var(--g-testimonial-single-quote-family, var(--shell-hf, Georgia, serif)); color: var(--g-testimonial-single-quote); margin: 0; max-width: 720px; font-style: italic; } .ssla-g-testimonial-single-attrib { display: flex; flex-direction: column; gap: 2px; } .ssla-g-testimonial-single-author { font: 600 15px/1.3 var(--shell-bf, system-ui); color: var(--g-testimonial-single-author); } .ssla-g-testimonial-single-role, .ssla-g-testimonial-single-company { font: 400 13px/1.3 var(--shell-bf, system-ui); color: var(--g-testimonial-single-author); opacity: 0.75; } /* Density */ .ssla-g-testimonial-single--density-minimal .ssla-g-testimonial-single-avatar, .ssla-g-testimonial-single--density-minimal .ssla-g-testimonial-single-role, .ssla-g-testimonial-single--density-minimal .ssla-g-testimonial-single-company { display: none; } .ssla-g-testimonial-single--density-standard .ssla-g-testimonial-single-avatar, .ssla-g-testimonial-single--density-standard .ssla-g-testimonial-single-company { display: none; } /* density-rich: all visible */ /* Skeleton */ .ssla-g-testimonial-single { --g-testimonial-single-fg: var(--brand-fg); --g-testimonial-single-quote: var(--brand-fg); --g-testimonial-single-author: var(--brand-fg); --g-testimonial-single-quote-family: var(--shell-hf, Georgia, serif); --g-testimonial-single-quote-size: clamp(20px, 2.5vw, 28px); --g-testimonial-single-section-padding: 0; --g-testimonial-single-content-max-width: 900px; } /* Tone */ .ssla-g-testimonial-single--tone-light { --g-testimonial-single-fg: #1a1a1a; --g-testimonial-single-quote: #1a1a1a; --g-testimonial-single-author: #1a1a1a; } .ssla-g-testimonial-single--tone-dark { --g-testimonial-single-fg: #f5f5f5; --g-testimonial-single-quote: #ffffff; --g-testimonial-single-author: #ffffff; } .ssla-g-testimonial-single--tone-accent { --g-testimonial-single-fg: var(--preset-accent-fg, #1a1a1a); --g-testimonial-single-quote: var(--preset-accent-fg, #1a1a1a); --g-testimonial-single-author: var(--preset-accent-fg, #1a1a1a); } @media (max-width: 768px) { .ssla-g-testimonial-single-inner { padding: 40px 16px; gap: 16px; } .ssla-g-testimonial-single-quote { font-size: clamp(18px, 5vw, 22px); } } /* ─────── hero-bg ─────── */ /* === hero-bg === * Full-bleed bg image hero with overlaid text, optional stats row. * Tone: light (default) | dark. * Bg image is editable positioned absolute behind .shb-inner. * * @updated 3.5.54 — tone variant, :has stats collapse, shared eyebrow, gold accent */ .shb { background: var(--ssla-bg-color, transparent); position: relative; min-height: 100vh; display: flex; align-items: center; padding: 160px 48px 120px; overflow: hidden; /* v3.5.58 (B16) — paint-driven font inheritance for all text content in the section. Without this, body copy (.shb-desc, stat labels) fell through to the theme's body font (Arial) instead of the preset's typography (Montserrat). Headings carry their own declaration; this catches everything else. */ font-family: var(--paint-font-family, var(--shell-hf, inherit)); } .shb-img-bg { position: absolute; inset: 0; z-index: 0; } .shb-img-bg .shb-bg-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .shb-img-bg .shb-bg-photo[src=""] { /* No image set — fall back to a neutral surface so text remains legible. */ display: none; } .shb-tint { position: absolute; inset: 0; /* v3.12.03 — picker's --ssla-bg-color overrides the default light tint * cascade when set, letting users tune the overlay to brand. */ background: var(--ssla-bg-color, linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 100%)); } /* When no bg image is present, paint the tint area with the preset's * dark surface so the section still looks intentional during authoring. */ .shb-img-bg:not(:has(.shb-bg-photo[src]:not([src=""]))) .shb-tint { background: linear-gradient(160deg, var(--preset-primary, #2B4C7E) 0%, var(--preset-primary-dark, #1a2a45) 100%); } /* ── Tone: dark (default for ASK preset, white text on dark tint) ── */ .ssla-hero-bg--tone-dark .shb-tint { /* v3.12.03 — picker's --ssla-bg-color cascades from section root. * Default is charcoal for tone-dark; picker writes hex8 (color + alpha * via the alpha slider) so user controls tint intensity. */ background: var(--ssla-bg-color, rgba(26, 26, 26, 0.85)); } .ssla-hero-bg--tone-dark .shb { color: #fff; } /* Inner content */ .shb-inner { position: relative; z-index: 1; max-width: 620px; } /* Eyebrow uses shared .ssla-eyebrow — gold rule + tracked uppercase. * .shb-eyebrow scope just allows for tone-specific tweaks. */ .shb-eyebrow { margin-bottom: 24px; } .ssla-hero-bg--tone-dark .shb-eyebrow { color: var(--shell-accent, var(--preset-accent, #E2A03F)); } /* Heading — large, painted weight, hard kerning */ .shb h1 { font-family: var(--paint-font-family, var(--shell-hf, inherit)); font-size: var(--paint-h1-size, clamp(2.4rem, 5vw, 3.4rem)); font-weight: var(--paint-heading-weight, 800); letter-spacing: var(--paint-heading-letter-spacing-h1, -1.5px); text-transform: var(--paint-heading-case-h1, none); color: inherit; line-height: 1.08; margin: 0 0 24px; } .shb h1 em { font-style: italic; color: var(--shell-accent, var(--preset-accent, currentColor)); } .shb h1 .gold, .shb h1 .ssla-accent { color: var(--shell-accent, var(--preset-accent, currentColor)); } /* Description */ .shb-desc { font-size: var(--paint-body-size, 1.05rem); line-height: var(--paint-body-line-height, 1.7); color: inherit; opacity: 0.85; max-width: 520px; margin: 0 0 36px; } .shb-desc strong { opacity: 1; font-weight: 700; } .shb-desc p { margin: 0 0 0.6em; } .shb-desc p:last-child { margin-bottom: 0; } /* Buttons */ .shb-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; } .shb-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor))); color: var(--paint-button-primary-text, #fff); font-size: 0.78rem; font-weight: 800; padding: 16px 36px; text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase; transition: var(--paint-motion-timing, 0.3s); border-radius: var(--paint-button-radius, 0); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .shb-cta:hover { * filter: brightness(1.08); * transform: translateY(var(--paint-hover-lift, -2px)); * box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); * } */ .shb-cta:hover{ transform: translateY(var(--paint-hover-lift, -2px)); } .shb-cta2 { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: inherit; font-size: 0.78rem; font-weight: 700; padding: 14px 32px; text-decoration: none; letter-spacing: 1.5px; text-transform: uppercase; border: 2px solid currentColor; opacity: 0.85; transition: var(--paint-motion-timing, 0.3s); border-radius: var(--paint-button-radius, 0); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .shb-cta2:hover { * opacity: 1; * border-color: var(--shell-accent, var(--preset-accent, currentColor)); * color: var(--shell-accent, var(--preset-accent, inherit)); * } */ .shb-cta2:hover{/* paint retired; global rule provides lift */} .shb-cta:empty, .shb-cta2:empty { display: none; } /* Stats — auto-collapse if all values empty. * Modern path uses :has(); fallback path uses :empty on the row. * Each stat item also collapses individually if its val is empty. */ .shb-stats { display: flex; gap: 40px; padding-top: 16px; border-top: 1px solid currentColor; border-top-color: rgba(128, 128, 128, 0.2); } .ssla-hero-bg--tone-dark .shb-stats { border-top-color: rgba(255, 255, 255, 0.15); } .shb-stat-val { font-family: var(--paint-font-family, var(--shell-hf, inherit)); font-size: 1.5rem; font-weight: var(--paint-heading-weight, 800); color: inherit; line-height: 1; } .shb-stat-lbl { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.6; margin-top: 6px; } .shb-stat:has(.shb-stat-val:empty) { display: none; } .shb-stats:not(:has(.shb-stat-val:not(:empty))) { display: none; } /* Mobile */ @media (max-width: 768px) { .shb { padding: 120px 24px 80px; min-height: auto; } .shb h1 { font-size: 2.2rem; letter-spacing: -1px; } .shb-stats { flex-direction: column; gap: 20px; } .shb-actions { margin-bottom: 40px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .shb{color: #ffffff} .ssla-tone-dark .shb-eyebrow{color: var(--shell-accent, #E2A03F)} .ssla-tone-dark .shb-tint{background: rgba(26, 26, 26, 0.85)} .ssla-tone-light .shb{color: #1a1d21} .ssla-tone-light .shb-eyebrow{color: var(--shell-accent, #B23232)} .ssla-tone-light .shb-tint{background: rgba(245, 240, 232, 0.85)} /* ─────── hero-centered ─────── */ /* === hero-centered === */ .shc{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:140px 48px 100px} .shc .shc-badge{font-size:.58rem;letter-spacing:var(--paint-eyebrow-letter-spacing,4px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent,currentColor));font-weight:var(--paint-eyebrow-weight,600);margin-bottom:32px;opacity:.7} .shc h1{font-family:var(--shell-hf,inherit);font-size:4rem;font-weight:var(--paint-heading-weight,700);letter-spacing:var(--paint-heading-letter-spacing-h1,normal);text-transform:var(--paint-heading-case-h1,none);color:var(--shell-h,currentColor);line-height:1.15;max-width:780px} .shc h1 em{font-style:italic;color:var(--sc,var(--shell-accent,currentColor))} .shc>p{font-size:.92rem;color:var(--shell-m,#6b7280);max-width:540px;margin-top:24px} .shc .shc-cta{display:inline-block;margin-top:32px;padding:14px 36px;background:var(--paint-button-primary-fill,var(--sc,var(--shell-accent,currentColor)));color:var(--paint-button-primary-text,var(--shell-cta-t,#111));font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:var(--paint-button-radius,0);transition:var(--paint-motion-timing,.3s)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .shc .shc-cta:hover{filter:brightness(1.1);transform:translateY(var(--paint-hover-lift,-2px))} */ .shc .shc-cta:hover{/* paint retired; global rule provides lift */} .shc .shc-line{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--sc,var(--shell-accent,currentColor)),transparent);margin:32px auto 0} @media(max-width:768px){.shc{padding:100px 24px 60px}.shc h1{font-size:2.4rem}} /* ─────── hero-float ─────── */ /* === hero-float === */ /* ── Hero Float ── */ .ssla-section[data-ssla-type="hero-float"]{background:linear-gradient(135deg,var(--shell-bg-dark-cool,#0f1b2e) 0%,var(--shell-bg-dark-cool-end,#1a2a45) 50%,var(--shell-accent,#2B4C7E) 100%);padding:0;min-height:100vh;display:flex;align-items:stretch;position:relative;overflow:hidden} .ssla-section[data-ssla-type="hero-float"]::before{content:"";position:absolute;top:-50%;left:-20%;width:140%;height:200%;opacity:0.03;pointer-events:none} .hf-inner{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;width:100%;max-width:1400px;margin:0 auto} .hf-content{display:flex;flex-direction:column;justify-content:center;padding:var(--paint-section-padding,120px) 60px 80px 48px;position:relative;z-index:2} .hf-badge{display:inline-block;padding:6px 18px;border:1px solid var(--shell-line,rgba(226,160,63,0.4));color:var(--shell-accent,currentColor);font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,12px);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:28px;align-self:flex-start} .ssla-section[data-ssla-type="hero-float"] h1{font-family:var(--shell-hf,"DM Serif Display","Georgia",serif);font-size:var(--paint-h1-size,clamp(36px,5vw,60px));color:var(--shell-bg,#fff);line-height:1.1;margin:0 0 24px;font-weight:400} .ssla-section[data-ssla-type="hero-float"] h1 strong{color:var(--shell-accent,currentColor);font-weight:400} .hf-sub{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-h3-size,20px);color:var(--shell-m,#a0b8d0);line-height:1.6;max-width:520px;margin:0 0 16px} .hf-sub strong,.hf-sub em{color:var(--shell-accent,currentColor);font-style:normal;font-weight:600} .hf-sub2{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-body-size,16px);color:var(--shell-m,#7a98b5);line-height:var(--paint-body-line-height,1.7);max-width:520px;margin:0 0 40px} .hf-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px} .hf-btn-primary{display:inline-block;background:var(--shell-accent,currentColor);color:var(--shell-bg,#fff);padding:18px 48px;font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-button-size,16px);font-weight:700;letter-spacing:1.5px;text-decoration:none;text-transform:uppercase;transition:all 0.25s;border:none;cursor:pointer} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hf-btn-primary:hover{filter:brightness(0.9);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.2)} */ .hf-btn-primary:hover{/* paint retired; global rule provides lift */} .hf-btn-text{display:inline-flex;align-items:center;gap:6px;color:var(--shell-m,#a0b8d0);font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-button-size,15px);font-weight:600;text-decoration:none;padding:18px 8px;transition:color 0.2s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hf-btn-text:hover{color:var(--shell-accent,currentColor)} */ .hf-btn-text:hover{/* paint retired; global rule provides lift */} .hf-fine{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,12px);color:var(--shell-m,#5a7a96);font-weight:500;margin:0} .hf-fine:empty{display:none} .hf-image{position:relative;overflow:hidden} .hf-image img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .hf-tint{position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,0.12),rgba(26,51,86,0.25))} .hf-card{position:absolute;bottom:44px;left:36px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:18px 24px;box-shadow:0 10px 35px rgba(0,0,0,0.12);z-index:5} .hf-card-label{font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,9px);font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--shell-m,#8896a4);margin:0 0 8px} .hf-card-items{display:flex;gap:14px} .hf-dot{display:flex;align-items:center;gap:6px;font-family:var(--shell-bf,"Montserrat",sans-serif);font-size:var(--paint-eyebrow-size,11px);font-weight:700;color:var(--shell-t,#2a3642)} .hf-dot i{width:8px;height:8px;display:inline-block} @media(max-width:900px){.hf-inner{grid-template-columns:1fr}.hf-content{padding:120px 24px 48px;text-align:center;align-items:center}.hf-badge{align-self:center}.hf-image{height:400px}.hf-actions{justify-content:center}} @media(max-width:640px){.hf-content{padding:var(--paint-section-padding-mobile,100px) 20px 36px}.ssla-section[data-ssla-type="hero-float"] h1{font-size:var(--paint-h1-size-mobile,32px)}.hf-sub{font-size:var(--paint-h3-size-mobile,17px)}.hf-card{bottom:20px;left:16px;right:16px}.hf-card-items{flex-wrap:wrap;gap:10px}} /* ─────── hero-fullbleed ─────── */ /** * Section: Hero — Fullbleed * RSD Design Language Wave 3 Primitive 1. * Companion to: pages/sections/hero-fullbleed.php * * @since 3.5.70 (RSD primitives band) * * v3.6.9 (F2a) — REWRITE to match PHP-emitted class names. Pre-v3.6.9 this * file targeted .shfb-* selectors that the PHP template never emits (PHP * uses .ssla-hero-fb-*, .ssla-eyebrow, .ssla-h1, .ssla-lede, .ssla-btn, .ssla-stat-*). * Net effect of the mismatch: bg-image div had no positioning rule (rendered * in flow as a normal block, image displayed at natural size in document * order above the content), bg-mode visibility selectors never engaged, * overlay div had no rgba background, no opacity consumption, no positioning. * This is the "red square stacked above text instead of full-bleed image * behind text with overlay" symptom Glenn captured 2026-05-04. * * Companion regression guard: bin/smoke-section-class-fidelity.php asserts * every section's emitted class names appear as targets in its CSS file. */ [data-ssla-type="hero-fullbleed"]{ position: relative; overflow: hidden; padding: var(--shell-section-padding-y-generous) 48px; background: var(--ssla-bg-color, var(--shell-surface-dark)); } /* Surface variants */ [data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="light"]{ background: var(--ssla-bg-color, var(--shell-surface-light)); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-surface="darker"]{ background: var(--ssla-bg-color, var(--shell-surface-darker)); } /* ─── Outer template wrapper ───────────────────────────────────── PHP wraps content in

inside the
. The wrapper is a positioning container for absolute children. */ .ssla-hero-fb{ position: relative; width: 100%; height: 100%; min-height: inherit; } /* ─── Background layers ─────────────────────────────────────────── */ /* All bg layers absolute-positioned and hidden by default. The bg-mode variant selector flips the relevant layer visible. */ .ssla-hero-fb-bg-image, .ssla-hero-fb-bg-gradient{ display: none; position: absolute; inset: 0; z-index: 1; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="image"] .ssla-hero-fb-bg-image{ display: block; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="gradient"] .ssla-hero-fb-bg-gradient{ display: block; } /* The inside .ssla-hero-fb-bg-image needs to fill the layer. */ .ssla-hero-fb-bg-image img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Tinted overlay layer — sits above bg, below content. */ .ssla-hero-fb-overlay{ position: absolute; inset: 0; z-index: 2; /* v3.12.03 — picker --ssla-bg-color cascades from section root. Default * is charcoal-at-65%; picker writes hex8 (color + alpha slider) so user * controls tint hue + intensity together. The --overlay-opacity rule * remains as a contract fallback when no picker is set. */ background: var(--ssla-bg-color, rgba(26, 26, 26, var(--overlay-opacity, 0.65))); pointer-events: none; } [data-ssla-variant-tone="light"] .ssla-hero-fb-overlay{ background: var(--ssla-bg-color, rgba(245, 240, 232, var(--overlay-opacity, 0.65))); } /* Gradient mode skips the dark overlay. */ [data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="gradient"] .ssla-hero-fb-overlay, [data-ssla-type="hero-fullbleed"][data-ssla-variant-bg-mode="plain"] .ssla-hero-fb-overlay{ display: none; } /* ─── Content layer ─────────────────────────────────────────────── */ .ssla-hero-fb-content{ position: relative; z-index: 3; max-width: var(--shell-content-max-width); margin: 0 auto; text-align: center; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="left"] .ssla-hero-fb-content{ text-align: left; } /* Eyebrow — uses the shared .ssla-eyebrow class emitted by PHP. */ [data-ssla-type="hero-fullbleed"] .ssla-eyebrow.is-plain{ display: inline-block; margin-bottom: 32px; color: var(--shell-accent); font-size: var(--paint-eyebrow-size, var(--shell-eyebrow-size)); font-weight: 600; letter-spacing: var(--shell-eyebrow-letter-spacing); text-transform: uppercase; } /* Heading — PHP emits .ssla-h1 */ [data-ssla-type="hero-fullbleed"] .ssla-h1{ font-family: var(--shell-font-family-heading); font-size: var(--paint-h1-size, var(--shell-h1-size)); line-height: 1.0; letter-spacing: var(--shell-h1-letter-spacing); font-weight: 700; color: var(--shell-text-dark); margin: 0 0 36px; max-width: var(--shell-text-max-width); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-h1{ margin-left: auto; margin-right: auto; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-h1{ color: var(--shell-text-on-dark); } /* Lede — PHP emits .ssla-lede */ [data-ssla-type="hero-fullbleed"] .ssla-lede{ font-size: var(--paint-body-size, 21px); line-height: var(--paint-body-line-height, 1.45); color: var(--shell-text-body); max-width: 620px; margin: 0 0 44px; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-lede{ margin-left: auto; margin-right: auto; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-lede{ color: var(--shell-text-on-dark-muted); } [data-ssla-type="hero-fullbleed"] .ssla-lede p{ margin: 0; } /* Actions — PHP emits .ssla-hero-fb-actions */ .ssla-hero-fb-actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-hero-fb-actions{ justify-content: center; } /* CTAs — PHP emits .ssla-btn .ssla-btn-primary / .ssla-btn-secondary */ [data-ssla-type="hero-fullbleed"] .ssla-btn{ display: inline-block; padding: 16px 32px; font-size: var(--paint-button-size, 14px); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: background-color 0.2s, color 0.2s, transform 0.15s, border-color 0.2s; } [data-ssla-type="hero-fullbleed"] .ssla-btn-primary{ background: var(--shell-accent-strong); color: #FFFFFF; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-type="hero-fullbleed"] .ssla-btn-primary:hover{ * background: #5C0F0F; * transform: translateY(-1px); * } */ [data-ssla-type="hero-fullbleed"] .ssla-btn-primary:hover{ transform: translateY(-1px); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary{ background: var(--shell-accent); color: var(--shell-text-dark); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary:hover{ * background: var(--shell-accent-hover); * } */ [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-primary:hover{/* paint retired; global rule provides lift */} [data-ssla-type="hero-fullbleed"] .ssla-btn-secondary{ background: transparent; color: var(--shell-text-dark); border: 2px solid var(--shell-text-dark); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-type="hero-fullbleed"] .ssla-btn-secondary:hover{ * background: var(--shell-text-dark); * color: #FFFFFF; * transform: translateY(-1px); * } */ [data-ssla-type="hero-fullbleed"] .ssla-btn-secondary:hover{ transform: translateY(-1px); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary{ color: #FFFFFF; border-color: #FFFFFF; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{ * background: #FFFFFF; * color: var(--shell-text-dark); * } */ [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-btn-secondary:hover{/* paint retired; global rule provides lift */} /* ─── Stats row — PHP emits .ssla-stats-row / .ssla-stat / .ssla-stat-value / .ssla-stat-label ─── */ .ssla-stats-row{ display: none; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--shell-hairline); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-stats-row="on"] .ssla-stats-row{ display: grid; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stats-row{ border-top-color: var(--shell-hairline-on-dark); } [data-ssla-type="hero-fullbleed"] .ssla-stat{ padding: 0 16px; border-right: 1px solid var(--shell-hairline); text-align: left; } [data-ssla-type="hero-fullbleed"] .ssla-stat:last-child{ border-right: 0; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat{ border-right-color: var(--shell-hairline-on-dark); } [data-ssla-type="hero-fullbleed"][data-ssla-variant-alignment="center"] .ssla-stat{ text-align: center; } [data-ssla-type="hero-fullbleed"] .ssla-stat-value{ font-family: var(--shell-font-family-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -1px; color: var(--shell-text-dark); line-height: 1.1; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat-value{ color: var(--shell-accent); } [data-ssla-type="hero-fullbleed"] .ssla-stat-label{ font-size: 13px; color: var(--shell-text-muted); margin-top: 6px; line-height: 1.3; } [data-ssla-type="hero-fullbleed"][data-ssla-variant-tone="dark"] .ssla-stat-label{ color: var(--shell-text-on-dark-muted); } /* ─── Hidden helper (overlay_opacity field anchor) ───────────────── */ .ssla-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ─── Mobile ─────────────────────────────────────────────────────── */ @media (max-width: 767px) { [data-ssla-type="hero-fullbleed"]{ padding: 96px 24px 80px; } .ssla-stats-row{ grid-template-columns: 1fr; } [data-ssla-type="hero-fullbleed"] .ssla-stat{ border-right: 0; border-bottom: 1px solid var(--shell-hairline); padding: 16px 0; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="hero-fullbleed"] .ssla-h1{color: var(--shell-text-on-dark, #ffffff)} .ssla-tone-dark[data-ssla-type="hero-fullbleed"] .ssla-lede{color: var(--shell-text-on-dark-muted, rgba(255,255,255,0.78))} .ssla-tone-dark[data-ssla-type="hero-fullbleed"] .ssla-eyebrow{color: var(--shell-accent, #E2A03F)} .ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-h1{color: var(--shell-text-dark, #1a1d21)} .ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-lede{color: var(--shell-text-body, #4a5568)} .ssla-tone-light[data-ssla-type="hero-fullbleed"] .ssla-eyebrow{color: var(--shell-accent, #B23232)} /* ─────── hero-home ─────── */ /* === hero-home === */ .hhero{background:var(--ssla-bg-color, var(--shell-bg-dark, #1a2a45));position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center} .hhero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0v80M0 40h80' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none;z-index:0} .hhero::after{content:"";position:absolute;bottom:-120px;right:-60px;width:500px;height:500px;background:radial-gradient(circle,rgba(226,160,63,0.06) 0%,transparent 70%);pointer-events:none;z-index:0} .hhero-inner{max-width:1100px;margin:0 auto;padding:60px 48px 120px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:center;position:relative;z-index:1} .hhero-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:32px} .hhero-eyebrow::before{content:"";width:36px;height:2px;background:var(--shell-accent,currentColor)} .hhero-eyebrow span{font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--shell-accent,currentColor)} .hhero h1{font-size:var(--paint-h1-size, 52px);font-weight:900;color:#fff;line-height:1.08;letter-spacing:-2px;margin:0 0 28px} .hhero-body{font-size:var(--paint-body-size, 18px);color:rgba(255,255,255,0.6);line-height:var(--paint-body-line-height, 1.75);margin:0 0 40px;max-width:480px} .hhero-body p{margin:0} .hhero-body strong{color:rgba(255,255,255,0.85)} .hhero-actions{display:flex;gap:20px;flex-wrap:wrap} .hhero-btn-primary{display:inline-block;background:var(--shell-accent,currentColor);color:#fff!important;padding:16px 38px;font-size:13px;font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hhero-btn-primary:hover{filter:brightness(.9);transform:translateY(-2px);box-shadow:0 8px 25px rgba(226,160,63,.3)} */ .hhero-btn-primary:hover{/* paint retired; global rule provides lift */} .hhero-btn-primary:empty{display:none} .hhero-btn-outline{display:inline-block;border:2px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8)!important;padding:14px 36px;font-size:13px;font-weight:700;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hhero-btn-outline:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)!important} */ .hhero-btn-outline:hover{/* paint retired; global rule provides lift */} .hhero-btn-outline:empty{display:none} .hhero-domains{display:grid;grid-template-columns:1fr 1fr;gap:16px} .hhero-dcard{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);padding:32px 24px;transition:all .4s} .hhero-dcard:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);border-color:rgba(255,255,255,.14)} .hhero-dbar{width:24px;height:3px;background:var(--dc);margin-bottom:16px} .hhero-dlabel{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--dc);margin:0 0 8px} .hhero-dcard h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 6px} .hhero-dcard p{font-size:12.5px;color:rgba(255,255,255,.45);line-height:1.6;margin:0} @media(max-width:960px){.hhero-inner{grid-template-columns:1fr;gap:48px}.hhero-domains{grid-template-columns:1fr 1fr}} @media(max-width:600px){.hhero-inner{padding:120px 24px 80px}.hhero h1{font-size:36px}.hhero-domains{grid-template-columns:1fr}} /* === variant: mode=light === Selector scope: .ssla-hero-home--mode-light (emitted by SSLA_Block_Bridge::build_classes). Per contract §7.6: class-modifier convention is .ssla-{slug}--{dim}-{value}. Base .hhero styles target the dark look; light variant overrides color-sensitive props. */ .ssla-hero-home--mode-light .hhero{background:var(--ssla-bg-color, var(--shell-bg-warm,#f7f5f0))!important} .ssla-hero-home--mode-light .hhero::before{background:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0v80M0 40h80' stroke='rgba(0,0,0,0.03)' stroke-width='1'/%3E%3C/svg%3E")} .ssla-hero-home--mode-light .hhero::after{background:radial-gradient(circle,rgba(226,160,63,0.12) 0%,transparent 70%)} .ssla-hero-home--mode-light .hhero h1{color:var(--shell-h,#1a2a45)} .ssla-hero-home--mode-light .hhero-body{color:rgba(26,42,69,0.68)} .ssla-hero-home--mode-light .hhero-body strong{color:var(--shell-h,#1a2a45)} .ssla-hero-home--mode-light .hhero-btn-outline{border-color:rgba(26,42,69,0.2);color:rgba(26,42,69,0.75)!important} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-hero-home--mode-light .hhero-btn-outline:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)!important} */ .ssla-hero-home--mode-light .hhero-btn-outline:hover{/* paint retired; global rule provides lift */} .ssla-hero-home--mode-light .hhero-dcard{border-color:rgba(26,42,69,0.08);background:rgba(255,255,255,0.5)} .ssla-hero-home--mode-light .hhero-dcard:hover{background:#fff;border-color:rgba(26,42,69,0.14)} .ssla-hero-home--mode-light .hhero-dcard h4{color:var(--shell-h,#1a2a45)} .ssla-hero-home--mode-light .hhero-dcard p{color:rgba(26,42,69,0.55)} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .hhero h1{color: #ffffff} .ssla-tone-dark .hhero-body{color: rgba(255, 255, 255, 0.6)} .ssla-tone-light .hhero h1{color: var(--shell-h, #1a2a45)} .ssla-tone-light .hhero-body{color: rgba(26, 42, 69, 0.68)} /* ─────── hero-minimal-2 ─────── */ /** * Section: Hero — Minimal 2 (Design Language) * RSD Design Language Wave 3 Primitive 3. * Companion to: pages/sections/hero-minimal-2.php * * The quiet hero. Heading + lede only. Standard padding (NOT generous — * minimal heroes are smaller in vertical scale by design). Calm by purpose. * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="hero-minimal-2"]{ padding: var(--shell-section-padding-y-standard) 48px; background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="hero-minimal-2"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="hero-minimal-2"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); } [data-ssla-type="hero-minimal-2"][data-ssla-variant-surface="light"]{ background: var(--ssla-bg-color, var(--shell-surface-light)); } [data-ssla-type="hero-minimal-2"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); } .ssla-hero-minimal-2{ max-width: var(--shell-text-max-width); margin: 0 auto; text-align: center; } [data-ssla-type="hero-minimal-2"][data-ssla-variant-alignment="left"] .ssla-hero-minimal-2{ margin: 0; max-width: var(--shell-content-max-width); text-align: left; } .ssla-hero-minimal-2 > * + *{ margin-top: 24px; } .ssla-hero-minimal-2 .ssla-h1{ font-size: var(--paint-h1-size, clamp(40px, 5vw, 64px)); line-height: 1.05; } .ssla-hero-minimal-2-actions{ margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; } [data-ssla-type="hero-minimal-2"][data-ssla-variant-alignment="center"] .ssla-hero-minimal-2-actions{ justify-content: center; } @media (max-width: 767px) { [data-ssla-type="hero-minimal-2"]{ padding: 64px 24px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="hero-minimal-2"] .ssla-h1{color: var(--shell-text-on-dark, #ffffff)} .ssla-tone-dark[data-ssla-type="hero-minimal-2"] .ssla-lede{color: var(--shell-text-on-dark-muted, rgba(255,255,255,0.78))} .ssla-tone-light[data-ssla-type="hero-minimal-2"] .ssla-h1{color: var(--shell-text-dark, #1a1d21)} .ssla-tone-light[data-ssla-type="hero-minimal-2"] .ssla-lede{color: var(--shell-text-body, #4a5568)} /* ─────── hero-minimal ─────── */ /* === hero-minimal === */ .shm{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px 48px} .shm h1{font-family:var(--shell-hf);font-size:4.5rem;font-weight:700;color:var(--shell-h);line-height:1.1;max-width:800px} .shm h1 em{font-style:italic;color:var(--sc,var(--shell-accent))} .shm .shm-line{width:48px;height:1px;background:var(--sc,var(--shell-accent));margin:36px auto} .shm>p{font-size:.88rem;color:var(--shell-m);letter-spacing:.5px} @media(max-width:768px){.shm{padding:100px 24px}.shm h1{font-size:2.6rem}} /* ─────── hero-portrait ─────── */ /* === hero-portrait === */ /* ── RSC Hero ── */ .rh-img[src=""]{display:none} /* Nav adjustments for RSC */ .ssla-nav{padding:22px 48px} .ssla-nav.scrolled{border-bottom:1px solid var(--shell-line,rgba(0,0,0,0.1));box-shadow:0 1px 3px rgba(0,0,0,0.04)} .ssla-section[data-ssla-type="hero-portrait"]{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:140px 36px 80px;position:relative;overflow:hidden;background:var(--ssla-bg-color, var(--shell-bg, transparent))} .ssla-section[data-ssla-type="hero-portrait"]>.container{width:100%;position:relative;z-index:2} .rh-wash,.rh-wash-2{position:absolute!important;z-index:0!important;pointer-events:none} .rh-wash{top:-10%;right:-15%;width:900px;height:900px;background:radial-gradient(circle,rgba(0,0,0,0.08) 0%,transparent 65%);border-radius:50%} .rh-wash-2{bottom:-20%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(196,150,12,0.04) 0%,transparent 60%);border-radius:50%} .rh-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:2} .rh-content{max-width:520px} .rh-intro{font-family:"Poppins",sans-serif;font-size:15px;font-weight:500;color:var(--shell-accent,currentColor);margin-bottom:20px} .ssla-section[data-ssla-type="hero-portrait"] h1{font-size:var(--paint-h1-size, clamp(38px,5vw,58px));font-weight:var(--paint-heading-weight,800);letter-spacing:var(--paint-heading-letter-spacing-h1,-0.5px);text-transform:var(--paint-heading-case-h1,none);margin-bottom:22px} .ssla-section[data-ssla-type="hero-portrait"] h1 .em{display:block;font-weight:300;font-style:italic;color:var(--shell-accent,currentColor)} .ssla-section[data-ssla-type="hero-portrait"] h1 em{font-weight:300;font-style:italic;color:var(--shell-accent,currentColor)} .rh-body{font-size:var(--paint-body-size, 16.5px);color:var(--shell-m,#6b7280);line-height:var(--paint-body-line-height, 1.85);margin-bottom:36px} .rh-actions{display:flex;gap:12px;flex-wrap:wrap} /* Shared btn classes used across RSC sections */ .ssla-section .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:var(--paint-button-radius,8px);font-family:"Montserrat",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:0.3px;transition:all var(--paint-motion-timing,0.3s);cursor:pointer;border:none;text-decoration:none;color:inherit} .ssla-section .btn-red{background:var(--shell-accent,currentColor);color:var(--shell-text-inverted,#F3EDE4)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-red:hover{background:var(--shell-accent,currentColor);filter:brightness(0.85);transform:translateY(var(--paint-hover-lift,-2px));box-shadow:0 6px 20px rgba(0,0,0,0.15)} */ .ssla-section .btn-red:hover{/* paint retired; global rule provides lift */} .ssla-section .btn-warm{background:var(--shell-bg-warm,#F3EDE4);color:var(--shell-t,#1a1a1a);border:1px solid var(--shell-line,rgba(0,0,0,0.1))} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-warm:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor);transform:translateY(var(--paint-hover-lift,-2px))} */ .ssla-section .btn-warm:hover{/* paint retired; global rule provides lift */} .ssla-section .btn-light{background:rgba(255,255,255,0.1);color:var(--shell-text-inverted,#F3EDE4);border:1px solid rgba(255,255,255,0.15)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-light:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.15)} */ .ssla-section .btn-light:hover{/* paint retired; global rule provides lift */} .ssla-section .btn-white{background:var(--shell-bg-warm,#F3EDE4);color:var(--shell-accent,currentColor);font-weight:700} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-white:hover{background:white;transform:translateY(var(--paint-hover-lift,-2px));box-shadow:0 6px 20px rgba(0,0,0,0.1)} */ .ssla-section .btn-white:hover{/* paint retired; global rule provides lift */} .ssla-section .btn-ghost-white{background:transparent;color:var(--shell-text-inverted,#F3EDE4);border:1.5px solid rgba(255,255,255,0.3)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-ghost-white:hover{border-color:rgba(255,255,255,0.6);background:rgba(255,255,255,0.08)} */ .ssla-section .btn-ghost-white:hover{/* paint retired; global rule provides lift */} .ssla-section .btn-red-bright{background:var(--shell-accent,currentColor);color:var(--shell-text-inverted,#F3EDE4)} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-section .btn-red-bright:hover{background:var(--shell-accent,currentColor);filter:brightness(0.85);transform:translateY(var(--paint-hover-lift,-2px));box-shadow:0 6px 24px rgba(0,0,0,0.25)} */ .ssla-section .btn-red-bright:hover{/* paint retired; global rule provides lift */} .ssla-section .btn:empty{display:none} /* Shared container */ .container{max-width:1140px;margin:0 auto;padding:0 36px} @media(max-width:768px){.container{padding:0 20px}} /* Shared section patterns */ .section-label{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,3.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--shell-accent,currentColor);margin-bottom:14px} .section-heading{font-family:"Montserrat",sans-serif;font-size:clamp(30px,3.8vw,44px);font-weight:var(--paint-heading-weight,800);letter-spacing:var(--paint-heading-letter-spacing-h2,-0.3px);text-transform:var(--paint-heading-case-h2,none);margin-bottom:16px;color:var(--shell-h,currentColor);line-height:1.2} .section-body{font-size:16.5px;color:var(--shell-m,#6b7280);max-width:560px;line-height:1.85} /* Hero image column */ .rh-image-col{position:relative} .rh-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;filter:saturate(0.9) contrast(1.02)} .rh-accent-line{position:absolute;top:-12px;left:-12px;width:60%;height:60%;border-top:3px solid var(--shell-accent,currentColor);border-left:3px solid var(--shell-accent,currentColor);border-radius:16px 0 0 0;pointer-events:none;opacity:0.4} .rh-card{position:absolute;bottom:-16px;right:-16px;background:var(--shell-bg,transparent);padding:18px 22px;border-radius:8px;border:1px solid var(--shell-line,rgba(0,0,0,0.1));box-shadow:0 8px 32px rgba(0,0,0,0.08)} .rh-card-label{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--shell-accent,currentColor);margin-bottom:4px} .rh-card-value{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;color:var(--shell-h,currentColor)} @media(max-width:900px){.rh-grid{grid-template-columns:1fr;gap:48px;text-align:center}.rh-content{max-width:100%;order:2}.rh-image-col{order:1;max-width:440px;margin:0 auto}.rh-actions{justify-content:center}} /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="hero-portrait"] h1{color: #ffffff} .ssla-tone-dark .rh-body{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light[data-ssla-type="hero-portrait"] h1{color: var(--shell-h, #1a1d21)} .ssla-tone-light .rh-body{color: var(--shell-m, #6b7280)} /* ─────── hero-split-2 ─────── */ /** * Section: Hero — Split 2 (Design Language) * RSD Design Language Wave 3 Primitive 2. * Companion to: pages/sections/hero-split-2.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="hero-split-2"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="hero-split-2"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="hero-split-2"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); } [data-ssla-type="hero-split-2"][data-ssla-variant-surface="light"]{ background: var(--ssla-bg-color, var(--shell-surface-light)); } [data-ssla-type="hero-split-2"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); } [data-ssla-type="hero-split-2"][data-ssla-variant-surface="darker"]{ background: var(--ssla-bg-color, var(--shell-surface-darker)); } .ssla-hero-split-2{ max-width: var(--shell-content-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-left"] .ssla-hero-split-2{ grid-template-columns: 1fr 1fr; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-left"] .ssla-hero-split-2-text{ order: 2; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-left"] .ssla-hero-split-2-visual{ order: 1; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-only"] .ssla-hero-split-2{ grid-template-columns: 1fr; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-only"] .ssla-hero-split-2-text{ text-align: center; margin-top: 32px; } .ssla-hero-split-2-text > * + *{ margin-top: 24px; } .ssla-hero-split-2-text .ssla-h1{ font-size: var(--paint-h1-size, clamp(40px, 5vw, 72px)); line-height: 1.05; } .ssla-hero-split-2-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* Visual / image treatment */ .ssla-hero-split-2-img-wrap{ position: relative; overflow: hidden; } .ssla-hero-split-2-img{ display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover; } /* image-style variants */ [data-ssla-type="hero-split-2"][data-ssla-variant-image-style="lifted"] .ssla-hero-split-2-img-wrap{ border-radius: 4px; border: 1px solid var(--shell-hairline-strong); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2), var(--shell-shadow-lift-3); } [data-ssla-type="hero-split-2"][data-ssla-variant-image-style="bordered"] .ssla-hero-split-2-img-wrap{ border: 1px solid var(--shell-hairline-strong); } [data-ssla-type="hero-split-2"][data-ssla-variant-image-style="flat"] .ssla-hero-split-2-img-wrap{ border: 0; box-shadow: none; } .ssla-hero-split-2-img-caption{ margin-top: 12px; font-size: 13px; color: var(--shell-text-muted); line-height: 1.4; } [data-ssla-variant-tone="dark"] .ssla-hero-split-2-img-caption{ color: var(--shell-text-on-dark-muted); } /* Stats row (shared treatment per _typography.css applies) */ .ssla-hero-split-2 .ssla-stats-row{ margin-top: 48px; } /* Mobile */ @media (max-width: 767px) { [data-ssla-type="hero-split-2"]{ padding: 80px 24px; } .ssla-hero-split-2{ grid-template-columns: 1fr; gap: 40px; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-left"] .ssla-hero-split-2-text{ order: 1; } [data-ssla-type="hero-split-2"][data-ssla-variant-layout="image-left"] .ssla-hero-split-2-visual{ order: 2; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark[data-ssla-type="hero-split-2"] .ssla-h1{color: var(--shell-text-on-dark, #ffffff)} .ssla-tone-dark[data-ssla-type="hero-split-2"] .ssla-lede{color: var(--shell-text-on-dark-muted, rgba(255,255,255,0.78))} .ssla-tone-dark[data-ssla-type="hero-split-2"] .ssla-eyebrow{color: var(--shell-accent, #E2A03F)} .ssla-tone-light[data-ssla-type="hero-split-2"] .ssla-h1{color: var(--shell-text-dark, #1a1d21)} .ssla-tone-light[data-ssla-type="hero-split-2"] .ssla-lede{color: var(--shell-text-body, #4a5568)} /* ─────── hero-split-overlay ─────── */ /* === hero-split-overlay === */ .hso{width:100%;min-height:80vh;display:flex;align-items:center} .hso-inner{max-width:1100px;margin:0 auto;padding:100px 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .hso-eyebrow{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 20px} .hso h1{font-size:48px;font-weight:800;color:var(--shell-h,currentColor);line-height:1.1;letter-spacing:-1.5px;margin:0 0 26px} .hso-body{font-size:18px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0 0 32px;max-width:460px} .hso-body p{margin:0 0 10px}.hso-body p:last-child{margin-bottom:0} .hso-actions{display:flex;gap:16px;flex-wrap:wrap} .hso-btn-primary{display:inline-block;background:var(--shell-accent,currentColor);color:#fff!important;padding:16px 38px;font-size:13px;font-weight:800;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hso-btn-primary:hover{filter:brightness(.9);transform:translateY(-2px)} */ .hso-btn-primary:hover{/* paint retired; global rule provides lift */} .hso-btn-primary:empty{display:none} .hso-btn-outline{display:inline-block;border:2px solid var(--shell-h,currentColor);color:var(--shell-h,currentColor)!important;padding:14px 36px;font-size:13px;font-weight:700;letter-spacing:2px;text-decoration:none!important;text-transform:uppercase;transition:all .3s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .hso-btn-outline:hover{background:var(--shell-h,currentColor);color:#fff!important} */ .hso-btn-outline:hover{/* paint retired; global rule provides lift */} .hso-btn-outline:empty{display:none} .hso-visual{position:relative;overflow:hidden} .hso-img{width:100%;height:auto;display:block} .hso-img[src=""]{min-height:300px;background:var(--shell-card,transparent)} .hso-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);padding:24px 28px;color:#fff} .hso-overlay:empty{display:none} .hso-overlay-tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--shell-accent,currentColor);margin:0 0 8px} .hso-overlay-tag:empty{display:none} .hso-overlay-quote{font-size:15px;line-height:1.6;color:rgba(255,255,255,.85)} .hso-overlay-quote:empty{display:none} .hso-overlay-tag:empty+.hso-overlay-quote:empty{display:none} @media(max-width:768px){.hso-inner{grid-template-columns:1fr;gap:40px}.hso h1{font-size:36px}} /* ─────── hero-split ─────── */ /* === hero-split === * Two-column hero. Text left, image right. Painted typography. * Eyebrow uses shared .ssla-eyebrow gold-rule treatment. * * @updated 3.5.54 */ .shs { background: var(--ssla-bg-color, transparent); min-height: 85vh; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; padding: 100px 48px 80px; gap: 64px; } .shs-text { max-width: 540px; } /* Eyebrow uses shared .ssla-eyebrow — already styled. .shs-badge scope for tweaks only. */ .shs-badge { margin-bottom: 24px; } /* Heading — larger and stronger than v3.5.53. */ .shs h1 { font-family: var(--paint-font-family, var(--shell-hf, inherit)); font-size: var(--paint-h1-size, clamp(2.4rem, 4.8vw, 3.4rem)); font-weight: var(--paint-heading-weight, 800); letter-spacing: var(--paint-heading-letter-spacing-h1, -1.5px); text-transform: var(--paint-heading-case-h1, none); color: var(--shell-h, currentColor); line-height: 1.08; margin: 0 0 24px; } .shs h1 em { font-style: italic; color: var(--shell-accent, var(--preset-accent, currentColor)); } .shs h1 .gold, .shs h1 .ssla-accent { color: var(--shell-accent, var(--preset-accent, currentColor)); } /* Description */ .shs-desc { font-size: var(--paint-body-size, 1rem); color: var(--shell-t, var(--preset-text-body, #4a5568)); line-height: var(--paint-body-line-height, 1.7); margin: 0 0 32px; max-width: 480px; } .shs-desc strong { color: var(--shell-h, var(--preset-primary, currentColor)); font-weight: 700; } .shs-desc p { margin: 0 0 0.6em; } .shs-desc p:last-child { margin-bottom: 0; } /* Buttons */ .shs-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .shs-cta { display: inline-block; padding: 16px 38px; background: var(--paint-button-primary-fill, var(--shell-accent, var(--preset-accent, currentColor))); color: var(--paint-button-primary-text, #fff); font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-radius: var(--paint-button-radius, 0); transition: var(--paint-motion-timing, 0.3s); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .shs-cta:hover { * filter: brightness(1.08); * transform: translateY(var(--paint-hover-lift, -2px)); * box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); * } */ .shs-cta:hover{ transform: translateY(var(--paint-hover-lift, -2px)); } .shs-cta2 { display: inline-block; padding: 14px 36px; background: transparent; color: var(--shell-h, var(--preset-primary, currentColor)); font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 2px solid currentColor; transition: var(--paint-motion-timing, 0.3s); border-radius: var(--paint-button-radius, 0); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .shs-cta2:hover { * background: var(--shell-h, var(--preset-primary, currentColor)); * color: var(--shell-bg, #fff); * } */ .shs-cta2:hover{/* paint retired; global rule provides lift */} .shs-cta:empty, .shs-cta2:empty { display: none; } /* Image column */ .shs-visual { display: flex; align-items: center; justify-content: center; } .shs-img-wrap { width: 100%; aspect-ratio: 4/3; background: var(--shell-card, rgba(0, 0, 0, 0.03)); border: 1px solid var(--shell-line, rgba(0, 0, 0, 0.06)); overflow: hidden; display: flex; align-items: center; justify-content: center; } .shs-img { width: 100%; height: 100%; object-fit: cover; } .shs-img[src=""] { display: none; } @media (max-width: 768px) { .shs { grid-template-columns: 1fr; padding: 100px 24px 40px; gap: 40px; } .shs h1 { font-size: 2.2rem; letter-spacing: -1px; } } /* v3.12.02 — tone override classes. ssla-tone-dark inverts text * to read against dark bgs; ssla-tone-light inverts to read against * light bgs. Surgical inversion of headings/body/eyebrow; complete * coverage will iterate per Glenn's walks. */ .ssla-tone-dark .shs h1{color: #ffffff} .ssla-tone-dark .shs-desc{color: rgba(255, 255, 255, 0.78)} .ssla-tone-light .shs h1{color: var(--shell-h, #1a1d21)} .ssla-tone-light .shs-desc{color: var(--shell-t, #4a5568)} /* ─────── identity-login ─────── */ /* === identity-login === */ .sil-inner{padding:80px 48px;max-width:480px;margin:0 auto;text-align:center}.sil-inner h2{font-family:var(--shell-hf);font-size:1.8rem;font-weight:700;color:var(--shell-h);margin-bottom:24px} /* ─────── image-showcase ─────── */ /* === image-showcase === */ .imgsc{width:100%} .imgsc-inner{max-width:900px;margin:0 auto;padding:80px 48px} .imgsc-frame{border:1px solid var(--shell-line,rgba(0,0,0,0.1));background:#fff;padding:16px;box-shadow:0 12px 48px rgba(0,0,0,.08)} .imgsc-frame img{width:100%;height:auto;display:block} .imgsc-frame img[src=""]{min-height:200px;background:var(--shell-card,transparent)} .imgsc-cap{font-size:13px;color:var(--shell-m,#6b7280);text-align:center;margin:16px 0 0;line-height:1.6} .imgsc-cap:empty{display:none} /* ─────── links-strip ─────── */ /* === links-strip === */ /* ── RSC Tech Strip ── */ .ssla-section[data-ssla-type="links-strip"]{padding:56px 0;background:var(--shell-bg,transparent);border-top:1px solid var(--shell-line,rgba(0,0,0,0.1));border-bottom:1px solid var(--shell-line,rgba(0,0,0,0.1))} .rts-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .rts-text{max-width:560px} .rts-text h3{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--shell-h,currentColor)} .rts-text p{font-size:15px;color:var(--shell-m,#6b7280);line-height:1.75} .rts-products{display:flex;gap:24px;align-items:center;flex-wrap:wrap} .rts-chip{font-family:"Montserrat",sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;padding:10px 20px;border:1px solid var(--shell-line,rgba(0,0,0,0.1));border-radius:8px;color:var(--shell-t,#1a1a1a);transition:all 0.3s;text-decoration:none} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .rts-chip:hover{border-color:var(--shell-accent,currentColor);color:var(--shell-accent,currentColor)} */ .rts-chip:hover{/* paint retired; global rule provides lift */} .rts-chip:empty{display:none} @media(max-width:768px){.rts-inner{flex-direction:column;text-align:center}.rts-products{justify-content:center}} /* ─────── logo-bar ─────── */ /** * Section: Logo — Bar * RSD Design Language Wave 5 Primitive 3. * Companion to: pages/sections/logo-bar.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="logo-bar"]{ padding: var(--shell-section-padding-y-standard) 48px; background: var(--shell-surface-cream); } [data-ssla-type="logo-bar"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="logo-bar"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="logo-bar"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="logo-bar"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } /* Density variants */ [data-ssla-type="logo-bar"][data-ssla-variant-density="compact"]{ padding-top: var(--shell-section-padding-y-compact); padding-bottom: var(--shell-section-padding-y-compact); } [data-ssla-type="logo-bar"][data-ssla-variant-density="generous"]{ padding-top: var(--shell-section-padding-y-generous); padding-bottom: var(--shell-section-padding-y-generous); } .ssla-logo-bar{ max-width: var(--shell-content-max-width); margin: 0 auto; text-align: center; } /* Eyebrow positioning */ .ssla-logo-bar-eyebrow{ margin-bottom: 32px; color: var(--shell-text-muted); font-size: var(--shell-eyebrow-size); font-weight: 600; letter-spacing: var(--shell-eyebrow-letter-spacing); text-transform: uppercase; } [data-ssla-type="logo-bar"][data-ssla-variant-eyebrow-position="none"] .ssla-logo-bar-eyebrow{ display: none; } [data-ssla-type="logo-bar"][data-ssla-variant-eyebrow-position="inline-left"] .ssla-logo-bar{ display: flex; align-items: center; gap: 32px; text-align: left; } [data-ssla-type="logo-bar"][data-ssla-variant-eyebrow-position="inline-left"] .ssla-logo-bar-eyebrow{ margin-bottom: 0; flex-shrink: 0; } [data-ssla-variant-tone="dark"] .ssla-logo-bar-eyebrow{ color: var(--shell-text-on-dark-muted); } /* Logos row */ .ssla-logo-bar-logos{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--shell-logo-gap); flex-grow: 1; } [data-ssla-type="logo-bar"][data-ssla-variant-density="compact"] .ssla-logo-bar-logos{ gap: 32px; } .ssla-logo{ display: flex; align-items: center; height: var(--shell-logo-height-standard); position: relative; } [data-ssla-type="logo-bar"][data-ssla-variant-density="compact"] .ssla-logo{ height: var(--shell-logo-height-compact); } [data-ssla-type="logo-bar"][data-ssla-variant-density="generous"] .ssla-logo{ height: var(--shell-logo-height-generous); } .ssla-logo img{ max-height: 100%; width: auto; object-fit: contain; } /* Hide empty logo slots */ .ssla-logo:has(img[src=""]){ display: none; } /* Monochrome treatment */ [data-ssla-type="logo-bar"][data-ssla-variant-logo-treatment="monochrome"] .ssla-logo img{ filter: grayscale(1) brightness(0.6); opacity: 0.7; transition: filter 0.2s, opacity 0.2s; } [data-ssla-type="logo-bar"][data-ssla-variant-logo-treatment="monochrome"] .ssla-logo img:hover{ filter: grayscale(0) brightness(1); opacity: 1; } [data-ssla-variant-tone="dark"][data-ssla-variant-logo-treatment="monochrome"] .ssla-logo img{ filter: grayscale(1) brightness(2.5); opacity: 0.55; } [data-ssla-variant-tone="dark"][data-ssla-variant-logo-treatment="monochrome"] .ssla-logo img:hover{ filter: grayscale(0) brightness(1); opacity: 1; } /* Logo link overlay */ .ssla-logo-link{ position: absolute; inset: 0; z-index: 2; } .ssla-logo-link:empty{ display: none; } @media (max-width: 767px) { [data-ssla-type="logo-bar"]{ padding: 64px 24px; } [data-ssla-type="logo-bar"][data-ssla-variant-eyebrow-position="inline-left"] .ssla-logo-bar{ flex-direction: column; text-align: center; } .ssla-logo-bar-logos{ gap: 32px; } } /* ─────── members-tiers ─────── */ /* === members-tiers === */ .smt-inner{padding:100px 48px;max-width:1100px;margin:0 auto}.smt-inner h2{font-family:var(--shell-hf);font-size:2rem;font-weight:700;color:var(--shell-h);margin-bottom:8px}.smt-sub{font-size:.82rem;color:var(--shell-m);margin-bottom:40px} /* ─────── metrics-band ─────── */ /** * Section: Metrics — Band * RSD Design Language Wave 5 Primitive 4. * Companion to: pages/sections/metrics-band.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="metrics-band"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--shell-surface-dark); } [data-ssla-type="metrics-band"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="metrics-band"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="metrics-band"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } [data-ssla-type="metrics-band"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); } .ssla-metrics-band{ max-width: var(--shell-content-max-width); margin: 0 auto; } .ssla-metrics-band-eyebrow{ text-align: center; margin-bottom: 56px; } /* Hide empty eyebrow */ .ssla-metrics-band-eyebrow:has(.ssla-eyebrow.is-plain:empty){ display: none; } /* Metrics grid */ .ssla-metrics-band-row{ display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="2"] .ssla-metrics-band-row{ grid-template-columns: repeat(2, 1fr); } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="3"] .ssla-metrics-band-row{ grid-template-columns: repeat(3, 1fr); } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metrics-band-row{ grid-template-columns: repeat(4, 1fr); } /* Metric */ .ssla-metric{ text-align: center; padding: 0 16px; } /* Hide unused metric slots */ .ssla-metric:has(.ssla-metric-value:empty){ display: none; } /* Hide metrics beyond declared count */ [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="2"] .ssla-metric:nth-child(n+3){ display: none; } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="3"] .ssla-metric:nth-child(n+4){ display: none; } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metric:nth-child(n+5){ display: none; } /* Hairline dividers */ [data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"] .ssla-metric{ border-right: 1px solid var(--shell-hairline-on-dark); } [data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"][data-ssla-variant-tone="light"] .ssla-metric{ border-right-color: var(--shell-hairline); } [data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"] .ssla-metric:last-child{ border-right: 0; } /* Metric value */ .ssla-metric-value{ font-family: var(--shell-font-family-heading); font-size: var(--shell-metric-value-size); font-weight: 700; letter-spacing: var(--shell-metric-value-letter-spacing); color: var(--shell-text-on-dark); line-height: 1.0; margin-bottom: 12px; } [data-ssla-variant-tone="light"] .ssla-metric-value{ color: var(--shell-text-dark); } /* Accent position */ [data-ssla-type="metrics-band"][data-ssla-variant-accent-position="value"] .ssla-metric-value{ color: var(--shell-accent); } [data-ssla-type="metrics-band"][data-ssla-variant-accent-position="label"] .ssla-metric-label{ color: var(--shell-accent); } /* Metric label */ .ssla-metric-label{ font-size: var(--shell-metric-label-size); color: var(--shell-text-on-dark-muted); line-height: 1.4; } [data-ssla-variant-tone="light"] .ssla-metric-label{ color: var(--shell-text-muted); } /* Metric helper */ .ssla-metric-helper{ margin-top: 8px; font-size: 12px; color: var(--shell-text-on-dark-muted); opacity: 0.7; } [data-ssla-variant-tone="light"] .ssla-metric-helper{ color: var(--shell-text-muted); } .ssla-metric-helper:empty{ display: none; } @media (max-width: 1023px) { [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metrics-band-row{ grid-template-columns: repeat(2, 1fr); } [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metric:nth-child(2){ border-right: 0; } } @media (max-width: 639px) { [data-ssla-type="metrics-band"]{ padding: 80px 24px; } [data-ssla-type="metrics-band"] .ssla-metrics-band-row{ grid-template-columns: 1fr; gap: 32px; } [data-ssla-type="metrics-band"] .ssla-metric{ border-right: 0; padding-bottom: 32px; border-bottom: 1px solid var(--shell-hairline-on-dark); } [data-ssla-variant-tone="light"] .ssla-metric{ border-bottom-color: var(--shell-hairline); } [data-ssla-type="metrics-band"] .ssla-metric:last-child{ border-bottom: 0; } } /* ─────── nav-expanded ─────── */ /* === nav-expanded === */ .ssla-nav-exp{display:flex;align-items:center;justify-content:space-between;padding:20px 48px;background:rgba(15,27,46,0.97);position:relative;z-index:100} .ssla-nav-exp .nav-brand-group{display:flex;flex-direction:column;gap:2px} .ssla-nav-exp .nav-brand{color:#fff;font-size:18px;font-weight:800;text-decoration:none;letter-spacing:0.5px} .ssla-nav-exp .nav-tagline{color:rgba(255,255,255,0.45);font-size:11px;font-weight:500;letter-spacing:1px} .ssla-nav-exp .nav-links{display:flex;gap:28px;align-items:center} .ssla-nav-exp .nav-links a{color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:0.8;transition:opacity 0.2s} .ssla-nav-exp .nav-links a:hover{opacity:1} @media(max-width:768px){.ssla-nav-exp{padding:16px 24px;flex-wrap:wrap;gap:12px}.ssla-nav-exp .nav-links{gap:16px;flex-wrap:wrap}} /* ─────── nav-standard ─────── */ /* === nav-standard === */ .ssla-nav-std{display:flex;align-items:center;justify-content:space-between;padding:16px 48px;background:rgba(15,27,46,0.97);position:relative;z-index:100} .ssla-nav-std .nav-brand{color:#fff;font-size:16px;font-weight:700;text-decoration:none;letter-spacing:0.5px} .ssla-nav-std .nav-links{display:flex;gap:28px} .ssla-nav-std .nav-links a{color:#fff;text-decoration:none;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:0.8;transition:opacity 0.2s} .ssla-nav-std .nav-links a:hover{opacity:1} @media(max-width:768px){.ssla-nav-std{padding:14px 24px;flex-wrap:wrap;gap:12px}.ssla-nav-std .nav-links{gap:16px;flex-wrap:wrap}} /* ─────── offerings-3 ─────── */ /* === offerings-3 === */ /* ── RSC Programs ── */ .ssla-section[data-ssla-type="offerings-3"]{padding:100px 0;background:var(--shell-bg-warm,#F3EDE4)} .rpg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px} .rpg-card{background:var(--shell-bg-warm,#FAF7F2);border:1px solid var(--shell-line,rgba(0,0,0,0.1));border-radius:16px;padding:44px 32px;transition:all 0.4s;position:relative;overflow:hidden} .rpg-card:hover{border-color:var(--shell-accent,currentColor);transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,0.06)} .rpg-top{width:100%;height:3px;position:absolute;top:0;left:0;right:0} .rpg-top-1{background:var(--shell-accent,currentColor)} .rpg-top-2{background:var(--shell-accent-2,#B8652A)} .rpg-top-3{background:var(--shell-bg-dark,#2A2520)} .rpg-badge{display:inline-block;font-family:"Montserrat",sans-serif;font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:20px} .rpg-badge-1{color:var(--shell-accent,currentColor)} .rpg-badge-2{color:var(--shell-accent-2,#B8652A)} .rpg-badge-3{color:var(--shell-bg-dark,#2A2520)} .rpg-card h3{font-size:26px;font-weight:800;margin-bottom:6px;color:var(--shell-h,currentColor)} .rpg-tagline{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:500;color:var(--shell-m,#6b7280);font-style:italic;margin-bottom:16px} .rpg-card p{font-size:14.5px;color:var(--shell-m,#6b7280);line-height:1.75;margin-bottom:16px} .rpg-who{font-size:12.5px;font-weight:600;color:var(--shell-t,#1a1a1a);letter-spacing:0.3px;padding-top:16px;border-top:1px solid var(--shell-line,rgba(0,0,0,0.1))} .rpg-who span{color:var(--shell-m,#6b7280);font-weight:400} @media(max-width:768px){.rpg-grid{grid-template-columns:1fr}} /* ─────── photo-strip ─────── */ /* === photo-strip === */ .pstrip{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden} .pstrip img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block} .pstrip img:hover{transform:scale(1.03)} .pstrip img[src=""]{background:var(--shell-card,transparent)} @media(max-width:768px){.pstrip{grid-template-columns:1fr;height:auto!important}.pstrip img{height:200px}} /* ─────── portfolio-grid ─────── */ /* === portfolio-grid === */ .spg-inner{padding:100px 48px;max-width:1100px;margin:0 auto} .spg-inner h2{font-family:var(--shell-hf);font-size:2rem;font-weight:700;color:var(--shell-h);margin-bottom:8px} .spg-sub{font-size:.82rem;color:var(--shell-m);margin-bottom:40px} .spg-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .spg-card{border:1px solid var(--shell-line,rgba(255,255,255,.06));background:var(--shell-card,rgba(255,255,255,.02));transition:.3s;overflow:hidden} .spg-card:hover{border-color:var(--sc,var(--shell-accent));transform:translateY(-2px)} .spg-thumb{aspect-ratio:16/9;background:var(--shell-card);overflow:hidden;display:flex;align-items:center;justify-content:center} .spg-thumb img{width:100%;height:100%;object-fit:cover} .spg-thumb img[src=""]{display:none} .spg-card h3{font-size:.88rem;font-weight:700;color:var(--shell-h);padding:20px 24px 4px} .spg-card p{font-size:.78rem;color:var(--shell-m);padding:0 24px 20px} @media(max-width:768px){.spg-inner{padding:60px 24px}.spg-grid{grid-template-columns:1fr}} /* ─────── portfolio-list ─────── */ /* === portfolio-list === */ .spl-inner{padding:100px 48px} .spl-inner h2{font-family:var(--shell-hf);font-size:2.3rem;font-weight:700;color:var(--shell-h);margin-bottom:8px} .spl-sub{font-size:.82rem;color:var(--shell-m);margin-bottom:48px;max-width:500px} .spl-item{padding:32px 0;border-bottom:1px solid var(--shell-line,rgba(255,255,255,.04));transition:.3s} .spl-item:hover{padding-left:10px} .spl-item:empty,.spl-item h3:empty{display:none} .spl-tag{font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--sc,var(--shell-accent));margin-bottom:6px} .spl-tag:empty{display:none} .spl-item h3{font-size:.95rem;font-weight:700;color:var(--shell-h)} .spl-item p{font-size:.8rem;color:var(--shell-m);max-width:580px;margin-top:4px} .spl-item p:empty{display:none} .spl-status{display:inline-block;margin-top:10px;padding:3px 10px;font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--shell-line,rgba(255,255,255,.08));color:var(--sc,var(--shell-accent))} .spl-status:empty{display:none} @media(max-width:768px){.spl-inner{padding:60px 24px}} /* ─────── pricing-3col ─────── */ /* === pricing-3col === */ .ssla-section:has(.spr-outer){background:var(--shell-h,currentColor);color:#fff} .spr-outer{padding:var(--paint-section-padding,100px) 48px} .spr-header{text-align:center;margin-bottom:64px} .spr-label{font-size:.58rem;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent,currentColor));margin-bottom:16px} .spr-header h2{font-family:var(--shell-hf,inherit);font-size:2.2rem;font-weight:var(--paint-heading-weight,600);letter-spacing:var(--paint-heading-letter-spacing-h2,normal);text-transform:var(--paint-heading-case-h2,none);color:#fff;margin-bottom:12px} .spr-header p{font-size:.85rem;color:rgba(255,255,255,.6)} .spr-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0} .spr-card{padding:48px 32px;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-right:none} .spr-card:last-child{border-right:1px solid rgba(255,255,255,.08)} .spr-featured{background:rgba(255,255,255,.08);border-color:var(--sc,var(--shell-accent,currentColor))!important;border-right:1px solid var(--sc,var(--shell-accent,currentColor))!important;position:relative;transform:scaleY(1.02)} .spr-featured+.spr-card{border-left-color:var(--sc,var(--shell-accent,currentColor))} .spr-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%) translateY(-50%);background:var(--sc,var(--shell-accent,currentColor));color:var(--shell-h,currentColor);font-size:.52rem;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,1.5px);text-transform:var(--paint-eyebrow-case,none);padding:6px 18px;white-space:nowrap} .spr-badge:empty{display:none} .spr-tier{font-size:.58rem;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent,currentColor));margin-bottom:20px} .spr-price{font-family:var(--shell-hf,inherit);font-size:2.8rem;font-weight:var(--paint-heading-weight,700);color:#fff;margin-bottom:4px} .spr-period{font-size:.75rem;color:rgba(255,255,255,.45);margin-bottom:36px} .spr-features{text-align:left;margin-bottom:36px;font-size:.75rem;color:rgba(255,255,255,.7);line-height:2.4;white-space:pre-line} .spr-btn{display:block;width:100%;padding:14px;font-family:inherit;font-size:.68rem;font-weight:700;text-align:center;text-decoration:none;letter-spacing:1.5px;text-transform:uppercase;border:2px solid rgba(255,255,255,.2);color:var(--paint-button-secondary-text,#fff);background:var(--paint-button-secondary-fill,transparent);border-radius:var(--paint-button-radius,0);transition:var(--paint-motion-timing,.3s);cursor:pointer} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .spr-btn:hover{border-color:var(--sc,var(--shell-accent,currentColor));color:var(--sc,var(--shell-accent,currentColor))} */ .spr-btn:hover{/* paint retired; global rule provides lift */} .spr-featured .spr-btn{background:var(--paint-button-primary-fill,var(--sc,var(--shell-accent,currentColor)));color:var(--paint-button-primary-text,var(--shell-h,currentColor));border-color:var(--sc,var(--shell-accent,currentColor))} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .spr-featured .spr-btn:hover{filter:brightness(1.1)} */ .spr-featured .spr-btn:hover{/* paint retired; global rule provides lift */} @media(max-width:768px){.spr-outer{padding:60px 24px}.spr-grid{grid-template-columns:1fr}.spr-card{border-right:1px solid rgba(255,255,255,.08)!important}.spr-featured{transform:none}} /* ─────── pricing-3tier ─────── */ /** * Section: Pricing — 3 Tier * RSD Design Language Wave 6 Primitive 1. * Companion to: pages/sections/pricing-3tier.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="pricing-3tier"]{ padding: var(--shell-section-padding-y-generous) 48px; /* v3.12.24 (#11) — Three-tier bg paint resolution: * 1. --ssla-bg-color set by admin picker (highest priority) * 2. variant-surface tokens (cream/warm/light/dark below) * 3. --shell-surface-cream literal (final fallback) * The variant-surface rules set background directly; the bg_color * inline custom property overrides them via cascade order. */ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="pricing-3tier"][data-ssla-variant-surface="cream"]{ background: var(--ssla-bg-color, var(--shell-surface-cream)); } [data-ssla-type="pricing-3tier"][data-ssla-variant-surface="warm"]{ background: var(--ssla-bg-color, var(--shell-surface-warm)); } [data-ssla-type="pricing-3tier"][data-ssla-variant-surface="light"]{ background: var(--ssla-bg-color, var(--shell-surface-light)); } [data-ssla-type="pricing-3tier"][data-ssla-variant-surface="dark"]{ background: var(--ssla-bg-color, var(--shell-surface-dark)); } .ssla-pricing-3tier{ max-width: var(--shell-content-max-width); margin: 0 auto; } .ssla-pricing-3tier-header{ text-align: center; margin-bottom: 56px; } .ssla-pricing-3tier-header > * + *{ margin-top: 16px; } .ssla-pricing-3tier-header .ssla-h2{ max-width: 720px; margin: 16px auto 0; } .ssla-pricing-3tier-header .ssla-lede{ max-width: 620px; margin: 0 auto; } /* Tiers grid */ .ssla-pricing-3tier-tiers{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--shell-grid-gap-standard); } /* Tier card */ .ssla-tier{ padding: var(--shell-card-padding); background: var(--shell-surface-light); border: 1px solid var(--shell-hairline-strong); display: flex; flex-direction: column; position: relative; box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .ssla-tier:hover{ transform: translateY(-2px); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2), var(--shell-shadow-lift-3); border-color: var(--shell-accent); } /* Hide unused tier slots */ .ssla-tier:has(.ssla-tier-name:empty){ display: none; } /* Featured tier */ [data-ssla-type="pricing-3tier"][data-ssla-variant-featured-tier="1"] .ssla-tier:nth-child(1), [data-ssla-type="pricing-3tier"][data-ssla-variant-featured-tier="2"] .ssla-tier:nth-child(2), [data-ssla-type="pricing-3tier"][data-ssla-variant-featured-tier="3"] .ssla-tier:nth-child(3){ border: 2px solid var(--shell-accent); box-shadow: var(--shell-shadow-featured); transform: scale(1.02); z-index: 2; } /* Tier badge */ .ssla-tier-badge{ position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--shell-accent); color: var(--shell-text-dark); padding: 6px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .ssla-tier-badge:empty{ display: none; } /* Tier name */ .ssla-tier-name{ font-family: var(--shell-font-family-heading); font-size: 24px; font-weight: 700; color: var(--shell-text-dark); margin-bottom: 8px; } .ssla-tier-tagline{ font-size: 14px; color: var(--shell-text-muted); margin-bottom: 24px; min-height: 22px; } .ssla-tier-tagline:empty{ margin-bottom: 16px; min-height: 0; } /* Tier price */ .ssla-tier-price{ margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--shell-hairline); } /* Annual price hidden by default; toggle reveals */ .ssla-tier-price-annual{ display: none; } [data-ssla-type="pricing-3tier"].is-annual .ssla-tier-price-monthly{ display: none; } [data-ssla-type="pricing-3tier"].is-annual .ssla-tier-price-annual{ display: block; } /* Tier features */ .ssla-tier-features{ list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1; } .ssla-tier-features li{ padding: 8px 0; font-size: 14px; color: var(--shell-text-body); line-height: 1.5; position: relative; padding-left: 24px; } .ssla-tier-features li::before{ content: "✓"; position: absolute; left: 0; top: 8px; color: var(--shell-accent); font-weight: 700; } /* Tier CTA */ .ssla-tier-cta{ display: block; text-align: center; padding: 14px 24px; border: 1px solid var(--shell-text-dark); background: transparent; color: var(--shell-text-dark); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-tier-cta:hover{ * background: var(--shell-text-dark); * color: var(--shell-text-on-dark); * } */ .ssla-tier-cta:hover{/* paint retired; global rule provides lift */} /* Featured tier CTA — solid */ [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="1"] .ssla-tier:nth-child(1) .ssla-tier-cta, [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="2"] .ssla-tier:nth-child(2) .ssla-tier-cta, [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="3"] .ssla-tier:nth-child(3) .ssla-tier-cta{ background: var(--shell-accent-strong); border-color: var(--shell-accent-strong); color: var(--shell-text-on-dark); } [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="1"] .ssla-tier:nth-child(1) .ssla-tier-cta:hover, [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="2"] .ssla-tier:nth-child(2) .ssla-tier-cta:hover, /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="3"] .ssla-tier:nth-child(3) .ssla-tier-cta:hover{ * background: var(--shell-text-dark); * border-color: var(--shell-text-dark); * } */ [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="featured-only"][data-ssla-variant-featured-tier="3"] .ssla-tier:nth-child(3) .ssla-tier-cta:hover{/* paint retired; global rule provides lift */} [data-ssla-type="pricing-3tier"][data-ssla-variant-cta-emphasis="all-solid"] .ssla-tier-cta{ background: var(--shell-accent-strong); border-color: var(--shell-accent-strong); color: var(--shell-text-on-dark); } @media (max-width: 1023px) { .ssla-pricing-3tier-tiers{ grid-template-columns: 1fr; gap: 32px; } [data-ssla-type="pricing-3tier"] .ssla-tier:nth-child(2){ transform: none; } } @media (max-width: 639px) { [data-ssla-type="pricing-3tier"]{ padding: 64px 24px; } } /* ─── v3.5.85 — Billing toggle styling ─────────────────────────────────────── Pre-v3.5.85: HTML emitted radio inputs + text spans inside labels but had ZERO CSS targeting them. Result: raw browser-native radios + concatenated text mash ("◉Monthly⚪AnnualSave 20%") rendered. Add the missing styling: - container: horizontally-centered group with rounded background pill - hide native radio inputs visually but keep accessible - labels become clickable pills with active-state painting - savings label inline, accent color ──────────────────────────────────────────────────────────────────────── */ .ssla-pricing-3tier-billing-toggle{ display: inline-flex; align-items: center; gap: 4px; padding: 4px; margin: 32px auto 64px; background: var(--shell-surface-warm, #F3EDE4); border: 1px solid var(--shell-hairline, rgba(45,42,38,0.10)); border-radius: 999px; /* Center the inline-flex container in its parent block */ align-self: center; } /* Wrap container so margin: auto centers correctly inside flex/grid parents */ .ssla-pricing-3tier > .ssla-pricing-3tier-billing-toggle{ display: flex; width: fit-content; margin-left: auto; margin-right: auto; } /* Visually hide native radio but keep accessible */ .ssla-pricing-3tier-billing-toggle input[type="radio"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ssla-billing-opt{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--shell-text-muted, rgba(45,42,38,0.62)); transition: background 160ms ease, color 160ms ease; user-select: none; } .ssla-billing-opt:hover{ color: var(--shell-text-dark, #2D2A26); } /* Active state — when the radio inside the label is :checked */ .ssla-billing-opt:has(input[type="radio"]:checked){ background: var(--shell-surface-light, #FFFFFF); color: var(--shell-text-dark, #2D2A26); box-shadow: 0 1px 2px rgba(45,42,38,0.06), 0 0 0 1px rgba(45,42,38,0.04); } /* Savings label — chip inline with annual option */ .ssla-billing-savings{ display: inline-block; padding: 2px 8px; background: var(--shell-accent-soft, rgba(200,155,63,0.15)); color: var(--shell-accent, #C89B3F); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Dark-tone variant — invert toggle background + active state */ [data-ssla-type="pricing-3tier"][data-ssla-variant-tone="dark"] .ssla-pricing-3tier-billing-toggle{ background: rgba(245,240,232,0.08); border-color: rgba(245,240,232,0.12); } [data-ssla-type="pricing-3tier"][data-ssla-variant-tone="dark"] .ssla-billing-opt{ color: rgba(245,240,232,0.62); } [data-ssla-type="pricing-3tier"][data-ssla-variant-tone="dark"] .ssla-billing-opt:hover{ color: rgba(245,240,232,0.88); } [data-ssla-type="pricing-3tier"][data-ssla-variant-tone="dark"] .ssla-billing-opt:has(input[type="radio"]:checked){ background: rgba(245,240,232,0.92); color: var(--shell-text-dark, #2D2A26); } /* ─────── pricing-comparison-table ─────── */ /** * Section: Pricing — Comparison Table * RSD Design Language Wave 6 Primitive 2. * Companion to: pages/sections/pricing-comparison-table.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="pricing-comparison-table"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--shell-surface-light); } [data-ssla-type="pricing-comparison-table"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="pricing-comparison-table"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="pricing-comparison-table"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="pricing-comparison-table"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } .ssla-pricing-comparison-table{ max-width: var(--shell-content-max-width); margin: 0 auto; } .ssla-pricing-comparison-table-header{ text-align: center; margin-bottom: 56px; } .ssla-pricing-comparison-table-header > * + *{ margin-top: 16px; } .ssla-pricing-comparison-table-header .ssla-h2{ max-width: 720px; margin: 16px auto 0; } .ssla-pricing-comparison-table-header .ssla-lede{ max-width: 620px; margin: 0 auto; } .ssla-pct-tier-name{ font-family: var(--shell-font-family-heading); font-size: 18px; font-weight: 700; color: var(--shell-text-dark); margin-bottom: 8px; } [data-ssla-variant-tone="dark"] .ssla-pct-tier-name{ color: var(--shell-text-on-dark); } .ssla-pct-tier-price{ font-size: 14px; color: var(--shell-text-muted); margin-bottom: 16px; } .ssla-pct-tier-cta{ display: inline-block; padding: 10px 20px; border: 1px solid var(--shell-text-dark); background: transparent; color: var(--shell-text-dark); font-size: 13px; font-weight: 500; text-decoration: none; } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .ssla-pct-tier-cta:hover{ * background: var(--shell-text-dark); * color: var(--shell-text-on-dark); * } */ .ssla-pct-tier-cta:hover{/* paint retired; global rule provides lift */} [data-ssla-variant-tone="dark"] .ssla-pct-tier-cta{ border-color: var(--shell-text-on-dark); color: var(--shell-text-on-dark); } /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * [data-ssla-variant-tone="dark"] .ssla-pct-tier-cta:hover{ * background: var(--shell-text-on-dark); * color: var(--shell-text-dark); * } */ [data-ssla-variant-tone="dark"] .ssla-pct-tier-cta:hover{/* paint retired; global rule provides lift */} @media (max-width: 767px) { [data-ssla-type="pricing-comparison-table"]{ padding: 64px 16px; } } /* ─────── pricing-simple ─────── */ /** * Section: Pricing — Simple * RSD Design Language Wave 6 Primitive 3. * Companion to: pages/sections/pricing-simple.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="pricing-simple"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--shell-surface-cream); } [data-ssla-type="pricing-simple"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="pricing-simple"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="pricing-simple"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="pricing-simple"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } .ssla-pricing-simple{ max-width: var(--shell-content-max-width); margin: 0 auto; } .ssla-pricing-simple-header{ text-align: center; margin-bottom: 40px; } [data-ssla-type="pricing-simple"][data-ssla-variant-alignment="left"] .ssla-pricing-simple-header{ text-align: left; } .ssla-pricing-simple-header > * + *{ margin-top: 12px; } /* Card */ .ssla-pricing-simple-card{ max-width: 520px; margin: 0 auto; padding: 48px; background: var(--shell-surface-light); text-align: center; } [data-ssla-type="pricing-simple"][data-ssla-variant-alignment="left"] .ssla-pricing-simple-card{ margin-left: 0; text-align: left; } [data-ssla-type="pricing-simple"][data-ssla-variant-card-treatment="bordered"] .ssla-pricing-simple-card{ border: 1px solid var(--shell-hairline-strong); } [data-ssla-type="pricing-simple"][data-ssla-variant-card-treatment="lifted"] .ssla-pricing-simple-card{ border: 1px solid var(--shell-hairline-strong); box-shadow: var(--shell-shadow-lift-1), var(--shell-shadow-lift-2); } [data-ssla-type="pricing-simple"][data-ssla-variant-card-treatment="flat"] .ssla-pricing-simple-card{ background: transparent; padding: 0; border: 0; } /* Product name */ .ssla-pricing-simple-product-name{ font-family: var(--shell-font-family-heading); font-size: 24px; font-weight: 700; color: var(--shell-text-dark); margin-bottom: 8px; } /* Price */ .ssla-pricing-simple-price{ margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--shell-hairline); } /* Features */ .ssla-pricing-simple-features{ list-style: none; padding: 0; margin: 0 0 32px; } .ssla-pricing-simple-features li{ padding: 8px 0; font-size: 15px; color: var(--shell-text-body); line-height: 1.5; position: relative; padding-left: 28px; text-align: left; } .ssla-pricing-simple-features li::before{ content: "✓"; position: absolute; left: 0; top: 8px; color: var(--shell-accent); font-weight: 700; } /* Inline feature display */ [data-ssla-type="pricing-simple"][data-ssla-variant-feature-display="inline"] .ssla-pricing-simple-features{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; } [data-ssla-type="pricing-simple"][data-ssla-variant-feature-display="inline"] .ssla-pricing-simple-features li{ padding: 0 0 0 20px; font-size: 14px; text-align: left; } [data-ssla-type="pricing-simple"][data-ssla-variant-feature-display="none"] .ssla-pricing-simple-features{ display: none; } @media (max-width: 767px) { [data-ssla-type="pricing-simple"]{ padding: 64px 24px; } .ssla-pricing-simple-card{ padding: 32px 24px; } } /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── Template emits shorter class names (.ssla-pricing-simple-tagline, .ssla-pricing-simple-helper, .ssla-pricing-simple-footer-note) than the existing rules ((removed legacy class), etc.). The manifest selectors{} declares the template's names. These rules ensure manifest-declared classes have real CSS. */ .ssla-pricing-simple-tagline{ font-size: 14px; color: var(--shell-text-muted); margin-bottom: 32px; } .ssla-pricing-simple-tagline:empty{ margin-bottom: 16px; } .ssla-pricing-simple-helper{ margin-top: 8px; font-size: 14px; color: var(--shell-text-muted); } .ssla-pricing-simple-helper:empty{ display: none; } .ssla-pricing-simple-footer-note{ margin-top: 24px; font-size: 13px; color: var(--shell-text-muted); } .ssla-pricing-simple-footer-note:empty{ display: none; } /* ─────── showcase-grid ─────── */ /* === showcase-grid === */ /* ── RSC Books ── */ .ssla-section[data-ssla-type="showcase-grid"]{padding:100px 0;background:var(--shell-bg-warm,#F3EDE4)} .rbk-image-wrap{margin-top:48px} .rbk-hero-img{width:100%;max-width:960px;border-radius:16px} .rbk-hero-img[src=""]{display:none} .rbk-cta-wrap{margin-top:36px} .rbk-cta-wrap .btn:empty{display:none} /* ─────── showcase-large ─────── */ /** * Section: Showcase — Large * RSD Design Language Wave 4 Primitive 2. * Companion to: pages/sections/showcase-large.php * * The dramatic mid-page anchor block. Generous padding. Larger H2 typography. * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="showcase-large"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--shell-surface-dark); } [data-ssla-type="showcase-large"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="showcase-large"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="showcase-large"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } [data-ssla-type="showcase-large"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); } .ssla-showcase-large{ max-width: var(--shell-content-max-width); margin: 0 auto; text-align: center; } .ssla-showcase-large-actions{ margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Image positioning */ .ssla-showcase-large-image{ margin-top: 56px; } [data-ssla-type="showcase-large"][data-ssla-variant-image-position="below"] .ssla-showcase-large-image{ margin-top: 56px; } [data-ssla-type="showcase-large"][data-ssla-variant-image-position="above"] .ssla-showcase-large{ display: flex; flex-direction: column; } [data-ssla-type="showcase-large"][data-ssla-variant-image-position="above"] .ssla-showcase-large-image{ order: 1; margin-top: 0; margin-bottom: 56px; } [data-ssla-type="showcase-large"][data-ssla-variant-image-position="above"] .ssla-showcase-large-callouts{ order: 3; } [data-ssla-type="showcase-large"][data-ssla-variant-image-position="inline-left"] .ssla-showcase-large-image{ order: 1; margin-top: 0; } .ssla-showcase-large-img-caption{ margin-top: 12px; font-size: 13px; color: var(--shell-text-muted); } [data-ssla-variant-tone="dark"] .ssla-showcase-large-img-caption{ color: var(--shell-text-on-dark-muted); } /* Callouts */ .ssla-showcase-large-callouts{ display: none; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--shell-hairline); grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; } [data-ssla-variant-tone="dark"] .ssla-showcase-large-callouts{ border-top-color: var(--shell-hairline-on-dark); } [data-ssla-type="showcase-large"][data-ssla-variant-callouts="on"] .ssla-showcase-large-callouts{ display: grid; } @media (max-width: 767px) { [data-ssla-type="showcase-large"]{ padding: 80px 24px; } .ssla-showcase-large-callouts{ grid-template-columns: 1fr; gap: 24px; } } /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── Template emits shorter class names (.ssla-callout-icon, -label, -desc) than the existing per-section CSS (.ssla-showcase-large-callout-*). The manifest selectors{} declares the template's names. These rules ensure manifest-declared classes have real CSS. */ .ssla-callout-icon{ width: 32px; height: 32px; margin-bottom: 12px; color: var(--shell-accent); flex-shrink: 0; } .ssla-callout-icon:empty{ display: none; } .ssla-callout-label{ font-family: var(--shell-font-family-body); font-size: 13px; font-weight: 600; letter-spacing: var(--shell-eyebrow-letter-spacing); text-transform: uppercase; color: var(--shell-text-dark); margin: 0 0 6px; } [data-ssla-variant-tone="dark"] .ssla-callout-label{ color: var(--shell-text-on-dark); } .ssla-callout-desc{ font-size: 14px; line-height: 1.5; color: var(--shell-text-muted); margin: 0; } [data-ssla-variant-tone="dark"] .ssla-callout-desc{ color: var(--shell-text-on-dark-muted); } /* ─────── steps-3 ─────── */ /* === steps-3 === */ /* ── Steps 3 ── */ .ssla-section[data-ssla-type="steps-3"]{background:var(--shell-bg-cool,#f8f9fb);padding:var(--paint-section-padding,100px) 48px} .s3-inner{max-width:1140px;margin:0 auto} .s3-center{text-align:center} .s3-label{font-family:"Montserrat",sans-serif;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-m,#6b7280);margin:0 0 12px} .s3-heading{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:var(--paint-heading-weight,800);letter-spacing:var(--paint-heading-letter-spacing-h2,-0.8px);text-transform:var(--paint-heading-case-h2,none);color:var(--shell-h,currentColor);line-height:1.15;margin:0 0 16px} .s3-desc{font-family:"Montserrat",sans-serif;font-size:16px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0 auto 60px;max-width:560px} .s3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .s3-card{background:#fff;padding:48px 36px;text-align:left;border-top:3px solid var(--shell-h,currentColor);transition:transform var(--paint-motion-timing,0.3s),box-shadow var(--paint-motion-timing,0.3s)} .s3-card:hover{transform:translateY(var(--paint-hover-lift,-4px));box-shadow:0 12px 40px rgba(0,0,0,0.06)} .s3-num{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:var(--paint-eyebrow-weight,800);letter-spacing:var(--paint-eyebrow-letter-spacing,2px);text-transform:var(--paint-eyebrow-case,none);color:var(--shell-h,currentColor);opacity:0.5;margin-bottom:20px} .s3-card h3{font-family:"Montserrat",sans-serif;font-size:22px;font-weight:var(--paint-heading-weight,700);letter-spacing:var(--paint-heading-letter-spacing-h3,normal);text-transform:var(--paint-heading-case-h3,none);color:var(--shell-h,currentColor);margin:0 0 14px} .s3-card p{font-family:"Montserrat",sans-serif;font-size:15px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0} @media(max-width:900px){.s3-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}} @media(max-width:640px){.ssla-section[data-ssla-type="steps-3"]{padding:72px 24px}} /* ─────── testimonial-grid ─────── */ /** * Section: Testimonial — Grid * RSD Design Language Wave 5 Primitive 2. * Companion to: pages/sections/testimonial-grid.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="testimonial-grid"]{ padding: var(--shell-section-padding-y-standard) 48px; background: var(--shell-surface-cream); } [data-ssla-type="testimonial-grid"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="testimonial-grid"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="testimonial-grid"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="testimonial-grid"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } .ssla-testimonial-grid{ max-width: var(--shell-content-max-width); margin: 0 auto; } .ssla-testimonial-grid-header{ text-align: center; margin-bottom: 64px; } .ssla-testimonial-grid-header > * + *{ margin-top: 16px; } .ssla-testimonial-grid-header .ssla-h2{ max-width: 800px; margin: 16px auto 0; } .ssla-testimonial-grid-header .ssla-lede{ max-width: 620px; margin: 0 auto; } /* Cards grid */ .ssla-testimonial-grid-cards{ display: grid; gap: var(--shell-grid-gap-standard); grid-template-columns: repeat(3, 1fr); } [data-ssla-type="testimonial-grid"][data-ssla-variant-columns="2"] .ssla-testimonial-grid-cards{ grid-template-columns: repeat(2, 1fr); } [data-ssla-type="testimonial-grid"][data-ssla-variant-columns="3"] .ssla-testimonial-grid-cards{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 1023px) { [data-ssla-type="testimonial-grid"][data-ssla-variant-columns="3"] .ssla-testimonial-grid-cards{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639px) { [data-ssla-type="testimonial-grid"]{ padding: 64px 24px; } [data-ssla-type="testimonial-grid"] .ssla-testimonial-grid-cards{ grid-template-columns: 1fr; } } /* ─────── testimonial-single ─────── */ /** * Section: Testimonial — Single * RSD Design Language Wave 5 Primitive 1. * Companion to: pages/sections/testimonial-single.php * * @since 3.5.70 (RSD primitives band) */ [data-ssla-type="testimonial-single"]{ padding: var(--shell-section-padding-y-generous) 48px; background: var(--shell-surface-warm); } [data-ssla-type="testimonial-single"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); } [data-ssla-type="testimonial-single"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); } [data-ssla-type="testimonial-single"][data-ssla-variant-surface="light"]{ background: var(--shell-surface-light); } [data-ssla-type="testimonial-single"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); } [data-ssla-type="testimonial-single"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); } .ssla-testimonial-single{ max-width: var(--shell-text-max-width); margin: 0 auto; text-align: center; position: relative; } [data-ssla-type="testimonial-single"][data-ssla-variant-alignment="left"] .ssla-testimonial-single{ text-align: left; max-width: var(--shell-content-max-width); } .ssla-testimonial-single .ssla-eyebrow.is-plain{ margin-bottom: 32px; } /* Quote glyph */ .ssla-testimonial-single-glyph{ display: none; font-family: Georgia, serif; font-size: var(--shell-quote-glyph-size); line-height: 0.5; color: var(--shell-accent); margin-bottom: 24px; font-weight: 700; } .ssla-testimonial-single-glyph::before{ content: "\201C"; /* opening curly quote */ } [data-ssla-type="testimonial-single"][data-ssla-variant-quote-style="glyph"] .ssla-testimonial-single-glyph{ display: block; } [data-ssla-type="testimonial-single"][data-ssla-variant-quote-style="bordered"] .ssla-testimonial-single-quote{ border: 1px solid var(--shell-hairline-strong); padding: 48px; } [data-ssla-variant-tone="dark"][data-ssla-variant-quote-style="bordered"] .ssla-testimonial-single-quote{ border-color: var(--shell-hairline-on-dark); } /* Attribution */ .ssla-testimonial-single-attribution{ margin-top: 32px; display: flex; align-items: center; gap: 16px; } [data-ssla-type="testimonial-single"][data-ssla-variant-alignment="center"] .ssla-testimonial-single-attribution{ justify-content: center; } .ssla-testimonial-single-photo{ display: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } [data-ssla-type="testimonial-single"][data-ssla-variant-attribution-style="with-photo"] .ssla-testimonial-single-photo{ display: block; } .ssla-testimonial-single-logo{ display: none; height: 32px; width: auto; flex-shrink: 0; } [data-ssla-type="testimonial-single"][data-ssla-variant-attribution-style="with-logo"] .ssla-testimonial-single-logo{ display: block; } [data-ssla-type="testimonial-single"][data-ssla-variant-attribution-style="text-only"] .ssla-testimonial-single-attribution{ display: block; } @media (max-width: 767px) { [data-ssla-type="testimonial-single"]{ padding: 80px 24px; } } /* ─── v3.7.06 / Pass 4 Band 4a — manifest selector resolution ────────── Template emits .ssla-testimonial-single-name; existing CSS uses (removed legacy class). The manifest selectors{} declares the template's name. This rule gives the manifest-declared class a real CSS rule. */ .ssla-testimonial-single-name{ font-size: 16px; font-weight: 600; color: var(--shell-text-dark); } [data-ssla-variant-tone="dark"] .ssla-testimonial-single-name{ color: var(--shell-text-on-dark); } /* ─────── testimonials-grid ─────── */ /* === testimonials-grid === */ .stg-outer{padding:var(--paint-section-padding,100px) 48px} .stg-header{text-align:center;margin-bottom:64px} .stg-label{font-size:.58rem;font-weight:var(--paint-eyebrow-weight,700);letter-spacing:var(--paint-eyebrow-letter-spacing,2.5px);text-transform:var(--paint-eyebrow-case,uppercase);color:var(--sc,var(--shell-accent,currentColor));margin-bottom:16px} .stg-header h2{font-family:var(--shell-hf,inherit);font-size:2.2rem;font-weight:var(--paint-heading-weight,600);letter-spacing:var(--paint-heading-letter-spacing-h2,normal);text-transform:var(--paint-heading-case-h2,none);color:var(--shell-h,currentColor)} .stg-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .stg-card{background:var(--shell-card,rgba(255,255,255,.03));border:1px solid var(--shell-line,rgba(0,0,0,.08));padding:40px 32px;transition:border-color var(--paint-motion-timing,.3s)} .stg-card:hover{border-color:var(--sc,var(--shell-accent,currentColor))} .stg-card:has(.stg-text:empty){display:none} .stg-stars{display:flex;gap:3px;margin-bottom:20px} .stg-stars svg{width:16px;height:16px;color:var(--sc,var(--shell-accent,currentColor))} .stg-text{font-size:.82rem;line-height:1.8;color:var(--shell-t,#1a1a1a);margin-bottom:28px} .stg-text:empty{display:none} .stg-foot{display:flex;align-items:center;gap:12px} .stg-avatar{width:40px;height:40px;background:var(--shell-h,currentColor);display:flex;align-items:center;justify-content:center;color:var(--sc,var(--shell-accent,currentColor));font-family:var(--shell-hf,inherit);font-size:.8rem;font-weight:600;overflow:hidden} .stg-name{font-size:.75rem;font-weight:600;color:var(--shell-h,currentColor)} .stg-name:empty{display:none} .stg-loc{font-size:.62rem;color:var(--shell-m,#6b7280);margin-top:1px} .stg-loc:empty{display:none} @media(max-width:768px){.stg-outer{padding:60px 24px}.stg-grid{grid-template-columns:1fr}} /* ─────── tiers-3 ─────── */ /* === tiers-3 === */ /* ── Tiers 3 ── */ .ssla-section[data-ssla-type="tiers-3"]{background:#fff;padding:100px 48px} .t3-inner{max-width:1140px;margin:0 auto} .t3-top{margin-bottom:56px} .t3-label{font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--shell-m,#6b7280);margin:0 0 12px} .t3-heading{font-family:"Montserrat",sans-serif;font-size:36px;font-weight:800;color:var(--shell-h,currentColor);line-height:1.15;letter-spacing:-0.8px;margin:0 0 16px} .t3-desc{font-family:"Montserrat",sans-serif;font-size:16px;color:var(--shell-t,#1a1a1a);line-height:1.7;margin:0;max-width:560px} .t3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px} .t3-card{padding:40px 32px;background:var(--shell-bg-cool,#f8f9fb);border-top:3px solid var(--shell-h,currentColor);transition:all 0.3s} .t3-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.06)} .t3-card.t1{border-top-color:var(--shell-accent,currentColor)} .t3-card.t2{border-top-color:var(--shell-accent-2,currentColor)} .t3-card.t3{border-top-color:var(--shell-accent-3,currentColor)} .t3-num{font-family:"Montserrat",sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--shell-m,#6b7280);margin-bottom:16px} .t3-card h3{font-family:"Montserrat",sans-serif;font-size:20px;font-weight:700;color:var(--shell-h,currentColor);margin:0 0 12px} .t3-card p{font-family:"Montserrat",sans-serif;font-size:14.5px;color:var(--shell-t,#1a1a1a);line-height:1.75;margin:0} .t3-actions{display:flex;gap:14px;flex-wrap:wrap} .t3-btn-primary{display:inline-block;background:var(--shell-h,currentColor);color:#fff;padding:16px 40px;font-family:"Montserrat",sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-decoration:none;text-transform:uppercase;transition:all 0.25s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .t3-btn-primary:hover{filter:brightness(0.8);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.15)} */ .t3-btn-primary:hover{/* paint retired; global rule provides lift */} .t3-btn-outline{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--shell-h,currentColor);padding:16px 40px;font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;letter-spacing:0.5px;text-decoration:none;border:1.5px solid var(--shell-h,currentColor);transition:all 0.25s} /* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk). * Unified hover treatment now ships from 0-shared.css (lift only, * no paint shift). Original rule preserved here for reference. * Original: * .t3-btn-outline:hover{background:var(--shell-h,currentColor);color:#fff;transform:translateY(-2px)} */ .t3-btn-outline:hover{/* paint retired; global rule provides lift */} @media(max-width:900px){.t3-grid{grid-template-columns:1fr;max-width:520px}} @media(max-width:640px){.ssla-section[data-ssla-type="tiers-3"]{padding:72px 24px}.t3-actions{flex-direction:column;align-items:flex-start}} /* ─────── trust-bar ─────── */ /* === trust-bar === */ .ssla-section:has(.stb-inner){border-top:1px solid var(--shell-line,rgba(0,0,0,.08));border-bottom:1px solid var(--shell-line,rgba(0,0,0,.08))} .stb-inner{display:flex;align-items:center;justify-content:center;gap:48px;padding:24px 48px;flex-wrap:wrap} .stb-item{display:flex;align-items:center;gap:10px;font-size:.68rem;font-weight:var(--paint-eyebrow-weight,600);text-transform:var(--paint-eyebrow-case,none);letter-spacing:var(--paint-eyebrow-letter-spacing,.3px);color:var(--shell-m,#6b7280)} .stb-icon{width:18px;height:18px;color:var(--sc,var(--shell-accent,currentColor));flex-shrink:0} .stb-item span:empty{display:none} .stb-item:has(span:empty){display:none} @media(max-width:768px){.stb-inner{gap:16px;padding:20px 24px;justify-content:flex-start}}