# Nezávislý posudek vizuálního stylu: WordPress → úraz a cesta

**Autor:** GPT-6.1 Terra, xhigh · **Datum měření:** 28. 10. 2026 · **Rozsah:** vizuální analýza, nikoli úprava kalkulaček.

## Výsledek

Oba prototypy už používají Montserrat a modrou blízkou WordPressu, ale přímé sjednocení všech prvků na jediný styl by neodpovídalo skutečnosti. Na živém WordPressu se liší role hero, článkového titulku, sekce, karty i odkazu. Primární cíl je přiblížit rozpoznatelnou typografii, modrou/červenou a střídmou práci s linkou; ovládací prvky specifické pro kalkulačky přizpůsobit samostatně, protože na prohlédnutých stránkách nemají přímý ekvivalent.

Největší praktický rozdíl je v primárních akcích: úraz má modrý základ, cesta zelený základ, zatímco jediná zde doložená zelená WP akce **Srovnat pojištění** je odkaz v marketingové kartě zobrazený při hoveru. Neprokazuje univerzální tlačítko pro celý formulář. Přímé převzetí bílé na změřené zelené má navíc nízký kontrast. Navrhuji oddělit **naměřený vzor** od přístupné **adaptace** a nerozbít existující průchod ani výpočty.

## Metodika a hranice

