From 20663740d2650f6e027326a3a2241f083158a5ce Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 19:22:22 +0000 Subject: [PATCH] adventskalender/2025/css/main.css aktualisiert --- adventskalender/2025/css/main.css | 221 +++++++++++------------------- 1 file changed, 81 insertions(+), 140 deletions(-) diff --git a/adventskalender/2025/css/main.css b/adventskalender/2025/css/main.css index 912dcda..7b103c7 100644 --- a/adventskalender/2025/css/main.css +++ b/adventskalender/2025/css/main.css @@ -1,3 +1,5 @@ +/* Bratonien Adventskalender 2025 - main.css */ + @font-face { font-family: "Bratonien2025"; src: url("../../shared/fonts/PinyonScript-Regular.ttf") format("truetype"); @@ -6,7 +8,10 @@ font-display: swap; } -.door { +/* === Gemeinsame Basis für Türen & Flügel === */ + +.door, +.fluegel { position: absolute; display: flex; align-items: center; @@ -23,13 +28,13 @@ 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); + inset 0 0 6px rgba(255, 255, 255, 0.18); font-family: "Bratonien2025", cursive; font-size: 2.3vw; color: var(--ci-gold); text-shadow: - 0 0 3px rgba(0,0,0,0.6), - 0 0 8px rgba(0,0,0,0.4); + 0 0 3px rgba(0, 0, 0, 0.6), + 0 0 8px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.6s ease, @@ -37,8 +42,19 @@ background 0.25s ease; transform-style: preserve-3d; perspective: 800px; + z-index: 5; } +/* === Türspezifisch === */ + +.door { + z-index: 5; +} + +.door.hinge-left { transform-origin: left center; } +.door.hinge-right { transform-origin: right center; } +.door.double { transform-origin: center; } + .door:hover, .door.hover-proxy { transform: scale(1.05); @@ -49,27 +65,18 @@ ); box-shadow: 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), - inset 0 0 10px rgba(255,255,255,0.25); + inset 0 0 10px rgba(255, 255, 255, 0.25); } -.door.hinge-left { transform-origin: left center; } -.door.hinge-right { transform-origin: right center; } -.door.double { transform-origin: center; } - -.door.open.hinge-left { - --door-rotation: -115deg; - transform: rotateY(var(--door-rotation)); - box-shadow: - 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), - inset 0 0 10px rgba(255,255,255,0.2); -} +.door.open.hinge-left { --door-rotation: -115deg; } +.door.open.hinge-right { --door-rotation: 115deg; } +.door.open.hinge-left, .door.open.hinge-right { - --door-rotation: 115deg; transform: rotateY(var(--door-rotation)); box-shadow: 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), - inset 0 0 10px rgba(255,255,255,0.2); + inset 0 0 10px rgba(255, 255, 255, 0.2); } .door.open:hover, @@ -77,34 +84,66 @@ transform: rotateY(var(--door-rotation)) scale(1.05); box-shadow: 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), - inset 0 0 10px rgba(255,255,255,0.25); + inset 0 0 10px rgba(255, 255, 255, 0.25); } -.door.double { - position: absolute; - display: flex; - align-items: stretch; - justify-content: space-between; - perspective: 800px; - border-radius: 12px; - overflow: visible; +/* === Flügeltüren === */ + +.fluegel.left { transform-origin: left center; border-radius: 12px 0 0 12px; } +.fluegel.right { transform-origin: right center; border-radius: 0 12px 12px 0; } + +.fluegel.left:hover, +.fluegel.hover-proxy.left { + transform: scale(1.05); + transform-origin: left center; + 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) 50%, transparent), + inset 0 0 10px rgba(255, 255, 255, 0.25); } -.door.double .door-number { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-family: "Bratonien2025", cursive; - font-size: 2.3vw; - color: var(--ci-gold); - pointer-events: none; - z-index: 8; - text-shadow: - 0 0 3px rgba(0, 0, 0, 0.6), - 0 0 8px rgba(0, 0, 0, 0.4); +.fluegel.right:hover, +.fluegel.hover-proxy.right { + transform: scale(1.05); + transform-origin: right center; + 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) 50%, transparent), + inset 0 0 10px rgba(255, 255, 255, 0.25); } +.fluegel.open.left { --fluegel-rotation: -115deg; } +.fluegel.open.right { --fluegel-rotation: 115deg; } + +.fluegel.open.left { + transform: rotateY(var(--fluegel-rotation)); + box-shadow: + 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), + inset 0 0 10px rgba(255, 255, 255, 0.2); +} + +.fluegel.open.right { + transform: rotateY(var(--fluegel-rotation)); + box-shadow: + 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), + inset 0 0 10px rgba(255, 255, 255, 0.2); +} + +.fluegel.open.left:hover, +.fluegel.open.right:hover { + transform: rotateY(var(--fluegel-rotation)) scale(1.05); +} + +/* === Openfield === */ + .openfield { position: absolute; display: block; @@ -157,7 +196,7 @@ rgba(0, 0, 0, 0.12); box-shadow: 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), - inset 0 0 10px rgba(255,255,255,0.25); + inset 0 0 10px rgba(255, 255, 255, 0.25); } .door.open:hover + .openfield { @@ -173,102 +212,4 @@ box-shadow: 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent), inset 0 0 10px rgba(255, 255, 255, 0.25); -} - -.fluegel { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - aspect-ratio: 1 / 1; - - background: linear-gradient( - 180deg, - color-mix(in srgb, var(--ci-darkgreen) 35%, transparent), - color-mix(in srgb, var(--ci-blue) 35%, transparent) - ); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - - border: 2px solid var(--ci-gold); - 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; - 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.6s ease, - box-shadow 0.3s ease, - background 0.25s ease; - - transform-style: preserve-3d; - perspective: 800px; - z-index: 5; -} - -/* Positionierung + Öffnung */ - -.fluegel.left { - transform-origin: left center; - border-top-left-radius: 12px; - border-bottom-left-radius: 12px; -} - -.fluegel.right { - transform-origin: right center; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; -} - -.fluegel.open.left { - transform: rotateY(-115deg); - box-shadow: - 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), - inset 0 0 10px rgba(255,255,255,0.2); -} - -.fluegel.open.right { - transform: rotateY(115deg); - box-shadow: - 0 0 14px color-mix(in srgb, var(--ci-gold) 45%, transparent), - inset 0 0 10px rgba(255,255,255,0.2); -} - -/* Hover */ - -.fluegel:hover, -.fluegel.hover-proxy { - 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) 50%, transparent), - inset 0 0 10px rgba(255,255,255,0.25); -} - -.fluegel.open.left:hover, -.fluegel.open.right:hover { - transform: rotateY(var(--fluegel-rotation)) scale(1.05); -} - -/* Für konsistentes Verhalten */ -.fluegel.open.left { --fluegel-rotation: -115deg; } -.fluegel.open.right { --fluegel-rotation: 115deg; } - -.fluegel.hover-proxy.left { - transform-origin: left center; -} - -.fluegel.hover-proxy.right { - transform-origin: right center; -} +} \ No newline at end of file