Sticky header, dim overlay on card navigation, fix sticky stacking

Make header sticky so search button stays visible on scroll. Section
headers stick below it using a JS-measured --header-height variable.
Add dim overlay behind highlighted cards for better focus effect.

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

server/src/wled_controller/static/js/app.js

@@ -427,6 +427,18 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Show content now that translations are loaded and tabs are set
     document.body.style.visibility = 'visible';
 
+    // Set CSS variable for sticky header height so section headers stack below it
+    const headerEl = document.querySelector('header');
+    if (headerEl) {
+        const updateHeaderHeight = () => {
+            document.documentElement.style.setProperty(
+                '--header-height', headerEl.offsetHeight + 'px'
+            );
+        };
+        updateHeaderHeight();
+        window.addEventListener('resize', updateHeaderHeight);
+    }
+
     // Initialize command palette
     initCommandPalette();
 

server/src/wled_controller/static/js/core/navigation.js

@@ -46,11 +46,24 @@ export function navigateToCard(tab, subTab, sectionKey, cardAttr, cardValue) {
             if (!card) return;
             card.scrollIntoView({ behavior: 'smooth', block: 'center' });
             card.classList.add('card-highlight');
+            _showDimOverlay(2000);
             setTimeout(() => card.classList.remove('card-highlight'), 2000);
         });
     });
 }
 
+function _showDimOverlay(duration) {
+    let overlay = document.getElementById('nav-dim-overlay');
+    if (!overlay) {
+        overlay = document.createElement('div');
+        overlay.id = 'nav-dim-overlay';
+        overlay.className = 'nav-dim-overlay';
+        document.body.appendChild(overlay);
+    }
+    overlay.classList.add('active');
+    setTimeout(() => overlay.classList.remove('active'), duration);
+}
+
 function _waitForCard(cardAttr, cardValue, timeout) {
     return new Promise(resolve => {
         const card = document.querySelector(`[${cardAttr}="${cardValue}"]`);