From b2e0e8f518e6496ca68c8a943a5361ac486cc8de Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 15:23:48 +0200
Subject: [PATCH] fix(roadmap): restore original top header + add centred
 route-intro below banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/pages/roadmap.astro | 71 ++++++++++++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
index 238920d..780a7e1 100644
--- a/src/pages/roadmap.astro
+++ b/src/pages/roadmap.astro
@@ -12,22 +12,31 @@ const items = getAllRoadmapItems()
 <AppLayout title="Roadmap" user={user}>
   <article class="roadmap-page">
 
-    <header class="roadmap-header">
-      <p class="roadmap-eyebrow">Roadmap</p>
-      <h1 class="roadmap-title">Roadmap</h1>
-      <p class="roadmap-subtitle">
+    <!-- Page-level header — left-aligned, the page's editorial lead. -->
+    <header class="page-header">
+      <p class="page-eyebrow">Roadmap</p>
+      <h1 class="page-title">What we are building.</h1>
+      <p class="page-sub">
         A live picture of the work. What's in motion, what's queued,
-        what we're still thinking about. Tap or hover any milestone
-        for the full story.
+        what we're still thinking about.
       </p>
     </header>
 
     <LatestDispatchBanner />
 
+    <!-- Centred section intro for the route specifically. Sits between
+         the dispatch banner and the full-bleed route; carries the two
+         interaction hints (hover/tap + drag/scroll). -->
+    <section class="route-intro">
+      <h2 class="route-intro-title">Roadmap</h2>
+      <p class="route-intro-hint">
+        Tap or hover any milestone for the full story. Drag or scroll to move.
+      </p>
+    </section>
+
     <RoadmapRoute items={items} />
 
-    <!-- Legend lives outside the route component so it can return to
-         centred content-column width while the route goes full-bleed. -->
+    <!-- Legend — final row, centred in content column. -->
     <div class="roadmap-legend" aria-label="Status legend">
       <span><i style="background:#6d8c7c"></i>Shipping</span>
       <span><i style="background:#b96b58"></i>In beta</span>
@@ -45,14 +54,13 @@ const items = getAllRoadmapItems()
     margin: 0 auto;
   }
 
-  /* ── Centred page header ──────────────────────────────────────── */
-  .roadmap-header {
-    text-align: center;
-    max-width: 640px;
-    margin: 0 auto 48px;
+  /* ── Page header (left-aligned editorial lead) ────────────────── */
+  .page-header {
+    max-width: 540px;
+    margin-bottom: 36px;
     padding-top: 32px;
   }
-  .roadmap-eyebrow {
+  .page-eyebrow {
     font-family: var(--font-sans);
     font-size: 11px;
     letter-spacing: 1.4px;
@@ -60,7 +68,7 @@ const items = getAllRoadmapItems()
     color: var(--on-surface-variant);
     margin: 0 0 12px;
   }
-  .roadmap-title {
+  .page-title {
     font-family: var(--font-serif);
     font-weight: 400;
     font-size: 48px;
@@ -69,17 +77,40 @@ const items = getAllRoadmapItems()
     color: var(--on-surface);
     margin: 0 0 14px;
   }
-  .roadmap-subtitle {
+  .page-sub {
     font-size: 14px;
     line-height: 1.65;
     color: var(--on-surface-variant);
-    margin: 0 auto;
+    margin: 0;
     max-width: 480px;
   }
 
   .roadmap-page :global(.banner),
   .roadmap-page :global(.rr-dispatch) { margin-bottom: 56px; }
 
+  /* ── Centred route intro ──────────────────────────────────────── */
+  .route-intro {
+    text-align: center;
+    max-width: 560px;
+    margin: 0 auto 28px;
+  }
+  .route-intro-title {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: 22px;
+    line-height: 1.2;
+    color: var(--on-surface);
+    margin: 0 0 10px;
+  }
+  .route-intro-hint {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    letter-spacing: var(--tracking-wide);
+    color: var(--on-surface-variant);
+    margin: 0;
+    line-height: 1.5;
+  }
+
   /* ── Legend ───────────────────────────────────────────────────── */
   .roadmap-legend {
     display: flex;
@@ -107,9 +138,11 @@ const items = getAllRoadmapItems()
 
   @media (max-width: 767px) {
     .roadmap-page { padding: 0 24px 64px; }
-    .roadmap-header { padding-top: 24px; margin-bottom: 32px; }
-    .roadmap-title { font-size: 36px; }
+    .page-header { padding-top: 24px; margin-bottom: 28px; }
+    .page-title { font-size: 36px; }
     .roadmap-page :global(.banner),
     .roadmap-page :global(.rr-dispatch) { margin-bottom: 40px; }
+    .route-intro { margin-bottom: 22px; }
+    .route-intro-title { font-size: 19px; }
   }
 </style>