diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 6fbeb66..fbf5211 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -6,7 +6,7 @@ font-display: swap; } -/* === Türchen-Stil === */ +/* === Adventskalender Türchen (finale Version mit Glitzern) === */ .door { position: absolute; display: flex; @@ -14,7 +14,7 @@ justify-content: center; aspect-ratio: 1 / 1; - /* Verlauf auf Basis der CI-Farben */ + /* Basis-Verlauf – CI-Farben mit Transparenz */ background: linear-gradient( 180deg, color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), @@ -29,7 +29,6 @@ 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), inset 0 0 6px rgba(255,255,255,0.18); - /* Schrift */ font-family: "Bratonien2025", cursive; font-size: 2.3vw; font-weight: 400; @@ -45,23 +44,34 @@ background 0.2s ease; } -/* Glitzer-Animation */ -@keyframes glitter { +/* === Keyframes === */ +@keyframes glitter-sheen { 0% { background-position: -200% 0; opacity: 0.0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { background-position: 200% 0; opacity: 0.0; } } -/* Hover-Effekt mit goldenem Glitzern */ +@keyframes sparkle { + 0%,100% { opacity: 0; } + 40%,60% { opacity: 1; } +} + +/* === Hover Effekte === */ +.door:hover { + transform: scale(1.05); + box-shadow: + 0 0 16px color-mix(in srgb, var(--ci-gold) 60%, transparent), + inset 0 0 10px rgba(255,255,255,0.35); +} + +/* Goldener Schimmer über dem Türchen */ .door:hover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; - - /* goldener Lichtschimmer */ background: linear-gradient( 120deg, transparent 0%, @@ -69,4 +79,20 @@ transparent 90% ); background-size: 200% 100%; - animation: glitter 1.8s ease-in-out 1; \ No newline at end of file + animation: glitter-sheen 1.8s ease-in-out 1; +} + +/* Kleine Glitzerpunkte */ +.door:hover::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + background-image: + radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%), + radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); + background-size: 10% 10%, 8% 8%; + background-position: 40% 30%, 70% 65%; + animation: sparkle 1.8s ease-in-out 1; +} \ No newline at end of file