/**
* Theme Name: Spiritual Agency Blocksy Child Theme
* Description: The Spiritual Agency child theme. Vivid Frequency brand system v11. Palette conformance release. Restores T1-T3 chakra tier hex values to VF v6.1 LOCKED canonical (T1 #FF1500, T2 #FF5500, T3 #FFD000). Migrates v10 LIVE FIX overrides from gspb_global_settings.custom_css into versioned css/vf-overrides.css.
* Author: The Spiritual Agency
* Author URI: https://spiritual.agency
* Template: blocksy
* Text Domain: blocksy-child
* Version: 11.1.2
*/
/* ==========================================================================
VIVID FREQUENCY — DESIGN TOKENS v11.0
The Spiritual Agency · spiritual.agency
CHANGELOG v11.0 (29 Apr 2026):
- PALETTE CORRECTION: T1 #E24B4A→#FF1500, T2 #FF8C00→#FF5500,
T3 #FFE600→#FFD000 to match VF v6.1 LOCKED canonical chakra palette
- --sa-electric-yellow stays #FFE600 as a sibling brand-palette utility
colour (no longer aliased to T3 Manipura)
- Migrated v10 LIVE FIX overrides into css/vf-overrides.css; cleared
gspb_global_settings.custom_css to prevent further DB drift
- Folder convention switched from build-number (v90) to semver (v11)
PRESERVED FROM v10:
- Sitewide void background, full-width default template, Blocksy hook
safety, ChakraPulse overflow protection, footer-row suppression
HOW TO USE IN GREENSHIFT:
Reference any token directly in a GreenShift block CSS field:
background: var(--sa-anahata-green);
background: var(--sa-shakti-gradient);
color: var(--sa-void);
border-color: var(--sa-spirit-blue);
BLOCKSY GLOBAL COLOUR SLOTS (set in Customizer > General Options > Color Palette):
C1: #FF0060 Shakti Pink — links, primary buttons
C2: #AB1C3D Shakti Crimson — nav CTA hover ← CORRECTED in v8.0
C3: #0D0D1A Void — base text
C4: #1A0533 Deep Violet Dark — headings on light sections
C5-C8: Blocksy internal neutrals — DO NOT CHANGE
========================================================================== */
:root {
/* ------------------------------------------------------------------
Brand Palette
------------------------------------------------------------------ */
--sa-void: #0D0D1A; /* Dark canvas */
--sa-spirit-blue: #0896F2; /* T5 Vishuddha — secondary elements */
--sa-shakti-start: #FF0060; /* Shakti Gradient start — C1 */
--sa-shakti-end: #FF008B; /* Shakti Gradient end — T7 */
--sa-shakti-crimson: #AB1C3D; /* Nav CTA hover — C2 */
--sa-shakti-gradient: linear-gradient(135deg, #FF0060, #FF008B);
--sa-anahata-green: #A7FF00; /* T4 Anahata — highlights, badges, pills */
--sa-electric-yellow: #FFE600; /* Brand utility (formerly T3 alias) */
--sa-parchment: #FAFAF7; /* Light backgrounds, card surfaces */
--sa-electric-violet: #9000FF; /* T6 Ajna */
--sa-deep-violet-dark: #1A0533; /* C4 — heading colour on light sections */
/* ------------------------------------------------------------------
Chakra Tier Colours
------------------------------------------------------------------ */
--sa-t1: #FF1500; /* Muladhara — Root — Free */
--sa-t2: #FF5500; /* Svadhisthana — Sacral — £9.99 */
--sa-t3: #FFD000; /* Manipura — Solar Plexus — £29.99 */
--sa-t4: #A7FF00; /* Anahata — Heart — £49.99 */
--sa-t5: #0896F2; /* Vishuddha — Throat — £99.99 */
--sa-t6: #9000FF; /* Ajna — Third Eye — £299 */
--sa-t7: #FF008B; /* Sahasrara — Crown — £599 */
/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------ */
--sa-font: 'Plus Jakarta Sans', sans-serif;
--sa-weight-heading: 800;
--sa-weight-sub: 700;
--sa-weight-body: 400;
--sa-weight-label: 700;
--sa-track-heading: -1.5px;
--sa-track-sub: -0.5px;
--sa-track-label: 2.5px;
--sa-body-size: 16px;
--sa-body-line-height: 1.7;
/* ------------------------------------------------------------------
Spacing & Layout
------------------------------------------------------------------ */
--sa-section-padding: 64px;
--sa-card-radius: 12px;
--sa-btn-radius: 8px;
--sa-pip-size: 8px;
--sa-chakra-bar-height: 3px;
/* ------------------------------------------------------------------
Transitions — consistent motion tokens
------------------------------------------------------------------ */
--sa-transition-fast: 0.15s ease;
--sa-transition-base: 0.25s ease;
--sa-transition-slow: 0.4s ease;
}
/* ============================================================================
v11.0 — DEFAULT TEXT COLOURS (foundation defaults; pages should not need
per-page text colour overrides going forward)
============================================================================
The site's default canvas is Void (#0D0D1A). Text must be readable on it
without per-page CSS. Pages that explicitly use Parchment (light) backgrounds
add `body.vf--light` to opt into the inverse palette.
============================================================================ */
body {
color: var(--sa-parchment);
}
p, li, dd, dt, blockquote, figcaption {
color: var(--sa-parchment);
}
h1, h2, h3, h4, h5, h6 {
color: var(--sa-parchment);
}
a {
color: var(--sa-shakti-start); /* Shakti Pink #FF0060 — primary link colour on void */
}
a:hover, a:focus {
color: var(--sa-shakti-end); /* Shakti Magenta #FF008B */
}
/* --- LIGHT CONTEXT (Parchment background) ---
Pages that use a light/parchment canvas must opt in by adding `vf--light`
to the body class (e.g. via post_class filter or page meta). All text
colours invert; link colour shifts from Shakti Pink to Shakti Crimson
for readability on light backgrounds. */
body.vf--light {
color: var(--sa-deep-violet-dark);
}
body.vf--light p,
body.vf--light li,
body.vf--light dd,
body.vf--light dt,
body.vf--light blockquote,
body.vf--light figcaption {
color: var(--sa-deep-violet-dark);
}
body.vf--light h1,
body.vf--light h2,
body.vf--light h3,
body.vf--light h4,
body.vf--light h5,
body.vf--light h6 {
color: var(--sa-deep-violet-dark);
}
body.vf--light a {
color: var(--sa-shakti-crimson); /* #AB1C3D — readable on parchment */
}
body.vf--light a:hover,
body.vf--light a:focus {
color: var(--sa-shakti-start); /* Pink hover for animation */
}
/* End v11.0 default text colours
========================================================================== */
/* ==========================================================================
GOOGLE FONTS — PLUS JAKARTA SANS
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
GLOBAL IMPROVEMENTS — v9.0
========================================================================== */
/* Smooth scrolling — respects reduced motion preference */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Improved focus ring — keyboard accessibility */
:focus-visible {
outline: 2px solid var(--sa-anahata-green);
outline-offset: 3px;
border-radius: 3px;
}
/* ==========================================================================
TEXT SELECTION
========================================================================== */
::selection {
background-color: #A7FF00;
color: #0D0D1A;
}
/* ==========================================================================
BASE TYPOGRAPHY
Font family and weight only — colours managed through Blocksy Customizer.
========================================================================== */
body {
font-family: var(--sa-font);
font-size: var(--sa-body-size);
line-height: var(--sa-body-line-height);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--sa-font);
font-weight: var(--sa-weight-heading);
letter-spacing: var(--sa-track-heading);
}
/* ==========================================================================
LAYOUT — FULL-BLEED FIX v9.0
========================================================================== */
/* Fix: WordPress core Gutenberg is-layout-constrained class boxes
content on Project CPT single template and Vivid Frequency pages.
Scoped to .single-project body class — only fires on project posts. */
.single-project .entry-content.is-layout-constrained,
.single-project .entry-content.is-layout-constrained > * {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* General full-bleed utility — add class to any GreenShift section
that needs to break out of a parent container */
.sa-full-bleed {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
width: 100vw;
position: relative;
}
/* Remove Blocksy's default content area top/bottom spacing on
Full Page Replacement Content Blocks */
.ct-full-page-replacement .entry-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ==========================================================================
SA UTILITY CLASSES
Use in GreenShift: Block > Advanced > Additional CSS Class(es)
========================================================================== */
/* --- Gradient text -------------------------------------------------------- */
.sa-gradient-text {
background: var(--sa-shakti-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Eyebrow pill — Anahata Green ---------------------------------------- */
.sa-pill {
background: var(--sa-anahata-green);
color: var(--sa-void);
padding: 5px 14px;
border-radius: 4px;
font-family: var(--sa-font);
font-size: 11px;
font-weight: var(--sa-weight-label);
letter-spacing: var(--sa-track-label);
text-transform: uppercase;
display: inline-block;
}
.sa-pill--blue {
background: rgba(8, 150, 242, 0.15);
color: var(--sa-spirit-blue);
}
/* --- Primary button — Spirit Blue rest, Shakti Gradient hover ------------ */
.sa-btn-primary,
a.sa-btn-primary {
background: var(--sa-spirit-blue);
color: var(--sa-parchment) !important;
padding: 12px 28px;
border-radius: var(--sa-btn-radius);
font-family: var(--sa-font);
font-weight: var(--sa-weight-sub);
font-size: 15px;
border: none;
display: inline-block;
text-decoration: none;
transition: background var(--sa-transition-base),
transform var(--sa-transition-fast),
box-shadow var(--sa-transition-base);
cursor: pointer;
}
.sa-btn-primary:hover,
a.sa-btn-primary:hover {
background: var(--sa-shakti-gradient);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255, 0, 96, 0.4);
color: var(--sa-parchment) !important;
}
/* --- Ghost button --------------------------------------------------------- */
.sa-btn-ghost,
a.sa-btn-ghost {
background: rgba(8, 150, 242, 0.10);
color: var(--sa-parchment) !important;
padding: 12px 28px;
border-radius: var(--sa-btn-radius);
border: 1px solid rgba(8, 150, 242, 0.35);
font-family: var(--sa-font);
font-weight: 600;
font-size: 15px;
display: inline-block;
text-decoration: none;
transition: background var(--sa-transition-base),
border-color var(--sa-transition-base),
transform var(--sa-transition-fast),
box-shadow var(--sa-transition-base);
cursor: pointer;
}
.sa-btn-ghost:hover,
a.sa-btn-ghost:hover {
background: var(--sa-shakti-gradient);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(255, 0, 96, 0.4);
color: var(--sa-parchment) !important;
}
/* --- Nav / Hero CTA — Shakti Gradient always ----------------------------- */
.sa-btn-hot,
a.sa-btn-hot {
background: var(--sa-shakti-gradient);
color: var(--sa-parchment) !important;
padding: 12px 28px;
border-radius: var(--sa-btn-radius);
font-family: var(--sa-font);
font-weight: var(--sa-weight-sub);
font-size: 15px;
border: none;
display: inline-block;
text-decoration: none;
transition: opacity var(--sa-transition-base),
transform var(--sa-transition-fast);
cursor: pointer;
}
.sa-btn-hot:hover,
a.sa-btn-hot:hover {
opacity: 0.85;
transform: translateY(-2px);
color: var(--sa-parchment) !important;
}
/* --- Chakra bar ---------------------------------------------------------- */
.sa-chakra-bar {
display: flex;
gap: 2px;
width: 100%;
}
.sa-chakra-bar span {
flex: 1;
height: var(--sa-chakra-bar-height);
display: block;
}
.sa-chakra-bar span:nth-child(1) { background: var(--sa-t1); }
.sa-chakra-bar span:nth-child(2) { background: var(--sa-t2); }
.sa-chakra-bar span:nth-child(3) { background: var(--sa-t3); }
.sa-chakra-bar span:nth-child(4) { background: var(--sa-t4); }
.sa-chakra-bar span:nth-child(5) { background: var(--sa-t5); }
.sa-chakra-bar span:nth-child(6) { background: var(--sa-t6); }
.sa-chakra-bar span:nth-child(7) { background: var(--sa-t7); }
/* ==========================================================================
CHAKRAPULSE COMPONENT — v9.0
Animated 7-dot component, one dot per chakra tier.
Rendered by [sa_chakra_pulse] shortcode in functions.php.
@keyframes sa-chakra-pulse is injected via wp_add_inline_style.
Typical usage in footers, headers, loading states, livestream overlays.
Dot size variants: sm (6px) | md (10px) | lg (16px)
========================================================================== */
.sa-chakra-pulse {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
}
.sa-cp-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.sa-cp-dot {
display: block;
border-radius: 50%;
animation: sa-chakra-pulse 2s ease-in-out infinite;
will-change: transform, opacity;
}
/* Staggered delays per dot */
.sa-cp-dot--1 { animation-delay: 0.0s; }
.sa-cp-dot--2 { animation-delay: 0.2s; }
.sa-cp-dot--3 { animation-delay: 0.4s; }
.sa-cp-dot--4 { animation-delay: 0.6s; }
.sa-cp-dot--5 { animation-delay: 0.8s; }
.sa-cp-dot--6 { animation-delay: 1.0s; }
.sa-cp-dot--7 { animation-delay: 1.2s; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.sa-cp-dot {
animation: none;
opacity: 1;
}
}
/* --- Tier pills ---------------------------------------------------------- */
.sa-tier-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-family: var(--sa-font);
font-size: 13px;
font-weight: var(--sa-weight-sub);
border: 1px solid;
}
.sa-tier-pill--t1 { background: rgba(226, 75, 74, 0.12); color: var(--sa-t1); border-color: rgba(226, 75, 74, 0.25); }
.sa-tier-pill--t2 { background: rgba(255, 140, 0, 0.12); color: var(--sa-t2); border-color: rgba(255, 140, 0, 0.25); }
.sa-tier-pill--t3 { background: rgba(255, 230, 0, 0.12); color: #8B7A00; border-color: rgba(255, 230, 0, 0.25); }
.sa-tier-pill--t4 { background: rgba(167, 255, 0, 0.12); color: #4A7000; border-color: rgba(167, 255, 0, 0.25); }
.sa-tier-pill--t5 { background: rgba( 8, 150, 242, 0.12); color: var(--sa-t5); border-color: rgba( 8, 150, 242, 0.25); }
.sa-tier-pill--t6 { background: rgba(144, 0, 255, 0.12); color: var(--sa-t6); border-color: rgba(144, 0, 255, 0.25); }
.sa-tier-pill--t7 { background: rgba(255, 0, 139, 0.12); color: var(--sa-t7); border-color: rgba(255, 0, 139, 0.25); }
/* --- Section helpers ----------------------------------------------------- */
.sa-section {
padding-top: var(--sa-section-padding);
padding-bottom: var(--sa-section-padding);
}
.sa-section--dark {
background: var(--sa-void);
color: var(--sa-parchment);
}
.sa-section--light {
background: var(--sa-parchment);
color: var(--sa-void);
}
/* --- Status dot ---------------------------------------------------------- */
.sa-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sa-anahata-green);
margin-right: 6px;
vertical-align: middle;
}
/* --- UI label ------------------------------------------------------------ */
.sa-label {
font-family: var(--sa-font);
font-size: 11px;
font-weight: var(--sa-weight-label);
letter-spacing: var(--sa-track-label);
text-transform: uppercase;
}
/* ==========================================================================
MEMBERSHIP TIERS SECTION — v8.0 (unchanged in v9.0)
Vivid Frequency · Spiritual Agency
BLOCK STRUCTURE (GreenShift template):
Section Element with columns (.membership-tiers)
└── Content Area
└── Hover Box tag (.tier-card .tier-t[n])
├── Card Content
│ ├── H2 heading element — tier name
│ └── Hover to top
│ ├── DIV element — .tier-tagline
│ ├── Button — .gspb_button / .wp-block-button__link
│ └── SPAN element — .tier-price
├── Overlay — dark gradient layer
└── Card Image — chakra mandala photo
GREENSHIFT CROSS-REFERENCE (v12.9):
- Hover Box = tag → target both div and a selectors
- GS heading = .gspb_heading wraps h1-h6
- GS button = .gspb_button or .wp-block-button__link
- GS inline styles > external CSS → use !important throughout
========================================================================== */
/* --------------------------------------------------------------------------
1. SECTION WRAPPER
-------------------------------------------------------------------------- */
.membership-tiers {
background-color: var(--sa-void) !important;
padding-top: var(--sa-section-padding) !important;
padding-bottom: var(--sa-section-padding) !important;
width: 100% !important;
}
/* --------------------------------------------------------------------------
2. SECTION HEADER
-------------------------------------------------------------------------- */
.membership-tiers .section-label {
color: var(--sa-anahata-green) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
text-align: center !important;
display: block !important;
margin-bottom: 12px !important;
}
.membership-tiers h2,
.membership-tiers .gspb_heading,
.membership-tiers .wp-block-heading {
color: var(--sa-parchment) !important;
font-size: 40px !important;
font-weight: 800 !important;
text-align: center !important;
margin-bottom: 12px !important;
font-family: var(--sa-font) !important;
}
.membership-tiers .section-subheading,
.membership-tiers > * > p:not([class]) {
color: var(--sa-parchment) !important;
font-size: 18px !important;
font-weight: 400 !important;
text-align: center !important;
opacity: 0.85;
max-width: 640px;
margin: 0 auto 48px !important;
}
/* --------------------------------------------------------------------------
3. HOVER BOX — outer card wrapper
-------------------------------------------------------------------------- */
.tier-card,
a.tier-card {
border-radius: var(--sa-card-radius) !important;
overflow: hidden !important;
min-height: 420px !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
text-decoration: none !important;
}
.tier-card:hover,
a.tier-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}
/* 3b. Bottom gradient overlay */
.tier-card::after,
a.tier-card::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 65% !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.20) 60%, transparent 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
border-radius: 0 0 var(--sa-card-radius) var(--sa-card-radius) !important;
}
/* --------------------------------------------------------------------------
4. H2 HEADING ELEMENT
-------------------------------------------------------------------------- */
.tier-card h2,
a.tier-card h2,
.tier-card .gspb_heading,
a.tier-card .gspb_heading,
.tier-card [class*="gspb_heading"] {
color: #FFFFFF !important;
font-size: 20px !important;
font-weight: 800 !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
font-family: var(--sa-font) !important;
}
/* --------------------------------------------------------------------------
5. SPAN ELEMENT — price
-------------------------------------------------------------------------- */
.tier-price,
span.tier-price,
.tier-card span.tier-price,
a.tier-card span.tier-price {
color: #FFFFFF !important;
font-size: 26px !important;
font-weight: 700 !important;
display: block !important;
margin-bottom: 6px !important;
line-height: 1.2 !important;
font-family: var(--sa-font) !important;
}
/* --------------------------------------------------------------------------
6. DIV ELEMENT — tagline / description
Shakti Pink hardcoded to prevent Blocksy C2 palette bleed.
-------------------------------------------------------------------------- */
.tier-tagline,
div.tier-tagline,
.tier-card div.tier-tagline,
a.tier-card div.tier-tagline,
.tier-card .tier-tagline p,
.tier-card .tier-tagline span,
.tier-card .tier-tagline a,
a.tier-card .tier-tagline p,
a.tier-card .tier-tagline span,
a.tier-card .tier-tagline a {
color: #FF0060 !important;
font-size: 13px !important;
font-weight: 400 !important;
margin-bottom: 16px !important;
line-height: 1.5 !important;
}
/* --------------------------------------------------------------------------
7. BUTTON — CTA
-------------------------------------------------------------------------- */
.tier-card .gspb_button,
.tier-card [class*="gspb_button"],
.tier-card .wp-block-button__link,
a.tier-card .gspb_button,
a.tier-card .wp-block-button__link {
width: 100% !important;
text-align: center !important;
border-radius: 6px !important;
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--sa-void) !important;
background-color: var(--sa-parchment) !important;
display: block !important;
transition: background-color var(--sa-transition-base),
color var(--sa-transition-base) !important;
text-decoration: none !important;
}
.tier-card .gspb_button:hover,
.tier-card .wp-block-button__link:hover,
a.tier-card .gspb_button:hover,
a.tier-card .wp-block-button__link:hover {
background-color: var(--sa-void) !important;
color: #FFFFFF !important;
}
/* --------------------------------------------------------------------------
8. PER-TIER TOP BORDERS
-------------------------------------------------------------------------- */
.tier-t1, a.tier-t1 { border-top: 3px solid var(--sa-t1) !important; }
.tier-t2, a.tier-t2 { border-top: 3px solid var(--sa-t2) !important; }
.tier-t3, a.tier-t3 { border-top: 3px solid var(--sa-t3) !important; }
.tier-t4, a.tier-t4 { border-top: 3px solid var(--sa-t4) !important; }
.tier-t5, a.tier-t5 { border-top: 3px solid var(--sa-t5) !important; }
.tier-t6, a.tier-t6 { border-top: 3px solid var(--sa-t6) !important; }
.tier-t7, a.tier-t7 { border-top: 3px solid var(--sa-t7) !important; }
/* --------------------------------------------------------------------------
9. T4 ANAHATA — BEST VALUE BADGE
-------------------------------------------------------------------------- */
.best-value-badge {
display: inline-block !important;
background-color: var(--sa-anahata-green) !important;
color: var(--sa-void) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 4px !important;
margin-bottom: 8px !important;
}
/* --------------------------------------------------------------------------
10. T3 MANIPURA — dark text on Electric Yellow (WCAG readability)
-------------------------------------------------------------------------- */
.tier-t3 .gspb_button,
.tier-t3 .wp-block-button__link,
a.tier-t3 .gspb_button,
a.tier-t3 .wp-block-button__link {
background-color: var(--sa-electric-yellow) !important;
color: var(--sa-void) !important;
}
.tier-t3 .gspb_button:hover,
.tier-t3 .wp-block-button__link:hover,
a.tier-t3 .gspb_button:hover,
a.tier-t3 .wp-block-button__link:hover {
background-color: var(--sa-void) !important;
color: var(--sa-electric-yellow) !important;
}
/* --------------------------------------------------------------------------
11. QUOTE CARD — 8th card
-------------------------------------------------------------------------- */
.tier-quote,
a.tier-quote {
border-top: 3px solid #FF0060 !important;
}
.tier-quote .gspb_button,
.tier-quote .wp-block-button__link,
a.tier-quote .gspb_button,
a.tier-quote .wp-block-button__link {
background-color: var(--sa-parchment) !important;
color: #0D0D1A !important;
}
.tier-quote .gspb_button:hover,
.tier-quote .wp-block-button__link:hover,
a.tier-quote .gspb_button:hover,
a.tier-quote .wp-block-button__link:hover {
background-color: #0D0D1A !important;
color: #FFFFFF !important;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1200px) {
.membership-tiers h2,
.membership-tiers .wp-block-heading {
font-size: 34px !important;
}
}
@media (max-width: 1024px) {
.membership-tiers h2,
.membership-tiers .wp-block-heading {
font-size: 30px !important;
}
}
@media (max-width: 768px) {
.membership-tiers {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.membership-tiers h2,
.membership-tiers .wp-block-heading {
font-size: 26px !important;
}
.tier-card,
a.tier-card,
.tier-quote,
a.tier-quote {
min-height: 340px !important;
}
.tier-price,
span.tier-price {
font-size: 22px !important;
}
.tier-quote h2,
a.tier-quote h2 {
font-size: 18px !important;
}
/* ChakraPulse — tighten gap on small screens */
.sa-chakra-pulse {
gap: 6px;
}
}
@media (max-width: 480px) {
.membership-tiers h2,
.membership-tiers .wp-block-heading {
font-size: 22px !important;
}
.tier-card,
a.tier-card {
min-height: 300px !important;
}
}
/* ==========================================================================
PRINT STYLES — v9.0
========================================================================== */
@media print {
.sa-chakra-pulse,
.sa-chakra-bar {
display: none;
}
body {
font-family: var(--sa-font);
font-size: 12pt;
color: #000;
background: #fff;
}
}
/* ==========================================================================
v10 ROBUSTNESS LAYER — Consolidated core fixes
The Spiritual Agency · staging.spiritual.agency
This layer bakes in every lesson from the v9.x hotfix cycle. Loads last so
it overrides everything above. Sectioned for clarity:
1. Void background sitewide
2. Full-width template geometry
3. Blocksy hook & footer row suppression
4. Hero / ChakraPulse overflow protection
5. FAQ section top-clip safety
6. Blocksy page-title / hero suppression on full-width pages
========================================================================== */
/* ── Full-width template: remove is-layout-constrained boxing ────────────── */
.page-template-full-width .entry-content.is-layout-constrained,
.page-template-full-width .entry-content.is-layout-constrained > * {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ── Full-width template: genuinely wide site-main and entry-content ─────── */
/* VF-v13 header-safe scope: only target content-area containers, never header chrome */
.page-template-full-width .site-main,
.page-template-full-width .site-main .entry-content,
.page-template-full-width .site-main > .ct-container,
.page-template-full-width .site-main .ct-container-narrow {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── Kill any trailing vertical gap before the footer on full-width pages ── */
.page-template-full-width .site-main > article:last-child,
.page-template-full-width .site-main > .entry-content:last-child,
.page-template-full-width main.site-main {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* ── Transparent-header top-padding for plain new pages ─────────────────────
Only fires when entry-content has no GreenShift row blocks or custom hero.
Pages with GreenShift blocks set their own padding-top per section. */
/* padding-top handled per-page via GreenShift block settings */
/* ── Blocksy hook wrapper: allow content to overflow freely (ChakraPulse) ── */
[class*="ct-hook"],
[class*="before-footer"] {
overflow: visible !important;
}
/* ── FAQ section gap killer ──────────────────────────────────────────────────
Any sibling after .sa-faq-section that isn't .ct-footer is Blocksy's
empty wrapper for block 665 — collapse it completely. */
.sa-faq-section {
margin-bottom: 0 !important;
}
/* Gap between FAQ and footer now handled by PHP disabling block 665's hook */
.ct-footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ── Hide Blocksy's default footer top/bottom rows ─────────────────────────
We use a custom footer widget (block-8) in the MIDDLE row only. Blocksy's
default footer type-1 layout also outputs a "top" row (plain nav menu) and
a "bottom" row (copyright) — these sit between the page content and our
custom footer, creating what looks like empty space. Hide them entirely. */
.ct-footer > [data-row="top"],
.ct-footer > [data-row="bottom"] {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════
VOID BACKGROUND — sitewide dark body
The Vivid Frequency brand is dark-first. Any page gap, ancestor element,
or un-themed wrapper would otherwise show as WHITE against our dark
sections (FAQ, footer, hero). Set the body permanently to Void to
eliminate every possible white-flash source.
══════════════════════════════════════════════════════════════════════════ */
html,
body,
body.wp-singular,
body.page,
body.page-template-full-width,
.ct-site-wrap,
.site-content,
main.site-main {
background-color: #0D0D1A !important;
background: #0D0D1A !important;
}
/* Belt-and-braces: Blocksy hook wrappers get void too so any gap between
FAQ hook content and the footer stays dark, not white. */
[class*="ct-hook"],
[class*="before-footer"],
[data-ct-content-block],
.ct-before-footer {
background-color: #0D0D1A !important;
}
/* ══════════════════════════════════════════════════════════════════════════
HERO OVERFLOW FIX — v9.1
Hero sections (.m-hero, .sa-about-hero, etc.) use `overflow: hidden` in
their own CSS to contain animated gradient backgrounds. But the ChakraPulse
dots scale up during their keyframe animation and get clipped at the top.
Fix: override to visible on the hero itself, and containe the gradient via
the absolutely-positioned .m-hero-bg child which has `inset: 0` anyway.
══════════════════════════════════════════════════════════════════════════ */
.m-hero,
.sa-about-hero,
[class*="-hero"]:not([class*="hero-bg"]):not([class*="hero-dots"]),
.mem-wrap .m-hero,
main.site-main,
.site-content {
overflow: visible !important;
}
/* Keep the gradient background contained to its own bounds */
.m-hero-bg,
[class*="hero-bg"] {
overflow: hidden !important;
}
/* ══════════════════════════════════════════════════════════════════════════
FAQ SECTION TOP-CLIP FIX — v9.1
The FAQ section's Chakra Pulse dots sit too close to the section's top
edge. When the section renders directly at the top of a page (e.g. on the
ct_content_block preview URL, or when used as a hook on pages with a
transparent header overlay), the transparent header cuts through the
top of the dots.
Fix: give the section extra top padding so the dots clear the 100px
transparent header comfortably, and force overflow visible on every
ancestor that could clip them.
══════════════════════════════════════════════════════════════════════════ */
/* Beat the synced pattern's inline padding-top with higher specificity */
body .sa-faq-section,
html body .sa-faq-section {
padding-top: 8.5rem !important;
overflow: visible !important;
}
/* Force overflow visible on every ancestor that could clip the dots */
.sa-faq-section,
.sa-faq-inner,
.sa-faq-hero,
.sa-faq-dots,
.sa-faq-dots span,
[class*="sa-faq"],
[class*="ct-content-block"],
[class*="ct-global"],
[class*="content-block"],
body main,
body article,
body .entry-content,
body .wp-block-post-content,
body .ct-container,
body .ct-container-narrow {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
clip-path: none !important;
}
/* Extra breathing room on the dots themselves for the scale(1.45) keyframe */
.sa-faq-dots {
padding: 10px 0 !important;
}
/* ══════════════════════════════════════════════════════════════════════════
BLOCKSY PAGE HERO / TITLE SUPPRESSION — v10
Blocksy's default page template outputs a hero section with the page
title. On full-width pages we want the content to own the top of the
viewport (so custom heroes render correctly). The PHP filter in
functions.php disables it programmatically; these rules are the
defensive backup in case Blocksy renders anyway.
══════════════════════════════════════════════════════════════════════════ */
.page-template-full-width .entry-header,
.page-template-full-width .ct-hero-section,
.page-template-full-width .hero-section,
.page-template-full-width [class*="hero-section-"],
.page-template-full-width .page-title {
display: none !important;
}
/* ══════════════════════════════════════════════════════════════════════════
CT_CONTENT_BLOCK PREVIEW — v10
When a Blocksy content block is viewed at its own permalink
(/ct_content_block/...), WordPress renders it as a standalone page with
header and footer. Ensure it shows correctly against the void background.
══════════════════════════════════════════════════════════════════════════ */
body.single-ct_content_block {
background-color: #0D0D1A !important;
}
body.single-ct_content_block main.site-main {
padding: 0 !important;
margin: 0 !important;
}
/* ══════════════════════════════════════════════════════════════════════════
END OF v10 ROBUSTNESS LAYER
If editing this file going forward, append new rules after this marker
so the v10 layer remains a self-contained, easy-to-identify block.
══════════════════════════════════════════════════════════════════════════ */