.theme-newyear .quiz {
background-image: url(//veloralounge.com/wp-content/themes/velora-lounge/img/new-year/quiz.webp);
}
.theme-newyear .btn.btn_blue {
background-image: url(//veloralounge.com/wp-content/themes/velora-lounge/img/new-year/btn-bg.png);
}
.theme-newyear .widget__open {
aspect-ratio: 172/187;
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/new-year/widget.png) center / contain no-repeat;
}
.theme-newyear .widget__open svg {
display: none;
}
.theme-newyear .section.section_promo,
.theme-newyear .section.section_faq,
.theme-newyear .section.section_sets {
overflow: visible;
}
.theme-newyear .quiz {
z-index: 5;
}
.theme-newyear__bg {
position: absolute;
z-index: 0;
inset: 0;
}
.theme-newyear__bg.theme-newyear__bg_v1 span:nth-child(1) {
top: 0;
right: 0;
transform: translate(31.9%, -21.6%);
}
.theme-newyear__bg.theme-newyear__bg_v1 span:nth-child(2) {
bottom: 0;
left: 0;
transform: translate(-30.7%, 84.5%);
}
.theme-newyear__bg.theme-newyear__bg_v1 i:nth-child(3) {
top: 0;
right: 0;
transform: translate(65%, 0%);
}
.theme-newyear__bg.theme-newyear__bg_v1 i:nth-child(3)::after {
bottom: 0;
left: 20%;
background: radial-gradient(50% 50% at 50% 50%, rgba(0, 232, 255, 0.6) 0%, rgba(18, 20, 27, 0) 100%);
}
.theme-newyear__bg.theme-newyear__bg_v1 i:nth-child(4) {
bottom: 0;
left: 0;
transform: translate(-82%, 81%);
}
.theme-newyear__bg.theme-newyear__bg_v2 span:nth-child(1) {
top: 0;
right: 0;
transform: translate(31.9%, -84.6%);
}
.theme-newyear__bg.theme-newyear__bg_v2 span:nth-child(2) {
bottom: 0;
left: 0;
transform: translate(-30.7%, 9.5%);
}
.theme-newyear__bg.theme-newyear__bg_v2 i:nth-child(3) {
top: 0;
right: 0;
transform: translate(72%, -53%);
}
.theme-newyear__bg.theme-newyear__bg_v2 i:nth-child(3)::after {
bottom: 0;
left: 20%;
background: radial-gradient(50% 50% at 50% 50%, rgba(0, 232, 255, 0.6) 0%, rgba(18, 20, 27, 0) 100%);
}
.theme-newyear__bg.theme-newyear__bg_v2 i:nth-child(4) {
bottom: 0;
left: 0;
transform: translate(-82%, 6%);
}
.theme-newyear__bg.theme-newyear__bg_v3 span:nth-child(1) {
top: 0;
right: 0;
transform: translate(31.9%, -20.6%);
}
.theme-newyear__bg.theme-newyear__bg_v3 span:nth-child(2) {
bottom: 0;
left: 0;
transform: translate(-30.7%, 60.5%);
}
.theme-newyear__bg.theme-newyear__bg_v3 i:nth-child(3) {
bottom: 0;
left: 0;
transform: translate(-57%, 74%);
}
.theme-newyear__bg.theme-newyear__bg_v3 i:nth-child(3)::after {
bottom: 0;
left: 20%;
background: radial-gradient(50% 50% at 50% 50%, rgba(0, 232, 255, 0.6) 0%, rgba(18, 20, 27, 0) 100%);
}
.theme-newyear__bg.theme-newyear__bg_v3 i:nth-child(4) {
top: 0;
right: 0;
transform: translate(82%, 8%);
}
.theme-newyear__bg span {
display: block;
position: absolute;
z-index: 1;
aspect-ratio: 1079/1234;
background: url(//veloralounge.com/wp-content/themes/velora-lounge/img/new-year/bg-snow.svg) center / contain no-repeat;
width: 100vw;
opacity: 0.02;
pointer-events: none;
}
.theme-newyear__bg i {
display: block;
position: absolute;
z-index: 0;
aspect-ratio: 1;
width: 160vw;
}
.theme-newyear__bg i:nth-child(3) {
background: radial-gradient(50% 50% at 50% 50%, rgba(49, 94, 251, 0.9) 0%, rgba(18, 20, 27, 0) 100%);
}
.theme-newyear__bg i:nth-child(4) {
background: radial-gradient(50% 50% at 50% 50%, rgba(236, 155, 69, 0.7) 0%, rgba(18, 20, 27, 0) 100%);
}
.theme-newyear__bg i::after {
content: '';
display: block;
position: absolute;
aspect-ratio: 1;
width: 60%;
}
.theme-newyear .widget__open {
animation: 5s ease 0s infinite normal none running tada;
transform-origin: 50% 0;
transition: 0.3s transform;
z-index: 100;
position: relative;
}
.theme-newyear .widget__open:hover {
animation: widget-hover 0.5s forwards;
}
@media (min-width: 1250px), (min-width: 990px) and (orientation: landscape) {
.theme-newyear .widget__open {
width: 8.96vw;
margin-top: -3vw;
}
.theme-newyear__bg span {
width: 56.26vw;
}
.theme-newyear__bg i {
width: 80vw;
}
}
@keyframes widget-hover {
50% {
transform: scaleZ(1) rotate3d(0, 0, 1, 7.5deg);
}
100% {
transform: scaleZ(1) rotate3d(0, 0, 1, -15deg);
}
}
@keyframes tada {
0%,
22%,
100% {
transform: scaleZ(1);
}
2%,
4% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
6%,
10%,
14%,
20% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
8%,
12%,
16% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
}