/* ========================================================= GS DESIGN SYSTEM FRONT END + GUTENBERG EDITOR Controls: - semantic text colors - hero rhythm - hero eyebrow typography - hero subtitle typography - section padding - H2 section rhythm - H2 eyebrow typography - horizontal H2 headers - H3 subsection rhythm - H3 subsection eyebrow typography - optional subsection dividers / subtitles / actions - responsive rhythm - mobile button sizing Does NOT control: - section backgrounds - H1 / H2 / H3 typography - body typography - card-specific design - header scroll behavior - floating WhatsApp positioning ========================================================= */ /* ========================================================= 01 — DESIGN TOKENS — DESKTOP ========================================================= */ :root { /* HERO */ --gs-hero-pad-top: 140px; --gs-hero-pad-bottom: 80px; --gs-hero-gap-eyebrow-h1: 12px; --gs-hero-gap-h1-sub: 18px; --gs-hero-gap-sub-actions: 28px; /* SECTIONS */ --gs-section-pad-y: 60px; --gs-section-pad-y-compact: 36px; /* H2 HEADER */ --gs-gap-eyebrow-h2: 12px; --gs-gap-h2-sub: 18px; --gs-gap-header-content: 40px; --gs-gap-body-body: 14px; /* H3 / SUBSECTION */ --gs-gap-eyebrow-h3: 10px; --gs-gap-divider-h3: 10px; --gs-gap-h3-sub: 14px; --gs-gap-subsection-actions: 20px; } /* ========================================================= 02 — TABLET TOKENS ========================================================= */ @media (max-width: 1024px) { :root { --gs-section-pad-y: 48px; --gs-section-pad-y-compact: 30px; --gs-gap-header-content: 34px; } } /* ========================================================= 03 — MOBILE TOKENS ========================================================= */ @media (max-width: 767px) { :root { /* HERO */ --gs-hero-pad-top: 90px; --gs-hero-pad-bottom: 90px; --gs-hero-gap-eyebrow-h1: 10px; --gs-hero-gap-h1-sub: 14px; --gs-hero-gap-sub-actions: 24px; /* SECTIONS */ --gs-section-pad-y: 36px; --gs-section-pad-y-compact: 20px; /* H2 */ --gs-gap-eyebrow-h2: 10px; --gs-gap-h2-sub: 14px; --gs-gap-header-content: 30px; --gs-gap-body-body: 12px; /* H3 / SUBSECTION */ --gs-gap-eyebrow-h3: 8px; --gs-gap-divider-h3: 8px; --gs-gap-h3-sub: 12px; --gs-gap-subsection-actions: 18px; } } /* ========================================================= 04 — SEMANTIC TEXT COLOR UTILITIES Theme palette: Grey = Turquoise / accent Dark = Navy Light = Off-white Color 3 = Sand Custom palette: Text Secondary Text Secondary Light Hex values are FALLBACKS only. ========================================================= */ .gs-text-accent { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-text-dark { color: var( --wp--preset--color--dark, #131827 ) !important; } .gs-text-light { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-text-secondary { color: var( --wp--preset--color--text-secondary, #606771 ) !important; } .gs-text-secondary-light { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } .gs-text-warm { color: var( --wp--preset--color--color3, #CAA77F ) !important; } /* ========================================================= 05 — HERO OUTER CLASS: gs-hero Spectra UI still controls: - min height - background image - focal position - overlay - width - horizontal alignment ========================================================= */ .gs-hero { padding-top: var(--gs-hero-pad-top) !important; padding-bottom: var(--gs-hero-pad-bottom) !important; } /* Remove Spectra root vertical gap */ .gs-hero > .uagb-container-inner-blocks-wrap { row-gap: 0 !important; } /* ========================================================= 06 — HERO EYEBROW CLASS: hero-pretitle ========================================================= */ .hero-pretitle { margin: 0 !important; font-family: var( --wp--preset--font-family--dmsans, "DM Sans", sans-serif ) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.30 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } .gs-hero .hero-pretitle { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } /* ========================================================= 07 — HERO H1 TYPOGRAPHY: controlled globally in WordPress UI. ========================================================= */ .gs-hero h1 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } /* ========================================================= 08 — HERO H1 + SUBTITLE GROUP CLASS: gs-hero-title-group ========================================================= */ .gs-hero-title-group { padding: 0 !important; margin-top: var(--gs-hero-gap-eyebrow-h1) !important; row-gap: var(--gs-hero-gap-h1-sub) !important; } .gs-hero-title-group h1, .gs-hero-title-group .hero-subtitle { margin: 0 !important; } /* ========================================================= 09 — HERO SUBTITLE CLASS: hero-subtitle ========================================================= */ .hero-subtitle { margin: 0 !important; font-family: var( --wp--preset--font-family--dmsans, "DM Sans", sans-serif ) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.50 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } .gs-hero .hero-subtitle { color: var( --wp--preset--color--light, #F5F4EF ) !important; } /* ========================================================= 10 — HERO ACTIONS CLASS: gs-hero-actions ========================================================= */ .gs-hero-actions { padding: 0 !important; margin-top: var(--gs-hero-gap-sub-actions) !important; } /* ========================================================= 11 — HERO MOBILE ========================================================= */ @media (max-width: 767px) { .hero-pretitle { font-size: 12px !important; line-height: 1.35 !important; letter-spacing: 0.16em !important; } .hero-subtitle { font-size: 12px !important; line-height: 1.45 !important; letter-spacing: 0.025em !important; } } /* ========================================================= 12 — STANDARD SECTION NORMAL: gs-section COMPACT: gs-section gs-section--compact SPECIAL LAYOUT WHERE SPECTRA ROOT GAP IS NEEDED: gs-section gs-section--keep-gap ========================================================= */ .gs-section { padding-top: var(--gs-section-pad-y) !important; padding-bottom: var(--gs-section-pad-y) !important; } .gs-section.gs-section--compact { padding-top: var(--gs-section-pad-y-compact) !important; padding-bottom: var(--gs-section-pad-y-compact) !important; } /* Prevent an old Spectra root row-gap from becoming a second vertical-spacing system. */ .gs-section:not(.gs-section--keep-gap) > .uagb-container-inner-blocks-wrap { row-gap: 0 !important; } /* ========================================================= 13 — STANDARD H2 HEADER CONTAINER: gs-section-header STRUCTURE: gs-section-pre H2 gs-section-sub ========================================================= */ .gs-section-header { padding-top: 0 !important; padding-bottom: 0 !important; row-gap: 0 !important; } /* ========================================================= 14 — H2 SECTION EYEBROW CLASS: gs-section-pre ========================================================= */ .gs-section-pre { font-family: var( --wp--preset--font-family--dmsans, "DM Sans", sans-serif ) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } .gs-section-header > .gs-section-pre { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: var(--gs-gap-eyebrow-h2) !important; margin-left: 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } /* ========================================================= 15 — H2 TITLE Typography remains controlled by WordPress Global Styles UI. ========================================================= */ .gs-section-header > h2 { margin: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } /* ========================================================= 16 — SECTION SUBTITLE / INTRO CLASS: gs-section-sub Typography remains normal body typography. ========================================================= */ .gs-section-header > .gs-section-sub { margin-top: var(--gs-gap-h2-sub) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } /* Extra paragraph immediately following gs-section-sub. */ .gs-section-header > .gs-section-sub + p { margin-top: var(--gs-gap-body-body) !important; margin-bottom: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } /* ========================================================= 17 — HEADER → SECTION CONTENT ========================================================= */ .gs-section > .uagb-container-inner-blocks-wrap > .gs-section-header { margin-bottom: var(--gs-gap-header-content) !important; } /* ========================================================= 18 — H2 HEADER ON DARK BACKGROUND CLASS: gs-section-header gs-on-dark ========================================================= */ .gs-section-header.gs-on-dark > .gs-section-pre { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-header.gs-on-dark > h2 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-section-header.gs-on-dark > .gs-section-sub, .gs-section-header.gs-on-dark > .gs-section-sub + p { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* ========================================================= 19 — HORIZONTAL / SPLIT H2 HEADER OUTER: gs-section-header-row LEFT: gs-section-heading gs-section-pre H2 RIGHT: gs-section-sub Spectra controls ROW / COLUMN layout. ========================================================= */ .gs-section-heading { padding: 0 !important; row-gap: 0 !important; } .gs-section-heading > .gs-section-pre { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: var(--gs-gap-eyebrow-h2) !important; margin-left: 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-heading > h2 { margin: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-section-header-row .gs-section-sub { margin: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } .gs-section > .uagb-container-inner-blocks-wrap > .gs-section-header-row { margin-bottom: var(--gs-gap-header-content) !important; } /* ========================================================= 20 — HORIZONTAL H2 HEADER ON DARK CLASS: gs-section-header-row gs-on-dark ========================================================= */ .gs-section-header-row.gs-on-dark .gs-section-pre { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-header-row.gs-on-dark .gs-section-heading > h2 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-section-header-row.gs-on-dark .gs-section-sub { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* ========================================================= 21 — H3 / SUBSECTION SYSTEM USE FOR A REAL SUBSECTION COMPOSITION, FOR EXAMPLE: gs-subsection gs-subsection-header gs-subsection-pre gs-subsection-divider (optional) H3 gs-subsection-sub (optional) gs-subsection-actions (optional) IMPORTANT: - Background, radius, borders, min-height and card padding remain controlled by Spectra / the component. - Do not add this system to a simple decorative card H3 unless the card really has subsection hierarchy. ========================================================= */ /* ========================================================= 22 — SUBSECTION OUTER CLASS: gs-subsection IMPORTANT: Spectra controls layout: - display - direction - justify-content - alignment - height GS controls only internal rhythm. ========================================================= */ .gs-subsection { gap: 0 !important; row-gap: 0 !important; } /* ========================================================= SUBSECTION PADDING MODIFIER Use on the OUTER subsection container when the subsection needs its own internal card/panel padding. Example: gs-subsection gs-subsection--padded ========================================================= */ .gs-subsection--padded { padding-top: 22px !important; padding-right: 20px !important; padding-bottom: 22px !important; padding-left: 20px !important; } @media (max-width: 1024px) { .gs-subsection--padded { padding-top: 22px !important; padding-right: 22px !important; padding-bottom: 22px !important; padding-left: 22px !important; } } @media (max-width: 767px) { .gs-subsection--padded { padding-top: 18px !important; padding-right: 18px !important; padding-bottom: 18px !important; padding-left: 18px !important; } } /* ========================================================= 23 — SUBSECTION HEADER / COPY STACK CLASS: gs-subsection-header ========================================================= */ .gs-subsection-header { padding: 0 !important; margin: 0 !important; gap: 0 !important; row-gap: 0 !important; } /* ========================================================= 24 — H3 SUBSECTION EYEBROW PREFERRED CLASS: gs-subsection-pre gs-section-pre is also supported inside gs-subsection-header for backward compatibility. ========================================================= */ .gs-subsection-pre, .gs-subsection-header .gs-section-pre { margin: 0 !important; padding: 0 !important; font-family: var( --wp--preset--font-family--dmsans, "DM Sans", sans-serif ) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } /* ========================================================= 25 — OPTIONAL SUBSECTION DIVIDER CLASS: gs-subsection-divider Add this class directly to the separator block. ========================================================= */ .gs-subsection-divider { margin-top: var(--gs-gap-eyebrow-h3) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; } /* ========================================================= 26 — H3 SUBSECTION TITLE H3 typography itself remains controlled by WordPress Global Styles. Without divider: eyebrow → H3 With divider: eyebrow → divider → H3 ========================================================= */ .gs-subsection-header h3 { margin-top: var(--gs-gap-eyebrow-h3) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-subsection-header .gs-subsection-divider ~ h3 { margin-top: var(--gs-gap-divider-h3) !important; } /* If the subsection starts directly with H3, do not create artificial space above it. */ .gs-subsection-header > h3:first-child { margin-top: 0 !important; } /* ========================================================= 27 — OPTIONAL H3 SUBTITLE / BODY PREFERRED CLASS: gs-subsection-sub gs-section-sub is also supported inside a subsection. ========================================================= */ .gs-subsection-sub, .gs-subsection-header .gs-section-sub { margin-top: var(--gs-gap-h3-sub) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } /* Additional body paragraph directly after the subsection subtitle. */ .gs-subsection-header .gs-subsection-sub + p, .gs-subsection-header .gs-section-sub + p { margin-top: var(--gs-gap-body-body) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } /* ========================================================= 28 — OPTIONAL SUBSECTION ACTIONS CLASS: gs-subsection-actions Add to: - Buttons block - CTA container - action wrapper Spectra controls placement/alignment. This rule only guarantees the minimum gap between subsection copy and actions. ========================================================= */ .gs-subsection-actions { margin-top: var(--gs-gap-subsection-actions) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= 29 — H3 SUBSECTION ON DARK Add: gs-on-dark to gs-subsection-header. ========================================================= */ .gs-subsection-header.gs-on-dark .gs-subsection-pre, .gs-subsection-header.gs-on-dark .gs-section-pre { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-subsection-header.gs-on-dark h3 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-subsection-header.gs-on-dark .gs-subsection-sub, .gs-subsection-header.gs-on-dark .gs-section-sub, .gs-subsection-header.gs-on-dark .gs-subsection-sub + p, .gs-subsection-header.gs-on-dark .gs-section-sub + p { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* ========================================================= 30 — H3 SUBSECTION ON WARM / SAND Add: gs-on-warm to gs-subsection-header. Preserves the established Glisse School sand-card hierarchy: - eyebrow = off-white - H3 = navy - body = warm dark text ========================================================= */ .gs-subsection-header.gs-on-warm .gs-subsection-pre, .gs-subsection-header.gs-on-warm .gs-section-pre { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-subsection-header.gs-on-warm h3 { color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-subsection-header.gs-on-warm .gs-subsection-sub, .gs-subsection-header.gs-on-warm .gs-section-sub, .gs-subsection-header.gs-on-warm .gs-subsection-sub + p, .gs-subsection-header.gs-on-warm .gs-section-sub + p { color: #40382F !important; } /* ========================================================= 31 — SECTION TYPOGRAPHY — MOBILE ========================================================= */ @media (max-width: 767px) { /* H2 EYEBROW */ .gs-section-pre { font-size: 12px !important; line-height: 1.25 !important; letter-spacing: 0.13em !important; } /* H3 EYEBROW */ .gs-subsection-pre, .gs-subsection-header .gs-section-pre { font-size: 11px !important; line-height: 1.25 !important; letter-spacing: 0.13em !important; } } /* ========================================================= 32 — MOBILE BUTTON SIZE ========================================================= */ @media (max-width: 767px) { .wp-block-button .wp-block-button__link.wp-element-button { font-size: 12px !important; padding: 12px 16px !important; } } /* ========================================================= 33 — SPECTRA CONTACT FORM SUBMIT ========================================================= */ .uagb-forms-main-submit-button { box-shadow: 0 2px 5px -1px var( --wp--preset--color--light, #F5F4EF ) !important; } /* ========================================================= 99 — GUTENBERG / SPECTRA EDITOR COMPATIBILITY Makes semantic GS spacing render correctly in editor. ========================================================= */ /* --------------------------------------------------------- REMOVE GUTENBERG'S EDITOR-ONLY BLOCK MARGINS --------------------------------------------------------- */ .editor-styles-wrapper .gs-section-header .wp-block, .editor-styles-wrapper .gs-section-heading .wp-block, .editor-styles-wrapper .gs-subsection-header .wp-block, .editor-styles-wrapper .gs-hero-title-group .wp-block { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* --------------------------------------------------------- H2 SECTION HEADER --------------------------------------------------------- */ .gs-section-header { gap: 0 !important; row-gap: 0 !important; } .gs-section-header .gs-section-pre { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: var(--gs-gap-eyebrow-h2) !important; margin-left: 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-header h2 { margin: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-section-header .gs-section-sub { margin-top: var(--gs-gap-h2-sub) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } /* DARK H2 HEADER */ .gs-section-header.gs-on-dark .gs-section-pre { color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-header.gs-on-dark h2 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-section-header.gs-on-dark .gs-section-sub { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* --------------------------------------------------------- HORIZONTAL H2 HEADER --------------------------------------------------------- */ .gs-section-heading { gap: 0 !important; row-gap: 0 !important; } .gs-section-heading .gs-section-pre { margin: 0 0 var(--gs-gap-eyebrow-h2) 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-section-heading h2 { margin: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-section-header-row .gs-section-sub { margin: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } .gs-section-header-row.gs-on-dark .gs-section-heading h2 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-section-header-row.gs-on-dark .gs-section-sub { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* --------------------------------------------------------- H3 / SUBSECTION SYSTEM --------------------------------------------------------- */ .gs-subsection, .gs-subsection-header { gap: 0 !important; row-gap: 0 !important; } .editor-styles-wrapper .gs-subsection-header .wp-block { margin-block-start: 0 !important; margin-block-end: 0 !important; } .gs-subsection-header .gs-subsection-pre, .gs-subsection-header .gs-section-pre { margin: 0 !important; padding: 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-subsection-header .gs-subsection-divider { margin-top: var(--gs-gap-eyebrow-h3) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 !important; } .gs-subsection-header h3 { margin-top: var(--gs-gap-eyebrow-h3) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-subsection-header .gs-subsection-divider ~ h3 { margin-top: var(--gs-gap-divider-h3) !important; } .gs-subsection-header .gs-subsection-sub, .gs-subsection-header .gs-section-sub { margin-top: var(--gs-gap-h3-sub) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } .gs-subsection-header .gs-subsection-sub + p, .gs-subsection-header .gs-section-sub + p { margin-top: var(--gs-gap-body-body) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; color: var( --wp--preset--color--text-secondary, #606771 ) !important; } .gs-subsection-actions { margin-top: var(--gs-gap-subsection-actions) !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .gs-subsection-header.gs-on-dark h3 { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-subsection-header.gs-on-dark .gs-subsection-sub, .gs-subsection-header.gs-on-dark .gs-section-sub, .gs-subsection-header.gs-on-dark .gs-subsection-sub + p, .gs-subsection-header.gs-on-dark .gs-section-sub + p { color: var( --wp--preset--color--text-secondary-light, #C8CCD2 ) !important; } /* WARM / SAND H3 SUBSECTION */ .gs-subsection-header.gs-on-warm .gs-subsection-pre, .gs-subsection-header.gs-on-warm .gs-section-pre { color: var( --wp--preset--color--light, #F5F4EF ) !important; } .gs-subsection-header.gs-on-warm h3 { color: var( --wp--preset--color--color2, #131827 ) !important; } .gs-subsection-header.gs-on-warm .gs-subsection-sub, .gs-subsection-header.gs-on-warm .gs-section-sub, .gs-subsection-header.gs-on-warm .gs-subsection-sub + p, .gs-subsection-header.gs-on-warm .gs-section-sub + p { color: #40382F !important; } /* --------------------------------------------------------- HERO EDITOR COMPATIBILITY --------------------------------------------------------- */ .gs-hero .hero-pretitle { margin: 0 !important; color: var( --wp--preset--color--grey, #52C0C2 ) !important; } .gs-hero-title-group { gap: var(--gs-hero-gap-h1-sub) !important; row-gap: var(--gs-hero-gap-h1-sub) !important; margin-top: var(--gs-hero-gap-eyebrow-h1) !important; } .gs-hero-title-group h1, .gs-hero-title-group .hero-subtitle { margin: 0 !important; } .gs-hero h1, .gs-hero .hero-subtitle { color: var( --wp--preset--color--light, #F5F4EF ) !important; } /* ========================================================= 101 — GUTENBERG / SPECTRA SUBSECTION RHYTHM Editor-only bridge. Gutenberg wraps every block in editor containers. Instead of relying on margins or :has(), editor spacing is created with padding on the semantic GS blocks themselves. Front-end rules remain unchanged. ========================================================= */ /* --------------------------------------------------------- REMOVE GUTENBERG / SPECTRA AUTOMATIC GAPS --------------------------------------------------------- */ .editor-styles-wrapper .gs-subsection { gap: 0 !important; row-gap: 0 !important; } .editor-styles-wrapper .gs-subsection-header { gap: 0 !important; row-gap: 0 !important; } .editor-styles-wrapper .gs-subsection .uagb-container-inner-blocks-wrap, .editor-styles-wrapper .gs-subsection-header .uagb-container-inner-blocks-wrap { gap: 0 !important; row-gap: 0 !important; } .editor-styles-wrapper .gs-subsection .block-editor-block-list__layout, .editor-styles-wrapper .gs-subsection-header .block-editor-block-list__layout { gap: 0 !important; row-gap: 0 !important; } /* --------------------------------------------------------- REMOVE EDITOR-ONLY BLOCK MARGINS --------------------------------------------------------- */ .editor-styles-wrapper .gs-subsection-pre, .editor-styles-wrapper .gs-subsection-divider, .editor-styles-wrapper .gs-subsection-title, .editor-styles-wrapper .gs-subsection-sub, .editor-styles-wrapper .gs-subsection-actions { margin-top: 0 !important; margin-bottom: 0 !important; margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================= EYEBROW ========================================================= */ .editor-styles-wrapper .gs-subsection-pre { padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= EYEBROW → SEPARATOR ========================================================= */ .editor-styles-wrapper .gs-subsection-divider { padding-top: var(--gs-gap-eyebrow-h3) !important; padding-bottom: 0 !important; } /* ========================================================= SEPARATOR → H3 Padding is used instead of margin because Gutenberg includes it reliably inside the editor block wrapper. ========================================================= */ .editor-styles-wrapper .gs-subsection-title { padding-top: var(--gs-gap-divider-h3) !important; padding-bottom: 0 !important; } /* ========================================================= H3 → PARAGRAPH ========================================================= */ .editor-styles-wrapper .gs-subsection-sub { padding-top: var(--gs-gap-h3-sub) !important; padding-bottom: 0 !important; } /* ========================================================= COPY → ACTION / BUTTON ========================================================= */ .editor-styles-wrapper .gs-subsection-actions { margin-top: 0 !important; padding-top: var(--gs-gap-subsection-actions) !important; padding-bottom: 0 !important; }