From 164476a5b36eda924eccd8f4882253d5e71e8dd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= Date: Mon, 7 Sep 2026 18:40:44 +0200 Subject: [PATCH] Preserve the tape shadow over scrolling content --- assets/construction-tape-mask.svg | 12 ++++++++++++ assets/styles.css | 6 +++--- docs/implementation.md | 2 +- docs/verification.md | 1 + index.html | 2 +- 5 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 assets/construction-tape-mask.svg diff --git a/assets/construction-tape-mask.svg b/assets/construction-tape-mask.svg new file mode 100644 index 0000000..950abc0 --- /dev/null +++ b/assets/construction-tape-mask.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/styles.css b/assets/styles.css index 6c0b2c9..4712be7 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -289,12 +289,12 @@ address { position: fixed; z-index: 1; inset: 0 0 auto; - block-size: calc(254 * var(--unit)); + block-size: calc(270 * var(--unit)); background-image: var(--desktop-backdrop); background-size: 100% auto; background-repeat: no-repeat; - /* Reuse the original pixels, revealing only the opaque tape above content. */ - mask-image: url("./construction-tape.svg"); + /* Include the soft shadow above content without darkening the backdrop twice. */ + mask-image: url("./construction-tape-mask.svg"); mask-mode: alpha; mask-size: 100% auto; mask-repeat: no-repeat; diff --git a/docs/implementation.md b/docs/implementation.md index 7f674dc..1aeb945 100644 --- a/docs/implementation.md +++ b/docs/implementation.md @@ -1,6 +1,6 @@ # Implementation and maintenance -The supplied 1200 × 900 PDF and its IDML source define the desktop composition. All original design files are preserved under `design/`. The photographic backdrop and construction tape are extracted together to preserve the print export's crop, tint and shadows. This background stays fixed to the viewport above 1024 px. A foreground layer masks the same original pixels to the tape outline so content scrolls behind the band; it does not intercept pointer events. On smaller screens the background and tape scroll with the page. The logo and Lumios Marker heading retain their original outlines as SVG artwork; all other content is semantic, selectable HTML in `index.html`. +The supplied 1200 × 900 PDF and its IDML source define the desktop composition. All original design files are preserved under `design/`. The photographic backdrop and construction tape are extracted together to preserve the print export's crop, tint and shadows. This background stays fixed to the viewport above 1024 px. A foreground layer masks the same original pixels to the tape outline and its soft shadow so content scrolls behind both; it does not intercept pointer events. `construction-tape-mask.svg` uses the original tape paths and the IDML shadow's 35% opacity, 2.7895 pt offsets and 3.945 pt blur size. Reusing the background pixels preserves uncovered artwork without applying its shadow twice. On smaller screens the background and tape scroll with the page. The logo and Lumios Marker heading retain their original outlines as SVG artwork; all other content is semantic, selectable HTML in `index.html`. CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link in `index.html` carries a content-hash query parameter; update that value when the CSS changes to avoid stale browser caches. Layout scales with the design above 1024 px. At smaller sizes the type becomes larger and wraps; at 600 px the bank and PayPal details stack in their original reading order. The mobile background separates the supplied tape from the photograph so that it remains above the logo while the photo fills a tall page. `assets/app.mjs` only enhances the IBAN with clipboard support and an accessible selection fallback. Contact and payment links work without JavaScript. diff --git a/docs/verification.md b/docs/verification.md index 1299b08..039f79d 100644 --- a/docs/verification.md +++ b/docs/verification.md @@ -31,3 +31,4 @@ Desktop band follow-up on 2026-09-07: - Real scrolling at 1200, 1025, 1024 and 390 px confirms the appropriate positioning and no horizontal overflow. Screenshot comparisons of the decorative area remain identical after scrolling on desktop and change on mobile. - Inspected the initial and scrolled desktop screenshots against the previously deployed composition; layout and artwork placement are retained. - A foreground mask keeps the opaque desktop tape above scrolling content. At 1200 px, a tape region previously covered by text stays pixel-identical before and after scrolling; the foreground does not intercept pointer events. Checks at 1025, 1024 and 390 px confirm the breakpoint and mobile scrolling behavior, with no horizontal overflow. +- The mask also includes the soft shadow. At 1200 px with 90 px of scrolling, 260 previously white logo pixels receive visible shading; differences are confined to the logo passing under the shadow. The initial desktop screenshot remains pixel-identical, confirming the background shadow is not doubled. diff --git a/index.html b/index.html index d8feb04..6558360 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@ - +