/** * Vivid Frequency v11.7.55 - Theme Component Primitives * The Spiritual Agency · spiritual.agency * * SCOPE * This file holds Layer 2 component primitives that ship with the theme: * §0 Blocksy palette bridge (Blocksy --theme-palette-color-N -> SA tokens) * §1 VF wrapper (.vf, .vf--light, .vf-inner) * §2 Container reset (body:has(.vf) constraints cancellation) * §3 Structural void-space fix (generalised to all .vf--* variants) * §4 Light-mode header palette * §5 Component primitives (.vf-eyebrow, .vf-btn family, .vf-cta-row, .vf-pullquote) * §6 Hero pattern (.h-hero, .h-stage, .h-grad, .h-trust) * §7 Inline chip * §8 Active menu state * §9 Section rhythm + overflow protection * §10 Archive cards & content cards (mode-aware via --vf-surface-alt) * §11 Header submenu cascade (mode-aware via --vf-surface-alt) * §12 Header menu spread * §13 Light-Mode Shakti Pink swap (variable override → Shakti Deep) * §14 Footer menu cascade (mode-aware via --vf-heading) * §15 P1 Wisdom Star foundation (reading spine + reading type + inverting island) * §16 P2 Studio foundation (reading skin + eyebrow + stat strip + full-bleed hero; .sa-pq/.sa-lede/figcaption global) * §17 Mega-menu panel (cascade, per-pillar accents, pillar-anchor clearance via --vf-header-height) * * PAGE-SPECIFIC LAYOUTS LIVE ELSEWHERE * Home, About, Plant a Tree, Services hub, service singles, project singles * are all migrated to Blocksy Content Blocks. Reusable component patterns * (tier card grids, partner marquee, tree strip, final-CTA, pullquote) are * GreenShift Reusable Templates. Truly global rules are in the GreenShift * gspb_global_settings.custom_css option. * * !important USAGE * Permitted only against Blocksy and GreenShift inline-style cascade fights. * Each !important is justified by a comment naming the conflicting source. * If a future change can remove an !important without regression, do it. * ============================================================================ */ /* ============================================================================ §0 · BLOCKSY PALETTE BRIDGE Wire Blocksy's --theme-palette-color-N tokens to VF brand tokens at :root. Puts Blocksy chrome (buttons, links, badges) on the VF cascade so they inherit VF colours WITHOUT requiring Customiser colorPalette config. The intent was always there per style.css palette comments ("Blocksy C1", "Blocksy C2") but the runtime wiring was missing - this completes it. Discovered during vivid-frequency clone session 2: after foundation theme_mods nuke, the .ct-header-cta button rendered as Blocksy default blue/rectangular because no theme_mod colorPalette and no VF wiring. Same architectural family as §10 cards and §11 submenu (Blocksy primitives consuming VF tokens). ============================================================================ */ :root { --theme-palette-color-1: var(--sa-shakti-start); /* C1 - Shakti Pink (primary brand) */ --theme-palette-color-2: var(--sa-shakti-crimson); /* C2 - Shakti Crimson (hover) */ --theme-palette-color-3: var(--sa-void); /* C3 - Void (text) */ --theme-palette-color-4: var(--sa-deep-violet-dark); /* C4 - Deep Violet (headings light) */ --theme-palette-color-5: rgba(13, 13, 26, 0.15); /* C5 - subtle borders */ --theme-palette-color-6: rgba(13, 13, 26, 0.05); /* C6 - surface alt light */ --theme-palette-color-7: var(--sa-parchment); /* C7 - Parchment (light text on dark) */ --theme-palette-color-8: #ffffff; /* C8 - Pure white */ /* §M.4 - VF subhead semantic token (eyebrows / subtitles / sec-num). Dark = Anahata Green; auto-flips to Anahata Deep in light via §13's --sa-anahata-green swap. Explicit light value also set in §13. */ --vf-subhead: var(--sa-anahata-green); } /* Blocksy header CTA button - pill shape, generous padding to match VF aesthetic. Background and text colours flow from the palette tokens above via Blocksy's own button CSS, so no explicit bg/color rules needed here. */ .ct-header-cta .ct-button { border-radius: 50px; padding: 12px 22px; } /* ============================================================================ §1 · VF WRAPPER Adding `.vf` to a page wrapper opts the page into the Vivid Frequency chrome layer: full-bleed escape, sane typography, mode-aware canvas. Variant skins (.vf--home, .vf--about, etc.) layer page-specific styles from their Content Blocks. ============================================================================ */ .vf { position: relative; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); padding-block-start: 0; font-family: var(--sa-font); color: var(--vf-text); background: var(--vf-surface); font-size: 16px; line-height: 1.65; overflow-x: hidden; isolation: isolate; box-sizing: border-box; } .vf *, .vf *::before, .vf *::after { box-sizing: border-box; } .vf img { display: block; max-width: 100%; height: auto; } .vf a { color: inherit; text-decoration: none; } .vf-inner { max-width: var(--vf-content-max); margin-inline: auto; padding-inline: var(--vf-gutter-x); } /* ============================================================================ §2 · CONTAINER RESET When .vf is present anywhere in the body, cancel WP/Blocksy's content-area constraints so the wrapper can be edge-to-edge. Hides Blocksy's default page-title hero on .vf pages. ============================================================================ */ body:has(.vf) main#main, body:has(.vf) article[class*="type-"], body:has(.vf) article[class*="type-"] > *, body:has(.vf) .entry-content, body:has(.vf) .entry-content.is-layout-constrained { max-width: none; width: 100%; padding-inline: 0; margin-inline: auto; } body:has(.vf) .entry-header, body:has(.vf) .single_post_title_wrapper { display: none; } /* ============================================================================ §3 · STRUCTURAL VOID-SPACE FIX v11.0.4 §I, generalised in v11.2 to any .vf--* page variant. Without this, WP main#main + article + entry-content wraps .vf--* pages with default page padding, leaving a visible gap between hero and viewport. Flattens every wrapper in the chain when any .vf--* variant class is present. Justifies !important: Blocksy is-layout-constrained and WP page template both inject inline padding/margin/max-width. R3/S6 AUDIT (A2-P5): the nine is-layout-constrained !important here (plus the four single-template ones below) were audited as a structural fight against WP core's injected max-width, not a counter to one of our own faults. Removal needs a theme.json / block-pattern opt-out of is-layout-constrained on the .vf wrapper; until that lands they are kept by decision, not oversight. */ /* ============================================================================ */ body.page main#main:has([class*="vf--"]) { padding: 0 !important; margin: 0 !important; } body.page main#main:has([class*="vf--"]) > .ct-container-full, body.page main#main:has([class*="vf--"]) article.page, body.page main#main:has([class*="vf--"]) .entry-content, body.page main#main:has([class*="vf--"]) .entry-content.is-layout-constrained { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body main#main .entry-content > [class*="vf--"], body main#main .entry-content.is-layout-constrained > [class*="vf--"] { max-width: 100% !important; width: 100% !important; margin: 0 !important; } /* Single-service / single-project / single-hosting templates run their .vf wrappers full-bleed in the same way. !important justified: WP article selectors set max-width inline on the singular template wrapper. */ body.single-service .vf, body.single-project .vf, body.single-hosting .vf { margin-inline: calc(50% - 50vw) !important; width: 100vw !important; max-width: 100vw !important; padding-inline: 0 !important; } /* ============================================================================ §4 · HEADER PALETTE Header bg and menu link colour are both cascade-driven via tokens - single rules, no body-class prefix needed since the tokens flip at body level (style.css :root vs body.vf--light) and cascade through inheritance to the header. --vf-surface : void in dark, parchment in light --vf-heading : parchment in dark, Deep Violet in light Without these overrides, Blocksy's blocksy-dynamic-global-css paints the middle row --theme-palette-color-8 (white) in both modes. !important justified: Blocksy header inline transparent-row + link colour rules. ============================================================================ */ header.ct-header [data-row="middle"] { background-color: var(--vf-surface) !important; } /* Transparent at-top row (was the post-3511 VF HEADER SPIKE, now native). !important required: Blocksy paints the row via [data-header*="type-1"] .ct-header [data-transparent-row="yes"][data-row*="middle"] at (0,4,0) and the opaque arm above is only (0,2,1). Proven CP2a. */ header.ct-header [data-transparent-row="yes"][data-row="middle"] { background-color: transparent !important; } /* Header menu link colour. Re-point the variables Blocksy declares directly on its exact per-element nav selector, mirroring the section 14 footer model. Blocksy's generated global.css sets, on [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a, --theme-link-initial-color: var(--theme-text-color). A custom-property declaration on the element beats an inherited nav-level re-point, and vf-overrides.css loads after global.css, so source order wins at equal specificity. No !important. Both initial AND hover are pinned to --vf-heading to hold the existing behaviour: the prior !important pinned rest and hover alike, so top-level header links show no hover colour shift. The header CTA is [data-id="button"], a separate item the menu selector does not match, so this leaves the button untouched and the old :not(.ct-button) narrowing is unnecessary by construction. */ [data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a { --theme-link-initial-color: var(--vf-heading); --theme-link-hover-color: var(--vf-heading); } /* Submenu chevron icon-color override. Blocksy's Customizer sets --theme-link-initial-color: #ffffff for the header menu, and inside nav[class*=menu] .ct-menu-link, Blocksy re-points --theme-icon-color to --theme-link-initial-color. That makes the SVG chevron's fill pure white, which is invisible on the parchment surface in light mode. (In void mode, white-on-near-black happens to be visible, so the bug only surfaces in light mode.) Re-pointing --theme-icon-color to --vf-heading aligns the chevron with the menu text in both modes: parchment in dark, Deep Violet in light. */ header.ct-header .ct-menu-link { --theme-icon-color: var(--vf-heading); } /* ============================================================================ §5 · COMPONENT PRIMITIVES ============================================================================ */ /* -- Eyebrow ---------------------------------------------------------- */ .vf-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: var(--vf-radius-pill); font-family: var(--sa-font); font-size: 11px; font-weight: var(--sa-weight-label); letter-spacing: var(--sa-track-label); text-transform: uppercase; background: color-mix(in srgb, var(--sa-anahata-green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sa-anahata-green) 25%, transparent); color: var(--vf-subhead); /* §M.4 - was var(--sa-anahata-green); token-driven (lime dark / Anahata Deep light), no visual change */ margin-block-end: 1rem; } .vf--light .vf-eyebrow, body.vf--light .vf-eyebrow { background: color-mix(in srgb, var(--sa-anahata-deep) 8%, transparent); border-color: color-mix(in srgb, var(--sa-anahata-deep) 25%, transparent); color: var(--sa-anahata-deep); } /* -- Buttons ---------------------------------------------------------- */ .vf-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; border-radius: var(--vf-radius-pill); font-family: var(--sa-font); font-weight: var(--sa-weight-heading); font-size: 15px; line-height: 1.2; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s, background 0.2s; } .vf-btn:hover { transform: translateY(-2px); } /* Canonical primary button - sculpted-gradient (cosmetic13, "Linear-style"). The previous glass approximation depended on backdrop atmosphere bleeding through a 55% clearance zone in the gradient. That worked on chakra-blob hero sections (/home/) and atmospheric CTA sections (.sa-about-cta::before) but failed on flat panels (/contact/). The Vivid Frequency button is now solid sculpted gradient - no glass conceit. Works on any backdrop because it owns its own depth. Architecture: - Background: top-to-bottom gradient from --vf-btn-tint to a derived darker stop via color-mix(... 60%, black). --vf-btn-tint is declared in style.css :root as the literal #FF0060 (Shakti Pink, ES10), making the default primary button mode-invariant. Chakra modifiers (.vf-btn--primary-blue / -violet / -green) override --vf-btn-tint at the element level with their chakra tokens, which §13-flip to their -deep variants in light mode - chakra primary buttons remain mode-following by design. - Border: removed in favour of an outer ring via box-shadow's 0-spread layer - gives a crisper edge than a 1px border at the same alpha. - Multi-layer box-shadow stack: (1) tinted ring, (2) inset top highlight, (3) tinted close shadow, (4) deeper diffused drop. - Text: --vf-btn-text (= --sa-parchment) - declared in style.css :root as the canonical Theme Button Colour. Parchment-on-Shakti-Pink is 3.70:1 (AA-Large), and the text-shadow rgba(0,0,0,0.25) below lifts perceived contrast comfortably past AA. Same regime in both modes now that the surface is mode-invariant. */ /* §5 - .vf-btn.vf-btn--primary dual-class: component owns its visual properties at (0,2,0), defends against ambient context rules like canvas link-resets (e.g. .sa-home a { color: inherit } at (0,1,1)). Component encapsulation per ground-up principle - see bridge principle.ground_up_over_patch_2026_05_19 and vf.v11_6_0.light_mode_button_text_bug_2026_05_18. */ .vf-btn.vf-btn--primary { background: linear-gradient(180deg, var(--vf-btn-tint) 0%, color-mix(in oklab, var(--vf-btn-tint) 60%, #000) 100% ); border: none; color: var(--vf-btn-text); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); /* lifts parchment perceived contrast past AA on Shakti Pink (3.70:1 → reads ~AA+) in both modes (ES10) */ box-shadow: 0 0 0 1px color-mix(in oklab, var(--vf-btn-tint) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 16px -8px color-mix(in oklab, var(--vf-btn-tint) 55%, transparent), 0 16px 32px -16px rgba(0, 0, 0, 0.35); } .vf-btn.vf-btn--primary:hover { background: linear-gradient(180deg, /* §5 - was 110% (malformed; the over-100% mix loses alpha and renders translucent in Blink/WebKit - verified empirically, void+light). 85% is well-formed and produces an opaque glossy sheen top stop. Glass-as- design is committed for v11.7 as .vf-btn--glass - see vf.v11_7.glass_button_variant_design_track_2026_05_19. */ color-mix(in oklab, var(--vf-btn-tint) 85%, #fff) 0%, color-mix(in oklab, var(--vf-btn-tint) 70%, #000) 100% ); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30); /* hover lifts shadow alpha 0.25 → 0.30 in step with the rest of the layer-alpha bumps */ box-shadow: 0 0 0 1px color-mix(in oklab, var(--vf-btn-tint) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 12px 24px -8px color-mix(in oklab, var(--vf-btn-tint) 65%, transparent), 0 20px 40px -16px rgba(0, 0, 0, 0.45); } .vf-btn--ghost { background: color-mix(in srgb, var(--sa-parchment) 6%, transparent); border-color: color-mix(in srgb, var(--sa-parchment) 30%, transparent); color: var(--sa-parchment); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .vf-btn--ghost:hover { border-color: color-mix(in srgb, var(--sa-anahata-green) 60%, transparent); background: color-mix(in srgb, var(--sa-anahata-green) 8%, transparent); } .vf--light .vf-btn--ghost, body.vf--light .vf-btn--ghost { background: color-mix(in srgb, var(--sa-void) 6%, transparent); border-color: color-mix(in srgb, var(--sa-void) 30%, transparent); color: var(--sa-void); } .vf--light .vf-btn--ghost:hover, body.vf--light .vf-btn--ghost:hover { border-color: var(--sa-void); background: color-mix(in srgb, var(--sa-void) 8%, transparent); } .vf-btn--light { background: #fff; color: var(--sa-shakti-start); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15); } .vf-btn--light:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); } .vf-btn--void { background: var(--sa-void); color: var(--sa-parchment); border-color: color-mix(in srgb, var(--sa-parchment) 25%, transparent); } .vf-btn--void:hover { background: #000; } .vf-btn--outline-light { background: transparent; color: #fff; border: 2px solid color-mix(in srgb, var(--sa-parchment) 50%, transparent); } .vf-btn--outline-light:hover { border-color: #fff; background: color-mix(in srgb, var(--sa-parchment) 10%, transparent); } /* Hero / main-CTA size modifier - proportional to eyebrow pill (~30px) and heading hierarchy. ~52-56px rendered. Composes with the base .vf-btn line-height 1.2. */ .vf-btn--lg { padding: 1.125rem 2.5rem; font-size: 16px; gap: 0.625rem; } @media (max-width: 640px) { .vf-btn--lg { padding: 1rem 2rem; font-size: 15px; } } .vf-cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; margin-block-start: 1.25rem; } /* -- Pullquote (used by "Vivid - Pullquote" Reusable Template) ------- */ .vf-pullquote { display: flex; gap: 1.5rem; align-items: flex-start; padding: 1.5rem; border-left: 4px solid var(--sa-shakti-start); background: color-mix(in srgb, var(--sa-shakti-start) 4%, transparent); border-radius: 0 12px 12px 0; margin-block: 2rem; font-family: var(--sa-font); } .vf-pullquote__img { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; } .vf-pullquote__img img { width: 100%; height: 100%; object-fit: cover; } .vf-pullquote__body { flex: 1; } .vf-pullquote__quote { font-size: 1.15rem; line-height: 1.5; font-style: italic; margin-block-end: 0.75rem; color: var(--vf-text); } .vf-pullquote__cite { font-size: 0.85rem; font-weight: var(--sa-weight-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vf-text-subtle); } @media (max-width: 640px) { .vf-pullquote { flex-direction: column; } .vf-pullquote__img { width: 64px; height: 64px; } } /* ============================================================================ §5b · OVERLAY CLEARANCE TOKEN (CP2b, header adoption) Single source of truth for the transparent-overlay-header clearance, consumed by §6 (hero), §6b (no-hero pages), §6c (project toprail), §6d (service hero). Paired token: an at-rest value plus an admin-bar value, because the WP admin bar is 32px desktop but 46px at <=782px, so a flat calc(+32px) is wrong at mobile. Literals preserve the canonical 180/160/140 and 212/192/186 exactly. */ :root { --vf-overlay-clear: 180px; --vf-overlay-clear-adminbar: 212px; } @media (max-width: 1023px) { :root { --vf-overlay-clear: 160px; --vf-overlay-clear-adminbar: 192px; } } @media (max-width: 767px) { :root { --vf-overlay-clear: 140px; --vf-overlay-clear-adminbar: 186px; } } /* ============================================================================ §6 · HERO PATTERN Canonical hero used by Home, Home Light, About, Plant a Tree, service singles, and project singles. Page-specific backgrounds (chakra blob mesh, void mesh, etc.) layer in via the page Content Block's CSS. Header clearance is STATIC. Replaces the broken v11.1.0 calc-based architecture per bridge memory vf.v11_calc_breakage_diagnosis. Blocksy does not reliably emit --has-transparent-header on the front end, so the calc resolved to 0px and the static fallback in Customizer post 7 was what kept pages usable. v11.2 makes the static value the canonical rule. ============================================================================ */ .h-hero, .h-hero-v11 { position: relative; isolation: isolate; overflow: hidden; padding-inline: var(--vf-hero-pad-x); padding-top: var(--vf-overlay-clear); padding-bottom: var(--vf-hero-pad-bottom); background: var(--vf-surface); color: var(--vf-text); margin: 0; } .admin-bar .h-hero, .admin-bar .h-hero-v11 { padding-top: var(--vf-overlay-clear-adminbar); } /* §6 · Home hero (.h-hero-v11) overlay clearance authority. The Home hero reusable emits a page-scoped inline rule .sa-home .h-hero-v11 { padding: clamp(3rem,5vw,5rem) ... } at 0,2,0, a pre-overlay internal padding that under-clears the transparent header and out-ranks the base rule above (0,1,0). Authored here at 0,2,1 (no page name, no !important) so the theme owns hero overlay clearance on its own and the post-3511 DB empty is a true no-op for Home. */ body .h-hero.h-hero-v11 { padding-top: var(--vf-overlay-clear); } body.admin-bar .h-hero.h-hero-v11 { padding-top: var(--vf-overlay-clear-adminbar); } .single-service .h-hero, .single-project .h-hero, .single-hosting .h-hero { padding-top: 200px; } .admin-bar.single-service .h-hero, .admin-bar.single-project .h-hero, .admin-bar.single-hosting .h-hero { padding-top: 232px; } .h-hero .h-stage { position: relative; z-index: 3; max-width: 920px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .h-hero .h-eyebrow { display: inline-flex; background: color-mix(in srgb, var(--sa-shakti-start) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sa-shakti-start) 32%, transparent); color: var(--sa-shakti-end); padding: 0.4rem 1rem; border-radius: var(--vf-radius-pill); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--sa-weight-heading); margin: 0 auto 1.5rem; } .h-hero h1 { margin: 0 auto 1.5rem; text-align: center; max-width: 880px; color: var(--vf-heading); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; font-weight: var(--sa-weight-heading); letter-spacing: -0.025em; } .h-hero h1 .h-grad { background: var(--vf-grad-crown); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .h-hero .h-hero-sub { margin: 0 auto 2.5rem; text-align: center; max-width: 680px; color: var(--vf-text-muted); font-size: 1.075rem; line-height: 1.7; } .h-hero .h-cta-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 0 auto 2.5rem; } .h-hero .h-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6rem 1.25rem; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--vf-text-subtle); } /* §M.3 - Trust strip light-mode contrast fix .h-trust uses --vf-text-subtle which resolves to rgba(13,13,26,0.5) in light mode - too low contrast on the chakra-wash hero background. Use Anahata Deep at full opacity (matches the body paragraph treatment and the .h-trust-dot light-mode colour at L481 below). */ .vf--light .h-hero .h-trust, body.vf--light .h-hero .h-trust { color: var(--sa-anahata-deep); } .h-hero .h-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sa-anahata-green); display: inline-block; box-shadow: 0 0 0 2px rgba(167, 255, 0, 0.18); } .vf--light .h-hero .h-trust-dot, body.vf--light .h-hero .h-trust-dot { background: var(--sa-anahata-deep); box-shadow: 0 0 0 2px rgba(61, 101, 0, 0.20); } /* Chakra blob background - populated by page CB markup */ .h-hero .chakra-blobs-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* Aurora hero canvas (P6) - same slot as the blob layer it replaces */ .h-hero .aurora-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* Staggered entrance reveal - IntersectionObserver in page JS toggles .sa-in */ .h-stage.sa-rv > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); } .h-stage.sa-rv.sa-in > * { opacity: 1; transform: translateY(0); } .h-stage.sa-rv.sa-in > .vf-chakrapulse { transition-delay: 0.10s; } .h-stage.sa-rv.sa-in > .h-eyebrow, .h-stage.sa-rv.sa-in > .vf-eyebrow { transition-delay: 0.20s; } .h-stage.sa-rv.sa-in > h1 { transition-delay: 0.35s; } .h-stage.sa-rv.sa-in > .h-hero-sub { transition-delay: 0.55s; } .h-stage.sa-rv.sa-in > .h-cta-row { transition-delay: 0.75s; } .h-stage.sa-rv.sa-in > .h-trust { transition-delay: 0.95s; } @media (max-width: 780px) { .h-hero h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); line-height: 1.1; } .h-hero .h-trust { font-size: 0.72rem; gap: 0.5rem 0.9rem; } } @media (prefers-reduced-motion: reduce) { .h-stage.sa-rv > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================================================ §7 · INLINE CHIP Prose-scale companion to the .sa-cbp multi-line code block (which ships as the "Vivid - Code Block (Terminal)" GreenShift Reusable Template, NOT here). Both patterns share the GitHub-dark grey-blue palette per bridge memory vf.inline_code_pattern + vf.code_block_pattern, so inline mentions and multi-line samples on the same page read as one visual family. The :not([class]) guard scopes the rule to bare only - fenced code blocks (.wp-block-code, .gspb_code-block) and the .sa-cbp syntax tokens (c/k/s/n/f/v) all carry classes and are unaffected. ============================================================================ */ code:not([class]) { background: var(--vf-code-surface); color: #e6edf3; border: 1px solid var(--vf-code-border); border-radius: 6px; padding: 1px 6px 2px; font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Monaco, Consolas, monospace; font-size: 0.88em; letter-spacing: 0; vertical-align: baseline; } /* Reset on block-level 
 so the chip styles don't bleed into
   multi-line code blocks. */
pre code:not([class]) {
  background:    none;
  border:        none;
  border-radius: 0;
  padding:       0;
}

/* Light-mode variant - chip stays neutral grey-blue but text flips to
   Deep Violet for legibility on parchment. 15% opacity (was 8%) - at 8%
   chips were below typical recognition threshold on parchment. */
.vf--light code:not([class]),
body.vf--light code:not([class]) {
  color:        var(--sa-deep-violet-dark);
}


/* ============================================================================
   §8 · ACTIVE MENU STATE
   Active menu items use --sa-shakti-start. In Void Mode this resolves
   to Shakti Pink #FF0060 (high contrast on void). In Light Mode, §13's
   variable swap re-resolves it to Shakti Deep #6B0030 (AAA on parchment).
   One rule, mode-aware via cascade. No light-mode-specific override needed.
   !important justified: Blocksy menu link inline colour rules.
   ============================================================================ */
.menu-item.current-menu-item     > a:not(.ct-column-heading),
.menu-item.current_page_item     > a:not(.ct-column-heading),
.menu-item.current-menu-ancestor > a:not(.ct-column-heading),
.menu-item.current-menu-parent   > a:not(.ct-column-heading) {
  color: var(--sa-shakti-start) !important;
}


/* ============================================================================
   §9 · SECTION RHYTHM + OVERFLOW PROTECTION
   Consistent vertical rhythm across .vf-tagged pages. Prevents horizontal
   scroll caused by chakra-pulse animations and partner marquees.
   ============================================================================ */
.vf > section,
[class*="vf--"] > section {
  padding-block: var(--vf-section-pad-y);
}

/* :not(html):not(body) guards the vf--light / vf--dark mode-class prefix
   collision: overflow-x:clip must never reach the document root or 
   (their scroll chain has to stay identical to a normal post), but it still
   clips the page-family wrappers. S2 CHECKPOINT 3. Estate-wide [class*="vf--"]
   sweep tracked in vf.followup.vf_wildcard_mode_class_collision_2026_05_22 */
.vf,
[class*="vf--"]:not(html):not(body) {
  overflow-x: clip;
}

.vf-chakrapulse,
.chakrapulse {
  display:   inline-flex;
  max-width: 100%;
  flex-wrap: nowrap;
}

.partner-strip .marquee-wrap,
.marquee-wrap {
  overflow:  hidden;
  max-width: 100vw;
}

/* ============================================================================
   §6b · NO-HERO PAGE OVERLAY CLEARANCE  (CP2b, header adoption)
   Strategy A default-on: every transparent-header .page clears at the content
   wrapper (main#main), EXCEPT bleed/hero templates which opt out via :has() over
   the known hero classes, plus an explicit body.vf-bleed escape for future pages.
   !important + (1,3,2)/(1,4,2) beats §2's
   body.page main#main:has([class*="vf--"]){padding:0!important} at (1,2,2).
   No :has([class*="vf--"]) qualifier: /enterprise/ and /care-plans/ carry no
   vf-- wrapper and must still clear. Proven CP2a. */
body.page:not(.vf-bleed):not(:has(.h-hero, .h-hero-v11, .sv-hero, .vf-star__hero, .sa-hero, .sa-msc2-hero, .sa-cls-hero, .sa-shw-hero)) main#main {
  padding-top: var(--vf-overlay-clear) !important;
}
body.admin-bar.page:not(.vf-bleed):not(:has(.h-hero, .h-hero-v11, .sv-hero, .vf-star__hero, .sa-hero, .sa-msc2-hero, .sa-cls-hero, .sa-shw-hero)) main#main {
  padding-top: var(--vf-overlay-clear-adminbar) !important;
}

