max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the package tier gradient mostly gray/black instead of saturated green

Browse source 
The saturated green mid-tones clashed with the green price text/border and
didn't read as premium. Background now ramps through neutral gray to black,
with green kept only as the accent (border, glow, price, button). Also
fixes a real contrast bug found along the way: the muted price-label text
was nearly invisible on mid-gray cards because its color happened to sit
at almost the same lightness as the background.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-07 22:09:20 +02:00
parent ddfcf8bd5e
commit 38a1269e9e
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
hifi-src/src/pages/public/ModelPage.jsx
View file

@ -10,34 +10,34 @@ import { useLanguage } from '../../context/LanguageContext.jsx';
import { useTheme } from '../../context/ThemeContext.jsx'; import { useTheme } from '../../context/ThemeContext.jsx';
// Farbverlauf fuer die Paket-Kacheln: von schlicht/hell (guenstigste Option) bis // Farbverlauf fuer die Paket-Kacheln: von schlicht/hell (guenstigste Option) bis
// dunkel/leuchtend (teuerste Option). Interpoliert wird in HSL statt RGB, mit dem // dunkel/schwarz (teuerste Option). Die FLAECHE bleibt dabei fast neutral grau/schwarz
// Farbton (Hue) konstant nahe "Markengruen" - eine direkte RGB-Mischung von hellem // (nur ein Hauch Gruenstich) - ein voll gesaettigter Gruenverlauf in der Mitte sah nicht
// Mintgruen zu Schwarz liefe sonst mittendrin durch ein schmutziges Graugruen statt // premium aus, sondern kollidierte mit dem gruenen Preistext/Rahmen. Gruen bleibt der
// gleichmaessig satter zu wirken. Drei Stuetzpunkte (t=0/0.5/1), dazwischen linear // alleinige Akzent (Rahmen + Leucht-Schatten). Interpoliert wird in HSL statt RGB (drei
// interpoliert - dadurch bekommt JEDES Paket eine eigene Abstufung statt nur 2-3 // Stuetzpunkte bei t=0/0.5/1, dazwischen linear) - dadurch bekommt JEDES Paket eine
// fester Stile, egal ob ein Modell 2 oder 12 Pakete hat. // eigene Abstufung statt nur 2-3 fester Stile, egal ob ein Modell 2 oder 12 Pakete hat.
const LIGHT_STOPS = { const LIGHT_STOPS = {
bg: [ bg: [
[0, 0, 100], [0, 0, 100],
[88, 55, 92], [90, 6, 85],
[100, 45, 7], [95, 10, 7],
], ],
border: [ border: [
[0, 0, 90], [0, 0, 88],
[83, 60, 65], [85, 55, 62],
[88, 63, 40], [88, 63, 42],
], ],
}; };
const DARK_STOPS = { const DARK_STOPS = {
bg: [ bg: [
[0, 0, 9], [0, 0, 9],
[95, 35, 14], [95, 8, 18],
[105, 55, 5], [100, 12, 4],
], ],
border: [ border: [
[0, 0, 15], [0, 0, 16],
[95, 45, 35], [95, 42, 34],
[92, 65, 60], [92, 62, 56],
], ],
}; };
@ -184,13 +184,13 @@ export default function ModelPage() {
{pkg.name} {pkg.name}
</h2> </h2>
{pkg.tagline && ( {pkg.tagline && (
<p className={`mt-1 text-sm ${isDarkCard ? 'text-neutral-400' : 'text-neutral-500'}`}> <p className={`mt-1 text-sm ${isDarkCard ? 'text-neutral-300' : 'text-neutral-500'}`}>
{pkg.tagline} {pkg.tagline}
</p> </p>
)} )}
<div className="my-4"> <div className="my-4">
<p className={`text-xs uppercase tracking-wide ${isDarkCard ? 'text-neutral-500' : 'text-neutral-400'}`}> <p className={`text-xs uppercase tracking-wide ${isDarkCard ? 'text-neutral-300' : 'text-neutral-400'}`}>
{t('modelPage.totalPrice')} {t('modelPage.totalPrice')}
</p> </p>
<p className={`text-2xl font-extrabold ${isDarkCard ? 'text-brand-400' : 'text-brand-600'}`}> <p className={`text-2xl font-extrabold ${isDarkCard ? 'text-brand-400' : 'text-brand-600'}`}>