From fbef3d180c64eb76c27d66ec5b6039c08ea30a48 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Sat, 11 Jul 2026 10:24:18 +0200
Subject: [PATCH] Give light theme proper green bamboo and a frosted language
 pill

- Bamboo layers get their own light-mode recipes (fresh greens, visible
  segment rings, sheen) instead of dark-theme gradients faded to 45%
- Language selector pill: frosted white glass, light dropdown/picker
  (was hard-coded dark glass in both themes)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 website/style.css | 75 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/website/style.css b/website/style.css
index 2481d37..1ddbaf9 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1023,13 +1023,57 @@ html.theme-light .bg-nature {
 
 html.theme-light .bg-canopy,
 html.theme-light .canopy-arc,
-html.theme-light #bamboo-far .bamboo-stalk,
-html.theme-light #bamboo-mid .bamboo-stalk,
-html.theme-light #bamboo-near .bamboo-stalk,
 html.theme-light .bg-grass {
     opacity: 0.45;
 }
 
+/* By day the stalks get their own fresh-green recipes — the dark-theme
+   gradients faded to 45% read as grey smears on the light backdrop and
+   stopped looking like bamboo at all. */
+html.theme-light #bamboo-far .bamboo-stalk {
+    opacity: 0.55;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 108px,
+            oklch(0.55 0.09 145 / 0.4) 108px, oklch(0.55 0.09 145 / 0.4) 112px),
+        linear-gradient(180deg, oklch(0.68 0.11 145 / 0.6), oklch(0.62 0.09 140 / 0.35));
+}
+
+html.theme-light #bamboo-far::before,
+html.theme-light #bamboo-far::after {
+    background: linear-gradient(180deg, oklch(0.7 0.1 145 / 0.5), oklch(0.64 0.08 140 / 0.25));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk {
+    opacity: 0.65;
+    background:
+        repeating-linear-gradient(180deg,
+            transparent 0, transparent 84px,
+            oklch(0.5 0.1 145 / 0.45) 84px, oklch(0.5 0.1 145 / 0.45) 87px),
+        linear-gradient(90deg, transparent 14%, oklch(0.85 0.08 130 / 0.35) 38%, transparent 68%),
+        linear-gradient(180deg, oklch(0.63 0.115 145 / 0.65), oklch(0.57 0.09 140 / 0.4));
+}
+
+html.theme-light #bamboo-mid .bamboo-stalk::before,
+html.theme-light #bamboo-mid .bamboo-stalk::after {
+    background: oklch(0.55 0.13 145 / 0.5);
+}
+
+html.theme-light #bamboo-near .bamboo-stalk {
+    opacity: 0.75;
+    background:
+        linear-gradient(90deg, transparent 12%, oklch(0.88 0.07 130 / 0.4) 36%, transparent 64%),
+        linear-gradient(180deg, oklch(0.59 0.12 145 / 0.75), oklch(0.52 0.1 140 / 0.5));
+}
+
+html.theme-light #bamboo-near .bamboo-node {
+    background: oklch(0.45 0.1 145 / 0.65);
+}
+
+html.theme-light #bamboo-near .bamboo-leaf {
+    background: oklch(0.55 0.13 145 / 0.6);
+}
+
 /* The centre trunks stay whisper-quiet by daylight too */
 html.theme-light #bamboo-far .far-6,
 html.theme-light #bamboo-far .far-7 {
@@ -3553,6 +3597,31 @@ html:not(.lang-de) [lang="de"] {
     font-size: 0.9rem;
 }
 
+/* Light theme: the pill was designed on the dark glass recipe — by day it
+   becomes frosted white so it sits in the same family as the buttons. */
+html.theme-light .lang-select-container {
+    background: rgba(255, 255, 255, 0.6);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+}
+
+html.theme-light .lang-select-container:hover {
+    background: rgba(255, 255, 255, 0.85);
+    border-color: oklch(0.56 0.13 150 / 0.35);
+    box-shadow: 0 0 15px oklch(0.56 0.13 150 / 0.12);
+}
+
+html.theme-light .lang-dropdown option {
+    background: #ffffff;
+    color: oklch(0.21 0.03 140);
+}
+
+@supports (appearance: base-select) {
+    html.theme-light .lang-dropdown::picker(select) {
+        background-color: #ffffff;
+        border-color: oklch(0.28 0.035 140 / 0.18);
+    }
+}
+
 /* --- Hamburger Menu --- */
 .hamburger {
     display: none;