diana.dolgolyova
0e626451e7
- CSS foundation: theme-aware scrollbars, section glows, glass cards with gold shadows, stronger animated borders and glow effects for light mode - Hero: consistent dark-video treatment for both themes, brighter gold gradient text, glowing CTA button - Gradient text: auto-switch to warm gold tones on light backgrounds via html:not(.dark) selector - Team profile: inverted ambient photo bg with white overlay for light, dark text/borders, gold-dark labels for contrast - All sections: text-neutral-500→600 upgrades for WCAG AA contrast, gold shadow accents on cards (About, Pricing, FAQ, DayCard, News) - Admin: replaced hardcoded #c9a96e with theme tokens, fixed select options, array editor borders, booking badges contrast - Header: white text on transparent hero, dark text after scroll - UI components: BackToTop, FloatingHearts, ShowcaseLayout tabs, SignupModal, NewsModal, GroupCard adapted for light backgrounds - Updated CLAUDE.md to reflect dual theme support
426 lines
8.3 KiB
CSS
426 lines
8.3 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;
|
|
will-change: filter, transform;
|
|
}
|
|
|
|
/* ===== Gradient Text ===== */
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#c9a96e 0%,
|
|
#e2c97e 20%,
|
|
#d4b87a 40%,
|
|
#e2c97e 60%,
|
|
#c9a96e 80%,
|
|
#d4b87a 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;
|
|
}
|
|
|
|
/* Auto-switch gradient text for light mode */
|
|
html:not(.dark) .gradient-text {
|
|
background-image: linear-gradient(135deg, #a08050 0%, #c9a96e 25%, #8a6f3e 50%, #c9a96e 75%, #a08050 100%);
|
|
}
|
|
|
|
/* Explicit light mode gradient text class (legacy) */
|
|
.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.5), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.3));
|
|
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;
|
|
}
|
|
|
|
:is(.dark) .animated-border::before {
|
|
background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
|
|
}
|
|
|
|
.animated-border:hover::before {
|
|
opacity: 1;
|
|
background: linear-gradient(135deg, rgba(201, 169, 110, 0.7), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.5));
|
|
}
|
|
|
|
:is(.dark) .animated-border:hover::before {
|
|
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 20px rgba(201, 169, 110, 0.25), 0 0 50px rgba(201, 169, 110, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
:is(.dark) .glow-hover:hover {
|
|
box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
|
|
}
|
|
|
|
/* ===== 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;
|
|
will-change: background-position;
|
|
}
|
|
|
|
/* ===== 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.4), transparent);
|
|
}
|
|
|
|
:is(.dark) .section-divider {
|
|
background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
|
|
}
|
|
|
|
/* ===== No-JS Fallback ===== */
|
|
/* When JS is disabled, ensure Reveal content is visible */
|
|
noscript ~ * [style*="opacity: 0"],
|
|
.no-js [style*="opacity: 0"] {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* ===== 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;
|
|
}
|
|
}
|