/* 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; } @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 { /* --- 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. */ --questo-pomeranc-text: #BF551D; /* bílý text 4.63:1 OK (brandová 2.79 = FAIL) */ --questo-pomeranc-hover: #93400F; /* bílý text 7.04:1 OK */ --questo-morska-text: #1E7A72; /* na bílé 5.14:1 OK (brandová 2.49 = FAIL) */ /* --- 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: '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 auto; } .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é. */ .hero-overlay { background: linear-gradient(to top, rgba(70, 69, 67, 0.95) 0%, rgba(70, 69, 67, 0.7) 40%, rgba(70, 69, 67, 0.4) 100%); } /* 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%); } /* .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-light); color: var(--questo-grafit); border-bottom-color: var(--primary-green); } .alert-info .alert-icon svg, .alert-warning .alert-icon svg { color: var(--primary-green); } /* 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; } }