ui: vivid electric nameplate — fix invisible hero title in light mode
build-and-deploy / build (push) Failing after 10m26s
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:
+25
-18
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user