/* styles/wallpaper.css — Pass B of the soul package (workspace substrate). * * The deepest visual layer. Sits BELOW everything (chrome z>=10, grain z=999) * via a single fixed `html::before` pseudo-element painted at z-index: -1. * Pointer-events: none so it never intercepts input. * * Two surface families: * - Photographic (aldebaran) — 2.1MB asset, dark-pulp ringed-planet scene * - CSS-only (paper, accent-mesh, void) — zero-asset gradients, GPU-cheap * * Per-theme defaults are stamped pre-paint by the IIFE in index-live.html: * light + no stored value → `paper` (lighter, no asset fetch) * dark + no stored value → `aldebaran` (the canonical demo wallpaper) * stored value always wins regardless of theme * * Tier control via data-wallpaper on : * data-wallpaper="aldebaran" → photographic, dark-tuned * data-wallpaper="paper" → soft paper-tone radial * data-wallpaper="accent-mesh" → single-accent soft mesh (low intensity) * data-wallpaper="void" → flat dark surface (no asset) * data-wallpaper="off" → layer hidden; html/body bg restores * * No animation in Pass B. Wallpaper is static; animated variants are deferred. * * Authored 2026-05-08 for the soul package. Brief: .agents/SESSION-DOSSIER-20260508.md §soul package. */ /* Z-stack note: * html::before (this file) → z-index: -1 (below everything) * html, body bg → painted directly when wallpaper is "off" * page chrome → z-index 10..200 (.tbar/.dock-wrap z=70, peek=200) * html::after (grain) → z-index: 999 (above everything) * * When wallpaper is active we make body bg transparent so the layer shows * through. When "off" we restore body bg to var(--bg) so nothing changes * for users who opt out. */ html[data-wallpaper]:not([data-wallpaper="off"]), html[data-wallpaper]:not([data-wallpaper="off"]) body { background: transparent; } html[data-wallpaper]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Solid fallback so we never flash transparent before the gradient/image paints. Each preset overrides below. */ background-color: var(--bg); background-repeat: no-repeat; background-size: cover; background-position: center center; } /* ────────────────────────────────────────────────────────────────────── * aldebaran — photographic substrate (default in BOTH light and dark). * Ringed-planet retro-pulp scene. Two assets: a dark-pulp variant for * dark mode and a daylight variant for light mode (same composition, * different palette). The variant is selected off [data-theme] with a * prefers-color-scheme fallback when the theme attr isn't set. * ──────────────────────────────────────────────────────────────────── */ /* Default + dark mode → dark variant */ html[data-wallpaper="aldebaran"]::before { background-image: url("../assets/wallpapers/aldebaran.webp"); background-size: cover; background-position: center bottom; background-color: var(--bg); } /* Light mode (explicit) → daylight variant */ html[data-theme="light"][data-wallpaper="aldebaran"]::before { background-image: url("../assets/wallpapers/aldebaran-light.webp"); } /* Light OS preference + no explicit theme → daylight variant */ @media (prefers-color-scheme: light) { html:not([data-theme])[data-wallpaper="aldebaran"]::before { background-image: url("../assets/wallpapers/aldebaran-light.webp"); } } /* ────────────────────────────────────────────────────────────────────── * paper — soft paper-tone radial (default in LIGHT mode). * Restful, no asset cost. The page-bg-bias version of "off". * ──────────────────────────────────────────────────────────────────── */ html[data-wallpaper="paper"]::before { background-image: radial-gradient(ellipse 120% 80% at 50% 0%, var(--surface-2) 0%, var(--bg) 70%); background-color: var(--bg); } /* Dark-theme variant: pull the radial darker, keep the gentle vignette. */ html[data-theme="dark"][data-wallpaper="paper"]::before { background-image: radial-gradient(ellipse 120% 80% at 50% 0%, var(--surface) 0%, var(--bg) 75%); } @media (prefers-color-scheme: dark) { html:not([data-theme])[data-wallpaper="paper"]::before { background-image: radial-gradient(ellipse 120% 80% at 50% 0%, var(--surface) 0%, var(--bg) 75%); } } /* ────────────────────────────────────────────────────────────────────── * accent-mesh — subtle single-accent mesh (optional). * Single-accent only (no purple/cyan/aurora). ~6% perceptual intensity. * Three soft radials of the accent-soft family blended into the page bg. * ──────────────────────────────────────────────────────────────────── */ html[data-wallpaper="accent-mesh"]::before { background-image: radial-gradient(ellipse 60% 50% at 18% 22%, var(--accent-soft-2) 0%, transparent 60%), radial-gradient(ellipse 50% 45% at 82% 78%, var(--accent-soft-2) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 50% 50%, var(--accent-soft-2) 0%, transparent 70%); background-color: var(--bg); } /* Dark theme — accent-soft tokens already shift in tokens.css; we just * tighten the radial centers so the bloom doesn't wash the dark bg out. */ html[data-theme="dark"][data-wallpaper="accent-mesh"]::before { background-image: radial-gradient(ellipse 50% 40% at 18% 22%, var(--accent-soft) 0%, transparent 65%), radial-gradient(ellipse 45% 38% at 82% 78%, var(--accent-soft) 0%, transparent 65%), radial-gradient(ellipse 70% 50% at 50% 50%, var(--accent-soft-2) 0%, transparent 75%); } /* ────────────────────────────────────────────────────────────────────── * void — flat surface (no asset, no gradient). * The "off" of wallpapers without going fully transparent — useful when * you want a slightly darker stage than the page bg. * ──────────────────────────────────────────────────────────────────── */ html[data-wallpaper="void"]::before { background-color: var(--bg); background-image: none; } html[data-theme="dark"][data-wallpaper="void"]::before { background-color: var(--surface-2); } /* ────────────────────────────────────────────────────────────────────── * off — layer hidden entirely. html/body bg restored above via the * `:not([data-wallpaper="off"])` selector. * ──────────────────────────────────────────────────────────────────── */ html[data-wallpaper="off"]::before { display: none; }