Merge nucleic/olive-north-lynx-rstf into main

Mirrored from corpo 39013c0.
This commit is contained in:
2026-08-10 02:59:58 -07:00
parent 58763d192d
commit 9a316b7dad
+9 -44
View File
@@ -611,52 +611,15 @@ const canonical = new URL('/', Astro.site);
animation: drift-up 11s 1.5s ease-in-out backwards; animation: drift-up 11s 1.5s ease-in-out backwards;
} }
/* The swipe: a soft blade of the palette's pale green crossing the line left to /* The swipe is a soft pale-green blade crossing only “runs.” once as the
right — the way the sentence reads, the way the verb points — then resting for second line arrives. The pseudo-element duplicates the verb, clips its
the balance of the cycle. What separates this from a loading shimmer is gradient to those glyphs, and is intentionally held by .runs so “that”
everything quantitative: the light is the gradient's own mint rather than stays static. Its transparent parked positions also leave reduced-motion
white, it happens exactly once — a single ~0.65s dash as the line arrives, rendering unchanged. */
never repeating — and the band is asymmetric — a long dim tail behind a .line-runs .runs::after {
crisp leading edge — so it reads as something moving through, not a surface content: 'runs.';
effect.
Over "that" (flat secondary grey) the glint is faint; over the "runs."
gradient it lands hardest on the dark tail end, so the pass finishes brightest
at the period — the light arrives where the sentence does.
It rides a pseudo-element that duplicates the line's text and clips the band
to the glyphs. A pseudo because the front must cross both words at one screen
speed, and background-position percentages are relative to each element's own
width — separate backgrounds on .that and .runs cannot share a speed. The
content string must match the markup ("that" space "runs.") and the
padding-right must match .word's, or the duplicate lays out on different
lines-breaks than the text it overlays. Accessibility is already handled
above this: the h1's aria-label replaces every descendant, this copy
included.
The band is a plateau, not a spike — alpha holds at its peak for ~14% of the
image — and its white is set above the brightest glyph pixel. Both are
measured corrections: a single peak stop averaged away to a couple of RGB
levels across a bucket of glyphs, and a mint as bright as the "runs."
gradient's own start (green 234) mathematically cannot lift it — a normal
blend brightens in proportion to the distance left to white. The dip over
that bright stretch never fully goes away; it just means the light lands
hardest where the type is darkest, which is what a real glint over a
gradient does. The pass ends on the darkest glyphs, so the period is where
the light finishes brightest.
Geometry: the image is 60% of the line's width, so the position percentage
maps offset = 0.4 x width x p. Parked at -115% only the image's trailing
transparent region (past 71%) can overlap the line — off-glyph by
construction, which is what reduced-motion needs: the global animation: none
leaves the pseudo at this specified position and the line renders exactly as
it did before this existed. 235% clears the tail past the right edge; when
the single run ends, the value reverts to the park — both states are
invisible, so there is nothing to fill. */
.line-runs .word::after {
content: 'that runs.';
position: absolute; position: absolute;
inset: 0; inset: 0;
padding-right: 0.06em;
color: transparent; color: transparent;
background-image: linear-gradient( background-image: linear-gradient(
100deg, 100deg,
@@ -690,6 +653,8 @@ const canonical = new URL('/', Astro.site);
} }
.line-runs .runs { .line-runs .runs {
position: relative;
display: inline-block;
color: transparent; color: transparent;
background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%); background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%);
background-clip: text; background-clip: text;