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

Kontaktseite: "Direkter Kontakt" & "Antwortzeit" in eigene, auffaellige Kiste gepackt

Browse Source 
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 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 02:22:57 +02:00
co-authored by Claude Sonnet 5
parent b6f8b4339f
commit 346a0ed14e
5 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+40
View File
@@ -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. */