# Design system ZP Mikulov Tento soubor popisuje design system ZP Mikulov. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly. Zemní a výkopové práce, podvrty, demolice a nové povrchy pro stavební firmy, stavitele a obce do 60 km od Mikulova. Písmo: Inter. Živý web: https://www.romankacerek.cz/dev/zpmikulov/. Katalog: https://www.romankacerek.cz/dev/designsystem/zpmikulov/. Sestaveno 11. 11. 2026. ## Soubory Načti je v tomto pořadí: - https://www.romankacerek.cz/dev/designsystem/zpmikulov/site/assets/css/web.css - https://www.romankacerek.cz/dev/designsystem/zpmikulov/site/assets/js/web.js Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/zpmikulov/site/. ## Pravidla ### Barvy - Značka je žlutá `--zluta` #fdc331 a černá `--ink` #0e0e0e. Žlutá je plná plocha (`sec--zluta`, štítek `stitek`, čtverec v ikoně), nikdy text na bílé. - Podklad stránky je bílý, střídavé sekce mají `--bez` #efebe5. Dvě béžové sekce po sobě se střídají s bílou. - Tělo textu je `--text` #161616, doplňky a popisky `--seda` #5f5d58. Linky jsou `--line` #cfc8bd, 1 px. - Na černé ploše (`bunka--cerna`) je text bílý, popisky `rgba(255,255,255,.6)`. ### Písmo - Jediná rodina Inter, váhy 400 až 900. Tělo 18 px (17 px na telefonu), řádkování 1.55. - Nadpisy `h1`, `h2`, `h3` mají váhu 500, řádkování 1.02 a těsné prokládání -.045em. Velikosti plynule přes `clamp()`. - Popisky a štítky jsou `mal`: .78rem, váha 500, verzálky, prokládání .06em. - Úvodní věty používají `text-velky` nebo `--lead`. ### Rozvržení - Obsah je v `w` s maximální šířkou `--max` 1720 px a bočním okrajem `--side`. Sekce `sec` mají svislý odstup `clamp(70px,7vw,130px)`. - Hlavička sekce `hlava` je dvousloupec: nadpis se šipkou vlevo, perex vpravo. Pod ni jdou karty, služby nebo řádky. - Dělení obstarávají 1px linky `--line`, ne stíny. Sekce `sec--ram` je orámovaná linkou nahoře a dole. - Úvod `mriz hero` je dvousloupec text a fotka, ve fotce je seříznutý roh `vysek`. ### Tvary - Žádný rádius, vše je hranaté. Výjimka je seříznutý pravý dolní roh `vysek`, `karta` a `sl__tab` přes `clip-path`. - Pole formuláře mají 1px rámeček #b9b2a7 a výšku 52 px, po zaostření rámeček `--ink`. - Stíny se nepoužívají. ### Obrázky - Fotky stavebních strojů a prací, vždy `foto` s `object-fit:cover`, poměr 4:3 nebo 3:2. - Ikony jsou lineární, 2 px černá linka a žlutý čtverec 22 px v levém horním rohu. ### Tlačítka - Hlavní tlačítko `btn` je černé, hranaté, výška 52 px, verzálky váhy 600. Při najetí se vyprázdní do obrysu. - Vedle tlačítka stojí telefon `tel` jako podtržený text, ne druhé tlačítko. - V žluté sekci s formulářem je tlačítko `btn` přes celou šířku. ### Jazyk - Texty jsou česky, přímé a věcné, ceny v jednotkách (Kč/bm, Kč/m³, Kč/m²). Za jednopísmenné předložky patří nezlomitelná mezera. ## Barvy | Název | Hodnota | V tmavém tématu | Použití | | --- | --- | --- | --- | | --zluta | #fdc331 | | Žlutá sekce, štítky, čtverec v ikoně, zaškrtnutí. | | --ink | #0e0e0e | | Tlačítka, nadpisy, černé plochy, rámečky. | | --bez | #efebe5 | | Podklad sekcí sec--bez a karet. | | bílá | #ffffff | | Podklad stránky, hlavičky, patičky a karet. | | --seda | #5f5d58 | | Popisky, doplňkové texty, patička. | | --text | #161616 | | Tělo textu. | | --tan | #d9cdbf | | Podklad fotky před načtením. | | --line | #cfc8bd | | Tenké 1px linky a dělení. | | #b9b2a7 | #b9b2a7 | | Rámeček polí a zaškrtávátek. | | #8d877d | #8d877d | | Zástupný text v polích. | | chyba | #b3261e | | Text chyby pole a rámeček neplatného pole. | | #fdecec | #fdecec | | Pozadí chyby formuláře. | | #8a1c1c | #8a1c1c | | Text chyby formuláře. | | #e7e3dc | #e7e3dc | | Kraje na mapce v patičce. | | překryv | rgba(0,0,0,.55) | | Překryv za mobilním menu. | ## Typografie | Styl | Hodnoty | Použití | | --- | --- | --- | | H1 | viz CSS | Nadpis v úvodu | | H2 | viz CSS | Nadpis sekce s šipkou | | H3 služby | viz CSS | Karta služby | | Krok | viz CSS | Nadpis kroku | | Perex | viz CSS | Úvodní věta v úvodu | | Popisek | viz CSS | Verzálkový štítek | | Telefon | viz CSS | Velké telefonní číslo | | Text | viz CSS | Perex pod nadpisem sekce | ## Mezery a šířky | Název | Hodnota | Použití | | --- | --- | --- | | --side | clamp(20px,2.8vw,48px) | Boční okraj stránky. | | --pad | clamp(24px,3vw,56px) | Vnitřní odsazení buněk a menu. | | --max | 1720px | Maximální šířka obsahu. | | --navh | 84px | Výška hlavičky, 66 px do 900 px šířky. | | --v | clamp(28px,3vw,52px) | Velikost seříznutého rohu. | | --lead | clamp(1.15rem,1.25vw,1.45rem) | Velikost úvodního textu. | ## Rádiusy | Název | Hodnota | Použití | | --- | --- | --- | | žádný | 0 | Tlačítka, pole i karty jsou hranaté. | | výsek | clip-path 26px | Seříznutý pravý dolní roh karet a fotek, 8 px u štítku fotky. | ## Komponenty: Navigace ### Hlavička Pevná hlavička s logem, odkazy, telefonem a tlačítkem poptávky. Třídy: `nav`, `nav__in`, `nav__links`, `nav__right`, `nav__tel`. ```html
+420 792 226 981 Nezávazná poptávka
``` ### Rozbalené menu služeb Mega menu pod hlavičkou: černá buňka, seznam služeb a karta hlavní služby. Třídy: `nav__dd`, `mega`, `mega__in`, `mega__list`, `mega__karta`. ```html
``` ### Mobilní menu Boční panel s odkazy a telefonem. Třídy: `mob-menu`, `mob-menu__h`, `mob-menu__sub`, `mob-menu__x`. ```html ``` ### Patička Čtyři sloupce: logo, služby, kontakt a mapka s oblastí práce, dole právní řádek. Třídy: `foot`, `foot__mriz`, `foot__b`, `foot__h`, `mapka`, `foot__dole`. ```html ``` ## Komponenty: Úvod ### Úvod s fotkou Úvod stránky: textová buňka vlevo, fotka se seříznutým rohem vpravo. Třídy: `mriz hero`, `hero__tx`, `bunka--foto`, `hero__foto`, `vysek`, `text-velky`. ```html

