/* ═══════════════════════════════════════════════════════════════════════ GLOBAL.CSS — designové tokeny (single source of truth) + globální baseline webu Načítá: hlavička, 1. v pořadí PDU CSS (pořadí = kaskáda, viz meta/manual.md kap. 4) Prefix tříd: různé — viz mapa (tokeny --pdu-*, .pdu-enter, .pdu-mm-*) ─────────────────────────────────────────────────────────────────────── MAPA SEKCÍ (Ctrl+F na "SEKCE N."): 1. Brand CSS variables (:root) — barvy, spacing, radius, fonty, stíny, gradienty 2. Globální micro-animace — hover transition na a / button / input 3. Prefers-reduced-motion — a11y baseline, vypnutí animací 4. .pdu-enter — fade-in JS-injektovaného obsahu (dřív značeno „SEKCE 3b") 5. Per-typ typografické tokeny — idx / cat / pro / blo / pag 6. Mobile-first foundation — tap highlight, touch-action, iOS no-zoom inputy 7. Megamenu animované ikony — .pdu-mm-* (jen ≥62em, páruje se s foot.js) 8. Lišta hledání — žlutá CTA „HLEDAT" (FOUC fix) Princip: VŠECHNY designové tokeny jsou ZDE. Sekční CSS soubory (style-pages.css, style-blog.css, etc.) tokeny POUZE konzumují přes var(--pdu-*). Změna brand barvy / spacing / radius = úprava v tomto souboru, automaticky se propagne. ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── SEKCE 1. BRAND CSS VARIABLES (:root) Centrální definice všech designových tokenů (single source of truth). Pravidlo: NIKDY nepsat hex/px/em hodnoty v sekčních CSS — vždy var(--pdu-*). Skupiny tokenů: a) Primární brand barvy (logo, identita) b) Odvozené tóny (světlejší/tmavší varianty) c) Akcentní barvy (zelená, žlutá s variantami) d) Sociální / speciální (FB, ocelová modrá, Cofidis) e) Spacing systém (xs/s/m/l/xl) f) Border-radius (s/m/l/card/xl) g) Fonty (zakladni/nadpisy/mono) + velikosti (xs..xl) h) Přechody (rychly/stredni/pomaly + duration only) i) Rozšíření 2026-05-13 — text/pozadí/okraje/stíny pro HP rozcestník j) Glossy gradienty tlačítek (default / light / dark / hover) ─────────────────────────────────────────────────────────────────────── */ :root { /* ── Primární brand barvy ─────────────────────────────────── */ --pdu-barva-tmavomodra: #191932; /* CMYK 100/96/22/76 — tmavá modrofialová (logo, texty, tmavá pozadí) */ --pdu-barva-zelena-brand: #00a664; /* CMYK 100/0/85/0 — zelená loga (brand identita) */ --pdu-barva-zelena-btn: #4CAF50; /* Zelená tlačítek a navigace (interaktivní prvky) */ /* (--pdu-barva-zluta se definuje níž u skupiny „Žlutá — 3 varianty"; duplicitní dřívější definice se stejnou hodnotou #FFFF00 zde smazána 2026-07-29) */ /* ── Odvozené tóny ────────────────────────────────────────── */ --pdu-barva-zelena-svetla: #E6FFD1; /* Světle zelená pozadí rámečků */ --pdu-barva-sede-svetla: #F5F5F5; /* Neutrální světlé pozadí */ --pdu-barva-sede-stredni: #CCCCCC; /* Rámečky, oddělovače */ --pdu-barva-bila: #FFFFFF; --pdu-barva-tekst-zakladni: #333333; /* Základní barva textu */ /* ── Zelená akcent — dominantní zelená webu ───────────────── */ /* Borders, FAQ, nadpisy, aktivní prvky. Extrahováno z legacy — 8× výskyt, schváleno. */ --pdu-barva-zelena-akcent: #00B46E; /* ── Žlutá — 3 varianty pro různé kontexty ────────────────── */ --pdu-barva-zluta: #FFFF00; /* Čistá žlutá (CMYK 0/0/100/0) — výrazné akcenty */ --pdu-barva-zluta-warm: #F3C446; /* Warm žlutá — animace, jemnější akcenty */ --pdu-barva-zluta-svetla: #FFFEEC; /* Světle žluté pozadí rámečků (paralela --pdu-barva-zelena-svetla) */ /* ── Hover varianty ───────────────────────────────────────── */ --pdu-barva-zelena-btn-hover: #388E3C; /* Tmavší zelená (btn) pro hover */ --pdu-barva-zelena-akcent-hover: #009458; /* Tmavší akcent zelená pro hover */ /* ── Sociální / speciální ─────────────────────────────────── */ --pdu-barva-facebook: #3c63ab; /* Facebook brand modrá — jen pro FB tlačítka */ --pdu-barva-ocelova-modra: #2e445a; /* CTA "výroba na míru" v kategorii Brány a branky */ --pdu-barva-cervena-alert: #E63C24; /* Upozornění v produktových popisech (3+ výskyty na branových podkategoriích) */ --pdu-barva-cervena-svetla: #FDECEA; /* Svetle cervene pozadi ramecku (paralela --pdu-barva-zluta-svetla) */ --pdu-barva-cofidis-zluta: #FECB00; /* Výhradně pro splátkový prodej Cofidis CTA (Batch 11: /cena-dopravy/, /splatkovy-prodej/) */ /* ── Spacing systém (5 stupňů) ────────────────────────────── */ /* Použití: padding: var(--pdu-odsazeni-s) var(--pdu-odsazeni-m); */ --pdu-odsazeni-xs: 0.3125em; --pdu-odsazeni-s: 0.625em; --pdu-odsazeni-m: 1.25em; --pdu-odsazeni-l: 1.875em; --pdu-odsazeni-xl: 3.125em; /* ── Border-radius (3 stupně + rozšíření) ─────────────────── */ --pdu-radius-s: 0.1875em; /* Drobné akcenty (popisové pill labely) */ --pdu-radius-m: 0.375em; /* Tlačítka, tagy */ --pdu-radius-l: 0.75em; /* Větší karty, formuláře */ /* ── Fonty — preferujeme inherit (z Shoptet šablony) ──────── */ --pdu-font-zakladni: inherit; /* Shoptet šablona — nepřepisovat, dědí globální font */ --pdu-font-nadpisy: inherit; /* Nadpisy — sjednotit zde při změně fontu */ --pdu-font-mono: monospace; /* Kód, technické hodnoty */ /* ── Typografie — velikosti (5 stupňů, rem-based) ─────────── */ --pdu-font-size-xs: 0.75em; /* ~0.75em — poznámky, popisky */ --pdu-font-size-s: 0.85em; /* ~0.875em — vedlejší text, tabulky */ --pdu-font-size-m: 1em; /* ~1em — základní text */ --pdu-font-size-l: 1.25em; /* ~1.25em — perex, zvýraznění */ --pdu-font-size-xl: 1.5em; /* ~1.5em — H2 nadpisy */ /* ── Přechody — 2 typy (full shorthand vs. duration only) ─── */ /* Full shorthand — použít na obecné a/button (transition: var(--pdu-prechod-rychly)) */ --pdu-prechod-rychly: all 0.15s ease; --pdu-prechod-stredni: all 0.25s ease; --pdu-prechod-pomaly: all 0.4s ease; /* Duration only — pro single-property animace (transition: transform var(--pdu-prechod-dur-stredni) ease) */ --pdu-prechod-dur-rychly: 0.15s; --pdu-prechod-dur-stredni: 0.25s; --pdu-prechod-dur-pomaly: 0.4s; /* ════════ ROZŠÍŘENÍ 2026-05-13 (HP rozcestník) ════════ */ /* ── Sekundární text (2 úrovně tlumenosti) ────────────────── */ --pdu-barva-text-sekundarni: #5B5B6E; /* tlumený text — popisky, mission, span v kartách */ --pdu-barva-text-sedy: #666666; /* nejtlumenější — final disclaimer, stat-desc */ /* ── Pozadí — varianty (doplnění k zelena-svetla #E6FFD1) ── */ --pdu-barva-pozadi-foto: #F8F8F8; /* placeholder pod product image */ --pdu-barva-zelena-svetla-2: #F5FAF5; /* CTA bg (tel/mail blok) */ --pdu-barva-zelena-svetla-3: #E8F8F0; /* kruh za emoji ikonou (publikum) */ /* ── Okraje (3 odstíny šedi pro různý vizuální kontrast) ── */ --pdu-barva-okraj-jemny: #E0E0E0; /* karty, kontakt blok, staty */ --pdu-barva-okraj-svetly: #F0F0F0; /* vnitřní separator v kartě */ --pdu-barva-okraj-zeleny-jemny: #E0ECE0; /* okraj kolem zelených CTA bloků */ /* ── Žlutá CTA — třetí varianta žluté ────────────────────── */ /* Mezi #FFFF00 (čistá) a #F3C446 (warm). Použito: "Spočítat plot zdarma", "Chci nabídku" */ --pdu-barva-zluta-cta: #F4E732; /* ── Tooltipy — tmavý štítek ───────────────────────── */ /* Pozadí bublin — našich [data-tip] i nativního Bootstrap tooltipu Shoptetu. Odstín převzat z hlavičky Režimu AI, kde tooltipy vznikly 18. 8. 2026. */ --pdu-barva-zelena-tmava: #243b2f; /* ── Rozšíření radius (mezi -m=6 a -l=12) ────────────────── */ --pdu-radius-card: 0.625em; /* karty (staty, kroky, ref-karta, koho-item) */ --pdu-radius-xl: 0.875em; /* mid CTA, kontakt blok, hero-pletivo, procnas */ /* ── Stíny — 4 vrstvy hloubky ─────────────────────────────── */ /* Použití progressively: jemny (default karta) → stredni (focus karta) → vyrazny (hover) → karta-hover (carousel) */ --pdu-stin-jemny: 0 0.25em 0.625em rgba(0,0,0,.04); --pdu-stin-stredni: 0 0.375em 1.25em rgba(0,0,0,.06); --pdu-stin-vyrazny: 0 0.625em 1.5625em rgba(0,0,0,.12); --pdu-stin-karta-hover: 0 0.625em 1.875em rgba(0,0,0,.12); /* ── Glossy button gradienty — 2 vrstvy pro 3D feel ─────── */ /* Použití: background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy); */ /* + background-color: ; (drží base color pod gradienty) */ /* Default (střední tóny — zelená, modrá): white top highlight + dark bottom shadow */ --pdu-grad-btn-glossy: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 45%, rgba(0,0,0,.12) 100%); --pdu-grad-btn-corner: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.22), transparent 60%); /* Light (světlé tóny — žlutá): jen top white highlight, BEZ bottom dark. Bottom dark i při .06 tvořil viditelný "černý rámeček" u spodního okraje žluté (user feedback 2026-05-22). Bez bottom dark vypadá čistě. */ --pdu-grad-btn-glossy-light: linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 60%); --pdu-grad-btn-corner-light: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.35), transparent 60%); /* Dark (tmavé tóny — tmavomodrá): slabší highlight + silnější bottom shadow */ --pdu-grad-btn-glossy-dark: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%, rgba(0,0,0,.20) 100%); --pdu-grad-btn-corner-dark: radial-gradient(60% 90% at 100% 0%, rgba(255,255,255,.16), transparent 60%); /* Hover stav (bílé bg, brand inverze): subtilní dark corner + bottom shadow. POZN.: corner použít DARK (rgba 0,0,0,.04) ne brand zelenou — zelený tint na bílém pozadí vypadal "off-brand divně" (user feedback 2026-05-22). */ --pdu-grad-btn-hover-corner: radial-gradient(60% 90% at 100% 0%, rgba(0,0,0,.04), transparent 60%); --pdu-grad-btn-hover-glossy: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.05) 100%); /* ── Globální font-size bump pro EM design system ────────── */ /* Aplikuje se na root wrappery (.pdu-pag-page; pro cat/blog/pro doplnit manuálně pokud root wrapper class existuje). Default 1.0625em = bump z ~16px (Shoptet body) na ~17px → všechny vnitřní em hodnoty se škálují proporčně o ~6 %. Pro větší bump: 1.125em (~18px) nebo 1.1875em (~19px). */ --pdu-base-font-size: 1.0625em; } /* ─────────────────────────────────────────────────────────────────────── SEKCE 2. GLOBÁLNÍ MICRO-ANIMACE (hover přechody) Default transition pro VŠECHNA tlačítka a odkazy (rychlý 0.15s) — Shoptet base ji nemá. Sekční CSS to smí lokálně přebít delším přechodem (např. karty 0.25s). ─────────────────────────────────────────────────────────────────────── */ a, button, input[type="submit"], input[type="button"] { transition: var(--pdu-prechod-rychly); } /* ─────────────────────────────────────────────────────────────────────── SEKCE 3. PREFERS-REDUCED-MOTION (a11y baseline) Vypne VŠECHNY animace/transitions globálně pro uživatele s OS preferencí „Reduce motion" (Mac System Settings, Win Settings) — wildcard * + ::before + ::after. Sekční CSS doplňuje specific overrides (.pdu-pag-dot animation: none). ─────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ─────────────────────────────────────────────────────────────────────── SEKCE 4. .pdu-enter — GENERICKÝ FADE-IN JS-INJEKTOVANÉHO OBSAHU Jemný nástup místo „popnutí" u prvku, který JS vkládá až po prvním paintu. (Dřív značeno „SEKCE 3b" — přečíslováno 2026-07-29, odkazy v script-sections.js, script-pages.js a script-category.js opraveny.) KDY: prvek vkládaný JS PO prvním paintu (fetch .then / DCL / window.load) → jemný nástup místo „popnutí". VŽDY jen na první vložení (one-shot). KDY NE (důležité — jinak uškodí): - prvky vkládané PŘED paintem (early-inject header kontakt) — nemá co fadovat - LCP obsah / hlavní text — opacity:0 odkládá LCP (horší metrika) - prvky, které cizí kód opakovaně přepisuje (Shoptet autocomplete v .search) → fade při každém re-mountu = pomrkávání; re-mounty nechat okamžité - swap, který má být bezešvý (YT facade → iframe) Prvek musí mít místo rezervované CSS (viz „CLS REZERVACE" ve style-sections.css) — fade řeší jen vizuální nástup, NE layout shift. Pozn.: má-li prvek vlastní animation, musí se animace KOMBINOVAT v jednom pravidle s vyšší specificitou (vzor: .pdu-ai-btn.pdu-ai-enter ve style-sections.css) — jinak si navzájem přebijí. reduced-motion řeší globální wildcard v SEKCI 3 výše. ─────────────────────────────────────────────────────────────────────── */ @keyframes pdu-enter-fade{from{opacity:0}to{opacity:1}} .pdu-enter{animation:pdu-enter-fade .22s ease-out} /* ─────────────────────────────────────────────────────────────────────── SEKCE 5. PER-TYP TYPOGRAFICKÉ TOKENY (5 page-types) Každý page-type (idx/cat/pro/blo/pag) má vlastní stupnici nadpisů a body textu; aktuálně mají VŠECHNY stejné hodnoty (parity s Shoptet base z main-11.less, crawl 2026-04-29) — infrastruktura je READY pro budoucí divergenci. - Weight 700 default — brand-driven (Shoptet base má 400, ale v WYSIWYG patternu se text stejně obaluje — proto výchozí 700, ať se nepřidává ručně) - Použití v sekčních CSS: var(--pdu-pag-fs-h1), var(--pdu-blo-barva-link-hover) atd. - Page-types: • PDU-IDX = type-index (homepage) • PDU-CAT = type-category (kategorie produktů) • PDU-PRO = type-product / type-detail (detail produktu) • PDU-BLO = type-post (blog článek) • PDU-PAG = type-page (info stránka — kontakty, doprava, splátky, /realizace-montaze/...) ─────────────────────────────────────────────────────────────────────── */ :root { /* ===== PDU-IDX (homepage) — type-index ===== */ --pdu-idx-fs-h1: 1.625em; --pdu-idx-fw-h1: 700; --pdu-idx-fs-h2: 1.25em; --pdu-idx-fw-h2: 700; --pdu-idx-fs-h3: 1.125em; --pdu-idx-fw-h3: 700; --pdu-idx-fs-h4: 1em; --pdu-idx-fw-h4: 700; --pdu-idx-lh-h1: 1.4; --pdu-idx-mt-h1: .67em; --pdu-idx-mb-h1: .67em; --pdu-idx-lh-h2: 1.4; --pdu-idx-lh-h3: 1.4; --pdu-idx-lh-h4: 1.1; --pdu-idx-fs-text-l: 1em; --pdu-idx-fs-text-m: 0.875em; --pdu-idx-fs-text-s: 0.8125em; --pdu-idx-fs-text-xs: 0.75em; --pdu-idx-barva-nadpis: var(--pdu-barva-tmavomodra); --pdu-idx-barva-text: var(--pdu-barva-tekst-zakladni); --pdu-idx-barva-akcent: var(--pdu-barva-zelena-akcent); --pdu-idx-barva-link: var(--pdu-barva-zelena-akcent); --pdu-idx-barva-link-hover: var(--pdu-barva-zelena-akcent-hover); /* ===== PDU-CAT (kategorie) — type-category ===== */ --pdu-cat-fs-h1: 1.625em; --pdu-cat-fw-h1: 700; --pdu-cat-fs-h2: 1.25em; --pdu-cat-fw-h2: 700; --pdu-cat-fs-h3: 1.125em; --pdu-cat-fw-h3: 700; --pdu-cat-fs-h4: 1em; --pdu-cat-fw-h4: 700; --pdu-cat-lh-h1: 1.4; --pdu-cat-mt-h1: .67em; --pdu-cat-mb-h1: .67em; --pdu-cat-lh-h2: 1.4; --pdu-cat-lh-h3: 1.4; --pdu-cat-lh-h4: 1.1; --pdu-cat-fs-text-l: 1.0625em; --pdu-cat-fs-text-m: 1em; --pdu-cat-fs-text-s: 0.9375em; --pdu-cat-fs-text-xs: 0.875em; --pdu-cat-barva-nadpis: var(--pdu-barva-tmavomodra); --pdu-cat-barva-text: var(--pdu-barva-tekst-zakladni); --pdu-cat-barva-akcent: var(--pdu-barva-zelena-akcent); --pdu-cat-barva-link: var(--pdu-barva-zelena-akcent); --pdu-cat-barva-link-hover: var(--pdu-barva-zelena-akcent-hover); /* ===== PDU-PRO (produkt) — type-product / type-detail ===== */ --pdu-pro-fs-h1: 1.625em; --pdu-pro-fw-h1: 700; --pdu-pro-fs-h2: 1.25em; --pdu-pro-fw-h2: 700; --pdu-pro-fs-h3: 1.125em; --pdu-pro-fw-h3: 700; --pdu-pro-fs-h4: 1em; --pdu-pro-fw-h4: 700; --pdu-pro-lh-h1: 1.4; --pdu-pro-mt-h1: .67em; --pdu-pro-mb-h1: .67em; --pdu-pro-lh-h2: 1.4; --pdu-pro-lh-h3: 1.4; --pdu-pro-lh-h4: 1.1; --pdu-pro-fs-text-l: 1em; --pdu-pro-fs-text-m: 0.875em; --pdu-pro-fs-text-s: 0.8125em; --pdu-pro-fs-text-xs: 0.75em; --pdu-pro-barva-nadpis: var(--pdu-barva-tmavomodra); --pdu-pro-barva-text: var(--pdu-barva-tekst-zakladni); --pdu-pro-barva-akcent: var(--pdu-barva-zelena-akcent); --pdu-pro-barva-link: var(--pdu-barva-zelena-akcent); --pdu-pro-barva-link-hover: var(--pdu-barva-zelena-akcent-hover); /* ===== PDU-BLO (blog) — type-post ===== */ --pdu-blo-fs-h1: 1.625em; --pdu-blo-fw-h1: 700; --pdu-blo-fs-h2: 1.25em; --pdu-blo-fw-h2: 700; --pdu-blo-fs-h3: 1.125em; --pdu-blo-fw-h3: 700; --pdu-blo-fs-h4: 1em; --pdu-blo-fw-h4: 700; --pdu-blo-lh-h1: 1.4; --pdu-blo-mt-h1: .67em; --pdu-blo-mb-h1: .67em; --pdu-blo-lh-h2: 1.4; --pdu-blo-lh-h3: 1.4; --pdu-blo-lh-h4: 1.1; --pdu-blo-fs-text-l: 1em; --pdu-blo-fs-text-m: 0.875em; --pdu-blo-fs-text-s: 0.8125em; --pdu-blo-fs-text-xs: 0.75em; --pdu-blo-barva-nadpis: var(--pdu-barva-tmavomodra); --pdu-blo-barva-text: var(--pdu-barva-tekst-zakladni); --pdu-blo-barva-akcent: var(--pdu-barva-zelena-akcent); --pdu-blo-barva-link: var(--pdu-barva-zelena-akcent); --pdu-blo-barva-link-hover: var(--pdu-barva-zelena-akcent-hover); /* ===== PDU-PAG (info-stránka) — type-page ===== */ --pdu-pag-fs-h1: 1.625em; --pdu-pag-fw-h1: 700; --pdu-pag-fs-h2: 1.25em; --pdu-pag-fw-h2: 700; --pdu-pag-fs-h3: 1.125em; --pdu-pag-fw-h3: 700; --pdu-pag-fs-h4: 1em; --pdu-pag-fw-h4: 700; --pdu-pag-lh-h1: 1.4; --pdu-pag-mt-h1: .67em; --pdu-pag-mb-h1: .67em; --pdu-pag-lh-h2: 1.4; --pdu-pag-lh-h3: 1.4; --pdu-pag-lh-h4: 1.1; --pdu-pag-fs-text-l: 1em; --pdu-pag-fs-text-m: 0.875em; --pdu-pag-fs-text-s: 0.8125em; --pdu-pag-fs-text-xs: 0.75em; --pdu-pag-barva-nadpis: var(--pdu-barva-tmavomodra); --pdu-pag-barva-text: var(--pdu-barva-tekst-zakladni); --pdu-pag-barva-akcent: var(--pdu-barva-zelena-akcent); --pdu-pag-barva-link: var(--pdu-barva-zelena-akcent); --pdu-pag-barva-link-hover: var(--pdu-barva-zelena-akcent-hover); } /* ─────────────────────────────────────────────────────────────────────── SEKCE 6. MOBILE-FIRST FOUNDATION (M2 — 2026-05-15) Globální touch/tap optimalizace pro interaktivní prvky + iOS no-zoom guard na inputy (Safari zoomuje při focus, pokud je font-size < 1em). - Touch targets: minimum 44×44 px (Apple HIG) / 48×48 (Material) pro buttons - Reduce CLS: explicit width+height atributy na (řeší se v HTML) - Pozn. 2026-07-29: nekonzumované tokeny (--pdu-bp-*, --pdu-fluid-*, --pdu-touch-min, --pdu-touch-comfortable) smazány; breakpointy se píšou přímo v @media (custom property v media query stejně nefunguje). ─────────────────────────────────────────────────────────────────────── */ :root { /* Touch UX */ --pdu-touch-highlight: rgba(0, 180, 110, .2); /* zelený tap feedback */ } /* Tap highlight + touch action (global) */ html { -webkit-tap-highlight-color: var(--pdu-touch-highlight); } a, button, [role="button"], .pdu-pag-btn-primary, .pdu-pag-btn-cta, .pdu-pag-btn-ghost, .pdu-pag-btn-outline { touch-action: manipulation; /* odstraňí 300ms tap delay na mobile */ } /* iOS no-zoom: inputy ≥1em aby Safari nezoomovalo při focus */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea, select { font-size: 1em; /* iOS limit — nižší zoom-in při focus */ } @media (min-width: 62em) { /* Na desktop můžeme menší font (no zoom risk) */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"], textarea, select { font-size: 0.9375em; } } /* Reduce-motion rozšíření — auto-pause carousels + animations (sekce 3 doplnění) */ @media (prefers-reduced-motion: reduce) { .pdu-pag-carousel { scroll-behavior: auto !important; } .pdu-pag-pruh-zluty-anim { animation: none !important; } } /* ─────────────────────────────────────────────────────────────────────── SEKCE 7. MEGAMENU ANIMOVANÉ IKONY (.pdu-mm-*, 2026-06-10) Hover animace SVG ikon v megamenu „Rádce pro výběr". Páruje se s inlinerem ve foot.js (img → , rodič dostane .pdu-mm-link). Hover trigger je DOM-agnostic přes .pdu-mm-link. ─────────────────────────────────────────────────────────────────────── */ /* gating: jen desktop (≥62em) — na mobilu menu ikony nejsou, nic se nesmí aplikovat */ @media (min-width: 62em) { .pdu-mm-ico { width: 2.6em; height: 2.6em; color: inherit; overflow: visible; vertical-align: middle; flex: none; transform-box: fill-box; transform-origin: center; } /* ikona vycentrovaná ve „menu-image" boxu (scoped na naše položky) → bez díry k textu */ .pdu-mm-link a.menu-image { display: flex; align-items: center; justify-content: center; } .pdu-mm-ico path, .pdu-mm-ico rect, .pdu-mm-ico circle, .pdu-mm-ico line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pdu-mm-ico [class] { transform-box: fill-box; transform-origin: center; } .pdu-mm-link:hover .pdu-mm-ico.is-hodnoceni-reference { animation: pduMmTwinkle .6s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-kalkulator-oploceni { animation: pduMmPop .5s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-fotogalerie-realizaci { animation: pduMmSnap .45s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-nejcastejsi-dotazy { animation: pduMmWig .6s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-vyber-vhodneho-plotu { animation: pduMmPop .5s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-kolik-stoji-plot { animation: pduMmBob .55s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-produktova-videa { animation: pduMmPop .5s ease; } .pdu-mm-link:hover .pdu-mm-ico.is-blog { animation: pduMmLift .5s ease; } /* hover kdekoliv na položce (ikona i text) → zezelenat obojí (li:hover pokrývá obě části) */ .pdu-mm-link:hover .pdu-mm-ico { color: var(--pdu-barva-zelena-akcent); } .pdu-mm-link:hover a, .pdu-mm-link:hover span { color: var(--pdu-barva-zelena-akcent) !important; } } @keyframes pduMmTwinkle { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(20deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } } @keyframes pduMmPop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes pduMmSnap { 0% { transform: scale(1); } 30% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes pduMmWig { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } } @keyframes pduMmBob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } } @keyframes pduMmLift { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-3px) rotate(-4deg); } 100% { transform: translateY(0) rotate(0); } } @media (min-width: 62em) and (prefers-reduced-motion: reduce) { .pdu-mm-ico { animation: none !important; } } /* ─────────────────────────────────────────────────────────────────────── SEKCE 8. LIŠTA HLEDÁNÍ — žlutá CTA „HLEDAT" (FOUC fix, 2026-06-26) Tlačítko HLEDAT je obarvené zde v render-blocking CSS → žluté UŽ při prvním paintu (dřív jen ve foot.js §19, defer JS → flash navy→žlutá při F5). - foot.js §19 stejné pravidlo dál injektuje (identická hodnota) → tato sekce = render-blocking baseline, JS pak no-op duplikát. - Hodnoty 1:1 s foot.js §19 (rev 30). Tokeny ze SEKCE 1. - POZN.: NEpřesouvat sem chipy / .luigi-ac-* z foot.js §19 — ty cílí na JS-vytvářené prvky dropdownu (při paintu neexistují, neflashují). ─────────────────────────────────────────────────────────────────────── */ #formSearchForm button[data-testid="searchBtn"], #formSearchForm .btn-search { background-color: var(--pdu-barva-zluta-cta, #F4E732) !important; background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light) !important; color: var(--pdu-barva-tmavomodra, #191932) !important; font-weight: 800 !important; transition: all .25s ease !important; } #formSearchForm button[data-testid="searchBtn"]:hover, #formSearchForm .btn-search:hover { background-color: var(--pdu-barva-bila, #fff) !important; background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy) !important; color: var(--pdu-barva-tmavomodra, #191932) !important; }