web: the page lightens toward the ground, barely

A gradient on the body, whose box is the whole document, so the fade
maps to scroll distance: near-black held through the hero and the tour,
then a slow climb to a grey that stops shy of the panels' own colour --
the floor lightens, the boxes on it stay boxes. html keeps the solid
top colour, so over-scroll rubber-banding stays dark.

1 files changed, 15 insertions, 1 deletions

diff --git a/web/site.css b/web/site.css
index a5b8755..8e5ecfd 100644
--- a/web/site.css
+++ b/web/site.css
@@ -31,11 +31,25 @@ html {
    * rest position and the lit step agree -- and leaves momentum, half-reads
    * and every section without a snap-align entirely alone. */
   scroll-snap-type: y proximity;
+  /* The top colour, solid: what over-scroll rubber-banding shows, and the
+   * canvas behind the body's gradient. */
+  background: var(--bg);
 }
 
 body {
   margin: 0;
-  background: var(--bg);
+  /* The page lightens toward the ground, barely: near-black at the hero,
+   * held through the tour, then a slow climb to a grey that is still
+   * darker than the panels sitting on it (--code-bg is #1c1c22; ending
+   * shy of it keeps every box legible against the floor). The body's box
+   * is the whole document, so the fade maps to scroll distance. */
+  background: linear-gradient(
+    180deg,
+    var(--bg) 0%,
+    var(--bg) 30%,
+    #131318 70%,
+    #17171e 100%
+  );
   color: var(--fg);
   font: 16px/1.65 var(--sans);
   -webkit-font-smoothing: antialiased;