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

Unterkategorien-Chips: mittig ausgerichtet + Verlaufsrand-Stil statt schlichter Pillen

Browse Source 
Die Chip-Reihe war linksbündig statt zentriert und nutzte einfache
Einzelfarb-Pillen. Jetzt mittig auf der Seite und im selben
Verlaufsrand-Stil wie die Karten der Seite (cyan → lila → rosa,
sanftes Leuchten, Hover-Anhebung) — wirkt dadurch "speziell" und
markentypisch, bleibt aber ruhig genug für den professionellen
Gesamtlook.

Verifiziert per Puppeteer-Screenshot.
This commit is contained in:
qcigano
2026-08-02 20:55:42 +02:00
parent a61336b9ee
commit 0ee884364d
1 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+17 -10
View File
@@ -664,21 +664,28 @@ a:focus-visible, button:focus-visible {
.story-section.is-visible { animation: none; } .story-section.is-visible { animation: none; }
} }
/* Unterkategorie-Chips auf den Hauptkategorie-Seiten */ /* Unterkategorie-Chips auf den Hauptkategorie-Seiten — mittig, mit demselben Verlaufsrand-Stil
.subcategory-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2.5rem; } wie die Karten der Seite (siehe .card), statt schlichter Einzelfarb-Pillen. Wirkt dadurch
"speziell" und zur Marke passend, bleibt aber ruhig/professionell statt aufdringlich. */
.subcategory-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.6rem 0 2.5rem; }
.subcategory-chip { .subcategory-chip {
position: relative;
isolation: isolate;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 0.55em 1.1em; padding: 0.65em 1.4em;
border-radius: 999px; border-radius: 999px;
font-size: 0.88rem; font-size: 0.92rem;
font-weight: 600; font-weight: 700;
color: var(--c-text-muted); color: var(--c-text);
background: var(--c-anthracite); border: 1.5px solid transparent;
border: 1px solid rgba(244, 241, 247, 0.12); background:
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 50%, var(--c-sale) 100%) border-box;
box-shadow: var(--shadow-card);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
} }
.subcategory-chip:hover { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-anthracite)); } .subcategory-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); filter: brightness(1.1); }
/* Persönliche Vorstellung eines Plushie-Charakters auf seiner Unterkategorie-Seite (z.B. /* Persönliche Vorstellung eines Plushie-Charakters auf seiner Unterkategorie-Seite (z.B.
"Hallo, ich bin Frieda ..."). Dezente Box im Kartenstil des Shops, kein neues Designelement. */ "Hallo, ich bin Frieda ..."). Dezente Box im Kartenstil des Shops, kein neues Designelement. */