# 22 - Znacka a design

Naprogramovano. Navrh, ze ktereho to vzniklo, je artefakt "WorkNuke Rebrand".

Tenhle dokument popisuje, **jak znacka funguje v kodu** - kde se meni barvy,
pismo a znak, a co se pri prejmenovani menit nesmi.

## Kde se meni vzhled

| Co                      | Kde                                  |
| ----------------------- | ------------------------------------ |
| Barvy, pismo, utility   | `web/src/index.css`                  |
| Znak a slovni znacka    | `web/src/components/layout/Logo.tsx` |
| Kontakty a fakturacni udaje | provozovatel portalu v Nastaveni, Firmy (`GET /api/public/brand`) |
| Nazev, claim, zaloha kontaktu | `web/src/config/brand.ts`          |
| Nazev na serveru        | `BRAND_NAME`, vychozi v `src/config.ts` |
| Titulek a fonty stranky | `web/index.html`                     |

Zmena barevnosti celeho webu i portalu je zmena hodnot v `index.css`. Web
i portal stoji na tychz tokenech, takze se projevi naraz na obojim.

### Nazev je na dvou mistech, a je to zamer

Klient je staticky soubor, takze runtime promenne containeru do prohlizece
nedosahnou. Proto:

- **server** cte `BRAND_NAME` (vychozi `WorkNuke`) a pouziva ho v titulku
  Swaggeru a v OpenAPI,
- **klient** cte `VITE_BRAND_NAME` **pri buildu**, jinak vychozi hodnotu
  v `brand.ts`.

Obe maji tutéž vychozi hodnotu, takze bez nastaveni cehokoliv sedi.

**Pozor na zamenu s firmou v datech.** Pozvanka ukazuje jmeno firmy, do ktere
zve, a ukazkova firma se jmenuje Automia. Neni to zbytek po prejmenovani, je
to zaznam zakaznika - zadna promenna znacky ho nemeni.

### Kontakty bere web z provozovatele, `brand.ts` je jen zaloha

Kontaktni a fakturacni udaje uz nejsou natvrdo v kodu. Zdrojem je firma
oznacena jako **provozovatel portalu** (`Tenant.portalOperator`, nastavuje
spravce platformy v Nastaveni, Firmy - viz
[07-firmy-a-prava.md](07-firmy-a-prava.md)). Server je vraci bez prihlaseni
z `GET /api/public/brand` s `Cache-Control` na minutu, aby se zmena projevila
bez restartu a bez noveho buildu klienta.

| Pole z provozovatele        | Odkud na firme                        |
| --------------------------- | ------------------------------------- |
| `name`, `legalName`         | `name` (obchodni jmeno, zvlastni pole neni) |
| `ico`, `dic`, `address`, `legalForm` | udaje z ARES nebo rucne       |
| `email`, `phone`, `website` | `contactEmail`, `contactPhone`, `website` |

Na klientovi to sklada `useBrand()` (`web/src/hooks/useBrand.ts`): vraci
hned statickou hodnotu z `brand.ts`, po odpovedi serveru ji **po polich**
vymeni - `null` ze serveru nechava zalohu, takze castecne vyplneny
provozovatel nerozbije paticku. Bez provozovatele nebo bez odpovedi zustane
`brand.ts` cely. Nacita se jednou za nacteni stranky a sdili pres
`useSyncExternalStore`, aby paticka, kontakt a vyzva k akci neposlaly tri
stejne dotazy.

Pouziva ho `Contact`, `Footer`, `CallToAction`, `About`, `Login`, `Logo`
a `usePageMeta`. Kdo pise novy kus webu s kontaktem, bere `useBrand()`,
ne `brand` primo.

Co **zustava staticke** v `brand.ts` a provozovatel to nema: `claim`,
`description`, `founded`, `social` a `support` (otevirajici doba, SLA).
Jsou to texty znacky, ne udaje firmy. Adresa ze serveru je jedna textova
radka, staticka zaloha ma tri (ulice, PSC a mesto, zeme); `website` zaloha
nema, bez provozovatele je `null`.

