From d7a8fbb415489db793c33c12ccb4eded4a1f4f10 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sat, 2 May 2026 19:08:32 +0100
Subject: [PATCH] fix(parse_block_v3): force stacking context on section
 element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous section_break implementation used CSS mask-image, which
incidentally established a stacking context on the section. Replacing
it with a gradient overlay div removed that side-effect — and broke
the visual depth on every section with a gradient mesh or radial
background.

Without a stacking context, the section's negative-z-index descendants
(home-section-bg at z:-1 carrying the radial gradient, and the
gradient_mesh wrapper at z:-10 carrying the orbs) escaped the section
and painted behind the page root, where they were occluded by the
page body — flat dark hero, no glow, no orbs.

Add `isolate` (isolation: isolate) to the section element. This is
the no-visual-side-effect way to force a stacking context, restoring
containment of the negative-z layers without affecting siblings or
content.
---
 .../layouts/_partials/functions/parse_block_v3.html    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/modules/blox/layouts/_partials/functions/parse_block_v3.html b/modules/blox/layouts/_partials/functions/parse_block_v3.html
index 9d53f186..200799f1 100644
--- a/modules/blox/layouts/_partials/functions/parse_block_v3.html
+++ b/modules/blox/layouts/_partials/functions/parse_block_v3.html
@@ -318,7 +318,10 @@
 {{/* Route to appropriate handler */}}
 {{ if $is_preact }}
   {{/* Render Preact block with styling wrapper */}}
-  <section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
+  {{/* `isolate` forces a stacking context on the section so the home-section-bg
+       (z-index:-1) and gradient mesh (z-index:-10) layers stay contained — without
+       it, negative-z descendants escape the section and paint behind the page root. */}}
+  <section id="{{$hash_id}}" class="relative isolate {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
     {{/* Gradient Mesh Background */}}
     {{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
     <div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>
@@ -348,7 +351,10 @@
   {{ $widget_args := dict "wcPage" $page "wcBlock" $block "wcIdentifier" $hash_id }}
 
   {{/* Render traditional block with wrapper */}}
-  <section id="{{$hash_id}}" class="relative {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
+  {{/* `isolate` forces a stacking context on the section so the home-section-bg
+       (z-index:-1) and gradient mesh (z-index:-10) layers stay contained — without
+       it, negative-z descendants escape the section and paint behind the page root. */}}
+  <section id="{{$hash_id}}" class="relative isolate {{if $has_gradient_mesh}}overflow-hidden{{end}} hbb-section {{$widget_class}} {{if $bg.text_color_light}}dark{{else if (eq $bg.text_color_light false)}}light{{end}} {{with $css_classes}}{{.}}{{end}}" {{with $style}}style="{{. | safeCSS}}"{{end}}>
     {{/* Gradient Mesh Background */}}
     {{ if $has_gradient_mesh }}{{ $gradient_mesh_html }}{{ end }}
     <div class="home-section-bg {{if $bg.image}} bg-image{{if ($bg.image.parallax | default true) }} parallax{{end}}{{end}}{{with $bg_css_classes}} {{.}}{{end}}" {{with $style_bg}}style="{{. | safeCSS}}"{{end}}>