1.5

Code refactoring
Profile fixes
Table fixes
Animation additions

assets/css/table.css

@@ -554,6 +554,71 @@
   color: #4a3420;
 }
 
+/* ── POPUP OPEN/CLOSE ANIMATION ─────────────────────────────────────────
+   The popup mounts/unmounts instantly in JS, so we animate it via a
+   scale + fade keyframe anchored to the arrow tip (transform-origin).
+   Above-the-target: origin is bottom-center. Below: top-center.        */
+@keyframes popup-open {
+  from { opacity: 0; transform: translateX(-50%) translateY(-100%) scaleY(0.6); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(-100%) scaleY(1);   }
+}
+@keyframes popup-open-below {
+  from { opacity: 0; transform: translateX(-50%) scaleY(0.6); }
+  to   { opacity: 1; transform: translateX(-50%) scaleY(1);   }
+}
+
+.col-info-popup:not(.col-info-popup--below) {
+  transform-origin: bottom center;
+  animation: popup-open 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
+}
+.col-info-popup.col-info-popup--below {
+  transform-origin: top center;
+  animation: popup-open-below 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
+}
+
+/* ── EVENT TAG POPUP — SLIDESHOW ────────────────────────────────────────
+   The stage holds the current slide. On transition, evTransition is set
+   to 'exiting' (fade out) then 'entering' (fade in) via the hook.      */
+@keyframes ev-fade-in  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ev-fade-out { from { opacity: 1; } to { opacity: 0; } }
+
+.ev-popup-stage {
+  transition: opacity 0.38s ease;
+}
+.ev-popup-entering {
+  animation: ev-fade-in  0.38s ease both;
+}
+.ev-popup-exiting {
+  animation: ev-fade-out 0.38s ease both;
+}
+
+/* Slideshow navigation dots */
+.ev-popup-dots {
+  display: flex;
+  gap: 5px;
+  margin-top: 8px;
+  justify-content: center;
+  align-items: center;
+}
+.ev-popup-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #c9b08a;
+  opacity: 0.4;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+  flex-shrink: 0;
+}
+.ev-popup-dot.active {
+  opacity: 1;
+  transform: scale(1.35);
+  background: #7a5530;
+}
+.ev-popup-dot:hover {
+  opacity: 0.75;
+}
+
 
 /* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
 

assets/css/ui.css

@@ -5,24 +5,62 @@
 /* ── 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).           */
 .event-banner-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.event-banner-wrap > * {
   overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .event-banner-wrap.visible {
-  max-height: 120px;
+  grid-template-rows: 1fr;
 }
+/* When closing, fade the content out before the row collapses */
+.event-banner-wrap:not(.visible) .event-banner-stage {
+  opacity: 0;
+}
+
+/* Slide crossfade: both banners rendered simultaneously, fading into each other */
+@keyframes banner-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes banner-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* Container that holds both slides during a crossfade */
+/* Also fades in/out with the wrap open/close */
+.event-banner-stage {
+  opacity: 1;
+  transition: opacity 0.35s ease;
+  position: relative;
+  margin-bottom: 12px;
+}
+
 .event-banner {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 13px 18px;
   border-radius: 4px;
-  margin-bottom: 12px;
   position: relative;
   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;
+  pointer-events: none;
+}
+
+.event-banner.banner-entering {
+  animation: banner-fade-in 0.4s ease both;
+}
 .event-banner-emoji {
   font-size: 24px;
   flex-shrink: 0;
@@ -85,12 +123,12 @@
   opacity: 0.75;
 }
 
-/* Cell tag — tiny event icon in the hour column */
+/* Cell tag — event icon in the hour column */
 .event-cell-tag {
-  font-size: 11px;
+  font-size: 15px;
   line-height: 1;
   vertical-align: middle;
-  margin-left: 3px;
+  margin-left: 1px;
   display: inline-block;
   cursor: pointer;
   border-radius: 3px;
@@ -236,10 +274,6 @@
 
 /* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */
 @media (max-width: 640px) {
-  .event-banner-wrap.visible {
-    max-height: 260px;           /* generous — banner can be tall with dates line */
-  }
-
   .event-banner-wrap {
     margin-top: 8px;             /* push banner clear of the fixed nav bar */
     margin-bottom: 18px;         /* breathing room between banner and header */