Zemní práce a dláždění · Mikulov

Zemní a výkopové práce od jedné firmy z Mikulova

Výkopy základů, přípojek a kabelových rýh, podvrty pod silnicí, demolice i odvoz kontejnery. Po výkopu položíme dlažbu chodníku, vjezdu nebo plochy.

Nezávazná poptávka+420 792 226 981
Žlutý pásový bagr nakládá zeminu na sklápěcí vůzŽlutý bagr na hromadě štěrku a zeminyBagr s demoličním drapákem bourá starý důmNa jedné traseVýkop, podvrt i nový povrch od jedné firmyNaše služby
``` ### Úvod podstránky Stejné úvod s drobečkovou navigací místo štítku. Třídy: `hero`, `crumbs`, `crumbs__sep`. ```html

Zemní a výkopové práce pro stavby na jižní Moravě

Vykopeme základy, přípojky, jámy i kabelové rýhy. Zeminu odvezeme kontejnery, a když je po výkopu potřeba dlažba, položíme ji také.

Nezávazná poptávka+420 792 226 981
Rameno a lžíce menšího bagru u výkopu pro základy
``` ## Komponenty: Prvky ### Tlačítka a štítky Černé hranaté tlačítko, telefon jako odkaz a žlutý štítek. Třídy: `btns`, `btn`, `tel`, `stitek mal`, `odkaz`. ```html
Nezávazná poptávka+420 792 226 981Textový odkaz

Hlavní služba

``` ### Štítky služeb Řada obrysových štítků s odkazy, aktuální je šedý. Třída: `stitky`. ```html
``` ## Komponenty: Sekce ### Mřížka služeb Nadpis s perexem a čtyři sloupce fotek s karty služeb. Třídy: `hlava`, `sluzby`, `sl`, `sl__obr`, `sl__tab`, `vysek`. ```html

Služby od výkopu po nový povrch.

Zemní a výkopové práce jsou naše hlavní služba. Děláme ale i podvrty, demolice, odvoz kontejnery a dlažbu.

Bagr na stavbě s hlubokou jámou pro základy01 Zemní práce

Zemní a výkopové práce

Základy, přípojky, kabelové rýhy, jámy a jímky. Skrývka, zásyp a hutnění.

Více o výkopech Svazky barevných chrániček na hraně výkopu02 Podvrty

Řízené podvrty

Chránička pod silnicí, chodníkem nebo vjezdem bez rozkopání povrchu.

Poptat podvrt Pokládka betonové zámkové dlažby03 Dláždění

Dláždění chodníků a ploch

Předláždění chodníků, vjezdy a zpevněné plochy včetně podkladu a obrubníků.

Poptat dláždění Traktorbagr odklízí suť z cihel a tvárnic04 Demolice

Demolice

Demolice staveb a bourací práce před výkopem a novou dlažbou.

Poptat demolici Velkoobjemový kontejner na suť a odpad05 Kontejnery

Kontejnerová přeprava

Odvoz zeminy, suti a odpadu ze stavby kontejnery.

Poptat kontejner Grejdr upravuje terén pod modrou oblohou06 Terén

Terénní úpravy

Skrývka ornice, srovnání terénu, svahy a navážka zeminy.

Poptat terénní úpravy Zedník zdí obvodovou zeď z keramických tvárnic07 Beton a zdění

Zednické a betonářské práce

Betonování základů a zdění, které navazují na výkop.

Poptat zednické práce Vyklizený nábytek připravený k odvozu před domem08 Vyklízení

Vyklízení budov a hal

Vyklidíme budovy a haly před rekonstrukcí nebo demolicí a odpad odvezeme.

Poptat vyklízení
``` ### Karty výhod Tři sloupce karet s ikonou, štítkem a větou. Třídy: `karty`, `karta`, `ik`, `mal`. ```html

Pro stavební firmy, stavitele sítí a obce.

Pro ty, kdo potřebují výkop hotový v termínu a povrch po něm bez další firmy.

Jedna firma na trase

Výkop, podvrt i dlažba. Chodník po výkopu nečeká na další firmu.

Cena v jednotkách

Nabídku dostanete v Kč/bm, Kč/m³ nebo Kč/m², ne v hodinách stroje.

Termín v nabídce

Termín nástupu napíšeme do nabídky. Bereme jen tolik zakázek, kolik zvládneme.

Odvoz kontejnery

Zeminu, suť a odpad ze stavby odvezeme sami.

Podvrt bez rozkopání

Pod silnicí, chodníkem nebo vjezdem protáhneme chráničku řízeným podvrtem.

Přenesená daňová povinnost

Jsme plátci DPH a stavební práce fakturujeme v přenesené daňové povinnosti.

``` ### Karty s odkazem Karty na bílém podkladu s linkou a odkazem dole. Třídy: `karty`, `karta`, `odkaz mal`. ```html

Stroje máte na jiné stavbě

Výkop základů a přípojek uděláme jako subdodávku. Termín nástupu napíšeme do nabídky.

Výkopy základů

Chodník čeká na druhou firmu

Kabelovou rýhu vykopeme, pod silnicí podvrtáme a chodník po ní znovu vydláždíme.

Kabelové rýhy

Stavba potřebuje přípojky

Vykopeme rýhy pro přípojky vody, kanalizace, plynu a elektřiny od řadu až k objektu.

Výkopy přípojek

Jáma pro jímku nebo šachtu

Vykopeme jámu podle rozměrů z projektu a po osazení ji zasypeme a zhutníme.

Jámy a jímky

Zeminu nemáte kam dát

Zeminu a suť ze stavby odvezeme kontejnery.

Odvoz zeminy

Nevíte, kolik to bude stát

Napište, co a kde chystáte. Cenu dostanete v Kč/bm nebo Kč/m³ s termínem nástupu.

Nezávazná poptávka
``` ### Citát s fotkou Fotka vedle citátu, odstavce a tlačítka. Třídy: `pas`, `pas__obr`, `blockquote`, `mt`. ```html

Výkop, podvrt i povrch na jedné trase.

Stavba nečeká na další dodavatele a chodník nezůstane rozkopaný.

Výkopová rýha s položenými kabelovými chráničkami
„Kabelovou rýhu vykopeme, pod silnicí uděláme podvrt a chodník po ní znovu vydláždíme.“

Rýhu i podvrt uděláme sami, zeminu a suť odvezeme kontejnery a povrch po výkopu položíme znovu. S jednou firmou místo dvou.

Nezávazná poptávka
``` ### Kroky Číslovaný seznam kroků oddělený linkami. Třídy: `radky`, `mal`, `h3`. ```html

Zavoláte, přijedeme, vykopeme.

Nabídku dostanete písemně v Kč/bm, Kč/m³ nebo Kč/m² s termínem nástupu.

  1. Krok 01

    Zavolejte nebo napište

    Řekněte nám, co a kde chystáte. Stačí rozměry, délka trasy nebo plán stavby.

  2. Krok 02

    Obhlídka a písemná nabídka

    Podíváme se na místo, přístup pro stroj a sítě. Cenu napíšeme v jednotkách, ne v hodinách stroje.

  3. Krok 03

    Výkop, odvoz a nový povrch

    Vykopeme, podvrtáme, odvezeme, a když to zakázka vyžaduje, položíme po výkopu i nový povrch.

``` ### Posuvník fotek Vodorovně posuvný pás karet služeb s tlačítky a počítadlem. Třídy: `posun`, `posun__pas`, `posun__ovl`, `posun__btn`, `posun__cislo`. ```html
Minibagr ve stavební jámě s výztuží pro základy01 Základy

Základy, jámy a jímky

Základové pasy a patky pro domy, haly i přístavby podle projektové dokumentace. Jámy pro jímky, šachty a nádrže.

Výkopová rýha s položenými kabelovými chráničkami02 Rýhy

Přípojky a kabelové rýhy

Rýhy pro přípojky vody, kanalizace, plynu a elektřiny a pro kabely elektřiny a optiky. Pod silnicí nebo vjezdem uděláme podvrt.

Zhutňování podloží vibrační deskou03 Zásyp

Skrývka, zásyp a hutnění

Skrývka ornice před stavbou, zásyp výkopů a hutnění po vrstvách.

Dokončování nového chodníku ze zámkové dlažby s obrubníky04 Povrch

Odvoz a nový povrch

Zeminu a suť odvezeme kontejnery. Chodník, vjezd nebo plochu po výkopu položíme znovu: podklad, obrubníky i dlažbu.

1 / 2
``` ### Kde pracujeme Orámovaný tři sloupce: text s telefonem, fotka a rozbalovací seznam okresů. Třídy: `sec--ram`, `tri`, `tri__tx`, `tri__foto`, `akord`, `akord__ik`, `akord__sip`. ```html

Kde pracujeme

Pracujeme do 60 km
od Mikulova

Jezdíme na Břeclavsko, Znojemsko, Hodonínsko, do okresu Brno-venkov a do Brna. Je vaše stavba kousek za hranicí okruhu? Zavolejte a domluvíme se.

+420 792 226 981
Grejdr upravuje terén pod modrou oblohou

Břeclavsko

Domovský okres

Mikulov, Valtice, Lednice, Břeclav, Hustopeče a obce kolem. Tady jsme na stavbě nejrychleji.

Brno-venkov a Brno

Do 50 km

Pohořelice, Židlochovice, obce na jih od Brna i Brno samotné.

Znojemsko

Do 60 km

Znojmo a obce mezi Znojmem a Mikulovem.

Hodonínsko

Do 60 km

Hodonín a obce na cestě od Břeclavi.

``` ### Časté dotazy Vlevo nadpis s telefonem, vpravo rozbalovací otázky s plusem. Třídy: `dva`, `dva__l`, `dva__r`, `faq2`, `faq2__ic`, `faq2__a`. ```html

Časté dotazy

Na co se nás ptáte

Nenašli jste odpověď? Zavolejte nebo napište, co a kde chystáte.

+420 792 226 981

Kolik stojí výkop nebo dlažba?

Cenu napíšeme do nabídky podle rozměrů a místa: výkopy v Kč/bm nebo Kč/m³, dlažbu v Kč/m². Orientační ceny zveřejníme podle hotových zakázek.

Uděláte i podvrt pod silnicí?

Ano. Řízeným podvrtem protáhneme chráničku pod silnicí, chodníkem nebo vjezdem, aniž bychom povrch rozkopali.

Odvezete zeminu a suť?

Ano. Zeminu, suť a odpad ze stavby odvezeme kontejnery.

Fakturujete v přenesené daňové povinnosti?

Ano. Jsme plátci DPH (DIČ CZ04580273) a stavební práce pro plátce DPH fakturujeme v přenesené daňové povinnosti.

Kdy můžete nastoupit?

Termín nástupu napíšeme do nabídky. Bereme jen tolik zakázek, kolik zvládneme v domluvených termínech.

Co potřebujete vědět, než pošlete nabídku?

Co a kde chystáte, rozměry nebo délku trasy, jestli jsou sítě vytyčené, jestli na místo vjede stroj a kdy potřebujete začít.

``` ## Komponenty: Formuláře ### Poptávka na žluté Žlutá sekce: kontaktní údaje vlevo, bílý formulář vpravo. Třídy: `sec--zluta`, `kontakt`, `kontakt__tel`, `kontakt__udaje`, `form`, `form__g`, `field`, `field--cela`. ```html

Kontakt

Napište nám, co chystáte.

Popište stavbu a místo. Ozveme se vám a domluvíme obhlídku a nabídku.

+420 792 226 981

Děkujeme, poptávka je odeslaná

Ozveme se vám na uvedený telefon nebo e-mail. Spěcháte? Volejte +420 792 226 981.

Nezávazná poptávka

Co chystáte
Vyberte služby

Odesláním poptávky souhlasíte se zpracováním údajů pro její vyřízení. Poptávka je nezávazná.

``` ### Pole a chyby Pole s chybou, vícenásobný výběr a chybové hlášení formuláře. Třídy: `field`, `field__err`, `ms`, `ms__list`, `form__err`. ```html

Poptávku se nepodařilo odeslat. Zkontrolujte vyplněné údaje.

Zkontrolujte telefon, např. 777 123 456.

Co chystáte
Zemní práce
``` ## Komponenty: Obsah ### Stránka 404 Žlutá chybová stránka s obřím číslem a tlačítkem. Třídy: `e404`, `e404__in`, `e404__num`. ```html

Stránka nenalezena

Tady se zatím nekope.

Stránku, kterou hledáte, jsme nenašli. Možná se přesunula, nebo je v adrese překlep. Podívejte se na naše služby, nebo nám rovnou zavolejte.

Na úvodní stránku+420 792 226 981
``` ## Stránky - Úvod: https://www.romankacerek.cz/dev/zpmikulov/ - Zemní a výkopové práce: https://www.romankacerek.cz/dev/zpmikulov/sluzby/zemni-a-vykopove-prace