diff --git a/src/styles/global.css b/src/styles/global.css index 3ed3570..b671436 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -664,21 +664,28 @@ a:focus-visible, button:focus-visible { .story-section.is-visible { animation: none; } } -/* Unterkategorie-Chips auf den Hauptkategorie-Seiten */ -.subcategory-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 2.5rem; } +/* Unterkategorie-Chips auf den Hauptkategorie-Seiten — mittig, mit demselben Verlaufsrand-Stil + 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 { + position: relative; + isolation: isolate; display: inline-flex; align-items: center; - padding: 0.55em 1.1em; + padding: 0.65em 1.4em; border-radius: 999px; - font-size: 0.88rem; - font-weight: 600; - color: var(--c-text-muted); - background: var(--c-anthracite); - border: 1px solid rgba(244, 241, 247, 0.12); - transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); + font-size: 0.92rem; + font-weight: 700; + color: var(--c-text); + border: 1.5px solid transparent; + background: + 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. "Hallo, ich bin Frieda ..."). Dezente Box im Kartenstil des Shops, kein neues Designelement. */