diff --git a/PROJECT.md b/PROJECT.md index 398f58c..c2915d3 100644 --- a/PROJECT.md +++ b/PROJECT.md @@ -499,12 +499,15 @@ Oliver's retest ("schon viel besser") with five polish items, all built: screen (his "an vielen Stellen"). All `.chev` buttons and the plaque's arrow use Silkscreen's straight ASCII `<`/`>` instead — the announcement face keeps its job, arrows stop leaning. - **The plaque wears rounded corners (8px) and real padding** (12/14 against 8/10). -- **THE WAY-UP RIBBON**: the tag became a banderole — red field, thick white Silkscreen with a - light shadow, rotated -45° over the poster's top-left corner, and (Oliver's follow-up) hanging - PAST the border on both sides rather than being clipped inside it — sized so the overhang stays - out of the neighbouring poster (120px band; the first cut at 148px lay across the poster above). - It shows on BOTH picker levels: the top-level ZOMBIE TENNIS poster carries it too (`tag` on the - MENU row), so the click path to the promotion is marked from the first screen. +- **THE WAY-UP RIBBON**: settled after four cuts as a HORIZONTAL band (Oliver's call) — red + field, thick white Silkscreen with a light shadow, running in from OVER the left border and + dissolving rightward through a real PIXEL FADE: an inline-SVG mask of 6px cells thresholded + against a Bayer matrix, four density steps — the dither the game's own art would use, never a + smooth gradient (and never a rotated pixel font, which was the diagonal version's sin: the one + anti-aliased thing in the menu; the diagonal also hid a text-WRAP bug that made the band a red + block). The mask eats band, bevel and shadow together. It shows on BOTH picker levels: the + top-level ZOMBIE TENNIS poster carries it too (`tag` on the MENU row), so the click path to the + promotion is marked from the first screen. - **Poster captions grew**: titles 12 → 15 bold, sub lines 9 → 10 and a brighter grey — "viel Text in sehr kleiner Schrift" was true of every banner. - **The card performs its entrance**: earned badges and the current crest BREATHE a subtle gold diff --git a/index.html b/index.html index b5de777..3c11b84 100644 --- a/index.html +++ b/index.html @@ -330,17 +330,21 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat #cdCareer { display: flex; align-items: center; gap: 8px; } #cdCareer u { font: 700 8px Silkscreen, monospace; color: var(--dim); text-decoration: none; letter-spacing: 1px; } - /* the WAY-UP RIBBON: the standing answer to "how do I advance", worn as a banderole laid OVER - the poster's corner — deliberately hanging past the border on both sides (Oliver), so it - reads as wrapped around the button rather than printed on it. z-index above the border, - no clipping anywhere on the path. */ - .way { position: absolute; top: 20px; left: -24px; width: 108px; transform: rotate(-45deg); - z-index: 2; white-space: nowrap; - padding: 5px 0; font: 700 10px Silkscreen, monospace; font-style: normal; - text-align: center; color: #fff; background: var(--red); + /* the WAY-UP RIBBON, horizontal (Oliver's call after two diagonal cuts — a rotated pixel font + was the one anti-aliased thing in the menu): a red band running in from OVER the left border, + dissolving rightward through a real PIXEL FADE — an inline-SVG mask of 6px cells thresholded + against a Bayer matrix (four density steps), the dither the game's own art would use, never a + smooth gradient. The mask eats the band, its bevel lines and its shadow together. */ + .way { position: absolute; top: 12px; left: -8px; z-index: 2; white-space: nowrap; + padding: 5px 52px 5px 14px; font: 700 10px Silkscreen, monospace; font-style: normal; + color: #fff; background: var(--red); border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid #69201c; text-shadow: 1px 1px 0 rgba(0,0,0,0.55); box-shadow: 0 2px 6px rgba(0,0,0,0.45); - letter-spacing: 1px; text-decoration: none; } + letter-spacing: 1px; text-decoration: none; + -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20180%2024%22%20shape-rendering=%22crispEdges%22%3E%3Cg%20fill=%22%23000%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%22120%22%20height=%2224%22/%3E%3Crect%20x=%22120%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22120%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22132%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22132%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22138%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22138%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22144%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22144%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3C/svg%3E"); + -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; + mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20180%2024%22%20shape-rendering=%22crispEdges%22%3E%3Cg%20fill=%22%23000%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%22120%22%20height=%2224%22/%3E%3Crect%20x=%22120%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22120%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22126%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22132%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22132%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22138%22%20y=%226%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22138%22%20y=%2218%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22144%22%20y=%220%22%20width=%226%22%20height=%226%22/%3E%3Crect%20x=%22144%22%20y=%2212%22%20width=%226%22%20height=%226%22/%3E%3C/g%3E%3C/svg%3E"); + mask-size: 100% 100%; mask-repeat: no-repeat; } #plRow s i, #cdBar s i, #cdCareer s i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #3f9560, var(--acid) 55%, #e8b23a); transition: width 0.4s ease; } @@ -846,6 +850,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat - +