ui: vivid electric nameplate — fix invisible hero title in light mode
build-and-deploy / build (push) Failing after 10m26s

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.
This commit is contained in:
2026-06-27 21:28:30 +10:00
parent ef1719c84e
commit 0c93328a2d
+25 -18
View File
@@ -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>