Event banner also a popup/flyout

assets/css/ui.css

@@ -5,27 +5,26 @@
 /* ── EVENT BANNER ───────────────────────────────────────────────────── */
 /* Animated slide-down banner for cosmic/weather/promo events.           */
 
-/* Open/close: grow vertically using grid-template-rows (silky smooth,
-   no max-height hack — it animates from 0fr → 1fr and back).           */
+/* Flyout: a fixed panel pinned to the very top of the screen that slides
+   down over everything (including the nav) and retracts upward on close.   */
 .event-banner-wrap {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  z-index: 10;
-}
-.event-banner-wrap > * {
-  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  padding: 0 14px;
+  transform: translateY(-130%);
+  transition: transform 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);
+  /* The wrap is full-width but the panel is centred — keep the wrap itself
+     click-through so its transparent sides never block the nav beneath it.
+     Only the visible banner panel (.event-banner) captures clicks. */
+  pointer-events: none;
 }
 .event-banner-wrap.visible {
-  grid-template-rows: 1fr;
-}
-/* When closing, fade the content out before the row collapses */
-.event-banner-wrap:not(.visible) .event-banner-stage {
-  opacity: 0;
+  transform: translateY(0);
 }
 
 /* Slide crossfade: both banners rendered simultaneously, fading into each other */
@@ -38,13 +37,13 @@
   to   { opacity: 0; }
 }
 
-/* Container that holds both slides during a crossfade */
-/* Also fades in/out with the wrap open/close */
+/* Container that holds both slides during a crossfade. Constrains the
+   flyout to a centred panel width and clips the absolute outgoing slide. */
 .event-banner-stage {
-  opacity: 1;
-  transition: opacity 0.35s ease;
   position: relative;
-  margin-bottom: 12px;
+  overflow: hidden;
+  width: 100%;
+  max-width: 720px;
 }
 
 /* True crossfade — outgoing slide sits absolutely on top and fades out */
@@ -52,11 +51,14 @@
   display: flex;
   align-items: center;
   gap: 14px;
-  padding: 13px 18px;
-  border-radius: 4px;
+  padding: 14px 18px;
+  border-radius: 0 0 12px 12px;     /* rounded bottom — it hangs from the top edge */
   position: relative;
   z-index: 1;
   border-left: 4px solid rgba(255,255,255,0.25);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+  cursor: pointer;                  /* whole banner is click-to-close */
+  pointer-events: auto;             /* re-enable clicks on the panel itself */
 }
 .event-banner--outgoing {
   position: absolute;
@@ -67,10 +69,6 @@
   pointer-events: none;
   animation: banner-fade-out 0.45s ease both;
 }
-.event-banner-stage {
-  position: relative;
-  overflow: hidden;
-}
 .event-banner-emoji {
   font-size: 24px;
   flex-shrink: 0;
@@ -285,8 +283,7 @@
 /* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */
 @media (max-width: 640px) {
   .event-banner-wrap {
-    margin-top: 0;               /* JS pins the banner's top to the nav's bottom edge */
-    margin-bottom: 0;
+    padding: 0;                  /* full-bleed flyout on small screens */
   }
 
   .event-banner {
@@ -294,7 +291,7 @@
     gap: 10px;
     padding: 18px 12px 14px 14px;
     margin-bottom: 0;
-    border-radius: 4px;
+    border-radius: 0 0 12px 12px;
   }
 
   .event-banner-emoji {

assets/js/app.js

@@ -382,10 +382,11 @@ export function UTCIForecast() {
           <span></span><span></span><span></span>
         </button>
       </nav>
-      <main class="utci-shell">
 
-        
-        <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
+      <!-- Event flyout — a direct child of .utci-app (sibling of the nav) so its
+           position:fixed / z-index can sit above the nav. Keeping it inside
+           .utci-shell would trap it in the shell's stacking context. -->
+      <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
           ${activeEvents.length > 0 && (() => {
             const renderSlide = (idx, isOutgoing) => {
               const ev = activeEvents[idx] || activeEvents[0];
@@ -406,6 +407,9 @@ export function UTCIForecast() {
               return html`
                 <div class=${isOutgoing ? 'event-banner event-banner--outgoing' : 'event-banner'}
                   style=${{ background: ev.color, color: ev.textColor }}
+                  onClick=${isOutgoing ? undefined : () => dismissBanner(ev.id)}
+                  role=${isOutgoing ? undefined : 'button'}
+                  title=${isOutgoing ? undefined : 'Click to dismiss'}
                 >
                   <span class="event-banner-emoji">${ev.emoji}</span>
                   <div class="event-banner-body">
@@ -422,7 +426,7 @@ export function UTCIForecast() {
                           <span
                             key=${i}
                             class=${`event-banner-dot${i === bannerIndex ? ' active' : ''}`}
-                            onClick=${() => bannerSlideTo(i)}
+                            onClick=${(e) => { e.stopPropagation(); bannerSlideTo(i); }}
                             style=${{ background: ev.textColor }}
                           />
                         `)}
@@ -432,7 +436,7 @@ export function UTCIForecast() {
                   ${!isOutgoing && html`<button
                     class="event-banner-dismiss"
                     style=${{ color: ev.textColor }}
-                    onClick=${() => dismissBanner(ev.id)}
+                    onClick=${(e) => { e.stopPropagation(); dismissBanner(ev.id); }}
                     aria-label="Dismiss"
                     title="Dismiss this event"
                   >✕</button>`}
@@ -448,6 +452,7 @@ export function UTCIForecast() {
           })()}
         </div>
 
+      <main class="utci-shell">
         <div class="utci-header">
           <div class="header-left">
             <h1 class="utci-title">

assets/js/hooks/useAppState.js

@@ -557,65 +557,10 @@ export function useAppState() {
     if (bannerIndex >= activeEvents.length) setBannerIndex(0);
   }, [activeEvents.length]);
 
-  // ── 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');
-    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) {
-      // 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 = (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', onResize);
-    return () => {
-      clearTimeout(tid);
-      window.removeEventListener('resize', onResize);
-    };
-  }, [bannerVisible, bannerIndex, activeEvents.length]);
+  // The banner is now a position:fixed flyout pinned to the very top of the
+  // screen (see .event-banner-wrap in ui.css). It floats over all content and
+  // slides in/out via a transform, so no JS nav-pinning or shell padding is
+  // needed.
 
   // ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
   return {

data/tracking.json

@@ -18,7 +18,7 @@
         }
     },
     "2026-06-11": {
-        "visits": 15,
+        "visits": 27,
         "profiles": []
     }
 }

index.html

@@ -70,10 +70,10 @@
 
     <link rel="preconnect" href="https://api.open-meteo.com" crossorigin />
     <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    <link rel="stylesheet" href="./assets/sunscope.css?v=15i">
+    <link rel="stylesheet" href="./assets/sunscope.css?v=15k">
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./assets/js/main.js?v=15e"></script>
+    <script type="module" src="./assets/js/main.js?v=15g"></script>
   </body>
 </html>