From 1cf36839cb83c41f850d371addf3fb11ad5d5f48 Mon Sep 17 00:00:00 2001
From: another-simple-pixel <anton.m.egorov@gmail.com>
Date: Sat, 18 Apr 2026 18:05:23 -0700
Subject: [PATCH] website: oklch gradients with two-layer cyan-yellow
 transition

Gradient interpolation moved to oklch color space for smoother blue-cyan
transitions. The cyan-to-yellow transition uses two stacked gradients
(sRGB yellow overlay + oklch blue-cyan base) to avoid the green hue shift
that oklch produces when interpolating between distant hues.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 website/src/css/design3.css | 34 ++++++++++++----------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index 5e5be66c2f..fef38b63b7 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -136,11 +136,9 @@
 }
 
 :root {
-    --bg-grad: linear-gradient(10deg,
-            #e8f3ff 0%,
-            #c0e2ff 40%,
-            #e9ffff 80%,
-            #ffefd6 90%);
+    --bg-grad:
+            linear-gradient(10deg, transparent 83%, #ffefd6 90%),
+            linear-gradient(in oklch 10deg, #e8f3ff 0%, #c0e2ff 40%, #e9ffff 82%, #e0fff0 92%);
 
     /* Compute cover drawn size and inner safe frame (60% of full image on each axis) */
     /* --cover-bg-w: calc(min((3200 / 1920) * 100vw, (3200 / 1080) * 100vh));
@@ -163,21 +161,16 @@
 }
 
 :root.dark {
-    --bg-grad: linear-gradient(9.2deg,
-            #000000 0%,
-            #131d49 52%,
-            #3f5598 65%,
-            #c3faff 85%,
-            #fff6e0 90%);
+    --bg-grad:
+            linear-gradient(9.2deg, transparent 87%, #fff6e0 92%),
+            linear-gradient(in oklch 9.2deg, #000000 0%, #131d49 52%, #3f5598 65%, #c3faff 85%, #e0fff0 92%);
 }
 
 @media screen and (max-width: 959px) {
     :root {
-        --bg-grad: linear-gradient(30deg,
-                #e8f3ff 0%,
-                #c0e2ff 40%,
-                #e9ffff 80%,
-                #ffefd6 90%);
+        --bg-grad:
+                linear-gradient(30deg, transparent 83%, #ffefd6 90%),
+                linear-gradient(in oklch 30deg, #e8f3ff 0%, #c0e2ff 40%, #e9ffff 82%, #e0fff0 92%);
 
         /* Cover background for mobile */
         --cover-bg-w: calc(min((3200 / 620) * 100vw, (3200 / 1080) * 100vh));
@@ -191,12 +184,9 @@
     }
 
     :root.dark {
-        --bg-grad: linear-gradient(30deg,
-                #000000 0%,
-                #131d49 52%,
-                #3f5598 65%,
-                #c3faff 85%,
-                #fff6e0 90%);
+        --bg-grad:
+                linear-gradient(30deg, transparent 87%, #fff6e0 92%),
+                linear-gradient(in oklch 30deg, #000000 0%, #131d49 52%, #3f5598 65%, #c3faff 85%, #e0fff0 92%);
     }
 }