Rotate announcement bar between report and book messages

SDB-Ryan · claude · SDB-Ryan · commit cc385b47d434 · 2026-07-23T15:08:40.000-04:00
Co-Authored-By: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/css/style.css b/css/style.css
@@ -75,6 +75,29 @@ body {
     color: #fff;
 }
 
+/* Rotating announcement bar — messages stack in the same spot and cross-fade */
+.announcement-bar.rotating .container {
+    display: grid;
+}
+
+.announcement-bar.rotating a {
+    grid-area: 1 / 1;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.6s ease;
+}
+
+.announcement-bar.rotating a.announcement-active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .announcement-bar.rotating a {
+        transition: none;
+    }
+}
+
 .site-header {
     position: fixed;
     top: 2.25rem;
diff --git a/index.html b/index.html
@@ -28,11 +28,14 @@
 </head>
 <body>
 
-    <div class="announcement-bar">
+    <div class="announcement-bar rotating">
         <div class="container">
-            <a href="/reports/gartner-bi-analysis-2026/">
+            <a href="/reports/gartner-bi-analysis-2026/" class="announcement-active">
                 <strong>New free report</strong> &mdash; Gartner's 2026 BI rankings, decoded. Read it now &rarr;
             </a>
+            <a href="https://superdatablog.substack.com" target="_blank" rel="noopener">
+                <strong>AI in BI</strong> &mdash; the new book from Wiley is coming soon. Subscribe for updates &rarr;
+            </a>
         </div>
     </div>
 
diff --git a/js/main.js b/js/main.js
@@ -14,3 +14,14 @@ navLinks.querySelectorAll('a').forEach(link => {
         navLinks.classList.remove('active');
     });
 });
+
+// Rotating announcement bar
+const announcements = document.querySelectorAll('.announcement-bar.rotating a');
+if (announcements.length > 1) {
+    let current = 0;
+    setInterval(() => {
+        announcements[current].classList.remove('announcement-active');
+        current = (current + 1) % announcements.length;
+        announcements[current].classList.add('announcement-active');
+    }, 6000);
+}
