From a828955fc516d55b3924b94ad93331e4ddb15a4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Conejo?= <sebastien@buddyweb.fr>
Date: Tue, 22 Sep 2026 12:09:24 +0200
Subject: [PATCH] docs: announce the self-healing launch in the banner

The banner sent readers to a blog post about the new direction. It now
states what the product does and sends them to dashboard.manifest.build.

The green-to-yellow strip becomes the white-to-blue grained gradient of
the brand, reproduced in CSS rather than shipped as the 2.8 MB source
image. NEW LAUNCH loses its badge and reads as black bold text, and the
Get started button is black.
---
 docs.json |  2 +-
 style.css | 40 ++++++++++++++++------------------------
 2 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/docs.json b/docs.json
index 5b6fe43..43bc3ad 100644
--- a/docs.json
+++ b/docs.json
@@ -11,7 +11,7 @@
   "css": "/style.css",
   "js": "/scripts/no-tab-jump.js",
   "banner": {
-    "content": "**NEW LAUNCH** The self-healing layer for APIs. [Read more](https://manifest.build/blog/manifest-is-taking-a-new-direction/)",
+    "content": "**NEW LAUNCH:** Repair your API requests at runtime. [Get started](https://dashboard.manifest.build)",
     "dismissible": false
   },
   "colors": {
diff --git a/style.css b/style.css
index c9834da..5518d58 100644
--- a/style.css
+++ b/style.css
@@ -12,10 +12,15 @@
   scroll-margin-top: 9999px !important;
 }
 
-/* Announcement banner: website green-to-yellow gradient, lightened for
-   readability, dark NEW badge and dark Read more button */
+/* Announcement banner: white-to-blue grained gradient of the Manifest brand,
+   black NEW LAUNCH label and black Get started button. The grain is an inline SVG
+   fractal noise, so the strip stays a few hundred bytes at any width. */
 #banner {
-  background: linear-gradient(90deg, #4fc487 0%, #a9cf6b 55%, #ecd05e 100%) !important;
+  background-color: #f2f1ed !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E"),
+    linear-gradient(95deg, #f2f1ed 0%, #efeeeb 24%, #dcdeee 50%, #a6aae7 78%, #5b61ea 100%) !important;
+  background-size: 160px 160px, 100% 100% !important;
+  background-repeat: repeat, no-repeat !important;
   border-bottom: none !important;
 }
 /* The maple theme offsets the navbar by a hardcoded 40px, so the banner must
@@ -31,28 +36,23 @@
 }
 #banner,
 #banner * {
-  color: #14261b !important;
+  color: #0b0b0c !important;
   font-weight: 500;
 }
+/* The banner content is laid out as flex items, so the space typed after the
+   label in docs.json collapses; the margin restores it */
 #banner strong,
 #banner [data-streamdown="strong"] {
-  display: inline-block;
-  padding: 2px 8px;
-  margin-right: 6px;
-  border-radius: 4px;
-  background: #14261b;
-  color: #f9f8f5 !important;
-  font-size: 12px;
+  margin-right: 4px;
   font-weight: 700;
-  letter-spacing: 0.04em;
-  vertical-align: middle;
+  color: #0b0b0c !important;
 }
 #banner a {
   display: inline-block;
   margin-left: 10px;
   padding: 4px 12px;
   border-radius: 6px;
-  background: #14261b !important;
+  background: #0b0b0c !important;
   color: #f9f8f5 !important;
   font-weight: 600 !important;
   text-decoration: none !important;
@@ -62,17 +62,13 @@
 #banner a:hover {
   opacity: 0.9;
 }
-#banner strong,
-#banner strong *,
-#banner [data-streamdown="strong"],
-#banner [data-streamdown="strong"] *,
 #banner a,
 #banner a * {
   color: #f9f8f5 !important;
 }
 #banner button,
 #banner svg {
-  color: #14261b !important;
+  color: #0b0b0c !important;
 }
 /* Mintlify forces white text via a Tailwind utility marked !important inside
    the "utilities" cascade layer; an un-layered !important loses to it, so the
@@ -80,12 +76,8 @@
 @layer utilities {
   #banner,
   #banner * {
-    color: #14261b !important;
+    color: #0b0b0c !important;
   }
-  #banner strong,
-  #banner strong *,
-  #banner [data-streamdown="strong"],
-  #banner [data-streamdown="strong"] *,
   #banner a,
   #banner a * {
     color: #f9f8f5 !important;