Pair the legend visually with the route by widening the gap above it
and narrowing the gap below.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Legend swaps position with the route. Old order: header → route →
legend → banner. New order: header → legend → route → banner.
The legend now reads as a key the eye picks up before walking the
path, instead of an after-the-fact reveal of what the colours meant.
Spacing tuned to match the new rhythm:
header → legend: 28px (header.margin-bottom)
legend → route: 32px (legend.margin-bottom; was 28px top margin)
route → banner: 112px (banner.margin-top; was 64px)
The 112px before the dispatch banner gives the route room to land
visually before the editorial block at the foot starts. Mobile gets
72px instead of 112px since the page is more compressed there.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Order on the page:
1. Centred header — 48px serif 'Roadmap' h1, one merged subtitle that
combines the original page lead ('A live picture of the work…')
with both interaction hints (tap-or-hover, drag-or-scroll).
2. <RoadmapRoute> — full-bleed track + right-edge advance arrow.
3. Legend — centred in content column.
4. <LatestDispatchBanner> — moved from above the route to below the
legend. The dispatch becomes supplementary editorial that sits at
the foot of the page; the route is the primary surface and now
leads.
Banner spacing flipped: was margin-bottom 56px above the route, now
margin-top 64px below the legend.
The previous left-aligned 'What we are building.' top header and the
secondary centred 'Roadmap' route-intro block are both gone — merged
into one centred header at the top.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The previous pass replaced the top page header with a single centred
'Roadmap' block — that was wrong. The intent was: keep the original
left-aligned editorial lead at the very top of the page, and insert a
new smaller centred section between the dispatch banner and the route
that carries the interaction hints.
Top of page (restored):
Roadmap ← 11px tracked eyebrow
What we are building. ← 48px serif h1, left-aligned, max-width 540
A live picture of the work… ← 14px subtitle, no hover-hint copy
Between LatestDispatchBanner and RoadmapRoute (new):
Roadmap ← 22px serif title, centred
Tap or hover any milestone for the full story. Drag or scroll to move.
← 12px tracked muted hint, centred
The hover/tap hint moves out of the top subtitle and into the route-
intro block, where the drag/scroll hint joins it. Both interaction
modalities sit together right above the surface they describe — closer
to where the reader needs them.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Page-level rebuild. /roadmap.astro renders a centred header block that
reads as one calm vertical stack:
Roadmap ← 11px tracked uppercase eyebrow (--on-surface-variant)
Roadmap ← 48px serif h1, single word
A live picture of the work… ← 14px subtitle, 480px max-width
The eyebrow + h1 read 'Roadmap → Roadmap' on purpose — the tracked
uppercase eyebrow primes the eye for the serif headline, and the
repetition feels confident rather than redundant. If it starts to grate
in practice, the eyebrow's the easy drop.
'What we are building.' is gone. The earlier 'The route' sub-header
inside <RoadmapRoute> is gone. The two prev/next arrow buttons in that
sub-header are gone (the single right-edge advance arrow lands in the
next commit).
Legend moves out of <RoadmapRoute> and into /roadmap.astro as the page's
final block. With the route still .rr-fullbleed, this lets the legend
return to centred content-column width — exactly the spec's
'header-centred / route-wide / legend-centred' rhythm.
Mid-state in this commit: the advance arrow doesn't exist yet, so
there's no in-page scroll affordance beyond the still-active scroll-snap
behaviour. Step 3 adds the arrow; step 4 strips the snap and adds drag
+ wheel + animated glide.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The .rr-current marker on the current shipping milestone already says
'this is where we are' through colour + ring + dot scale. A second
surface saying the same thing in different words diluted both. One
signal, one place.
Removed:
- src/components/RoadmapInMotion.astro (component file)
- The import and render slot in /roadmap.astro
- The 'For shipping items: the first sentence appears on /roadmap as
the "In motion right now" line' helper text on the admin description
field (the field stays; only the helper copy goes).
The firstSentenceOf helper lived inside RoadmapInMotion only and was
never re-exported, so it dies with the file.
Banner margin-bottom restores from 40 → 56px now that nothing sits
between the dispatch banner and the route header. The route flows
directly out of the dispatch beat.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
New <RoadmapInMotion> component renders between the dispatch banner
and the route's section header. Pulls the most-recent shipping item
(same selection rule the .rr-current marker uses) and prints the
first sentence of its description as a 18px serif italic line
preceded by an 'IN MOTION RIGHT NOW' tracked eyebrow.
A member who only spends 5 seconds on /roadmap now still walks away
with a sentence about what just shipped — no scroll, no hover.
firstSentenceOf() is the obvious regex against the first
[.!?](?=\s|$). Bails to the 200-char slice if no sentence boundary
fits (covers 'Dr.' / 'e.g.' confusables). Returns '' on null. The
strip hides itself entirely when there's no shipping item, or when
the shipping item has no description text.
Page subtitle: 'Hover any milestone for the full story.' →
'Tap or hover any milestone for the full story.' — touch devices
don't have hover, and the kind of detail that says we're paying
attention.
Admin description-field gains a helper note: 'For shipping items:
the first sentence appears on /roadmap as the "In motion right now"
line. Make it count.' Nudges good first-sentence writing without
adding a new field to maintain.
Banner margin under the dispatch banner reduces 56 → 40px because
the in-motion strip carries its own 36px bottom margin to the route.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Body content of /roadmap is fully replaced. The previous implementation
parsed content/roadmap.md with a hand-written regex into three flat
columns (IN PROGRESS / NEXT / LATER) — gone in its entirety, including
the parseSections helper and horizonColors map (page-local, not exported,
so nothing else broke).
New layout:
1. Page header — tracked 'ROADMAP' eyebrow + 48px serif 'What we
are building.' + a 14px sub line up to ~540px wide that explains
the hover affordance. 36px margin below.
2. <LatestDispatchBanner /> — renders nothing if zero dispatches.
56px below before the route's section header.
3. <RoadmapRoute items={items} /> — pulls all roadmap_items ordered
by display_order asc, falls back to id asc on ties.
Page padding 40/36/80 desktop, 32/24/64 mobile. h1 drops to 36px on
phones; banner gap collapses to 36px.
content/roadmap.md is no longer read; admin manages everything via
/admin?tab=roadmap. The markdown file stays in the repo as the seed
source for fresh databases (still consumed by scripts/seed-roadmap.js)
but the live page is database-driven.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Applies the v3 rules globally: italics reserved for the Bifrost wordmark
and section-links; uppercase tracked eyebrows removed from page heads
and content sections.
Pages updated:
- /members: drops the 'MEMBERS' eyebrow + italic on h1 + italic on member
name + italic on pull-quote.
- /events: drops the head eyebrow + 'Next up · Members only' /
'Invitation by hand' hero eyebrows + 'Also coming up' / 'Past
gatherings' sub-section eyebrows + italics on hero day, hero title,
also-row titles, past-card titles. The past-gatherings header-row
'View all →' link migrates to the bottom of the section as a
section-link.
- /events/past: drops the eyebrow + italic h1; back-link uses
.section-link.
- /dispatches/: drops the 'DISPATCHES' eyebrow + italic h1 + dispatch-row
title italic + date column italic.
- /dispatches/[slug]: drops italic on the article title + h2/h3 inside
rendered markdown + blockquote italic + adjacent prev/next title
italic. Back-link migrates to .section-link.
- /roadmap: drops the 'ROADMAP' eyebrow and the .lead class on the
subtitle.
Orphaned eyebrow class rules left in place; harmless and the next
visual pass can sweep them with the rest of the unused CSS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
