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; } }