fix(parse_block_v3): replace section_break mask-image with gradient overlay

The mask-image approach for section_break was wrong: making pixels
transparent reveals the body background, not the next sibling section
(which sits below in document flow, not behind in z-order). When the
body bg didn't match the adjacent section, this produced a visible
white/light strip between sections — exactly what the fade was
supposed to prevent.

Replace mask-image with absolutely-positioned gradient overlay divs at
the section's top/bottom edges. The overlay fades from transparent to
a user-specified colour matching the adjacent sibling's background.
Explicit colour declaration is required because Hugo can't reliably
auto-detect the next sibling's bg at parse time.

API change (no backward-compat — feature was added this session, no
sites depend on the legacy string form):

  # before
  section_break: fade-bottom

  # after
  section_break:
    fade_bottom: "#101828"   # CSS colour matching next section's bg
    fade_top:    "#0a0e27"   # optional, independent
    size:        "6rem"      # optional, default 6rem

Update the landing page hero (fade-bottom into dark logos band) and
cta-card (fade-top from white FAQ section above) to the new form.

modules/blox/layouts/_partials/functions/parse_block_v3.html

@@ -281,19 +281,31 @@
   {{ $style = printf "%sclip-path: %s;" $style . }}
 {{ end }}
 
-{{/* Section break: mask-image fade for smooth transitions between sections */}}
+{{/* Section break: smooth transitions between sibling sections via gradient
+     overlay divs at the section's top/bottom edges. Each edge fades from
+     transparent (toward the section's content) to a user-specified colour
+     (matching the adjacent sibling's background).
+
+     Example — hero fading into a dark logos band beneath:
+       section_break:
+         fade_bottom: "#101828"     # any CSS colour (hex, rgb, var, named)
+         fade_top:    "#0a0e27"     # optional, independent of fade_bottom
+         size:        "6rem"        # optional, default 6rem (applies to both edges)
+
+     Why explicit colour: a gradient overlay needs to know what colour to fade
+     INTO. Hugo can't reliably auto-detect the next sibling's background at
+     parse time, so the user declares intent. */}}
+{{ $break_overlay := "" }}
 {{ with $block.design.section_break }}
-  {{ $mask := "" }}
-  {{ if eq . "fade-top" }}
-    {{ $mask = "linear-gradient(to bottom, transparent 0%, black 6rem, black 100%)" }}
-  {{ else if eq . "fade-bottom" }}
-    {{ $mask = "linear-gradient(to bottom, black 0%, black calc(100% - 6rem), transparent 100%)" }}
-  {{ else if eq . "fade-both" }}
-    {{ $mask = "linear-gradient(to bottom, transparent 0%, black 6rem, black calc(100% - 6rem), transparent 100%)" }}
+  {{ $sb_size := .size | default "6rem" }}
+  {{ $overlays := slice }}
+  {{ with .fade_bottom }}
+    {{ $overlays = $overlays | append (printf "<div class=\"absolute inset-x-0 bottom-0 pointer-events-none z-0\" style=\"height: %s; background: linear-gradient(to bottom, transparent, %s);\" aria-hidden=\"true\"></div>" $sb_size .) }}
   {{ end }}
-  {{ with $mask }}
-    {{ $style = printf "%s-webkit-mask-image: %s; mask-image: %s;" $style . . }}
+  {{ with .fade_top }}
+    {{ $overlays = $overlays | append (printf "<div class=\"absolute inset-x-0 top-0 pointer-events-none z-0\" style=\"height: %s; background: linear-gradient(to top, transparent, %s);\" aria-hidden=\"true\"></div>" $sb_size .) }}
   {{ end }}
+  {{ $break_overlay = delimit $overlays "" }}
 {{ end }}
 
 {{ $hash_id := $block.id | default (printf "section-%s" (replace $block_type "." "-")) }}
@@ -312,6 +324,8 @@
     <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}}>
       {{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
     </div>
+    {{/* Section-break gradient overlays (above bg, below content) */}}
+    {{ with $break_overlay }}{{ . | safeHTML }}{{ end }}
     {{/* Use generic Preact wrapper for content */}}
     {{ partial "blox/preact-wrapper" (dict "wcPage" $page "wcBlock" $block "wcBlockType" $block_type "wcIdentifier" $hash_id) }}
   </section>
@@ -340,6 +354,8 @@
     <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}}>
       {{with $bg_video}}<video class="bg-video {{$bg_video_class}}" playsinline="" preload="auto" loop="" muted autoplay="" tabindex="-1" width="100%" height="100%" src="{{.RelPermalink}}" style="width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1;"></video>{{end}}
     </div>
+    {{/* Section-break gradient overlays (above bg, below content) */}}
+    {{ with $break_overlay }}{{ . | safeHTML }}{{ end }}
     {{ partial $block_path $widget_args }}
   </section>
 {{ end }}

templates/startup-landing-page/content/_index.md

@@ -42,7 +42,9 @@ sections:
         padding: [0, 0, 0, 0]
         margin: [0, 0, 0, 0]
       css_class: "dark"
-      section_break: fade-bottom
+      section_break:
+        # Fade the hero's bottom edge into the dark logos band beneath (matches its bg-gray-900)
+        fade_bottom: "#101828"
       background:
         # Deep navy base; radial glow paints a soft violet spotlight from above
         color: "#0a0e27"
@@ -383,7 +385,9 @@ sections:
         text: Get Started Free
         url: https://hugoblox.com/templates/
     design:
-      section_break: fade-top
+      section_break:
+        # Fade the cta-card section's top edge into the white FAQ section above
+        fade_top: "#ffffff"
       card:
         # Brand-coloured card with subtle gradient depth
         css_class: "bg-gradient-to-br from-primary-500 via-primary-600 to-secondary-600 text-white shadow-2xl"