From 83030bff3a25937ffefaeeb9eeefc752ad414914 Mon Sep 17 00:00:00 2001
From: David Beccue <David.Beccue@iqvia.com>
Date: Sat, 16 May 2026 07:27:53 +0500
Subject: [PATCH] Style header nav as pill buttons with clearer active state

Give nav links a visible translucent pill background and border so they
read as buttons by default, and make the active tab solid white with
the brand red text to clearly indicate the current page.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/lib/components/Header.svelte | 39 +++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 69f1834..f12e850 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -64,32 +64,49 @@
   }
   .nav {
     display: flex;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-left: 1rem;
     flex: 1;
   }
   .nav a {
     color: inherit;
     text-decoration: none;
-    padding: 0.3rem 0.6rem;
-    border-radius: 4px;
-    opacity: 0.9;
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.25);
+    font-weight: 500;
+    line-height: 1;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
   }
-  .nav a:hover { opacity: 1; background: rgba(255,255,255,0.1); }
-  .nav a.active {
+  .nav a:hover {
     background: rgba(255,255,255,0.22);
-    opacity: 1;
+    border-color: rgba(255,255,255,0.4);
+  }
+  .nav a:active { transform: translateY(1px); }
+  .nav a.active {
+    background: #fff;
+    color: #b00d27;
+    border-color: #fff;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
   }
   .lang {
-    background: rgba(255,255,255,0.18);
+    background: rgba(255,255,255,0.12);
     color: inherit;
     border: 1px solid rgba(255,255,255,0.45);
-    padding: 0.35rem 0.85rem;
-    border-radius: 4px;
+    padding: 0.4rem 0.9rem;
+    border-radius: 999px;
     font: inherit;
+    font-weight: 500;
+    line-height: 1;
     cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
   }
-  .lang:hover { background: rgba(255,255,255,0.28); }
+  .lang:hover {
+    background: rgba(255,255,255,0.22);
+    border-color: rgba(255,255,255,0.6);
+  }
+  .lang:active { transform: translateY(1px); }
 
   @media (max-width: 640px) {
     .header { flex-wrap: wrap; }