Files
blackheart-website/src/app/globals.css
diana.dolgolyova 8088b99a43 feat: UI improvements — scrollbar, multi-filters, pricing fix, routing, modals
- Global page scrollbar styled with gold theme
- Schedule: multi-select for class types and status tags
- Pricing: fix tab switch blink (display toggle vs conditional render)
- OpenDay: trainer name more prominent, section divider added
- Team: browser back button closes trainer bio (history API)
- Modals: block scroll + compensate scrollbar width to prevent layout shift
- Header: remove booking button from desktop nav
2026-03-26 13:23:03 +03:00

110 lines
1.9 KiB
CSS

@import "tailwindcss";
@import "./styles/theme.css";
@import "./styles/components.css";
@import "./styles/animations.css";
@custom-variant dark (&:where(.dark, .dark *));
@theme inline {
--font-display: var(--font-oswald);
--font-sans: var(--font-inter);
--color-gold: #c9a96e;
--color-gold-light: #d4b87a;
--color-gold-dark: #a08050;
}
/* ===== Base ===== */
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
/* ===== Selection ===== */
::selection {
background-color: rgba(201, 169, 110, 0.3);
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ===== Focus ===== */
:focus-visible {
@apply outline-2 outline-offset-2 outline-gold;
}
/* ===== Scrollbar hide utility ===== */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* ===== Admin dark scrollbar ===== */
.admin-scrollbar {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.admin-scrollbar::-webkit-scrollbar {
width: 6px;
}
.admin-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.admin-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.admin-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* ===== Global page scrollbar ===== */
html {
scrollbar-width: thin;
scrollbar-color: rgba(201, 169, 110, 0.3) #0a0a0a;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: rgba(201, 169, 110, 0.3);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(201, 169, 110, 0.5);
}