/*
Theme Name: MŠ a ZŠ Questo
Template: chytryskolniweb-theme
Author: Marek Liška
Author URI: https://marekliska.cz
Description: Web MŠ a ZŠ Questo — dětské téma "Chytrý školní web" v paletě Questo.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zs-zakovska
*/
/* ==========================================================================
Paleta Questo — přemapování CSS proměnných z parent tématu.
Parent (style.css) používá barvy jen přes pojmenované CSS proměnné
(--primary-green, --gray-900, ...), takže tady stačí proměnné přepsat.
Pozor: několik míst v parent CSS má barvu natvrdo (rgba v .hero-overlay
gradientu, .alert-info/.alert-warning pozadí, stroke ikonek
.album-nav/.glightbox-container) — ty proměnné vůbec nepoužívají, takže
je nezmění remap výše. Přebity samostatnými pravidly na konci tohoto
souboru (sekce „Přebití natvrdo zapsaných barev v parent CSS").
| Questo barva | Hex | Role dle manuálu | Kam v kódu |
|---------------|---------|------------------|-------------------------------------|
| Pomeranč | #EF7A3B | primární CTA | --questo-pomeranc (plochy bez textu); pod textem ztmavená varianta → --primary-green |
| Mandarinka | #F7AB59 | — | --primary-green-light + dlaždice MŠ (tmavý text) |
| Safírová | #6071B5 | — | --questo-safir (unese bílý text) |
| Korálová | #F8C0BD | — | --primary-light (pastelový podklad) |
| Mořská zeleň | #38B6AB | nadpisy | --questo-morska (plochy); nadpisy berou ztmavenou --questo-morska-text |
| Teplý grafit | #464543 | text | --gray-900 (text v body, pozadí patičky) |
| Limetka | #C6D75E | — | --accent-yellow + dlaždice ZŠ (tmavý text) |
| Blankytná modř| #8AB5E1 | — | --info-blue |
| Lila | #BC9AC8 | — | --success-green (v parentu bez využití) |
--alert-red (chybové/varovné stavy) je záměrně PONECHÁN beze změny
(#EF4444) — nese reálný sémantický význam (chyba/nebezpečí ve WP admin UI
i front-endu) a v paletě Questo není určená "červená" náhrada.
POZOR na dvě pasti, na kterých tenhle soubor už jednou stál (2026-07-15):
1. --gray-900 NENÍ „barva nadpisů" — parent jím obarvuje text v a
POZADÍ PATIČKY. Brandová barva sem nesmí.
2. Brandová Mořská zeleň i Pomeranč pod textem NEPROJDOU kontrastem;
proto existují varianty --questo-*-text. Neměň je zpět „ať to sedí
s manuálem" bez přepočtu kontrastu.
========================================================================== */
/* ==========================================================================
Písmo — NÁVRH KE SCHVÁLENÍ (brand manuál Questo písmo neurčuje).
Nadpisy: Quicksand (zaoblený, hravý) · Text: Nunito Sans.
Obě variabilní (jeden soubor pokryje všechny řezy), self-hostované
v assets/fonts/ — stejný princip jako Inter v parent tématu, žádné
volání na Google Fonts CDN (GDPR + rychlost).
========================================================================== */
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('assets/fonts/quicksand-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('assets/fonts/quicksand-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Baloo 2 — kulatý display font blízko logu Questo (přání klienta 2026-07-24),
variabilní (jeden soubor pokrývá váhy 500–700). Self-hostováno (bez Google
CDN kvůli GDPR). Používá se na NADPISY, text zůstává na Nunito Sans. */
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('assets/fonts/baloo2-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Baloo 2';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url('assets/fonts/baloo2-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
PRAVIDLO PRO TENTO SOUBOR — čti, než sáhneš na barvy:
Weby škol musí splňovat přístupnost (zákon 99/2019 → WCAG 2.1 AA), což je
navíc přímý prodejní argument produktu. Kontrast textu vůči podkladu tedy
NENÍ věc vkusu: normální text 4.5:1, velký text (>= 24px, nebo >= 18.66px
tučně) a UI prvky 3:1.
Brandová paleta Questo je světlá a hravá — většina jejích barev NEUNESE
bílý text (Pomeranč 2.79:1, Mandarinka 1.92:1, Limetka 1.58:1). Proto se
rozlišuje:
1. --questo-* = brandové barvy PŘESNĚ dle manuálu, pro plochy,
dekorace a podklady s TMAVÝM textem,
2. sémantické proměnné parenta (--primary-green, --gray-900, ...) =
hodnoty, na kterých text projde kontrastem.
Změřené hodnoty (skript: WCAG relativní luminance) jsou u každé barvy.
Když budeš měnit odstín, PŘEPOČÍTEJ kontrast, neodhaduj ho od oka.
========================================================================== */
:root {
/* Parent scale --space-* přeskakuje 5 (má 1,2,3,4,6,8…). Doplníme ho (4px
krok → 20px), jinak jsou VŠECHNY deklarace `var(--space-5)` neplatné a
spadnou na 0 (past 2026-07-24: nulový padding panelu dotací v patičce). */
--space-5: 20px;
/* --- Brandové barvy dle manuálu (dekorace, podklady s tmavým textem) --- */
--questo-mandarinka: #F7AB59; /* grafit 4.98:1 OK */
--questo-pomeranc: #EF7A3B; /* jen plochy bez textu */
--questo-limetka: #C6D75E; /* grafit 6.06:1 OK */
--questo-morska: #38B6AB; /* jen plochy bez textu (na bílé jen 2.49:1!) */
--questo-blankyt: #8AB5E1;
--questo-safir: #6071B5; /* bílý text 4.64:1 OK */
--questo-lila: #BC9AC8;
--questo-koral: #F8C0BD; /* grafit 6.05:1 OK */
--questo-grafit: #464543; /* bílý text 9.58:1 OK */
/* Ztmavené varianty pro místa, kde na barvě LEŽÍ TEXT. Stejný odstín,
jen tmavší — brand zůstává čitelný, kontrast projde. */
/* Safírová #6071B5 (přání klienta 2026-07-24) — sjednoceno s barvou fontu.
Řídí přes --primary-green tlačítka, hlavičky tabulek, ikonky/wrappery,
alert lištu i další „primary" plochy s bílým textem (4.68:1 = WCAG OK). */
--questo-pomeranc-text: #6071B5;
--questo-pomeranc-hover: #4D5A91; /* tmavší Safírová pro hover, bílý text OK */
/* Barva fontu (nadpisy + textové akcenty) = Safírová #6071B5 z manuálu.
Jediná barva palety (kromě grafitu), která jako text na bílé PROJDE
WCAG 2.1 AA (4.68:1). Nahradila nevyhovující Mořskou #38B6AB (2.49:1). */
--questo-morska-text: #6071B5;
/* --- Písmo — parent používá pro vše --font-sans; nadpisy přebíráme níž --- */
--font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Baloo 2', 'Quicksand', var(--font-sans);
/* --- Sémantické proměnné parenta ---
POZOR: --primary-green nese v parentu bílý text (tlačítka, odznaky),
proto sem patří ztmavená Pomeranč, ne brandová. */
--primary-green: var(--questo-pomeranc-text);
--primary-green-light: var(--questo-mandarinka);
--primary-green-dark: var(--questo-pomeranc-hover);
--primary-light: var(--questo-koral);
/* POZOR: --gray-900 NENÍ jen barva nadpisů — parent jím obarvuje text
v a POZADÍ PATIČKY (45 použití). Brandová barva sem nepatří,
jinak by web měl tyrkysový text a světlou patičku se světlým textem.
Nadpisy se řeší samostatným pravidlem níž. */
--gray-900: var(--questo-grafit); /* na bílé 9.58:1 */
--gray-600: #6B6A66; /* sekundární text, na bílé 5.41:1 */
/* --- Akcentní --- */
--accent-yellow: var(--questo-limetka);
--info-blue: var(--questo-blankyt);
--success-green: var(--questo-lila);
/* Zaoblení — hravější než Žákovská (parent: 4/8/12/16px). Přes proměnné
parenta se to propíše samo do všech komponent (tlačítka, karty,
hub-karty, hlavička loga, ...), beze změny jediného selectoru. */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 26px;
}
/* Nadpisy hravým zaobleným písmem. Parent nemá vlastní proměnnou pro nadpisy
(vše jede přes --font-sans), proto se přebíjí přímo na elementech. */
h1, h2, h3, h4, h5, h6,
.site-title,
.hero-title {
font-family: var(--font-heading);
letter-spacing: -0.01em;
}
/* Nadpisy v brandové mořské zeleni — ztmavené, aby prošly kontrastem i u
nejmenších úrovní (h5 20px / h6 18px se nepočítají jako „velký text").
Nízká specificita (0,0,1) je záměr: parent si vlastními pravidly obarvuje
nadpisy na tmavých podkladech (.footer-nav-column h3 = bílá, hero) a ta
musí vyhrát — mořská zeleň na tmavé patičce by měla 1.86:1. */
h1, h2, h3, h4, h5, h6 {
color: var(--questo-morska-text);
}
/* ==========================================================================
Landing stránky větví — page-skola.php, page-skolka.php
(.questo-branch-page = společná třída obou šablon)
Matematický symbol (+ × = − ÷ >) jako drobný brandový akcent — NÁVRH,
zatím jen textový znak v barevném "štítku" (žádné nové obrázkové assety).
Případné rozšíření na kapkové/listové tvary (větší grafický zásah, např.
tvar .hub-card-icon napříč celým webem) řešit samostatně s grafikem.
========================================================================== */
.questo-symbol {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-bottom: var(--space-3);
border-radius: var(--radius-md);
background-color: var(--primary-light);
/* Grafit, ne barevný odstín: symbol je 22px znak = normální text, takže
potřebuje 4.5:1. Na Korálové dává grafit 6.05:1 (Safírová jen 2.93:1). */
color: var(--questo-grafit);
font-family: var(--font-heading);
font-size: 22px;
font-weight: 700;
}
.questo-symbol-grid .service-item {
display: flex;
flex-direction: column;
}
/* CTA box s formulářem přihlášky (shortcode [zs_prihlaska]) — vizuálně
sjednocený s .card, jen omezená šířka ať formulář nepůsobí rozlezle na
široké obrazovce. */
.questo-pr-card .card-body {
max-width: 640px;
margin: 0;
}
/* Karty „Připravené prostředí" / „Věkově smíšená třída" apod. — parent má
pozadí --gray-50, které na světlé stránce skoro splývá. Viditelnější tón. */
.service-item {
background: var(--gray-100);
border: 1px solid var(--gray-200);
}
/* Vnitřní stránky (mimo homepage) — jen malá rezerva nahoře. Kulaté logo
přesahuje z hlavičky dolů a bez toho se lepí na drobečkovou navigaci. */
.site-main:not(.homepage) {
padding-top: var(--space-3);
}
.questo-pr-note {
color: var(--gray-600);
font-size: 14px;
margin-bottom: var(--space-4);
}
/* ==========================================================================
Přebití natvrdo zapsaných barev v parent CSS.
Pár míst v parent style.css nejede přes proměnné vůbec (viz komentář
v hlavičce souboru výše) — zbytek tématu se sám přebarvil zremapovanými
proměnnými, tahle 3 místa ne. Beze zásahu by na fotce v hero sekci
i v ikonkách fotogalerie/lightboxu bliklo tmavě zelenou Žákovské
(#1F5D3F). Detaily u každého pravidla níž.
========================================================================== */
/* .hero-overlay: gradient natvrdo na rgba(31, 93, 63, *) = #1F5D3F, přesně
parent --primary-green-dark před remapem. Nahrazeno Teplým grafitem
(stejná role jako --gray-600 v Questo paletě) — na fotce dává bílému
textu ještě lepší kontrast než původní zelená (9.58:1 vs. 7.79:1) a
nekoliduje s žádnou barvou Questo palety. Zůstává neutrální i až
Questo dostane vlastní hero fotku místo dočasné budovy Žákovské. */
/* ŽÁDNÝ závoj přes video (17. 8. 2026).
Do té doby ležel přes celý hero bílý přechod, aby na něm byl čitelný tmavý
text. Kottová se na schůzce 6. 8. ptala „to naše video musí být takhle
zamlžený?" a Braňo Blaas to v mailu 7. 8. pojmenoval natvrdo: „zabělené
obrázky nejsou hezké, dejte pod texty bílý pruh." Přiložil k tomu ukázku
youtubového náhledu, kde černý text sedí na plném bílém bloku přes ostrou
fotku. Tudy jdeme: video hraje v plné barvě a čitelnost řeší blok pod
textem, ne clona přes celý záběr.
Kontrast je tím lepší než předtím: grafit na plné bílé je 9.58:1, zatímco
na přechodu (0.45 bílé vpravo) klesal pod hranici WCAG kdykoli pod textem
probleskl světlý záběr. */
.hero-overlay {
background: none;
}
/* Nadpis: bílý blok kolem KAŽDÉHO řádku, ne jeden obdélník přes celý blok.
Dělá to display:inline + box-decoration-break:clone (bez clone by prostřední
řádky přišly o vodorovné odsazení). Inline prvek ignoruje svislé okraje,
takže mezeru pod nadpisem dodává margin-top perexu níž. */
.hero-content h1 {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0.1em 0.3em;
/* Řádkování dělá mezeru mezi bílými bloky. Níž by se slily v jeden. */
line-height: 1.42;
background: var(--white);
color: var(--questo-grafit);
text-shadow: none;
/* Bez stínu: bílé bloky leží těsně na sobě a stín předchozího na ně padal
jako šedý pruh — vypadalo to, že mají různou barvu (Marek 25. 8.). */
box-shadow: none;
/* Zaoblené jen NAHOŘE. Řádky se překrývají a pod posledním navazuje adresa,
takže spodní rohy musí zůstat ostré — jinak vznikne vlevo „zobáček"
ze dvou protilehlých oblouků a vpravo úskok (Marek 25. 8.). */
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Štítek „Montessori" musí být blok, jinak by se s inline nadpisem slil na
jeden řádek (oba by spadly do téhož anonymního bloku).
Spodní polovinou je zapuštěný do bílého bloku nadpisu (Marek 25. 8.) —
záporný spodní okraj = polovina jeho výšky, z-index ho drží nad pozadím. */
.hero-eyebrow {
display: block;
width: fit-content;
position: relative;
z-index: 2;
/* Polovina výšky štítku (33 px) končí přes bílý blok nadpisu. Hodnota není
-50 % jeho výšky, protože bílý blok začíná výš než text — řídí ho
řádkování nadpisu. Doměřeno na živé stránce. */
margin-bottom: -5px;
}
/* Adresa: jeden bílý blok široký přesně na text (je to vždy jeden řádek).
Blok zároveň odděluje nadpis od tlačítek. */
.hero-perex {
display: block;
width: fit-content;
/* Navazuje přímo na nadpis, bez mezery a bez stínu — jeden souvislý bílý
blok se stejnou barvou (Marek 25. 8.). */
margin-top: 0;
/* Vodorovné odsazení musí v pixelech odpovídat nadpisu (0.3em z 55 px ≈ 16,5 px),
jinak je adresa užší a vpravo vznikne úskok. Adresa má menší písmo, takže
v em vychází jiné číslo (Marek 25. 8.). */
padding: 0.25em 0.9em;
background: var(--white);
color: var(--questo-grafit);
text-shadow: none;
box-shadow: none;
/* Zaoblená jen DOLE — nahoře navazuje na poslední řádek nadpisu a tvoří
s ním jeden souvislý blok. */
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* Hero tlačítka na světlém pozadí: primární oranžové, ostatní grafitový obrys. */
.hero .btn-white {
background-color: var(--questo-pomeranc-text);
color: #fff;
border-color: var(--questo-pomeranc-text);
}
.hero .btn-white:hover {
background-color: var(--questo-pomeranc-hover);
border-color: var(--questo-pomeranc-hover);
color: #fff;
}
/* Druhé tlačítko mělo průhledné pozadí, což fungovalo jen dokud přes video
ležel bílý závoj. Bez něj by grafitový text i obrys plavaly přímo na
pohyblivém záběru a byly by nečitelné, proto plná bílá plocha. */
.hero .btn-white-outline {
background-color: var(--white);
/* Text i obrys v brandové Safírové místo grafitu (Marek 25. 8.) — tlačítko
tak drží stejnou barvu jako sousední „Přihlásit dítě". */
color: var(--primary-green);
border-color: var(--primary-green);
}
.hero .btn-white-outline:hover {
background-color: var(--primary-green);
border-color: var(--primary-green);
color: #fff;
}
/* Patička: logo menší (−60 %, z ~220 px na ~88 px) a název POD logem. */
.footer-logo {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.footer-logo picture {
display: block;
width: 88px;
}
.footer-logo .custom-logo {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.footer-logo {
align-items: center;
text-align: center;
}
}
/* ===== Stránka Jídelna (tabulkový layout) ===== */
.questo-jidelna-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.questo-jidelna-section {
margin-bottom: var(--space-12);
}
.questo-jidelna-subtitle {
margin: var(--space-6) 0 var(--space-3);
color: var(--questo-morska-text);
/* stejně velké jako h2 „Jídelníček na tento týden" (font-scale.css: h2 = 41.4px / 700) */
font-size: 41.4px;
font-weight: 700;
line-height: 1.25;
}
/* Nadpis podsekce jídelníčku + tlačítko „Verze k tisku" na jednom řádku */
.questo-jidelna-subhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6); /* větší mezera, ať „Verze k tisku" není nalepené na nadpisu */
flex-wrap: wrap;
margin-bottom: var(--space-4);
scroll-margin-top: 96px; /* kotva se zastaví pod sticky hlavičkou */
}
.questo-jidelna-subhead .questo-jidelna-subtitle {
margin: 0;
}
/* Víc prostoru nad „Základní škola" — ať nadpis + „Verze k tisku"
nejsou nalepené na tabulce školky nad nimi. */
.questo-jidelna-subhead--spaced {
margin-top: var(--space-16);
}
@media (max-width: 768px) {
.questo-jidelna-subtitle {
font-size: 32.2px; /* = h2 na mobilu (font-scale.css) */
}
}
.questo-jidelna-table td.col-day {
white-space: nowrap;
}
.questo-menu-alergeny {
color: var(--gray-500);
font-size: 0.85em;
}
.questo-jidelna-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 768px) {
.questo-jidelna-info {
grid-template-columns: 1fr;
}
}
/* ===== Stránka O nás ===== */
.questo-onas-section {
margin-bottom: var(--space-12);
}
.questo-onas-lead {
font-size: 18px;
max-width: 780px;
margin-bottom: var(--space-8);
}
.questo-onas-quote {
border-left: 4px solid var(--questo-pomeranc-text);
padding: var(--space-1) 0 var(--space-1) var(--space-5);
margin: 0 0 var(--space-6);
}
.questo-onas-quote p {
font-family: var(--font-heading);
font-size: 22px;
font-style: italic;
color: var(--questo-morska-text);
margin-bottom: var(--space-2);
}
.questo-onas-quote cite {
color: var(--gray-500);
font-style: normal;
font-weight: 600;
}
/* Náš příběh — stručné body s tečkou v barvě značky */
.questo-onas-pribeh {
list-style: none;
margin: 0;
padding: 0;
}
.questo-onas-pribeh li {
position: relative;
padding-left: var(--space-6);
margin-bottom: var(--space-3);
line-height: 1.6;
}
.questo-onas-pribeh li::before {
content: "";
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--questo-pomeranc-text);
}
/* YouTube video o škole (16:9, responzivní) */
.questo-onas-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin-top: var(--space-6);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gray-100);
}
.questo-onas-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Vize + mise vedle sebe (na mobilu pod sebou) */
.questo-onas-vize-mise {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
.questo-onas-vize-mise .questo-onas-quote {
margin-bottom: 0;
}
@media (max-width: 768px) {
.questo-onas-vize-mise { grid-template-columns: 1fr; }
}
/* Odrážky „proč my" — se zaškrtávacím markerem v barvě značky */
.questo-onas-vyhody {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2) var(--space-6);
}
.questo-onas-vyhody li {
position: relative;
padding-left: var(--space-6);
line-height: 1.5;
}
.questo-onas-vyhody li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--questo-pomeranc-text);
}
@media (max-width: 768px) {
.questo-onas-vyhody { grid-template-columns: 1fr; }
}
.questo-onas-principy {
margin-top: var(--space-6);
}
.questo-onas-principle {
padding: var(--space-6);
}
.questo-onas-principle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--questo-mandarinka);
color: var(--questo-grafit);
margin-bottom: var(--space-3);
}
.questo-onas-principle h3 {
margin-bottom: var(--space-2);
font-size: 18px;
}
.questo-team-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* max 3 na řádek */
gap: var(--space-4);
}
@media (max-width: 900px) {
.questo-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.questo-team-grid { grid-template-columns: 1fr; }
}
.questo-team-card {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
}
.questo-team-avatar {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
font-family: var(--font-heading);
font-weight: 700;
font-size: 20px;
color: var(--questo-grafit);
}
/* Foto avatar (fotka místo iniciál) — kulatý ořez fotky */
.questo-team-avatar--photo {
object-fit: cover;
object-position: center top;
background: none;
}
/* Jednotný piktogram hlavy u osob bez fotky (přání Kottové) — světlý kruh
+ silueta hlavy v Safírové, ať sekce působí vizuálně uceleně. */
.questo-team-avatar--placeholder {
background: var(--gray-100);
}
.questo-team-avatar--placeholder svg {
width: 64%;
height: 64%;
fill: var(--questo-safir);
opacity: 0.9;
}
.questo-team-avatar--coral { background: var(--questo-koral); }
.questo-team-avatar--mandarin { background: var(--questo-mandarinka); }
.questo-team-avatar--lime { background: var(--questo-limetka); }
.questo-team-avatar--safir { background: var(--questo-safir); color: #fff; }
.questo-team-avatar--morska { background: var(--questo-morska); color: #fff; }
.questo-team-card__text {
display: flex;
flex-direction: column;
}
.questo-team-card__name {
font-size: 16px;
}
.questo-team-card__role {
font-size: 13px;
color: var(--gray-500);
}
/* ===== Stránka Kontakty (2 sloupce: obsah + sidebar) ===== */
/* Jednosloupcový layout — vše pod sebou (kontakty → mapy → jak se k nám dostanete) */
.questo-kontakty-single > .card,
.questo-kontakty-single > .questo-kontakt-maps-grid {
margin-bottom: var(--space-6);
}
/* Mapy obou budov vedle sebe (na mobilu pod sebou) */
.questo-kontakt-maps-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.questo-kontakt-school__title {
font-size: 24px;
margin: 0 0 var(--space-4);
color: var(--questo-morska-text);
}
.questo-kontakt-list {
list-style: none;
margin: 0;
padding: 0;
}
.questo-kontakt-list li {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.questo-kontakt-list svg {
color: var(--questo-pomeranc-text);
flex-shrink: 0;
}
.questo-kontakt-group-title {
font-size: 22px;
margin: var(--space-8) 0 var(--space-4);
color: var(--questo-morska-text);
}
/* Sidebar */
.questo-kontakty-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-6);
position: sticky;
top: 100px;
}
.questo-kontakt-map-card {
overflow: hidden;
}
.questo-kontakt-map-label {
padding: var(--space-4) var(--space-4) var(--space-3);
}
.questo-kontakt-map-label strong {
display: block;
color: var(--questo-morska-text);
}
.questo-kontakt-map-label span {
font-size: 13px;
color: var(--gray-500);
}
.questo-kontakt-map iframe {
display: block;
}
.questo-kontakt-map-cta {
padding: var(--space-4);
}
.questo-kontakt-travel {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
}
.questo-kontakt-travel li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) 0;
border-top: 1px solid var(--gray-100);
}
.questo-kontakt-travel li:first-child {
border-top: none;
}
.questo-kontakt-travel svg {
color: var(--questo-pomeranc-text);
flex-shrink: 0;
margin-top: 2px;
}
.questo-kontakt-travel strong {
display: block;
}
.questo-kontakt-travel span {
color: var(--gray-600);
font-size: 14px;
}
@media (max-width: 768px) {
.questo-kontakt-maps-grid {
grid-template-columns: 1fr;
}
}
/* ===== Stránka Volný čas ===== */
.questo-volnycas-section {
margin-bottom: var(--space-8);
}
/* Questo zatím nemá vlastní fotku budovy, takže se přes filtr
zs_preload_hero_sources žádná nevykresluje (parent by jinak ukazoval
budovu Žákovské). Bez fotky by ale zůstal jen poloprůhledný overlay nad
bílou stránkou a bílý nadpis by v horní části zmizel — proto hero dostane
plnou brandovou plochu. Až dorazí fotka školy, stačí filtr vrátit zpět a
toto pravidlo smazat. */
.hero {
background: linear-gradient(135deg, var(--questo-morska-text) 0%, var(--questo-safir) 100%);
min-height: 660px;
}
/* Rezerva pod obsahem hero (var(--space-16)) tu byla jen proto, aby přesahující
věkové karty nezakryly tlačítka. Od 17. 8. 2026 karty sedí až pod hero, takže
rezerva zbyla jako prázdný pruh videa a obsah kvůli ní seděl mimo střed. */
@media (max-width: 768px) {
.hero {
min-height: 560px;
}
}
/* Hero obsah zarovnaný vlevo (přání klienta) — parent má na střed.
margin-left:0 zruší centrování bloku max-width:680px, ať sedí u levého
okraje kontejneru; tlačítka a text taky doleva. */
.hero-content {
margin-left: 0;
text-align: left;
}
.hero-actions {
justify-content: flex-start;
}
/* .alert-info / .alert-warning: pozadí i text natvrdo na jantarovou
(#FEF3C7/#92400E/#D97706). Není to zelená Žákovské, ale není to ani
Questo paleta — pro značkovou konzistenci přebarveno na Mandarinku
(pozadí) + Teplý grafit (text, kontrast 4.98:1 — vyhovuje WCAG AA
4.5:1) + Pomeranč (ikona/okraj). Používá se sitewide (banner
zs_display_alert() nahoře na každé stránce), proto v hlavním
style.css, ne jen na homepage. */
.alert-info,
.alert-warning {
background-color: var(--primary-green); /* teal #2B7971 (přání klienta) */
color: #fff;
border-bottom-color: var(--primary-green-dark);
}
.alert-info .alert-icon svg,
.alert-warning .alert-icon svg {
color: #fff;
}
/* odkaz „Více informací" + křížek v liště — bílé na teal */
.alert-info a,
.alert-warning a {
color: #fff;
text-decoration: underline;
}
/* Ikonky fotogalerie (.album-nav) a lightboxu (.glightbox-container) mají
stroke natvrdo na #1F5D3F (Žákovská tmavě zelená) — přebito na Questo
tmavý akcent (Safírová). Druhé pravidlo má v parentu !important, jinak
by nešlo přebít. */
.album-nav svg polyline {
stroke: var(--primary-green-dark);
}
.glightbox-container .gclose svg line,
.glightbox-container .gclose svg polyline,
.glightbox-container .gnext svg line,
.glightbox-container .gnext svg polyline,
.glightbox-container .gprev svg line,
.glightbox-container .gprev svg polyline {
stroke: var(--primary-green-dark) !important;
}
/* ==========================================================================
Síla písma
Nunito Sans i Quicksand působí v běžném řezu (400) tenčeji než Inter
z parent tématu. Ostatní řezy posouvá o stupeň výš generovaný
assets/css/font-scale.css, ale tělo textu parent vůbec nedeklaruje
(dědí se 400), takže se musí přidat tady ručně.
========================================================================== */
body {
font-weight: 500;
}
/* Sekundární/drobný text ať se nesleje s běžným — o stupeň níž než tělo,
ale pořád silnější než původní 400. */
.text-muted,
.hero-perex {
font-weight: 450;
}
/* ==========================================================================
Fotogalerie (child šablona page-fotogalerie.php)
Dvě věci, které je potřeba dořešit tady:
1. Téma drží obsah stránky na max-width 800px (pohodlné čtení textu) —
u galerie to ale nechceme, fotky mají využít celou šířku.
2. WordPress na webu nenačítá block-library CSS, takže wp-block-gallery
nemá vlastní mřížku. Děláme si ji sami (a je to i lepší: responzivní
auto-fill místo pevného počtu sloupců).
========================================================================== */
.questo-gallery-page .page-content {
max-width: none;
}
.questo-gallery .wp-block-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
margin: 0 0 var(--space-12);
}
/* Figure musí vyplnit buňku mřížky.
POZOR na specificitu: WordPress vkládá blokové CSS INLINE (ne jako ,
proto ho nenajdeš mezi stylesheety) a schválně používá trik
`figure.wp-block-image:not(#individual-image)` — `:not(#id)` přidá váhu ID,
takže běžné pravidlo se třemi třídami prohraje. Proto stejný tvar + jedna
třída navíc, ať naše mřížka vyhraje. */
.questo-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
.questo-gallery .wp-block-gallery .wp-block-image,
.questo-gallery .wp-block-image {
display: block;
width: 100%;
max-width: none;
margin: 0;
flex-grow: 0;
}
.questo-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img,
.questo-gallery .wp-block-image img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius-md);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.questo-gallery a.glightbox {
display: block;
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
}
.questo-gallery a.glightbox:hover img,
.questo-gallery a.glightbox:focus-visible img {
transform: scale(1.03);
box-shadow: var(--shadow-md);
}
.questo-gallery a.glightbox:focus-visible {
outline: 3px solid var(--primary-green);
outline-offset: 3px;
}
.questo-gallery h2 {
margin-top: var(--space-8);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--questo-koral);
}
@media (prefers-reduced-motion: reduce) {
.questo-gallery .wp-block-image img {
transition: none;
}
.questo-gallery a.glightbox:hover img {
transform: none;
}
}
/* ==========================================================================
Logo Questo — kruhové (International Montessori School Humpolec).
Parent dává custom_logo 48px se zaoblenými rohy; naše je kruhová pečeť,
tak ho zakulatíme a dáme o kousek větší, ať je „QUESTO SCHOOL" čitelné.
========================================================================== */
/* Logo: kruh, větší a čitelnější, blíž k levému okraji a lehce PŘESAHUJE pod
spodní hranu hlavičky do webu (přání klienta). Layout item je
(WebP delivery), takže velikost patří NA NĚJ — na img sráží max-width:100%
na šířku obalu. Přesah dolů = position:relative + top; margin-bottom drží
výšku hlavičky kompaktní. */
.site-header .header-content {
min-height: 64px;
}
.site-header .header-logo picture {
flex-shrink: 0;
display: block;
width: 92px;
height: 92px;
margin-left: -6px;
margin-top: -14px;
margin-bottom: -14px;
position: relative;
top: 9px;
z-index: 3;
}
/* Na mobilu je hlavička nižší → logo tam zmenšíme, ať nepřesahuje moc. */
@media (max-width: 992px) {
.site-header .header-logo picture {
width: 74px;
height: 74px;
margin-top: -14px;
margin-bottom: -14px;
top: 6px;
}
}
.site-header .custom-logo {
width: 100%;
height: 100%;
max-width: none;
border-radius: 50%;
object-fit: contain;
}
/* Štítek „Montessori" nad hero nadpisem — na světlém hero plná oranžová
pilulka s bílým textem (pop na světlém pozadí). Odsazení shora posouvá
celý blok hero obsahu níž, aby štítek nezačínal hned pod hlavičkou
(Marek 25. 8.). */
.hero-eyebrow {
background: var(--questo-pomeranc-text);
color: #fff;
margin-top: 23px;
/* Bez stínu — zapuštěný do bílého bloku by kolem sebe dělal šedý flek. */
box-shadow: none;
}
/* 2. řádek podtitulu = „Montessori škola" — oranžová (ztmavená Pomeranč,
kontrast 4.63:1), ať je na první pohled jasné, že nejde o státní školu. */
.school-subtitle-2 {
font-weight: 700;
color: var(--questo-pomeranc-text);
}
/* ==========================================================================
Tabulky rozvrhu (/rozvrhy/) — sjednocené se stylem jídelníčku (organizace-
table): zelená hlavička (nahoře zaoblená, dole ostrá), bez rámu, linky mezi
řádky + lehký striping. WP nenačítá blokové CSS, tak stylujeme sami.
Na mobilu vodorovný scroll (širší rozvrhy mají 7–8 sloupců).
========================================================================== */
/* Nadpisy trojročí bez linky pod textem — mezi nadpisem a barevnou hlavičkou
tabulky působila jako druhý oddělovač na pár pixelech (Marek 25. 8.). */
.questo-rozvrh-sekce h2,
body.page .page-content h2 {
border-bottom: none;
padding-bottom: 0;
}
.rozvrh-tabulka {
margin: 0 0 var(--space-8);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* Rámeček a zaoblení jako u .card, do které je zabalený přehled kroužků na
/volny-cas/ — rozvrhy ho neměly a působily proti němu „nedodělaně"
(Marek 25. 8.). Kartu sem nedáváme kvůli overflow: hidden, které by na
mobilu zabilo vodorovný posuv tabulky. */
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
}
.rozvrh-tabulka table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
/* Velikost písma se dědí z body, aby tabulka vypadala stejně jako přehled
kroužků na /volny-cas/ (.organizace-table). Natvrdo zadaných 15 px bylo
proti zbytku webu drobné a font-scale.css je nezvětšil (Marek 25. 8.). */
}
.rozvrh-tabulka th,
.rozvrh-tabulka td {
padding: var(--space-3) var(--space-4);
text-align: center;
vertical-align: middle;
border-bottom: 1px solid var(--gray-200);
}
.rozvrh-tabulka thead th {
background: var(--primary-green);
color: #fff;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
/* Stejná velikost jako hlavička tabulky kroužků na /volny-cas/ — tam vychází
z parent pravidla 12 px, které font-scale.css zvětší na 13,8 px. */
font-size: 13.8px;
}
.rozvrh-tabulka thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.rozvrh-tabulka thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }
.rozvrh-tabulka tbody th {
font-weight: 700;
text-align: left;
white-space: nowrap;
color: var(--questo-morska-text);
}
.rozvrh-tabulka tbody tr:nth-child(even) {
background: var(--gray-50);
}
.rozvrh-tabulka tbody tr:hover {
background: var(--gray-100);
}
/* Spodní rohy dorovnané k hlavičce — bez nich tabulka dole „uřízne" (Marek 25. 8.).
Poloměr musí sedět na buňkách, ne na
: border-collapse rohy na tabulce
ignoruje. */
.rozvrh-tabulka tbody tr:last-child th:first-child { border-radius: 0 0 0 var(--radius-md); }
.rozvrh-tabulka tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius-md) 0; }
.rozvrh-tabulka tbody tr:last-child th,
.rozvrh-tabulka tbody tr:last-child td {
border-bottom: none;
}
/* /rozvrhy/ — obsah přes celý standardní kontejner (jako /organizace/), NE
edge-to-edge. Kontejner se nechává na výchozí max-width; jen se ruší 800px
cap na .page-content, aby tabulky vyplnily celou šířku kontejneru. Úvodní
odstavce zůstávají v čitelné šířce. */
.questo-rozvrhy-page .page-content {
max-width: none;
}
.questo-rozvrhy-page .page-content > p {
max-width: 820px;
}
.questo-rozvrhy-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.questo-rozvrhy-header h1 {
margin: 0;
}
/* ==========================================================================
Jídelníček (/jidelna/, page-jidelna.php) — karty dnů se svačinami a obědem.
========================================================================== */
.questo-menu-branch { margin-bottom: var(--space-12); }
.questo-menu-days {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
.questo-menu-day {
padding: var(--space-4) var(--space-5);
}
.questo-menu-day__name {
margin: 0 0 var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--questo-koral);
color: var(--questo-morska-text);
}
.questo-menu-day__date { font-weight: 400; color: var(--gray-600); font-size: 0.85em; }
.questo-menu-meal { margin: var(--space-2) 0; line-height: 1.45; }
.questo-menu-meal__label {
display: inline-block;
min-width: 62px;
font-weight: 700;
color: var(--primary-green);
}
.questo-menu-alergeny { color: var(--gray-600); font-size: 0.88em; }
.questo-menu-note { margin-top: var(--space-4); font-size: 14px; }
/* Hlavička — font navigace 16 px.
Prefix .site-header dává vyšší specificitu než font-scale.css (které se
načítá až za tímto souborem a jinak by velikost přebilo). */
.site-header .main-nav a { font-size: 17.6px; font-family: var(--font-heading); } /* +10 % */
.site-header .header-actions .btn-sm { font-size: 14.5px; }
/* Baloo 2 (nadpisový font) i v hlavičce — navigace + název školy */
.site-header .school-name { font-family: var(--font-heading); }
/* Sjednocení fontu/řezu tlačítek (hlavička, hero, obsah) s navigací a nadpisy
→ Baloo 2. Váhu (600) řídí font-scale.css stejně jako navigaci, takže řez
sedí. Text webu zůstává Nunito Sans. */
.btn { font-family: var(--font-heading); }
/* Homepage — hlavička je NEPRŮHLEDNĚ BÍLÁ a hero na ni přímo navazuje.
(Marek 25. 8.: „záhlaví nedělej průhledné, udělej ho čistě bílé".)
Dřív tu byla poloprůhledná hlavička a `.home .hero { margin-top: -81px }`,
takže video vyjelo pod navigaci. Mělo to dvě vady: horní část záběru byla
trvale schovaná pod hlavičkou a hodnota -81px byla natvrdo výška hlavičky
BEZ oznamovací lišty. Jakmile se lišta zapnula, `body` dostalo padding 122px,
ale hero se pořád posouvalo jen o 81px → mezi hlavičkou a videem zůstala
mezera 41px a záběr se rozjel.
Řešení: žádný záporný margin. Hero začíná přesně tam, kde končí hlavička,
protože odsazení řeší `body` (81px, s lištou 122px). Funguje to samo v obou
stavech a video je vidět celé. */
.home .site-header {
background-color: var(--white);
border-bottom: none;
}
.home .hero {
margin-top: 0;
}
/* Patička — pozadí Safírová #6071B5 (přání klienta 2026-07-24, sjednoceno
s brandem). Tmavší modrá unese bílý text (4.69:1 = WCAG AA OK). */
.site-footer {
background-color: #6071B5;
color: #fff;
}
.site-footer a,
.site-footer .school-name,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer strong,
.site-footer svg,
.footer-legal p,
.footer-legal a {
color: #fff;
}
.site-footer a:hover,
.footer-legal a:hover {
color: #fff;
text-decoration: underline;
}
.footer-bottom {
border-top-color: rgba(255, 255, 255, 0.22);
}
/* Dekorativní brandové prvky po okrajích stránky (viz zs_questo_deco_edges
v functions.php). Poloprůhledný OVERLAY nad obsahem (opacity 50 % → obsah
přes prvky prosvítá, proto jsou vidět i na husté homepage). position:
absolute + body{position:relative} → „visí" na svém místě a scrollují s
obsahem. Prostorový efekt = velké/malé prvky, každý pomalu plave. */
body {
position: relative;
}
/* Dekorace smí být JEN v prázdném místě vedle obsahu (Marek 5. 8.: na užších
monitorech přetékala přes text a překrývala ho). Obsah drží .container na
max-width 1440px, takže volné místo na každé straně je (100vw - 1440px) / 2.
Prvky bydlí ve dvou pruzích právě téhle šířky u krajů okna a dovnitř se
nedostanou — pruh má overflow:hidden jako tvrdou pojistku. */
:root {
--questo-gutter: max(0px, calc((100vw - 1440px) / 2));
}
.questo-deco {
position: absolute;
inset: 0;
z-index: 3; /* nad obsahem (.site-main z-index 1), pod hlavičkou (50) */
pointer-events: none;
overflow: hidden;
display: none; /* zapíná se až v media query níž, když je kam */
}
.questo-deco__side {
position: absolute;
top: 0;
bottom: 0;
width: var(--questo-gutter);
overflow: hidden;
}
.questo-deco__side--left { left: 0; }
.questo-deco__side--right { right: 0; }
.questo-deco__item {
position: absolute;
opacity: 0.5;
animation-name: questo-float;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
}
.questo-deco__shape {
display: block;
/* Nikdy širší než pruh (24px rezerva), jinak si zachová svou velikost. */
width: min(var(--size, 96px), calc(var(--questo-gutter) - 24px));
height: min(var(--size, 96px), calc(var(--questo-gutter) - 24px));
}
.questo-deco__shape svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
}
.questo-deco__drop {
display: block;
width: 100%;
height: 100%;
background: currentColor;
border-radius: 50% 50% 50% 0;
}
/* Pomalé „plavání" — item se posune o svou amplitudu (--fl) a zpět. Rotace
tvaru je na vnitřním .questo-deco__shape, takže se s animací nebije. */
@keyframes questo-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(var(--fl, -16px)); }
}
/* Obsah pod dekorací (dekorace je overlay z-index 3). */
.site-main,
.site-footer {
position: relative;
z-index: 1;
}
/* Respektuj vypnuté animace v OS. */
@media (prefers-reduced-motion: reduce) {
.questo-deco__item { animation: none; }
}
/* Dekorace se zapíná teprve tehdy, když je vedle obsahu opravdu volné místo:
1440px obsah + 2×130px pruh = 1700px. Pod tím zůstává skrytá (výchozí stav),
takže na noteboocích a mobilech nemá jak zasáhnout do textu. */
@media (min-width: 1700px) {
.questo-deco { display: block; }
}
/* ── Přepínač Škola / Školka na homepage ───────────────────────────────
Marek 5. 8.: přepínač měl kolem sebe zbytečně moc místa, splýval
s rozcestníkem nad sebou a nebylo poznat, která větev je zapnutá.
Řešení: užší sekce (parent .section-sm dává space-12 = 48px nahoře
i dole), vlastní jemně safírový pruh s linkami, aby se vizuálně
oddělil od bílého rozcestníku, a aktivní tlačítko v Safírové. */
/* Homepage má JEDNO pozadí odshora dolů, žádné pruhy střídajících se odstínů
(Marek 5. 8.). Od 6. 8. je to po dohodě s Kottovou čistá bílá — sekce
zůstávají průhledné včetně té, které parent dává vlastní šedou
(.bg-gray-50). Hero má vlastní video/gradient, ten se nepřebíjí.
Karty mají 1px rámeček, takže se na bílé neztratí. */
.home .site-main {
background: #fff;
}
.home .site-main > section:not(.hero),
.home .site-main > section.bg-gray-50 {
background: transparent;
}
.branch-switch-section {
/* Nahoře víc místa než dole — tlačítka tak nelepí na bílou sekci nad
pruhem a je vidět, že patří k obsahu pod sebou (Marek 5. 8.). */
padding-top: var(--space-12);
padding-bottom: var(--space-6);
margin-bottom: 0;
}
/* Vysvětlivka potřebuje odstup od tlačítek, ať nesplývá s popiskem přepínače. */
.branch-switch-section .branch-switch-hint {
margin-top: var(--space-5);
}
/* Pilulka přepínače na barevném pruhu — bílá, ne šedá, ať je vidět. */
.branch-switch-section .zs-branch-switch {
background: #fff;
box-shadow: inset 0 0 0 1px rgba(96, 113, 181, 0.18);
}
/* Aktivní větev: bílý text na Safírové = 4,68:1 (WCAG AA). Ikona dědí
barvu textu (stroke="currentColor"), takže se přebarví s ním. */
.branch-switch-section .zs-branch-switch__btn[aria-selected="true"] {
background: var(--questo-safir);
color: #fff;
box-shadow: 0 4px 12px rgba(96, 113, 181, 0.35);
}
.branch-switch-section .zs-branch-switch__btn:hover {
color: var(--questo-safir);
}
.branch-switch-section .zs-branch-switch__btn[aria-selected="true"]:hover {
color: #fff;
}
.branch-switch-section .zs-branch-switch__btn:focus-visible {
outline-color: var(--questo-safir);
}
/* ── Rozcestníky (hub) ─────────────────────────────────────────────────
Školka má dvě řady dlaždic: tři hlavní (Mateřská škola / Sportovní
aktivity / Přihláška, přesně jak chtěla Kottová 23. 7.) a pod nimi
lehčí řadu provozních odkazů, které si vyžádala taky. Ta druhá řada je
vizuálně tišší, aby hlavní trojici nepřebila. */
.hub-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* Tři sloupce, ne auto-fit: šest odkazů se pak srovná do dvou plných řad
místo 5 + 1 osiřelého. */
.hub-grid--compact {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) {
.hub-grid--compact {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.hub-grid--compact {
grid-template-columns: 1fr;
}
}
.hub-grid--compact .hub-card {
padding: var(--space-4) var(--space-5);
}
.hub-grid--compact .hub-card h3 {
font-size: 1.05rem;
margin-bottom: var(--space-2);
}
.hub-grid--compact .hub-card p {
font-size: 0.92rem;
}
.hub-grid--compact .hub-card-icon {
width: 44px;
height: 44px;
margin-bottom: var(--space-3);
}
.hub-grid--compact .hub-card-icon svg {
width: 22px;
height: 22px;
}
@media (max-width: 700px) {
.hub-grid-3 {
grid-template-columns: 1fr;
}
}
/* Rozvrhy: hláška pro návštěvníky, dokud nejsou schválené (option
zs_questo_rozvrhy_final), a upozornění pro přihlášenou školu. */
.questo-rozvrhy-pending {
background: var(--gray-50);
border-left: 4px solid var(--primary-green);
border-radius: var(--radius-md);
padding: var(--space-6);
max-width: 720px;
}
.questo-rozvrhy-pending h2 {
margin-top: 0;
margin-bottom: var(--space-3);
}
.questo-rozvrhy-pending p {
margin-bottom: var(--space-3);
}
.questo-rozvrhy-draft-note {
background: #fdf6e3;
border: 1px solid #f0d9a0;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
font-size: 0.95rem;
margin-bottom: var(--space-5);
}
.questo-rozvrh-sekce {
margin-bottom: var(--space-8);
}
.questo-rozvrh-sekce__akce {
margin-top: var(--space-3);
}
/* Stránka Sportovní aktivity v MŠ, dokud nedorazí tabulka od školy. */
.questo-sport-pending {
background: var(--gray-50);
border-left: 4px solid var(--primary-green);
border-radius: var(--radius-md);
padding: var(--space-6);
max-width: 720px;
}
.questo-sport-pending h2 {
margin-top: 0;
margin-bottom: var(--space-3);
}
.questo-sport-pending p {
margin-bottom: var(--space-3);
}
.questo-sport-pending .btn {
margin-top: var(--space-2);
}
/* ── Sekce Spolupráce a podpora (OP JAK / EU publicita) ───────────────── */
.questo-eu-banner img {
display: block;
width: 100%;
max-width: 900px;
height: auto;
margin: 0 auto var(--space-5);
border-radius: var(--radius-md);
}
.questo-eu-lead {
max-width: 860px;
margin: 0 auto var(--space-5);
font-size: 1.08rem;
font-weight: 600;
color: var(--questo-morska-text);
text-align: center;
}
.questo-eu-temata {
margin: var(--space-2) 0 0;
padding-left: 1.25rem;
line-height: 1.8;
}
.questo-eu-temata li { margin-bottom: 0.35rem; }
.questo-eu-poster {
margin: var(--space-6) auto 0;
text-align: center;
}
.questo-eu-poster img {
display: block;
width: 100%;
max-width: 460px;
height: auto;
margin: 0 auto;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: var(--radius-md);
transition: transform 0.2s ease;
}
.questo-eu-poster a:hover img { transform: scale(1.02); }
.questo-eu-poster figcaption {
margin-top: var(--space-2);
font-size: 0.9rem;
color: var(--gray-500, #6b7280);
}
/* ── Loga dotací v patičce (bílý panel na Safírové patičce) ───────────── */
.questo-footer-dotace {
margin: var(--space-5) 0 var(--space-4);
}
.questo-footer-dotace__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4) var(--space-6);
background: #fff;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
}
.questo-footer-dotace__text p {
margin: 0 0 0.25rem;
color: #1a1a1a;
font-weight: 600;
}
.questo-footer-dotace__text a {
color: var(--questo-morska-text);
font-weight: 700;
text-decoration: none;
}
.questo-footer-dotace__text a:hover { text-decoration: underline; }
.questo-footer-dotace__loga {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
}
.questo-footer-dotace__loga img {
height: 46px;
width: auto;
display: block;
}
@media (max-width: 640px) {
.questo-footer-dotace__inner { justify-content: center; text-align: center; }
.questo-footer-dotace__loga { justify-content: center; gap: var(--space-4); }
.questo-footer-dotace__loga img { height: 38px; }
}
/* ── Karta partnera (sponzorské dary) na stránce Spolupráce ──────────── */
.questo-partner__logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 84px;
margin-bottom: var(--space-4);
}
.questo-partner__logo img {
max-height: 72px;
max-width: 100%;
width: auto;
display: block;
}
/* ── IROP banner na stránce Spolupráce ───────────────────────────────── */
.questo-eu-banner img {
display: block;
width: 100%;
max-width: 720px;
height: auto;
margin: 0 auto var(--space-5);
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: var(--radius-md);
}
/* Odkazy v přehledové tabulce projektů + popisek garanta pod názvem */
.questo-proj-garant {
display: block;
margin-top: 0.15rem;
font-size: 0.85rem;
color: var(--gray-500, #6b7280);
font-weight: 400;
}
/* Upozornění, že nabídka kroužků platí pro minulý školní rok (Kottová ji
pro nový rok teprve aktualizuje). Mizí, jakmile škola vloží vlastní
tabulku do obsahu stránky. */
.questo-volnycas-note {
background: #fdf6e3;
border: 1px solid #f0d9a0;
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
font-size: 0.95rem;
margin-bottom: var(--space-4);
}
/* ── Stránka Zápis ─────────────────────────────────────────────────────
Nejsilnější sezónní vstupní brána webu („zápis do mš" 640 hledání/měs
s jarním vrcholem), proto má vlastní strukturu i vzhled. */
.questo-zapis-cta {
background: var(--gray-50);
border-left: 4px solid var(--primary-green);
border-radius: var(--radius-md);
padding: var(--space-6);
max-width: 760px;
}
.questo-zapis-cta h2 { margin-top: 0; margin-bottom: var(--space-3); }
.questo-zapis-cta p { margin-bottom: var(--space-4); }
.questo-zapis-termin {
background: #fff;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
line-height: 1.6;
}
.questo-zapis-kroky {
margin: 0 0 var(--space-6);
padding-left: var(--space-6);
}
.questo-zapis-kroky li { margin-bottom: var(--space-2); }
.questo-zapis-dokumenty { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.questo-zapis-dokumenty li { margin-bottom: var(--space-2); }
.questo-zapis-dokumenty a {
display: inline-flex; align-items: center; gap: var(--space-2);
text-decoration: none; font-weight: 600;
}
.questo-zapis-dokumenty a:hover { text-decoration: underline; }
.questo-zapis-faq {
border-bottom: 1px solid var(--gray-200, #e5e7eb);
padding: var(--space-4) 0;
}
.questo-zapis-faq summary {
cursor: pointer;
font-weight: 700;
font-family: var(--font-heading);
font-size: 1.05rem;
}
.questo-zapis-faq p { margin: var(--space-3) 0 0; }
/* ══════════════════════════════════════════════════════════════════════
Připomínky z prototypu (zpětná vazba, 6. 8. 2026)
══════════════════════════════════════════════════════════════════════ */
/* „zruš oddělovač" — linka nad spodní lištou patičky. Patička je celá
Safírová, takže předěl nic neodděluje, jen ruší. */
.site-footer .footer-bottom {
border-top: 0;
}
/* „bílá barva" — na Safírové patičce byly šedé texty (adresa, IČO,
oddělovače „|") málo čitelné. Bílá s mírnou průhledností drží hierarchii
a přitom projde kontrastem. */
.site-footer .footer-contacts li,
.site-footer .footer-contacts a,
.site-footer .footer-legal p,
.site-footer .footer-legal a,
.site-footer .footer-links a {
color: #fff;
}
.site-footer .footer-links .separator {
color: rgba(255, 255, 255, 0.55);
}
.site-footer .footer-meta {
color: rgba(255, 255, 255, 0.75) !important;
}
/* „větší font" — nadpisy sloupců patičky (Školka / Škola / Pro rodiče). */
.site-footer .footer-nav-column h3 {
font-size: 19px;
font-weight: 700;
}
/* „text Škola OnLine vystřeď vertikálně na střed" — Baloo 2 sedí ve svém
em-boxu níž než běžný bezpatkový font, takže se text v tlačítku opticky
propadal dolů. Pevná line-height ho vrátí na střed. */
.site-header .header-actions .btn,
.site-header .header-actions .btn-sm {
line-height: 1;
}
/* „pokud menu nevleze celé, udělej to jako na WV 3.0" — tam se menu, které
se nevejde, sbalí do hamburgeru. Questo má 8 položek + dvě tlačítka +
hledání, takže se na 1440 px lámalo „O nás" na dva řádky a Přihláška
přetékala z hlavičky.
Dvě opatření: (1) položky se nikdy nelámou a jsou o něco úspornější,
(2) pod 1300 px se celé menu sbalí do hamburgeru (parent to dělá až
pod 768 px, což je pro takhle dlouhé menu pozdě — změřeno: na 1210 px
už Přihláška přetéká z hlavičky). Plné menu je pak v mobilním panelu,
nic se neztratí. */
.site-header .main-nav a {
font-size: 16px;
padding: var(--space-3);
white-space: nowrap;
}
@media (max-width: 1300px) {
.main-nav { display: none; }
.mobile-menu-toggle { display: flex; }
.site-header .hide-mobile { display: none; }
}
/* Pásmo 1301–1440 px je na plné menu těsné (Přihláška se dotýkala kraje),
ale sbalit ho do hamburgeru už tady by bylo zbytečné — na běžném
notebooku se menu hodí. Proto se v tomhle pásmu jen mírně zúží položky
i tlačítka a vznikne rezerva. */
@media (min-width: 1301px) and (max-width: 1440px) {
.site-header .main-nav a {
padding: var(--space-3) var(--space-2);
font-size: 15.5px;
}
.site-header .header-actions {
gap: var(--space-2);
}
.site-header .header-actions .btn-sm {
padding: var(--space-2) var(--space-3);
font-size: 13.5px;
}
}
/* Panel dotací je jediné BÍLÉ místo v Safírové patičce, takže na něj nesmí
plošné pravidlo `.site-footer a:hover { color: #fff }` — odkaz na hoveru
zbělal a zmizel (Marek 6. 8.). Drží si vlastní barvu v obou stavech. */
.questo-footer-dotace__text a,
.questo-footer-dotace__text a:hover,
.questo-footer-dotace__text a:focus-visible {
color: var(--questo-safir);
}
.questo-footer-dotace__text a:hover,
.questo-footer-dotace__text a:focus-visible {
text-decoration: underline;
}
/* ── Spolupráce a podpora — sjednocení (Marek 6. 8.) ───────────────────
Stránka mixovala levé zarovnání se středem (perex sekcí, plakát,
banner IROP), takže působila rozházeně. Všechno je zarovnané doleva
ke stejné ose jako nadpisy. Karty navíc byly bílé na bílé stránce —
dostávají jemné safírové pozadí, ať je vidět, kde blok začíná a končí. */
.questo-spoluprace-page .questo-eu-lead {
margin-left: 0;
margin-right: 0;
text-align: left;
}
.questo-spoluprace-page .questo-eu-poster {
margin-left: 0;
margin-right: 0;
text-align: left;
}
.questo-spoluprace-page .questo-eu-poster img,
.questo-spoluprace-page .questo-eu-banner img {
margin-left: 0;
margin-right: 0;
}
.questo-spoluprace-page .questo-eu-poster figcaption {
text-align: left;
}
/* Karty s kontrastním podkladem místo bílé na bílé. */
.questo-spoluprace-page .card {
background: #EEF1F9;
border: 1px solid #DFE4F2;
}
/* Logo partnera se drží vlevo jako zbytek stránky. */
.questo-spoluprace-page .questo-partner__logo {
justify-content: flex-start;
}
/* ── Výukový program na stránce Školka ────────────────────────────────
Pět karet v jemných odstínech značky, po řadě jak jdou v manuálu
(Mandarinka → Limetka → Mořská → Blankyt → Lila). Odstíny jsou schválně
slabé: text zůstává grafitový, takže kontrast drží nad 4,5 : 1 i na
nejtmavší z nich. Barevná je plocha a ikona, ne písmo. */
.skolka-page .service-item {
border: 1px solid transparent;
}
.skolka-page .service-item:nth-child(5n + 1) {
background: color-mix(in srgb, var(--questo-mandarinka) 16%, #fff);
border-color: color-mix(in srgb, var(--questo-mandarinka) 38%, #fff);
}
.skolka-page .service-item:nth-child(5n + 1) svg { color: #B26A16; }
.skolka-page .service-item:nth-child(5n + 2) {
background: color-mix(in srgb, var(--questo-limetka) 20%, #fff);
border-color: color-mix(in srgb, var(--questo-limetka) 45%, #fff);
}
.skolka-page .service-item:nth-child(5n + 2) svg { color: #6E7C1E; }
.skolka-page .service-item:nth-child(5n + 3) {
background: color-mix(in srgb, var(--questo-morska) 14%, #fff);
border-color: color-mix(in srgb, var(--questo-morska) 34%, #fff);
}
.skolka-page .service-item:nth-child(5n + 3) svg { color: #1E7A72; }
.skolka-page .service-item:nth-child(5n + 4) {
background: color-mix(in srgb, var(--questo-blankyt) 20%, #fff);
border-color: color-mix(in srgb, var(--questo-blankyt) 45%, #fff);
}
.skolka-page .service-item:nth-child(5n + 4) svg { color: #3D6E9E; }
.skolka-page .service-item:nth-child(5n + 5) {
background: color-mix(in srgb, var(--questo-lila) 20%, #fff);
border-color: color-mix(in srgb, var(--questo-lila) 44%, #fff);
}
.skolka-page .service-item:nth-child(5n + 5) svg { color: #7B5C86; }
/* Starší prohlížeče bez color-mix() dostanou aspoň neutrální podklad
z rodičovského tématu — barvy jsou ozdoba, ne nositel informace. */
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
.skolka-page .service-item { background: var(--gray-50); }
}
/* ── Mapa na GEO stránce ──────────────────────────────────────────────── */
.questo-geo-mapa {
margin: var(--space-6) 0 var(--space-8);
}
.questo-geo-mapa img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
border: 1px solid #DFE4F2;
}
.questo-geo-mapa figcaption {
margin-top: var(--space-3);
font-size: 15px;
color: var(--gray-600);
}
/* ── GEO stránka: nadpisy, dotazy, okolní obce ────────────────────────
Nadpisy v textu byly grafitové jako běžný text, takže sekce splývaly.
Safírová je drží v jedné řadě se zbytkem webu. */
.geo-content h2 {
color: var(--questo-safir);
font-size: 26px;
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.geo-content strong {
color: var(--gray-900);
font-weight: 700;
}
/* Časté dotazy jako rozbalovací karty, ne holý seznam. */
.geo-faq .section-header {
margin-bottom: var(--space-4);
}
.geo-faq-item {
background: #fff;
border: 1px solid #DFE4F2;
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.geo-faq-item:hover {
border-color: color-mix(in srgb, var(--questo-safir) 45%, #fff);
}
.geo-faq-item[open] {
border-color: var(--questo-safir);
box-shadow: 0 4px 16px rgba(96, 113, 181, 0.1);
}
.geo-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
cursor: pointer;
font-weight: 600;
/* Stejně velké jako text článku. Otázka i odpověď musí být zadané ručně:
soubor se zvětšeným písmem (assets/css/font-scale.css) se generuje ze
selektorů rodičovského tématu a tyhle třídy v něm nejsou, takže by
zůstaly v základní velikosti a v okolním textu působily drobně. */
font-size: 20.7px;
line-height: 1.4;
color: var(--questo-safir);
list-style: none;
}
/* Vlastní znak místo trojúhelníčku prohlížeče. */
.geo-faq-item summary::-webkit-details-marker { display: none; }
.geo-faq-item summary::marker { content: ''; }
.geo-faq-znak {
position: relative;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: color-mix(in srgb, var(--questo-safir) 12%, #fff);
}
.geo-faq-znak::before,
.geo-faq-znak::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 2px;
background: var(--questo-safir);
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.geo-faq-znak::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.geo-faq-item[open] .geo-faq-znak::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.geo-faq-odpoved {
padding: 0 var(--space-5) var(--space-4);
}
.geo-faq-odpoved p {
margin: 0;
font-size: 20.7px;
line-height: 1.65;
color: var(--gray-700);
}
/* Okolní obce: kompaktní pilulky, ať neberou pozornost obsahu. */
.geo-related {
margin-top: var(--space-10);
padding-top: var(--space-6);
border-top: 1px solid #DFE4F2;
}
.geo-related h2 {
font-size: 20px;
color: var(--questo-safir);
margin-bottom: var(--space-4);
}
.geo-related-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.geo-related-list a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: #EEF1F9;
border: 1px solid transparent;
color: var(--questo-safir);
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
}
.geo-related-list a:hover {
background: var(--questo-safir);
border-color: transparent;
color: #fff;
}
.geo-related-list svg {
width: 16px;
height: 16px;
}
/* ==========================================================================
Lightbox (GLightbox) — ovládací prvky v brandové barvě
Výchozí styl knihovny má bílou ikonu na bílém tlačítku, takže šipky ani
křížek nebyly vidět (Marek 25. 8.). Držíme stejný vzor jako tlačítko
„O nás" v hero: bílá plocha, Safírová ikona i obrys.
========================================================================== */
.glightbox-container .gclose,
.glightbox-container .gnext,
.glightbox-container .gprev {
background-color: var(--white);
border: 2px solid var(--primary-green);
opacity: 1;
}
.glightbox-container .gclose:hover,
.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
background-color: var(--primary-green);
}
.glightbox-container .gclose svg path,
.glightbox-container .gnext svg path,
.glightbox-container .gprev svg path {
fill: var(--primary-green);
}
.glightbox-container .gclose:hover svg path,
.glightbox-container .gnext:hover svg path,
.glightbox-container .gprev:hover svg path {
fill: var(--white);
}