/* ========================================================= TOKENY Odstíny jsou v proměnných --h-brand a --h-accent, aby se daly ZMĚŘIT přímo ze zdroje, ne odhadnout (12.1). POZOR NA PÁSMO 200–230°: tam leží sesterské weby (servis-notebooku.eu navy 221–226°, servis-asus.cz ocelová ~202°). Zadavatel si vyžádal modrou, takže jdeme do hlubší indigové 236° — je to jednoznačně modrá, ale mimo jejich pásmo. Jantar 38° zůstává jako akcent: je to barva výstrahy bez paniky a k indigové dělá čistý doplněk. ========================================================= */ :root{ --h-brand: 236; /* indigová modř — mimo pásmo 200–230° */ --h-accent: 38; /* jantar */ --bg: hsl(var(--h-brand) 32% 98%); --surface: #ffffff; --surface-2: hsl(var(--h-brand) 30% 96%); --ink: hsl(var(--h-brand) 42% 12%); --ink-2: hsl(var(--h-brand) 16% 34%); --line: hsl(var(--h-brand) 24% 90%); --line-strong: hsl(var(--h-brand) 20% 76%); --brand: hsl(var(--h-brand) 54% 17%); --brand-2: hsl(var(--h-brand) 48% 25%); --brand-3: hsl(var(--h-brand) 58% 33%); --on-brand: hsl(var(--h-brand) 40% 97%); --on-brand-2: hsl(var(--h-brand) 26% 82%); --accent: hsl(var(--h-accent) 90% 31%); --accent-strong: hsl(var(--h-accent) 94% 23%); --accent-soft: hsl(var(--h-accent) 92% 95%); --accent-line: hsl(40 92% 62%); --ok: hsl(158 68% 24%); --err: hsl(2 72% 38%); /* Měkčí tvarosloví na přání zadavatele — odchylka od 12.1, viz ZADANI-ZMENY.md */ --radius: 14px; --radius-sm: 9px; --pill: 999px; --shadow-1: 0 1px 2px hsl(var(--h-brand) 42% 12% / .05), 0 10px 28px -14px hsl(var(--h-brand) 42% 12% / .22); --shadow-2: 0 2px 4px hsl(var(--h-brand) 42% 12% / .06), 0 18px 40px -18px hsl(var(--h-brand) 42% 12% / .30); --measure: 74ch; --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @layer base, layout, components, utils; @layer base{ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:clamp(17px, 0.95rem + 0.2vw, 18px); line-height:1.65; text-rendering:optimizeLegibility; overflow-x:hidden; } /* ---------- jemná podkladová grafika ---------- Dvě vrstvy pod celou stránkou, obě JEN z gradientů — žádný obrázek, žádný požadavek navíc, nulová váha. Obojí je position:fixed, takže se při scrollování nehýbe a nezdržuje vykreslování. Záporný z-index je schválně: potomek se zápornou vrstvou se kreslí nad pozadí rodiče, ale pod obsah, takže grafika leží pod textem a nic nepřekrývá. POZOR: tyhle dvě vrstvy se při úpravě hera 23. 9. omylem smazaly spolu s .hero__dekor. Nejsou dekorace hera — patří k a musí přežít každý zásah do sekce .hero. */ body::before, body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; } /* 1. datová mřížka — pravidelný rastr 64 px jako mapa sektorů, shora dolů se vytrácí, aby nerušila u patičky */ body::before{ background-image: linear-gradient(to right, hsl(var(--h-brand) 30% 38% / .04) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--h-brand) 30% 38% / .04) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 88%); mask-image:linear-gradient(to bottom, #000 0%, #000 40%, transparent 88%); } /* 2. stopy ploténky — soustředné kružnice v pravé části, stejný motiv jako ve značce */ body::after{ background-image:repeating-radial-gradient( circle at 92% 6%, transparent 0 37px, hsl(var(--h-brand) 45% 34% / .055) 37px 38px); } /* Na malém displeji by hustý rastr rušil, tak se zjemní. */ @media (max-width:700px){ body::before{ background-size:40px 40px; opacity:.55; } body::after{ background-image:repeating-radial-gradient( circle at 100% 2%, transparent 0 30px, hsl(var(--h-brand) 45% 34% / .045) 30px 31px); } } h1,h2,h3{ line-height:1.18; margin:0 0 var(--s2); letter-spacing:-0.018em; font-weight:700; } h1{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem); } h2{ font-size:clamp(1.38rem, 1.1rem + 1.2vw, 1.85rem); margin-top:var(--s5); } h3{ font-size:clamp(1.06rem, 1rem + 0.4vw, 1.2rem); margin-top:var(--s3); } p,ul,ol{ margin:0 0 var(--s2); max-width:var(--measure); } a{ color:var(--accent-strong); text-underline-offset:0.18em; text-decoration-thickness:1px; } a:hover{ color:var(--ink); } :focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } img,svg{ max-width:100%; } hr{ border:0; border-top:1px solid var(--line); margin:var(--s5) 0; } ::selection{ background:var(--accent-soft); } strong{ font-weight:700; } } @layer layout{ .wrap{ width:min(1180px, 100% - 2*var(--s3)); margin-inline:auto; } /* Na telefonu stačí 16px okraj — se 24px se hlavička nevešla o 22 px. */ @media (max-width:520px){ .wrap{ width:calc(100% - 2*var(--s2)); } } /* Hlavička smí být širší než obsah: se sedmi položkami, telefonem a CTA se do 1180 px nevešla a přetékala o 97 px. Změřeno, ne odhadnuto. */ .hdr .wrap{ width:min(1560px, 100% - 2*var(--s3)); } @media (max-width:520px){ .hdr .wrap{ width:calc(100% - 2*var(--s2)); } } /* Rytmus sekcí. Dřív měla každá sekce 64 px nahoře i dole, takže mezi dvěma sousedními vznikalo 128 px prázdna — u krátkých bloků víc než samotného textu. Padding je teď nižší a sousedící sekce se o mezeru DĚLÍ. */ .sec{ padding-block:var(--s3); position:relative; } .sec--plain{ border-top:0; padding-block:var(--s3) var(--s2); } .sec--tonovana{ background:var(--surface-2); padding-block:var(--s4); } /* První nadpis v sekci už mezeru dostal od paddingu, vlastní ji nepotřebuje */ .sec > h2:first-child, .sec > .wrap > h2:first-child, .sec > h1:first-child, .sec > .wrap > h1:first-child{ margin-top:0; } /* Sekce, která navazuje bez vizuálního předělu, nemusí začínat znovu od nuly */ .sec + .sec{ padding-top:var(--s2); } .sec--tonovana + .sec, .sec + .sec--tonovana{ padding-top:var(--s4); } .grid{ display:grid; gap:var(--s3); } .grid--3{ grid-template-columns:repeat(auto-fit, minmax(255px,1fr)); } .grid--4{ grid-template-columns:repeat(auto-fit, minmax(225px,1fr)); } .split{ display:grid; gap:var(--s5); grid-template-columns:1fr; } @media (min-width:900px){ .split{ grid-template-columns:1.2fr 1fr; align-items:start; } } .skip{ position:absolute; left:-9999px; top:0; background:var(--accent-strong); color:#fff; padding:var(--s2) var(--s3); z-index:100; border-radius:0 0 var(--radius-sm) 0; } .skip:focus{ left:0; top:0; } } @layer components{ /* ---------- hlavička ---------- */ .hdr{ background:linear-gradient(105deg, var(--brand) 0%, var(--brand-2) 62%, var(--brand-3) 100%); color:var(--on-brand); position:relative; } .hdr a{ color:var(--on-brand); text-decoration:none; } .hdr__row{ display:flex; align-items:center; gap:var(--s2); min-height:72px; flex-wrap:nowrap; } /* Logo: verzálky a větší značka na přání zadavatele. letter-spacing jde do PLUSU — u verzálek se záporné prokládání slepí a „ZÁCHRANA DAT" ztratí čitelnost na mobilu. */ .logo{ flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:12px; text-decoration:none; } .logo__znak{ flex:none; } /* min-width:0 je tu kvůli oříznutí: bez něj flexová položka nikdy nezmenší pod obsah a ellipsis se neuplatní. */ .logo__text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; } .logo__nazev{ font-weight:800; font-size:1.3rem; letter-spacing:0.02em; text-transform:uppercase; } .logo__nazev b{ color:var(--accent-line); font-weight:800; } /* Obchodní firma pod názvem — plní ji až skript (0C), proto rezervovaná výška. Délku firmy neurčujeme my, ale zápis v rejstříku, a ten může mít klidně padesát znaků. Proto tvrdý strop a oříznutí: hlavička se nikdy nesmí roztáhnout podle toho, co přijde z config.php. */ .logo__firma{ font-size:0.72rem; font-weight:600; opacity:.78; letter-spacing:0.01em; min-height:1em; max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* POZOR na pořadí: .cslot{display:inline-block} stojí v šabloně NÍŽ a má stejnou specifičnost, takže holé .logo__firma{display:none} prohrálo a firma se na 320 px pořád kreslila (přetečení 13 px, nalezeno 23. 9. 2026 skriptem layout-check). Selektor je proto o stupeň silnější. */ @media (max-width:520px){ .logo__nazev{ font-size:1.12rem; } .logo .logo__firma{ display:none; } } .nav{ display:none; margin-left:auto; } /* Měřeno, ne odhadnuto. Se sedmi položkami (Poradna přibyla, až vznikl obsah), telefonem a CTA potřebuje řádek 162 + menu + 419 px. Na 1280 px se to nevešlo o 24 px, na 1180 px o 123 px — proto práh 1320 px a pod ním kompaktní hlavička. Bohatší varianta (širší mezery, slovo „zdarma“) se zapíná až od 1560 px, kde na ni je místo. */ @media (min-width:1320px){ .nav{ display:flex; flex-wrap:nowrap; gap:3px; align-items:center; } } @media (min-width:1700px){ .nav{ gap:var(--s1); } } .nav a{ font-size:0.875rem; padding:6px 8px; border-radius:var(--pill); white-space:nowrap; transition:background-color .15s ease; } @media (min-width:1700px){ .nav a{ font-size:0.92rem; padding:6px 12px; } } .nav a:hover{ background:hsl(var(--h-brand) 40% 100% / .12); } .nav a[aria-current]{ background:hsl(var(--h-brand) 40% 100% / .16); color:#fff; } .hdr__cta{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); flex:none; } @media (min-width:1320px){ .hdr__cta{ margin-left:var(--s3); } } /* Na mobilu se velké CTA z hlavičky skrývá — nevešlo se a přetékalo o 264 px. Zastupuje ho plovoucí lišta dole; telefon zůstává, protože u záchrany dat přijde telefonem víc zakázek než formulářem (8.13). */ @media (max-width:899px){ .hdr__cta .btn--primary{ display:none; } } /* Kontejner pro runtime kontakt: rezervovaná šířka ⇒ žádný posun (0C) */ /* Sloty pro runtime kontakty (0C, vrstva 3) — stejná mechanika jako u sesterských webů: prázdný s rezervovanou šířkou, který naplní skript. Rezervace brání posunu layoutu při doplnění. */ .cslot{ display:inline-block; min-height:1.2em; vertical-align:top; } .cs-90{ min-width:9ch; } .cs-110{ min-width:11ch; } .cs-130{ min-width:13ch; } .cs-140{ min-width:14ch; } .cs-152{ min-width:15.5ch; } .cs-170{ min-width:17ch; } .cs-180{ min-width:18ch; } .cs-220{ min-width:22ch; } .cs-230{ min-width:23ch; } .tel{ display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; text-decoration:none; } .tel__i{ flex:none; opacity:.85; } .tel--lg{ font-size:1.05rem; } /* Telefony v hlavičce: dvě čísla pod sebou a pod nimi provozní doba linky */ .hdr__tel{ display:none; flex-direction:column; align-items:flex-end; gap:1px; font-size:0.86rem; line-height:1.25; } /* Telefony se ukazují, až když na ně v řádku opravdu je místo — měřeno */ @media (min-width:1400px){ .hdr__tel{ display:flex; } } .hdr__tel .tel{ font-size:0.95rem; } .hdr__hodiny{ font-size:0.74rem; opacity:.82; font-weight:600; white-space:nowrap; text-align:right; } /* Označení modelového případu. Musí být vidět na první pohled — proto rámeček a barva, ne petit pod čarou. */ .modelovy{ border:2px solid hsl(var(--h-accent) 70% 70%); background:linear-gradient(160deg, var(--accent-soft), hsl(var(--h-accent) 90% 98%)); border-radius:var(--radius); padding:var(--s3) var(--s4); } .modelovy h2{ margin:0 0 var(--s2); font-size:1.05rem; } .modelovy p{ margin-bottom:var(--s2); font-size:0.95rem; } .modelovy p:last-child{ margin-bottom:0; } /* Karta s identifikačními údaji (stránka /kontakt/ a /kontakt/udaje/) */ .kontakt-split{ display:grid; gap:var(--s4); align-items:start; min-width:0; } @media (min-width:900px){ .kontakt-split{ grid-template-columns:minmax(300px,380px) 1fr; } } /* Na právních stránkách je hlavní obsah text, karta jen doprovod — proto obrácený poměr sloupců. Bez téhle třídy skončil dlouhý text v 380px sloupci vedle poloprázdné karty. */ @media (min-width:900px){ .kontakt-split--obraceny{ grid-template-columns:minmax(0,1fr) minmax(250px,300px); } } .kontakt-split--obraceny .karta-firma{ position:sticky; top:var(--s3); } .prose--pravni{ max-width:74ch; } .prose--pravni h2{ margin-top:var(--s4); font-size:1.14rem; } .prose--pravni h2:first-child{ margin-top:0; } .prose--pravni p{ margin-bottom:var(--s2); } .karta-firma{ padding:var(--s3); background:var(--surface); min-width:0; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); } @media (min-width:560px){ .karta-firma{ padding:var(--s4); } } .karta-firma h2{ margin:0 0 var(--s3); font-size:1.15rem; } /* dlouhé sídlo nebo e-mail se na úzkém telefonu musí zalomit, ne přetéct */ .karta-firma .udaj__v{ overflow-wrap:anywhere; } .udaje{ display:grid; gap:var(--s2); } .udaj{ display:grid; gap:1px; } .udaj__k{ font-size:0.78rem; color:var(--ink-2); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; } .udaj__v{ display:flex; flex-wrap:wrap; gap:4px 14px; } .prose h2:first-child{ margin-top:0; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s1); min-height:46px; padding:11px var(--s3); border-radius:var(--pill); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease, border-color .15s ease; } .btn:hover{ transform:translateY(-1px); } .btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-1); } .btn--primary:hover{ background:var(--accent-strong); color:#fff; box-shadow:var(--shadow-2); } .btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); } .btn--ghost:hover{ border-color:var(--ink); color:var(--ink); box-shadow:var(--shadow-1); } .btn--onbrand{ background:hsl(var(--h-brand) 40% 100% / .10); color:var(--on-brand); border-color:hsl(var(--h-brand) 40% 100% / .28); } .btn--onbrand:hover{ background:hsl(var(--h-brand) 40% 100% / .18); color:#fff; } .btn--wide{ width:100%; } /* „zdarma“ v hlavičkovém CTA se ukáže až tam, kde je na něj místo */ .jen-siroke{ display:none; } @media (min-width:1700px){ .jen-siroke{ display:inline; } } @media (max-width:520px){ .hdr__cta .btn{ padding:11px 14px; } } /* Pod 400 px se tlačítko s telefonem nevešlo (přetečení 24 px na 360, 64 px na 320). Číslo se schovává VIZUÁLNĚ, ne atributem hidden — odečítačky ho pořád přečtou a tlačítko má název. */ @media (max-width:399px){ .hdr__cta .btn--onbrand .tel{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; min-width:0; } .hdr__cta .btn--onbrand{ padding:11px 12px; } } /* ---------- hero s grafickým motivem ---------- */ .hero{ position:relative; overflow:hidden; padding-block:var(--s5) var(--s4); background: radial-gradient(900px 420px at 85% -10%, hsl(var(--h-brand) 60% 34% / .10), transparent 60%), radial-gradient(600px 380px at 8% 110%, hsl(var(--h-accent) 90% 52% / .08), transparent 62%), var(--surface); } /* Dekorace: soustředné kružnice jako ploténka disku. Čistě ozdobná, pod textem. Zůstávají jen tenké kroužky. Vypadlo z ní čtecí rameno (tlustá šedá čára) a plný střed — to byly ty „velké šedé", které zadavateli vadily (23. 9. 2026). Obrys se nesmí zesílit ani vyplnit. */ .hero__dekor{ position:absolute; right:clamp(-120px, -4vw, -40px); top:50%; transform:translateY(-52%); width:min(560px, 44vw); height:auto; color:hsl(var(--h-brand) 40% 32%); pointer-events:none; z-index:0; } /* Pod 1100 px už je vedle textu těsno a kroužky by lezly pod písmo. */ @media (max-width:1099px){ .hero__dekor{ display:none; } } .hero .wrap{ position:relative; z-index:1; } .hero__lead{ font-size:1.14rem; color:var(--ink-2); max-width:60ch; } .hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); } /* „Co udělat teď hned“ */ .ted{ background:linear-gradient(160deg, var(--accent-soft), hsl(var(--h-accent) 90% 98%)); border:1px solid hsl(var(--h-accent) 70% 82%); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow-1); position:relative; } .ted::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; border-radius:var(--radius) 0 0 var(--radius); background:linear-gradient(180deg, var(--accent-line), var(--accent)); } .ted h2{ margin:0 0 var(--s3); font-size:1.14rem; display:flex; align-items:center; gap:10px; } .ted ol{ margin:0; padding-left:1.15em; } .ted li{ margin-bottom:var(--s2); } .ted li:last-child{ margin-bottom:0; } .ted li::marker{ color:var(--accent-strong); font-weight:700; } .trust{ display:flex; flex-wrap:wrap; gap:10px var(--s2); margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); font-size:0.92rem; color:var(--ink-2); list-style:none; padding-left:0; } .trust li{ display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); padding:6px 14px 6px 10px; } .trust .ico{ color:var(--accent); flex:none; } /* ---------- oblý předěl mezi sekcemi ---------- */ .predel{ display:block; width:100%; height:48px; color:var(--surface); } .predel--dolu{ transform:rotate(180deg); } /* ---------- karty ---------- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4) var(--s3); box-shadow:var(--shadow-1); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .card h3{ margin-top:0; } .card p{ color:var(--ink-2); margin-bottom:0; font-size:0.96rem; } .card--link{ display:block; text-decoration:none; color:inherit; } .card--link:hover{ border-color:hsl(var(--h-brand) 40% 70%); color:inherit; transform:translateY(-3px); box-shadow:var(--shadow-2); } .card--link:hover h3{ color:var(--accent-strong); } /* Ikona v kulatém odznaku místo holého tahu */ .ico-badge{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:var(--pill); background:linear-gradient(145deg, hsl(var(--h-brand) 45% 96%), hsl(var(--h-brand) 45% 92%)); color:var(--brand-3); margin-bottom:var(--s2); } .card--link:hover .ico-badge{ background:linear-gradient(145deg, var(--accent-soft), hsl(var(--h-accent) 85% 90%)); color:var(--accent-strong); } /* ---------- kroky jako osa ---------- */ .kroky{ counter-reset:k; list-style:none; padding:0; max-width:none; position:relative; } .krok{ position:relative; padding-left:64px; margin-bottom:var(--s4); } .krok::before{ counter-increment:k; content:counter(k); position:absolute; left:0; top:0; width:42px; height:42px; border-radius:var(--pill); background:linear-gradient(145deg, var(--brand-3), var(--brand)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1rem; box-shadow:var(--shadow-1); } /* spojnice mezi kroky */ .krok::after{ content:""; position:absolute; left:20px; top:48px; bottom:calc(-1 * var(--s4) + 6px); width:2px; background:linear-gradient(180deg, var(--line-strong), transparent); } .krok:last-child::after{ display:none; } .krok h3{ margin:8px 0 4px; } .krok p{ margin:0; color:var(--ink-2); } /* ---------- tabulka ceníku ---------- */ .tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.97rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); } .tbl caption{ text-align:left; color:var(--ink-2); padding-bottom:var(--s2); font-size:0.92rem; } .tbl th,.tbl td{ text-align:left; padding:14px var(--s3); border-bottom:1px solid var(--line); } .tbl thead th{ background:var(--surface-2); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-2); } .tbl tbody tr:last-child td{ border-bottom:0; } .tbl tbody tr:hover{ background:hsl(var(--h-brand) 40% 98%); } .tbl td:last-child,.tbl th:last-child{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .tbl .zdarma{ color:var(--ok); font-weight:700; background:hsl(158 60% 95%); border-radius:var(--pill); padding:3px 12px; display:inline-block; } @media (max-width:640px){ .tbl,.tbl tbody,.tbl tr,.tbl td{ display:block; width:100%; } .tbl{ border:0; background:none; box-shadow:none; } .tbl thead{ position:absolute; left:-9999px; } .tbl tr{ border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); margin-bottom:var(--s2); padding:var(--s2); box-shadow:var(--shadow-1); } .tbl td{ border:0; padding:6px 0; display:flex; justify-content:space-between; gap:var(--s2); } .tbl td::before{ content:attr(data-th); color:var(--ink-2); font-size:0.9rem; } .tbl td:last-child{ text-align:right; } } /* ---------- FAQ ---------- */ .faq{ max-width:var(--measure); display:grid; gap:10px; } .faq details{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:0 var(--s3); transition:border-color .14s ease, box-shadow .14s ease; } .faq details[open]{ border-color:hsl(var(--h-brand) 35% 78%); box-shadow:var(--shadow-1); } .faq summary{ cursor:pointer; padding:var(--s2) 0; font-weight:700; list-style:none; display:flex; gap:var(--s2); align-items:flex-start; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::before{ content:"+"; color:#fff; background:var(--brand-3); font-weight:700; flex:none; width:24px; height:24px; border-radius:var(--pill); display:grid; place-items:center; font-size:0.95rem; line-height:1; margin-top:2px; } .faq details[open] summary::before{ content:"\2013"; background:var(--accent); } .faq p{ margin:0 0 var(--s3); padding-left:calc(24px + var(--s2)); color:var(--ink-2); } /* ---------- mapa pokrytí ---------- */ /* Mapa vedle seznamu měst. Sama o sobě přes celou šířku wrapu měla přes 700 px na výšku — víc než celý zbytek sekce. */ .mapa-blok{ display:grid; gap:var(--s3); align-items:center; } @media (min-width:860px){ .mapa-blok{ grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr); gap:var(--s4); } } .mapa{ display:block; width:100%; max-width:560px; height:auto; margin-inline:auto; } .mapa-blok__vedle h3{ margin-top:0; font-size:1.02rem; } .mapa-blok__vedle p{ margin-bottom:0; font-size:0.9rem; } /* dřív fill:url(#mapaVypln) — ten gradient v dokumentu nikdy nebyl, takže mapa zůstávala bez výplně a byl z ní jen drátěný obrys */ .mapa__kraj{ fill:hsl(var(--h-brand) 38% 93%); stroke:hsl(var(--h-brand) 40% 56%); stroke-width:2.6; stroke-linejoin:round; } .mapa__bod circle{ fill:var(--accent); } .mapa__bod text{ fill:var(--ink); font-size:17px; font-weight:700; paint-order:stroke; stroke:var(--surface); stroke-width:4px; stroke-linejoin:round; } .mapa__bod .halo{ fill:var(--accent); opacity:.18; } .mapa__bod:hover circle{ fill:var(--accent-strong); } .mapa__bod:hover .halo{ opacity:.3; } .mapa__bod:hover text{ fill:var(--accent-strong); } .mapa__bod--bez circle{ fill:hsl(var(--h-brand) 38% 62%); } .mapa__bod--bez text{ fill:var(--ink-2); } .mesta-seznam{ columns:2; column-gap:var(--s4); font-size:0.95rem; list-style:none; padding:0; } @media (min-width:700px){ .mesta-seznam{ columns:4; } } /* vedle mapy je na seznam užší sloupec, čtyři by se lámaly uprostřed slov */ .mapa-blok__vedle .mesta-seznam{ columns:2; } .mesta-seznam li{ margin-bottom:6px; } /* ---------- blok bezpečnosti ---------- */ .bezpeci{ position:relative; overflow:hidden; background: radial-gradient(700px 300px at 90% 0%, hsl(var(--h-brand) 60% 44% / .35), transparent 62%), linear-gradient(150deg, var(--brand), var(--brand-2)); color:var(--on-brand); border-radius:var(--radius); padding:var(--s5) var(--s4); box-shadow:var(--shadow-2); } .bezpeci h2{ margin-top:0; color:#fff; } .bezpeci p{ color:var(--on-brand-2); } .bezpeci a{ color:var(--accent-line); } .bezpeci a:hover{ color:#fff; } /* ---------- patička ---------- */ .ftr{ background:linear-gradient(170deg, var(--brand-2), var(--brand)); color:var(--on-brand); padding-block:var(--s6) var(--s5); margin-top:var(--s7); } .ftr a{ color:var(--on-brand-2); text-decoration:none; } .ftr a:hover{ color:#fff; text-decoration:underline; } .ftr .ftr__h{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--accent-line); margin:0 0 var(--s2); font-weight:800; } .ftr ul{ list-style:none; padding:0; margin:0; font-size:0.95rem; } .ftr li{ margin-bottom:8px; } .ftr__pata{ margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid hsl(var(--h-brand) 30% 100% / .15); font-size:0.9rem; color:var(--on-brand-2); } /* Provozovatel v patičce — stejné údaje jako u sesterských webů */ .ftr__firma{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; } .ftr__firma .cslot[data-c="nazev"]{ font-weight:700; color:var(--on-brand); } .ftr a{ color:inherit; } /* ---------- plovoucí lišta ---------- */ .sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; gap:var(--s1); padding:10px var(--s2) calc(10px + env(safe-area-inset-bottom)); background:hsl(0 0% 100% / .94); backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px hsl(var(--h-brand) 42% 12% / .5); } .sticky .btn{ flex:1; } @media (max-width:900px){ .sticky[data-vid="1"]{ display:flex; } body{ padding-bottom:80px; } } body[data-page="objednat-svoz-zdarma"] .sticky{ display:none !important; } /* ---------- drobečky ---------- */ .drobky{ font-size:0.88rem; color:var(--ink-2); padding-block:var(--s3) 0; } .drobky ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; } .drobky li+li::before{ content:"›"; margin-right:6px; color:var(--line-strong); } /* ---------- „co nedělat“ ---------- */ .nedelat{ background:linear-gradient(160deg, hsl(2 70% 98%), var(--surface)); border:1px solid hsl(2 55% 88%); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow-1); } .nedelat h2{ margin-top:0; font-size:1.2rem; display:flex; align-items:center; gap:10px; } .nedelat h2 .ico{ color:var(--err); } .nedelat ul{ margin:0; padding-left:0; list-style:none; max-width:var(--measure); } .nedelat li{ margin-bottom:10px; padding-left:30px; position:relative; } .nedelat li::before{ content:"×"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:var(--pill); background:hsl(2 60% 93%); color:var(--err); display:grid; place-items:center; font-weight:800; font-size:0.9rem; } /* ---------- související ---------- */ .souvis{ list-style:none; padding:0; display:grid; gap:10px; max-width:none; } @media (min-width:700px){ .souvis{ grid-template-columns:1fr 1fr; gap:10px var(--s3); } } .souvis li{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } .souvis a{ display:block; padding:14px var(--s3); text-decoration:none; } .souvis li:hover{ border-color:hsl(var(--h-brand) 40% 72%); box-shadow:var(--shadow-1); } .seznam-poruch{ list-style:none; padding:0; display:grid; gap:10px; max-width:none; } @media (min-width:700px){ .seznam-poruch{ grid-template-columns:1fr 1fr; gap:10px var(--s3); } } .seznam-poruch li{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px var(--s3); } .cta-blok{ background: radial-gradient(600px 260px at 100% 0%, hsl(var(--h-accent) 90% 52% / .10), transparent 60%), var(--surface); border:1px solid hsl(var(--h-accent) 70% 84%); border-radius:var(--radius); padding:var(--s5) var(--s4); box-shadow:var(--shadow-1); } .cta-blok h2{ margin-top:0; } /* ---------- formuláře ---------- */ /* Formulář je hlavní obsah stránky, ne postranní blok — proto přes celou šířku sloupce. Uvnitř se pole řadí do dvojic, takže se nerozlézá. */ .form{ max-width:var(--measure-wide, 880px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5) var(--s4); box-shadow:var(--shadow-1); } @media (min-width:720px){ .form{ padding:var(--s5); } } .form h2{ margin-top:var(--s5); font-size:1.15rem; padding-bottom:var(--s1); border-bottom:1px solid var(--line); } .form h2:first-of-type{ margin-top:0; } .pole{ margin-bottom:var(--s3); } .pole label{ display:block; font-weight:700; margin-bottom:6px; font-size:0.95rem; } .pole input, .pole select, .pole textarea{ width:100%; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:12px var(--s2); min-height:46px; transition:border-color .14s ease, box-shadow .14s ease; } .pole input:hover, .pole select:hover, .pole textarea:hover{ border-color:var(--ink-2); } .pole textarea{ min-height:150px; resize:vertical; line-height:1.55; } .pole input:focus-visible, .pole select:focus-visible, .pole textarea:focus-visible{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .napoveda{ display:block; color:var(--ink-2); font-size:0.9rem; margin-bottom:8px; } .pov{ color:var(--err); } .dvojice{ display:grid; gap:0 var(--s3); } @media (min-width:620px){ .dvojice{ grid-template-columns:1fr 1fr; } } .pole--radio{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--s2) var(--s3); margin-bottom:var(--s3); background:var(--surface-2); } .pole--radio legend{ font-weight:700; padding:0 6px; font-size:0.95rem; } .radio{ display:flex; gap:var(--s2); align-items:center; padding:7px 0; font-weight:400; } .radio input{ width:20px; height:20px; flex:none; accent-color:var(--accent); } .souhlas{ margin-bottom:var(--s2); } .souhlas label{ display:flex; gap:var(--s2); align-items:flex-start; font-size:0.95rem; } .souhlas input{ margin-top:4px; width:20px; height:20px; flex:none; accent-color:var(--accent); } .vysledek:not(:empty){ border:1px solid var(--err); border-left-width:4px; border-radius:var(--radius-sm); padding:var(--s2) var(--s3); margin-bottom:var(--s3); color:var(--ink); background:hsl(2 70% 98%); } .vysledek--ok:not(:empty){ border-color:var(--ok); background:hsl(158 60% 97%); } .vysledek ul{ margin:var(--s1) 0 0; padding-left:1.15em; } /* Honeypot se skrývá CSS, ne atributem hidden — toho by si robot všiml (8.9) */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* dřívější dvousloupcový

nahradila karta-firma výš — pravidlo tu zůstávalo a rozbíjelo jí rozvržení */ .stitek{ display:inline-block; font-size:0.8rem; font-weight:700; padding:4px 12px; border-radius:var(--pill); background:var(--accent-soft); color:var(--accent-strong); } } @layer komponenty{ /* slovník — rejstřík písmen a hesla ve dvou sloupcích */ .rejstrik{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s3); } .chip{ display:inline-flex; align-items:center; justify-content:center; min-width:2.1em; padding:5px 10px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--line); color:var(--brand-3); font-weight:650; font-size:0.94rem; text-decoration:none; transition:background .15s ease, border-color .15s ease; } .chip:hover{ background:var(--bg-2, var(--surface)); border-color:var(--line-strong); } .hesla{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); } .heslo{ padding:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); scroll-margin-top:96px; } .heslo h3{ margin:0 0 6px; font-size:1.02rem; } .heslo p{ margin:0; color:var(--ink-2); font-size:0.95rem; } .heslo a{ white-space:nowrap; } /* Sekce na písmeno: normální rozestup sekcí dělal ze slovníku metry prázdna, protože písmen je přes dvacet. */ .sec--pismeno{ padding-block:var(--s3); } .sec--pismeno > h2{ margin:0 0 var(--s2); font-size:1.5rem; color:var(--brand-3); border-bottom:2px solid var(--line); padding-bottom:6px; } /* kotva na nadpis písmene nesmí skončit pod lepivou hlavičkou */ .sec[id^="p-"]{ scroll-margin-top:80px; } } @layer utils{ .vis-skryte{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .lead{ font-size:1.06rem; color:var(--ink-2); } .tichy{ color:var(--ink-2); } .nic{ margin:0; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .btn:hover,.card--link:hover{ transform:none; } }