/* Roboto (self-hosted, variable woff2 - latin + latin-ext for Czech diacritics) */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+030B, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-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+030B, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; scroll-behavior: smooth; } /* i18n flash guard: i18n-boot.js adds .i18n-pending to before paint when the active locale is English, so the page never shows the Czech source copy before i18n.js translates it. Only the body's content is hidden (not itself), keeping the themed background visible. i18n.js removes the class once the page is localized; visibility (not display) avoids any layout shift. */ html.i18n-pending body > * { visibility: hidden; } .mcWRN * { outline: 1px solid red; } /* width */ ::-webkit-scrollbar { width: 5px; } /* Track */ ::-webkit-scrollbar-track { background: #5b5b5c; } /* Handle */ ::-webkit-scrollbar-thumb { background: #7d2128; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #32402c; } body { background-color: #040505; background-image: url("../imgs/background.webp"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; color: #fff; font-family: "Roboto", Arial, sans-serif; font-size: 16px; line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; text-rendering: optimizeLegibility; } a:focus-visible, button:focus-visible, .hamburger-menu:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .fa { display: inline-block; font-style: normal; line-height: 1; padding-left: 5px; } .fa-external-link::before { content: "[↗]"; } .fa-steam::before { content: "S"; } .fa-pencil-square-o::before { content: "✎"; } .fa-map-signs::before { content: "↬"; } .fa-flag-o::before { content: "⚑"; } /* Stylování content kontejnerů */ .container-main, .container { margin: clamp(96px, 16vw, 140px) auto 24px; padding: clamp(18px, 3vw, 36px); text-align: center; width: 100%; background-color: rgba(4, 5, 5, 0.65); border: #7d2128 solid 5px; border-radius: clamp(18px, 4vw, 42px); } :root { --content-box-bg: rgba(4, 5, 5, 0.75); --content-box-border: rgba(125, 33, 40, 0.45); } .content-box { background-color: var(--content-box-bg) !important; border-color: var(--content-box-border) !important; } /* Angled top-right corner for boxes. The fill and border are redrawn as two clipped layers so the rim follows the cut at a constant width, while the clip lives on the layers (not the element) so child popups/tooltips aren't clipped. Use together with .content-box; tune the cut with --bevel and --cut-border. */ .cut-corner { --bevel: 24px; --cut-border: 3px; position: relative; border: 0 !important; border-radius: 0 !important; background-color: transparent !important; } .cut-corner::before, .cut-corner::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* dark fill, sitting directly over the page background (no red behind it) */ .cut-corner::before { z-index: 0; background-color: var(--content-box-bg); clip-path: polygon( var(--cut-border) var(--cut-border), calc(100% - var(--bevel) - 1px) var(--cut-border), calc(100% - var(--cut-border)) calc(var(--bevel) + 1px), calc(100% - var(--cut-border)) calc(100% - var(--cut-border)), var(--cut-border) calc(100% - var(--cut-border))); } /* red rim as a ring, so the interior stays uncovered */ .cut-corner::after { z-index: 1; background-color: var(--content-box-border); clip-path: polygon(evenodd, 0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, 0 100%, 0 0, var(--cut-border) var(--cut-border), calc(100% - var(--bevel) - 1px) var(--cut-border), calc(100% - var(--cut-border)) calc(var(--bevel) + 1px), calc(100% - var(--cut-border)) calc(100% - var(--cut-border)), var(--cut-border) calc(100% - var(--cut-border)), var(--cut-border) var(--cut-border)); } .cut-corner > * { position: relative; z-index: 2; } .invisible-container { margin: 140px auto 20px; padding: 5px 8px; text-align: center; width: 100%; } .invisible-container h2{ text-align: center; background-color: #00000079; padding: 10px 30px; border: #7d2128 solid 5px; border-radius: 50px; } .container p, .container-main p { font-size: 1rem; line-height: 1.65; } .page-title { padding: clamp(18px, 3vw, 30px) clamp(12px, 3vw, 32px); margin: 0 auto clamp(24px, 4vw, 40px); max-width: 820px; min-width: 0; overflow-wrap: anywhere; width: 100%; text-align: center; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .contact-chip { display: inline-block; padding: 8px 26px; margin: 0 auto 16px; text-align: center; } /* Shared intro box - matches the FAQ intro field, used as the standard lead-in panel across the "O nás" subpages. */ .page-intro { background-color: rgba(4, 5, 5, 0.75); border: 1px solid rgba(125, 33, 40, 0.5); border-radius: 8px; box-shadow: 0 20px 34px rgba(0, 0, 0, 0.32); padding: clamp(20px, 3vw, 32px); margin: 0 auto clamp(24px, 4vw, 40px); max-width: none; min-width: 0; overflow-wrap: anywhere; width: 100%; text-align: left; display: grid; gap: 16px; } .page-intro p { line-height: 1.55; margin: 0; padding: 0; } .contact-chip--wide { padding: 10px 36px; margin: 28px auto 18px; font-size: 24px; letter-spacing: 0.5px; font-weight: 700; } /* ------- */ .site-footer { background-color: rgba(8, 8, 8, 0.85); color: #fff; padding: 20px 12px; text-align: center; font-size: 12pt; border-top: 1px solid rgba(125, 33, 40, 0.25); margin-top: auto; } .site-footer a { color: #fff; text-decoration: underline; } .site-footer a:focus, .site-footer a:hover { color: #fff; outline: none; } .site-footer .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: max-content max-content; gap: 12px; align-items: center; justify-content: center; } .site-footer .footer-legal { display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 0; text-align: center; } .site-footer .legal { opacity: 0.9; } .site-footer .privacy-link, .site-footer .footer-control-link { font-weight: 700; } .site-footer .footer-control-link { padding: 0; color: #fff; background: transparent; border: 0; font: inherit; text-decoration: underline; cursor: pointer; } .site-footer .footer-control-link:hover, .site-footer .footer-control-link:focus-visible { color: #fff; } .site-footer .footer-community { display: flex; gap: 12px; align-items: center; justify-content: center; } .site-footer .footer-socials { display: grid; grid-template-columns: repeat(4, 20px); gap: 4px 8px; align-items: center; justify-content: center; } .site-footer .footer-socials a { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; } .site-footer .footer-socials a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .site-footer .footer-socials img { display: block; width: 20px; height: 20px; filter: brightness(0) invert(1); } .site-footer .footer-facebook-glyph { display: block; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 27px; font-weight: 900; line-height: 20px; transform: translateY(2px); } .site-footer .footer-discord-invite { display: inline-flex; min-height: 40px; padding: 8px 12px; gap: 8px; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 6px; background-color: #7d2128; font-size: 0.875rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; } .site-footer .footer-discord-invite:hover, .site-footer .footer-discord-invite:focus-visible { background-color: #9b2932; text-decoration: none; } .site-footer .footer-discord-invite:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .site-footer .footer-discord-invite img { display: block; width: 24px; height: 24px; filter: brightness(0) invert(1); } @media screen and (max-width: 850px) { .site-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 600px) { .site-footer .footer-inner { gap: 12px; } .site-footer .footer-legal { font-size: 0.75rem; line-height: 1.2; } .site-footer .footer-community { gap: 6px; } .site-footer .footer-socials { grid-template-columns: repeat(4, 18px); gap: 4px; } .site-footer .footer-socials a, .site-footer .footer-socials img { width: 18px; height: 18px; } .site-footer .footer-facebook-glyph { font-size: 24px; line-height: 18px; } .site-footer .footer-discord-invite { width: 40px; min-height: 40px; padding: 0; } .site-footer .footer-discord-label { display: none; } } .language-switcher { list-style: none; } .language-toggle { align-items: center; background-color: transparent; border: 0; color: #fff; cursor: pointer; display: inline-flex; font-size: 0.95rem; font-weight: 800; gap: 8px; justify-content: center; letter-spacing: 0; min-height: 44px; min-width: 52px; padding: 10px 14px; transition: background-color 0.2s ease; } .language-toggle__flag { align-items: center; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); display: inline-flex; flex: 0 0 auto; line-height: 0; overflow: hidden; } .language-toggle__flag svg, .language-toggle__flag img { display: block; height: 14px; width: auto; } .language-toggle__label { line-height: 1; } .language-toggle:hover, .language-toggle:focus { background-color: #5b5b5c; } /* Stylování CTA tlačítka */ .CTA:hover { cursor: pointer } .CTA { align-items: center; background-color: #7d2128; border: #7d2128 solid 4px; color: #fff; display: flex; font-size: 1rem; font-weight: 700; justify-content: center; margin: 20px auto; min-width: 0; overflow-wrap: anywhere; padding: 12px 22px; position: relative; text-align: center; text-decoration: none; width: fit-content; max-width: 100%; } .CTA a { color: #fff; text-decoration: none } .CTA:active { background-color: #5b5b5c } .form-link { max-width: 520px; min-height: 56px; text-align: center; } /* -------- */ /* Ukotvení stropu stránky a tlačítko pro přejezd na vršek stránky */ #top { border: 0; height: 60px; margin: 0; padding: 0; top: 0 } .ToTop { background-color: #000; border-radius: 75px; bottom: 15px; display: flex; height: 50px; padding: 0 10px; position: fixed; right: 15px; width: 50px; z-index: 999; } .line1, .line2 { background-color: #fff; border-radius: 40px; height: 50%; margin: 15%; margin-top: 30%; padding: 0; width: 100% } .line1 { transform: rotate(40deg) } .line2 { transform: rotate(-40deg) } /* ---------- */ /* Tlačítko pro otevření mobilního nav menu */ .hamburger-menu { cursor: pointer; display: block; height: 20px; position: absolute; right: 15px; top: 15px; width: 60px; z-index: 900 } .hamburger-menu.open { position: fixed; } .bar { background-color: #fff; border-radius: 3px; height: 6px; margin: 10px 0; transition: all .3s ease; width: 100% } .hamburger-menu.open .bar:nth-child(1) { transform: rotate(-45deg) translate(-9px, 6px) } .hamburger-menu.open .bar:nth-child(2) { opacity: 0 } .hamburger-menu.open .bar:nth-child(3) { transform: rotate(45deg) translate(-15px, -15px) } /* ------------ */ /* schování desktopového menu */ .desktop-nav { display: none; } .desktop-nav a, .mobile-nav a { color: inherit; text-decoration: none; } /* ------------ */ /* Mobilní nav menu */ .mobile-nav { display: block; width: calc(100% - 24px); max-width: 360px; padding: 0; margin: 0; background-color: rgba(51, 51, 51, 0.96); right: 12px; top: 56px; position: fixed; z-index: 20; border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow-y: auto; max-height: calc(100vh - 72px); opacity: 0; transform: translateY(-12px) scale(0.96); transform-origin: top right; pointer-events: none; visibility: hidden; will-change: transform, opacity; } .mobile-nav.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; } .mobile-nav ul { width: 100%; padding: 16px 12px; background: transparent; border: none; } .mobile-nav ul li { display: flex; flex-direction: column; left: 0; margin: 8px 0; } .mobile-nav ul li button, .mobile-nav ul li .nav-link { align-items: center; width: 100%; font-size: 1rem; min-height: 52px; min-width: 0; height: auto; overflow-wrap: anywhere; padding: 12px 16px; background: linear-gradient(135deg, rgba(64, 64, 64, 0.85), rgba(48, 48, 48, 0.6)); color: white; display: flex; justify-content: center; font-weight: 600; border: 2px solid rgba(64, 64, 64, 0.4); border-radius: 25px; transition: all 0.3s ease; cursor: pointer; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); text-decoration: none; } .mobile-nav .language-toggle { width: 100%; } .mobile-nav ul li button:hover, .mobile-nav ul li .nav-link:hover { background: linear-gradient(135deg, rgba(64, 64, 64, 0.95), rgba(48, 48, 48, 0.75)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(64, 64, 64, 0.4); } .mobile-nav ul li button:active, .mobile-nav ul li .nav-link:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .mobile-nav ul li ul { display: none; } .mobile-nav ul li ul.open { display: block; flex-direction: column; left: 0; padding: 10px 0; width: 100%; border: 0; } .mobile-nav ul li ul li { margin: 6px 0; } .mobile-nav ul li ul li button, .mobile-nav ul li ul li .nav-link { background: linear-gradient(135deg, rgba(48, 48, 48, 0.85), rgba(32, 32, 32, 0.7)); border: 2px solid rgba(64, 64, 64, 0.3); font-size: 0.95rem; min-height: 46px; height: auto; } /* Mobile nav overlay for closing menu */ .mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 19; opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-overlay.active { display: block; opacity: 1; } /* ---------- */ /* Logo */ .logo { height: auto; left: 50%; transform: translateX(-50%); max-height: 140px; position: absolute; top: 16px; width: 140px; z-index: 15 } /* ---------- */ /* Nadpisy */ h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.12; margin-bottom: 20px; margin-top: 20px; padding-top: 10px; text-align: center } h2 { padding-bottom: 18px; padding-top: 28px; font-size: clamp(1.35rem, 3.5vw, 1.8rem); line-height: 1.2; } /* -------- */ /* Karty hráčů */ /* Uspořádání a zarovnání jednotlivých karet */ #supcom-container, #com-container, #nco-container, #recruiter-container, #spe-container, #reg-container, #fng-container, #recruits-container, #zav-container, #advmed-container, #cqb-container, #velitel-container, #rto-container, #mortar-container, #fw-container, #heli-container, #ss-container, #mm-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } /* Obarvení rámečků */ #supcom-container .member-card { border: 1px solid #8e7cc3; } #com-container .member-card { border: 1px solid #d6544e; } #nco-container .member-card { border: 1px solid #4a83d2; } #spe-container .member-card { border: 1px solid #e2850b; } #reg-container .member-card { border: 1px solid #f3d766; } #fng-container .member-card { border: 1px solid #93c47d; } #recruits-container .member-card { border: 1px solid #93c47d; } /* Stylování obsahu karet členů */ .member-card { background-color: rgba(4, 5, 5, 0.55); border: 3px solid; border-radius: 12px !important; box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35); padding: 10px 5px; width: 130px; text-align: center; } .member-card h3 { font-size: 12pt; margin-bottom: 5px; overflow: hidden; } .member-card p { font-size: 8pt; } .member-card .member-rank { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 4px 0 0; font-size: 9pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .member-card .member-rank-icon { width: 18px; height: 18px; object-fit: contain; } .member-card img { border-radius: 50% !important; width: 75px; height: 75px; } /* ----------- */ /* Stylování formulářů na stránkách */ .form { height: 100vh; left: 50%; padding: 0; background-color: rgba(4, 5, 5, 0.82); border: 1px solid; border-radius: 16px; box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35); width: auto; max-width: 100%; overflow: hidden; } /* -------------------------------- */ .socials { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 100%; overflow: none; align-items: center; } .socials img { display: flex; width: 80px; margin: 30px; border-radius: 50%; filter: brightness(0) invert(1); } @media screen and (min-width: 768px) { .container-main { padding: 28px; width: 90% } .container p, .container-main p { font-size: 1.06rem; } .CTA { font-size: 1.08rem; } .CTA:hover { cursor: pointer } .mobile-nav { background-color: rgba(51, 51, 51, 0.96); } h2 { padding-bottom: 24px; padding-top: 5px; } .socials img { width: 100px; } .logo { left: 2%; transform: none; max-height: 90px; top: 56px; width: 90px; } } @media screen and (min-width: 1200px) { .container { width: 90% } /* Match the upcoming-events wrapper to the red .container below it so the event cards never overhang the red rectangle's borders. */ .invisible-container { width: 90%; } /* Desktop nav */ /* Zobrazení aktivní stránky */ .desktop-nav .nav-link.active, .desktop-nav button.active { background-color: #7d2128; } .desktop-nav { display: flex; width: 100%; top: 35px; left: 0; position: fixed; z-index: 10; transition: top 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .desktop-nav.scrolled { top: 0; background-color: rgba(4, 5, 5, 0.78); -webkit-backdrop-filter: blur(28px) saturate(135%); backdrop-filter: blur(28px) saturate(135%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.38); } .desktop-nav .nav-container-left { background: linear-gradient(to left, #040505ff 0%, #04050500 100%); justify-content: flex-end; padding-right: 80px; } .desktop-nav .nav-container-right { background: linear-gradient(to right, #040505ff 0%, #04050500 100%); justify-content: flex-start; padding-left: 80px; } .desktop-nav .nav-container-left, .desktop-nav .nav-container-right { list-style-type: none; display: flex; width: 50%; } .desktop-nav .nav-container-left .nav-link, .desktop-nav .nav-container-right .nav-link, .desktop-nav .nav-container-left a button, .desktop-nav .nav-container-right a button, .desktop-nav .language-toggle { color: white; display: inline-block; border: 0; height: 100%; padding: 18px 14px; border-radius: 40px; width: fit-content; font-weight: bold; font-size: 1rem; text-decoration: none; } .desktop-nav .language-toggle { align-items: center; display: inline-flex; gap: 8px; } .desktop-nav .nav-container-left .nav-link:hover, .desktop-nav .nav-container-right .nav-link:hover, .desktop-nav .nav-container-left a button:hover, .desktop-nav .nav-container-right a button:hover, .desktop-nav .language-toggle:hover { color: white; background-color: #5b5b5c; border: 0; height: 100%; font-weight: bold; font-size: 1rem; cursor: pointer; } .desktop-nav .nav-container-left .nav-link.active, .desktop-nav .nav-container-right .nav-link.active, .desktop-nav .nav-container-left .nav-link.active:hover, .desktop-nav .nav-container-right .nav-link.active:hover, .desktop-nav .nav-container-left button.active, .desktop-nav .nav-container-right button.active, .desktop-nav .nav-container-left button.active:hover, .desktop-nav .nav-container-right button.active:hover { background-color: #7d2128; height: auto; margin: 10px 0; padding: 10px 14px; } /* -------- */ /* Desktopová mega-menu (O NÁS vlevo / KONTAKT vpravo) */ /* Místo svislého seznamu se otevře vodorovný panel přes celou polovinu navigace (od loga) – vlevo pro O NÁS, vpravo pro KONTAKT. */ .desktop-nav .nav-container-left, .desktop-nav .nav-container-right { position: relative; } /* Spouštěč panelu zůstává staticky uvnitř poloviny, panel se kotví k té polovině, ne k jednotlivé položce. */ .desktop-nav .nav-container-left li:has(> .mega-panel), .desktop-nav .nav-container-right li:has(> .mega-panel) { position: static; } .desktop-nav .nav-container-left li:has(> .mega-panel):hover > a button, .desktop-nav .nav-container-right li:has(> .mega-panel):hover > a button, .desktop-nav .nav-container-left li:has(> .mega-panel):focus-within > a button, .desktop-nav .nav-container-right li:has(> .mega-panel):focus-within > a button, .desktop-nav .nav-container-left li.is-open > a button, .desktop-nav .nav-container-right li.is-open > a button { background-color: #5b5b5c; border-radius: 14px 14px 0 0; } .desktop-nav .mega-panel { display: grid; grid-auto-rows: 1fr; gap: 0; position: absolute; top: 100%; left: 0; width: 90%; margin: 0; padding: 6px; box-sizing: border-box; list-style: none; box-shadow: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; pointer-events: none; z-index: 11; } .desktop-nav .mega-panel.mega-left { display: flex; flex-wrap: wrap; right: 0; left: auto; width: min(560px, 90%); max-width: 90%; padding-left: clamp(32px, 4vw, 64px); padding-right: 86px; justify-content: end; background: linear-gradient(to left, #040505ff 0%, #040505ff 45%, #040505d1 60%, #0405058f 74%, #0405054d 87%, #0405051f 95%, #04050500 100%); border-radius: 0 0 0 22px; } .desktop-nav .mega-panel.mega-left > li:nth-child(-n + 4) { order: 1; } /* Invisible full-width divider: it forces an independent second flex row, so longer labels below cannot widen or misalign items in the first row. */ .desktop-nav .mega-panel.mega-left::after { content: ""; flex: 0 0 100%; height: 0; order: 2; } .desktop-nav .mega-panel.mega-left > li:nth-child(n + 5) { order: 3; } .desktop-nav .mega-panel.mega-right { left: 0; width: max-content; max-width: 90%; padding-left: 86px; padding-right: clamp(32px, 4vw, 64px); grid-template-columns: repeat(2, max-content); justify-content: start; background: linear-gradient(to right, #040505ff 0%, #040505ff 45%, #040505d1 60%, #0405058f 74%, #0405054d 87%, #0405051f 95%, #04050500 100%); border-radius: 0 0 22px 0; } .desktop-nav .nav-container-right > li:has(> a[href="tools"]) > .mega-panel { grid-template-columns: repeat(3, max-content); max-width: 100%; } .desktop-nav li:hover > .mega-panel, .desktop-nav li:focus-within > .mega-panel, .desktop-nav li.is-open > .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .desktop-nav .mega-item { display: flex; align-items: center; gap: 6px; height: 100%; width: max-content; padding: 3px 8px; border-radius: 14px; border: 0; background: transparent; color: #fff; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .desktop-nav .mega-item:hover, .desktop-nav .mega-item:focus-visible { background: #7d2128; border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); outline: none; } .desktop-nav .mega-item[aria-current="page"] { border-color: rgba(255, 255, 255, 0.28); background: rgba(125, 33, 40, 0.72); } .desktop-nav .mega-icon { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; opacity: 0.95; } .desktop-nav .mega-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .desktop-nav .mega-title { font-weight: 700; font-size: 0.82rem; line-height: 1.15; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .desktop-nav .mega-desc { display: none; } @media (prefers-reduced-motion: reduce) { .desktop-nav .mega-panel, .desktop-nav .mega-item { transition: none; } } button { background: #04050500; } /* -------- */ /* Ukrytí mobilního menu */ .hamburger-menu, .mobile-nav, .ToTop { display: none; } /* --------------------- */ /* Logo */ .logo { transform: translateX(-50%); left: 50%; max-height: 160px; position: fixed; top: 10px; width: 160px; z-index: 15; } /* ---- */ /* Stylování hráčských karet */ #zav-container .member-card, #advmed-container .member-card, #cqb-container .member-card, #velitel-container .member-card, #rto-container .member-card, #mortar-container .member-card, #fw-container .member-card, #heli-container .member-card, #ss-container .member-card, #mm-container .member-card { padding: 10px; width: 300px; } .member-card h3 { font-size: 20pt; } .member-card p { font-size: 14pt; } .member-card { width: 300px; height: fit-content; } .member-card img { width: 100px; height: 100px; } }