Files
blackheart-website/src/app/styles/components.css
diana.dolgolyova a75922c730 feat: Instagram data sync, gold accent, SVG logo, FAQ & Pricing sections
- 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>
2026-03-10 00:45:50 +03:00

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];
}