/* obydleni.cz — designové tokeny, verze 3 (bílý, čistý). --------------------------------------------------------------------------- Stejná struktura i názvy proměnných jako verze 2, jiné hodnoty. Obě sekce (světlý i tmavý režim) jsou vyladěné zvlášť, ne inverzí. Vizuální systém: bílá zem, neutrální šedé linky, měkký rádius a velmi jemný stín. Strukturu drží odsazení a světlá hairline, ne černá 2px linka. Barvu do webu vnáší odstín rubriky a akcent, ne dekorace. CO SE ZMĚNILO PROTI VERZI 2 A PROČ --------------------------------------------------------------------------- Verze 2 stavěla na teplém tiskovém papíru (#f6f4ef) a na černých 2px linkách — magazínový, „architektonický" výraz. Katalog nábytku, který na webu mezitím vyrostl na 7 500 stránek, je ale e-shopový výpis a v téhle úpravě působil těžce: béžová zem ubírala fotkám produktů kontrast a černé linky soupeřily s cenami a tlačítky o pozornost. Verze 3 proto vrací bílou zem a šedé hairline. Fotka produktu na bílé je to jediné barevné na stránce, což je přesně to, co má výpis dělat. Rádius a stín se zapínají (viz níže) — karta se zase oddělí vyvýšením, takže ji nemusí ohraničovat plná linka. POZOR: --radius a --stin už nejsou nulové. Šablony, které se na to spoléhaly, je potřeba projít — v tomhle webu to byla jen místa, kde se box-shadow ručně přebíjel na none. ZMĚNY PROTI VERZI 1, KTERÉ SE MUSÍ PROPSAT DO ŠABLON --------------------------------------------------------------------------- 1. --radius je 0 a --stin je none. Karty se stíny ve verzi 1 přestanou být karty; oddělují je linky. Šablony nemusíte měnit, jen nahradit CSS. 2. Přidané proměnné (u každé je dole komentář proč): --akcent-signal sytá červená jen na 2px linky a velké značky (3:1) --rubrika barva odstínu rubriky dopočítaná z --h v OKLCH --rubrika-tint světlá varianta téhož odstínu na podklady Generátor dál nastavuje jen --h, ostatní se dopočítá tady. 3. --h zůstává číslo odstínu (princip „jedna rubrika = jeden odstín" jsme nerušili), ale dopočítává se v OKLCH s pevnou světlostí a chromatičností. Všech 13 odstínů má tím stejnou optickou váhu a stejný kontrast — ve verzi 1 to přes HSL neplatilo (zelená vypadala mnohem světlejší než modrá). Nové hodnoty --h pro 13 rubrik jsou na konci souboru. 4. Písmo Archivo se hostuje z vlastního serveru (woff2, řezy 400 / 500 / 700 / 800 + kurzíva 400, latin + latin-ext kvůli ď ť ň ů ř). @font-face patří do šablony, ne sem. 5. Čísla nemají vlastní barvu: paleta je záměrně jednoakcentová, takže ceny odlišuje písmo (tabulkové číslice, tučný řez) a podklad (--zvyrazneni), ne druhý odstín. --cislo proto drží inkoustovou hodnotu — je to pořád „barva čísel", jen není červená. Kdyby se vám to nezdálo, řekněte: místo #2d2b2b jde nasadit #9e3526, kontrast to udrží. --------------------------------------------------------------------------- */ :root{ /* plocha a text --papir je čistá bílá, --plocha jen nepatrně šedý panel. Neutrální šedá (ne teplá béžová) proto, že vedle ní fotka produktu nezežloutne. */ --papir:#ffffff; --plocha:#f6f7f9; --inkoust:#15181c; /* 17,4:1 na bílé */ --tichy:#5c636b; /* 6,0:1 na bílé — druhotný text, ne dekorace */ --linka:#e5e8ec; /* 1px hairline uvnitř bloků */ --linka-silna:#d3d8de; /* dělicí linka mezi bloky a sekcemi */ /* akcenty — mosazná olivová zlatá jako jediná barva značky. Zlatá z obálky časopisu (kolem #b8a03f) drží na světlém papíru jen 2,5:1, takže na text jde její hluboká varianta 5,8:1 (--akcent) a sytější --akcent-signal (3,4:1) zůstává na 2px linky, ukazatel čtení a velké značky. Předchozí cihlová varianta, kdyby se ti vrátila: --akcent:#ae1800; --akcent-tmavy:#7c1405; --akcent-signal:#ec3013; --zvyrazneni:#ffe0d9; --papir:#f3f2f2; --plocha:#eae9e9; --inkoust:#201e1d; --tichy:#605d5d; --linka:#d7d3d3; --linka-silna:#201e1d; --cislo:#2d2b2b; */ --akcent:#6f5e1c; --akcent-tmavy:#4f4212; /* najetí a stisk */ --akcent-signal:#9a8226; /* PŘIDÁNO: linky, ukazatel čtení, aktivní stopka */ --cislo:#15181c; /* ceny a čísla — inkoust + tabulkové číslice */ --zvyrazneni:#eff3f7; /* podklad boxu „V kostce" a cenového sloupce */ /* rozměry */ --sirka:1240px; --sirka-textu:68ch; /* 18px Archivo ≈ 68 znaků na řádek */ /* Rádius i stín jsou ve verzi 3 zapnuté. Stín je záměrně sotva viditelný: odděluje kartu od bílé země, ale nedělá z výpisu 3D scénu. Hover je výraznější, aby bylo poznat, že je karta klikací. */ --radius:10px; --radius-male:8px; /* tlačítka, vstupy, štítky */ --stin:0 1px 2px rgba(16,24,40,.05), 0 1px 1px rgba(16,24,40,.03); --stin-hover:0 12px 28px -14px rgba(16,24,40,.28); /* písmo — dvě rodiny, tři hlasy: --display Bodoni Moda: titulky stránek, hlava rubriky, značka, iniciála. Vysokokontrastní antikva dělá z webu magazín, ne obsahový portál. PŘIDANÁ proměnná, ale jen jedna a jen na velké stupně (28 px a víc), kde vlasové stopky nevadí. Subset latin+latin-ext, jeden řez 600, woff2 z vlastního serveru (~30 kB) — druhý webfont navíc. --nadpisy Archivo 800: podnadpisy v článku, tabulky, navigace, popisky. Antikva se do 12px kapitálek a číselných tabulek nehodí. --text Archivo 400/500: dlouhé čtení. */ --display:"Bodoni Moda","Bodoni MT",Georgia,"Times New Roman",serif; --nadpisy:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --text:"Archivo","Archivo Fallback",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --h:25; /* výchozí odstín rubriky */ /* PŘIDÁNO: odstín rubriky dopočítaný z --h. Pevné L a C = stejná váha i kontrast u všech 13 rubrik. První řádek je záložní hodnota pro prohlížeče bez oklch(). */ --rubrika:#5b4f45; --rubrika:oklch(0.42 0.10 var(--h)); /* ≥5,4:1 na papíru */ --rubrika-tint:#eef1f4; --rubrika-tint:oklch(0.96 0.02 var(--h)); /* podklady, dlaždice bez fotky */ } /* Dopočet se musí zopakovat u každého prvku, který si --h nastavuje sám — var() v :root se vyhodnotí jednou a inline --h na kartě by se do něj nepropsalo. Tenhle řádek je celý ten fallback: bez slugu (data-rubrika) se barva rubriky dopočítá z --h přímo na kartě, výpisu nebo bloku. Pořadí: stojí PŘED ručními barvami rubrik, takže slug má vždy přednost. */ [style*="--h"],[data-h]{ --rubrika:oklch(0.42 0.10 var(--h)); --rubrika-tint:oklch(0.93 0.03 var(--h)); } @media (prefers-color-scheme:dark){ :root{ /* Tmavý režim není inverze: zem je teplá tmavá (ne černá), akcent je světlá varianta červené (8,2:1) a text na akcentu je barva země — ve verzi 1 tam byla bílá na světlé mentolové, což bylo ~2:1. */ --papir:#111316; --plocha:#191c20; --inkoust:#eef1f4; --tichy:#a3abb4; --linka:#2a2e34; --linka-silna:#343a41; --akcent:#d8c169; --akcent-tmavy:#ecdb9a; --akcent-signal:#c7ae4e; --cislo:#eef1f4; --zvyrazneni:#1d2127; --stin:0 1px 2px rgba(0,0,0,.5); --stin-hover:0 12px 28px -14px rgba(0,0,0,.75); --rubrika:#cfc7b8; --rubrika:oklch(0.84 0.09 var(--h)); /* ≥9:1 na tmavé zemi */ --rubrika-tint:#1e2228; --rubrika-tint:oklch(0.26 0.03 var(--h)); } [style*="--h"],[data-h]{ --rubrika:oklch(0.84 0.09 var(--h)); --rubrika-tint:oklch(0.28 0.04 var(--h)); } } /* Ruční přepínač režimu. Bez skriptu se nikdy neuplatní — jen v okamžiku, kdy něco nastaví data-tema na . Hodnoty jsou stejné jako výš. */ :root[data-tema="tmave"]{ --papir:#111316; --plocha:#191c20; --inkoust:#eef1f4; --tichy:#a3abb4; --linka:#2a2e34; --linka-silna:#343a41; --akcent:#d8c169; --akcent-tmavy:#ecdb9a; --akcent-signal:#c7ae4e; --cislo:#eef1f4; --zvyrazneni:#1d2127; --stin:0 1px 2px rgba(0,0,0,.5); --stin-hover:0 12px 28px -14px rgba(0,0,0,.75); --rubrika:#cfc7b8; --rubrika:oklch(0.84 0.09 var(--h)); --rubrika-tint:#1e2228; --rubrika-tint:oklch(0.26 0.03 var(--h)); } :root[data-tema="svetle"]{ --papir:#ffffff; --plocha:#f6f7f9; --inkoust:#15181c; --tichy:#5c636b; --linka:#e5e8ec; --linka-silna:#d3d8de; --akcent:#6f5e1c; --akcent-tmavy:#4f4212; --akcent-signal:#9a8226; --cislo:#15181c; --zvyrazneni:#eff3f7; --stin:0 1px 2px rgba(16,24,40,.05), 0 1px 1px rgba(16,24,40,.03); --stin-hover:0 12px 28px -14px rgba(16,24,40,.28); --rubrika:#5b4f45; --rubrika:oklch(0.42 0.10 var(--h)); --rubrika-tint:#eef1f4; --rubrika-tint:oklch(0.96 0.02 var(--h)); } [data-tema="tmave"] [style*="--h"],[data-tema="tmave"] [data-h]{ --rubrika:oklch(0.84 0.09 var(--h)); --rubrika-tint:oklch(0.28 0.04 var(--h)); } [data-tema="svetle"] [style*="--h"],[data-tema="svetle"] [data-h]{ --rubrika:oklch(0.42 0.10 var(--h)); --rubrika-tint:oklch(0.93 0.03 var(--h)); } /* --------------------------------------------------------------------------- 13 BAREV RUBRIK — ručně zvolené, ne dopočítané Tlumená tisková paleta: každá rubrika má vlastní barvu, ne odstín odvozený z jednoho čísla. Všechny jsou schválně stejně tmavé (kontrast 5,6–7,1:1 na papíru), takže barva je kód, ne váha, a nic nekřičí víc než zbytek. POZOR — tohle je ta změna, o které jsme mluvili předem: ruční barvy se nedají navěsit na číslo --h, protože CSS neumí selektovat podle hodnoty proměnné. Generátor proto musí napsat slug rubriky do atributu, jeden řádek: Pozn.: kde je slug na , NEPIŠTE už inline --h na jednotlivé karty. Vlastní deklarace na kartě přebije barvu zděděnou z , takže by se místo ručně zvolené barvy rubriky použil dopočet. Inline --h nechte jen tam, kde slug není (hledání napříč rubrikami, štítky, mapa webu). Dokud ho nenapíše, stránka dál použije --h a dopočítanou barvu z bloku výš — nic se nerozbije, jen barvy nebudou ty ruční. --h u rubrik zůstává, hodí se pro cokoli, co slug nemá (štítky, vyhledávání, mapa webu). rubrika slug světlá tmavá tón Kuchyně a spotřebiče kuchyne #8f4a1e #e6a97e pálená okrová Koupelna a WC koupelna #16576b #86c0d4 petrolejová Nábytek a úložné prostory nabytek #6d4a35 #cfa992 vlašský ořech Interiér, textil a dekorace interier #7a3350 #dc9cb4 švestková Pokoje a dispozice pokoje #5b3f7a #bda6de lilková Topení, klima a energie topeni-a-energie #a13a24 #f0997f cihlová Stavba a rekonstrukce stavba #4e5940 #adbb9c šalvějová Okna, dveře a plášť domu plast-domu #33427e #9fadea indigová Voda, elektro a technika domu technika-domu #45566b #a8bccb ocelová Zahrada zahrada #2f6135 #8ac68f lesní zelená Terasa, bazén a exteriér exterier #1c6360 #7fc7c1 tyrkysová Domácnost a úklid domacnost #6b5a50 #cbb6a9 kamenná Bydlení, peníze a právo nemovitosti #3f4448 #b9c1c6 grafitová --------------------------------------------------------------------------- */ /* světlý režim */ [data-rubrika="kuchyne"]{--h:40;--rubrika:#8f4a1e;--rubrika-tint:#efe4da} [data-rubrika="koupelna"]{--h:230;--rubrika:#16576b;--rubrika-tint:#dfe9ec} [data-rubrika="nabytek"]{--h:70;--rubrika:#6d4a35;--rubrika-tint:#eae0d6} [data-rubrika="interier"]{--h:350;--rubrika:#7a3350;--rubrika-tint:#f0e2e7} [data-rubrika="pokoje"]{--h:310;--rubrika:#5b3f7a;--rubrika-tint:#e8e2f0} [data-rubrika="topeni-a-energie"]{--h:25;--rubrika:#a13a24;--rubrika-tint:#f4e2dd} [data-rubrika="stavba"]{--h:95;--rubrika:#4e5940;--rubrika-tint:#e4e8dd} [data-rubrika="plast-domu"]{--h:260;--rubrika:#33427e;--rubrika-tint:#dfe2f0} [data-rubrika="technika-domu"]{--h:200;--rubrika:#45566b;--rubrika-tint:#e4e8ec} [data-rubrika="zahrada"]{--h:145;--rubrika:#2f6135;--rubrika-tint:#dceadf} [data-rubrika="exterier"]{--h:180;--rubrika:#1c6360;--rubrika-tint:#d9eae8} [data-rubrika="domacnost"]{--h:120;--rubrika:#6b5a50;--rubrika-tint:#eae5e1} [data-rubrika="nemovitosti"]{--h:285;--rubrika:#3f4448;--rubrika-tint:#e3e6e8} @media (prefers-color-scheme:dark){ [data-rubrika="kuchyne"]{--rubrika:#e6a97e;--rubrika-tint:#2e241c} [data-rubrika="koupelna"]{--rubrika:#86c0d4;--rubrika-tint:#17262c} [data-rubrika="nabytek"]{--rubrika:#cfa992;--rubrika-tint:#28211c} [data-rubrika="interier"]{--rubrika:#dc9cb4;--rubrika-tint:#2c1d24} [data-rubrika="pokoje"]{--rubrika:#bda6de;--rubrika-tint:#221d2e} [data-rubrika="topeni-a-energie"]{--rubrika:#f0997f;--rubrika-tint:#301e19} [data-rubrika="stavba"]{--rubrika:#adbb9c;--rubrika-tint:#22261e} [data-rubrika="plast-domu"]{--rubrika:#9fadea;--rubrika-tint:#1c2033} [data-rubrika="technika-domu"]{--rubrika:#a8bccb;--rubrika-tint:#1f262b} [data-rubrika="zahrada"]{--rubrika:#8ac68f;--rubrika-tint:#182618} [data-rubrika="exterier"]{--rubrika:#7fc7c1;--rubrika-tint:#142625} [data-rubrika="domacnost"]{--rubrika:#cbb6a9;--rubrika-tint:#29221e} [data-rubrika="nemovitosti"]{--rubrika:#b9c1c6;--rubrika-tint:#1f2427} } /* ruční přepínač režimu */ [data-tema="tmave"] [data-rubrika="kuchyne"]{--rubrika:#e6a97e;--rubrika-tint:#2e241c} [data-tema="tmave"] [data-rubrika="koupelna"]{--rubrika:#86c0d4;--rubrika-tint:#17262c} [data-tema="tmave"] [data-rubrika="nabytek"]{--rubrika:#cfa992;--rubrika-tint:#28211c} [data-tema="tmave"] [data-rubrika="interier"]{--rubrika:#dc9cb4;--rubrika-tint:#2c1d24} [data-tema="tmave"] [data-rubrika="pokoje"]{--rubrika:#bda6de;--rubrika-tint:#221d2e} [data-tema="tmave"] [data-rubrika="topeni-a-energie"]{--rubrika:#f0997f;--rubrika-tint:#301e19} [data-tema="tmave"] [data-rubrika="stavba"]{--rubrika:#adbb9c;--rubrika-tint:#22261e} [data-tema="tmave"] [data-rubrika="plast-domu"]{--rubrika:#9fadea;--rubrika-tint:#1c2033} [data-tema="tmave"] [data-rubrika="technika-domu"]{--rubrika:#a8bccb;--rubrika-tint:#1f262b} [data-tema="tmave"] [data-rubrika="zahrada"]{--rubrika:#8ac68f;--rubrika-tint:#182618} [data-tema="tmave"] [data-rubrika="exterier"]{--rubrika:#7fc7c1;--rubrika-tint:#142625} [data-tema="tmave"] [data-rubrika="domacnost"]{--rubrika:#cbb6a9;--rubrika-tint:#29221e} [data-tema="tmave"] [data-rubrika="nemovitosti"]{--rubrika:#b9c1c6;--rubrika-tint:#1f2427} [data-tema="svetle"] [data-rubrika="kuchyne"]{--rubrika:#8f4a1e;--rubrika-tint:#efe4da} [data-tema="svetle"] [data-rubrika="koupelna"]{--rubrika:#16576b;--rubrika-tint:#dfe9ec} [data-tema="svetle"] [data-rubrika="nabytek"]{--rubrika:#6d4a35;--rubrika-tint:#eae0d6} [data-tema="svetle"] [data-rubrika="interier"]{--rubrika:#7a3350;--rubrika-tint:#f0e2e7} [data-tema="svetle"] [data-rubrika="pokoje"]{--rubrika:#5b3f7a;--rubrika-tint:#e8e2f0} [data-tema="svetle"] [data-rubrika="topeni-a-energie"]{--rubrika:#a13a24;--rubrika-tint:#f4e2dd} [data-tema="svetle"] [data-rubrika="stavba"]{--rubrika:#4e5940;--rubrika-tint:#e4e8dd} [data-tema="svetle"] [data-rubrika="plast-domu"]{--rubrika:#33427e;--rubrika-tint:#dfe2f0} [data-tema="svetle"] [data-rubrika="technika-domu"]{--rubrika:#45566b;--rubrika-tint:#e4e8ec} [data-tema="svetle"] [data-rubrika="zahrada"]{--rubrika:#2f6135;--rubrika-tint:#dceadf} [data-tema="svetle"] [data-rubrika="exterier"]{--rubrika:#1c6360;--rubrika-tint:#d9eae8} [data-tema="svetle"] [data-rubrika="domacnost"]{--rubrika:#6b5a50;--rubrika-tint:#eae5e1} [data-tema="svetle"] [data-rubrika="nemovitosti"]{--rubrika:#3f4448;--rubrika-tint:#e3e6e8}