Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/2025/css/main.css aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 19:22:22 +00:00
parent e9b34d57ca
commit 20663740d2
1 changed files with 81 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
adventskalender/2025/css/main.css
View File

@@ -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;
}
}