From 887ce2f043f6b577d37f27d85a33cd66ccc8c89c Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 12:12:40 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 86 +++++-------------------------- 1 file changed, 12 insertions(+), 74 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 2ca7d96..006955d 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -5,8 +5,7 @@ font-style: normal; font-display: swap; } - -/* === ADVENTSKALENDER TÜRCHEN – FINALE VERSION MIT GLITTERSTAUB === */ + /* === Adventskalender Türchen – stabile Grundversion === */ .door { position: absolute; @@ -15,7 +14,7 @@ justify-content: center; aspect-ratio: 1 / 1; - /* Verlauf nach Bratonien-CI */ + /* Farbverlauf in Bratonien-CI */ background: linear-gradient( 180deg, color-mix(in srgb, var(--ci-darkgreen) 60%, transparent), @@ -41,80 +40,19 @@ cursor: pointer; transition: transform 0.25s ease, - box-shadow 0.25s ease; + box-shadow 0.25s ease, + background 0.25s ease; } -/* === 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 */ +/* Hover nur mit leichtem Leuchten und Zoom */ .door:hover { transform: scale(1.05); + background: linear-gradient( + 180deg, + color-mix(in srgb, var(--ci-gold) 20%, var(--ci-darkgreen)), + color-mix(in srgb, var(--ci-creamwhite) 15%, var(--ci-blue)) + ); box-shadow: - 0 0 18px color-mix(in srgb, var(--ci-gold) 60%, transparent), - inset 0 0 10px rgba(255,255,255,0.35); -} - -/* === Goldener Schimmer beim Hover === */ -@keyframes glitter-sheen { - 0% { background-position: -150% 0; opacity: 0.0; } - 25% { opacity: 1; } - 75% { opacity: 1; } - 100% { background-position: 150% 0; opacity: 0.0; } -} - -.door:hover::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - background-image: - repeating-linear-gradient( - 115deg, - transparent 0%, - color-mix(in srgb, var(--ci-gold) 30%, transparent) 2%, - transparent 4%, - color-mix(in srgb, var(--ci-creamwhite) 25%, transparent) 5%, - transparent 7% - ); - background-size: 200% 100%; - mix-blend-mode: screen; - animation: glitter-sheen 1.6s linear 1; - z-index: 1; + 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), + inset 0 0 10px rgba(255,255,255,0.25); } \ No newline at end of file