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

Zahlungsart-Icons deutlich größer, echte Markenfarben-Verläufe, edlere Karten

Browse Source 
Icon-Kacheln bei PayPal/Klarna/Banküberweisung von 34px auf 52px vergrößert
und mit echten Marken-Farbverläufen statt flacher Einzelfarbe versehen
(PayPal-Blau, Klarna-Rosa mit schwarzem Logo, dezentes Bank-Blaugrau).
Auswahlkarten insgesamt größer, mit Verlaufshintergrund, größerem
Radio-Button und weicherem Hover-/Auswahl-Glow für einen fertigeren,
"aus einem Guss"-Look.
This commit is contained in:
qcigano
2026-08-02 19:09:43 +02:00
parent 334df113ae
commit 83f381dcd2
5 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/en/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/pages/fr/checkout/index.astro
+3 -3
View File
@@ -21,17 +21,17 @@ const t = useTranslations(lang);
<h3>{t.checkout.step2}</h3>
<div class="payment-options">
<label class="pay-option" style="--brand-color:#009cde; --brand-bg:#003087;">
<span class="pay-icon" style="background:#003087;">P</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #0070ba, #003087); color:#fff;">P</span>
<span>PayPal</span>
<input type="radio" name="pay" value="paypal" checked />
</label>
<label class="pay-option" style="--brand-color:#ffb3c7; --brand-bg:#17120f;">
<span class="pay-icon" style="background:#17120f; color:#ffb3c7;">K</span>
<span class="pay-icon" style="background:linear-gradient(160deg, #ffc9d8, #ffb3c7); color:#0a0a0a;">K</span>
<span>Klarna</span>
<input type="radio" name="pay" value="klarna" />
</label>
<label class="pay-option" style="--brand-color:#7fa8c9; --brand-bg:#3b5a76;">
<span class="pay-icon" style="background:#3b5a76;">🏦</span>
<span class="pay-icon pay-icon-emoji" style="background:linear-gradient(160deg, #4d7599, #2c4258);">🏦</span>
<span>{t.checkout.bankTransfer}</span>
<input type="radio" name="pay" value="ueberweisung" />
</label>
src/styles/global.css
+31 -23
View File
@@ -945,43 +945,51 @@ a:focus-visible, button:focus-visible {
/* Zahlungsart als richtige, klickbare Auswahlkarten statt Standard-Radiobuttons — passend zum
restlichen "Karten mit Verlaufsrand"-Stil der Seite (siehe .card). */
.payment-options { display: grid; gap: 0.7rem; }
.payment-options { display: grid; gap: 0.85rem; }
.pay-option {
position: relative;
display: flex;
align-items: center;
gap: 0.9em;
padding: 0.95em 1.1em;
border: 1px solid rgba(244, 241, 247, 0.12);
border-radius: var(--radius-m);
font-size: 0.95rem;
font-weight: 600;
gap: 1.1em;
padding: 1.15em 1.3em;
border: 1.5px solid rgba(244, 241, 247, 0.12);
border-radius: var(--radius-l);
font-size: 1.02rem;
font-weight: 700;
cursor: pointer;
background: var(--c-anthracite);
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);
}
.pay-option:hover { border-color: color-mix(in srgb, var(--brand-color, var(--c-accent)) 45%, transparent); transform: translateY(-1px); }
.pay-option: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);
}
/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Buchstabe/Symbol) statt schlichtem
Emoji — wirkt "fertig", nicht wie ein Platzhalter. */
/* Icon-Badge im echten Markenlogo-Stil (farbige Kachel + Wortmarke) statt schlichtem Emoji —
groß und mit sanftem Verlauf/Glanz, wirkt "fertig", nicht wie ein Platzhalter. */
.pay-option .pay-icon {
width: 34px;
height: 34px;
border-radius: 9px;
width: 52px;
height: 52px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-size: 1.6rem;
font-weight: 800;
color: #fff;
font-style: italic;
letter-spacing: -0.03em;
line-height: 1;
flex-shrink: 0;
box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.6);
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%);
background-blend-mode: overlay;
}
.pay-option .pay-icon.pay-icon-emoji { font-size: 1.7rem; font-style: normal; }
.pay-option input[type="radio"] {
appearance: none;
width: 19px;
height: 19px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid rgba(244, 241, 247, 0.3);
margin-left: auto;
@@ -993,8 +1001,8 @@ a:focus-visible, button:focus-visible {
}
.pay-option input[type="radio"]::before {
content: "";
width: 10px;
height: 10px;
width: 12px;
height: 12px;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s var(--ease);
@@ -1004,8 +1012,8 @@ a:focus-visible, button:focus-visible {
.pay-option input[type="radio"]:checked { border-color: var(--brand-color, var(--c-accent)); }
.pay-option:has(input:checked) {
border-color: var(--brand-color, var(--c-accent));
background: color-mix(in srgb, var(--brand-color, var(--c-accent)) 12%, var(--c-anthracite));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-color, var(--c-accent)) 55%, transparent), 0 4px 14px -6px color-mix(in srgb, var(--brand-color, var(--c-accent)) 65%, transparent);
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);
}
.pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); }