18 (motir-core) The same opaque shell canvas masks FOUR more styles — glassmorphism, aurora, cybercore and retrofuturism paint a `body` atmosphere the signed-in shell covers, and neumorphism's moulded field never reaches it either
Type
Implementation defect (code).
Parent
Root sibling. Found while running MOTIR-4230, which is itself a root-level bug with no story and no non-terminal discovery epic to contain it; fixing this is not part of finishing MOTIR-4230 (whose second acceptance criterion explicitly preserves the ordinary page-background treatment for non-3D styles), so the finding card does not earn containment.
Discovered in
Measured while verifying MOTIR-4230's fix, with the same headless-Chromium harness over the real compiled stylesheet.
The defect
MOTIR-4230 is one instance of a general one. The signed-in shell root — components/ui/AppLayout.tsx and the platform-admin app/(admin)/_components/AdminShell.tsx — is a h-dvh overflow-hidden box carrying bg-(--el-page-bg), an OPAQUE fill over the whole viewport. Every style that expresses its identity as a body-level canvas is therefore invisible on every signed-in route, and only 3D / Immersive has been fixed.
Measured in headless Chromium against app/globals.css + packages/design-system/theme.css compiled by @tailwindcss/postcss, rendering the shipped AppLayout markup class-for-class, light theme, data-palette="motir":
data-style | body background-image | shell root |
|---|---|---|
glassmorphism | 4 radial washes (theme.css ~L620) | none |
aurora | 4 drifting ribbons (~L983) | none |
cybercore-y2k | the tech grid (~L879) | none |
retrofuturism | the synthwave sky (~L2146) | none |
and neumorphism (~L1955) sets body { background-color: var(--el-surface) } — measured rgb(246, 245, 244) — while the shell root paints rgb(255, 255, 255) over it, so the "moulded out of the same material" illusion the style is built on never reaches the app frame.
Glassmorphism is the sharpest case: its rail rule ([data-surface='sidebar']) is a translucent fill plus backdrop-filter: blur(...), and the thing it is blurring is the flat opaque shell, not the vibrant canvas the style's own comment says the frosted panels exist to blur ("The gradient is what the frosted panels blur — without it, the blur is invisible").
retrofuturism additionally paints a body::after grid floor at z-index: -1, which is behind the shell root too.
Root cause / fix
Same cause as MOTIR-4230, one tier up: the shell canvas is opaque and the style layer paints the page canvas.
MOTIR-4230 ships the mechanism this needs — a data-app-shell attribute on both shell roots, and the 3D atmosphere rule painting body, [data-app-shell] from one rule. Generalising is a per-style repeat of that pairing: add [data-app-shell] to each style's own canvas rule's selector list (glassmorphism, aurora, cybercore-y2k, retrofuturism, neumorphism), keeping ONE rule per style rather than a second copy, and carry background-attachment: fixed where the body rule has it so the two members resolve against the same box.
Two things to settle rather than assume while doing it:
auroraANIMATES its canvas (background-positiondrift over--aurora-drift-duration, with aprefers-reduced-motion: reducearm settinganimation: none). Painting the shell must carry BOTH arms, or a reduced-motion user gets a drifting shell.retrofuturism'sbody::aftergrid floor is aposition: fixedpseudo-element atz-index: -1. Check whether it composites above the shell canvas once that canvas is painted, or whether it needs its own disposition — az-index: -1layer and a newly painted ancestor background are exactly the pair whose stacking a code reading gets wrong.
Acceptance criteria
- Under each of
glassmorphism,aurora,cybercore-y2kandretrofuturism, a signed-in route's shell canvas resolves the SAMEbackground-imageasbodydoes in that state, rather thannone. - Under
neumorphism, the shell canvas resolves the samebackground-colorasbody(--el-surface), so panels read as moulded out of the field. - Aurora's drift is present on the shell canvas for a no-preference user and absent under
prefers-reduced-motion: reduce, matching the body arm exactly. - Retrofuturism's
body::aftergrid floor is still visible above the shell canvas and below all app content, stated with the measurement that shows it. - A style that paints no canvas of its own (
warm-editorial,soft-playful,swiss-minimal-flat,neo-brutalism,hand-drawn-indie) is unchanged — the shell keeps its--el-page-bgfill. tests/theme/immersiveShellAtmosphere.test.tsis widened (or a sibling guard added) so the pairing is asserted per style rather than for 3D / Immersive alone, and the rendered half intests/e2e/shell-immersive-atmosphere.spec.tscovers at least one additional style.
Resolution
Open — no fix has shipped. The data-app-shell hook it builds on lands with MOTIR-4230.