changed background

css/style.css

@@ -186,3 +186,86 @@ button {
   padding-left: 1rem;
   color: var(--muted);
 }
+
+/* ── sky ────────────────────────────────────────────────────────────────
+   Generated, not photographed. tools/background.py renders every style into
+   img/bg/; inc/header.php enumerates that directory and emits one custom
+   property per style, so --bg-img follows html[data-bg]. Only the matching
+   rule's url() is fetched. Each is Bayer ordered-dithered to a few grey
+   levels and upscaled with pixelated rendering so the cells stay crunchy.
+   Regenerate everything:  python tools/background.py all */
+:root {
+  --bg: #060606;
+  /* opacity of the text-column scrim; raise for busier background styles */
+  --scrim: .82;
+}
+
+body { position: relative; }
+
+/* background layer */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  background: #060606 var(--bg-img) center center / cover no-repeat;
+  image-rendering: pixelated;
+}
+
+/* Readability scrim + diagonal hatch.
+   The first layer is a feathered vertical band, ~880px wide and centred on
+   the 680px text column, sitting above the artwork (z-index -2) but below
+   the content. It gives every background style a consistent dark bed to
+   read against instead of relying on each one being quiet in the middle,
+   and because the edges fade out there is no visible panel or card. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg,
+      transparent 0%,
+      rgba(4, 4, 4, var(--scrim)) 14%,
+      rgba(4, 4, 4, var(--scrim)) 86%,
+      transparent 100%),
+    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(4, 4, 4, .32), transparent 82%),
+    repeating-linear-gradient(-45deg, rgba(240, 240, 240, .045) 0 1px, transparent 1px 8px);
+  background-size: 880px 100%, auto, auto;
+  background-position: center top, center, center;
+  background-repeat: no-repeat, no-repeat, repeat;
+}
+
+/* cards sat on flat #161616 before; let the sky read through them */
+.status-card,
+.spotify-card,
+.post-body pre { background-color: rgba(6, 6, 6, .66); }
+input, textarea { background: rgba(6, 6, 6, .66); }
+
+/* guestbook sign button */
+.btn-sign {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  background: var(--fg);
+  color: var(--bg);
+  border: 1px solid var(--fg);
+  padding: .5rem 1.4rem;
+  border-radius: 4px;
+  font: inherit;
+  cursor: pointer;
+  transition: background .12s ease, color .12s ease, transform .08s ease;
+}
+.btn-sign .arrow { transition: transform .15s ease; }
+.btn-sign:hover:not(:disabled) { background: transparent; color: var(--fg); }
+.btn-sign:hover:not(:disabled) .arrow { transform: translateX(3px); }
+.btn-sign:active:not(:disabled) { transform: translateY(1px); }
+.btn-sign:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
+.btn-sign:disabled { opacity: .55; cursor: progress; }
+
+/* htmx swaps the label while the request is in flight */
+.btn-sign .pending { display: none; }
+.btn-sign.htmx-request .idle { display: none; }
+.btn-sign.htmx-request .pending { display: inline; }
+.btn-sign.htmx-request .arrow { display: none; }