From fa5f7510e4c50e62207e69ef5a8b26603835de36 Mon Sep 17 00:00:00 2001 From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com> Date: Tue, 7 Jul 2026 22:26:13 +0200 Subject: [PATCH] Add a corner-light sheen to package cards instead of flat color fills Flat backgrounds looked dull on the gray tiers. Each card now gets a subtle radial gradient anchored top-right (lighter tone fading into the tier's base color), giving it depth without touching where text sits - title/price/list are all left-aligned, so the highlight only ever falls on empty card area, keeping legibility intact. Co-Authored-By: Claude Sonnet 5 --- hifi-src/src/pages/public/ModelPage.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx index b8dd8fc..aff7937 100644 --- a/hifi-src/src/pages/public/ModelPage.jsx +++ b/hifi-src/src/pages/public/ModelPage.jsx @@ -54,8 +54,8 @@ const mixHsl = (c1, c2, t) => [0, 1, 2].map((i) => c1[i] + (c2[i] - c1[i]) * t); // verlaesslicher als ein RGB-Luminanz-Naeherungswert, da satte Mitteltoene sonst // faelschlich als "hell genug fuer dunklen Text" gelten wuerden) als auch die RGB-Werte. const stopColor = (stops, t) => { - const [h, s, l] = t <= 0.5 ? mixHsl(stops[0], stops[1], t / 0.5) : mixHsl(stops[1], stops[2], (t - 0.5) / 0.5); - return { rgb: hslToRgb(h, s, l), lightness: l }; + const hsl = t <= 0.5 ? mixHsl(stops[0], stops[1], t / 0.5) : mixHsl(stops[1], stops[2], (t - 0.5) / 0.5); + return { rgb: hslToRgb(...hsl), lightness: hsl[2], hsl }; }; export default function ModelPage() { @@ -113,13 +113,22 @@ export default function ModelPage() { const border = stopColor(stops.border, tierT); // Ab hier reicht der Hintergrund nicht mehr zum Kontrastieren mit dunklem Text - // satte gruene Mitteltoene brauchen (wie die Buttons) helle statt dunkle Schrift. + // Diese Entscheidung haengt bewusst an der Basis-Farbe, nicht am Lichtschein unten, + // damit der Text unabhaengig vom Verlauf IMMER gut lesbar bleibt. const isDarkCard = bg.lightness < 60; const glowAlpha = (0.05 + tierT * 0.35).toFixed(2); + // Leichter "Lichtschein" von oben rechts statt flacher Flaeche - kommt von oben + // rechts, weil dort nie Text steht (Titel/Preis/Liste sind linksbuendig), damit die + // Aufhellung die Lesbarkeit nirgends beeintraechtigt. + const [bh, bs, bl] = bg.hsl; + const highlight = hslToRgb(bh, Math.max(bs - 8, 0), Math.min(bl + 16, 99)); + return { isDarkCard, style: { backgroundColor: `rgb(${bg.rgb.join(', ')})`, + backgroundImage: `radial-gradient(135% 160% at 88% -20%, rgb(${highlight.join(', ')}) 0%, rgb(${bg.rgb.join(', ')}) 55%)`, borderColor: `rgb(${border.rgb.join(', ')})`, borderWidth: tierT > 0.12 ? 2 : 1, boxShadow: