From bb732420d4fb5501b2b20d619d74dc737daffc52 Mon Sep 17 00:00:00 2001
From: Nasir Anthony Montalvo <nasiranthonymontalvo@gmail.com>
Date: Sun, 6 Sep 2026 14:34:32 -0500
Subject: [PATCH] adding announcement bar for soakie's event

---
 _includes/announcement-bar.html | 87 +++++++++++++++++++++++++++++++++
 _layouts/default.html           |  1 +
 2 files changed, 88 insertions(+)
 create mode 100644 _includes/announcement-bar.html

diff --git a/_includes/announcement-bar.html b/_includes/announcement-bar.html
new file mode 100644
index 0000000..64aea36
--- /dev/null
+++ b/_includes/announcement-bar.html
@@ -0,0 +1,87 @@
+{% assign announcement_text = "Soakie's is being honored with a historic marker in Downtown Kansas City!" %}
+{% assign announcement_url = "https://www.eventbrite.com/e/soakies-historic-marker-rsvp-for-the-celebration-by-bqkc-tickets-1999807323538?aff=oddtdtcreator" %}
+{% assign announcement_label = "Learn more & RSVP for The Celebration on 9/26" %}
+
+<div id="announcement-bar" style="display: none;">
+  <div id="announcement-inner">
+    <span id="announcement-text">
+      {{ announcement_text }}
+      <a href="{{ announcement_url }}" target="_blank">{{ announcement_label }}</a>
+    </span>
+    <button id="announcement-close" aria-label="Dismiss announcement">✕</button>
+  </div>
+</div>
+
+<style>
+#announcement-bar {
+  background-color: var(--text-white);
+  color: var(--bg-black);
+  width: 100%;
+  z-index: 10000;
+  border-bottom: 1px solid var(--border-color-subtle);
+}
+
+#announcement-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-lg);
+  max-width: 900px;
+  margin: 0 auto;
+  position: relative;
+}
+
+#announcement-text {
+  font-size: var(--text-sm);
+  letter-spacing: var(--letter-spacing-normal);
+  text-align: center;
+}
+
+#announcement-text a {
+  color: var(--bg-black);
+  font-weight: var(--font-semibold);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+#announcement-text a:hover {
+  opacity: 0.7;
+}
+
+#announcement-close {
+  position: absolute;
+  right: 0;
+  background: none;
+  border: none;
+  color: var(--bg-black);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  padding: var(--space-xs) var(--space-sm);
+  opacity: 0.6;
+  line-height: 1;
+}
+
+#announcement-close:hover {
+  opacity: 1;
+}
+</style>
+
+<script>
+(function() {
+  var bar = document.getElementById("announcement-bar");
+  var closeBtn = document.getElementById("announcement-close");
+  var storageKey = "announcement-dismissed-v1";
+
+  // Show bar if not dismissed
+  if (!localStorage.getItem(storageKey)) {
+    bar.style.display = "block";
+  }
+
+  // Dismiss on X click
+  closeBtn.addEventListener("click", function() {
+    bar.style.display = "none";
+    localStorage.setItem(storageKey, "true");
+  });
+})();
+</script>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index d84617d..c4c42ce 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,6 +4,7 @@
     {% include head/head.html %}
   </head>
   <body class="d-flex flex-column h-100">
+    {% include announcement-bar.html %}
     <div id="skip-to-content"><a href="#maincontent">Skip to main content</a></div>
     {% include collection-banner.html %}
     {% include collection-nav.html %}