/** * Téma Tábor Dvojka (tabor-dvojka_new) — vlastní styly mimo Tailwind. * Načítá se z layouts/default.htm po Tailwindu. */ /* ============================================================================= Material Symbols — základní vykreslení ikon z Google Fonts ============================================================================= */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .material-symbols-outlined.fill-1 { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Recenze — hvězdy jako SVG (font Material má jen outline; výplň neřešíme přes FILL) */ .tdv-star-svg { display: block; } .tdv-star-svg--full path { fill: #f5c800; } .tdv-star-svg--empty path { fill: rgb(26 58 107 / 0.2); } .tdv-star-svg--half .tdv-star-svg__dim { fill: rgb(26 58 107 / 0.2); } .tdv-star-svg--half .tdv-star-svg__hi { fill: #f5c800; } /* ============================================================================= Marquee (např. pás partnerů) — nekonečný posun, pauza při hoveru ============================================================================= */ .marquee-container { overflow: hidden; display: flex; user-select: none; gap: 4rem; } .marquee-content { flex-shrink: 0; display: flex; justify-content: space-around; align-items: center; gap: 4rem; min-width: 100%; animation: tdv-marquee-scroll 30s linear infinite; } @keyframes tdv-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } .marquee-container:hover .marquee-content { animation-play-state: paused; } /* ============================================================================= Skrytí scrollbaru u horizontálních pruhů (užitková třída) ============================================================================= */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ============================================================================= Hlavička — vrstvení a stav po scrollu (třída .scrolled na ) ============================================================================= */ #main-header { z-index: 100; } #main-nav { transition: background-color 0.3s ease, box-shadow 0.3s ease; } .scrolled #top-bar { height: 0; overflow: hidden; opacity: 0; padding: 0; margin: 0; border: 0; } .scrolled #main-nav { background-color: #1a3a6b; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); } .scrolled #main-nav .nav-link { color: #fff !important; } .scrolled #main-nav .nav-link:hover { color: #f5c800 !important; } /* Logo v hlavičce: jeden soubor logo.webp, na modré liště přebarveno na bílé */ #main-nav .tdv-site-logo-img { filter: none; transition: filter 0.35s ease; } .scrolled #main-nav .tdv-site-logo-img { filter: brightness(0) invert(1); } .scrolled #main-nav .nav-chevron { color: #fff; } /* ============================================================================= Desktop (lg+) — rozbalovací položky v hlavní navigaci Fade + posun, šipka, postupné zobrazení odkazů (stejný charakter jako mobil) ============================================================================= */ @media (min-width: 1024px) { #main-nav .tdv-desktop-dropdown { opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity 0.28s ease-out, transform 0.28s ease-out, visibility 0.28s; pointer-events: none; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown, #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; } #main-nav .tdv-desktop-nav-group:hover .nav-chevron, #main-nav .tdv-desktop-nav-group:focus-within .nav-chevron { transform: rotate(180deg); } } @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a, #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a { animation: tdv-mnav-sublink-in 0.26s ease backwards; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(1), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(1) { animation-delay: 0.04s; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(2), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(2) { animation-delay: 0.07s; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(3), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(3) { animation-delay: 0.1s; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(4), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(4) { animation-delay: 0.13s; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(5), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(5) { animation-delay: 0.16s; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown a:nth-child(6), #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown a:nth-child(6) { animation-delay: 0.19s; } } @media (min-width: 1024px) and (prefers-reduced-motion: reduce) { #main-nav .tdv-desktop-dropdown { transition: none; transform: none; } #main-nav .tdv-desktop-nav-group:hover > .tdv-desktop-dropdown, #main-nav .tdv-desktop-nav-group:focus-within > .tdv-desktop-dropdown { transform: none; } #main-nav .tdv-desktop-nav-group .nav-chevron { transition: none; } } /* Mobil/tablet: po scrollu bílá ikona a okraj u tlačítka hamburgeru (ne výplň) */ @media (max-width: 1023px) { .scrolled #tdv-mobile-nav .tdv-mobile-nav-summary { background-color: transparent; border-color: rgba(255, 255, 255, 0.5); color: #ffffff; } .scrolled #tdv-mobile-nav .tdv-mobile-nav-summary:hover { background-color: rgba(255, 255, 255, 0.12); } } /* ============================================================================= Mobilní fullscreen menu (#tdv-mobile-nav) — animace panelu a těla ============================================================================= */ @keyframes tdv-mnav-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes tdv-mnav-body-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #tdv-mobile-nav[open] .tdv-mobile-nav-panel { animation: tdv-mnav-panel-in 0.32s ease-out both; } @keyframes tdv-mnav-panel-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(12px); } } @keyframes tdv-mnav-body-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing { animation: tdv-mnav-panel-out 0.3s ease-in forwards; } @media (prefers-reduced-motion: no-preference) { #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing .tdv-mobile-nav-body > * { animation: tdv-mnav-body-out 0.24s ease-in forwards; } #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing .tdv-mobile-nav-body > *:nth-child(1) { animation-delay: 0s; } #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing .tdv-mobile-nav-body > *:nth-child(2) { animation-delay: 0.03s; } #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing .tdv-mobile-nav-body > *:nth-child(3) { animation-delay: 0.06s; } #tdv-mobile-nav[open] .tdv-mobile-nav-panel.tdv-mobile-nav-panel--closing .tdv-mobile-nav-body > *:nth-child(4) { animation-delay: 0.09s; } } @media (prefers-reduced-motion: no-preference) { #tdv-mobile-nav[open] .tdv-mobile-nav-body > * { animation: tdv-mnav-body-in 0.34s ease backwards; } #tdv-mobile-nav[open] .tdv-mobile-nav-body > *:nth-child(1) { animation-delay: 0.05s; } #tdv-mobile-nav[open] .tdv-mobile-nav-body > *:nth-child(2) { animation-delay: 0.09s; } #tdv-mobile-nav[open] .tdv-mobile-nav-body > *:nth-child(3) { animation-delay: 0.13s; } #tdv-mobile-nav[open] .tdv-mobile-nav-body > *:nth-child(4) { animation-delay: 0.17s; } } /* Podkategorie v mobilním menu — animovaná výška (grid 0fr → 1fr) */ .tdv-mobile-nav-panel .tdv-mnav-group-shell { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease-out; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-shell { grid-template-rows: 1fr; } .tdv-mobile-nav-panel .tdv-mnav-group-inner { min-height: 0; overflow: hidden; opacity: 1; transition: opacity 0.22s ease; } .tdv-mobile-nav-panel .tdv-mnav-group-shell.tdv-mnav-group-shell--closing { grid-template-rows: 0fr !important; } .tdv-mobile-nav-panel .tdv-mnav-group-shell.tdv-mnav-group-shell--closing .tdv-mnav-group-inner { opacity: 0; } @keyframes tdv-mnav-sublink-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link { animation: tdv-mnav-sublink-in 0.28s ease backwards; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(1) { animation-delay: 0.04s; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(2) { animation-delay: 0.07s; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(3) { animation-delay: 0.1s; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(4) { animation-delay: 0.13s; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(5) { animation-delay: 0.16s; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mnav-group-inner .tdv-mobile-nav-link:nth-child(6) { animation-delay: 0.19s; } } @media (prefers-reduced-motion: reduce) { .tdv-mobile-nav-panel .tdv-mnav-group-shell { transition: none; } .tdv-mobile-nav-panel .tdv-mnav-group-inner { transition: none; } } /* =============================================================================

v hlavičce — skrytí výchozího trojúhelníku, přepínání ikon menu/close ============================================================================= */ #main-header details summary::-webkit-details-marker { display: none; } #main-header details > summary { list-style: none; } #tdv-mobile-nav[open] .tdv-mobile-nav-icon-menu { display: none; } #tdv-mobile-nav[open] .tdv-mobile-nav-icon-close { display: block; } .tdv-mobile-nav-panel .tdv-mobile-nav-group > summary::-webkit-details-marker { display: none; } .tdv-mobile-nav-panel .tdv-mobile-nav-group > summary { list-style: none; } .tdv-mobile-nav-panel .tdv-mobile-nav-group[open] .tdv-mobile-nav-group-chevron { transform: rotate(180deg); } /* ============================================================================= Hero — YouTube pozadí (stejný princip jako ukázka React/Tailwind) 100vw × 56.25vw + min-height 100 % + min-width 177.78vh → cover 16:9 pro portrét i landscape. Čistý iframe embed; výška „100 %“ = výška .hero-youtube-root (sekce má 100svh). ============================================================================= */ .hero-youtube-root { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; background: #1a3a6b; } .hero-youtube-root iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; max-width: none; border: 0; pointer-events: none; transform: translate(-50%, -50%); transform-origin: center center; } .tdv-hero-fullbleed { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: auto; margin-left: -50vw; margin-right: 0; } /* ============================================================================= FAQ akordeon (třídy .faq-item / .faq-content / .faq-icon) ============================================================================= */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-item.active .faq-content { max-height: 320px; } .faq-item.active .faq-icon { transform: rotate(180deg); } /* ============================================================================= Fotogalerie článku — lightbox (