182 lines
4.1 KiB
CSS
182 lines
4.1 KiB
CSS
#awards-container {
|
|
position:fixed;
|
|
pointer-events: none;
|
|
z-index:9999;
|
|
}
|
|
|
|
.stackable-container > div {
|
|
position: absolute;
|
|
}
|
|
|
|
.stackable-container div,
|
|
.stackable-container img, .ricardo {
|
|
animation-iteration-count: infinite !important;
|
|
animation-timing-function: linear !important;
|
|
}
|
|
|
|
/*seal*/
|
|
.wholesome img {
|
|
width: 100px !important;
|
|
height: 89.5px !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.wholesome img {
|
|
width: 40px !important;
|
|
height: 27px !important;
|
|
}
|
|
}
|
|
|
|
.wholesome {animation: sealX 9s alternate}
|
|
.wholesome img {animation: sealY 10s alternate}
|
|
|
|
.wholesome:nth-child(even),
|
|
.wholesome:nth-child(n+2):nth-child(n+3) img
|
|
{animation-direction: alternate-reverse}
|
|
|
|
@keyframes sealX {
|
|
100% {transform: translateX(98vw)}
|
|
}
|
|
@keyframes sealY {
|
|
100% {transform: translateY(85vh)}
|
|
}
|
|
|
|
/*train*/
|
|
.train img {
|
|
width: 100px !important;
|
|
height: 51px !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.train img {
|
|
width: 40px !important;
|
|
height: 20px !important;
|
|
}
|
|
}
|
|
|
|
.train:nth-child(1), .scooter:nth-child(1) {top:2%}
|
|
.train:nth-child(2), .scooter:nth-child(2) {top:27%}
|
|
.train:nth-child(3), .scooter:nth-child(3) {top:52%}
|
|
.train:nth-child(4), .scooter:nth-child(4) {top:77%}
|
|
|
|
.train {animation: train 12s;}
|
|
.train:nth-child(odd) {animation-direction: reverse;}
|
|
.train:nth-child(odd) img {transform: scaleX(-1);}
|
|
|
|
@keyframes train {
|
|
from {transform: translateX(-3vw)}
|
|
to {transform: translateX(99vw)}
|
|
}
|
|
|
|
/*scooter*/
|
|
.scooter img {
|
|
width: 100px !important;
|
|
height: 135px !important;
|
|
}
|
|
@media (max-width: 992px) {
|
|
.scooter img {
|
|
width: 40px !important;
|
|
height: 54px !important;
|
|
}
|
|
}
|
|
|
|
.scooter {animation: train 14s;}
|
|
.scooter:nth-child(even) {animation-direction: reverse;}
|
|
.scooter:nth-child(even) img {transform: scaleX(-1);}
|
|
|
|
/*confetti*/
|
|
.confetti {
|
|
background-image: url(/assets/images/confetti2.webp);
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/*fireworks*/
|
|
.firework img {
|
|
max-width: 15rem;
|
|
}
|
|
|
|
/*ricardo*/
|
|
.ricardo {
|
|
position: fixed !important;
|
|
bottom: 0;
|
|
}
|
|
.ricardo img {
|
|
max-height: min(30vw,15rem);
|
|
}
|
|
|
|
.ricardo1 {animation: ricardo1Xa 5.8s, ricardo1Xb 11.6s, ricardo1Y 23.2s;}
|
|
.ricardo2 {animation: ricardo2 8.5s;}
|
|
.ricardo3 {animation: ricardo3 10s;}
|
|
|
|
@keyframes ricardo1Xa {
|
|
0% {right: -200px}
|
|
50% {right: 200px}
|
|
100% {right: -200px}
|
|
}
|
|
|
|
@keyframes ricardo1Xb {
|
|
0%{left:unset}
|
|
49% {left: unset}
|
|
50% {left: -200px}
|
|
75% {left:200px}
|
|
100% {left: -200px}
|
|
}
|
|
|
|
@keyframes ricardo1Y {
|
|
0% {bottom:20vh}
|
|
24% {bottom: 20vh}
|
|
25% {bottom: 60vh}
|
|
49% {bottom: 60vh}
|
|
50% {bottom: 10vh}
|
|
74% {bottom: 10vh}
|
|
75% {bottom: 50vh}
|
|
99% {bottom: 50vh}
|
|
100% {bottom: 20vh}
|
|
}
|
|
|
|
|
|
@keyframes ricardo2 {
|
|
0% { opacity: 1; left: 0; right: unset;}
|
|
18% {opacity: 0; left: 0; right: unset;}
|
|
19% {opacity: 0; left: unset; right: 20vw;}
|
|
20% {opacity: 1; left: unset; right: 20vw;}
|
|
38% {opacity: 0; left: unset; right: 20vw;}
|
|
39% {opacity: 0; left: 20vw; right: unset;}
|
|
40% {opacity: 1; left: 20vw; right: unset;}
|
|
58% {opacity: 0; left: 20vw; right: unset;}
|
|
59% {opacity: 0; left: unset;right: 60vw;}
|
|
60% {opacity: 1; left: unset; right: 60vw;}
|
|
78% {opacity: 0; left: unset; right: 60vw;}
|
|
79% {opacity: 0; left: 80vw; right: unset;}
|
|
80% {opacity: 1; left: 80vw; right: unset;}
|
|
98% {opacity: 0; left: 80vw; right: unset;}
|
|
99% {opacity: 0; left: 0; right: unset;}
|
|
100% {opacity: 1; left: 0; right: unset;}
|
|
}
|
|
|
|
@keyframes ricardo3 {
|
|
50% {transform: translateX(100vw); top: unset; bottom: 0;}
|
|
51% {transform: translateX(100vw) rotate(180deg); top: 0; bottom: unset;}
|
|
100% {transform: translateX(-15vw) rotate(180deg); top: 0; bottom: unset;}
|
|
}
|
|
|
|
@keyframes tilt {
|
|
0% {transform: rotate(0deg);}
|
|
25% {transform: rotate({{p.award_count("tilt", v)}}deg);}
|
|
75% {transform: rotate(-{{p.award_count("tilt", v)}}deg);}
|
|
100% {transform: rotate(0deg);}
|
|
}
|
|
@media (max-width: 720px) {
|
|
@keyframes tilt {
|
|
0% {transform: rotate(0deg);}
|
|
25% {transform: rotate({{p.award_count("tilt", v)/4}}deg);}
|
|
75% {transform: rotate(-{{p.award_count("tilt", v)/4}}deg);}
|
|
100% {transform: rotate(0deg);}
|
|
}
|
|
}
|
|
.tilt {
|
|
animation-name: tilt;
|
|
animation-duration: 60s !important;
|
|
animation-iteration-count: infinite !important;
|
|
animation-direction: alternate !important;
|
|
animation-timing-function: linear !important;
|
|
}
|