/* ============================================================ site-custom.css – vlastní vzhled webu bez šablony (J3, v2 po revizi) ------------------------------------------------------------ Načítá ho jen „Klasický web“ (client/layout.php) – one-page šablony mají vlastní vzhled (WebTheme::isOnePage) a tento soubor nedostanou. Zásady (oprava nalezené revize 2026-09-26): 1. VÝCHOZÍ HODNOTY (inter/standard/center/pilulka…) zde NEMAJÍ žádná pravidla. Web bez uložených voleb i web s výchozími volbami se renderuje přesně jako před nasazením – na desktopu i mobilu (žádné pravidlo nemůže přebít mobilní pravidla client.css). 2. Velikost písma škáluje kořenovou rem bázi (html), nikoli jen body – veškeré rem/clamp velikosti (nadpisy, běžný text, popisky, tlačítka) se změní ve stejném poměru. 3. Šířka obsahu cílí na .container:not(.container--narrow) – úzké čtecí sloupce (blog, články) si svých 860 px drží ve všech variantách. 4. Systémové písmo přepisuje proměnnou --font (pokrýje i prvky s font-family: var(--font)) a layout pro tuto variantu vůbec nestahuje Google Fonts. Soubor nezmění žádnou barvu → nemůže rozbít kontrast ani světlý/tmavý režim; nepřidává žádnou animaci. ============================================================ */ /* ---- Písmo webu (data-site-font) ---- */ /* Elegantní nadpisy: patkové nadpisy v hlavním obsahu; běžný text zůstává Inter. */ html[data-site-font="playfair"] .site-main h1, html[data-site-font="playfair"] .site-main h2, html[data-site-font="playfair"] .site-main h3, html[data-site-font="playfair"] .site-main h4, html[data-site-font="playfair"] .site-main h5, html[data-site-font="playfair"] .site-main h6, html[data-site-font="playfair"] .site-main .section-title, html[data-site-font="playfair"] .site-main .hero-title { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: 0; } /* Systémové písmo: jedna proměnná přepne celý web (body i prvky s var(--font)); Google Fonts se v této variantě nestahují (podmínka v client/layout.php). */ html[data-site-font="system"] { --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ---- Velikost písma (data-site-scale) ---- 1) Škáluje kořenovou rem bázi: 15 px ≈ −6 %, 17.25 px ≈ +8 % oproti 16 px z client.css. Běžný text, popisky, labely i tlačítka (rem) tak rostou/klesají ve stejném poměru. Výchozí „standard“ nemá pravidlo. 2) Hlavní nadpisy mají clamp s vw uprostřed – změna rem báze je sama o sobě nezmění (ve středu rozsahu vyhrává vw člen). Proto se přepisují na ekvivalent s px mezemi (původní rem @16 px) a celý výsledek se násobí týmž poměrem jako rem báze – škáluje pak přesně na jakékoli šířce obrazovky. Pokryté hlavní nadpisy klasického webu: hero, titulky sekcí, O mně, Kontakt, Blog, karty „S čím pomohu“, pás Čísel. Dekorativní komponenty s vlastním vw (rotující text apod.) svou velikost ponechávají. */ html[data-site-scale="kompaktni"] { font-size: 15px; } html[data-site-scale="velke"] { font-size: 17.25px; } html[data-site-scale="kompaktni"] .hero-title { font-size: calc(clamp(36px, 5vw, 64px) * 0.9375); } html[data-site-scale="kompaktni"] .section-title { font-size: calc(clamp(28px, 3vw, 40px) * 0.9375); } html[data-site-scale="kompaktni"] .about-content h2 { font-size: calc(clamp(28px, 3.5vw, 42px) * 0.9375); } html[data-site-scale="kompaktni"] .contact-info h2 { font-size: calc(clamp(28px, 3vw, 40px) * 0.9375); } html[data-site-scale="kompaktni"] .blog-article-title{ font-size: calc(clamp(30px, 4vw, 48px) * 0.9375); } html[data-site-scale="kompaktni"] .pomoci-title { font-size: calc(clamp(24px, 3vw, 35.2px) * 0.9375); } html[data-site-scale="kompaktni"] .home-stats__value { font-size: calc(clamp(32px, 4.4vw, 46.4px) * 0.9375); } html[data-site-scale="velke"] .hero-title { font-size: calc(clamp(36px, 5vw, 64px) * 1.078125); } html[data-site-scale="velke"] .section-title { font-size: calc(clamp(28px, 3vw, 40px) * 1.078125); } html[data-site-scale="velke"] .about-content h2 { font-size: calc(clamp(28px, 3.5vw, 42px) * 1.078125); } html[data-site-scale="velke"] .contact-info h2 { font-size: calc(clamp(28px, 3vw, 40px) * 1.078125); } html[data-site-scale="velke"] .blog-article-title{ font-size: calc(clamp(30px, 4vw, 48px) * 1.078125); } html[data-site-scale="velke"] .pomoci-title { font-size: calc(clamp(24px, 3vw, 35.2px) * 1.078125); } html[data-site-scale="velke"] .home-stats__value { font-size: calc(clamp(32px, 4.4vw, 46.4px) * 1.078125); } /* Mobilní přepisy velikostí (jinde v client.css) dostanou stejnou úpravu. */ @media (max-width: 768px) { html[data-site-scale="kompaktni"] .hero-title { font-size: calc(clamp(32px, 11vw, 48px) * 0.9375); } html[data-site-scale="velke"] .hero-title { font-size: calc(clamp(32px, 11vw, 48px) * 1.078125); } html[data-site-scale="kompaktni"] .about-content h2 { font-size: calc(clamp(30.4px, 4.5vw, 50px) * 0.9375); } html[data-site-scale="velke"] .about-content h2 { font-size: calc(clamp(30.4px, 4.5vw, 50px) * 1.078125); } } /* ---- Šířka obsahu (data-site-width) ---- Standard nemá pravidlo (1200 px z client.css). Volba platí jen na desktopu (≥ 769 px) – na mobilu client.css nastavuje .container max-width:100 %, které těmto pravidlům záměrně nepřekáží (web je tam vždy přes celou šířku). */ @media (min-width: 769px) { html[data-site-width="uzka"] .container:not(.container--narrow) { max-width: 1070px; } html[data-site-width="siroka"] .container:not(.container--narrow) { max-width: 1380px; } /* Úzký čtecí sloupec (blogový text apod.) si svoji šířku drží ve všech variantách. */ html[data-site-width] .container--narrow { max-width: 860px; } } /* ---- Mezery mezi sekcemi (data-site-space) ---- Standard nemá pravidlo (6.5rem z client.css platí i na mobilu, jako dřív). Na mobilu se zvětšené/zmenšené mezery přiměřeně squashnou. */ html[data-site-space="huste"] .section { padding: 4.75rem 0; } html[data-site-space="vzdusne"] .section { padding: 8.5rem 0; } @media (max-width: 768px) { html[data-site-space="huste"] .section { padding: 3rem 0; } html[data-site-space="vzdusne"] .section { padding: 4.5rem 0; } } /* ---- Tvar tlačítek (data-site-btn) ---- Pilulka (výchozí) nemá pravidlo – var(--r-full) z client.css. */ html[data-site-btn="zaoblene"] .btn { border-radius: 12px; } html[data-site-btn="hranate"] .btn { border-radius: 2px; } /* ---- Zarovnání úvodu (data-site-hero) ---- Na střed (výchozí) nemá pravidlo – původní centrovaný hero z client.css. */ html[data-site-hero="left"] .hero-inner { justify-items: start; } html[data-site-hero="left"] .hero-text, html[data-site-hero="left"] .hero-content-section .hero-text { text-align: left; margin-left: 0; margin-right: 0; } html[data-site-hero="left"] .hero-logo-wrap, html[data-site-hero="left"] .hero-home-photo-wrap, html[data-site-hero="left"] .hero-cta { justify-content: flex-start; } /* ============================================================ GLM-14 — další volby vlastního webu bez šablony ------------------------------------------------------------ Pokračování stejných zásad jako výše: VÝCHOZÍ HODNOTY nemají žádná pravidla (web se renderuje jako dřív), každá nevýchozí volba má reálné pravidlo, nic nerozbíjí světlý/tmavý režim. Barevné schéma (data-site-palette) zde úmyslně není: pravidla generuje PHP (SiteCustomization::paletteCss) přímo v z jediné definice palet, kterou používá i editor pro náhledy – barvy tedy nemohou rozjet mezi CSS a náhledem. ============================================================ */ /* ---- Typografické dvojice (data-site-font, pokračování) ---- */ /* Teplé charakterní nadpisy: řezané Fraunces v hlavním obsahu, běžný text zůstává Inter. Google Fonts načte layout.php jen pro tuto variantu (SiteCustomization::fontsHref). */ html[data-site-font="fraunces"] .site-main h1, html[data-site-font="fraunces"] .site-main h2, html[data-site-font="fraunces"] .site-main h3, html[data-site-font="fraunces"] .site-main h4, html[data-site-font="fraunces"] .site-main h5, html[data-site-font="fraunces"] .site-main h6, html[data-site-font="fraunces"] .site-main .section-title, html[data-site-font="fraunces"] .site-main .hero-title { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; letter-spacing: 0; } /* Editorská dvojice: patkové Source Serif 4 nadpisy + DM Sans text. Proměnná --font přepne celý běžný text (stejný mechanismus jako u systémového písma), nadpisy dostanou vlastní rodinu. */ html[data-site-font="dserif"] { --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } html[data-site-font="dserif"] .site-main h1, html[data-site-font="dserif"] .site-main h2, html[data-site-font="dserif"] .site-main h3, html[data-site-font="dserif"] .site-main h4, html[data-site-font="dserif"] .site-main h5, html[data-site-font="dserif"] .site-main h6, html[data-site-font="dserif"] .site-main .section-title, html[data-site-font="dserif"] .site-main .hero-title { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; letter-spacing: 0; } /* ---- Výška úvodu (data-site-hero-size) ---- Plná obrazovka (výchozí) nemá pravidlo – min-height z client.css. Kompaktní úvod ruší výšku přes celou obrazovku a zmenšuje odsazení; na mobilu hero stejně nemá pevnou výšku, jen se zmenší mezery. */ html[data-site-hero-size="kompaktni"] .hero { min-height: 0; padding: 3.5rem 0 4.25rem; } html[data-site-hero-size="kompaktni"] .hero-content-section { padding: 3.5rem 0 4.25rem; } @media (max-width: 768px) { html[data-site-hero-size="kompaktni"] .hero { padding: 2.25rem 0 3rem; } html[data-site-hero-size="kompaktni"] .hero-content-section { padding: 2.25rem 0 3rem; } } /* ---- Výška horní lišty (data-site-nav) ---- Standard nemá pravidlo ( --nav-h: 70px z client.css). Kompaktní lišta zmenší výšku hlavičky i logo; cílíme jen na klasickou navigaci (site-header), pill/mega/bottom si drží vlastní rozměry. Výška úvodu je počítaná od --nav-h, takže zůstává konzistentní. */ html[data-site-nav="kompaktni"] { --nav-h: 56px; } html[data-site-nav="kompaktni"] .site-header .site-logo { min-height: 36px; } html[data-site-nav="kompaktni"] .site-header .logo-img { max-height: 36px; } html[data-site-nav="kompaktni"] .site-header .logo-text { font-size: 1rem; } html[data-site-nav="kompaktni"] .site-header .nav-link { padding: .375rem .75rem; font-size: .875rem; } /* ---- Pořadí sekcí (data-site-sections) a registrační blok (data-site-footer-legal) řeší přímo PHP renderer (client/pages/uvod.php, client/layout.php) – atributy na slouží jen jako průhledná značka uloženého nastavení. ---- */