From 61652a9114b0ca5b6ee3157dd57bf830e38b0de2 Mon Sep 17 00:00:00 2001 From: Oliver Rieger Date: Mon, 31 Aug 2026 13:30:17 +0200 Subject: [PATCH] The poster captions sit on a blurred veil that comes out of nothing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The scrim used to be a hard linear-gradient riding in the button's own background stack. It is a masked backdrop-blur now: nothing at all at its top edge, a surface by the time it reaches the words. The art stays art where the art is, the caption gets something to sit on, and no box edge appears anywhere. Measured on this machine it costs 0.2ms a frame — the backdrop is static while the menu is. Co-Authored-By: Claude Fable 5 --- index.html | 17 ++++++++++++++++- src/main.js | 7 ++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ed3e149..eaa7aa3 100644 --- a/index.html +++ b/index.html @@ -473,7 +473,22 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat image-rendering: pixelated; border: 2px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; } - .last { position: absolute; top: 7px; right: 9px; font: 400 8px Silkscreen, monospace; + /* THE CAPTION'S VEIL (2026-08-31, Oliver: "eine blurry verlauf als hintergrund, von oben aus dem + nichts kommend"). A hard scrim gradient used to ride in the button's own background stack; this + is a BLURRED backdrop instead, masked so it begins as literally nothing at its top edge and + only becomes a surface where the words are. Art stays art at the top of the poster, the caption + gets something to sit on, and there is no box edge anywhere. */ + #modeList button.mode::after, #modeSub button.mode::after { + content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; + backdrop-filter: blur(7px) saturate(0.85); + -webkit-backdrop-filter: blur(7px) saturate(0.85); + background: linear-gradient(180deg, rgba(8,12,9,0) 0%, rgba(8,12,9,0.42) 46%, rgba(8,12,9,0.8) 100%); + -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%); + mask-image: linear-gradient(180deg, transparent 0%, #000 44%); + pointer-events: none; } + /* the words and the chips ride ABOVE the veil — a pseudo-element is the last thing painted */ + #modeList .cb, #modeSub .cb { position: relative; z-index: 2; } + .last { position: absolute; z-index: 2; top: 7px; right: 9px; font: 400 8px Silkscreen, monospace; color: var(--acid); background: rgba(0,0,0,0.72); padding: 3px 6px; letter-spacing: 1px; border: 1px solid rgba(188,212,85,0.5); } #modeList b, #modeSub b { text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); } diff --git a/src/main.js b/src/main.js index 71f62b7..d1d3218 100644 --- a/src/main.js +++ b/src/main.js @@ -127,9 +127,10 @@ const modeSub = document.getElementById('modeSub'); const banner = (card, cls, last) => { const b = document.createElement('button'); b.className = cls; - // the scrim rides IN the background stack (gradient over art), so the caption needs no extra box - b.style.backgroundImage = - `linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.78)), url(assets/${card.art}.png?v=${SPRV})`; + // JUST THE ART. The scrim used to ride in this background stack as a hard linear-gradient; the + // caption sits on a BLURRED veil now (index.html, button.mode::after) that fades in out of + // nothing from above, and stacking the old gradient under it only doubled the darkening. + b.style.backgroundImage = `url(assets/${card.art}.png?v=${SPRV})`; b.innerHTML = `${card.name}${card.sub}` + (last ? 'LAST' : '') // the standing answer to "how do I advance", worn by the poster it is true of (config MODES)