# Nezávislý audit stylopisu vůči živému WordPressu — GPT‑5.6 Sol Datum měření: 28. 10. 2026 Posuzované prototypy: - úraz: - cesta: Jediná vizuální autorita: - WordPress domovská stránka: - skutečný produktový odkaz z domovské stránky: - skutečný produktový odkaz z domovské stránky: ## Shrnutí Největší společný nesoulad není v logu nebo ve fontové rodině, ale v přiřazení vizuálních rolí. Oba prototypy skutečně vykreslují vlastní webový Montserrat, používají základní tmavě modrou blízkou WordPressu a mají červený akcent. WordPress však dává hlavní akci od prvního snímku zeleně, bez gradientu, s rohem 8 px; úraz začíná tmavě modře a až po hoveru přepne do jiné zelené, zatímco cesta má zelenou jen na prvním „Porovnat nabídky“, ale vlastní výběr nabídky převádí do tmavého modrého gradientu. První sjednocující zásah proto má být rolový, nikoli plošný: hlavní akce každé obrazovky zelená, sekundární akce bílé/tmavě modré, textové akce bez výplně. Poté následuje typografie a linky. WordPress má produktový hero `64/83,2 px, 600` a na mobilu `42/54,6 px, 600`; sekční nadpis má `32/35,2 px, 600` a na produktové mobilní stránce `28/30,8 px, 600`. Úraz používá pro hlavní krok `34/41,48 px, 700` a mobilně `25/30 px, 700`; cesta má hero `58/62,64 px, 500` a mobilně `36/38,88 px, 500`, výsledkové h1 dokonce `50/59 px, 500`. Hierarchie je tedy v úrazu příliš tučná a na mobilu drobná, zatímco výsledkový nadpis cesty je na desktopu zbytečně dominantní. WordPressová nadpisová linka je stabilní, krátká a měřitelná: `100 × 2 px`, `#f42534`. Úraz má `88 × 1 px`; cesta používá v hlavní formulářové kartě plnou `2px` červenou spodní hranu přes šířku 679 px. Oba prototypy mají značku, ale ne stejný systém. Karty, formulářová pole, selected/disabled a modaly WordPressové vzorky přímo nedokládají. Nesmí se proto autoritativně převzít z jednoho prototypu do druhého. WordPress dokládá jen dvě užitečné geometrické role: akční roh `8 px` a jednoduchou domovskou kategorii s povrchem `#f2f4f7`, rohem `15 px`, bez borderu a stínu. Nabídkové tabulky a dialogy obou kalkulaček jsou dále adaptační komponenty. ## Metodika, rozsah a limity ### Měření - Vlastní proces Chrome/Playwright a vlastní dočasný persistentní profil; po auditu byl prohlížeč uzavřen a profil odstraněn. - Viewporty přesně `1440 × 900` a `375 × 812`. - Před prvním `goto` byla pro všechny stránky registrována blokace všech metod kromě `GET`, `HEAD`, `OPTIONS`. - Marketingový Google Tag Manager byl blokován. U WordPressu nebyly povoleny marketingové cookies; ovládací prvek „Povolit pouze nezbytné cookies“ byl použit, pokud byl zobrazen. - Cestovní prototyp se dvakrát pokusil o `POST .../api.php`; oba požadavky byly blokovány. Nabídky se přesto vykreslily z dostupného fallbacku. Neproběhlo sjednání, chat, platba ani odeslání kontaktního formuláře. - Každý interaktivní vzorek byl měřen normálně, po focusu a po ustálení hoveru `700 ms`. U `::before` a `::after` byly uloženy stejné computed vlastnosti jako u prvku, včetně `content`, rozměru, pozadí a hran. - Skutečně vykreslené fonty byly zjištěny přes Chrome DevTools Protocol `CSS.getPlatformFontsForNode`, nejen přes deklarované `font-family`. Fonty i obrázky byly před odečtem vyčkány přes `document.fonts.ready` a `decode()`. - Reprezentativní stavy: WordPress domovská stránka a dvě produktové podstránky; úrazové nabídky, selected/unselected riziko, disabled nabídka, detailový dialog, doladění a osobní formulář; cestovní vstupní formulář, výsledky s 22 nabídkami a modal detailu nabídky. ### Rozlišení tvrzení - **Fakt** = hodnota skutečně naměřená v uvedeném URL, viewportu a selektoru. - **Interpretace** = přiřazení vizuální role nebo vysvětlení dopadu. - **Návrh** = konkrétní změna. Kde WordPress daný stav nedokládá, je návrh výslovně označen jako **adaptace / nedoloženo WP**. ### Limity - Headless Chrome na Windows; žádný fyzický telefon, Safari ani WebKit. - WordPressové produktové stránky odkazují ze zeleného CTA mimo WordPress na samostatný srovnávač. Tento externí srovnávač nebyl použit jako autorita. Proto WordPress nedokládá vzhled inputů, selectů, nabídkové tabulky, selected/disabled ani modalu. - Audit je vizuální a čtecí. Neověřuje serverové API, platbu, sjednání ani obchodní správnost modelových dat. - Nenavrhuji kopírovat WordPress runtime, HTML, CSS, JS nebo obrázky; cílem jsou znovupoužitelné lokální tokeny a rolové úpravy ve stávajícím vanilla HTML/CSS/JS. ## Srovnávací tabulka a doporučení | Role | WP autorita — naměřený fakt | Úraz nyní — naměřený fakt | Cesta nyní — naměřený fakt | Změna úraz — konkrétní návrh | Změna cesta — konkrétní návrh | Priorita | |---|---|---|---|---|---|---| | Fontová rodina a skutečné soubory | Computed `Montserrat, sans-serif`. CDP: `isCustomFont:true`; h1 skutečně skládá např. `Montserrat‑Thin‑SemiBold` a zvýraznění `ExtraBold`, CTA `SemiBold`. | Vlastní variabilní Montserrat `100 900`; h1 skutečně `Montserrat‑Thin‑Bold`. | Vlastní variabilní Montserrat `300 800`; hero skutečně `Montserrat‑Thin‑Medium`. | Rodinu neměnit. Přemapovat váhy podle rolí níže; nepoužívat 700 všude. | Rodinu neměnit. Přemapovat hero/sekce z 500 na WP 600; nabídky mohou zůstat kompaktní. | P0 | | Základ stránky | WP `body`: 18/27 px, 400, text `#231f20`, povrch `#fcfcfc`. | 16/24,8 px, 400, `#173b58`, povrch `#f3f6f9` desktop a `#f2f5fa` mobil. | 15/23,25 px desktop; 14/21,7 mobil; `#17283a`; povrch `#fcfcfc`. | Nepřepnout všechny ovladače na 18 px. Dlouhé vysvětlující texty zvednout na 18/27, utility ponechat 15–16; hlavní povrch sjednotit na `#fcfcfc`. **Adaptace hustého formuláře.** | Povrch již odpovídá. Dlouhé texty zvednout na 18/27 desktop a nejméně 16/24 mobil; kompaktní metadata 14–15. | P1 | | Produktový/marketingový hero h1 | `.service-title h1.title`: 64/83,2 px, 600, `#003b71`; mobil 42/54,6 px. Červené části mají `#f42534` a skutečný ExtraBold. | Úraz nemá marketingový hero; krokové h1 je jiná role. | `.hero-copy h1`: 58/62,64 px, 500; mobil 36/38,88 px, 500, celé modré. | Nezvětšovat kalkulační krok na 64 px. Pokud vznikne samostatná landing část, použít přesně 64/83,2 a 42/54,6, 600. | Hero posunout na 64/83,2, 600 desktop a 42/54,6, 600 mobil. Červené zvýraznění použít jen pro významové slovo, ne mechanicky. | P1 | | Hlavní nadpis kroku kalkulačky | Nejbližší doložená role je produktové `.format-title`: 32/35,2 px, 600; mobil 28/30,8 px, 600. | `.screen-heading h1`: 34/41,48, 700; mobil 25/30, 700. | `#results-count-heading`: 50/59, 500; mobil 29/32,48, 500. Formulářový h2: 28/33,04, 500; mobil 23/27,14. | Sjednotit krokové h1 na 32/35,2, 600 desktop a 28/30,8, 600 mobil. Tím se zmenší tučnost a mobilní hierarchie zesílí. | Výsledkové h1 snížit na 32/35,2, 600 desktop; mobil 28/30,8, 600. Formulářové h2 může používat 28/30,8, 600 na obou šířkách s rozumným zalomením. | P0 | | Sekční h2 | Produktové h2: 32/35,2, 600, `#03407c`; mobil 28/30,8. Domovské h2 mobilně 24/26,4, 700. | H2 „Rozsah krytí“ 14/22,4, 700; „Vyberte pojišťovnu“ 15/22,5, 700. | Nabídkové h2 17/20,06, 700. | Hlavní sekce zvednout alespoň na 24/28, 600; malý 14–15px řez ponechat jen jako label, ne jako nadpis sekce. | Jméno produktu v nabídce ponechat 17–18 px, ale 600 místo 700. Skutečné sekční h2 použít 28–32 px / 600. **Role nabídky je adaptace.** | P1 | | Nadpisová červená linka | `.format-title::after`: přesně 100 × 2 px, `#f42534`, desktop i mobil. | `.screen-heading h1::after`: 88 × 1 px, `#f42434`. | Vstupní `.card-heading` má plnou spodní hranu 2 px `#f42434` přes 679 px. Ve výsledcích linku nemaluje samotné `#results-count-heading`, ale jeho rodič `.page-heading::after`: existujících 100 × 2 px, `#f42434`, shodně desktop i mobil. | Změnit na 100 × 2 px a přesně `#f42534`; držet za celým nadpisovým blokem, ne za dílčím slovem. | U výsledků **nepřidávat druhou linku**: zachovat `.page-heading::after` a pouze sjednotit barvu na `#f42534`. Plnou hranu vstupní karty ponechat jen jako strukturální oddělovač; případnou krátkou linku u jiných nadpisů přidat až po kontrole rodičovského pseudoelementu. | P0 | | Primární marketingové CTA | `.button-icons-area a`: výška 84 px, desktop 403,4 px / mobil 311 px, 24/28 px, 600, bílé na `#00b53b`, bez borderu a gradientu, r8. Po 700 ms hoveru stejné barvy. | Není marketingová CTA; flow CTA jsou menší. | Úvodní `.button--primary`: 58 px desktop / 48 mobil, 18/21,6, 700, `#00b53c`, r8; hover po 700 ms `#009b33`. | Pro případnou landing CTA použít WP metriku. Flow tlačítka nezvětšovat na 84 px. | Pokud má tlačítko zůstat kartové flow CTA, zachovat 48–58 px jako **adaptaci hustoty**, ale typ, barvu a r8 přiblížit WP; marketingový vstup může použít 84 px / 24 / 600. | P1 | | Primární CTA ve flow | WP dokládá zelenou hlavní akci, ne kompaktní kalkulační rozměr. Přesná bílá na `#00b53b` má jen 2,74:1. | Nabídka `108×44`, 12/16,8, 650, `#003b71`, r12 desktop / r6 mobil. Pokračovat `247,9×44,2`, 13/18,2, r12. Hover přepne na `#51b24e` a text `#102f49`. | Úvodní CTA zelená. Výběr nabídky je však gradient `linear-gradient(110deg,#00457e,#273443)`, 13/15,6, r8. | Hlavní „Vybrat“, „Pokračovat“, „Uložit“ dát zeleně už v klidu; odstranit modrá→zelená změnu role na hoveru; akční radius sjednotit na 8 px. Pro malé bílé texty použít tmavší přístupnou zelenou, např. `#00852c` (4,78:1) — **přístupnostní adaptace, ne přesný WP odstín**. | Odstranit gradient z „Vybrat“ a použít stejnou primární zelenou jako úvod. Pro 13–18px bílý text rovněž použít přístupnou tmavší zelenou; WP `#00b53b` ponechat jako brandový akcent/status. | P0 | | Hover primární akce | Zelené CTA po 700 ms zůstává `#00b53b`; telefon se mění z `#03407c` na `#f42534`. | CTA po 700 ms mění barvu i kontrastní logiku: `#003b71/white` → `#51b24e/#102f49`. | Zelené CTA `#00b53c` → `#009b33`; gradientové „Vybrat“ se nemění. | Zrušit barevný skok mezi dvěma různými rolemi. Hover indikovat stínem/posunem nebo mírným tónem uvnitř stejné zelené škály; text neměnit. | Sjednotit hover všech primárních akcí. Nabídkové „Vybrat“ nesmí být inertní, zatímco úvod tmavne; použít stejnou zpětnou vazbu. **WP neudává přístupný hover.** | P1 | | Sekundární/outline akce | Reprezentativní produktové stránky samostatnou outline CTA nedokládají. Doložené kontaktní odkazy jsou textové a telefon na hoveru zčervená. | Bílé sekundární tlačítko má často r12, border `#bccfdf`; preset desktop transparentní r7, mobil border/r12. | Outline akce r8, `#003b71`/white, 1px navy; hover světle modrý `#edf4fa`. | **Adaptace / nedoloženo WP:** sjednotit všechny sekundární akce na r8, 1px `#003b71`, bílý povrch; odstranit směs r7/r12. | Již geometricky odpovídá akčnímu r8; zachovat. Telefonní/textové odkazy mohou přebírat červený hover z WP. | P1 | | Kategorie / jednoduchá karta | `.hp-links .box .body`: `#f2f4f7`, r15, bez borderu a stínu, 280×190 px. | Rizikové karty: bílé, 1px `#cbd8e5`, r13 desktop; vybrané 1px navy + inset; mobil r12. | Nabídka: bílá, 1px `#d8e3e9`, r14, stín `rgba(0,59,113,.1) 0 12px 34px`. Formulářová karta r14 a výrazný `0 0 30px #d6d6d6`. | Pro jednoduché volby, které nepotřebují tabulkovou přesnost, použít `#f2f4f7`, r15, bez stínu. U nabídky/rizik ponechat jemný border jako **adaptaci srovnávače**, ale zrušit dvojitý border+inset tam, kde stav vyjádří ikona i text. | Ztlumit nebo odstranit velký stín nabídek; r14 zaokrouhlit na token 15. Formulářovou kartu lze ponechat vyvýšenou jako **nedoloženou adaptační vrstvu**, ale se slabším stínem. | P1 | | Nabídková tabulka / řádky | WP tuto komponentu nedokládá. Produktový akordeon je transparentní, bez borderu/radiusu; h3 24/24, 600, `#f42434`. | Nabídkový řádek desktop 1182×75,4 bez vlastního borderu; obal má jemnou hranici a řádky oddělují linky. Mobil řádky 335×48, bílé, r7. | Nabídky jsou samostatné vysoké karty 404×416,5 desktop / 353×540 mobil. | **Adaptace / nedoloženo WP:** zachovat tabulkový desktop a kompaktní mobil, protože podporují porovnání. Jen přenést typ, barvu CTA a jednotné tokeny. | **Adaptace / nedoloženo WP:** zachovat kartový model, ale zmenšit hluk stínů a sjednotit CTA; nepřebírat úrazový řádkový layout jen kvůli stylu. | P2 | | Form fields | WP v posuzovaných stránkách žádný vlastní input/select nedokládá; CTA vede na jinou doménu. | Input 48 px, 1px `#b6c9d8`, r10; select totéž; datum 15/22,5. | Input 48–49 px, 1px `#c3d2dc`, r8; select r8. | **Adaptace:** sjednotit field radius na akční WP r8 (nyní r10), výšku 48 zachovat; navy focus 3 px. | Již r8 a 48 px; zachovat. Sjednotit focus s úrazem. | P1 | | Selected stav | WP selected stav nedokládá. | Vybrané riziko: navy border + inset; mobil také světle modré `#e6f0fa`; frekvence `#f1f7fd`. | Aktivní tab: bílý r8 se stínem; destinace má navy border/check. | **Adaptace:** zachovat border + výplň + ikonu/text; stav nesmí stát jen na barvě. Sjednotit selected povrch do jedné světle modré. | **Adaptace:** zachovat check a border; sjednotit vybrané taby/destinace s týmž tokenem povrchu, ne přebírat úrazovou geometrii. | P2 | | Disabled stav | WP disabled stav nedokládá. | Nedostupné „Vybrat“ je stále navy/white, ale `disabled:true` a `opacity:.45`; hover jej nemění. Řádek už obsahuje slovní důvod nedostupnosti. | V měřeném výsledkovém vzorku nebyla autoritativní disabled CTA role. | **Adaptace:** zachovat textový důvod i nativní `disabled`; samotná opacity nesmí být jediný signál. Neodvozovat barvu z WP. | **Adaptace:** definovat disabled token před implementací: neutralizovaná výplň, zákaz kurzoru, srozumitelný důvod; nepřebírat úrazový stav jako autoritu. | P1 | | Modal / bottom sheet | WP vzorek modal nedokládá. | Desktop dialog 620×572,7, r18, stín `0 20px 80px rgba(23,59,88,.25)`; mobil šířka 375, r18 18 0 0, stín vzhůru. H2 24/32,4/700 desktop, 19/25,65/700 mobil. | Desktop modal 860×860, r14, stín `0 20px 70px rgba(0,0,0,.25)`; mobil 351×788, r18 18 0 0. H2 24/28,32/700 na obou šířkách. | **Adaptace / nedoloženo WP:** funkční bottom sheet zachovat. Pro systémovou konzistenci lze desktop r18 změnit na obsahový r15; mobilní horní r18 ponechat kvůli gestu/layeru. H2 přiblížit 24/600. | **Adaptace / nedoloženo WP:** desktop r14 změnit na 15; mobilní horní r18 ponechat. H2 24/600; nevynucovat úrazový rozměr. | P2 | | Focus | WP zelené CTA má po programovém focusu vypočtený `outline-style:none`; viditelný focus zde není doložen. | Nabídkové CTA má viditelný 3px `#205db3` outline/offset 3; některá další primary tlačítka mají outline style `none`. | Datum má 3px navy focus shadow; více buttonů má outline style `none`. | Neopakovat slabinu WP. **Přístupnostní adaptace:** jeden 3px navy focus ring s offsetem 3 pro všechny akce; na navy/green podkladu použít dvouvrstvý white+navy ring. | Totéž; sjednotit input a button focus a otestovat na bílé, zelené i navy. | P0 | | Kontaktní textové odkazy | `a.header-phone`: 22 px, 600, `#03407c`; po 700 ms hoveru `#f42534`. Mobilní hlavička telefonní text skrývá. | Desktop kontakt je menší a kompaktní; mobil ukazuje jen ikony. | Desktop kontakt má label + číslo; mobil pouze ikony. | Na desktopu sjednotit textovou barvu/hover s WP; mobilní ikony ponechat jako funkční adaptaci, mají-li přístupný název. | Stejně; cestovní hlavička je směrem k WP blíž. | P2 | | Barevné tokeny | Doloženo: `#003b71` hero navy, `#03407c` sekční navy, `#002e5f` subtitle, `#f42534` red, `#00b53b` green, `#231f20` text, `#fcfcfc` page, `#f2f4f7` category surface. | Navy většinou `#003b71`, red `#f42434`, ale tělo `#173b58`; vlastní zelený hover `#51b24e`. | Navy `#003b71`, red `#f42434`, zelená `#00b53c`; tělo `#17283a`; gradient přidává `#00457e/#273443`. | Přesně sjednotit 1kanálové odchylky red/green; odstranit vlastní zelený hover z role primary. Textové odstíny převádět po rolích, ne globálně. | Přesně sjednotit red/green; odstranit navy gradient z hlavní akce. | P0 | ## Přístupnostní rozpor autority Naměřená kombinace WordPress CTA `white / #00b53b` má kontrast **2,74:1**. Nesplní 4,5:1 pro běžný text a nedosáhne ani 3:1 pro velký text. Přesné vizuální kopírování této kombinace proto nedoporučuji pro malé flow buttony. V tabulce navrhuji transparentně označenou přístupnostní adaptaci: tmavší zelenou pro samotné buttony (např. `#00852c`, naměřený výpočet 4,78:1 s bílou) a přesný `#00b53b` ponechat pro dekorativní/status akcenty. Alternativou je změnit text na dostatečně tmavou barvu a znovu změřit konkrétní pár; navy `#003b71` na WP zelené má jen 4,12:1, takže pro běžný malý text také nestačí. Červená `#f42534` na bílé má 4,07:1. Je vhodná pro naměřené velké/tučné nadpisy a 2px dekorativní linku, ne automaticky pro drobný běžný text. ## Přesné URL a selektory důkazů | Zdroj a stav | Přesné selektory použité v měření | Co dokazují | |---|---|---| | | `body`, `header.navbar`, `a.header-phone`, `.hp-title h1.title`, `.hp-title h1.secondTitle`, `.hp-news h2.format-title`, `.hp-reasons .box .body`, `.hp-reasons h3.name`, `.hp-links .box .body` | body/fonty/barvy, hlavička, kontakt/hover, hero, sekční h2 a `::after`, karta kategorie/reason | | | `.service-title h1.title`, `.service-title h3.secondTitle`, `.service-content h2.format-title`, `.button-icons-area a[href]`, `a[href*="insurance.ceskepojisteni.cz"]` druhý výskyt, `.open-blocks .block`, `.open-blocks .block h3.name` | produktový hero, mobilní skrytí subtitle, obě zelené CTA, akordeon | | | stejné selektory jako výše | nezávislá kontrola stejného produktového stylu na druhé veřejné podstránce | | | `.calculator-header`, `.checkout-risks .screen-heading h1`, `.desktop-section-toolbar h2`, `.quote-row`, `[data-company="pvzp"]`, `.quote-row.is-unavailable [data-company]`, `[data-risk="permanent"][data-target="global"]`, `[data-risk="death"][data-target="global"]` | hlavička, nadpis/linka, nabídka, primary/disabled, selected/unselected | | stejný úraz, otevřený detail rizika | `#detail-dialog`, `#detail-dialog .sheet-content`, `#detail-dialog h2`, `#detail-dialog select`, `#detail-dialog button[type="submit"]`, `#detail-dialog .button.secondary`, `#detail-dialog .sheet-close` | dialog, formulářové pole, buttony, modal radius/stín | | stejný úraz, `#customize` a `#people` | `#policy-start-heading`, `.checkout-payment legend`, `.start-date-card`, `#profile-start`, `.frequency-option`, `.checkout-payment button[data-action="next"]`, `.ferda-page .desktop-panel`, `.ferda-page input`, `.ferda-page form .actions .button` | sekční typ, karty, inputy, pokračování, osobní formulář | | | `.hero-copy h1`, `.calculator-card.entry-card`, `.entry-panel .card-heading h2`, `.entry-panel .button--primary[type="submit"]`, `.hero-copy button`, `#entry-tab-classic`, `.destination-picker label`, `#trip-country`, `#trip-date-from`, `.people-picker button` | hero, formulářová karta, primary/secondary, tab, volby, pole | | stejná cesta, `#vysledky` | `#results-count-heading`, `.page-heading`, `.page-heading::after`, `.offer-tile`, `.offer-tile h2`, `.offer-tile .button--outline`, `.offer-tile .button--navy`, `.offer-tile .option-button`, `.offer-tile .compare-check` | výsledková hierarchie, existující rodičovská linka 100×2, karty, outline/gradient/textové akce | | stejná cesta, otevřený detail nabídky | `.modal.offer-detail-modal`, `.modal.offer-detail-modal > div`, `.modal.offer-detail-modal h2`, `.modal.offer-detail-modal h3`, `.modal.offer-detail-modal .button--secondary`, `.modal.offer-detail-modal .button--navy`, `.modal.offer-detail-modal .modal-close` | modal desktop/mobile, nadpisy, buttony, zavírání | Úplný strojový odečet je v [computed-styles.json](evidence/gpt-5.6-sol/computed-styles.json). Doplňující strom povrchů a plná formulářová linka jsou v [supplemental-styles.json](evidence/gpt-5.6-sol/supplemental-styles.json). Samostatné ověření rodičovské linky výsledků na obou šířkách je v [results-heading-parent.json](evidence/gpt-5.6-sol/results-heading-parent.json). Inventář skutečných stavů/selektorů je ve [state-inventory.json](evidence/gpt-5.6-sol/state-inventory.json) a navigační původ WordPress URL v [discovery.json](evidence/gpt-5.6-sol/discovery.json). Vizuální důkazy: - WordPress: [home desktop](evidence/gpt-5.6-sol/wp-home-desktop-1440x900.png), [home mobil](evidence/gpt-5.6-sol/wp-home-mobile-375x812.png), [cizinci desktop](evidence/gpt-5.6-sol/wp-cizinci-desktop-1440x900.png), [cizinci mobil](evidence/gpt-5.6-sol/wp-cizinci-mobile-375x812.png), [dopravci desktop](evidence/gpt-5.6-sol/wp-dopravci-desktop-1440x900.png), [dopravci mobil](evidence/gpt-5.6-sol/wp-dopravci-mobile-375x812.png) - úraz: [nabídky desktop](evidence/gpt-5.6-sol/uraz-risks-desktop-1440x900.png), [nabídky mobil](evidence/gpt-5.6-sol/uraz-risks-mobile-375x812.png), [dialog desktop](evidence/gpt-5.6-sol/uraz-risk-dialog-desktop-1440x900.png), [dialog mobil](evidence/gpt-5.6-sol/uraz-risk-dialog-mobile-375x812.png), [doladění desktop](evidence/gpt-5.6-sol/uraz-customize-desktop-1440x900.png), [osobní údaje mobil](evidence/gpt-5.6-sol/uraz-people-mobile-375x812.png) - cesta: [vstup desktop](evidence/gpt-5.6-sol/cesta-entry-desktop-1440x900.png), [vstup mobil](evidence/gpt-5.6-sol/cesta-entry-mobile-375x812.png), [nabídky desktop](evidence/gpt-5.6-sol/cesta-results-desktop-1440x900.png), [nabídky mobil](evidence/gpt-5.6-sol/cesta-results-mobile-375x812.png), [modal desktop](evidence/gpt-5.6-sol/cesta-offer-modal-desktop-1440x900.png), [modal mobil](evidence/gpt-5.6-sol/cesta-offer-modal-mobile-375x812.png) ## Návrh společných tokenů — pouze to, co WordPress dokládá ```css :root { --brand-font: "Montserrat", sans-serif; --brand-navy-hero: #003b71; --brand-navy-section: #03407c; --brand-navy-subtitle: #002e5f; --brand-red: #f42534; --brand-green-wp: #00b53b; --brand-text: #231f20; --brand-page: #fcfcfc; --brand-surface-soft: #f2f4f7; --brand-radius-action: 8px; --brand-radius-card: 15px; --brand-line-width: 100px; --brand-line-height: 2px; --brand-hero-size: 64px; --brand-hero-line: 83.2px; --brand-hero-weight: 600; --brand-section-size: 32px; --brand-section-line: 35.2px; --brand-section-weight: 600; } @media (max-width: 767px) { :root { --brand-hero-size: 42px; --brand-hero-line: 54.6px; --brand-section-size: 28px; --brand-section-line: 30.8px; } } ``` Do společných WP tokenů záměrně nezařazuji input border, selected/disabled, focus ring, nabídkový card shadow ani modal radius. Tyto role WordPressové vzorky nedokládají. Prototypy je mohou sdílet až jako vlastní **calculator-adaptation** vrstvu, nikoli vydávat za WordPress pravidlo. Stejně tak `--action-primary-accessible: #00852c` je doporučená přístupnostní adaptace, ne naměřený WP token. ## Implementační pořadí — úraz 1. **P0: akční role.** Převést hlavní „Vybrat/Pokračovat/Uložit“ z navy na společnou zelenou primary roli; r8; odstranit navy→světle zelený hover skok. Zároveň zavést přístupnou tmavší zelenou pro malé bílé texty. 2. **P0: typografie a linka.** Krokové h1 32/35,2/600 desktop a 28/30,8/600 mobil; červená linka 100×2 `#f42534`; sekční h2 přestat vizuálně vydávat za 14px label. 3. **P0: focus.** Zachovat již dobrý 3px focus u nabídky a rozšířit jej na všechny buttony, inputy, selecty, dialogové akce a zavírání. 4. **P1: geometrie.** Akce r8, input/select r8, jednoduché soft karty r15. Porovnávací řádky a selected karty ponechat jako calculator adaptation. 5. **P1: povrchy a border noise.** Dlouhé texty a hlavní povrch přiblížit WP; u jednoduchých voleb použít `#f2f4f7` bez stínu, ale zachovat hranice tam, kde pomáhají srovnání. 6. **P1: stavy.** U disabled zachovat existující slovní důvod i nativní stav; selected sjednotit na jeden povrch + border + ikona/text. Modal měnit až po rozhodnutí calculator-adaptation tokenů. 7. **Regrese:** bez změny rozložení/výpočtů ověřit nabídky, rizikový popup, doladění, osobní formulář, review a celé demo na 1440×900/375×812, klávesnici, focus a reduced motion. ## Implementační pořadí — cesta 1. **P0: jedna primary role.** Zrušit tmavý gradient na nabídkovém „Vybrat“ a použít stejnou zelenou primary roli jako „Porovnat nabídky“; sekundární „Detail“ ponechat outline r8. 2. **P0: výsledková hierarchie.** `#results-count-heading` stáhnout z 50/59 na 32/35,2/600; mobil 28/30,8/600. Formulářový h2 28/30,8/600. Hero naopak zvětšit na WP 64/83,2/600 a mobil 42/54,6/600. 3. **P0: linky a focus.** Existující výsledkovou `.page-heading::after` 100×2 zachovat a pouze sjednotit její červenou na `#f42534`; nepřidávat druhou linku k h1. Plné 2px hrany ponechat jen jako strukturální oddělovač. Zavést viditelný focus pro všechny buttony, ne jen pro pole. 4. **P1: karty.** R14 sjednotit na WP card r15 a výrazný nabídkový stín ztlumit/odstranit. Nezměnit kartový flow na úrazovou tabulku. 5. **P1: typ a body.** Dlouhý text zvednout, metadata ponechat kompaktní. Sjednotit `#f42434/#00b53c` na přesné WP tokeny, ale primary text řešit přístupnou adaptací. 6. **P2: modal a selected/disabled.** Modal a bottom sheet zachovat jako adaptační komponentu; desktop r15, mobil horní r18. Selected/disabled definovat ve vlastní calculator vrstvě a neodvozovat z úrazu. 7. **Regrese:** bez změny výpočtů ověřit vstupní formulář, nabídky, detail nabídky, compare/select stavy a celé demo na obou rozměrech; síťové POST dál nesmí být součástí vizuálního testu. ## Kontrolní závěr Oba prototypy mohou působit jako jedna značka bez vzájemného kopírování layoutu: sdílet naměřený WordPress font, přesné navy/red/green tokeny, hierarchii nadpisů, krátkou 100×2 linku a akční/card radius 8/15. Úraz potřebuje hlavně přestat skrývat primary zelenou až do hoveru a zmenšit váhu nadpisů; cesta potřebuje odstranit gradient z výběru nabídky, srovnat hero/výsledkovou typografii a ztišit stíny. Form fields, nabídky, selected/disabled a modaly zůstávají přiznanou calculator adaptací, protože WordPressová prezentace pro ně neposkytuje autoritativní vzor.