/* ============================================================================
   §6c · PROJECT SINGLE TOPRAIL CLEARANCE  (CP2b)
   The project CPT is excluded from §6b by the .page scope, so clear its toprail
   directly. No existing theme rule out-specifies body.single-project .toprail
   (0,2,1); CP2a landed it at 180 without !important, so none is added here. */
body.single-project .toprail { padding-top: var(--vf-overlay-clear); }
body.admin-bar.single-project .toprail { padding-top: var(--vf-overlay-clear-adminbar); }

/* ============================================================================
   §6d · SERVICE SINGLE HERO CLEARANCE  (CP2b)
   Lifted verbatim from the former Customizer post 3511 (block 1) so the DB can
   be emptied later without service singles losing clearance. Flat 128px, proven
   clean in CP1. */
body.single-service [data-vertical-spacing*="top"] { padding-top: 0; }
body.single-service .sa-hero, body.single-service .sa-msc2-hero,
body.single-service .sa-cls-hero, body.single-service .sa-shw-hero { padding-top: calc(var(--vf-overlay-clear) + 1.5rem); }
body.admin-bar.single-service .sa-hero, body.admin-bar.single-service .sa-msc2-hero,
body.admin-bar.single-service .sa-cls-hero, body.admin-bar.single-service .sa-shw-hero { padding-top: calc(var(--vf-overlay-clear-adminbar) + 1.5rem); }