Kontaktni formular na webu (`pages/Contact.tsx`) ma vedle poli i vyber
priloh (`FilePicker`, nejvys 3 soubory po 5 MB) a poptavka konci jako ticket
provozovatele, viz [06-tickety.md](06-tickety.md).

## Barvy

| Token        | Hodnota   | K cemu                                       |
| ------------ | --------- | -------------------------------------------- |
| `brand-400`  | `#B7FF3C` | Akcent. **Jedina hlasita barva na strance.** |
| `ink-900`    | `#0F1411` | Podklad. Cerna do zelena, ne do modra.       |
| `ink-600`    | `#2E3A32` | Linky a ohraniceni                           |
| `ok-400`     | `#2DD4BF` | Stav "v poradku"                             |
| `warn-400`   | `#FBBF24` | Stav, ktery chce pozornost                   |
| `danger-400` | `#FB7185` | Chyba                                        |

**Proc je "v poradku" modrozelene a ne zelene.** Akcent je zeleny. Kdyby byl
zeleny i stav, byly by na jedne obrazovce dve zelene, kazda o necem jinem,
a nikdo by je nerozlisil. Akcent znamena "tady se neco stane", stav znamena
"takhle to dopadlo".

**Sedy odstin ma zelenou prichut.** Neni to nahoda ani chyba prevodu: seda
s naznakem odstinu podkladu drzi paletu pohromade, ciste neutralni seda vedle
zelenocerne pusobi spinave.

### Druhy akcent uz neni barva

`accent-300` az `accent-600` **ukazuji do teze zelene rady** jako `brand-*`.
Klice zustaly, protoze je pouziva 341 mist v kodu; nechat je namirene na
fialovou by znamenalo dve akcentove barvy, prepsat je vsechny naraz zbytecne
velkou zmenu. Az se ta mista projdou, klice zmizi.

Totez plati pro utilitu `text-gradient`: uz negeneruje prechod, ale plnou
zelenou. Nazev zustal, aby se osm mist nemuselo prepisovat.

## Pismo

| Role       | Pismo         | Kde                                |
| ---------- | ------------- | ---------------------------------- |
| Nadpisy    | Archivo 800   | `h1` az `h4`, trida `font-display` |
| Text       | IBM Plex Sans | vychozi pismo dokumentu            |
| Cisla a ID | IBM Plex Mono | casy, ID ticketu, nadtitulky       |

Nadpisy maji `letter-spacing: -0.035em` a `line-height: 1.04`. Prave tesny
proklad delal v predloze ten rozdil; Inter takhle tesne nejde bez trikareni.

Plex Sans a Plex Mono jsou od jednoho autora, takze spolu ladi bez ladeni.

## Znak

Plocha bomba mirici k zemi: nos vlevo dole, tri kridelka vpravo nahore, tri
odletove cary u nosu. Kresli se svisle a otoci o 45 stupnu, aby se geometrie
dala cist a upravovat.

Je **plochy zamerne**, ne render. Plochy znak snese jakoukoliv velikost,
obarvi se jednou promennou (`currentColor`) a nezestarne s modou na 3D.

`LogoMark` je samostatny export, takze se da pouzit i mimo hlavicku - napriklad
uvnitr snimku portalu v heru.

## Hero

| Prvek        | Jak to je                                  |
| ------------ | ------------------------------------------ |
| Nad nadpisem | Verzalkova radka v mono, prokladana        |
| Nadpis       | Dve slova na radek, druhy radek zeleny     |
| Tlacitka     | Jedna zelena pilulka plus textovy odkaz    |
| Pod textem   | Ctyri slovesa s ikonou a jednou vetou      |
| Snimek       | Vybiha z prave hrany                       |
| Pozadi       | Tri zelene radialni prechody, zadna mrizka |

**Zare je pozadi sekce, ne vrstva pod ni.** Prekryv se zapornym z-indexem se
schoval za podklad stranky a nebyl videt. Element se svym vlastnim pozadim
tenhle problem nema.

