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 % if blog_tagline: -