diana.dolgolyova
b94ee69033
- MC registrations: notification toggles (confirm/remind) with urgency - Group bookings: save to DB from BookingModal, admin CRUD at /admin/bookings - Open Day: full event system with schedule grid (halls × time), per-class booking, discount pricing (30 BYN / 20 BYN from 3+), auto-cancel threshold - Unified SignupModal replaces 3 separate forms — consistent fields (name, phone, instagram, telegram), Instagram DM fallback on network error - Centralized /admin/bookings page with 3 tabs (classes, MC, Open Day), collapsible sections, notification toggles, filter chips - Unread booking badge on sidebar + dashboard widget with per-type breakdown - Pricing: contact hint (Instagram/Telegram/phone) on price & rental tabs, admin toggle to show/hide - DB migrations 5-7: group_bookings table, open_day tables, unified fields Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
395 lines
7.2 KiB
CSS
395 lines
7.2 KiB
CSS
/* ===== Keyframes ===== */
|
|
|
|
@keyframes hero-fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(32px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes hero-fade-in-scale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
filter: blur(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
opacity: 0.4;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
15% {
|
|
transform: scale(1.08);
|
|
}
|
|
30% {
|
|
transform: scale(1);
|
|
}
|
|
45% {
|
|
transform: scale(1.05);
|
|
}
|
|
60% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes heart-float {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(0) scale(0.5);
|
|
}
|
|
10% {
|
|
opacity: 0.6;
|
|
}
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-100vh) scale(1);
|
|
}
|
|
}
|
|
|
|
/* ===== Hero Entrance ===== */
|
|
|
|
.hero-logo {
|
|
opacity: 0;
|
|
animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
|
|
}
|
|
|
|
.hero-logo-heartbeat {
|
|
animation: heartbeat 2.5s ease-in-out 1.5s infinite;
|
|
}
|
|
|
|
.hero-title {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
|
|
}
|
|
|
|
.hero-cta {
|
|
opacity: 0;
|
|
animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
|
|
}
|
|
|
|
/* ===== Hero Background ===== */
|
|
|
|
.hero-bg-gradient {
|
|
background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(201, 169, 110, 0.12), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 50%, rgba(201, 169, 110, 0.06), transparent),
|
|
radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 169, 110, 0.04), transparent);
|
|
}
|
|
|
|
.hero-glow-orb {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
animation: pulse-glow 6s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== Gradient Text ===== */
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#8a6f3e 0%,
|
|
#c9a96e 20%,
|
|
#8a6f3e 40%,
|
|
#c9a96e 60%,
|
|
#6b5530 80%,
|
|
#8a6f3e 100%
|
|
);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradient-shift 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* Light mode gradient text */
|
|
.gradient-text-light {
|
|
background: linear-gradient(135deg, #171717 0%, #c9a96e 50%, #171717 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: gradient-shift 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* ===== Animated Border ===== */
|
|
|
|
.animated-border {
|
|
position: relative;
|
|
}
|
|
|
|
.animated-border::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
transition: opacity 0.5s ease;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.animated-border:hover::before {
|
|
opacity: 1;
|
|
background: linear-gradient(135deg, rgba(201, 169, 110, 0.6), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.4));
|
|
}
|
|
|
|
/* ===== Glow Effect ===== */
|
|
|
|
.glow-hover {
|
|
transition: box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.glow-hover:hover {
|
|
box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* ===== Scroll Reveal ===== */
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ===== Showcase ===== */
|
|
|
|
@keyframes showcase-detail-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes showcase-image-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(1.03);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.showcase-detail-enter {
|
|
animation: showcase-detail-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
.showcase-detail-enter img {
|
|
animation: showcase-image-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
/* ===== Modal ===== */
|
|
|
|
@keyframes modal-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes modal-overlay-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-overlay {
|
|
animation: modal-overlay-in 0.3s ease-out;
|
|
}
|
|
|
|
.modal-content {
|
|
animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* ===== Team Info Fade ===== */
|
|
|
|
@keyframes team-info-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ===== Team Card Glitter ===== */
|
|
|
|
@keyframes glitter-move {
|
|
0% {
|
|
background-position: 0% 0%;
|
|
}
|
|
100% {
|
|
background-position: 200% 200%;
|
|
}
|
|
}
|
|
|
|
.team-card-glitter {
|
|
position: relative;
|
|
}
|
|
|
|
/* Animated gold border glow */
|
|
.team-card-glitter::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
transparent 20%,
|
|
rgba(201, 169, 110, 0.6) 30%,
|
|
rgba(212, 184, 122, 1) 35%,
|
|
transparent 45%,
|
|
transparent 55%,
|
|
rgba(201, 169, 110, 0.5) 65%,
|
|
rgba(212, 184, 122, 0.9) 70%,
|
|
transparent 80%
|
|
);
|
|
background-size: 200% 200%;
|
|
animation: glitter-move 3s linear infinite;
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ===== Notification Pulse ===== */
|
|
|
|
@keyframes pulse-urgent {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
|
|
}
|
|
}
|
|
|
|
.pulse-urgent {
|
|
animation: pulse-urgent 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* ===== Section Divider ===== */
|
|
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
|
|
}
|
|
|
|
/* ===== Reduced Motion ===== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-logo,
|
|
.hero-title,
|
|
.hero-subtitle,
|
|
.hero-cta {
|
|
animation: none !important;
|
|
opacity: 1 !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
.modal-overlay,
|
|
.modal-content {
|
|
animation: none !important;
|
|
}
|
|
|
|
.gradient-text,
|
|
.gradient-text-light {
|
|
animation: none !important;
|
|
}
|
|
|
|
.hero-glow-orb,
|
|
.hero-logo-heartbeat {
|
|
animation: none !important;
|
|
}
|
|
|
|
.showcase-detail-enter,
|
|
.showcase-detail-enter img {
|
|
animation: none !important;
|
|
}
|
|
|
|
.glow-hover:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.team-card-glitter::before {
|
|
animation: none !important;
|
|
}
|
|
}
|