/* Vzhled navigační mapy areálu. Převzato z prototypu (mapa_prototyp.html); vypuštěn inlinovaný výřez Leaflet CSS, který teď načítáme jako plný soubor z www/css/leaflet.css. Vypuštěny také styly správcovského režimu — administrace bude samostatná. */ /* ====== Vzhled aplikace ====== */ :root{ --bg:#f2f4f7; --panel:#ffffff; --text:#1c2733; --muted:#5b6b7b; --brand:#1c5e33; --brand2:#134a7c; --accent:#e2b70f; --border:#dde3ea; --chip:#eef1f5; --chip-on:#1c5e33; --chip-on-text:#fff; --shadow:0 2px 12px rgba(16,32,54,.10); /* Podložka pod logem — ve světlém režimu žádná, panel je stejně bílý. */ --logobg:transparent; --logopad:0; } :root:not([data-theme="light"]){} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#12181f; --panel:#1a222c; --text:#e8edf3; --muted:#9aa8b6; --border:#2b3644; --chip:#242f3c; --shadow:0 2px 12px rgba(0,0,0,.45); --logobg:#fff; --logopad:5px 8px; } } :root[data-theme="dark"]{ --bg:#12181f; --panel:#1a222c; --text:#e8edf3; --muted:#9aa8b6; --border:#2b3644; --chip:#242f3c; --shadow:0 2px 12px rgba(0,0,0,.45); --logobg:#fff; --logopad:5px 8px; } *{box-sizing:border-box} /* Stránka smí růst pod mapu — pod ní je textový seznam. Dokud tu bylo height:100%, byl celý dokument svislý flex napevno vysoký jako okno a seznam mapu vytlačil do proužku. */ html{height:100%} body{margin:0;padding:0;min-height:100%} body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;display:flex;flex-direction:column} header.app{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap} header.app .logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.02rem;margin:0} /* Rámeček obalu loga sem patří výslovně. Do 22. 9. 2026 ho span dědil od pravidla .chip pro filtrační tlačítka nad mapou — a když ta zmizela, zmizel s nimi. */ header.app .logo .chip{display:flex;flex:0 0 auto;background:var(--logobg);padding:var(--logopad);border-radius:8px;border:1px solid var(--border)} header.app .logo .chip img{height:40px;width:auto;display:block} header.app .logo .sub{color:var(--muted);font-weight:600;font-size:.95rem} .search{flex:1;min-width:220px;position:relative} .search input{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font-size:.95rem;outline:none} .search input:focus{border-color:var(--brand)} .suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);max-height:260px;overflow:auto;z-index:1200;display:none} .suggest button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;padding:9px 12px;border:0;background:none;color:var(--text);font-size:.9rem;cursor:pointer} .suggest button:hover{background:var(--chip)} .suggest .b{color:var(--muted);font-size:.8rem;white-space:nowrap} /* Mapa má vlastní výšku, ne flex:1 — o zbytek se stará běžné rolování. */ main{flex:none;display:flex;position:relative;height:72vh;min-height:380px;max-height:820px} #map{flex:1;background:#e9edf2} /* Bez vnitřního odsazení nahoře: přilepená hlavička se tak chytá rovnou horní hrany panelu a nemusí se řešit pruh, ve kterém by pod ní prosvítal rolující obsah (ořezávání probíhá až na hraně padding boxu). Odstup nad názvem dodávají .panel-zpet a .panel-hlavicka samy. */ aside#panel{width:340px;max-width:90vw;background:var(--panel);border-left:1px solid var(--border);padding:0 16px 16px;overflow:auto;display:none} aside#panel.open{display:block} aside#panel .tag{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#fff;font-weight:800;margin-right:9px} aside#panel h2{display:flex;align-items:center;margin:.2rem 0 .6rem;font-size:1.06rem} /* z-index nad přilepenou hlavičkou (2), jinak ho zakryje. */ aside#panel .close{position:absolute;top:10px;right:12px;z-index:3;border:0;background:none;color:var(--muted);font-size:1.25rem;cursor:pointer} .deptlist{margin:.5rem 0 0;padding:0;list-style:none} .deptlist li{padding:9px 10px;border:1px solid var(--border);border-radius:9px;margin-bottom:7px;font-size:.9rem} .deptlist li .fl{color:var(--muted);font-size:.78rem} .deptlist li .ph{color:var(--brand2);font-size:.82rem} .routebtn{width:100%;margin-top:10px;padding:10px;border-radius:9px;border:0;background:var(--brand);color:#fff;font-size:.92rem;font-weight:600;cursor:pointer} .routebtn.alt{background:var(--brand2);margin-top:6px} /* Název budovy a ovládání trasy zůstávají přilepené u horní hrany panelu, zatímco oddělení pod nimi rolují. Scrollovací kontejner je #panel, takže sticky se chytá jeho vnitřní hrany. Záporné okraje s dorovnaným vnitřním odsazením, a to na všech třech stranách: #panel má padding 16 px a clipping u rolování probíhá až na hraně padding boxu, takže obsah je v tom pruhu vidět. Bez toho prosvítal rolující text po stranách i NAD připnutým blokem. Ze stejného důvodu `top:-16px` — sticky se jinak chytá až pod vnitřním odsazením panelu — a neprůhledné pozadí. */ .panel-hlavicka{position:sticky;top:0;z-index:2;background:var(--panel); margin:0 -16px;padding:10px 16px 12px} .panel-hlavicka h2{margin:0} /* Název nesmí podjet křížek v rohu — připnutý by pod ním zůstal natrvalo. */ .panel-hlavicka h2{padding-right:26px} .panel-hlavicka .routebtn{margin-top:12px} /* Volba výchozího bodu trasy. Blok sedí nad seznamem oddělení, takže ho od něj odděluje linka — jinak by roletka a tlačítko splynuly se seznamem pod sebou a nebylo by poznat, kde ovládání končí. */ .trasa-box{padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--border)} .trasa-box .odkud-label{margin-top:4px} .odkud-label{display:block;margin-top:12px;font-size:.82rem;color:var(--muted)} .odkud{width:100%;margin-top:4px;padding:8px 10px;border:1.5px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:.9rem} .bezschodu{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.88rem;color:var(--text);cursor:pointer} .bezschodu input{width:17px;height:17px;flex:0 0 auto} .trasa-info{margin-top:8px;font-size:.85rem;color:var(--text)} /* Trasa v textové podobě mapy — stejná informace jako v panelu, jen mimo mapu. */ .trasa-text{font-size:.92rem;color:var(--text);background:var(--chip);border-radius:9px;padding:9px 12px;margin:0 0 1rem} .trasa-text:empty{display:none} .note{font-size:.78rem;color:var(--muted);margin-top:12px} .leaflet-tooltip.bld{background:rgba(20,30,40,.85);color:#fff;border:0;font-weight:600;font-size:.8rem;padding:3px 8px;border-radius:6px} .poi-ico{display:flex;align-items:center;justify-content:center;border-radius:6px;color:#fff;font-weight:800;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.35);border:2px solid #fff} footer.app{padding:6px 16px;background:var(--panel);border-top:1px solid var(--border);color:var(--muted);font-size:.74rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} @media (max-width:720px){ aside#panel{position:absolute;right:0;top:0;bottom:0;z-index:1050;box-shadow:-6px 0 18px rgba(0,0,0,.2)} } /* ------------------------------------------------------------------------- Ukotvená hlavička na úzkém displeji. Kdo ťukne do hledání, dostane klávesnici a prohlížeč stránku odroluje tak, aby na pole viděl. Když si to rozmyslí a ťukne do mapy, klávesnice zmizí, ale odrolování zůstane — a nahoru se nedá vrátit tažením v mapě, protože to posouvá mapu. Ukotvená hlavička ten návrat nepotřebuje. Aby přitom nesebrala pětinu displeje (naměřeno 160 px na 390×844, protože se láme do tří řádků), zeslabí se na dva: logo a hledání vedle sebe, tlačítko pod nimi. Vyjde z toho zhruba 105 px. Všechno je v media query — široký displej se nemění. ------------------------------------------------------------------------- */ @media (max-width:720px){ /* Nad panelem budovy (1050) i nad ovládáním Leafletu (1000), ale pod odkazem „Přeskočit mapu“ (2000). Neprůhledné pozadí hlavička už má, takže pod ní nic neprosvítá. */ header.app{position:sticky;top:0;z-index:1100} header.app .logo .chip img{height:28px} /* Dovětek „· mapa areálu“ se schovává jen očím, ne odečítači: stránka nemá žádný

, takže tenhle text a alt loga jsou jediné, co na ní říká, o co jde. display:none by ho vyřadil i ze stromu přístupnosti. Sada vlastností je tatáž jako u .visually-hidden — plain CSS neumí jedno pravidlo podědit, a třídu ze šablony sem dát nejde, protože platí jen pod 720 px. */ header.app .logo .sub{position:absolute;width:1px;height:1px;margin:-1px; padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Aby se hledání vešlo na první řádek vedle loga i na 360px displeji. */ .search{min-width:150px} } /* Rozměry markerů byly v prototypu inline v JS, tady patří do stylů. */ .poi-ico{width:22px;height:22px} .poi-ico.tech{width:20px;height:20px;background:#5b6b7b;border-radius:50%;font-size:11px} /* Písmeno pacientské budovy. Vlastní třída, ne .poi-ico — na té visí štítky technických budov a značky bodů zájmu, každá s jinou velikostí. */ .bld-stitek{display:flex;align-items:center;justify-content:center;width:26px;height:26px; border-radius:50%;color:#fff;font-weight:800;font-size:13px;border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35)} /* Zvýraznění oddělení, na které míří deep-link ?cil=orl */ .deptlist li.hit{border-color:var(--brand);box-shadow:0 0 0 2px rgba(28,94,51,.15)} .deptlist li .ph a{color:inherit;text-decoration:none} aside#panel .sub{font-size:.85rem;color:var(--muted)} /* Klik na budovu zaostří SVG cestu a prohlížeč kolem ní nakreslí zaostřovací rámeček. U SVG je to vždy pravoúhlý opsaný obdélník, takže to vypadá, jako by byl polygon špatně nakreslený. Pro myš ho vypínáme, pro klávesnici zůstává. */ .leaflet-interactive:focus{outline:none} .leaflet-interactive:focus-visible{outline:2px dashed var(--brand2);outline-offset:2px} /* Směrová růžice — Leaflet control v pravém dolním rohu, viz mapa.js. Žije mimo mapové plátno, takže se nezoomuje ani neodjede při posunu. Podložka je poloprůhledná, aby byla růžice čitelná i nad tmavou kresbou. */ .ruzice-box{background:var(--panel);opacity:.92;border-radius:8px;padding:3px; box-shadow:0 1px 4px rgba(16,32,54,.18);pointer-events:none} .ruzice{display:block;width:48px;height:48px;color:var(--text)} .ruzice-kruh{fill:none;stroke:currentColor;stroke-width:1;opacity:.45} .ruzice-jehla{fill:currentColor} .ruzice-sever{fill:currentColor;font:700 12px/1 system-ui,sans-serif} /* Ordinační hodiny a popis oddělení v bočním panelu */ .deptlist li .hrs{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-size:.8rem;line-height:1.5} .deptlist li .hrs b{color:var(--muted);font-weight:600} .deptlist li .desc{margin-top:5px;font-size:.8rem;color:var(--muted);line-height:1.5} /* ===== Přístupnost ===== */ /* Odkaz pro přeskočení mapy — vidět je až při zaostření klávesnicí. */ .skiplink{position:absolute;left:-9999px;z-index:2000;padding:10px 16px;background:var(--brand);color:#fff;border-radius:0 0 9px 0;text-decoration:none;font-size:.9rem} .skiplink:focus{left:0;top:0} /* Text jen pro odečítač obrazovky. */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .outlinebtn{padding:8px 13px;border-radius:9px;border:1.5px solid var(--border);background:var(--panel);color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap} .outlinebtn:hover{color:var(--text)} /* Zapnutý stav se pozná podle výplně, ne podle tučnosti. Tučné písmo tu do 22. 9. 2026 bylo a měnilo šířku tlačítka o ~4 px — v hlavičce, která je flex-wrap:wrap, to u některých šířek displeje stačilo na to, aby tlačítko po kliknutí odskočilo na vlastní řádek pod vyhledávací pole. Stav ovládacího prvku nesmí měnit jeho rozměr. */ .outlinebtn.on{background:var(--brand);border-color:var(--brand);color:#fff} /* ===== Textová podoba mapy ===== */ .textlist{padding:22px 16px 40px;max-width:820px;margin:0 auto;border-top:1px solid var(--border)} .textlist h2{font-size:1.15rem;margin:0 0 .2rem} .textlist h3{font-size:1rem;margin:1.6rem 0 .5rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .textlist h4{font-size:.9rem;margin:1rem 0 .3rem;color:var(--muted)} .textlist .sub{color:var(--muted);font-size:.85rem;margin:.2rem 0 0} .textlist .tag{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:#fff;font-weight:800;flex-shrink:0} .textlist ul{margin:.4rem 0 0;padding:0;list-style:none} .textlist li{padding:9px 12px;border:1px solid var(--border);border-radius:9px;margin-bottom:6px;font-size:.9rem;line-height:1.5} .textlist ul.plain li{border:0;padding:3px 0;margin:0} .textlist a{color:var(--brand2)} .textlist .hrs,.textlist .desc{margin-top:5px;font-size:.82rem;color:var(--muted)} .showbtn{margin-left:auto;padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--brand2);font:inherit;font-size:.8rem;cursor:pointer} .showbtn:hover{background:var(--chip)} /* ------------------------------------------------------------------------- Proužek s trasou nad mapou. Existuje jen tam, kde panel budovy leží přes mapu, tedy na úzkém displeji. Rozhoduje o tom `position:absolute` panelu o kus výš — a mapa.js se ptá přesně na to (getComputedStyle), ne na šířku okna. Breakpoint je proto napsaný jen tady v CSS a nikde se nezdvojuje. ------------------------------------------------------------------------- */ .trasa-pruh{display:none} .trasa-pruh p{margin:0;font-size:.9rem;line-height:1.45} .trasa-pruh .detail{grid-column:1;grid-row:2;justify-self:start; padding:5px 11px;border-radius:8px;border:1px solid var(--border); background:var(--panel);color:var(--brand2);font:inherit;font-size:.8rem; cursor:pointer} .trasa-pruh .zavrit{grid-column:2;grid-row:1;border:0;background:none; color:var(--muted);font:inherit;font-size:1.15rem;line-height:1; padding:0 2px;cursor:pointer} @media (max-width:720px){ /* Text a křížek vedle sebe, tlačítko podrobností pod nimi — na telefonu se věta o trase do jednoho řádku s dvěma tlačítky nevejde. */ .trasa-pruh{display:grid;grid-template-columns:1fr auto;gap:6px 10px; align-items:start;padding:10px 16px;background:var(--panel); border-bottom:1px solid var(--border)} /* Atribut hidden musí přebít display:grid, jinak by byl proužek vidět i prázdný. Selektor je o specificitu silnější, tak to sedne. */ .trasa-pruh[hidden]{display:none} } /* Tisk: mapa se vytisknout nedá, textový seznam ano. */ @media print{ main,footer.app,.skiplink,.showbtn,.trasa-pruh{display:none} /* Z hlavičky se tiskne jen nadpis — aby výtisk měl titulek a nezačínal rovnou slovy „Seznam budov a oddělení“. Hledací pole ani přepínač zvýraznění na papíře nedávají smysl. */ header.app{display:block;padding:0 0 10px;border:0;background:none} header.app .search,header.app .outlinebtn{display:none} /* Tisková stránka bývá užší než 720 px (A4 na výšku vychází kolem 640 CSS px), takže se na tisk vztahují i pravidla úzkého displeje — zmenšené logo a schovaný dovětek „· mapa areálu“. Na papíře je oboje nežádoucí, tady se to vrací. Stejná specificita, ale pozdější pravidlo. */ header.app .logo .chip img{height:40px} header.app .logo .sub{position:static;width:auto;height:auto;margin:0; clip:auto;overflow:visible} .textlist{border:0;max-width:none;padding:0} } /* ===== Fotografie ===== */ .photos{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0} .photos figure{margin:0;flex:1 1 140px;max-width:100%} .photos img{display:block;width:100%;border-radius:9px;border:1px solid var(--border);background:var(--chip)} .photos a{display:block;line-height:0} .photos figcaption{margin-top:4px;font-size:.78rem;color:var(--muted);line-height:1.4} .deptlist li .photos{margin:8px 0 2px} .deptlist li .photos figure{flex:1 1 110px} .textlist .photos figure{flex:0 0 160px} .textlist .photos img{height:110px;object-fit:cover} @media print{ .photos a{pointer-events:none} .textlist .photos figure{flex:0 0 110px} } /* ------------------------------------------------------------------------- Legenda. Na širokém displeji sdílí slot s panelem budovy: panel dostane .open,
třídu .detail a legenda se tím skryje. Kdyby stály vedle sebe jako dva sloupce, zbylo by na notebooku na mapu kolem 440 px. Kategorie filtruje legenda na každé šířce. Do 22. 9. 2026 měl úzký displej navíc pruh chipů nad mapou (.chips), aby se filtrovalo palcem shora — jenže legenda je pod mapou otevřená, takže na mobilu na výšku byly obě ovládací plochy vidět naráz a říkaly totéž dvakrát. Pruh je pryč; nevracet ho, aniž by legenda na úzkém displeji ta tlačítka přestala mít. ------------------------------------------------------------------------- */ #legenda{width:340px;max-width:90vw;flex:0 0 auto;background:var(--panel); border-left:1px solid var(--border);padding:12px 14px;overflow:auto} main.detail #legenda{display:none} /* Na širokém displeji se legenda sbalit nedá — se schová a atribut open ze šablony ji drží otevřenou. */ #legenda > summary{display:none} /* Svislé rozestupy se počítají z výšky okna. Legenda má 20 položek a při pevných 6 px výplně měří 855 px, zatímco místa je jen tolik, kolik dovolí
— 684 px na 1080p okně a 820 px na čemkoli vyšším (dál to nepustí max-height). Přetékala tedy i na velkém monitoru. clamp() to váže na okno: na vysokém displeji legenda dýchá, na nízkém se stlačí. Horní mez je dnešních 6 px, aby se nikdy nerozjela nad rámec, který se do 820 px vejde; dolní 2 px, aby se řádky neslepily. Na úzkém displeji se tohle přebíjí zpátky na pevné hodnoty — viz media query níž. */ #legenda h3{margin:clamp(.4rem,1vh,.9rem) 0 .4rem;font-size:.82rem; color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .legenda-sekce{margin:0;padding:0;list-style:none} .legenda-sekce li{margin:0 0 clamp(0px,.15vh,3px)} .legenda-kat,.legenda-bud{display:flex;align-items:center;gap:8px;width:100%; padding:clamp(2px,.45vh,6px) 8px;border:1px solid transparent; border-radius:8px;background:none;color:var(--text);font:inherit; font-size:.87rem;text-align:left;cursor:pointer} .legenda-kat:hover,.legenda-bud:hover{background:var(--chip)} .legenda-kat[aria-pressed="true"]{background:var(--chip-on); border-color:var(--chip-on);color:var(--chip-on-text)} .legenda-bud .tag{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;flex:0 0 auto;border-radius:7px;color:#fff; font-weight:800;font-size:.78rem} .legenda-bud.tech .tag{background:#5b6b7b} /* Technická budova je v legendě jen položka seznamu, ne tlačítko (proč, viz komentář v šabloně). Rozvržení sdílí s ostatními řádky, ale nesmí se tvářit klikatelně — a protože se do ní nemíří ukazatelem, nepotřebuje ani plochu na trefení. Těsnější řádek tu tedy nic nestojí a ušetří přes 40 px. */ li.legenda-bud.tech{cursor:default;padding-block:2px} li.legenda-bud.tech:hover{background:none} .ico{width:20px;height:20px;flex:0 0 auto} /* Tlačítko zpět z detailu budovy na legendu. */ /* Odstup nahoře dodává tenhle odkaz, protože panel sám žádný nemá — a když je schovaný (úzký displej), postará se o něj vnitřní odsazení hlavičky. */ .panel-zpet{display:none;border:0;background:none;color:var(--muted); font:inherit;font-size:.85rem;cursor:pointer;padding:10px 0 0} main.detail .panel-zpet{display:inline-block} @media (max-width:720px){ /* Legenda patří pod mapu, ne vedle ní.
je na širokém displeji flexový ŘÁDEK s pevnou výškou — bez přepnutí na sloupec by se legenda vmáčkla vedle mapy do 72vh. */ main{flex-direction:column;height:auto;max-height:none} #map{flex:none;height:58vh;min-height:320px} /* Na úzkém displeji je mapy málo, růžice si z ní nemá ukrajovat víc, než musí. Menší být nemůže — pod 34 px přestane být „N“ čitelné. */ .ruzice{width:38px;height:38px} #legenda{width:auto;max-width:none;border-left:0; border-top:1px solid var(--border)} #legenda > summary{display:list-item;cursor:pointer;font-weight:600; padding:4px 0} /* Panel je tu absolutní; ať překrývá mapu, ne legendu pod ní. */ aside#panel{height:58vh;bottom:auto} /* Detail budovy mapu překryje, legenda pod ní může zůstat. */ main.detail #legenda{display:block} /* A protože se tu legenda neschovává, nemá se kam vracet — tlačítko by jen zdvojovalo křížek v rohu panelu. */ main.detail .panel-zpet{display:none} /* Do legendy se tu míří prstem, ne myší, a místem se šetřit nemusí: pod mapou může seznam růst, jak chce, protože roluje celá stránka. Plynulé rozestupy z desktopu by řádky jen zúžily a hůř by se trefovaly. */ #legenda h3{margin-top:.9rem} .legenda-sekce li{margin-bottom:3px} .legenda-kat,.legenda-bud{padding-block:6px} /* Specificita li.legenda-bud.tech přebíjí řádek nad ním, musí se uvést zvlášť. */ li.legenda-bud.tech{padding-block:6px} } /* Značka bodu zájmu je piktogram, ne barevný čtvereček s textem — a proto má vlastní třídu. Třída .poi-ico zůstává štítkům technických budov, které z ní berou vystředění a bílý obrys. 22 px, ne 24 — L.marker o kus výš v mapa.js má iconSize [22, 22] a iconAnchor [11, 11]; piktogram větší než kontejner, na který je ukotvený, by seděl o dva pixely mimo střed. */ .poi-piktogram{width:22px;height:22px; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(0,0,0,.4))} /* ------------------------------------------------------------------------- Krátké zvýraznění, když návštěvník zapne kategorii nebo otevře budovu. Filtr sám o sobě jen ubere značky z mapy a oko nemá kam skočit; tohle mu ukáže, kde ty ponechané leží. Dva nádechy za 1,2 s, tedy 1,7 Hz. Hranice z WCAG 2.3.1 jsou 3 Hz — rychleji už záblesky mohou vyvolat záchvat, tak se pod ni nesmí jít. ------------------------------------------------------------------------- */ @keyframes poi-puls{ 0%{transform:scale(1)} 30%{transform:scale(1.35)} 60%{transform:scale(1)} 80%{transform:scale(1.25)} 100%{transform:scale(1)} } /* Animuje se vnitřní , NE .leaflet-marker-icon kolem něj: na tom drží Leaflet transform: translate3d(...) s polohou značky a přebít ho vlastním transformem znamená odhodit značku mimo mapu. */ .poi-puls .poi-piktogram{transform-origin:50% 50%; animation:poi-puls 1.2s ease-out; filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(0,0,0,.4)) drop-shadow(0 0 5px currentColor)} /* Budova pulzovat velikostí nemůže — souřadnice jejího leží v mapovém SVG plátně, takže scale() by ji nezvětšil na místě, ale posunul jinam. A výplň se na zvýraznění v tomhle projektu schválně nepoužívá (viz styly v mapa.js), navíc otevřená budova má fillOpacity 1. Zbývá obrys. Obrys musí po dobu zvýraznění ZTMAVNOUT. Otevřená budova ho má bílý (STYLE_ACTIVE v mapa.js) a podklad je převážně bílý, takže bílá linka roste do neviditelna. Ze stejného důvodu je pryč bílá záře, která tu byla do 22. 9. 2026: na světlé mapě se ukázala jen tam, kde obrys náhodou přešel přes tmavší kresbu, a vypadala jako stín na jedné straně budovy. #1c2733 je táž barva, jakou kreslí přepínač „Zvýraznit budovy“. */ /* Klidové hodnoty musí sedět na STYLE_ACTIVE v mapa.js (weight 1.5), jinak zvýraznění skončí skokem na jinou tloušťku, než jakou má budova nosit. */ @keyframes budova-puls{ 0%{stroke-width:1.5} 30%{stroke-width:7} 60%{stroke-width:1.5} 80%{stroke-width:5} 100%{stroke-width:1.5} } .budova-puls{animation:budova-puls 1.2s ease-out; stroke:#1c2733;stroke-opacity:1} /* Komu pohyb na obrazovce vadí, ten ho mít nemá — ale bez náhrady zůstat nesmí. Nádech se vypne a celé sdělení nese samotná záře, která se na 1,3 s rozsvítí a zase zhasne (o úklid se stará PULS_MS v mapa.js). Proto je tady silnější než v pohyblivé variantě: nemá se o co opřít. Windows tenhle režim zapínají vypnutím „efektů animací“, takže do něj spadne i leckterý počítač, kde o tom uživatel neví. */ @media (prefers-reduced-motion: reduce){ .poi-puls .poi-piktogram,.budova-puls{animation:none} .poi-puls .poi-piktogram{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 3px rgba(0,0,0,.4)) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 6px currentColor)} /* Bez nádechu drží zvýraznění jediná věc: silná tmavá linka po celou dobu. */ .budova-puls{stroke:#1c2733;stroke-opacity:1;stroke-width:6} } /* Poloha návštěvníka. Modré kolečko s bílým prstencem je konvence, kterou lidé znají z každé navigace; od značek bodů zájmu se liší tvarem, ne odstínem, protože ty mají barvy z databáze a shodu nelze vyloučit. */ .poloha-tecka { fill: #1a73e8; fill-opacity: 1; stroke: #ffffff; stroke-width: 3; } .poloha-kruh { fill: #1a73e8; fill-opacity: .12; stroke: #1a73e8; stroke-opacity: .45; stroke-width: 1.5; } /* Přibližná poloha vypadá přibližně: přerušovaná kružnice a bledší tečka. Věta to říká taky, ale většina lidí čte jen tu tečku. */ .poloha-tecka.nejista { fill: #7aa7e0; } .poloha-kruh.nejista { stroke-dasharray: 6 6; fill-opacity: .07; } /* Jeden nádech se září, ať oko kolečko v mapě najde. 1,7 Hz, tedy pod hranicí 3 Hz z WCAG 2.3.1. Uklízí se časovačem, ne animationend. */ @keyframes poloha-puls { 0%, 100% { stroke-width: 3; } 50% { stroke-width: 7; } } .poloha-tecka.puls { animation: poloha-puls .6s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .poloha-tecka.puls { animation: none; } } .poloha-soukromi { margin: 4px 0 12px; font-size: 14px; opacity: .85; } .poloha-ovladani button { padding: 6px 10px; font: inherit; font-size: 14px; background: var(--panel); color: var(--text); border: 0; cursor: pointer; } .poloha-ovladani button:focus-visible { outline: 2px dashed var(--brand2); outline-offset: 2px; }