, * NOT

. Original CSS targeted #cinny (non-existent), so * (a) the stacking context was never established, and (b) the body background * gradient painted over the z-index:-1 canvas. Fixed selectors to #root. * Also: body background must be transparent so the canvas shows through. */ /* Shader canvas — fixed viewport background, below everything */ #shader-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; transition: opacity 0.4s ease; opacity: 0; /* fades in once GPU is ready */ } #shader-canvas.ready { opacity: 1; } /* * Body must be transparent so the canvas (z-index: -1) is visible. * The dark gradient background on body was covering the canvas entirely. * The canvas replaces the body background; the gradient below is the * no-JS / no-WebGL / reduced-motion fallback only. */ body { background: transparent; } /* * Frosted-glass overlay on the Cinny form container. * Cinny v4.11.1 mounts under

(NOT #cinny — that was wrong). * The has id="appBody"; the React root is

. * * z-index hierarchy: * -1 canvas (shader) * 0 body (transparent — canvas shows through) * 1 #root (Cinny app root — explicit z-index to stack above canvas) */ #root { position: relative; z-index: 1; } /* * Cinny v4.11.1 renders its first child as the app layout container. * We apply backdrop-filter to #root > div so the login form floats * legibly over the animated background regardless of its brightness. */ #root > div { backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); } /* * ROOT-CAUSE FIX (2026-04-30; supersedes the brittle _15upz2y0 override). * * Cinny v4.11.1 uses Vanilla Extract (CSS-in-JS at build time) + the * "Folds" component library. The page background paints from THREE * independent components — , , * — each independently referencing the same * pair of CSS custom properties: * * color.Background.Container = #F2F2F2 (light grey base) * color.Background.ContainerActive = #D9D9D9 (dot color) * * Set on by the lightTheme class (Folds), activated by Cinny's * ThemeManager useEffect. * * Targeting any single Vanilla-Extract-hashed class (e.g. `_15upz2y0`) * fixes only one layer; the others continue painting opaque. Three * rounds of class-targeted overrides today proved this empirically. The * proper fix is overriding the CSS variables themselves — ONE rule * neutralizes all three layers. * * Variable hash discovery — Cinny v4.11.1 deployed bundle: * grep -oE '\-\-[a-zA-Z0-9_]+:\s*#(F2F2F2|D9D9D9)' /var/www/cinny-tenant2/assets/*.css * * Discovered hashes (2026-04-30): * --oq6d076: #F2F2F2 → Container * --oq6d078: #D9D9D9 → ContainerActive * --oq6d079, --oq6d07a, --oq6d07e, --oq6d07y: #F2F2F2 (Container variants/hover) * --oq6d07c, --oq6d07r, --oq6d07u: #D9D9D9 (ContainerActive variants/hover) * * STABILITY: hashes are deterministic from Vanilla Extract source path + * Folds package version. They change ONLY on Folds major-version bump * (rare). On Cinny rebuild without Folds upgrade, hashes remain stable. * * SAFE: Surface.Container (white login card) uses a DIFFERENT token group * (--oq6d0?? for Surface) — NOT touched by this override. The card stays * opaque + white as intended. * * DEFENSE-IN-DEPTH: the structural selector below catches the case where * hashes change (Folds upgrade). Costs nothing if not needed. * * Reference: internal-docs/_scratch/2026-04-30-cinny-theming-architecture-research.md */ /* * REVERTED variable-override (2026-04-30 — second iteration). * * The blanket override of all 9 hashed Vanilla Extract variables * resolving to #F2F2F2 or #D9D9D9 also killed TEXT visibility — some * of those variables are used by Folds for text/icon/border colors, * not just page-background. Specifically: text on the white login * card uses theme tokens that inherit from the same variable namespace. * * Lesson: just because two variables share a hex VALUE doesn't mean * they share a SEMANTIC role. The agent's research correctly identified * the dot-pattern variables but the "blanket all-variants override" * was too broad. * * Now using ONLY structural selectors — surgically target the * page-wrapper + dotted-pattern container, leave all theme tokens * (including text colors) intact. This was Round 3's proven approach, * just using structural targeting instead of the brittle class hash. */ /* * Structural selector — targets the page-wrapper (depth 1 under #root) * and the dotted-pattern container (depth 2). Both paint opaque * backgrounds via Folds' AuthLayout + BackgroundDotPattern components. * * Stable across Cinny rebuilds: doesn't reference any class name or * CSS-modules hash. Cinny v4.11.1 confirmed; v5.x may need re-verify * if the React tree shape changes. */ #root > div:first-child, #root > div:first-child > div:first-child { background-color: transparent !important; background-image: none !important; } /* Reduced-motion: skip animation entirely, use static gradient only */ @media (prefers-reduced-motion: reduce) { #shader-canvas { display: none !important; } body { background: linear-gradient(135deg, #0d0d0d 0%, #1a1005 50%, #0a0800 100%); } }