/* ============================================================================
   §10 · ARCHIVE CARDS & CONTENT CARDS (mode-aware via --vf-surface-alt)
   Blocksy paints .entry-card background as var(--theme-palette-color-8) =
   #FFFFFF in both modes (Blocksy palette is not mode-aware). On the void
   canvas in dark mode this renders as a white card floating on black -
   jarring against the rest of the chrome which flips correctly.

   Cards consume --vf-surface-alt for their surface (style.css :root and
   .vf--light blocks): #1A1A26 in dark, #ffffff in light. Card text follows
   --vf-heading (parchment in dark, Deep Violet in light) for body and title.
   Card meta uses --sa-anahata-green which is auto-remapped to --sa-anahata-deep
   under .vf--light (style.css line 135) - so meta renders as lime on the dark
   card and Anahata Deep on the light card without any explicit mode qualifier.

   Pattern: cards ARE mode-aware via the surface cascade (--vf-surface-alt),
   not a fixed-parchment exception. Locked: bridge_memory key
   vivid-frequency.card_surface_pattern.

   Applies to:
     - .entry-card (Blocksy archive cards)
     - .vf-card (reserved for future GreenShift card patterns)
     - .ct-content-block-card (reserved for future CB card wrappers)
   ============================================================================ */
.entry-card,
.vf-card,
.ct-content-block-card {
  background-color: var(--vf-surface-alt) !important;
}