- Živá autorita: [domovská stránka WordPressu](https://www.ceskepojisteni.cz/), z jejích skutečných odkazů objevené [povinné ručení](https://www.ceskepojisteni.cz/povinne-ruceni/) a [článek](https://www.ceskepojisteni.cz/blog/zdravotni-pojisteni-deti-cizincu-do-18-let/). [Seznam objevených odkazů](evidence/gpt-6.1-terra/wp-discover.json). Posuzované weby: [úraz v0.11.1](https://devel.kingux.cz/cmp_uraz/ferda-0.11.1/index.html) a [cestovní V19](https://sldevel.ceskepojisteni.cz/Tests/Standa/CePoTravelNextV19/index.php).
- Samostatný headless Chrome/Playwright, desktop 1440 × 900 a emulovaný mobil 375 × 812 CSS px. Po načtení `document.fonts.ready`; snímky celé stránky a computed styly prvků, rodičů a `::before`/`::after`, včetně `backgroundImage`, hran, stínu a outline. Snímky jsou vizuální doklad, JSON obsahuje hodnoty a selektory. Hover byl odečten po nejméně 800 ms; pro fokus se používalo Tab/Shift+Tab a zvláštní klávesnicový průchod. Stav `_focus` u WP CTA **neprokazuje fokus CTA**: v pokusu po odjezdu myši aktivním prvkem zůstalo `body`, takže ho jako důkaz fokusu CTA nepoužívám.
- WP: pouze nezbytné cookies. Před první navigací každého kontextu byla routou blokována každá metoda kromě GET, HEAD a OPTIONS. Neodesílal jsem smlouvy, platby ani chat. Úraz: profil s ukázkou, výběr rizik, editor trvalých následků, konfigurace vybrané nabídky. Cesta: vstupní formulář, navigace na výsledky, porovnání a rekapitulaci, ukázkový detail nabídky. Skoky na obrazovky jsou vizuální inspekce, nikoli důkaz celého skutečného průchodu nebo správnosti dat.
- Selektory níže identifikují **konkrétní změřený prvek**, ne obecnou specifikaci WordPressu. „Měření“ je odečet computed CSS; „interpretace“ je srovnání role; „návrh“ je nová implementační volba. Plošné přenášení CSS nebo běhového prostředí WordPressu není součástí zadání. Přechodové a personalizované stavy, další stránky, fyzický telefon, Safari a produkční workflow nebyly plošně testovány.

## Porovnání podle role

Hodnoty se vztahují k uvedeným příkladům. P1 = nejvyšší dopad na čitelnost a konzistenci, P2 = důležité doladění, P3 = následná úprava. Odkazy na data a obrázky jsou níže.

| Role a WP autorita | Úraz nyní | Cesta nyní | Změna úraz | Změna cesta | Priorita |
|---|---|---|---|---|---|
| **Marketingový hero:** `h1.title` 64/83,2 px, 600 desktop; 42/54,6 px, 600 mobil, #003b71. Barevné zvýraznění části textu je samostatná role. | `h1` vstupu 34/41,48, 700; mobil 25/30, 700, mobilní barva #173b58. Jde o funkční nadpis formuláře, nikoli plný marketingový hero. | Úvodní `h1` 58/62,64, 500; mobil 36/38,88, 500. | U pracovního titulku zachovat kompaktní měřítko; sjednotit jeho navy s WP a pro výraznější váhu zvážit 600. Hero 64/42 nepoužít mechanicky na každý krok. | Pokud je záměr vzhled marketingového hero, přiblížit 64/42 a 600; ověřit zalomení a výšku formuláře na mobilu. | P1 |
| **Titul článku:** `h1.main-page-title` 50/55, 800, #003b70 na obou zkoušených šířkách. | Krokový h1 34/25 a 700; menší než článek. | Výsledky `h1#results-count-heading` 50/29 a 500; rekapitulace stejně 50/29 a 500. | Vyšší váha 800 by věrněji odpovídala článku, ale není důkazem povinné váhy kalkulátoru; doporučuji 600–700 jako adaptaci a zachovat prostor pro krok. | Na výsledcích a rekapitulaci zvýšit váhu 500 nejprve na 600–700; ponechat menší mobilní velikost jako adaptaci místo převzetí mobilních 50 px článku. | P1 |
| **Sekční nadpis:** domov `h2.format-title` 32/35,2, 700 desktop, 24/26,4 mobil; produkt a článek na mobilu 28/30,8. | Sekce formuláře 14/22,4, 700; marketingový blok 25/32,5, 700. | Vstupní `h2` 28/33,04, 500; názvy nabídek 17 px, 700. | Hierarchii sekcí formuláře ponechat kompaktní; výrazné obsahové sekce přiblížit 32/24–28, 700 dle role. | Výraznější obsahový `h2` přiblížit váze 700; názvy nabídek nezvětšovat plošně na 32 px. | P1 |
| **Nadpis karty:** WP článkové karty `h2.name` 24/26,4, 600, #002e5f na obou šířkách. | Názvy rizik jsou součástí tlačítkových karet a jejich měřítko se řídí hustým výběrem. | Nabídkový `h2` 17 px, 700; `Travel Plus` v rekapitulaci 24 px, 700. | Vhodný vzor pro samostatné obsahové karty; u výběru rizik jde o adaptaci, zachovat možnost skenovat nabídku. | U samostatných nadpisů bloků zvážit 24/600, v seznamu nabídek raději zachovat hustotu a odlišit vybraný stav i jinak než barvou. | P2 |
| **Krátká červená linka:** `h2.format-title::after` 100 × 2 px, #f42534. Hero `h1.title` ji v měření nemá; některé sekce jsou zarovnané na střed, jiné vlevo. | `h1::after` je červený pseudo-element #f42434, přítomný také u pracovního titulku. | Úvodní `h1` ani `h2` formuláře tento pseudo-element nemají. | Ponechat ji jen tam, kde představuje záměrný oddělovač hlavní sekce; neodvozovat povinnost pod každý h1 z WP hero. | Přidat 100 × 2 px u významných obsahových sekcí jako návrh, nikoli pod každé pole či nabídku; zarovnání podle kompozice. | P2 |
| **Zelený odkaz v kartě:** `a.button` při hoveru 18/27, 400, bílé písmo, #51b24e, radius 8 px, bez `backgroundImage`; WP karta ho odhaluje při hoveru. | `button.button` Vybrat krytí 14/19,6, 650, bílé na #003b71, radius 12; ustálený hover #51b24e s #102f49. | Porovnat nabídky 18/21,6, 700, bílá na #00b53c, radius 8; hover #009b33 a stín. | Zachovat odlišení primární akce; pokud se přidává zelená jako adaptace, tmavý text nebo tmavší zelenou ověřit kontrastem. Radius 8 lze převzít z WP jako návrh sjednocení. | Zelená už nese výraznou roli; neuvažovat ji za přesnou WP hodnotu. Přehodnotit bílý text / pozadí kvůli kontrastu, případně zvolit tmavší zelenou; zachovat 8px radius. | P1 |
| **Výběr nabídky:** na prohlédnutých WP stránkách není doložen přímý ekvivalent výběru pojišťovny. | `button.button` Vybrat, 12 px / 650, #003b71, radius 12. | `button.button--navy` Vybrat má 13 px / 700, průhledný `backgroundColor`, ale `backgroundImage: linear-gradient(110deg,#00457e,#273443)`, radius 8. | Adaptace: navy jako příbuzná značka, velikost a hustotu ponechat dle úkolu, zvážit 8px rohy. | Gradient není změřený WP vzor pro výběr nabídky: ponechání či změna na plnou navy je návrh, ne prokázaná oprava; zachovat význam tlačítka. | P2 |
| **Sekundární akce:** odkaz `Navštívit blog` má průhlednou kotvu, zatímco `div.moreBlogInside` má 1px #002e5f, radius 15 a gradient `to top #f2f4f7 50%, transparent 50%`. Nelze číst pozadí pouze z kotvy. | Zrušit v dialogu bílá plocha, 1px #bccfdf, radius 12; Změnit průhledný ghost. | Vstupní outline bílá / 1px #003b71 / radius 8; v nabídkách Detail nabídky obdobně. | Jako adaptaci přiblížit obrys modré k WP; nikoli doslova obalit každý vnitřní ovladač 15px rámečkem. | U samostatných výrazných vedlejších akcí lze použít WP modrý obrys a 15px roh; kompaktní ovladače zachovat menší. | P2 |
| **Fokus:** skutečné tabulování WP ukázalo např. `a.header-phone` `outline: none 0px` a u teček karuselu nativní `auto 1px`; fokus WP CTA v tomto pokusu nedoložen. | Na Vybrat krytí skutečný fokus 3px solid #205db3. | Porovnat nabídky fokus 3px solid rgba(244,36,52,.35). | Výrazný vlastní fokus ponechat, ověřit proti pozadí a výřezu. | Fokus zachovat; zvýšit jeho viditelnost, pokud v konkrétním podkladu nestačí. Nenapodobovat chybějící WP outline. | P1 |
| **Vstupy a jejich bordery:** na třech prohlédnutých WP stránkách jsem neměřil ekvivalent zadávacího pole kalkulačky. WP sekundární blok má samostatný 1px navy obrys. | `#profile-age` bílé, 1px #b6c9d8, radius 10, 16/24, 400. | `#trip-date-from` bílé, 1px #c3d2dc, radius 8, 15/23,25, 400. | Považovat za adaptaci; zachovat čitelnost a fokus, nepředstírat WP token pro pole. | Totéž; 8px roh je kompatibilní se změřeným tlačítkem, ale není důkazem WP pole. | P2 |
| **Plochy a karty:** WP produktová karta `div.body`: #f2f4f7, radius 15, bez stínu; `backgroundImage` navy gradient s průhlednou polovinou. | Bílá karta rizika, 1px #cbd8e5, radius 13 a jemný stín; vybraná 1px navy + vnitřní linka. | Výsledky tvoří husté bílé karty s odlišnou strukturou; přímý WP ekvivalent nabídky chybí. | Při úpravě obsahových bloků použít WP světle šedou a 15px roh; vybrané riziko ponechat jasně rozpoznatelné textem a indikátorem. | Plochy zklidnit směrem k #f2f4f7 a 15 px tam, kde se nezhorší orientace v cenách; neodstraňovat hranice nutné pro porovnání. | P2 |
| **Dialog:** na změřeném WP není nalezen přímý srovnatelný editor či detail nabídky. | `dialog#detail-dialog`: bílá, desktop radius 18, stín; mobil 18/18/0/0. | `.modal.offer-detail-modal`: bílá, desktop radius 14, mobil 18/18/0/0; stín rgba(0,0,0,.25) 0 20px 70px. | Jde o adaptaci, zachovat ovládání, scroll a návrat fokusu; 15px WP karta není měření dialogu. | Totéž; nedělat z úrazového ani cestovního popupu autoritu pro druhý. | P2 |
| **Font:** WP `document.fonts` načítá Montserrat 300, 400, 600, 700, 800; hero používá 600, článek 800, karta 600. | Načten variabilní Montserrat 100–900; využita i váha 650. | Načten variabilní Montserrat 300–800; využity i 750. | Zachovat lokální font; preferovat pro odpovídající role WP váhy 400/600/700/800 místo plošného 650. | Zachovat lokální font; tam, kde se styl opravdu mapuje k WP, použít naměřenou váhu role; 750 u drobného ovládání je adaptace. | P2 |
| **Barvy textu:** hero #003b71, sekce #03407c, karty #002e5f; WP červená linka #f42534. Nejde o jednu přesnou navy. | #003b71 i #173b58; linka #f42434. | #003b71 a text #17283a; zelená #00b53c. | Mapovat významné nadpisy na konkrétní WP roli; druhou tmavou lze zachovat pro čitelný text. | Stejně mapovat hero, sekce a karty; zelenou neuvádět jako vzorek z WP. | P2 |

## Přístupnost a interpretace

Kontrast bílá / WP zelená #51b24e je vypočten přibližně **2,68 : 1**, bílá / cestovní #00b53c **2,74 : 1**. U běžného textu jsou pod obvyklým cílem 4,5 : 1; samotná velikost odkazu 18 px při váze 400 není dostatečným důvodem jej považovat za velký tučný text. Návrh, nikoli WP token: tmavší zelená **#00852c** s bílou má přibližně **4,78 : 1**; alternativou je tmavé písmo na značkové zelené. Otestovat kontrast i skutečný hover, disabled a fokus na konkrétním podkladu. Červená #f42534 na bílé má přibližně 4,07 : 1, proto ji nevolit automaticky pro drobné běžné texty.

Na WP `a.link` v kartě bývá prázdná překryvná kotva: viditelný rám a barvu maluje rodič. Podobně sekundární blogový odkaz sám nemá hranu ani pozadí; obojí má rodič. To je důvod, proč se hodnota `backgroundColor` samotné kotvy nemá vydávat za barvu výsledného tlačítka. Zachovat skutečný klávesnicový fokus prototypů je přístupnější než kopírovat změřené chybějící WP outline.

## Návrh tokenů odvozených pouze z WP

Jde o inventář naměřených hodnot a jejich navržené názvy, nikoli tvrzení, že WP tyto proměnné sám používá. Pro prvky bez ekvivalentu nové tokeny níže nevymýšlím.

```css
/* Přiřazení podle konkrétní role; nikoli globální přepsání všech prvků. */
--wp-hero-ink: #003b71;
--wp-section-ink: #03407c;
--wp-card-ink: #002e5f;
--wp-section-accent: #f42534;
--wp-card-surface: #f2f4f7;
--wp-card-radius: 15px;
--wp-secondary-border: #002e5f;
--wp-card-cta-hover-surface: #51b24e;
--wp-card-cta-radius: 8px;
--wp-section-rule-width: 100px;
--wp-section-rule-height: 2px;
--wp-family: Montserrat, sans-serif;
```

Hero 64/42 px a 600; článek 50 px/800 v obou měřených velikostech; sekce 32 desktop a 24 nebo 28 mobil / 700; název článkové karty 24 / 600. Nesjednocovat tyto naměřené role do jednoho `h1`/`h2` tokenu. Tmavší zelená #00852c a úprava fokusu jsou výslovně **návrhy přístupné adaptace**, ne hodnoty WordPressu.

## Ověřitelné důkazy

- WP domov [desktop data](evidence/gpt-6.1-terra/wp_home_1440.json), [desktop obraz](evidence/gpt-6.1-terra/wp_home_1440.png), [mobil data](evidence/gpt-6.1-terra/wp_home_375.json), [mobil obraz](evidence/gpt-6.1-terra/wp_home_375.png); produkt [desktop](evidence/gpt-6.1-terra/wp_product_1440.json), [mobil](evidence/gpt-6.1-terra/wp_product_375.json); článek [desktop](evidence/gpt-6.1-terra/wp_article_1440.json), [mobil](evidence/gpt-6.1-terra/wp_article_375.json).
- WP hover CTA a 100 × 2 pseudo-linka [data](evidence/gpt-6.1-terra/wp_cta_hover_1440.json), [obraz](evidence/gpt-6.1-terra/wp_cta_hover_1440.png); sekundární rodič při hoveru [data](evidence/gpt-6.1-terra/wp_secondary_hover_1440.json). Skutečný klávesnicový průchod [desktop](evidence/gpt-6.1-terra/wp_keyboard_1440.json), [mobil](evidence/gpt-6.1-terra/wp_keyboard_375.json); jednotlivé CTA nebylo při tomto průchodu doloženo jako aktivní prvek.
- Úraz profil [desktop](evidence/gpt-6.1-terra/uraz_1440.json), [mobil](evidence/gpt-6.1-terra/uraz_375.json), [obraz mobil](evidence/gpt-6.1-terra/uraz_375.png); [hover](evidence/gpt-6.1-terra/uraz_1440_hover.json), [fokus](evidence/gpt-6.1-terra/uraz_1440_focus.json); rizika [desktop](evidence/gpt-6.1-terra/uraz_risks_1440.json), [mobil](evidence/gpt-6.1-terra/uraz_risks_375.json); popup [desktop](evidence/gpt-6.1-terra/uraz_popup_1440.json), [mobil](evidence/gpt-6.1-terra/uraz_popup_375.json); konfigurace [desktop](evidence/gpt-6.1-terra/uraz_customize_1440.json), [mobil](evidence/gpt-6.1-terra/uraz_customize_375.json).
- Cesta vstup [desktop](evidence/gpt-6.1-terra/cesta_1440.json), [mobil](evidence/gpt-6.1-terra/cesta_375.json); [hover](evidence/gpt-6.1-terra/cesta_1440_hover.json), [fokus](evidence/gpt-6.1-terra/cesta_1440_focus.json); výsledky [desktop](evidence/gpt-6.1-terra/cesta_results_1440.json), [mobil](evidence/gpt-6.1-terra/cesta_results_375.json); porovnání [desktop](evidence/gpt-6.1-terra/cesta_comparison_1440.json), [mobil](evidence/gpt-6.1-terra/cesta_comparison_375.json); rekapitulace [desktop](evidence/gpt-6.1-terra/cesta_review_1440.json), [mobil](evidence/gpt-6.1-terra/cesta_review_375.json); detail [desktop data](evidence/gpt-6.1-terra/cesta_popup_1440.json), [mobil data](evidence/gpt-6.1-terra/cesta_popup_375.json), [mobil obraz](evidence/gpt-6.1-terra/cesta_popup_375.png).
- Reprodukovatelnost: [měřicí skript](evidence/gpt-6.1-terra/measure.cjs), [doplňkové stavy](evidence/gpt-6.1-terra/extra.cjs), [klávesnice](evidence/gpt-6.1-terra/wp-keyboard.cjs), [popup cesty](evidence/gpt-6.1-terra/cesta-popup.cjs); soubory `*_blocked.json` zaznamenávají pokusy o blokované metody. Prohlížeče skripty ukončily.

## Pořadí případné implementace

1. Nejprve vytvořit mapu rolí a textových vah pro oba weby; ověřit, že dlouhé nadpisy zůstávají čitelné na 375 px a že jejich zvětšení neposouvá hlavní akci mimo rozumný dosah.
2. Sjednotit značkové odstíny a vybrat kontrastní podobu primárních akcí. Zkontrolovat výběr nabídky jako samostatnou adaptaci a ověřit skutečné hover/fokus/disabled.
3. Krátké červené linky a hrany aplikovat jen podle hierarchie; porovnat přítomnost a rozměry na konkrétních obrazovkách obou webů.
4. Doladit karty, formulářová pole a dialogy jako adaptace, se zachováním označení výběru, scrollu a fokusu.
5. Opětovně ověřit desktop a mobil, dostupné kroky, dlouhé texty, popupy, klávesnici a úplné modelové průchody. Nedotýkat se výpočtů, údajů ani pořadí kroků.