/* ============================================================ ZŠ a MŠ Těškovice — homepage 2026 (port z prototypu kombinace.html) Tento soubor se na homepage načítá jako POSLEDNÍ, aby přebil starší CSS. Cesty k fontu/logu/hero jsou absolutní na /wp-content/themes/zsteskovice/assets/... ============================================================ */ /* ============ FONT ============ */ @font-face{font-family:'Overpass';src:url('/wp-content/themes/zsteskovice/assets/fonts/overpass/overpass-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Overpass';src:url('/wp-content/themes/zsteskovice/assets/fonts/overpass/overpass-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Overpass';src:url('/wp-content/themes/zsteskovice/assets/fonts/overpass/overpass-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Overpass';src:url('/wp-content/themes/zsteskovice/assets/fonts/overpass/overpass-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} /* ============ TOKENS ============ */ :root{ --green:#238E44; /* brand plocha/ikona */ --green-deep:#1A6E33; /* zelený text/odkazy 6.3:1 */ --green-dark:#155227; /* hluboké zelené plochy */ --green-soft:#EAF4EC; /* světlý zelený podklad */ --yellow:#F3AE1B; /* akcent plocha/badge */ --yellow-soft:#FCF1D6; --red:#971E21; /* primární CTA */ --red-dark:#7C1719; --ink:#231F20; /* běžný text */ --ink-soft:#4A4546; --paper:#FFFFFF; --cream:#FBF7EF; /* teplé pozadí stránky */ --line:#E3DCD0; --line-strong:#CFC6B6; --radius-s:8px; --radius:12px; --radius-l:16px; --cream-deep:#FDF4DF; /* plocha pruhu menu a patičky */ --navbar-bg:var(--cream-deep); --shadow:0 2px 6px rgba(35,31,32,.08); --shadow-hi:0 16px 34px rgba(21,82,39,.20); --maxw:1200px; } *{box-sizing:border-box;} /* Sticky hlavička (header.site) překrývá cíle kotev (#clen-…, in-page odkazy). scroll-padding-top odsadí doskok kotvy o výšku hlavičky, ať cíl není schovaný. Desktop = výška hlavičky 151 + malá mezera. Na ≤1040px je header.site position:relative (viz níže) — není sticky, nepřekrývá → offset se ruší (0). */ html{scroll-behavior:smooth;scroll-padding-top:163px;} @media (max-width:1040px){html{scroll-padding-top:0;}} body{ margin:0;font-family:'Overpass',system-ui,Arial,sans-serif; color:var(--ink);background:var(--cream);line-height:1.6; font-size:16px;-webkit-font-smoothing:antialiased; } h1,h2,h3{line-height:1.12;margin:0;font-weight:700;letter-spacing:-.01em;} p{margin:0 0 1rem;} a{color:var(--green-deep);text-underline-offset:3px;} img{max-width:100%;display:block;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} /* focus */ a:focus-visible,button:focus-visible,.tile:focus-visible{ outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px; } .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;} /* viditelný focus i na tmavých/barevných plochách (dlaždice, sytá CTA, footer) */ .tile--green:focus-visible,.tile--orange:focus-visible,.tile--blue:focus-visible, .tile--purple:focus-visible,.tile--red:focus-visible,.tile--black:focus-visible, .tile.t-zs:focus-visible,.tile.t-jidelna:focus-visible,.tile.t-druzina:focus-visible, .btn-primary:focus-visible,.btn-on-green:focus-visible, .page-head a:focus-visible{outline:3px solid #fff;outline-offset:3px; box-shadow:0 0 0 6px rgba(0,0,0,.55);border-radius:6px;} /* Patička je nově světlá (#FDF4DF) → focus musí být tmavý, ne bílý. */ footer.site a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px;} .skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--green-deep); padding:12px 18px;border-radius:0 0 10px 0;font-weight:700;z-index:200;} .skip:focus{left:0;} /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;gap:10px;justify-content:center; min-height:52px;padding:14px 28px;border-radius:10px;font-weight:700;font-size:1.05rem; text-decoration:none;cursor:pointer;border:2px solid transparent; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .btn svg{width:22px;height:22px;flex:none;} /* Stavový model: hover = jen ztmavení (affordance, BEZ pohybu); :active = zamáčknutí (translateY + inset); :hover:not(:active) brání stohování hover pod aktivní stav. */ .btn-primary{background:var(--green-deep);color:#fff;} .btn-primary:hover:not(:active){background:var(--green-dark);} .btn-primary:active{background:var(--green-dark);transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.20);} .btn-ghost{background:#fff;color:var(--green-deep);border-color:var(--green);} .btn-ghost:hover:not(:active){background:var(--green-soft);border-color:var(--green-deep);} .btn-ghost:active{background:#dcebdf;border-color:var(--green-dark);transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(21,82,39,.12);} .btn-on-green{background:#fff;color:var(--green-dark);} .btn-on-green:hover:not(:active){background:#f0f0f0;} .btn-on-green:active{background:#e3e3e3;transform:translateY(2px);box-shadow:inset 0 3px 6px rgba(0,0,0,.18);} .btn-yellow{background:var(--yellow);color:var(--ink);} .btn-yellow:hover:not(:active){background:#e7a21a;} .btn-yellow:active{background:#d4900f;transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.15);} /* Disabled — vizuální cue (WCAG: disabled controls jsou z kontrastu vyňaty, ale uživatel cue čeká) */ .btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;} .btn-primary:disabled,.btn-primary[aria-disabled="true"]{background:rgba(35,142,68,.38);color:rgba(255,255,255,.75);} .btn-yellow:disabled,.btn-yellow[aria-disabled="true"]{background:rgba(242,183,5,.45);color:rgba(35,31,32,.5);} .btn-ghost:disabled,.btn-ghost[aria-disabled="true"]{background:#fff;color:rgba(26,110,51,.45);border-color:rgba(35,142,68,.3);} .btn-on-green:disabled,.btn-on-green[aria-disabled="true"]{background:rgba(255,255,255,.6);color:rgba(21,82,39,.5);} /* ============ HEADER (dvouřadá, full-width menu à la v5) ============ */ header.site{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05);} .head-top{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:var(--maxw);margin:0 auto;padding:16px 24px;} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-width:0;} .brand img{height:58px;width:auto;} .brand .nm{font-weight:700;font-size:1.18rem;line-height:1.05;color:var(--green-deep);} .brand .sub{font-size:.82rem;color:var(--ink-soft);font-weight:500;} .head-contact{display:flex;align-items:center;gap:28px;margin-left:auto;} .head-contact a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600;min-height:44px;} .head-contact a:hover{color:var(--green-dark);} .head-contact svg{width:20px;height:20px;color:var(--green);flex:none;} .navbar{background:var(--navbar-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} nav.main{display:flex;align-items:stretch;justify-content:center;gap:2px;max-width:var(--maxw);margin:0 auto;padding:0 12px;} nav.main>a, nav.main>.has-sub{flex:0 0 auto;display:flex;} .has-sub{position:relative;} nav.main>a, .has-sub>a{ flex:0 0 auto;justify-content:center;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;letter-spacing:.02em;text-transform:uppercase; padding:16px 18px;min-height:54px;border-bottom:3px solid transparent; transition:background .15s,color .15s,border-color .15s; } nav.main>a:hover, .has-sub>a:hover, .has-sub>a:focus-visible{background:rgba(0,0,0,.04);color:var(--green-dark);} nav.main a[aria-current="page"]{color:var(--green-dark);border-bottom-color:var(--green);} .has-sub>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65;flex:none;} .submenu{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:0 0 12px 12px;box-shadow:0 16px 32px rgba(0,0,0,.13);padding:8px;display:none;z-index:120;} .has-sub:hover .submenu, .has-sub:focus-within .submenu{display:block;} .submenu a{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:8px;text-transform:none;letter-spacing:0;font-weight:600;font-size:1rem;color:var(--ink);text-decoration:none;} .submenu a:hover, .submenu a:focus-visible{background:var(--green-soft);color:var(--green-dark);} /* Mobilní přepínač podmenu — na desktopu (>1040px) skrytý; desktop používá hover dropdown beze změny. */ .submenu-toggle{display:none;} .head-search{background:none;border:1px solid var(--line-strong);border-radius:var(--radius);width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none;} .head-search:hover{border-color:var(--green);color:var(--green-dark);} .head-search[aria-expanded="true"]{border-color:var(--green);color:var(--green-dark);background:var(--green-soft);} .head-search svg{width:21px;height:21px;} /* Vysouvací vyhledávací pole v hlavičce (přepínač lupy). Panel = jeden vizuální celek: vnější rámeček + rádius nese .head-searchform, input je bezrámečkový a splývá s panelem, submit přiléhá vpravo. */ .head-search-wrap{position:relative;display:inline-flex;align-items:center;flex:none;} .head-searchform{position:absolute;top:calc(100% + 10px);right:0;z-index:130;display:flex;align-items:stretch;gap:6px; background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 10px 24px rgba(35,31,32,.12);padding:6px;} .head-searchform[hidden]{display:none;} .head-searchform input[type="search"]{ width:min(60vw,300px);min-height:44px;padding:10px 14px;border:0;border-radius:var(--radius-s); font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;line-height:1.2;} .head-searchform input[type="search"]:focus-visible{outline:3px solid var(--green-dark);outline-offset:-1px;} .head-searchform__submit{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px; border:none;border-radius:var(--radius-s);background:var(--green);color:#fff;font-weight:700;font-size:1rem;cursor:pointer;white-space:nowrap;} .head-searchform__submit:hover{background:var(--green-dark);} .head-searchform__submit:focus-visible{outline:3px solid var(--green-dark);outline-offset:2px;} .head-searchform__submit svg{width:20px;height:20px;flex:none;} /* Vyhledávací formulář na stránce s výsledky (search.php). */ .search-form-page{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;max-width:640px;margin:0 0 6px;} .search-form-page label{flex:1 1 240px;display:block;} .search-form-page input[type="search"]{ width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:10px; font-family:inherit;font-size:1.05rem;color:var(--ink);background:#fff;line-height:1.2;} .search-form-page input[type="search"]:focus-visible{outline:3px solid var(--green-dark);outline-offset:2px;border-color:var(--green);} .search-form-page button[type="submit"]{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px; border:none;border-radius:10px;background:var(--green-deep);color:#fff;font-weight:700;font-size:1.05rem;cursor:pointer;white-space:nowrap;} .search-form-page button[type="submit"]:hover{background:var(--green-dark);} .search-form-page button[type="submit"] svg{width:21px;height:21px;flex:none;} /* Seznam výsledků vyhledávání. */ .search-empty{color:var(--ink-soft);font-size:1.1rem;margin:8px 0 0;} .search-results{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px;} .search-result{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;} .search-result__type{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);margin:0 0 6px;} .search-result__title{font-size:1.25rem;margin:0 0 8px;} .search-result__title a{color:var(--ink);text-decoration:none;} .search-result__title a:hover{color:var(--green-dark);text-decoration:underline;} .search-result__excerpt{color:var(--ink-soft);margin:0;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .tel-mobile{display:none;} .burger{display:none;background:var(--green);border:none;color:#fff;border-radius:10px; width:52px;height:52px;align-items:center;justify-content:center;cursor:pointer;} .burger svg{width:28px;height:28px;} /* Hamburger ↔ ✕ podle stavu otevření (JS přepíná aria-expanded na #burger). */ .burger .burger-close{display:none;} .burger[aria-expanded="true"] .burger-open{display:none;} .burger[aria-expanded="true"] .burger-close{display:block;} /* ============ HERO ============ */ .hero{position:relative;overflow:hidden;background:var(--green-dark);} .hero-photo{position:absolute;inset:0;background:url('/wp-content/themes/zsteskovice/assets/img/hero.jpg') center/cover no-repeat;background-image:image-set(url('/wp-content/themes/zsteskovice/assets/img/hero.webp') type('image/webp'), url('/wp-content/themes/zsteskovice/assets/img/hero.jpg') type('image/jpeg'));} .hero-photo::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(35,142,68,.88) 0%,rgba(35,142,68,.62) 45%,rgba(35,142,68,.15) 100%); /* fallback (bez color-mix) = týž gradient bez color-mix */ background:linear-gradient(var(--hero-ov-uhel,105deg),color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-od,88%),transparent) 0%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-mid,62%),transparent) 45%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-do,15%),transparent) 100%);} /* ODDÁLENÁ FOTKA S VYTRÁCENÍM DO STRAN (zadání 12. 8. 2026). Fotka je vidět z velké části, sedí na středu a k oběma okrajům se vytrácí do ztracena, takže na krajích zbyde jen barva závoje. ZUŽUJE SE PRVEK, NE OBRÁZEK. `.hero-photo` je pruh o šířce --hero-foto-sirka uprostřed hera a fotka v něm zůstává na `cover`. Je to zásadní pro odolnost: `cover` uvnitř pruhu vždycky pokryje celou jeho plochu, takže výška fotky NIKDY nezáleží na šířce okna a nahoře ani dole nemůžou vzniknout ostré hrany. První pokus (13. 8. přepsán) zmenšoval místo prvku samotný obrázek přes `background-size:55% auto` — tam výška fotky se šířkou okna klesala, pod 884 px přestala pruh pokrývat a efekt se kvůli tomu musel vypnout pod 1024 px. Právě to způsobilo, že na tabletu vypadala úvodka jinak (nahlášeno 13. 8.). Maska i závoj jsou teď v souřadnicích PRUHU (0–100 % jeho šířky), ne hera — proto ty prosté stopy. Změna --hero-foto-sirka posune obojí s sebou; je to jediné číslo, kterým se šířka zobrazené plochy ladí, a platí na všech šířkách od 761 px (žádná výjimka pro tablet — vzhled je všude stejný). POZOR NA KOMPROMIS ZA TÍM ČÍSLEM: širší pruh = větší plocha na obrazovce, ale MÍŇ z fotky na výšku, protože `cover` uřízne víc. Naměřeno na 2000 px při výšce hera 520 px: 55 % → pruh 1100 px a vidět 57 % výšky fotky; 65 % → 1300 px a 48 %; 72 % → 1440 px a 44 %; 80 % → 1600 px a 39 %. Šířka fotky je vidět vždy celá, ořez je čistě svislý. Zvoleno 72 % (uživatel 13. 8.: „širší zobrazenou plochu"). NA TELEFONECH (do 760 px) zůstává dnešní chování BEZE ZMĚNY — fotka přes celou šířku a úhlopříčný závoj. Požadavek uživatele: na mobilu se nesmí nic zmenšovat. Hranice 760 px je sdílená s ostatními „telefonními" pravidly tématu. Krytí závoje si dál řídí Nastavení školy, jen se mění význam stopů: --hero-ov-od = kraje, --hero-ov-mid = rameno, --hero-ov-do = střed. Úhel (--hero-ov-uhel) se tady neuplatní — vytrácení do stran je z podstaty symetrické; na telefonech úhel platí dál. */ @media (min-width:761px){ .hero{--hero-foto-sirka:72%;background:var(--hero-ov,#238E44);} .hero-photo{left:50%;right:auto;width:var(--hero-foto-sirka,72%);transform:translateX(-50%); background-position:center var(--hero-foto-y,50%); /* přepisuje pozici ze zkratky `background:… center/cover` v základním pravidle; `cover` i `no-repeat` zůstávají */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);} .hero-photo::after{ background:linear-gradient(90deg,rgba(35,142,68,.88) 0%,rgba(35,142,68,.62) 22%,rgba(35,142,68,.15) 50%,rgba(35,142,68,.62) 78%,rgba(35,142,68,.88) 100%); /* fallback (bez color-mix) */ background:linear-gradient(90deg,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-od,88%),transparent) 0%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-mid,62%),transparent) 22%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-do,15%),transparent) 50%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-mid,62%),transparent) 78%,color-mix(in srgb,var(--hero-ov,#238E44) var(--hero-ov-od,88%),transparent) 100%);} } /* min-height DRŽÍ POMĚR STRAN HERO, ať fotka není na širokém monitoru přeoříznutá. Bez něj je výška hero daná obsahem, tj. od ~1280 px konstantních 421 px, zatímco šířka roste — poměr se protáhne z 3:1 na 8,2:1 a `cover` musí z fotky ukrojit tím víc, čím širší monitor (na 3440 px zbylo vidět 18 %). Poměr drží pruh v rozumném tvaru, strop brání tomu, aby hero na ultrawide vytlačilo obsah pod okraj obrazovky. `min()` bez dolní meze je záměr: na úzkých oknech vyjde míň, než je výška obsahu, takže se pravidlo neuplatní a mobil zůstává beze změny. Doprovodné svislé centrování drží text uprostřed vyššího pruhu (rozhodnutí 9. 8.). 26vw/620px je snížení z původních 32vw/820px — to bylo podle uživatele moc vysoké (13. 8.). Naměřeno na 2000 px: 640 → 520 px, na 3440 px: 820 → 620 px. Pod ~1620 px šířky pravidlo stejně nedosáhne na výšku obsahu (421 px), takže na běžných noteboocích se nic nemění. */ .hero .wrap{position:relative;z-index:2;padding:84px 24px 130px; min-height:min(26vw,620px);display:flex;flex-direction:column;justify-content:center;} .hero-card{max-width:none;} .hero-card__main{max-width:820px;} .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink); font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase; padding:8px 16px;border-radius:999px;margin-bottom:22px;} .eyebrow svg{width:18px;height:18px;} .hero h1{color:#fff;font-size:clamp(1.45rem,3.4vw,2.125rem);margin-bottom:14px;} /* Každý řádek názvu na svém řádku — „příspěvková organizace" nikdy neskončí nalepená za názvem, nezávisle na šířce okna. */ .hero-h__ln{display:block;} .hero .claim{color:#fff;font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:600;margin-bottom:16px;} .hero .lead{color:#EAF4EC;font-size:1.05rem;max-width:540px;margin-bottom:30px;} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;} /* Dvousloupcové hero: text vlevo, mimořádná zpráva vpravo. Zlom je na 1200 px, ne níž: obsah .wrap = 1200 − 2×24 = 1152 px, mínus karta 320 a mezera 28 zbývá 804 px na levý sloupec — což je minimum, do kterého se první řádek názvu ve 34 px vejde. Při 1150 px by zbylo jen 754 px a nadpis by se zalomil. */ @media (min-width:1200px){ .hero-card--split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:center;} } .hero-msg{background:var(--paper);border-radius:var(--radius-l);box-shadow:var(--shadow-hi); padding:20px 22px;margin-top:26px;} @media (min-width:1200px){ .hero-msg{margin-top:0;} } .hero-msg__ic{width:42px;height:42px;border-radius:12px;background:var(--yellow-soft); display:flex;align-items:center;justify-content:center;margin-bottom:12px;} /* #8A5800 NENÍ --yellow/--yellow-soft z logomanuálu — je to záměrně ztmavený jantar. .hero-msg__kick sedí přímo na bílém --paper pozadí karty (je sourozenec .hero-msg__ic, ne jeho potomek), takže text potřebuje kontrast textu 4,5:1. Původní #B07100 dávalo na bílé jen 4,03:1 — pod hranicí. #8A5800 dává 6,04:1 na bílé a 5,38:1 na --yellow-soft pod ikonou (ta samotná je aria-hidden, stačilo by 3:1, ale sdílí barvu s kickerem kvůli vizuální jednotě). NEVRACET zpátky na --yellow/--yellow-soft — ty by kontrast nedaly. */ .hero-msg__ic svg{width:23px;height:23px;color:#8A5800;} .hero-msg__kick{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#8A5800;margin-bottom:5px;} .hero-msg__title{margin:0 0 5px;font-size:1.15rem;font-weight:700;color:var(--ink);line-height:1.25;} .hero-msg__text{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.5;} .hero-msg__cta{display:inline-block;margin-top:14px;background:var(--yellow);color:var(--ink); font-weight:700;font-size:.9rem;padding:10px 18px;border-radius:10px;text-decoration:none;} /* Stejný hover odstín jako .btn-yellow:hover (řádek 96) — jedno gesto, jeden odstín. */ .hero-msg__cta:hover{background:#e7a21a;} /* organická vlnka pod hero */ /* max-height je POJISTKA PROTI PŘERŮSTÁNÍ NA ŠIROKÝCH MONITORECH. Vlnky mají preserveAspectRatio="none" a viewBox 1440×70 (resp. ×80), takže s height:auto roste jejich výška lineárně se šířkou okna (H = šířka × 70/1440). Prostor, který na ně v layoutu čeká, je ale pevný v px (.hero .wrap padding-bottom 130, .shero/.page-head .wrap 92) — nad ~2500 px vlna ten rozpočet přeroste a začne krýt text a tlačítka. Strop 100px se do obou rozpočtů vždy vejde (křivka vystoupá max ~0,7 × výšky) a přirozené výšky na 1440 px (70/80) jsou pod ním, takže do 1440 px se vzhled nemění a do ~2000 px vlnka pořád roste. */ .leaf-divider{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;} .leaf-divider svg{width:100%;height:auto;max-height:100px;display:block;} /* ============ SECTION SHELL ============ */ section{position:relative;} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px;} .sec-head h2{font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--green-dark);} .sec-head .kick{display:inline-flex;align-items:center;gap:9px;color:var(--green-deep);font-weight:700; text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;margin-bottom:10px;} .kick svg{width:20px;height:20px;} .morelink{color:var(--green-deep);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:7px; padding:8px 4px;min-height:44px;} .morelink:hover{text-decoration:underline;} .morelink svg{width:18px;height:18px;} /* ============ SECTION TILES (4) ============ */ .tiles{padding:74px 0 64px;} /* auto-fit → libovolný počet karet hezky zalomí; max 4 v řadě řeší .wrap max-width */ .tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;} .tile{ display:flex;flex-direction:column;text-decoration:none;color:inherit; border-radius:var(--radius-l);padding:30px 26px 26px;min-height:240px; border:2px solid transparent;box-shadow:var(--shadow);position:relative;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; } .tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-hi);} .tile .ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .tile .ic svg{width:36px;height:36px;} .tile h3{font-size:1.45rem;margin-bottom:8px;} .tile p{font-size:1rem;margin:0;} .tile .go{margin-top:auto;padding-top:16px;font-weight:700;display:inline-flex;align-items:center;gap:8px;} .tile .go svg{width:18px;height:18px;} /* „Blob" nahrazen jemným BRANDOVÝM STROMEM v rohu (logo manuál). */ .tile .blob{display:none;} .tile::after{content:"";position:absolute;right:-20px;bottom:-24px;width:150px;height:170px; background:url('/wp-content/themes/zsteskovice/assets/img/strom-bila.png') no-repeat right bottom/contain; opacity:.10;pointer-events:none;} /* ---- Obecné barevné modifikátory dlaždic (editovatelné v pluginu) ---- WCAG: bílý text JEN na sytých plochách green(#238E44)/red(#971E21)/black(#231F20); na yellow a white je text tmavý (#231F20). */ /* zelená — sytá tmavá plocha, bílý text (--green-dark #155227 → kontrast 9.23:1, aby i POPIS bílým textem splnil WCAG AA ≥ 4.5:1) */ .tile--green{background:var(--skola-c-green,var(--green));color:#fff;} .tile--green .ic{background:rgba(255,255,255,.18);color:#fff;} .tile--green h3{color:#fff;} .tile--green p{color:#fff;} .tile--green .go{color:#fff;} .tile--green .blob{background:#fff;} /* žlutá — světlá karta, žlutá ikona-plocha, TMAVÝ text */ .tile--yellow{background:#fff;border-color:var(--skola-c-yellow,var(--yellow));color:var(--ink);} .tile--yellow .ic{background:var(--skola-c-yellow,var(--yellow));color:var(--ink);} .tile--yellow h3{color:var(--ink);} .tile--yellow p{color:var(--ink-soft);} .tile--yellow .go{color:var(--green-deep);} .tile--yellow .blob{background:var(--yellow);} /* červená — sytá plocha, bílý text */ .tile--red{background:var(--skola-c-red,var(--red));color:#fff;} .tile--red .ic{background:rgba(255,255,255,.2);color:#fff;} .tile--red .go{color:#fff;} .tile--red .blob{background:#fff;} /* černá — sytá plocha, bílý text, žlutá ikona-plocha */ .tile--black{background:var(--skola-c-black,var(--ink));color:#fff;} .tile--black .ic{background:var(--yellow);color:var(--ink);} .tile--black .go{color:#fff;} .tile--black .blob{background:var(--yellow);} /* bílá — bílé pozadí, zelený akcent, TMAVÝ text */ .tile--white{background:#fff;border-color:var(--line-strong);color:var(--ink);} .tile--white .ic{background:var(--green-soft);color:var(--green-dark);} .tile--white h3{color:var(--ink);} .tile--white p{color:var(--ink-soft);} .tile--white .go{color:var(--green-deep);} .tile--white .blob{background:var(--yellow);} /* ---- Sekční barvy starého webu (sytá plocha + bílý text + světlá ikona-plocha) ---- Kontrast bílého textu (#fff) vůči ploše ≥ 4.5:1 i pro popis (WCAG AA, ověřeno): orange #B85C1A → 5.98:1 blue #1C6FA8 → 5.33:1 purple #5E419E → 7.67:1 green #155227 (--green-dark) → 9.23:1 */ /* oranžová — ZŠ na starém webu */ .tile--orange{background:var(--skola-c-orange,#B85C1A);color:#fff;} .tile--orange .ic{background:rgba(255,255,255,.2);color:#fff;} .tile--orange h3{color:#fff;} .tile--orange p{color:#fff;} .tile--orange .go{color:#fff;} .tile--orange .blob{background:#fff;} /* modrá — MŠ na starém webu */ .tile--blue{background:var(--skola-c-blue,#1C6FA8);color:#fff;} .tile--blue .ic{background:rgba(255,255,255,.2);color:#fff;} .tile--blue h3{color:#fff;} .tile--blue p{color:#fff;} .tile--blue .go{color:#fff;} .tile--blue .blob{background:#fff;} /* zelená (sytá tmavá) — ŠJ na starém webu: viz .tile--green výše (--green-dark, 9.23:1) */ /* fialová — ŠD na starém webu */ .tile--purple{background:var(--skola-c-purple,#5E419E);color:#fff;} .tile--purple .ic{background:rgba(255,255,255,.2);color:#fff;} .tile--purple h3{color:#fff;} .tile--purple p{color:#fff;} .tile--purple .go{color:#fff;} .tile--purple .blob{background:#fff;} /* ---- Zpětná kompatibilita: staré sekční třídy → namapované na barvy ---- */ .tile.t-zs{background:var(--green);color:#fff;} .tile.t-zs .ic{background:rgba(255,255,255,.18);color:#fff;} .tile.t-zs .blob{background:#fff;} .tile.t-ms{background:#fff;border-color:var(--yellow);} .tile.t-ms .ic{background:var(--yellow);color:var(--ink);} .tile.t-ms h3{color:var(--ink);}.tile.t-ms p{color:var(--ink-soft);} .tile.t-ms .go{color:var(--green-deep);} .tile.t-ms .blob{background:var(--yellow);} .tile.t-jidelna{background:var(--red);color:#fff;} .tile.t-jidelna .ic{background:rgba(255,255,255,.2);color:#fff;} .tile.t-jidelna .blob{background:#fff;} .tile.t-druzina{background:var(--ink);color:#fff;} .tile.t-druzina .ic{background:var(--yellow);color:var(--ink);} .tile.t-druzina .blob{background:var(--yellow);} /* ============ ZÁPIS BANNER ============ */ .zapis{padding:14px 0 64px;} .zapis-box{ background:var(--green-deep);color:#fff;border-radius:var(--radius-l); padding:42px 44px;display:flex;align-items:center;gap:34px;flex-wrap:wrap; position:relative;overflow:hidden;box-shadow:var(--shadow-hi); } .zapis-ico{flex:none;width:84px;height:84px;border-radius:24px;background:var(--yellow);color:var(--ink); display:flex;align-items:center;justify-content:center;} .zapis-ico svg{width:46px;height:46px;} .zapis-txt{flex:1;min-width:240px;position:relative;z-index:2;} .zapis-txt .tag{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:700; font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:999px;margin-bottom:12px;} .zapis-txt h2{font-size:clamp(1.6rem,3.4vw,2.2rem);color:#fff;margin-bottom:8px;} .zapis-txt p{color:#EAF4EC;margin:0;font-size:1.08rem;} .zapis-box .btn{position:relative;z-index:2;} /* Víc tlačítek najednou (ZŠ + MŠ vedou na různý soubor, viz skola_jidelnicek_tlacitka()) — vedle sebe, na mobilu se zalomí pod sebe (stejný gap jako .menu-week__btns na úvodce). */ .zapis-btns{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:2;} /* Sezónní banner z pluginu (skola_render_banner) — sjednocení s vizuálem .zapis-box */ .zapis .skola-banner{ background:var(--green-deep);color:#fff;border-radius:var(--radius-l); padding:42px 44px;display:flex;align-items:center;gap:34px;flex-wrap:wrap; position:relative;overflow:hidden;box-shadow:var(--shadow-hi); } /* Mezera mezi více bannery vyvěšenými současně */ .zapis .skola-banner + .skola-banner{margin-top:20px;} .zapis .skola-banner__body{flex:1;min-width:240px;} .zapis .skola-banner__title{font-size:clamp(1.6rem,3.4vw,2.2rem);color:#fff;margin-bottom:8px;} .zapis .skola-banner__text{color:#EAF4EC;margin:0;font-size:1.08rem;} /* Base: banner CTA je vždy žlutá/ink — 8.45:1 (WCAG 1.4.3 AA). Platí pro všechny bannery mimo .zapis. */ .skola-banner__cta{ display:inline-flex;align-items:center;gap:10px;justify-content:center; min-height:52px;padding:14px 28px;border-radius:10px;font-weight:700;font-size:1.05rem; text-decoration:none;background:var(--yellow);color:var(--ink); transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .skola-banner__cta:hover:not(:active){background:#e7a21a;color:var(--ink);} .skola-banner__cta:active{background:#d4900f;color:var(--ink);transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.15);} .zapis .skola-banner__cta{ display:inline-flex;align-items:center;gap:10px;justify-content:center; min-height:52px;padding:14px 28px;border-radius:10px;font-weight:700;font-size:1.05rem; text-decoration:none;background:var(--yellow);color:var(--ink); transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } /* color drží proti globálnímu base.css `a:hover:not(.btn){color:brand-green}` — CTA není .btn */ .zapis .skola-banner__cta:hover:not(:active){background:#e7a21a;color:var(--ink);} .zapis .skola-banner__cta:active{background:#d4900f;color:var(--ink);transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(0,0,0,.15);} /* ============ AKTUALITY ============ */ .news{padding:24px 0 70px;} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .card{ background:#fff;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line-strong);box-shadow:var(--shadow); display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hi);border-color:var(--green);} .card-media{height:178px;position:relative;overflow:hidden;} .card-media img{width:100%;height:100%;object-fit:cover;} .card-media .media-img{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat;} .ph{height:100%;display:flex;align-items:center;justify-content:center;} .ph svg{width:74px;height:74px;opacity:.9;} .ph.ph-zs{background:linear-gradient(135deg,#2aa050,#1A6E33);color:#fff;} .ph.ph-ms{background:linear-gradient(135deg,#b5453f,#7C1719);color:#fff;} .ph.ph-sj{background:linear-gradient(135deg,#b5453f,#7C1719);color:#fff;} .ph.ph-sd{background:linear-gradient(135deg,#3a3536,#231F20);color:var(--yellow);} .ph.ph-default{background:linear-gradient(135deg,#2aa050,#1A6E33);color:#fff;} .card .badge{position:absolute;top:14px;left:14px;font-weight:700;font-size:.74rem;letter-spacing:.05em; text-transform:uppercase;padding:5px 12px;text-indent:.05em;text-box-trim:trim-both;text-box-edge:cap alphabetic;border-radius:999px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);} .badge.b-zs{background:var(--skola-sek-zs, var(--green-dark));color:#fff;} .badge.b-ms{background:var(--skola-sek-ms, var(--green-dark));color:#fff;} .badge.b-sj{background:var(--skola-sek-sj, var(--green-dark));color:#fff;} .badge.b-sd{background:var(--skola-sek-sd, var(--green-dark));color:#fff;} /* Meta řádek detailu příspěvku — badge stejného tvaru jako na kartě, jen mimo .card-media. */ .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;} .article-meta .badge{font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase; /* text-indent kompenzuje koncovou mezeru z letter-spacing (ink jinak vlevo). text-box-trim ořízne řádkový box na pásmo verzálek → symetrický padding je vycentruje SVISLE stejně napříč prohlížeči (Firefox i Chrome), bez px hacků. */ padding:5px 12px;text-indent:.05em;text-box-trim:trim-both;text-box-edge:cap alphabetic;border-radius:999px;color:#fff;} .article-meta__date{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;color:var(--ink-soft);font-weight:600;} .article-meta__date svg{width:16px;height:16px;color:var(--green);} /* Ořízneme box textu data na pásmo číslic/verzálek → ikona (centrovaná přes align-items) i číslice sednou na společný střed lícující s badge. */ .article-meta__date time{text-box-trim:trim-both;text-box-edge:cap alphabetic;} /* Fallback pro prohlížeče bez text-box-trim (Firefox ≤151 apod.): px korekce, aby verzálky badge i číslice data seděly na společném středu s ikonou. Měřeno ve Firefoxu: verzálky ~1,16 px a číslice ~1,75 px nad středem; ikona OK. */ @supports not (text-box-trim: trim-both) { .article-meta .badge, .card .badge { padding-top: 6.2px; padding-bottom: 3.8px; } .article-meta__date time { transform: translateY(1.75px); } } /* Generický odznak (mimo kartu) — např. „aktuální týden" na jídelníčku. */ .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;line-height:1; font-size:.78rem;font-weight:600;background:var(--green-soft);color:var(--ink);} .card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;} .card-body time{font-size:.86rem;color:var(--ink-soft);font-weight:600;} .card-body h3{font-size:1.22rem;margin:6px 0 8px;color:var(--ink);} .card-body p{font-size:.98rem;color:var(--ink-soft);margin:0 0 16px;} .card-body .read{margin-top:auto;font-weight:700;color:var(--green-deep);text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;} .card-body .read svg{width:17px;height:17px;} .card a.cover{position:absolute;inset:0;text-indent:-9999px;overflow:hidden;} .card{position:relative;} /* ============ VIZE + JÍDELNÍČEK (split) ============ */ .split{padding:14px 0 74px;} .akce-uvod{padding:14px 0 74px;} .split-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;} .split-grid--50-50{grid-template-columns:1fr 1fr;} .split-grid--60-40{grid-template-columns:1.5fr 1fr;} .split-grid--67-33{grid-template-columns:2fr 1fr;} .split-grid--75-25{grid-template-columns:3fr 1fr;} .split-grid--nad{grid-template-columns:1fr;} .vize{background:var(--green);color:#fff;border-radius:var(--radius-l);padding:46px 44px;position:relative;overflow:hidden;} .vize .kick{color:#fff;} .vize .kick svg{color:#fff;} .vize h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:16px;position:relative;z-index:2;} .vize p{color:#EAF4EC;font-size:1.12rem;max-width:560px;position:relative;z-index:2;} .vize .btn{position:relative;z-index:2;margin-top:10px;} /* Výčet ve vizi: čísla v kolečku, zalomený řádek se odsadí pod text. Řádek je grid (kolečko | text) se zarovnáním na účaří (baseline): číslice v kolečku tak sedne na stejnou linku jako text vedle, nezávisle na tom, jak vysoký je řádek. Číslici v kolečku centruje text-box-trim (ořízne řádkový box na pásmo verzálek/číslic, doplní symetrický padding) — stejný postup jako u badge v .article-meta; fallback pro prohlížeče bez něj je níž. */ .vize .vize-list{list-style:none;margin:0 0 18px;padding:0;max-width:560px;position:relative;z-index:2;counter-reset:vize-i;} .vize .vize-list li{display:grid;grid-template-columns:32px 1fr;column-gap:16px;align-items:baseline; margin-bottom:14px;color:#EAF4EC;font-size:1.12rem;line-height:1.5;} .vize .vize-list li:last-child{margin-bottom:0;} .vize ol.vize-list li::before{counter-increment:vize-i;content:counter(vize-i); width:32px;height:32px;box-sizing:border-box;line-height:32px;text-align:center; border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:1rem;} @supports (text-box-trim:trim-both){ .vize ol.vize-list li::before{height:auto;line-height:1;padding:calc((32px - 1cap) / 2) 0; text-box-trim:trim-both;text-box-edge:cap alphabetic;} } /* Fallback pro prohlížeče bez text-box-trim (Firefox 153): řádkový box se centruje podle em (accent + dolní dotažnice), takže číslice sedí ~2 px NAD středem kolečka — změřeno na renderu FF i Chrome. .125em = ty 2 px při 16px písmu (a 1,8 px u menšího kolečka na mobilu), takže jedno pravidlo stačí pro obě velikosti. */ @supports not (text-box-trim:trim-both){ .vize ol.vize-list li::before{padding-top:.125em;} } .vize ul.vize-list li::before{content:"";width:10px;height:10px;justify-self:center;align-self:start; margin-top:calc(.64em - 5px);border-radius:999px;background:var(--yellow);} .menu-week{background:#fff;border:2px solid var(--yellow);border-radius:var(--radius-l);padding:34px 30px;display:flex;flex-direction:column;} .menu-week .ico{width:62px;height:62px;border-radius:18px;background:var(--yellow-soft);color:#c98e0e;display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .menu-week .ico svg{width:34px;height:34px;} .menu-week .kick{color:var(--green-deep);} .menu-week h2{font-size:1.5rem;color:var(--ink);margin-bottom:8px;} .menu-week p{color:var(--ink-soft);font-size:1rem;} .menu-week .btn{margin-top:auto;} .menu-week__btns{display:flex;flex-wrap:wrap;gap:12px;} .menu-week__btn{display:flex;flex-direction:column;gap:5px;} .menu-week__rozsah{font-size:.82rem;color:var(--ink-soft);text-align:center;} /* ============ ROZCESTNÍK ============ */ .quick{padding:14px 0 80px;} .quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .qtile{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line-strong); border-radius:var(--radius);padding:24px 24px;text-decoration:none;color:var(--ink); box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s,border-color .16s;} .qtile:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi);border-color:var(--green);} .qtile .ico{flex:none;width:58px;height:58px;border-radius:16px;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center;} .qtile .ico svg{width:30px;height:30px;} .qtile .t{font-weight:700;font-size:1.12rem;color:var(--green-dark);} .qtile .d{font-size:.92rem;color:var(--ink-soft);} .qtile .arr{margin-left:auto;color:var(--green-deep);} .qtile .arr svg{width:22px;height:22px;} /* ============ FOOTER ============ */ /* Bez border-top: předěl stránka/patička nese linka vykreslená přímo ve vlnovce (.foot-leaf svg, footer.php). Rovný border byl původní pojistka pro případ, že by vlnovka na krémové ploše zanikla — vidět je, takže by nad obloučkem jen zbytečně visela druhá, rovná čára (rozhodnutí uživatele 31. 7.). */ footer.site{background:var(--cream-deep);color:#4A4546;padding:60px 0 0;position:relative;} .foot-leaf{position:absolute;top:-1px;left:0;right:0;line-height:0;} /* max-height: stejná pojistka jako u .leaf-divider. Vlnka (viewBox 1440×60, preserveAspectRatio="none") jinak roste bez omezení se šířkou okna, zatímco padding patičky je pevných 60 px — nad ~2750 px křivka klesla pod horní hranu obsahu a uřízla logo (nahlášeno 9. 8., ověřeno na 3440 px: křivka 97 px vs. logo od 78 px). Strop 80 px = křivka nejvýš ~54 px, tj. 24 px rezerva k logu; přirozených 60 px na 1440 px je pod stropem, takže se vzhled do 1440 nemění. */ .foot-leaf svg{width:100%;height:auto;max-height:80px;display:block;} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-top:18px;} footer.site h3{font-size:1.05rem;color:var(--ink);margin-bottom:16px;letter-spacing:.02em;} /* Odkazy v patičce jsou ČERNÉ, ne zelené — stejně jako položky menu v hlavičce (nav.main>a má var(--ink)). Zelený text na krémové ploše byl špatně čitelný (rozhodnutí uživatele 29. 7.). Hover kopíruje hlavičku: ztmavení do zelené. Ikony u kontaktů zelené zůstávají — v hlavičce je to stejně (zelená ikona + černý text) a na ikonu stačí kontrast 3:1, který --green-deep splňuje. */ footer.site a{color:var(--ink);text-decoration:none;} footer.site a:hover{text-decoration:underline;color:var(--green-dark);} .foot-brand img{height:56px;margin-bottom:14px;} .foot-brand .nm{font-weight:700;color:var(--ink);font-size:1.1rem;} .foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;} .foot-list li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;} .foot-list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green-deep);} .foot-bottom{border-top:1px solid var(--line-strong);margin-top:46px;padding:22px 0; display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.9rem;color:#4A4546;} .foot-bottom nav{display:flex;gap:8px 22px;flex-wrap:wrap;} .foot-bottom a{font-weight:600;color:var(--ink);} /* ============ RESPONSIVE ============ */ @media (max-width:1040px){ /* .tiles-grid řeší zalomení sám přes auto-fit/minmax */ .news-grid{grid-template-columns:repeat(2,1fr);} .quick-grid{grid-template-columns:repeat(2,1fr);} .split-grid, .split-grid--50-50, .split-grid--60-40, .split-grid--67-33, .split-grid--75-25{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr 1fr;} } @media (max-width:1040px){ .navbar{display:none;position:absolute;top:100%;left:0;right:0;border-top:none;} nav.main{ display:none;flex-direction:column;align-items:stretch;gap:4px;padding:14px 16px 20px;background:#fff; border-bottom:1px solid var(--line-strong);box-shadow:0 14px 24px rgba(0,0,0,.12); } .navbar.open{display:block;} .navbar.open nav.main{display:flex;} nav.main>a{flex:none;display:block;} /* Položka s podmenu: řádek s proklikávacím odkazem + samostatným toggle tlačítkem. */ nav.main>.has-sub{flex:none;display:flex;flex-wrap:wrap;align-items:center;} nav.main>a, .has-sub>a{flex:none;justify-content:flex-start;text-align:left;padding:14px 16px;border-radius:8px;font-size:1rem;letter-spacing:.04em;min-height:48px;border-bottom:none;text-transform:none;} .has-sub>a{flex:1 1 auto;min-width:0;} nav.main a[aria-current="page"]{background:var(--green-soft);} /* Na mobilu nahrazuje chevron samostatné tlačítko — skryj dekorativní ::after na odkazu. */ .has-sub>a::after{display:none;} /* Samostatný přepínač podmenu — dotykový cíl >=44px. */ .submenu-toggle{display:flex;align-items:center;justify-content:center;flex:none; width:48px;min-width:48px;min-height:48px;margin-left:auto;padding:0; background:none;border:none;border-radius:8px;color:var(--ink);cursor:pointer; -webkit-tap-highlight-color:transparent;} .submenu-toggle svg{width:22px;height:22px;transition:transform .18s ease;} .submenu-toggle[aria-expanded="true"] svg{transform:rotate(180deg);} .submenu-toggle:hover{background:rgba(0,0,0,.04);color:var(--green-dark);} .submenu-toggle:focus-visible{outline:3px solid var(--green-dark);outline-offset:2px;} /* Podmenu defaultně sbalené; rozbalí ho .is-open na rodičovském .has-sub. */ .submenu{position:static;display:block;border:none;border-top:none;box-shadow:none;border-radius:0; padding:0;min-width:0;background:transparent;flex-basis:100%;width:100%; max-height:0;overflow:hidden;visibility:hidden;} .has-sub.is-open>.submenu{max-height:none;overflow:visible;visibility:visible;padding:0 0 6px 14px;} .submenu a{min-height:42px;padding:8px 12px;font-size:.95rem;} .burger{display:flex;} .head-contact{display:none;} .tel-mobile{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff; font-weight:700;text-decoration:none;padding:11px 16px;border-radius:10px;min-height:48px;white-space:nowrap;flex:none;} .tel-mobile svg{width:20px;height:20px;flex:none;} /* Hledání zůstává dostupné i na tabletu/mobilu — lupa vedle hamburgeru. Sladit vzhled se sousedy (telefon + hamburger): zelené plné tlačítko, ne bílý obrys. */ .head-search-wrap{display:inline-flex;} .head-search{width:48px;height:48px;background:var(--green);border:none;color:#fff;border-radius:10px;} .head-search:hover,.head-search:focus-visible{color:#fff;} .head-search[aria-expanded="true"]{background:var(--green-dark);border-color:transparent;color:#fff;} /* Panel se kotví na HLAVIČKU, ne na lupu. `header.site{position:relative}` tu bylo odjakživa, jenže .head-search-wrap zůstal relative, takže containing block byla pořád lupa: panel široký ~358px se od ní odvíjel doleva a vylezl mimo obrazovku (naměřeno left:-66px na 390px). Statický wrap + levá i pravá kotva = panel přes celou šířku hlavičky s okraji. */ /* Odkazy v patičce mají na mobilu jen ~25px na výšku — pod hranicí pohodlného ťuknutí prstem (doporučení 44px). Roztažení na plnou šířku sloupce navíc zvětší cíl i vodorovně; mezery v seznamu se tím zmenší, ať výška neroste. */ footer.site .foot-list a, footer.site .foot-contact a, footer.site .foot-bottom a{display:inline-flex;align-items:center;min-height:44px;} footer.site .foot-list{gap:2px;} .head-search-wrap{position:static;} .head-searchform{left:12px;right:12px;width:auto;max-width:none;} /* Input se musí umět zúžit (min-width:0 kvůli flexu), tlačítko si drží svou šířku. */ .head-searchform input[type="search"]{width:auto;flex:1 1 auto;min-width:0;} header.site{position:relative;} } @media (max-width:560px){ body{font-size:15.5px;} .news-grid{grid-template-columns:1fr;} .quick-grid{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} .zapis-box,.vize{padding:30px 24px;} .vize .vize-list li{grid-template-columns:28px 1fr;column-gap:13px;font-size:1.05rem;margin-bottom:12px;} .vize ol.vize-list li::before{width:28px;height:28px;line-height:28px;font-size:.9rem;} @supports (text-box-trim:trim-both){ .vize ol.vize-list li::before{height:auto;line-height:1;padding:calc((28px - 1cap) / 2) 0;} } .hero .wrap{padding:54px 24px 96px;} .head-top{gap:12px;} .brand img{height:46px;} } /* Úzké telefony: kontakt jen jako ikona, ať se hlavička (logo + telefon + menu) nepřekrývá. */ @media (max-width:480px){ .tel-mobile{padding:0;width:48px;height:48px;justify-content:center;gap:0;} .tel-mobile .tel-mobile__num{display:none;} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important;} } /* ============================================================ PODSTRÁNKY 2026 — sekce / dokumenty / úřední deska / kontakt (port prototypů podstranka-*.html; scopováno, aby nerozbilo homepage) ============================================================ */ /* ---- BREADCRUMB (sekce: pruh přes celou šířku nad hero) ---- */ .crumb{background:var(--cream);border-bottom:1px solid var(--line);} .crumb ol{max-width:var(--maxw);margin:0 auto;padding:14px 24px;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.92rem;} .crumb li{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);} .crumb a{color:var(--green-deep);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;} .crumb a:hover{text-decoration:underline;} .crumb svg{width:15px;height:15px;color:var(--line-strong);} .crumb [aria-current="page"]{color:var(--ink);font-weight:700;} /* ---- SECTION HERO (zelené záhlaví s fotkou + listový předěl) ---- */ .shero{--hero-c:var(--skola-c-green,#238E44);background:var(--hero-c);position:relative;overflow:hidden;} .shero::before{content:"";position:absolute;right:-60px;top:-80px;width:360px;height:360px; border-radius:46% 54% 60% 40%/52% 44% 56% 48%;background:rgba(255,255,255,.05);} .shero .wrap{position:relative;z-index:2;padding:44px 24px 92px;min-height:420px; /* jednotný padding + min. výška, ať pruh nekolísá s délkou textu (sdílí .page-head) */ display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:auto 1fr;column-gap:42px;row-gap:16px;align-items:center;} /* drobečky řádek auto (nahoře), obsah 1fr svisle na střed */ /* Drobečková navigace UVNITŘ barevného hero — světlá, kompaktní, přes celou šířku. */ .shero-crumb{grid-column:1 / -1;align-self:start;} .shero-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9rem;} .shero-crumb li{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);} .shero-crumb a{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;} .shero-crumb a:hover{text-decoration:underline;} .shero-crumb svg{width:15px;height:15px;color:rgba(255,255,255,.5);} .shero-crumb [aria-current="page"]{color:#fff;font-weight:700;} .shero-txt .kick{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink); font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; padding:7px 15px;border-radius:999px;margin-bottom:18px;} .shero-txt .kick svg{width:18px;height:18px;} .shero-txt h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.8rem);margin-bottom:14px;} .shero-txt .lead{color:#EAF4EC;font-size:clamp(1.08rem,2vw,1.25rem);max-width:560px;margin:0;} .shero-actions{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px;} .shero-actions .btn svg{width:18px;height:18px;} .shero-txt .lead p{color:#EAF4EC;} .shero-txt .lead p:last-child{margin-bottom:0;} .shero-txt .lead a{color:#fff;} .shero-fig{margin:0;position:relative;} .shero-fig img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius-l); border:4px solid rgba(255,255,255,.14);box-shadow:var(--shadow-hi);} .shero-fig figcaption{color:#CDE4D3;font-size:.84rem;margin-top:10px;display:flex;align-items:center;gap:8px;} .shero-fig figcaption svg{width:16px;height:16px;flex:none;color:var(--yellow);} /* ── Režim „přes celé pozadí" (.shero--bg): fotka full-bleed + barevný překryv sekce ── */ .shero__photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;} .shero__photo::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,color-mix(in srgb,var(--hero-c) 92%,transparent) 0%,color-mix(in srgb,var(--hero-c) 80%,transparent) 55%,color-mix(in srgb,var(--hero-c) 62%,transparent) 100%);} .shero--bg::before{display:none;} /* skrýt dekorační kruh nad fotkou */ /* Text přes celou šířku (žádná karta) + štědřejší vertikální padding, ať záhlaví bez fotky nepůsobí nalepené (zachová „mezeru" nahoře/dole podobně jako varianta s fotkou). */ .shero--bg .wrap,.shero--solo .wrap{grid-template-columns:1fr;} /* text přes celou šířku; padding dědí z .shero .wrap (jednotný 44/92) */ .shero--bg .shero-txt{max-width:820px;} /* ---- ROZCESTNÍK „V této sekci" (dlaždice) ---- */ .sekce-obsah{padding:46px 0 6px;} /* volitelný text stránky v rozcestníku (Sekce → Zobrazit text stránky) */ .nav-tiles{padding:64px 0 56px;} .dlazdice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .dlazdice{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius);padding:26px 24px 22px;box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative;} .dlazdice:hover{transform:translateY(-5px);box-shadow:var(--shadow-hi);border-color:var(--green);} .dlazdice .ic{width:56px;height:56px;border-radius:15px;background:var(--green-soft);color:var(--green-dark); display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .dlazdice .ic svg{width:31px;height:31px;} .dlazdice h3{font-size:1.28rem;color:var(--ink);margin-bottom:6px;} .dlazdice p{font-size:.97rem;color:var(--ink-soft);margin:0;} .dlazdice .go{margin-top:14px;font-weight:700;color:var(--green-deep);display:inline-flex;align-items:center;gap:8px;font-size:.96rem;} .dlazdice .go svg{width:17px;height:17px;} /* Kompaktní rozcestník: šablona přidá --compact automaticky při mnoha podpoložkách (>6), aby velké menu (8–12 dlaždic) zůstalo přehledné — menší karty, víc do řádku, bez popisu. */ .dlazdice-grid--compact{grid-template-columns:repeat(4,1fr);gap:14px;} .dlazdice-grid--compact .dlazdice{padding:18px;} .dlazdice-grid--compact .dlazdice .ic{width:44px;height:44px;border-radius:12px;margin-bottom:10px;} .dlazdice-grid--compact .dlazdice .ic svg{width:24px;height:24px;} .dlazdice-grid--compact .dlazdice h3{font-size:1.06rem;margin-bottom:0;} .dlazdice-grid--compact .dlazdice p{display:none;} .dlazdice-grid--compact .dlazdice .go{margin-top:10px;font-size:.9rem;} /* ---- DOKUMENTY sekce (přístupný seznam) ---- Jeden souvislý panel s hairline předěly (ŽÁDNÉ samostatné karty na řádek). Sloupce jsou zarovnané napříč řádky: pevný sloupec data (min 6.5rem) ukotví pravou hranu, takže pilulka „PDF · velikost" i datum tvoří rovné svislé rály bez ohledu na délku obsahu (i když každý .doc-row je samostatný grid). */ .docs{padding:8px 0 64px;} .docs-panel{background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-l);box-shadow:var(--shadow);overflow:hidden;} .doc-list{list-style:none;margin:0;padding:0;} .doc-list li[hidden]{display:none;} /* klientský filtr kategorií (docfilter.js) */ /* Oddělovač jen MEZI viditelnými řádky. `li:first-child` nestačí: při filtrování nebo stránkování je první řádek často skrytý, takže první VIDITELNÝ si nakreslil border-top a pod zaobleným okrajem panelu vznikla čára navíc. Sourozenecký selektor bere jen řádky, před kterými nějaký viditelný řádek opravdu je. */ .doc-list li:not([hidden]) ~ li:not([hidden]){border-top:1px solid var(--line);} /* Jídelníčky ve stejném seznamu: značka aktuálního týdne a řádek se dvěma soubory (ZŠ/MŠ), který proto není celý jedním odkazem. */ .doc-list li.je-aktualni{background:var(--green-soft);} .doc-tag{display:inline-block;margin-left:10px;font-size:.74rem;font-weight:700;letter-spacing:.05em; text-transform:uppercase;background:var(--yellow);color:var(--ink);padding:3px 9px;border-radius:999px;vertical-align:middle;} /* Dva soubory v řádku (ZŠ + MŠ) — samostatné odkazy, NE uvnitř pilulky .doc-meta: ta má vlastní pozadí a rámeček a dvojice v ní vypadala jako jedno divné tlačítko. */ .doc-soubory{grid-column:3;justify-self:end;display:inline-flex;gap:8px;} .doc-soubory a{display:inline-flex;align-items:center;min-height:38px;padding:6px 14px;border-radius:8px; background:var(--green-soft);color:var(--green-deep);font-weight:700;font-size:.86rem;text-decoration:none; border:1px solid transparent;transition:background .14s,color .14s;} .doc-soubory a:hover{background:var(--green-dark);color:#fff;} /* Na zvýrazněném řádku (aktuální týden) by ikona i tlačítka splynuly s pozadím. */ .doc-list li.je-aktualni .doc-ic, .doc-list li.je-aktualni .doc-soubory a{background:#fff;border-color:var(--line-strong);} .doc-list li.je-aktualni .doc-soubory a:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark);} @media (max-width:719px){ .doc-soubory{grid-column:2 / -1;grid-row:2;justify-self:start;flex-wrap:wrap;} } .doc-row--staticky{cursor:default;} .doc-row--staticky:hover{background:transparent;} .doc-row--staticky:hover .doc-name{text-decoration:none;color:var(--green-deep);} .doc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(6.5rem,auto);align-items:center;gap:18px; padding:16px 24px;text-decoration:none;color:var(--ink);min-height:64px;transition:background .14s;} .doc-row:hover{background:var(--green-soft);} .doc-row:hover .doc-name{text-decoration:underline;color:var(--green-dark);} .doc-row:focus-visible{outline:3px solid var(--green-dark);outline-offset:-3px;background:var(--green-soft);} .doc-ic{flex:none;width:44px;height:44px;border-radius:10px;background:var(--green-soft);color:var(--green-dark); display:flex;align-items:center;justify-content:center;} .doc-ic svg{width:24px;height:24px;} .doc-main{grid-column:2;min-width:0;} .doc-name{font-weight:700;color:var(--green-deep);font-size:1.04rem;display:block;} .doc-meta{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink-soft);font-weight:600; background:var(--cream);border:1px solid var(--line);padding:4px 11px;border-radius:999px;white-space:nowrap;line-height:1;} .doc-meta svg{width:14px;height:14px;color:var(--ink-soft);} .doc-date{grid-column:4;justify-self:end;text-align:right;font-size:.9rem;color:var(--ink-soft);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;} /* Mobil: název dostane CELOU šířku řádku, pod ním typ souboru vlevo a datum vpravo. Datum dřív sedělo vedle názvu už na prvním řádku a ukusovalo mu místo — „Den otevřených dveří" se pak lámalo na dva řádky, i když by se vešlo. Ikona drží přes obě řádky. */ @media (max-width:600px){ .doc-row{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:4px;padding:14px 16px;min-height:0;align-items:start;} .doc-ic{grid-row:1 / span 2;align-self:start;width:40px;height:40px;} .doc-main{grid-column:2;grid-row:1;min-width:0;} .doc-name{line-height:1.3;} .doc-meta{grid-column:2;grid-row:2;justify-self:start;align-self:center;} .doc-date{grid-column:2;grid-row:2;justify-self:end;align-self:center;min-width:0;font-size:.82rem;} /* Dva soubory (ZŠ/MŠ) se nevejdou vedle data — dostanou vlastní řádek. */ .doc-soubory{grid-column:2;grid-row:3;justify-self:start;flex-wrap:wrap;} .doc-row:has(.doc-soubory) .doc-date{grid-row:2;} } .doc-foot{padding:18px 24px;background:var(--cream);border-top:1px solid var(--line);display:flex;justify-content:flex-end;} /* ---- RYCHLÝ KONTAKT (karty osob v sekci) ---- */ .team{padding:8px 0 80px;} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .team-grid .person{background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px 24px; box-shadow:var(--shadow);display:flex;flex-direction:column;} .team-grid .person .avatar{width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;margin-bottom:14px;letter-spacing:.02em;} .team-grid .person .avatar.a2{background:var(--green-dark);} .team-grid .person .avatar.a3{background:var(--ink);color:var(--yellow);} .team-grid .person h3{font-size:1.16rem;color:var(--ink);margin-bottom:3px;} .team-grid .person .role{font-size:.92rem;color:var(--green-deep);font-weight:700;margin-bottom:14px;} .team-grid .person .pcontact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;margin-top:auto;} .team-grid .person .pcontact li{display:flex;align-items:center;gap:10px;font-size:.95rem;} .team-grid .person .pcontact svg{width:18px;height:18px;flex:none;color:var(--green);} .team-grid .person .pcontact a{color:var(--green-deep);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center;word-break:break-word;} .team-grid .person .pcontact a:hover{text-decoration:underline;color:var(--green-dark);} /* ============ DOKUMENTY / ÚŘEDNÍ DESKA (archiv šablony) ============ */ /* PAGE HEAD (kompaktní zelené záhlaví s fotkou) */ .page-head{--hero-c:var(--skola-c-green,#238E44);background:var(--hero-c);color:#fff;position:relative;overflow:hidden;} /* Bez natvrdo zadané fotky — pozadí se nastavuje inline (style) jen když je fotka nahraná. */ .page-head .photo{position:absolute;inset:0; background-size:cover;background-position:center;background-repeat:no-repeat;} .page-head .photo::after{content:"";position:absolute;inset:0; background:var(--hero-c); background:linear-gradient(100deg,color-mix(in srgb,var(--hero-c) 95%,transparent) 0%,color-mix(in srgb,var(--hero-c) 88%,transparent) 50%,color-mix(in srgb,var(--hero-c) 72%,transparent) 100%);} .page-head .wrap{position:relative;z-index:2;padding:44px 24px 92px;min-height:420px;display:flex;flex-direction:column;align-items:flex-start;} /* jednotný padding + min. výška; položky nenatahovat (odznak kompaktní) */ /* Drobečky ukotvené NAHOŘE (vždy stejné místo), hlavní obsah pod nimi svisle na střed (auto-margin). */ .page-head .wrap > .crumbs + *{margin-top:auto;} .page-head .wrap > :last-child{margin-bottom:auto;} /* Záhlaví jen s nadpisem (bez leadu i bez štítku) = kompaktnější pruh, ať nadpis neplave v prázdnu. */ .shero .wrap:not(:has(.kick)):not(:has(.lead)), .page-head .wrap:not(:has(.ph-eyebrow)):not(:has(.perex)){min-height:280px;} .page-head h1{color:#fff;font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:12px;max-width:22ch;} .page-head .perex{color:#EAF4EC;font-size:1.12rem;max-width:62ch;margin:0;} .page-head .perex strong{color:#fff;} .page-head .leaf-divider{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;} .page-head .leaf-divider svg{width:100%;height:auto;display:block;} /* breadcrumb na tmavém záhlaví */ .crumbs{position:relative;z-index:2;} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 20px;padding:0;font-size:.92rem;} .crumbs li{display:inline-flex;align-items:center;gap:10px;} .page-head .crumbs a{color:#fff;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;} .page-head .crumbs a:hover{color:#fff;text-decoration:underline;} .page-head .crumbs [aria-current="page"]{color:#fff;font-weight:700;} /* Barva hero pruhu DLE SEKCE (z pluginu, --skola-sek-*). Bez sekce / „O nás" = zelená (base výše). */ .shero--zs{--hero-c:var(--skola-sek-zs,var(--green-dark));background:var(--skola-sek-zs,var(--green-dark));} .shero--ms{--hero-c:var(--skola-sek-ms,var(--green-dark));background:var(--skola-sek-ms,var(--green-dark));} .shero--sj{--hero-c:var(--skola-sek-sj,var(--green-dark));background:var(--skola-sek-sj,var(--green-dark));} .shero--sd{--hero-c:var(--skola-sek-sd,var(--green-dark));background:var(--skola-sek-sd,var(--green-dark));} .page-head--zs{--hero-c:var(--skola-sek-zs,var(--green-dark));background:var(--skola-sek-zs,var(--green-dark));} .page-head--ms{--hero-c:var(--skola-sek-ms,var(--green-dark));background:var(--skola-sek-ms,var(--green-dark));} .page-head--sj{--hero-c:var(--skola-sek-sj,var(--green-dark));background:var(--skola-sek-sj,var(--green-dark));} .page-head--sd{--hero-c:var(--skola-sek-sd,var(--green-dark));background:var(--skola-sek-sd,var(--green-dark));} .crumbs .sep{color:rgba(255,255,255,.6);} .crumbs .sep svg{width:16px;height:16px;display:block;} .count-pill{display:inline-flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink); font-weight:700;font-size:.9rem;padding:7px 15px;border-radius:999px;margin-top:18px;} .count-pill svg{width:18px;height:18px;} /* MAIN SHELL pro archivy — sec-head jako blok (přebíjí flex z homepage) */ .docs-section{padding:54px 0 30px;} .board-section{padding:18px 0 80px;} .docs-section .sec-head,.board-section .sec-head{display:block;margin-bottom:22px;} .docs-section .sec-head h2,.board-section .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--green-dark);} .docs-section .sec-head p.lead,.board-section .sec-head p.lead{color:var(--ink-soft);font-size:1.05rem;margin:10px 0 0;max-width:64ch;} /* FILTR (záložky-odkazy s počty) */ .filter{margin:0 0 26px;} .filter ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;} .filter a, .filter button{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:10px 18px; background:#fff;border:2px solid var(--line-strong);border-radius:999px; color:var(--ink);font-weight:700;font-size:.98rem;text-decoration:none;font-family:inherit;cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s;} .filter a:hover, .filter button:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-2px);} .filter a .num, .filter button .num{font-weight:700;font-size:.82rem;background:var(--green-soft);color:var(--green-dark); border-radius:999px;padding:2px 9px;min-width:26px;text-align:center;} .filter a[aria-current="true"], .filter button[aria-pressed="true"]{background:var(--green-dark);border-color:var(--green-dark);color:#fff;} .filter a[aria-current="true"] .num, .filter button[aria-pressed="true"] .num{background:rgba(255,255,255,.22);color:#fff;} .filter a[aria-current="true"]::before, .filter button[aria-pressed="true"]::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:none;} /* PŘEPÍNAČ Aktuální / Archiv (segmentový toggle nad filtrem) */ .state-switch{display:inline-flex;gap:0;margin:0 0 18px;border:2px solid var(--line-strong); border-radius:999px;overflow:hidden;background:#fff;} .state-switch a{display:inline-flex;align-items:center;min-height:42px;padding:8px 20px; color:var(--ink);font-weight:700;font-size:.95rem;text-decoration:none; transition:background .15s,color .15s;} .state-switch a:hover{color:var(--green-dark);} .state-switch a[aria-current="true"]{background:var(--green-dark);color:#fff;} /* TABULKY dokumentů / úřední desky */ .table-card{background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;} table.docs,table.board{width:100%;border-collapse:collapse;} table.docs caption,table.board caption{text-align:left;font-weight:700;font-size:1.05rem;color:var(--green-dark); padding:18px 22px;background:var(--green-soft);border-bottom:1px solid var(--line-strong);} table.docs caption .cap-sub,table.board caption .cap-sub{display:block;font-weight:500;font-size:.9rem;color:var(--ink-soft);margin-top:3px;} table.docs thead th,table.board thead th{text-align:left;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-soft);font-weight:700;padding:14px 22px;background:#FAF7F1;border-bottom:2px solid var(--line-strong);} table.docs tbody td,table.board tbody td{padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:middle;} table.docs tbody tr:last-child td,table.board tbody tr:last-child td{border-bottom:none;} table.docs tbody tr:hover,table.board tbody tr:hover{background:#FCFAF5;} /* Dlouhý název („Rozpocet-prispevkova-organizace-2021-a-strednedoby-vyhled") se na mobilu nezalomil a vylezl z karty — naměřeno 639px na 360px displeji. POZOR: `overflow-wrap:anywhere` tu NEPOUŽÍVAT — mění i min-content šířku, takže sloupec zkolaboval na 46px a název se rozsekal na 14 řádků. `break-word` láme jen tam, kde je to nutné, a intrinsic šířku nechává být. */ .file-link{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--green-deep);font-weight:700;min-height:44px;line-height:1.4;min-width:0;} .file-link > span{min-width:0;overflow-wrap:break-word;} .file-link:hover{text-decoration:underline;} /* Ikona souboru v tabulce archivu = TÁŽ podoba jako .doc-ic v seznamu dokumentů (sekční blok i [skola_dokumenty]). Dřív tu bylo červené PDF na žluté a zelené DOCX, takže tentýž soubor vypadal na dvou stránkách jinak; typ souboru navíc nese sloupec TYP, barvu na to nepotřebujeme. */ .file-ico{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green-dark);} .file-ico svg{width:24px;height:24px;} .file-meta{display:block;font-weight:500;font-size:.86rem;color:var(--ink-soft);margin-top:2px;} .type-tag{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.82rem;color:var(--ink); background:var(--cream);border:1px solid var(--line-strong);padding:4px 11px;border-radius:7px;white-space:nowrap;} /* Štítek typu (PDF/DOCX) — stejná tlumená podoba jako .doc-meta v seznamu; barvou se typ nerozlišuje, píše se přímo textem. */ .type-tag svg{width:15px;height:15px;color:var(--ink-soft);} .cat{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;padding:5px 12px;border-radius:999px;border:2px solid transparent;white-space:nowrap;margin:2px 4px 2px 0;} .cat::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;} .cat.c-vz{background:var(--green-soft);color:var(--green-dark);border-color:#bfe0c6;} .cat.c-vz::before{background:var(--green);} .cat.c-rad{background:var(--yellow-soft);color:#7a5a05;border-color:#eed79a;} .cat.c-rad::before{background:var(--yellow);} .cat.c-form{background:#FBEDED;color:var(--red);border-color:#e7c1c2;} .cat.c-form::before{background:var(--red);} .cat.c-roz{background:#ECE9F2;color:#473b66;border-color:#cfc6df;} .cat.c-roz::before{background:#6b5aa3;} .cat.c-modra{background:#E6EFF8;color:#1F4E7A;border-color:#c3d8ee;} .cat.c-modra::before{background:#2D6CB5;} .cat.c-seda{background:#EEEEEE;color:#50575e;border-color:#d9d9d9;} .cat.c-seda::before{background:#6b7280;} .cat.c-tyrkys{background:#E1F1EF;color:#0F5F57;border-color:#b9ddd8;} .cat.c-tyrkys::before{background:#119B8B;} .cat.c-oranz{background:#FCE9D6;color:#8A4406;border-color:#f0cfa8;} .cat.c-oranz::before{background:#E07B12;} .cat.c-ruzova{background:#FBE3EF;color:#9B2D63;border-color:#f0c0d8;} .cat.c-ruzova::before{background:#D6438A;} .cat.c-hneda{background:#EEE6DD;color:#6B4A2B;border-color:#d8c7b3;} .cat.c-hneda::before{background:#8B5E34;} td.date{font-weight:600;color:var(--ink);white-space:nowrap;} td.date time{font-variant-numeric:tabular-nums;} .board-card{margin-bottom:30px;} .cj{font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;} .term{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.84rem;padding:5px 12px;border-radius:999px;white-space:nowrap;} .term svg{width:15px;height:15px;flex:none;} .term.live{background:var(--green-soft);color:var(--green-dark);} .term.soon{background:var(--yellow-soft);color:#7a5a05;} .term.done{background:#EDEAE4;color:var(--ink-soft);} .board-card.archiv caption{background:#F0ECE3;color:var(--ink);} .board-card.archiv table.board thead th{background:#F6F2EA;} .board-note{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line-strong); border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin-bottom:28px;} .board-note .ico{flex:none;width:48px;height:48px;border-radius:13px;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center;} .board-note .ico svg{width:26px;height:26px;} .board-note p{margin:0;color:var(--ink-soft);font-size:1rem;} .board-note strong{color:var(--ink);} .empty{display:grid;grid-template-columns:auto minmax(0,auto);justify-content:center;align-items:center;gap:2px 14px;text-align:left;padding:22px 26px;color:var(--ink-soft);} .empty .ico{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;background:var(--green-soft);color:var(--green-dark);display:flex;align-items:center;justify-content:center;} .empty .ico svg{width:22px;height:22px;} .empty h3{grid-column:2;font-size:1.02rem;color:var(--ink);margin:0;} .empty p{grid-column:2;margin:0;max-width:52ch;font-size:.95rem;} @media(max-width:520px){.empty{grid-template-columns:auto;justify-items:center;text-align:center;gap:8px;}.empty .ico{grid-row:auto;}.empty h3,.empty p{grid-column:1;}} /* Stránkování — JEDNOTNÝ styl pro celý web (Aktuality/index.php, hledání/search.php, archiv dokumentů). Zelená paleta, bez dekorativních pruhů, sladěno s .filter a. Všechna místa používají