diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index f8f2692..2ca7d96 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -44,7 +44,45 @@ box-shadow 0.25s ease; } -/* === Hover-Grundreaktion === */ +/* === ADVENTSKALENDER TÜRCHEN – FUNKTIONIERENDER STAND === */ + +.door { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + aspect-ratio: 1 / 1; + + /* Verlauf in CI-Farben */ + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--ci-darkgreen) 60%, transparent), + color-mix(in srgb, var(--ci-blue) 60%, transparent) + ); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + + border: 2px solid var(--ci-gold); + border-radius: 12px; + box-shadow: + 0 0 10px color-mix(in srgb, var(--ci-gold) 40%, transparent), + inset 0 0 6px rgba(255,255,255,0.18); + + font-family: "Bratonien2025", cursive; + font-size: 2.3vw; + font-weight: 400; + color: var(--ci-gold); + text-shadow: + 0 0 3px rgba(0,0,0,0.6), + 0 0 8px rgba(0,0,0,0.4); + + cursor: pointer; + transition: + transform 0.25s ease, + box-shadow 0.25s ease; +} + +/* Hover-Grundreaktion */ .door:hover { transform: scale(1.05); box-shadow: @@ -52,7 +90,7 @@ inset 0 0 10px rgba(255,255,255,0.35); } -/* === Goldener Schimmer (Lichtschein) === */ +/* === Goldener Schimmer beim Hover === */ @keyframes glitter-sheen { 0% { background-position: -150% 0; opacity: 0.0; } 25% { opacity: 1; } @@ -78,26 +116,5 @@ background-size: 200% 100%; mix-blend-mode: screen; animation: glitter-sheen 1.6s linear 1; - z-index: 1; /* unter dem Staub */ -} - -/* === Feenstaub-Glitter === */ -@keyframes fairy-glitter { - 0% { opacity: 0; transform: scale(0.6) translateY(0); } - 10% { opacity: 1; } - 40% { opacity: 0.9; transform: scale(1.1) translateY(-5%); } - 100% { opacity: 0; transform: scale(1.6) translateY(-20%); } -} - -.door:hover::before { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - z-index: 2; /* über dem Schimmer, unter dem Text */ - opacity: 0; - background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%); - filter: url(#sparkle-filter); - animation: fairy-glitter 1.6s ease-out; + z-index: 1; } \ No newline at end of file