feat(website): integrate KoalaSearching, KoalaImprintl, and KoalaPrivacy mascots with custom animations and tight layouts

This commit is contained in:
Timo
2026-05-30 19:05:35 +02:00
parent 0db0b5eea2
commit 54ffbfa4bd
7 changed files with 48 additions and 1 deletions
+36
View File
@@ -1759,6 +1759,42 @@ html.lang-de [lang="en"] {
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.join-status-mascot.searching-mascot {
width: 175px; /* Slightly wider due to antenna to keep main body scale identical */
}
.join-status-pulse {
animation: mascot-gentle-pulse 2s ease-in-out infinite;
}
@keyframes mascot-gentle-pulse {
0% {
transform: scale(0.96);
filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.15));
}
50% {
transform: scale(1.04);
filter: drop-shadow(0 8px 20px rgba(99, 102, 241, 0.35));
}
100% {
transform: scale(0.96);
filter: drop-shadow(0 4px 10px rgba(99, 102, 241, 0.15));
}
}
.legal-mascot {
display: block;
width: 180px;
height: auto;
margin: -0.75rem auto 0.4rem auto;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.legal-mascot:hover {
transform: scale(1.06) rotate(1.5deg);
}
.status-ring {
position: absolute;
width: 90px;