From ef1719c84e086de02f3bd6d7e0f608158755024b Mon Sep 17 00:00:00 2001
From: Jonathon Wright <jonny.wright225@gmail.com>
Date: Sat, 27 Jun 2026 21:19:13 +1000
Subject: [PATCH] ui: keep the board visible in light mode + bust diagram cache

Light mode: revert the heavy white-out scrim back to a moderate wash so the
board stays visible, and earn legibility with a soft light text-halo behind
running text instead (invisible on the solid cards, only works over the image).
Pairs with the darker light-mode text tokens.

Also append ?v=2 to every /diagrams/*.svg reference so the recoloured diagrams
bypass Cloudflare's 4h edge cache and show immediately (the SVG URLs aren't
content-hashed like the CSS bundle).
---
 src/components/Diagram.astro                 |  2 +-
 src/content/blog/authentik-sso-2fa.md        |  2 +-
 src/content/blog/outbound-only-exposure.md   |  2 +-
 src/content/blog/workload-least-privilege.md |  2 +-
 src/styles/global.css                        | 28 +++++++++++++-------
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/Diagram.astro b/src/components/Diagram.astro
index 94e6d77..4252c5a 100644
--- a/src/components/Diagram.astro
+++ b/src/components/Diagram.astro
@@ -22,7 +22,7 @@ const cap = caption ?? captions[name];
 <figure class="diagram" data-reveal>
   <img
     class="diagram__svg"
-    src={`/diagrams/${name}.svg`}
+    src={`/diagrams/${name}.svg?v=2`}
     alt={cap ?? `${name} architecture diagram`}
     loading="lazy"
     decoding="async"
diff --git a/src/content/blog/authentik-sso-2fa.md b/src/content/blog/authentik-sso-2fa.md
index 2635af0..938c90a 100644
--- a/src/content/blog/authentik-sso-2fa.md
+++ b/src/content/blog/authentik-sso-2fa.md
@@ -13,7 +13,7 @@ and you've hardened the whole estate at once. Get it wrong and you've built a si
 
 Here's how I think about it after wiring an OIDC provider in front of a self-hosted fleet.
 
-![Authentik SSO flow — the browser authenticates against the identity provider over the front channel; each app validates tokens over an internal back channel](/diagrams/authentik-sso.svg)
+![Authentik SSO flow — the browser authenticates against the identity provider over the front channel; each app validates tokens over an internal back channel](/diagrams/authentik-sso.svg?v=2)
 
 ## Enforce the second factor at the flow, not per app
 
diff --git a/src/content/blog/outbound-only-exposure.md b/src/content/blog/outbound-only-exposure.md
index 6d12d7b..ca7b3a8 100644
--- a/src/content/blog/outbound-only-exposure.md
+++ b/src/content/blog/outbound-only-exposure.md
@@ -12,7 +12,7 @@ that's online whether or not anyone's knocking.
 
 There's a better shape: don't open anything. Let the origin dial *out*.
 
-![Outbound-only exposure — public traffic hits a Cloudflare edge with WAF and geo rules; the origin holds a single outbound tunnel; nothing is port-forwarded](/diagrams/outbound-exposure.svg)
+![Outbound-only exposure — public traffic hits a Cloudflare edge with WAF and geo rules; the origin holds a single outbound tunnel; nothing is port-forwarded](/diagrams/outbound-exposure.svg?v=2)
 
 ## The tunnel dials out
 
diff --git a/src/content/blog/workload-least-privilege.md b/src/content/blog/workload-least-privilege.md
index 1287525..3c2a394 100644
--- a/src/content/blog/workload-least-privilege.md
+++ b/src/content/blog/workload-least-privilege.md
@@ -14,7 +14,7 @@ a DNS sinkhole, a search proxy — the answer is no. Never. Not once.
 So every one of those pods is holding a key to a door it never opens. That's not least privilege. That's a
 standing credential waiting to be stolen.
 
-![Workload least privilege — each pod gets its own ServiceAccount with no API token, runs non-root with capabilities dropped, inside a namespace whose Pod Security level is pinned; the cluster API it never calls stays out of reach](/diagrams/workload-least-privilege.svg)
+![Workload least privilege — each pod gets its own ServiceAccount with no API token, runs non-root with capabilities dropped, inside a namespace whose Pod Security level is pinned; the cluster API it never calls stays out of reach](/diagrams/workload-least-privilege.svg?v=2)
 
 ## Identity first, RBAC second
 
diff --git a/src/styles/global.css b/src/styles/global.css
index e61f14a..1d63501 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -409,23 +409,33 @@ svg {
     );
 }
 [data-theme="light"] .site-bg__scrim {
-  /* Light mode needs a much heavier wash than dark — the sandstone board has
-     bright AND mid-tone areas that wreck text contrast. Keep it a faint ghost
-     behind content (dark mode stays the showcase). */
+  /* Moderate wash — the board stays clearly visible; text legibility comes from
+     a light halo behind the type (see below), not from hiding the backdrop. */
   background:
     linear-gradient(
       90deg,
-      rgba(246, 248, 251, 0.96) 0%,
-      rgba(246, 248, 251, 0.9) 50%,
-      rgba(246, 248, 251, 0.86) 100%
+      rgba(246, 248, 251, 0.8) 0%,
+      rgba(246, 248, 251, 0.54) 48%,
+      rgba(246, 248, 251, 0.44) 100%
     ),
     linear-gradient(
       180deg,
-      rgba(246, 248, 251, 0.5) 0%,
-      rgba(246, 248, 251, 0.66) 55%,
-      rgba(246, 248, 251, 0.9) 100%
+      rgba(246, 248, 251, 0.28) 0%,
+      rgba(246, 248, 251, 0.48) 55%,
+      rgba(246, 248, 251, 0.78) 100%
     );
 }
+/* Light-mode legibility: a soft light halo behind running text lifts it off the
+   busy board WITHOUT washing the board out. Subtle enough to be invisible on the
+   solid card surfaces; only earns its keep over the image. Dark mode needs none
+   (light text on a dark board already has the contrast). */
+[data-theme="light"]
+  main
+  :where(h1, h2, h3, h4, p, li, dt, dd, figcaption, .eyebrow) {
+  text-shadow:
+    0 0 4px rgba(246, 248, 251, 0.92),
+    0 1px 2px rgba(246, 248, 251, 0.75);
+}
 
 @media (prefers-reduced-motion: reduce) {
   .scroll-progress {