- Sync all content from Instagram: fix addresses, trainer names, add 5 new trainers, remove 2 inactive, update class descriptions - Add FAQ section (11 Q&A items) and Pricing section (tabs: subscriptions, rental, rules) - Redesign with editorial magazine feel: centered headings, generous spacing, section glow effects, glassmorphism cards - Migrate entire accent palette from rose to warm gold (#c9a96e) - Replace low-res PNG logo with vector SVG traced via potrace — crisp at any size, animated gradient (black↔gold), heartbeat pulse animation - Make header brand name gold Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
2.3 KiB
CSS
87 lines
2.3 KiB
CSS
/* ===== Navigation ===== */
|
|
|
|
.nav-link {
|
|
@apply text-sm font-medium transition-all duration-300;
|
|
@apply text-neutral-500;
|
|
@apply hover:text-neutral-900;
|
|
@apply dark:text-neutral-400 dark:hover:text-white;
|
|
}
|
|
|
|
.nav-link-active {
|
|
@apply text-[#a08050];
|
|
@apply dark:text-[#d4b87a];
|
|
}
|
|
|
|
.social-icon {
|
|
@apply text-neutral-400 transition-all duration-300;
|
|
@apply hover:text-[#a08050];
|
|
@apply dark:text-neutral-500 dark:hover:text-[#d4b87a];
|
|
}
|
|
|
|
/* ===== Cards ===== */
|
|
|
|
.card {
|
|
@apply rounded-2xl border p-6 transition-all duration-500 cursor-pointer;
|
|
@apply border-neutral-200 bg-white;
|
|
@apply hover:border-[#c9a96e]/30 hover:shadow-lg;
|
|
@apply dark:border-white/[0.08] dark:bg-[#111];
|
|
@apply dark:hover:border-[#c9a96e]/25 dark:hover:bg-[#151515];
|
|
@apply dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.06)];
|
|
}
|
|
|
|
/* ===== Buttons ===== */
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
|
|
@apply bg-[#c9a96e] text-black;
|
|
@apply hover:bg-[#d4b87a] hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
|
|
@apply dark:bg-[#c9a96e] dark:text-black;
|
|
@apply dark:hover:bg-[#d4b87a] dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.35)];
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
|
|
@apply border border-[#c9a96e] text-[#a08050];
|
|
@apply hover:bg-[#c9a96e] hover:text-black;
|
|
@apply dark:border-[#c9a96e] dark:text-[#d4b87a];
|
|
@apply dark:hover:bg-[#c9a96e] dark:hover:text-black;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply inline-flex items-center justify-center font-medium rounded-full transition-all duration-300 cursor-pointer;
|
|
@apply text-neutral-600;
|
|
@apply hover:text-[#a08050];
|
|
@apply dark:text-neutral-400 dark:hover:text-[#d4b87a];
|
|
}
|
|
|
|
/* ===== Scrollbar ===== */
|
|
|
|
.modal-content {
|
|
scrollbar-color: rgb(163 163 163) transparent;
|
|
}
|
|
|
|
.modal-content * {
|
|
scrollbar-color: rgb(163 163 163) transparent;
|
|
}
|
|
|
|
@variant dark {
|
|
.modal-content {
|
|
scrollbar-color: rgb(64 64 64) transparent;
|
|
}
|
|
|
|
.modal-content * {
|
|
scrollbar-color: rgb(64 64 64) transparent;
|
|
}
|
|
}
|
|
|
|
/* ===== Contact ===== */
|
|
|
|
.contact-item {
|
|
@apply flex items-center gap-4;
|
|
}
|
|
|
|
.contact-icon {
|
|
@apply shrink-0 text-[#a08050];
|
|
@apply dark:text-[#d4b87a];
|
|
}
|