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 12:12:40 +00:00
parent 16755a8157
commit 887ce2f043
1 changed files with 12 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,8 +5,7 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
/* === Adventskalender Türchen – stabile Grundversion === */
/* === ADVENTSKALENDER TÜRCHEN – FINALE VERSION MIT GLITTERSTAUB === */
.door { .door {
position: absolute; position: absolute;
@@ -15,7 +14,7 @@
justify-content: center; justify-content: center;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* Verlauf nach Bratonien-CI */ /* Farbverlauf in Bratonien-CI */
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
color-mix(in srgb, var(--ci-darkgreen) 60%, transparent), color-mix(in srgb, var(--ci-darkgreen) 60%, transparent),
@@ -41,80 +40,19 @@
cursor: pointer; cursor: pointer;
transition: transition:
transform 0.25s ease, transform 0.25s ease,
box-shadow 0.25s ease; box-shadow 0.25s ease,
background 0.25s ease;
} }
/* === ADVENTSKALENDER TÜRCHEN – FUNKTIONIERENDER STAND === */ /* Hover nur mit leichtem Leuchten und Zoom */
.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 { .door:hover {
transform: scale(1.05); transform: scale(1.05);
box-shadow: background: linear-gradient(
0 0 18px color-mix(in srgb, var(--ci-gold) 60%, transparent), 180deg,
inset 0 0 10px rgba(255,255,255,0.35); color-mix(in srgb, var(--ci-gold) 20%, var(--ci-darkgreen)),
} color-mix(in srgb, var(--ci-creamwhite) 15%, var(--ci-blue))
/* === 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%; box-shadow:
mix-blend-mode: screen; 0 0 18px color-mix(in srgb, var(--ci-gold) 50%, transparent),
animation: glitter-sheen 1.6s linear 1; inset 0 0 10px rgba(255,255,255,0.25);
z-index: 1;
} }