html { min-height: 100%; } body { --mb-scrim: var(--chakra-colors-grey-100); --mb-foot: var(--chakra-colors-grey-100); background-color: var(--chakra-colors-grey-100); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--mb-scrim) 70%, transparent) 0px, color-mix(in srgb, var(--mb-scrim) 30%, transparent) 162px, color-mix(in srgb, var(--mb-scrim) 78%, transparent) 410px, var(--mb-foot) 539px, var(--chakra-colors-grey-100) 540px ), url('/assets/images/backdrops/football.jpg'); background-repeat: no-repeat, no-repeat; --mb-art-y: 0px; background-position: top center, center var(--mb-art-y); /* The art is a 1600x584 panorama (aspect .365): at 100vw-auto it ran out ~0.365*vw down and the veil sat naked over the page — a grey slab in light mode. max() keeps it viewport-wide until 1480px, below which it locks to 540px tall (1480 * .365) and crops the sides instead. */ background-size: 100% 100%, max(100vw, 1480px) auto; } /* Light mode can't dissolve into a light canvas — it holds the prototype's dark veil and stops on the band's hard foot instead. */ body:not(.chakra-ui-dark) { --mb-scrim: #0d0d0d; --mb-foot: color-mix(in srgb, #0d0d0d 78%, transparent); } /* The art recedes at 0.4x scroll while the veil stays put. Desktop pointers only: opening a sheet scroll-locks the body, which deactivates the scroll() timeline and SNAPS the receded art back to base — a visible flash on every mobile modal open/close (QA p3 #8). */ @supports (animation-timeline: scroll()) { @media (hover: hover) and (pointer: fine) { body { animation: mb-recede linear both; animation-timeline: scroll(root block); animation-range: 0 540px; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } } @keyframes mb-recede { to { background-position: top center, center calc(var(--mb-art-y) + 168px); } }