From 8d394fe2c70bc6d8684024f5fe8c715e6d1edeb7 Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Tue, 18 Aug 2026 11:04:27 +1000
Subject: [PATCH] nav hover: glow instead of the underline bar, and give
 keyboard focus the same glow

---
 src/components/Nav.astro | 23 +++++++----------------
 src/scripts/anim.ts      | 23 +----------------------
 2 files changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 8e6664c..1252dfd 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -27,7 +27,7 @@ const links = [
           target={l.external ? "_blank" : undefined}
           rel={l.external ? "noopener noreferrer" : undefined}
         >
-          {l.label}<span class="nav__ul" aria-hidden="true"></span>
+          {l.label}
         </a>
       ))}
     </nav>
@@ -98,21 +98,12 @@ const links = [
     color: var(--text);
     text-decoration: none;
   }
-  /* Hover underline - scaleX sprung by the Motion layer, growing from the
-     start of the label. No scroll-spy: it tracked the active section as you
-     scrolled, which read as clunky on a page this short. */
-  .nav__ul {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -0.45rem;
-    height: 2px;
-    border-radius: 2px;
-    background: linear-gradient(90deg, var(--accent), var(--accent-2));
-    box-shadow: 0 0 8px var(--accent-glow);
-    transform: scaleX(0);
-    transform-origin: 0 50%;
-    pointer-events: none;
+  /* Hover = glow, not an underline (owner call 2026-08-18: the bar read as clunky).
+     Keyboard focus gets the same treatment so the affordance is not mouse-only. */
+  .nav__links a:hover,
+  .nav__links a:focus-visible {
+    color: var(--accent);
+    text-shadow: 0 0 10px var(--accent-glow), 0 0 22px var(--accent-glow);
   }
   .nav__actions {
     display: flex;
diff --git a/src/scripts/anim.ts b/src/scripts/anim.ts
index acdf111..e0b1aba 100644
--- a/src/scripts/anim.ts
+++ b/src/scripts/anim.ts
@@ -84,32 +84,11 @@ function run(): void {
   }
 
   /* 5. Nav - animated active-section underline + tactile hover. */
-  initNav();
 
-  /* 6. Buttons - spring lift on hover, press on tap. */
+  /* Buttons - spring lift on hover, press on tap. (Nav hover is pure CSS glow now.) */
   initButtons();
 }
 
-function initNav(): void {
-  const links = Array.from(
-    document.querySelectorAll<HTMLAnchorElement>(".nav__links a"),
-  );
-  if (!links.length) return;
-
-  const spring = { type: "spring", stiffness: 380, damping: 30 } as const;
-
-  const under = (a: HTMLAnchorElement, on: boolean): void => {
-    const ul = a.querySelector<HTMLElement>(".nav__ul");
-    if (!ul) return;
-    animate(ul, { scaleX: on ? 1 : 0 }, spring);
-  };
-
-  for (const a of links) {
-    a.addEventListener("pointerenter", () => under(a, true));
-    a.addEventListener("pointerleave", () => under(a, false));
-  }
-}
-
 function initButtons(): void {
   const lift = { type: "spring", stiffness: 400, damping: 26 } as const;
   const tap = { type: "spring", stiffness: 600, damping: 22 } as const;