DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

PayPal-Kachel: Visa/Mastercard im selben Politur-Niveau wie das PayPal-Badge, eigene Farbe unten

Browse Source 
Auf ausdrücklichen Wunsch: die Visa-/Mastercard-Badges in der unteren Hälfte sehen jetzt genauso
"fertig" aus wie das PayPal-Badge oben — größer (48x48 statt 40x27), mit demselben weichen
Glanz-Verlauf, kräftigem Schlagschatten in der jeweiligen Markenfarbe und Lift-Effekt beim
Hovern. Die Markenfarben selbst bleiben unverändert (Visa weiß, Mastercard schwarz).

Die untere Hälfte hat jetzt außerdem eine EIGENE Farbgebung statt eines Blau-Abklatschs der
PayPal-Hälfte darüber: dezentes Visa-Blau unten links, Mastercard-Orange/Rot oben rechts,
beide nur angedeutet (niedrige Deckkraft) auf dunklem Grund, damit Text und Karten weiterhin
klar lesbar bleiben.

Getestet: Breiten-Sweep 390–1440px ohne Überlappung mit der Radio-Markierung (die Karten sind
jetzt größer, deshalb erneut geprüft), Screenshots Desktop + Mobil, Markup in allen 4 Sprachen
bestätigt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-04 11:24:13 +02:00
co-authored by Claude Sonnet 5
parent c9d80c9ac0
commit bcd80f12fe
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+25 -7
View File
@@ -2432,8 +2432,8 @@ a:focus-visible, button:focus-visible {
justify-content: center;
box-shadow: 0 4px 14px -3px var(--mini-glow, rgba(0, 0, 0, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.mini-card-visa { background: #fff; --mini-glow: rgba(20, 52, 203, 0.55); }
.mini-card-mastercard { background: #16161f; --mini-glow: rgba(235, 0, 27, 0.45); }
.mini-card-visa { background: #fff; --mini-glow: rgba(20, 52, 203, 0.55); --mini-base: #fff; }
.mini-card-mastercard { background: #16161f; --mini-glow: rgba(235, 0, 27, 0.45); --mini-base: #16161f; }
/* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */
@@ -2528,9 +2528,14 @@ a:focus-visible, button:focus-visible {
genau die Anordnung aus dem Referenz-Screenshot (Text/Karten links, Auswahlpunkt rechts). */
align-items: flex-start;
padding-right: 2.6rem;
/* Eigene Farbgebung statt eines Blau-Abklatschs der PayPal-Hälfte darüber: ein sanftes
Visa-Blau unten links, ein Mastercard-Orange/Rot oben rechts — beide Markenfarben klingen
im dunklen Untergrund nur an (niedrige Deckkraft), damit Text und Karten weiterhin klar
lesbar bleiben, die untere Hälfte aber sichtbar "ihre eigene" ist. */
background:
radial-gradient(120% 160% at 88% 100%, color-mix(in srgb, #1ea7ff 16%, transparent), transparent 60%),
linear-gradient(155deg, color-mix(in srgb, #003087 22%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 88%, black));
radial-gradient(130% 170% at 4% 100%, color-mix(in srgb, #1434cb 24%, transparent), transparent 58%),
radial-gradient(130% 170% at 96% 0%, color-mix(in srgb, #ff5f1f 20%, transparent), transparent 58%),
linear-gradient(160deg, #15151f, #0a0a10);
}
.pp-badge {
width: 46px;
@@ -2551,9 +2556,22 @@ a:focus-visible, button:focus-visible {
.pp-divider { position: relative; z-index: 3; height: 2px; background: linear-gradient(90deg, transparent, #bfe4ff 15%, #fff 50%, #bfe4ff 85%, transparent); box-shadow: 0 0 14px 1px rgba(191, 228, 255, 0.65); flex-shrink: 0; }
.pp-cards-caption { color: rgba(244, 241, 247, 0.75); font-size: 0.85rem; font-weight: 400; text-align: left; }
.pp-cards-row { display: flex; align-items: center; gap: 0.5em; }
.mini-card-lg { width: 40px; height: 27px; border-radius: 6px; flex-shrink: 0; }
.mini-card-lg svg { width: 22px; height: auto; }
.pp-cards-row { display: flex; align-items: center; gap: 0.55em; }
/* Dasselbe Politur-Niveau wie das PayPal-Badge oben (.pp-badge): weicher Glanz-Verlauf oben
links, kräftiger Schlagschatten in der jeweiligen Markenfarbe, dezenter innerer Lichtrand —
nur die Grundfarbe bleibt markengetreu (Visa weiß, Mastercard schwarz), siehe --mini-base. */
.mini-card-lg {
width: 48px;
height: 48px;
border-radius: 13px;
flex-shrink: 0;
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
background-color: var(--mini-base, #fff);
box-shadow: 0 6px 16px -4px var(--mini-glow, rgba(0, 0, 0, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.35);
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pay-option-paypal-split:hover .mini-card-lg { transform: translateY(-1px); }
.mini-card-lg svg { width: 27px; height: auto; }
/* Der native Radio-Knopf ist bei dieser Kachel keine Zeile mehr, sondern eine eigene, kleine
Markierung unten rechts auf der Kachel — genau wie im Referenz-Screenshot. */