/* ========================================================================= horni-lista.css — hodiny-online.cz ------------------------------------------------------------------------- Vzhled černé horní lišty (promo pruh) nad hlavičkou. OBSAH LIŠTY JE JINDE: je to HTML vložené v administraci v poli „HTML kód do hlavičky" —

s položkami . Hotový markup je v projektové složce v souboru horni-lista-HTML-k-vlozeni.html. Prohlížeč ten

z sám vysune na začátek . O dvě věci se stará redesign-extra.js: • přesune lištu pod administrátorský pruh Shoptetu • obalí položky do

a jednou je zkopíruje, aby mohl na mobilu plynule běžet pás (viz níže) KAM SE SOUBOR NAHRÁVÁ: user/documents/assets/rkUpravy/horni-lista.css POŘADÍ V HLAVIČCE: musí se načítat AŽ ZA header-extra.css, protože ten liště na mobilu nastavuje pevnou výšku a fixní pozici. ========================================================================= */ .ho-promo-bar { background: #000; color: #fff; width: 100%; box-sizing: border-box; padding: 9px 15px; font-size: 13px; line-height: 1.3; } .ho-promo-pas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .ho-promo-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; white-space: nowrap; } /* Svislé oddělovače mezi položkami, na krajích ne. */ .ho-promo-item + .ho-promo-item { border-left: 1px solid rgba(255, 255, 255, .28); } .ho-promo-item svg { width: 20px; height: 20px; flex: 0 0 20px; color: #c9a227; } .ho-promo-bar strong { font-weight: 700; } /* Kopie položek pro běžící pás — na desktopu se nezobrazuje. */ .ho-promo-item[aria-hidden="true"] { display: none; } /* Užší desktop — zúžit rozestupy, ať se čtyři položky vejdou na řádek. */ @media (max-width: 1199px) { .ho-promo-bar { font-size: 12px; } .ho-promo-item { padding: 0 16px; } } @media (max-width: 1023px) and (min-width: 768px) { .ho-promo-bar { font-size: 11.5px; } .ho-promo-item { padding: 0 10px; gap: 7px; } .ho-promo-item svg { width: 17px; height: 17px; flex: 0 0 17px; } } /* Nejtěsnější místo celé lišty: tablet na výšku, tedy 768–860 px. Čtyři položky tam potřebují 646 px z 753 dostupných; bez tohohle zúžení se zalomily na dva řádky. Pod 768 px už jede pás, takže šířka nevadí. */ @media (max-width: 860px) and (min-width: 768px) { .ho-promo-bar { font-size: 10.5px; padding: 8px; } .ho-promo-item { padding: 0 7px; gap: 6px; } .ho-promo-item svg { width: 15px; height: 15px; flex: 0 0 15px; } } /* ========================================================================= MOBIL — BĚŽÍCÍ PÁS ------------------------------------------------------------------------- Lišta má pod 768 px pevnou výšku 34 px (--hdr-promo-h v header-extra.css) a je součástí fixní hlavičky. Čtyři položky s ikonami se do té šířky nevejdou — dřív se proto dvě poslední schovávaly a o zákaznické podpoře ani otvírací době se návštěvník na telefonu vůbec nedozvěděl. Teď jedou všechny čtyři pomalu zprava doleva. Pás je v DOM dvakrát za sebou a posouvá se přesně o polovinu své šířky, takže napojení není vidět a smyčka je plynulá. Kopie má aria-hidden, aby ji čtečky obrazovky nečetly dvakrát. Rychlost 26 s na jedno kolo je schválně pomalá — text musí jít přečíst, ne kolem proletět. ========================================================================= */ @media (max-width: 767px) { .ho-promo-bar { display: block; overflow: hidden; padding: 0; position: relative; } .ho-promo-pas { display: flex; align-items: center; flex-wrap: nowrap; width: max-content; will-change: transform; animation: ho-promo-jede 26s linear infinite; } /* Zastavit, když na to někdo drží prst nebo myš. */ .ho-promo-bar:hover .ho-promo-pas, .ho-promo-bar:active .ho-promo-pas { animation-play-state: paused; } .ho-promo-item { padding: 0 14px; gap: 7px; height: 34px; font-size: 11px; } .ho-promo-item svg { width: 14px; height: 14px; flex: 0 0 14px; } /* Na mobilu se kopie naopak ukazuje — je to druhá půlka pásu. */ .ho-promo-item[aria-hidden="true"] { display: inline-flex; } @keyframes ho-promo-jede { from { transform: translateX(0); } to { transform: translateX(-50%); } } } /* Kdo má v systému omezený pohyb, dostane pás bez animace — posune si ho prstem. Bez tohohle by se mu text hýbal proti jeho nastavení. */ @media (max-width: 767px) and (prefers-reduced-motion: reduce) { .ho-promo-bar { overflow-x: auto; } .ho-promo-pas { animation: none; } .ho-promo-item[aria-hidden="true"] { display: none; } } /* Černé pozadí informačního proužku Shoptetu (kdyby se zapnul). Přeneseno beze změny z původního bloku v administraci. */ .top-info-bar, .top-info-bar-in, .top-info-bar .container, .information-banner, .information-banner > div { background: #000 !important; border-color: #000 !important; } .top-info-bar .close, .information-banner .close { color: #fff !important; }