/****** Jednotné věci pro všechny sekce (kategorie, produkty, blog, stránky) prefix .pdu-sec- ******/ /**** TOOLTIP ****/ /* jedná se o ... */ /* popis */ /**** SKRÝVÁNÍ PRVKŮ ****/ /* Skrýt prvek při šířce displeje menší než 61.9375em */ @media screen and (max-width: 61.9375em) { .pdu-sec-hide-element-max991 { display: none; } } /* Skrýt prvek při šířce displeje větší než 62em */ @media screen and (min-width: 62em) { .pdu-sec-hide-element-min992 { display: none; } } /* ╔══════════════════════════════════════════════════════════════ 🧭 SIDEBAR NAV — 3 colored buttons v kartě (shared cross-section) ────────────────────────────────────────────────────────────── Popis: - Vertikální stack 3 CTA buttonů v bílé kartě s 1px gray rámečkem (radius xl, padding 1.125em) — wrapper se chová jako hero karta - Per-button: * radial-gradient overlay v pravém horním rohu (subtle highlight) * 1px gray ring (box-shadow) jako jemný rámeček * 0.125em colored border (matches bg color v default stavu) - Modifikátory barev: .is-primary (zelená akcent), .is-accent (žlutá CTA), .is-dark (tmavomodrá). Hover ve všech 3 → bílé bg + zelený gradient (jako dekovaci hero karta) + tmavý border + translateY(-1px) - Šipka uvnitř buttonu se posune o 3 px doprava na hover - Font: inherit ze Shoptet šablony (žádný hardcode font-family) - Vhodné pro sidebar na kterékoliv stránce (homepage, kategorie, blog, info-page) HTML: ══════════════════════════════════════════════════════════════ */ .pdu-sec-snav-card { display: flex; flex-direction: column; gap: 0.625em; margin: 1.125em 0; padding: 1.125em; background: var(--pdu-barva-bila); border: 1px solid var(--pdu-barva-okraj-jemny); border-radius: var(--pdu-radius-xl); } /* Flex centered group — label + arrow jako jeden celek centered v buttonu. Konzistentní visual napříč všemi labely (krátký "Kalkulátor" i delší "Pobočky a kontakty") — arrow drží blízko textu jako jeden vizuální blok. Selektor pro snav používá nav.pdu-sec-snav-card a.pdu-sec-snav (specifity 0,2,2) aby přebil Shoptet base, který má `nav a { display: block }` na anchor uvnitř

. */ nav.pdu-sec-snav-card a.pdu-sec-snav { display: flex; align-items: center; justify-content: center; gap: 0.625em; padding: 1.25em 1em; border: 0.125em solid; border-radius: var(--pdu-radius-card); font-family: inherit; font-size: 1.25em; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none !important; transition: background-color var(--pdu-prechod-dur-stredni) ease, background-image var(--pdu-prechod-dur-stredni) ease, color var(--pdu-prechod-dur-stredni) ease, border-color var(--pdu-prechod-dur-stredni) ease, transform var(--pdu-prechod-dur-rychly) ease, box-shadow var(--pdu-prechod-dur-stredni) ease; width: 100%; box-sizing: border-box; /* Žádný gray ring na snav — card wrapper + 0.125em colored border frame stačí. */ } .pdu-sec-snav-label { flex: 0 1 auto; font-family: inherit; text-align: center; line-height: 1.2; white-space: nowrap; /* všechny labely 1 řádek — konzistentní výška buttonů */ } .pdu-sec-snav-arrow { flex: 0 0 auto; display: block; width: 1.625em; height: 1.625em; opacity: .85; transition: transform var(--pdu-prechod-dur-stredni) ease, opacity var(--pdu-prechod-dur-stredni) ease; } .pdu-sec-snav:hover, .pdu-sec-snav:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 0.25em 0.75em -0.25em rgba(0, 0, 0, .12); } .pdu-sec-snav:hover .pdu-sec-snav-arrow, .pdu-sec-snav:focus-visible .pdu-sec-snav-arrow { transform: translateX(0.1875em); opacity: 1; } /* Glossy gradient varianty — z global.css tokenů (--pdu-grad-btn-*). Default/light/dark sady reflektují kontrast podle base color. */ /* POZN.: border-color s !important kvůli specificity konfliktu — base selektor `nav.pdu-sec-snav-card a.pdu-sec-snav` (0,2,2) má `border: 0.125em solid;` (border-color = currentColor implicit) a přebíjí tyto variantní selektory (0,2,0). Bez !important by border byl barva textu (např. dark navy na žluté = viditelný "černý rámeček", user 2026-05-22). */ /* Primary — zelená akcent (default glossy) */ .pdu-sec-snav.is-primary { background-color: var(--pdu-barva-zelena-akcent); background-image: var(--pdu-grad-btn-corner), var(--pdu-grad-btn-glossy); border-color: var(--pdu-barva-zelena-akcent) !important; color: var(--pdu-barva-bila) !important; } .pdu-sec-snav.is-primary:hover, .pdu-sec-snav.is-primary:focus-visible { background-color: var(--pdu-barva-bila); background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy); border-color: var(--pdu-barva-tmavomodra) !important; color: var(--pdu-barva-tmavomodra) !important; } /* Accent — žlutá CTA (light glossy, žlutá je už světlá) */ .pdu-sec-snav.is-accent { background-color: var(--pdu-barva-zluta-cta); background-image: var(--pdu-grad-btn-corner-light), var(--pdu-grad-btn-glossy-light); border-color: var(--pdu-barva-zluta-cta) !important; color: var(--pdu-barva-tmavomodra) !important; } .pdu-sec-snav.is-accent:hover, .pdu-sec-snav.is-accent:focus-visible { background-color: var(--pdu-barva-bila); background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy); border-color: var(--pdu-barva-tmavomodra) !important; color: var(--pdu-barva-tmavomodra) !important; } /* Dark — tmavomodrá (dark glossy — slabší highlight, silnější bottom shadow) */ .pdu-sec-snav.is-dark { background-color: var(--pdu-barva-tmavomodra); background-image: var(--pdu-grad-btn-corner-dark), var(--pdu-grad-btn-glossy-dark); border-color: var(--pdu-barva-tmavomodra) !important; color: var(--pdu-barva-bila) !important; } .pdu-sec-snav.is-dark:hover, .pdu-sec-snav.is-dark:focus-visible { background-color: var(--pdu-barva-bila); background-image: var(--pdu-grad-btn-hover-corner), var(--pdu-grad-btn-hover-glossy); border-color: var(--pdu-barva-tmavomodra) !important; color: var(--pdu-barva-tmavomodra) !important; } @media (max-width: 23.75em) { .pdu-sec-snav-card { padding: 0.875em; } nav.pdu-sec-snav-card a.pdu-sec-snav { font-size: 1.25em; padding: 1em 1em; } .pdu-sec-snav-arrow { width: 1.375em; height: 1.375em; } } @media (prefers-reduced-motion: reduce) { .pdu-sec-snav, .pdu-sec-snav-arrow { transition: none; } .pdu-sec-snav:hover, .pdu-sec-snav:focus-visible { transform: none; } } /* ── .pdu-sec-snav-ico — animovaná ikona vlevo od labelu (injektuje foot.js) ── Dědí currentColor → správná barva v klidu i na hover (is-dark hover = navy). Kalkulátor=pop, Montáž=otočení kola (hover), Pobočky=pin „zapíchnutí" (hover + scroll). */ .pdu-sec-snav-ico { flex: 0 0 auto; display: block; width: 1.1em; height: 1.1em; overflow: visible; color: inherit; transform-box: fill-box; transform-origin: center; } /* tlačítka s ikonou: stáhnout gap+padding+šipku, ať se vejde i nejdelší label v úzkém sidebaru */ nav.pdu-sec-snav-card a.pdu-sec-snav:has(.pdu-sec-snav-ico) { gap: 0.4em; padding-left: 0.55em; padding-right: 0.55em; } nav.pdu-sec-snav-card a.pdu-sec-snav:has(.pdu-sec-snav-ico) .pdu-sec-snav-arrow { width: 1.35em; height: 1.35em; } .pdu-sec-snav-ico path, .pdu-sec-snav-ico rect, .pdu-sec-snav-ico circle, .pdu-sec-snav-ico line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pdu-sec-snav-ico.is-kontakt { transform-origin: 50% 100%; } /* origin = hrot pinu (úplně dole) */ .pdu-sec-snav:hover .pdu-sec-snav-ico.is-kalkulator, .pdu-sec-snav:focus-visible .pdu-sec-snav-ico.is-kalkulator { animation: pduSnavPop .5s ease; } .pdu-sec-snav:hover .pdu-sec-snav-ico.is-montaz, .pdu-sec-snav:focus-visible .pdu-sec-snav-ico.is-montaz { animation: pduSnavSpin .9s ease; } .pdu-sec-snav:hover .pdu-sec-snav-ico.is-kontakt, .pdu-sec-snav:focus-visible .pdu-sec-snav-ico.is-kontakt { animation: pduSnavPin .6s cubic-bezier(.4, 1.4, .5, 1); } @keyframes pduSnavPop { 45% { transform: scale(1.18); } } @keyframes pduSnavSpin { to { transform: rotate(360deg); } } @keyframes pduSnavPin { 0% { transform: translateY(-4px); opacity: .4; } 40% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(0) scaleY(.76) scaleX(1.16); } 72% { transform: translateY(0) scaleY(1.1) scaleX(.94); } 86% { transform: translateY(0) scaleY(.97) scaleX(1.02); } 100% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .pdu-sec-snav-ico { animation: none !important; } } /* ╔══════════════════════════════════════════════════════════════ 📢 TOPBAR — aktuální banner + bonus CTA (sezonní, výprodej, kurzy) ────────────────────────────────────────────────────────────── Popis: - Bílá karta nahoře, vizuálně sjednoceno s .pdu-sec-snav-card - Levá strana (flex-grow) = banner image (sezonní/akční, rounded corners) - Pravá strana (fixní šířka) = CTA na aktuální event (kurz, sleva, novinka) - Responzivní: desktop row, mobil column (banner top, CTA bottom) - Banner sources: 1200×198 desktop (ratio 6:1), 800×300 mobil (ratio 8:3)