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

Konto-Kopfkarte: "Meine Daten"-Button statt Abo-Button

Browse Source 
Der "Mein Abo verwalten"-Button in der Kopfkarte fällt wieder weg — der
Zugriff aufs Abo läuft ab jetzt nur noch über die eigene "Mein Abo"-Nav-
Kachel. Stattdessen wandert "Meine Daten" aus der Schnellnavigation direkt
in die Kopfkarte: ein neuer, gleich premium gestylter Button (Teal/Lila statt
Gold, gleiches wanderndes Glanzlicht) unten rechts in der Karte, der zum
Profil-Bereich springt.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 17:11:20 +02:00
co-authored by Claude Sonnet 5
parent a222d6c96e
commit 64110484de
6 changed files with 101 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.css
+53 -1
View File
@@ -1345,6 +1345,10 @@ a:focus-visible, button:focus-visible {
.account-head > * { position: relative; z-index: 1; }
.account-head-identity { display: flex; align-items: center; gap: 1rem; }
.account-head-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
/* Eigene volle Zeile unten in der Kopfkarte für den "Meine Daten"-Button — dank flex-wrap auf
.account-head bricht dieser 100%-breite Block automatisch in eine neue Zeile um, der Button
selbst bleibt rechtsbündig. Passt sich damit jeder Kartenhöhe an, ganz ohne absolute Positionierung. */
.account-head-daten-row { width: 100%; display: flex; justify-content: flex-end; margin-top: 0.9rem; }
.account-head h1 { margin: 0.2rem 0 0.5rem; }
.account-head .lead { margin: 0; max-width: 52ch; }
.account-head-sparkle {
@@ -1475,7 +1479,6 @@ a:focus-visible, button:focus-visible {
.account-nav-orders { --nav-color: #9b7fd6; --nav-delay: 0s; }
.account-nav-open { --nav-color: var(--c-accent); --nav-delay: 0.4s; }
.account-nav-wishlist { --nav-color: var(--c-sale); --nav-delay: 0.8s; }
.account-nav-data { --nav-color: #e3b23c; --nav-delay: 1.2s; }
.account-nav-loyalty { --nav-color: #6ecb8f; --nav-delay: 1.6s; }
/* Sobald der Treuebonus wirklich freigeschaltet ist (10/10), bekommt sein Knopf zusätzlich zur
normalen "Premium"-Optik noch einen kräftigeren, schneller pulsierenden Rahmen — soll auf
@@ -2400,6 +2403,55 @@ a:focus-visible, button:focus-visible {
}
@media (prefers-reduced-motion: reduce) { .btn-abo-hero, .btn-abo-hero::after, .btn-abo-hero-sparkle { animation: none; } }
/* "Meine Daten"-Button unten rechts in der Kopfkarte — dasselbe Premium-Prinzip wie der Abo-Held
oben (wanderndes Mehrfarb-Verlaufslicht am Rand + Glanzlicht + funkelndes Sternchen), aber in
Teal/Lila statt Gold, damit er sich klar von Abo-bezogenen Elementen abhebt und stattdessen zur
Akzentfarbe der Kopfkarte selbst passt (siehe "MEIN KONTO"-Eyebrow). */
.btn-daten-hero {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.3rem;
border-radius: var(--radius-l);
border: 1.5px solid transparent;
background:
linear-gradient(155deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
linear-gradient(120deg, var(--c-accent), #9b7fd6, var(--c-accent)) border-box;
background-size: 100% 100%, 300% 100%;
color: #d6f7ff;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.01em;
cursor: pointer;
animation: daten-hero-border-shift 5s ease-in-out infinite, daten-hero-glow 2.4s ease-in-out infinite;
transition: transform 0.2s var(--ease);
}
.btn-daten-hero:hover { transform: translateY(-2px) scale(1.03); }
.btn-daten-hero::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
transform: skewX(-18deg);
animation: account-head-shine 3.4s ease-in-out infinite;
pointer-events: none;
}
.btn-daten-hero-sparkle { display: inline-block; animation: account-nav-sparkle-twinkle 2.2s ease-in-out infinite; }
@keyframes daten-hero-border-shift {
0%, 100% { background-position: 0 0, 0% 50%; }
50% { background-position: 0 0, 100% 50%; }
}
@keyframes daten-hero-glow {
0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 30%, transparent), 0 0 16px -4px color-mix(in srgb, var(--c-accent) 60%, transparent); }
50% { box-shadow: 0 0 0 2px color-mix(in srgb, #9b7fd6 40%, transparent), 0 0 24px -2px color-mix(in srgb, #9b7fd6 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .btn-daten-hero, .btn-daten-hero::after, .btn-daten-hero-sparkle { animation: none; } }
/* Abosystem: drei Planvergleichs-Karten + Statuskarte + Benachrichtigungsliste. */
.abo-plans { margin: 1.4rem 0 1.6rem; }
.abo-plan-card {