/* ========================================================================= Vaříme s Láskou — main.css Načítá se odloženě (media=print + onload). Kritické styly pro první obrazovku jsou v critical.css, který se vkládá inline. Proměnné (--pink, --ink, …) definuje critical.css. ========================================================================= */ /* ========================================================================= 1) Typografie a základní prvky ========================================================================= */ h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.015em;line-height:1.18} p{margin:0 0 1em} strong,b{font-weight:700} hr{border:0;border-top:1px solid var(--line);margin:28px 0} :focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:4px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.03em;font-size:13px;padding:13px 24px;border-radius:10px; transition:background .15s,color .15s; } .btn-pink{background:var(--pink);color:#fff} .btn-pink:hover{background:var(--pink-deep)} .btn-ghost{border:2px solid var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)} .eyebrow{ font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--pink-deep);margin-bottom:4px; } /* Když je nadřazená kategorie odkaz (detail receptu), musí mít klikací výšku */ a.eyebrow{display:inline-flex;align-items:center;min-height:26px} /* Odkaz "Zobrazit vše" měl výšku 24 px — na prst málo. Klikací plocha je teď 44 px vysoká, růžové podtržení kreslí pseudoprvek u textu. */ .section-head .more{ position:relative;display:inline-flex;align-items:center;min-height:44px; font-family:var(--display);font-weight:700;font-size:12px;text-transform:uppercase; letter-spacing:.05em;white-space:nowrap; } .section-head .more::after{ content:"";position:absolute;left:0;right:0;bottom:11px;height:3px;background:var(--pink); } /* Drobečková navigace — sekundární, stačí minimum 24 px podle WCAG 2.5.8 */ .crumbs{margin:8px 0 0;font-size:12.5px;color:var(--muted)} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .crumbs li{display:flex;align-items:center} .crumbs li+li::before{content:"›";margin-right:6px;color:var(--line-strong);opacity:.4} .crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:26px} .crumbs a:hover{color:var(--pink-deep)} /* ========================================================================= 2) Karty ve výpisu ========================================================================= */ .card{position:relative} .card-media img{transition:transform .35s ease} .card:hover .card-media img{transform:scale(1.04)} /* Štítek je teď samostatný odkaz na kategorii (viz template-parts/card.php), takže potřebuje vlastní klikací výšku — 22 px bylo pod minimem WCAG 2.5.8. */ .card .cat{ position:absolute;top:10px;left:10px;z-index:2;background:var(--pink);color:#fff; font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.03em; text-transform:uppercase;padding:5px 11px;border-radius:100px; display:inline-flex;align-items:center;min-height:24px; } .card .cat:hover{background:var(--pink-deep)} /* Tři řádky, ne dva. Při dvou se na mobilu ořezalo pět karet ze šesti — z "Dokonalé domácí větrníky s poctivým vanilkovým krémem a šlehačkou" zbyla polovina. Ve výpisu je název jediné, čím se recepty liší, takže useknutý název znamená, že si čtenář nemá podle čeho vybrat. Stojí to jeden řádek mřížky, čitelnost za to stojí. */ .card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card:hover h3{color:var(--pink-deep)} .card .excerpt{color:var(--muted);font-size:13.5px;margin-top:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Meta řádek (čas, porce, hodnocení) — v kartě i na detailu */ .recipe-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px; font-size:12.5px;color:var(--muted);font-weight:600} .rm-item{display:inline-flex;align-items:center;gap:5px} .rm-item svg{opacity:.65;flex:0 0 auto} .recipe-meta.is-compact{gap:10px;font-size:12px} .rm-diff{ background:var(--pink-soft);color:var(--pink-deep);padding:2px 9px;border-radius:100px; font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em; } /* Hvězdičky */ .stars{display:inline-flex;gap:1px;letter-spacing:0} .star{color:var(--line);font-size:14px;line-height:1} .star.is-full{color:#f5a623} .star.is-half{background:linear-gradient(90deg,#f5a623 50%,var(--line) 50%); -webkit-background-clip:text;background-clip:text;color:transparent} .stars-meta{margin-left:4px;font-weight:700;color:var(--ink-2)} .stars-count{font-weight:500;color:var(--muted)} /* Trendy / číslovaný seznam */ .trend{border-top:3px solid var(--line-strong);margin:28px 0} .trend>h2{font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.05em; text-transform:uppercase;padding:14px 0} .trend li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line)} .trend .num{font-family:var(--display);font-weight:900;font-size:24px;color:var(--pink); width:34px;flex:0 0 auto;font-variant-numeric:tabular-nums;line-height:1} .trend h3{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.22; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Textový sloupec položky. V šabloně se jmenuje .tx, v CSS tu stálo .m — zbytek po přejmenování. Sekce "Nejlépe hodnocené" se zatím nevykresluje (podmínka: aspoň jedno hodnocení), takže si toho nikdo nemohl všimnout; při prvním hodnocení by se ale objevila rozbitá. min-width:0 je nutné, jinak flexbox nedovolí názvu se zkrátit a položka přeteče ven z řádku. */ .trend .tx{flex:1 1 auto;min-width:0} /* ========================================================================= 3) Detail receptu ========================================================================= */ /* MUSÍ být article.single, ne jen .single. WordPress dává na třídu "single" na každém detailu příspěvku (body class="… single single-post postid-67 …"). Holý selektor ji trefil taky, takže se na každém receptu smrskl na šířku textového sloupce CELÝ web — hlavička, lišta kategorií i patička. Na displeji 1280 px se web vykresloval v 680px pruhu a čtyři položky navigace včetně "Všechny recepty" byly mimo obrazovku. */ article.single{max-width:var(--readw);margin:0 auto;padding-bottom:40px} .single-header{margin:8px 0 18px} /* Riadkovanie 1.15, ne 1.08. Při 1.08 zbývaly mezi dotaženými písmeny (y, p, j) a háčky následujícího řádku 3,2 px — u české diakritiky se to tiskne na sebe. Nadpis receptu se přitom na mobilu láme na tři řádky, takže to není okrajový případ, ale běžný stav. */ .single-header h1{ font-family:var(--display);font-weight:900;font-size:28px;line-height:1.15; letter-spacing:-.03em;margin:10px 0; } /* Perex má menší písmo než tělo, takže se do stejné šířky vejde víc znaků — naměřeno 94. Strop v ch drží míru bez ohledu na velikost písma. */ .single-header .lede{font-size:16.5px;color:var(--ink-2);line-height:1.6;max-width:66ch} /* Podpis: kdo a kdy. Záměrně nenápadný — je to doplňující údaj, ne nadpis, ale musí být čitelný (barva --muted má 5:1 na bílé). */ .byline{ display:flex;flex-wrap:wrap;align-items:center;gap:7px; margin-top:14px;font-size:13px;color:var(--muted); } /* Odkaz je 13px vysoký text, takže sám o sobě nedosáhne na 24×24 px podle WCAG 2.5.8. Svislý padding plochu zvětší a záporný margin zruší posun, takže bylinka vypadá pořád stejně — jen se do ní líp trefíte prstem. */ .byline-author{font-weight:700;color:var(--ink-2);text-decoration:underline; text-underline-offset:2px;text-decoration-color:var(--line); padding-block:4px;margin-block:-4px} .byline-author:hover{color:var(--pink-deep);text-decoration-color:var(--pink)} .byline-sep{opacity:.5} .byline-upd{font-style:italic} .single-hero{border-radius:var(--radius);overflow:hidden;background:var(--paper-2);margin:16px 0} .single-hero img{width:100%;aspect-ratio:16/10;object-fit:cover} .entry{font-size:17px;line-height:1.7} /* Míra řádku patří textu, ne celému sloupci. Zúžit --readw by zúžilo i hero obrázek a kartu receptu, a ty vypadají líp široké. Strop v ch drží prózu na ~75 znacích (naměřeno 85 při plné šířce 632 px), zatímco nadpisy, obrázky a karta zůstávají na 680 px. */ .entry p,.entry li{max-width:60ch} .entry p{margin:0 0 1.15em} .entry h2{font-size:23px;margin:1.6em 0 .5em} .entry h3{font-size:19px;margin:1.4em 0 .4em} .entry a{color:var(--pink-deep);text-decoration:underline;text-underline-offset:2px} .entry ul,.entry ol{margin:0 0 1.2em 1.3em} .entry ul li{list-style:disc;margin-bottom:.35em} .entry ol li{list-style:decimal;margin-bottom:.35em} .entry blockquote{border-left:4px solid var(--pink);padding-left:16px;margin:1.4em 0; color:var(--ink-2);font-style:italic} .entry img{border-radius:12px;margin:1.2em 0} /* --- Karta receptu (ingredience + postup) --- */ .rcard{border:2px solid var(--line-strong);border-radius:var(--radius); padding:20px 18px;margin:28px 0;background:var(--paper)} .rcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px; padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px} .rcard-head h2{font-family:var(--display);font-weight:900;font-size:19px; text-transform:uppercase;letter-spacing:-.01em} .rcard-actions{display:flex;gap:6px;flex:0 0 auto} /* Tisk a sdílení — 44 px, ať se dají trefit prstem u sporáku */ .rcard-actions button{width:44px;height:44px;border:1.5px solid var(--line);border-radius:9px; display:flex;align-items:center;justify-content:center;transition:.15s} .rcard-actions button:hover{border-color:var(--ink);background:var(--paper-2)} /* Přehled čísel (čas / porce / kcal). Počet údajů se liší recept od receptu — bez doby vaření jsou tři, ne čtyři. Mřížka na to není dobrý nástroj: v pevných sloupcích i v auto-fit zbyde po posledním údaji prázdné šedé políčko. Flexbox poslední prvek roztáhne, takže řádek je vždy zaplněný. Šedé linky mezi údaji dělá podklad kontejneru prosvítající skrz gap. */ .rstats{display:flex;flex-wrap:wrap;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px} /* Základ 88 px, ne 110. Při 110 se do 303px kontejneru vešly jen dvě dlaždice na řádek, takže recept s pěti údaji vycházel 2+2+1 — a ten poslední se roztáhl přes celou šířku vedle dvou úzkých sousedů. S 88 px se vejdou tři: 5 údajů = 3+2 a výška klesne ze 217 na ~145 px. */ .rstat{background:var(--paper);padding:12px 14px;flex:1 1 88px} .rstat .k{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); font-weight:700;margin-bottom:2px} .rstat .v{font-family:var(--display);font-weight:800;font-size:17px} /* Ingredience */ .ing-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .ing-head h3{font-family:var(--display);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.03em} /* Přepočet porcí je nejpoužívanější ovládání na stránce — plných 44 px. */ .serv-ctl{display:flex;align-items:center;border:1.5px solid var(--line); border-radius:100px;padding:1px} .serv-ctl button{width:44px;height:44px;border-radius:50%;font-size:20px;font-weight:700; display:flex;align-items:center;justify-content:center;color:var(--pink-deep)} .serv-ctl button:hover{background:var(--pink-soft)} .serv-ctl button:disabled{opacity:.3;cursor:not-allowed} .serv-val{min-width:60px;text-align:center;font-weight:700;font-size:13px} .ing-group{margin-bottom:14px} .ing-group>h4{font-family:var(--display);font-weight:800;font-size:12.5px; text-transform:uppercase;letter-spacing:.04em;color:var(--pink-deep);margin-bottom:7px} .ing-list li{border-bottom:1px dashed var(--line)} /* Celý řádek je klikací (odškrtnutí při vaření), proto min. 44 px na výšku */ .ing-list label{display:flex;align-items:flex-start;gap:11px;padding:11px 2px; min-height:44px;cursor:pointer} .ing-list input[type=checkbox]{ appearance:none;width:20px;height:20px;flex:0 0 auto;margin-top:1px; border:2px solid var(--line);border-radius:6px;transition:.15s;position:relative; } .ing-list input:checked{background:var(--pink);border-color:var(--pink)} .ing-list input:checked::after{ content:"";position:absolute;left:6px;top:2px;width:5px;height:10px; border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg); } .ing-list input:checked+.ing-text{opacity:.42;text-decoration:line-through} .ing-text{font-size:15px;line-height:1.45} .ing-amt{font-weight:700} /* Postup */ .steps{counter-reset:step;margin-top:22px} .steps>h3{font-family:var(--display);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.03em;margin-bottom:12px} .steps li{counter-increment:step;display:flex;gap:14px;padding:12px 0; border-top:1px solid var(--line)} .steps li::before{ content:counter(step);flex:0 0 auto;width:30px;height:30px;border-radius:50%; background:var(--pink);color:#fff;font-family:var(--display);font-weight:800; font-size:14px;display:flex;align-items:center;justify-content:center; } .steps .step-text{font-size:15.5px;line-height:1.6;padding-top:3px} /* Tip šéfkuchaře */ .tip{background:var(--pink-soft);border-radius:12px;padding:16px 18px;margin:22px 0} .tip h3{font-family:var(--display);font-weight:800;font-size:13px;text-transform:uppercase; letter-spacing:.04em;color:var(--pink-deep);margin-bottom:6px} .tip p{font-size:15px;margin:0;color:var(--ink-2)} /* Nutriční hodnoty */ .nutri{margin:22px 0} .nutri h3{font-family:var(--display);font-weight:800;font-size:13px;text-transform:uppercase; letter-spacing:.04em;margin-bottom:10px} /* Stejný důvod jako u .rstats — makra nemusí být vyplněná všechna */ .nutri-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden} .nutri-grid > div{background:var(--paper);padding:11px 8px;text-align:center;flex:1 1 80px} .nutri-grid .k{font-size:12px;text-transform:uppercase;letter-spacing:.04em; color:var(--muted);font-weight:700} .nutri-grid .v{font-family:var(--display);font-weight:800;font-size:16px;margin-top:2px} .nutri-note{font-size:12px;color:var(--muted);margin-top:7px} /* Video (facade — YouTube se načte až po kliknutí) */ .video-facade{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden; background:#000;cursor:pointer;margin:22px 0} .video-facade img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:.2s} .video-facade:hover img{opacity:1} .video-facade .play{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; } .video-facade .play span{ width:62px;height:62px;border-radius:50%;background:var(--pink);color:#fff; display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px; box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .2s; } .video-facade:hover .play span{transform:scale(1.08)} .video-facade iframe{width:100%;height:100%;border:0} /* Hodnocení */ .rate{border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:20px 0;margin:26px 0;text-align:center} .rate h3{font-family:var(--display);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px} .rate-stars{display:inline-flex;margin-bottom:4px} /* Hvězdička je vizuálně 30 px, klikací plocha 44×44 — trefit sousední hvězdu omylem znamená špatné hodnocení, které už nejde vzít zpět. */ .rate-stars button{ width:44px;height:44px;display:flex;align-items:center;justify-content:center; font-size:30px;line-height:1;color:var(--line);transition:color .12s,transform .12s; } .rate-stars button:hover,.rate-stars button.is-hot{color:#f5a623;transform:scale(1.12)} .rate-msg{font-size:13.5px;color:var(--muted);min-height:20px} .rate.is-done .rate-stars button{cursor:default;transform:none} /* Časté otázky */ .faq{margin:26px 0} .faq>h2{font-family:var(--display);font-weight:900;font-size:20px; text-transform:uppercase;margin-bottom:12px} .faq details{border-bottom:1px solid var(--line)} .faq summary{ font-family:var(--display);font-weight:700;font-size:15.5px;padding:14px 28px 14px 0; cursor:pointer;position:relative;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:2px;top:11px;font-size:22px;font-weight:400; color:var(--pink);transition:transform .2s; } .faq details[open] summary::after{transform:rotate(45deg)} .faq .faq-a{padding:0 0 15px;font-size:15px;line-height:1.62;color:var(--ink-2)} /* Reklamní slot */ /* Rezervovaná výška pro reklamu. min-height:1px nerezervovalo nic — reklama se načte asynchronně a vsune se do stránky až po vykreslení, takže by v tu chvíli odskočil všechen obsah pod ní. To je posun rozvržení (CLS) a Google ho měří jako jeden ze tří Core Web Vitals. Výška odpovídá nejběžnějším responzivním formátům AdSense: 280 px na mobilu (obdélník 336×280), 250 px na širších displejích (leaderboard). */ .ad-slot{ margin:26px 0;min-height:280px; display:flex;align-items:center;justify-content:center; background:var(--paper-2);border-radius:12px;overflow:hidden; } .ad-slot .adsbygoogle{width:100%} @media (min-width:700px){ .ad-slot{min-height:250px} } /* Než se reklama načte, ať plocha nevypadá jako rozbitý blok. */ .ad-slot::before{ content:attr(aria-label); font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);opacity:.5;position:absolute; } .ad-slot{position:relative} .ad-slot .adsbygoogle{position:relative;z-index:1} /* Související recepty */ .related{margin:36px 0} .related>h2{font-family:var(--display);font-weight:900;font-size:20px; text-transform:uppercase;margin-bottom:14px} /* Textový rozcestník na další recepty — dva sloupce na širším displeji, ať deset odkazů nezabere půl obrazovky. */ .morelinks{margin:36px 0;padding-top:26px;border-top:3px solid var(--line-strong)} .morelinks>h2{font-family:var(--display);font-weight:900;font-size:15px; text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px} .morelinks ul{display:grid;grid-template-columns:1fr;gap:0} .morelinks li{border-bottom:1px solid var(--line)} .morelinks li a{ display:flex;align-items:center;justify-content:space-between;gap:14px; min-height:46px;padding:8px 0;font-size:15px;font-weight:600; } .morelinks li a:hover{color:var(--pink-deep)} .morelinks-time{ font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap; font-variant-numeric:tabular-nums; } .morelinks-all{ display:inline-flex;align-items:center;min-height:44px;margin-top:12px; font-family:var(--display);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.05em;color:var(--pink-deep); } .morelinks-all:hover{text-decoration:underline;text-underline-offset:3px} @media (min-width:700px){ .morelinks ul{grid-template-columns:1fr 1fr;column-gap:30px} } /* ========================================================================= 4) Hledání ========================================================================= */ .search-overlay{ position:fixed;inset:0;z-index:200;background:rgba(31,31,36,.45); backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.18s; } .search-overlay.is-open{opacity:1;visibility:visible} .search-panel{background:var(--paper);padding:16px;box-shadow:var(--shadow)} .search-form{display:flex;gap:8px;max-width:var(--maxw);margin:0 auto} .search-form input{ flex:1;border:2px solid var(--line);border-radius:10px;padding:13px 15px; font-size:16px;font-family:inherit;outline:none;transition:.15s; } .search-form input:focus{border-color:var(--pink)} .search-results{max-width:var(--maxw);margin:12px auto 0;max-height:56vh;overflow-y:auto} .search-results li a{display:flex;gap:12px;align-items:center;padding:9px 4px; border-bottom:1px solid var(--line)} .search-results img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex:0 0 auto} .search-results .t{font-weight:700;font-size:14.5px} .search-empty{padding:16px 4px;color:var(--muted);font-size:14px} /* Mobilní menu */ /* Zavřené menu musí být i pro klávesnici zavřené. Samotný transform ho jen odsune mimo obrazovku — odkazy uvnitř zůstávají v pořadí tabulátoru, takže by čtenář tabulátorem odešel do neviditelného menu a nevěděl, kde je. visibility:hidden je z pořadí vyřadí. Přepnutí je odloženo o délku animace, aby vysunutí bylo pořád vidět. */ .mobile-menu{ position:fixed;inset:0;z-index:210;background:var(--paper); transform:translateX(100%);visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; overflow-y:auto; } .mobile-menu.is-open{ transform:translateX(0);visibility:visible; transition:transform .22s ease, visibility 0s; } .mm-head{display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--line)} .mm-title{font-family:var(--display);font-weight:900;font-size:14px; text-transform:uppercase;letter-spacing:.04em} .mobile-menu-nav a{ display:block;font-family:var(--display);font-weight:700;font-size:15px; text-transform:uppercase;letter-spacing:.02em;padding:14px 18px; border-bottom:1px solid var(--line); } .mobile-menu-nav a:hover{background:var(--paper-2);color:var(--pink-deep)} /* ========================================================================= 5) Archivy, stránkování, 404 ========================================================================= */ .archive-head{padding:22px 0 6px;border-bottom:3px solid var(--line-strong);margin-bottom:20px} .archive-head h1{font-family:var(--display);font-weight:900;font-size:28px; text-transform:uppercase;letter-spacing:-.02em} .archive-head p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:var(--readw)} .archive-count{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px} .pagination{margin:34px 0} .pagination ul{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .pagination a,.pagination span{ display:flex;align-items:center;justify-content:center;min-width:40px;height:40px; padding:0 12px;border:1.5px solid var(--line);border-radius:9px; font-weight:700;font-size:14px;transition:.15s; } .pagination a:hover{border-color:var(--ink);background:var(--paper-2)} .pagination .current{background:var(--pink);border-color:var(--pink);color:#fff} .err404{text-align:center;padding:60px 0} .err404 h1{font-family:var(--display);font-weight:900;font-size:70px;color:var(--pink);line-height:1} .err404 p{color:var(--muted);margin:10px 0 22px} /* ========================================================================= 6) Komentáře ========================================================================= */ .comments{margin:40px 0;padding-top:26px;border-top:1px solid var(--line)} .comments>h2{font-family:var(--display);font-weight:900;font-size:20px; text-transform:uppercase;margin-bottom:16px} .comment-list li{padding:14px 0;border-bottom:1px solid var(--line)} .comment-meta{font-size:12.5px;color:var(--muted);margin-bottom:4px} .comment-meta .author{font-weight:700;color:var(--ink)} .comment-body{font-size:15px;line-height:1.6} .comment-form p{margin-bottom:12px} .comment-form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px} .comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{ width:100%;border:2px solid var(--line);border-radius:10px;padding:12px 14px; font-size:16px;font-family:inherit;outline:none; } .comment-form input:focus,.comment-form textarea:focus{border-color:var(--pink)} .comment-form textarea{min-height:120px;resize:vertical} /* Zaškrtávátko "uložit jméno do prohlížeče" má z jádra WordPressu 13×13 px. Zvětšujeme ho i s popiskem na použitelnou velikost. */ .comment-form-cookies-consent{display:flex;align-items:center;gap:11px} .comment-form-cookies-consent input[type=checkbox]{ width:24px;height:24px;flex:0 0 auto;accent-color:var(--pink);margin:0; } .comment-form-cookies-consent label{ margin:0;font-weight:500;font-size:13.5px;line-height:1.4; display:flex;align-items:center;min-height:44px;cursor:pointer; } .comment-form input[type=submit]{ background:var(--pink);color:#fff;border:0;border-radius:10px;padding:14px 26px; font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.03em;font-size:13px;cursor:pointer; } .comment-form input[type=submit]:hover{background:var(--pink-deep)} /* ========================================================================= 7) Patička ========================================================================= */ .site-footer{background:var(--ink);color:#fff;margin-top:48px;padding:36px 0 26px} .site-footer a{color:#fff;opacity:.82} .site-footer a:hover{opacity:1;color:var(--pink-soft)} .footer-top{display:grid;gap:26px;margin-bottom:26px} .footer-brand .site-name{font-family:var(--display);font-weight:900;font-size:19px; text-transform:uppercase;margin-bottom:8px} .footer-brand p{font-size:14px;opacity:.72;max-width:38ch} .footer-col h3{font-family:var(--display);font-weight:800;font-size:12px; text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-bottom:6px} /* Odkazy v patičce měly na výšku 19 px. Odsazení uvnitř odkazu z nich dělá plnohodnotné klikací plochy, aniž by patička výrazně narostla. */ /* Na mobilu do dvou sloupců. Patička měřila 864 px na 812px displeji — byla vyšší než celá obrazovka, a to hlavně kvůli 44px klikacím plochám u třinácti odkazů. Ty plochy jsou správně, jen se nemusí řadit pod sebe; nejdelší popisek ("Ochrana osobních údajů") se do poloviny 375px vejde. */ .footer-col ul{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .footer-col li{font-size:14px} .footer-col li a,.footer-col li .linklike{display:block;padding:11px 0;min-height:44px} @media (min-width:700px){ /* Na desktopu má patička tři sloupce vedle sebe, tam by dělení bylo těsné. */ .footer-col ul{grid-template-columns:1fr} } .footer-social{display:flex;gap:10px;margin-top:14px} .footer-social a{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.22); border-radius:50%;display:flex;align-items:center;justify-content:center} .footer-social a:hover{background:var(--pink);border-color:var(--pink)} .footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px; font-size:12.5px;opacity:.62;display:flex;flex-wrap:wrap;gap:10px; justify-content:space-between} /* ========================================================================= 8) Větší displeje ========================================================================= */ @media (min-width:700px){ .single-header h1{font-size:38px} .rcard{padding:26px 24px} /* .rstats je flexbox, ne grid — grid-template-columns tu nic nedělalo. Zbytek po dřívější verzi, kdy to grid býval. */ .footer-top{grid-template-columns:2fr 1fr 1fr} .archive-head h1{font-size:36px} .faq>h2,.related>h2{font-size:24px} } @media (min-width:1000px){ .single-header h1{font-size:44px} } /* ========================================================================= 9) Pohyb a tisk ========================================================================= */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important; scroll-behavior:auto!important} .card:hover .card-media img{transform:none} } @media print{ /* Co na papír nepatří. Lišta souhlasu, přeskakovací odkaz, mobilní menu a vyhledávání se na obrazovce neschovávají přes display:none (mají posun nebo ořez), takže bez tohohle řádku by se klidně vytiskly. Seznam dalších receptů je na papíře jen inkoust navíc. */ .site-header,.catbar,.site-footer,.rate,.related,.ad-slot, .comments,.rcard-actions,.video-facade,.crumbs,.serv-ctl, .consent,.skip-link,.mobile-menu,.search-overlay,.morelinks{display:none!important} body{font-size:12pt;color:#000;background:#fff} article.single,.rcard{max-width:none;border:0;padding:0;margin:0} .rcard{border-top:2px solid #000;padding-top:12pt;margin-top:12pt} /* Nic, co se čte vcelku, nerozdělovat přes dvě stránky */ .steps li,.ing-list li,.ing-group,.nutri,.tip,.faq details{break-inside:avoid} /* Časté otázky jsou
a ty se tisknou zabalené — na papíře by zůstaly jen otázky bez odpovědí. Rozbalí je JS při beforeprint (viz app.js), tohle je pojistka pro případ vypnutého JS. */ .faq details>*{display:block} .faq summary{font-weight:700;list-style:none} .faq summary::-webkit-details-marker{display:none} .entry a{text-decoration:none;color:#000} .entry a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} /* Fotka ať nesebere půl stránky */ .single-hero img{max-height:70mm;object-fit:cover} /* Zaškrtávátka vytisknout jako prázdné rámečky — recept pak slouží rovnou jako nákupní seznam. Prohlížeče je jinak často vynechají. */ .ing-list input[type=checkbox]{ -webkit-appearance:none;appearance:none; width:10pt;height:10pt;border:1pt solid #000;border-radius:2pt; display:inline-block;vertical-align:-1pt;margin-right:6pt; } /* Odkud recept je — ať se dá znovu najít */ .print-source{display:block!important;margin-top:14pt;padding-top:6pt; border-top:1px solid #999;font-size:9pt;color:#555} } /* Na obrazovce zdroj nezobrazujeme, ten je v adresním řádku. */ .print-source{display:none} /* ---- Prázdný archiv ---------------------------------------------------- Kategorie, do které se recepty teprve chystají. Z menu se sem nedostanete, ale starý odkaz sem pořád vede — tak ať to nevypadá jako rozbitá stránka. */ .empty-state{ background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius); padding:28px 20px;text-align:center;margin-bottom:36px; } .empty-state p{color:var(--muted);max-width:46ch;margin:0 auto} .empty-state p+p{margin-top:18px} /* ---- Lišta souhlasu s cookies ------------------------------------------ Dole, přes celou šířku, nepřekrývá obsah víc, než musí. Obě tlačítka vypadají stejně důležitě — schované odmítnutí není platný souhlas. */ .consent{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--paper);border-top:1px solid var(--line-strong); box-shadow:0 -8px 30px rgba(31,31,36,.10); padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom)); } .consent[hidden]{display:none} .consent-in{ max-width:var(--maxw);margin:0 auto; display:flex;flex-direction:column;gap:14px; } .consent-txt strong{display:block;font-family:var(--display);font-size:1rem;margin-bottom:4px} .consent-txt p{font-size:.875rem;color:var(--ink-2);line-height:1.5} .consent-txt a{color:var(--pink-deep);text-decoration:underline} .consent-btns{display:flex;gap:10px} .consent-btns .btn{flex:1 1 0;min-height:44px;justify-content:center} /* Tlačítka vedle textu už od 480 px, ne až od 760. Pod tou hranicí se řadila pod text a lišta narostla o dalších ~60 px na displeji, kde je místa nejmíň. */ @media(min-width:480px){ .consent-in{flex-direction:row;align-items:center;gap:18px} .consent-txt{flex:1 1 auto} .consent-btns{flex:0 0 auto} .consent-btns .btn{flex:0 0 auto;min-width:120px;padding-inline:16px} } @media(min-width:760px){ .consent-in{gap:24px} .consent-btns .btn{min-width:150px;padding-inline:24px} } /* Tlačítko, které má vypadat jako odkaz — "Nastavení cookies" v patičce. Musí to být