/* Preloader webu - procentuální načítání */ /* Preloader se zobrazí pouze tehdy, pokud je k dispozici JavaScript. Třídu "preloader-on" (zobrazení preloaderu) i "preloader-active" (skrytý obsah webu) nasazuje skript na element . */ .preloader { display: none;} html.preloader-on .preloader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #00001C; background: radial-gradient(120% 90% at 50% 0%, rgba(0,30,123,.55), rgba(0,0,28,0) 60%), linear-gradient(0deg, rgba(0,0,28,.5), #00001c); opacity: 1; visibility: visible; transition: opacity .6s ease-in-out, visibility .6s ease-in-out;} html.preloader-on .preloader.preloader-done { opacity: 0; visibility: hidden;} /* Obsah webu je po dobu načítání zcela skrytý - vykreslí se až po dokončení. Používáme visibility (ne display), aby se obrázky na pozadí stále načítaly a preloader měl z čeho počítat procenta. */ html.preloader-active { overflow: hidden;} html.preloader-active body { overflow: hidden;} html.preloader-active #facebody { opacity: 0; visibility: hidden;} /* Lišta s cookies vyjede až po odkrytí stránky */ html.preloader-active .cookies-bar, html.preloader-active .cookies-bar.is-visible { opacity: 0; visibility: hidden; animation: none;} #facebody { opacity: 1; visibility: visible; transition: opacity .5s ease-in-out;} .preloader-inner { width: 480px; max-width: calc(100% - 60px); height: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; animation: preloader-in .8s ease-in-out both;} .preloader-logo { width: 100%; height: 50px; margin: 0 0 40px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} .preloader-logo img { width: auto; height: 100%;} .preloader-counter { width: 100%; height: auto; margin: 0 0 20px 0; display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; line-height: 1;} .preloader-counter span { font-size: 90px; font-family: 'SKODANext-BlackExpanded'; font-weight: 900; color: #F6F6F6; letter-spacing: -2px; font-variant-numeric: tabular-nums;} .preloader-counter .preloader-percent-sign { font-size: 40px; margin: 0 0 0 8px; color: #7FA0BF; letter-spacing: 0;} .preloader-bar { width: 100%; height: 4px; margin: 0 0 30px 0; border-radius: 999px; overflow: hidden; background: rgba(246,246,246,.15);} .preloader-bar-fill { width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #001E7B, #004282 55%, #7FA0BF); box-shadow: 0 0 12px rgba(127,160,191,.6); transition: width .25s ease-out;} .preloader-label { width: 100%; height: auto; padding: 20px 0 0 0; border-top: 2px dotted rgba(246,246,246,.25); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;} .preloader-label p { width: 100%; margin: 0; font-size: 13px; font-family: 'SKODANext-BlackExpanded'; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; text-align: center; color: rgba(246,246,246,.55);} @keyframes preloader-in { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none;} } /* Tablety a mobilní zařízení */ @media screen and (max-width: 767px) { .preloader-logo { height: 36px; margin: 0 0 30px 0;} .preloader-counter span { font-size: 62px;} .preloader-counter .preloader-percent-sign { font-size: 28px;} .preloader-bar { margin: 0 0 25px 0;} .preloader-label p { font-size: 11px; letter-spacing: 2px;} } /* Omezení animací dle nastavení systému */ @media (prefers-reduced-motion: reduce) { .preloader-inner { animation: none;} .preloader-bar-fill { transition: none;} }