diana.dolgolyova
f263765597
Landing page with Hero, About, Team, Classes, and Contact sections. Light/dark mode, scroll reveal animations, Yandex Maps, responsive design. Next.js 16 + Tailwind v4 + TypeScript. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
77 lines
1.2 KiB
CSS
77 lines
1.2 KiB
CSS
/* ===== Keyframes ===== */
|
|
|
|
@keyframes hero-fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes hero-fade-in-scale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.85);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* ===== Hero Entrance ===== */
|
|
|
|
.hero-logo {
|
|
opacity: 0;
|
|
animation: hero-fade-in-scale 1s ease-out 0.1s forwards;
|
|
}
|
|
|
|
.hero-title {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 0.8s ease-out 0.4s forwards;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 0.8s ease-out 0.7s forwards;
|
|
}
|
|
|
|
.hero-cta {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 0.8s ease-out 1s forwards;
|
|
}
|
|
|
|
/* ===== Scroll Reveal ===== */
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.7s ease-out, transform 0.7s ease-out;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ===== Reduced Motion ===== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-logo,
|
|
.hero-title,
|
|
.hero-subtitle,
|
|
.hero-cta {
|
|
animation: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|