From 4cc579f17b3f8fd7ee9a80f6cf791acbcf8fb1a7 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 12 Dec 2025 16:29:32 +0100
Subject: [PATCH] site: improve header buttons, remove support link

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/utilities.css                     | 66 +++++++++++++----
 hugo_stats.json                              | 76 +++++++++++++++++---
 layouts/_default/baseof.html                 | 34 ---------
 layouts/partials/contact-support-button.html | 12 ----
 layouts/partials/header.html                 | 26 +++----
 layouts/partials/search-bar.html             | 10 +--
 6 files changed, 132 insertions(+), 92 deletions(-)
 delete mode 100644 layouts/partials/contact-support-button.html

diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index 2e340fff5a..425746185d 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -257,20 +257,6 @@
   font-size: 90%;
 }
 
-@utility topbar-button {
-  @apply text-center max-w-40 text-white font-semibold min-h-10 px-2 bg-(--topnav-button-bg) rounded-md border-1 border-blue-300;
-  @apply inline-flex justify-center items-center gap-1.5 hover:bg-blue-400 hover:border-blue-300 transition-colors;
-  svg {
-   font-size: 19px;
-  }
-}
-@utility topbar-button-clear {
-  @apply text-center text-white/95 font-semibold min-h-9 px-0   hover:text-white/85 transition-colors;
-  svg {
-   font-size: 19px;
-  }
-}
-
 .footer {
   @apply hidden md:flex flex-row ml-auto justify-between px-4 pt-6 pb-2 gap-6;
   @apply bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700;
@@ -311,3 +297,55 @@
 #ot-sdk-btn.ot-sdk-show-settings:hover, #ot-sdk-btn.optanon-show-settings:hover{
   @apply hover:!bg-transparent !text-gray-600 dark:!text-gray-400 underline underline-offset-4 decoration-1;
 }
