diff --git a/src/css/custom.css b/src/css/custom.css
index b40fda1aa..ef6eba758 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -688,21 +688,26 @@ td img {
   background-size: 24px 24px;
 }
 
-div[class^="announcementBar_"] {
-  --site-announcement-bar-stripe-color1: hsl(
-    var(--site-primary-hue-saturation) 88%
-  );
-  --site-announcement-bar-stripe-color2: hsl(
-    var(--site-primary-hue-saturation) 95%
-  );
-  background: repeating-linear-gradient(
-    35deg,
-    var(--site-announcement-bar-stripe-color1),
-    var(--site-announcement-bar-stripe-color1) 20px,
-    var(--site-announcement-bar-stripe-color2) 10px,
-    var(--site-announcement-bar-stripe-color2) 40px
-  );
-  font-weight: bold;
+div[class*="announcementBar_"],
+div[class*="announcementBarContent_"] {
+  font-weight: 600 !important;
+  font-size: 16px !important;
+  text-align: center !important;
+  padding: 10px 0 !important;
+  border-bottom: 1px solid #ff7a00 !important;
+  transition: background 0.3s ease-in-out;
+}
+
+/* LIGHT MODE — soft light orange */
+html[data-theme="light"] div[class*="announcementBar_"] {
+  background: #ffb566 !important; /* warm darker orange */
+  color: #000 !important;
+}
+
+/* DARK MODE — same warm orange */
+html[data-theme="dark"] div[class*="announcementBar_"] {
+  background: #ffb566 !important; /* warm darker orange */
+  color: #000 !important;
 }
 
 .list-disc > a {