1.9.3

Updated scope temperature arc to gradient
Fix banner scaling
Add Pulldown to scope

assets/js/hooks/useAppState.js

@@ -485,36 +485,63 @@ export function useAppState() {
     if (bannerIndex >= activeEvents.length) setBannerIndex(0);
   }, [activeEvents.length]);
 
-  // ── BANNER HEIGHT → shell padding-top ────────────────────────────────
-  // Floats the banner over the page. Padding only grows while open so
-  // shorter slides never cause the page to jump up. Resets on close.
+  // ── BANNER POSITION + SHELL PADDING ───────────────────────────────────
+  // The banner is position:absolute so it floats over content. We (1) pin its
+  // top to the bottom edge of the site-nav so it sits flush below the nav on
+  // every screen size, and (2) add matching padding-top to the shell so the
+  // page content sits just below the banner.
+  // On close: keep the banner pinned to the nav and animate the padding back
+  // to 0 so content slides up smoothly as the banner collapses.
   const bannerMaxHeightRef = useRef(0);
 
   useEffect(() => {
     const shell = document.querySelector('.utci-shell');
-    if (!shell) return;
+    const wrap  = document.querySelector('.event-banner-wrap');
+    if (!shell || !wrap) return;
+
+    // The site-nav's outer height is the banner's resting top edge. The banner
+    // lives inside the shell, so translate that into the shell's coordinate
+    // space by subtracting the shell's own offset from the page top.
+    const bannerTop = () => {
+      const navEl = document.getElementById('site-nav');
+      const navOuterHeight = navEl ? navEl.offsetHeight : 0;
+      return navOuterHeight - shell.offsetTop;
+    };
 
     if (!bannerVisible) {
-      bannerMaxHeightRef.current = 0;
-      shell.style.paddingTop = '';
-      return;
+      // Keep the collapsing banner pinned to the nav's bottom edge, and animate
+      // padding back to zero matching the banner collapse duration.
+      wrap.style.top = bannerTop() + 'px';
+      shell.style.transition = 'padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1)';
+      shell.style.paddingTop = '0px';
+      const tid = setTimeout(() => {
+        shell.style.transition = '';
+        shell.style.paddingTop = '';
+        bannerMaxHeightRef.current = 0;
+      }, 500);
+      return () => clearTimeout(tid);
     }
 
-    const applyPadding = () => {
-      const wrap = document.querySelector('.event-banner-wrap');
-      if (!wrap) return;
-      const h = wrap.getBoundingClientRect().height;
-      if (h > bannerMaxHeightRef.current) {
+    const applyPadding = (allowShrink = false) => {
+      const top = bannerTop();
+      wrap.style.top = top + 'px';
+      const h = top + wrap.getBoundingClientRect().height;
+      if (allowShrink || h > bannerMaxHeightRef.current) {
         bannerMaxHeightRef.current = h;
+        shell.style.transition = '';   // no transition while open/resizing
         shell.style.paddingTop = h + 'px';
       }
     };
 
+    // Pin the banner immediately so it appears flush under the nav, then size
+    // the content padding once the open animation settles.
+    wrap.style.top = bannerTop() + 'px';
+    const onResize = () => applyPadding(true);
     const tid = setTimeout(applyPadding, 460);
-    window.addEventListener('resize', applyPadding);
+    window.addEventListener('resize', onResize);
     return () => {
       clearTimeout(tid);
-      window.removeEventListener('resize', applyPadding);
+      window.removeEventListener('resize', onResize);
     };
   }, [bannerVisible, bannerIndex, activeEvents.length]);