From 7df45e0c46d82bd9d49260bd21ffc0e71b5af6fd Mon Sep 17 00:00:00 2001
From: Tim Thomas <0800tim@gmail.com>
Date: Fri, 5 Jun 2026 16:45:29 +1200
Subject: [PATCH] style(home): clean 80%-to-bottom linear fade on banner image

Tim 2026-06-05 (after the marketing publish):

  > it should fade out to transparent at the bottom so it blends in
  > nicely and we don't get this kind of line where the first
  > paragraph is under the heading in the bottom 20% of the banner
  > image. You just fade that from the 20% point at the bottom down
  > to the very bottom, gradient fade to transparent.

The existing mask had three stops (opaque to 68%, half-opacity at
88%, transparent at 100%) which left a visible threshold band
around the lede. Rewritten as a straight linear ramp from 80%
opaque to 100% transparent so the player-photo edge dissolves
into the page background. Both -webkit- and unprefixed mask-image
forms updated together so iOS Safari + every chromium fork picks
it up.

CSS-only, one rule (.vt-home-hero-bg). Headline-area dark overlay
above the mask is unchanged so legibility on the upper 80% is
unaffected.

Signed-off-by: Tim Thomas <0800tim@gmail.com>
---
 apps/web/app/home.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/home.css b/apps/web/app/home.css
index d71ebe01..f0f46898 100644
--- a/apps/web/app/home.css
+++ b/apps/web/app/home.css
@@ -74,22 +74,22 @@
    * legibility. */
   opacity: 0.78;
   filter: saturate(1);
-  /* Tim 2026-06-05: soft fade-to-transparent on the bottom edge so
-   * the banner doesn't bump up against the lede paragraph with a
-   * hard horizontal line where the player photos end. The dark
-   * overlay above still keeps the headline readable. */
+  /* Tim 2026-06-05 (rev 2): fade the bottom 20% of the banner to
+   * transparent so the lede paragraph that sits under the banner
+   * blends in instead of butting against a hard horizontal line
+   * where the player photos end. Clean linear ramp: opaque to
+   * 80%, fully transparent at the bottom. The dark overlay above
+   * still keeps the headline readable through the upper 80%. */
   -webkit-mask-image: linear-gradient(
     180deg,
     #000 0%,
-    #000 68%,
-    rgba(0, 0, 0, 0.4) 88%,
+    #000 80%,
     transparent 100%
   );
   mask-image: linear-gradient(
     180deg,
     #000 0%,
-    #000 68%,
-    rgba(0, 0, 0, 0.4) 88%,
+    #000 80%,
     transparent 100%
   );
 }