/* Стили для анимаций и красивых теней */
body {
font-family: 'Nunito', sans-serif;
}
.hero-bg {
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.9)), url('../img/hero_bg.png');
background-size: cover;
background-position: center bottom;
}
.blob-bg {
position: absolute;
filter: blur(80px);
z-index: -1;
opacity: 0.5;
}
.hero-gradient {
background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
}
.card-hover {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 25px 35px -5px rgba(0, 0, 0, 0.1), 0 15px 15px -5px rgba(0, 0, 0, 0.04);
border-color: #FACC15;
/* Желтый акцент при наведении */
}
/* Новые яркие подложки для карточек смен */
#card-detective {
cursor: url("data:image/svg+xml;utf8,") 16 16, auto;
}
#card-magic {
cursor: url("data:image/svg+xml;utf8,") 0 32, auto;
}
#card-detective .bg-primary\/10 {
background-color: #FEF3C7;
color: #D97706;
}
#card-pirate .bg-secondary\/10 {
background-color: #D1FAE5;
color: #059669;
}
#card-magic .bg-accent\/10 {
background-color: #E0E7FF;
color: #4F46E5;
}
/* Стили для интерактивной анимации с детьми и мячом */
.interactive-zone {
position: relative;
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 20px;
}
.kid-container {
position: relative;
width: 120px;
height: 180px;
cursor: pointer;
z-index: 10;
transition: transform 0.2s;
}
.kid-container:hover {
transform: scale(1.05);
}
#volleyball {
position: absolute;
width: 40px;
height: 40px;
z-index: 20;
pointer-events: none;
/* Начальная позиция у левого ребенка */
left: 100px;
bottom: 120px;
}
/* Стили для анимаций на карточках смен */
.card-anim-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
border-radius: 1.5rem;
}
.card-content {
position: relative;
z-index: 10;
}
.timeline-item::before {
content: '';
position: absolute;
left: -33px;
top: 5px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #6366F1;
border: 3px solid #EEF2FF;
}
/* Квиз стили */
.quiz-modal {
display: none;
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
align-items: center;
justify-content: center;
padding: 1rem;
}
.quiz-modal.active {
display: flex;
}
.quiz-card {
background: white;
width: 100%;
max-width: 600px;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* Скрытие скроллбара для слайдера */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
@ k e y f r a m e s f l a p {
0 % { t r a n s f o r m : s c a l e X ( - 1 ) r o t a t e ( 0 d e g ) ; }
5 0 % { t r a n s f o r m : s c a l e X ( - 1 ) r o t a t e ( 1 5 d e g ) t r a n s l a t e Y ( - 5 p x ) ; }
1 0 0 % { t r a n s f o r m : s c a l e X ( - 1 ) r o t a t e ( 0 d e g ) ; }
}
. p a r r o t - f l a p {
a n i m a t i o n : f l a p 0 . 2 s i n f i n i t e e a s e - i n - o u t ;
}
@ k e y f r a m e s o r b i t - w r a p p e r {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( - 3 6 0 d e g ) ; }
}
. r o c k e t - o r b i t - w r a p p e r {
a n i m a t i o n : o r b i t - w r a p p e r 2 s l i n e a r i n f i n i t e ;
}
@ k e y f r a m e s s p i n {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( 3 6 0 d e g ) ; }
}
. g l o b e - s p i n {
a n i m a t i o n : s p i n 3 s l i n e a r i n f i n i t e ;
}
@ k e y f r a m e s d i n o - w a l k {
0 % { t r a n s f o r m : t r a n s l a t e X ( 0 ) s c a l e X ( 1 ) ; }
4 5 % { t r a n s f o r m : t r a n s l a t e X ( - 6 0 p x ) s c a l e X ( 1 ) ; }
5 0 % { t r a n s f o r m : t r a n s l a t e X ( - 6 0 p x ) s c a l e X ( - 1 ) ; }
9 5 % { t r a n s f o r m : t r a n s l a t e X ( 0 ) s c a l e X ( - 1 ) ; }
1 0 0 % { t r a n s f o r m : t r a n s l a t e X ( 0 ) s c a l e X ( 1 ) ; }
}
. d i n o - w a l k i n g {
a n i m a t i o n : d i n o - w a l k 3 s l i n e a r i n f i n i t e ;
}
@ k e y f r a m e s w a v e - f l a g {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
2 5 % { t r a n s f o r m : r o t a t e ( 1 5 d e g ) ; }
5 0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
7 5 % { t r a n s f o r m : r o t a t e ( - 1 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) ; }
}
. f l a g - w a v i n g {
a n i m a t i o n : w a v e - f l a g 1 s i n f i n i t e e a s e - i n - o u t ;
t r a n s f o r m - o r i g i n : b o t t o m l e f t ;
}
@ k e y f r a m e s v i b r a t e {
0 % { t r a n s f o r m : t r a n s l a t e ( 0 , 0 ) r o t a t e ( 0 d e g ) ; }
1 0 % { t r a n s f o r m : t r a n s l a t e ( - 1 p x , - 1 p x ) r o t a t e ( - 1 d e g ) ; }
2 0 % { t r a n s f o r m : t r a n s l a t e ( - 2 p x , 0 p x ) r o t a t e ( 1 d e g ) ; }
3 0 % { t r a n s f o r m : t r a n s l a t e ( 1 p x , 2 p x ) r o t a t e ( 0 d e g ) ; }
4 0 % { t r a n s f o r m : t r a n s l a t e ( 1 p x , - 1 p x ) r o t a t e ( 1 d e g ) ; }
5 0 % { t r a n s f o r m : t r a n s l a t e ( - 1 p x , 1 p x ) r o t a t e ( - 1 d e g ) ; }
6 0 % { t r a n s f o r m : t r a n s l a t e ( - 2 p x , 1 p x ) r o t a t e ( 0 d e g ) ; }
7 0 % { t r a n s f o r m : t r a n s l a t e ( 2 p x , 1 p x ) r o t a t e ( - 1 d e g ) ; }
8 0 % { t r a n s f o r m : t r a n s l a t e ( - 1 p x , - 1 p x ) r o t a t e ( 1 d e g ) ; }
9 0 % { t r a n s f o r m : t r a n s l a t e ( 1 p x , 2 p x ) r o t a t e ( 0 d e g ) ; }
1 0 0 % { t r a n s f o r m : t r a n s l a t e ( 0 , 0 ) r o t a t e ( 0 d e g ) ; }
}
. r o c k e t - v i b r a t e {
a n i m a t i o n : v i b r a t e 0 . 2 s l i n e a r i n f i n i t e ;
}
@ k e y f r a m e s d i n o - d a n c e {
0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) t r a n s l a t e Y ( 0 ) ; }
2 5 % { t r a n s f o r m : r o t a t e ( - 1 0 d e g ) t r a n s l a t e Y ( - 5 p x ) ; }
5 0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) t r a n s l a t e Y ( 0 ) ; }
7 5 % { t r a n s f o r m : r o t a t e ( 1 0 d e g ) t r a n s l a t e Y ( - 5 p x ) ; }
1 0 0 % { t r a n s f o r m : r o t a t e ( 0 d e g ) t r a n s l a t e Y ( 0 ) ; }
}
. d i n o - d a n c i n g {
a n i m a t i o n : d i n o - d a n c e 0 . 5 s i n f i n i t e e a s e - i n - o u t ;
t r a n s f o r m - o r i g i n : b o t t o m c e n t e r ;
}