From 0c93328a2da6078116766394b71af1fa9548ae5e Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Sat, 27 Jun 2026 21:28:30 +1000
Subject: [PATCH] =?UTF-8?q?ui:=20vivid=20electric=20nameplate=20=E2=80=94?=
 =?UTF-8?q?=20fix=20invisible=20hero=20title=20in=20light=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hero name was a mostly---text gradient with a thin accent sweep; in light
mode it rested on low-contrast tones and the body text-halo washed it to a ghost.
Replace with a full cyan→violet→magenta fill driven by the theme-aware accent
tokens (deep on light, bright on dark) so it's unmissable in either mode, plus a
tight dark edge-shadow for legibility, the electric glow, and a one-shot light
sheen that parks off-screen. Opt the title out of the light text-halo.
---
 src/components/Hero.astro | 43 +++++++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 4050cb5..2a55fd1 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -59,24 +59,30 @@ import { cvAvailable } from "../lib/assets";
     /* Extend the paint box below the baseline so background-clip:text doesn't
        crop glyph descenders (the "g" in Wright). */
     padding-bottom: 0.14em;
-    /* Electric kinetic fill: light text with a cyan→magenta band — the same
-       sweep as the Bat-Computer board — gliding across once on load (heroSheen)
-       over an electric halo, tying the headline into the backdrop. */
-    background: linear-gradient(
-      100deg,
-      var(--text) 0%,
-      var(--text) 34%,
-      var(--accent) 46%,
-      var(--accent-2) 56%,
-      var(--text) 66%,
-      var(--text) 100%
-    );
-    background-size: 230% 100%;
-    background-position: 130% 0;
+    /* Vivid electric nameplate — a full cyan→violet→magenta fill (theme-aware via
+       the accent tokens: deep on light, bright on dark) so the name is unmissable
+       on EITHER backdrop. Two layers: a light sheen band on top that glides across
+       once on load (heroSheen) then rests off-screen, over the solid gradient.
+       A tight dark edge-shadow keeps the colour crisp on the light board; the
+       wide accent glow gives the electric halo. */
+    background:
+      linear-gradient(
+        105deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.9) 50%,
+        transparent 100%
+      ),
+      linear-gradient(100deg, var(--accent) 0%, #7c3aed 50%, var(--accent-2) 100%);
+    background-size: 220% 100%, 100% 100%;
+    background-position: 135% 0, 0 0;
+    background-repeat: no-repeat;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
-    filter: drop-shadow(0 0 26px var(--accent-glow));
+    /* Override the light-mode body text-halo (which washed the clipped fill). */
+    text-shadow: none;
+    filter: drop-shadow(0 1px 1px rgba(2, 6, 23, 0.22))
+      drop-shadow(0 6px 22px var(--accent-glow));
   }
   .hero__positioning {
     margin-top: var(--space-5);
@@ -143,13 +149,14 @@ import { cvAvailable } from "../lib/assets";
       transform: none;
     }
   }
-  /* A bright royal band sweeps left→right across the glyphs, then rests. */
+  /* The light sheen band (1st layer) sweeps left across the glyphs once, then
+     parks off-screen so only the vivid gradient (2nd layer, static) remains. */
   @keyframes heroSheen {
     from {
-      background-position: 130% 0;
+      background-position: 135% 0, 0 0;
     }
     to {
-      background-position: 0% 0;
+      background-position: -35% 0, 0 0;
     }
   }
 </style>