From 346a0ed14e0465a84d0e16de05395aeab79d2c05 Mon Sep 17 00:00:00 2001 From: qcigano Date: Mon, 3 Aug 2026 02:22:57 +0200 Subject: [PATCH] Kontaktseite: "Direkter Kontakt" & "Antwortzeit" in eigene, auffaellige Kiste gepackt Standen bisher als freier Text neben dem Formular. Jetzt in einer eigenen Karte mit demselben Verlaufsrand-Look wie der Rest der Seite, zusaetzlich mit einem sanften Akzent-Glow (wie bei den Charakter-Story-Boxen) und kleinen Icons vor den Ueberschriften, damit die wichtigen Kontaktinfos etwas mehr Aufmerksamkeit bekommen, ohne aus dem Design zu fallen. Co-Authored-By: Claude Sonnet 5 --- src/pages/ch/kontakt/index.astro | 6 ++--- src/pages/en/kontakt/index.astro | 6 ++--- src/pages/fr/kontakt/index.astro | 6 ++--- src/pages/kontakt/index.astro | 6 ++--- src/styles/global.css | 40 ++++++++++++++++++++++++++++++++ 5 files changed, 52 insertions(+), 12 deletions(-) diff --git a/src/pages/ch/kontakt/index.astro b/src/pages/ch/kontakt/index.astro index 0ec5e9e..a918c51 100644 --- a/src/pages/ch/kontakt/index.astro +++ b/src/pages/ch/kontakt/index.astro @@ -43,11 +43,11 @@ const t = useTranslations(lang);

{t.contact.todoNote}

-
-

{t.contact.directTitle}

+
+

{t.contact.directTitle}

E-Mail: info@vans-diy-bastelbedarf.de {t.contact.emailPlaceholderNote}

{t.contact.orderNote}

-

{t.contact.responseTitle}

+

{t.contact.responseTitle}

{t.contact.responseNote}

diff --git a/src/pages/en/kontakt/index.astro b/src/pages/en/kontakt/index.astro index 10a62de..d7147d8 100644 --- a/src/pages/en/kontakt/index.astro +++ b/src/pages/en/kontakt/index.astro @@ -43,11 +43,11 @@ const t = useTranslations(lang);

{t.contact.todoNote}

-
-

{t.contact.directTitle}

+
+

{t.contact.directTitle}

E-Mail: info@vans-diy-bastelbedarf.de {t.contact.emailPlaceholderNote}

{t.contact.orderNote}

-

{t.contact.responseTitle}

+

{t.contact.responseTitle}

{t.contact.responseNote}

diff --git a/src/pages/fr/kontakt/index.astro b/src/pages/fr/kontakt/index.astro index d68d0bb..2cfaba5 100644 --- a/src/pages/fr/kontakt/index.astro +++ b/src/pages/fr/kontakt/index.astro @@ -43,11 +43,11 @@ const t = useTranslations(lang);

{t.contact.todoNote}

-
-

{t.contact.directTitle}

+
+

{t.contact.directTitle}

E-Mail: info@vans-diy-bastelbedarf.de {t.contact.emailPlaceholderNote}

{t.contact.orderNote}

-

{t.contact.responseTitle}

+

{t.contact.responseTitle}

{t.contact.responseNote}

diff --git a/src/pages/kontakt/index.astro b/src/pages/kontakt/index.astro index 2cc60d0..3cd5ef8 100644 --- a/src/pages/kontakt/index.astro +++ b/src/pages/kontakt/index.astro @@ -43,11 +43,11 @@ const t = useTranslations(lang);

{t.contact.todoNote}

-
-

{t.contact.directTitle}

+
+

{t.contact.directTitle}

E-Mail: info@vans-diy-bastelbedarf.de {t.contact.emailPlaceholderNote}

{t.contact.orderNote}

-

{t.contact.responseTitle}

+

{t.contact.responseTitle}

{t.contact.responseNote}

diff --git a/src/styles/global.css b/src/styles/global.css index c5ee65e..1d16e34 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -908,6 +908,46 @@ a:focus-visible, button:focus-visible { .character-card h3 { font-size: 1.15rem; margin: 0.1rem 0 0; } .character-card-desc { margin: 0; color: var(--c-text-muted); font-size: 0.92rem; } +/* Kontaktseite: "Direkter Kontakt" + "Antwortzeit" bekommen eine eigene, auffälligere Kiste + statt schlichtem freiem Text neben dem Formular — passend zum restlichen Verlaufsrand-/ + Glow-Look der Seite (siehe .card, .character-story), aber ohne deren Anführungszeichen- + Wasserzeichen, weil es hier nicht um eine Zitat-Vorstellung geht, sondern um wichtige + Kontaktinfos, die etwas mehr Aufmerksamkeit verdienen. */ +.contact-highlight { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.2rem; + background: + linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box, + linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%) border-box; + box-shadow: + var(--shadow-card), + 0 0 46px -14px color-mix(in srgb, var(--c-accent) 40%, transparent), + 0 0 80px -22px color-mix(in srgb, var(--c-sale) 28%, transparent); +} +.contact-highlight:hover { + box-shadow: + var(--shadow-card-hover), + 0 0 60px -12px color-mix(in srgb, var(--c-accent) 50%, transparent), + 0 0 100px -18px color-mix(in srgb, var(--c-sale) 36%, transparent); +} +.contact-highlight h3 { + display: flex; + align-items: center; + gap: 0.5em; + margin: 0 0 0.5rem; + font-size: 1.25rem; + background: linear-gradient(120deg, var(--c-text) 45%, var(--c-accent) 130%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; +} +.contact-highlight h3:not(:first-child) { margin-top: 1.3rem; } +.contact-highlight p { margin: 0 0 0.3rem; } +.contact-highlight p:last-child { margin-bottom: 0; } + /* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade durchstöbert, fällt bewusst etwas mehr auf als die stille "Unterkategorien"-Beschriftung. */