Zahlungskarten im Checkout kräftiger/edler gestaltet
Jede Zahlungsart-Karte hat jetzt einen deutlich sichtbaren Farbschein in der jeweiligen Markenfarbe (auch im Ruhezustand, nicht erst bei Hover), einen feinen Farbstreifen am oberen Rand und einen dezenten Glanz-Sweep beim Hover — wirkt hochwertiger/"geiler", bleibt aber gedeckt genug fürs dunkle Gesamtdesign. Kreditkarte (Visa/Mastercard) bekommt einen eigenen Gold-Akzent statt der bisherigen, kaum sichtbaren Farbe. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
c9a9370039
commit
7549ec239b
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
|
||||
<div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon-cards" aria-hidden="true">
|
||||
<span class="mini-card mini-card-visa">
|
||||
|
||||
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
|
||||
<div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon-cards" aria-hidden="true">
|
||||
<span class="mini-card mini-card-visa">
|
||||
|
||||
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
|
||||
<div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon-cards" aria-hidden="true">
|
||||
<span class="mini-card mini-card-visa">
|
||||
|
||||
@@ -54,7 +54,7 @@ const t = useTranslations(lang);
|
||||
<p class="pay-connect-status" id="klarna-status"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-card" style="--brand-color:#7fa8c9; --brand-bg:#241f3d;">
|
||||
<div class="pay-card" style="--brand-color:#e3b23c; --brand-bg:#241f3d;">
|
||||
<label class="pay-option">
|
||||
<span class="pay-icon-cards" aria-hidden="true">
|
||||
<span class="mini-card mini-card-visa">
|
||||
|
||||
+52
-14
@@ -1749,27 +1749,63 @@ a:focus-visible, button:focus-visible {
|
||||
beim Anklicken den passenden "Verbinden"-Bereich direkt in sich selbst auf (reines CSS über
|
||||
:has(), kein Zwischenschritt, kein separates Panel weiter unten). */
|
||||
.payment-options { display: grid; gap: 0.85rem; }
|
||||
/* Kräftigere Markenfarbigkeit pro Karte, auch im Ruhezustand (nicht erst bei Hover/Auswahl):
|
||||
ein sanfter Farbschein aus der Ecke ("Glow"), ein feiner Farbstreifen oben und ein dezenter
|
||||
Glanz-Sweep beim Hover — bewusst schon deutlich sichtbar, aber gedeckt genug fürs dunkle
|
||||
Gesamtbild, kein grelles Regenbogen-Grid. */
|
||||
.pay-card {
|
||||
border: 1.5px solid rgba(244, 241, 247, 0.12);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
border: 1.5px solid color-mix(in srgb, var(--brand-color, var(--c-accent)) 38%, rgba(244, 241, 247, 0.14));
|
||||
border-radius: var(--radius-l);
|
||||
background: linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
|
||||
background:
|
||||
radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--brand-color, var(--c-accent)) 26%, transparent), transparent 62%),
|
||||
linear-gradient(155deg, var(--c-anthracite), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||||
box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--brand-color, var(--c-accent)) 60%, transparent);
|
||||
transition: border-color 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.2s var(--ease);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pay-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--brand-color, var(--c-accent)), transparent);
|
||||
opacity: 0.65;
|
||||
z-index: 1;
|
||||
}
|
||||
.pay-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -60%;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
|
||||
transform: skewX(-18deg);
|
||||
transition: left 0.65s ease;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.pay-card:hover::after { left: 130%; }
|
||||
.pay-card:hover {
|
||||
border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent);
|
||||
border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 70%, transparent);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--brand-color, var(--c-accent)) 70%, transparent);
|
||||
}
|
||||
.pay-card:has(input:checked) {
|
||||
border-color: var(--brand-color, var(--c-accent));
|
||||
background: linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 16%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 8px 20px -8px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
|
||||
background:
|
||||
radial-gradient(130% 160% at 0% 0%, color-mix(in srgb, var(--brand-color, var(--c-accent)) 38%, transparent), transparent 62%),
|
||||
linear-gradient(155deg, color-mix(in srgb, var(--brand-color, var(--c-accent)) 20%, var(--c-anthracite)), color-mix(in srgb, var(--c-anthracite) 85%, #000));
|
||||
box-shadow: 0 0 0 1.5px var(--brand-color, var(--c-accent)), 0 18px 34px -12px color-mix(in srgb, var(--brand-color, var(--c-accent)) 78%, transparent);
|
||||
}
|
||||
.pay-card:has(input:checked)::before { opacity: 1; }
|
||||
.pay-card:has(input:checked) .pay-option span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }
|
||||
|
||||
.pay-option {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.1em;
|
||||
@@ -1794,8 +1830,10 @@ a:focus-visible, button:focus-visible {
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, rgba(0, 0, 0, 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
|
||||
@@ -1807,7 +1845,7 @@ a:focus-visible, button:focus-visible {
|
||||
nebeneinander, in unveränderten Originalfarben (Visa-Blau bzw. Mastercard Rot/Orange) —
|
||||
genau die Kombination, die auf einer Kreditkarten-Zahlungsoption üblich und von beiden
|
||||
Marken als "Acceptance Mark" vorgesehen ist. */
|
||||
.pay-icon-cards { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; height: 52px; }
|
||||
.pay-icon-cards { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; height: 52px; position: relative; z-index: 2; }
|
||||
.mini-card {
|
||||
width: 46px;
|
||||
height: 32px;
|
||||
@@ -1815,10 +1853,10 @@ a:focus-visible, button:focus-visible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||
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-card-mastercard { background: #16161f; }
|
||||
.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); }
|
||||
|
||||
/* Marken-Icon-Badges (PayPal, Klarna): echtes Markenlogo (SVG) mittig auf einer Kachel in der
|
||||
jeweiligen offiziellen Markenfarbe statt einem groben Buchstaben-Platzhalter. */
|
||||
|
||||
Reference in New Issue
Block a user