diff --git a/src/pages/ch/checkout/index.astro b/src/pages/ch/checkout/index.astro index 8301ca4..2a8a54b 100644 --- a/src/pages/ch/checkout/index.astro +++ b/src/pages/ch/checkout/index.astro @@ -18,6 +18,8 @@ const t = useTranslations(lang);
+
+

{t.checkout.step2}

-
+
+ +

{t.checkout.step1}

@@ -59,6 +63,9 @@ const t = useTranslations(lang);
+
+
+

{t.checkout.step3}

@@ -85,8 +92,8 @@ const t = useTranslations(lang);

-
-

{t.checkout.shippingHintTitle}

+
+

🚚 {t.checkout.shippingHintTitle}

{t.checkout.shippingHint}

{t.checkout.shippingLink} diff --git a/src/pages/checkout/index.astro b/src/pages/checkout/index.astro index b591469..1d20900 100644 --- a/src/pages/checkout/index.astro +++ b/src/pages/checkout/index.astro @@ -18,6 +18,8 @@ const t = useTranslations(lang);
+
+

{t.checkout.step2}

-
+
+ +

{t.checkout.step1}

@@ -59,6 +63,9 @@ const t = useTranslations(lang);
+
+
+

{t.checkout.step3}

@@ -85,8 +92,8 @@ const t = useTranslations(lang);

-
-

{t.checkout.shippingHintTitle}

+
+

🚚 {t.checkout.shippingHintTitle}

{t.checkout.shippingHint}

{t.checkout.shippingLink} diff --git a/src/pages/en/checkout/index.astro b/src/pages/en/checkout/index.astro index 6151ca6..22cc9dc 100644 --- a/src/pages/en/checkout/index.astro +++ b/src/pages/en/checkout/index.astro @@ -18,6 +18,8 @@ const t = useTranslations(lang);
+
+

{t.checkout.step2}

-
+
+ +

{t.checkout.step1}

@@ -59,6 +63,9 @@ const t = useTranslations(lang);
+
+
+

{t.checkout.step3}

@@ -85,8 +92,8 @@ const t = useTranslations(lang);

-
-

{t.checkout.shippingHintTitle}

+
+

🚚 {t.checkout.shippingHintTitle}

{t.checkout.shippingHint}

{t.checkout.shippingLink} diff --git a/src/pages/fr/checkout/index.astro b/src/pages/fr/checkout/index.astro index 36f1cf8..70cb98d 100644 --- a/src/pages/fr/checkout/index.astro +++ b/src/pages/fr/checkout/index.astro @@ -18,6 +18,8 @@ const t = useTranslations(lang);
+
+

{t.checkout.step2}

-
+
+ +

{t.checkout.step1}

@@ -59,6 +63,9 @@ const t = useTranslations(lang);
+
+
+

{t.checkout.step3}

@@ -85,8 +92,8 @@ const t = useTranslations(lang);

-
-

{t.checkout.shippingHintTitle}

+
+

🚚 {t.checkout.shippingHintTitle}

{t.checkout.shippingHint}

