64 lines
2.2 KiB
CSS
64 lines
2.2 KiB
CSS
 
|
/* ============================================================================
|
||
|
|
HERO WORDMARK SUFFIX - the "-ER" after "SHARP" on the home hero
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
Not drawn in Figma: a project request, so the hero finishes on the full
|
||
|
|
name. "SHARP" is on screen from the first paint; once the page has settled,
|
||
|
|
"-ER" slides out from behind the P while it fades in.
|
||
|
|
|
||
|
|
HOW "BEHIND THE P" WORKS: the suffix sits in its own box whose inline-start
|
||
|
|
edge is exactly the P's right edge, and that box clips. The mark starts a
|
||
|
|
full box-width back - entirely inside the P's side of the clip, so nothing
|
||
|
|
overlaps "SHARP" - and travels forward to rest. The opacity reaches 1 before
|
||
|
|
the travel ends, so the glyphs read as solid for the last, slowest part of
|
||
|
|
the decelerating slide.
|
||
|
|
|
||
|
|
The translate is physical (translateX) on purpose: the lockup row is pinned
|
||
|
|
to dir="ltr" because a Latin wordmark never mirrors, so the P is always to
|
||
|
|
the left of the suffix, in Arabic too.
|
||
|
|
|
||
|
|
Pure CSS, so it runs from the server-rendered HTML without waiting for
|
||
|
|
hydration, and the `both` fill keeps the suffix hidden through the delay
|
||
|
|
instead of flashing in first. It replays whenever the hero mounts again,
|
||
|
|
e.g. on a client-side navigation back to the home page.
|
||
|
|
|
||
|
|
REDUCED MOTION: app.css shortens every animation to 0.01ms but leaves the
|
||
|
|
delay alone, which would hold the suffix hidden for the delay and then pop
|
||
|
|
it in. Here the animation is removed outright, so "SHARP-ER" is simply there
|
||
|
|
from the start.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
@layer theme, base, components, utilities;
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.sh-hero-suffix {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sh-hero-suffix__mark {
|
||
|
|
animation: sh-hero-suffix-in var(--motion-duration-reveal)
|
||
|
|
var(--motion-ease-entrance) var(--motion-delay-reveal) both;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
.sh-hero-suffix__mark {
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes sh-hero-suffix-in {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
60% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|