/* koi-bg.css (BA-030) - lets the koi pond background show through the shell. * Scoped to html.koi-bg-on (added by js/koi-bg-boot.js), so removing the * boot script or flipping the localStorage kill switch restores stock look. * * The shell's canvas-colored layers go transparent; the pond paints the * water itself from the --v-* vibe tokens. Content stacks above the canvas. */ html.koi-bg-on body, html.koi-bg-on #app, html.koi-bg-on .page, html.koi-bg-on main, html.koi-bg-on .app-shell, html.koi-bg-on .app-shell__rail, html.koi-bg-on nav.rail { background: transparent !important; } html.koi-bg-on #app { position: relative; z-index: 1; } /* BU-543: the :not([data-theme]) --v-canvas/#f8f8f8 shim that used to live here is gone. * .app-shell now reads var(--v-canvas, #f8f8f8) directly (MainLayout.razor.css), and the * koi engine has its own BA-028 fallback palette when --v-* are undefined, so no shim is * needed on the stock no-theme state. */ /* BU-557: DEFAULT (no data-theme / "default") — hardcode the dark cockpit backdrop on * BEHIND the partially-transparent koi canvas. The koi canvas (#koi-bg, position:fixed z-index:0) * only paints the water + fish; it clears to TRANSPARENT in non-koi regions, so without a solid * backdrop those regions fell back to the root canvas token (--color-canvas #f8f8f8 cream). The * translucent .mc-pulse tiles (rgba(20,22,27,0.6)) then composited over cream → washed, sub-AA * labels. Matching --v-canvas (#0b1216, the default water colour in koi-home.js) makes the * transparent regions blend seamlessly with the koi water and keeps the tiles composited over * dark → labels stay AA-legible. This is the exact mirror of the BU-544 vibe rule below, and is * scoped to /home: koi-home.js adds .koi-bg-on on mount and removes it on stop, so it cannot * leak onto other routes. Do NOT make the koi canvas itself opaque — that kills the water look. */ html.koi-bg-on:not([data-theme]), html.koi-bg-on[data-theme="default"] { background-color: #0b1216; } /* BU-544: /home follows an EXPLICITLY-chosen vibe. Give the vibe canvas colour so * open-area text over the (transparent) .mc + koi water resolves onto a themed backdrop * (WCAG AA) and the page has a correct solid fallback if the koi canvas is absent. koi-home.js * drives the koi water itself from the same live vibe tokens, painting over this backdrop. * This OVERRIDES the BU-557 default-dark backdrop above for any explicit non-default vibe. */ html.koi-bg-on[data-theme]:not([data-theme="default"]) { background-color: var(--color-canvas); }