/* Project-specific overrides beyond Tailwind utility classes go here. */
/* add-global-design-system: named tokens mirroring the same --tsg-* values already established
in static/css/home-preview.css (home.html's separate stylesheet) -- declared here too so this
file's new component classes below share one token language with that file instead of
hardcoding hex a second time. Values are identical to base.html's Tailwind config
(primary/secondary/dark/darker/danger/warning/accent) and docs/BRAND_GUIDE.md -- this is not a
second color system, just this file's own copy of the same numbers, since a plain stylesheet
loaded via has no access to Tailwind's build-time theme() function. */
:root {
--tsg-red: #E70000;
--tsg-red-dark: #a30000;
--tsg-teal: #5BB9C3;
--tsg-bg: #000000;
--tsg-surface: #121212;
--tsg-white: #ffffff;
--tsg-muted: #9CA3AF;
--tsg-border: rgba(255, 255, 255, 0.1);
--tsg-danger: #FF6B35;
--tsg-warning: #FFB020;
--tsg-success: #22C55E;
}
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
}
.font-heading {
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
}
/* add-i18n-foundation: Rajdhani/Inter (above) have zero Devanagari or Gujarati glyph coverage --
without this, every heading/body string in Hindi or Gujarati would silently fall back to
whatever default font the visitor's OS happens to ship, breaking the brand's typographic
identity on exactly the pages meant to prove multilingual support works. Keyed off
(set dynamically in base.html/home.html from g.locale), not a class, so it applies everywhere
with no per-template changes. Both fonts are loaded in base.html's/home.html's own tags. */
html[lang="hi"] body,
html[lang="gu"] body {
font-family: 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Inter', sans-serif;
}
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4,
html[lang="hi"] .font-heading,
html[lang="gu"] h1, html[lang="gu"] h2, html[lang="gu"] h3, html[lang="gu"] h4,
html[lang="gu"] .font-heading {
font-family: 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Inter', sans-serif;
font-weight: 600;
}
/* Card hover lift + glow - browsable item cards (spaces, games, food, packages, testimonials) */
.hover-card {
transition: box-shadow 0.2s ease;
}
.hover-card:hover {
box-shadow: 0 12px 28px -8px rgba(91, 185, 195, 0.35);
}
@media (prefers-reduced-motion: no-preference) {
.hover-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-card:hover {
transform: translateY(-4px);
}
}
/* Primary (red) buttons: glow on hover, press feedback on active */
a.bg-primary, button.bg-primary {
transition: box-shadow 0.2s ease;
}
a.bg-primary:hover, button.bg-primary:hover {
box-shadow: 0 0 18px rgba(231, 0, 0, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
a.bg-primary, button.bg-primary {
transition: box-shadow 0.2s ease, transform 0.1s ease;
}
a.bg-primary:active, button.bg-primary:active {
transform: scale(0.97);
}
}
/* Secondary (teal outline) buttons: same treatment, teal glow */
a.border-secondary.text-secondary, button.border-secondary.text-secondary {
transition: box-shadow 0.2s ease;
}
a.border-secondary.text-secondary:hover, button.border-secondary.text-secondary:hover {
box-shadow: 0 0 14px rgba(91, 185, 195, 0.4);
}
@media (prefers-reduced-motion: no-preference) {
a.border-secondary.text-secondary, button.border-secondary.text-secondary {
transition: box-shadow 0.2s ease, transform 0.1s ease;
}
a.border-secondary.text-secondary:active, button.border-secondary.text-secondary:active {
transform: scale(0.97);
}
}
/* Scroll reveal - .reveal-pending is added by JS only if it can actually animate it back off,
so no-JS / a JS error leaves content visible rather than permanently hidden */
.reveal-on-scroll {
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.reveal-pending {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.reveal-on-scroll.reveal-pending {
transform: translateY(24px);
}
}
/* Hero dragon-logo entrance - one-time, on load (already in the initial viewport, not
scroll-triggered). Default state is fully visible; the animation only overrides that when
motion is allowed, so reduced-motion just shows the logo normally. */
@keyframes hero-logo-entrance {
0% { opacity: 0; transform: scale(0.6) translateY(-12px); }
60% { opacity: 1; transform: scale(1.05) translateY(0); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
.hero-logo-entrance {
animation: hero-logo-entrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
}
/* Testimonial carousel - native CSS scroll-snap does the swipe/scroll, JS only adds optional
prev/next buttons on top. Hide the scrollbar for a cleaner look since the buttons/swipe
already communicate scrollability. */
.testimonial-carousel {
scrollbar-width: none;
}
.testimonial-carousel::-webkit-scrollbar {
display: none;
}
/* Dashboard "Recommended For You" strip - same native scroll-snap + hidden-scrollbar approach as
.testimonial-carousel above (add-dashboard-recommended-games). */
.recommended-games-scroll {
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.recommended-games-scroll::-webkit-scrollbar {
display: none;
}
.recommended-games-scroll > a {
scroll-snap-align: start;
}
/* People You May Know strip on /gamers and /dashboard/profile (add-friend-suggestions) - same
technique as .recommended-games-scroll above, its own class since each card is a