diff --git a/src/pages/ch/konto/angemeldet.astro b/src/pages/ch/konto/angemeldet.astro index 1f033b6..882c675 100644 --- a/src/pages/ch/konto/angemeldet.astro +++ b/src/pages/ch/konto/angemeldet.astro @@ -96,6 +96,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend {t.accountDash.statOpen} diff --git a/src/pages/en/konto/angemeldet.astro b/src/pages/en/konto/angemeldet.astro index 1d2715c..dd4b176 100644 --- a/src/pages/en/konto/angemeldet.astro +++ b/src/pages/en/konto/angemeldet.astro @@ -96,6 +96,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend {t.accountDash.statOpen} diff --git a/src/pages/fr/konto/angemeldet.astro b/src/pages/fr/konto/angemeldet.astro index d898c1d..24f608a 100644 --- a/src/pages/fr/konto/angemeldet.astro +++ b/src/pages/fr/konto/angemeldet.astro @@ -96,6 +96,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend {t.accountDash.statOpen} diff --git a/src/pages/konto/angemeldet.astro b/src/pages/konto/angemeldet.astro index 553ecff..8dfb2b8 100644 --- a/src/pages/konto/angemeldet.astro +++ b/src/pages/konto/angemeldet.astro @@ -96,6 +96,7 @@ const offeneSendungen = beispielBestellungen.filter((b) => b.status === "versend {t.accountDash.statOpen} diff --git a/src/styles/global.css b/src/styles/global.css index f8abed4..a0bb495 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1388,7 +1388,54 @@ a:focus-visible, button:focus-visible { .account-nav-orders { --nav-color: #9b7fd6; } .account-nav-wishlist { --nav-color: var(--c-sale); } .account-nav-open { --nav-color: var(--c-accent); } -.account-nav-data { --nav-color: #e3b23c; } +/* "Meine Daten" ist bewusst der auffälligste der vier Knöpfe — der eigene Bereich zum Profil- + Pflegen darf ruhig etwas "Besonderes" ausstrahlen: ein sanft wanderndes Mehrfarb-Verlaufslicht + im Hintergrund, ein pulsierender Glanzrand und ein funkelndes Sternchen. Bewusst gedeckt genug, + um nicht kitschig zu wirken, aber klar erkennbar "premium" im Vergleich zu den anderen drei. */ +.account-nav-data { + --nav-color: #e3b23c; + position: relative; + background: linear-gradient( + 120deg, + color-mix(in srgb, #9b7fd6 22%, transparent), + color-mix(in srgb, #e3b23c 20%, transparent), + color-mix(in srgb, var(--c-sale) 20%, transparent), + color-mix(in srgb, #9b7fd6 22%, transparent) + ); + background-size: 300% 100%; + animation: account-nav-data-shift 7s ease-in-out infinite, account-nav-data-glow 3.2s ease-in-out infinite; +} +.account-nav-data .account-nav-label { + font-weight: 700; + background: linear-gradient(90deg, #c3b0ea, #e3b23c, var(--c-sale)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.account-nav-sparkle { + position: absolute; + top: 0.55rem; + right: 0.9rem; + font-size: 0.85rem; + animation: account-nav-sparkle-twinkle 2.4s ease-in-out infinite; + pointer-events: none; +} +@keyframes account-nav-data-shift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} +@keyframes account-nav-data-glow { + 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #e3b23c 45%, transparent), 0 0 16px -6px color-mix(in srgb, #e3b23c 60%, transparent); } + 50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #9b7fd6 55%, transparent), 0 0 20px -4px color-mix(in srgb, #9b7fd6 70%, transparent); } +} +@keyframes account-nav-sparkle-twinkle { + 0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(-8deg); } + 50% { opacity: 1; transform: scale(1.2) rotate(8deg); } +} +@media (prefers-reduced-motion: reduce) { + .account-nav-data { animation: none; } + .account-nav-sparkle { animation: none; } +} @media (max-width: 560px) { .account-nav { flex-direction: column; } .account-nav-item + .account-nav-item { border-left: none; border-top: 1px solid rgba(244, 241, 247, 0.12); }