diff --git a/src/styles/global.css b/src/styles/global.css index f46b608..5238414 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -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. */