/* mmsport overrides on top of Gymso — adjustments so it works with NO JavaScript. */
/* ══ THEMES ═════════════════════════════════════════════════════════════════
LIGHT is the default and is written UNSCOPED below, so a page that somehow
renders without a data-theme attribute still looks right. DARK is the
[data-theme="dark"] layer at the very bottom of this file.
There is no JS on this site (routes/site.js sends a CSP with no script-src),
so the switch is a plain link in the header: ?theme=… → lib/siteTheme.js
persists it in a cookie and stamps data-theme on . Both palettes live
in this one stylesheet, so it stays cacheable and there is never a flash of
the wrong theme.
Gymso is a light template, so DARK has to flip the CONTENT too, not just the
bands: body, .about, and the .class-info / .team-info card faces are all
var(--white-color). We can't just redefine that variable — Gymso uses it for
text colours as well as backgrounds — so the dark layer names selectors.
Orange #f13a11 stays the accent in BOTH themes.
═══════════════════════════════════════════════════════════════════════════ */
/* ══ FONTS ═══════════════════════════════════════════════════════════════════
VictoryClub's identity is Oswald (display, uppercase) + Inter (body). Self-hosted
under /site-assets/mmsport/fonts — Google Fonts' stylesheet is CSP-blocked
(style-src 'self'), but the woff2 files are same-origin so font-src 'self' allows
them. Cyrillic + Latin subsets (the site is Macedonian). */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-500-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/site-assets/mmsport/fonts/oswald-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-500-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-600-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/site-assets/mmsport/fonts/inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ══ REVAMP TOKENS ═══════════════════════════════════════════════════════════ */
:root{
--mm-orange:#f13a11; /* mmsport primary accent (unchanged brand orange) */
--mm-orange-2:#ff7a3d; /* lighter end of the primary gradient */
--mm-amber:#ff9d2e; /* warm gold — VictoryClub's two-tone "secondary" */
--mm-grad-primary:linear-gradient(135deg,#f13a11,#ff7a3d);
--mm-grad-victory:linear-gradient(135deg,#f13a11,#ff9d2e);
--mm-shadow-sports:0 18px 44px -16px rgba(241,58,17,.5);
--mm-shadow-glow:0 0 44px rgba(255,157,46,.32);
}
/* ══ TYPOGRAPHY — Oswald headings (uppercase), Inter body ═════════════════════ */
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
h1,h2,h3,h4,h5{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:-.01em;font-weight:700}
.btn,.custom-btn{font-family:'Oswald',sans-serif}
/* Section eyebrow — every h6 label becomes the VictoryClub eyebrow (short line +
spaced caps). Sections use h6 as their kicker, so this restyles them all at once. */
h6{font-family:'Oswald',sans-serif;display:inline-flex;align-items:center;gap:.55rem;
font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;color:var(--mm-orange)}
h6::before{content:'';width:30px;height:2px;background:var(--mm-amber);flex:none}
.text-center h6{justify-content:center}
/* gradient-text accent (hero second line, heading highlights) */
.mm-grad-text{background:var(--mm-grad-victory);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ── Gymso needs JS to work; we don't ship any. Neutralise the JS-dependent bits. ── */
/* Gymso's navbar is fixed + transparent and relies on JS to add a background on
scroll. Without JS that means invisible links + content hidden under it.
Make it a solid, static bar. */
.navbar.fixed-top{position:relative!important}
.navbar{padding:12px 0}
.navbar-toggler{display:none!important}
/* AOS animates by hiding elements until JS reveals them — force everything visible. */
[data-aos]{opacity:1!important;transform:none!important}
/* JS-only bits we don't render. */
.modal{display:none!important}
/* ── Card sizing (theme-neutral) ────────────────────────────────────────────── */
/* Live-data court cards: keep ALL cards the same size regardless of text length. */
.class-thumb img{height:230px;width:100%;object-fit:cover}
.class section .row > [class*='col-']{display:flex}
.class-thumb{height:100%;width:100%;display:flex;flex-direction:column}
.class-thumb .class-info{flex:1 1 auto;display:flex;flex-direction:column}
.class-thumb .class-info p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Hero background — set explicitly with an ABSOLUTE path (Gymso sets it via a
relative ../images/ url that breaks now that images live in the settings repo).
Absolute /site-assets/... resolves through the app.js mount on the server. */
.hero{min-height:78vh;background-image:url('/site-assets/mmsport/images/hero1.JPG');background-size:cover;background-position:center}
.news-thumb img{height:200px}
/* Gymso's .section is 7rem top+bottom everywhere — far too airy. Tighten every
body section (courts, news, contact, about) and trim the heading bottom-gap. */
.section{padding-top:3rem!important;padding-bottom:3rem!important}
.section .text-center.mb-5{margin-bottom:1.5rem!important}
/* Card CTA ("Детали" / "Прочитај повеќе"): Gymso's .custom-btn is white text on
a transparent bg → invisible on the card, and goes white again on hover. Make
it a solid orange button, clearly visible in BOTH themes and BOTH states.
Pinned bottom-left so every card in a row lines its button up on one baseline. */
.class-thumb .btn.custom-btn{
margin-top:18px;
align-self:flex-start;
background:#f13a11;
color:#fff!important;
border:1px solid #f13a11;
padding:10px 26px;
border-radius:999px;
box-shadow:0 2px 6px rgba(241,58,17,.25);
}
.class-thumb .btn.custom-btn:hover,
.class-thumb .btn.custom-btn:focus{
background:#c92e0c;
border-color:#c92e0c;
color:#fff!important;
box-shadow:0 4px 12px rgba(241,58,17,.35);
}
/* Same trap in the hero: a bare .custom-btn is transparent + white text, which
vanishes on the light hero. Solid orange in both themes. */
.hero .custom-btn:not(.bordered):not(.bg-color){
background:#f13a11;color:#fff!important;border:1px solid #f13a11;
box-shadow:0 2px 6px rgba(241,58,17,.25);
}
.hero .custom-btn:not(.bordered):not(.bg-color):hover,
.hero .custom-btn:not(.bordered):not(.bg-color):focus{
background:#c92e0c;border-color:#c92e0c;color:#fff!important;
}
/* ── Buttons, site-wide ─────────────────────────────────────────────────────
1) Every CTA is a full pill (matching the .feat-chips like "11 vs 11").
2) A bare .custom-btn is Gymso's transparent + WHITE text — invisible on any
light surface, only showing on hover. Make EVERY solid CTA red at all times
(the .bordered / .bg-color variants keep their own look). This generalises
the hero/card fix to Featured, Membership, Contact — everywhere. */
.btn.custom-btn{border-radius:999px}
.btn.custom-btn:not(.bordered):not(.bg-color){
background:#f13a11;color:#fff!important;border:1px solid #f13a11;
box-shadow:0 2px 6px rgba(241,58,17,.25);
}
.btn.custom-btn:not(.bordered):not(.bg-color):hover,
.btn.custom-btn:not(.bordered):not(.bg-color):focus{
background:#c92e0c;border-color:#c92e0c;color:#fff!important;
box-shadow:0 4px 12px rgba(241,58,17,.35);
}
/* News cards adopt the Featured-card shape: rounded, bordered, hover-lift.
CSS-only (markup unchanged) so the /c/news list page also matches. Overrides
Gymso's square .class-info face; the outer .news-thumb becomes the card. */
.news-thumb{border:1px solid #e4e4ea;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(23,24,25,.05);transition:transform .18s,box-shadow .18s}
.news-thumb:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,24,25,.1)}
.news-thumb .class-info{background:transparent;box-shadow:none;border-radius:0;padding:20px 22px 24px}
.news-date{color:#f13a11;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.news-thumb .class-info h3 a{color:inherit}
.news-thumb .class-info h3 a:hover{color:#f13a11}
/* ══ LIGHT (default) ════════════════════════════════════════════════════════ */
/* Navbar: white bar, dark type. */
.navbar{background:#fff!important;box-shadow:0 1px 3px rgba(23,24,25,.1)}
/* Brand = logo THEN name (Sasko 2026-07-17). The name is deliberately quiet — smaller and
NOT bold — so the logo leads and the wordmark supports it rather than competing with it.
Gymso shipped this at 700/inherited size, which shouted next to a logo.
inline-flex + align-items:center vertically centres the logo against the text; the gap
holds them apart without a margin on the img (which would also apply when there is no
logo and shift the name). */
.navbar .navbar-brand{color:#171819!important;font-weight:400;font-size:1.05rem;letter-spacing:.5px;
display:inline-flex;align-items:center;gap:10px;line-height:1}
/* height + width:auto keeps ANY logo's aspect ratio — tenants upload whatever they have,
wide or tall. max-width stops a very wide one pushing the menu off the bar; object-fit
contain means it letterboxes inside those bounds instead of stretching.
57px = 38 × 1.5 (Sasko 2026-07-17). The navbar has no fixed height — just padding:12px 0 —
so it grows with the logo; the hero below is min-height:78vh and simply sits under the
fixed bar, so a taller bar covers slightly more hero and breaks no layout. max-width scales
with it so a wide logo is not suddenly cropped tighter than before. */
.brand-logo{height:57px;width:auto;max-width:240px;object-fit:contain;display:block}
.navbar .navbar-brand .brand-name{font-weight:400}
.navbar .nav-link{color:#404040!important;opacity:.9}
.navbar .nav-link:hover{color:#f13a11!important;opacity:1}
/* Hero: light wash over hero1.jpeg, ink type. .text-white is a Bootstrap
!important utility, so we must match it.
The IMAGE is never faded — this is a white veil ON TOP of it, so the numbers are inverse:
veil .20 = the photo reads at ~80%. Was .59 (milky, and Sasko: "too bright"). Sasko asked
for the image at 80%, hence .20. Sasko 2026-07-17. */
.hero .bg-overlay{background:#fff;opacity:.20}
/* The h1 is the BRAND ORANGE, sampled from the logo ball itself — #EF740A (rgb 239,116,10)
is the dominant colour of mk7860781.png. NOT Gymso's accent #f13a11 — that is a redder
orange, still used for buttons/links, and the two side by side would read as a mistake
rather than a palette. Sasko 2026-07-17.
text-shadow is structural, not decoration: the veil is only 20%, so the type sits on a BUSY
photo — a bright floodlit pitch beside dark trees. Orange on the veil measures ~2.9:1, just
under the 3:1 WCAG asks even for large text, so the dark shadow is what carries it. The
colour stays at FULL strength deliberately (Sasko: "orange is ok, just add shadow") — a
darker shade measures better but stops being the logo's colour, so the shadow does the work
instead.
Two layers, each with a job: a TIGHT dark core (0 1px 2px) draws the letter edges against
the bright pitch, and a WIDE soft pool (0 3px 16px) lifts the whole heading off the photo.
One layer cannot do both — a tight shadow alone leaves the type sitting flat on a busy
background, a wide one alone goes muddy without defining the edges. */
.hero .text-white{color:#EF740A!important;
text-shadow:0 1px 2px rgba(0,0,0,.6), 0 3px 16px rgba(0,0,0,.55)}
/* The supporting lines stay ink, and get their own light halo so a thinner veil does not
leave them fighting the photo. */
.hero h6{color:var(--mm-orange);text-shadow:0 1px 8px rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.9)}
/* Feature strip ("Стани член"). */
.feature{background:#f4f4f7}
.feature .text-white{color:#171819!important}
.feature p{color:#5c5c66}
.feature .about-working-hours{border-left-color:rgba(23,24,25,.15)}
.feature .about-working-hours strong{color:#171819;opacity:1}
/* Footer: light band, 3 columns. */
.site-footer{background:#f4f4f7;color:#171819;border-top:1px solid #e4e4ea;padding:56px 0 28px}
.footer-title{color:#171819;font-weight:700;font-size:1.05rem;margin-bottom:18px;text-transform:uppercase;letter-spacing:.04em}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:10px}
.site-footer .footer-links a{color:rgba(23,24,25,.72);font-weight:400;transition:color .2s,padding-left .2s}
.site-footer .footer-links a:hover{color:#f13a11;padding-left:4px;text-decoration:none}
.footer-contact{margin-bottom:10px;color:rgba(23,24,25,.82)}
.site-footer .footer-contact a{color:rgba(23,24,25,.82)}
.site-footer .footer-contact a:hover{color:#f13a11;text-decoration:none}
.site-footer .footer-contact .fa{color:#f13a11;width:18px;text-align:center}
.footer-social{display:flex;gap:10px}
.footer-social .social-icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(23,24,25,.08);color:#171819;font-size:1.05rem;transition:background .2s,transform .2s}
.footer-social .social-icon:hover{background:#f13a11;color:#fff;transform:translateY(-2px);text-decoration:none}
/* Square map: padding-bottom trick keeps a 1:1 box at any width. */
.footer-map{position:relative;width:100%;padding-bottom:100%;border-radius:8px;overflow:hidden;background:rgba(23,24,25,.06)}
.footer-map iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.site-footer .footer-bottom{border-top:1px solid rgba(23,24,25,.14);margin-top:36px;padding-top:24px}
.site-footer .footer-bottom .copyright-text{color:rgba(23,24,25,.6);margin:0}
/* ── The toggle button itself (navbar, far right) ───────────────────────────
Deliberately a direct child of .container in header.html, NOT inside
.navbar-collapse: below the lg breakpoint that collapse is display:none and,
with the toggler hidden and no JS to open it, never expands — anything inside
it would vanish on mobile. */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(23,24,25,.25);border-radius:999px;color:#171819;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.theme-toggle:hover,.theme-toggle:focus{background:rgba(23,24,25,.06);border-color:#f13a11;color:#f13a11;text-decoration:none}
.theme-toggle-ico{font-size:1rem;line-height:1}
/* Below lg the nav links are hidden (collapse + no JS), so the pill sits alone
opposite the brand — drop the word, keep the icon. */
@media(max-width:991px){.theme-toggle-txt{display:none}.theme-toggle{padding:7px 11px}}
/* ── За нас submenu — pure CSS, no JS ───────────────────────────────────────
Bootstrap's dropdown needs JavaScript, which the CSP blocks outright. This
opens on :hover AND :focus-within, so it also works for keyboard users
(tab to "За нас" → the panel opens). The parent stays a real link to
/#about, so a touch user who can't hover still goes somewhere sensible. */
.navbar-nav .has-sub{position:relative}
.caret{font-size:.65rem;opacity:.7;margin-left:3px}
.sub-menu{
position:absolute;top:100%;left:0;z-index:40;
min-width:230px;max-width:300px;margin:0;padding:8px 0;list-style:none;
background:#fff;border:1px solid #e4e4ea;border-radius:10px;
box-shadow:0 12px 30px rgba(23,24,25,.14);
/* Kept in the DOM (not display:none) so :focus-within can reveal it. */
opacity:0;visibility:hidden;transform:translateY(6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li{margin:0}
.sub-menu a{display:block;padding:9px 18px;font-size:.88rem;line-height:1.35;color:#404040}
.sub-menu a:hover,.sub-menu a:focus{background:rgba(23,24,25,.05);color:#f13a11;text-decoration:none}
/* ── Документи rows ─────────────────────────────────────────────────────── */
.doc-row{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:12px;border:1px solid #e4e4ea;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.doc-row:hover{border-color:#f13a11;box-shadow:0 6px 18px rgba(23,24,25,.08);transform:translateY(-1px);text-decoration:none}
.doc-ico{font-size:1.6rem;color:#f13a11;flex:none}
.doc-body{display:flex;flex-direction:column;flex:1 1 auto}
.doc-body strong{color:#171819;font-weight:600}
.doc-meta{font-size:.82rem;color:#8a8a94}
.doc-dl{color:#8a8a94;flex:none}
.doc-row:hover .doc-dl{color:#f13a11}
/* ══ HOMEPAGE ═══════════════════════════════════════════════════════════════
Hero highlights, Explore tiles, Why grid, Featured cards, Membership band.
Light-theme base; dark overrides live in the [data-theme="dark"] block. */
/* Section rhythm helpers reused across the homepage. */
.soft-band{background:#f7f7fa}
.intro-band{padding-top:3.5rem;padding-bottom:1rem}
.intro-lead{font-size:1.12rem;color:#5c5c66;line-height:1.7}
/* Hero — richer than Gymso's default (sub text, CTA row, highlight chips). */
/* Light is the default, and the light hero has a WHITE wash, so hero-sub + chips
default to dark text; the dark-theme block below flips them back to white. */
.hero-sub{color:#2f2f38;font-size:1.15rem;max-width:640px;margin:14px auto 4px;line-height:1.6;
text-shadow:0 1px 6px rgba(255,255,255,.75)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.hero-highlights{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.hl-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;background:rgba(23,24,25,.06);border:1px solid rgba(23,24,25,.12);color:#171819;font-size:.9rem;font-weight:600}
/* Floating sports strip — a white card straddling the hero's bottom edge,
pulled up with a negative margin (no JS). Each item = emoji + short label. */
.hero-strip{position:relative;z-index:6}
.hero-strip-card{
margin-top:-56px;
display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;
gap:6px;padding:18px 24px;
background:#fff;border-radius:22px;
box-shadow:0 22px 50px rgba(23,24,25,.16);
}
.hs-item{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:92px;padding:10px 14px;border-radius:14px;color:inherit;transition:background .18s,transform .18s}
.hs-item:hover{background:#f5f5f8;transform:translateY(-3px);text-decoration:none}
.hs-ico{font-size:2.1rem;line-height:1;margin:0}
.hs-label{font-size:.85rem;font-weight:600;color:#171819}
@media(max-width:575px){
.hero-strip-card{margin-top:-36px;padding:12px;gap:2px}
.hs-item{min-width:0;flex:1 1 30%;padding:8px 4px}
.hs-ico{font-size:1.7rem}
.hs-label{font-size:.76rem}
}
/* Explore — icon tiles (no photos needed). */
.explore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(min-width:768px){.explore-grid{grid-template-columns:repeat(4,1fr)}}
.explore-tile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px;border:1px solid #ececf1;border-radius:14px;background:#fff;color:inherit;box-shadow:0 6px 18px rgba(23,24,25,.07);transition:transform .18s,box-shadow .18s,border-color .18s}
.explore-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,24,25,.13);border-color:#f13a11;text-decoration:none}
.explore-ico{font-size:2.6rem;line-height:1;margin-bottom:14px}
.explore-tile h3{font-size:1.05rem;font-weight:600;margin-bottom:8px;color:#171819}
.explore-tile p{font-size:.86rem;color:#6c6c76;margin:0;line-height:1.5}
/* Service image cards (grid_services): gallery photo on top, text below. Sit in
the same .explore-grid as the icon tiles. */
.svc-card{display:flex;flex-direction:column;border:1px solid #ececf1;border-radius:14px;overflow:hidden;background:#fff;color:inherit;box-shadow:0 6px 18px rgba(23,24,25,.07);transition:transform .18s,box-shadow .18s,border-color .18s}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,24,25,.13);border-color:#f13a11;text-decoration:none}
.svc-card-img{display:flex;align-items:center;justify-content:center;height:160px;background:#eef0f5;overflow:hidden}
.svc-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.svc-card-emoji{font-size:2.8rem;line-height:1}
.svc-card-body{padding:18px 18px 20px;text-align:center;display:flex;flex-direction:column;flex:1}
.svc-card-body h3{font-size:1.05rem;font-weight:600;color:#171819;margin:0 0 4px;line-height:1.35}
.svc-card-body p{font-size:.86rem;color:#6c6c76;margin:6px 0 0;line-height:1.5}
.svc-price{display:block;margin-top:2px;font-size:.85rem;font-weight:700;color:#f13a11}
/* Why — benefit list with a check medallion. */
.why-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:768px){.why-grid{grid-template-columns:repeat(2,1fr);gap:30px 44px}}
@media(min-width:992px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-item{display:flex;gap:16px;align-items:flex-start}
.why-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(241,58,17,.12);color:#f13a11;font-size:1.05rem}
.why-item h3{font-size:1.08rem;font-weight:600;margin:2px 0 6px;color:#171819}
.why-item p{font-size:.94rem;color:#5c5c66;margin:0;line-height:1.6}
.soon-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:999px;background:rgba(241,58,17,.12);color:#f13a11;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
/* Featured — flagship cards with a placeholder image area. */
.feat-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:576px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat-card{display:flex;flex-direction:column;border:1px solid #e4e4ea;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(23,24,25,.05);transition:transform .18s,box-shadow .18s}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(23,24,25,.1)}
/* Placeholder image block — replace with ![]()
when real photos exist. */
.feat-ph{position:relative;height:190px;display:flex;align-items:center;justify-content:center;background:#eef0f5;overflow:hidden}
.feat-ph img{width:100%;height:100%;object-fit:cover;display:block}
.feat-emoji{font-size:3.4rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.feat-soon{position:absolute;top:12px;right:12px;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.feat-grad-1{background:linear-gradient(135deg,#f13a11,#ff7a3d)}
.feat-grad-2{background:linear-gradient(135deg,#1d8f7a,#2fd0a8)}
.feat-grad-3{background:linear-gradient(135deg,#2b3a67,#5a6fb0)}
.feat-grad-4{background:linear-gradient(135deg,#c0392b,#e67e22)}
.feat-grad-5{background:linear-gradient(135deg,#6a2c70,#b83b5e)}
.feat-grad-6{background:linear-gradient(135deg,#166a4e,#4caf7d)}
.feat-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.feat-body h3{font-size:1.18rem;font-weight:600;margin-bottom:8px;color:#171819}
.feat-body p{font-size:.92rem;color:#5c5c66;margin:0 0 14px;line-height:1.55}
.feat-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.feat-chips span{font-size:.74rem;font-weight:600;color:#f13a11;background:rgba(241,58,17,.09);padding:4px 11px;border-radius:999px}
.feat-body .btn{align-self:flex-start;margin-top:auto}
/* Partners — quiet grayscale logo strip above the footer. */
.partners-band{padding:44px 0;border-top:1px solid #eeeef2}
.partners-band h6{color:#8a8a94}
.partners-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.partner-item{display:inline-flex;align-items:center;justify-content:center;height:128px;width:160px;padding:12px;border:1px solid #e8e8ee;border-radius:12px;background:#fff;filter:grayscale(1);opacity:.95;transition:filter .2s,opacity .2s,transform .2s,box-shadow .2s}
.partner-item:hover{filter:grayscale(0);opacity:1;transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,24,25,.08);text-decoration:none}
/* Real logos: ![]()
fills the tile (contain keeps aspect for wide OR tall logos,
so every partner matches). For the biggest look, provide tight-cropped logos
with little internal whitespace (ideally transparent PNG). */
.partner-item img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
/* Placeholder chip until a real logo is dropped in. */
.partner-ph{font-size:.9rem;font-weight:700;letter-spacing:.03em;color:#9a9aa6}
/* Membership — reservation timeline (numbered steps + connectors, no JS). */
.rez-title{font-size:1.25rem;font-weight:700;color:#171819}
.rez-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.rez-step{position:relative;text-align:center;padding:0 6px}
.rez-num{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:14px;border-radius:50%;background:#f13a11;color:#fff;font-weight:700;font-size:1.2rem;box-shadow:0 4px 12px rgba(241,58,17,.3)}
/* Connector line from this number to the next (hidden on the last step). */
.rez-step::after{content:'';position:absolute;top:23px;left:calc(50% + 30px);width:calc(100% - 60px);height:2px;background:#e0e0e6;z-index:0}
.rez-step:last-child::after{display:none}
.rez-step h4{font-size:1.05rem;font-weight:600;margin-bottom:6px;color:#171819}
.rez-step p{font-size:.9rem;color:#5c5c66;margin:0;line-height:1.5}
.rez-soon{text-align:center;margin-top:26px;color:#f13a11;font-weight:600;font-size:.95rem}
@media(max-width:767px){
.rez-timeline{grid-template-columns:1fr;gap:22px;max-width:340px;margin:0 auto;text-align:left}
.rez-step{display:grid;grid-template-columns:48px 1fr;column-gap:16px;text-align:left;padding:0}
.rez-num{grid-row:1 / span 2;margin-bottom:0}
.rez-step::after{display:none} /* vertical stack — drop horizontal connectors */
}
/* Membership — slim full-width CTA band. */
/* Membership CTA — background photo (calltoaction.jpeg) with a dark overlay so
white text stays readable. The overlay gradient is what guarantees contrast. */
.mship-band{background:linear-gradient(rgba(15,14,22,.80),rgba(15,14,22,.72)),url('/site-assets/mmsport/images/calltoaction.jpeg') center/cover no-repeat;color:#fff;padding:64px 0}
.mship-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.mship-text{flex:1 1 420px}
.mship-text h2{color:#fff;margin-bottom:10px}
.mship-text p{color:rgba(255,255,255,.82);margin:0;max-width:640px}
.mship-btn{flex:none}
/* ── Контакт page: full-bleed map + info tiles + company details ───────────
The map breaks out of Bootstrap's .container to span the viewport. It sits
directly in , so a plain 100%-wide block is already full-bleed. */
.map-full{position:relative;width:100%;height:440px;line-height:0;background:#e9e9ef}
.map-full iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9)}
@media(max-width:767px){.map-full{height:300px}}
.contact-tile{height:100%;padding:26px 22px;border:1px solid #e4e4ea;border-radius:12px;background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s}
.contact-tile:hover{border-color:#f13a11;box-shadow:0 8px 22px rgba(23,24,25,.08);transform:translateY(-2px)}
.contact-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:14px;border-radius:50%;background:rgba(241,58,17,.1);color:#f13a11;font-size:1.3rem}
.contact-tile h3{font-size:1.02rem;font-weight:600;margin-bottom:10px;color:#171819}
.contact-tile p{font-size:.94rem;margin:0 0 6px;color:#5c5c66;line-height:1.5}
.contact-tile a{color:#5c5c66}
.contact-tile a:hover{color:#f13a11;text-decoration:none}
.contact-sub{font-size:.86rem!important;color:#8a8a94!important}
.legal-box{padding:28px 30px;border:1px solid #e4e4ea;border-radius:12px;background:#fff}
.legal-box h3{font-size:1.05rem;font-weight:600;color:#171819}
.legal-list{margin:0}
.legal-list > div{display:flex;flex-wrap:wrap;gap:8px;padding:11px 0;border-top:1px solid #eeeef2}
.legal-list > div:first-child{border-top:0}
.legal-list dt{flex:0 0 150px;font-weight:600;color:#8a8a94;font-size:.84rem;text-transform:uppercase;letter-spacing:.04em;margin:0}
.legal-list dd{flex:1 1 220px;margin:0;color:#171819;font-size:.96rem;word-break:break-word}
.legal-list dd a{color:#171819}
.legal-list dd a:hover{color:#f13a11;text-decoration:none}
@media(max-width:575px){.legal-list dt{flex-basis:100%}}
/* ── Mobile nav — pure-CSS hamburger (no JS) ────────────────────────────────
A hidden checkbox holds the open state; its label is the burger; the menu is
revealed by `.nav-toggle-cb:checked ~ .navbar-collapse`. On desktop the burger
and checkbox are hidden and Bootstrap's navbar-expand-lg shows the bar normally. */
.nav-toggle-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav-burger{display:none}
@media(max-width:991px){
.navbar .container{flex-wrap:wrap;align-items:center}
.navbar-brand{margin-right:auto}
/* Tighter on a narrow bar: the brand shares the row with the burger AND the theme
toggle, so the logo comes down and the name gives up more width before wrapping.
Scaled by the same 1.5 as the desktop size. */
.brand-logo{height:45px;max-width:165px}
.navbar .navbar-brand{font-size:.95rem;gap:8px}
/* Burger button (right side, next to the theme toggle). */
.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
width:46px;height:42px;padding:11px 10px;margin-left:10px;order:3;cursor:pointer;
border:1px solid rgba(23,24,25,.18);border-radius:9px;color:#222}
.nav-burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.theme-toggle{order:4}
/* Menu: hidden until the checkbox is checked, then a full-width stacked panel. */
.navbar-collapse{display:none!important;flex-basis:100%;width:100%;order:5;margin-top:12px}
.nav-toggle-cb:checked ~ .navbar-collapse{display:block!important}
/* Burger → X when open. */
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navbar-nav{flex-direction:column;width:100%;gap:0}
.navbar-nav .nav-link{padding:13px 8px!important;font-size:1.02rem;border-top:1px solid rgba(23,24,25,.08)}
.navbar-nav .nav-item:first-child .nav-link{border-top:0}
.navbar-nav .has-sub{width:100%}
.caret{display:none}
/* Submenu: no hover on touch → render inline, indented, always open. */
.sub-menu{position:static;opacity:1;visibility:visible;transform:none;display:block;
min-width:0;max-width:none;margin:0;padding:0 0 6px;background:transparent;border:0;box-shadow:none}
.sub-menu a{display:block;padding:9px 8px 9px 26px;font-size:.92rem;opacity:.9}
}
/* ══ DARK — [data-theme="dark"] ═════════════════════════════════════════════
A REAL dark theme, not just dark bands: Gymso's body, .about and the card
faces are all white, so they get flipped too. Deep charcoal, cards one shade
lighter than the body so they lift off it.
body #14131c · card #20202c · about #1a1924 · band #1c1b26 · footer #0f0e15
border #2e2b3d · text #eae8f2 · muted #a9a7b5 · accent #f13a11
═══════════════════════════════════════════════════════════════════════════ */
/* Page + generic type. Covers the detail pages (/c/courts/) for free,
since those are just headings + paragraphs in the shell. */
[data-theme="dark"] body{background:#14131c;color:#eae8f2}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5{color:#eae8f2}
[data-theme="dark"] h6{color:#8f8ca0}
[data-theme="dark"] p{color:#a9a7b5}
[data-theme="dark"] a{color:#eae8f2}
[data-theme="dark"] a:hover{color:#f13a11}
/* Navbar. */
[data-theme="dark"] .navbar{background:#1a1924!important;box-shadow:0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .navbar .navbar-brand{color:#fff!important}
[data-theme="dark"] .navbar .nav-link{color:#fff!important;opacity:.85}
[data-theme="dark"] .navbar .nav-link:hover{color:#f13a11!important;opacity:1}
/* Hero: dark wash over the photo, white type.
The brand-orange h1, the thinner veil and the halos above are LIGHT-THEME ONLY (Sasko
2026-07-17). Dark already has its own dark wash and white type, which reads fine — and the
colour override alone is not enough: text-shadow INHERITS through the cascade, so without
these resets the light theme's white halo would glow around white text on a dark wash. */
[data-theme="dark"] .hero .bg-overlay{background:#14131c;opacity:.82}
[data-theme="dark"] .hero .text-white{color:#fff!important;text-shadow:none}
[data-theme="dark"] .hero h6{color:var(--mm-amber);text-shadow:none}
[data-theme="dark"] .hero-sub{color:rgba(255,255,255,.9);text-shadow:none}
[data-theme="dark"] .hl-chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}
[data-theme="dark"] .hero .custom-btn.bordered{color:#f13a11;border-color:#f13a11}
/* Feature strip — a shade off the body so it still reads as a band. */
[data-theme="dark"] .feature{background:#1c1b26}
[data-theme="dark"] .feature .text-white{color:#fff!important}
[data-theme="dark"] .feature p{color:#a9a7b5}
[data-theme="dark"] .feature .about-working-hours{border-left-color:rgba(255,255,255,.18)}
[data-theme="dark"] .feature .about-working-hours strong{color:#fff;opacity:.9}
/* About section (Gymso paints this #f9f9f9). */
[data-theme="dark"] .about{background:#1a1924}
[data-theme="dark"] .about p{color:#a9a7b5}
/* Court + news CARD FACES — the big one. This is the white block that made the
middle of the page glare in "dark" mode. */
[data-theme="dark"] .class-info{background:#20202c;border:1px solid #2e2b3d;border-top:0;box-shadow:0 6px 24px rgba(0,0,0,.35)}
[data-theme="dark"] .class-info h3,[data-theme="dark"] .class-info h3 a{color:#eae8f2}
[data-theme="dark"] .class-info h3 a:hover{color:#f13a11}
[data-theme="dark"] .class-info p{color:#a9a7b5}
[data-theme="dark"] .class-info strong,[data-theme="dark"] .class-info span{color:#8f8ca0}
[data-theme="dark"] .class-info .class-price{color:#fff}
/* News cards (feat-card shape) in dark — the outer .news-thumb IS the card, so
neutralise the inner .class-info face that the rule above darkens. */
[data-theme="dark"] .news-thumb{background:#20202c;border-color:#2e2b3d;box-shadow:0 6px 18px rgba(0,0,0,.35)}
[data-theme="dark"] .news-thumb:hover{box-shadow:0 16px 34px rgba(0,0,0,.5)}
[data-theme="dark"] .news-thumb .class-info{background:transparent;border:0;box-shadow:none}
[data-theme="dark"] .news-date{color:#f13a11}
/* The "50+ / 230+" stat tiles in За нас. */
[data-theme="dark"] .team-info{background:#20202c;border:1px solid #2e2b3d;border-top:0}
[data-theme="dark"] .team-info h3{color:#eae8f2}
[data-theme="dark"] .team-info span{color:#8f8ca0}
/* Contact. */
[data-theme="dark"] .contact p{color:#a9a7b5}
[data-theme="dark"] .contact a{color:#eae8f2}
[data-theme="dark"] .contact a:hover{color:#f13a11}
[data-theme="dark"] .contact .fa{color:#f13a11}
/* Footer — deepest band on the page. */
[data-theme="dark"] .site-footer{background:#0f0e15;color:#fff;border-top:1px solid #2e2b3d}
[data-theme="dark"] .footer-title{color:#fff}
[data-theme="dark"] .site-footer .footer-links a{color:rgba(255,255,255,.72)}
[data-theme="dark"] .footer-contact{color:rgba(255,255,255,.82)}
[data-theme="dark"] .site-footer .footer-contact a{color:rgba(255,255,255,.82)}
[data-theme="dark"] .footer-social .social-icon{background:rgba(255,255,255,.12);color:#fff}
[data-theme="dark"] .footer-social .social-icon:hover{background:#f13a11;color:#fff}
[data-theme="dark"] .footer-map{background:rgba(255,255,255,.06)}
[data-theme="dark"] .site-footer .footer-bottom{border-top-color:rgba(255,255,255,.14)}
[data-theme="dark"] .site-footer .footer-bottom .copyright-text{color:rgba(255,255,255,.6)}
/* Toggle pill on the dark bar. */
[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,.3);color:#fff}
[data-theme="dark"] .theme-toggle:hover,[data-theme="dark"] .theme-toggle:focus{background:rgba(255,255,255,.12);border-color:#f13a11;color:#fff}
/* За нас submenu panel. */
[data-theme="dark"] .sub-menu{background:#20202c;border-color:#2e2b3d;box-shadow:0 12px 30px rgba(0,0,0,.5)}
[data-theme="dark"] .sub-menu a{color:#d7d5e2}
[data-theme="dark"] .sub-menu a:hover,[data-theme="dark"] .sub-menu a:focus{background:rgba(255,255,255,.07);color:#f13a11}
/* On mobile the panel is inline on the bar itself, so it must not carry a bg. */
@media(max-width:991px){
[data-theme="dark"] .sub-menu{background:transparent;border:0;box-shadow:none}
[data-theme="dark"] .sub-menu a{color:#fff;opacity:.8}
[data-theme="dark"] .nav-burger{color:#fff;border-color:rgba(255,255,255,.25)}
[data-theme="dark"] .navbar-nav .nav-link{border-top-color:rgba(255,255,255,.1)}
}
/* Homepage sections. */
[data-theme="dark"] .hero-strip-card{background:#20202c;box-shadow:0 22px 50px rgba(0,0,0,.55)}
[data-theme="dark"] .hs-item:hover{background:#2a2937}
[data-theme="dark"] .hs-label{color:#eae8f2}
[data-theme="dark"] .soft-band{background:#181722}
[data-theme="dark"] .intro-lead{color:#a9a7b5}
[data-theme="dark"] .explore-tile{background:#20202c;border-color:#2e2b3d}
[data-theme="dark"] .explore-tile:hover{border-color:#f13a11;box-shadow:0 14px 30px rgba(0,0,0,.45)}
[data-theme="dark"] .explore-tile h3{color:#eae8f2}
[data-theme="dark"] .explore-tile p{color:#9a98a8}
[data-theme="dark"] .svc-card{background:#20202c;border-color:#2e2b3d;box-shadow:0 6px 18px rgba(0,0,0,.35)}
[data-theme="dark"] .svc-card:hover{border-color:#f13a11;box-shadow:0 16px 34px rgba(0,0,0,.5)}
[data-theme="dark"] .svc-card-img{background:#191823}
[data-theme="dark"] .svc-card-body h3{color:#eae8f2}
[data-theme="dark"] .svc-card-body p{color:#9a98a8}
[data-theme="dark"] .why-item h3{color:#eae8f2}
[data-theme="dark"] .why-item p{color:#a9a7b5}
[data-theme="dark"] .feat-card{background:#20202c;border-color:#2e2b3d;box-shadow:0 6px 18px rgba(0,0,0,.35)}
[data-theme="dark"] .feat-card:hover{box-shadow:0 16px 34px rgba(0,0,0,.5)}
[data-theme="dark"] .feat-ph{background:#191823}
[data-theme="dark"] .feat-body h3{color:#eae8f2}
[data-theme="dark"] .feat-body p{color:#a9a7b5}
/* Membership band already dark; lift it off the near-black page slightly. */
[data-theme="dark"] .mship-band{background:linear-gradient(rgba(8,7,12,.86),rgba(8,7,12,.78)),url('/site-assets/mmsport/images/calltoaction.jpeg') center/cover no-repeat}
[data-theme="dark"] .rez-title{color:#eae8f2}
[data-theme="dark"] .rez-step h4{color:#eae8f2}
[data-theme="dark"] .rez-step p{color:#a9a7b5}
[data-theme="dark"] .rez-step::after{background:#39364a}
[data-theme="dark"] .partners-band{border-top-color:#2e2b3d}
/* Partner logos are colour-on-white artwork; on the dark page they read best on a
uniform white chip (a clean "logo wall") rather than dark tiles that let each
logo's own background show through inconsistently. */
[data-theme="dark"] .partner-item{background:#fff;border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .partner-ph{color:#9a9aa6}
/* Контакт page. */
[data-theme="dark"] .map-full{background:#1a1924}
/* Google's embed is a light map; dim it so it doesn't glare in dark mode. */
[data-theme="dark"] .map-full iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95)}
[data-theme="dark"] .contact-tile{background:#20202c;border-color:#2e2b3d}
[data-theme="dark"] .contact-tile:hover{border-color:#f13a11;box-shadow:0 8px 22px rgba(0,0,0,.4)}
[data-theme="dark"] .contact-tile h3{color:#eae8f2}
[data-theme="dark"] .contact-tile p,[data-theme="dark"] .contact-tile a{color:#a9a7b5}
[data-theme="dark"] .contact-tile a:hover{color:#f13a11}
[data-theme="dark"] .contact-sub{color:#8f8ca0!important}
[data-theme="dark"] .legal-box{background:#20202c;border-color:#2e2b3d}
[data-theme="dark"] .legal-box h3{color:#eae8f2}
[data-theme="dark"] .legal-list > div{border-top-color:#2e2b3d}
[data-theme="dark"] .legal-list dt{color:#8f8ca0}
[data-theme="dark"] .legal-list dd,[data-theme="dark"] .legal-list dd a{color:#eae8f2}
[data-theme="dark"] .legal-list dd a:hover{color:#f13a11}
/* Документи rows. */
[data-theme="dark"] .doc-row{background:#20202c;border-color:#2e2b3d}
[data-theme="dark"] .doc-row:hover{border-color:#f13a11;box-shadow:0 6px 18px rgba(0,0,0,.4)}
[data-theme="dark"] .doc-body strong{color:#eae8f2}
[data-theme="dark"] .doc-meta,[data-theme="dark"] .doc-dl{color:#8f8ca0}
[data-theme="dark"] .doc-row:hover .doc-dl{color:#f13a11}
/* ═══════════════════════════════════════════════════════════════════════════════
VICTORYCLUB REVAMP — component overrides
Placed at the very end so they win the cascade over the base rules above without
editing each one. Only look/feel: no structure, no colours-of-meaning changed.
═══════════════════════════════════════════════════════════════════════════════ */
/* ── Brand wordmark: uppercase Oswald like the VictoryClub logotype ───────────── */
.navbar .navbar-brand,.navbar .navbar-brand .brand-name{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em}
/* Brand tagline (the logo's slogan) stacked under the wordmark. */
.navbar .navbar-brand .brand-wrap{display:flex;flex-direction:column;justify-content:center;line-height:1.12}
.brand-tag{font-family:'Oswald',sans-serif;font-size:.62rem;font-weight:400;letter-spacing:.08em;text-transform:none;color:#6c6c76;margin-top:3px;white-space:nowrap}
.brand-tag b{font-weight:700;color:var(--mm-orange)}
[data-theme="dark"] .brand-tag{color:rgba(255,255,255,.6)}
@media(max-width:575px){.brand-tag{display:none}}
/* ── Buttons → orange gradient with lift + glow (bordered/bg-color keep their own) ── */
.btn.custom-btn{transition:transform .3s,box-shadow .3s,filter .3s,background .2s}
.btn.custom-btn:not(.bordered):not(.bg-color),
.hero .custom-btn:not(.bordered):not(.bg-color),
.class-thumb .btn.custom-btn{
background:var(--mm-grad-primary);border:0;color:#fff!important;box-shadow:var(--mm-shadow-sports)}
.btn.custom-btn:not(.bordered):not(.bg-color):hover,
.btn.custom-btn:not(.bordered):not(.bg-color):focus,
.hero .custom-btn:not(.bordered):not(.bg-color):hover,
.class-thumb .btn.custom-btn:hover{
background:var(--mm-grad-primary);filter:brightness(1.07);transform:translateY(-2px);
box-shadow:var(--mm-shadow-glow);color:#fff!important}
/* Membership CTA (.bg-color) → solid gradient too, so every CTA matches. */
.mship-btn,.btn.custom-btn.bg-color{background:var(--mm-grad-primary)!important;border:0!important;color:#fff!important;box-shadow:var(--mm-shadow-sports)}
.mship-btn:hover,.btn.custom-btn.bg-color:hover{filter:brightness(1.07);transform:translateY(-2px);box-shadow:var(--mm-shadow-glow)}
/* ── Hero — bigger, condensed Oswald + gradient-text accent span ──────────────── */
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:.98;letter-spacing:-.02em}
/* .grad span keeps the gradient even though .hero .text-white sets colour !important */
/* Hero: small white intro line (h3) + big orange gradient statement (h1). */
.hero .grad{background:var(--mm-grad-victory);-webkit-background-clip:text;background-clip:text;
color:transparent!important;text-shadow:none}
.hero h1.grad{margin:.15rem 0 0;font-size:clamp(2.7rem,6.4vw,4.8rem)!important;line-height:1!important;
letter-spacing:-.02em!important}
/* ── Cards → deeper lift, orange border, glow shadow, image zoom on hover ─────── */
.feat-card,.svc-card,.explore-tile,.news-thumb,.contact-tile,.doc-row{
transition:transform .35s,box-shadow .35s,border-color .35s}
.feat-card:hover,.svc-card:hover,.explore-tile:hover,.news-thumb:hover,.contact-tile:hover{
transform:translateY(-8px);border-color:var(--mm-orange);box-shadow:var(--mm-shadow-sports)}
.feat-ph,.svc-card-img{overflow:hidden}
.feat-ph img,.svc-card-img img,.news-thumb img{transition:transform .7s ease}
.feat-card:hover .feat-ph img,.svc-card:hover .svc-card-img img,.news-thumb:hover img{transform:scale(1.07)}
/* Featured card chips + news date pick up the condensed display face. */
.feat-chips span,.news-date,.soon-tag,.feat-soon,.hl-chip{font-family:'Oswald',sans-serif;letter-spacing:.04em}
/* ── Subtle diagonal stripe on the soft band (VictoryClub's stadium texture) ───── */
.soft-band{background-color:#f7f7fa;background-image:repeating-linear-gradient(135deg,rgba(241,58,17,.045) 0,rgba(241,58,17,.045) 2px,transparent 2px,transparent 14px)}
[data-theme="dark"] .soft-band{background-color:#181722;background-image:repeating-linear-gradient(135deg,rgba(255,157,46,.05) 0,rgba(255,157,46,.05) 2px,transparent 2px,transparent 14px)}
/* News band — same idea as .soft-band but the diagonal stripes run the OTHER way
(45deg vs 135deg) and a slightly different tone, so Вести reads as its own block,
not a copy of the "Откриј го ММ Спорт" band. */
.news-band{background-color:#f4f4f9;background-image:repeating-linear-gradient(45deg,rgba(241,58,17,.05) 0,rgba(241,58,17,.05) 2px,transparent 2px,transparent 15px)}
[data-theme="dark"] .news-band{background-color:#191826;background-image:repeating-linear-gradient(45deg,rgba(255,157,46,.06) 0,rgba(255,157,46,.06) 2px,transparent 2px,transparent 15px)}
/* ── Reservation-step numbers + why medallions → gradient chips ───────────────── */
.rez-num{background:var(--mm-grad-primary)}
.why-ico{background:rgba(241,58,17,.12)}
/* ── Footer: VictoryClub's multicolour top stripe ────────────────────────────── */
.site-footer{position:relative}
.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,var(--mm-orange) 0 25%,var(--mm-amber) 25% 50%,var(--mm-orange) 50% 75%,var(--mm-amber) 75% 100%)}
/* ═══════════════════════════════════════════════════════════════════════════════
HERO — the VictoryClub stadium treatment (bold, premium, both themes)
A dark diagonal overlay makes the photo read cinematic and lets the type pop;
left-aligned like the template; white headline with an orange→amber gradient
accent line; amber eyebrow. Same in light AND dark so it never looks washed.
═══════════════════════════════════════════════════════════════════════════════ */
.hero{min-height:90vh}
/* Hero slider — CSS-only crossfade of BOTH photo and text (no JS; the CSP blocks
scripts). Photo N and copy N share the same 4-step timing so they change together.
.hero keeps hero1 as the base so there's never a gap; reduced-motion users get a
single static slide. */
.hero{position:relative;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
.hero .bg-overlay{z-index:1}
.hero .container{position:relative;z-index:2}
/* All copies share ONE grid cell → the block auto-sizes to the tallest, no jump. */
.hero-rotator{display:grid}
.hero-copy{grid-column:1;grid-row:1;opacity:0}
/* 5 slides × 5s each = a 25s cycle. Adding/removing a slide means updating the
duration, the delays, and the keyframe stops (each slide is visible for 1/n of
the cycle: 5s = 20%, with a short crossfade either side). */
.hero-slide,.hero-copy{animation:hero-fade5 25s infinite}
.hero-slide:nth-child(1),.hero-copy:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2),.hero-copy:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3),.hero-copy:nth-child(3){animation-delay:10s}
.hero-slide:nth-child(4),.hero-copy:nth-child(4){animation-delay:15s}
.hero-slide:nth-child(5),.hero-copy:nth-child(5){animation-delay:20s}
@keyframes hero-fade5{0%{opacity:0}2.4%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
.hero-slide,.hero-copy{animation:none;opacity:0}
.hero-slide:nth-child(1),.hero-copy:nth-child(1){opacity:1}
}
.hero .bg-overlay{
background:linear-gradient(115deg,rgba(7,8,13,.9) 0%,rgba(7,8,13,.6) 42%,rgba(9,10,15,.34) 66%,rgba(241,58,17,.4) 100%)!important;
opacity:1!important}
/* Left-align the hero block (overrides Gymso's .text-center on .hero-text). */
.hero .hero-text{text-align:left!important;max-width:760px;margin-right:auto}
.hero h6{color:var(--mm-amber)!important;justify-content:flex-start;text-shadow:0 1px 12px rgba(0,0,0,.6)!important;
font-size:.82rem;letter-spacing:.24em;margin-bottom:1.1rem}
.hero .text-white{color:#fff!important;
font-size:clamp(1.7rem,3.6vw,2.7rem)!important;line-height:1.1!important;letter-spacing:-.01em!important;
text-shadow:0 2px 5px rgba(0,0,0,.45),0 6px 34px rgba(0,0,0,.5)!important}
.hero-sub{color:rgba(255,255,255,.9)!important;margin:1.3rem 0 0!important;max-width:560px;
text-shadow:0 1px 12px rgba(0,0,0,.5)!important}
.hero-cta{justify-content:flex-start!important;margin-top:2rem!important}
/* Hero outline ("Нашите услуги") → amber ghost, like the template. */
.hero .custom-btn.bordered{background:transparent;border:2px solid var(--mm-amber);color:var(--mm-amber)!important;
box-shadow:none}
.hero .custom-btn.bordered:hover{background:var(--mm-amber);color:#231a00!important;transform:translateY(-2px)}
/* ── A touch more "expensive": stronger section headings + calmer leads ───────── */
.section h2,.text-center h2{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.05}
.intro-lead{font-size:1.14rem}
/* Hero trust line (small credentials under the CTA). */
.hero-trust{margin:1.4rem 0 0;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
font-size:.8rem;color:rgba(255,255,255,.78);text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* Brand story line — a bold, warm statement leading the intro band. Sentence case
(not the uppercase heading treatment) so it reads as a human message, with the
2nd line in the orange→amber gradient. Plain band, theme-aware colour. */
.story-line{margin:0 0 1.1rem;text-align:center;font-family:'Oswald',sans-serif;font-weight:600;
font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.2;letter-spacing:.01em;color:#171819}
[data-theme="dark"] .story-line{color:#f2f0f8}
/* Мисија — centred statement band under the hero. Short orange divider, a larger
lead line, then a calmer supporting line. */
.mm-divider{display:block;width:56px;height:3px;margin:0 auto 1.7rem;border-radius:2px;background:var(--mm-grad-victory)}
.mission-lead{font-size:1.32rem;line-height:1.62;font-weight:500;color:#171819;margin-bottom:1.1rem}
[data-theme="dark"] .mission-lead{color:#eceaf3}
/* Community — two real photos + short copy (the "why you'll love it" band). */
.community-photos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.community-photos img{width:100%;height:340px;object-fit:cover;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.18)}
@media(max-width:700px){.community-photos{grid-template-columns:1fr}.community-photos img{height:240px}}
/* ── Членство page — pricing table, highlighted example, 3-step reserve ───────── */
.price-table-wrap{max-width:840px;margin:2.6rem auto 0;overflow-x:auto}
.price-table{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.price-table th,.price-table td{padding:14px 16px;text-align:left;border-bottom:1px solid #e4e4ea}
.price-table thead th{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
color:var(--mm-orange);border-bottom:2px solid var(--mm-orange)}
.price-table td:first-child{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
[data-theme="dark"] .price-table th,[data-theme="dark"] .price-table td{border-bottom-color:#2b2f3c}
.example-box{max-width:760px;margin:0 auto;position:relative;padding:26px 28px;border:1px solid var(--mm-orange);
border-radius:16px;background:rgba(241,58,17,.06)}
[data-theme="dark"] .example-box{background:rgba(241,58,17,.1)}
.example-box p{margin:0;font-size:1.06rem;line-height:1.7}
.example-tag{display:inline-block;margin-bottom:.7rem;font-family:'Oswald',sans-serif;text-transform:uppercase;
letter-spacing:.1em;font-size:.72rem;font-weight:700;color:#fff;background:var(--mm-grad-primary);
padding:4px 13px;border-radius:999px}
.rez-timeline-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:767px){.rez-timeline-3{grid-template-columns:1fr}}
/* ── Scroll reveal — subtle fade-up as elements enter the viewport ─────────────
CSS-only (scroll-driven animations), so it respects the site's no-JS/strict-CSP
rule. It uses the `translate` property (NOT `transform`) so it composes with the
cards' `transform` hover-lift instead of overriding it while the animation fills.
Guarded by @supports (browsers without it just show content normally) AND
prefers-reduced-motion (users who disable motion see none) — the professional
default. Kept restrained: a small rise + fade, nothing flashy. */
@keyframes mm-reveal{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.section .text-center,.intro-band .text-center,
.feat-card,.svc-card,.explore-tile,.news-thumb,
.why-item,.rez-step,.contact-tile,.doc-row,.mship-inner{
animation:mm-reveal both linear;
animation-timeline:view();
animation-range:entry 5% cover 22%;
}
}
}
/* ── Booking preview (/booking/) — read-only availability ─────────────
Server-rendered, no JS. A strip of clickable day chips (any date in the next
two weeks is one click away) over a time×court grid — the whole day fits on
one screen instead of one tall row per hour. Floating Резервирај links out to
the booking app (this page never writes anything). */
.bk-nav{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:1.1rem}
/* The date is the button that opens the calendar — styled as a pill so that reads. */
.bk-date{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:999px;
border:1px solid #e4e4ea;background:#fff;color:inherit;text-decoration:none;
font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;
transition:border-color .2s,color .2s}
.bk-date:hover{border-color:var(--mm-orange);color:var(--mm-orange);text-decoration:none}
.bk-caret{font-size:.7rem;color:var(--mm-orange)}
.bk-week{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;
border:1px solid var(--mm-orange);border-radius:50%;color:var(--mm-orange);font-size:1.05rem;line-height:1;
text-decoration:none;transition:background .2s,color .2s}
.bk-week:hover{background:var(--mm-orange);color:#fff;text-decoration:none}
/* Month calendar — collapsed until the date pill is clicked (:target, no JS) */
.bk-cal{display:none;max-width:340px;margin:0 auto 1.8rem;padding:14px 16px 12px;
border:1px solid #e4e4ea;border-radius:16px;background:#fff;box-shadow:var(--mm-shadow-sports)}
.bk-cal:target{display:block}
.bk-cal-close{display:block;margin-top:10px;padding-top:9px;border-top:1px solid #e4e4ea;
text-align:center;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#8a8a94}
.bk-cal-close:hover{color:var(--mm-orange);text-decoration:none}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bk-cal-month{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
font-size:.95rem}
.bk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk-cal-dow{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:#8a8a94;
text-align:center;padding-bottom:4px}
.bk-cal-day{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:9px;
font-family:'Oswald',sans-serif;font-size:.86rem;color:inherit;text-decoration:none;
transition:background .15s,color .15s}
.bk-cal-day:hover{background:rgba(241,58,17,.12);color:var(--mm-orange);text-decoration:none}
.bk-cal-day.is-blank{visibility:hidden}
.bk-cal-day.is-past{color:#c9c9d1} /* nothing to preview back there */
.bk-cal-day.is-full{color:#b6b6c0} /* no free slot — still clickable */
.bk-cal-day.is-today{box-shadow:inset 0 0 0 1px var(--mm-orange)}
.bk-cal-day.is-active,.bk-cal-day.is-active:hover{background:var(--mm-grad-primary);color:#fff;
box-shadow:var(--mm-shadow-glow);font-weight:600}
/* Time × court grid */
.bk-gridwrap{max-width:900px;margin:0 auto;overflow-x:auto} /* narrow screens scroll the table, not the page */
.bk-grid{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.9rem}
.bk-grid th{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.bk-grid thead th{font-size:.68rem;color:#8a8a94;padding:0 8px 6px;text-align:center;white-space:nowrap}
.bk-grid thead .bk-th-time{text-align:left}
.bk-grid tbody th,.bk-grid tbody td{background:#fff;border-top:1px solid #e4e4ea;border-bottom:1px solid #e4e4ea}
.bk-grid tbody th:first-child{border-left:1px solid #e4e4ea;border-radius:10px 0 0 10px}
.bk-grid tbody td:last-child{border-right:1px solid #e4e4ea;border-radius:0 10px 10px 0}
.bk-time{padding:11px 14px;font-size:.82rem;white-space:nowrap;text-align:left}
.bk-grid td{padding:11px 8px;text-align:center;font-size:1rem;line-height:1}
.bk-grid td.is-free{color:var(--mm-orange);font-weight:700}
.bk-grid td.is-taken{color:#c9c9d1}
.bk-grid tr.is-full th,.bk-grid tr.is-full td{opacity:.55}
.bk-legend{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
margin:1.2rem 0 0;font-size:.78rem;color:#8a8a94}
.bk-key{font-size:.95rem;margin-left:10px}
.bk-key.is-free{color:var(--mm-orange)}
.bk-note{text-align:center;margin-top:.6rem;font-size:.86rem;color:#8a8a94}
.bk-reserve{position:fixed;right:22px;bottom:22px;z-index:60}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[data-theme="dark"] .bk-cal,[data-theme="dark"] .bk-date{background:#191c26;border-color:#2b2f3c}
[data-theme="dark"] .bk-cal-close{border-top-color:#2b2f3c;color:#8f8ca0}
[data-theme="dark"] .bk-cal-day.is-past{color:#4a4d5c}
[data-theme="dark"] .bk-cal-day.is-full{color:#5c5f70}
[data-theme="dark"] .bk-grid tbody th,[data-theme="dark"] .bk-grid tbody td{background:#191c26;border-color:#2b2f3c}
[data-theme="dark"] .bk-grid tbody th:first-child{border-left-color:#2b2f3c}
[data-theme="dark"] .bk-grid tbody td:last-child{border-right-color:#2b2f3c}
[data-theme="dark"] .bk-grid td.is-taken{color:#4a4d5c}
[data-theme="dark"] .bk-cal-dow,
[data-theme="dark"] .bk-grid thead th,[data-theme="dark"] .bk-legend,[data-theme="dark"] .bk-note{color:#8f8ca0}
@media(max-width:575px){
.bk-cal{max-width:100%}
.bk-grid{font-size:.82rem}
.bk-time{padding:9px 10px;font-size:.74rem}
.bk-reserve{right:14px;bottom:14px}
}
/* ── Footer brand lockup (under the social icons) ───────────────────────────
Logo + wordmark + slogan, mirroring the header brand. Reuses .brand-tag for
the slogan, but keeps it visible on phones (the header hides it there). */
.footer-brand{display:inline-flex;align-items:center;gap:11px;margin-top:1.7rem;text-decoration:none}
.footer-brand:hover,.footer-brand:focus{text-decoration:none}
.footer-brand-logo{height:52px;width:auto;max-width:200px;object-fit:contain;display:block}
.footer-brand-wrap{display:flex;flex-direction:column;justify-content:center;line-height:1.12}
.footer-brand-name{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:1.05rem;color:#171819}
[data-theme="dark"] .footer-brand-name{color:#fff}
@media(max-width:575px){.footer-brand .brand-tag{display:block}}
/* ── Header booking CTA — first item in the menu, before Спортувај ──────────
Solid orange pill sized to sit on the navbar row. */
.navbar .nav-cta{display:flex;align-items:center;margin-right:10px}
.navbar .nav-cta .btn.custom-btn{padding:7px 20px;font-size:.78rem;letter-spacing:.06em;white-space:nowrap}
@media(max-width:991px){.navbar .nav-cta{margin:10px 0 4px}}
/* ── Keep the menu on ONE row ───────────────────────────────────────────────
The theme toggle's label ("Светла"/"Темна") ate the width the nav needed, so
"ЗА НАС" wrapped onto two lines. Icon only now, plus no mid-item wrapping and
slightly tighter link padding. */
.theme-toggle-txt{display:none}
.theme-toggle{padding:7px 12px}
.navbar .navbar-nav .nav-link{white-space:nowrap}
@media(min-width:992px){.navbar .navbar-nav .nav-link{padding-left:11px;padding-right:11px}}