fix(nav): add hover-follow pill and keep active item semibold

Move the main nav active pill with cursor hover via :has() selectors.
Hover previews use normal weight while route-active items stay semibold.
Align dark hero nav, remove stale hero underline rules, and promote
Locations in the Product dropdown card.

Author: ronggur

public/images/nav/world-map.png

@@ -20,10 +20,10 @@
               "href": "/essentials"
             },
             {
-              "text": "Pricing",
-              "image": "/images/nav/pricing.png",
-              "desc": "Pssssssst... It's free",
-              "href": "/pricing"
+              "text": "Locations",
+              "image": "/images/nav/world-map.png",
+              "desc": "Deploy at the global edge",
+              "href": "/locations"
             }
           ]
         }
@@ -37,7 +37,6 @@
         {
           "title": "Get started:",
           "items": [
-            { "text": "Locations", "href": "/locations" },
             { "text": "Blog", "href": "/blog" },
             {
               "text": "Videos",

src/data/navigation.json

@@ -30,7 +30,22 @@
 
     .nav--main {
       .nav-menu-link {
-        @apply text-glacier-mist-700 opacity-100 hover:opacity-80;
+        @apply text-glacier-mist-700 opacity-100;
+
+        &.link--active {
+          @apply font-semibold;
+        }
+      }
+
+      .nav-menu-item:hover > .nav-menu-link:not(.link--active),
+      .nav-dropdown:focus-within > .nav-menu-link:not(.link--active) {
+        @apply text-canyon-clay---links bg-white font-normal opacity-100;
+      }
+
+      .nav-menu:not(:has(.nav-menu-item:hover)) .nav-menu-link.link--active,
+      .nav-menu-item:hover > .nav-menu-link.link--active,
+      .nav-dropdown:focus-within > .nav-menu-link.link--active {
+        @apply text-canyon-clay---links bg-white font-semibold opacity-100;
       }
     }
   }

src/v1/styles/components-dark.css

@@ -26,10 +26,6 @@
             }
           }
         }
-
-        .link--active {
-          @apply [&>span]:border-white/70;
-        }
       }
     }
     &.light {
@@ -52,10 +48,6 @@
             }
           }
         }
-
-        .link--active {
-          @apply [&>span]:border-midnight-fjord/70;
-        }
       }
 
       .nav-logo {

src/v1/styles/components-hero.css

@@ -57,12 +57,24 @@
     }
 
     .nav-menu-link {
-      @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 hover:opacity-80;
+      @apply flex items-center gap-2 px-3 py-1.5 font-normal opacity-60 transition-colors duration-150;
 
       &.link--active {
-        @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100 hover:opacity-80;
+        @apply font-semibold;
       }
     }
+
+    /* Pill: hover preview (normal weight) vs route-active pill (semibold) */
+    .nav-menu-item:hover > .nav-menu-link:not(.link--active),
+    .nav-dropdown:focus-within > .nav-menu-link:not(.link--active) {
+      @apply text-canyon-clay---links rounded-md bg-white font-normal opacity-100;
+    }
+
+    .nav-menu:not(:has(.nav-menu-item:hover)) .nav-menu-link.link--active,
+    .nav-menu-item:hover > .nav-menu-link.link--active,
+    .nav-dropdown:focus-within > .nav-menu-link.link--active {
+      @apply text-canyon-clay---links rounded-md bg-white font-semibold opacity-100;
+    }
   }
 
   /* Dropdown Styles */