Bílé stránky s tmavě zeleným textem #0d241d, hlavní barva je zelená #074036.
Krémová #f0eee9 střídá bílé sekce, světle zelená #d4fd80 je jen akcent na tmavém a na fotce.
Písmo Inter ve všech velikostech, nadpisy řez 500 s těsným prostrkáním, text 19 px.
Obsah široký nejvýš 1600 px, okraj stránky 18 až 44 px podle šířky okna.
Sekce oddělují svislé mezery 60 až 104 px.
Tlačítka
Plné zelené tlačítko btn s rádiusem 12 px, při najetí bez výplně, obrys a text zelený.
Na fotce a v patičce má tlačítko světle zelenou výplň a tmavý text.
V hlavičce je výzva „Nezávazná poptávka“ jako menší tlačítko verzálkami.
Kulaté tlačítko se šipkou sip-btn posouvá karusely článků a realizací.
Obrázky
Jen fotky od výrobců Daikin a Hisense, žádné fotobanky ani generované obrázky.
Úvod stránky má fotku přes celou šířku, hlavička je nad ní průhledná s bílým textem.
Karty s fotkou mají poměr 3 : 4, zaoblení 18 px a tmavý přechod pod textem.
Navigace
Hlavička s logem, odkazy, rozbalovací nabídkou Tepelná čerpadla a výzvou k poptávce.
Pod 1040 px se menu otevírá z boku a zavírá křížkem.
Zelená patička s logem, telefonem, e-mailem, sloupci odkazů a řádkem s právními odkazy.
Responzivita
Zlomy: 1040 px (menu MENU místo odkazů, patička a poptávka pod sebe, dva články místo tří), 860 px (jednosloupcové split bloky, tabulky se skládají pod sebe s popisky data-popis), 620 px (mobil, základ písma 16 px).
Tablet a mobil: hero úvodu 620 / 520 px, podstránek 520 / 440 px, nízké hero 360 / 320 px. Fotky vedle textu poměr 2 : 1 (mobil 4 : 3), karty služeb 1 : 1,12.
Patička: na tabletu značka s kontakty vedle sebe, na mobilu vystředěná a sloupce odkazů jako vysouvátka (plynulé rozbalení, šipka).
Mobilní menu má vysouvací podnabídku Tepelná čerpadla, tlačítko menu je text MENU verzálkami a tři čárky.
Výpis článků: na tabletu a mobilu každý článek pod sebou na celou šířku, na mobilu fotky od okraje k okraji bez zaoblení, filtr štítků jeden řádek se zeslabeným okrajem, na úvodu a v Nepřehlédněte dva články.
Mobil: kruh postupu skrytý, tlačítko formuláře na celou šířku, úvod poptávky vystředěný, karusel realizací jde posouvat prstem.
Kontrola: zdroje/nastroje/audit-responzivita.py projede 18 stránek v osmi šířkách (přetékání, sirotky, malé písmo).
Články a dokumenty
Výpis článků bez fotky v úvodu: štítek, H1, filtr štítků, hlavní článek vedle fotky a mřížka karet.
Štítky článku jsou v levém horním rohu fotky jako poloprůhledná bílá pilulka bez rámečku.
Stránka článku: štítky, H1 a datum vystředěné, fotka 2 : 1 nejvýš 1100 px, text 62 znaků široký, oddělovače oddílů přesahují do stran.
Blok souvisejících článků se jmenuje Nepřehlédněte, karty v něm nemají štítky ani odkaz na všechny články.
Tabulky mají pevné sloupce 40 : 30 : 30, u tabulky s daty 20 : 40 : 40, bez rámečku, jen linky mezi řádky.
Malé tlačítko btn--mala s obrysem a šipkou vpravo nahoru vede na ověření v rejstřících.
Dokumenty a zásady: vlevo přilepený sloupec s oprávněními, vpravo zpracování osobních údajů s dlaždicemi, tabulkou účelů a právy v řádcích.
Barvy
Značka
zelená#074036Tlačítka, patička, pás s logy výrobců, ikony a tečky ve štítcích.
světle zelená#d4fd80Akcent na tmavém a na fotce: tlačítko v úvodu a v patičce, znak loga.
Text
inkoust#0d241dNadpisy, odkazy a výrazný text.
text#3a453fBěžný text stránky a odpovědi v častých dotazech.
šedá#6d766fPerexy sekcí, popisky a doplňující text.
Plochy
krémová#f0eee9Podklad střídavých sekcí, karet a kulatých tlačítek.
bílá#ffffffStránka, hlavička, formulář a karty na krémové.
pole#f4f2ecNajetá položka nabídky a výběr ve formuláři.
jemná#f8f7f4Karty čísel a vlastností na bílé sekci.
linka#dcded4Rámečky štítků, karet, polí a čára pod hlavičkou.
jemná na krémové#f3f1edKarty čísel a dlaždic na krémové sekci.
mapa béžově šedá#7d7566Vlny a okruh 100 km na mapě kolem Plzně, špendlík je o odstín tmavší `#3f3a30`.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
šířka obsahu
1600px
Nejvyšší šířka obsahu, hlavička jde přes celou šířku.
okraj stránky
44px
Boční okraj na počítači, na telefonu 18 px.
sekce
104px
Svislá mezera sekce na počítači, na telefonu 60 px.
hlavička
88px
Výška hlavičky.
tlačítko
58px
Výška tlačítka, vnitřní okraj 30 px po stranách.
Rádiusy
Název
Hodnota
Ukázka
Použití
velká plocha
24px
Formulář poptávky a potvrzení odeslání.
karta
18px
Karty s fotkou, ceník a fotky vedle textu.
malá karta
16px
Karty čísel, vlastností a časté dotazy.
tlačítko
12px
Tlačítka a kulatá tlačítka se šipkou.
pilulka
999px
Štítky nad nadpisy, filtr článků a pilulka verze.
malé tlačítko
10px
Malé tlačítko s obrysem `btn--mala`.
Značka a obrazové prvky
FavikonaLogo DaikinLogo Hisense
Komponenty
Hlavička a patička
Hlavička
Logo vlevo, odkazy s rozbalovací nabídkou Tepelná čerpadla a výzva „Nezávazná poptávka“ vpravo. Nad fotkou úvodu je hlavička průhledná s bílým textem, po posunu bílá s linkou. Třídy: nav2, nav2__links, nav2__btn.
Rozbalená nabídka Tepelná čerpadla otevřená najetím: bílý panel s linkou a zaoblenými spodními rohy, najetá položka má podklad pole. Třídy: nav2__dd, nav2__panel.
Menu pod 1040 px otevřené z boku, s odkazy pod sebou a tlačítkem poptávky. Zavírá se křížkem, klávesou Esc nebo klepnutím mimo. Třídy: mob-menu, mob-overlay.
Nadpis sekce se štítkem a perexem vedle a tři karty s fotkou, štítkem a odkazem. Nadpis karty se při najetí podtrhne. Třídy: hlava--radek, pcarty, pcard.
HTML kód
<main><section class="sek sek--bez-horni">
<div class="w">
<div class="hlava hlava--radek">
<div>
<span class="eyebrow">Co pro vás uděláme</span>
<h2>Od návrhu po pravidelný servis</h2>
</div>
<p>Tepelná čerpadla a klimatizace Daikin a Hisense. Dodáme, navrhneme, namontujeme a staráme se o ně i po montáži.</p>
</div>
<div class="pcarty">
<a class="pcard" href="#">
<img alt="Vnitřní jednotka tepelného čerpadla Daikin v domě, venkovní jednotka za oknem" height="719" src="assets/foto/daikin-vnitrni.webp" width="1280"/>
<span class="eyebrow">Starší dům i novostavba</span>
<div class="pcard__tx">
<h3>Tepelná čerpadla</h3>
<p>Vzduch-voda i země-voda. Výkon podle výpočtu tepelné ztráty.</p>
</div>
</a>
<a class="pcard" href="#">
<img alt="Nástěnná klimatizace Daikin Emura v obývacím pokoji" class="pcard__img--nahoru" height="853" src="assets/foto/daikin-klima-emura.webp" width="1280"/>
<span class="eyebrow">Byt i rodinný dům</span>
<div class="pcard__tx">
<h3>Klimatizace</h3>
<p>Do ložnic i pracoven, Daikin a Hisense. Montujeme po celý rok.</p>
</div>
</a>
<a class="pcard" href="#">
<img alt="Vnitřní jednotka tepelného čerpadla Daikin v technické místnosti" height="711" src="assets/foto/daikin-interier.webp" width="1280"/>
<span class="eyebrow">Zdarma před nabídkou</span>
<div class="pcard__tx">
<h3>Návrh a výpočet</h3>
<p>Přijedeme k vám a náš projektant spočítá tepelnou ztrátu domu.</p>
</div>
</a>
<a class="pcard" href="#">
<img alt="Nástěnná vnitřní jednotka tepelného čerpadla Daikin" height="711" src="assets/foto/daikin-interier2.webp" width="1280"/>
<span class="eyebrow">Po montáži</span>
<div class="pcard__tx">
<h3>Roční prohlídky</h3>
<p>Děláme je sami. Jsou podmínkou záruky výrobce.</p>
</div>
</a>
</div>
</div>
</section></main>
Čísla
Čtyři karty s ikonou, výrazným údajem a popiskem, první je zvýrazněná. Pod nimi tlačítko. Třídy: staty2, stat2, sek__akce.
Mřížka karet s ikonou, nadpisem a krátkým textem, varianta vlast--4 má čtyři sloupce. Třídy: vlast, vcard.
HTML kód
<main><section class="sek sek--cream" id="jak-to-funguje">
<div class="w">
<div class="split2">
<div class="split2__ph"><img alt="Vnitřní jednotka tepelného čerpadla Daikin v technické místnosti, venkovní jednotka za oknem" height="667" src="assets/foto/daikin-technicka.webp" width="1200"/></div>
<div>
<span class="eyebrow">Jak to funguje</span>
<h2>Teplo je kolem domu. Čerpadlo ho přenese dovnitř.</h2>
<p class="lead">Čerpadlo odebírá energii ze vzduchu nebo ze země a předává ji do topení a teplé vody. Z jedné kilowatthodiny elektřiny udělá tři i víc.</p>
<ul class="ticks">
<li>Topí do radiátorů i podlahového topení a ohřívá teplou vodu.</li>
<li>V létě umí dům i chladit, pokud si to přejete.</li>
<li>Funguje i v mrazech, výkon se jen plynule přizpůsobí.</li>
</ul>
<a class="btn" href="#">Nezávazná poptávka<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a>
</div>
</div>
</div>
</section></main>
Ceník
Karty s orientační cenou, tlačítkem a seznamem, co cena zahrnuje. Hlavní karta je zelená. Třídy: cenik, cena-karta, cena-karta--hlavni.
HTML kód
<main><section class="sek sek--cream" id="cenik">
<div class="w">
<div class="hlava hlava--radek">
<div>
<span class="eyebrow">Ceník</span>
<h2>Orientační ceny s montáží</h2>
</div>
<p>Ceny jsou orientační včetně DPH. Přesnou cenu řekneme po výpočtu tepelné ztráty.</p>
</div>
<div class="cenik">
<article class="cena-karta cena-karta--hlavni"><div class="cena-karta__hlava"><h3>Tepelné čerpadlo</h3><p class="cena-karta__p">Vzduch-voda pro starší domy i novostavby.</p><span class="cena-karta__cena">od 170 000 Kč</span><p class="cena-karta__pozn">s DPH a montáží</p><a class="btn" href="#">Nezávazná poptávka<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a></div><ul><li>Čerpadlo 8 až 12 kW s ohřevem vody</li><li>Do novostavby stačí 4 až 7 kW</li><li>Výkon a značka podle výpočtu tepelné ztráty</li><li>Montáž, elektro a napojení na topení</li><li>Uvedení do provozu výrobcem</li><li>2 roky od nás na montáž, k tomu záruka výrobce</li><li>Úvěr NZÚ až 350 000 Kč</li></ul></article>
<article class="cena-karta"><div class="cena-karta__hlava"><h3>Klimatizace</h3><p class="cena-karta__p">Nástěnná jednotka do ložnice, pracovny nebo celého bytu.</p><span class="cena-karta__cena">od 24 000 Kč</span><p class="cena-karta__pozn">s DPH za jednotku s montáží</p><a class="btn" href="#">Nezávazná poptávka<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a></div><ul><li>Jednotka 2,5 až 3,5 kW s montáží</li><li>Daikin nebo Hisense</li><li>Certifikát F-plyny</li><li>Můžete s ní i přitápět</li><li>Montáž celoročně</li><li>Úvěr NZÚ na vzduch-vzduch až 200 000 Kč</li></ul></article>
</div>
</div>
</section></main>
Časté dotazy
Nadpis s perexem vlevo a rozbalovací otázky vpravo, ikona plus a mínus. Třídy: otazky, otazky__list.
HTML kód
<main><section class="sek sek--cream" id="faq">
<div class="w">
<div class="otazky">
<div class="otazky__tx">
<span class="eyebrow">Na rovinu</span>
<h2>Na co se ptáte nejčastěji</h2>
<p>Odpovídáme tak, jak to říkáme zákazníkům na místě. Bez slibů, které nemůžeme dodržet.</p>
</div>
<div class="otazky__list">
<details open=""><summary>Vytopí tepelné čerpadlo starý dům s radiátory?<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></summary><div class="otazky__a"><p>Rozhodne výpočet. Přijedeme k vám, projdeme dům, zateplení, okna a radiátory. Když výpočet ukáže, že čerpadlo dům nevytopí, řekneme vám to rovnou.</p></div></details>
<details><summary>Kolik stojí tepelné čerpadlo s montáží?<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></summary><div class="otazky__a"><p>Orientačně 190 000 až 290 000 Kč s DPH (vzduch-voda 8 až 12 kW s ohřevem vody). Cenu pro váš dům řekneme po výpočtu tepelné ztráty.</p></div></details>
<details><summary>Je poptávka opravdu nezávazná?<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></summary><div class="otazky__a"><p>Ano. Přijedeme k vám a náš vlastní projektant spočítá tepelnou ztrátu domu. Obojí je zdarma a k ničemu vás nezavazuje.</p></div></details>
<details><summary>Dostanu úvěr nebo dotaci?<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></summary><div class="otazky__a"><p>Dům dokončený před 1. 1. 2023 může dostat bezúročný úvěr NZÚ až 350 000 Kč, u země-voda až 400 000 Kč. Dotaci 150 000 Kč dostanou domácnosti s nízkým příjmem. Na novostavbu podpora není. Schválení je na fondu a bance.</p></div></details>
<details><summary>Jaká je záruka?<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14"></path><path d="M5 12h14"></path></svg></summary><div class="otazky__a"><p>Na montáž máte od nás 2 roky. Na čerpadlo platí záruka výrobce, celkem 5 až 7 let podle značky a modelu. Podmínkou záruky výrobce je prohlídka jednou ročně.</p></div></details>
</div>
</div>
</div>
</section></main>
Důvěra
Ukázky realizací
Karusel fotek realizací s popiskem a šipkami po stranách. Třídy: real, real__stage, sip-btn.
Řada článků s fotkou, datem a nadpisem, posun šipkami a odkaz na všechny. Třídy: clanky, clanky__rail, clanek.
HTML kód
<main><section class="sek clanky" id="aktuality-sek">
<div class="w">
<div class="hlava hlava--radek">
<div>
<span class="eyebrow">Aktuality</span>
<h2>Rady a novinky</h2>
</div>
<div class="hlava__bok">
<p>Dotace, ceny a všechno kolem tepelných čerpadel a klimatizací.</p>
<a class="odkaz" href="#">Všechny články<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a>
</div>
</div>
<div data-rail="">
<div aria-label="Články" class="clanky__rail" tabindex="0">
<article class="clanek"><a class="clanek__media" href="#"><img alt="Rodinný dům s venkovní jednotkou tepelného čerpadla Daikin v zimě" height="906" src="assets/foto/daikin-dum-zima.webp" width="1280"/></a><span class="clanek__meta">9. 11. 2026</span><h3><a href="#">Dotace na tepelné čerpadlo 2026: kdo dostane 150 tisíc a kdo si půjčí bez úroků</a></h3><p>Od 25. června 2026 běží nová etapa Nové zelené úsporám. Přímá dotace zůstala jen pro domácnosti s nižšími příjmy, ostatní dostanou bezúročný úvěr.</p></article>
<article class="clanek"><a class="clanek__media" href="#"><img alt="Venkovní jednotka tepelného čerpadla Daikin na fasádě rodinného domu" height="431" src="assets/foto/daikin-fasada.webp" width="861"/></a><span class="clanek__meta">6. 11. 2026</span><h3><a href="#">Konec R32? Co nařízení o F‑plynech znamená pro váš dům</a></h3><p>Evropské nařízení postupně zakazuje prodej nových klimatizací a tepelných čerpadel s chladivem R32. Co platí od roku 2027, co od 2029 a proč není důvod k panice.</p></article>
<article class="clanek"><a class="clanek__media" href="#"><img alt="Vnitřní jednotka tepelného čerpadla Daikin Altherma v technické místnosti" height="667" src="assets/foto/daikin-technicka.webp" width="1200"/></a><span class="clanek__meta">3. 11. 2026</span><h3><a href="#">Elektřina pro tepelné čerpadlo: sazba D57d, nové spínání HDO a ceny 2026</a></h3><p>Tepelné čerpadlo se vyplatí s dvoutarifní sazbou D57d. Co musí dům splnit, co se změnilo u HDO na Plzeňsku a kolik vyjde topení oproti plynu a přímotopu.</p></article>
<article class="clanek"><a class="clanek__media" href="#"><img alt="Nástěnná klimatizace Daikin Stylish v obývacím pokoji" height="720" src="assets/foto/daikin-klima-styl2.webp" width="1280"/></a><span class="clanek__meta">30. 10. 2026</span><h3><a href="#">Topí klimatizace i v mrazu? Co zvládne split v zimě</a></h3><p>Splitová klimatizace je tepelné čerpadlo vzduch-vzduch. Topí levněji než přímotop, ale v mrazu jí klesá výkon. Kdy stačí jako hlavní topení a kdy ne.</p></article>
</div>
<div class="clanky__nav"><button aria-label="Předchozí článek" class="sip-btn" data-rail-prev="" type="button"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M19 12H5"></path><path d="M11 18l-6-6"></path><path d="M11 6l-6 6"></path></svg></button><button aria-label="Další článek" class="sip-btn" data-rail-next="" type="button"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></button></div>
</div>
</div>
</section></main>
Tým
Nadpis a text vlevo, vpravo řádky s odkazy a šipkou. Třídy: tym, tym__rows, tym__row.
Mapa Česka v béžově šedé, špendlík na Plzni s popiskem a tři pulzující vlny do okruhu 100 km oříznuté hranicí státu (animace 4,2 s, při omezení pohybu jen jeden statický kruh), vedle nadpisu, perexu a seznamu oblastí. Třídy: split2--mapa, mapa, mapa__vlna, mapa__pin, mapa__mesto, ticks.
Údaje o firmě ve dvou sloupcích oddělené linkami, popisek vlevo a hodnota vpravo. Třídy: udaje.
HTML kód
<main><section class="sek sek--cream" id="firma">
<div class="w">
<div class="hlava hlava--radek">
<div>
<span class="eyebrow">Firma</span>
<h2>Oprávnění a pravidla</h2>
</div>
<p>Co o nás najdete v rejstřících a co platí pro každou zakázku.</p>
</div>
<dl class="udaje">
<div><dt>Odpovědný zástupce</dt><dd>Martin Brožík</dd></div>
<div><dt>Živnostenské oprávnění</dt><dd>Montáž, opravy a rekonstrukce chladicích zařízení a tepelných čerpadel</dd></div>
<div><dt>Certifikát F-plyny</dt><dd>Kategorie I, Martin Brožík, č. 0809/16</dd></div>
<div><dt>Záruka</dt><dd>2 roky na montáž, vedle záruky výrobce</dd></div>
<div><dt>Dokumenty</dt><dd><a href="#">Doklady a zpracování osobních údajů</a></dd></div>
<div><dt>Cookies</dt><dd><a href="#">Analytické a marketingové jen se souhlasem</a></dd></div>
</dl>
</div>
</section></main>
Dokumenty a zásady
Vlevo přilepený sloupec s nadpisem, větou a malými tlačítky na ověření v rejstřících, vpravo zpracování osobních údajů s dlaždicemi, oddíly ve velikosti H2, tabulkou účelů, právy v řádcích, kontakty a řádkem verze. Třídy: dok, dok__bok, dok__obsah, dok__sek, doklady.
HTML kód
<main><section class="sek sek--cream" id="dokumenty">
<div class="w">
<div class="dok">
<aside class="dok__bok" id="doklady">
<h2>Oprávnění a zápisy</h2>
<p>Vše si ověříte přímo ve veřejných rejstřících.</p>
<div class="doklady">
<a class="btn btn--mala" href="#" rel="noopener" target="_blank">Registr F-plynů<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" rel="noopener" target="_blank">Živnostenský rejstřík<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" rel="noopener" target="_blank">Obchodní rejstřík<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
</div>
<h3 class="doklady__nadpis">Certifikáty</h3>
<div class="doklady doklady--certy">
<a class="btn btn--mala" href="#" onclick="return false">F-plyny, kategorie I, č. 809/16<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" onclick="return false">Páječ podle ČSN EN ISO 13585<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" onclick="return false">Daikin Split & SkyAir<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" onclick="return false">Daikin Heating Solutions Navigator<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
<a class="btn btn--mala" href="#" onclick="return false">Daikin e-Care App<svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M17 7l-10 10"></path><path d="M8 7l9 0l0 9"></path></svg>
</a>
</div>
</aside>
<div class="dok__obsah">
<div class="dok__sek" id="zpracovani">
<h2>Zpracování osobních údajů</h2>
<p class="dok__lede">Údaje od vás používáme jen kvůli vaší poptávce a zakázce.</p>
<ul class="fakta">
<li><b>1 rok</b><p>Poptávku bez zakázky smažeme do roka od posledního kontaktu.</p></li>
<li><b>30 dnů</b><p>Na žádost o vaše údaje odpovíme nejpozději do měsíce, většinou hned.</p></li>
<li><b>10 let</b><p>Účetní a daňové doklady držíme, jak ukládá zákon.</p></li>
</ul>
<h3 id="spravce">Kdo údaje spravuje</h3>
<p>Eko topení s.r.o., IČO 24504556, Koželužská 3034/1, 301 00 Plzeň, zapsaná v obchodním rejstříku u Krajského soudu v Plzni, oddíl C, vložka 48078. Zastihnete nás na telefonu <a href="#">+420 724 244 288</a> a e-mailu <a href="#">poptavky@ekotopeni.com</a>.</p>
<h3 id="udaje">Jaké údaje máme</h3>
<p>Jen to, co nám sami napíšete nebo řeknete. Nic o vás nedohledáváme.</p>
<ul class="ticks">
<li>Jméno a příjmení</li>
<li>Telefon a e-mail</li>
<li>Obec a údaje o domě, které uvedete v poptávce</li>
<li>U zakázky adresu montáže a údaje pro smlouvu, doklady a záruku</li>
</ul>
<h3 id="ucel">Proč a jak dlouho</h3>
<div aria-label="Účely zpracování" class="tabulka" role="region" tabindex="0">
<table>
<thead><tr><th scope="col">Účel</th><th scope="col">Důvod</th><th scope="col">Jak dlouho</th></tr></thead>
<tbody>
<tr><th scope="row">Odpověď na poptávku a nabídka</th><td data-popis="Důvod">Jednání o zakázce na vaši žádost</td><td data-popis="Jak dlouho">1 rok od posledního kontaktu</td></tr>
<tr><th scope="row">Smlouva, montáž a záruka</th><td data-popis="Důvod">Plnění smlouvy</td><td data-popis="Jak dlouho">Po dobu záruky a 3 roky po ní</td></tr>
<tr><th scope="row">Roční prohlídky a servis</th><td data-popis="Důvod">Plnění smlouvy</td><td data-popis="Jak dlouho">Dokud u nás servis využíváte</td></tr>
<tr><th scope="row">Účetní a daňové doklady</th><td data-popis="Důvod">Povinnost ze zákona</td><td data-popis="Jak dlouho">10 let</td></tr>
<tr><th scope="row">Měření návštěvnosti a reklama</th><td data-popis="Důvod">Váš souhlas s cookies</td><td data-popis="Jak dlouho">Podle cookie, nejdéle 2 roky</td></tr>
</tbody>
</table>
</div>
<h3 id="predani">Komu je předáváme</h3>
<p>Nikomu je neprodáváme. Předáme je jen tam, kde to zakázka nebo zákon vyžaduje:</p>
<ul class="ticks">
<li>Výrobci tepelného čerpadla nebo klimatizace kvůli uvedení do provozu a registraci záruky</li>
<li>Státnímu fondu životního prostředí, pokud vám pomáháme s žádostí o dotaci</li>
<li>Úřadům, kde to ukládá zákon, například finančnímu úřadu u daňových dokladů</li>
<li>Poskytovateli hostingu a e-mailu, přes které k nám poptávka dorazí</li>
<li>Českému úřadu zeměměřickému a katastrálnímu (veřejný registr adres RÚIAN), jen text, který píšete do pole Adresa realizace, a po kliknutí na ikonu polohy souřadnice vašeho zařízení, kvůli našeptávání a doplnění adresy</li>
<li>Googlu a Metě, jen pokud v liště souhlasíte s měřením návštěvnosti a reklamou</li>
</ul>
<h3 id="prava">Vaše práva</h3>
<dl class="prava">
<div><dt>Přístup</dt><dd>Řekneme vám, jaké údaje o vás máme, a pošleme vám jejich kopii.</dd></div>
<div><dt>Oprava</dt><dd>Chybný údaj opravíme nebo doplníme, jakmile nám dáte vědět.</dd></div>
<div><dt>Výmaz</dt><dd>Smažeme vše, co nemusíme držet ze zákona.</dd></div>
<div><dt>Omezení</dt><dd>Na vaši žádost údaje jen uložíme a dál s nimi nepracujeme.</dd></div>
<div><dt>Námitka</dt><dd>Když nesouhlasíte s tím, jak údaje používáme, posoudíme to a ozveme se.</dd></div>
<div><dt>Stížnost</dt><dd>Když nebudete spokojeni, obraťte se na <a href="#" rel="noopener" target="_blank">Úřad pro ochranu osobních údajů</a>.</dd></div>
</dl>
</div>
<div class="dok__sek" id="cookies">
<h2>Cookies</h2>
<p>Nezbytné cookies běží vždy, analytické a marketingové jen s vaším souhlasem. Které to jsou a jak volbu změnit, popisujeme na stránce <a href="#">Cookies</a>.</p>
</div>
<div class="dok__sek" id="dotazy">
<h2>Kde se ptát</h2>
<p>Napište nebo zavolejte. Odpovíme nejpozději do 30 dnů, většinou hned.</p>
<ul class="kontakty">
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path></svg>
<a href="#">+420 724 244 288</a></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path><path d="M3 7l9 6l9 -6"></path></svg>
<a class="kontakty__mail" href="#">poptavky@ekotopeni.com</a></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"></path></svg>
<span>Koželužská 3034/1, 301 00 Plzeň</span></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg>
<span>Po až pá 8.00 až 17.00</span></li>
</ul>
</div>
<div class="zmeny"><span>10. listopadu 2026</span><span class="zmeny__v">v1.1</span><span>Aktuální verze zásad, seznamu dokladů a certifikátů.</span></div>
</div>
</div>
</div>
</section></main>
Dlaždice údajů
Tři karty s výraznou hodnotou a jednou větou, na krémové sekci zesvětlají při najetí. V článcích jsou širší než text a bez hoveru. Třídy: fakta.
HTML kód
<main><section class="sek sek--cream" id="dokumenty"><div class="w"><div class="dok"><div class="dok__obsah"><div class="dok__sek" id="zpracovani"><ul class="fakta">
<li><b>1 rok</b><p>Poptávku bez zakázky smažeme do roka od posledního kontaktu.</p></li>
<li><b>30 dnů</b><p>Na žádost o vaše údaje odpovíme nejpozději do měsíce, většinou hned.</p></li>
<li><b>10 let</b><p>Účetní a daňové doklady držíme, jak ukládá zákon.</p></li>
</ul></div></div></div></div></section></main>
Tabulka
Tabulka bez rámečku s linkami mezi řádky a hlavičkou verzálkami. V článcích má pevné sloupce 40 : 30 : 30, varianta tabulka--datum 20 : 40 : 40. Třídy: tabulka.
HTML kód
<main><section class="sek sek--cream" id="dokumenty"><div class="w"><div class="dok"><div class="dok__obsah"><div class="dok__sek" id="zpracovani"><div aria-label="Účely zpracování" class="tabulka" role="region" tabindex="0">
<table>
<thead><tr><th scope="col">Účel</th><th scope="col">Důvod</th><th scope="col">Jak dlouho</th></tr></thead>
<tbody>
<tr><th scope="row">Odpověď na poptávku a nabídka</th><td data-popis="Důvod">Jednání o zakázce na vaši žádost</td><td data-popis="Jak dlouho">1 rok od posledního kontaktu</td></tr>
<tr><th scope="row">Smlouva, montáž a záruka</th><td data-popis="Důvod">Plnění smlouvy</td><td data-popis="Jak dlouho">Po dobu záruky a 3 roky po ní</td></tr>
<tr><th scope="row">Roční prohlídky a servis</th><td data-popis="Důvod">Plnění smlouvy</td><td data-popis="Jak dlouho">Dokud u nás servis využíváte</td></tr>
<tr><th scope="row">Účetní a daňové doklady</th><td data-popis="Důvod">Povinnost ze zákona</td><td data-popis="Jak dlouho">10 let</td></tr>
<tr><th scope="row">Měření návštěvnosti a reklama</th><td data-popis="Důvod">Váš souhlas s cookies</td><td data-popis="Jak dlouho">Podle cookie, nejdéle 2 roky</td></tr>
</tbody>
</table>
</div></div></div></div></div></section></main>
Práva v řádcích
Seznam pojmů a vysvětlení ve dvou sloupcích oddělených linkami. Třídy: prava.
HTML kód
<main><section class="sek sek--cream" id="dokumenty"><div class="w"><div class="dok"><div class="dok__obsah"><div class="dok__sek" id="zpracovani"><dl class="prava">
<div><dt>Přístup</dt><dd>Řekneme vám, jaké údaje o vás máme, a pošleme vám jejich kopii.</dd></div>
<div><dt>Oprava</dt><dd>Chybný údaj opravíme nebo doplníme, jakmile nám dáte vědět.</dd></div>
<div><dt>Výmaz</dt><dd>Smažeme vše, co nemusíme držet ze zákona.</dd></div>
<div><dt>Omezení</dt><dd>Na vaši žádost údaje jen uložíme a dál s nimi nepracujeme.</dd></div>
<div><dt>Námitka</dt><dd>Když nesouhlasíte s tím, jak údaje používáme, posoudíme to a ozveme se.</dd></div>
<div><dt>Stížnost</dt><dd>Když nebudete spokojeni, obraťte se na <a href="#" rel="noopener" target="_blank">Úřad pro ochranu osobních údajů</a>.</dd></div>
</dl></div></div></div></div></section></main>
Řádek verze
Datum verzálkami, malá pilulka s číslem verze a text změny. Třídy: zmeny, zmeny__v.
HTML kód
<main><section class="sek sek--cream" id="dokumenty"><div class="w"><div class="dok"><div class="dok__obsah"><div class="zmeny"><span>10. listopadu 2026</span><span class="zmeny__v">v1.1</span><span>Aktuální verze zásad, seznamu dokladů a certifikátů.</span></div></div></div></div></section></main>
Malé tlačítko
Malé tlačítko s obrysem a šipkou vpravo nahoru pro odkaz ven, při najetí zelená výplň. Třídy: btn--mala, ikona ikona-ven.
Štítek, H1, filtr štítků s počty, hlavní článek s fotkou vlevo a mřížka karet. Filtr skrývá články podle data-stitky. Třídy: clanky-uvod, filtr, hlavni-clanek, clanky__mriz.
HTML kód
<main><section class="sek clanky clanky-uvod" id="aktuality">
<div class="w">
<div class="hlava">
<span class="eyebrow">Aktuality</span>
<h1>Rady a novinky</h1>
</div>
<div aria-label="Filtr článků" class="filtr" data-filtr="" role="group"><button aria-pressed="true" class="filtr__btn" data-stitek="" type="button">Všechny <span>4</span></button><button aria-pressed="false" class="filtr__btn" data-stitek="dotace" type="button">Dotace <span>1</span></button><button aria-pressed="false" class="filtr__btn" data-stitek="tepelna-cerpadla" type="button">Tepelná čerpadla <span>3</span></button><button aria-pressed="false" class="filtr__btn" data-stitek="klimatizace" type="button">Klimatizace <span>2</span></button><button aria-pressed="false" class="filtr__btn" data-stitek="ceny" type="button">Ceny <span>1</span></button></div>
<article class="hlavni-clanek" data-stitky="dotace tepelna-cerpadla"><a class="hlavni-clanek__media" href="#"><img alt="Rodinný dům s venkovní jednotkou tepelného čerpadla Daikin v zimě" fetchpriority="high" height="906" src="assets/foto/daikin-dum-zima.webp" width="1280"/><div class="clanek__stitky"><span class="eyebrow">Dotace</span><span class="eyebrow">Tepelná čerpadla</span></div></a><div class="hlavni-clanek__tx"><h2><a href="#">Dotace na tepelné čerpadlo 2026: kdo dostane 150 tisíc a kdo si půjčí bez úroků</a></h2><p>Od 25. června 2026 běží nová etapa Nové zelené úsporám. Přímá dotace zůstala jen pro domácnosti s nižšími příjmy, ostatní dostanou bezúročný úvěr.</p><span class="clanek__meta">9. 11. 2026</span><a class="btn btn--mala" href="#">Přečíst článek<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a></div></article>
<div class="clanky__mriz">
<article class="clanek" data-stitky="tepelna-cerpadla klimatizace"><a class="clanek__media" href="#"><img alt="Venkovní jednotka tepelného čerpadla Daikin na fasádě rodinného domu" height="431" src="assets/foto/daikin-fasada.webp" width="861"/><div class="clanek__stitky"><span class="eyebrow">Tepelná čerpadla</span><span class="eyebrow">Klimatizace</span></div></a><span class="clanek__meta">6. 11. 2026</span><h3><a href="#">Konec R32? Co nařízení o F‑plynech znamená pro váš dům</a></h3><p>Evropské nařízení postupně zakazuje prodej nových klimatizací a tepelných čerpadel s chladivem R32. Co platí od roku 2027, co od 2029 a proč není důvod k panice.</p></article>
<article class="clanek" data-stitky="ceny tepelna-cerpadla"><a class="clanek__media" href="#"><img alt="Vnitřní jednotka tepelného čerpadla Daikin Altherma v technické místnosti" height="667" src="assets/foto/daikin-technicka.webp" width="1200"/><div class="clanek__stitky"><span class="eyebrow">Ceny</span><span class="eyebrow">Tepelná čerpadla</span></div></a><span class="clanek__meta">3. 11. 2026</span><h3><a href="#">Elektřina pro tepelné čerpadlo: sazba D57d, nové spínání HDO a ceny 2026</a></h3><p>Tepelné čerpadlo se vyplatí s dvoutarifní sazbou D57d. Co musí dům splnit, co se změnilo u HDO na Plzeňsku a kolik vyjde topení oproti plynu a přímotopu.</p></article>
<article class="clanek" data-stitky="klimatizace"><a class="clanek__media" href="#"><img alt="Nástěnná klimatizace Daikin Stylish v obývacím pokoji" height="720" src="assets/foto/daikin-klima-styl2.webp" width="1280"/><div class="clanek__stitky"><span class="eyebrow">Klimatizace</span></div></a><span class="clanek__meta">30. 10. 2026</span><h3><a href="#">Topí klimatizace i v mrazu? Co zvládne split v zimě</a></h3><p>Splitová klimatizace je tepelné čerpadlo vzduch-vzduch. Topí levněji než přímotop, ale v mrazu jí klesá výkon. Kdy stačí jako hlavní topení a kdy ne.</p></article>
</div>
</div>
</section></main>
Filtr štítků
Pilulky s názvem štítku a počtem, vybraná je tmavá. Třídy: filtr, filtr__btn.
Fotka 16 : 10 se štítky v levém horním rohu, datum, nadpis a perex. Nadpis se při najetí podtrhne. Třídy: clanek, clanek__media, clanek__stitky, clanek__meta.
HTML kód
<main><section class="sek clanky clanky-uvod" id="aktuality"><div class="w"><div class="clanky__mriz">
<article class="clanek" data-stitky="tepelna-cerpadla klimatizace"><a class="clanek__media" href="#"><img alt="Venkovní jednotka tepelného čerpadla Daikin na fasádě rodinného domu" height="431" src="assets/foto/daikin-fasada.webp" width="861"/><div class="clanek__stitky"><span class="eyebrow">Tepelná čerpadla</span><span class="eyebrow">Klimatizace</span></div></a><span class="clanek__meta">6. 11. 2026</span><h3><a href="#">Konec R32? Co nařízení o F‑plynech znamená pro váš dům</a></h3><p>Evropské nařízení postupně zakazuje prodej nových klimatizací a tepelných čerpadel s chladivem R32. Co platí od roku 2027, co od 2029 a proč není důvod k panice.</p></article>
<article class="clanek" data-stitky="ceny tepelna-cerpadla"><a class="clanek__media" href="#"><img alt="Vnitřní jednotka tepelného čerpadla Daikin Altherma v technické místnosti" height="667" src="assets/foto/daikin-technicka.webp" width="1200"/><div class="clanek__stitky"><span class="eyebrow">Ceny</span><span class="eyebrow">Tepelná čerpadla</span></div></a><span class="clanek__meta">3. 11. 2026</span><h3><a href="#">Elektřina pro tepelné čerpadlo: sazba D57d, nové spínání HDO a ceny 2026</a></h3><p>Tepelné čerpadlo se vyplatí s dvoutarifní sazbou D57d. Co musí dům splnit, co se změnilo u HDO na Plzeňsku a kolik vyjde topení oproti plynu a přímotopu.</p></article>
<article class="clanek" data-stitky="klimatizace"><a class="clanek__media" href="#"><img alt="Nástěnná klimatizace Daikin Stylish v obývacím pokoji" height="720" src="assets/foto/daikin-klima-styl2.webp" width="1280"/><div class="clanek__stitky"><span class="eyebrow">Klimatizace</span></div></a><span class="clanek__meta">30. 10. 2026</span><h3><a href="#">Topí klimatizace i v mrazu? Co zvládne split v zimě</a></h3><p>Splitová klimatizace je tepelné čerpadlo vzduch-vzduch. Topí levněji než přímotop, ale v mrazu jí klesá výkon. Kdy stačí jako hlavní topení a kdy ne.</p></article>
</div></div></section></main>
Hlavička článku
Štítky, H1 a datum vystředěné, pod nimi fotka 2 : 1 nejvýš 1100 px. Třídy: clanek-hlava, clanek-hlava__in, clanek-hlava__foto.
HTML kód
<main><section class="sek clanek-hlava">
<div class="w">
<div class="clanek-hlava__in">
<div class="clanek__stitky"><span class="eyebrow">Dotace</span><span class="eyebrow">Tepelná čerpadla</span></div>
<h1>Dotace na tepelné čerpadlo 2026: kdo dostane 150 tisíc a kdo si půjčí bez úroků</h1>
<span class="clanek__meta">9. 11. 2026</span>
</div>
<img alt="Rodinný dům s venkovní jednotkou tepelného čerpadla Daikin v zimě" class="clanek-hlava__foto" fetchpriority="high" height="906" src="assets/foto/daikin-dum-zima.webp" width="1280"/>
</div>
</section></main>
Text článku
Úzký sloupec textu s úvodem, oddíly H2 oddělenými linkou s přesahem, seznamy, číslovanými kroky, tabulkou a tlačítky na konci. Třídy: proza--clanek, proza__uvod, kroky, tabulka, proza__akce.
HTML kód
<main><section class="sek">
<div class="w">
<div class="proza proza--clanek">
<p class="proza__uvod">Nová zelená úsporám přijímá žádosti od 25. června 2026 a poběží do 31. října 2029, nebo dokud vystačí peníze. Hlavní změna oproti minulým letům: na tepelné čerpadlo už nedostane dotaci každý majitel domu.</p>
<h2>Dvě cesty: dotace, nebo bezúročný úvěr</h2>
<p>Přímá dotace zůstala jen v programu NZÚ Light pro domácnosti s nižšími příjmy. Ostatní vlastníci rodinných domů si mohou půjčit bez úroků. Úroky za ně platí stát a splácí se jen to, co si půjčili.</p>
<div aria-label="Výše podpory na tepelná čerpadla" class="tabulka" role="region" tabindex="0"><table><thead><tr><th scope="col">Tepelné čerpadlo</th><th scope="col">Dotace NZÚ Light</th><th scope="col">Bezúročný úvěr až</th></tr></thead><tbody>
<tr><th scope="row">Vzduch-voda</th><td data-popis="Dotace NZÚ Light">150 000 Kč</td><td data-popis="Bezúročný úvěr až">350 000 Kč</td></tr>
<tr><th scope="row">Země-voda, voda-voda</th><td data-popis="Dotace NZÚ Light">150 000 Kč</td><td data-popis="Bezúročný úvěr až">400 000 Kč</td></tr>
<tr><th scope="row">Vzduch-vzduch</th><td data-popis="Dotace NZÚ Light">100 000 Kč</td><td data-popis="Bezúročný úvěr až">200 000 Kč</td></tr>
<tr><th scope="row">Jen na ohřev vody</th><td data-popis="Dotace NZÚ Light">60 000 Kč</td><td data-popis="Bezúročný úvěr až">100 000 Kč</td></tr>
</tbody></table></div>
<p>V Light je strop pro zdroje tepla 150 000 Kč a spolu se zateplením dostanete nejvýš 400 000 Kč. Peníze chodí zálohově, tedy předem. U úvěru je minimum 100 000 Kč, dílčí renovace může stát až 750 000 Kč a splácí se 10 let, nad 500 000 Kč 15 let. Náklady smíte uplatnit až 12 měsíců zpětně.</p>
<h2>Kdo dosáhne na dotaci Light</h2>
<ul>
<li>Vlastníte rodinný dům v energetické třídě E až G a nemáte víc než dvě nemovitosti k bydlení.</li>
<li>Domácnost pobírá dávky státní sociální pomoci, nebo má příjem do třetího příjmového decilu.</li>
<li>Nebo ji tvoří starobní důchodci či člen s invalidním důchodem třetího stupně a příjem domácnosti je do pátého decilu.</li>
</ul>
<p>Samotný důchod nestačí, příjem se počítá za celou domácnost. Žádost podává poradce NZÚ a pro domácnosti s nižšími příjmy je jeho pomoc i renovační pas zdarma.</p>
<h2>Co musíte mít, než objednáte</h2>
<ol class="kroky">
<li><b>Renovační pas.</b> U dílčích opatření, kam tepelné čerpadlo patří, je u rodinných domů povinný. Vystaví ho registrovaný poradce NZÚ.</li>
<li><b>Čerpadlo ze seznamu SVT.</b> Podporu dostanete jen na model zapsaný v Seznamu výrobků a technologií. Před objednávkou to u vybraného modelu zkontrolujeme.</li>
<li><b>Oprávněnou montážní firmu.</b> Firma musí mít živnost na montáž chladicích zařízení a tepelných čerpadel a montážník osvědčení o profesní kvalifikaci ne starší pěti let. U dotovaných zařízení to dokládáte daňovými doklady.</li>
<li><b>Žádost přes zadosti.sfzp.cz.</b> Jen elektronicky, u Light s poradcem, u úvěru přes zapojené banky a stavební spořitelny: Buřinku, ČSOB Stavební spořitelnu, Raiffeisen stavební spořitelnu a Modrou pyramidu.</li>
</ol>
<h2>Co to znamená v praxi</h2>
<p>Když na Light nedosáhnete, není úvěr špatná zpráva. Při půjčce 350 000 Kč na 10 let splácíte zhruba 2 900 Kč měsíčně a nic navíc. Program Oprav dům po babičce s dřívějšími 75 000 až 90 000 Kč na čerpadlo skončil v listopadu 2025, protože se vyčerpaly peníze.</p>
<p>Čísla platí k 9. listopadu 2026. Podmínky se mohou změnit, před podpisem smlouvy je s vámi projdeme znovu.</p>
<div class="proza__akce"><a class="btn" href="#">Nezávazná poptávka<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></a><a class="btn btn--mala" href="#">Úvěr a dotace NZÚ</a></div>
</div>
</div>
</section></main>
Nepřehlédněte
Krémová sekce se třemi dalšími články bez štítků a bez odkazu na všechny články. Třídy: clanky, clanky__mriz, clanek.
HTML kód
<main><section class="sek sek--cream clanky">
<div class="w">
<div class="hlava">
<h2>Nepřehlédněte</h2>
</div>
<div class="clanky__mriz">
<article class="clanek"><a class="clanek__media" href="#"><img alt="Venkovní jednotka tepelného čerpadla Daikin na fasádě rodinného domu" height="431" src="assets/foto/daikin-fasada.webp" width="861"/></a><span class="clanek__meta">6. 11. 2026</span><h3><a href="#">Konec R32? Co nařízení o F‑plynech znamená pro váš dům</a></h3><p>Evropské nařízení postupně zakazuje prodej nových klimatizací a tepelných čerpadel s chladivem R32. Co platí od roku 2027, co od 2029 a proč není důvod k panice.</p></article>
<article class="clanek"><a class="clanek__media" href="#"><img alt="Vnitřní jednotka tepelného čerpadla Daikin Altherma v technické místnosti" height="667" src="assets/foto/daikin-technicka.webp" width="1200"/></a><span class="clanek__meta">3. 11. 2026</span><h3><a href="#">Elektřina pro tepelné čerpadlo: sazba D57d, nové spínání HDO a ceny 2026</a></h3><p>Tepelné čerpadlo se vyplatí s dvoutarifní sazbou D57d. Co musí dům splnit, co se změnilo u HDO na Plzeňsku a kolik vyjde topení oproti plynu a přímotopu.</p></article>
<article class="clanek"><a class="clanek__media" href="#"><img alt="Nástěnná klimatizace Daikin Stylish v obývacím pokoji" height="720" src="assets/foto/daikin-klima-styl2.webp" width="1280"/></a><span class="clanek__meta">30. 10. 2026</span><h3><a href="#">Topí klimatizace i v mrazu? Co zvládne split v zimě</a></h3><p>Splitová klimatizace je tepelné čerpadlo vzduch-vzduch. Topí levněji než přímotop, ale v mrazu jí klesá výkon. Kdy stačí jako hlavní topení a kdy ne.</p></article>
</div>
</div>
</section></main>
Formuláře
Poptávka
Nadpis, text, telefon a e-mail vlevo, formulář s výběry, poli a souhlasem vpravo. Chyby se ukazují u polí, po odeslání se formulář vymění za poděkování. Třídy: poptavka, form, ms, form__done.
HTML kód
<main><section class="sek sek--cream poptavka" id="poptavka-sek">
<div class="w">
<div class="poptavka__in">
<div class="poptavka__tx">
<span class="eyebrow">Nezávazná poptávka</span>
<h2>Pošlete nám nezávaznou poptávku</h2>
<p>Ozveme se většinou ještě tentýž den a domluvíme návštěvu i výpočet tepelné ztráty, obojí zdarma.</p>
<a class="poptavka__tel" href="#">+420 724 244 288</a>
<a class="poptavka__mail" href="#">poptavky@ekotopeni.com</a>
</div>
<div>
<div class="form__done" id="odeslano" tabindex="-1">
<span aria-hidden="true" class="form__done-ik"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M5 12l5 5l10 -10"></path></svg></span>
<h3>Děkujeme, poptávka je odeslaná</h3>
<p>Ozveme se vám na uvedený telefon nebo e-mail, většinou ještě tentýž den. Spěcháte? Volejte <a href="#">+420 724 244 288</a>.</p>
</div>
<form class="form" data-poptavka="" id="poptavka">
<h3 class="form__h">Nezávazná poptávka</h3>
<p class="form__err" data-err="1" hidden="">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje, nebo nám zavolejte.</p>
<input name="stranka" type="hidden" value=""/>
<input name="kontrola" type="hidden" value=""/>
<input name="navsteva" type="hidden" value=""/>
<div aria-hidden="true" class="hp-field"><label for="f-web">Web</label><input autocomplete="off" id="f-web" name="web" tabindex="-1"/></div>
<div class="form__g">
<div class="field field--cela"><label for="f-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" name="jmeno" required=""/><p class="field__err" hidden="" id="f-jmeno-err"></p></div>
<div class="field"><label for="f-email">E-mail</label><input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zkontrolujte e-mail, např. jmeno@email.cz." id="f-email" name="email" required="" type="email"/><p class="field__err" hidden="" id="f-email-err"></p></div>
<div class="field"><label for="f-telefon">Telefon</label><input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zkontrolujte telefon, např. 777 123 456." id="f-telefon" name="telefon" required="" type="tel"/><p class="field__err" hidden="" id="f-telefon-err"></p></div>
<div class="field field--cela"><label for="f-obec">Adresa realizace</label><div class="navrhy-box"><input aria-autocomplete="list" aria-controls="f-obec-navrhy" aria-describedby="f-obec-err" aria-expanded="false" autocomplete="off" data-msg="Napište adresu realizace." id="f-obec" name="obec" required="" role="combobox"/><button aria-label="Použít moji polohu" class="navrhy__poloha" title="Použít moji polohu" type="button"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M4 12a8 8 0 1 0 16 0a8 8 0 0 0 -16 0"></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="M20 12h2"></path><path d="M2 12h2"></path></svg></button><ul class="navrhy" hidden="" id="f-obec-navrhy" role="listbox"></ul></div><p class="field__napoveda"><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"></path></svg>
Začněte psát ulici a číslo, například Koželužská 1, a vyberte adresu z nabídky nebo pomocí ikony polohy.</p><p class="field__err" hidden="" id="f-obec-err"></p></div>
<div class="field field--cela"><span class="field__label" id="f-reseni-l">Co řešíte</span><details aria-describedby="f-reseni-err" class="ms" data-msg="Vyberte, co řešíte."><summary aria-labelledby="f-reseni-l">Vyberte</summary><div aria-labelledby="f-reseni-l" class="ms__list" role="group"><label><input name="reseni[]" type="checkbox" value="Výměna kotle na uhlí nebo dřevo za tepelné čerpadlo"/>Výměna kotle na uhlí nebo dřevo za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Výměna elektrokotle za tepelné čerpadlo"/>Výměna elektrokotle za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Výměna plynového kotle za tepelné čerpadlo"/>Výměna plynového kotle za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Tepelné čerpadlo do novostavby"/>Tepelné čerpadlo do novostavby</label><label><input name="reseni[]" type="checkbox" value="Klimatizace"/>Klimatizace</label><label><input name="reseni[]" type="checkbox" value="Servis nebo roční prohlídka"/>Servis nebo roční prohlídka</label><label><input name="reseni[]" type="checkbox" value="Jiné"/>Jiné</label></div></details><p class="field__err" hidden="" id="f-reseni-err"></p></div>
<div class="field field--cela"><label for="f-zprava">Zpráva</label><textarea id="f-zprava" name="zprava" placeholder="Napište, kdy to chcete řešit a co je dobré vědět předem" rows="5"></textarea></div>
</div>
<div class="form__souhlas"><input aria-describedby="f-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="f-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="field__err" hidden="" id="f-souhlas-err"></p></div>
<div class="form__send"><button class="btn" type="submit">Odeslat poptávku<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></button><p>Odeslání poptávky je nezávazné a zdarma.<br/>Odpovídáme většinou ještě tentýž den.</p></div>
</form>
</div>
</div>
</div>
</section></main>
Kontakt
Úvod stránky Kontakt s H1, kontakty a sídlem firmy vedle formuláře poptávky. Třídy: poptavka--uvod, kontakty.
HTML kód
<main><section class="sek sek--cream poptavka poptavka--uvod" id="poptavka-sek">
<div class="w">
<div class="poptavka__in">
<div class="poptavka__tx">
<span class="eyebrow">Kontakt</span>
<h1>Ozvěte se, poptávka je nezávazná</h1>
<p>Napište nám, čím dnes topíte a kde dům stojí. Odpovídáme většinou ještě tentýž den, výpočet tepelné ztráty je zdarma. Montujeme na Plzeňsku a Příbramsku, do 80 km od Plzně.</p>
<ul class="kontakty">
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2"></path></svg>
<a class="kontakty__velky" href="#">+420 724 244 288</a></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path><path d="M3 7l9 6l9 -6"></path></svg>
<a class="kontakty__velky kontakty__mail" href="#">poptavky@ekotopeni.com</a></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"></path></svg>
<a href="#" rel="noopener" target="_blank">Koželužská 3034/1, 301 00 Plzeň</a><button aria-label="Zkopírovat adresu" class="kontakty__kopie" data-kopirovat="Koželužská 3034/1, 301 00 Plzeň" title="Zkopírovat adresu" type="button"><svg aria-hidden="true" class="kopie__ik kopie__ik--kopie" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z"></path><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"></path></svg><svg aria-hidden="true" class="kopie__ik kopie__ik--ok" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M5 12l5 5l10 -10"></path></svg></button></li>
<li><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg>
<span>Po až pá 8.00 až 17.00, poptávky i o víkendu</span></li>
</ul>
<p class="kontakty__firma">Eko topení s.r.o., IČO 24504556, DIČ CZ24504556, Koželužská 3034/1, 301 00 Plzeň. Zapsaná v obchodním rejstříku u Krajského soudu v Plzni, oddíl C, vložka 48078.</p>
</div>
<div>
<div class="form__done" id="odeslano" tabindex="-1">
<span aria-hidden="true" class="form__done-ik"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24"><path d="M5 12l5 5l10 -10"></path></svg></span>
<h3>Děkujeme, poptávka je odeslaná</h3>
<p>Ozveme se vám na uvedený telefon nebo e-mail, většinou ještě tentýž den. Spěcháte? Volejte <a href="#">+420 724 244 288</a>.</p>
</div>
<form class="form" data-poptavka="" id="poptavka">
<h3 class="form__h">Nezávazná poptávka</h3>
<p class="form__err" data-err="1" hidden="">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje, nebo nám zavolejte.</p>
<input name="stranka" type="hidden" value="kontakt"/>
<input name="kontrola" type="hidden" value=""/>
<input name="navsteva" type="hidden" value=""/>
<div aria-hidden="true" class="hp-field"><label for="f-web">Web</label><input autocomplete="off" id="f-web" name="web" tabindex="-1"/></div>
<div class="form__g">
<div class="field field--cela"><label for="f-jmeno">Jméno a příjmení (firma)</label><input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" name="jmeno" required=""/><p class="field__err" hidden="" id="f-jmeno-err"></p></div>
<div class="field"><label for="f-email">E-mail</label><input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zkontrolujte e-mail, např. jmeno@email.cz." id="f-email" name="email" required="" type="email"/><p class="field__err" hidden="" id="f-email-err"></p></div>
<div class="field"><label for="f-telefon">Telefon</label><input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zkontrolujte telefon, např. 777 123 456." id="f-telefon" name="telefon" required="" type="tel"/><p class="field__err" hidden="" id="f-telefon-err"></p></div>
<div class="field field--cela"><label for="f-obec">Adresa realizace</label><div class="navrhy-box"><input aria-autocomplete="list" aria-controls="f-obec-navrhy" aria-describedby="f-obec-err" aria-expanded="false" autocomplete="off" data-msg="Napište adresu realizace." id="f-obec" name="obec" required="" role="combobox"/><button aria-label="Použít moji polohu" class="navrhy__poloha" title="Použít moji polohu" type="button"><svg aria-hidden="true" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M4 12a8 8 0 1 0 16 0a8 8 0 0 0 -16 0"></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="M20 12h2"></path><path d="M2 12h2"></path></svg></button><ul class="navrhy" hidden="" id="f-obec-navrhy" role="listbox"></ul></div><p class="field__napoveda"><svg aria-hidden="true" class="ik" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6" viewbox="0 0 24 24"><path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path><path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0"></path></svg>
Začněte psát ulici a číslo, například Koželužská 1, a vyberte adresu z nabídky nebo pomocí ikony polohy.</p><p class="field__err" hidden="" id="f-obec-err"></p></div>
<div class="field field--cela"><span class="field__label" id="f-reseni-l">Co řešíte</span><details aria-describedby="f-reseni-err" class="ms" data-msg="Vyberte, co řešíte."><summary aria-labelledby="f-reseni-l">Vyberte</summary><div aria-labelledby="f-reseni-l" class="ms__list" role="group"><label><input name="reseni[]" type="checkbox" value="Výměna kotle na uhlí nebo dřevo za tepelné čerpadlo"/>Výměna kotle na uhlí nebo dřevo za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Výměna elektrokotle za tepelné čerpadlo"/>Výměna elektrokotle za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Výměna plynového kotle za tepelné čerpadlo"/>Výměna plynového kotle za tepelné čerpadlo</label><label><input name="reseni[]" type="checkbox" value="Tepelné čerpadlo do novostavby"/>Tepelné čerpadlo do novostavby</label><label><input name="reseni[]" type="checkbox" value="Klimatizace"/>Klimatizace</label><label><input name="reseni[]" type="checkbox" value="Servis nebo roční prohlídka"/>Servis nebo roční prohlídka</label><label><input name="reseni[]" type="checkbox" value="Jiné"/>Jiné</label></div></details><p class="field__err" hidden="" id="f-reseni-err"></p></div>
<div class="field field--cela"><label for="f-zprava">Zpráva</label><textarea id="f-zprava" name="zprava" placeholder="Napište, kdy to chcete řešit a co je dobré vědět předem" rows="5"></textarea></div>
</div>
<div class="form__souhlas"><input aria-describedby="f-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="f-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="field__err" hidden="" id="f-souhlas-err"></p></div>
<div class="form__send"><button class="btn" type="submit">Odeslat poptávku<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14"></path><path d="M13 18l6-6"></path><path d="M13 6l6 6"></path></svg></button><p>Odeslání poptávky je nezávazné a zdarma.<br/>Odpovídáme většinou ještě tentýž den.</p></div>
</form>
</div>
</div>
</div>
</section></main>
Stránka nenalezena
Vystředěná ikona, štítek 404, nadpis, text a tlačítko zpět, pod nimi karty s odkazy na hlavní stránky. Třídy: e404.
