diff --git a/src/pages/ch/shop/[kategorie].astro b/src/pages/ch/shop/[kategorie].astro index 0fc836b..50b93bd 100644 --- a/src/pages/ch/shop/[kategorie].astro +++ b/src/pages/ch/shop/[kategorie].astro @@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
{category.subcategories && category.subcategories.length > 0 && ( <> -

{t.shop.subcategoriesLabel}

+

{t.shop.subcategoriesLabel}

{category.subcategories.map((s) => ( {subcategoryChipLabel(s, lang)} @@ -41,7 +41,10 @@ const items = productsByCategory(category.slug); )} {items.length > 0 && ( -

{t.shop.mainCategoryLabel}

+ <> + + + )} {items.length > 0 ? (
{items.map((p) => )}
diff --git a/src/pages/en/shop/[kategorie].astro b/src/pages/en/shop/[kategorie].astro index cf27b0e..c61b294 100644 --- a/src/pages/en/shop/[kategorie].astro +++ b/src/pages/en/shop/[kategorie].astro @@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
{category.subcategories && category.subcategories.length > 0 && ( <> -

{t.shop.subcategoriesLabel}

+
{category.subcategories.map((s) => ( {subcategoryChipLabel(s, lang)} @@ -41,7 +41,10 @@ const items = productsByCategory(category.slug); )} {items.length > 0 && ( -

{t.shop.mainCategoryLabel}

+ <> + + + )} {items.length > 0 ? (
{items.map((p) => )}
diff --git a/src/pages/fr/shop/[kategorie].astro b/src/pages/fr/shop/[kategorie].astro index 88b0a9e..67efc6d 100644 --- a/src/pages/fr/shop/[kategorie].astro +++ b/src/pages/fr/shop/[kategorie].astro @@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
{category.subcategories && category.subcategories.length > 0 && ( <> -

{t.shop.subcategoriesLabel}

+
{category.subcategories.map((s) => ( {subcategoryChipLabel(s, lang)} @@ -41,7 +41,10 @@ const items = productsByCategory(category.slug); )} {items.length > 0 && ( -

{t.shop.mainCategoryLabel}

+ <> + + + )} {items.length > 0 ? (
{items.map((p) => )}
diff --git a/src/pages/shop/[kategorie].astro b/src/pages/shop/[kategorie].astro index e7a44cb..b58250c 100644 --- a/src/pages/shop/[kategorie].astro +++ b/src/pages/shop/[kategorie].astro @@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
{category.subcategories && category.subcategories.length > 0 && ( <> -

{t.shop.subcategoriesLabel}

+
{category.subcategories.map((s) => ( {subcategoryChipLabel(s, lang)} @@ -41,7 +41,10 @@ const items = productsByCategory(category.slug); )} {items.length > 0 && ( -

{t.shop.mainCategoryLabel}

+ <> + + + )} {items.length > 0 ? (
{items.map((p) => )}
diff --git a/src/styles/global.css b/src/styles/global.css index 1d16e34..7f5cffc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -948,14 +948,64 @@ a:focus-visible, button:focus-visible { .contact-highlight p { margin: 0 0 0.3rem; } .contact-highlight p:last-child { margin-bottom: 0; } +/* "Unterkategorien"-Beschriftung auf der Hauptkategorie-Seite — vorher reiner grauer + Kleinschrift-Text, kaum von Fließtext zu unterscheiden. Jetzt: Akzentfarbe statt Grau, ein + kleines Icon und zwei kurze Verlaufslinien links/rechts (dezenter "Trenner"-Look statt + auffälliger Balken), damit auf einen Blick klar ist: hier beginnt ein neuer Abschnitt. */ +.section-label-sub { + display: flex; + align-items: center; + justify-content: center; + gap: 0.6em; + font-size: 0.78rem; + letter-spacing: 0.16em; + text-transform: uppercase; + font-weight: 600; + color: var(--c-accent); + margin: 0 0 1rem; +} +.section-label-sub::before, +.section-label-sub::after { + content: ""; + height: 1px; + width: clamp(1.6rem, 6vw, 3.2rem); + background: linear-gradient(90deg, transparent, var(--c-purple-glow), transparent); + opacity: 0.7; +} + /* 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. */ + durchstöbert. Deutlich kräftiger als die "Unterkategorien"-Beschriftung (größer, mit + Verlaufs-Icon-Kreis und einem schmalen Leucht-Trenner darunter), weil sie die eigentliche + Produktreihe einleitet — bewusst nicht übertrieben (kein neuer Farbton, keine Animation). */ .kategorie-section-label { + display: flex; + align-items: center; + justify-content: center; + gap: 0.55em; text-align: center; font-size: 1.3rem; color: var(--c-accent); - margin: 2.2rem 0 1.3rem; + margin: 2.2rem 0 0; +} +.kategorie-section-label .label-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.9rem; + height: 1.9rem; + border-radius: 50%; + font-size: 1rem; + background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%); + color: #08181c; +} +.kategorie-section-label-rule { + height: 2px; + width: clamp(3.5rem, 16vw, 7rem); + margin: 0.9rem auto 1.3rem; + border-radius: 999px; + background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-purple-glow), var(--c-sale), transparent); + opacity: 0.85; } @media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }