# Design system BOOKING STUDIO

Tento soubor popisuje design system BOOKING STUDIO. 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.

Rezervační systém pro ubytování, akce a kurzy na vlastním webu. Jednorázová cena, žádné provize.

Písmo: Matter. Živý web: https://bookingstudio.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/bookingstudio/. Sestaveno 12. 11. 2026.

## Soubory

Načti je v tomto pořadí:

- https://www.romankacerek.cz/dev/designsystem/bookingstudio/site/styly-stranky.css

Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/bookingstudio/site/.

## Pravidla

### Barvy

- Značková barva je `--blue` #0000ff. Používá se na odkazy, štítky, ikony, odrážky a v přechodu `linear-gradient(135deg,#0000ff,#0066ff)` na hlavním tlačítku a číslech kroků.
- Úvod a závěrečný pás mají přechod `linear-gradient(160deg,#0000ff,#1d4dff 55%,#2d7bff)` s bílým textem. Text na něm je bílý nebo `#e6eeff`.
- Podklad stránky je `--paper` #ffffff, střídavé sekce `--mint` #eef2f0, tmavší mátová `--mint-2` #dde7e4.
- Text je `--ink` #0a0a0a, popisky a štítky `--slate-2` #55625e. Linky a okraje karet `--line` #e2e8e5.
- Zelená #00B341 a červená #E53030 jsou jen pro odrážky srovnání, ne pro dekoraci.

### Písmo

- Jediná rodina je `Regular` ve váhách 400, 500, 600 a 700 s alternativou `ss01`. Tělo má 19 px a řádkování 1.6.
- Nadpisy `h1` až `h4` jsou váha 700 s řádkováním 1.1. `h2` a třída `.hl` mají modrý přechod místo plné barvy.
- Štítky nad nadpisy jsou malé, váha 600, velká písmena a rozestup `.13em`, barva `--blue` nebo `--slate-2`.
- Čísla (ceny, kroky, statistiky) mají třídu `.num` a tabulární číslice.

### Rozvržení

- Obsah je v `.wrap` s maximální šířkou `--maxw` 1560 px a bočním okrajem `--pad`.
- Sekce `.sec` mají svislý okraj `clamp(56px,7vw,104px)`. Každá druhá sekce je `.sec--mint`.
- Mřížky: `.grid--3` pro tři karty, `.steps` pro tři kroky, `.pillars` pro čtyři sloupce, `.featrow` pro text vedle obrázku. Na telefonu vše do jednoho sloupce pod 860 px.
- Nadpis sekce je `.sec-head` a na střed `.sec-head--center` s perexem `.lede`.

### Tvary

- Karty a obrázky mají rádius `--r` 12 px, cenová karta a formulář 16 px, velké karty `.who__card` 24 px.
- Tlačítka a štítky jsou plně kulaté (`--r-pill` 999px), ikony a čísla kroků 50 %.
- Stíny se nepoužívají, kromě jemného stínu na bublině v úvodu a na ovládání lightboxu. Karty dělí linka 1 px `--line`.

### Obrázky

- Úvod a ukázky funkcí jsou vrstvené obrázky `.pxl` s poměrem 4:3, kde karta rozhraní leží přes fotku.
- Fotky v kartách `.who__card` jsou svisle ořezané, v novinkách `.news` poměr 16:9.
- Loga klientů jsou SVG v jedné řadě, výška `clamp(36px,3.7vw,49px)`.

### Tlačítka

- Hlavní akce je `btn btn--primary` s modrým přechodem. Doplňková je `btn--ghost` s přechodovým obrysem.
- Na modrém podkladu se používá `btn--white` a `btn--outline`.
- Odkaz na demo je `.pill` s šipkou. Na obrazovce má být jedno hlavní tlačítko.

### Jazyk

- Web je česky a anglicky, systém umí i slovensky a německy. Oslovení je „vy“, tón přímý a věcný.
- Za jednopísmennými předložkami a před jednotkami jsou nezlomitelné mezery, ceny se píší `29 990 Kč`.

## Barvy

| Název | Hodnota | V tmavém tématu | Použití |
| --- | --- | --- | --- |
| --blue | #0000ff |  | Odkazy, štítky, ikony, odrážky a rámeček zaměření. |
| --mint | #eef2f0 |  | Podklad střídavých sekcí a formuláře. |
| --paper | #ffffff |  | Podklad stránky a karet. |
| --ink | #0a0a0a |  | Text a nadpisy. Stejnou hodnotu má --slate. |
| --mint-2 | #dde7e4 |  | Podklad karet s fotkou před načtením. |
| --slate-2 | #55625e |  | Popisky, štítky a údaje. |
| --line | #e2e8e5 |  | Okraje karet, polí a dělicí linky. |
| přechod tlačítka | linear-gradient(135deg,#0000ff 0%,#0066ff 100%) |  | Hlavní tlačítko, čísla kroků, obrys ghost tlačítka. |
| přechod hero | linear-gradient(160deg,#0000ff 0%,#1d4dff 55%,#2d7bff 100%) |  | Pozadí úvod a závěrečného pásu. |
| přechod textu | linear-gradient(135deg,#000cff 0,#2874fc 100%) |  | Výplň nadpisů h2, tříd .hl a ceny. |
| #e6eeff | #e6eeff |  | Perex v úvodu a závěrečném pásu. |
| #cfe0ff | #cfe0ff |  | Štítek nad nadpisem v úvodu. |
| #eef3ff | #eef3ff |  | Zvýrazněný řádek BOOKING STUDIO ve srovnání. |
| #f1f4f8 | #f1f4f8 |  | Podklad štítku na kartě. |
| #00B341 | #00B341 |  | Zelená odrážka ve srovnání. |
| #E53030 | #E53030 |  | Červená odrážka ve srovnání. |
| #4CAF50 | #4CAF50 |  | Zpráva o odeslaném formuláři. |
| #E91E63 | #E91E63 |  | Zpráva o chybě formuláře. |

## Typografie

| Styl | Hodnoty | Použití |
| --- | --- | --- |
| H1 | viz CSS | Nadpis úvod, bílý, nejvýš 20 znaků na řádek. |
| H2 | viz CSS | Nadpis sekce, modrý přechod. |
| H3 | viz CSS | Nadpis karty. |
| Štítek úvodu | viz CSS | Řádek nad H1, velká písmena. |
| Perex | viz CSS | Úvod pod nadpisem sekce. |
| Text karty | viz CSS | Běžný text v kartách. |
| Cena | viz CSS | Velká cena s gradientem. |
| Štítek | viz CSS | Malý modrý štítek nad nadpisem karty. |
| Text článku | viz CSS | Text novinky. |

## Mezery a šířky

| Název | Hodnota | Použití |
| --- | --- | --- |
| --pad | clamp(20px,4vw,52px) | Boční okraj stránky. |
| --maxw | 1560px | Maximální šířka obsahu. |
| sekce | clamp(56px,7vw,104px) | Svislý okraj .sec. |
| mezera mřížky | clamp(18px,2.2vw,30px) | Mezera v .grid a .feat. |
| výška navigace | 74px | 66 px na telefonu. |

## Rádiusy

| Název | Hodnota | Použití |
| --- | --- | --- |
| --r | 12px | Karty, kroky, obrázky. |
| --r-pill | 999px | Tlačítka, pilulky, štítek karty. |
| karta ceny a formulář | 16px | .price, .form, srovnání, menu jazyka. |
| karta s fotkou | 24px | .who__card. |
| pole formuláře | 10px | Vstupy, výběry, víceřádková pole. |

## Komponenty: Úvod

### Navigace

Lepivá lišta s logem, odkazy, telefonem, tlačítkem a přepínačem jazyka. Třídy: `nav`, `nav__in`, `brand`, `nav__links`, `nav__tel`, `lang`.

```html
<header class="nav">
<div class="wrap nav__in">
<a class="brand" href="#">
<img alt="" height="34" src="data:vynecháno" width="34"/>
<b>BOOKING STUDIO</b>
</a>
<nav aria-label="Hlavní navigace" class="nav__links">
<a href="#">Funkce</a>
<a href="#">Pro koho</a>
<a href="#">Ceník</a>
<a href="#">Srovnání</a>
<a href="#">Dotazy</a>
<a href="#">Novinky</a>
</nav>
<a class="nav__tel" href="#">+420 775 350 332</a>
<a class="btn btn--primary" href="#">Chci rezervační systém</a>
<div class="lang">
<button aria-controls="langMenu" aria-expanded="false" aria-label="Jazyk stránky" class="lang__btn" type="button"><span class="lang__cur"><i class="lang__flag lang__flag--cs"></i><span class="lang__txt">Česky</span></span><svg aria-hidden="true" class="lang__chev" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></svg></button>
<div class="lang__menu" id="langMenu">
<a class="lang__opt is-active" href="#" hreflang="cs" lang="cs"><i class="lang__flag lang__flag--cs"></i>Česky</a>
<a class="lang__opt" href="#" hreflang="en" lang="en"><i class="lang__flag lang__flag--en"></i>English</a>
</div>
</div>
<button aria-controls="mobMenu" aria-expanded="false" aria-label="Otevřít menu" class="nav__burger" id="navBurger"><span></span><span></span><span></span></button>
</div>
</header>
```

### Mobilní menu

Boční panel menu na telefonu, v katalogu vystavený staticky. Třídy: `mobile-menu`, `mobile-menu__x`, `mobile-menu__tel`.

```html
<nav aria-label="Mobilní navigace" class="mobile-menu" id="mobMenu">
<button aria-label="Zavřít menu" class="mobile-menu__x" id="mobClose"><span></span><span></span></button>
<a href="#">Funkce</a>
<a href="#">Pro koho</a>
<a href="#">Ceník</a>
<a href="#">Srovnání</a>
<a href="#">Dotazy</a>
<a href="#">Novinky</a>
<a class="mobile-menu__tel" href="#">+420 775 350 332</a>
<a class="btn btn--primary" href="#">Chci rezervační systém</a>
<div class="lang">
<button aria-controls="langMenuM" aria-expanded="false" aria-label="Jazyk stránky" class="lang__btn" type="button"><span class="lang__cur"><i class="lang__flag lang__flag--cs"></i><span class="lang__txt">Česky</span></span><svg aria-hidden="true" class="lang__chev" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></svg></button>
<div class="lang__menu" id="langMenuM">
<a class="lang__opt is-active" href="#" hreflang="cs" lang="cs"><i class="lang__flag lang__flag--cs"></i>Česky</a>
<a class="lang__opt" href="#" hreflang="en" lang="en"><i class="lang__flag lang__flag--en"></i>English</a>
</div>
</div>
</nav>
```

### Úvod

Modrý přechodový úvod se štítkem, nadpisem, dvěma tlačítky a vrstveným obrázkem s bublinou. Třídy: `v2hero`, `v2hero__eyebrow`, `v2hero__lede`, `v2hero__btns`, `pxl--hero`.

```html
<main><section class="v2hero" id="top">
<div aria-hidden="true" class="v2hero__bg">
<svg style="display:none" xmlns="http://www.w3.org/2000/svg"><symbol id="hi-bed" viewbox="0 0 256 256"><path d="M216,76H28V48a4,4,0,0,0-8,0V208a4,4,0,0,0,8,0V172H244v36a4,4,0,0,0,8,0V112A36,36,0,0,0,216,76ZM28,84h80v80H28Zm88,80V84H216a28,28,0,0,1,28,28v52Z"></path></symbol><symbol id="hi-confetti" viewbox="0 0 256 256"><path d="M110.08,54a13.8,13.8,0,0,0-22.73,5.05L34.85,203.47A13.82,13.82,0,0,0,47.76,222a14,14,0,0,0,4.77-.85l144.38-52.5a13.8,13.8,0,0,0,5-22.73ZM48.43,209.87a1.79,1.79,0,0,1-2.3-2.3L61.31,165.8,90.2,194.68Zm54.21-19.71-36.8-36.81L80.51,113,143,175.49ZM194,156.07a1.74,1.74,0,0,1-1.14,1.3L155.44,171,85,100.55,98.63,63.19a1.72,1.72,0,0,1,1.3-1.14,1.58,1.58,0,0,1,.41,0,1.72,1.72,0,0,1,1.25.53l91.88,91.88A1.73,1.73,0,0,1,194,156.07ZM162,72a35.52,35.52,0,0,1,3.63-14.68C170.57,47.44,179.93,42,192,42c7.47,0,12.53-2.74,15.48-8.38A24.18,24.18,0,0,0,210,24,6,6,0,0,1,216,18h0a6,6,0,0,1,6,6c0,10.38-6.27,30-30,30-7.47,0-12.53,2.74-15.48,8.38A24,24,0,0,0,174,72a6,6,0,0,1-6,6h0A6,6,0,0,1,162,72ZM138,40V16a6,6,0,0,1,12,0V40a6,6,0,0,1-12,0Zm98.24,83.76a6,6,0,1,1-8.48,8.48l-16-16a6,6,0,0,1,8.48-8.48Zm5.66-46.07-24,8a6,6,0,1,1-3.8-11.38l24-8a6,6,0,0,1,3.8,11.38Z"></path></symbol><symbol id="hi-key" viewbox="0 0 256 256"><path d="M215.15,40.85A78,78,0,0,0,86.2,121.31l-56.1,56.1a13.94,13.94,0,0,0-4.1,9.9V216a14,14,0,0,0,14,14H72a6,6,0,0,0,6-6V206H96a6,6,0,0,0,6-6V182h18a6,6,0,0,0,4.24-1.76l10.45-10.44A77.59,77.59,0,0,0,160,174h.1A78,78,0,0,0,215.15,40.85ZM226,98.16c-1.12,35.16-30.67,63.8-65.88,63.84a65.93,65.93,0,0,1-24.51-4.67,6,6,0,0,0-6.64,1.26L117.51,170H96a6,6,0,0,0-6,6v18H72a6,6,0,0,0-6,6v18H40a2,2,0,0,1-2-2V187.31a2,2,0,0,1,.58-1.41l58.83-58.83a6,6,0,0,0,1.26-6.64A65.61,65.61,0,0,1,94,95.92C94,60.71,122.68,31.16,157.83,30A66,66,0,0,1,226,98.16ZM190,76a10,10,0,1,1-10-10A10,10,0,0,1,190,76Z"></path></symbol><symbol id="hi-calendar-blank" viewbox="0 0 256 256"><path d="M208,36H180V24a4,4,0,0,0-8,0V36H84V24a4,4,0,0,0-8,0V36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36ZM48,44H76V56a4,4,0,0,0,8,0V44h88V56a4,4,0,0,0,8,0V44h28a4,4,0,0,1,4,4V84H44V48A4,4,0,0,1,48,44ZM208,212H48a4,4,0,0,1-4-4V92H212V208A4,4,0,0,1,208,212Z"></path></symbol><symbol id="hi-coffee" viewbox="0 0 256 256"><path d="M82,56V24a6,6,0,0,1,12,0V56a6,6,0,0,1-12,0Zm38,6a6,6,0,0,0,6-6V24a6,6,0,0,0-12,0V56A6,6,0,0,0,120,62Zm32,0a6,6,0,0,0,6-6V24a6,6,0,0,0-12,0V56A6,6,0,0,0,152,62Zm94,58v8a38,38,0,0,1-36.94,38,94.55,94.55,0,0,1-31.13,44H208a6,6,0,0,1,0,12H32a6,6,0,0,1,0-12H62.07A94.34,94.34,0,0,1,26,136V88a6,6,0,0,1,6-6H208A38,38,0,0,1,246,120Zm-44,16V94H38v42a82.27,82.27,0,0,0,46.67,74h70.66A82.27,82.27,0,0,0,202,136Zm32-16a26,26,0,0,0-20-25.29V136a93.18,93.18,0,0,1-1.69,17.64A26,26,0,0,0,234,128Z"></path></symbol><symbol id="hi-paint-brush" viewbox="0 0 256 256"><path d="M224,26c-20.8,0-44.11,11.41-69.3,33.9C136.62,76.06,121,94.9,110.3,109A58,58,0,0,0,34,164c0,32.07-20.43,46.39-21.35,47A6,6,0,0,0,16,222H92a58,58,0,0,0,55-76.3c14.08-10.67,32.92-26.32,49.08-44.4C218.59,76.11,230,52.8,230,32A6,6,0,0,0,224,26ZM92,210H30.65C37.92,200.85,46,185.78,46,164a46,46,0,1,1,46,46Zm29.49-95.91c3.6-4.67,7.88-10,12.71-15.69a78.17,78.17,0,0,1,23.4,23.4c-5.67,4.83-11,9.11-15.69,12.71A58.38,58.38,0,0,0,121.49,114.09Zm45.2-.3a90.24,90.24,0,0,0-24.48-24.48C163.05,66.46,191,42,217.56,38.44,214,65,189.54,93,166.69,113.79Z"></path></symbol><symbol id="hi-bathtub" viewbox="0 0 256 256"><path d="M240,100H204V96a4,4,0,0,0-4-4H136a4,4,0,0,0-4,4v4H60V52A16,16,0,0,1,76,36,16.49,16.49,0,0,1,92.08,48.8a4,4,0,1,0,7.84-1.6A24.32,24.32,0,0,0,76,28,24,24,0,0,0,52,52v48H16a4,4,0,0,0-4,4v40a52.06,52.06,0,0,0,52,52h4v20a4,4,0,0,0,8,0V196H180v20a4,4,0,0,0,8,0V196h4a52.06,52.06,0,0,0,52-52V104A4,4,0,0,0,240,100Zm-100,0h56v40H140Zm96,44a44.05,44.05,0,0,1-44,44H64a44.05,44.05,0,0,1-44-44V108H132v36a4,4,0,0,0,4,4h64a4,4,0,0,0,4-4V108h32Z"></path></symbol><symbol id="hi-suitcase" viewbox="0 0 256 256"><path d="M216,58H174V48a22,22,0,0,0-22-22H104A22,22,0,0,0,82,48V58H40A14,14,0,0,0,26,72V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V72A14,14,0,0,0,216,58ZM94,48a10,10,0,0,1,10-10h48a10,10,0,0,1,10,10V58H94Zm68,22V202H94V70ZM38,200V72a2,2,0,0,1,2-2H82V202H40A2,2,0,0,1,38,200Zm180,0a2,2,0,0,1-2,2H174V70h42a2,2,0,0,1,2,2Z"></path></symbol><symbol id="hi-buildings" viewbox="0 0 256 256"><path d="M240,212H220V96a12,12,0,0,0-12-12H140V32a12,12,0,0,0-18.66-10l-80,53.33a12,12,0,0,0-5.34,10V212H16a4,4,0,0,0,0,8H240a4,4,0,0,0,0-8ZM208,92a4,4,0,0,1,4,4V212H140V92ZM44,85.34A4,4,0,0,1,45.78,82l80-53.33A4,4,0,0,1,132,32V212H44ZM108,112v16a4,4,0,0,1-8,0V112a4,4,0,0,1,8,0Zm-32,0v16a4,4,0,0,1-8,0V112a4,4,0,0,1,8,0Zm0,56v16a4,4,0,0,1-8,0V168a4,4,0,0,1,8,0Zm32,0v16a4,4,0,0,1-8,0V168a4,4,0,0,1,8,0Z"></path></symbol><symbol id="hi-clock" viewbox="0 0 256 256"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z"></path></symbol><symbol id="hi-ticket" viewbox="0 0 256 256"><path d="M232,102a6,6,0,0,0,6-6V64a14,14,0,0,0-14-14H32A14,14,0,0,0,18,64V96a6,6,0,0,0,6,6,26,26,0,0,1,0,52,6,6,0,0,0-6,6v32a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V160a6,6,0,0,0-6-6,26,26,0,0,1,0-52ZM30,192V165.53a38,38,0,0,0,0-75.06V64a2,2,0,0,1,2-2H90V194H32A2,2,0,0,1,30,192Zm196-26.47V192a2,2,0,0,1-2,2H102V62H224a2,2,0,0,1,2,2V90.47a38,38,0,0,0,0,75.06Z"></path></symbol><symbol id="hi-users-three" viewbox="0 0 256 256"><path d="M237,147.44a4,4,0,0,1-5.48-1.4c-8.33-14-20.93-22-34.56-22a4,4,0,0,1-1.2-.2,36.76,36.76,0,0,1-3.8.2,4,4,0,0,1,0-8,28,28,0,1,0-27.12-35,4,4,0,0,1-7.75-2,36,36,0,1,1,54,39.48c10.81,3.85,20.51,12,27.31,23.48A4,4,0,0,1,237,147.44ZM187.46,214a4,4,0,0,1-1.46,5.46,3.93,3.93,0,0,1-2,.54,4,4,0,0,1-3.46-2,61,61,0,0,0-105.08,0,4,4,0,0,1-6.92-4,68.35,68.35,0,0,1,39.19-31,44,44,0,1,1,40.54,0A68.35,68.35,0,0,1,187.46,214ZM128,180a36,36,0,1,0-36-36A36,36,0,0,0,128,180ZM64,116A28,28,0,1,1,91.12,81a4,4,0,0,0,7.75-2A36,36,0,1,0,45.3,118.75,63.55,63.55,0,0,0,12.8,141.6a4,4,0,0,0,6.4,4.8A55.55,55.55,0,0,1,64,124a4,4,0,0,0,0-8Z"></path></symbol><symbol id="hi-presentation-chart" viewbox="0 0 256 256"><path d="M216,42H134V24a6,6,0,0,0-12,0V42H40A14,14,0,0,0,26,56V176a14,14,0,0,0,14,14H83.52L59.31,220.25a6,6,0,0,0,9.38,7.5L98.88,190h58.24l30.19,37.75a6,6,0,0,0,9.38-7.5L172.48,190H216a14,14,0,0,0,14-14V56A14,14,0,0,0,216,42Zm2,134a2,2,0,0,1-2,2H40a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2H216a2,2,0,0,1,2,2ZM102,120v24a6,6,0,0,1-12,0V120a6,6,0,0,1,12,0Zm32-16v40a6,6,0,0,1-12,0V104a6,6,0,0,1,12,0Zm32-16v56a6,6,0,0,1-12,0V88a6,6,0,0,1,12,0Z"></path></symbol><symbol id="hi-map-pin" viewbox="0 0 256 256"><path d="M128,66a38,38,0,1,0,38,38A38,38,0,0,0,128,66Zm0,64a26,26,0,1,1,26-26A26,26,0,0,1,128,130Zm0-112a86.1,86.1,0,0,0-86,86c0,30.91,14.34,63.74,41.47,94.94a252.32,252.32,0,0,0,41.09,38,6,6,0,0,0,6.88,0,252.32,252.32,0,0,0,41.09-38c27.13-31.2,41.47-64,41.47-94.94A86.1,86.1,0,0,0,128,18Zm0,206.51C113,212.93,54,163.62,54,104a74,74,0,0,1,148,0C202,163.62,143,212.93,128,224.51Z"></path></symbol><symbol id="hi-fork-knife" viewbox="0 0 256 256"><path d="M74,88V40a6,6,0,0,1,12,0V88a6,6,0,0,1-12,0ZM214,40V224a6,6,0,0,1-12,0V174H152a6,6,0,0,1-6-6c0-4.41.68-108.25,59.64-133.51A6,6,0,0,1,214,40ZM202,50c-36.79,24.29-42.82,91.48-43.81,112H202ZM117.92,39a6,6,0,1,0-11.84,2L114,88.48a34,34,0,0,1-68,0L53.92,41a6,6,0,0,0-11.84-2l-8,48A6.61,6.61,0,0,0,34,88a46.06,46.06,0,0,0,40,45.6V224a6,6,0,0,0,12,0V133.6A46.06,46.06,0,0,0,126,88a6.61,6.61,0,0,0-.08-1Z"></path></symbol><symbol id="hi-microphone-stage" viewbox="0 0 256 256"><path d="M168,18A69.94,69.94,0,0,0,98.74,98l-70,95.46a13.92,13.92,0,0,0,1.39,18.17l14.3,14.3a13.93,13.93,0,0,0,18.17,1.39l95.46-70A70,70,0,1,0,168,18Zm58,70a57.65,57.65,0,0,1-13,36.52L131.49,43A57.95,57.95,0,0,1,226,88ZM55.5,217.59a2,2,0,0,1-2.6-.2L38.61,203.1a2,2,0,0,1-.2-2.6l64.22-87.56a70.32,70.32,0,0,0,40.44,40.43ZM110,88a57.73,57.73,0,0,1,13-36.52L204.53,133A58,58,0,0,1,110,88Zm-1.75,59.75a6,6,0,0,1,0,8.49l-8,8a6,6,0,1,1-8.49-8.49l8-8A6,6,0,0,1,108.26,147.74Z"></path></symbol></svg>
<i data-d="0.9" style="left:7%;top:14%;--s:110px;--r:-8deg"><svg><use href="#hi-bed"></use></svg></i><i data-d="-0.3" style="left:20%;top:6%;--s:40px;--r:0deg"><svg><use href="#hi-confetti"></use></svg></i><i data-d="0.5" style="left:22%;top:31%;--s:56px;--r:10deg"><svg><use href="#hi-key"></use></svg></i><i data-d="-0.7" style="left:12%;top:50%;--s:84px;--r:-4deg"><svg><use href="#hi-calendar-blank"></use></svg></i><i data-d="0.4" style="left:30%;top:60%;--s:48px;--r:6deg"><svg><use href="#hi-coffee"></use></svg></i><i data-d="-0.45" style="left:24%;top:82%;--s:52px;--r:-5deg"><svg><use href="#hi-paint-brush"></use></svg></i><i data-d="0.8" style="left:9%;top:86%;--s:96px;--r:3deg"><svg><use href="#hi-bathtub"></use></svg></i><i data-d="-0.4" style="left:33%;top:95%;--s:50px;--r:7deg"><svg><use href="#hi-suitcase"></use></svg></i><i data-d="-0.9" style="left:92%;top:12%;--s:104px;--r:6deg"><svg><use href="#hi-buildings"></use></svg></i><i data-d="0.3" style="left:79%;top:8%;--s:44px;--r:0deg"><svg><use href="#hi-clock"></use></svg></i><i data-d="-0.5" style="left:76%;top:30%;--s:64px;--r:-9deg"><svg><use href="#hi-ticket"></use></svg></i><i data-d="0.7" style="left:90%;top:48%;--s:82px;--r:4deg"><svg><use href="#hi-users-three"></use></svg></i><i data-d="-0.4" style="left:70%;top:62%;--s:58px;--r:-6deg"><svg><use href="#hi-presentation-chart"></use></svg></i><i data-d="0.6" style="left:88%;top:84%;--s:72px;--r:8deg"><svg><use href="#hi-map-pin"></use></svg></i><i data-d="-0.25" style="left:66%;top:8%;--s:38px;--r:0deg"><svg><use href="#hi-fork-knife"></use></svg></i><i data-d="0.35" style="left:68%;top:94%;--s:44px;--r:10deg"><svg><use href="#hi-microphone-stage"></use></svg></i>
</div>
<div class="wrap">
<p class="v2hero__eyebrow">Rezervační systém bez provizí</p>
<h1>Rezervační systém pro ubytování, akce či kurzy</h1>
<p class="v2hero__lede">Hosté si rezervují přímo u vás, na vašem webu a za vaše ceny. Žádné provize, žádné měsíční poplatky, systém je po zaplacení navždy váš.</p>
<div class="v2hero__btns">
<a class="btn btn--white" href="#">Vyzkoušet živé demo</a>
<a class="btn btn--outline" href="#">Chci rezervační systém</a>
</div>
<div class="v2hero__img">
<div aria-label="Zákazník rezervuje z mobilu, majiteli hned přijde potvrzení rezervace" class="pxl pxl--hero" role="img">
<img alt="" class="pxl__l" data-tr="26" data-y0="0" fetchpriority="high" height="900" sizes="(max-width:600px) calc(100vw - 40px), 560px" src="img/vrstvy/hero-foto.webp" srcset="img/vrstvy/hero-foto-800.webp 800w, img/vrstvy/hero-foto.webp 1200w" width="1200"/>
<div class="pxl__l hero-bub" data-tr="-46" data-y0="0">
<p class="hero-bub__jm"><span id="heroJmeno"></span></p>
<p class="hero-bub__tx"><span id="heroText"></span><span class="hero-bub__kur"></span></p>
</div>
</div>
</div>
</div>
</section></main>
```

### Chybová stránka 404

Text s kódem chyby a třemi tlačítky vedle vrstveného obrázku. Třídy: `nf`, `nf__code`, `nf__vis`, `btn-row`.

```html
<main class="nf">
<div class="wrap">
<div class="nf__txt">
<p class="nf__code">Chyba 404</p>
<h1 class="hl">Tady nic není. Ani volný termín.</h1>
<p class="lede">Stránka, kterou hledáte, neexistuje nebo se přestěhovala. Zkuste úvodní stránku, nebo si rovnou projděte demo rezervačního systému.</p>
<div class="btn-row">
<a class="btn btn--primary" href="#">Na úvodní stránku</a>
<a class="btn btn--ghost" href="#">Demo pro ubytování</a>
<a class="btn btn--ghost" href="#">Demo pro akce</a>
</div>
</div>
<div class="nf__vis">
<div aria-label="Zákazník rezervuje z mobilu, majiteli hned přijde potvrzení rezervace" class="pxl pxl--hero" role="img">
<img alt="" class="pxl__l" data-tr="26" data-y0="0" fetchpriority="high" height="900" src="img/vrstvy/hero-foto.webp" width="1200"/>
<div class="pxl__l hero-bub" data-tr="-46" data-y0="0">
<p class="hero-bub__jm">Ups,</p>
<p class="hero-bub__tx">tahle stránka neexistuje. Všechno najdete ale na úvodní stránce.</p>
</div>
</div>
</div>
</div>
</main>
```

## Komponenty: Prvky

### Tlačítka

Hlavní, doplňková, bílá a obrysová varianta, vedle odkazu pilulka. Třídy: `btn btn--primary`, `btn--ghost`, `btn--white`, `btn--outline`, `pill`.

```html
<div style="display:flex;flex-wrap:wrap;gap:12px;padding:32px;align-items:center"><a class="btn btn--primary" href="#">Chci rezervační systém</a><a class="btn btn--ghost" href="#">Zobrazit podrobné srovnání</a><a class="pill" href="#" style="margin-top:0">Otevřít demo</a></div><div class="v2hero" style="display:flex;flex-wrap:wrap;gap:12px;padding:32px;justify-content:center"><a class="btn btn--white" href="#">Vyzkoušet živé demo</a><a class="btn btn--outline" href="#">Chci rezervační systém</a></div>
```

### Štítky a odrážky

Štítek na kartě a seznam s modrými odrážkami s fajfkou. Třídy: `card__chip`, `news__tag`, `ticks`.

```html
<div style="padding:32px"><span class="card__chip" style="margin-top:0">bez channel manageru</span><p class="news__tag" style="margin-top:24px">Říjen 2026</p><ul class="ticks"><li>Cena za noc u každého volného dne</li><li>Obsazené termíny nejdou vybrat</li><li>Termín nebo pokoj můžete uzavřít jedním kliknutím</li></ul></div>
```

## Komponenty: Sekce

### Pruh důvěry

Čtyři čísla ve sloupcích s popiskem velkými písmeny. Třídy: `trust`, `trust__in`, `stat`, `stat__flags`.

```html
<main><section class="trust">
<div class="wrap">
<div class="trust__in">
<div class="stat"><b class="num"><svg aria-hidden="true" class="stat__g" viewbox="0 0 24 24"><path d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.7-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z" fill="#4285F4"></path><path d="M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.2v3.1C3.2 21.3 7.3 24 12 24z" fill="#34A853"></path><path d="M5.3 14.3c-.2-.7-.4-1.5-.4-2.3s.1-1.6.4-2.3V6.6H1.2C.4 8.2 0 10.1 0 12s.4 3.8 1.2 5.4l4.1-3.1z" fill="#FBBC05"></path><path d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4C18 1.2 15.2 0 12 0 7.3 0 3.2 2.7 1.2 6.6l4.1 3.1c.9-2.9 3.6-4.9 6.7-4.9z" fill="#EA4335"></path></svg>4,8</b><span><a href="#" rel="noopener" target="_blank">Hodnocení na Google</a></span></div>
<div class="stat"><b class="num">0 %</b><span>Provize z rezervací</span></div>
<div class="stat"><b class="num">3 roky</b><span>Aktualizací v ceně</span></div>
<div class="stat"><b aria-hidden="true" class="stat__flags"><i><svg aria-hidden="true" viewbox="0 0 24 24"><rect fill="#fff" height="12" width="24"></rect><rect fill="#d7141a" height="12" width="24" y="12"></rect><path d="M0 0L12 12L0 24Z" fill="#11457e"></path></svg></i><i><svg aria-hidden="true" viewbox="0 0 24 24"><rect fill="#fff" height="8" width="24"></rect><rect fill="#0b4ea2" height="8" width="24" y="8"></rect><rect fill="#ee1c25" height="8" width="24" y="16"></rect><path d="M5 6.5h6.4v6.2c0 2.3-1.6 3.6-3.2 4.3C6.6 16.3 5 15 5 12.7z" fill="#ee1c25" stroke="#fff" stroke-width=".9"></path><path d="M8.2 8v6.2M6.6 10h3.2M6.9 11.9h2.6" stroke="#fff" stroke-width=".9"></path></svg></i><i><svg aria-hidden="true" viewbox="0 0 24 24"><rect fill="#012169" height="24" width="24"></rect><path d="M0 0L24 24M24 0L0 24" stroke="#fff" stroke-width="3.5"></path><path d="M0 0L24 24M24 0L0 24" stroke="#c8102e" stroke-width="1.6"></path><path d="M12 0V24M0 12H24" stroke="#fff" stroke-width="6"></path><path d="M12 0V24M0 12H24" stroke="#c8102e" stroke-width="3.6"></path></svg></i><i><svg aria-hidden="true" viewbox="0 0 24 24"><rect fill="#000" height="8" width="24"></rect><rect fill="#dd0000" height="8" width="24" y="8"></rect><rect fill="#ffce00" height="8" width="24" y="16"></rect></svg></i></b><span>4 jazykové mutace</span></div>
</div>
</div>
</section></main>
```

### Čtyři pilíře

Nadpis sekce na střed a čtyři sloupce s ikonou v mátovém čtverci. Třídy: `sec-head--center`, `pillars`, `pillar`, `pillar__ico`.

```html
<main><section class="sec" id="funkce">
<div class="wrap">
<div class="sec-head sec-head--center">
<h2>Ať provozujete penzion, apartmány nebo kurzy, rezervace za vás vyřídí systém</h2>
<p class="lede">Všechno je v ceně, nic se nedokupuje ani nezapíná za příplatek. Prvotní nastavení uděláme za vás, měnit si to pak můžete jednoduše sami.</p>
</div>
<div class="pillars">
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M241.91,137.42,142.59,38.1a13.94,13.94,0,0,0-9.9-4.1H40a6,6,0,0,0-6,6v92.69a13.94,13.94,0,0,0,4.1,9.9l99.32,99.32a14,14,0,0,0,19.8,0l84.69-84.69A14,14,0,0,0,241.91,137.42Zm-8.49,11.31-84.69,84.69a2,2,0,0,1-2.83,0L46.59,134.1a2,2,0,0,1-.59-1.41V46h86.69a2,2,0,0,1,1.41.59l99.32,99.31A2,2,0,0,1,233.42,148.73ZM94,84A10,10,0,1,1,84,74,10,10,0,0,1,94,84Z"></path></svg></div><h3>Bez provizí a paušálů</h3><p>Jednorázová cena 29 990 Kč a dál nikomu nic neplatíte. Ani z rezervace, ani měsíčně.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z"></path></svg></div><h3>Vaše data u vás</h3><p>Běží na vašem hostingu, ne v cizím systému. Kontakty hostů máte v administraci i v exportech.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M245.37,213.32l-56-112a6,6,0,0,0-10.74,0l-22.3,44.6A90,90,0,0,1,105,127.19,101.73,101.73,0,0,0,133.82,62H160a6,6,0,0,0,0-12H102V32a6,6,0,0,0-12,0V50H32a6,6,0,0,0,0,12h89.79A89.71,89.71,0,0,1,96,119.23,89.81,89.81,0,0,1,75.11,86,6,6,0,1,0,63.8,90,101.66,101.66,0,0,0,87,127.2,89.56,89.56,0,0,1,32,146a6,6,0,0,0,0,12,101.55,101.55,0,0,0,64-22.63,102.11,102.11,0,0,0,54.53,22.17l-27.89,55.78a6,6,0,0,0,10.74,5.36L147.71,190h72.58l14.34,28.68A6,6,0,0,0,240,222a5.87,5.87,0,0,0,2.68-.64A6,6,0,0,0,245.37,213.32ZM153.71,178,184,117.42,214.29,178Z"></path></svg></div><h3>Česky, slovensky, anglicky, německy</h3><p>Web, rezervace i všechny e-maily pro hosty ve čtyřech jazycích. Přepínač jazyků je součástí systému.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg></div><h3>Podpora přímo od autorů</h3><p>Když něco potřebujete, píšete nebo voláte nám do Brna. Žádné call centrum, žádná podpora jen v angličtině.</p></div>
</div>


</div>
</section></main>
```

### Mřížka funkcí

Devět bílých karet s ikonou, nadpisem a odrážkami, při najetí modrý okraj. Třídy: `feat`, `feat__b`, `feat__ico`, `ticks`.

```html
<main><section class="sec" id="funkce"><div class="wrap"><div class="feat-all" hidden="" id="featAll">
<div class="feat">
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Zm-39.76-86.24a6,6,0,0,1,0,8.48l-48,48a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L116,167.51l43.76-43.75A6,6,0,0,1,168.24,123.76Z"></path></svg></div>
<h3>Rezervace a obsazenost</h3>
<ul class="ticks">
<li>Kalendář obsazenosti s cenou u každého dne</li>
<li>Systém sám hlídá kapacitu, u ubytování i minimální délku pobytu</li>
<li>Termín zavřete jedním kliknutím</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M241.91,137.42,142.59,38.1a13.94,13.94,0,0,0-9.9-4.1H40a6,6,0,0,0-6,6v92.69a13.94,13.94,0,0,0,4.1,9.9l99.32,99.32a14,14,0,0,0,19.8,0l84.69-84.69A14,14,0,0,0,241.91,137.42Zm-8.49,11.31-84.69,84.69a2,2,0,0,1-2.83,0L46.59,134.1a2,2,0,0,1-.59-1.41V46h86.69a2,2,0,0,1,1.41.59l99.32,99.31A2,2,0,0,1,233.42,148.73ZM94,84A10,10,0,1,1,84,74,10,10,0,0,1,94,84Z"></path></svg></div>
<h3>Ceny, sezóny a doplňky</h3>
<ul class="ticks">
<li>Základní cena, sezónní ceny i vlastní cena pro konkrétní dny</li>
<li>Za pokoj, nebo za osobu se zvláštní sazbou pro děti</li>
<li>U ubytování i poplatek obci</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32A14,14,0,0,0,18,64V192a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM32,62H224a2,2,0,0,1,2,2V90H30V64A2,2,0,0,1,32,62ZM224,194H32a2,2,0,0,1-2-2V102H226v90A2,2,0,0,1,224,194Zm-18-26a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h32A6,6,0,0,1,206,168Zm-64,0a6,6,0,0,1-6,6H120a6,6,0,0,1,0-12h16A6,6,0,0,1,142,168Z"></path></svg></div>
<h3>Platby a fakturace</h3>
<ul class="ticks">
<li>Platba bankovním převodem s QR kódem na částku i variabilní symbol</li>
<li>Platba na místě, nebo úplně bez plateb, třeba u akce zdarma</li>
<li>Firemní zákazník zadá IČO a údaje se samy načtou ze systému ARES</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg></div>
<h3>E-maily</h3>
<ul class="ticks">
<li>Potvrzení zákazníkovi i vám, s platebními údaji a QR kódem</li>
<li>Připomínka před pobytem nebo akcí, čas odeslání si nastavíte sami</li>
<li>Volitelný odkaz na zrušení rezervace přímo v e-mailu</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M237.28,97.87A14.18,14.18,0,0,0,224.76,88l-60.25-4.87-23.22-56.2a14.37,14.37,0,0,0-26.58,0L91.49,83.11,31.24,88a14.18,14.18,0,0,0-12.52,9.89A14.43,14.43,0,0,0,23,113.32L69,152.93l-14,59.25a14.4,14.4,0,0,0,5.59,15,14.1,14.1,0,0,0,15.91.6L128,196.12l51.58,31.71a14.1,14.1,0,0,0,15.91-.6,14.4,14.4,0,0,0,5.59-15l-14-59.25L233,113.32A14.43,14.43,0,0,0,237.28,97.87Zm-12.14,6.37-48.69,42a6,6,0,0,0-1.92,5.92l14.88,62.79a2.35,2.35,0,0,1-.95,2.57,2.24,2.24,0,0,1-2.6.1L131.14,184a6,6,0,0,0-6.28,0L70.14,217.61a2.24,2.24,0,0,1-2.6-.1,2.35,2.35,0,0,1-1-2.57l14.88-62.79a6,6,0,0,0-1.92-5.92l-48.69-42a2.37,2.37,0,0,1-.73-2.65,2.28,2.28,0,0,1,2.07-1.65l63.92-5.16a6,6,0,0,0,5.06-3.69l24.63-59.6a2.35,2.35,0,0,1,4.38,0l24.63,59.6a6,6,0,0,0,5.06,3.69l63.92,5.16a2.28,2.28,0,0,1,2.07,1.65A2.37,2.37,0,0,1,225.14,104.24Z"></path></svg></div>
<h3>Hodnocení hostů</h3>
<ul class="ticks">
<li>U ubytování odejde žádost o hodnocení sama po odjezdu</li>
<li>Host oznámkuje hvězdičkami šest oblastí, od čistoty po okolí</li>
<li>Nic se nezveřejní bez vašeho schválení</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224.42,104.2c-3.9-4.07-7.93-8.27-9.55-12.18-1.5-3.63-1.58-9-1.67-14.68-.14-9.38-.3-20-7.42-27.12S188,42.94,178.66,42.8c-5.68-.09-11-.17-14.68-1.67-3.91-1.62-8.11-5.65-12.18-9.55C145.16,25.22,137.64,18,128,18s-17.16,7.22-23.8,13.58c-4.07,3.9-8.27,7.93-12.18,9.55-3.63,1.5-9,1.58-14.68,1.67-9.38.14-20,.3-27.12,7.42S42.94,68,42.8,77.34c-.09,5.68-.17,11-1.67,14.68-1.62,3.91-5.65,8.11-9.55,12.18C25.22,110.84,18,118.36,18,128s7.22,17.16,13.58,23.8c3.9,4.07,7.93,8.27,9.55,12.18,1.5,3.63,1.58,9,1.67,14.68.14,9.38.3,20,7.42,27.12S68,213.06,77.34,213.2c5.68.09,11,.17,14.68,1.67,3.91,1.62,8.11,5.65,12.18,9.55C110.84,230.78,118.36,238,128,238s17.16-7.22,23.8-13.58c4.07-3.9,8.27-7.93,12.18-9.55,3.63-1.5,9-1.58,14.68-1.67,9.38-.14,20-.3,27.12-7.42s7.28-17.74,7.42-27.12c.09-5.68.17-11,1.67-14.68,1.62-3.91,5.65-8.11,9.55-12.18C230.78,145.16,238,137.64,238,128S230.78,110.84,224.42,104.2Zm-8.66,39.29c-4.67,4.87-9.5,9.91-12,15.91-2.38,5.74-2.48,12.52-2.58,19.08-.11,7.44-.23,15.14-3.9,18.82s-11.38,3.79-18.82,3.9c-6.56.1-13.34.2-19.08,2.58-6,2.48-11,7.31-15.91,12-5.25,5-10.68,10.24-15.49,10.24s-10.24-5.21-15.5-10.24c-4.86-4.67-9.9-9.5-15.9-12-5.74-2.38-12.52-2.48-19.08-2.58-7.44-.11-15.14-.23-18.82-3.9s-3.79-11.38-3.9-18.82c-.1-6.56-.2-13.34-2.58-19.08-2.48-6-7.31-11-12-15.91C35.21,138.24,30,132.81,30,128s5.21-10.24,10.24-15.49c4.67-4.87,9.5-9.91,12-15.91,2.38-5.74,2.48-12.52,2.58-19.08.11-7.44.23-15.14,3.9-18.82s11.38-3.79,18.82-3.9c6.56-.1,13.34-.2,19.08-2.58,6-2.48,11-7.31,15.91-12C117.76,35.21,123.19,30,128,30s10.24,5.21,15.5,10.24c4.86,4.67,9.9,9.5,15.9,12,5.74,2.38,12.52,2.48,19.08,2.58,7.44.11,15.14.23,18.82,3.9s3.79,11.38,3.9,18.82c.1,6.56.2,13.34,2.58,19.08,2.48,6,7.31,11,12,15.91,5,5.25,10.24,10.68,10.24,15.49S220.79,138.24,215.76,143.49ZM118,96a22,22,0,1,0-22,22A22,22,0,0,0,118,96ZM86,96a10,10,0,1,1,10,10A10,10,0,0,1,86,96Zm74,42a22,22,0,1,0,22,22A22,22,0,0,0,160,138Zm0,32a10,10,0,1,1,10-10A10,10,0,0,1,160,170Zm12.24-77.76-80,80a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,8.48Z"></path></svg></div>
<h3>Dárkové poukazy a slevy</h3>
<ul class="ticks">
<li>Poukaz v přednastavených hodnotách, nebo s vlastní částkou</li>
<li>Automaticky se vygenerují ve vašich barvách i s vaším logem</li>
<li>Jde vyčerpat i po částech, zůstatek systém hlídá automaticky</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M230,208a6,6,0,0,1-6,6H32a6,6,0,0,1-6-6V48a6,6,0,0,1,12,0V161.52l53.76-53.76a6,6,0,0,1,8.48,0L128,135.51,185.52,78H160a6,6,0,0,1,0-12h40a6,6,0,0,1,6,6v40a6,6,0,0,1-12,0V86.48l-61.76,61.76a6,6,0,0,1-8.48,0L96,120.49l-58,58V202H224A6,6,0,0,1,230,208Z"></path></svg></div>
<h3>Přehledy a exporty</h3>
<ul class="ticks">
<li>Tržby po měsících se srovnáním se stejným obdobím loni</li>
<li>Obsazenost, oblíbené položky i průměrná cena, vše přehledně i v grafech</li>
<li>Export do Excelu, CSV a PDF</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M199.37,55.31A101.32,101.32,0,0,0,128,26h-1A102,102,0,0,0,26,128c0,42.09,26.07,77.44,68,92.26A30.21,30.21,0,0,0,104.11,222,30.06,30.06,0,0,0,134,192a18,18,0,0,1,18-18h46.21a29.82,29.82,0,0,0,29.25-23.31A102.71,102.71,0,0,0,230,127.11,101.25,101.25,0,0,0,199.37,55.31ZM215.76,148a17.89,17.89,0,0,1-17.55,14H152a30,30,0,0,0-30,30,18,18,0,0,1-24,17C61,195.86,38,164.85,38,128a90,90,0,0,1,89.07-90H128a90.34,90.34,0,0,1,90,89.22A90.46,90.46,0,0,1,215.76,148ZM138,76a10,10,0,1,1-10-10A10,10,0,0,1,138,76ZM94,100A10,10,0,1,1,84,90,10,10,0,0,1,94,100Zm0,56a10,10,0,1,1-10-10A10,10,0,0,1,94,156Zm88-56a10,10,0,1,1-10-10A10,10,0,0,1,182,100Z"></path></svg></div>
<h3>Web pod vaší značkou</h3>
<ul class="ticks">
<li>Barvy, logo i úvodní fotka podle vaší identity</li>
<li>Pořadí sekcí si můžete sami přeskládat, co nechcete, vypnete</li>
<li>Galerie, výhody, nejbližší akce, časté dotazy i aktuality nebo články</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z"></path></svg></div>
<h3>Vaše data zůstanou vaše</h3>
<ul class="ticks">
<li>Vše běží na vašem hostingu, ne v cizím systému</li>
<li>Automatické zálohy rezervací i nastavení</li>
<li>Administraci můžete ovládat jednoduše z počítače i mobilu</li>
</ul>
</div>
</div>
</div></div></section></main>
```

### Pro koho

Dvě velké karty s fotkou, štítkem, nadpisem a výčtem na mátovém podkladu. Třídy: `sec--mint`, `who`, `who__card`, `who__body`, `who__chips`, `who__go`.

```html
<main><section class="sec sec--mint" id="prokoho">
<div class="wrap">
<div class="sec-head sec-head--center">
<h2>BOOKING STUDIO funguje <br/>pro ubytování i akce</h2>
<p class="lede">Dvě varianty jednoho systému. Projděte si rezervaci přesně tak, jako by to dělal váš zákazník.</p>
</div>
<div class="who">
<a class="who__card" href="#" rel="noopener" target="_blank">
<img alt="Ustlaná postel v pokoji penzionu s nočním stolkem a lampičkou" height="2000" sizes="(max-width:1024px) calc(100vw - 40px), 740px" src="img/hotelovy-pokoj.webp" srcset="img/hotelovy-pokoj-800.webp 800w, img/hotelovy-pokoj.webp 1333w" width="1333"/>
<div class="who__body"><p class="who__tag">BOOKING STUDIO pro ubytování</p><h3>Penziony, apartmány, <br/>chalupy i malé hotely</h3><div class="who__chips"><span>Kalendář volných pokojů</span><span>Ceny podle sezóny</span><span>Snídaně a další služby</span><span>Pronájem celého objektu</span><span>Poplatek z pobytu</span><span>Hodnocení od hostů</span></div><span class="who__go">Otevřít demo <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="who__card" href="#" rel="noopener" target="_blank">
<img alt="Dva účastníci keramického kurzu drží hotový hrnek nad hrnčířským kruhem" height="2000" sizes="(max-width:1024px) calc(100vw - 40px), 740px" src="img/kurz-keramiky.webp" srcset="img/kurz-keramiky-800.webp 800w, img/kurz-keramiky.webp 1333w" width="1333"/>
<div class="who__body"><p class="who__tag">BOOKING STUDIO pro akce a kurzy</p><h3>Kurzy, workshopy, <br/>přednášky i jednorázové akce</h3><div class="who__chips"><span>Konkrétní dny a časy</span><span>Připomínka před akcí</span><span>Jednorázové i pravidelné termíny</span><span>Víc termínů na výběr</span><span>Platba převodem nebo na místě</span><span>Dárkové poukazy</span></div><span class="who__go">Otevřít demo <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
</div>
</div>
</section></main>
```

### Loga klientů

Vodorovná řada log s popiskem pod každým. Třídy: `klienti`, `klienti__pop`, `klienti__rada`, `klienti__kl`, `klienti__logo`.

```html
<main><section class="klienti">
<div class="wrap">
<p class="klienti__pop">BOOKING STUDIO už používají</p>
<div class="klienti__rada" id="klientiRada">
<a class="klienti__kl" href="#" rel="noopener" target="_blank">
<img alt="Apartmány Stein" class="klienti__logo" height="16" src="img/logo-stein.svg" width="74"/>
<span class="klienti__co">Rezervace apartmánů na Božím Daru</span>
</a>
<a class="klienti__kl" href="#" rel="noopener" target="_blank">
<img alt="Hostel Pavlov" class="klienti__logo" height="56" src="img/logo-hostel.svg" width="150"/>
<span class="klienti__co">Rezervace ubytování pod Pálavou</span>
</a>
<a class="klienti__kl" href="#" rel="noopener" target="_blank">
<img alt="Sdružení pražských plavidel" class="klienti__logo" height="100" src="img/logo-spp.svg" width="434"/>
<span class="klienti__co">Rezervace plaveb po Vltavě</span>
</a>
<a class="klienti__kl" href="#" rel="noopener" target="_blank">
<img alt="Psychiatrická nemocnice Bohnice" class="klienti__logo" height="37" src="img/logo-bohnice.svg" width="159"/>
<span class="klienti__co">Rezervace vzdělávacích kurzů</span>
</a>
<a class="klienti__kl" href="#" rel="noopener" target="_blank">
<img alt="Freedom Art" class="klienti__logo" height="263" src="img/logo-freedomart.svg" width="1026"/>
<span class="klienti__co">Registrace na kroužky a akce</span>
</a>
</div>
</div>
</section></main>
```

### Řádky funkcí

Střídavě text s odrážkami vlevo a vrstvený obrázek vpravo. Třídy: `featrow`, `featrow--rev`, `featrow__txt`, `featrow__img`, `pxl`, `pill`.

```html
<main><section class="sec sec--rows">
<div class="wrap">
<div class="featrow">
<div class="featrow__txt">
<h2>Zákazník vidí ceny rovnou v kalendáři</h2>
<p class="lede"><strong>Nemusí nikam psát ani volat.</strong> Vybere termín, počet osob a doplňkové služby na jedné obrazovce.</p>
<ul class="ticks">
<li>Cena za noc u každého volného dne</li>
<li>Obsazené termíny nejdou vybrat</li>
<li>Systém sám hlídá kapacitu, u ubytování i minimální délku pobytu</li>
<li>Základní cena, sezónní ceny i vlastní cena pro konkrétní dny</li>
<li>Doplňkové služby se účtují za noc, za pobyt nebo za osobu</li>
<li>Termín nebo pokoj můžete uzavřít jedním kliknutím</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Otevřít demo pro ubytování</a>
</div>
<div class="featrow__img"><div aria-label="Kalendář rezervace s cenou u každého volného dne a shrnutím pobytu" class="pxl zoom" data-full="/img/rezervacni-system-pro-ubytovani-kalendar.jpg" role="img">
<img alt="" class="pxl__l" data-tr="50" data-y0="16" height="900" src="img/vrstvy/kalendar-foto.webp" width="1200"/>
<img alt="" class="pxl__l pxl-karta pxl-karta--kal" data-tr="-86" data-y0="-32" height="563" src="img/vrstvy/kalendar-karta.webp" width="675"/>
</div></div>
</div>
<div class="featrow featrow--rev">
<div class="featrow__txt">
<h2>Grafika ve vašich firemních barvách</h2>
<p class="lede"><strong>Barvy, logo i fotky nastavíme podle vaší identity.</strong> Vypadá to jako váš web, ne jako cizí šablona.</p>
<ul class="ticks">
<li>Barvy, logo i úvodní fotka podle vaší identity</li>
<li>Fotogalerie, kapacita a popis u každé položky</li>
<li>U pokojů lůžka, výměra a vybavení včetně vlastních položek</li>
<li>Zobrazení na řádky, nebo mřížka o dvou či třech sloupcích</li>
<li>Pořadí sekcí si můžete sami přeskládat, co nechcete, vypnete</li>
<li>Galerie, výhody, nejbližší akce, časté dotazy i aktuality nebo články</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Podívat se na ukázku</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém ve firemních barvách a s vlastním logem" class="pxl zoom" data-full="/img/rezervacni-system-vlastni-vzhled.jpg" role="img">
<img alt="" class="pxl__l" data-tr="-12" data-y0="-2" height="900" src="img/vrstvy/vzhled-foto.webp" width="1200"/>
<img alt="" class="pxl__l pxl-karta pxl-karta--vzh" data-tr="100" data-y0="45" height="530" src="img/vrstvy/vzhled-karta.webp" width="392"/>
</div></div>
</div>
<div class="featrow">
<div class="featrow__txt">
<h2>Potvrzení, připomínky a poukazy bez vaší práce</h2>
<p class="lede"><strong>Rezervaci i platbu vyřídí host sám,</strong> e-maily za vás odešle systém.</p>
<ul class="ticks">
<li>Platba převodem s QR kódem na částku i variabilní symbol</li>
<li>Platba na místě, nebo úplně bez plateb, třeba u akce zdarma</li>
<li>Potvrzení zákazníkovi i vám, s platebními údaji a QR kódem</li>
<li>Připomínka před pobytem nebo akcí, čas odeslání si nastavíte sami</li>
<li>Firemní zákazník zadá IČO a údaje se samy načtou ze systému ARES</li>
<li>Dárkové poukazy ve vašich barvách, jdou vyčerpat i po částech</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Otevřít demo pro akce</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém pro akce a kurzy: karta workshopu s délkou, cenou a datem spuštění rezervací, vedle nabídka dárkového poukazu" class="pxl zoom" data-full="/img/rezervacni-system-pro-akce.jpg" role="img">
<img alt="" class="pxl__l" data-tr="44" data-y0="10" height="900" src="img/vrstvy/akce-foto.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-100" data-y0="-45" height="900" src="img/vrstvy/akce-karta.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="130" data-y0="40" height="900" src="img/vrstvy/akce-poukaz.webp" width="1200"/>
</div></div>
</div>
<div class="featrow featrow--rev">
<div class="featrow__txt">
<h2>Přehledy, statistiky a exporty, které ocení i účetní</h2>
<p class="lede"><strong>Kdo dorazil a kolik zaplatil, máte na jednom místě.</strong> Žádné skládání z e-mailů a poznámek.</p>
<ul class="ticks">
<li>Tržby po měsících se srovnáním se stejným obdobím loni</li>
<li>Obsazenost, oblíbené položky i průměrná cena, vše přehledně i v grafech</li>
<li>Export do Excelu, CSV a PDF</li>
<li>U ubytování odejde žádost o hodnocení sama po odjezdu, nic se nezveřejní bez vašeho schválení</li>
<li>Automatické zálohy rezervací i nastavení</li>
<li>Vše běží na vašem hostingu, ne v cizím systému</li>
</ul>
<a class="pill" href="#">Co všechno je v ceně</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém pro ubytování: karta pokoje s fotkou, lůžky, vybavením a cenou za noc" class="pxl zoom" data-full="/img/rezervacni-system-pro-ubytovani.jpg" role="img">
<img alt="" class="pxl__l" data-tr="50" data-y0="16" height="900" src="img/vrstvy/ubytovani-foto.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-86" data-y0="-32" height="900" src="img/vrstvy/ubytovani-karta.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-58" data-y0="-24" height="900" src="img/vrstvy/ubytovani-odznak.webp" width="1200"/>
</div></div>
</div>
</div>
</section></main>
```

## Komponenty: Ceník

### Cenová karta

Karta s modrým obrysem, štítkem, velkou cenou a výčtem toho, co je v ceně. Třídy: `price`, `price__tag`, `price__v`, `price__u`, `price__note`.

```html
<main><section class="sec" id="cena"><div class="wrap"><div class="pricewrap"><div class="price">
<p class="price__tag">Jednorázová cena</p>
<p class="price__v num">29 990 Kč</p>
<p class="price__u">Kompletní systém, nastavení a naplnění daty v ceně.</p>
<ul class="ticks">
<li><strong>Nastavení a spuštění</strong> na vaší doméně</li>
<li><strong>Tři roky aktualizací</strong> systému v ceně</li>
<li><strong>E-mailová i telefonická podpora</strong> po celou dobu aktualizací</li>
<li>Web ve vašich barvách a s vaším logem</li>
<li><strong>Neomezeně</strong> pokojů, termínů i rezervací</li>
<li><strong>Česká, slovenská, anglická i německá verze</strong></li>
<li>Neomezený počet správců</li>
<li>Zaškolení a předání administrace</li>
</ul>
<p class="price__note"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M142,176a6,6,0,0,1-6,6,14,14,0,0,1-14-14V128a2,2,0,0,0-2-2,6,6,0,0,1,0-12,14,14,0,0,1,14,14v40a2,2,0,0,0,2,2A6,6,0,0,1,142,176ZM124,94a10,10,0,1,0-10-10A10,10,0,0,0,124,94Zm106,34A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z"></path></svg><span><strong>Po třech letech systém běží dál.</strong> Nic se nevypíná a o data nepřijdete. Uvedené ceny jsou konečné, nejsme plátci DPH.</span></p>
</div></div></div></section></main>
```

### Poptávkový formulář

Mátová karta s nadpisem, telefonem a poli pod sebou. Třídy: `form`, `form__sub`, `form__tel`, `frow`, `field`, `form__note`.

```html
<main><section class="sec" id="cena"><div class="wrap"><div class="pricewrap"><div class="form" id="poptavka">
<h3 class="hl">Vyzkoušejte BOOKING STUDIO</h3>
<p class="form__sub">Nechte nám kontakt a my se vám co nejdříve ozveme. Projdeme spolu, jak rezervace řešíte teď a co by se dalo zjednodušit. Nic tím neobjednáváte.</p>
<p class="form__tel"><strong>Chcete to raději probrat telefonicky?</strong> Zavolejte nám na <a href="#">+420 775 350 332</a></p>
<form accept-charset="UTF-8" id="leadForm" novalidate="">
<div aria-live="polite" class="form-status" role="status"></div>
<input name="utm_source" type="hidden"/><input name="utm_medium" type="hidden"/>
<input name="utm_campaign" type="hidden"/><input name="utm_term" type="hidden"/>
<input name="utm_content" type="hidden"/><input name="gclid" type="hidden"/>
<input name="fbclid" type="hidden"/>
<input name="msclkid" type="hidden"/>
<input name="referrer" type="hidden"/><input name="page" type="hidden"/><input name="lang" type="hidden" value="cs"/>
<div aria-hidden="true" class="form-trap">
<label for="website">Webová stránka</label>
<input autocomplete="off" id="website" name="website" tabindex="-1" type="text"/>
</div>
<div class="frow">
<div class="field">
<label for="jmeno">Jméno a příjmení</label>
<input autocomplete="name" id="jmeno" name="jmeno" required="" type="text"/>
</div>
<div class="field">
<label for="email">E-mail</label>
<input autocomplete="email" id="email" name="email" required="" type="email"/>
</div>
</div>
<div class="frow">
<div class="field">
<label for="telefon">Telefon</label>
<input autocomplete="tel" id="telefon" name="telefon" required="" type="tel"/>
</div>
<div class="field">
<label for="web">Adresa vašeho webu (nepovinné)</label>
<input autocomplete="url" id="web" inputmode="url" name="web" placeholder="" type="text"/>
</div>
<div class="field">
<label for="varianta">Co provozujete</label>
<select id="varianta" name="varianta" required="">
<option value="">Vyberte</option>
<option>Penzion</option>
<option>Hotel</option>
<option>Apartmány</option>
<option>Chalupa nebo chata</option>
<option>Akce, kurzy nebo workshopy</option>
<option>Něco jiného</option>
</select>
</div>
</div>
<button class="btn btn--primary" type="submit">Odeslat poptávku</button>
<p class="form__note">Odesláním souhlasíte se <a href="#" rel="noopener" target="_blank">zpracováním osobních údajů</a>.</p>
</form>
</div></div></div></section></main>
```

### Kroky spolupráce

Tři bílé karty s kulatým číslem a tlačítkem pod nimi. Třídy: `steps`, `step`, `step__n`, `step__lead`, `steps-cta`.

```html
<main><section class="sec sec--mint">
<div class="wrap">
<div class="sec-head">
<h2>Jak probíhá spolupráce</h2>
</div>
<div class="steps">
<div class="step">
<span class="step__n num">01</span>
<h3>Projdete si demo</h3>
<p class="step__lead">Uvidíte přesně to, co váš zákazník</p>
<p>Projděte si celou rezervaci od výběru termínu po potvrzovací e-mail nebo e-mail s žádostí o hodnocení.</p>
</div>
<div class="step">
<span class="step__n num">02</span>
<h3>Vše nastavíme za vás</h3>
<p class="step__lead">Nemusíte nic vyplňovat sami</p>
<p>Pokoje nebo termíny, ceny, sezóny, doplňky - vše nastavíme za vás. Vy nám jen řeknete, jak váš provoz funguje.</p>
</div>
<div class="step">
<span class="step__n num">03</span>
<h3>Rezervace vám chodí samy</h3>
<p class="step__lead">Vy se jen díváte, kdo dorazí</p>
<p>Host si sám zarezervuje, zaplatí převodem nebo na místě a potvrzení dostane on i vy. Před termínem mu odejde připomínka, ať nezapomene.</p>
</div>
</div>
<div class="steps-cta"><a class="btn btn--primary" href="#">Chci rezervační systém</a></div>
</div>
</section></main>
```

### Srovnání

Tři souhrnné karty s cenou a podrobná tabulka řádků se zelenými a červenými odrážkami. Třídy: `cmp-sum`, `cmp-sum__card--good`, `cmp`, `cmp__row`, `cmp__good`, `cmp__bad`.

```html
<main><section class="sec sec--mint" id="problem">
<div class="wrap">
<div class="sec-head">
<h2>Proč nespoléhat jen na Booking a Airbnb</h2>
<p class="lede">Booking a Airbnb dokážou naplnit sezónu. Problém začne ve chvíli, kdy jsou vaším jediným kanálem. <br/>Pak si diktují podmínky, protože nemáte kam jinam poslat zákazníka, který chce rezervovat.</p>
</div>
<div class="cmp-sum">
<p class="cmp-sum__h">Celkem za tři roky</p>
<div class="cmp-sum__cards">
<div class="cmp-sum__card cmp-sum__card--good"><span><b>BOOKING STUDIO</b><small>jednorázově, vše v ceně</small></span><strong>29 990 Kč</strong></div>
<div class="cmp-sum__card"><span><b>Booking / Airbnb</b><small>provize z každé rezervace*</small></span><strong>~162 000 Kč</strong></div>
<div class="cmp-sum__card"><span><b>WordPress</b><small>web, pluginy, licence a údržba*</small></span><strong>~65 000 Kč</strong></div>
</div>
<button aria-controls="cmpDet" aria-expanded="false" class="btn btn--ghost cmp-sum__btn" id="cmpBtn" type="button">Zobrazit podrobné srovnání</button>
</div>
<div class="cmp-wrap" id="cmpDet"><div class="cmp">
<div class="cmp__row">
<div class="cmp__label">Kdo to celé udělá</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Všechno zařídíme my</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Musíte si to zařídit sami</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Musíte si najít někoho, kdo to postaví</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Nastavení a spuštění</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Do tří dnů a bez vaší práce</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Několik večerů v nastavení portálu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Několik týdnů až měsíců</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Co zaplatíte na začátku</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i><strong>29 990 Kč</strong> jednorázově</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">Booking / Airbnb</i>Nic, registrace je zdarma</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Od <strong>20 000 Kč</strong> za web a pluginy</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label"><span>Co doplácíte během tří let</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i><strong>0 Kč</strong>, vše je v ceně</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Zhruba <strong>162 000 Kč</strong> na provizích</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Zhruba <strong>45 000 Kč</strong> za licence a údržbu</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Provize z rezervací</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Žádná</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>3 až 15 % z každé rezervace</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">WordPress</i>Žádná</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Aktualizace a údržba</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Tři roky v ceně</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">Booking / Airbnb</i>Řeší portál, dokud platíte</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>WordPress, šablona a každý plugin zvlášť</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Když se něco pokazí</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Ozvete se přímo nám</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Podpora mizivá, nebo jen anglicky</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Sháníte, kdo to opraví</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Kontakt na zákazníka a data</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Máte vy, v systému i exportech</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Jen v systému portálu, ne u vás</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">WordPress</i>Máte vy, ale nejspíš netušíte kde</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Rezervační funkce</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Upravíme podle vašeho provozu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Jen to, co umí portál v základu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Skládačka pluginů od různých autorů</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Recenze zákazníků</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Součást systému</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Zůstávají portálu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Jen s dalším pluginem</span></div>
</div>
</div></div>
<p class="cmp__pozn"><span class="cmp__hv">*</span> Modelový příklad: 10 rezervací měsíčně po 3 000 Kč a 15% provizi portálu.</p>
</div>
</section></main>
```

## Komponenty: Obsah

### Časté dotazy

Dva sloupce rozbalovacích otázek s plusem v modré, první otázka rozbalená. Třídy: `faq`, `faq__col`, `details`, `summary`.

```html
<section class="sec sec--mint"><div class="wrap"><div class="sec-head"><h2>Časté dotazy</h2></div><div class="faq"><div class="faq__col"><details open=""><summary>Musím kvůli tomu měnit celý web?</summary><p>Nemusíte. Rezervace můžou běžet jako samostatná stránka na vaší doméně a z webu na ni jen odkážete.</p></details><details><summary>Zvládnu systém spravovat sám?</summary><p>Ceny, termíny, doplňky i texty zvládnete měnit sami.</p></details></div><div class="faq__col"><details><summary>Kde jsou uložená data zákazníků?</summary><p>U vás, ne v cizím systému.</p></details><details><summary>Jak zákazník zaplatí?</summary><p>Převodem, na místě, nebo obojí.</p></details></div></div></div></section>
```

### Tři věci jinak

Tři bílé karty s ikonou, nadpisem, textem a štítkem dole. Třídy: `grid grid--3`, `card`, `card__ico`, `card__chip`.

```html
<main><section class="sec" id="jinak">
<div class="wrap">
<div class="sec-head">
<h2>Tři věci, které děláme jinak</h2>
<p class="lede"><strong>BOOKING STUDIO stavíme pro malé provozy, takže do něj nedáváme věci, které by většina nevyužila, ale všichni by je platili.</strong> U tří z nich je dobré vědět předem, jak je řešíme. A když některou potřebujete zrovna vy, projdeme si to spolu a systém přizpůsobíme.</p>
</div>
<div class="grid grid--3">
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M222,48V96a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h33.52L183.47,72a81.51,81.51,0,0,0-57.53-24h-.46A81.5,81.5,0,0,0,68.19,71.28a6,6,0,1,1-8.38-8.58,93.38,93.38,0,0,1,65.67-26.76H126a93.45,93.45,0,0,1,66,27.53l18,18V48a6,6,0,0,1,12,0ZM187.81,184.72a81.5,81.5,0,0,1-57.29,23.34h-.46a81.51,81.51,0,0,1-57.53-24L54.48,166H88a6,6,0,0,0,0-12H40a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V174.48l18,18.05a93.45,93.45,0,0,0,66,27.53h.52a93.38,93.38,0,0,0,65.67-26.76,6,6,0,1,0-8.38-8.58Z"></path></svg></div>
<h3>Rezervace z portálů</h3>
<p>Portálu dáte jen část kapacity a zbytek prodáváte u sebe, každý pokoj má jeden kalendář ve vašem systému. Automatické propojení s Bookingem nebo Airbnb (channel manager) v ceně není a nechystáme ho, pro malý provoz se nevyplatí.</p>
<span class="card__chip">bez channel manageru</span>
</div>
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32A14,14,0,0,0,18,64V192a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM32,62H224a2,2,0,0,1,2,2V90H30V64A2,2,0,0,1,32,62ZM224,194H32a2,2,0,0,1-2-2V102H226v90A2,2,0,0,1,224,194Zm-18-26a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h32A6,6,0,0,1,206,168Zm-64,0a6,6,0,0,1-6,6H120a6,6,0,0,1,0-12h16A6,6,0,0,1,142,168Z"></path></svg></div>
<h3>Platby</h3>
<p>Host zaplatí převodem s QR kódem, který mu načte částku i variabilní symbol, nebo až na místě. Bez poplatků z transakce a bez smlouvy s bankou. Platební brána pro karty v systému není; u akcí zdarma jde platby úplně vypnout.</p>
<span class="card__chip">bez platební brány</span>
</div>
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M182,104a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,104Zm-6,26H80a6,6,0,0,0,0,12h96a6,6,0,0,0,0-12Zm54-74V208a6,6,0,0,1-2.85,5.1,5.93,5.93,0,0,1-3.15.9,6,6,0,0,1-2.68-.63L192,198.71l-29.32,14.66a6,6,0,0,1-5.36,0L128,198.71,98.68,213.37a6,6,0,0,1-5.36,0L64,198.71,34.68,213.37A6,6,0,0,1,26,208V56A14,14,0,0,1,40,42H216A14,14,0,0,1,230,56Zm-12,0a2,2,0,0,0-2-2H40a2,2,0,0,0-2,2V198.29l23.32-11.66a6,6,0,0,1,5.36,0L96,201.29l29.32-14.66a6,6,0,0,1,5.36,0L160,201.29l29.32-14.66a6,6,0,0,1,5.36,0L218,198.29Z"></path></svg></div>
<h3>Faktury</h3>
<p>Fakturační údaje od zákazníka vám systém pošle e-mailem a doklad vystavíte ve svém účetním programu jako doteď. Faktury a daňové doklady systém sám nevystavuje, ať se účetnictví neduplikuje.</p>
<span class="card__chip">bez fakturace</span>
</div>
</div>
</div>
</section></main>
```

### Karty novinek

Mřížka karet s fotkou 16:9, datem, nadpisem, perexem a odkazem se šipkou. Třídy: `news`, `news__body`, `news__tag`, `who__go`.

```html
<main><section class="sec sec--mint" id="novinky">
<div class="wrap">
<div class="sec-head">
<h2>Co je v systému nového</h2>
<p class="lede">BOOKING STUDIO pořád vylepšujeme. Tohle jsme do systému přidali naposledy.</p>
</div>
<div class="grid grid--3">
<a class="news" href="#">
<img alt="Lidé s deštníky na deštivé ulici" height="450" src="img/novinka-pocasi.webp" width="800"/>
<div class="news__body"><p class="news__tag">Říjen 2026</p><h3>Předpověď počasí přímo na webu</h3><p>Hosté uvidí teplotu, vítr a předpověď na čtyři dny v hlavičce webu i v článcích.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" href="#">
<img alt="Podzimní les poprášený prvním sněhem" height="450" src="img/novinka-fotky.webp" width="800"/>
<div class="news__body"><p class="news__tag">Říjen 2026</p><h3>Úvodní fotka, která se mění s ročním obdobím</h3><p>Do hlavičky webu nahrajete víc fotek a systém je střídá. V zimě ukáže zimní, v létě letní.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" href="#">
<img alt="Hosté u recepce hostelu" height="450" src="img/novinka-jazyky.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Web ve čtyřech jazycích</h3><p>Hosté si web přepnou do češtiny, slovenštiny, angličtiny nebo němčiny a <span class="news__nz">e-maily</span> i poukazy dostanou ve svém jazyce.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Ruce držící telefon s mřížkou fotek" height="450" src="img/novinka-sdileni.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Rychlejší web a hezčí náhled při sdílení</h3><p>Fotky se při nahrání samy zmenší a převedou do úsporného formátu. Odkaz na váš web má při sdílení pěkný náhled.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Ruka zapichuje špendlík do mapy města" height="450" src="img/novinka-misto.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Místo konání u každé služby</h3><p>Ke každé akci zadáte, kde se koná. Návštěvníci si podle místa filtrují nabídku a najdou ho i v potvrzení.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Telefon s ikonou e-mailové aplikace" height="450" src="img/novinka-emaily.webp" width="800"/>
<div class="news__body"><p class="news__tag">Srpen 2026</p><h3>E-maily, které ladí s vaším webem</h3><p>Potvrzení rezervace má pruh s názvem vašeho ubytování, fotku pokoje a patičku s kontakty.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
</div>
<p class="news-all"><button aria-expanded="false" id="newsBtn" type="button">Všechny novinky <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M12 5v13M6 13l6 6 6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></button></p>
</div>
</section></main>
```

### Článek

Úzký sloupec s odkazem zpět, datem, nadpisem, perexem, širokou fotkou a textem s podnadpisy. Třídy: `clanek`, `clanek__zpet`, `clanek__datum`, `clanek__foto`, `clanek__text`.

```html
<main class="clanek">
<div class="wrap">
<a class="clanek__zpet" href="#"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M19 12H6M11 6l-6 6 6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg>Všechny novinky</a>
<p class="clanek__datum">16. 8. 2026</p>
<h1>E-maily, které ladí s vaším webem</h1>
<p class="lede">Potvrzení rezervace i další zprávy ze systému mají nový vzhled: pruh s vaším názvem, fotku a patičku s kontakty.</p>
<img alt="" class="clanek__foto zoom" data-full="/img/novinky/novinka-emaily.webp" fetchpriority="high" height="900" sizes="(max-width:926px) 100vw, 822px" src="img/novinky/novinka-emaily.webp" srcset="img/novinka-emaily.webp 800w, img/novinky/novinka-emaily.webp 1600w" width="1600"/>
<div class="clanek__text"><p>Potvrzení rezervace je často první zpráva, kterou od vás host dostane. Proto jsme e-mailům ze systému dali vzhled, který ladí s vaším webem.</p><hr/><h3>Co v e-mailu host uvidí</h3><ul><li>Nahoře pruh s názvem vašeho ubytování v barvě webu.</li><li>Fotku pokoje, který si host rezervoval.</li><li>Dole patičku s adresou a telefonem.</li></ul><p><b>Potvrzení, které dostane host:</b></p><img alt="Ukázka potvrzovacího e-mailu pro hosta" class="zoom na-vysku" height="3440" src="img/novinky/mail-host-cs.webp" width="1440"/><p><b>Oznámení o nové rezervaci pro správce:</b></p><img alt="Ukázka e-mailu správci o nové rezervaci" class="zoom ctverec" height="1392" src="img/novinky/mail-spravce-cs.webp" width="1440"/><hr/><h3>Platí pro všechny zprávy</h3><p>Nový vzhled dostane každý e-mail, který systém odešle, od potvrzení rezervace po připomínku. Texty zpráv si dál upravujete v administraci v záložce E-maily, o vzhled se systém postará sám.</p><hr/><h3>V jazyce rezervace</h3><p>E-maily odcházejí v jazyce, ve kterém host rezervoval. Každý jazyk má vlastní texty, které upravíte po přepnutí jazyka v administraci.</p><img alt="Úprava textu e-mailu s náhledem v administraci, záložka E-maily" class="zoom na-vysku" height="2000" src="img/novinky/adm-emaily-cs.webp" width="1600"/><hr/><p>E-maily jsou postavené tak, aby se správně zobrazily i v Outlooku, který s grafikou e-mailů tradičně zápasí.</p></div>
<div class="btn-row"><a class="btn btn--primary" href="#">Chci rezervační systém</a><a class="btn btn--ghost" href="#">Všechny novinky</a></div>
</div>
</main>
```

## Komponenty: Navigace

### Závěrečná výzva

Modrý přechodový pás s nadpisem, větou a dvěma tlačítky. Třídy: `endcta`, `endcta__btns`, `btn--white`, `btn--outline`.

```html
<main><section class="endcta">
<div class="wrap">
<h2>Rezervace, ze kterých nikomu neplatíte provizi</h2>
<p>Projděte si demo, nebo nám nechte kontakt. Nic tím neobjednáváte.</p>
<div class="endcta__btns">
<a class="btn btn--white" href="#">Vyzkoušet živé demo</a>
<a class="btn btn--outline" href="#">Chci rezervační systém</a>
</div>
</div>
</section></main>
```

### Patička

Logo, údaje o firmě, kontakt s velkým telefonem a spodní lišta s odkazy. Třídy: `foot`, `foot__top`, `foot__brand`, `foot__contact`, `foot__bar`.

```html
<footer class="foot">
<div class="wrap">
<div class="foot__top">
<div class="foot__brand">
<b class="foot__logo"><img alt="" height="34" src="data:vynecháno" width="34"/>BOOKING STUDIO</b>
<p class="foot__co">Rezervační systém pro ubytování, akce a kurzy.</p>
<div class="foot__kdo">
<p class="foot__firma"><a href="#" rel="noopener" target="_blank">KACER STUDIO s.r.o.</a></p>
<p class="foot__adr">Lidická 40, 602 00 Brno</p>
<p class="foot__ico">IČO: 14237903</p>
</div>
</div>
<div class="foot__contact">
<a href="#">info@kacer.studio</a>
<a class="hl foot__tel" href="#">+420 775 350 332</a>
</div>
</div>
<div class="foot__bar">
<span>2008-<span class="js-rok">2026</span> © KACER STUDIO s.r.o.</span>
<nav>
<a href="#" rel="noopener" target="_blank">Osobní údaje</a>
<a href="#" rel="noopener" target="_blank">Podmínky spolupráce</a>
</nav>
</div>
</div>
</footer>
```

## Stránky

- Úvod: https://bookingstudio.cz/
- Novinky: https://bookingstudio.cz/novinky/
- Demo pro ubytování: https://bookingstudio.cz/demo-ubytovani/
- Demo pro akce: https://bookingstudio.cz/demo-akce/
