Add site-wide pricing announcement banner

docusaurus.config.js

@@ -967,6 +967,15 @@ const config = {
         respectPrefersColorScheme: false,
       },
 
+      announcementBar: {
+        id: "new_pricing_2026",
+        content:
+          '<span class="announcementBar__inner"><span class="announcementBar__badge">New</span><span class="announcementBar__text">Pricing plans starting at <strong>$49/mo</strong></span><a class="announcementBar__cta" href="https://bitquery.io/pricing#plans-anchor" target="_blank" rel="noopener noreferrer">Explore plans →</a></span>',
+        backgroundColor: "#93254b",
+        textColor: "#ffffff",
+        isCloseable: true,
+      },
+
       // metadata: [
       //   {
       //     name: 'baidu-site-verification',

src/css/custom.css

@@ -190,6 +190,244 @@ html[data-theme="dark"] .footer.footer--dark {
   border-top: 1px solid var(--ifm-color-emphasis-300);
 }
 
+/* Site-wide announcement bar */
+:root {
+  --docusaurus-announcement-bar-height: auto;
+}
+
+@media (min-width: 997px) {
+  :root {
+    --docusaurus-announcement-bar-height: auto;
+  }
+}
+
+.theme-announcement-bar,
+div[class*="announcementBar"] {
+  --docusaurus-announcement-bar-height: auto !important;
+  height: auto !important;
+  min-height: unset !important;
+  background: linear-gradient(
+    90deg,
+    #621832 0%,
+    #93254b 40%,
+    #be3178 75%,
+    #af3e76 100%
+  ) !important;
+  color: #ffffff;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1.4;
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: 0 4px 20px rgba(147, 37, 75, 0.35);
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-announcement-bar::before,
+div[class*="announcementBar"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 35%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 65%
+  );
+  animation: announcementBar-shine 5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes announcementBar-shine {
+  0%,
+  100% {
+    transform: translateX(-120%);
+  }
+
+  50% {
+    transform: translateX(120%);
+  }
+}
+
+.theme-announcement-bar [class*="announcementBarContent"],
+div[class*="announcementBar"] [class*="announcementBarContent"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  max-width: none;
+  padding: 0 0.75rem;
+  text-align: center;
+}
+
+.theme-announcement-bar [class*="announcementBarPlaceholder"],
+.theme-announcement-bar [class*="announcementBarClose"],
+div[class*="announcementBar"] [class*="announcementBarPlaceholder"],
+div[class*="announcementBar"] [class*="announcementBarClose"] {
+  flex: 0 0 2.75rem;
+  align-self: center;
+}
+
+.announcementBar__inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1rem;
+  position: relative;
+  z-index: 1;
+}
+
+.announcementBar__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.625rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  animation: announcementBar-pulse 2.5s ease-in-out infinite;
+}
+
+@keyframes announcementBar-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(174, 224, 229, 0.35);
+  }
+
+  50% {
+    box-shadow: 0 0 0 5px rgba(174, 224, 229, 0);
+  }
+}
+
+.announcementBar__text strong {
+  color: var(--bq-accent-cyan);
+  font-weight: 700;
+}
+
+.announcementBar__cta {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.3rem 0.85rem;
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--bq-cta-primary) !important;
+  font-weight: 700;
+  font-size: 0.8125rem;
+  line-height: 1.25;
+  text-decoration: none !important;
+  white-space: nowrap;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease;
+  box-shadow: 0 2px 10px rgba(6, 9, 13, 0.2);
+}
+
+.announcementBar__cta:hover {
+  background: var(--bq-accent-cyan);
+  color: #06090d !important;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 14px rgba(6, 9, 13, 0.25);
+}
+
+.theme-announcement-bar [class*="announcementBarClose"],
+div[class*="announcementBar"] [class*="announcementBarClose"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  z-index: 1;
+}
+
+.theme-announcement-bar [class*="announcementBarClose"]:hover,
+div[class*="announcementBar"] [class*="announcementBarClose"]:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.12);
+}
+
+@media (max-width: 996px) {
+  .theme-announcement-bar,
+  div[class*="announcementBar"] {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+
+  .theme-announcement-bar [class*="announcementBarPlaceholder"],
+  div[class*="announcementBar"] [class*="announcementBarPlaceholder"] {
+    display: none;
+  }
+
+  .theme-announcement-bar [class*="announcementBarContent"],
+  div[class*="announcementBar"] [class*="announcementBarContent"] {
+    flex: 1 1 100%;
+    width: 100%;
+    padding: 0 1.75rem 0 0.75rem;
+    gap: 0;
+    justify-content: flex-start;
+  }
+
+  .theme-announcement-bar [class*="announcementBarClose"],
+  div[class*="announcementBar"] [class*="announcementBarClose"] {
+    position: absolute;
+    top: 50%;
+    right: 0.25rem;
+    transform: translateY(-50%);
+    flex: none;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+  }
+
+  .announcementBar__inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    gap: 0.35rem 0.5rem;
+  }
+
+  .announcementBar__badge {
+    flex: 0 0 auto;
+    padding: 0.15rem 0.5rem;
+    font-size: 0.625rem;
+    animation: none;
+  }
+
+  .announcementBar__text {
+    flex: 1 1 7rem;
+    min-width: 0;
+    text-align: left;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+  }
+
+  .announcementBar__cta {
+    flex: 0 0 auto;
+    margin-left: auto;
+    padding: 0.2rem 0.55rem;
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 997px) {
+  .theme-announcement-bar,
+  div[class*="announcementBar"] {
+    height: auto !important;
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+}
+
 /* Navbar */
 .navbar {
   border-bottom: 1px solid var(--ifm-color-emphasis-200);