/* → docs/CLIENTSFE.md #fe-001 */ :root { --page-bg: #F5F1EA; --container-bg: #FFFFFF; --surface: #FFFFFF; --primary: #1A1A1A; --border: #E6DFD2; --bg-light: #F3ECE2; --text-primary: #2A2420; --text-secondary: #7A6F61; --disabled: #9CA3AF; --ok: #21544F; --ok-rgb: 33, 84, 79; --ok-solid: #21544F; --ok-solid-hover: #163D39; --ok-solid-text: white; --ok-tint: #E3ECE9; --ok-tint-border: #9CCFC2; --ok-tint-text: #145045; --danger: #B3261E; --danger-hover: #8C1D17; --chip-strong-bg: #1A1A1A; --chip-strong-bg-hover: #332E29; --chip-strong-text: #FFFFFF; --shadow-sm: 0 1px 3px rgba(26,26,26,.10); --shadow-md: 0 4px 14px rgba(91,42,76,.10); --shadow-tint-rgb: 91, 42, 76; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: 'Playfair Display', serif; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; } body{margin:0;background:var(--page-bg);font-family:var(--font-body);color:var(--text-primary)} .container{max-width:1100px;margin:0 auto;padding:0 24px} .section{padding:24px 0 0 0;} img{max-width:100%;border-radius:12px} .header{position:sticky;top:0;background:var(--container-bg);border-bottom:1px solid var(--border);z-index:1000} /* Pojistka: position:sticky u hlavičky přestane fungovat, jakmile některý PŘEDEK dostane overflow hidden/auto/scroll — sticky se pak váže na něj místo na okno a banner při scrollu ujede pryč. Přidáno v době, kdy Elfsight vykresloval plovoucí odznak přes portál na ; widget je dnes inline v hlavičce, takže je to nejspíš zbytečné a dá se to smazat, až bude potvrzené, že hlavička drží. Výjimka .no-scroll je záměrná: tu si nasazuje mobilní menu (js/main.js), aby pod otevřeným panelem zamklo scrollování stránky. */ html { overflow: visible !important; } body:not(.no-scroll) { overflow: visible !important; } /* Zámek scrollování pod otevřeným menu (.no-scroll) sebere svislý scrollbar a obsah se o jeho šířku roztáhne — na PC to bylo vidět jako odskočení celé stránky. scrollbar-gutter drží to místo rezervované pořád, takže zmizení scrollbaru už nic nepřepočítává. Řeší to bez JS a bez dopočítávání šířky scrollbaru, které bývalo obvyklým obezličkou. Na mobilech se nic nemění — tam scrollbar místo nezabírá. */ html { scrollbar-gutter: stable; } /* .nav{display:flex;justify-content:space-between;align-items:center;padding:12px 0}*/ .nav{position:relative;display:flex;justify-content:right;align-items:center;padding:12px 0;flex-wrap:wrap;gap:0 10px} .nav-reserve-btn{font-size:14px;padding:8px 16px;white-space:nowrap} /* .btn-small se v menu používalo, ale nikde nebylo definované — tlačítka tak brala plné odsazení z .btn (12×18px). S pěti položkami v menu už se hlavička do 720px kontejneru nevešla. flex-wrap výš je pojistka: kdyby se to na některé šířce přece jen nevešlo, menu se zalomí pod logo místo aby stránka přetekla do strany. */ .btn-small { padding: 7px 12px; font-size: 14px; line-height: 1.2; } /* Odznaky s hodnocením v hlavičce — vlastní prvky, ne cizí widget. `margin-right: auto` drží skupinu vlevo; nav tlačí obsah doprava. Dřív tu byl embed Elfsightu zmenšovaný zoomem, protože měl vlastní pevnou velikost — tyhle se sázejí rovnou v cílové, takže žádné škálování ani breakpointy nepotřebují. Obsah je zkrácený na „5/50": zdroj i slovo „recenzí" nese popisek, aby odznaky v hlavičce zabraly co nejmíň. Proto taky odpadly breakpointy, které dřív ty dva údaje postupně schovávaly. */ .nav-reviews-group { margin-right: auto; display: flex; align-items: center; gap: 5px; } .nav-reviews { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font-size: 12px; line-height: 1; text-decoration: none; white-space: nowrap; } .nav-reviews:hover { border-color: var(--ok); } /* Logo zdroje místo hvězdy. 16 px je minimum, které Google pro svou značku uvádí — menší už se nesmí. Nepřebarvuje se ani nijak neupravuje. */ .nav-reviews__logo { width: 16px; height: 16px; flex: none; display: block; object-fit: contain; } .nav-reviews__value { font-weight: 700; } /* Na mobilu odpadá číselné hodnocení — tutéž informaci nesou hvězdičky vedle něj (kreslí se na desetinu přesně), takže číslo jen ubíralo místo v úzké liště. Počet recenzí zůstává: ten z hvězdiček vyčíst nejde. Hodnota se tím neztrácí ani pro odečítač obrazovky — nese ji aria-label celého odkazu. */ @media (max-width: 640px) { .nav-reviews__rating { display: none; } /* Oba odznaky pod sebe do jednoho sloupce — v úzké liště se vedle sebe nevešly a tlačily na logo. Skupina zůstává JEDNOU položkou hlavičky, takže zbytek (logo, rezervace, přepínač) pokračuje na řádku vedle ní. align-items: stretch, ať jsou oba odznaky stejně široké a nezubatily levý okraj. */ .nav-reviews-group { flex-direction: column; align-items: stretch; gap: 3px; } /* Odznak na úzkém displeji utažený — mezery a odsazení na polovinu. Logo zdroje zůstává 16 px: menší ho Google pro svou značku nedovoluje. */ .nav-reviews { gap: 2px; padding: 2px 4px; } .nav-reviews__stars { margin: 0; } /* Celá hlavička na JEDEN řádek. Bez toho se zalomila a přepínač motivu s hamburgerem spadly pod logo. Ušetřit se muselo zhruba 60 px, což jedno opatření neuneslo — proto čtyři drobná naráz: mezery mezi položkami, velikost loga, odsazení tlačítka a jeho text. */ .nav { gap: 0 5px; flex-wrap: nowrap; } /* flex: none je tu KVŮLI PŘEKRYVU, ne kvůli místu. Bez něj se