/* * Additive light-mode fixes for the /app editor. * * PART 1 — logo readability in light mode * The scaffold ships a white-on-transparent logo PNG (/app/logo.png). In * dark mode that reads fine; in light mode it disappears against the cream * bg. The "ASCII Magic" wordmark next to the sparkle mark is baked into * the PNG, not real text, so a text-color rule can't reach it. * Fix: filter: invert(1) hue-rotate(180deg) on .tb-brand-logo when * html.light is set. That flips lightness (white text -> black) while * preserving the sparkle mark's amber hue. * Smoothness: base state uses an explicit identity filter (not `none`) * so the browser can tween between the two filter chains, plus * will-change + a 180ms transition so it moves in sync with the theme. * * PART 2 — circular reveal from the click point on theme toggle * The scaffold calls document.startViewTransition() when the theme * toggles but never sets any origin CSS variables and defines no * animation for ::view-transition-new(root), so the browser falls back * to its default centred crossfade. * Companion JS (theme-reveal-origin.js) captures the click coordinates * on #menu-theme-toggle in the capture phase and writes them to * --reveal-x / --reveal-y on . This CSS reads those variables and * animates the new root as an expanding circle centred on the click. * The old root just holds — no cross-fade artefact underneath. */ /* Part 1 — logo image */ .tb-brand-logo { filter: invert(0) hue-rotate(0deg); transition: filter 180ms ease; will-change: filter; } html.light .tb-brand-logo { filter: invert(1) hue-rotate(180deg); } /* Part 2 — click-origin circular reveal for the theme toggle */ ::view-transition-old(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { animation: ammp-theme-reveal 520ms cubic-bezier(0.22, 0.61, 0.36, 1); mix-blend-mode: normal; } @keyframes ammp-theme-reveal { from { clip-path: circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%)); } to { clip-path: circle(150% at var(--reveal-x, 50%) var(--reveal-y, 50%)); } } @media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }