/* ============================================================================ novy-2026-objednavka.css Vrstva vzhledu nad dnesnim objednavkovym formularem fox2 na /objednavka. CO TO JE Cista CSS vrstva. Nepresouva uzly, nemeni pole, nic neodstranuje. Kresli ctyri obrazovky, krok 0 s PSC, krokovnik, souhrn vpravo a mobilni listu podle Figmy 15 az 18 (desktop) a M8, M8b, M9, M10 (mobil 390 px). JAK SE NACITA V hlavicce sablony, az ZA "novy-2026.css" z balicku 25 (odtud jdou tokeny --zs-...) a za "content2024.css" a "template2024.css" enginu. Jen na strance objednavky. V nahledu (nahled/objednavka.html) se misto novy-2026.css linkuje primo podklady/zs26-tokeny.css. ZAPINAC Vsechny selektory zacinaji "body.zs26-obj". Tridu "zs26-obj" a atribut "data-zs26-krok" pridava JS (js/zs26-objednavka.js) na . Kdyz JS nebezi nebo spadne, z tohoto souboru se neuplatni nic a stranka vypada jako dnes. To je zamer, ne opomenuti. CO OD JS OCEKAVAM (kontrakt, podklady/KONTRAKT-vrstvy.md) - body.zs26-obj zapinac - body[data-zs26-krok="0..4"] aktualni obrazovka, ATRIBUT NA BODY - body.zs26-obj--fox2 vrstva ridi zalozku fox2 - body.zs26-obj--lead uzivatel si vyzadal lead formular fox1 (alias body.zs26-obj--fox1 je take osetren) - body.zs26-obj--vice rozbalena dieta kroku 4 - #fox2 > [data-zs26-obrazovka="0..4"] znacka na primych potomcich #fox2, "0" znamena "vzdy viditelne" (skryte inputy) - [data-zs26-volitelne="1"] volitelne radky kroku 4 - section.zs26-obj-psc krok 0, doporucuji ho vlozit jako PRVNI primy potomek #fox2 (varianta z KONTRAKTu). Varianta "tesne pred #fox2" je taky osetrena, viz sekce 4. - .zs26-obj-rozvrzeni trida na spolecnem rodici #fox2 a souhrnu, tedy na div.formular_objednavka (obal fox2). Krokovnik patri dovnitr nej, jako prvni dite. - .zs26-obj-akce__cena a .zs26-obj-akce__cena-popis dva prvky navic proti KONTRAKTu, potrebuje je mobilni lista z M9 a M10. Kdyz je JS nevytvori, lista jen ukaze tlacitka a nic se nerozbije. KTERE SELEKTORY ENGINU PREBIJIM A PROC 1. .obsahy_prepinaci > * (template2024.css:1114, 1115) Viditelnost zalozek. Prebijim, aby fox2 byl videt hned a fox1 nebliknul. Specificita body.zs26-obj--fox2 ... > :nth-child(N) = (0,3,0) proti (0,2,0), tedy bez !important. 2. .zal > .zalozkyprepinac_klik (template2024.css:1118, 1139) Pruh zalozek. Krokovnik ho nahrazuje, tak ho schovavam. POZOR: treti zalozka jsou darkove poukazy. Kdyz vrstva bezi, nejsou prokliknutelne. JS proto nesmi pridat zs26-obj--fox2, kdyz je na body trida ZalCustom2. Zapsano i v css/POZNAMKY.md. 3. .cenik_nabidka .jidelnicek (template2024.css:648, 652, 685, 688) Karty programu, kalorickych rad a delek. Menim jen barvy, ramecek a radius. PREPSANO 25. 8.: karusel se v kroku 2 meni na mrizku, viz blok U4. Rozmery karet se timto meni, ale position: relative na karte zustava, jinak se rozpadne jeji obsah (FceRolujParent). U #nabidkaprogram a #nabidkaDnyDelka rozmery menim, tam karusel neni. 4. #nabidka_kodu .klikblok (template2024.css:1215, 1218) Karty kombinace chodu. Prebijim id selektorem uvnitr body.zs26-obj, tedy (1,2,1) proti (1,1,0). 5. .formular_objednavka h2 a h2 .c (content2024.css:1150, 1149) Nadpisy bloku. Cislo v .c je po sbaleni do ctyr obrazovek spatne, cislo nese krokovnik, .c tedy skryvam. 6. #respofix (template2024.css:1591, 1592, 2030) Dnesni mobilni lista. Nahrazuje ji .zs26-obj-akce. Selektor body.zs26-obj[data-zs26-krok] #respofix = (1,3,1), aby prebil i .body_v2.StrObjednavka.zal2 #respofix = (1,3,0). 7. #objednavkaPrehled (objednavka-2026-08-21.html:1736) Dnesni sidebar se souhrnem. Nahrazuje ho aside.zs26-obj-souhrn. Skryvam jen tenhle div, ne cely #sidebar, aby zustal modul m147. 8. input, textarea, button (content2024.css:1004, 1015, 1023) Tyhle zakladni styly maji !important (padding, line-height, box-shadow, border u tlacitek). Vlastni pole a tlacitka vrstvy je jinak neprepisou. !important pouzivam jen na vlastnich prvcich s prefixem .zs26-obj-, a jen na trech mistech: sekce 0 (pole a tlacitka vrstvy), tlacitko .zs26-obj-vice v sekci 9 a jeden margin-bottom v sekci 11b. Do poli a tlacitek enginu nesaham vubec. CO JE NEJISTE - Cislovani kroku. KONTRAKT rika data-zs26-krok="0..4" a PSC = 0, NAVRH (c) mapuje bloky enginu na obrazovky 2, 3, 4. Pravidla proto pokryvaji vsech pet hodnot 0 az 4 a plati jen jedno: pri kroku N je videt obrazovka N. Jestli JS oznaci PSC jako krok 1 misto 0, staci v sekci 5 pridat [data-zs26-krok="1"] k pravidlu viditelnosti PSC. - Sirka sloupce 360 px a mezera 40 px jsou z Figmy 15 az 18 (obsah 1180 px, levy sloupec 780 px). Pokud je obsahovy kontejner sablony uzsi, souhrn se pod 1024 px stejne sklopi pod formular. - Aktivni ramecek karty ma ve Figme barvu odkazu, na to token neni. Beru --zs-barva-ramecek-doporucena, coz je nejblizsi semanticky token a odpovida zadani "aktivni ramecek tmave zeleny". - Sticky souhrn: aside dostava grid-row 2 / span 20, aby mel kam lepit. Kdyby JS krokovnik do .zs26-obj-rozvrzeni nedal, posune se souhrn o radek. - Inline kalendar z Figmy 17 a preskladani karet z Figmy 16 (aktivni karta nahore na mobilu) v CSS nejdou, viz css/POZNAMKY.md. ============================================================================ */ /* --------------------------------------------------------------------------- 0. Zaklad vrstvy a vlastni formularove prvky Hlavni misto s !important. Duvod je u kazdeho pravidla. --------------------------------------------------------------------------- */ body.zs26-obj .zs26-obj-rozvrzeni, body.zs26-obj .zs26-obj-psc, body.zs26-obj .zs26-obj-souhrn, body.zs26-obj .zs26-obj-akce, body.zs26-obj .zs26-obj-krokovnik, body.zs26-obj .zs26-obj-hlaska { font-family: var(--zs-pismo); color: var(--zs-barva-text-zakladni); box-sizing: border-box; } /* Dedeni box-sizing uz resi sablona (template2024.css:4 a 8 az 10, html je border-box a * dedi), tady se nic dalsiho nastavovat nemusi. */ /* Vlastni pole vrstvy. content2024.css:1004 dava kazdemu input padding 28px 31px !important, line-height 16px !important a margin 0 !important. Bez !important by pole vrstvy melo 108 px na vysku. */ body.zs26-obj .zs26-obj-pole, body.zs26-obj .zs26-obj-psc__pole { width: 100%; max-width: 100%; height: var(--zs-vyska-pole); padding: 0 var(--zs-odstup-base) !important; line-height: var(--zs-vyska-pole) !important; font-size: 16px !important; font-family: var(--zs-pismo) !important; color: var(--zs-barva-text-zakladni); background: var(--zs-barva-pozadi-karta); border: 1px solid var(--zs-barva-ramecek-pole); border-radius: var(--zs-radius-male); box-shadow: none !important; } /* content2024.css:1023 dava kazdemu :focus box-shadow !important. Tokeny stiny nemaji, misto stinu je fokusovy outline. */ body.zs26-obj .zs26-obj-pole:focus, body.zs26-obj .zs26-obj-psc__pole:focus { box-shadow: none !important; border-color: var(--zs-barva-ramecek-doporucena) !important; outline: 2px solid var(--zs-barva-stav-fokus); outline-offset: 2px; } /* Vlastni tlacitka vrstvy. content2024.css:1015 dava kazdemu

N.Text

Celodenni