# Nezávislý audit GPT-6.1 Sol — oba prototypy vůči živému WordPressu

**Datum:** 28. 10. 2026. **Model a úsilí:** GPT-6.1 Sol, Velmi vysoká. **Rozsah:** vizuální analýza, bez implementace. Jedinou autoritou pro cílový vzhled je živá [prezentace České pojištění](https://www.ceskepojisteni.cz/). [Úraz v0.11.1](https://devel.kingux.cz/cmp_uraz/ferda-0.11.1/index.html) i [cestovní V19](https://sldevel.ceskepojisteni.cz/Tests/Standa/CePoTravelNextV19/index.php) jsou posuzované prototypy. Doména ani část cesty z cestovního prototypu nedělá stylovou autoritu.

## Výsledek

Oba prototypy správně navazují na značku použitím Montserratu, tmavé modré, červených akcentů a maskota. **Cestovní prototyp však není hotovým přepisem vzhledu WordPressu.** Jeho lehké titulky 500, tmavý gradient tlačítek Vybrat, silné stíny karet a část modrých povrchů se od živého webu liší. Úrazový prototyp má navíc jiné pozadí stránky, modré hlavní CTA s proměnou na zelenou při hoveru, velmi drobné sekční nadpisy a linku pod h1 v jiném rozměru i roli.

Největší společný přínos mají: pojmenovat role CTA a titulků, zavést z WordPressu správné váhy písma a role barev, odstranit zbytečné stíny a sjednotit povrchy. Není vhodné slepě převést marketingovou velikost CTA 84 px do každé cenové buňky nebo nastavit všem nadpisům 64 px. Takové zmenšení pro hustou kalkulačku je **adaptace**, kterou je potřeba uvést zvlášť od naměřeného pravidla.

Za zvlášť důležité považuji dva detaily: zelená hlavního produktového CTA je na WordPressu **#00b53b**, zatímco zelená v produktové dlaždici při hoveru je **#51b24e**; nejde o výchozí a hover stav stejného tlačítka. Sekundární tlačítko „Navštívit blog“ maluje rodič `.moreBlogInside`, nikoli jeho prázdný překryvný odkaz. Měření samotného anchoru by vedlo k chybným závěrům o barvě, borderu i rohu.

## Metodika, rozsah a omezení

Použil jsem dovednost ui-visual-composition: nejprve hierarchie a úloha komponenty, potom typografie, barvy, seskupení, plochy a stavy. Četl jsem projektové pokyny a aktuální zadání v PROJECT.md; starý report `reports/stylopis-2026-10-28/` ani cizí nové reporty či evidenci jsem neotevřel. Starší závěry uvedené v projektovém zápisníku nejsou podkladem cílových hodnot tohoto posudku.

Vlastní proces Playwrightu používá Chrome headless a vlastní kontext bez sdílení CUA, profilu nebo relace s jiným auditorem. Ještě před prvním `goto` je na celém kontextu zablokována každá HTTP metoda mimo GET, HEAD a OPTIONS. U WordPressu jsem zvolil pouze nezbytné cookies. Nic jsem neodesílal do skutečného formuláře, nesjednával, neplatil a neotevíral chat ani AI poradenství.

Veřejné podstránky byly nejprve objeveny v odkazech živé home: [záznam objevení](evidence/gpt-6.1-sol/wp-discovered-links.json). Poté jsem prohlédl home, [povinné ručení](https://www.ceskepojisteni.cz/povinne-ruceni/), [pojištění cizinců](https://www.ceskepojisteni.cz/pojisteni-cizincu/) a [kontakt](https://www.ceskepojisteni.cz/kontakt/), desktop **1440 × 900** a mobilní viewport **375 × 812**. Produkt povinného ručení zobrazuje neúplný obsah; produkt cizinců poskytuje použitelný opakovaný vzor hlavního CTA, obsahových nadpisů a rozbalovacích bloků. Kontaktní stránka poskytuje vnitřní h1 a informační plochu. Nenašel jsem na těchto stránkách odpovídající veřejný vstupní formulář, kalkulační tabulku, výběr frekvence placení ani pojistný detailový modal.

Úraz jsem prohlédl v profilu s ukázkovými daty, ve výběru krytí a cen, v editoru rizika a v doladění nabídky PVZP včetně frekvencí. Cestovní prototyp jsem prohlédl na vstupu, ve výsledcích s nabídkami, v detailu nabídky, v údajích pro smlouvu a v rekapitulaci. K dalším obrazovkám cestovního prototypu jsem přešel jeho vlastním „Přehledem obrazovek“; nevyvolával jsem reálné odeslání. Přepnutí obrazovek samo zkouší API POST, které bylo zablokováno: [záznam](evidence/gpt-6.1-sol/travel-stages-blocked.json). Zablokované požadavky WordPressu jsou převážně analytické. Síťové blokace znamenají, že audit netestuje backend a platnost obchodních dat.

Computed styles zahrnují `backgroundImage`, `backgroundSize`, `backgroundPosition`, všechny jednotlivé bordery, stíny, outline, typografii a pseudo-elementy `::before`/`::after`. Hover je měřen po **550 ms**. Fokus se ověřuje klávesnicovým Tab/Shift+Tab a zaznamenává se také skutečné `focused` a `focusVisible`; neoznačuji za fokus stav, kdy ovládací prvek klávesnicí fokus nedostal. U finálních cílených měření CDP `CSS.getPlatformFontsForNode` používá přesně měřený viditelný uzel, včetně skutečných použitých vah. Nezaměňuji CSS deklaraci font-family za potvrzení vykresleného fontu.

Mobil znamená emulovaný viewport Chromu s myší a klávesnicí, nikoli fyzický telefon či Safari. Fullpage snímky dlouhých výsledků jsou pro celkovou kompozici; pro rozměry fixních dialogů rozhodují JSON geometrie a příslušný viewport. Nejde o úplný funkční či regresní test kalkulaček. Všechny browser procesy byly po měření uzavřeny v `finally`. Uloženy jsou jen vlastní měřicí skripty, popisná data/computed JSON a snímky; žádné celé cizí HTML, CSS ani JS.

## Živý WordPress: doložené role

Značení dále: **F** = naměřená fakta, **N** = doporučení, **A** = adaptace bez stejné role ve WordPressu. Priorita P1 má největší dopad na podobnost, P2 sjednocuje komponenty, P3 řeší detaily. Přesné hodnoty uvádím v CSS px.

| Role a autorita | Desktop 1440 | Mobil 375 | Evidence |
|---|---|---|---|
| Hero na home a produktu: `.hp-title .title`, `.service-title .title` | Montserrat 64 / 600 / 83,2; #003b71 | 42 / 600 / 54,6 | [home](evidence/gpt-6.1-sol/wp-home-1440.json), [produkt](evidence/gpt-6.1-sol/wp-foreigners-375.json) |
| Červené zdůraznění hero: `.title b` | 64 / 800 / 83,2; #f42534 | 42 / 800 / 54,6 | [cílené desktop](evidence/gpt-6.1-sol/wp-tokens-1440.json), [mobil](evidence/gpt-6.1-sol/wp-tokens-375.json) |
| Vnitřní titul na kontaktu: `.main-page-title` | 54 / 800 / 59,4; #003b70; bez linky | Stejné 54 / 800 / 59,4; bez linky | [kontakt desktop](evidence/gpt-6.1-sol/wp-contact-detail-1440.json), [mobil](evidence/gpt-6.1-sol/wp-contact-detail-375.json) |
| Sekční titul home: `.hp-news .format-title` | 32 / 700 / 35,2; #03407c | 24 / 700 / 26,4 | [home detail](evidence/gpt-6.1-sol/wp-home-detail-1440.json), [mobil](evidence/gpt-6.1-sol/wp-home-detail-375.json) |
| Sekční titul produkt: `.format-title` | 32 / 600 / 35,2; #03407c | 28 / 600 / 30,8 | [produkt detail](evidence/gpt-6.1-sol/wp-product-detail-1440.json), [mobil](evidence/gpt-6.1-sol/wp-product-detail-375.json) |
| Sekční linka: `.format-title::after` | 100 × 2; #f42534; odstup nad linkou 25 | 100 × 2; stejné | [produkt detail](evidence/gpt-6.1-sol/wp-product-detail-1440.json), [kontakt mobil](evidence/gpt-6.1-sol/wp-contact-detail-375.json) |
| Titulek obsahové karty: `.blog-card .name` | 24 / 600 / 26,4; #002e5f | Stejné | [home detail](evidence/gpt-6.1-sol/wp-home-detail-1440.json), [mobil](evidence/gpt-6.1-sol/wp-home-detail-375.json) |
| Hlavní vstup do kalkulace: `.button-icons-area a.button` na produktu cizinců | 24 / 600 / 28; bílá na #00b53b; r8; border 0; h84 | Stejná typografie, barvy, r8 a h84; šířka311 | [stavy desktop](evidence/gpt-6.1-sol/wp-states-1440.json), [mobil](evidence/gpt-6.1-sol/wp-states-375.json) |
| Sekundární navigace: `.moreBlogInside` na home | 18 / 600 / 27; #002e5f; border 1 #002e5f; r15; padding 20 40 | Stejné | [malovaná plocha desktop](evidence/gpt-6.1-sol/wp-controls-final-1440.json), [mobil](evidence/gpt-6.1-sol/wp-controls-final-375.json) |
| Informační karta: `.citaceBox` na home, `.mainContanctSection` na kontaktu | #f2f4f7; r15; border 0; bez stínu | Stejné základní povrchové hodnoty | [citace](evidence/gpt-6.1-sol/wp-controls-final-1440.json), [kontakt](evidence/gpt-6.1-sol/wp-contact-detail-1440.json) |
| Základ stránky: `body`; produktový text `.leftContainer p` | #fcfcfc; text #231f20; produktový odstavec 16 / 400 / 24 | Stejné | [produkt](evidence/gpt-6.1-sol/wp-foreigners-1440.json), [detail](evidence/gpt-6.1-sol/wp-product-detail-1440.json) |
| Desktopový kontakt v hlavičce: `.header-phone`, `.header-email` | 22 / 600 / 25; #03407c; ikona přes backgroundImage | Při 375 nejsou tyto textové kontakty zobrazené stejným způsobem | [hlavička](evidence/gpt-6.1-sol/wp-home-detail-1440.json), [mobil](evidence/gpt-6.1-sol/wp-home-detail-375.json) |

**Fonty F:** na WP CDP potvrzuje vlastní Montserrat. Interní `familyName` z fontových souborů je „Montserrat Thin“, ale `postScriptName` rozlišuje `Montserrat-Thin`, `...-Medium`, `...-SemiBold`, `...-Bold` a `...-ExtraBold`. To **neznamená, že všechny texty mají váhu Thin**. Na WP jsou skutečně vykreslené váhy 400, 600, 700 a 800 podle role; na cestovním hero skutečně Medium/500. Úrazové 650 se v měřených CTA vykresluje názvem Bold. Oba prototypy u samostatného znaku šipky místy používají Arial s jediným glyph; český text je Montserrat. Není podklad pro tvrzení, že některá celá kalkulačka padá na Arial. Důkaz například [cestovní cílený vstup](evidence/gpt-6.1-sol/travel-profile-detail-1440.json), [nabídky](evidence/gpt-6.1-sol/travel-offers-detail-1440.json), [úrazové CTA](evidence/gpt-6.1-sol/uraz-states-1440.json).

## Co upravit v každém prototypu

V buňkách „změna“ jde o doporučení N; písmeno A výslovně označuje chybějící odpovídající roli. Zdrojové selektory jsou vždy z konkrétní živé stránky. Tabulka nevyvozuje pravidla z cestovního prototypu.

WordPress dokládá hlavní **vstup do kalkulace**, nikoli tlačítko dalšího kroku průvodce. Přenos stejné vizuální akční rodiny na „Pokračovat“ je také adaptace role. Je to nejbližší doložený hlavní vzor značky, nikoli důkaz existence oficiálního WordPress wizardu.

| WP autorita / role | Úraz nyní | Cesta nyní | Změna úraz | Změna cesta | Priorita |
|---|---|---|---|---|---|
| [Produkt cizinců](https://www.ceskepojisteni.cz/pojisteni-cizincu/) `.button-icons-area a.button`: zelená #00b53b, bílá,24/600, r8, border 0, bez stínu | Hlavní pokračování modré #003b71; profil14/650; doladění13/650; r12 | Hlavní pokračování #00b53c,18/700, r8; h58 desktop/h48 mobil | Zelenou vyhradit hlavnímu kroku „Vybrat krytí/Pokračovat“, r8, váha600. Pro plnou WP shodu24/600/28, h84; pro kompaktní krok výšku a písmo zmenšit výslovně jako A. | Sjednotit přesnou zelenou a váhu600. Zvětšit hlavní text dle WP role; výšku84 zavést jen pro marketingový vstup, kompaktní pokračování označit A. | P1 |
| Stejný produkt: hover po 550 ms nemění barvu ani stín; `backgroundImage` je ikona kalkulačky | Ustálený hover #51b24e a text #102f49 | Hover #009b33, stín 0 8 22 rgba(0,181,60,.2), posun−1px | Zrušit proměnu hlavního CTA modrá→zelená a změnu bílé na tmavý text. Použít stabilní hlavní roli. Nepřidávat gradient. | Odstranit zdvih/stín a jiné ztmavení, pokud je cílem věrná WP shoda. Ikonu řešit místním ekvivalentem pouze u vstupu do výpočtu. | P1 |
| [Home](https://www.ceskepojisteni.cz/) `.moreBlogInside`: secondary18/600, #002e5f, border 1, r15; světle šedý hover | Sekundární akce mají více podob; v nabídce12/650, mobil 11/650, border dle komponenty | Outline14/700 (mobil 13), r8, bílá; hover #edf4fa | Pro skutečné sekundární akce „Zrušit/Detail/Upravit“ vytvořit jednotný outlined vzor podle WP. V cenové matici menší velikost je A; nevyrobit každou pomocnou ikonu jako velké tlačítko. | Secondary/outline přivést na 600 a #002e5f. Pro výrazné sekundární navigační CTA r15, hover #f2f4f7. Drobné nabídky opět A. | P1 |
| [WP produkt a home](https://www.ceskepojisteni.cz/pojisteni-cizincu/): **není doložen** samostatný výběr konkrétní pojistné nabídky | `.quote-row > .button`: modrá12/650, r12, h44 | `.offer-tile .button--navy`:13/700, r8; gradient110° #00457e→#273443; h38 desktop / h48 mobil | A: použít stejnou hlavní akční rodinu jako pokračování, pokud výběr přesouvá do dalšího kroku; v řádku zachovat kompaktní geometrii. Nevydávat h44 za WP pravidlo. | A: odstranit nedoložený tmavý gradient; rozhodnout roli Vybrat konzistentně s hlavním postupem. Není důvod přenášet tento gradient do úrazu. | P1 |
| [Home](https://www.ceskepojisteni.cz/) `.hp-title .title` a [produkt](https://www.ceskepojisteni.cz/pojisteni-cizincu/) `.service-title .title`: hero64/600, mobil42/600, červený `<b>`800 | Profilový h1 je34/700, mobil25/700; spíše název pracovního kroku než samostatný marketingový hero | Úvodní hero58/500, mobil36/500; navybez červeného zvýraznění | Nevytvářet další velký hero u každého kroku. Jestli první obrazovka dostane marketingový hero, použít uvedený vzor. Současný pracovní titul řešit následujícím řádkem. | Úvodní hero přivést na64/600/83,2 a42/600/54,6. Červený akcent800 použít jen na jednu smysluplnou frázi; nevynucovat náhodné červené slovo. | P1 |
| [Kontakt](https://www.ceskepojisteni.cz/kontakt/) `.main-page-title`: vnitřní h1 54/800/59,4, #003b70, bez linky | Všechny pracovní h134/700; mobil25/700, #173b58 | Vnitřní h150/500/59; mobil29/500/32,48; letter-spacing−2 desktop | Desktopové názvy kroků přiblížit silnějšímu vnitřnímu titulku; cílové WP54/800. Na mobilu je i WP54; menší42 či32 je A podle délky a hustoty. Zachovat navy na obou šířkách. | Vnitřní titulky změnit z500 na800, desktop54/59,4; odstranit nedoložené−2px tracking. Mobilní zmenšení oproti WP54 uvést jako A, nikoli jako zdrojový token29. | P1 |
| [Produkt](https://www.ceskepojisteni.cz/pojisteni-cizincu/) `.format-title`: sekce32/600, mobil28/600; home má jinou roli32/700, mobil24/700 | Hlavní nadpisy formulářových sekcí14/700; datum15/650 je drobný popisek | Formulářové h228/500, mobil23/500; údaje25/500 | Skutečné velké sekce „Koho pojišťujeme/Kontakty/Rozsah krytí“ odlišit od popisků: převzít32/600 a28/600, dovolí-li to rozvržení; menší hustá alternativa je A. Datum a frekvenci nepovýšit na velkou sekci. | Skutečným sekcím sjednotit600 a produktovou škálu32/28. Drobné názvy položek ponechat nižší, neaplikovat globálně na každý h2. | P1 |
| [Produkt/home/kontakt](https://www.ceskepojisteni.cz/pojisteni-cizincu/) `.format-title::after`:100×2, #f42534, mezera25; h1 linku nemá | `h1::after`88×1, #f42434 | `.page-heading::after`100×2, #f42434 za nadpisovým blokem; na vstupu dlouhá červená linka přes nadpisový panel | Linku88×1 odstranit z univerzálního h1; zdrojový vzor100×2 použít u sekčních titulků. Pokud se ponechá pod názvem kroku, označit přesun role jako A. | Krátká linka je geometricky blízko, ale patří zdrojově sekcím. Dlouhou vstupní linku nahradit krátkou sekční100×2; nešířit full-width červené bordery na všechny bloky. | P1 |
| [Home](https://www.ceskepojisteni.cz/) `.blog-card .name`: obsahový titul24/600/26,4, #002e5f | Názvy rizik a cenových sloupců drobné podle tabulky | Název nabídky17/700/20,06 | A: delší názvy samostatných obsahových karet mohou převzít24/600; v matici nenechat zvětšení rozbít pět nabídek. | A: názvy nabídek posílit velikostí a mírně odlehčit na 600;24/26,4 je nejbližší doložená obsahová karta, hustá varianta musí být označena. | P2 |
| [WP](https://www.ceskepojisteni.cz/) `body`: #fcfcfc; produktový běžný odstavec 16/400/24, #231f20 | Stránka #f3f6f9; text #173b58; base16/24,8 | Body #fcfcfc, ale uvnitř více modrých přechodů/povrchů; base15/23,25, #17283a; mobil14/21,7 | Celou stránku přivést na #fcfcfc. Běžné delší texty16/24, #231f20, značkovou modrou vyhradit nadpisům a akcím. | Základ stránky zachovat; delší texty16/24, #231f20, omezit vlastní modrošedé tóny.15 a14 ponechat jen jako vědomou hustou A. | P1 |
| [Kontakt](https://www.ceskepojisteni.cz/kontakt/) `.mainContanctSection`, [home](https://www.ceskepojisteni.cz/) `.citaceBox`: #f2f4f7, r15, border 0, stín none | Informační aside #e9f1f8, r18 | Story-invitation modravý povrch s borderem, r14; výsledkový toolbar #f2f7fa, r14 | Informační aside přeladit na #f2f4f7, r15. Modrou kresbu ikon a maskota zachovat. | Informační pozvánku a toolbar přeladit na stejnou šedou a r15; odstranit dekorativní border tam, kde jde jen o informaci. | P1 |
| Stejný WP informační vzor; **vstupní formulář není na zkoumaném WP doložen** | `.profile-form-panel` bílá, r14 desktop / r12 mobil, border 1 #dce5ed/#c5d2df | `.entry-card` bílá, r14, stín 0 0 30 #d6d6d6 | A: sjednotit rohy povrchů na 15, ponechat bílé vstupní plochy, ale redukovat dvojité ohraničování vnořených skupin. Nenazývat bílou formulářovou kartu přesnou WP komponentou. | A: zrušit výrazný rozostřený stín hlavního formuláře, r15; seskupení řešit prostorem a jedním povrchem. | P1 |
| [WP home](https://www.ceskepojisteni.cz/) `.citaceBox` má plochou kartu; srovnávací nabídka chybí | Část připojištění bílé karty, border 1, r12, drobný stín | `.offer-tile` bílá, r14, border 1 #d8e3e9 a stín 0 12 34 rgba(0,59,113,.1) | A: u informačních částí připojištění zploštit, r15; interaktivní výběr ponechat jasně rozpoznatelný. | A: odstranit trvalý stín všech 22 nabídek; použít r15 a tlumené seskupení z WP. Vybranou kartu odlišit explicitním stavem, ne zvýšením všech karet. | P2 |
| [WP home](https://www.ceskepojisteni.cz/) `.hp-links .body`: navigační dlaždice má posuvný dvoubarevný background; **nejde o šikmý CTA gradient** | Běžná modrá a hoverzelená v CTA | Šikmý tmavý gradient ve Vybrat | Nepřebírat z WP animaci celé navigační dlaždice do každého tlačítka; jde o jinou roli. | Odstranit neodpovídající šikmý gradient. Pokud vznikne produktový rozcestník, může mít adaptaci posuvné plochy; výsledková nabídka není rozcestník. | P2 |
| [WP kontakt](https://www.ceskepojisteni.cz/kontakt/), home: žádný doložený input/select/error vzor | Vstupy48px, r10, border 1 #b6c9d8; focus3 #205db3, offset3 | Datum49,25px, r8, border 1 #c3d2dc; focusborder #003b71+halo3rgba(.1) | **A:** sjednotit vstupy napříč kroky a ponechat přístupný fokus. R8 lze převzít z akčních rohů jako systematické přizpůsobení, nikoli tvrdit „WP input r8“. | **A:** sjednotit field/focus v celé aplikaci. Vstupní border, selected nebo error neodvozovat z prázdného kontaktu. | P2 |
| [WP](https://www.ceskepojisteni.cz/): taby/destinace/frekvence/sleva nejsou doložené | Výběr roční frekvence #f1f7fd, border 1 navy+inset1, r12; badge #def1e5/#14643e, r6 | Taby #e8f0f4; vybraná destinace modrý outline; vlastní badge a counter stavy | **A:** zachovat radio, checked a text slevy; omezit další barvy na značkové a neutrální. Cena i frekvence se nesmějí ztratit ve „zploštění“. | **A:** zjednodušit tabové plochy na bílou/#f2f4f7; checkedradio/zaškrtnutí zachovat. Žádný z těchto stavů není oficiální WP token. | P2 |
| [WP](https://www.ceskepojisteni.cz/): srovnatelný pojistný modal nenalezen; cookie lišta není editor rizika | Desktopový dialog r18,620px, stín 0 20 80 rgba(23,59,88,.25); mobilní spodní panel 375 px, r18/18/0/0 | Desktopový detail 860 px, r14, stín 0 20 70 rgba(0,0,0,.25); mobil x0, y24, w351, h788, r18/18/0/0 | **A:** sjednotit title/CTA/body s WP tokeny; zachovat funkční spodní panel, scroll a Escape. Nenastavovat „WP modal r14“, takový doklad není. | **A:** stejné omezení. Mobilní mezera je 24 px vpravo a 0 vlevo; případné symetrické odsazení je oprava vlastního layoutu, ne kopie WP. | P2 |
| [WP home](https://www.ceskepojisteni.cz/) `header`, `.header-phone/.header-email`: desktop120px, bez spodní linky, kontakty 22/600/#03407c | Kompaktní72 px desktop / 78 mobil, kontakty13 px a modrý border pod hlavičkou |120 px desktop / 79 mobil; kontakty15/700 s horními štítky a časem, spodní border | Barevně a typograficky sjednotit kontakt s WP. Zachovat kompaktní72 jako funkční A; nekopírovat marketingový horní padding 55 do pracovního kroku. | Celková výška už odpovídá; odstranit zbytečnou konkurenci štítků, větší jednotný kontakt 600. Zrušit dekorativní spodní border, pokud nemá navigační význam. | P2 |
| [WP](https://www.ceskepojisteni.cz/pojisteni-cizincu/) zelené CTA a [home](https://www.ceskepojisteni.cz/) secondary: při klávesnicovém fokusu některé outline none | Zřetelný modrý 3px fokus | CTA: 3px červená s alfou 0,35; vstupy jiné halo | **A—přístupnost:** zachovat viditelný fokus; nesnižovat se na zdrojové potlačení outline. | **A—přístupnost:** zachovat a sjednotit fokus; zdroj WP není důvod jej odstranit. | P1 |
| [WP](https://www.ceskepojisteni.cz/pojisteni-cizincu/) `.open-blocks .name`:24/600, červená, bez boxu, malý chevron tvořený borderem | Rozbalení dalších rizik a dokumentů má vlastní menší UI | Doprava má vlastní čárkované hrany; detail nabídky tmavé pruhy h3 | **A:** z WP převzít střídmý chevron a menší počet rámečků, ponechat ovládání summary/button. Nereplikovat nefocusovatelný h3. | **A:** pro obsahové rozbalení odstranit nadbytečné pásy a čárkované dekorace; z WP přenést hierarchii, nikoli neklávesnicovou implementaci. | P3 |

Aktuální hodnoty obou prototypů v tabulce jsou podloženy [úrazovými stavy](evidence/gpt-6.1-sol/uraz-states-1440.json), [úrazovým mobilem](evidence/gpt-6.1-sol/uraz-profile-375.json), [povrchy profilu](evidence/gpt-6.1-sol/uraz-profile-detail-1440-surfaces.json), [doladěním](evidence/gpt-6.1-sol/uraz-customize-1440.json), [úrazovým dialogem desktop](evidence/gpt-6.1-sol/uraz-dialog-1440.json) / [mobil](evidence/gpt-6.1-sol/uraz-dialog-375.json), [cestovními stavy](evidence/gpt-6.1-sol/travel-states-1440.json), [vstupem](evidence/gpt-6.1-sol/travel-profile-detail-1440.json), [nabídkami](evidence/gpt-6.1-sol/travel-offers-detail-1440.json), [nabídkami mobil](evidence/gpt-6.1-sol/travel-offers-detail-375.json), [údaji](evidence/gpt-6.1-sol/travel-udaje-1440.json), [rekapitulací](evidence/gpt-6.1-sol/travel-rekapitulace-1440.json) a [cestovním dialogem desktop](evidence/gpt-6.1-sol/travel-dialog-detail-1440.json) / [mobil](evidence/gpt-6.1-sol/travel-dialog-detail-375.json).

## Společné cílové tokeny — pouze hodnoty doložené na WP

Názvy tokenů jsou návrh pro budoucí implementaci; hodnoty pocházejí z WP. Nejde o kopii jeho CSS. Pozor na různé modré a červené role: živý web není dokonale sjednocený. Níže zachovávám rozdíly místo předstírání jednoho univerzálního odstínu.

| Token / role | Hodnota | Přímý WP zdroj |
|---|---|---|
| font / běžný | Montserrat, sans-serif; váha 400 | produkt `.leftContainer p`, [data](evidence/gpt-6.1-sol/wp-product-detail-1440.json) |
| page | #fcfcfc | `body`, [data](evidence/gpt-6.1-sol/wp-foreigners-1440.json) |
| text | #231f20 | produkt `.leftContainer p` a citace, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| navy-hero | #003b71 | home `.hp-title .title`, [data](evidence/gpt-6.1-sol/wp-home-detail-1440.json) |
| navy-section / contact | #03407c | `.format-title`, `.header-phone`, [data](evidence/gpt-6.1-sol/wp-home-detail-1440.json) |
| navy-secondary / card-title | #002e5f | `.moreBlogInside`, `.blog-card .name`, [data](evidence/gpt-6.1-sol/wp-tokens-1440.json) |
| red-rule / hero-emphasis | #f42534 | `.format-title::after`, `.title b`, [data](evidence/gpt-6.1-sol/wp-tokens-1440.json) |
| green-main | #00b53b | produkt `.button-icons-area a.button`, [data](evidence/gpt-6.1-sol/wp-states-1440.json) |
| green-teaser | #51b24e | home `.hp-links .box:not(.disabled) .body .button` při hoveru rodiče; **jiná role**, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| surface-muted | #f2f4f7 | `.citaceBox`, `.mainContanctSection`, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| radius-primary |8px | produktové hlavní CTA, [data](evidence/gpt-6.1-sol/wp-states-1440.json) |
| radius-secondary / card |15px | `.moreBlogInside`, `.citaceBox`, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| border-secondary |1px solid #002e5f | `.moreBlogInside`, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| shadow-content-card | none | `.citaceBox`, kontakt, [data](evidence/gpt-6.1-sol/wp-controls-final-1440.json) |
| section-rule |100px ×2px; margin-top25px | `.format-title::after`, [data](evidence/gpt-6.1-sol/wp-product-detail-1440.json) |
| body-product |16px /400 /24px | `.leftContainer p`, [data](evidence/gpt-6.1-sol/wp-product-detail-1440.json) |
| title-hero |64px /600 /83,2px; mobil42 /600 /54,6 | `.title`, [desktop](evidence/gpt-6.1-sol/wp-home-1440.json) / [mobil](evidence/gpt-6.1-sol/wp-home-375.json) |
| title-inner |54px /800 /59,4px; WP při375 stejné | kontakt `.main-page-title`, [data](evidence/gpt-6.1-sol/wp-contact-detail-375.json) |
| title-section-product |32px /600 /35,2px; mobil28 /600 /30,8 | produkt `.format-title`, [desktop](evidence/gpt-6.1-sol/wp-product-detail-1440.json) / [mobil](evidence/gpt-6.1-sol/wp-product-detail-375.json) |
| title-section-home |32px /700 /35,2px; mobil24 /700 /26,4 | `.hp-news .format-title`, [desktop](evidence/gpt-6.1-sol/wp-home-detail-1440.json) / [mobil](evidence/gpt-6.1-sol/wp-home-detail-375.json) |
| title-card |24px /600 /26,4px | `.blog-card .name`, [data](evidence/gpt-6.1-sol/wp-home-detail-1440.json) |
| cta-main-type / size |24px /600 /28px; výška 84px | produktové hlavní CTA, [data](evidence/gpt-6.1-sol/wp-states-1440.json) |
| cta-secondary-type |18px /600 /27px | `.moreBlogInside`, [data](evidence/gpt-6.1-sol/wp-tokens-1440.json) |

**Záměrně chybí:** oficiální token vstupního borderu, focus-ringu, validační červené, povrchu vybraného stavu, opacity zakázaného stavu, rohu modalu, výšky tabů, cenového fontu a frekvenčního badge. Stejné role ve zkoumaném WordPressu nejsou doložené. Není správné tyto mezery vyplnit hodnotami z cestovního prototypu a nazvat výsledek stylopisem WP.

## Stavy a přístupnost: kde zdroj nekopírovat doslova

**F — hlavní CTA:** backgroundColor #00b53b a bílý text se po 550 ms nemění; `backgroundImage` odkazuje na ikonu kalkulačky. Samotné „backgroundImage není none“ tedy nedokazuje gradient. Spodní `.calculate-button` používá stejnou zelenou, ale na mobilu se kvůli paddingu a zalomení zvětší na 112 px; není správné z toho odvodit obecný mobilní button token 112.

**F — secondary:** `.moreBlogInside` má gradient `to top, #f2f4f7 50%, transparent 50%`, `background-size:100% 200%`. Hover mění `background-position` z 50 % 0 % na 50 % 100 %, proto je optickým výsledkem jednolitá světle šedá výplň. Modrý text/border a r15 zůstávají. Link přes celou plochu má prázdný text, vlastní červenou barvu a r0; vizuální text a box dědí rodič. Adaptace má vytvořit normální sémantické tlačítko/odkaz s těmito vizuálními vlastnostmi, nemusí kopírovat podivnou překryvnou konstrukci.

**F — navigační dlaždice:** `.hp-links .body` má podobný posuvný mechanismus, ale druhá polovina je #002e5f. Hover rodiče přebarví plochu a název na bílou a ukáže zelené CTA #51b24e,18/400, r8. To je jiný vzor než produktové zelené CTA a jiný než šikmý tmavý gradient cestovního Vybrat. Důkaz [desktop](evidence/gpt-6.1-sol/wp-controls-final-1440.json) / [mobil](evidence/gpt-6.1-sol/wp-controls-final-375.json).

**F — fokus a klávesnice:** produktové CTA sice dostává `focusVisible:true`, ale outline má none 0 a nezískává viditelný alternativní ring. Spodní CTA při fokusu dokonce změní text na #f42434 na zelené ploše. Rozbalovací `.open-blocks .name` je h3 a skutečný klávesnicový fokus během měření nedostalo. Toto nejsou vhodná pravidla pro funkční kalkulačku. **N/A:** zachovat sémantické button/summary a viditelný ring zlepšený oproti zdroji; jeho přesná šířka/barva není doložena WP.

**F — kontrast:** z naměřených sRGB barev vychází bílá/#00b53b přibližně 2,74:1 a bílá/#003b71 přibližně 11,27:1. Výchozí WP zelená s bílou nesplní ani 3:1 pro velký text. **N/A:** pro věrnou vizuální kopii uvést tento dluh; pro použitelnou produkční adaptaci vybrat a znovu změřit tmavší akční zelenou nebo jinou vyhovující kombinaci. Žádný vlastní tmavší odstín nezařazuji do tabulky „tokeny z WP“. Červenou #f42534 na bílém lze při malém textu také posoudit zvlášť (přibližně 4,07:1); není automaticky univerzální textovou chybovou barvou.

## Pořadí implementace

### Úraz

1. Zavést oddělené role `cta-main`, `cta-secondary`, `title-inner`, `title-section`, `surface-info`; neprovádět globální změnu `.button` a všech h2 jedním pravidlem. Hlavní postupové CTA sjednotit se zeleným WP vzorem, kompaktní nabídky výslovně řešit jako A.
2. Sjednotit pozadí stránky #fcfcfc a šedé informační plochy #f2f4f7/r15. Zachovat bílé vstupy a čitelné seskupení formuláře; odstranit jen nadbytečné vnořené bordery.
3. Povýšit pracovní titulky a skutečné sekce podle odpovídajících WP rolí; odstranit univerzální linku 88 × 1 pod h1. Nezaměnit popisek data či frekvence za velký sekční titul.
4. Sjednotit secondary, typografii detailů a lokální ikonky. U dialogu aplikovat barvy/textové role; spodní panel, fokus, Escape a vnitřní scroll ponechat funkční. Vybraná frekvence, zámky, připojištění a jejich data musí zůstat zřetelná.
5. Znovu ověřit 1440/375, dlouhé české názvy, pět nabídek, výběr rizika, zavření popupu, klávesnici a celý stávající demonstrační průchod. Flow a cenové výpočty nezměnit.

### Cestovní

1. Rozlišit vstupní hero od vnitřních titulků: hero 600 / 800 akcent, vnitřní 800, sekce 600. Neaplikovat dnešní 500 jako globální styl značky. Odstranit vlastní záporný tracking vnitřních h1.
2. Sjednotit hlavní CTA na zdrojové #00b53b/600/r8, odstranit nedoložený navy gradient a zdvihy při hoveru/stíny. Secondary přiblížit skutečně malované WP ploše #002e5f/r15/600.
3. Odstranit dlouhou červenou linku za vstupním formulářovým titulkem; krátké 100 × 2 používat u příslušných sekcí. Interní nadpisový blok s krátkou linkou uvést jako A, protože vnitřní h1 na WP ji nemá.
4. Zploštit hlavní formulářovou kartu a trvalé stíny všech nabídek. Modré plochy pozvánky, tabů a toolbaru sjednotit na neutrální barevnou rodinu WP; vybrané a doporučené stavy zachovat explicitně.
5. Sjednotit detail nabídky, údaje a rekapitulaci stejnými rolemi. Přitom opravit vlastní mobilní nesymetrii detailu, ponechat sémantické ovládání a viditelný fokus. Ověřit vstup → výsledky → detail → údaje → rekapitulaci bez reálného sjednání či platby.

Společná knihovna má sdílet **měřené barvy a role**, nikoli WordPress runtime, pluginy ani zkopírované zdrojové soubory. Zavedení nových vzhledových pravidel nesmí měnit výpočty, formulářová data ani současnou posloupnost kroků.

## Výběr vizuálních důkazů

- [WP home desktop](evidence/gpt-6.1-sol/wp-home-1440.png), [produkt desktop](evidence/gpt-6.1-sol/wp-foreigners-1440.png), [kontakt desktop](evidence/gpt-6.1-sol/wp-contact-1440.png).
- [WP produkt mobil](evidence/gpt-6.1-sol/wp-foreigners-375.png), [hlavní CTA a klávesnicový fokus desktop](evidence/gpt-6.1-sol/wp-primary-1440-focus.png).
- [Úraz profil desktop](evidence/gpt-6.1-sol/uraz-profile-1440.png), [úraz profil mobil](evidence/gpt-6.1-sol/uraz-profile-375.png), [doladění desktop](evidence/gpt-6.1-sol/uraz-customize-1440.png), [mobilní editor rizika](evidence/gpt-6.1-sol/uraz-dialog-375.png).
- [Cestovní vstup desktop](evidence/gpt-6.1-sol/travel-profile-1440.png), [mobil](evidence/gpt-6.1-sol/travel-profile-375.png), [výběrové CTA se skutečným gradientem](evidence/gpt-6.1-sol/travel-select-1440-focus.png), [údaje](evidence/gpt-6.1-sol/travel-udaje-1440.png), [rekapitulace](evidence/gpt-6.1-sol/travel-rekapitulace-1440.png).

Měřicí základ je reprodukovatelný vlastními skripty [measure.cjs](evidence/gpt-6.1-sol/measure.cjs), [wp.cjs](evidence/gpt-6.1-sol/wp.cjs), [wp-detail.cjs](evidence/gpt-6.1-sol/wp-detail.cjs), [wp-controls-final.cjs](evidence/gpt-6.1-sol/wp-controls-final.cjs), [prototypes.cjs](evidence/gpt-6.1-sol/prototypes.cjs), [travel-stages.cjs](evidence/gpt-6.1-sol/travel-stages.cjs) a [final-measure.cjs](evidence/gpt-6.1-sol/final-measure.cjs). Starší discovery snímky zobrazují i cookie lištu; pro cílová pravidla mají přednost přesná cílená měření. Vedlejší měřicí omyly selektorů byly opraveny ve vlastních skriptech; report nepoužívá chybné chybějící selektory jako důkaz absence vizuálního vzoru.

Místní odkazy, parsování celé vlastní JSON evidence a syntaxe vlastních skriptů byly ověřeny: [výsledek kontroly](evidence/gpt-6.1-sol/validation.json).