/* ========================================================= Preloader - vzhled sladěný s designem webu (světlé téma, Poppins, barvy webu, zaoblení a stíny) Používá proměnné z style.css: --fonts, --extra-red, --extra-blue, --background-color, --linear ========================================================= */ /* Stav načítání - drží stránku zamčenou a skrytou pod překryvem */ html.is-loading, html.is-loading body { overflow: hidden; } html.is-loading #facebody { opacity: 0; } #facebody { transition: opacity .6s ease-in-out; } /* Překryvná vrstva */ .preloader { position: fixed; inset: 0; z-index: 9500; /* nad cookie lištou (9000) */ display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: var(--background-color, #f2f2f2); font-family: var(--font-display, 'Poppins', sans-serif); opacity: 1; visibility: visible; transition: opacity .6s ease-in-out, visibility 0s linear 0s; } /* Odkrytí stránky - jediný spínač je třída is-loading na */ html:not(.is-loading) .preloader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease-in-out, visibility 0s linear .6s; } .preloader__panel { width: 100%; max-width: 360px; display: flex; flex-flow: column; align-items: center; text-align: center; animation: plRiseIn .45s ease both; } .preloader__logo { width: 194px; height: 80px; margin: 0 0 20px; background: url('../themes/logo.png') center no-repeat; background-size: contain; } .preloader__eyebrow { font-size: .7em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--extra-red, #D9002F); margin: 0 0 20px; } /* Ukazatel průběhu */ .preloader__track { position: relative; width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(23, 23, 23, .08); } .preloader__fill { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(45deg, var(--extra-red, #D9002F), var(--extra-blue, #012E7D)); transform: scaleX(0); transform-origin: left center; will-change: transform; } /* Jemný přejezd světla - vizuální signál "pracuje se" */ .preloader__track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); transform: translateX(-100%); animation: plShine 1.6s ease-in-out infinite; } .preloader__meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; } .preloader__meta p { font-size: .75em; font-weight: 300; color: var(--linear, #686868); margin: 0; } .preloader__pct { font-size: .75em; font-weight: 600; color: var(--fonts, #171717); background: none; font-variant-numeric: tabular-nums; white-space: nowrap; } @keyframes plRiseIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes plShine { 0% { transform: translateX(-100%); } 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } /* Menší obrazovky */ @media (max-width: 480px) { .preloader { padding: 16px; } .preloader__panel { max-width: 280px; } .preloader__logo { width: 150px; height: 62px; margin: 0 0 16px; } .preloader__eyebrow { margin: 0 0 16px; } } /* Uživatel omezil animace - žádný pohyb, jen rychlé odkrytí */ @media (prefers-reduced-motion: reduce) { .preloader, html:not(.is-loading) .preloader, #facebody { transition-duration: .01ms !important; } .preloader__panel { animation: none; } .preloader__track::after { animation: none; opacity: 0; } } /* Tisk - preloader nikdy nesmí zůstat na papíře */ @media print { .preloader { display: none !important; } html.is-loading #facebody { opacity: 1; } }