+
+@keyframes reflection {
+  0% {
+    transform: translateX(-100%);
+  }
+  18% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@utility shimmer {
+  position: relative;
+  overflow: hidden;
+
+  & > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      110deg,
+      transparent 0%,
+      transparent 43%,
+      rgba(123, 164, 244, 0.25) 49%,
+      rgba(170, 196, 248, 0.45) 50%,
+      rgba(123, 164, 244, 0.25) 51%,
+      transparent 57%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    pointer-events: none;
+    z-index: 1;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: reflection 3s ease-in-out 3s forwards;
+    }
+  }
+
+  &:hover {
+    @apply bg-blue-800 border-blue-400;
+  }
+}
diff --git a/hugo_stats.json b/hugo_stats.json
index c5133af196..686f2934d9 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -4,7 +4,9 @@
     "classes": [
       "--mount",
       "--tmpfs",
+      "-mr-8",
       "-mt-8",
+      "-pr-8",
       "-top-10",
       "-top-16",
       "-v",
@@ -35,8 +37,8 @@
       "Command-Prompt-CLI",
       "Command-line-setup",
       "Compliant",
+      "Covered",
       "Custom-builder",
-      "DNS-resolution",
       "DSOS-Legacy-DVP-programs",
       "DVP-program",
       "Debian",
@@ -108,9 +110,9 @@
       "Manual-verification",
       "Manually-create-assets",
       "NetworkManager",
-      "Networking-mode",
       "Node",
       "Non-compliant",
+      "Not-covered",
       "Okta",
       "Okta-SAML",
       "Old-Dockerfile",
@@ -147,9 +149,12 @@
       "Updated-Dockerfile",
       "Use-Docker-Init",
       "Use-OpenAI",
+      "Using-Docker-Hardened-Image",
       "Using-Docker-Hardened-Images",
       "Using-the-CLI",
+      "Using-the-Docker-Official-Image",
       "Using-the-GUI",
+      "Using-the-official-Docker-image",
       "Using-the-official-image",
       "VS-Code",
       "Vue",
@@ -167,6 +172,7 @@
       "Without-systemd",
       "[display:none]",
       "absolute",
+      "active:border-2",
       "admonition",
       "admonition-content",
       "admonition-danger",
@@ -176,6 +182,7 @@
       "admonition-tip",
       "admonition-title",
       "admonition-warning",
+      "ask-ai-button",
       "aspect-video",
       "bake-action",
       "bg-amber-500",
@@ -186,10 +193,14 @@
       "bg-blue-400",
       "bg-blue-500",
       "bg-blue-600",
-      "bg-gradient-to-br",
+      "bg-blue-700",
+      "bg-blue-800",
+      "bg-cyan-500",
+      "bg-gradient-to-r",
       "bg-gray-100",
       "bg-gray-400",
       "bg-gray-50",
+      "bg-gray-500",
       "bg-gray-700",
       "bg-green-400",
       "bg-green-500",
@@ -204,9 +215,14 @@
       "border",
       "border-0",
       "border-1",
+      "border-2",
       "border-b",
       "border-b-4",
       "border-blue",
+      "border-blue-300",
+      "border-blue-400",
+      "border-blue-500",
+      "border-cyan-400",
       "border-divider-light",
       "border-gray-100",
       "border-gray-200",
@@ -218,6 +234,7 @@
       "border-none",
       "border-t",
       "border-transparent",
+      "border-white",
       "bottom-0",
       "breadcrumbs",
       "build-push-action",
@@ -245,6 +262,7 @@
       "dark:bg-blue-500",
       "dark:bg-blue-800",
       "dark:bg-gray-300",
+      "dark:bg-gray-400",
       "dark:bg-gray-500",
       "dark:bg-gray-800",
       "dark:bg-gray-900",
@@ -263,7 +281,6 @@
       "dark:border-green-400",
       "dark:border-l-magenta-dark",
       "dark:focus:ring-3-blue-dark",
-      "dark:from-blue-300",
       "dark:hidden",
       "dark:hover:bg-blue-400",
       "dark:hover:bg-blue-500",
@@ -285,9 +302,9 @@
       "dark:text-gray-400",
       "dark:text-gray-500",
       "dark:text-gray-600",
+      "dark:text-gray-800",
       "dark:text-magenta-dark",
       "dark:text-white",
-      "dark:to-blue-400",
       "docker/bake-action",
       "docker/build-push-action",
       "download-links",
@@ -306,8 +323,13 @@
       "flex-shrink",
       "flex-shrink-0",
       "flex-wrap",
+      "focus:border-2",
+      "focus:border-blue-400",
       "focus:outline-none",
+      "focus:ring",
+      "focus:ring-2",
       "focus:ring-3-blue-light",
+      "focus:ring-blue-400",
       "font-bold",
       "font-medium",
       "font-normal",
@@ -316,7 +338,8 @@
       "footnote-backref",
       "footnote-ref",
       "footnotes",
-      "from-blue-400",
+      "from-blue-500",
+      "from-cyan-400",
       "gap-0",
       "gap-1",
       "gap-12",
@@ -340,6 +363,7 @@
       "h-5",
       "h-6",
       "h-8",
+      "h-[42px]",
       "h-[calc(100vh-64px)]",
       "h-fit",
       "h-full",
@@ -348,20 +372,31 @@
       "hidden",
       "hidden'",
       "highlight",
+      "hover:bg-blue-300",
       "hover:bg-blue-400",
+      "hover:bg-blue-50",
       "hover:bg-blue-500",
+      "hover:bg-blue-600",
+      "hover:bg-blue-800",
+      "hover:bg-cyan-400",
       "hover:bg-gray-100",
       "hover:bg-gray-200",
       "hover:bg-gray-50",
+      "hover:border-blue-300",
+      "hover:border-blue-400",
       "hover:border-white/20",
       "hover:dark:bg-gray-800",
       "hover:dark:text-blue-400",
       "hover:dark:text-blue-700",
       "hover:opacity-80",
       "hover:opacity-90",
+      "hover:scale-105",
+      "hover:shadow-[0_0_30px_rgba(147,51,234,0.6)]",
+      "hover:shadow-[0_0_30px_rgba(34,211,238,0.5)]",
       "hover:text-blue",
       "hover:underline",
       "icon-lg",
+      "icon-md",
       "icon-sm",
       "icon-svg",
       "icon-svg-stroke",
@@ -381,7 +416,9 @@
       "leading-snug",
       "leading-tight",
       "left-0",
+      "lg:absolute",
       "lg:block",
+      "lg:border-none",
       "lg:flex",
       "lg:flex-row",
       "lg:gap-4",
@@ -390,11 +427,14 @@
       "lg:grid-cols-3",
       "lg:grid-cols-4",
       "lg:hidden",
+      "lg:hover:bg-transparent",
+      "lg:hover:opacity-80",
       "lg:inline",
       "lg:max-w-xl",
       "lg:no-underline",
       "lg:pb-2",
       "lg:scale-100",
+      "lg:w-full",
       "link",
       "links",
       "lntable",
@@ -477,12 +517,12 @@
       "overflow-x-auto",
       "overflow-x-hidden",
       "overflow-y-auto",
+      "p-1",
       "p-2",
       "p-3",
       "p-4",
       "p-6",
       "p-8",
-      "p-[2px]",
       "pb-0",
       "pb-0.5",
       "pb-1",
@@ -493,6 +533,7 @@
       "pl-3",
       "pl-4",
       "pl-5",
+      "placeholder-blue-300",
       "pr-2",
       "prose",
       "pt-2",
@@ -504,13 +545,17 @@
       "py-0.5",
       "py-1",
       "py-2",
+      "py-2.5",
       "py-20",
+      "py-3",
       "py-4",
       "py-8",
+      "py-[0.5625rem]",
       "relative",
       "right-0",
       "right-2",
       "right-8",
+      "ring",
       "ring-3-2",
       "ring-3-[1.5px]",
       "ring-3-blue-light-400",
@@ -518,8 +563,10 @@
       "rotate-45",
       "rounded",
       "rounded-full",
+      "rounded-lg",
       "rounded-md",
       "rounded-sm",
+      "rounded-xl",
       "scale-50",
       "scale-75",
       "scroll-mt-2",
@@ -533,7 +580,14 @@
       "self-center",
       "self-start",
       "shadow",
+      "shadow-[0_0_20px_rgba(147,51,234,0.4)]",
+      "shadow-[0_0_20px_rgba(34,211,238,0.3)]",
+      "shadow-black",
+      "shadow-blue-800",
+      "shadow-gray-600",
+      "shadow-lg",
       "shadow-md",
+      "shimmer",
       "sm:block",
       "sm:flex-row",
       "sm:hidden",
@@ -555,6 +609,7 @@
       "text-base",
       "text-black",
       "text-blue",
+      "text-blue-600",
       "text-blue-light",
       "text-divider-light",
       "text-gray",
@@ -572,21 +627,24 @@
       "text-white",
       "text-xl",
       "text-xs",
-      "to-blue-200",
+      "to-blue-600",
+      "to-purple-600",
       "toc",
       "top-0",
       "top-1",
       "top-16",
       "top-6",
       "topbar-button",
-      "topbar-button-clear",
       "transition",
+      "transition-all",
       "transition-colors",
       "transition-opacity",
       "transition-transform",
       "truncate",
+      "w-0",
       "w-2",
       "w-5",
+      "w-64",
       "w-65",
       "w-8",
       "w-[1200px]",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 66cdeeff55..7b06c790c8 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -49,40 +49,6 @@
             >
             Back
           </button>
-          <!-- Top nav buttons appear here on sm width -->
-          <div class="flex flex-col gap-2 md:hidden mb-4">
-            <button
-              @click="open = false"
-              class="topbar-button open-kapa-widget w-full flex items-center gap-2"
-            >
-              <span>Ask&nbsp;AI</span>
-              <span class="icon-svg">
-                {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
-              </span>
-            </button>
-            <div class="topbar-button w-full flex items-center gap-2" id="search-bar-container">
-               {{ partialCached "search-bar.html" "-" }}
-            </div>
-            {{ partial "contact-support-button.html" .}}
-            <button
-              aria-label="Theme switch"
-              id="theme-switch"
-              class="topbar-button flex items-center"
-              x-data="{ theme: localStorage.getItem('theme-preference') }"
-              x-init="$watch('theme', value => {
-                    localStorage.setItem('theme-preference', value);
-                    document.firstElementChild.className = value;
-                  })"
-              @click="theme = (theme === 'dark' ? 'light' : 'dark')"
-            >
-              <span class="icon-svg icon-sm dark:hidden"
-                >{{ partialCached "icon" "icons/sun.svg" "sun" }}
-              </span>
-              <span class="icon-svg icon-sm hidden dark:block">
-                {{ partialCached "icon" "icons/moon.svg" "moon" }}
-              </span>
-            </button>
-          </div>
           <!-- Actual Sidebar Content -->
           {{ block "left" . }}
             {{ partial "sidebar/mainnav.html" . }}
