From 8e527b3ed931115fbb8ab3ff5365fcdc6bba9129 Mon Sep 17 00:00:00 2001 From: Gaurav agarwal Date: Wed, 8 Jul 2026 19:31:39 +0530 Subject: [PATCH] Add site-wide pricing announcement banner to docs. Announce new pricing plans with a branded, dismissible banner linking to bitquery.io/pricing. Co-authored-by: Cursor --- docusaurus.config.js | 9 ++ src/css/custom.css | 238 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 247 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index 1b72ab95..33d4d280 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -967,6 +967,15 @@ const config = { respectPrefersColorScheme: false, }, + announcementBar: { + id: "new_pricing_2026", + content: + 'NewPricing plans starting at $49/moExplore plans →', + backgroundColor: "#93254b", + textColor: "#ffffff", + isCloseable: true, + }, + // metadata: [ // { // name: 'baidu-site-verification', diff --git a/src/css/custom.css b/src/css/custom.css index 6f18d62f..3fe686a6 100644 --- a/src/css/custom.css +++ b/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);