.entry-card,
.vf-card,
.ct-content-block-card,
.entry-card p,
.vf-card p,
.ct-content-block-card p,
.entry-card .entry-excerpt,
.entry-card .entry-content {
  color: var(--vf-heading) !important;
}

.entry-card .entry-title,
.entry-card .entry-title a:not(:hover),
.vf-card .vf-card-title,
.ct-content-block-card .ct-content-block-card-title {
  color: var(--vf-heading) !important;
}

.entry-card .entry-meta,
.entry-card .entry-meta a:not(:hover),
.entry-card .meta-author,
.entry-card .meta-date,
.entry-card .meta-comments,
.vf-card .vf-card-meta,
.ct-content-block-card .ct-content-block-card-meta {
  color: var(--sa-anahata-green) !important;
}

/* Category pill (.ct-term-1 etc.) retains Blocksy's per-term colour - don't force */


/* ============================================================================
   §X  Mode Toggle (Rung 1)
   Inline header item rendered by Blocksy's header builder. Chakra
   spectrum ring (T1 → T7 closing) matches the logo ring treatment.
   Ring is mode-independent - always shows the full spectrum. The
   inner glyph (sun/moon) flips via --vf-heading and currentColor:
   parchment in dark mode (on void header), Deep Violet in light
   (on parchment header). Symmetric to the §4 header rules.
   ============================================================================ */