**Snimek vybiha z hrany schvalne.** Oriznuty pusobi jako vyrez z neceho
vetsiho, cely v ramecku pusobi jako obrazek.

## Ctyri slovesa

Sbira, Automatizuje, Propojuje, Deleguje. Neni to marketingova ozdoba, jsou to
ctyri kroky, ktere portal opravdu dela:

| Sloveso      | Co za tim v portalu je        |
| ------------ | ----------------------------- |
| Sbira        | Udalosti, spoustece, webhooky |
| Automatizuje | Skripty konektoru             |
| Propojuje    | Strom kroku v builderu        |
| Deleguje     | Tickety a prirazeni lidem     |

Kdyz se ctverice zmeni, musi se zmenit i tady - jinak web slibuje neco jineho,
nez aplikace dela.

## Co se pri prejmenovani nemeni

Vypada to jako jmeno, ale jsou to identifikatory:

| Co                      | Proc zustava                                      |
| ----------------------- | ------------------------------------------------- |
| `automia.token`         | Prejmenovani odhlasi vsechny prihlasene           |
| `automia.tenant`        | Zapomnela by se vybrana firma                     |
| `tnt_automia`           | Sedi v ticketech, automatizacich i rozlozeni      |
| `/apps/csbot-prototype` | Verejna adresa a routovani v Caddy, viz AGENTS.md |
| Ukazkove ucty           | Prihlasovaci e-maily v seedu. Data, ne texty.     |

Firma **Automia v datech je neco jineho nez produkt WorkNuke**. Je to zaznam
zakaznika v ukazkovych datech a prejmenovat ho nema duvod.

## Co chybi

| Chybi                 | Poznamka                                            |
| --------------------- | --------------------------------------------------- |
| Materialy mimo web    | prezentace, obrazky pro socialni site               |
| Domena                | `worknuke.cz` v `brand.ts` jako zaloha, web provozovatele az z Nastaveni |
| Prochazeni `accent-*` | 341 mist, ktera uz nemaji duvod pouzivat druhy klic |

## Rozmazani jen tam, kde neco prekryva

`.glass` je podklad skoro kazdeho panelu a **nema `backdrop-filter`**.

Puvodne mel `blur(14px)`, jenze pod kartami je plna barva (`bg-ink-950` na
dashboardu): rozmazavala se jednolita plocha, zadny rozdil videt nebyl a kazda
karta si za to drzela vlastni rozmazanou vrstvu ve skladaci. Pri dvaceti
kartach na obrazovce to vytizilo GPU natolik, ze vedle portalu sekalo
prehravani videa.

Rozmazani patri jen tam, kde pod nim neco opravdu projizdi:

| Kde                        | Trida             |
| -------------------------- | ----------------- |
| lepici hlavicka dashboardu | `backdrop-blur-xl` |
| lepici hlavicka webu       | `backdrop-blur-xl` |
| prekryv menu na verejnem webu | `backdrop-blur-xl` |

Podklad modalu a prekryv menu v portalu rozmazani **nemaji**: je to vrstva
pres celou obrazovku a pod ni lezi hlavicka, ktera rozmazana je. Kazda
animace pod dialogem (pulz tecky "Zive", spinner, obnova seznamu) pak
nutila prohlizec prepocitat rozmazani cele plochy, jeste pres to druhe -
a vedle portalu sekalo video pri kazdem otevrenem dialogu. Tmavy prekryv
s vyssim krytim (`bg-ink-950/85`) dela tutez praci zadarmo. Ze stejneho
duvodu tecka "Zive" nepulzuje: pulz ma jen stav, kdy se spojeni teprve
navazuje nebo obnovuje.

**Zadna nekonecna animace nad velkou rozmazanou plochou.** Zare na prihlaseni
a na webu jsou staticke: animovat pruhlednost objektu s `blur(120px)` znamena
prepocitavat obrovskou vrstvu porad dokola, i kdyz se na strance nic nedeje.

Kdo ma v systemu vypnute animace (`prefers-reduced-motion`), nedostane ani
ty zbyle.