/* ========================================================================= Manilot Preloader · univerzální fullscreen loader ------------------------------------------------------------------------- Designový jazyk Manilot: ostrá faceted geometrie + červený gradient na téměř černé. Plně přebarvitelné jedinou proměnnou --mlp-accent. Použití: ...markup viz manilot-preloader.js / README... Přebarvení pro jiný projekt (stačí jediná proměnná): .mlp { --mlp-accent: #BA2A43; } Autor: Manilot media s.r.o. ========================================================================= */ .mlp, .mlp * { box-sizing: border-box; } .mlp { /* ---- Theming tokens (přepiš podle projektu) ---- */ --mlp-accent: #e82119; /* hlavní akcent (1 proměnná = nový brand) */ --mlp-bg: #202120; /* základ pozadí */ --mlp-bg-2: #131312; /* okraje pozadí (viněta) */ --mlp-text: rgba(255, 255, 255, .62); --mlp-overlay-alpha: .975; /* krytí pozadí (0–1) */ --mlp-size: 112px; /* velikost znaku */ --mlp-z: 99999; /* z-index overlaye */ --mlp-speed: 6.5s; /* rychlost rotace znaku */ /* ---- Odvozená červená rampa (color-mix => stačí měnit --mlp-accent) ---- */ --mlp-ramp-1: color-mix(in srgb, var(--mlp-accent) 62%, #ffffff); /* nejsvětlejší */ --mlp-ramp-2: color-mix(in srgb, var(--mlp-accent) 84%, #ffffff); --mlp-ramp-3: var(--mlp-accent); /* základ */ --mlp-ramp-4: color-mix(in srgb, var(--mlp-accent) 78%, #000000); --mlp-ramp-5: color-mix(in srgb, var(--mlp-accent) 52%, #000000); /* nejtmavší */ --mlp-glow: color-mix(in srgb, var(--mlp-accent) 40%, transparent); position: fixed; inset: 0; z-index: var(--mlp-z); margin: 0; /* viditelnost řídí JS / framework (display + opacity); zde default skrytí */ display: none; font-family: 'Mundial', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } /* Fallback pro prohlížeče bez color-mix (cca <2023) – pevné odstíny */ @supports not (background: color-mix(in srgb, red, blue)) { .mlp { --mlp-ramp-1: #ff7a6f; --mlp-ramp-2: #f3473c; --mlp-ramp-3: var(--mlp-accent); --mlp-ramp-4: #b0151b; --mlp-ramp-5: #7d0d14; --mlp-glow: rgba(232, 33, 25, .4); } } /* Když je aktivní (řízeno JS přidáním .is-active, nebo jQuery .fadeIn) */ .mlp.is-active { display: block; } /* Zámek scrollu, když preloader běží (přidává JS na ) */ html.mlp-open, html.mlp-open body { overflow: hidden; } /* ---- Pozadí / overlay ---- */ .mlp__backdrop { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 38%, var(--mlp-bg) 0%, var(--mlp-bg) 42%, var(--mlp-bg-2) 100%); opacity: var(--mlp-overlay-alpha); } /* Jemné manilotí faseta v pozadí – ostré diagonály */ .mlp__backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, transparent 62%, color-mix(in srgb, var(--mlp-accent) 9%, transparent) 62%, color-mix(in srgb, var(--mlp-accent) 9%, transparent) 64%, transparent 64%), linear-gradient(28deg, transparent 0%, transparent 76%, color-mix(in srgb, #ffffff 4%, transparent) 76%, color-mix(in srgb, #ffffff 4%, transparent) 77%, transparent 77%); pointer-events: none; } /* ---- Pódium / centrování ---- */ .mlp__stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; } /* ---- Znak (rotace + pulz) ---- */ .mlp__mark { position: relative; width: var(--mlp-size); height: var(--mlp-size); /* pulz = půlka otáčky -> vždy beze švu zapadne do loopu rotace */ animation: mlp-pulse calc(var(--mlp-speed) / 2) ease-in-out infinite; filter: drop-shadow(0 0 22px var(--mlp-glow)); } .mlp__mark svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; /* linear = plynulá nekonečná rotace bez zaškubnutí na konci cyklu */ animation: mlp-spin var(--mlp-speed) linear infinite; } /* Facetové plochy – fill přes proměnné rampy => přebarvitelné */ .mlp__mark .f1 { fill: var(--mlp-ramp-1); } .mlp__mark .f2 { fill: var(--mlp-ramp-2); } .mlp__mark .f3 { fill: var(--mlp-ramp-3); } .mlp__mark .f4 { fill: var(--mlp-ramp-4); } .mlp__mark .f5 { fill: var(--mlp-ramp-5); } /* Putující odlesk po facetách (staggered) – perioda = půlka otáčky, krok zpoždění = perioda/12 (= --mlp-speed / 24) => bezešvý loop */ .mlp__mark polygon { animation: mlp-shimmer calc(var(--mlp-speed) / 2) ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .mlp__mark polygon:nth-child(1) { animation-delay: 0s; } .mlp__mark polygon:nth-child(2) { animation-delay: calc(var(--mlp-speed) * -1 / 24); } .mlp__mark polygon:nth-child(3) { animation-delay: calc(var(--mlp-speed) * -2 / 24); } .mlp__mark polygon:nth-child(4) { animation-delay: calc(var(--mlp-speed) * -3 / 24); } .mlp__mark polygon:nth-child(5) { animation-delay: calc(var(--mlp-speed) * -4 / 24); } .mlp__mark polygon:nth-child(6) { animation-delay: calc(var(--mlp-speed) * -5 / 24); } .mlp__mark polygon:nth-child(7) { animation-delay: calc(var(--mlp-speed) * -6 / 24); } .mlp__mark polygon:nth-child(8) { animation-delay: calc(var(--mlp-speed) * -7 / 24); } .mlp__mark polygon:nth-child(9) { animation-delay: calc(var(--mlp-speed) * -8 / 24); } .mlp__mark polygon:nth-child(10) { animation-delay: calc(var(--mlp-speed) * -9 / 24); } .mlp__mark polygon:nth-child(11) { animation-delay: calc(var(--mlp-speed) * -10 / 24); } .mlp__mark polygon:nth-child(12) { animation-delay: calc(var(--mlp-speed) * -11 / 24); } /* ---- Volitelný popisek / wordmark ---- */ .mlp__label { margin: 0; color: var(--mlp-text); font-size: 12px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; text-indent: .42em; /* kompenzace letter-spacingu */ } .mlp__label:empty { display: none; } /* ---- Indeterminate progress bar ---- */ .mlp__bar { position: relative; width: min(190px, 42vw); height: 3px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, #ffffff 10%, transparent); } .mlp__bar > span { position: absolute; top: 0; left: 0; height: 100%; width: 42%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--mlp-ramp-2), var(--mlp-accent), var(--mlp-ramp-4), transparent); /* 5 přejezdů na otáčku => zapadne beze švu do loopu */ animation: mlp-bar calc(var(--mlp-speed) / 5) cubic-bezier(.65, 0, .35, 1) infinite; } /* =========================== Animace ============================ */ @keyframes mlp-spin { to { transform: rotate(360deg); } } @keyframes mlp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes mlp-shimmer { 0%, 100% { opacity: .5; } 45% { opacity: 1; } } @keyframes mlp-bar { 0% { left: -45%; width: 42%; } 55% { width: 58%; } 100% { left: 100%; width: 42%; } } /* =================== Přístupnost: omezený pohyb =================== */ @media (prefers-reduced-motion: reduce) { .mlp__mark svg, .mlp__mark, .mlp__mark polygon, .mlp__bar > span { animation-duration: 3.6s !important; animation-timing-function: ease-in-out !important; } .mlp__mark svg { animation: none; } /* žádná rotace */ .mlp__mark { animation: mlp-pulse 3.2s ease-in-out infinite; } .mlp__bar > span { animation: mlp-shimmer 1.6s ease-in-out infinite; width: 100%; left: 0; } }