/* Jednotná výška barevného proužku nahoře - sdílené vizuální jazyk prvků .col.balik, .prispevek-karta, .typs-info.balik, .obsah-kurzu-banner, .digi-prispevek, .rekval-prispevek, .sekce-karta, .box-row .box a .row.table.cenik-box (barvu proužku dodává samostatně .{barva}.balik/ .box-sedy, viz ico_css.php - tahle proměnná řeší jen tloušťku, ať je všude stejná a nerozjede se to znovu). Původně se tu míchalo 3px a 4px podle prvku - sjednoceno na 4px. */ :root { --stripe-height: 4px; /* Základní (neutrální) barvy webu - jediné místo pravdy. Nezávislé na barvě tematické oblasti (--kat-c, viz ico2.8.css.php/web_barvy) - používají se tam, kde prvek záměrně nenese barvu oblasti (viz komentáře u jednotlivých použití níže). Dřív existovaly 4 mírně odlišné doslovné hodnoty pro totéž (.light/ .medium/.dark tady dole + samostatná .box-sedy rgb(238,241,244)) - sjednoceno na jednu sadu proměnných, ať budoucí úprava barvy stačí udělat na jednom místě. */ --barva-logo: rgb(92,121,187); /* #5C79BB - barva loga, zatím jen definovaná */ --barva-cta: rgb(53,92,201); /* #355CC9 - hlavní CTA (tlačítko Objednat) */ /* === PŘEBARVENÍ na modrou (4. 9. 2026) === Základní (neutrální) trojice barev webu dřív byla šedomodrá (natvrdo rgb(241,242,243)/rgb(162,178,196)/rgb(89,106,127) - viz zakomentované řádky pod touto poznámkou). Zesvětlení procentuálně odpovídá původním hodnotám (--zakladni-stredni má se 45 % skoro identickou světlost jako dřívější šedomodrá - ověřeno výpočtem kontrastu; --zakladni-tmava = --barva-cta samo o sobě má taky velmi blízkou světlost dřívější tmavé šedomodré). --zakladni-tmava tím pádem vychází barevně stejně jako tlačítko Objednat/CTA - both used in different visual roles (text/odkaz vs. plné barevné tlačítko), takže by CTA nemělo přestat vizuálně vynikat, ale stojí za to to po nasazení zkontrolovat živě. */ --zakladni-svetla: color-mix(in srgb, var(--barva-cta) 8%, white); --zakladni-stredni: color-mix(in srgb, var(--barva-cta) var(--uroven2-mix), white); --zakladni-tmava: var(--barva-cta); /* PŮVODNÍ ŠEDOMODRÁ --zakladni-svetla: rgb(241,242,243); --zakladni-stredni: rgb(162,178,196); --zakladni-tmava: rgb(89,106,127); */ /* Míra zesvětlení barvy oblasti (--kat-c) na dlaždicích - viz .kat-dlazdice.uroven2/3 a odpovídající chip .souvisejici-kategorie níže. Pojmenováno, ať případná další úprava poměru nevyžaduje zásah na víc místech zvlášť. */ --uroven2-mix: 45%; --uroven3-mix: 18%; /* Rámeček úrovně 3 (.kat-dlazdice.uroven3, .col.balik.uroven3) - sytější než pozadí (--uroven3-mix), stejný princip jako u --okraj-svetly/ border-top-color jinde. Dřív psáno natvrdo na 2 místech zvlášť - sjednoceno na jednu proměnnou (audit zjednodušení 4. 9. 2026). */ --uroven3-border-mix: 25%; /* Světlý (nekategoriový) tón "chipů" - .souvisejici-odkaz a jeho varianta .sekce-chipy .souvisejici-odkaz.souvisejici-kategorie, viz komentáře tam - dřív psáno natvrdo na 2 místech zvlášť, stejný recept (audit zjednodušení 4. 9. 2026). */ --chip-svetly-mix: 12%; /* Míra zesvětlení/ztmavení barvy palety (barva_stred z web_barvy) na balíčkové dlaždici (.{barva}.balik - "Získejte příspěvek..." karty, .box-row .box apod., viz ico2.8.css.php). Samostatné jméno od --uroven2-mix/--uroven3-mix výš, přestože --balik-ramecek-mix teď vychází číselně stejně jako --uroven2-mix (shoda náhodná, ne záměrná vazba - jiná barevná paleta/zdroj dat než --kat-c) - drží se odděleně, ať budoucí úprava jedné nechtěně neovlivní druhou. Dřív ico2.8.css.php tenhle mix počítalo ručně přes PHP (rgb * podíl + 255 * (1-podíl)) - duplicitní logika ke color-mix() tady v CSS; teď PHP jen vypisuje color-mix(... var(--balik-*-mix) ...) a čte živě odsud, jedno místo pravdy pro poměr (audit zjednodušení 4. 9. 2026). */ --balik-pozadi-mix: 15%; /* pozadí karty - světlá, čitelný tmavý text */ --balik-ramecek-mix: 45%; /* rámeček karty - sytější než pozadí */ --balik-text-mix: 55%; /* text/label na světlém pozadí - tmavší varianta barvy */ /* Sjednocený základní text - dřív dvě mírně odlišné tmavé šedé pro fakticky stejnou roli: var(--text-hlavni) jako "hlavní text" na bílém/světlém pozadí (viz komentář "Main text" níže) a var(--text-hlavni) na tónovaných plochách (dlaždice, box-sedy), zavedené kvůli kontrastu. Uživatelka chtěla sjednotit a preferovala tmavší z obou - zůstává tedy var(--text-hlavni), použité teď všude místo dřívějšího var(--text-hlavni). Na bílém pozadí to kontrast jen zlepší (~7,8:1 misto ~5,7:1), na tónovaných plochách je to beze změny (tam se používalo už dřív). */ --text-hlavni: #22262b; /* Sekundární/popisný text na tónovaných plochách (statistiky, popisky, drobný text uvnitř karet) - dřív natvrdo rgb(78,89,101) na 9 různých místech - jedna proměnná, ať budoucí úprava odstínu nevyžaduje ruční hledání po celém souboru. Hodnota beze změny (žádný vizuální rozdíl), jen pojmenovaná. */ --text-vedlejsi: rgb(78,89,101); /* Světlý okraj/oddělovací linka */ --okraj-svetly: #ddd; /* Tmavý název na barevných/tónovaných dlaždicích (viz .kat-dlazdice). Záměrně SAMOSTATNÁ proměnná, ne var(--text-hlavni) - #222=rgb(34,34,34) není bajtově identické s #22262b, sloučení by (byť minimálně) změnilo vzhled. */ --text-nazev-dlazdice: #222; /* Vedlejší/drobný text - středně tmavá šedá. Jiný odstín než var(--text-vedlejsi) (rgb(78,89,101)) */ --text-stredni-555: #555; /* Vedlejší/drobný text - o něco světlejší šedá. Jiný odstín než --text-stredni-555 */ --text-stredni-666: #666; /* Základní písmo (tělo textu, formulářové prvky) */ --font-zakladni: "Calibri", "source-sans-pro-n3", "source-sans-pro", sans-serif; /* Ikony ve dvousloupcové sazbě (.txtico, viz web_txt_row() ve web.php a .txtico.ico-* ::before v ico2.8.css.php) - rozměr vyhrazeného prostoru pro ikonu (--txtico-w/--txtico-h, stejné hodnoty jako padding-left textu a min-height řádku níž v souboru - jedno místo pravdy pro obojí) a poměr, na jak velkou část tohoto prostoru se SVG varianta ikony vykreslí (--txtico-scale, bezjednotkové číslo, ne %, ať jde použít přímo v calc() násobení). Číslo popisuje samotný obrázek+způsob vykreslení masky, který je pro všechny tyhle ikony stejný, jen konkrétní SVG/PNG soubor a text vedle se liší (audit zjednodušení 4. 9. 2026). */ --txtico-w: 57px; --txtico-h: 54px; --txtico-scale: 0.6; /* Sdílený recept šipkové masky (svg maska přebarvená přes background-color, technika použitá na 10+ místech webu - menu, tlačítka, dlaždice, tabulky...). Velikost/pozice/barva šipky se na každém místě liší podle kontextu, ale samotný obrázek+způsob vykreslení masky je všude stejný - jedna proměnná pro obojí (zkrácený zápis --maska-sipka pro `mask`/ `-webkit-mask` shorthand, --sipka-img jen pro `mask-image`/ `-webkit-mask-image` na místech, která z technických důvodů (starší zápis, potřeba mask-size zvlášť) používají delší zápis) - audit zjednodušení 4. 9. 2026. */ --sipka-img: url('img/bg/gowhite.svg'); --maska-sipka: var(--sipka-img) no-repeat center / contain; /* Ikony přepínače záložek (.obalka/.obalkax - viz "Přepínač záložek" níž v souboru) - jednoduché vlastní tvary (kamera/špendlík), vložené přímo jako inline SVG data URI (žádný nový soubor navíc, na rozdíl od --sipka-img výš - assety typu img/bg/*.svg nejsou součástí složky "test", takže by se novým souborem nedaly přidat/testovat). Stejná technika jako --maska-sipka (mask + background-color: currentColor), takže ikona automaticky sleduje barvu textu (bílá na aktivní/vyplněné záložce, tlumená šedá na neaktivní) - zadání 4. 9. 2026. Existující obrázky "-zal" (web/img/ico/*-zal.svg) nejdou pro tohle použít - jsou to bílé textové "vizitky" (např. "PRAHA9"), ne jednobarevné ikony, takže by na světlém pozadí neaktivní záložky zmizely. 5. 9. 2026: nahrazeno skutečnými soubory web/img/bg/online.svg (pro Online) a web/img/bg/pozice.svg (pro Praha/Kolín) - ty už na serveru existují, takže dřívější "vlastnoručně nakreslená" náhrada přímo v CSS (jako datový URI) není potřeba. Maska bere jen alfa kanál obrázku (tvar), barva výplně uvnitř SVG souboru (#FEFEFE) je tedy nepodstatná - ikona dál sleduje currentColor/tint stejně jako dřív. */ --maska-video: url("img/bg/online.svg") no-repeat center / contain; --maska-pin: url("img/bg/pozice.svg") no-repeat center / contain; } /* === Colors === */ /* Light gray - negative button text, highlights to white */ .light, a.ico, a.icm, a.icr, .row p, .row p a { color: var(--zakladni-svetla); } .table td a, .table table tr td a:active, .table table tbody tr .gobutton a:active, .table table tbody tr.last.prefoot .gobutton a:active { border-bottom: 1px solid var(--okraj-svetly); } /* Medium grayblue - highlight for Light grayblue; highlights to Dark grayblue */ .medium, #home p a span, #left2 p span, #left2 p a, #left2 p a:visited, #left2 input { color: var(--zakladni-stredni); } /* Rámečky a nadpisy částí formulářů (legend "Kontaktní údaje"/"Poznámky" apod., modules/form.php) - základní černou barvou textu (zadání 4. 9. 2026), odebráno z výš sdílené "Medium grayblue" (byla skoro nečitelná - moc světlá na bílém pozadí formuláře). Beze změny i na hoveru/focusu (viz odstraněné výjimky u "Dark grayblue" níž) - nadpisy sekcí formuláře se barvou neliší podle stavu. */ #kontakt legend, #kontakt p { color: var(--text-hlavni); } .leftbutton input, #kontakt fieldset { border: 1px solid var(--okraj-svetly); } .hovertxt .p .a { border-bottom: 1px solid var(--okraj-svetly); } /* Linka pod nadpisy uvnitř .hovertxt (např. "Osnova školení", "Předchozí znalosti a návazná školení") - tmavší varianta základní neutrální barvy (color-mix 65 % černá) místo neutrálního #ddd, stejný recept jako pruh/ ikony u .format-sedy - zadání 26. 8. 2026. Sdílené pravidlo, platí globálně pro všechny nadpisy téhle úrovně (h3 uvnitř .hovertxt). */ .hovertxt h3 a, .hovertxt h3 .a { border-bottom: 1px solid color-mix(in srgb, var(--zakladni-stredni) 65%, black); } .popis_linka p, .popis_linka a, .collink a, .rowlink, .table .hovera .rowlink:active, .table th a, .table tr:hover td a, .table tr.last td a, .table table tr.last td a:active, .table table tbody tr.last .gobutton a:active, .hovertxt .p a, .txt .hovertxt.href .p a:active, .txt .hovertxt.href:active .p a { border-bottom: 1px solid var(--okraj-svetly); } .hovertxt .p .go a, .table tr.footer td a, .table tr.footer:hover td a, .table table tr.footer td a:active, .table table tbody tr.footer .gobutton a:active { border-bottom: none; } #home p a span { border-top: 1px solid var(--okraj-svetly); } /* Dark grayblue - highlight for Medium grayblue (left menu, text underline; text in active choice) */ .dark, #home h1 a, #home .hoverhome:hover p a span, #left2 p#search:hover span, #left2 p#search:hover input, #left2 p#search input:focus, #left2 p a:hover { color: var(--zakladni-tmava); } #left2 p#search:hover input, #left2 p#search input:focus, #home .hoverhome:hover p a span, .table tbody tr.last:hover a, .table tbody tr.last:hover .gobutton a, .hovera:hover .rowlink { border-color: var(--zakladni-tmava); } /* Rámeček formulářového fieldsetu na hoveru zůstává neutrální (zadání 4. 9. 2026, viz "#kontakt legend, #kontakt p" výš) - dřív přebarvoval na modrou (".../#kontakt fieldset:hover {border-color: var(--zakladni- tmava)}"), teď stejná černá jako nadpis, ať se barva při najetí myší neliší od klidového stavu. */ #kontakt fieldset:hover { border-color: var(--text-hlavni); } /* Podtržení odkazů v Osnově/Předchozích znalostech apod. při najetí myší - vyňato ze sdíleného pravidla výše a zesvětleno (byl příliš velký kontrast vůči klidovému stavu #ddd, viz border-bottom výše). h3 tu záměrně NENÍ (oprava 27. 8. 2026) - nadpisy (h3) mají teď klidový stav tmavší (color-mix, viz .hovertxt h3 a/.a výš), #999 by na hover byl naopak SVĚTLEJŠÍ než klidový stav, tedy opačný efekt než zvýraznění. */ .hovertxt.href:hover .p a { border-color: #999; } /* Main text - buňky tabulky (ne odkazy) */ .table td, .table th { color: var(--text-hlavni); } /* Odkazy - tmavá základní barva webu (--zakladni-tmava), stejná konvence jako ".blue, a, ..." výš (zadání 3. 9. 2026). Highlights to black při hoveru u vybraných z nich (viz blok "Black - main text highlight" níž - beze změny, jde o samostatný, dřív zavedený efekt). */ #left a, #left a:visited, #left2 a, #left2 a:visited, h1 a:active, .popis a, .table td a, table th a, table th a:hover, .hovera p.coltext a, .hovera p.collink a, .hovera:hover p.collink a, .hovera p.collink a:active, .hovera p.rowlink a, .hovertxt .p a, .txt .hovertxt.href .p a:active, .hovertxt p.lightgray a, .hovera h3 a, .choicei .hovera p a, .choicei .hovera:hover p a { color: var(--zakladni-tmava); } /* ".hovertxt .p div.a" byl dřív součástí seznamu výš, ale je to obecný obsahový obal (DOM: .p > .a > ...), ne odkaz - uvnitř bývá např. celý seznam osnovy školení (ul.osnova) nebo odstavce, ne jen odkaz. Díky dědění pak celý takový obsah zdědil barvu odkazu, přestože odkazem není (nahlášeno uživatelkou 3. 9. 2026 - "osnova se zobrazuje barvou odkazu"). Skutečné odkazy uvnitř (p.go a, span.a apod.) mají vlastní specifičtější pravidlo a barvu neztratí - tenhle div sám o sobě teď žádnou barvu nenastavuje, takže obsah zdědí normální --text-hlavni z ".white" výš. */ /* Black - main text highlight */ #left a:hover, #title, #home .hoverhome:hover h1 a, h1 a, .popis a:hover, .table tr:hover td a, .hovera:hover p.coltext a, .hovera p.collink a:hover, .hovera:hover p.rowlink a, .hovertxt.href:hover .p a, .choicei .hovera h3 a { color: black; } /* Odkazy - sjednoceno na tmavou základní barvu webu (--zakladni-tmava), dřív samostatná "modrá" rodina rgb(51,102,153)/rgb(15,69,122). Záměrně ne --text-hlavni. #left2 p#demand a/#left2 p#contact a (Poptávka/Kontakt) byly odsud 4. 9. 2026 odebrány - mají teď stejnou světlejší barvu jako Hledat/Benefity, viz obecné pravidlo "#left2 p a, #left2 p a:visited {color: var(--zakladni-stredni)}" výš. */ .blue, a, #left .go a, #left .go a:visited, .hovera p.collink .headline, .table .headline, .table .gobuttoni a, .hovertxt h4 a, .hovertxt a.in, .txt .hovertxt h4 a:active, .href h3 a, .txt .href h3 a:active, .hovertxt .p .a p.sodkazy a { color: var(--zakladni-tmava); } .popis_linka a:hover, .collink a:hover { border-bottom-color: var(--zakladni-tmava); } .popis_linka a:active, .collink a:active { border-bottom-color: var(--okraj-svetly); background-color: transparent; } /* Hover odkazů - stejná --zakladni-tmava jako klidový stav u všech kontextů výš (beze změny, mají vlastní řešené zvýraznění - border/pozadí/ šipka apod.). Prostý "a:hover" ale byl vyňat (audit barevné logiky 3. 9. 2026, "naprostá většina odkazů nemá žádnou hoverovou odezvu") - samostatné obecné pravidlo níž ("Obecné zvýraznění odkazů na hoveru") teď dává výchozí zvýraznění VŠEM odkazům, které nemají žádné specifičtější pravidlo (tedy typicky prostý text uvnitř odstavců). */ .darkblue, #left .go a:hover, #left2 p#demand a:hover, #left2 p#contact a:hover, .hovera p.collink .headline:hover, .table .headline:hover, .table tr:hover .gobuttoni a, .hovertxt:hover h4 a, .hovertxt.href:hover h3 a, .hovertxt a.in:hover, .hovertxt .p .a p.sodkazy a:hover { color: var(--zakladni-tmava); } /* Obecné zvýraznění odkazů na hoveru (audit 3. 9. 2026) - dřív "a:hover" nastavovalo stejnou barvu jako klidový stav (viz komentář výš), takže prostý odkaz v běžném textu (mimo specifičtější kontexty jako karty/ tlačítka/menu, které mají vlastní řešení jinde v souboru) neměl na najetí myší VŮBEC žádnou odezvu. Stejná technika jako .sekce-odkaz apod. - filter:brightness ztmaví aktuální barvu textu, funguje bezpečně na jakémkoliv podkladu, žádné podtržení. Nejnižší možná specificita (prostý tag "a"), takže kdekoliv existuje specifičtější hover pravidlo (výš i jinde v souboru), to má vždy přednost - tohle je jen výchozí fallback. */ a:hover { filter: brightness(0.7); } /* Levé menu - Poptávka/Kontakt (4. 9. 2026): zvýraznění na hoveru řeší celý rámeček .leftbutton (viz .leftbutton:hover - ztmaví ikonu i text jako jeden celek). Bez tohohle "filter:none" by se nad samotným textem odkazu navíc uplatnil i obecný "a:hover" filtr výš - dvojité ztmavení textu oproti ikoně (barva textu se navíc už nemění, viz ".darkblue, ... {color: var(--zakladni-tmava)}" výš - je to no-op stejný jako klidový stav). */ #left2 p#demand a:hover, #left2 p#contact a:hover { filter: none; } /* White - light gray hightlight */ #header, #header a:hover, #header #slogan a, #left .act a, .hovera h2 a, .hovera h3 a, .table h3 a, .table h2 a, .table tbody tr:hover .gobutton a, .table tbody tr:hover .gobuttoni a, .hovera:hover .gobutton a, .table .gobutton a, .table .gobuttoni a, a.ico:hover, a.icm:hover, .hovera:hover p a, .row p a:hover, .row, .hovertxt .go a, .hovertxt .lightgray:hover a { color: white; } /* ".gobuttoni a" doplněno do pravidla výš (dřív jen ".gobutton a") - tlačítko "Více informací"/"Další kurzy" (gobuttoni, viz web_table()/web_table_row() ve web.php - gobuttoni se použije pro všechny řádky tabulky, jakmile má tabulka patičku "Další kurzy") tak dědilo modrou barvu odkazu (--zakladni-tmava) na stejně modrém pozadí tlačítka (--barva-cta) - text tlačítka byl fakticky neviditelný, viditelná zůstala jen bílá šipka (::after). Živě potvrzeno na /skoleni/kurzy - zadání 4. 9. 2026 ("na tlačítkách se nezobrazuje text"). */ /* Zrušení obecného "a:hover {filter:brightness(0.7)}" (viz výš) přesně tady - tyhle odkazy mají hover řešený vlastní barvou (přechod na bílou) nebo pozadím kontejneru (tlačítka v tabulce), obecný filter by bílou zbytečně ztlumil/zdvojil efekt s pozadím tlačítka. Audit 3. 9. 2026. */ #header a:hover, a.ico:hover, a.icm:hover, .row p a:hover, .hovertxt .lightgray:hover a, .table tbody tr:hover .gobutton a, .table tbody tr:hover .gobuttoni a, .hovera:hover .gobutton a { filter: none; } .row tbody tr:hover .gobutton a, .row tbody tr.last.prefoot:hover .gobutton a, .row tbody tr:hover .gobuttoni a, .row tbody tr.last.prefoot:hover .gobuttoni a { border-bottom-color: white; } /* :active styles - must be repeated after :hover to take priority */ .light:active, .hovera h2 a:active, .hovera h3 a:active, .hovera p a:active, a.ico span:active, a.icm span:active, .table h3 a:active { color: rgb(205,210,220); } /* Main text :active */ .coltext a span:active, .collink a span:active, .hovera p.rowlink a:active { color: var(--zakladni-tmava); } .choicei .hovera h3 a:active, .choicei .hovera p a:active { color: var(--zakladni-tmava); } #left2 p a:active { color: var(--zakladni-stredni); } #left2 p#demand a:active, #left2 p#contact a:active, .hovera p.collink .headline:active, .hovera p.collink a span.headline:active, .table tr .gobuttoni a:active, .hovertxt a.in:active { color: var(--zakladni-tmava); } #header a, #header a:active, #header #slogan a:active, #header input { color: #BBB; } /* Disable link effects */ #logo:active, h1 a:active, #header a:active, .hovera h2 a:active, .hovera h3 a:active, .hovera p a:active { background-color: transparent; } a:focus { outline: none; } /* Generic tags */ html, body, ul, li, p, hr { margin: 0; padding: 0; border: none; } .cad #content .zalozka li { margin-left: 15px; } .cad #content .zalozka h3 { margin-top: 12px; margin-bottom: 3px; } h1, h2, h3, .obsah_text .col h3 { font-family: "source-sans-pro-n3", "source-sans-pro", sans-serif; font-weight: 200; margin: 0; } body, input, select, textarea, .obsah_vpravo, h3.full { font-family: var(--font-zakladni); } #home h1 { font-size: 30px; line-height: 40px; } h1, h2 { font-size: 24px; line-height: 30px; } h3, h3 .a { font-size: 19px; line-height: 21px; } h3.full { font-size: 18px; line-height: 22px; } h4 { margin: 0; } p, div.p, h4, li, tr, td, span, input, select, textarea, .popis, .obsah_vpravo, .obsah_text, .res { font-size: 15px; line-height: 18px; } a { text-decoration: none; } span.s { text-decoration: none; display: inline; background: url('img/bg/strike.png') repeat-x; background-position: left center; } img { border: none; } .res { margin-bottom: 18px; } .res.sveh { color: black; } .cleaner { background: none; border: none; clear: both; display: block; float: none; font-size: 0; line-height: 0; margin: 0; padding: 0; overflow: hidden; visibility: visible; height: 0; } #top { min-height: 75px; } #top.home { min-height: 93px; } #titlediv { height: 45px; } #upt { display: none; float: left; margin-top: 7px; } #upta { display: block; color: white; height: 25px; } #upta span.uptbg { float: right; } #upta span.uptbg, #upta span span { display: block; width: 35px; height: 25px; } #title, #home p { clear: right; float: right; width: 804px; margin-right: 1px; max-width: 100%; overflow: hidden; } #title { padding-top: 5px; padding-bottom: 10px; } #title a { display: block; } #home { min-height: 297px; } #home #title { width: 949px; } #home p { width: 948px; } #home #title { padding-top: 0px; padding-bottom: 0px; } #home #title a { padding-top: 37px; padding-bottom: 7px; } #home p a, #home p a span { display: block; } #home p a { height: 173px; } #home p a span { padding-top: 9px; padding-right: 20px; padding-left: 1px; padding-bottom: 4px; max-width: 306px; margin-right: 5px; line-height: 19px; } .hoverhome { float: right; max-width: 100%; min-height: 283px; overflow: hidden; background-repeat: no-repeat; background-position: 20% 0%; /* výchozí šířka 945px + přidat vlevo 40px + přidat vpravo 165px = celkem 1150px šířka, výška max. 283px */ } .custom .hoverhome { background-image: url('img/home/custom.png'); } .butterfly #main { background-image: url('img/home/butterfly.png'); background-position: 66% 1px; background-repeat: no-repeat; } .butterfly .hoverhome { font-family: "minion-pro",serif; } @media screen and (min-width: 448px) { /* při dostatečné šířce využít plnou výšku pro obrázek */ .butterfly #top.home { min-height: 82px; /* 93px; */ } .butterfly .hoverhome { min-height: 308px; } } .butterfly #home #title { font-size: 26px; line-height: 40px; } .butterfly #home #title, .butterfly #home p { width: 800px; } .butterfly #home #title a { padding-top: 0; min-height: 94px; } .butterfly #home p a { height: auto; padding-top: 30px; min-height: 119px; } .butterfly #home p a span { font-size: 36px; line-height: 48px; max-width: 260px; padding-right: 0px; padding-bottom: 8px; border-top: none; border-bottom: 1px solid var(--zakladni-tmava); } .butterfly #home p a span, .butterfly #home #title a { color: #333; text-shadow: 0 0 1px white, 0 0 2px white, 0 0 10px white; } .butterfly #home .hoverhome:hover p a span, .butterfly #home .hoverhome:hover #title a { color: black; } .vikend { color: rgb(237,128,128); } .odpoledne { color: rgb(220,153,62); } .black { min-width: 273px; min-height: 60px; background: black url('img/bg/body.png') repeat-x; color: white; } .white { min-width: 273px; background: white; /* var(--text-hlavni), NE #4D4D4D - třetí zápis stejné staré barvy (vedle rgb(77,77,77) a #22262b), který uniknul sjednocení textu 3. 9. 2026 (jiný formát zápisu). ".white" je hlavní obalový prvek obsahu napříč celým webem, takže tenhle jeden přehlédnutý řádek reálně ovlivňoval spoustu textu (např. "Osnova školení" a další dvousloupcové sekce na detailu školení - nahlášeno uživatelkou 3. 9. 2026). */ color: var(--text-hlavni); } .center { max-width: 1001px; padding: 0px 0 0 5px; margin: 0 auto; } .black .center { padding-top: 10px; } #logo { display: block; width: 500px; max-width: 53%; height: 34px; float: left; padding-top: 7px; } #logoimg { display: block; width: 195px; height: 28px; background: url('img/abecedapc.png') no-repeat; background-image: url('img/abecedapc.svg'), none; } #header { float: right; min-width: 162px; text-align: right; padding-right: 5px; padding-bottom: 2px; } #header p, #auxlinks { line-height: 20px; } #auxlinks form { display: inline; } #auxlinks input { border: none; width: 90px; padding: 0px 4px; border-radius: 2px; background-color: rgb(25,25,25); background: rgba(255,255,255,0.1); } #auxlinks { font-size: 15px; } #auxlinks input:focus, #auxlinks input:hover { background-color: rgb(51,51,51); background: rgba(255,255,255,0.2); color: white; } #content { clear: right; float: right; width: auto; min-width: 80.3%; max-width: 804px; min-height: 185px; } #content.typs { min-height: 450px; } #content.ofi { min-height: 275px; } #content.klient { float: left; max-width: inherit; margin-bottom: 10px; } #content.klient h2 { margin: 18px 0 12px 0; } #content.klient h3 { margin: 18px 0 8px 0; } /* Levé menu */ #leftspace { float: left; width: 1px; height: 180px; } #leftspace.x3 { height: 270px; } #leftspace.x4 { height: 360px; } #left, #left2 { float: left; width: 182px; margin-right: 15px; margin-bottom: 5px; } #left { margin-left: -1px; } /* Celý web dosud neměl žádný "mobilní" režim - #content má min-width: 80.3 % POČÍTANÝCH Z CELÉ ŠÍŘKY STRÁNKY (ne ze zbytku vedle menu), zatímco #left má pevných 182px + 15px mezera = 197px. Když je stránka užší než cca 1000px (197px + 80,3 % z ní přesáhne celkovou šířku), obsah se přestane vejít vedle menu a začne přetékat/uřezávat se - to byl důvod, proč nešlo stránku zúžit vůbec, ani na počítači. Od tohoto zlomu proto menu naskládáme nad obsah (float:none, plná šířka) místo vedle sebe. Zlom 1020px má malou rezervu nad matematickým zlomem (~1000px), ať se přechod spustí dřív, než k přetečení reálně dojde. */ @media (max-width: 1020px) { #leftspace { display: none; } #left, #left2 { float: none; width: auto; margin: 0 0 15px 0; } #content { float: none; clear: both; width: auto; min-width: 0; max-width: 100%; } } #nav { list-style-type: none; } #brc span { display: block; } #brc span.navsep { display: none; } #nav li.mez, #brc span.mez { margin-top: 15px; } /* Zvýraznění plnou barvou, beze "přechodu" (light.png/gray.png byly jemné šedé přechodové textury) - zadání 27. 8. 2026 ("všechny přechody z webu odstraňujeme, předěláváme na plné plochy"). */ #nav li:hover, #brc span:hover, .table tbody tr:hover td.left, .table tbody tr:hover td.gobuttoni, a.upb:hover, div#upt:hover, div#upt:hover .uptbg, p.lightgray { background: var(--okraj-svetly); } #nav li.act, #brc span.act, a.upb span.upbg, p.lightgray:hover { background: #666; } /* Zesvětlená aktivní položka breadcrumbu/levého menu (#brc span.act, např. "Excel" na detailu podkategorie) - dřív plná tmavá #666 + bílý text, jako výrazné tlačítko. Vedle nových barevných chipů (.sekce-chipy výš) i zbytku ztlumené palety to působilo jako cizí, moc výrazný prvek (zadání 3. 9. 2026 - "méně výrazné, klidně tmavé písmo a jen světlá základní barva"). Přebíjí jak "#nav li.act, #brc span.act, ... {background:#666}" výš (stejná specificita, ale je až tady, pořadím v souboru vyhrává), tak sdílené "White" pravidlo (#left .act a - specificitou o element navíc vyhrává tahle). SNADNÉ VRÁCENÍ ZPĚT: smazat tenhle blok, vrátí se tmavá #666 + bílý text. */ #brc span.act { background: var(--zakladni-svetla); } /* Zvýraznění při najetí myší (3. 9. 2026, chybělo - obecné "#brc span:hover {background:#DDD}" výš má stejnou specificitu jako "#brc span.act" tady, ale je v souboru dřív, takže na .act prohrávalo a řádek beze změny zůstával stejně světlý i na hoveru). Stejná technika (filter:brightness) jako sjednocené hovery jinde na webu - viz analýza hover systému 3. 9. 2026. */ #brc span.act:hover { filter: brightness(0.96); } /* Barva textu = barva odkazu (--zakladni-tmava, ne --text-hlavni) + tučně - na přání uživatelky ať je znát, že jde o odkaz/aktivní úroveň, ne jen o popisek (zadání 3. 9. 2026). */ #brc span.act a { color: var(--zakladni-tmava); font-weight: bold; } /* Šipky v levém menu (3. 9. 2026) - dřív obrázkové sprity navržené na tmavé/jinak barevné pozadí, které menu po zesvětlení (viz #brc span.act výš) buď nemá, nebo bylo špatně vidět: "#nav a, #brc a {background: url('img/bg/upw.png')}" (horní část - cesta ke kořeni + aktuální úroveň), "#nav .act a, #brc .act a {url('img/bg/up.png')}" (aktuální úroveň), "#nav .go a, #brc .go a {url('img/bg/go2.png')}" (spodní část - sourozenci/ podkategorie aktuální úrovně, viz #nav níž). Nahrazeno stejnou technikou jako ostatní šipky na webu - gowhite.svg jako maska přebarvená přes background-color, žádný nový/samostatný soubor navíc není potřeba. Staré sprite rule pro #nav/#brc smazané (audit zjednodušení 4. 9. 2026 - byly už všechny neviditelné/přebité, viz "#upt span span" níž, které jediné z původní trojice pozadí ještě opravdu používá - to zůstává beze změny): - Horní část (#brc) - šipka otočená o 90° doleva (rotate(-90deg), soubor je nakreslený jako šipka doprava) - ukazuje "nahoru" ke kořeni stromu. - Spodní část (#nav .go, viz níž u #nav) - šipka beze změny (doprava, přirozená orientace souboru) - ukazuje "dál" na podkategorii/školení. */ #brc a { position: relative; padding-right: 20px; } #brc a::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(-90deg); background-color: var(--zakladni-tmava); -webkit-mask: var(--maska-sipka); mask: var(--maska-sipka); /* Šipka vidět jen po najetí myší, viz pravidlo "#brc a:hover::after, #brc span.act a::after" níž pod starými sprity - u zvýrazněné (aktivní) položky vidět od začátku (zadání 3. 9. 2026). */ opacity: 0; } #upt a #uptxt { float: left; } #nav a, #brc a, #upt a #uptxt { display: block; padding: 4px 2px 1px 10px; line-height: 20px; } #upt span span { background: transparent url('img/bg/upw.png') no-repeat right; } /* Zbytek zvýraznění na hoveru řeší jen border/barva textu (viz jinde v souboru) - žádné vlastní pozadí navíc není potřeba (viz gowhite.svg maska výš). */ #brc a, #brc span.act a { background: none; } /* Šipky v menu vidět jen po najetí myší, kromě zvýrazněné (aktivní) položky (#brc span.act), kde je vidět od začátku (zadání 3. 9. 2026 - "Šipky v menu mají být vidět až po najetí myší, pouze šipka ve zvýrazněném řádku je vidět od začátku"). */ #brc a:hover::after, #brc span.act a::after { opacity: 1; } /* Spodní část menu (sourozenci/podkategorie aktuální úrovně, např. "AutoCAD expres/pokročilý/expert...") - stejná gowhite.svg maska jako u #brc výš, ale BEZE ROTACE (přirozená orientace souboru - šipka doprava, "jít na podkategorii/školení"), viz komentář u #brc a::after výš. */ #nav .go a { position: relative; padding-right: 20px; background: none; } #nav .go a::after { content: ''; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); background-color: var(--zakladni-tmava); -webkit-mask: var(--maska-sipka); mask: var(--maska-sipka); /* Vidět jen po najetí myší, stejně jako u #brc výš (zadání 3. 9. 2026). */ opacity: 0; } #nav .go a:hover::after { opacity: 1; } a.upb span span { background: transparent url('img/bg/upb.png') no-repeat left center; } a.upb:hover span span { background-position: right center; } a.upb:active span span { background-position: left center; } #left2 p a, #left2 p span { display: inline-block; width: 129px; padding: 0px 1px 0px 52px; line-height: 19px; } #left2 p span#search_label { padding-top: 5px; padding-bottom: 2px; } .leftbutton { background-repeat: no-repeat; background-position: left 20px; padding-top: 11px; height: 74px; margin-bottom: 5px; } #left2 .href { padding-top: 0px; height: 85px; } #left2 .href a { display: block; padding-top: 11px; height: 74px; } .leftbutton input { width: 120px; padding: 1px 2px 1px 3px; height: 20px; line-height: 20px; } /* Hover ikony (4. 9. 2026) - dřív posun na 2. rámec PNG sprite (jen u search/contact/demand/benefit, gift/test žádný 2. rámec neměly a hover na nich tak dřív neměl vůbec žádný efekt). SVG maska žádný druhý rámec nemá - sjednoceno na stejnou techniku ztmavení jako ostatní malé jednobarevné prvky webu (chipy, .digi-up-button apod.), teď funguje na všech 6 ikonách stejně včetně gift/test. */ .leftbutton:hover { filter: brightness(0.9); } .leftbutton a:active { background-color: inherit; } /* Pásy */ /* 20.7.2026 - řádek jako samostatný blok (BFC), aby plovoucí dlaždice při zúžení čistě přetékaly na další řádky a řádky se navzájem neprolévaly */ .row { display: flow-root; } .col { float: left; height: 88px; /* 20.7.2026 puvodne 85, +5 kvuli narocnosti/delce, pote -2 na prani */ width: 263px; margin-bottom: 5px; } .choice { height: 83px; width: 261px; padding: 1px; } .choicei { height: 83px; width: 261px; border: 1px solid var(--okraj-svetly); } .choicei a { cursor: default; } .tri, .tri2 { margin-bottom: 5px; } .tri { min-height: 265px; } .tri2 { /* 229px puvodne (odpovidalo p.colmore a min-height:25px). Zvyseno na 238px 26. 8. 2026, kdyz se radek "Vice informaci/o..." zvysil na 34px (viz .col.format-sedy p.colmore a nize) - .col ma pevnou vysku (tady min-height, ale bez overflow:hidden), takze vyssi obsah uvnitr (.hovera) presahoval pod spodni okraj barevneho pozadi dlazdice a sipka/patka pismene "y" pak trcely mimo (zadani uzivatelky: "sipka zasahuje i mimo radek"). Snizeno na 237px (oprava 3. 9. 2026) - .hovera uvnitr nevyplnovala celych 242px, zbyvalo cca 5px prazdneho prostoru dole vyplneneho vlastnim pozadim dlazdice (var(--zakladni-stredni)). Drive neviditelne (tlacitko "Vice informaci..." melo stejnou barvu jako dlazdice), po prebarveni tlacitka na plnou --barva-cta (viz .col.format-sedy p.colmore a nize) se ta mezera ukazala jako viditelny pruzek pod tlacitkem - uzivatelka na to upozornila se snimkem obrazovky. Zmereno zivě - .hovera ma presne 237,97px, min-height proto 237px (o zlomek mensi, ne vetsi, ať zustane spolehlivou dolni hranici, ne novy zdroj stejneho problemu). */ min-height: 237px; } /* Responzivita dlaždic "Otevřený kurz/Individuální/Firemní školení" (uživatelka 26. 8. 2026: "měly by se chovat obdobně jako dlaždice v hlavním rozcestníku"). .row/.col/.sep je starší sdílený float mechanismus (web_pas()/web_pole() ve web.php), použitý na webu i jinde (záložky, výpisy podkategorií) - proto se neupravuje globálně, jen scoped přes :has() na konkrétní kombinaci .col.tri2.format-sedy, což je jen tenhle případ. Technika :has() už na webu je (viz .balik-carousel výš). Zlomy 900px/600px a gap 12px přesně podle .kat-pas/.kat-dlazdice (hlavní rozcestník), ať je chování mřížek na webu jednotné - 3/2/1 dlaždice na řádek podle šířky. */ .row:has(> .col.tri2.format-sedy) { display: flex; flex-wrap: wrap; gap: 12px; } .row:has(> .col.tri2.format-sedy) > .sep { display: none; } .row > .col.tri2.format-sedy { float: none; width: auto; flex: 0 0 calc((100% - 24px) / 3); margin-bottom: 0; } @media (max-width: 900px) { .row > .col.tri2.format-sedy { flex-basis: calc((100% - 12px) / 2); } } @media (max-width: 600px) { .row > .col.tri2.format-sedy { flex-basis: 100%; } } .row .empty { height: 1px; margin-bottom: 4px; background: none; } .col h2 a, .col h3 a, .col p a { display: block; padding-left: 18px; padding-right: 9px; /* ori 10px, ie8 5px */ } .col h2 a { padding-top: 8px; padding-bottom: 2px; line-height: 25px; } .col h3 a { padding-top: 13px; padding-bottom: 1px; min-height: 23px; } .col p a { line-height: 19px; padding-top: 0px; min-height: 48px; } p.coltext, p.collink { background: white; } /* Světlé pozadí obsahové části dlaždice (termíny/cena u otevřeného kurzu, popisný text u individuálního/firemního školení) - stejný odstín jako u štítků typu nabídky (.typs-stitek-radek), jen aplikovaný na plochu dlaždice. */ .col.orange p.coltext, .col.orange p.collink { background: #F8E7E4; } .col.blue p.coltext, .col.blue p.collink { background: #E1E4FB; } .col.grass p.coltext, .col.grass p.collink { background: #E6EEE1; } p.coltext span, p.collink span { display: block; line-height: 19px; } p.coltext span { margin-bottom: 19px; } p.coltext span.last { margin-bottom: 0; } /* Řádek s cenou u termínu otevřeného kurzu (p.collink, dlaždice o/i/f - druhý , ne .headline s datem/místem) se u dražších školení (v řádu desetitisíců, např. "26 535 Kč bez DPH, 32 107 Kč s DPH") zalamoval na dva řádky - živě změřeno, i nejdelší reálně možná cena (99 999 Kč/120 999 Kč) se při 13px vejde na jeden řádek do dostupné šířky sloupce (dlaždice ~260px mínus odsazení). Zmenšeno z 15px na 13px a přidáno nowrap - zadání 3. 9. 2026 ("cena je maximálně v řádu desetitisíců, zkus text dostat do jednoho řádku"). Cílí jen na druhý span (cenu), ne na .headline (datum/místo) - ten se zalomit smí. */ p.collink span:not(.headline) { font-size: 13px; white-space: nowrap; } p.coltext a { padding-top: 11px; min-height: 144px; } p.collink a { padding-top: 11px; min-height: 57px; padding-bottom: 8px; } p.collink a.last { padding-top: 10px; padding-bottom: 11px; border: none; } .tri2 p.coltext a { padding-top: 12px; min-height: 107px; } .tri2 p.collink a { padding-top: 12px; min-height: 38px; padding-bottom: 8px; } .tri2 p.collink a.last { padding-top: 10px; padding-bottom: 12px; } .col p.colmore a { min-height: 25px; line-height: 25px; } p.rowlink { min-height: 50px; min-width: 54%; } p.rowlink span { display: block; } /* Right arrow - p.go a má od 26. 8. 2026 vlastní plochý vzhled (viz níž), proto tu už není v tomhle sdíleném pravidle se starým obrázkovým sprite. ".gobuttoni a" odebrané odsud (audit zjednodušení 4. 9. 2026) - "gobuttoni" se vždy vyskytuje jen uvnitř .table (web_table() ve web.php), kde ho specifičtější ".table .gobuttoni a {background-image:none}" níž v souboru vždy přebije - stejně tak byly mrtvé i samostatné tr:hover/tr:active varianty pro .gobuttoni, smazané spolu s tímhle řádkem. */ a.go, .gobutton a, h3.full a { background-image: url('img/bg/go2.png'); background-position: right 5px; background-repeat: no-repeat; } a.go:hover, .hovera:hover a.go, tr:hover .gobutton a, h3.full a:hover { background-position: right -55px; } a.go:active, .hovera p a.go:active, .hovera:active a.go, tr:active .gobutton a, h3.full a:active { background-position: right 5px; } /* Tlačítko Objednat v tabulce termínů/ceníku - šipka v tmavé barvě místo starého obrázkového sprite (go2.png, navržený na barevné/hover pozadí, na světle šedomodrém pozadí tlačítka téměř nečitelný) - zadání 27. 8. 2026. Stejná technika (maskovaná SVG přebarvená přes background-color) jako už používá p.go a::after výš v souboru, jen napevno tmavou barvou (var(--text-hlavni), stejná jako text tlačítka) místo --kat-c, protože tlačítko tabulky nemá barvu oblasti. */ .table .gobutton a, .table .gobuttoni a, .table tr:hover .gobutton a, .table tr:hover .gobuttoni a, .table tr:active .gobutton a, .table tr:active .gobuttoni a { background-image: none; } .table .gobutton a, .table .gobuttoni a { position: relative; padding-right: 24px; /* dřív 14px - větší mezera mezi textem a šipkou (text se posune víc doleva), zadání 3. 9. 2026 */ } .table .gobutton a::after, .table .gobuttoni a::after { content: ''; position: absolute; right: 8px; /* dřív 2px - posunuto spolu s větším padding-right výš, ať šipka nesedí až úplně u okraje tlačítka */ top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #fff; -webkit-mask: var(--maska-sipka); mask: var(--maska-sipka); } /* Text tlačítka byl doteď zarovnaný k pravému okraji (zděděno z text-align: right na buňce .gobutton/.gobuttoni, viz .table table .gobutton níž) - proto ležel skoro nalepený na šipce i přes padding-right výš. Vystředěno místo toho - zadání 3. 9. 2026 ("posuň text víc vlevo"). Tlačítko "Poptat" (kratší text, stejná role/třída jako "Objednat" - viz $table_rows[...]['button'] ve web_show_kat.php) navíc stejně široké jako "Objednat" - min-width cílí na obsahovou šířku textu (box-sizing zůstává výchozí content-box, takže min-width nezahrnuje padding) - 60px pokryje "Objednat" (nejdelší popisek tlačítka v tabulce, živě změřeno ~57px) i s rezervou, "Poptat" se na stejnou šířku dorovná. */ .table .gobutton a, .table .gobuttoni a { min-width: 60px; text-align: center; } /* Oddělovače */ .hide { display: none; } .sep { display: block; float: left; width: 5px; height: 88px; /* 20.7.2026 shodně s .col */ margin-bottom: 5px; } .sep span { display: block; width: 1px; height: 88px; /* 20.7.2026 shodně s .col */ margin: 0 2px; } .col .sep { width: 1px; } .col .r { float: right; } .row .space {background: white;} /* Pole */ /* Zvýraznění focusu vypnuto: a.ico:focus, a.icm:focus, .act a:focus */ .hovera:hover, .choice:hover, a.ico:hover, a.icm:hover, #nav .act a:hover, #brc .act a:hover, a.upb:hover span span, .table h3 a:hover, .table .hovera:hover h3 a, .table tbody tr:hover .gobutton a, .row .hovera:hover .gobutton a, p.go:hover a { background-color: transparent; background-color: rgba(255,255,255,0.08); zoom: 1; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#14FFFFFF', endColorstr='#14FFFFFF'); } #nav a:active, #brc a:active, .table tbody tr td.left a:active { background-color: rgba(255,255,255,0.3); } #nav .act a:active, #brc .act a:active, a.upb:active span span { background-color: transparent; } .col div.more { width: 189px; } .col div.sicp h2 a, .col div.sicp h3 a, .col div.sicp p a { padding-left: 0; } .col div.sicr h2 a, .col div.sicr h3 a, .col div.sicr p a { padding-right: 0; } /* Ikony */ a.ico, a.icp, a.icm, a.icr { display: inline-block; height: 85px; outline: 0; } a.ico, a.icp { float: left; } a.icm, a.icr { float: right; } a.ico span, a.icp span, a.icm span, a.icr span { display: block; width: 87px; background-repeat: no-repeat; background-position: center 11px; text-align: center; padding-top: 62px; height: 23px; } a.icp span { background-position: center 20px; } a.icr span { background-position: center 9px; } a.icm span, a.icr span { width: 72px; } a.ico:hover span, a.icm:hover span {background-position: center -74px;} .hovera:hover a.icp span { background-position: center -65px; } .hovera:hover a.icr span { background-position: center 9px; } /* png hover -76px; */ .hovertxt.href:hover div.txtico { background-position: 0px -79px; } .choicei .hovera a.icr span { background-position: center -161px; } .hovera a.icp span:active { /* .hovera:active a.icp span, */ background-position: center 20px; } a.ico span:active, a.icm span:active { background-position: center 11px; } .hovera a.icr span:active { background-position: center 9px; } .hovertxt.href:active div.txtico { background-position: 0 6px; } .choicei .hovera:hover a.icr span:active { background-position: center 9px; } /* 20.7.2026 - Náročnost a délka kurzu pod zmenšenou ikonou v dlaždici školení */ .icocol { float: left; width: 87px; padding-top: 13px; /* zarovnání horního okraje ikony s horním okrajem nadpisu (.col h3 a) */ box-sizing: border-box; } .icocol a.icp { float: none; display: block; height: auto; } .icocol a.icp span { width: 87px; height: 36px; padding-top: 0; background-position: center top; background-size: 34px auto; } .hovera:hover .icocol a.icp span, .icocol a.icp span:active { background-position: center top; /* ikona v .icocol je bez hover posunu spritu */ } .icocol .icoinfo { margin: 0; padding: 0; text-align: center; line-height: 1; } .icocol .icoinfo .stupen-wrap { display: block; font-size: 11px; line-height: 1.2; color: rgba(255,255,255,0.8); cursor: help; white-space: nowrap; } .icocol .icoinfo .stupen-wrap .lbl { font-size: 11px; margin-right: 2px; } .icocol .icoinfo .stupen { display: inline-flex; gap: 2px; justify-content: center; vertical-align: middle; } .icocol .icoinfo .stupen .t { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.35); } .icocol .icoinfo .stupen .t.on { background: #fff; } .icocol .icoinfo .delka { display: block; margin-top: 1px; font-size: 11px; line-height: 1.2; color: rgba(255,255,255,0.8); cursor: help; } /* 20.7.2026 - Malé ikonové dlaždice (třetina šířky) pro méně důležitá školení */ .col.mini { width: 84.33px; /* (263 - 2*5) / 3 = 84.33, aby 3 malé + 2 mezery = šířka normální dlaždice */ height: 88px; padding: 0; overflow: hidden; box-sizing: border-box; } .col.mini .hovera { display: block; height: 100%; text-align: center; padding: 13px 2px 0; /* shodně s .icocol (13px) ve velkých dlaždicích, aby ikony lícovaly */ box-sizing: border-box; } .col.mini a.icp { float: none; display: block; height: auto; margin: 0; width: 100%; } .col.mini a.icp span { display: block; width: 100%; height: 30px; padding: 0; background-position: center top; background-size: 30px auto; } /* 20.7.2026 - malá dlaždice: ikona se při najetí myší neposouvá (potlačit hover posun spritu). !important kvůli přebití generovaných pravidel .hovera:hover a.icp span.ico-NAZEV z ico_css.php */ .hovera:hover .col.mini a.icp span, .col.mini .hovera:hover a.icp span, .col.mini a.icp span:active { background-position: center top !important; } .col.mini h3 { margin: 6px 0 0; /* text posunutý níž od ikony (o 5px víc než předtím) */ padding: 0 3px; float: none; width: auto; clear: none; } .col.mini h3 a { padding-left: 0; /* přepis asymetrického 18px z obecného .col h3 a - způsobovalo posun textu vpravo */ padding-right: 0; /* přepis 9px z obecného .col h3 a */ padding-top: 0; /* přepis 13px z .col h3 a - zarovnání řeší margin na h3 výše */ padding-bottom: 0; /* přepis 1px z .col h3 a */ min-height: 0; /* přepis 23px z .col h3 a - zbytečné, výšku určuje obsah */ font-size: 14px; line-height: 16px; text-align: center; /* explicitně, pro jistotu při -webkit-box zobrazení */ display: -webkit-box; -webkit-line-clamp: 2; /* max 2 řádky, delší text se ořízne třemi tečkami */ -webkit-box-orient: vertical; overflow: hidden; font-weight: normal; white-space: normal; text-overflow: ellipsis; } .col.mini p { display: none; } /* Dlaždice projektu DIGIkurzy (kat_vychozi_zobrazeni = 'balik'). Varianta velké dlaždice odlišená přídavnou třídou .balik na .col, stejným principem jako .col.mini výše. Barevné hodnoty (světlé pozadí, rámeček, horní proužek) se generují v ico_css.php jako .col.balik.; zde je vzhled nezávislý na barvě: rozměry, tmavý text, rozvržení obsahu. */ .col.balik { position: relative; /* kotva pro celoplošný odkaz .balik-link */ /* Dřív pevná height: 208px - u dlouhého nadpisu (zalomení na 3+ řádky) to tlačilo řádek Obtížnost/Délka pod spodní okraj (ořezané přes overflow: hidden) nebo nutilo schovávat víc kurzů, než bylo žádoucí. Zadání 24. 8. 2026 - "prodluž dlaždici na výšku o jeden řádek, zobraz 3 školení a na čtvrtý řádek a další..." - min-height místo height: běžný nadpis (1-2 řádky) dá stejnou výšku jako dřív, delší nadpis dlaždici prodlouží přesně o to, kolik potřebuje navíc, ne že by se místo toho něco schovávalo/ořezávalo. .balik-strip/.balik-vse jsou display:flex bez vlastního align-items (výchozí stretch), takže se sousední dlaždice ve stejné řadě/stránce карuselu stejně srovnají na stejnou (vyšší) výšku. */ min-height: 208px; box-sizing: border-box; overflow: hidden; /* pojistka pro krajní/neočekávané případy */ border: 1px solid transparent; /* barvu rámečku dodá ico_css.php */ border-top-width: var(--stripe-height, 4px); /* výrazný horní proužek v syté barvě */ color: #333; /* tmavý text s dostatečným kontrastem */ } .col.balik .hovera { display: flex; flex-direction: column; height: 100%; padding: 10px 12px 12px; box-sizing: border-box; } /* Celoplošný klikatelný odkaz - pokrývá celou dlaždici. Nad ním zůstává jen h2 (má vlastní kvůli přístupnosti/SEO - viditelný, zaměřitelný text odkazu). Všechny ostatní prvky (štítek, popis, seznam kurzů, doplňkové údaje) NEMAJÍ vlastní z-index, takže na nich klik propadá až na overlay pod nimi - proto funguje jako odkaz opravdu celá plocha dlaždice, ne jen nadpis. Pravidlo sjednoceno do ".kat-dlazdice-link, .col.balik .balik-link, ..." níž v souboru (audit zjednodušení 4. 9. 2026). */ /* Hover (zvýraznění celé dlaždice) sjednoceno do ".kat-dlazdice:hover, .col.balik:hover, ..." níž v souboru (audit zjednodušení 4. 9. 2026). */ .col.balik h2 { position: relative; z-index: 2; } /* Balík dlaždice nezobrazuje ikonu ani "a další" tlačítko */ .col.balik a.ico, .col.balik a.icp, .col.balik a.icm, .col.balik a.icr, .col.balik .icocol, .col.balik div.more { display: none; } /* 1) Označení typu nabídky - "Balíček kurzů" (fallback pro typ mimo DIGI/rekvalifikaci) */ .col.balik .balik-stitek { margin: 0 0 6px; font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; color: var(--text-stredni-555); } /* 1b) DIGIkurz/Rekvalifikace - odznak (.typs-stitek-radek, stejná velikost/tvar jako na detailu školení - jen tady plná barva a bílý text místo světlého tónu, viz přebíjení níže) + obyčejný text o příspěvku ÚP vedle něj (.balik-prispevek-text), viz web_pole_balik() ve web.php. Mezera před nadpisem je záměrně malá (4px). */ .col.balik .balik-typ-radek { margin: 0 0 -1px; flex: 0 0 auto; } .col.balik .balik-prispevek-text { font-size: 11px; font-weight: normal; color: var(--text-stredni-555); } /* Barva odznaku na balíčkové dlaždici (zadání 4. 9. 2026 - audit zjednodušení) - dřív vlastní "matematický střed" mezi starou barvou formátu a plnou barvou (napevno #E5A497/#733529 pro DIGIkurz, color-mix ze základní světlé/střední pro rekvalifikaci), z doby PŘED sjednocením štítků na modrou 4. 9. 2026 (viz ".typs-stitek-radek.typs-stitek-digi, ..." výš) - specificita 5 tříd tenhle starší recept spolehlivě přebíjela, takže štítek na dlaždici zůstal oranžový/šedý i po sjednocení zbytku webu na modrou. Teď stejný recept jako sdílené pravidlo výš (žádný vlastní název tónu netřeba - dědí ho). */ .col.balik .balik-typ-radek .typs-stitek-radek.typs-stitek-digi, .col.balik .balik-typ-radek .typs-stitek-radek.typs-stitek-rekval { background: color-mix(in srgb, var(--barva-cta) var(--uroven3-mix), white); color: var(--text-hlavni); } /* 2) Název (hlavní prvek) - zarovnat zleva stejně jako ostatní texty (zrušit padding-left: 18px z .col h2 a, rezervovaný jinak pro ikonu) */ .col.balik h2 { margin: 0; float: none; width: auto; clear: none; flex: 0 0 auto; } .col.balik h2 a { padding-left: 0; padding-right: 0; font-size: 18px; line-height: 21px; color: var(--text-nazev-dlazdice); /* tmavý název místo bílého na běžných dlaždicích */ white-space: normal; } /* 3) Přehled zahrnutých kurzů - menší mezera nad seznamem. web_pole_balik() (web.php) vypisuje do