From f584ad1610ec0c5d6d541660cfa9b0c0e09c77ec Mon Sep 17 00:00:00 2001 From: George Cushen Date: Sat, 2 May 2026 18:25:18 +0100 Subject: [PATCH] fix(parse_block_v3): replace section_break mask-image with gradient overlay MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../_partials/functions/parse_block_v3.html | 36 +++++++++++++------ .../startup-landing-page/content/_index.md | 8 +++-- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/modules/blox/layouts/_partials/functions/parse_block_v3.html b/modules/blox/layouts/_partials/functions/parse_block_v3.html index f784c646..9d53f186 100644 --- a/modules/blox/layouts/_partials/functions/parse_block_v3.html +++ b/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 "
" $sb_size .) }} {{ end }} - {{ with $mask }} - {{ $style = printf "%s-webkit-mask-image: %s; mask-image: %s;" $style . . }} + {{ with .fade_top }} + {{ $overlays = $overlays | append (printf "
" $sb_size .) }} {{ end }} + {{ $break_overlay = delimit $overlays "" }} {{ end }} {{ $hash_id := $block.id | default (printf "section-%s" (replace $block_type "." "-")) }} @@ -312,6 +324,8 @@
{{with $bg_video}}{{end}}
+ {{/* 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) }} @@ -340,6 +354,8 @@
{{with $bg_video}}{{end}}
+ {{/* Section-break gradient overlays (above bg, below content) */}} + {{ with $break_overlay }}{{ . | safeHTML }}{{ end }} {{ partial $block_path $widget_args }} {{ end }} \ No newline at end of file diff --git a/templates/startup-landing-page/content/_index.md b/templates/startup-landing-page/content/_index.md index 91c5eff3..f2f3ec5d 100644 --- a/templates/startup-landing-page/content/_index.md +++ b/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"