diff --git a/layouts/partials/contact-support-button.html b/layouts/partials/contact-support-button.html
deleted file mode 100644
index ff430c25fc..0000000000
--- a/layouts/partials/contact-support-button.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{{ $class := "" }}
-{{ if eq . "notext" }}
-  {{ $class = "hidden lg:inline" }}
-{{ end }}
-<a class="topbar-button w-full flex items-center gap-2"
-   href="https://hub.docker.com/support/contact"
-   aria-label="Contact support">
-    <span class="{{ $class }}">Contact support</span>
-    <span class="icon-svg icon-sm">
-      {{ partial "utils/svg.html" "/icons/headset.svg" }}
-    </span>
-</a>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 7338b1e12f..6460e14e77 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -46,28 +46,25 @@
       </nav>
     </div>
     <div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
-      <!-- Hide on small screens, show on md+ -->
-      <div class="hidden md:flex items-center gap-3">
+      <div class="flex items-center gap-2">
         <button
           @click="open = false"
-          class="topbar-button open-kapa-widget"
+          class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
         >
-          <span class="hidden lg:inline">Ask&nbsp;AI</span>
           <span class="icon-svg">
-            {{ partialCached "utils/svg.html" "/icons/sparkle.svg" }}
+            {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
           </span>
+          <span class="hidden px-1 lg:inline">Ask&nbsp;AI</span>
         </button>
 
-        <div class="topbar-button" id="search-bar-container">
+        <div id="search-bar-container">
            {{ partialCached "search-bar.html" "-" }}
         </div>
 
-        {{ partial "contact-support-button.html" "notext" }}
-
         <button
           aria-label="Theme switch"
           id="theme-switch"
-          class="topbar-button-clear"
+          class="cursor-pointer p-2 rounded-lg bg-blue-700 border border-blue-500 hover:bg-blue-800 hover:border-blue-400 transition-colors focus:outline-none focus:ring focus:ring-blue-400"
           x-data="{ theme: localStorage.getItem('theme-preference') }"
           x-init="$watch('theme', value => {
                 localStorage.setItem('theme-preference', value);
@@ -75,21 +72,14 @@
               })"
           @click="theme = (theme === 'dark' ? 'light' : 'dark')"
         >
-          <span class="icon-svg icon-sm dark:hidden"
+          <span class="icon-svg dark:hidden"
             >{{ partialCached "icon" "icons/sun.svg" "sun" }}
           </span>
-          <span class="icon-svg icon-sm hidden dark:block">
+          <span class="icon-svg hidden dark:block">
             {{ partialCached "icon" "icons/moon.svg" "moon" }}
           </span>
         </button>
       </div>
-      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
-    </div>
-  </div>
-</header>
-        </button>
-      </div>
-      <!-- On sm screens, hide all buttons here (they will be in sidebar) -->
     </div>
   </div>
 </header>
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 5d571e051c..1fafcbadd8 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -4,10 +4,10 @@
   @click.outside="open = false;"
   @keyup.escape.window="open = false"
   id="search-bar"
-  class="relative flex w-full max-w-full items-center overflow-visible"
+  class="h-full relative flex items-center overflow-visible"
 >
   <input
-    class="min-w-0 border-none outline-none focus:outline-none"
+    class="rounded-lg hidden w-64 lg:inline focus:outline-none bg-blue-700 border border-blue-500 px-3 py-[0.5625rem] focus:ring focus:ring-blue-400 placeholder-blue-300 h-[42px]"
     x-ref="searchBarInput"
     type="search"
     id="search-bar-input"
@@ -30,12 +30,12 @@
   <button
     id="search-bar-icon"
     @click="window.location.href = '/search/?q=' + $refs.searchBarInput.value;"
-    class="cursor-pointer transition-opacity hover:opacity-80"
+    class="lg:absolute right-2 p-1 rounded-lg cursor-pointer transition-colors hover:bg-blue-600 lg:hover:bg-transparent lg:hover:opacity-80"
     aria-label="Search"
   >
-    <span class="icon-svg-stroke">
+    <div class="bg-blue-700 rounded-md p-2 border border-blue-500 lg:border-none icon-svg">
       {{ partial "utils/svg.html" "/icons/search.svg" }}
-    </span>
+    </div>
   </button>
   <div
     id="search-bar-dropdown"