{t.checkout.shippingLink} diff --git a/src/styles/global.css b/src/styles/global.css index fdc9e97..4e76a81 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -943,6 +943,77 @@ a:focus-visible, button:focus-visible { /* Checkout */ .checkout-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start; } +/* "1. Zahlungsart" und "2. Kontakt & Lieferadresse" nebeneinander statt gestapelt, getrennt + durch eine dezente Verlaufslinie mit kleinem Garnrollen-Symbol in der Mitte — spielt auf + "Bastelbedarf" an (wie eine Naht zwischen zwei Stoffteilen), bleibt aber ruhig & professionell. */ +.checkout-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.7rem; align-items: start; } +.checkout-split-col h3:first-child { margin-top: 0; } +.checkout-split-divider { + align-self: stretch; + position: relative; + width: 30px; + display: flex; + align-items: center; + justify-content: center; +} +.checkout-split-divider::before { + content: ""; + position: absolute; + top: 0.2rem; + bottom: 0.2rem; + left: 50%; + width: 1px; + background: linear-gradient( + 180deg, + transparent, + color-mix(in srgb, var(--c-accent) 55%, transparent) 12%, + color-mix(in srgb, var(--c-purple-glow) 55%, transparent) 50%, + color-mix(in srgb, var(--c-accent) 55%, transparent) 88%, + transparent + ); +} +.checkout-split-divider span { + position: relative; + z-index: 1; + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: var(--c-anthracite); + border: 1px solid color-mix(in srgb, var(--c-accent) 45%, transparent); + box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c-accent) 45%, transparent); + font-size: 0.95rem; +} +@media (max-width: 760px) { + .checkout-split { grid-template-columns: 1fr; gap: 0; } + .checkout-split-divider { width: auto; min-height: 0; height: 44px; margin: 0.2rem 0; } + .checkout-split-divider::before { top: 50%; bottom: auto; left: 0.2rem; right: 0.2rem; width: auto; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent); } +} + +/* Sidebar (Gutschein + Versandhinweis): dezenter Akzentstreifen links + "genähte" gestrichelte + Trennung zwischen den beiden Blöcken statt einer nüchternen durchgezogenen Linie. */ +.checkout-aside { position: relative; padding-left: 1.9rem; } +.checkout-aside::after { + content: ""; + position: absolute; + top: 1.5rem; + bottom: 1.5rem; + left: 1.05rem; + width: 3px; + border-radius: 2px; + background: linear-gradient(180deg, var(--c-accent), var(--c-purple-glow) 55%, var(--c-sale)); + opacity: 0.85; +} +.checkout-aside .coupon-row label { font-weight: 700; color: var(--c-text); font-size: 0.95rem; } +.checkout-aside h3 { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; } +.checkout-aside hr.stitched { + border: none; + border-top: 1.5px dashed rgba(244, 241, 247, 0.22); + margin: 1.2rem 0; +} + /* 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.85rem; } @@ -1018,7 +1089,52 @@ a:focus-visible, button:focus-visible { .pay-option:has(input:checked) span:not(.pay-icon) { color: var(--brand-color, var(--c-accent)); } .checkout-summary .row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 0.35rem 0; color: var(--c-text-muted); } -.checkout-summary .row.total { color: var(--c-text); font-weight: 700; font-size: 1.1rem; padding-top: 0.6rem; margin-top: 0.3rem; border-top: 1px solid rgba(244, 241, 247, 0.1); } + +/* "Gesamt"-Zeile wie ein Kassenbon-Abriss: gestrichelte Trennlinie + Summe in Marken-Verlauf, + damit der Endbetrag klar heraussticht statt einfach nur fett zu sein. */ +.checkout-summary .row.total { + font-weight: 700; + font-size: 1.3rem; + padding-top: 0.9rem; + margin-top: 0.5rem; + border-top: 1.5px dashed rgba(244, 241, 247, 0.22); +} +.checkout-summary .row.total span:first-child { color: var(--c-text); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; font-weight: 700; } +.checkout-summary .row.total span:last-child { + background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +/* Eigene, zum Radio-Button passende Checkbox statt nüchternem Browser-Kästchen. */ +.frm .checkbox-row input[type="checkbox"] { + appearance: none; + width: 21px; + height: 21px; + border-radius: 6px; + border: 2px solid rgba(244, 241, 247, 0.3); + flex-shrink: 0; + display: grid; + place-content: center; + cursor: pointer; + transition: border-color 0.2s var(--ease), background 0.2s var(--ease); +} +.frm .checkbox-row input[type="checkbox"]::before { + content: ""; + width: 12px; + height: 12px; + clip-path: polygon(14% 44%, 0 65%, 45% 100%, 100% 16%, 80% 0%, 43% 68%); + transform: scale(0); + transition: transform 0.15s var(--ease); + background: #08181c; +} +.frm .checkbox-row input[type="checkbox"]:checked { + border-color: var(--c-accent); + background: linear-gradient(135deg, var(--c-accent), var(--c-accent-hover)); +} +.frm .checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); } + @media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } } .danke { max-width: 560px; margin-inline: auto; }