From 2c4689471d93d309273ce3b0fbf05b937a1c21a1 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Thu, 9 Jul 2026 00:36:23 +0200
Subject: [PATCH] Fix package strip layout width and replace the road glow with
 a generated texture

Cards were fixed-width and forced to scroll even when the row had room to
show all of them; they now flex between 190-240px and the strip row gets
its own wider container instead of the site's normal 1152px content width,
so a full tier lineup fits on typical desktop screens without scrolling.
The scrollbar itself is now a slim themed bar for the cases where scrolling
is still needed.

Also swaps the thin procedural SVG line for a Higgsfield-generated glow
texture, masked per card into that tier's accent color. Along the way,
fixes a real CSS bug where the WebP mask rendered as a solid block instead
of the intended thin line, because the image's alpha channel made the
browser default to alpha-based masking instead of reading its luminance -
fixed by forcing mask-mode: luminance.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 hifi-src/src/assets/textures/road-glow.webp | Bin 0 -> 3442 bytes
 hifi-src/src/pages/public/ModelPage.jsx     |  85 ++++++++++++--------
 2 files changed, 53 insertions(+), 32 deletions(-)
 create mode 100644 hifi-src/src/assets/textures/road-glow.webp

diff --git a/hifi-src/src/assets/textures/road-glow.webp b/hifi-src/src/assets/textures/road-glow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e35cf79c5d19c2d0591d70bdbc003f3a7e73942a
GIT binary patch
literal 3442
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

literal 0
HcmV?d00001

diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx
index 749e25c..96cacfb 100644
--- a/hifi-src/src/pages/public/ModelPage.jsx
+++ b/hifi-src/src/pages/public/ModelPage.jsx
@@ -11,6 +11,7 @@ import { useSiteSettings } from '../../context/SiteSettingsContext.jsx';
 import textureGraphite from '../../assets/textures/metal-graphite.webp';
 import textureDeepBlue from '../../assets/textures/metal-deep-blue.webp';
 import textureWarmBronze from '../../assets/textures/metal-warm-bronze.webp';
+import roadGlowTexture from '../../assets/textures/road-glow.webp';
 
 // Eine generierte, gebuerstete Metall-Oberflaechenstruktur je Theme (statt Fotos pro
 // Paket, die es fuer echte Kundenpakete nicht gibt) - wird per "overlay"-Blendmodus mit
