Restored Banner, MPH Gusts and header & footer

assets/css/ui.css

@@ -42,6 +42,7 @@
   margin-bottom: 12px;
 }
 
+/* True crossfade — outgoing slide sits absolutely on top and fades out */
 .event-banner {
   display: flex;
   align-items: center;
@@ -49,17 +50,21 @@
   padding: 13px 18px;
   border-radius: 4px;
   position: relative;
+  z-index: 1;
   border-left: 4px solid rgba(255,255,255,0.25);
 }
-
-/* Single-element crossfade — content swaps during the transition gap */
-.event-banner.banner-exiting {
-  animation: banner-fade-out 0.4s ease both;
+.event-banner--outgoing {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
   pointer-events: none;
+  animation: banner-fade-out 0.45s ease both;
 }
-
-.event-banner.banner-entering {
-  animation: banner-fade-in 0.4s ease both;
+.event-banner-stage {
+  position: relative;
+  overflow: hidden;
 }
 .event-banner-emoji {
   font-size: 24px;