/* ========================================================================= tokens.css — jediný zdroj pravdy pro hodnoty vzhledu šablony „noveolsany" ------------------------------------------------------------------------- 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 erbu obce: zeleň štítu je hlavní barva, zlato širočiny doplněk, červeň zůstává erbu (v rozhraní by se pletla s chybovým stavem). Barva se NEMĚNÍ — dřívější sezónní přebarvování celého webu (jaro zelená → 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. Vzhled má tedy JEDNU osu: data-rezim světlý (výchozí, bez atributu) × tmavy Systémová preference (prefers-color-scheme) se ZÁMĚRNĚ NEPOSLOUCHÁ. Pořadí bloků níže je závazné: :root → :root[data-rezim="tmavy"]. ========================================================================= */ :root { /* ── Značka: zeleň erbu ─────────────────────────────────────────── `--nol-primarni` musí unést BÍLÝ text (tlačítka, záhlaví bloků), proto je o stupeň hlubší než heraldická zeleň #1b7a3e — ta má na bílém textu jen 4.6:1 a v malém řezu se rozdrolí. Tady 5.9:1. */ --nol-primarni: #15683a; --nol-primarni-tmava: #0f4d2b; --nol-primarni-svetla: #e8f2ec; --nol-primarni-jemna: #f3f8f5; --nol-primarni-kontrast: #ffffff; /* Zlato erbu — druhý akcent. Používá se výhradně na PLOŠE: proužek nad nadpisem sekce, patka dlaždice úkonu, popisky sloupců v patičce (tam leží na inkoustu, 9.8:1). Jako barva textu na papíře se použít NESMÍ — na bílé má 1.7:1. */ --nol-zlata: #f0c02e; /* ── Inkoust: trvale tmavé pruhy (servisní lišta, patička) ────────── Vlastní token, NIKDY ne odvozenina akcentu: v tmavém režimu je akcent naopak světlý a bílý text by na něm neprošel kontrastem. Odstín je zelený inkoust, ne neutrální šeď — patička tím drží značku i bez jediného zeleného prvku. DVOJNÍCI: hodnotu `--nol-pruh` opisují dvě místa, kam se `var()` poslat nedá — `` v `_head.php` (za běhu ji přepíše noveolsany.js, literál je jen pro první vykreslení) a `NOL_INKOUST` v `demo/generuj_grafiku_sablony.php` (podklad apple-touch-icon). Změna barvy = změna na všech třech místech. */ --nol-pruh: #0e2318; --nol-pruh-hloubka: #081711; --nol-pruh-linka: rgba(255, 255, 255, 0.14); /* ── Papír ──────────────────────────────────────────────────────── Neutrál s nádechem do zelena, ať bílé karty na pozadí „sednou". Kontrast textu na pozadí 14.8:1, tlumeného 5.4:1. */ --nol-pozadi: #f7f8f6; --nol-pozadi-tlumene: #eef1ed; --nol-povrch: #ffffff; --nol-povrch-zvyrazneny: #f4f6f3; --nol-text: #14191c; --nol-text-tlumeny: #5a656b; --nol-ramecek: #e2e6e1; --nol-ramecek-vyrazny: #c3cac2; /* 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.74); --nol-na-tmave-linka: rgba(255, 255, 255, 0.16); --nol-zaclona-barva: rgba(8, 20, 14, 0.55); /* ── Sémantické stavy ───────────────────────────────────────────── */ --nol-uspech: #15683a; --nol-uspech-pozadi: #e8f2ec; --nol-vystraha: #8a5a00; --nol-vystraha-pozadi: #fdf3e0; --nol-chyba: #b42318; --nol-chyba-pozadi: #fdeceb; --nol-info: #1c5eb8; --nol-info-pozadi: #e8f0fc; /* ── 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.6; --nol-vyska-radku-tesna: 1.18; /* ── 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 ──────────────────────────────────────────────────── Jeden krok mezi stupni, ať se karty nehádají s tlačítky. */ --nol-radius-sm: 4px; --nol-radius: 8px; --nol-radius-lg: 14px; --nol-radius-pill: 999px; /* ── Stíny — měkké a neutrální, ne modré ─────────────────────────── */ --nol-stin-sm: 0 1px 2px rgba(16, 24, 20, 0.06); --nol-stin: 0 4px 16px rgba(16, 24, 20, 0.08); --nol-stin-lg: 0 16px 44px rgba(16, 24, 20, 0.14); --nol-stin-xl: 0 28px 70px rgba(16, 24, 20, 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: 1280px; --nol-sirka-textu: 68ch; --nol-vyska-hlavicky: 84px; --nol-vyska-hlavicky-mala: 60px; /* 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 var(--nol-primarni); --nol-obrys-odsazeni: 2px; /* ── Lightbox (fotogalerie) ────────────────────────────────────── Překryv je tmavý v OBOU režimech, proto tyhle tokeny ZÁMĚRNĚ nemají protějšek v [data-rezim="tmavy"]. */ --nol-lightbox-pozadi: rgba(8, 12, 10, 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ž lišta „Úvodní pás" nemá fotky obce. Je to záměrně TICHÝ podklad (inkoustová zeleň, 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 lištu naplní, 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")); } /* ========================================================================= Tmavý režim ========================================================================= */ :root[data-rezim="tmavy"] { --nol-primarni: #4cbd7c; --nol-primarni-tmava: #6fd097; --nol-primarni-svetla: #14261c; --nol-primarni-jemna: #101d16; --nol-primarni-kontrast: #05160d; --nol-zlata: #f0c02e; --nol-pozadi: #0f1315; --nol-pozadi-tlumene: #141a1c; --nol-povrch: #171d20; --nol-povrch-zvyrazneny: #1e2528; --nol-text: #e9ece9; --nol-text-tlumeny: #a5aeae; --nol-ramecek: #293134; --nol-ramecek-vyrazny: #3d4649; /* Pruh musí zůstat tmavší než pozadí, jinak splyne. */ --nol-pruh: #081310; --nol-pruh-hloubka: #040c0a; --nol-uspech: #4cbd7c; --nol-uspech-pozadi: #10251a; --nol-vystraha: #e0a83c; --nol-vystraha-pozadi: #2c2210; --nol-chyba: #f2837a; --nol-chyba-pozadi: #2e1614; --nol-info: #74a9f0; --nol-info-pozadi: #12203a; --nol-stin-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --nol-stin: 0 4px 16px rgba(0, 0, 0, 0.55); --nol-stin-lg: 0 16px 44px rgba(0, 0, 0, 0.6); --nol-stin-xl: 0 28px 70px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* Systémová preference se ZÁMĚRNĚ neposlouchá — bez data-rezim="tmavy" je stránka vždy světlá. */ /* ========================================================================= 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; }