/* ============================================================ ASTORIE — SPOLEČNÝ VIZUÁLNÍ ZÁKLAD PRO VŠECHNY APLIKACE ------------------------------------------------------------ JEDINÝ ZDROJ PRAVDY. Originál žije v ~/agent-kit/templates/brand.css a do projektů se rozesílá skriptem SYNCHRONIZOVAT-VIZUAL.command. Kopii v projektu NEUPRAVUJ — přepíše se. Změna se dělá tady. Načítat PŘED app-specifickým CSS. TŘI VRSTVY. Nemíchat je. 1) ZNAČKA — identita. Neměnit, nepřidávat. 2) STAVY — význam (ok / pozor / chyba / info / neutrál). Pevná sada. 3) KATEGORIE — odlišení bez významu (grafy, štítky, segmenty). Pevná sada. Vrstva 1 je z oficiálního manuálu vizuální identity (Breakit, s.r.o.), uloženého v agent-kit/brand/logomanual/. Manuál říká doslova: „Barevnost nelze nijak měnit či doplňovat o jiné barvy." Vrstvy 2 a 3 jsou proto ROZŠÍŘENÍ pro softwarová rozhraní, které manuál neřeší (popisuje tisk, roll-upy, vizitky). Bez stavových barev nejde postavit CRM. Čeká na písemné schválení majitelky — do té doby je používej, ale neuváděj je jako firemní barvy navenek. Aplikace smí používat všechny tři. Nová barva mimo ně = souhlas majitelky a zápis SEM, ne do app CSS. ============================================================ */ :root { /* ===== 1) ZNAČKA — POVINNÉ, NEMĚNIT ===== */ --astorie-petrol: #003D4C; /* OFICIÁLNÍ, Pantone 548 C. Hlavní firemní barva — nadřazená oranžové, protože barva názvu je nadřazena symbolu. */ --astorie-orange: #FC4C02; /* OFICIÁLNÍ, Pantone 1655 C. Symbol motýla, akcenty, velké plochy. Bílý text na ní má kontrast jen 3,40:1 — viz --astorie-orange-dark. */ --astorie-petrol-2: #005A70; /* odvozeno: světlejší odstín oficiální petrolejové (stejný odstín 192°) */ --astorie-orange-2: #FF6A2A; /* odvozeno: světlejší oranžová — jen gradient a hover, nikdy text */ --astorie-orange-dark: #C23A02; /* odvozeno: oranžová v čitelné podobě (5,38:1) — tlačítka a text */ --astorie-cream: #F7F4EF; /* jemné pozadí, karty */ --astorie-bg: #F7F6F3; /* pozadí stránky */ --astorie-ink: #1D2B30; /* základní text */ --astorie-muted: #637781; /* tlumený text */ --astorie-line: rgba(0,0,0,.08); /* jemné linky (beze změny, kvůli stávajícím appkám) */ --astorie-line-2: #E5E7EB; /* výraznější rámeček */ /* ===== 2) STAVY — POVINNÁ SADA, NEVYMÝŠLET VLASTNÍ ===== Každý stav má tři tokeny: -text (popisek a ikona), -tint (pozadí odznaku), -kraj (rámeček). Všechny dvojice text/tint mají kontrast nad 5,5:1. ORANŽOVÁ NENÍ STAV. Je to akcent značky. Kdo ji použije pro „pozor", rozbije obojí — uživatel pak nepozná tlačítko od varování. */ --stav-ok-text: #1E6B24; --stav-ok-tint: #E8F3E9; --stav-ok-kraj: #BBD9BE; --stav-pozor-text: #8A5300; --stav-pozor-tint: #FFF3E0; --stav-pozor-kraj: #E6CC9E; --stav-chyba-text: #B3261E; --stav-chyba-tint: #FBE9E7; --stav-chyba-kraj: #E8B4AE; --stav-info-text: #005A70; --stav-info-tint: #E4F1F2; --stav-info-kraj: #A9CFD3; --stav-neutral-text: #4A5A63; --stav-neutral-tint: #EEF1F2; --stav-neutral-kraj: #CFD8DC; /* ===== 3) KATEGORIE — pro grafy, segmenty, štítky ===== Rozlišují, nic neznamenají. Pořadí je závazné: první kategorie vždy --kat-1, další --kat-2 atd., ať je stejná věc v každé appce stejně barevná. Používat jako VÝPLŇ (sloupec, výseč, tečka), ne jako text na bílé. */ --kat-1: #003D4C; /* petrol */ --kat-2: #FC4C02; /* oranžová */ --kat-3: #2B5C8A; /* modrá */ --kat-4: #3F6B52; /* salvěj */ --kat-5: #A8741A; /* zlatá */ --kat-6: #6D3D5E; /* švestka */ /* ===== VÝROČNÍ SADA „25 LET" — schváleno majitelkou 19. 9. 2026 ===== Platí POUZE pro materiály k 25. výročí (prezentace, plakety, podtácky, jmenovky). Do aplikací, CRM ani běžného webu nepatří. Manuál zlatou nezná — je to schválená výroční výjimka, ne rozšíření firemní palety. Zlatý motýl je dovolen jen v téhle sadě; všude jinde je motýl oranžový. */ --vyroci-zlata: #B99A55; /* zlatá motýla a značkových prvků */ --vyroci-zlata-svetla: #DCBB74; /* světlejší zlatá — pruhy, gradienty, zvýraznění */ --vyroci-papir: #E7DFCA; /* teplý papírový podklad výročních tiskovin */ /* Kontrast zlaté: na bílé jen 2,69:1 a na krémové 2,45:1 — jako TEXT na světlém podkladu se nepoužívá vůbec. Na petrolejové #003D4C má zlatá 4,41:1 a světlá zlatá 6,44:1 — tam je čitelná. Petrolejový text na zlaté ploše má 4,41:1. */ /* ===== TYPOGRAFIE A TVARY ===== */ --astorie-font: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --astorie-font-patkove: 'Newsreader', Georgia, "Times New Roman", serif; /* jen delší souvislý text */ --astorie-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --astorie-radius: 10px; /* ===== Aliasy pro zpětnou kompatibilitu s HUBem ===== */ --petrol: var(--astorie-petrol); --petrol2: var(--astorie-petrol-2); --orange: var(--astorie-orange); --cream: var(--astorie-cream); --astorie-ok: var(--stav-ok-text); --astorie-warn: var(--stav-chyba-text); /* pozor: historicky špatně pojmenované, je to CHYBA */ } /* ===== PÍSMA — samohostovaná, nikdy z Google CDN ===== SCHVÁLENO majitelkou 19. 9. 2026 jako Doplněk 01 manuálu vizuální identity. Viz agent-kit/brand/logomanual/DOPLNEK-01-digitalni-pisma.md Manuál definuje Reckless (logo) a Roobert (slogan) — na obě chybí webová licence — a jako náhradu jmenuje Arial pro Word, e-mailový podpis a PowerPoint. Web a aplikace v manuálu nejsou. Tuhle mezeru vyplňují Onest a Newsreader. Mapování řezů podle manuálu: Roobert Bold → Onest Bold 700 (tlačítka, důrazné popisky) Roobert Medium → Onest Medium 500 (běžné UI, navigace, tabulky) Reckless Bold → Newsreader Bold 700 (nadpisy delších textů) Reckless Reg. → Newsreader Regular 400 (souvislý text) Platí jen pro web a aplikace. Tisk, Word, e-mailový podpis a PowerPoint se nemění: tam dál platí Reckless, Roobert a Arial podle manuálu. Newsreader nedávej do display velikosti vedle loga — logo je v Recklessu a dva různé patkové řezy vedle sebe se perou. Newsreader patří do běžícího textu. Proč samohostování: načítání písem z fonts.googleapis.com odesílá IP adresu návštěvníka Googlu. LG München I (3 O 17493/20, 20. 1. 2022) to označil za porušení GDPR. U dohlížené finanční firmy to nestojí za riziko. Rozsah: latin + latin-ext, váhy 100–900. Pokrývá češtinu, slovenštinu, polštinu i maďarštinu — tedy i klientská jména, která v CRM reálně přijdou. Prohlížeč stáhne jen ten rozsah, který stránka potřebuje. Pozor: staré ořezy z ročenky (onest-cs-v2.woff2) mají jen váhy 600–800 a 445 znaků. Do aplikací NEPATŘÍ — rozbily by se na nečeském jméně. */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../pisma/onest-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: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../pisma/onest-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: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../pisma/newsreader-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: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../pisma/newsreader-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; } /* ===== Co říká oficiální manuál (agent-kit/brand/logomanual/) ===== - Logo je z písma Reckless Bold; slogan z Roobert Medium. - Symbol motýla je VŽDY oranžový. Nikdy nepřebírá petrolejovou barvu písma — výjimkou je jen vodoznak nebo potlačený prvek v pozadí. - Na tmavém petrolejovém pozadí bílé písmo, motýl zůstává oranžový. Na oranžovém pozadí bílé písmo i symbol. - Ochranná zóna: výška litery „A" (doporučená), její poloměr (minimální). Do zóny nesmí zasahovat žádný cizí prvek. Platí i pro logo se sloganem. - Minimální velikost loga: 6 mm. - Černobílá varianta jen tam, kde není možný barevný tisk. Negativ je bílý. - Logo a symbol není dovoleno upravovat, barevně ani tvarově. */ /* ===== Značkové texty ===== */ :root { --astorie-claim: "S lehkostí světem financí"; --astorie-anniversary: "25 let"; --astorie-owner: "ASTORIE a.s."; } .astorie-claim::after { content: var(--astorie-claim); } .astorie-anniversary::after { content: var(--astorie-anniversary); } .astorie-owner::after { content: var(--astorie-owner); } /* ===== Assety — vždy originál ze /static/brand/, nikdy překreslené ===== astorie-logo-color.png · astorie-logo-white.png astorie-logo-25-color.png · astorie-logo-25-white.png astorie-motyl-orange.svg · astorie-motyl-white.svg astorka-avatar.svg */ /* ===== Hotové stavové odznaky — používat je, ne stavět vlastní ===== POVINNÉ: stav se nikdy nesděluje jen barvou. Odznak vždy nese i slovo. Barvoslepý uživatel a černobílý tisk jinak nepoznají nic. */ .stav { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.6; border:1px solid transparent; white-space:nowrap; } .stav-ok { color:var(--stav-ok-text); background:var(--stav-ok-tint); border-color:var(--stav-ok-kraj); } .stav-pozor { color:var(--stav-pozor-text); background:var(--stav-pozor-tint); border-color:var(--stav-pozor-kraj); } .stav-chyba { color:var(--stav-chyba-text); background:var(--stav-chyba-tint); border-color:var(--stav-chyba-kraj); } .stav-info { color:var(--stav-info-text); background:var(--stav-info-tint); border-color:var(--stav-info-kraj); } .stav-neutral { color:var(--stav-neutral-text); background:var(--stav-neutral-tint); border-color:var(--stav-neutral-kraj); } /* ===== Tlačítko ===== Bílá na oficiální oranžové #FC4C02 má kontrast 3,40:1 — na běžný text to podle WCAG AA nestačí a u dohlížené finanční firmy to nechceme mít v produkčním CRM. Tlačítko proto používá --astorie-orange-dark (5,38:1), což je tmavší odstín téže barvy v rámci škály, kterou manuál sám povoluje. Čistá #FC4C02 zůstává logu, symbolu, velkým plochám a netextovým prvkům. */ .astorie-btn { display:inline-flex; align-items:center; gap:8px; background:var(--astorie-orange-dark); color:#fff; border:none; padding:10px 18px; border-radius:var(--astorie-radius); font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; transition:.15s; } .astorie-btn:hover { filter:brightness(1.06); } .astorie-btn:focus-visible { outline:3px solid var(--astorie-petrol-2); outline-offset:2px; } .astorie-panel { background:#fff; border:1px solid var(--astorie-line-2); border-radius:14px; box-shadow:0 1px 2px rgba(2,61,75,.06); }