joh/project-bifrost-platform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(route): 'you are here' marker is unmistakable + dot animates with hover

Browse source 
The previous .rr-current was a 1.15× scale on top of an animated pulsing
::after ring — subtle, and the pulse was easy to miss against the cream
ground. Replaced with a static box-shadow ring at 6px offset in 45%
terracotta, plus a 1.3× scale on the dot itself. The pulse is gone;
the ring is now visible at rest, which is what the marker needs to do.

Hover/focus on a milestone card now scales its sibling dot via :has():
  - any card hover/focus → its dot 1.15
  - the current-shipping card hover/focus → its dot 1.4
The dot acknowledges that you've engaged with its card. Cleaner than
tying scroll position or click state.

:has() ships in every evergreen browser since 2023; older Firefox just
won't grow the dot, which degrades to no harm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-05-12 11:56:49 +02:00
parent fde07b1f11
commit f8d88ed760
1 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/RoadmapRoute.astro
View file

@ -310,25 +310,25 @@ const initialShippingX = lastShippingIndex >= 0 ? itemXByIndex[lastShippingIndex
height: 14px; height: 14px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 5px var(--background); /* halo cuts the path under the dot */ box-shadow: 0 0 0 5px var(--background); /* halo cuts the path under the dot */
transition: transform .25s ease; transition: transform .25s ease, box-shadow .25s ease;
scroll-snap-align: center; scroll-snap-align: center;
} }
.rr-dot.rr-current { .rr-dot.rr-current {
transform: scale(1.3);
box-shadow:
0 0 0 5px var(--background), /* cream halo */
0 0 0 6px rgba(185, 107, 88, 0.45); /* terracotta ring outside */
}
/* Hover-on-card animates the sibling dot too. :has() is fine on every
evergreen browser we target; older Firefox just doesn't grow the dot. */
.rr-milestone:has(.rr-card:hover) .rr-dot,
.rr-milestone:has(.rr-card:focus-visible) .rr-dot {
transform: scale(1.15); transform: scale(1.15);
} }
.rr-dot.rr-current::after { .rr-milestone:has(.rr-card:hover) .rr-dot.rr-current,
/* a quiet pulsing ring around the 'you are here' milestone */ .rr-milestone:has(.rr-card:focus-visible) .rr-dot.rr-current {
content: ''; transform: scale(1.4);
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid #6d8c7c;
opacity: 0.4;
animation: rr-pulse 2.4s ease-in-out infinite;
}
@keyframes rr-pulse {
0%, 100% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(1.3); opacity: 0; }
} }
.rr-attach { .rr-attach {