/* * Actiwity Dance Company — jediný stylopis webu. * * Píše se ručně, žádný build step (viz CLAUDE.md → Stack). Žádný externí zdroj: * font je lokálně ve `www/fonts/`, nic se netahá z CDN ani z Google Fonts. * * PALETA JE ZE SMĚRU AA (#120). Do 2026-09-10 tu byly barvy starého webu na Joomle a * iterace 1 vědomě nebyla redesign. Veronika si z druhého kola návrhů vybrala směr AA — * „street" v barvách značky (#97, #98). Kostra AA je `www/navrhy/styl/smer-a.css`, paleta * `www/navrhy/styl/smer-aa.css`; postup celé série #120–#128 je v * `claude/plans/2026/09/redesign-aa-implementace.md`. * * Typografie se nemění: Raleway je písmo starého webu i směru AA, `@font-face` bloky * v sekci 1 zůstávají znak po znaku stejné. * * ========================================================================== * ZMĚŘENÉ KONTRASTY (WCAG 2.1) * ========================================================================== * * Hodnoty NEJSOU odhadnuté. Jsou spočítané podle WCAG 2.1 — `(L1 + 0,05) / (L2 + 0,05)`, * relativní jas z odečtených RGB s prahem 0,04045 — a přepočítají se, jakmile se jakákoli * hodnota v `:root` pohne. Odhad zapsaný jako změřená hodnota je horší než žádné číslo: * `#004F4F` na `#0e0e0e` tu jednou stálo jako „kolem 1,7 : 1" a skutečnost byla 2,05 : 1. * Závěr se tehdy nezměnil, ale číslo vypadalo jako změřené a nebylo. * * TEXT (hranice 4,5 : 1 pro běžný text, 3 : 1 pro velký a pro neaktivní prvky) * * --text #d6d6de na --cerna ................................... 13,85 : 1 ✔ * --text #d6d6de na --cerna-2 ................................. 13,14 : 1 ✔ * --text #d6d6de na --cerna-3 ................................. 12,35 : 1 ✔ * --text-silny #ffffff na --cerna ............................. 20,01 : 1 ✔ * --text-silny #ffffff na --cerna-2 ........................... 18,98 : 1 ✔ * --text-tlumeny #8a8a97 na --cerna ............................ 5,87 : 1 ✔ * --text-tlumeny #8a8a97 na --cerna-2 .......................... 5,57 : 1 ✔ * --text-tlumeny #8a8a97 na --cerna-3 .......................... 5,24 : 1 ✔ * --akcent #c26bae na --cerna .................................. 5,73 : 1 ✔ * --akcent #c26bae na --cerna-2 ................................ 5,43 : 1 ✔ * --akcent #c26bae na --cerna-3 ................................ 5,11 : 1 ✔ * --akcent #c26bae na --cerna-ilustrace ........................ 5,52 : 1 ✔ * --kysela #c7f53d na --cerna ................................. 15,78 : 1 ✔ * --kysela #c7f53d na --cerna-2 ............................... 14,97 : 1 ✔ * --text-silny #ffffff na --akcent-tmavy (plné tlačítko) ....... 5,61 : 1 ✔ * --cerna #08080a na --kysela (tlačítko po přejetí) ........... 15,78 : 1 ✔ * --text #d6d6de na --cerna-ilustrace ......................... 13,36 : 1 ✔ * --text-silny #ffffff na --cerna-ilustrace ................... 19,30 : 1 ✔ * * Úvodní blok (#202) — podklad #110d12 a na něm stříkanec, složená barva #2f1d2d * (`.uvodni` a `.uvodni::before`, sekce 8). Text stojí na obou: * * `.nadhodnota` --kysela #c7f53d na #110d12 ..................... 15,19 : 1 ✔ * `.nadhodnota` --kysela #c7f53d na #2f1d2d ..................... 12,41 : 1 ✔ * `.styly li` --text-tlumeny #8a8a97 na #110d12 .................. 5,65 : 1 ✔ * `.styly li` --text-tlumeny #8a8a97 na #2f1d2d .................. 4,62 : 1 ✔ těsně * * Úvod `/tanecni-skupiny` (#204) — týž blok, navíc doplněk nadpisu a odstavce s `--text`: * * `.h-doplnek` --text-tlumeny #8a8a97 na #110d12 ................. 5,65 : 1 ✔ * `.h-doplnek` --text-tlumeny #8a8a97 na #2f1d2d ................. 4,62 : 1 ✔ těsně * `.skupiny__uvod` --text #d6d6de na #110d12 .................... 13,33 : 1 ✔ * `.skupiny__uvod` --text #d6d6de na #2f1d2d .................... 10,89 : 1 ✔ * * Doplněk má na telefonu 18,5 px při tloušťce 600, tedy běžný text s hranicí 4,5 : 1 * (velký by byl až od 18,66 px tučně 700). Stříkanec leží v levých 40 % bloku, přes text. * * Osa věkových kategorií na `/tanecni-skupiny` (#205) — pás `.sekce` na `--cerna`, řádek * po přejetí `--cerna-3` (sekce 6). Nové texty z makety AA: * * `.skupiny__vek b` --text-silny #ffffff na --cerna (28–40 px, 800) 20,01 : 1 ✔ * `.skupiny__vek b` --akcent #c26bae na --cerna-3 (po přejetí) .... 5,11 : 1 ✔ * `.skupiny__vek span` --text-tlumeny #8a8a97 na --cerna (11 px) .. 5,87 : 1 ✔ * `.skupiny__vek span` --text-tlumeny #8a8a97 na --cerna-3 ........ 5,24 : 1 ✔ * `.skupiny__nazev` --text-silny #ffffff na --cerna ............... 20,01 : 1 ✔ * `.skupiny__nazev` --text-silny #ffffff na --cerna-3 ............. 17,85 : 1 ✔ * `.skupiny__popis` --text-tlumeny #8a8a97 na --cerna (15 px) ...... 5,87 : 1 ✔ * `.skupiny__popis` --text-tlumeny #8a8a97 na --cerna-3 ............ 5,24 : 1 ✔ * `.skupiny__vic` --akcent #c26bae na --cerna (11 px, 800) ......... 5,73 : 1 ✔ * `.skupiny__vic` --akcent #c26bae na --cerna-3 .................... 5,11 : 1 ✔ * `.pozn` --text-tlumeny #8a8a97 na --cerna (15 px) ................ 5,87 : 1 ✔ * * Štítky lig na ose (#219) — text štítku 11 px, 700, tedy běžný text s hranicí 4,5 : 1; * rámeček `--linka` je dekorativní (štítek není ovládací prvek, #93): * * `.skupiny__ligy li` --text-tlumeny #8a8a97 na --cerna ............ 5,87 : 1 ✔ * `.skupiny__ligy li` --text-tlumeny #8a8a97 na --cerna-3 .......... 5,24 : 1 ✔ * `.skupiny__liga--nejvyssi` --kysela #c7f53d na --cerna .......... 15,78 : 1 ✔ * `.skupiny__liga--nejvyssi` --kysela #c7f53d na --cerna-3 ........ 14,07 : 1 ✔ * * Popisek „let", návěští „Zobrazit kategorii", popis i poznámka jsou běžný text (11–15 px), * hranice 4,5 : 1; nejhorší dvojice je 5,11 : 1. Linka poznámky `--akcent` je grafika (3 : 1). * * Čísla u „Celovečerních tanečních projektů" (#203) — prokládaná sekce `--cerna-2`: * * `.cislo b` --kysela #c7f53d na --cerna-2 (44 px, 800) ......... 14,97 : 1 ✔ * `.cislo` --text-tlumeny #8a8a97 na --cerna-2 (12 px, 700) ....... 5,57 : 1 ✔ * * Popisek čísla je 12 px, tedy běžný text s hranicí 4,5 : 1. Na panelu ilustrace * (`--cerna-ilustrace`) čísla nestojí v žádné šířce. * * „Přijít se dá i během roku" na `/tanecni-skupiny` (#206) — prokládaná sekce `--cerna-2`, * žádná nová barva ani nová dvojice, jen nové texty na dvojicích z hlavní tabulky * (přepočítáno 2026-09-16): * * `h2` --text-silny #ffffff na --cerna-2 ......................... 18,98 : 1 ✔ * odstavec --text #d6d6de na --cerna-2 (17 px) ................... 13,14 : 1 ✔ * `.tlacitko` --text-silny #ffffff na --akcent-tmavy ............... 5,61 : 1 ✔ * `.tlacitko--obrys` --text-silny #ffffff na --cerna-2 ........... 18,98 : 1 ✔ * `.tlacitko` po přejetí --cerna #08080a na --kysela ............. 15,78 : 1 ✔ * * Rám obrysového tlačítka `--linka` na `--cerna-2` má 1,27 : 1 (riziko níž) — tlačítko * nese nápis, ne rám, stejně jako obrysové tlačítko v úvodu homepage. * * Štítky jsou 12 px tučně, tedy běžný text s hranicí 4,5 : 1. Stříkanec se jich na dnešním * rozvržení dotýká jen okrajem, ale tvar má roztřepené konce, takže se počítá i horší strana. * * Lektoři (#207) — úvodní blok bez fotky (`.uvodni--bezfoto`, podklad a stříkanec jako výš), * pás „Kdo u nás učí" na `--cerna` a „Přijďte se podívat" na `--cerna-2`. Žádná nová barva * ani dvojice, jen nové texty (přepočítáno 2026-09-16): * * `.nadhodnota` --kysela #c7f53d na #110d12 / #2f1d2d ...... 15,19 / 12,41 : 1 ✔ * `h1` --text-silny #ffffff na #110d12 / #2f1d2d ........... 19,26 / 15,73 : 1 ✔ * `.h-doplnek` --text-tlumeny #8a8a97 na #110d12 / #2f1d2d ... 5,65 / 4,62 : 1 ✔ těsně * `h2` „Kdo u nás učí" --text-silny #ffffff na --cerna ............ 20,01 : 1 ✔ * `h2` a odstavec „Přijďte se podívat" na --cerna-2 ......... 18,98 / 13,14 : 1 ✔ * tlačítka jako u #206 (5,61 / 18,98 / po přejetí 15,78 : 1) ................ ✔ * * Doplněk „Actiwity Dance Company" má na telefonu 18,5 px při 600, tedy běžný text s hranicí * 4,5 : 1 — stejný případ jako doplněk skupin. Jméno karty se z `h2` na `h3` změnilo jen * v osnově, barva i písmo zůstaly. * * Kontakt (#208) — úvodní blok bez fotky jako lektoři, dvojice karet adres a karty osob na * `--cerna`, „Než zavoláte" na `--cerna-2`. Žádná nová barva ani dvojice, jen nové texty * a nová typografie karet osob (přepočítáno 2026-09-16): * * `.nadhodnota` --kysela #c7f53d na #110d12 / #2f1d2d ...... 15,19 / 12,41 : 1 ✔ * `.uvod` --text-silny #ffffff na #110d12 / #2f1d2d ........ 19,26 / 15,73 : 1 ✔ * `.tlacitko` telefon --text-silny #ffffff na --akcent-tmavy ....... 5,61 : 1 ✔ * `.tlacitko--obrys` --text-silny #ffffff na #110d12 / #2f1d2d 19,26 / 15,73 : 1 ✔ * věta o Infranově --text #d6d6de na --cerna (17 px) ............ 13,85 : 1 ✔ * jméno osoby --text-silny #ffffff na --cerna (17 px, 800) ....... 20,01 : 1 ✔ * role osoby --akcent #c26bae na --cerna (12 px, 700) ............. 5,73 : 1 ✔ * telefon a e-mail osoby --akcent #c26bae na --cerna (18 px, 700) . 5,73 : 1 ✔ * „Než zavoláte" `h2` a odstavec na --cerna-2 ............... 18,98 / 13,14 : 1 ✔ * tlačítka „Než zavoláte" jako u #206 (5,61 / 18,98 / po přejetí 15,78 : 1) ... ✔ * * Role je 12 px tučně, tedy běžný text s hranicí 4,5 : 1. Telefon a e-mail po přejetí * berou `--kysela` z `a:hover` (15,78 : 1). * * Dekorační prvky (#122) mají vlastní tabulku u pravidla `h2::before` v sekci 3, protože se * neměří proti tokenu, ale proti barvě SLOŽENÉ z akcentu a podkladu. Kdo tady hýbe `--akcent` * nebo kterýmkoli podkladem, přepočítá i ji. * * ZAKÁZANÉ DVOJICE — dokázané měřením, nesahat na ně * * --akcent-tmavy #a3438d jako TEXT na --cerna .................. 3,57 : 1 ✘ * --text-silny #ffffff na --akcent #c26bae ..................... 3,50 : 1 ✘ * --akcent #c26bae na --akcent-tmavy #a3438d ................... 1,60 : 1 ✘✘ * --text-silny #ffffff na --kysela #c7f53d ..................... 1,27 : 1 ✘✘ * žlutá #fcca14 (paleta starého webu) na bílé .................. 1,54 : 1 ✘✘ * * KLÍČ POLARIT — proč jsou akcenty dva a prohodit je nejde * * velká plocha = --akcent-tmavy (magenta loga) + BÍLÝ text ..... 5,61 : 1 ✔ * malý prvek = --akcent (světlá magenta) na ČERNÉ ............ 5,73 : 1 ✔ * * Obráceně obojí padá: bílá na světlé magentě má 3,50 : 1 a tmavá magenta jako drobný * text na černé 3,57 : 1. Proto se barva nikdy nemění záměnou jedné hodnoty — `--akcent` * a `--akcent-tmavy` nejsou „táž barva světlejší a tmavší k volnému výběru", je to * dvoupoloha jedné barvy vázaná na to, jestli nese text, nebo leží pod textem. * * NEZESVĚTLOVAT PALETU, ABY TEXT PROŠEL. Když magenta něco neunese, je to platný * výsledek — zapíše se jako riziko (viz níž), nezvedne se jí jas. U #101 to bylo * výslovně odmítnuto jako past. * * ZMĚŘENÁ RIZIKA, KTERÁ PALETA NEŘEŠÍ A ŘEŠIT NEMÁ * * --linka #26262f na --cerna ................................... 1,33 : 1 * --linka #26262f na --cerna-2 ................................. 1,27 : 1 * --linka #26262f na --cerna-ilustrace ......................... 1,29 : 1 * --linka #26262f na podkladu úvodního bloku #110d12 ........... 1,28 : 1 * * Poslední dvě řádky přibyly s #123: od něj nese předěl mezi sekcemi `border-top` v lince, * takže linka leží i na podkladu tmavého pruhu a úvodního bloku. Zůstává tím, čím byla — * dekorativním předělem, ne hranou, podle které se pozná ovládací prvek. * * Linka je pod hranicí 3 : 1 z WCAG 1.4.11 a je to vědomé: jsou to dekorativní předěly * a rámy, ne prvky, podle kterých se ovládací element poznává. Přepínač menu se pozná * podle nápisu (--text-silny, 18,98 : 1) a ikony, ne podle rámečku. Jediné místo, kde * hrana nese informaci, je plovoucí panel menu nad textem stránky — ten proto bere * `1px solid var(--akcent)` (5,73 : 1 proti podkladu stránky), ne linku. Kdyby se * `--linka` někdy zesvětlila, aby „prošla", zešedne celý web; správná odpověď je dát * konkrétnímu prvku akcent, jako to dělá panel. * * KDE SMÍ A NESMÍ BÝT KTERÁ BARVA * * --cerna body, hlavička, úvodní pruh. Jako barva textu jen tam, kde je pod * textem světlá plocha: --kysela (přejeté tlačítko) a bílá podložka * log partnerů. Nikde jinde. * --cerna-2 prokládaná sekce, patička, panel menu, karty. Ne jako text. * --cerna-3 hover řádku kategorie, upozornění `.rozpracovano` a od #125 prázdná * deska místo chybějící fotky lektora (sekce 15). Ne jako text. * --cerna-ilustrace VÝHRADNĚ panel pod ilustrací na homepage (`.ilustrace`, od #203; * do #203 celý tmavý pruh) — je to odečtené pozadí ilustrace, * ne vybraná barva palety (viz komentář u tokenu). Nikde jinde. * --linka všechny 1px linky a rámy. Nikdy jako text ani jako hrana, podle * které se prvek pozná. * --text základní text na kterémkoli tmavém podkladu palety. * --text-silny nadpisy h1–h4, text na --akcent-tmavy. NIKDY na --akcent ani na * --kysela. * --text-tlumeny doplňky, popisy, tiráž. Na drobném textu ještě prochází (5,24 : 1 * na nejsvětlejším podkladu palety), pod --cerna-3 už nejít. * --akcent text, odkazy, prosvítající masky dekoračních prvků a hrana panelu * menu — vždy na některém tmavém podkladu palety (na `--cerna`, * `--cerna-2` i `--cerna-3` prochází, viz tabulka výš). * NIKDY jako plocha pod bílým textem. * --akcent-tmavy JEN plné plochy pod bílým textem (hlavní tlačítko, `.preskocit`). * NIKDY jako barva textu. * --kysela přejetí a zaostření (`a:hover`, `:focus-visible`, hover karty). * Jako text jen na tmavém podkladu palety (`--cerna` i `--cerna-2`, * viz tabulka výš); NIKDY pod bílým textem. Odznaky lig, které * tuhle barvu nesly ve směru A, po #93 neexistují a nevrátí se. * Od #202 i text `.nadhodnota` nad `h1` (sekce 3, viz token). * bílá napevno jediná povolená výjimka z „barvy jen tokeny" mimo obsah SVG: * podložka log partnerů (sekce 14). Cizí značky se nesmí věšet na * naši paletu — Břeclav #004F4F má na --cerna 2,13 : 1 a na bílé * 9,41 : 1, JMK #1D34FE 2,83 : 1 a 7,06 : 1. Text na té podložce * je --cerna (20,01 : 1), ne --text. */ /* ========================================================================== 1. Písmo — lokálně, ne z Google Fonts ========================================================================== */ /* * Raleway (SIL OFL 1.1, licence ve `www/fonts/OFL.txt`) je písmo starého webu. * Variabilní řez pokrývá váhy 400–800 jedním souborem, takže se místo šesti * statických souborů stahují dva. `unicode-range` drží české texty na * latin-ext; návštěvník, který čte jen latinku, druhý soubor nestáhne. */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/raleway-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/raleway-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 2. Tokeny — paleta směru AA ========================================================================== */ /* * Barvy a rozměry jsou VÝHRADNĚ tady. Jediné dvě povolené výjimky na celém webu jsou * bílá podložka log partnerů (sekce 14, důvod je u ní) a barvy uvnitř SVG souborů — * cizí značky se na naši paletu věšet nesmí. Změřené kontrasty a pravidla „kde smí * a nesmí být" jsou v hlavičce souboru; kdo tady mění hodnotu, přepočítá i je. */ :root { /* --- Podklady ---------------------------------------------------------- */ --cerna: #08080a; --cerna-2: #101014; --cerna-3: #17171d; --linka: #26262f; /* * Jediná barva palety, která není z návrhu AA, a jediná, která se nesmí sjednotit * s `--cerna`. Není vybraná od stolu: je to přesně pozadí ilustrace * `www/img/ilustrace/actiwity-ilustrace-cerna.webp` (změřeno ve všech čtyřech rozích * i uprostřed okraje). Proto na ní obrázek nemá viditelný šev a nepotřebuje rám. * Rozdíl proti `--cerna` je 6 jednotek jasu na kanál a přesně o ten rozdíl jde — * kdo tenhle token „uklidí" na `--cerna`, dostane kolem ilustrace viditelný šev. * * Až se ilustrace vymění za jinou, tahle hodnota se mění s ní. */ --cerna-ilustrace: #0e0e0e; /* --- Text -------------------------------------------------------------- */ /* * `--text-tlumeny` nesou od #121 štítky sloupců a tiráž v patičce (sekce 10). Do #123 * tu stálo, že mu další roli — čísla ve statistikách — přinese homepage; nepřinesla. * Maketa má na homepage blok `.cisla` („400 tanečníků na projektu", „2007 od kdy * studio jede", „4–60 věk tanečníků"), ale to je NOVÝ VIDITELNÝ TEXT a ten je v #123 * mimo rozsah — texty se v celé sérii #120–#128 nemění. Zůstává tedy u patičky. * * Od #203 ho nesou i popisky čísel `.cislo` (sekce 9) — nový text, který Jan schválil * 2026-09-16; do té doby platil odstavec výš. * * Nejtmavší podklad, na kterém ještě prochází, je `--cerna-3` (5,24 : 1); pod tuhle * hodnotu se nesmí posunout, jinak přestane platit celá řádka v tabulce nad souborem. */ --text: #d6d6de; --text-silny: #ffffff; --text-tlumeny: #8a8a97; /* --- Akcenty ----------------------------------------------------------- */ /* * `--akcent` je magenta loga (#a3438d) posunutá POUZE po ose světlosti: odstín * 313,8° a sytost 41,7 % zůstávají logové, mění se jen L z 45,1 % na 59 %. Světlost * je volená tak, aby na `--cerna` vyšla na 5,73 : 1 — na chlup světelná váha růžové * #ff2e88, kterou ve směru A nahrazuje, aby návrh nezešedl ani nezesvětlal. * Není to barva od stolu a nepřepočítává se. * * `--akcent-tmavy` je magenta loga přesně tak, jak je v logu a jak ji drží tlačítka * starého webu. Leží pod bílým textem, nikdy text nenese. */ --akcent: #c26bae; --akcent-tmavy: #a3438d; /* * Kyselá zelená je jediná barva palety neodvozená ze značky — nese „street". * Ve směru A obsluhovala i odznaky lig; ty po #93 neexistují (viz sekce 6), takže * jí v AA zůstává přejetí a zaostření (`a:hover`, `:focus-visible`). Do #124 tu byl * vyjmenovaný i „hover karty" jako třetí role — tím se myslel `border-color` na rámu * dlaždice v rozcestníku a ten s osou zmizel (sekce 6). Nadpis kategorie se při přejetí * zezelená pořád, ale obstarává to globální `a:hover`, ne vlastní pravidlo té komponenty. * * Od #202 nese i `.nadhodnota` (sekce 3) — řádek verzálkami nad `h1`, nový text, který * Jan pro sérii #201–#208 schválil 2026-09-16. V #123 ho nedostala, protože tehdy platilo, * že se texty nemění. Od #203 nese i čísla `.cislo b` u projektů (sekce 9). * * Na černé má 15,78 : 1, takže i jako text prochází s velkou rezervou; pod bílým * textem nesmí být nikdy (1,27 : 1). */ --kysela: #c7f53d; /* --- Písmo ------------------------------------------------------------- */ --pismo: 'Raleway', 'Trebuchet MS', 'Segoe UI', arial, sans-serif; /* --- Rozměry ----------------------------------------------------------- */ /* * Stupnice mezer směru A. Není lineární schválně: prvních tři kroky drží rytmus * uvnitř komponenty (odstavec, karta), zbylé tři odstupy sekcí a pruhů. * * `--m6` (7rem) bere od #123 `.sekce` na širokém displeji (sekce 5). Do #123 tu * stálo, že ho dostane úvodní blok homepage, protože ho tam má maketa směru AA * (`.hero { padding-block: var(--m6) var(--m5) }`) — nedostal a je to změřené * rozhodnutí, ne opomenutí: úvodní blok stojí nad merch ilustrací a `--m6` by shodilo * podíl ilustrace nad ohybem na 1366 × 618 z 5,1 % na 0 % (viz sekce 8; stav před #179, * od stupňů nadpisů z #179 je tam 0 % i bez `--m6` — přeměřeno v sekci 9). Sekcím pod * ohybem `--m6` nestojí nic, tam tedy je. Do #121 tu stálo, že si token vezme * i hlavička; to nebyla pravda nikdy — hlavička AA má odsazení `--m2` a patička `--m5`. */ --m1: 0.5rem; --m2: 1rem; --m3: 1.5rem; --m4: 2.5rem; --m5: 4rem; --m6: 7rem; --obal: 78rem; /* * Míra řádku — délka textového řádku, na kterou se sází próza (sekce 5). Do #126 to * nebyl token, ale třikrát opsaná hodnota `60ch` u tří komponent (`.uvod`, * `.skupiny__uvod`, `.skupina__sekce > p`) a čtvrtá, nesouvisející hodnota `44rem` * u odpovědí na `/caste-dotazy`. Prózu na zbylých devíti stránkách nekrylo nic — * odstavce tam sázely řádky na celou šířku obsahového sloupce. * * OD #201 JE TO 62ch, NE 60ch — hodnota `p { max-width: 62ch }` ze `smer-a.css` makety AA. * * JE TO `ch`, NE `px` ANI `rem`, A TO JE PODSTATA VĚCI: `1ch` je šířka znaku „0" * v písmu a stupni TOHO PRVKU, takže míra roste se stupněm písma sama. Proto má * běžný odstavec (17 px) jinou šířku než větší odstavec `.vetsi` (1,25rem, tedy * 20 px), a přitom oba drží týchž 62 znaků na řádek. Změřeno v Raleway na vykreslené * stránce: 62ch = 645,05 px při 17 px, 758,88 px při 20 px — shodně s maketou. * Kdo tuhle hodnotu přepíše na pixely, rozejde ty dva odstavce a uvidí to až na stránce. * Úvodní odstavec `.uvod` token nebere, má vlastních 44ch z makety (sekce 5). * * POZOR NA POJMENOVÁNÍ TĚCH ČÍSEL, ať se o tom nevede spor podruhé: `ch` visí na písmu * VČETNĚ ŘEZU, ne jen na stupni. `.skupina__uroven` je `font-weight: 700` a týž token * jí vykreslí **647,15 px**, zatímco běžný odstavec v témže stupni 645,05 px — tučná * nula je o kousek širší. Obě čísla jsou správná a měří dvě různé věci; „62ch = 645 px" * platí pro odstavec v základním řezu, ne pro každý prvek s tímhle tokenem. * * Čísla výš jsou v CSS pixelech, tedy nezávislá na DPR displeje, na kterém se měřilo. */ --mira: 62ch; /* * Jediný stín na webu — plovoucí panel mobilního menu. Panel leží nad textem * stránky, takže potřebuje kromě vlastního pozadí i viditelnou hranu. Na skoro * černém podkladu je stín sám o sobě slabá pomůcka, proto je tvrdší než ve světlé * paletě; nést oddělení ale musí hrana panelu v `--akcent` (viz sekce 4), ne stín. */ --stin-panel: 0 10px 30px rgb(0 0 0 / 0.6); } /* ========================================================================== 3. Základ ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* * Starý web měl základ 15px. Držíme výchozích 16px prohlížeče: rozdíl je * opticky zanedbatelný, ale pod 16px se na mobilech hůř čte a iOS zvětšuje * stránku při zaostření na pole. */ font-family: var(--pismo); font-size: 100%; -webkit-text-size-adjust: 100%; } /* STUPEŇ TEXTU JE ZE SMĚRU AA (#201): `body` 1.0625rem / 1.7, tedy 17 px na řádku 28,9 px, přesně jako `body` v `www/navrhy/styl/smer-a.css`. Do #201 byl text o stupeň menší (16 px / 1.6, zděděné z `html`) a web se tím od makety lišil na každém odstavci. Základ `rem` zůstává 16 px (`html` výš), takže se nehýbe nic, co má stupeň v `rem` — nadpisy, navigace, patička. Mění se jen to, co stupeň dědí: odstavce, seznamy, adresa. Řádkování 1.7 se dědí i do navigace a patičky; tam tím sedí na maketu (13 px / 22,1 px a 15 px / 25,5 px, změřeno na maketě AA). */ body { margin: 0; background: var(--cerna); color: var(--text); font-size: 1.0625rem; line-height: 1.7; /* Patička drží dole i na krátkých stránkách (chybová hláška, prázdný stav). */ display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4 { margin: 0 0 var(--m2); font-weight: 800; line-height: 1.2; color: var(--text-silny); } /* Typografie nadpisů ze směru AA (#179) — `www/navrhy/styl/smer-a.css`, pravidlo `h1, h2, h3`, které `smer-aa.css` importuje beze změny. Verzálky, sevřený řádek, lehce stažený rozpal, `text-wrap: balance` a stupně `h1` / `h2` níž jsou odtamtud doslova. JEN `h1` A `h2`, NE `h3`. Tak zní rozhodnutí z 2026-09-14 („verzálky i stupně velikostí na h1 i h2"); maketa verzálky dává i `h3`, ale to rozhodnutí nejmenuje, a `h3` na webu sedí v prózách a kartách, kde by verzálky byly jiný zásah než nadpis sekce. `line-height` a `letter-spacing` nejsou stupeň ani verzálky, a přesto jsou tu: v maketě jsou tatáž deklarace jako verzálky a verzálkový nadpis s řádkem 1,2 by byl jiný nadpis než ten, který klientka vybrala. `text-wrap: balance` je z téže deklarace; prohlížeč, který ho neumí, zalomí jako dřív. */ h1, h2 { line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; } h1 { font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem); } /* Druhý řádek nadpisu — „jméno studia křičí, upřesnění ne". Pravidlo i jeho hodnoty jsou z makety (`.h-doplnek` ve `smer-a.css`, homepage makety AA); na webu ho nese `h1` homepage a od #204 `h1` rozcestníku skupin („podle věku") — obojí přesně tam, kde maketa nadpis dělí. Není to ozdoba, je to podmínka #89. Celý nadpis „Actiwity Dance Company — taneční studio v Břeclavi" ve stupni `h1` makety má na 320 px šest řádků a odsune ilustraci pod ohyb na všech třech mobilních viewportech z tabulky v sekci 9. Čísla před a po jsou tam. Text nadpisu se tím nemění ani o znak — `textContent` je tentýž, jen druhá půlka je ve ``. Pomlčka zůstává na konci prvního řádku, na začátek řádku podle české sazby nepatří. Barva `--text-tlumeny` je tatáž, kterou nese tlumený text všude jinde na tmavém podkladu. */ .h-doplnek { display: block; margin-top: 0.15em; color: var(--text-tlumeny); font-size: 0.42em; font-weight: 600; letter-spacing: 0.06em; } /* Nadhodnota — krátký řádek verzálkami nad `h1` (#202, `.nadhodnota` ve `smer-a.css`). Hodnoty jsou z makety beze změny. Je to obecná třída, ne homepage: tentýž prvek mají v maketě i úvody dalších stránek (#204, #207, #208). Stojí jako `

` PŘED nadpisem, ne uvnitř něj — do `h1` nepatří, vyhledávač by ho četl jako součást titulu stránky. Barva `--kysela`; kontrast na podkladu úvodního bloku i na stříkanci je v tabulce nad souborem (nejhůř 12,41 : 1). */ .nadhodnota { margin: 0 0 var(--m2); color: var(--kysela); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } /* * `position: relative` a `isolation: isolate` nesou čmouhu z pravidla pod tímhle (#122) * a nejsou kosmetika. Tah má `z-index: -1`, aby ležel POD textem nadpisu — a bez * vlastního vrstvicího kontextu se propadne až pod pozadí sekce, takže v tmavém pruhu * homepage a v každé sekci s vlastním podkladem zmizí úplně. * * Obojí je na `h2`, ne na jeho obalu: nadpis je jediný prvek, o kterém se ví, že tam * čmouha patří, a `position` na obalu by ji navázala na výšku celé sekce. */ h2 { position: relative; isolation: isolate; font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3rem); } /* * Čmouha za nadpisem sekce — stopa štětce z vizuální řeči studia (#122). Sada těch tahů * je na starém webu na Joomle a nový web ji do #122 nepoužíval; je to hotová vlastní * grafika, ne nový dekor. * * NENÍ TO OBRÁZEK NA POZADÍ, JE TO MASKA. Tvar tahu vyřezává `mask-image`, barvu dává * `background: var(--akcent)`. Z obrázku se tedy bere jen průhlednost a prvek se obarvuje * z palety — kdyby se magenta jednou měnila, čmouha se mění s ní a nepřekresluje se. * Rastr bez alfy by jako maska byl plný obdélník přes celý nadpis; hlídá to * `DekoracniPrvkyTest::testMaskyMajiAlfaKanal()`, protože v CSS to vidět není. * * ČITELNOST NADPISU NESMÍ VISET NA TOM, KAM DOSTŘÍKLA BARVA. Tah má roztřepené konce * a u delšího nadpisu kryje jen jeho začátek — zbytek textu leží mimo něj, protože * tah má pevnou velikost (viz níž). U #101 tak ve směru AD zmizelo koncové „K" z „Vyberte věk", když * nadpis dostal bílou barvu jen kvůli čmouze. Tady je to obráceně a PŘEKLOPIT SE TO * NESMÍ: nadpis je `--text-silny`, tedy čitelný sám o sobě na kterémkoli tmavém podkladu * palety, a čmouha je prosvítající maska POD ním, ne podklad, který by text musel nést. * Změřeno (WCAG 2.1, bílá na složené barvě `0,38 × --akcent` nad podkladem; hranice pro * velký text je 3 : 1): * * podklad složená barva čmouhy bílá na čmouze bílá mimo čmouhu * --cerna #08080a .......... #4f2e48 ............... 11,56 : 1 ✔ ... 20,01 : 1 ✔ * --cerna-2 #101014 ........ #54334f ............... 10,70 : 1 ✔ ... 18,98 : 1 ✔ * --cerna-3 #17171d ........ #583754 ............... 10,05 : 1 ✔ ... 17,85 : 1 ✔ * --cerna-ilustrace #0e0e0e #52314b ............... 11,05 : 1 ✔ ... 19,30 : 1 ✔ * úvodní blok #110d12 ...... #54314d ............... 10,92 : 1 ✔ ... 19,26 : 1 ✔ * * Poměry v tabulce jsou počítané ze zaokrouhlené složené barvy, která je v tabulce vedle * nich; odečteno přímo z vykreslené stránky z nezaokrouhlených kanálů vyjde o −0,05 až * +0,07 jinak (např. 11,61 místo 11,56 na `--cerna`, ale 11,00 místo 11,05 na * `--cerna-ilustrace` — zaokrouhlení kanálu jde oběma směry, ne jen nahoru). Na závěru to * nic nemění a tabulka je takhle vnitřně kontrolovatelná — složená barva a její poměr * k sobě patří. Přeměřeno v #128 na všech pěti řádcích. * * V tabulce je každý tmavý podklad palety, ne jen ten, pro který se pravidlo psalo — * ve směru AD právě tohle chybělo a `.pruh h2` mělo na černém pruhu 1,00 : 1. Nejhorší * dvojice je 10,05 : 1, tedy víc než dvojnásobek hranice: nadpis projde na obou stranách * hrany tahu a je čitelný i tam, kam maska nedosáhla. Proto nevadí, že tah od #141 * kryje jen začátek nadpisu: písmena na čmouze i mimo ni mají poměr z tabulky. * * Dnes tah opravdu leží na dvou z nich — zjištěno projitím všech sedmnácti vykreslených * stránek: 64 nadpisů na `--cerna` a jeden na `--cerna-ilustrace` (`.pruh h2` na homepage, * přesně ten, který ve směru AD zmizel), plus ztlumený na `/kontakt`. Stav před #203: * od #203 pruh neexistuje a nadpis „Celovečerní taneční projekty" stojí na `--cerna-2` * (řádek v tabulce výš), řádek `--cerna-ilustrace` je tím pojistka. Na `--cerna-2` `h2` * stojí taky — patička a karty rozcestníku, u obojí změřen podklad `#101014` — ale tam je * čmouha vypnutá. Na `--cerna-3` nestojí `h2` ani jeden: jediná plocha té barvy je * `.rozpracovano` (sekce 5) a ta žádný nadpis neobsahuje. Na podkladu úvodního bloku taky * ne — `.uvodni` drží `h1`, a ten čmouhu nemá. Řádky `--cerna-2`, `--cerna-3` a „úvodní * blok" jsou tedy pojistka pro krok, který nadpis na jiný podklad přesune, ne popis * dnešního stavu. * * JEDEN TAH V PŘIROZENÉM POMĚRU ZA ZAČÁTKEM NADPISU, NE TAH PŘES CELÝ NADPIS (#141). * `6.35em × 3.3em` je poměr masky `stetec-02.webp` (1200 × 624, tedy 1,923 : 1), takže * `mask-size: 100% 100%` tvar nedeformuje. Velikost je v `em`, tah tedy roste se stupněm * písma, ne s délkou textu — u krátkého i dvouřádkového nadpisu vypadá stejně. * * Do #141 tah kopíroval šířku nadpisu (`width: calc(100% + 0.9em)` nad `width: fit-content` * na `h2`) a obě cesty, jak to udržet, se na vykreslené stránce ukázaly špatně: * * - Roztažení do boxu zahodilo poměr masky: nejdelší nadpis na `/caste-dotazy` měl tah * 14,8 : 1 už před #179, tedy tenký šikmý pruh. Po #179 (verzálky, větší stupeň, * `text-wrap: balance`) se nadpisy zalamují častěji — a u zalomeného nadpisu se box * k textu NESTÁHNE (`fit-content` dorazí na šířku sloupce), takže tah vybíhal daleko za * text a všechny dvouřádkové nadpisy končily na stejné pravé hraně. Jan 2026-09-16: * „ty čmouhy jsou pořád strašné, hlavně na FAQ". * - `mask-repeat: repeat-x` (rozhodnutí z 2026-09-14) vyzkoušené na `/caste-dotazy`: * `stetec-02` je stříkanec s kapkou vlevo a v řadě z něj vznikne pás samostatných * „komet", vpravo za textem visících ve vzduchu. Jan vybral tuhle variantu 2026-09-16. * * Maketa AA má tah taky pevný (`width: 8.5em`, `height: 2.1em`), jen roztažený do 4 : 1. * Tady je o kus vyšší, aby poměr držel a tah nebyl úzká linka; zasahuje proto 0,75em nad * nadpis a přes první řádek do druhého. * * `left` se stropem `0.75rem` je z #179 a platí dál: `h2` ve stupních AA má 30–48 px * a holé `0.45em` by na 768 px vyjelo za 16px odsazení obalu (změřeno: vodorovný posuvník * na sedmi routách). Vpravo tah nevyjede: 6,35em je při největším stupni 305 px a při * nejmenším 190 px, obsahový sloupec má na 320 px 288 px. * * `aria-hidden` netřeba, pseudoelementy odečítač nečte. * * `@supports` je pojistka, ne obřad: prohlížeč bez masek by `background` a `opacity` * vykreslil jako plnou magentovou dlaždici za každým nadpisem, tedy přesně tu vadu, * kterou u masky bez alfy hlídá test. Bez masek prvek radši nebude vůbec. */ @supports (mask-image: none) { h2::before { content: ''; position: absolute; left: calc(-1 * min(0.45em, 0.75rem)); top: -0.75em; z-index: -1; width: 6.35em; height: 3.3em; background: var(--akcent); opacity: 0.38; mask-image: url('../img/dekor/stetec-02.webp'); mask-repeat: no-repeat; mask-size: 100% 100%; pointer-events: none; } } /* * Kde čmouha není. Jeden výčet, protože je to jedno rozhodnutí: tah patří za nadpis * SEKCE, ne za nadpis karty ani za štítek sloupce. * * - `.paticka h2` jsou drobné štítky sloupců (0,75rem, váha 800, rozpal 0,2em, tlumená * barva). Sémanticky to `h2` je, protože patička drží tři pojmenované části, ale * dekorace za nimi by z nich udělala třetí hladinu nadpisů na stránce. * - Jméno v seznamu lektorů (`.lektori__jmeno`) a nadpis karty rozcestníku (`.skupiny__nazev`) * tu do #207, resp. #205 stály taky, protože byly `h2`. Obě stránky od té doby mají mezipatro * („Kdo u nás učí", „Vyberte věk"), karty nesou `h3` jako v maketě a čmouhu nemají * už z principu — pravidlo níž míří jen na `h2`. * * U jmen lektorů to navíc nebyla jen věrnost maketě. Na `/o-nas/lektori` stálo osm jmen * pod sebou v rozestupech 49–50 px, zatímco tah je 59 px vysoký: změřeno, že se tahy * pěti sousedních dvojic přesahovaly o 9–10 px a splynuly v jeden šmouhový pás přes celý * seznam. Kdo by jméno vrátil do `h2`, musí vrátit i výjimku. */ .paticka h2::before { display: none; } h3 { font-size: 1.25rem; } p, ul, ol { margin: 0 0 var(--m2); } a { color: var(--akcent); } /* * Přejetí odkazu je kyselá zelená (15,78 : 1 na `--cerna`) — tak to má směr A a je to * jediné místo, kde `--kysela` na dnešním webu opravdu něco obsluhuje. Ostatní role, * které pro ni směr A má (čísla ve statistikách, `.nadhodnota`), tu ještě nemají prvek; * odznaky lig, které ji nesly taky, po #93 neexistují. * * Pravidlo je globální schválně: každý odkaz na webu má na přejetí reagovat stejně, * ať se to nemusí dopisovat u každé nové komponenty. */ a:hover { color: var(--kysela); } img { max-width: 100%; height: auto; } /* * Viditelné zaostření je jediná navigační pomůcka klávesnice. Platí globálně, * ať se na něj nezapomene u nově přidaných prvků. */ :focus-visible { outline: 3px solid var(--kysela); outline-offset: 2px; } .obal { width: 100%; max-width: var(--obal); margin-inline: auto; padding-inline: var(--m2); } /* Odkaz pro klávesnici a čtečky — vidět je až po zaostření. */ .preskocit { position: absolute; left: -9999px; top: 0; z-index: 10; padding: var(--m1) var(--m2); background: var(--akcent-tmavy); color: var(--text-silny); text-decoration: none; } .preskocit:focus { left: 0; } /* ========================================================================== 4. Hlavička a navigace ========================================================================== */ /* * Hlavička je jedna ze čtyř hladin `z-index` na webu: `-1` dekorační pseudoprvky * (`h2::before` v sekci 3 a stříkanec v sekci 8, oba z #122), 5 hlavička, * 10 `.preskocit`, 20 panel menu. Hlavička hladinu potřebuje proto, že směr AA staví * dekorační čmouhy jako pseudoprvky sekcí pod hlavičkou (#123) — bez vlastní hladiny by * se taková čmouha vykreslila přes logo, protože hlavička je v pořadí v kódu první. * (Do #128 tady stálo „třetí a zatím poslední hladina" — výčet zapomínal na záporné * hladiny, které #122 přidalo. Hladiny se počítají grepem na `z-index`, ne z paměti.) * * `z-index: 5` zároveň udělá z hlavičky stacking context, takže `z-index: 20` panelu * menu platí jen uvnitř ní. To je v pořádku: panel má být nad obsahem stránky * (`

` je na hladině 0, hlavička na 5) a nad hlavičku samotnou nic nepatří kromě * skip-linku, který je její sourozenec na hladině 10 a přebije ji i s panelem. * Pátá hladina přibyla v #180: 30 profil lektora (sekce 15), který jako jediný prvek webu leží * přes celé okno včetně hlavičky a panelu menu. Šestou nepřidávej, dokud tyhle pět nepřestane * stačit. (Do #180 tu stálo „pátou nepřidávej, dokud čtyři nepřestanou stačit". Do #128 tady stálo * „čtvrtou … dokud tyhle tři", což si protiřečilo s výčtem na začátku téhož komentáře — * oprava výčtu se nedotáhla o pět řádků níž.) */ .hlavicka { position: relative; z-index: 5; border-bottom: 1px solid var(--linka); background: var(--cerna); } .hlavicka__obal { /* * Kotva plovoucího panelu menu (#64). Panel se pozicuje k obalu, ne k `.menu`: * díky tomu mu `top: 100%` vyjde přesně na spodní hranu hlavičky a na úzkém * displeji se dá roztáhnout přes celou šířku obsahu jen dvojicí `left`/`right`, * bez `100vw` — to by na desktopu počítalo i se šířkou posuvníku. */ position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; /* * Vodorovná mezera je `--m4` až nad prahem vodorovné navigace (viz níž), ne tady. * Pod prahem stojí v řádce jen logo a přepínač a odráží je od sebe * `justify-content: space-between`, takže by ta mezera nebyla vidět — zato by * ubrala 24 px z místa, které v řádce je. ZMĚŘENO: na 320 px má obsah hlavičky * 273 px (viewport 320 − 15 px posuvník − 2× 16 px odsazení) a logo s přepínačem * měří 239,83 px a se stávající šestnáctipixelovou mezerou * zaberou 255,83 px; se čtyřicetipixelovou mezerou to je 279,83 px, tedy o 6,83 px * víc, než je místa — přepínač se zalomil pod logo a hlavička narostla ze 108 px * na 168 px. Nevracej `--m4` sem. */ gap: var(--m2); padding-block: var(--m2); } .hlavicka__logo { display: block; line-height: 0; /* * Logo je ukotvené nahoře (#64). Se samotným `align-items: center` na obalu * se svisle středilo vůči nejvyšší položce řádku — a jakmile `
` * vyrostlo o rozbalený seznam, logo se s ním posunulo dolů. Panel je dnes * mimo tok, takže by k tomu dojít nemělo, ale ukotvené logo tu vlastnost * nepotřebuje: cokoli v hlavičce vyroste, logo zůstane, kde je. Řeší se to * na logu, ne převrácením celého obalu — zbytek řádku si tak drží středění * bez dalšího dorovnávání. */ align-self: flex-start; } /* * Logo se redesignem nemění tvarem ani barvou — je to pevný bod zadání * (`claude/plans/2026/09/redesign-zadani.md`). Mění se jen šířka: směr AA má značku * na 132 px, o 18 px užší než starý web. Zdroj je pořád `www/img/actiwity-logo.webp` * 300 × 171, takže se jen zmenšuje, ne překresluje. */ .hlavicka__logo img { width: 132px; height: auto; } /* * Mobilní menu je `
`/``, ne přepínač v JavaScriptu. * Rozbalování umí prohlížeč sám, takže funguje i s vypnutým JS, ovládá se * klávesnicí a čtečka ho oznámí jako rozbalovací prvek. `` * by to samé uměl jen s podstrčeným `