/* theme-dojo.css — the Speech Genie "dojo" skin (brief 006). * * A THEMING LAYER over tokens.css, not a rebuild. It does two things: * 1. Retunes the `--l2b-*` palette to warm wood + red/orange + gold, and adds * `--l2b-skin-*` tokens that point at the skin art on R2 (l2b/skin/…) plus * a few composed 9-slice values. Component shadow roots read these through * the cascade (custom properties pierce shadow DOM), so the screens skin * themselves by referencing tokens — engine/exercise logic is never touched. * 2. Owns the light-DOM, global chrome the components can't reach: the dojo * backdrop on , the ambient lantern glow / portal-shimmer layers, and * the per-screen dissolve. * * SWAPPABLE BY DESIGN: everything keys off `[data-theme="dojo"]` on (the * default in index.html). A future "plain" theme is another file scoped to its * own `[data-theme="…"]` selector — set `--l2b-skin-*` image tokens to `none` * there and the same component CSS falls back to flat fills. Nothing here is * `!important`; it layers cleanly on the scaffold tokens. * * R2 keys are case-sensitive (the upload tool + these URLs are the only two * sides — keep them in lockstep). All art is webp; the backdrop also ships a jpg * fallback (no multi-MB master PNG ever hits the wire — brief Gotcha 2). */ :root, [data-theme="dojo"] { /* ── Palette: warm wood body, teal/gold panels, dojo-red accents ── */ --l2b-bg: #241710; /* deep wood-brown (mostly under the backdrop) */ --l2b-bg-header: rgba(36, 23, 16, 0.66); --l2b-surface: rgba(31, 60, 62, 0.86); /* teal panel interior, matches art */ --l2b-surface-hover: rgba(44, 80, 82, 0.92); --l2b-border: #caa14c; /* gold trim */ --l2b-fg: #f7ecd2; /* warm cream */ --l2b-muted: #cdb78f; --l2b-accent: #e0552b; /* dojo lacquer red-orange */ --l2b-on-accent: #fff3e2; --l2b-success: #93c23c; --l2b-error: #e0552b; /* Line-art tiles stay on warm paper rather than pure white. */ --l2b-image-bg: #fdf6e8; --l2b-radius: 14px; /* ── Skin art (R2 l2b/skin/…) ── */ --l2b-skin-panel: url("https://cdn.speechgenie.online/l2b/skin/panel/panel.webp"); --l2b-skin-nameplate: url("https://cdn.speechgenie.online/l2b/skin/panel/nameplate.webp"); --l2b-skin-carpet: url("https://cdn.speechgenie.online/l2b/skin/panel/carpet.webp"); --l2b-skin-btn: url("https://cdn.speechgenie.online/l2b/skin/btn/btn.webp"); --l2b-skin-back: url("https://cdn.speechgenie.online/l2b/skin/btn/back.webp"); --l2b-skin-play: url("https://cdn.speechgenie.online/l2b/skin/btn/play.webp"); --l2b-skin-slider-bg: url("https://cdn.speechgenie.online/l2b/skin/slider/bg.webp"); --l2b-skin-slider-fill:url("https://cdn.speechgenie.online/l2b/skin/slider/fill.webp"); --l2b-skin-volume: url("https://cdn.speechgenie.online/l2b/skin/icon/volume.webp"); --l2b-skin-settings: url("https://cdn.speechgenie.online/l2b/skin/icon/settings.webp"); --l2b-skin-tick: url("https://cdn.speechgenie.online/l2b/skin/icon/tick.webp"); --l2b-skin-fail: url("https://cdn.speechgenie.online/l2b/skin/icon/fail.webp"); --l2b-skin-star: url("https://cdn.speechgenie.online/l2b/skin/icon/star.webp"); /* ── Composed 9-slice values (referenced as whole-property vars). The Panel UI art has gold corner ornaments ~70 px into an 794×485 sprite, so slice 70 with `fill` paints the teal centre as the panel background. ── */ --l2b-panel-slice: 70 fill; --l2b-panel-border: 26px; --l2b-btn-slice: 62 fill; --l2b-btn-border: 20px; } /* ── Dojo backdrop as a DEDICATED fixed full-viewport layer (brief 006a). Brief 006 painted the room on `` with `background-attachment: fixed`, which iOS Safari (and, as it turned out, more browsers) silently fail to size to the viewport — the image collapsed to a band and the opaque body fill showed through as a flat dark dead-zone. A `position: fixed; inset: 0` element IS honored everywhere (only `attachment: fixed` is the broken one), so the room now lives on the html element's own ::before, sized `cover` to the viewport box, behind everything (z-index:-1). The shell + screens sit over it translucently. Cascade: webp via image-set() where understood, jpg url line as the fallback. The body itself is transparent so this layer shows through. ── */ [data-theme="dojo"] body { background: transparent; } [data-theme="dojo"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--l2b-bg); background-image: url("https://cdn.speechgenie.online/l2b/skin/backdrop/dojo1.jpg"); background-image: -webkit-image-set( url("https://cdn.speechgenie.online/l2b/skin/backdrop/dojo1.webp") 1x, url("https://cdn.speechgenie.online/l2b/skin/backdrop/dojo1.jpg") 1x); background-image: image-set( url("https://cdn.speechgenie.online/l2b/skin/backdrop/dojo1.webp") type("image/webp"), url("https://cdn.speechgenie.online/l2b/skin/backdrop/dojo1.jpg") type("image/jpeg")); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* The shell sits in its own stacking context above the ambient effect layers. */ [data-theme="dojo"] l2b-app-shell { position: relative; z-index: 1; } /* ── Ambient lantern glow (re-created in CSS — the source Glow/BookGlow art does not port as a file). Two warm radial pools roughly where the backdrop lanterns hang, breathing slowly. Fixed + behind the shell + pointer-events:none. ── */ [data-theme="dojo"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(34vmin 34vmin at 16% 26%, rgba(255, 176, 92, 0.30), transparent 70%), radial-gradient(30vmin 30vmin at 85% 30%, rgba(255, 158, 74, 0.26), transparent 70%); mix-blend-mode: screen; animation: l2b-lantern 6s ease-in-out infinite alternate; } /* ── Portal shimmer (re-created): a faint warm sheen drifting across the floor, plus a soft top-to-bottom vignette to seat the panels. ── */ [data-theme="dojo"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 12, 8, 0.18), transparent 22%, transparent 70%, rgba(20, 12, 8, 0.42)), conic-gradient(from 0deg at 50% 120%, transparent, rgba(255, 196, 120, 0.10), transparent 30%); animation: l2b-shimmer 14s linear infinite; } @keyframes l2b-lantern { from { opacity: 0.65; } to { opacity: 1; } } @keyframes l2b-shimmer { from { background-position: 0 0, 0 0; transform: translateX(0); } to { background-position: 0 0, 100% 0; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { [data-theme="dojo"] body::before, [data-theme="dojo"] body::after { animation: none; } }