From 407e7bc378062490aa6ac4b06b4c33b99662855e Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 15:29:13 +0200
Subject: [PATCH] refactor(roadmap): move legend above the route + breathe room
 before banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/pages/roadmap.astro | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
index 17b57f8..ff463bb 100644
--- a/src/pages/roadmap.astro
+++ b/src/pages/roadmap.astro
@@ -23,9 +23,8 @@ const items = getAllRoadmapItems()
       </p>
     </header>
 
-    <RoadmapRoute items={items} />
-
-    <!-- Legend — final row inside content column. -->
+    <!-- Legend lives above the route now — reads as a key the eye picks
+         up just before walking the path. -->
     <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>
@@ -33,9 +32,11 @@ const items = getAllRoadmapItems()
       <span><i style="background:#d4d2c8"></i>Considering</span>
     </div>
 
-    <!-- Latest dispatch — moved below the route. The route is the page's
-         primary surface; the dispatch is supplementary editorial that
-         sits at the foot. -->
+    <RoadmapRoute items={items} />
+
+    <!-- Latest dispatch sits at the foot of the page with generous
+         space above so it reads as a separate beat, not a continuation
+         of the route. -->
     <LatestDispatchBanner />
 
   </article>
@@ -52,7 +53,7 @@ const items = getAllRoadmapItems()
   .roadmap-header {
     text-align: center;
     max-width: 640px;
-    margin: 0 auto 48px;
+    margin: 0 auto 28px;        /* tightened — legend sits right under */
     padding-top: 32px;
   }
   .roadmap-title {
@@ -72,12 +73,12 @@ const items = getAllRoadmapItems()
     max-width: 520px;
   }
 
-  /* ── Legend ───────────────────────────────────────────────────── */
+  /* ── Legend (above the route, key-style) ─────────────────────── */
   .roadmap-legend {
     display: flex;
     justify-content: center;
     gap: 24px;
-    margin-top: 28px;
+    margin: 0 auto 32px;        /* legend → route */
     flex-wrap: wrap;
   }
   .roadmap-legend span {
@@ -97,13 +98,14 @@ const items = getAllRoadmapItems()
     flex-shrink: 0;
   }
 
-  /* ── Dispatch banner (now below the route) ───────────────────── */
-  .roadmap-page :global(.rr-dispatch) { margin-top: 64px; }
+  /* ── Dispatch banner (foot of page, generous breathing room) ── */
+  .roadmap-page :global(.rr-dispatch) { margin-top: 112px; }
 
   @media (max-width: 767px) {
     .roadmap-page { padding: 0 24px 64px; }
-    .roadmap-header { padding-top: 24px; margin-bottom: 32px; }
+    .roadmap-header { padding-top: 24px; margin-bottom: 20px; }
     .roadmap-title { font-size: 36px; }
-    .roadmap-page :global(.rr-dispatch) { margin-top: 48px; }
+    .roadmap-legend { margin-bottom: 24px; }
+    .roadmap-page :global(.rr-dispatch) { margin-top: 72px; }
   }
 </style>