/* obydleni.cz — CSS pro šablonu ČLÁNKU a RUBRIKY (verze 2).
---------------------------------------------------------------------------
Nasazení:
Nahrazuje vše ve `style.css` od komentáře „*{box-sizing…}" dál pro tyto dvě
šablony a pro společnou hlavičku/patičku. Homepage, ceník, štítek, mapa webu
a 404 zatím dál běží na verzi 1 — přijdou ve fázi 2, třídy zůstávají stejné.
ČÍM SE DRŽÍ STRUKTURA (a proč tu nejsou linky)
---------------------------------------------------------------------------
Web neorganizují vodorovné linky — od těch jsme ustoupili, protože z každého
obsahového webu dělají tentýž rošt. Místo nich pracují čtyři prostředky:
1. TÓNOVANÁ PLOCHA. Blok se odděluje odstínem papíru, ne obtažením:
--plocha (obsah článku, související, patička, reklamní pozice),
--zvyrazneni („V kostce", cenový sloupec), --rubrika-tint (štítek rubriky).
2. ČÍSLO SEKCE. Nad každým H2 stojí číslo v antikvě a mosazi (01, 02, …)
místo linky nad ním. Je to zároveň orientace, kterou umí i obsah článku.
3. ODSAZENÍ. Mezery mezi bloky jsou velké a pravidelné (24 / 40 / 64 px),
takže hranici vidíš i bez toho, aby se kreslila.
4. ZAROVNÁNÍ. Ve výpisech drží mřížku sloupec s dobou čtení zarovnaný
vpravo — oko vede zarovnání, ne linka.
Jediné místo, kde linka smysl má, je hlavička tabulky a mobilní rozpad
tabulky na dvojice. Řádky tabulky se místo obtažení střídají v odstínu.
Pravidla, podle kterých je to napsané:
· mobil first — základ platí od 320 px, breakpointy jen nahoru (600/760/900/1100)
· žádné vw-škálování typografie: nadpis na 390 px je velký, ne zmenšený desktop
· text nikdy pod 17 px, klepací plochy nejmíň 44 px, fokus vždy vidět
· barvu nese rubrika (--rubrika, --rubrika-tint), ne dekorace
· nulové rádiusy, žádné posuny při najetí; jediný stín má rozbalovací panel
v hlavičce, protože leží nad textem a musí se od něj oddělit
· rozměry obrázků a reklamních pozic jsou rezervované dopředu (žádné poskakování)
CO POTŘEBUJE ZMĚNU V ŠABLONĚ (bez ní tyhle věci CSS neumí):
A) SLUG RUBRIKY: — bez něj se místo
ručně zvolené barvy rubriky použije dopočet z --h. Nic se nerozbije.
B) MOBILNÍ NAVIGACE. Ve verzi 1 se pod 900 px `.nav` jen skryje a nenahradí
ničím — na telefonu není z článku cesta do rubrik. Do hlavičky přidejte:
Rubriky
C) TABULKA NA MOBILU. Až budou v
atributy data-th="",
překlopí se tabulka pod 600 px na dvojice popisek–hodnota. Do té doby se
posouvá vodorovně s přilepeným prvním sloupcem.
D) ZDROJ FOTKY. Do obalte licenci do ….
E) VÝPIS NA ŠTÍTKU. Na štítkových stránkách dejte výpisu třídu
`mriz mriz--napric` — tam štítek rubriky u článku zůstává (na rubrice se
skrývá, 19× stejný název rubriky je šum).
--------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
margin:0;background:var(--papir);color:var(--inkoust);
font:400 17px/1.68 var(--text);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
main{min-height:60vh}
.pruh{max-width:var(--sirka);margin:0 auto;padding:0 16px}
@media (min-width:760px){
body{font-size:18px}
.pruh{padding:0 24px}
}
/* ---------------------------------------------------------------- typografie */
h1,h2,h3,h4{font-family:var(--nadpisy);letter-spacing:-.02em;text-wrap:balance;margin:0}
/* Titulek stránky a hlavy bloků v antikvě, podnadpisy uvnitř textu v Archivu:
antikva dává stránce hlas, Archivo drží orientaci při prohlížení očima. */
h1,.faq>h2,.souvisejici>h2,.newsletter h2{font-family:var(--display);font-weight:600;
letter-spacing:-.005em}
h1{font-size:33px;line-height:1.06}
h2{font-size:23px;line-height:1.18;font-weight:800}
h3{font-size:19px;line-height:1.25;font-weight:700}
p{margin:0 0 16px;text-wrap:pretty}
@media (min-width:760px){h1{font-size:43px}h2{font-size:26px}h3{font-size:20px}}
@media (min-width:1100px){h1{font-size:52px}h2{font-size:29px}h3{font-size:21px}}
a{color:var(--akcent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--akcent-tmavy);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--akcent-signal);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--zvyrazneni);color:var(--inkoust)}
.tichy{color:var(--tichy);font-size:15px}
.lead{font-size:19px;line-height:1.5;color:var(--tichy);max-width:60ch;margin:14px 0 0}
@media (min-width:760px){.lead{font-size:20px}}
.preskoc{position:absolute;left:-9999px;background:var(--akcent);color:var(--papir);
padding:12px 18px;z-index:99;font:700 15px var(--nadpisy)}
.preskoc:focus{left:8px;top:8px}
/* ------------------------------------------------------------------ hlavička
Hlavička se od stránky odděluje odstínem papíru, ne linkou pod sebou.
Tlačítka v ní jsou naopak v barvě papíru — světlejší plocha na tmavší. */
.hlavicka{position:sticky;top:0;z-index:20;background:var(--plocha)}
.hlavicka .pruh{display:flex;align-items:center;gap:10px;min-height:60px}
.znacka{font:600 25px/1 var(--display);letter-spacing:.01em;color:var(--inkoust);
text-decoration:none;white-space:nowrap;margin-right:auto}
.znacka span{color:var(--akcent)}
.znacka .tld{color:var(--tichy);font-weight:400}
.nav{display:none}
.lupa,.cenik-odkaz,.menu>summary{
font:700 14.5px/1 var(--nadpisy);text-decoration:none;color:var(--inkoust);
min-height:44px;display:inline-flex;align-items:center;padding:0 15px;
border:0;border-radius:var(--radius);white-space:nowrap;cursor:pointer;
background:var(--papir)}
.lupa:hover,.menu>summary:hover{color:var(--akcent)}
.cenik-odkaz{background:var(--zvyrazneni);color:var(--inkoust)}
.cenik-odkaz:hover{color:var(--akcent)}
/* mobilní menu — viz bod B výše */
.menu{position:relative}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:9px;height:9px;margin-left:9px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg)}
.menu[open]>summary::after{transform:translateY(2px) rotate(225deg)}
/* jediný stín v systému: panel leží nad textem a musí se od něj oddělit */
.menu__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;
width:min(320px,calc(100vw - 32px));background:var(--papir);
box-shadow:0 24px 48px -28px rgba(0,0,0,.55);display:flex;flex-direction:column;
padding:6px 0}
.menu__panel a{display:flex;align-items:center;min-height:48px;padding:0 18px;
font:500 15.5px var(--nadpisy);color:var(--inkoust);text-decoration:none}
.menu__panel a:hover{background:var(--zvyrazneni);color:var(--akcent)}
@media (min-width:1000px){
.menu{display:none}
.nav{display:flex;align-items:center;gap:2px;margin-right:auto}
.znacka{margin-right:22px}
.nav a{font:500 14.5px/1 var(--nadpisy);color:var(--inkoust);text-decoration:none;
min-height:44px;display:inline-flex;align-items:center;padding:0 11px;
white-space:nowrap}
.nav a:hover{color:var(--akcent);background:var(--papir)}
.vice{position:relative}
.vice summary{font:500 14.5px/1 var(--nadpisy);min-height:44px;display:inline-flex;
align-items:center;padding:0 11px;cursor:pointer;list-style:none;
white-space:nowrap}
.vice summary::-webkit-details-marker{display:none}
.vice summary::after{content:" +";color:var(--tichy)}
.vice summary:hover{color:var(--akcent);background:var(--papir)}
.vice .rozbal{position:absolute;right:0;top:calc(100% + 10px);z-index:30;
background:var(--papir);box-shadow:0 24px 48px -28px rgba(0,0,0,.55);
padding:6px 0;display:grid;grid-template-columns:1fr 1fr;min-width:540px}
.vice .rozbal a{padding:0 18px;min-height:46px}
}
/* ukazatel přečtené části */
.postup{position:fixed;top:0;left:0;height:3px;background:var(--akcent-signal);
width:0;z-index:40;transition:width .1s linear}
/* ----------------------------------------------------------- drobečky + štítek
Drobečky nesou hlavní tíhu orientace (93 % lidí přichází z vyhledávače),
proto 14 px, ne 13, a rubrika v nich je barevná a půltučná. */
.drobecky{font:500 14px/1.5 var(--nadpisy);color:var(--tichy);
display:flex;flex-wrap:wrap;gap:2px 8px;padding:18px 0 0;margin:0}
.drobecky a{color:var(--tichy);text-decoration:none}
.drobecky a:hover{color:var(--akcent);text-decoration:underline}
.drobecky a:nth-of-type(2){color:var(--rubrika);font-weight:700}
.drobecky a::after{content:"›";margin-left:8px;color:color-mix(in srgb,var(--inkoust) 35%,transparent)}
.drobecky span{color:var(--tichy)}
/* štítek rubriky: kapitálky v barvě rubriky na jejím světlém odstínu.
Tady se konečně barva rubriky projeví jako plocha, ne jako vlasová linka. */
.rubrika-stitek{display:inline-block;font:800 11.5px/1.35 var(--nadpisy);letter-spacing:.11em;
text-transform:uppercase;color:var(--rubrika);background:var(--rubrika-tint);
text-decoration:none;padding:6px 10px;margin:0 0 14px;border-radius:var(--radius)}
.rubrika-stitek:hover{color:var(--akcent);background:var(--zvyrazneni)}
/* -------------------------------------------------------------------- článek */
.clanek{max-width:var(--sirka);margin:0 auto;padding:0 16px 64px}
@media (min-width:760px){.clanek{padding:0 24px 80px}}
.clanek__hlava{max-width:var(--sirka-textu);margin:0 0 28px}
.clanek__hlava .rubrika-stitek{margin-top:22px}
.clanek__hlava h1{margin:0 0 20px}
/* pás s autorem a datem — signál důvěryhodnosti. Nese ho prostrkaná verzálka
(tiskový tiráž), ne rámeček: kapitálky říkají „redakční údaj" samy. */
.clanek__meta{font:700 11.5px/1.6 var(--nadpisy);letter-spacing:.11em;
text-transform:uppercase;color:var(--tichy);display:block;margin:0}
.clanek__meta .autor,.clanek__meta time,.clanek__meta .datum{white-space:nowrap}
.clanek__meta .autor{color:var(--inkoust)}
.clanek__meta time,.clanek__meta .datum{color:var(--inkoust)}
.perex{font-size:19px;line-height:1.55;font-weight:500;color:var(--inkoust);margin:26px 0 0}
@media (min-width:760px){
.perex{font-size:21px}
.perex::first-letter{float:left;font:600 76px/.78 var(--display);color:var(--akcent);
margin:6px 12px 0 0;padding:0}
}
.clanek__telo{display:grid;grid-template-columns:minmax(0,1fr)}
.clanek__text{max-width:min(var(--sirka-textu),100%);min-width:0;counter-reset:s}
/* číslo sekce místo linky nad nadpisem — jen H2 přímo v textu článku:
„V kostce" je v ASIDE a „Časté otázky" v SECTION, ty číslo nedostanou
a hlavně neposunou počítadlo, aby čísla souhlasila s obsahem článku */
.clanek__text>h2{counter-increment:s;margin:52px 0 12px;scroll-margin-top:80px}
.clanek__text h2{margin:52px 0 12px;scroll-margin-top:80px}
.clanek__text>h2::before{content:counter(s,decimal-leading-zero);display:block;
font:600 15px/1 var(--display);letter-spacing:.16em;color:var(--akcent);margin:0 0 10px}
.clanek__text h3{margin:30px 0 6px;scroll-margin-top:80px}
.clanek__text ul,.clanek__text ol{padding-left:22px;margin:0 0 16px}
.clanek__text li{margin-bottom:8px}
.clanek__text strong{font-weight:700}
/* „V kostce" — nejvýraznější blok stránky po H1. Dělá to plocha, ne obtažení.
Reklama sem nesmí. */
.kostka{background:var(--zvyrazneni);border:0;border-radius:var(--radius);
padding:22px 18px 24px;margin:30px 0 40px;max-width:min(var(--sirka-textu),100%)}
.kostka h2{font:800 12.5px/1.2 var(--nadpisy);letter-spacing:.12em;text-transform:uppercase;
color:var(--akcent);border:0;padding:0;margin:0 0 16px}
.kostka h2::before{content:none}
.kostka ul{list-style:none;margin:0;padding:0;counter-reset:k}
.kostka li{counter-increment:k;position:relative;padding-left:38px;margin:0 0 12px;
font-size:17px;line-height:1.5}
.kostka li:last-child{margin-bottom:0}
.kostka li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:2px;
font:600 14px/1.5 var(--display);color:var(--akcent);font-variant-numeric:tabular-nums}
@media (min-width:760px){
/* bleed sladěný s odsazením stránky (.clanek má 24 px), ať plocha nikdy
nevyleze z okna a nevznikne vodorovný přesah */
.kostka{padding:26px 24px 28px;margin-inline:-24px}
.kostka li{font-size:18px}
}
/* --------------------------------------------------------------------- fotky
Fotka uvnitř článku je obsah (barva obkladu, tvar kování), proto zůstává
barevná. Náhledy ve výpisech jsou naopak jen orientační značka a jdou do
černobílé — magazín má jednotný index a barevné „obrazové tabule". */
figure{margin:34px 0;max-width:min(var(--sirka-textu),100%)}
figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
figcaption{font:500 14px/1.45 var(--nadpisy);color:var(--tichy);padding:10px 0 0;margin:0}
figcaption .zdroj{display:block;font-weight:400;font-size:12.5px;color:var(--tichy);margin-top:3px}
/* ------------------------------------------------------------------- tabulky
Řádky se střídají v odstínu papíru, místo aby byly obtažené. Cenový sloupec
má vlastní podklad, ať se cena najde do pěti vteřin. */
.tabulka-obal{margin:32px 0;max-width:min(var(--sirka-textu),100%);
overflow-x:auto;overscroll-behavior-x:contain;background:transparent;border:0;
border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-family:var(--nadpisy);
font-size:15.5px;line-height:1.45;font-variant-numeric:tabular-nums lining-nums}
caption{caption-side:top;text-align:left;font:500 14px var(--nadpisy);color:var(--tichy);
padding:0 0 14px}
th,td{text-align:left;padding:11px 10px;vertical-align:top}
th{font:800 11.5px/1.35 var(--nadpisy);text-transform:uppercase;letter-spacing:.08em;
color:var(--tichy);border:0;border-bottom:1px solid var(--linka);
vertical-align:bottom;padding-bottom:9px;text-wrap:balance}
td{border:0}
tbody tr:nth-child(odd){background:var(--plocha)}
td:not(:first-child){color:var(--cislo);font-weight:600;white-space:nowrap}
th:last-child,td:last-child{text-align:right}
td:last-child{background:var(--zvyrazneni)}
tbody tr:hover td{background:color-mix(in srgb,var(--akcent) 8%,transparent)}
/* obal nemá rám, takže krajní sloupce sedí na okraji textového sloupce —
tabulka o třech sloupcích se tím vejde do 68 ch bez posouvání */
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
.tabulka-tip{font:500 13px var(--nadpisy);color:var(--tichy);margin:10px 0 0}
@media (min-width:760px){
.tabulka-tip{display:none}
}
@media (max-width:600px){
/* přilepený první sloupec, aby se při posouvání vědělo, o čem řádek je.
Zebra by se s přilepeným sloupcem rozešla, tak pod 600 px mizí. */
tbody tr:nth-child(odd){background:transparent}
th:first-child,td:first-child{position:sticky;left:0;min-width:42vw;
background:var(--papir);padding-left:0}
/* až budou v šabloně data-th, tabulka se překlopí na dvojice popisek–hodnota */
table:has(td[data-th]) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
table:has(td[data-th]) tr{display:block;padding:14px 0 16px}
table:has(td[data-th]) tbody tr:nth-child(odd){background:var(--plocha);padding-inline:12px}
table:has(td[data-th]) td{display:flex;justify-content:space-between;gap:16px;
border:0;padding:5px 0;position:static;min-width:0;background:transparent;text-align:right}
table:has(td[data-th]) td::before{content:attr(data-th);font:800 11.5px/1.6 var(--nadpisy);
letter-spacing:.08em;text-transform:uppercase;color:var(--tichy);text-align:left}
table:has(td[data-th]) td:first-child{font-weight:800;color:var(--inkoust);
display:block;text-align:left;margin-bottom:6px;font-size:16.5px}
table:has(td[data-th]) td:first-child::before{content:none}
}
/* ---------------------------------------------------------------- FAQ, štítky
Otázky v antikvě, odpovědi odsazené. Odděluje je mezera, ne linka. */
.faq{margin:56px 0 0;padding:0;max-width:min(var(--sirka-textu),100%)}
/* FAQ je v obsahu článku poslední sekcí, takže dostane další číslo v řadě —
číslování nad H2 a obsah článku tak sedně jedno na druhé */
.faq{counter-increment:s}
.faq>h2{margin:0 0 8px}
.faq>h2::before{content:counter(s,decimal-leading-zero);display:block;
font:600 15px/1 var(--display);letter-spacing:.16em;color:var(--akcent);margin:0 0 10px}
.faq dl{margin:0}
.faq dt{font:600 20px/1.3 var(--display);color:var(--inkoust);padding:26px 0 0;margin:0}
.faq dd{margin:6px 0 0;font-size:17px}
@media (min-width:760px){.faq dt{font-size:22px}.faq dd{font-size:18px;padding-left:0}}
.stitek-radek{margin:44px 0 0;font:500 14px var(--nadpisy);color:var(--tichy)}
.stitek-radek a,.chipy a{display:inline-flex;align-items:center;min-height:44px;
padding:0 14px;font:700 12.5px/1 var(--nadpisy);letter-spacing:.06em;
text-transform:uppercase;color:var(--inkoust);text-decoration:none;
background:var(--plocha);border:0;border-radius:var(--radius)}
.stitek-radek a{margin-left:6px}
.stitek-radek a:hover,.chipy a:hover{background:var(--zvyrazneni);color:var(--akcent)}
.chipy{display:flex;flex-wrap:wrap;gap:8px}
/* ------------------------------------------------------------- obsah článku
Tónovaný blok: na mobilu nad textem (order:-1), na desktopu přilepený sloupec. */
.obsah-clanku{order:-1;font-family:var(--nadpisy);background:var(--plocha);
margin:28px 0 4px;padding:18px 18px 20px}
.obsah-clanku h2{font:800 11.5px/1.2 var(--nadpisy);letter-spacing:.12em;
text-transform:uppercase;color:var(--tichy);border:0;padding:0;margin:0 0 8px}
.obsah-clanku h2::before{content:none}
.obsah-clanku ol{list-style:none;padding:0;margin:0;counter-reset:o}
.obsah-clanku li{counter-increment:o}
.obsah-clanku a{position:relative;display:flex;align-items:center;min-height:44px;
padding:4px 0 4px 28px;font-size:15px;line-height:1.3;color:var(--inkoust);
text-decoration:none}
.obsah-clanku a::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;
font:600 12.5px var(--display);color:var(--tichy);font-variant-numeric:tabular-nums}
.obsah-clanku a:hover{color:var(--akcent)}
.obsah-clanku a.aktivni{color:var(--akcent);font-weight:700}
.obsah-clanku a.aktivni::before{color:var(--akcent)}
@media (min-width:1100px){
.clanek__telo{grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:start}
.obsah-clanku{order:0;position:sticky;top:80px;margin:24px 0 0;padding:20px 20px 22px}
.obsah-clanku a{min-height:34px}
/* aktivní sekci značí mosazný čtvereček, ne svislá linka */
.obsah-clanku a.aktivni::after{content:"";position:absolute;left:-12px;top:calc(50% - 3px);
width:6px;height:6px;background:var(--akcent-signal)}
}
/* ------------------------------------------------------- související články
Celý blok je tónovaná plocha na konci textu — konec článku pozná čtenář
podle změny podkladu, ne podle silné linky. */
.souvisejici{margin:64px 0 0;background:var(--plocha);padding:26px 18px 28px}
.souvisejici>h2{margin:0 0 4px}
.souvisejici>h2::before{content:none}
.souvisejici .mriz{display:grid;grid-template-columns:1fr;gap:22px;margin:18px 0 0}
.souvisejici .karta{background:transparent;border:0;border-radius:var(--radius);
padding:0;display:block;box-shadow:none}
.souvisejici .karta img{display:none}
.souvisejici .karta>div{padding:0;display:block}
.souvisejici .karta h3{font:700 17px/1.3 var(--nadpisy);margin:0}
.souvisejici .karta h3 a{color:var(--inkoust);text-decoration:none}
.souvisejici .karta:hover h3 a{color:var(--akcent);text-decoration:underline}
.souvisejici .karta p{display:none}
.souvisejici .karta .cas{display:block;font:500 13px var(--nadpisy);color:var(--tichy);margin:6px 0 0}
/* ve souvisejících je štítek jen popiska, ne plocha — čtyři plné plošky
by v tónovaném bloku vytvořily druhý rošt */
.souvisejici .rubrika-stitek{margin:0 0 6px;padding:0;background:transparent;
font-size:10.5px;letter-spacing:.12em}
.souvisejici .rubrika-stitek:hover{background:transparent;color:var(--akcent)}
@media (min-width:760px){
.souvisejici{padding:28px 24px 30px;margin-inline:-24px}
.souvisejici .mriz{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
}
/* -------------------------------------------------------- reklamní pozice
Rozměry rezervované dopředu, aby stránka neposkakovala.
.reklama mezi sekcemi textu — 320×100 mobil / 728×90 desktop
.reklama--bok postranní sloupec — 300×250
.reklama--pred před souvisejícími — 336×280 */
.reklama{margin:40px 0;display:grid;place-items:center;background:var(--plocha);
border:0;border-radius:var(--radius);
font:800 10.5px/1 var(--nadpisy);letter-spacing:.14em;text-transform:uppercase;
color:var(--tichy);min-height:100px;max-width:min(var(--sirka-textu),100%)}
@media (min-width:760px){.reklama{min-height:90px}}
/* Postranní pozice žije v