@charset "utf-8"; /* =========================================================================== Podlahy Sládeček — návrh webu Kdo mi udělá web (kdomiudelaweb.cz) · Jan Doležal NÁPAD: lamela. Podlaha se skládá z dlouhých vodorovných prken s přesazenými spárami (vazba na půl). Stejně je postavená stránka — pásy přes celou šířku, dlaždice v prostředním sloupci posunuté o kus dolů, patky nadpisů useknuté jako čelo prkna. BARVY nejsou vymyšlené: #B08352 je hnědá role podlahy z jeho vlastního loga, odečtená z pixelů. Modrá #0075BE je z loga taky, ale zůstává jen v logu — paleta stránky je teplá, jak si žádá materiál, který prodává. ========================================================================= */ /* ---------- písma ------------------------------------------------------- */ @font-face{font-family:'Zilla Slab';src:url(pismo/zillaslab-600-latin-ext.woff2) format('woff2'); font-weight:600;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Zilla Slab';src:url(pismo/zillaslab-600-latin.woff2) format('woff2'); font-weight:600;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Zilla Slab';src:url(pismo/zillaslab-700-latin-ext.woff2) format('woff2'); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Zilla Slab';src:url(pismo/zillaslab-700-latin.woff2) format('woff2'); font-weight:700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Epilogue';src:url(pismo/epilogue-var-latin-ext.woff2) format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Epilogue';src:url(pismo/epilogue-var-latin.woff2) format('woff2'); font-weight:300 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ---------- proměnné ---------------------------------------------------- */ :root{ --krem:#FCF7F0; --krem-2:#F5EBDD; --krem-3:#EDE0CE; --bila:#FFFFFF; --tma:#2A211A; --tma-2:#3B2F26; --text:#4A3D33; --text-2:#6B5A4B; --dub:#B08352; /* ⭐ z loga — role podlahy pod postavou */ --dub-tmavy:#8A5418; --dub-syty:#9E611D; --linka:#E2D3BE; --pas:1200px; --radius:3px; /* prkna nemají zaoblené rohy */ --stin:0 1px 2px rgba(42,33,26,.05), 0 6px 18px rgba(42,33,26,.06); --stin-2:0 2px 6px rgba(42,33,26,.08), 0 14px 36px rgba(42,33,26,.10); --prechod:.28s cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* ⚠️ clip, ne hidden — hidden na ubíjí position:sticky v hlavičce */ overflow-x:clip; } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--krem); color:var(--text); font:400 clamp(16px,.55vw + 14.2px,17.5px)/1.68 'Epilogue', system-ui,-apple-system,'Segoe UI',sans-serif; overflow-x:clip; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Zilla Slab',Georgia,serif; font-weight:700; color:var(--tma); line-height:1.14; letter-spacing:-.012em; margin:0 0 .5em; text-wrap:balance; } h1{font-size:clamp(2.15rem,4.3vw + .7rem,3.7rem);} h2{font-size:clamp(1.7rem,2.5vw + .8rem,2.65rem);} h3{font-size:clamp(1.16rem,.7vw + .95rem,1.42rem);} h4{font-size:1.05rem;font-weight:600;} p{margin:0 0 1.05em;} p:last-child{margin-bottom:0;} img{max-width:100%;height:auto;display:block;} a{color:var(--dub-tmavy);} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--dub-syty);outline-offset:2px;border-radius:2px; } em{font-style:normal;color:var(--dub-tmavy);} .pas{width:min(100% - 2.6rem,var(--pas));margin-inline:auto;} .preskoc{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--tma);color:var(--krem);padding:.85rem 1.3rem;font-weight:600; } .preskoc:focus{left:.6rem;top:.6rem;} /* ---------- lamelový pruh (dělič sekcí) --------------------------------- */ /* Vodorovné pásy s přesazenými spárami — vazba na půl, jak se klade podlaha. */ .lamely{ height:14px; background: repeating-linear-gradient(90deg,transparent 0 118px,rgba(42,33,26,.14) 118px 120px), linear-gradient(var(--dub),var(--dub)); background-size:240px 7px,100% 7px; background-position:0 0,0 0; box-shadow:inset 0 -7px 0 var(--dub-syty), inset -120px -7px 0 0 rgba(0,0,0,0); position:relative; } .lamely::after{ content:'';position:absolute;inset:7px 0 0; background:repeating-linear-gradient(90deg,transparent 0 118px, rgba(42,33,26,.16) 118px 120px); background-position:60px 0; /* spodní řada přesazená o půl prkna */ } /* ---------- lišty nad hlavičkou ----------------------------------------- */ .navrh-lista{background:var(--tma);color:#E8DCCB;font-size:.83rem;} .navrh-lista .pas{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem; justify-content:space-between;padding:.6rem 0;} .navrh-lista strong{color:#F3B96A;} .navrh-lista a{color:#F3B96A;} .lista{background:var(--krem-2);border-bottom:1px solid var(--linka); font-size:.85rem;color:var(--text-2);} .lista .pas{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem; justify-content:space-between;padding:.5rem 0;} .lista strong{color:var(--tma);font-weight:600;} /* Odkazy na sítě v horní liště. ⭐ Klient si je 20. 8. 2026 v hovoru vyžádal nahoru — v patičce mu je nikdo nenajde a má na nich realizace a focení. */ .lista__site{display:inline-flex;align-items:center;gap:.5rem;} .lista__site a{ display:grid;place-items:center;width:26px;height:26px; border-radius:50%;background:var(--dub-syty);color:#fff; transition:background var(--prechod),transform var(--prechod); } .lista__site a:hover,.lista__site a:focus-visible{ background:var(--tma);transform:translateY(-1px); } .lista__site svg{width:15px;height:15px;fill:currentColor;} /* ⚠️ WhatsApp není „sledování" jako FB a IG — tam se PÍŠE. Odlišuje se proto barvou značky, aby bylo bez dalšího slova v liště poznat, že klikáním na něj se otevře zpráva, ne profil. */ /* ⛔ NE #25D366 (běžná WhatsApp zelená) — bílá ikona na ní má kontrast jen 1,98:1 a propadá. Tmavší odstín z jejich vlastní palety dá 4,14:1. ⚠️ Měřeno výpočtem, ne odhadem ([[kontrast-dem-nastroje]]). */ .socialni__wa{background:#128C7E!important;} .socialni__wa:hover,.socialni__wa:focus-visible{background:#075E54!important;} /* Rámeček akce. ⭐ Klient chystá k 25 letům firmy slevu na říjen 2026 — chce ji na webu vidět. Datum je v textu napsané naplno, aby se z toho po skončení akce nestal další věčně platný nápis jako na starém webu. */ .akce-box{ margin:0 0 1.2rem;padding:1rem 1.2rem; background:var(--krem-2);border-left:4px solid var(--dub-syty); border-radius:0 var(--radius) var(--radius) 0; } .akce-box strong{color:var(--tma);} /* ---------- hlavička ----------------------------------------------------- */ .hlava{ position:sticky;top:0;z-index:60; background:rgba(252,247,240,.94); backdrop-filter:saturate(140%) blur(9px); border-bottom:1px solid var(--linka); } .hlava .pas{display:flex;align-items:center;gap:1.1rem;min-height:76px;} .znacka{display:block;flex:0 0 auto;line-height:0;} .znacka img{width:150px;height:76px;object-fit:contain;object-position:left center;} .hlava nav{margin-left:auto;} .menu{display:flex;gap:.15rem;list-style:none;margin:0;padding:0;} .menu a{ display:block;padding:.55rem .78rem;border-radius:var(--radius); color:var(--text);text-decoration:none;font-weight:500;font-size:.97rem; transition:background var(--prechod),color var(--prechod); position:relative; } .menu a::after{ content:'';position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px; background:var(--dub-syty);transform:scaleX(0);transform-origin:left; transition:transform var(--prechod); } .menu a:hover{color:var(--tma);} .menu a:hover::after{transform:scaleX(1);} .menu a[aria-current="page"]{color:var(--tma);font-weight:600;} .menu a[aria-current="page"]::after{transform:scaleX(1);} .tel-hlava{ display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto; background:var(--tma);color:var(--krem);text-decoration:none; padding:.62rem 1.05rem;border-radius:var(--radius);font-weight:600; font-size:.98rem;transition:background var(--prechod);white-space:nowrap; } .tel-hlava:hover{background:var(--dub-syty);} .tel-hlava svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto;} /* WhatsApp vedle volání. ⭐ Patří sem, ne mezi „sledujte nás" — je to způsob, jak se ozvat, ne profil k prohlížení. Výška i zaoblení se drží telefonního tlačítka, aby to byla jedna dvojice, ne dvě náhodné věci. */ .hlava__spojeni{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;} .wa-hlava{ display:grid;place-items:center;flex:0 0 auto; width:42px;height:42px;border-radius:var(--radius); background:#128C7E;color:#fff;text-decoration:none; transition:background var(--prechod); } .wa-hlava:hover,.wa-hlava:focus-visible{background:#075E54;} .wa-hlava svg{width:20px;height:20px;fill:currentColor;} /* ---------- akce ---------------------------------------------------------- */ /* Zvýrazněná položka menu. Klient chtěl na akce „tlačítko" — tohle je ono: pořád je to normální odkaz v navigaci, jen se nedá přehlédnout. */ .menu__akce{background:var(--dub-syty);color:#fff!important;font-weight:600;} .menu__akce:hover,.menu__akce:focus-visible{background:var(--tma);} .menu__akce::after{display:none;} .akce__seznam{display:grid;gap:1.4rem;max-width:70ch;} .akce{ padding:1.6rem 1.8rem;background:var(--krem-2); border:1px solid var(--linka);border-radius:var(--radius); } .akce h2{margin:.5rem 0 .7rem;} .akce p{margin:0 0 .6rem;} .akce__hlava{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;} .akce__znak{ display:inline-block;padding:.22rem .7rem;border-radius:999px; background:var(--dub-syty);color:#fff; font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; } /* ⚠️ Chystaná akce NESMÍ vypadat stejně jako běžící — jinak si zákazník přijede pro slevu, která začne až za měsíc. */ .akce__znak--chysta{background:var(--tma);} .akce__obdobi{margin:0!important;font-weight:600;color:var(--tma);} .akce__pdf{margin-top:1.1rem!important;} /* Akce s obrázkem. ⭐ Obrázek vlevo, text vpravo — stejné rozvržení, jaké má klient na dnešním webu a na které jsou jeho zákazníci zvyklí. ⚠️ Na mobilu se to skládá pod sebe, jinak by z obrázku zbyl proužek. */ .akce--s-obrazkem{ display:grid;gap:1.5rem; grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:start; } .akce__foto{margin:0;} .akce__foto img{ display:block;width:100%;height:auto;border-radius:var(--radius); border:1px solid var(--linka);background:#fff; } .akce__telo{min-width:0;} @media (max-width:640px){ .akce--s-obrazkem{grid-template-columns:1fr;} .akce__foto img{max-width:320px;} } .prepinac{display:none;} /* ---------- tlačítka ------------------------------------------------------ */ .cudl{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.86rem 1.5rem;border-radius:var(--radius);font-weight:600; text-decoration:none;font-size:1rem;border:2px solid transparent; transition:background var(--prechod),color var(--prechod), border-color var(--prechod),transform var(--prechod); cursor:pointer;font-family:inherit;line-height:1.25; } .cudl svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto;} .cudl--plny{background:var(--dub-syty);color:#fff;} .cudl--plny:hover{background:var(--tma);transform:translateY(-2px);} .cudl--obrys{border-color:var(--tma);color:var(--tma);background:transparent;} .cudl--obrys:hover{background:var(--tma);color:var(--krem);transform:translateY(-2px);} .cudl--svetly{border-color:rgba(252,247,240,.55);color:var(--krem);background:transparent;} .cudl--svetly:hover{background:var(--krem);color:var(--tma);} /* ---------- úvodní obrazovka --------------------------------------------- */ .hero{position:relative;background:var(--krem);overflow:clip;} .hero .pas{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2rem,4vw,4.2rem);align-items:center; padding-block:clamp(2.8rem,5vw,4.6rem); } .hero__text>*{ opacity:0;transform:translateY(16px); transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1); } .hero.nabehl .hero__text>*{opacity:1;transform:none;} .hero.nabehl .hero__text>*:nth-child(2){transition-delay:.1s;} .hero.nabehl .hero__text>*:nth-child(3){transition-delay:.2s;} .hero.nabehl .hero__text>*:nth-child(4){transition-delay:.3s;} [data-bez-animaci] .hero__text>*{opacity:1;transform:none;transition:none;} .hero__stitek{ display:inline-flex;align-items:center;gap:.55rem; font-size:.85rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--dub-tmavy);margin:0 0 1.1rem; } .hero__stitek::before{ content:'';width:34px;height:8px;background:var(--dub); box-shadow:0 4px 0 -1px var(--dub-syty); /* dvě prkna nad sebou */ } .hero h1{margin-bottom:.42em;} .hero__perex{font-size:clamp(1.04rem,.6vw + .9rem,1.2rem);color:var(--text-2); max-width:46ch;margin-bottom:1.6rem;} .hero__cudliky{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.7rem;} .hero__pod{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.93rem; color:var(--text-2);} .hero__pod span{display:inline-flex;align-items:center;gap:.45rem;} .hero__pod svg{width:16px;height:16px;fill:var(--dub-syty);flex:0 0 auto;} .hero__foto{position:relative;} .hero__foto img{ width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius); box-shadow:var(--stin-2); } /* Dvě prkna přesazená o půl délky, přisazená k levému dolnímu rohu fotky. ⚠️ Původně to mělo z-index:-1 a „vykukovat" zpod fotky — jenže `.hero` má vlastní pozadí, takže se ozdoba schovala za ně a nebyla vidět vůbec. Leží proto nad fotkou, kde zabírá jen roh. */ .hero__foto::after{ content:'';position:absolute;left:-18px;bottom:-18px;width:132px;height:46px; background: linear-gradient(var(--dub-syty) 0 0) 0 0/72px 21px no-repeat, linear-gradient(var(--dub) 0 0) 36px 25px/96px 21px no-repeat; filter:drop-shadow(0 2px 6px rgba(42,33,26,.25)); } /* ---------- pruh s čísly --------------------------------------------------- */ .cisla{background:var(--tma);color:var(--krem);} /* ⚠️ `margin:0 auto`, ⛔ ne `margin:0` — ten
nese i třídu `.pas`, která obsah centruje, a tohle pravidlo je specifičtější. S obyčejnou nulou se pruh na širokém okně slepí doleva (na 1280 px je posun jen 80 px a přehlédne se). */ .cisla dl{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem; margin:0 auto;padding:clamp(1.9rem,3vw,2.7rem) 0; } .cisla div{position:relative;padding-left:1.15rem;} .cisla div::before{ content:'';position:absolute;left:0;top:.42rem;width:5px;height:calc(100% - .8rem); background:var(--dub); } .cisla dt{ font-family:'Zilla Slab',Georgia,serif;font-weight:700; font-size:clamp(1.75rem,2vw + 1.1rem,2.4rem);line-height:1.05;color:#F3B96A; letter-spacing:-.02em; } .cisla dd{margin:.34rem 0 0;font-size:.93rem;line-height:1.45;color:#D9CBB8;} /* ---------- sekce ---------------------------------------------------------- */ .sekce{padding-block:clamp(3.2rem,6vw,5.4rem);} .sekce--krem{background:var(--krem-2);} .sekce--uzka{padding-block:clamp(2.4rem,4vw,3.6rem);} .stitek{ display:flex;align-items:center;gap:.7rem; font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--dub-tmavy);margin:0 0 .85rem; } .stitek b{ font-family:'Zilla Slab',Georgia,serif;font-size:.95rem;font-weight:700; color:var(--krem);background:var(--dub-syty); padding:.14rem .48rem;letter-spacing:.02em; } .perex{font-size:1.06rem;color:var(--text-2);} .najed{opacity:0;transform:translateY(20px); transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1);} .najed.videt{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ .najed{opacity:1;transform:none;transition:none;} } [data-bez-animaci] .najed{opacity:1;transform:none;transition:none;} /* ---------- „hodinoví manželé" — jeho vlastní věta ------------------------- */ .veta{ background:var(--tma);color:var(--krem);position:relative;overflow:clip; padding-block:clamp(3rem,5vw,4.6rem); } .veta::before{ content:'';position:absolute;inset:0; background:repeating-linear-gradient(90deg,transparent 0 158px, rgba(252,247,240,.045) 158px 160px); pointer-events:none; } .veta .pas{position:relative;display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(1.8rem,4vw,3.6rem);align-items:center;} .veta blockquote{ margin:0;font-family:'Zilla Slab',Georgia,serif;font-weight:600; font-size:clamp(1.5rem,2.2vw + .85rem,2.35rem);line-height:1.26; color:var(--krem);letter-spacing:-.01em;text-wrap:balance; } .veta blockquote b{color:#F3B96A;font-weight:700;} .veta figcaption{margin-top:1.1rem;font-size:.93rem;color:#B9A893;} .veta__vedle{color:#D9CBB8;font-size:1rem;} .veta__vedle p{margin-bottom:.9rem;} /* ---------- dlaždice sortimentu (vazba na půl) ----------------------------- */ /* ⛔ Prostřední sloupec byl zkusmo posunutý dolů (translateY), aby dlaždice držely „vazbu na půl" jako prkna v podlaze. Na snímku 17. 8. 2026 to ale nevypadalo jako motiv, ale jako rozbitá mřížka — karty mají různou výšku, takže spodní hrany stejně nelícují a posun vypadal jako chyba. Vazba na půl zůstala tam, kde je čitelná: v lamelových dělicích pruzích, ve štítku hero sekce a v kartě bez fotky. */ .mrizka{display:grid;gap:1.5rem;grid-template-columns:repeat(3,1fr);margin-top:2.4rem;} .karta{ display:flex;flex-direction:column;background:var(--bila); border:1px solid var(--linka);border-radius:var(--radius);overflow:hidden; text-decoration:none;color:inherit;box-shadow:var(--stin); transition:box-shadow var(--prechod),transform var(--prechod), border-color var(--prechod); } a.karta:hover{box-shadow:var(--stin-2);transform:translateY(-3px); border-color:var(--dub);} .karta__foto{background:var(--krem-3);aspect-ratio:4/3;overflow:hidden;} .karta__foto img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1);} a.karta:hover .karta__foto img{transform:scale(1.045);} .karta__telo{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column; flex:1;} /* ⚠️ h2 i h3 — na rozcestnících (podlahy, sluzby) jsou karty hlavní oddíly stránky pod h1, a povyšují se proto na h2 (viz build.py). Vypadat musí stejně jako h3 na úvodní stránce. */ .karta :is(h2,h3){margin-bottom:.42rem; font-size:clamp(1.16rem,.7vw + .95rem,1.42rem);} .karta p{font-size:.96rem;color:var(--text-2);margin-bottom:1rem;} .karta__dal{margin-top:auto;font-weight:600;font-size:.94rem; color:var(--dub-tmavy);} a.karta:hover .karta__dal{color:var(--tma);} /* ⛔ Karta bez fotky. Pro marmoleum, laminát, korek, chemii a péči o podlahy nemá klient na starém webu vlastní snímek — jsou tam jen katalogové vizuály dodavatelů, a ty se podle `_SPOLECNE.md` nepoužívají. Místo cizí fotky tedy pruh prken: řádek nespadne a nic se nepředstírá. */ .karta__foto--bez{ aspect-ratio:4/1.4; background: repeating-linear-gradient(90deg,transparent 0 78px,var(--linka) 78px 80px), repeating-linear-gradient(180deg,var(--krem-3) 0 26px,var(--krem-2) 26px 27px); background-position:0 0,0 0; position:relative; } .karta__foto--bez::after{ content:'';position:absolute;inset:50% 0 0; background:repeating-linear-gradient(90deg,transparent 0 78px, var(--linka) 78px 80px); background-position:40px 0; } /* ---------- postup ---------------------------------------------------------- */ .kroky{display:grid;gap:1.4rem;grid-template-columns:repeat(4,1fr); margin-top:2.4rem;counter-reset:krok;} .krok{position:relative;padding-top:2.5rem;} .krok::before{ counter-increment:krok;content:counter(krok); position:absolute;top:0;left:0; font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:1.05rem; color:var(--krem);background:var(--dub-syty); width:2rem;height:2rem;display:grid;place-items:center; } .krok::after{ content:'';position:absolute;top:.94rem;left:2.45rem;right:-1.4rem;height:5px; background:repeating-linear-gradient(90deg,var(--dub) 0 22px, transparent 22px 26px); } .kroky>.krok:last-child::after{display:none;} .krok h3{font-size:1.1rem;margin-bottom:.35rem;} .krok p{font-size:.95rem;color:var(--text-2);margin:0;} /* ---------- galerie ---------------------------------------------------------- */ .galerie{display:grid;gap:.85rem;grid-template-columns:repeat(4,1fr);margin-top:2.2rem;} .snimek{ display:block;padding:0;border:0;background:var(--krem-3);cursor:zoom-in; border-radius:var(--radius);overflow:hidden;position:relative;line-height:0; aspect-ratio:4/3; } .snimek img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1),filter var(--prechod);} .snimek:hover img{transform:scale(1.05);} .snimek::after{ content:'';position:absolute;inset:0;background:rgba(42,33,26,0); transition:background var(--prechod); } .snimek:hover::after{background:rgba(42,33,26,.12);} .snimek--siroky{grid-column:span 2;aspect-ratio:8/3;} .galerie__vic{margin-top:1.1rem;font-size:.92rem;color:var(--text-2);} /* ---------- lupa ------------------------------------------------------------- */ .lupa{display:none;} .lupa[open]{ display:grid;position:fixed;inset:0;z-index:120; background:rgba(24,18,13,.94);place-items:center;padding:clamp(.8rem,3vw,2.4rem); } .lupa figure{margin:0;display:grid;gap:.75rem;justify-items:center; max-width:min(1400px,100%);} .lupa img{max-width:100%;max-height:78vh;width:auto;height:auto; border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.55);} .lupa__text{color:#EADFCF;font-size:.95rem;text-align:center;margin:0; max-width:70ch;} .lupa__pocet{color:#A2917D;font-size:.85rem;font-variant-numeric:tabular-nums;} .lupa button{ position:absolute;background:rgba(252,247,240,.14);border:0;color:var(--krem); width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid; place-items:center;transition:background var(--prechod); } .lupa button:hover{background:rgba(252,247,240,.3);} .lupa button svg{width:24px;height:24px;fill:currentColor;} .lupa__zavri{top:clamp(.7rem,2vw,1.5rem);right:clamp(.7rem,2vw,1.5rem);} .lupa__predchozi{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%);} .lupa__dalsi{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%);} /* ---------- pruh přes celou šířku --------------------------------------------- */ .band{position:relative;min-height:clamp(300px,42vw,470px);display:grid; align-items:center;overflow:clip;background:var(--tma);} .band img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:var(--vyrez,center); } .band::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg,rgba(24,18,13,.86) 0%,rgba(24,18,13,.66) 46%, rgba(24,18,13,.28) 100%); } .band .pas{position:relative;z-index:2;padding-block:clamp(2.6rem,5vw,4rem);} .band__text{max-width:56ch;color:var(--krem);} /* ⚠️ Zrcadlená varianta. Pruh je přes celou šířku zhruba 2,7:1, ale fotky jsou 16:9 — `cover` tedy z boků ukrojí zhruba třetinu. U fotky provozovny je celý smysl snímku cedule s názvem a IČ, a ta leží vlevo, přesně pod textem. Tady se proto text i tmavý přechod překlopí doprava a fotka se přisadí doleva, takže cedule zůstane vidět a je čitelná. */ .band--vpravo::after{ background:linear-gradient(260deg,rgba(24,18,13,.88) 0%,rgba(24,18,13,.68) 46%, rgba(24,18,13,.22) 100%); } .band--vpravo .band__text{margin-left:auto;} .band--vpravo img{object-position:left center;} @media (max-width:1000px){ /* na mobilu je pruh vysoký a úzký, výřez sedí sám — text zpátky doleva */ .band--vpravo .band__text{margin-left:0;} .band--vpravo::after{ background:linear-gradient(100deg,rgba(24,18,13,.9) 0%,rgba(24,18,13,.74) 46%, rgba(24,18,13,.42) 100%); } } .band__text h2{color:var(--krem);} .band__text p{color:#DFD3C2;} .band__cudliky{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;} /* ---------- dvousloupec (text + fotka) ------------------------------------------ */ .dvojice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.8rem,4vw,3.4rem);align-items:center;} .dvojice--obraceno>*:first-child{order:2;} .dvojice img{border-radius:var(--radius);box-shadow:var(--stin-2);} .seznam{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem;} .seznam li{position:relative;padding-left:1.85rem;font-size:1rem;} .seznam li::before{ content:'';position:absolute;left:0;top:.55em;width:14px;height:6px; background:var(--dub-syty); } .seznam--dva{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.6rem;} /* ---------- tabulka otvírací doby ------------------------------------------------ */ .doba{width:100%;border-collapse:collapse;margin-top:.9rem;font-size:1rem;} .doba th,.doba td{text-align:left;padding:.62rem .2rem; border-bottom:1px solid var(--linka);} .doba th{font-weight:600;color:var(--tma);} .doba td{color:var(--text-2);font-variant-numeric:tabular-nums;} .doba tr:last-child th,.doba tr:last-child td{border-bottom:0;} /* ---------- kontaktní panel ------------------------------------------------------- */ .panel{background:var(--bila);border:1px solid var(--linka); border-radius:var(--radius);padding:clamp(1.5rem,2.5vw,2.1rem); box-shadow:var(--stin);} .panel--tmavy{background:var(--tma);color:#D9CBB8;border-color:var(--tma-2);} .panel--tmavy :is(h2,h3){color:var(--krem);} .panel :is(h2,h3){margin-bottom:.9rem;font-size:clamp(1.3rem,1vw + 1rem,1.6rem);} .kontakty{list-style:none;margin:0;padding:0;display:grid;gap:.95rem;} .kontakty li{display:flex;gap:.85rem;align-items:flex-start;} .kontakty svg{width:20px;height:20px;fill:var(--dub-syty);flex:0 0 auto; margin-top:.18rem;} .panel--tmavy .kontakty svg{fill:#F3B96A;} .kontakty b{display:block;font-weight:600;color:var(--tma);font-size:.86rem; letter-spacing:.05em;text-transform:uppercase;margin-bottom:.1rem;} .panel--tmavy .kontakty b{color:#B9A893;} .kontakty a{color:var(--dub-tmavy);text-decoration:none;font-weight:600; border-bottom:1px solid rgba(138,84,24,.35);} .kontakty a:hover{border-bottom-color:var(--dub-tmavy);} .panel--tmavy .kontakty a{color:#F3B96A;border-bottom-color:rgba(243,185,106,.4);} /* ---------- mapa ------------------------------------------------------------------- */ /* ⭐ Funkční, ne obrázek — dá se přibližovat i posouvat. ✅ Rámeček projde přes CSP i po nasazení (`frame-src https:`). ⛔ Vlastní Leaflet s dlaždicemi by na klientské doméně spadl na `img-src`. */ .mapa{border-radius:var(--radius);overflow:hidden;border:1px solid var(--linka); background:var(--krem-3);box-shadow:var(--stin);} /* ⛔⛔ Na iframu NIKDY `aspect-ratio`. Vnitřní dokument pak při načtení vidí nulovou výšku, mapa se inicializuje do prázdna a dlaždice se nikdy nevykreslí — 20. 8. 2026 to vypadalo jako chyba mapového podkladu, přitom táž adresa v holé stránce s pevnou výškou fungovala. Poměr se drží obalem přes padding, iframe dostane výšku v pixelech. */ .mapa__ram{position:relative;width:100%;padding-top:62.5%;} .mapa__ram iframe{position:absolute;inset:0;width:100%;height:100%;border:0; display:block;} .mapa__pod{ display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:space-between; align-items:center;margin:0;padding:.6rem .9rem;background:var(--krem-2); border-top:1px solid var(--linka);font-size:.85rem;color:var(--text-2); } .mapa__pod a{font-weight:600;} /* ---------- formulář ---------------------------------------------------------------- */ .pole{display:grid;gap:1.05rem;} .pole--dva{grid-template-columns:repeat(2,minmax(0,1fr));} .pole label{display:block;font-weight:600;font-size:.93rem;color:var(--tma); margin-bottom:.35rem;} .pole input,.pole textarea,.pole select{ width:100%;font:inherit;font-size:1rem;color:var(--text); background:var(--bila);border:1px solid var(--linka);border-radius:var(--radius); padding:.72rem .85rem;transition:border-color var(--prechod), box-shadow var(--prechod); } .pole input:hover,.pole textarea:hover,.pole select:hover{border-color:var(--dub);} .pole input:focus,.pole textarea:focus,.pole select:focus{ border-color:var(--dub-syty);box-shadow:0 0 0 3px rgba(158,97,29,.15); } .pole textarea{min-height:132px;resize:vertical;} .napoveda{font-size:.86rem;color:var(--text-2);margin:.35rem 0 0;} .chyba{color:#A32B12;font-weight:500;} .souhlas{display:flex;gap:.7rem;align-items:flex-start;font-size:.93rem; color:var(--text-2);} .souhlas input{width:19px;height:19px;flex:0 0 auto;margin-top:.16rem;accent-color:var(--dub-syty);} .hlaska{ display:none;margin-top:1.2rem;padding:1rem 1.15rem;border-radius:var(--radius); background:#EFF6EA;border:1px solid #C6DDB6;color:#2F4A1E;font-size:.97rem; } .hlaska[data-videt]{display:block;} .povinne{color:var(--dub-tmavy);} /* ---------- patička ------------------------------------------------------------------- */ .pata{background:var(--tma);color:#B9A893;padding-block:clamp(2.6rem,4vw,3.6rem); font-size:.95rem;} .pata__mrizka{display:grid;grid-template-columns:1.5fr 1fr 1fr; gap:2rem clamp(1.5rem,3vw,3rem);} .pata h3{color:var(--krem);font-family:'Zilla Slab',Georgia,serif;font-weight:700; font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;} .pata ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;} .pata a{color:#D9CBB8;text-decoration:none;} .pata a:hover{color:#F3B96A;text-decoration:underline;} .pata__logo{margin-bottom:1rem;} .pata__logo img{width:170px;height:86px;object-fit:contain;object-position:left center; background:var(--krem);padding:.5rem .7rem;border-radius:var(--radius);} .pata__udaje{font-size:.88rem;line-height:1.75;color:#9E8D79;} /* ⚠️ #8D7C69 dávalo na tmavém pozadí jen 3,92:1 (měřeno z pixelů 17. 8. 2026). Zrovna tenhle řádek nese povinné údaje provozovatele podle § 435 — musí být čitelný, ne dekorativně vybledlý. #A2907B dává 5,42:1. */ .pata__spod{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--tma-2); display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;justify-content:space-between; font-size:.86rem;color:#A2907B;} .socialni{display:flex;gap:.6rem;margin-top:1rem;} /* 44×44 je nejmenší pohodlný dotykový cíl — na 38 px se ikony na mobilu trefovaly špatně (změřeno 17. 8. 2026 při 375 px). */ .socialni a{display:grid;place-items:center;width:44px;height:44px; border:1px solid var(--tma-2);border-radius:var(--radius); transition:background var(--prechod),border-color var(--prechod);} .socialni a:hover{background:var(--dub-syty);border-color:var(--dub-syty);} .socialni svg{width:18px;height:18px;fill:#D9CBB8;} .socialni a:hover svg{fill:#fff;} /* ---------- responzivita ----------------------------------------------------------------- */ @media (max-width:1000px){ .hlava .pas{flex-wrap:wrap;gap:.7rem;min-height:64px;padding-block:.6rem;} .znacka img{width:126px;height:64px;} .prepinac{ display:grid;place-content:center;gap:5px;margin-left:auto;order:2; width:46px;height:46px;background:transparent;border:1px solid var(--linka); border-radius:var(--radius);cursor:pointer; } /* ⛔ tři skutečné y, ne border-top + ::after */ .prepinac span{display:block;width:21px;height:2px;background:var(--tma); transition:transform var(--prechod),opacity var(--prechod);} .prepinac[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .prepinac[aria-expanded="true"] span:nth-child(2){opacity:0;} .prepinac[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} .hlava nav{order:4;flex-basis:100%;margin-left:0;} .menu{display:none;flex-direction:column;gap:0;padding-bottom:.6rem;} .menu.otevreno{display:flex;} .menu a{padding:.85rem .3rem;border-bottom:1px solid var(--linka);} .menu a::after{display:none;} .menu a[aria-current="page"]{color:var(--dub-tmavy);} .hlava__spojeni{order:3;} .hero .pas{grid-template-columns:1fr;gap:2rem;} .hero__foto{order:-1;} .hero__foto img{aspect-ratio:4/3;} .hero__foto::after{display:none;} .cisla dl{grid-template-columns:repeat(2,1fr);} .veta .pas{grid-template-columns:1fr;} .mrizka{grid-template-columns:repeat(2,1fr);} .kroky{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.4rem;} .kroky>.krok:nth-child(2n)::after{display:none;} .galerie{grid-template-columns:repeat(3,1fr);} .dvojice{grid-template-columns:1fr;} .dvojice--obraceno>*:first-child{order:0;} .pata__mrizka{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .pas{width:min(100% - 1.8rem,var(--pas));} .navrh-lista .pas,.lista .pas{flex-direction:column;gap:.2rem;} .lista{display:none;} .cisla dl{grid-template-columns:1fr;gap:1.15rem;} .mrizka{grid-template-columns:1fr;} .kroky{grid-template-columns:1fr;gap:1.5rem;} .krok::after{display:none;} .galerie{grid-template-columns:repeat(2,1fr);gap:.6rem;} .snimek--siroky{grid-column:span 2;aspect-ratio:16/9;} .pole--dva{grid-template-columns:1fr;} .seznam--dva{grid-template-columns:1fr;} .pata__mrizka{grid-template-columns:1fr;} .lupa button{width:44px;height:44px;} .lupa__predchozi{left:.35rem;} .lupa__dalsi{right:.35rem;} /* ⚠️ Na mobilu musí mít tlačítko i odkazy v patičce aspoň 44 px na výšku. Telefon v hlavičce měl 42 px, odkazy v patičce jen 16 px. */ .tel-hlava{padding:.62rem .85rem;font-size:.92rem;min-height:44px;} .pata ul{gap:0;} .pata ul li>a{display:inline-flex;align-items:center;min-height:44px;} } @media print{ .navrh-lista,.prepinac,.hero__cudliky,.lupa,.band__cudliky{display:none;} body{background:#fff;} } /* ---------- rádce s výběrem podlahy --------------------------------------- */ /* ⭐ Slíbeno klientovi v hovoru: „něco, co visí vpravo dole a láká klikat." ⛔ Neotvírá se samo. Vyskakovací okno, které si nikdo nevyžádal, lidi zavírají dřív, než ho přečtou — a na mobilu zakryje půl stránky. */ .radce__cudl{ position:fixed;right:1.1rem;bottom:1.1rem;z-index:70; display:inline-flex;align-items:center;gap:.55rem; padding:.8rem 1.15rem;border:0;border-radius:999px; background:var(--dub-syty);color:#fff;font:inherit;font-weight:600; font-size:.97rem;cursor:pointer; box-shadow:0 6px 22px rgba(42,33,26,.28); transition:background var(--prechod),transform var(--prechod); } .radce__cudl:hover,.radce__cudl:focus-visible{ background:var(--tma);transform:translateY(-2px); } .radce__cudl svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto;} .radce{ position:fixed;right:1.1rem;bottom:4.9rem;z-index:71; width:min(360px,calc(100vw - 2.2rem)); background:var(--krem);border:1px solid var(--linka); border-radius:var(--radius);overflow:hidden; box-shadow:0 14px 40px rgba(42,33,26,.26); } .radce[hidden]{display:none;} .radce__hlava{ display:flex;align-items:center;justify-content:space-between;gap:.8rem; padding:.85rem 1.1rem;background:var(--tma);color:var(--krem); } .radce__zavri{ display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto; background:none;border:0;border-radius:50%;color:var(--krem);cursor:pointer; } .radce__zavri:hover{background:rgba(255,255,255,.14);} .radce__zavri svg{width:17px;height:17px;fill:currentColor;} .radce__telo{padding:1.1rem;} .radce__pokrok{ margin:0 0 .35rem;font-size:.76rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--dub-syty); } .radce__otazka{margin:0 0 .9rem;font-weight:600;font-size:1.06rem;color:var(--tma);} .radce__volby{display:grid;gap:.5rem;} .radce__volba{ display:block;width:100%;text-align:left; padding:.68rem .9rem;font:inherit;font-size:.97rem;cursor:pointer; background:#fff;border:1px solid var(--linka);border-radius:var(--radius); color:var(--text);transition:border-color var(--prechod),background var(--prechod); } .radce__volba:hover,.radce__volba:focus-visible{ border-color:var(--dub-syty);background:var(--krem-2); } .radce__proc{margin:0 0 .3rem!important;font-size:.95rem;color:var(--text-2);} .radce__odkaz{ display:block;text-align:center;padding:.68rem .9rem; border:1px solid var(--dub-syty);border-radius:var(--radius); color:var(--dub-syty);text-decoration:none;font-weight:600;font-size:.97rem; } .radce__odkaz--plny{background:var(--dub-syty);color:#fff;} .radce__odkaz:hover{background:var(--tma);border-color:var(--tma);color:#fff;} /* ⚠️ Rádce nenahrazuje zaměření — tahle poznámka nesmí zmizet. */ .radce__pozn{margin:.5rem 0 0!important;font-size:.84rem;color:var(--text-2);} .radce__pata{ display:flex;align-items:center;justify-content:space-between;gap:.8rem; padding:.7rem 1.1rem;border-top:1px solid var(--linka);background:var(--krem-2); font-size:.9rem; } .radce__zpet{background:none;border:0;font:inherit;color:var(--text-2);cursor:pointer;padding:0;} .radce__zpet:hover{color:var(--tma);} .radce__tel{color:var(--dub-syty);font-weight:600;} @media (max-width:520px){ .radce__cudl span{display:none;} .radce__cudl{padding:.85rem;} .radce{right:.7rem;left:.7rem;bottom:4.6rem;width:auto;} } @media print{ .radce,.radce__cudl{display:none!important;} }