From 73dc65625760eae8875578d8747445e8d594bff0 Mon Sep 17 00:00:00 2001
From: Jonathan Hvid <joh@fenja.ai>
Date: Tue, 12 May 2026 14:53:11 +0200
Subject: [PATCH] =?UTF-8?q?style(nav):=20active=20link=20is=20colour=20+?=
 =?UTF-8?q?=20weight=20only=20=E2=80=94=20drop=20bullet,=20italic,=20case?=
 =?UTF-8?q?=20swap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.nav-link.active was carrying four overlapping cues from earlier passes:
terracotta colour, serif italic, sentence case, leading '·' bullet, and
a 15px size bump. The spec's 'option 4' is colour-only. Strip the rest:

  .nav-link.active {
    color: var(--pigment-terracotta);
    font-weight: 500;
  }

That's it. Same sans uppercase as inactive links, just terracotta with
a touch more weight. The bullet ::before is gone; nothing floats below
the link.

Sign out (.logout-btn) is already --on-surface-muted with --on-surface
on hover from a prior pass — exactly the muted treatment the new spec
asks for, so no change needed. The 'Sign out is currently terracotta'
line in the spec didn't match the codebase; flagged in the audit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .claude/settings.local.json |  3 ++-
 src/layouts/AppLayout.astro | 19 +++----------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 224805c..9379be4 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -46,7 +46,8 @@
       "Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null -i)",
       "Bash(curl -s -c /tmp/jar.txt -d \"email=lars@virk2.dk&password=cab123\" http://localhost:4321/login -o /dev/null)",
       "Bash(curl -s -b /tmp/jar.txt http://localhost:4321/roadmap)",
-      "Bash(grep -nE \"\\\\.rr-fade-left, \\\\.rr-fade-right|rr-fade-left \\\\{|rr-fade-right \\\\{\" src/components/RoadmapRoute.astro)"
+      "Bash(grep -nE \"\\\\.rr-fade-left, \\\\.rr-fade-right|rr-fade-left \\\\{|rr-fade-right \\\\{\" src/components/RoadmapRoute.astro)",
+      "Bash(awk -F: '{print $1}')"
     ]
   }
 }
diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index 6fe4cab..296a57c 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -200,24 +200,11 @@ const year = new Date().getFullYear();
     color: var(--on-surface);
     border-bottom: none;
   }
-  /* Active nav link: terracotta color + a serif italic "·" bracket. The
-     prefix dot acts as a 'you are here' marker without floating below
-     the link the way the previous indicator did. Switching from sans
-     uppercase to terracotta serif italic also doubles as a typography
-     cue, so the active state reads even before colour processes. */
+  /* Active nav link: terracotta + slightly heavier weight. Colour alone
+     is the indicator — no badge, bullet, italic, or family swap. */
   .nav-link.active {
     color: var(--pigment-terracotta);
-    font-family: var(--font-serif);
-    font-style: italic;
-    font-weight: 400;
-    letter-spacing: var(--tracking-snug);
-    text-transform: none;
-    font-size: 15px;
-  }
-  .nav-link.active::before {
-    content: '·';
-    margin-right: 6px;
-    color: var(--pigment-terracotta);
+    font-weight: 500;
   }
 
   /* ── User zone ──────────────────────────────────────────────────── */