Merge pull request #3063 from XRPLF/banner-tweak

Author: AKCodez

@theme/components/Navbar/Navbar.tsx

@@ -11,7 +11,7 @@ import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 const alertBanner = {
   show: true,
-  message: "XRP LEDGER APEX 2025",
+  message: "APEX 2025",
   button: "GET TICKETS",
   link: "https://www.xrpledgerapex.com/?utm_source=xrplwebsite&utm_medium=direct&utm_campaign=xrpl-event-ho-xrplapex-glb-2025-q1_xrplwebsite_ari_arp_bf_rsvp&utm_content=cta_btn_english_pencilbanner",
   date: "JUNE 10-12",
@@ -43,7 +43,7 @@ export function AlertBanner({ message, date, button, link, show }) {
         ref={bannerRef}
         className="top-banner fixed-top web-banner"
         rel="noopener noreferrer"
-        aria-label="Get Tickets for XRP Ledger Apex 2025 Event"
+        aria-label="Get Tickets for the APEX 2025 Event"
       >
         <div className="banner-event-details">
           <div className="event-info">{translate(message)}</div>

redocly.yaml

@@ -54,6 +54,8 @@ links:
     rel: stylesheet
   - href: https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700&display=swap
     rel: stylesheet
+  - href: https://fonts.googleapis.com/css?family=Space+Grotesk:300,400,600,700&display=swap
+    rel: stylesheet
   - href: ./static/css/devportal2024-v1.css
     rel: stylesheet
   - href: ./static/css/font-awesome.min.css

static/css/devportal2024-v1.css

@@ -3,9 +3,9 @@
   display: flex;
   justify-content: space-between;
   height: $banner-height;
-  background: #D919FF !important;
+  background: #32E685 !important;
   padding: 7px 35px;
-  font-family: "Work Sans";
+  font-family: "Space Grotesk";
   z-index: 9999;
   cursor: pointer;
 
@@ -17,9 +17,9 @@
       transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
     }
   }
-  color: $white !important;
+  color: $black !important;
   text-align: center;
-  font-family: "Work Sans";
+  font-family: "Space Grotesk";
   font-size: 26px; // Further scaled down from 28px
   font-style: normal;
   font-weight: 600;
@@ -32,7 +32,7 @@
     left: 0;
     width: 100%; // Full width so that we can scale it
     height: 100%;
-    background-color: #7919FF;
+    background-color: #E0E500;
     z-index: 0;
     transform: scaleX(0);       // Start scaled down to 0
     transform-origin: left;     // Scale from the left edge