/* ============================================================ Mobile overlay menu v2 — JS-cloned overlay (body-level) 2026-05-14 ──────────────────────────────────────────────────────────── Tento CSS soubor cíleně targetuje TYLO classes a žije nad všemi stacking contexty, protože .m-overlay je direct child . ============================================================ */ /* Hamburger button — visible only on mobile */ .nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; width: 40px; height: 40px; margin-left: 4px; flex-direction: column; justify-content: space-between; align-items: center; position: relative; z-index: 100; } .nav-toggle span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; margin: 2px 0; transition: transform 220ms ease, opacity 200ms ease; } body.m-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.m-open .nav-toggle span:nth-child(2) { opacity: 0; } body.m-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Set nav-toggle text color per nav type */ .top-v4 .nav-toggle, .top .nav-toggle { color: rgba(248, 244, 234, 0.88); } .nav-mzdy .nav-toggle, .nav-legal .nav-toggle { color: var(--m-navy, var(--l-navy, #283669)); } /* Body-level overlay — always exists in DOM, controlled by visibility */ .m-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(8, 16, 36, 0.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 240ms; overflow-y: auto; display: none; } body.m-open .m-overlay { opacity: 1; visibility: visible; } .m-overlay-inner { max-width: 480px; margin: 0 auto; padding: 70px 28px 40px; min-height: 100%; box-sizing: border-box; } .m-overlay-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; color: rgba(255, 255, 255, 0.85); font-size: 36px; line-height: 1; cursor: pointer; padding: 6px 12px; z-index: 1; } /* Cloned UL — reset all inherited styles */ .m-overlay .m-list { display: flex !important; flex-direction: column; list-style: none; padding: 0; margin: 0; gap: 4px; } .m-overlay .m-list li { width: 100%; list-style: none; display: block; } .m-overlay .m-list a { display: block; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; padding: 14px 4px; border-bottom: 1px solid rgba(229, 196, 74, 0.14); transition: color 200ms ease, padding-left 200ms ease; font-family: 'Inter', system-ui, -apple-system, sans-serif; } .m-overlay .m-list a:hover, .m-overlay .m-list a:active { color: #e5c44a; padding-left: 8px; } .m-overlay .m-list a.nav-back { color: rgba(255,255,255,0.55); font-size: 14px; letter-spacing: 0.04em; } .m-overlay .m-list a.nav-other { color: #e5c44a; font-weight: 600; } /* Hide lang-switcher inside clone — uživatel ho má v topbaru */ .m-overlay .lang-switcher { display: none !important; } /* Show overlay only on mobile */ @media (max-width: 768px) { .m-overlay { display: block; } .nav-toggle { display: inline-flex; } /* Hide old desktop nav-links on mobile (we have overlay) */ nav .nav-links { display: none !important; } /* Lang switcher always visible in topbar */ nav .lang-switcher { display: inline-flex !important; margin-left: auto; padding: 4px 8px; gap: 2px; } nav .lang-switcher > a { width: 24px; height: 24px; font-size: 14px; } /* Reduce logo + row spacing */ nav .row { gap: 8px; flex-wrap: nowrap; } nav .logo img { height: 26px; } /* Body scroll lock when open */ body.m-open { overflow: hidden; } } /* Desktop: hide overlay structure totally */ @media (min-width: 769px) { .m-overlay { display: none !important; } .nav-toggle { display: none !important; } }