/* ========================================================================= tokens.css — jediný zdroj pravdy pro hodnoty vzhledu šablony „strankovice3" ------------------------------------------------------------------------- Pravidlo: v ostatních CSS souborech šablony NIKDY nepiš hex barvu, px poloměr ani konkrétní stín — vždy sáhni po tokenu odsud. Jediná výjimka v celém skinu je heraldika erbu (`nol_znak_barvy()` v _funkce.php): znak obce je logo, ne nositel palety, a proto se s vzhledem nesmí měnit. JEDNA IDENTITA CELÝ ROK ----------------------- Značka stojí na znaku obce: modř štítu je hlavní barva, červeň hlavy štítu a knihy doplněk, bílá podklad (barvy české vlajky, barvy obce Stránkovice — `demodata/strankovice/obec.md`). Odstíny jsou z palety design systému Gov.cz (designsystem.gov.cz/principy/barvy, v4.7.3, licence EUPL 1.2), názvy jeho tokenů jsou v komentářích. Jeho oranžová `secondary` se záměrně nepoužívá: obec nemá modrožlutou kombinaci. Červeň je v Gov.cz chybová (`error`), tady je i akcentem, proto na liště a proužcích, ne jako jediný nositel významu. Barva se NEMĚNÍ — dřívější sezónní přebarvování celého webu (jaro modrá → léto modrá → podzim terakota → zima modrá) se ZRUŠILO celé, i s přepínačem v hlavičce a čtyřmi sadami grafiky: značka, která čtyřikrát ročně změní barvu, není značka, a v úvodním pásu se stejně schová pod fotkami obce. strankovice3 je kopie olsany3 (návrh `.context/navrhy/olsany/olsany-v3.html` + bloky v2) přebarvená do červené, modré a bílé: JEDEN vzhled, světlý, ostré rohy, žádný tmavý režim. Rozměry a typografie z návrhu, barvy jsou vlastní. ========================================================================= */ :root { /* ── Značka: modř znaku ─────────────────────────────────────────── `--nol-primarni` musí unést BÍLÝ text (tlačítka, záhlaví bloků) — 8.9:1, na světlé ploše `--nol-primarni-svetla` 7.6:1. */ --nol-primarni: #00469b; /* primary-600 */ --nol-primarni-tmava: #0e3578; /* primary-700 */ --nol-primarni-svetla: #e2eef8; /* primary-100 */ --nol-primarni-jemna: #f2f6fc; /* primary-50 */ --nol-primarni-hluboka: #0c1838; /* primary-900 */ --nol-primarni-kontrast: #ffffff; /* Červeň erbu — druhý akcent. Používá se na PLOŠE a linkách: proužek nad nadpisem sekce, patka dlaždice úkonu, odznak. Nese bílý text (5.3:1). Na hluboké modři má jako barva textu jen 3.3:1, tam patří `--nol-na-tmave`. */ --nol-cervena: #d70c0f; /* error-600 */ /* ── Hluboká modř (navy): trvale tmavé plochy (Místa, pruh pod patičkou, hlavička mobilního panelu). Vlastní token, ne odvozenina akcentu. DVOJNÍK: hodnotu `--nol-pruh` opisuje `` v `_head.php` (do `content` se `var()` poslat nedá). */ --nol-pruh: #0c1838; /* primary-900 */ --nol-pruh-hloubka: #091129; /* primary-950 */ --nol-pruh-linka: rgba(255, 255, 255, 0.18); /* ── Papír ──────────────────────────────────────────────────────── Neutrální šedá Gov.cz (`neutral-*`). Kontrast textu na bílé 15.1:1, tlumeného 6.6:1 (na tlumeném pozadí 6.1:1). */ --nol-pozadi: #ffffff; --nol-pozadi-tlumene: #f6f6f6; --nol-povrch: #ffffff; --nol-povrch-zvyrazneny: #f6f6f6; /* Šedomodrý pás „Život v obci" a jeho linka (název tokenu z olsany3). */ --nol-pisek: #f2f6fc; --nol-pisek-linka: #cee3f4; --nol-text: #262626; --nol-text-tlumeny: #5d5d5d; --nol-ramecek: #e7e7e7; --nol-ramecek-vyrazny: #d1d1d1; /* Text a linky na trvale tmavém podkladu. Nemění se s režimem. */ --nol-na-tmave: #ffffff; --nol-na-tmave-tlumene: rgba(255, 255, 255, 0.76); --nol-na-tmave-linka: rgba(255, 255, 255, 0.18); --nol-zaclona-barva: rgba(6, 14, 28, 0.55); /* ── Sémantické stavy ───────────────────────────────────────────── */ --nol-uspech: #2e7d32; /* success-600 */ --nol-uspech-pozadi: #f3faf3; /* success-50 */ --nol-vystraha: #6b4a0d; /* warning-900 */ --nol-vystraha-pozadi: #fefbe8; /* warning-50 */ --nol-chyba: #b50817; /* error-700 */ --nol-chyba-pozadi: #fff4f2; /* error-50 */ --nol-info: #00469b; /* primary-600 */ --nol-info-pozadi: #f2f6fc; /* primary-50 */ /* ── Typografie ────────────────────────────────────────────────── Nadpisy Figtree, text a rozhraní Inter — obojí grotesk, žádný serif. Vzor jsou nejlepší české obecní weby (Kamenice, Slaný, Plzeň, Jirkov): ani jeden nesází nadpisy patkovým písmem. Hierarchii dělá VELIKOST a VÁHA, ne změna rodiny. Fallbacky jsou uvedené schválně: než dojede Google Font, sází se systémovým groteskem, ne patkovým Times. */ --nol-pismo-nadpis: 'Figtree', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --nol-pismo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --nol-pismo-cislice: var(--nol-pismo); /* Základ je 1rem (16 px), ne 15 px: obecní web čte i osmdesátiletý návštěvník a drobné písmo je první, na co si stěžuje. */ --nol-text-xs: 0.8125rem; --nol-text-sm: 0.875rem; --nol-text-zakl: 1rem; --nol-text-lg: 1.125rem; --nol-text-xl: 1.25rem; --nol-nadpis-4: 1.125rem; --nol-nadpis-3: 1.3125rem; --nol-nadpis-2: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); --nol-nadpis-1: clamp(1.875rem, 1.4rem + 1.7vw, 2.5rem); --nol-uvod: clamp(2.25rem, 1.4rem + 3.4vw, 4rem); --nol-vyska-radku: 1.55; --nol-vyska-radku-tesna: 1.2; /* ── Rozestupy (4px krok) ────────────────────────────────────────── */ --nol-mezera-1: 0.25rem; --nol-mezera-2: 0.5rem; --nol-mezera-3: 0.75rem; --nol-mezera-4: 1rem; --nol-mezera-5: 1.5rem; --nol-mezera-6: 2rem; --nol-mezera-7: 3rem; --nol-mezera-8: 4.5rem; --nol-mezera-sekce: clamp(3rem, 1.8rem + 3.6vw, 5.5rem); /* ── Poloměry ──────────────────────────────────────────────────── Návrh v2/v3 má OSTRÉ ROHY všude — karty, tlačítka, pole, štítky. Tokeny zůstávají (pravidla na ně odkazují), jen mají nulu. Kruh (přepínač formuláře) si drží `50%` přímo v pravidle. */ --nol-radius-sm: 0; --nol-radius: 0; --nol-radius-lg: 0; --nol-radius-pill: 0; /* ── Stíny — měkké, s nádechem navy ─────────────────────────────── */ --nol-stin-sm: 0 1px 2px rgba(14, 20, 32, 0.06); --nol-stin: 0 4px 16px rgba(14, 20, 32, 0.08); --nol-stin-lg: 0 16px 44px rgba(14, 20, 32, 0.14); /* Plovoucí karta přes fotku (úkony, počasí) — přesně podle návrhu. */ --nol-stin-karta: 0 1px 2px rgba(12, 24, 56, 0.10), 0 22px 48px -14px rgba(12, 24, 56, 0.34); --nol-stin-pocasi: 0 22px 48px -14px rgba(0, 0, 0, 0.45); --nol-stin-xl: 0 28px 70px rgba(14, 20, 32, 0.20); /* ── Pohyb ───────────────────────────────────────────────────────── */ --nol-prechod: 160ms cubic-bezier(0.2, 0, 0.2, 1); --nol-prechod-dlouhy: 320ms cubic-bezier(0.2, 0, 0.2, 1); --nol-prolinani: 1400ms ease; /* prolínání fotek v úvodním pásu */ /* ── Rozvržení ───────────────────────────────────────────────────── */ --nol-sirka-obsahu: 1920px; /* Vodorovné okraje obalu: 64 px, pod 1600 px 48 px (layout.css). */ --nol-okraj: 64px; --nol-sirka-textu: 68ch; --nol-vyska-hlavicky: 116px; /* řádek se znakem, bez lišty */ --nol-vyska-listy: 40px; --nol-vyska-hlavicky-mala: 84px; /* sticky stav po odrolování */ /* ── Vrstvení ────────────────────────────────────────────────────── */ --nol-vrstva-obsah: 1; --nol-vrstva-sticky: 100; --nol-vrstva-hlavicka: 200; --nol-vrstva-menu: 300; --nol-vrstva-panel: 400; /* ── Ohnisko klávesnice ──────────────────────────────────────────── */ --nol-obrys: 3px solid #007bff; /* focus-600 */ --nol-obrys-odsazeni: 2px; /* ── Lightbox (fotogalerie) ────────────────────────────────────── */ --nol-lightbox-pozadi: rgba(6, 10, 18, 0.94); --nol-lightbox-text: #ffffff; --nol-lightbox-text-tlumeny: rgba(255, 255, 255, 0.72); --nol-lightbox-nahled: 56px; --nol-lightbox-nahled-sm: 44px; --nol-lightbox-lista-vyska: 0px; color-scheme: light; } /* ========================================================================= Záložní podklad úvodního pásu ------------------------------------------------------------------------- Uplatní se jen tehdy, když první řádek hlavní strany nemá fotky obce. Je to záměrně TICHÝ podklad (inkoustová modř, vrstevnice, tušené hřebeny), ne kreslená krajina — vyrábí ho `demo/generuj_grafiku_sablony.php` a jeho hlavička vysvětluje proč. Jakmile redaktor fotky doplní, překryje ho vrstva fotek. Fallback `--nol-uvod-zaloha` (prosté `url()`) je mimo `@supports` schválně: neznámá funkce uvnitř `var()` by shodila deklaraci na `none`, ne na předchozí hodnotu. ========================================================================= */ :root { --nol-uvod-zaloha: url("../img/uvod.jpg"); --nol-uvod-obrazek: image-set(url("../img/uvod.avif") type("image/avif"), url("../img/uvod.webp") type("image/webp"), url("../img/uvod.jpg") type("image/jpeg")); } /* ========================================================================= ROLE PLOCH V OBSAHU — čtyři, a rámeček má jen jedna z nich ------------------------------------------------------------------------- V obsahu se NERÁMUJE. Karta kolem výstrahy ČHMÚ, webkamery, rozcestníku, formuláře nebo kalendáře rezervací neříká nic, co by nebylo vidět z nadpisu a z odsazení — a když jich pod sebou stojí pět, je z obsahové části plot z bílých obdélníků. Strukturu nese TYPOGRAFIE, MEZERA a VLASOVÁ LINKA. VÝPIS průhledný, vlasová linka mezi položkami, podbarvení pod myší. Seznam položek: aktuality, úřední deska, řádky rozcestníku, hlavičky akordeonu, dlaždice dokumentů, náhledy galerie, možnosti ankety. BLOK otevřená plocha BEZ rámečku a BEZ vlastního podkladu. Prvek, který drží pohromadě vlastní nadpis: formulář, rozcestník, akordeon, kalendář rezervací, webkamera, výstraha ČHMÚ, box úřadu, anketa, počasí. DOPLNĚK tlumená plocha bez rámečku. Věc kolem obsahu, ne obsah sám: filtr nad výpisem, box kontaktních údajů, návrh ve vyhledávání, odpověď asistenta. OZNÁMENÍ sémantická barva a levý pruh (`.a3-msg-*`, `.block-dulezite`, `.a3rez-closed`, náhled konceptu, jednotlivá výstraha ČHMÚ). Jediné místo v obsahu, kde barevná plocha a linka něco ZNAMENAJÍ — proto se nesmí rozmělnit dekorací. Rámeček si v obsahu drží ještě POLE FORMULÁŘE (`base.css`) — to je ovládací prvek, ne plocha, a bez obrysu není poznat, kam se píše. VZLÍNAJÍCÍ PLOCHA (stín bez rámečku) zůstává jen tomu, co se opravdu zvedá nad stránku: dlaždice pásu úkonů, našeptávač, mega menu, lightbox. ========================================================================= */ :root { --nol-vypis-hover: var(--nol-primarni-jemna); --nol-vypis-radius: var(--nol-radius); /* Vodorovný přesah podbarveného řádku. JEDNA hodnota pro aktualitu, řádek desky, řádek rozcestníku i hlavičku akordeonu — řádky pak začínají na téže svislici a podbarvení je u všech stejně široké. Přesah si bere zpátky záporný `margin-inline` téže hodnoty. */ --nol-vypis-presah: var(--nol-mezera-3); --nol-vypis-radek: var(--nol-mezera-4) var(--nol-mezera-3); --nol-vypis-linka: 1px solid var(--nol-ramecek); /* Blok: žádné pozadí, žádný rámeček — jen linka pod nadpisem a mezera pod ní. Kdo sem dopíše `background` nebo `border`, staví kartu. */ --nol-blok-linka: 1px solid var(--nol-ramecek); --nol-blok-mezera: var(--nol-mezera-4); --nol-doplnek-pozadi: var(--nol-pozadi-tlumene); --nol-doplnek-radius: var(--nol-radius-lg); /* Formulář se nečte přes celou šířku obsahu: pole delší než ~46rem se špatně skenuje a u třípoložkového formuláře vypadá stránka prázdně. Karta ho dřív držela pohromadě sama, otevřený blok potřebuje míru. */ --nol-sirka-formulare: 46rem; } /* Přemapování proměnných portlet-manager.css (admin3) na tokeny šablony — aby portlety seděly do vzhledu bez editace admin3 vrstvy. */ :root { --portlet-bg: transparent; --portlet-border: var(--nol-ramecek); /* Rozestup mezi portlety v obsahu. Musí být větší než rozestup UVNITŘ portletu (`--nol-mezera-4` mezi nadpisem a tělem), jinak výpis a nadpis následujícího portletu splynou v jeden blok. */ --portlet-gap: var(--nol-mezera-6); --portlet-cell-padding: var(--nol-mezera-3) var(--nol-mezera-4); --portlet-tile-min: 200px; --portlet-tile-col-gap: var(--nol-mezera-6); /* Barvy odznaku typu souboru. Baseline je má natvrdo v hexu a v tmavém režimu na tmavé kartě hasnou — tady se přemapují na tokeny šablony, takže se převáží spolu s režimem. Rodiny (pdf/doc/xls/…) drží svoji ustálenou barvu, jen v tónu palety webu. */ --portlet-badge-pdf: var(--nol-chyba); --portlet-badge-doc: var(--nol-info); --portlet-badge-xls: var(--nol-uspech); --portlet-badge-ppt: var(--nol-vystraha); --portlet-badge-image: var(--nol-primarni); --portlet-badge-archiv: var(--nol-vystraha); --portlet-badge-text: var(--nol-text-tlumeny); --portlet-badge-default: var(--nol-text-tlumeny); /* Šířka náhledu v dlaždici aktuality — pevná, aby byly všechny obrázky stejně velké bez ohledu na šířku okna (renderer dává procentní sloupec). Náhled je DOPROVOD, ne obsah: u úředního výpisu nese informaci titulek a datum, obrázek bývá jen ilustrace nebo zástupná grafika „Bez náhledu". Proto je menší než perex a na mobilu se ještě zmenšuje (`--nol-aktualita-nahled-mobil`), místo aby zabral celou šířku. */ --nol-aktualita-nahled: 132px; --nol-aktualita-nahled-mobil: 96px; /* Poměr stran náhledu. Jednotný ořez je to hlavní, co drží výpis aktualit pohromadě — bez něj se v mřížce potkají panorama, čtverec a logo. */ --nol-pomer-nahledu: 16 / 10; }