/* ascii-bg.css — placement + edge-mask for the embeddable ASCII background. * * The renderer (ascii-bg.js) owns the pixels and the canvas opacity; this file * owns WHERE the canvas sits and HOW its edges melt into the flat-dark page. * Sections stay transparent — the owns the background colour (the * anti-banding rule) — so the ASCII never sits on its own coloured rectangle. * * Two placements: * .ascii-band — a full-width middle transition band (top+bottom fade) * .ascii-foot — a footer backdrop (top-fade, low opacity, non-interactive) */ /* ==================== TILE-WINDOWED SHARED INK FIELD ==================== * One is the FIRST child of .bento and fills its box. * ascii-bg.js masks it (data-mask-tiles=".bento .tile") to the live tile * shapes, so this single continuous ink field only shows THROUGH the tiles * (each tile = an aligned window onto the same field) and the gaps between * tiles reveal nothing — the flat-dark page. No edge-mask here on purpose: * the JS-built tile-mask IS the shape. */ .bento { position: relative; } .ascii-tiles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* tile content sits above the masked ink */ .bento > .tile { position: relative; z-index: 1; } /* FROSTED GLASS on the work tiles: the aligned ink beneath each tile glows through the blur while text stays readable → one continuous field. */ main.surface .tile { background: rgba(18, 20, 26, 0.5); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); } /* ============================ MIDDLE BAND ============================ */ .ascii-band { position: relative; width: 100%; height: clamp(280px, 40vh, 460px); background: transparent; /* body owns bg — no seam, no banding */ overflow: hidden; } .ascii-band > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* vertical edge-mask: top + bottom melt into the dark, no hard seam */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); } /* optional faint centered mono hairline label — DEFAULT OFF */ .ascii-band > .ascii-band-label { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.14); pointer-events: none; white-space: nowrap; } /* ============================ FOOTER BACKDROP ============================ */ /* The canvas itself carries the .ascii-foot class (it is the footer's first child), so all of these rules apply directly to the