fix(parse_block_v3): force stacking context on section element

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.
This commit is contained in:
George Cushen committed 2026-05-02 19:08:32 +01:00
1 parent f584ad1610
commit d7a8fbb415
1 file changed
+8 -2
@@ -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}}>