@@ -172,10 +173,29 @@ export default function ModelPage() {
     // gleicher Helligkeit wie der Hintergrund landen und unsichtbar werden koennte.
     const mutedColor = `rgb(${hslToRgb(0, 0, contrastingL(38)).join(', ')})`;
     const glowAlpha = (0.1 + tierT * 0.3).toFixed(2);
-    // Der "Lichtweg" im Kartenhintergrund faengt bei der Einstiegsstufe kaum sichtbar an
-    // und wird zur teuersten Stufe hin kraeftiger/leuchtender - genau wie der Rahmen-Glow.
-    const roadOpacity = 0.14 + tierT * 0.22;
-    const roadGlowOpacity = 0.15 + tierT * 0.55;
+    // Der "Lichtweg" im Kartenhintergrund ist ein generiertes, fotografisches Glow-Motiv
+    // (weisser Lichtstreif auf Schwarz) statt einer duennen Vektorlinie - per CSS-Maske
+    // wird die weisse Kurve zur Alphamaske fuer die jeweilige Akzentfarbe, sodass das
+    // Motiv bei JEDER Preisstufe/JEDEM Theme automatisch in der richtigen Farbe leuchtet.
+    // Schon die Einstiegsstufe bleibt sichtbar praesent statt fast unsichtbar - die
+    // Preis-Staffelung zeigt sich in der Intensitaet, nicht im "Ob ueberhaupt sichtbar".
+    const roadOpacity = (0.55 + tierT * 0.45).toFixed(2);
+    const roadGlowOpacity = (0.2 + tierT * 0.45).toFixed(2);
+    const roadMaskStyle = {
+      backgroundColor: `rgb(${accentRgb.join(', ')})`,
+      WebkitMaskImage: `url(${roadGlowTexture})`,
+      maskImage: `url(${roadGlowTexture})`,
+      // WebP-Dateien bringen einen (durchgehend deckenden) Alphakanal mit - ohne explizites
+      // "luminance" bevorzugt CSS per Default den Alphakanal statt der Helligkeit, wodurch
+      // die Maske komplett deckend (= volle Flaeche statt duenner Kurve) gerendert wuerde.
+      maskMode: 'luminance',
+      WebkitMaskSize: 'cover',
+      maskSize: 'cover',
+      WebkitMaskPosition: 'center',
+      maskPosition: 'center',
+      WebkitMaskRepeat: 'no-repeat',
+      maskRepeat: 'no-repeat',
+    };
     // Die Metall-Textur wird als eigene Ebene mit eigener Deckkraft gefahren (statt fest
     // per background-blend-mode verschmolzen) - bei der hellen Einstiegsstufe bleibt sie
     // kaum sichtbar, damit die Karte wirklich hell/weiss bleibt statt durch die dunkle
@@ -194,6 +214,7 @@ export default function ModelPage() {
       priceColor: `rgb(${priceRgb.join(', ')})`,
       roadOpacity,
       roadGlowOpacity,
+      roadMaskStyle,
       textureStyle: {
         backgroundImage: `url(${cardTexture})`,
         backgroundSize: '480px 480px',
@@ -256,11 +277,22 @@ export default function ModelPage() {
               <h2 className="text-2xl font-bold text-white sm:text-3xl">{t('modelPage.tiersHeading')(packages.length)}</h2>
               <p className="mx-auto mt-2 max-w-xl text-sm text-neutral-400">{t('modelPage.tiersSubheading')}</p>
             </div>
+          </div>
 
+          {/* Eigener, deutlich breiterer Rahmen fuer die Kartenreihe im Scroll-Band-Modus:
+              die restliche Seite haelt sich an die normale Lesebreite (max-w-6xl), aber
+              die Kacheln sollen auf breiten Bildschirmen wirklich die volle Breite nutzen
+              koennen, statt unnoetig frueh in den Scroll-Modus zu wechseln. */}
+          <div className={isStripLayout ? 'mx-auto max-w-[1800px] px-4 sm:px-6' : 'mx-auto max-w-6xl px-4 sm:px-6'}>
             <div
               className={
                 isStripLayout
-                  ? 'flex items-stretch gap-5 overflow-x-auto pb-2 snap-x snap-mandatory'
+                  ? // flex statt fixer Breite: Kacheln teilen sich die volle Zeilenbreite und
+                    // wachsen bis max-w, sobald genug Platz da ist - erst wenn selbst die
+                    // Mindestbreite nicht mehr fuer alle passt, greift das seitliche Scrollen.
+                    // Der Scrollbalken bekommt ein dezentes, zum dunklen Design passendes
+                    // Styling statt des vollen System-Scrollbalkens.
+                    'flex items-stretch gap-5 overflow-x-auto pb-3 snap-x snap-mandatory [scrollbar-width:thin] [scrollbar-color:rgba(255,255,255,0.25)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-white/25'
                   : 'grid gap-6 sm:grid-cols-2 xl:grid-cols-3'
               }
             >
@@ -269,10 +301,10 @@ export default function ModelPage() {
                   style,
                   priceColor,
                   mutedColor,
-                  accentColor,
                   glowLineStyle,
                   roadOpacity,
                   roadGlowOpacity,
+                  roadMaskStyle,
                   textureStyle,
                   isDarkCard,
                 } = styleOf(pkg);
@@ -283,36 +315,25 @@ export default function ModelPage() {
                     style={style}
                     className={
                       isStripLayout
-                        ? 'relative flex w-[190px] shrink-0 snap-start flex-col overflow-hidden rounded-xl border p-6 sm:w-[210px]'
+                        ? 'relative flex grow shrink basis-[190px] min-w-[190px] max-w-[240px] snap-start flex-col overflow-hidden rounded-xl border p-6 sm:basis-[210px] sm:p-7'
                         : 'relative flex flex-col overflow-hidden rounded-xl border p-8'
                     }
                   >
-                    {/* Abstrakter "Lichtweg" im Hintergrund - je teurer die Stufe, desto praesenter/leuchtender.
-                        Fixe Aspect-Ratio + "slice" statt "none", damit Strich/Kurve bei jeder Kartenhoehe
-                        gleichmaessig aussieht statt verzerrt gestreckt zu werden. */}
-                    <svg
-                      viewBox="0 0 200 260"
-                      preserveAspectRatio="xMidYMid slice"
-                      className="pointer-events-none absolute inset-0 h-full w-full"
+                    {/* Abstrakter "Lichtweg" im Hintergrund - ein generiertes Foto-Glow-Motiv
+                        (weisser Lichtstreif auf Schwarz), per CSS-Maske in die jeweilige
+                        Akzentfarbe eingefaerbt. Zwei Ebenen: eine weich verwischte Halo-Ebene
+                        fuer die Tiefe darunter, eine scharfe Ebene fuer die Kontur darueber -
+                        je teurer die Stufe, desto praesenter/leuchtender beide. */}
+                    <div
+                      className="pointer-events-none absolute inset-0"
+                      style={{ ...roadMaskStyle, opacity: roadGlowOpacity, filter: 'blur(18px)' }}
                       aria-hidden="true"
-                    >
-                      <path
-                        d="M 20 250 C 60 250 70 190 100 150 C 130 110 160 130 175 90 C 185 65 190 40 195 10"
-                        fill="none"
-                        stroke={accentColor}
-                        strokeWidth="14"
-                        strokeLinecap="round"
-                        style={{ opacity: roadGlowOpacity, filter: 'blur(7px)' }}
-                      />
-                      <path
-                        d="M 20 250 C 60 250 70 190 100 150 C 130 110 160 130 175 90 C 185 65 190 40 195 10"
-                        fill="none"
-                        stroke={accentColor}
-                        strokeWidth="2.5"
-                        strokeLinecap="round"
-                        style={{ opacity: roadOpacity }}
-                      />
-                    </svg>
+                    />
+                    <div
+                      className="pointer-events-none absolute inset-0"
+                      style={{ ...roadMaskStyle, opacity: roadOpacity }}
+                      aria-hidden="true"
+                    />
 
                     {/* Metall-Textur als eigene Ebene mit eigener, stufenabhaengiger Deckkraft -
                         so bleibt die helle Einstiegsstufe wirklich hell statt durch die dunkle