feat(v2/nav): redesign quick-nav as centered category-grouped pill chips

Expands the quick-nav bar to 21 destinations and restyles it as a modern,
centered chip bar. Adds CI/CD, Terraform-adjacent Ansible, and the three
hyperscalers (AWS, Azure, GCP), and reorders every tab into related category
clusters with short labels (even where the page title is long):

  discovery (Topic Map · Digest · Videos) → platform (Kubernetes · Docker)
  → delivery (GitOps · CI/CD) → IaC (Terraform · Ansible)
  → cloud (AWS · Azure · GCP) → security → ops (Observability · SRE · DevOps)
  → data (Messaging) → AI/ML (AI & MCP · MLOps) → Methodology → V1 Archive (muted)

Visual upgrade (CSS, modern Chrome):
- Pill chips instead of plain text links — more scannable.
- Chip background/border/glow derived from the theme accent via color-mix()
  (in srgb), so the bar restyles automatically with the palette.
- Centered wrapping rows (justify-content: center) — balanced across 2-3 rows
  at 21 items vs a ragged last row when left-aligned; the repeated ☁️ visually
  groups the three cloud providers.
- Hover lift (translateY) + accent glow; :focus-visible outline for a11y;
  prefers-reduced-motion honored.
- Logical properties (margin-inline / padding-inline); mobile collapses to a
  single horizontal-scroll row with the scrollbar hidden.

Bumps v2_elite.css cache-bust to ?v=2.9.29. V2-only; no page regeneration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/overrides/main.html

@@ -5,31 +5,39 @@
 {% endblock %}
 
 {#-
-  Slim quick-nav bar rendered below the header on every page (via the `tabs`
-  block, which is empty here since navigation.tabs is disabled). Gives the key
-  cross-cutting destinations a persistent, one-click home — without the
-  18-tab overflow and without collapsing the full left navigation tree.
+  Quick-nav bar rendered below the header on every page (via the `tabs` block,
+  which is empty here since navigation.tabs is disabled). Gives the key
+  cross-cutting destinations a persistent, one-click home as centered pill
+  chips — without collapsing the full left navigation tree.
 
-  Layout: discovery/meta hubs, then the cloud-native pillar topics
-  (orchestration · containers · delivery · infra · security · observability)
-  plus the ops disciplines (SRE · DevOps), then the AI hubs (AI & MCP · MLOps)
-  and Methodology, with V1 Archive muted at the far right.
+  Destinations are ordered into related category clusters and use short labels
+  (even when the underlying page title is long):
+    discovery (Topic Map · Digest · Videos) → platform (Kubernetes · Docker)
+    → delivery (GitOps · CI/CD) → IaC (Terraform · Ansible)
+    → cloud (AWS · Azure · GCP) → security → ops (Observability · SRE · DevOps)
+    → data (Messaging) → AI/ML (AI & MCP · MLOps) → Methodology,
+  with V1 Archive muted last.
 -#}
 {% block tabs %}
 <nav class="nb-quicknav" aria-label="Quick navigation">
   <div class="nb-quicknav__inner">
     <a class="nb-quicknav__link" href="/topic-map/">🗺️ Topic Map</a>
-    <a class="nb-quicknav__link" href="/tech-digest/">📊 Intelligence Digest</a>
-    <a class="nb-quicknav__link" href="/videos/">🎥 Video Hub</a>
+    <a class="nb-quicknav__link" href="/tech-digest/">📊 Digest</a>
+    <a class="nb-quicknav__link" href="/videos/">🎥 Videos</a>
     <a class="nb-quicknav__link" href="/kubernetes/">☸️ Kubernetes</a>
     <a class="nb-quicknav__link" href="/docker/">🐳 Docker</a>
     <a class="nb-quicknav__link" href="/gitops/">🔄 GitOps</a>
+    <a class="nb-quicknav__link" href="/cicd/">🚀 CI/CD</a>
     <a class="nb-quicknav__link" href="/terraform/">🏗️ Terraform</a>
-    <a class="nb-quicknav__link" href="/kubernetes-security/">🔐 K8s Security</a>
+    <a class="nb-quicknav__link" href="/ansible/">📋 Ansible</a>
+    <a class="nb-quicknav__link" href="/aws/">☁️ AWS</a>
+    <a class="nb-quicknav__link" href="/azure/">☁️ Azure</a>
+    <a class="nb-quicknav__link" href="/GoogleCloudPlatform/">☁️ GCP</a>
+    <a class="nb-quicknav__link" href="/kubernetes-security/">🔐 Security</a>
     <a class="nb-quicknav__link" href="/monitoring/">📈 Observability</a>
     <a class="nb-quicknav__link" href="/sre/">🛠️ SRE</a>
     <a class="nb-quicknav__link" href="/devops/">♾️ DevOps</a>
-    <a class="nb-quicknav__link" href="/message-queue/">📨 Message Queue</a>
+    <a class="nb-quicknav__link" href="/message-queue/">📨 Messaging</a>
     <a class="nb-quicknav__link" href="/ai-agents-mcp/">🤖 AI &amp; MCP</a>
     <a class="nb-quicknav__link" href="/mlops/">🧠 MLOps</a>
     <a class="nb-quicknav__link" href="/methodology/">📐 Methodology</a>

docs/static/v2_elite.css

@@ -1237,42 +1237,69 @@ input[type="text"] {
    =================================================================== */
 .nb-quicknav {
   background: var(--md-header-bg-color);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-bottom: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 22%, transparent);
 }
 .nb-quicknav__inner {
   max-width: 1600px;
-  margin: 0 auto;
+  margin-inline: auto;
   display: flex;
-  align-items: center;
-  gap: 1.4rem;
   flex-wrap: wrap;
-  padding: 0.4rem 1.2rem;
+  align-items: center;
+  justify-content: center; /* centered rows read as a balanced command bar */
+  gap: 0.4rem 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 1.2rem;
 }
 .nb-quicknav__link {
-  color: rgba(255, 255, 255, 0.78) !important;
+  /* chip colors derived from the theme accent via color-mix (Chrome 111+) */
+  --nb-chip-bg: color-mix(in srgb, var(--md-accent-fg-color) 8%, transparent);
+  --nb-chip-bd: color-mix(in srgb, var(--md-accent-fg-color) 18%, transparent);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3em;
+  color: rgba(255, 255, 255, 0.82) !important;
   text-decoration: none;
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.01em;
   white-space: nowrap;
-  transition: color 0.2s ease, text-shadow 0.2s ease;
+  padding: 0.22rem 0.62rem;
+  border-radius: 999px;
+  background: var(--nb-chip-bg);
+  border: 1px solid var(--nb-chip-bd);
+  transition: background 0.18s ease, border-color 0.18s ease,
+              color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
 }
 .nb-quicknav__link:hover {
-  color: var(--md-accent-fg-color) !important;
-  text-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
+  color: #fff !important;
+  background: color-mix(in srgb, var(--md-accent-fg-color) 32%, transparent);
+  border-color: var(--md-accent-fg-color);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
+}
+.nb-quicknav__link:focus-visible {
+  outline: 2px solid var(--md-accent-fg-color);
+  outline-offset: 2px;
 }
 .nb-quicknav__link--muted {
-  opacity: 0.65;
-  margin-left: auto; /* push V1 Archive to the right edge */
+  opacity: 0.6;
 }
-/* On phones the left drawer already exposes navigation; let the bar scroll. */
+.nb-quicknav__link--muted:hover {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nb-quicknav__link { transition: none; }
+  .nb-quicknav__link:hover { transform: none; }
+}
+/* On phones the left drawer already exposes navigation; one scrollable row. */
 @media screen and (max-width: 44.9375em) {
   .nb-quicknav__inner {
     flex-wrap: nowrap;
+    justify-content: flex-start;
     overflow-x: auto;
-    gap: 1rem;
+    scrollbar-width: none; /* Firefox */
   }
-  .nb-quicknav__link--muted { margin-left: 1rem; }
+  .nb-quicknav__inner::-webkit-scrollbar { display: none; } /* WebKit/Blink */
 }
 .topic-map-dim ul {
   margin-top: 0.3rem;

v2-mkdocs.yml

@@ -114,7 +114,7 @@ extra:
 extra_css:
   - https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap
   - static/extra.css
-  - static/v2_elite.css?v=2.9.27
+  - static/v2_elite.css?v=2.9.29
 
 extra_javascript:
   - static/v2_filter.js?v=2.9.19