better rainbow

Author: Carreau

public/build-data-pr.json

@@ -1,4 +1,4 @@
 {
   "count": null,
-  "timestamp": 1780383250034
+  "timestamp": 1780383718585
 }

public/build-data-pypi.json

@@ -1,5 +1,5 @@
 {
   "version": "9.14.0",
   "releaseDate": "May 29, 2026",
-  "timestamp": 1780383250035
+  "timestamp": 1780383718586
 }

src/components/SeasonalBanner.tsx

@@ -13,7 +13,6 @@ const C = {
   fn: '#79c0ff', // function name blue
   str: '#ffa657', // string literal amber
   punc: '#8b949e', // parens / punctuation slate
-  message: '#f0f6fc', // output text, near-white
 };
 
 /** Minimal tokenizer to syntax-highlight the faux command, e.g. celebrate('pride'). */
@@ -128,9 +127,9 @@ export default function SeasonalBanner() {
               Out[{month}]:
             </span>
 
-            {/* the message itself — the cell's output */}
-            <span className="sb-fade sb-d3 font-medium" style={{ color: C.message }}>
-              {config.banner}
+            {/* the message itself — the cell's output, rainbow-clipped text */}
+            <span className="sb-fade sb-d3 font-medium">
+              <span className="sb-msg">{config.banner}</span>
               <span className="sb-cursor ml-1.5" aria-hidden="true" />
             </span>
           </div>

src/styles/seasonal-banner.css

@@ -45,6 +45,24 @@
   height: 3px;
 }
 
+/* The banner message as bright rainbow-clipped text (readable on the dark
+   terminal surface). The flag emoji renders in full color regardless. */
+.sb-msg {
+  background-image: linear-gradient(
+    90deg,
+    #fb7185,
+    #fdba74,
+    #fde047,
+    #86efac,
+    #93c5fd,
+    #c4b5fd
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
 /* Blinking terminal cursor. */
 .sb-cursor {
   display: inline-block;

src/styles/themes/rainbow.css

@@ -28,10 +28,37 @@
     #732982 83.33%, #732982 100%) !important;
 }
 
-/* Note: headings (h2/h3) use the base `.gradient-text`, which is driven by the
-   softened, readable theme vars above. We intentionally do NOT clip the full
-   6-color flag into heading text — its yellow band is unreadable on white
-   sections. The flag stays in the decorative section backgrounds below. */
+/* Headings (h2/h3 use .gradient-text): a full-spectrum rainbow so the pride
+   feel comes through, but with deepened tones — and a readable gold in place of
+   pure yellow — so every glyph stays AA (>=4.5:1) on white sections. */
+[data-color-theme="rainbow"] .gradient-text {
+  background-image: linear-gradient(
+    to right,
+    #e11d48,
+    #c2410c,
+    #a16207,
+    #15803d,
+    #1d4ed8,
+    #7c3aed
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* Dark mode: brighter rainbow tones, readable on the dark surface. */
+.dark[data-color-theme="rainbow"] .gradient-text {
+  background-image: linear-gradient(
+    to right,
+    #fb7185,
+    #fdba74,
+    #fde047,
+    #86efac,
+    #93c5fd,
+    #c4b5fd
+  );
+}
 
 /* Add backdrop blur to gradient sections */
 [data-color-theme="rainbow"] section.gradient-hero .max-w-7xl.py-20,