/* ========================================================================== Zapomenutá chalupa — designové tokeny Vytaženo z Figmy (desktop 1800 px, mobil 390 px), srpen 2026. V TOMHLE SOUBORU JSOU JEN HODNOTY — barvy, velikosti, šířky, poměry. Nic se tu nevykresluje. Když chceš změnit, jak něco vypadá, měň číslo tady; když chceš změnit, z čeho se to skládá, jdi do komponenty.css. ========================================================================== */ /* --- Písmo -------------------------------------------------------------- */ /* Google Sans, zúžený na CZ/SK/DE/NO/DA/SV/PL/HU/FR/ES/IT. 242 znaků. Obsahuje kapitálky (smcp/c2sc), kurzívu i osy wght 400–700, opsz, GRAD. */ @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans.woff2') format('woff2'), url('fonts/GoogleSans.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Google Sans'; src: url('fonts/GoogleSans-Italic.woff2') format('woff2'), url('fonts/GoogleSans-Italic.woff') format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; } /* --- Ikony ----------------------------------------------------------------- Material Symbols Outlined, ale JEN OSM ZNAKŮ: add, arrow_back, arrow_forward, arrow_outward, check_circle, close, dehaze, favorite. Soubor má 3 176 bajtů — celá znaková sada by měla stovky kilobajtů. ⚠️ „dehaze" (hamburger) web od 25. 9. 2026 NEPOUŽÍVÁ — Jan ho nahradil slovem „menu". V písmu zatím zůstal; při nejbližší výměně souboru ho z icon_names vynechat a zvednout ?v=. Dřív se tahal z Google Fonts a byla to jediná externí závislost webu. Rozhodnuto stáhnout k sobě: odpadne spojení na cizí server (a s ním i to, že se návštěvník ohlásí Googlu), ikony se načtou zároveň se stránkou a web funguje i bez internetového spojení s Googlem. Osa FILL je v souboru PLYNULÁ 0–1 (ne zafixovaná na 0 jako dřív): check_circle v seznamech je plný (FILL 1), všechny ostatní ikony obrysové (FILL 0 — zapsáno výslovně u .ikona i u šipky za odkazem). wght zůstává zafixovaná na 300, GRAD na 0. ⚠️ Jak soubor vyrobit znovu, kdyby přibyla ikona: otevřít https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300,0..1,0&icon_names=add,arrow_back,arrow_forward,arrow_outward,check_circle,close,dehaze,favorite (do icon_names doplnit novou ikonu — jména musí jít ABECEDNĚ), v odpovědi je odkaz na woff2 a ten uložit sem. Odpověď s woff2 pošle Google jen prohlížeči, který se tak představí — curl potřebuje hlavičku User-Agent z moderního Chromu. Ligatury musí zůstat zapnuté, jméno ikony se píše jako text. ⚠️ PŘI KAŽDÉ VÝMĚNĚ SOUBORU ZVEDNOUT ČÍSLO VERZE V ODKAZU. .htaccess říká prohlížečům, ať si písma pamatují rok a nekontrolují je („immutable“). Vracející se návštěvník by si nechal starý soubor a místo nové ikony by viděl její jméno jako text — přesně to se stalo při zkoušce check_circle na localhostu (11. 9. 2026). Proto má odkaz v @font-face níž za jménem souboru ?v=2 — při každé výměně souboru to číslo zvednout. Pro prohlížeč je to nová adresa, takže si soubor stáhne znovu; server číslo ignoruje a pošle týž soubor. (v=1 byl původní soubor se šesti ikonami, v=2 přidal check_circle, v=3 přidal favorite — srdce na konci sekce rezervace. Soubor vyrostl z 2 520 na 3 176 bajtů, tedy o 656 bajtů za osmou ikonu.) */ @font-face { font-family: 'Material Symbols Outlined'; src: url('fonts/MaterialSymbols.woff2?v=3') format('woff2'); /* ?v= viz výš */ font-weight: 300; font-style: normal; font-display: block; } :root { /* --- Barvy ------------------------------------------------------------ */ --barva-pozadi: #F8F7F6; /* pozadí stránky */ /* ⚠️ ZKOUŠENÁ HODNOTA (Jan, 16. 9. 2026). Základní text ztmaven z původních #6d6864 na #57524E — na stránce působil slabým kontrastem. Kontrast proti pozadí stoupl z 5,15:1 na 7,21:1, na krémovém pásu ze 4,76 na 6,67 a ve štítku „XY min" ze 4,36 na 6,11 (ten byl tedy těsně POD normou AA, teď je nad ní). ⚠️ JAK TO VRÁTIT NEBO ZKUSIT JINÝ ODSTÍN — na dvou místech: 1. přepsat tenhle jeden řádek (text, tečkované linky i slabý text se z něj odvozují), 2. pustit na obrázky tuhle náhradu, protože SVG si barvu nesou v sobě a CSS na ni nedosáhne (větvička + čtyři loga médií): grep -rl '#57524E' images | xargs sed -i '' 's/#57524E/NOVÁ/g' Modrá (odkazy, tlačítko, logo, favicona) se tím netýká. */ --barva-text: #57524E; /* text i tečkované linky */ /* --barva-pas (#f1eeeb) SMAZÁN 2. 10. 2026 — krémový pás za foto pásy zmizel 16. 9. 2026, od té doby ho nic nepoužívalo. Kdyby se plocha vracela, hodnota je tahle. */ --barva-akcent: #6182a4; /* tlačítko, pozadí mobilního menu */ --barva-akcent-hrana: #45688d; /* spodní a pravý okraj tlačítka, 2 px */ /* Hover — převzato ze staršího řešení */ --barva-hover-pozadi: rgba(97, 130, 164, 0.12); --barva-hover-text: #1e3a5f; /* ⚠️ ZKOUŠKA (16. 9. 2026): barvy štítku „XY min" v seznamech okolí. Obě rodiny jsou ODVOZENÉ Z FOTEK, ne vymyšlené: hlína — průměr všech pixelů osmi fotek domu vyšel #99897C (dřevo, textil, omítka) zeleň — průměr pixelů, kde převažuje zelená, vyšel #494A32 (smrk a horská louka; Šumava je tmavá, žádná svěží zeleň) Tmavé varianty jsou zesvětlené tak, aby text barvy stránky uvnitř štítku prošel na kontrast 4,5:1, a aby si obě rodiny odpovídaly vahou. Modrá se nepoužívá — je vyhrazená klikatelným prvkům. Po výběru varianty zbytek smazat. */ /* Srdce na konci sekce rezervace (vybral Jan 25. 9. 2026: „tlumená červená, ale ať je to fakt červená, ne nějaká hnědooranžová"). ⚠️ Odstín je −2,3°, tedy KOUSEK DO KARMÍNU, ne do oranžové — a je to schválně. Tlumená červená se odbarvováním sveze do cihlové, protože hnědá NENÍ nic jiného než tmavá odbarvená oranžová. Bezpečný směr je tedy pod nulu, ne nad ni. (Sytost 66 %, světlost 45 %.) Kontrast proti pozadí stránky 5,46:1 — víc než čistá červená #FF0000, která má jen 3,74:1 a přitom křičí. */ --barva-srdce: #C1272D; --barva-hlina-svetla: #EDE3DC; /* štítek „XY min" v sekci okolí */ /* --- Písmo ------------------------------------------------------------ */ --pismo: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radek: 1.5; /* řádkování, všude stejné */ /* Prostrkání — po sjednocení jen dvě hodnoty */ --prostrkani-nadpis: 0.3em; /* H1, H2, H3, dílčí nadpisy v textu */ --prostrkani-text: 0.05em; /* všechno ostatní */ /* --- Velikosti písma (mobil; desktop je přebíjí níže) ------------------ */ --velikost-zaklad: 18px; /* běžný text, accordion, seznamy, nadpisy */ --velikost-perex: 24px; /* úvodní odstavce stránky a sekcí */ --velikost-popisek: 16px; /* popisky pod fotkami, kurzíva */ --velikost-btn: 24px; /* text v tlačítku, Bold */ --velikost-nav: 18px; /* navigace — jen desktop */ --velikost-accordion: 16px; /* rozbalený text accordionu — viz níž */ /* --- Rozměry a mezery -------------------------------------------------- */ /* Tři vrstvy šířky obsahu — viz CLAUDE.md, sekce Responzivita. Na mobilu splývají do jedné: celá šířka minus okraje. */ --okraj: 20px; --obsah-siroky: calc(100vw - 2 * var(--okraj)); /* hero, foto pásy, accordiony */ --obsah-stredni: var(--obsah-siroky); /* dvojice fotka + text */ --obsah-uzky: var(--obsah-siroky); /* perex */ --radius: 6px; /* fotky, karty, tlačítko */ /* --- Tečkovaná linka -------------------------------------------------- Globální styl, platí všude, kde na webu vede tečkovaná linka. POZOR: ve Figmě jsou linky čárkované (dashed). Na výslovné přání jsou na webu TEČKOVANÉ. Nevracet zpět podle Figmy. CSS `dotted` NEJDE použít — prohlížeč si rozestup tečky určuje sám a u síly 1 px dělá mezeru taky 1 px, tedy dvakrát hustěji, než má být. Linka se proto kreslí opakovaným přechodem: tečka, mezera, tečka… Je to obrázek na pozadí, ne `border` — vizte komponenty.css. */ --linka-sila: 1px; /* tloušťka linky */ --linka-tecka: 1px; /* délka tečky */ --linka-mezera: 3px; /* mezera mezi tečkami */ --linka: repeating-linear-gradient(to right, var(--barva-text) 0 var(--linka-tecka), transparent var(--linka-tecka) calc(var(--linka-tecka) + var(--linka-mezera))); /* Tatáž linka v tmavší barvě — linky zvýrazněné položky accordionu (najetí, rozbalený stav). Barvu nejde jen přepsat přes --barva-text: proměnná uvnitř --linka se dosadí už tady na :root. */ --linka-zvyraznena: repeating-linear-gradient(to right, var(--barva-hover-text) 0 var(--linka-tecka), transparent var(--linka-tecka) calc(var(--linka-tecka) + var(--linka-mezera))); /* Obrys aktivní položky navigace je zaoblená PILULKA, ne rovná linka. Pravidlo „tečka 1, mezera 3" se na ni ZÁMĚRNĚ nevztahuje — platí jen pro rovné linky. Tady zůstává obyčejný `dotted`, jak ho kreslí prohlížeč. Nesjednocovat s --linka. */ --linka-obrys: 1px dotted var(--barva-text); /* Světlá varianta do mobilního menu, kde je pozadí modré. */ --linka-svetla: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.25) 0 var(--linka-tecka), transparent var(--linka-tecka) calc(var(--linka-tecka) + var(--linka-mezera))); /* Záhlaví sekce — značka, nadpis, hlavní fotka. Figma desktop (uzly 786:16 / 526:1790 / 526:1806): značka 2612–2632 nadpis 2640–2670 fotka 2690–3590 Obě mezery vyjdou v em přesně, bez zaokrouhlování: značka → nadpis 8 px = 0,4em nadpis → fotka 20 px = 1em */ --znacka-sirka: 30px; /* soubor je 30 × 20, kresba v něm 23 × 20 */ --znacka-vyska: 20px; --znacka-odstup: 0.4em; /* Nadpis → hlavní fotka, UVNITŘ bloku. Celý řádek: 30 px na desktopu, 27 px na mobilu. Figma kreslí 20 px, ale to je 0,67 řádku a byla by to jediná mezera na stránce mimo rytmus. */ --zahlavi-odstup: 1.5rem; /* ===== JEDNA MEZERA MEZI VŠEMI BLOKY SEKCE =========================== Nadpis s hlavní fotkou, perex, dvojice fotka + text, trojice accordionů, foto pás — mezi všemi je stejná svislá mezera: mobil 2 řádky = 3rem = 54 px desktop 2,5 řádku = 3,75rem = 75 px ⚠️ Mobil a tablet měly do 2. 10. 2026 jen 1,5 řádku (40,5 px). Jan mezeru po prvních dojmech z telefonu zvětšil; chtěl +20–30 %, ale v půlřádkovém kroku webu leží nejblíž právě dva řádky (+33 %). Desktop se neměnil. ⚠️ REM, NE EM. Em by se počítalo z písma toho bloku, na kterém mezera sedí — perex má 30 px, takže by z 3,75em vyšlo 112,5 px místo 75. Rem se počítá z písma dokumentu, které je vždycky to základní (html { font-size: var(--velikost-zaklad) }), takže mezera vyjde stejně nad perexem, nad fotkou i nad accordionem. Je to stejná past jako u prostrkání, viz komentář v komponenty.css. Odvozuje se z toho --dvojice-odstup, mění se tedy na jednom místě. ⚠️ Odsazení fotek uvnitř foto pásu se z toho odvozovalo taky, dokud měl pás krémovou plochu. Dnes má jen linku zdola a vlastní, menší odsazení — viz --pas-odsazeni-nad a --pas-odsazeni-pod. Uvnitř bloku platí menší mezery (nadpis → fotka 20 px, fotka → popisek půl řádku). Blok drží pohromadě právě tím, že je uvnitř těsnější než okolo. */ --blok-odstup: 3rem; /* Dvě výjimky z té jedné mezery — obě má odsouhlasené uživatel: 1. HLAVNÍ FOTKA → PEREX je těsnější než ostatní přechody. Perex patří k fotce nad sebou, ne k obsahu pod sebou. mobil 1 řádek = 1,5rem = 27 px, desktop 1,5 řádku = 2,25rem = 45 px 2. MEZI SEKCEMI je naopak volněji než uvnitř sekce, aby bylo poznat, že jedna skončila a druhá začíná. mobil 3 řádky = 4,5rem = 81 px, desktop 3,5 řádku = 5,25rem = 105 px ⚠️ Mobil a tablet měly do 2. 10. 2026 dva řádky (54 px); Jan mezeru zvětšil o polovinu. Desktop se neměnil. Obě jsou v rem ze stejného důvodu jako --blok-odstup: perex má jiné písmo než zbytek stránky a v em by mezera nad ním vyšla jinak. */ --perex-odstup: 1.5rem; --sekce-odstup: 4.5rem; /* Dvojice fotka + text. Figma desktop: 526:1794 + 526:1791 (čtverec vlevo, text vpravo), 526:1796 + 526:1793 (text vlevo, obdélník vpravo). Šířky se na desktopu NEMĚNÍ. Sedí přesně do střední vrstvy: 580 (čtverec) + 40 (mezera) + 380 (text) = 1000 ✓ 480 (obdélník) + 40 (mezera) + 380 (text) + 100 (zbyt) = 1000 ✓ Těch 100 px u obdélníkové dvojice zůstává na vnitřní straně — fotka se drží vnější hrany, stejně jako ve Figmě. ⚠️ Mírně upraveno oproti Figmě (574 / 486 / 398 v šířce 1010), aby se střední vrstva vešla i na iPady na šířku. */ --dvojice-ctverec: 580px; --dvojice-sirka: 480px; --dvojice-text: 380px; --dvojice-mezera: 1em; /* mobil: svisle mezi fotkou a textem */ /* Dvojice pod sebou jsou samostatné bloky, takže mezi nimi je stejná mezera jako mezi čímkoli jiným. Vlastní jméno si drží proto, aby šlo v komponentě přečíst, o kterou mezeru jde. */ --dvojice-odstup: var(--blok-odstup); /* Na mobilu dvojice NEVYPLNÍ celý prostor pro obsah — je užší a přisadí se k levému nebo pravému okraji podle toho, na které straně stojí fotka na desktopu. Tím se strana pozná i na mobilu. Figma: 270 px při obsahu 350 px = 77,14 %. Zaokrouhleno na 77 %, což dá 269,5 px — rozdíl půl pixelu. Podíl, ne pevná šířka, aby se to drželo i na širších telefonech. Zapsáno jako 0.77, ne 77% — calc() umí dělit jen číslem, ne procentem. Chrome to promine, Safari nemusí. */ --dvojice-podil: 0.77; /* = 77 % */ /* Nad 700 px už dvojice nerostou. Pás, ve kterém žijí, se zastaví na šířce obsahu, jakou má mobil široký 700 px (700 − 2 × 20 = 660), a od té chvíle se jen posouvá na střed stránky — přibývají okraje. Dvojice si v pásu drží svou stranu, takže se pořád pozná, kam obsah patří. Nad 1100 px tohle přebije desktopové rozvržení. */ --dvojice-pas: 660px; --dvojice-odsazeni: max(var(--okraj), calc((100vw - var(--dvojice-pas)) / 2)); /* KOTVA levého sloupce. Na ni sedá střed loga, střed úvodního nadpisu „zapomenutá chalupa" i střed nadpisů sekcí — všechno tohle se tedy hýbe společně jako jeden sloupec. Kotva kopíruje LEVOU HRANU FOTKY u dvojice zarovnané doprava: odsazení pásu plus ta jeho část, kterou dvojice nevyplní (1 − 0,77 = 0,23). Na 390px mobilu vyjde na 100,5. Spodní hranice je pojistka pro úzké displeje. Nejširší prvek, který na kotvě stojí, je nadpis „zapomenutá" (157,6 px); aby se vešel do okraje, musí být kotva aspoň 20 + 157,6/2 = 98,8. Se 100 px má rezervu i nadpis sekce „důležitosti". Pod 390 px okna se tedy sloupec zastaví a dál už se s fotkou neposouvá. */ --kotva-min: 100px; --kotva: max(var(--kotva-min), calc(var(--dvojice-odsazeni) + min(var(--obsah-siroky), var(--dvojice-pas)) * (1 - var(--dvojice-podil)))); /* Poměry stran fotek */ --pomer-hero: 3 / 4; /* hero a hlavní fotka sekce (mobil) */ --pomer-ctverec: 1 / 1; /* čtvercová fotka v dvojici */ --pomer-sirka: 3 / 2; /* fotka na šířku v dvojici */ --pomer-karta: 4 / 5; /* karta ve foto pásu */ /* Foto pás. Figma desktop: pozadí 526:1784 (1797 × 690 v rámu širokém 1800, tedy přes celou šířku), karta 526:2121 (400 × 500 na x = 100), popisek 526:1812 (x = 100, těsně pod fotkou). Karta začíná tam, kde začíná hero fotka — na hraně široké vrstvy. Odsazení se proto nezapisuje číslem, ale dopočítá se z ní; drží pak hranu i nad 1680 px, kde široká vrstva narazí na strop a okraje samy povyrostou. Procenta, ne 100vw: kdyby okno mělo klasický scrollbar, 100vw by ho počítalo do šířky a hrana by se rozešla s fotkou o jeho tloušťku. */ /* Šířka se zapisuje, výška vychází z poměru 4:5 — a je zvolená tak, aby padla do vodorovné mřížky řádků. Na mobilu je řádek 27 px (18 × 1,5): 270 × 1,25 = 337,5 px = 12,5 řádku. 270 je jediná celá šířka v okolí, která vyjde aspoň na půlřádek; 250 z Figmy dávalo 312,5, tedy 11,57. */ --karta-sirka: 270px; --karta-mezera: 12px; --pas-odsazeni: calc((100% - var(--obsah-siroky)) / 2); /* Fotka → popisek. Půl řádku: řádek je 1,5rem, takže 0,75rem je jeho polovina — 15 px na desktopu, 13,5 px na mobilu. Ve Figmě je 8 px, ale to je 0,27 řádku a rozbíjelo by to svislý rytmus pásu. Sedí na kartě, ne na popisku, aby se em počítalo ze základní velikosti písma (20 px) a ne z popisku (17 px). Rem to drží i tehdy, když si karta někdy sáhne na jinou velikost písma. */ --karta-popisek-odstup: 0.75rem; /* Odsazení fotek uvnitř pásu — NAHOŘE PŮL ŘÁDKU, DOLE CELÝ (vybral Jan 16. 9. 2026). Není to nedůslednost: nahoře žádná linka není, takže stačí, aby se fotky nelepily na předchozí blok, kdežto dole musí být poznat, že linka patří k pásu, a ne k tomu, co je pod ním. Půl řádku je 0,75rem, protože řádek je 1,5rem — 15 px na desktopu, 13,5 na mobilu. Táž hodnota drží mezeru mezi fotkou a popiskem karty. ⚠️ Odsazení pásu prošlo čtyřmi podobami: 2,5 řádku u krémové plochy, 1,5 u linky nahoře i dole, jeden řádek u linky jen dole, teď půl nahoře a jeden dole. Až se bude měnit zas, zkontrolovat i polohu šipek — připočítávají si horní odsazení. */ --pas-odsazeni-nad: 0.75rem; --pas-odsazeni-pod: var(--zahlavi-odstup); /* Textové odkazy. Převzato z původního webu (schváleno): silné podtržení v průhledné modré, které se při najetí myší schová a nahradí podbarvením — stejný princip jako v navigaci. Původní web měl rgba(60,100,165,·); naše paleta z toho vyšla, takže se používá `--barva-akcent` na 30 % a hover si bere rovnou `--barva-hover-pozadi` a `--barva-hover-text`. */ --barva-podtrzeni: rgba(97, 130, 164, 0.3); --podtrzeni-sila: 4px; --podtrzeni-odstup: 3px; /* Patička. Figma: řádek odkazů 530:2333, písmo 18 px s řádkováním 27 (1,5) a prostrkáním 0,9 px = 0,05em. Tedy o dva body menší než běžný text na desktopu — stejně jako navigace v hlavičce. ⚠️ Vrstva je 507 px široká, ale to je šířka textového POLE; text je v něm na střed a měří ~277 px. Na 507 se tedy nic neladí. Právní text má touž barvu jako běžný text, ale na 50 % — kapátkem ve Figmě #B3B0AD, dopočítáno nad pozadím stránky #B2AFAD. Zapisuje se průhledností, ne novou barvou v paletě: je to táž barva, jen slabší, a nad krémovým pásem by pevný odstín seděl špatně. Oddělovač „•" má ve Figmě z každé strany dvě mezery. V HTML by se slily do jedné, proto se odsazuje stylem: 0,5em je vždycky přesně dvě mezery Google Sans (mezera je čtvrt em), ať je písmo jakkoli velké. */ /* CELÁ patička má jedno písmo — odkazy, právní text i „Osobní údaje" — a je stejné jako řádky u tlačítka: 16 px na mobilu a tabletu, 17 px na desktopu (vybral Jan 2. 10. 2026 ze čtyř ukázek). Je to odkaz na --velikost-popisek, ne opsané číslo, aby se obojí hýbalo spolu. Do té doby měla patička 16 px na mobilu a 18 px od tabletu nahoru (Figma 530:2333) — vědomá odchylka, nevracet. */ --velikost-paticka: var(--velikost-popisek); /* ⚠️ Odvozuje se z --barva-text, ať se při ladění odstínu nezapomene. Dřív to byla ručně opsaná rgba() téhož odstínu — když se text ztmavil, zůstal by právní text v patičce v původní barvě. ⚠️ 60 %, do 2. 10. 2026 to bylo 50 % (Jan: „mírně tmavší"). Kontrast na pozadí stránky 2,82 : 1 — normu 4,5 : 1 NESPLŇUJE a je to vědomé rozhodnutí: ta začíná až na 81 % (#76716E), což už slabý text není. Ostatní stupně: 55 % = 2,54 · 65 % = 3,13 · 70 % = 3,49. */ --barva-text-slaby: color-mix(in srgb, var(--barva-text) 60%, transparent); --paticka-oddelovac-odstup: 0.5em; /* Velká mezera v patičce: odkazy → právní text a „Osobní údaje" → větvička. 24 px na mobilu, 27 px od tabletu nahoru. ⚠️ V PIXELECH, ne v em: dřív to byl jeden řádek patičky (1.5em z 16 a 18 px). Písmo se 2. 10. 2026 zmenšilo, mezery Jan schválil tak, jak byly — z em by teď vyšly 24 / 24 / 25,5. */ --paticka-odstup: 24px; /* Malá mezera: právní text → „Osobní údaje". Půl řádku STRÁNKY (proto rem) — 13,5 px na mobilu a tabletu, 15 px na desktopu. Je to tatáž mezera, kterou web říká „patří k tomu nad sebou": popisek pod fotkou, logo pod citací, řádky u tlačítka. */ --paticka-odstup-maly: 0.75rem; /* Mezera NAD patičkou — samostatná, na mezeře mezi sekcemi nezávislá (Jan, 2. 10. 2026). Čtyři řádky ve všech pásmech: 108 px na mobilu a tabletu, 120 px na desktopu. Dřív tu byla mezera mezi sekcemi (54 / 105 px). Přechod z obsahu do patičky je největší předěl na stránce, proto je větší než kterákoli mezera uvnitř obsahu. */ --paticka-nad: 6rem; /* KONEC PATIČKY (Jan, 2. 10. 2026): od posledního řádku textu ke konci stránky je přesně mezera mezi sekcemi a větvička stojí svým středem v její polovině. Tohle je ta polovina bez půlky větvičky — stejná hodnota jde nad větvičku i pod ni: mobil a tablet (81 − 20) / 2 = 30,5 px → celkem 81 px = 3 řádky desktop (105 − 20) / 2 = 42,5 px → celkem 105 px = 3,5 řádku V rytmu je CELÁ vzdálenost. Dvě mezery kolem větvičky násobkem řádku být nemůžou, protože větvička má 20 px — proto se dopočítávají. Dřív se mezera mezi sekcemi počítala až POD větvičkou a větvička s vlastní mezerou byla navíc (125 / 128 / 152 px). */ --paticka-znacka-odstup: calc((var(--sekce-odstup) - var(--znacka-vyska)) / 2); /* Tlačítko. Figma 526:2158 — rám 401 × 75, text uvnitř 341 × 45 na x = 30, y = 15. Odsazení tedy 30 px do stran a 15 px nahoru a dolů. Zapsané v em, protože se obojí váže k velikosti písma tlačítka (30 px na desktopu): 30 px = 1em, 15 px = 0,5em. Na mobilu, kde má tlačítko 24 px, z toho vyjde 24 a 12 px — velikost se tak škáluje sama a nemusí se psát podruhé. Výška 75 px vychází na 2,5 řádku, tedy přesně na mezeru mezi bloky. */ --tlacitko-odsazeni-x: 1em; --tlacitko-odsazeni-y: 0.5em; --tlacitko-hrana: 2px; /* spodní a pravý okraj, --barva-akcent-hrana */ /* Zvětšení při najetí myší. Původní web měl 1,1, což je na 394px tlačítku skok o 39 px — 1,05 dělá 20 px a působí spíš jako nadechnutí než jako poskočení. */ --tlacitko-zvetseni: 1.05; /* Text v tlačítku je ještě o kus tučnější než Bold — bez nového řezu. Google Sans je variabilní písmo a má kromě váhy i osu GRAD (grade), která zesílí tahy, ALE NEZMĚNÍ ŠÍŘKU TEXTU. Ověřeno v prohlížeči: při GRAD 0, 100 i 200 vyjde tlačítko na 315,1 px. Osa je plynulá, jde nastavit cokoli od −50 do 200. Na 200 (horní mez) bylo písmo příliš syté, proto střední hodnota 100. Váha zůstává 700, což je strop osy wght. */ --tlacitko-grad: 100; /* Tučnému textu stačí menší proklad než běžnému: 0,03em místo 0,05em, tedy 0,9 px místo 1,5 při písmu 30 px. */ --tlacitko-prostrkani: 0.03em; /* Ohlasy v médiích. Figma: textová vrstva 526:2198 je široká 200 px a sousední citace začínají po 280 px, mezera je tedy 80 px. Rámy log (786:9, 786:11, 786:12) jsou 120 × 60 — a přesně tak velké jsou i soubory v images/logos, včetně průhledného vzduchu kolem kresby. Mezera citace → logo: Figma má textová pole natažená na tři řádky a logo hned pod nimi, takže z ní nic použitelného nevyjde. Půl řádku drží svislý rytmus a k tomu se přidá vzduch uvnitř loga. */ --ohlas-sirka: 200px; /* Mezera mezi citacemi je v px, ne v em — vodorovné rozestupy se nemají měnit s velikostí písma a všechny ostatní v projektu jsou taky v px (karty ve foto pásu 12 / 20, dvojice 40). Na mobilu 30 px, aby bylo na první pohled vidět, že vedle stojí další citace. */ --ohlas-mezera: 30px; /* Citace je vždycky vysoká na tři řádky, ať je textu kolik chce — loga pod nimi tak stojí na jedné čáře. Počítá se z řádkování, ne z čísla: 3 × 1,5em = 4,5em, tedy 90 px na desktopu, 81 na mobilu. */ --ohlas-radku: 3; --ohlas-logo-odstup: 0.75rem; /* půl řádku: 15 px desktop, 13,5 mobil */ /* Logo média na mobilu a tabletu. Mobilní Figma (512:1093, 512:1110) každé logo zmenšila trochu jinak — procne na 0,79 a forbes na 0,74 desktopové velikosti. To je nepřesnost ručního kreslení, ne záměr, takže se použije jedno měřítko 0,75 pro všechna: 120 × 60 → 90 × 45. Proti Figmě je procne o 5 % menší a forbes o 1,5 % větší. Tablet bere mobilní velikost (rozhodnuto uživatelem), proto se logo zvětšuje až na desktopovém zlomu 1100, ne na 700 jako zbytek. */ --logo-medium-sirka: 90px; --logo-medium-vyska: 45px; /* Šipky. Ve Figmě nejsou — přebírají se z původního webu, kde byly odladěné. Kolečko 3em, tedy dva řádky textu: 60 px na desktopu, 54 px na tabletu. Drží se tím stejného rytmu jako rozestupy, které jsou všude násobky řádkování. Původní web měl 64 px, ale při jiné velikosti písma — 3em je z toho nejbližší celé číslo v rytmu. Znak uvnitř zůstává v pixelech, a je to záměr: Material Symbols si kolem znaku nechává 3 px, takže 24 px plochy vykreslí znak 18 × 18. Stejné pravidlo jako u ikony accordionu, viz CLAUDE.md. */ --sipka-velikost: 3em; --sipka-ikona: 24px; /* Stín plovoucích prvků — šipky pásů a bublina kalendáře. Je to jediný stín na webu (výjimka z pravidla „žádné stíny": u šipek schválená od začátku, u bubliny Jan 9. 10. 2026). Jeden token, aby se nerozešly. */ --stin-plovouci: 0 1px 12px rgba(0, 0, 0, 0.15); /* Accordion */ --accordion-padding: 10px; /* svisle nad a pod textem */ --accordion-mezera: 8px; /* mezi textem a ikonou */ /* Trojice sloupců. Mezera je dvojnásobek mezery mezi kartami ve foto pásu a je v rem, takže se drží velikosti písma. Na desktopu vyjde 40 px — Figma má 39, rozdíl je nepřesnost kreslení. Šířka sloupce se nezapisuje, počítá se: tři sloupce a dvě mezery mají dohromady vyplnit širokou vrstvu (strop 1600 px), takže jeden sloupec je (1600 − 2 × 40) / 3 = 506,7 px. Figma má 507. Protože se počítá z procent, drží to i když je sloupec sám nebo jsou dva. */ /* Rozestupy jsou násobky řádkování (1,5em), ne náhodná čísla. Mobil (Figma 515:1173–515:1258, řádek 27 px): nadpis → blok 13 px = půl řádku → 0,75em = 13,5 px blok → další nadpis 40 px = 1,5 řádku → 2,25em = 40,5 px ⚠️ Mezera „blok → další nadpis" je od 2. 10. 2026 DVA ŘÁDKY (3em = 54 px), ne 1,5 jako ve Figmě: sloupce pod sebou jsou pro čtenáře totéž co bloky sekce, takže se drží --blok-odstup, který Jan ten den zvětšil. Kdyby se měnila jedna, změnit i druhou. Desktop (Figma 526:2037…, řádek 30 px): nadpis → blok 29 px = jeden řádek → 1,5em = 30 px mezi sloupci 39 px = 2× foto pás → 2em = 40 px */ --accordion-mezera-bloku: 3em; --accordion-nadpis-odstup: 0.75em; /* Ikony. Plocha je čtverec, do kterého se znak sází — glyf je menší, aby kolem něj zbyl vzduch. Rotace při rozbalení se točí kolem středu plochy, ne znaku. */ /* Velikost písma ikony = velikost její plochy. Material Symbols si kolem znaku nechává 3 px z každé strany, takže znak sám vykreslí 18 × 18 — přesně jak ho má Figma (uzel 526:2053). Nesnižovat na 18, to by znak zmenšilo na ~13 px. */ --ikona-stred: 24px; /* plocha ikony v accordionu */ --ikona-hlavicka: 40px; /* křížek v hlavičce, Figma 511:1000 */ /* Kalendář volných termínů (Jan, 9. 10. 2026; podrobně v komponenty.css a v CLAUDE.md). Všechno v em, takže se drží písma těla accordionu — 18 px na desktopu, 16 px na mobilu a tabletu. Buňka je čtverec, takže mezera mezi kolečky vyjde svisle i vodorovně stejně: 2,5em − 2em = 0,5em (9 / 8 px). Měsíc je pak vysoký 18,75em = 12,5 řádku těla (337,5 / 300 px). */ --kalendar-bunka: 2.5em; --kalendar-kolecko: 2em; /* Mezi měsíci 2em (do 9. 10. 2026 3em), takže mezi kolečky sousedních měsíců je 2,5em (45 / 40 px) — na 360px displeji je pak z dalšího měsíce vidět celé kolečko pondělí i „PO". ⚠️ 2,5em je PŘESNĚ ŠÍŘKA JEDNÉ BUŇKY, mezera je stejně široká jako prázdný den; Jan o tom ví. */ --kalendar-mezera-mesicu: 2em; /* Vzduch kolem kolečka v buňce (čtvrt em). O tolik se pás posouvá, aby kolečka pondělí stála na hraně sloupce… */ --kalendar-vzduch: calc((var(--kalendar-bunka) - var(--kalendar-kolecko)) / 2); /* …a pak ještě o tohle, aby na ní stálo PÍSMO „PO", ne kolečko. Měřeno na kresbě písmen: „P" leželo o 0,404em (desktop) a 0,412em (mobil) vpravo od „V" ve „Volné termíny". Jan pak pás vrátil o 2 px doprava, aby kolečka tolik nevyčnívala (5,4 / 4,6 px) — optická korekce v pixelech. Při změně písma, buňky nebo zkratek dnů přeměřit. */ --kalendar-zarovnani: calc(0.41em - 2px); /* Slabá barva přeškrtnutých dnů: text na 50 %, NEPRŮHLEDNĚ namíchaný s pozadím (#A8A4A2, 2,30 : 1). S průhlednou by se v místech, kde linka přetíná číslo, sečetly dvě vrstvy do tmavších teček. */ --kalendar-preskrtnute: color-mix(in srgb, var(--barva-text) 50%, var(--barva-pozadi)); /* Hlavička — odvozeno z Figmy, uzel 526:1792 (desktop). Navigace je ve Figmě JEDEN textový řádek, kde jsou položky odražené běhy mezer (9 mezer mezi položkami, 27 uprostřed kolem loga). Počítat ty mezery ale nejde — Figma je vykresluje o něco užší než prohlížeč a vyšlo by to o 24 px širší. Závazná je proto celková šířka vrstvy, kterou Figma udává: 815 px. Z ní a ze šířky slov (449,4 px, v obou prostředích stejná) vychází 815 = 449,4 + 8 × mezera. Kontrola: 449,4 + 5 × 45,7 + 60 (logo) + 2 × 38,5 = 815,0 ✓ */ --hlavicka-mezera: 2.54em; /* mezi položkami — 45,7 px */ --hlavicka-mezera-logo: 2.14em; /* od krajní položky k logu — 38,5 px */ /* Logo. Figma ho má na mobilu MENŠÍ než na desktopu (uzel 510:979 proti 526:1785): 50 × 75 místo 60 × 90. Poměr 2:3 zůstává, takže výšku dopočítá prohlížeč sám a s ní i výšku hlavičky. */ --logo-sirka: 50px; /* Odsazení loga zleva na mobilu. Dopočítá se z kotvy, aby střed loga seděl přesně na ní. Figma má logo na 72, kotva dá na 390px mobilu 75,5 — rozdíl 3,5 px, tedy v mezích ručního kreslení. Dřív to tu bylo napsané natvrdo jako 72 px. */ --logo-odsazeni: calc(var(--kotva) - var(--logo-sirka) / 2); /* Mezera mezi spodkem loga a úvodním nadpisem. Figma: mobil 9 px (75 → 84), desktop 13 px (90 → 103). */ --nadpis-odstup: 9px; } /* --- Desktop (nad 1100 px) ----------------------------------------------- Zlom je dán střední vrstvou: 1000 + 2 × 40 (okraje) = 1080, a široká vrstva musí zůstat ŠIRŠÍ než střední, jinak by hero fotka byla užší než dvojice pod ní. Na 1100 px vyjde široká na 1020 proti střední 1000, tedy o 20 px — těsné, ale platné. Níž už to neplatí. Zlom je nastavený tak, aby chytil iPady na šířku: mini 1133, 10. generace a Air 1180, Pro 11" 1194, Pro 13" 1366. Starší 9,7" a 10,2" iPady hlásí 1024 a ty se sem nevejdou — na ně by musela střední vrstva pod 944. ⚠️ NEDOŘEŠENO: pásmo 920–1100 px. Uživatel tam chce zachovat nějakou podobu desktopového pohledu, ale zatím není rozhodnuto jakou. Do té doby tam platí mobilní hodnoty — je to zástupné řešení, ne finální stav. Až se rozhodne, přibude sem druhý @media blok. Protože jsou šířky tokeny, půjde o doladění, ne o přestavbu komponent. */ /* --- Tablet (nad 700 px) -------------------------------------------------- Zlom leží v mezeře mezi největším telefonem na šířku (iPhone SE, 667) a nejmenším tabletem na výšku (iPad mini, 744), takže nerozdělí žádnou skupinu zařízení vejpůl. Mění se tu jediná věc: hero fotka přejde z výšky na šířku. Vysoká fotka 3:4 začíná nad 600 px působit nepřiměřeně a na telefonech na šířku (852, 932) by byla vyšší než celý displej. ⚠️ Zlom v u musí sedět na tenhle. */ @media (min-width: 700px) { :root { --pomer-hero: 16 / 9; /* Od tabletu nahoru se sloupec přestane posouvat s fotkou a zůstane na spodní hranici. Hero fotka je tu na šířku, nadpisy sekcí jdou na střed stránky a posouvat kvůli fotkám jen logo by nedávalo smysl. */ --kotva: var(--kotva-min); /* Velká mezera v patičce roste s pásmem: 24 → 27 px. (Písmo patičky tu už vlastní řádek nemá — je to odkaz na --velikost-popisek.) */ --paticka-odstup: 27px; /* Perex na tabletu. O 80 px užší než na desktopu, aby se i s okraji vešel do nejužšího tabletového okna: 600 + 2 × 20 = 640 ze 700. Zalomení se tím proti desktopu posune, ale zůstane pevné. */ --obsah-uzky: 600px; /* Karta foto pásu mezi mobilem (250) a desktopem (400). Číslo není vymyšlené, vychází ze dvou rozměrů, které už na tabletu platí: 1. ŠÍŘKA — dvě karty s mezerou přesně vyplní pás dvojic: 324 + 12 + 324 = 660 = --dvojice-pas. Na 700px okně tedy pás končí přesně na okraji: 20 + 660 + 20 = 700. Karty a dvojice tak stojí na stejné mřížce. 2. VÝŠKA — 324 × 1,25 (poměr 4:5) = 405 px, a to je přesně 15 řádků: řádek má na tabletu 18 × 1,5 = 27 px. Je to jediná velikost mezi 250 a 400, kde vyjde obojí naráz — výška je násobek řádku jen tehdy, když je dělitelná pěti i sedmadvaceti. Mezera zůstává mobilních 12 px, jinak by první podmínka nevyšla. */ --karta-sirka: 324px; } } /* --- Hlavička se přepíná na 901 px --------------------------------------- Zbytek webu se láme až na 1100, ale hlavička dřív — níž se sedm položek navigace vedle loga nevejde. Proto má vlastní blok. */ @media (min-width: 901px) { :root { --logo-sirka: 60px; /* Figma desktop: 60 × 90 */ --logo-odsazeni: 0px; /* na desktopu je logo na středu okna */ } } @media (min-width: 1100px) { :root { --velikost-zaklad: 20px; --velikost-perex: 30px; --velikost-popisek: 17px; --velikost-btn: 30px; /* Rozbalený text accordionu je o dva body pod běžným textem, stejně jako patička: 16 na mobilu a tabletu, 18 na desktopu. Není to nová velikost na webu — 18 px má i navigace a patička, 16 px popisek fotky. Zlom je na 1100 spolu se základním písmem, takže rozestup dvou bodů platí v obou pásmech. Proč vůbec: řádek accordionu zůstává na 20 px a je to nadpis toho, co se rozbalí. Menší tělo ten vztah ukáže a zároveň zkrátí bloky, které jsou nejdelší na stránce. */ --velikost-accordion: 18px; --nadpis-odstup: 13px; --accordion-mezera-bloku: 2em; --accordion-nadpis-odstup: 1.5em; --dvojice-mezera: 40px; /* 2,5 řádku = 75 px. Z uzlů Figmy vychází mezera mezi dvojicemi 79 px, uživatel ji odečítá kolem 70 — 75 leží mezi tím a drží půlřádkový rytmus, na kterém stojí i accordiony. Stačí změnit tohle jedno číslo a posunou se všechny mezery mezi bloky i odsazení uvnitř foto pásu. */ --blok-odstup: 3.75rem; --perex-odstup: 2.25rem; /* 1,5 řádku = 45 px */ --sekce-odstup: 5.25rem; /* 3,5 řádku = 105 px */ /* Okraj je MINIMÁLNÍ, ne pevný. Široká vrstva má strop 1600 px, takže do šířky okna 1680 se drží 40 px a obsah vyplní skoro celé okno; nad 1680 se strop uplatní a okraje samy povyrostou (na 1800 px vyjdou na 100 px z každé strany). Schválně v px, ne v em: --obsah-siroky se z tohohle počítá a používá se na prvcích, které můžou mít různou velikost písma. V em by se výsledek na každém z nich lišil. */ --okraj: 40px; /* Široká vrstva je pružná se stropem 1600. Střední a úzká jsou pevné a s šířkou okna se nemění. */ --obsah-siroky: min(1600px, calc(100vw - 2 * var(--okraj))); --obsah-stredni: 1000px; /* Perex. Figma kreslí 662 px; 680 je zaokrouhlení nahoru, aby řádek pobral o slovo víc. Pevná šířka je tu záměr — perex se zalamuje na všech oknech stejně, takže se dá zalomení ohlídat. */ --obsah-uzky: 680px; /* Řádek je tu 30 px (20 × 1,5): 408 × 1,25 = 510 = přesně 17 řádků. Figma kreslila 400 × 500, což je 16,67 řádku. Posun o 8 px. */ --karta-sirka: 408px; --karta-mezera: 20px; /* Figma: citace začínají po 280 px při šířce 200, mezera je tedy 80. */ --ohlas-mezera: 80px; /* ⚠️ ŠIRŠÍ NEŽ VE FIGMĚ, a je to změřené, ne odhad. Citace se ořezává na tři řádky (viz --ohlas-radku), aby loga pod nimi stála na jedné čáře. Při 200 px se ale dvě citace z druhého bloku na tři řádky nevešly a usekly se trojtečkou: „Rekonstrukce, která citlivě…" potřebuje 230 px „Kamenné zdi, klenuté sklepy…" potřebuje 220 px Ani figmových 220 tedy nestačí — ve Figmě to nevadí, protože tam textové pole místo ořezu jen povyroste. Na 230 px vyjde všech šest citací na PŘESNĚ tři řádky: nic se neusekne a žádná nezůstane kratší. Nad 230 už se nejkratší citace smrskne na dva řádky a blok by se rozházel. Mobil a tablet zůstávají na 200 — tam je písmo o dva body menší a všech šest se vejde. Ověřeno v prohlížeči. */ --ohlas-sirka: 230px; /* Desktopová Figma: rámy log 786:9 / 786:11 / 786:12 jsou 120 × 60, přesně jako soubory v images/logos. */ --logo-medium-sirka: 120px; --logo-medium-vyska: 60px; } }