From 044bb6e895d14add53292ac9d0db2433c2fe1322 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 27 May 2026 03:37:11 +0000
Subject: [PATCH] Deepen ocean palette and add god-ray light shafts; split
 tagline lines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Water column shifted deeper: the top now sits in the upper
mesopelagic rather than at the sunlit surface, and the bottom
drops to true black. The viewer feels submerged below the
light zone.

Light from above is reintroduced as layered radial-gradient
"god rays" — narrow translucent columns positioned just above
the viewport that fade out as they descend through the water,
plus a diffuse surface glow band. With background-attachment:
fixed, the rays stay overhead while the page scrolls.

Tagline now splits on sentence boundaries — each sentence
renders on its own line. Done in base.tmpl (display logic) and
a small CSS rule, so BLOG_DESCRIPTION stays clean text for
RSS, meta tags, and other consumers.
---
 files/assets/css/custom.css           | 61 ++++++++++++++++-----------
 themes/fonsvoyage/templates/base.tmpl |  6 ++-
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/files/assets/css/custom.css b/files/assets/css/custom.css
index 040fe04..f95c68a 100644
--- a/files/assets/css/custom.css
+++ b/files/assets/css/custom.css
@@ -33,21 +33,22 @@
 /* ---------- Reset / base ---------- */
 html {
     -webkit-text-size-adjust: 100%;
-    background-color: #01040d;  /* abyssopelagic — fallback under all */
+    background-color: #000000;  /* abyss fallback */
 }
 
 /*
- * Underwater water column.
+ * Underwater water column — viewer is already below the sunlit zone.
  * The gradient is fixed to the viewport so the bottom of the screen is
  * always the deepest, regardless of scroll position. Zone colors loosely
  * follow real ocean color attenuation:
- *   0–200m   sunlit / epipelagic   — blue-green, daylight
- *   200–1000m   twilight / mesopelagic   — deep blue, dimming
- *   1000–4000m   midnight / bathypelagic   — near-black indigo
- *   4000m+   abyss / abyssopelagic   — black with a hint of cobalt
+ *   0–200m    sunlit / epipelagic    — blue-green, daylight
+ *   200–1000m twilight / mesopelagic — deep blue, dimming
+ *   1000m+    midnight / bathypelagic + abyss — near-black
  *
- * A faint bioluminescent radial wash near the surface adds atmosphere
- * without breaking the realism.
+ * Layered radial gradients at the top mimic crepuscular rays / "god rays"
+ * — narrow columns of scattered light streaming down from the surface
+ * and dissipating as they descend. They sit above the water-column
+ * gradient so they read brighter against the dark below.
  */
 body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -55,24 +56,34 @@ body {
     font-size: 1.0625rem;
     line-height: 1.7;
     color: var(--fv-foam);
-    background-color: #01040d;
+    background-color: #000000;
     background-image:
-        /* faint scattered light from above */
-        radial-gradient(ellipse 60% 35% at 50% 0%,
-            rgba(120, 200, 210, 0.07),
-            transparent 70%),
-        /* the water column itself */
+        /* God rays — narrow columns of dim light from above, fading down */
+        radial-gradient(ellipse 5%  55% at 18% -6%,
+            rgba(178, 226, 234, 0.13), transparent 65%),
+        radial-gradient(ellipse 3.5% 70% at 38% -8%,
+            rgba(190, 232, 240, 0.10), transparent 70%),
+        radial-gradient(ellipse 4%  60% at 55% -6%,
+            rgba(195, 235, 242, 0.16), transparent 68%),
+        radial-gradient(ellipse 6%  50% at 72% -5%,
+            rgba(178, 226, 234, 0.09), transparent 65%),
+        radial-gradient(ellipse 3%  65% at 88% -8%,
+            rgba(190, 232, 240, 0.08), transparent 70%),
+        /* Soft surface glow band — diffuse light scattering near the top */
+        radial-gradient(ellipse 75% 22% at 50% -10%,
+            rgba(140, 210, 220, 0.10), transparent 75%),
+        /* The water column itself — deeper and darker than before */
         linear-gradient(180deg,
-            #135b75 0%,     /* sunlit surface */
-            #0c4866 14%,
-            #093a5a 26%,
-            #062c4b 38%,    /* twilight zone */
-            #04203c 50%,
-            #03162e 62%,    /* midnight zone */
-            #020e23 74%,
-            #010818 85%,
-            #01040d 95%,    /* abyssal */
-            #000308 100%);
+            #0a3d54 0%,     /* upper mesopelagic — already dim */
+            #082e43 10%,
+            #062335 20%,
+            #051a2a 32%,
+            #041421 44%,
+            #030d18 56%,
+            #020811 68%,
+            #01050a 80%,
+            #000205 90%,
+            #000000 100%); /* true abyssal */
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: 100% 100%;
@@ -142,6 +153,8 @@ code, pre, kbd, samp,
     line-height: 1.5;
 }
 
+.blog-tagline .tagline-line { display: block; }
+
 @media (min-width: 40em) {
     .blog-header-logo { font-size: 3rem; }
     .blog-tagline { font-size: 1.15rem; }
diff --git a/themes/fonsvoyage/templates/base.tmpl b/themes/fonsvoyage/templates/base.tmpl
index 14d7bb6..845e20d 100644
--- a/themes/fonsvoyage/templates/base.tmpl
+++ b/themes/fonsvoyage/templates/base.tmpl
@@ -33,7 +33,11 @@ ${template_hooks['extra_head']()}
         % endif
         </a>
         % if blog_tagline:
-            <div class="blog-tagline">${blog_tagline}</div>
+            <div class="blog-tagline">
+            % for sentence in [s.strip() for s in blog_tagline.split('. ') if s.strip()]:
+                <span class="tagline-line">${sentence if sentence.endswith('.') else sentence + '.'}</span>
+            % endfor
+            </div>
         % endif
           </div>
             <div class="col-md-3 justify-content-end align-items-center bs-nav-collapsible collapse flex-collapse bootblog4-right-nav">