.vf-mode-toggle {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            36px;
	height:           36px;
	padding:          0;
	margin:           0;
	background:       transparent;
	color:            var(--vf-heading);
	border:           none;
	border-radius:    var(--vf-radius-pill);
	cursor:            pointer;
	isolation:        isolate;
	transition:       color var(--sa-transition-base),
	                  background-color var(--sa-transition-base);
	-webkit-appearance: none;
	        appearance: none;
}

/* Chakra spectrum ring - replaces the solid border. 1.5px conic-gradient
   stroke around the button via mask compositing. */
.vf-mode-toggle::before {
	content:        '';
	position:       absolute;
	inset:          0;
	border-radius:  50%;
	padding:        1.5px;
	background:     conic-gradient(
	                  from 0deg,
	                  var(--sa-t1)   0deg,
	                  var(--sa-t2)  51deg,
	                  var(--sa-t3) 102deg,
	                  var(--sa-t4) 154deg,
	                  var(--sa-t5) 205deg,
	                  var(--sa-t6) 257deg,
	                  var(--sa-t7) 308deg,
	                  var(--sa-t1) 360deg
	                );
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	z-index:        -1;
}

.vf-mode-toggle:hover::before,
.vf-mode-toggle:focus-visible::before {
	filter: brightness(1.15);
}

.vf-mode-toggle:focus-visible {
	outline:        2px solid var(--sa-anahata-green);
	outline-offset: 2px;
}

.vf-mode-toggle__icon {
	display: block;
	width:   18px;
	height:  18px;
	stroke:  currentColor;
	fill:    none;
}

/* Convention B (destination glyph - matches GitHub/Twitter/Vercel):
   the visible icon represents what clicking will do.
   Default state (dark mode): sun visible - click to go light.
   Light mode: moon visible - click to go back to dark. */
.vf-mode-toggle__icon--sun  { display: inline-block; }
.vf-mode-toggle__icon--moon { display: none; }

body.vf--light .vf-mode-toggle__icon--sun  { display: none; }
body.vf--light .vf-mode-toggle__icon--moon { display: inline-block; }


/* ============================================================================
   §11 · HEADER SUBMENU CASCADE
   Blocksy renders submenus as