Deepen ocean palette, add god-ray light shafts, split tagline lines

files/assets/css/custom.css

@@ -33,46 +33,57 @@
 /* ---------- 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",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
     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; }

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">