/* ========================================================================== Backgrounds Reusable page/section backdrops that give the glass components something to blur. Apply .bg-app to , drop a .bg-glow inside any section that needs an ambient light source. ========================================================================== */ /* Checkerboard-dot texture (tinted with --color-apple-gray) layered over a flat white surface, giving it a bit of tactile grain. */ .bg-app { background-color: var(--color-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a3a5b0' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: repeat; position: relative; /* clip, not hidden — see css/base.css's html/body rules for why (hidden forces overflow-y to auto too, breaking position: sticky). This class selector outranks base.css's plain `body` rule, so it needs the same fix independently. */ overflow-x: clip; } /* Dark variant, for sections/panels that intentionally break to the dark surface */ .bg-app--dark { background: var(--gradient-surface); color: #f5f5f7; } /* Ambient glow blobs — absolutely positioned, decorative, inert to input. Faint pastel wash, tuned for a light background (not the saturated glow a dark theme would use). */ .bg-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-glow::before, .bg-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.16; } .bg-glow::before { width: 560px; height: 560px; top: -220px; left: 8%; background: radial-gradient(circle, var(--color-red) 0%, transparent 70%); } .bg-glow::after { width: 480px; height: 480px; top: -80px; right: 5%; background: radial-gradient(circle, var(--color-red-dark) 0%, transparent 70%); opacity: 0.1; } /* Modifier — anchors the same pair of blobs to the bottom instead of the top, for reusing .bg-glow further down a long page. */ .bg-glow--bottom::before { top: auto; bottom: -220px; left: auto; right: 10%; } .bg-glow--bottom::after { top: auto; bottom: -80px; right: auto; left: 6%; } /* Content sitting above the decorative layers */ .bg-content { position: relative; z-index: 1; }