fix(docs): opaque sticky top bar; unify header icon button styles

- .ftn-site-navbar: sticky, z-index 8, solid --ftn-header-bar-bg, bottom border
- .header: transparent shell; mast keeps own fill/border
- .ftn-header-icon-btn: shared hit box, transparent idle, --ftn-header-bar-hover focus/hover
  (overrides site-extra theme-toggle hardcoded hover)
- Git link + theme toggle use ftn-header-icon-btn; pre-existing toggle gets class in JS
- Copy theme icon SVG rules under header for consistent styling

Made-with: Cursor

Author: AMDphreak

site/supplemental-ui/css/site-ftn-docs.css

@@ -69,13 +69,17 @@ pre,
 /* ——— Top bar: light strip in “light” theme, dark strip in dark theme ——— */
 .header.ftn-header {
   display: block;
-  background: var(--ftn-header-bar-bg);
   color: var(--ftn-header-bar-fg);
-  border-bottom: 1px solid var(--ftn-header-bar-border);
   box-sizing: border-box;
+  /* Mast has its own fill and bottom border; top row is .ftn-site-navbar (sticky + opaque). */
+  background: transparent;
 }
 
+/* Sticky first row: must be solid so page content does not show through on scroll. */
 .ftn-site-navbar {
+  position: sticky;
+  top: 0;
+  z-index: 8;
   width: 100%;
   min-height: 3.5rem;
   display: flex;
@@ -85,9 +89,9 @@ pre,
   box-sizing: border-box;
   padding: 0 0.6rem 0 0.5rem;
   column-gap: 0.75rem;
-  /* Let .header.ftn-header own the bar color (bundle .navbar can otherwise paint a dark strip) */
-  background: transparent !important;
+  background: var(--ftn-header-bar-bg) !important;
   color: inherit;
+  border-bottom: 1px solid var(--ftn-header-bar-border);
 }
 
 .header.ftn-header .ftn-topbar,
@@ -186,31 +190,36 @@ a.ftn-header-title:focus {
   opacity: 0.9;
 }
 
-/* Org GitHub profile — img/vcs/github.svg is white; light mode uses --ftn-header-github-icon-filter */
-.ftn-header-github,
-.navbar-item.ftn-header-github {
-  color: var(--ftn-header-bar-fg);
-  text-decoration: none;
-  display: flex;
+/* Header end controls (GitHub, theme) — one shape; beats site-extra .theme-toggle:hover colors. */
+.header.ftn-header .navbar .navbar-end .ftn-header-icon-btn {
+  min-width: var(--ftn-header-ctrl) !important;
+  min-height: var(--ftn-header-ctrl) !important;
+  width: var(--ftn-header-ctrl) !important;
+  height: var(--ftn-header-ctrl) !important;
+  padding: 0 !important;
+  display: inline-flex !important;
   align-items: center;
   justify-content: center;
-  width: var(--ftn-header-ctrl);
-  height: var(--ftn-header-ctrl);
-  min-width: var(--ftn-header-ctrl);
-  min-height: var(--ftn-header-ctrl);
-  border-radius: 0.2rem;
-  padding: 0;
   box-sizing: border-box;
   flex-shrink: 0;
+  border: none;
+  border-radius: 0.2rem;
+  text-decoration: none;
+  color: var(--ftn-header-bar-fg) !important;
+  background: transparent !important;
+  cursor: pointer;
 }
 
-.ftn-header-github:hover,
-.ftn-header-github:focus {
-  background: var(--ftn-header-bar-hover);
+.header.ftn-header .navbar .navbar-end .ftn-header-icon-btn:hover,
+.header.ftn-header .navbar .navbar-end .ftn-header-icon-btn:focus {
+  background: var(--ftn-header-bar-hover) !important;
   text-decoration: none;
+  outline: none;
 }
 
-.ftn-header-github-img {
+/* GitHub mark in light mode needs filter; theme icons use currentColor. */
+.ftn-header-github .ftn-header-github-img,
+.ftn-header-icon-btn.ftn-header-github .ftn-header-github-img {
   width: 24px;
   height: 24px;
   display: block;
@@ -220,24 +229,20 @@ a.ftn-header-title:focus {
   filter: var(--ftn-header-github-icon-filter, none);
 }
 
-/* Theme toggle: same hit box; stroke uses currentColor — dark on light bar, light on dark bar */
-.header.ftn-header .navbar .navbar-end .theme-toggle {
-  min-width: var(--ftn-header-ctrl) !important;
-  min-height: var(--ftn-header-ctrl) !important;
-  width: var(--ftn-header-ctrl) !important;
-  height: var(--ftn-header-ctrl) !important;
-  padding: 0 !important;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  color: var(--ftn-header-bar-fg) !important;
+.header.ftn-header .ftn-header-icon-btn .theme-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.header.ftn-header .navbar .navbar-end .theme-toggle:hover,
-.header.ftn-header .navbar .navbar-end .theme-toggle:focus {
-  background: var(--ftn-header-bar-hover) !important;
+.header.ftn-header .ftn-header-icon-btn .theme-icon path,
+.header.ftn-header .ftn-header-icon-btn .theme-icon circle {
+  fill: none;
 }
 
 @media screen and (min-width: 1024px) {

site/supplemental-ui/js/site-dark-mode.js

@@ -51,6 +51,7 @@
   function ensureToggleButton() {
     const existingToggle = document.getElementById("theme-toggle");
     if (existingToggle) {
+      existingToggle.classList.add("ftn-header-icon-btn");
       existingToggle.addEventListener("click", toggleTheme);
       updateToggleLabel();
       return;
@@ -61,7 +62,7 @@
 
     const button = document.createElement("button");
     button.id = "theme-toggle";
-    button.className = "navbar-item theme-toggle";
+    button.className = "navbar-item ftn-header-icon-btn theme-toggle";
     button.type = "button";
     button.addEventListener("click", toggleTheme);
 

site/supplemental-ui/partials/header-content.hbs

@@ -8,7 +8,7 @@
     </div>
     <div id="topbar-nav" class="navbar-menu ftn-topbar" role="navigation" aria-label="External links">
       <div class="navbar-end ftn-header-actions">
-        <a class="navbar-item ftn-header-github" href="{{{or (lookup site.keys 'github_profile_url') 'https://github.com/FoodTruckNerdz'}}}" rel="noopener" target="_blank" title="Food Truck Nerdz on GitHub" aria-label="Food Truck Nerdz on GitHub">
+        <a class="navbar-item ftn-header-icon-btn ftn-header-github" href="{{{or (lookup site.keys 'github_profile_url') 'https://github.com/FoodTruckNerdz'}}}" rel="noopener" target="_blank" title="Food Truck Nerdz on GitHub" aria-label="Food Truck Nerdz on GitHub">
           <img class="ftn-header-github-img" src="{{{uiRootPath}}}/img/vcs/github.svg" width="24" height="24" alt="" />
         </a>
       </div>