/* PetKarta – HOMEPAGE styles (design scoped under #pk-root). Load on every page; self-gates to homepage. */ /* ===== ANTI-FOUC (v203) — druhá vrstva k inline snippetu v šablony ===== PROBLÉM: nativní Shoptet šablona se vykreslí dřív, než doběhne náš JS (ten je až na konci ), takže na každé stránce problikne starý web. Pravidla níž ho schovají už při PRVNÍM vykreslení, protože tenhle soubor je v . PROČ PRÁVĚ TADY: petkarta-home.css je v na každé stránce a – na rozdíl od petkarta-cart.css – ho cart.js za běhu NEPŘEPISUJE (ensureCartCss mění ?v= jen u cart.css, což je re-fetch až PO vykreslení, tedy pozdě na FOUC). Komentář u inline snippetu tvrdil, že stejná pravidla jsou v petkarta-cart.css – to už neplatilo, nebyla v žádném CSS. Tohle tu díru zavírá. POZOR: inline snippet v šabloně tím NEPŘESTÁVÁ být potřeba. Kdo má pod starým ?v= v cache starou verzi tohohle souboru, dostane ji i na první vykreslení – proti tomu chrání jen inline styl. Držíme obojí. ODKRYTÍ: jakmile si stránku převezme náš JS, přidá na pk-*-on (nebo pk-native, když se stránka nepřebírá) a pravidlo přestane platit. WATCHDOG: kdyby JS selhal, po 2,5 s se obsah odkryje sám – radši nativní vzhled než trvale prázdná stránka. PROČ TU NEJSOU type-manufacturer-detail / type-manufacturers-listing: stránky výrobců nepřebírá ani home.js, ani cart.js (v kódu je „manufacturer" jen jako filtr uvnitř jiných skinů). Kdyby v seznamu zůstaly, svítily by 2,5 s prázdné a pak by watchdog odkryl nativ – tedy přesně to problikání, které tenhle blok odstraňuje. Radši se vykreslí nativně hned. POZOR na rozšiřování seznamu: skrývat se smí jen to, co si NĚKDO převezme a přidá pk-*-on. Detail produktu a právní stránky tu třídu navíc nastavují až PO fetchi, takže „catch-all", který by nativ odkryl dřív, tu schválně není – odkryl by ho uprostřed načítání a flash by vrátil zpět. */ @keyframes pk-fouc-unhide{to{visibility:visible;opacity:1}} body:is(.type-index,.type-category,.type-product,.type-search,.type-page,.in-kosik,.ordering-process,.customer-page){background:#F1F8F3} body:is(.type-index,.type-category,.type-product,.type-search,.type-page,.in-kosik,.ordering-process,.customer-page):not(:is(.pk-native,.pk-home,.pk-chrome-on,.pk-cat-on,.pk-srch-on,.pk-product-on,.pk-cart-on,.pk-ship-on,.pk-info-on,.pk-thanks-on,.pk-text-on,.pk-legal-on,.pk-login-on,.pk-reg-on,.pk-acc-on)) :is(#header,.top-navigation-bar,#content-wrapper,.breadcrumbs-wrapper,#footer,.footer-wrapper,#page-footer,.sidebar,#categories-menu){ visibility:hidden;opacity:0;animation:pk-fouc-unhide 0s 2.5s forwards} /* ===== PetKarta homepage takeover: hide native Shoptet chrome on the homepage ===== */ body.type-index #header, body.pk-home #header, body.type-index .top-navigation-bar, body.pk-home .top-navigation-bar, body.type-index #footer, body.pk-home #footer, body.type-index #page-footer, body.pk-home #page-footer, body.type-index .footer-wrapper, body.pk-home .footer-wrapper, body.type-index #content-wrapper, body.pk-home #content-wrapper, body.type-index .back-to-top, body.pk-home .back-to-top, body.type-index #back-to-top, body.pk-home #back-to-top, body.type-index .content-wrapper, body.pk-home .content-wrapper, /* v133: /obchod/ je nativně type-category → nese breadcrumbs-wrapper (Domů » Obchod), který na pravé homepage nikdy nebyl potřeba schovávat. */ body.pk-home .breadcrumbs-wrapper, body.pk-home .sidebar, body.pk-home #categories-menu{display:none!important} body.type-index, body.pk-home{background:#F1F8F3!important} /* v148: mobilní nativní .overall-wrapper{padding-top:69px} rezervuje místo pro (schovanou) nativní mobilní hlavičku. Shoptet to sám snižuje jen pro .type-index (50px), ale /obchod/ a /aplikace/ jsou nativně type-category → zůstane celých 69px prázdné – pruh mezery hned pod naším vlastním nav/hero. My si vlastní nav i rozestupy řešíme sami, nic z toho nepotřebujeme. */ @media(max-width:767px){body.pk-home .overall-wrapper{padding-top:0!important}} /* v142b (ZRUŠENO v184): pojistka proti horizontálnímu přetečení bývala přímo na html/body (`overflow-x:hidden`) – ale overflow-x cokoliv jiného než `visible` na PŘEDKOVI stránky podle CSS specifikace potichu vynutí i `overflow-y:auto`, a TO rozbije position:sticky u všech potomků (ověřeno naživo: mobilní menu na /obchod/ přestalo lepit nahoře a jen odscrollovalo pryč se zbytkem stránky). position:fixed to sice neřešilo, ale sticky ano. Nahrazeno v petkarta-home.js: hlavička (header.nav) zůstává přímo v #pk-root (ten je overflow:visible), zbytek obsahu se obalí do #pk-overflow-guard, který overflow-x:hidden nese sám – hlavička už tak nemá po cestě k viewportu žádného „provinilého" předka a sticky funguje, ochrana proti přetečení zůstává zachovaná. */ #pk-overflow-guard{overflow-x:hidden} /* v126 – skip-to-content (klávesový uživatel jinak musí projet celé menu na každé stránce) v202: schované přes top:-48px šlo vidět na mobilu při "gumovém" odrazu nahoře (iOS rubber-band scroll odkryje i to, co je nad y=0 na stránce) – přesně tenhle případ nahlásil Lukáš na /petkarta/ po scrollu úplně nahoru. Schováváme radši VODOROVNĚ (left, ne top) – tam žádný odraz není, protože web má overflow-x:hidden všude (viz #pk-overflow-guard výš). */ a.pk-skip-link{position:absolute;top:0;left:-9999px;z-index:9999;background:#10B981;color:#fff;padding:10px 18px; border-radius:0 10px 10px 0;font:600 14px/1.3 'InterV',system-ui,sans-serif;text-decoration:none;transition:left .15s} a.pk-skip-link:focus{left:8px} #pk-root{box-sizing:border-box;position:relative;z-index:1} #pk-root .pk-brand{display:inline-flex;align-items:center} #pk-root .pk-logo{height:42px;width:auto;display:block} #pk-root .ftr .pk-logo{height:34px;filter:brightness(0) invert(1)} @media(max-width:980px){#pk-root .pk-logo{height:36px}} #pk-root *{margin:0;padding:0;box-sizing:border-box} body.type-index, body.pk-home, #pk-root{font-family:'InterV','Inter','Plus Jakarta Sans',system-ui,sans-serif,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased} #pk-root .disp{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif,sans-serif} #pk-root a{color:inherit;text-decoration:none} #pk-root img, #pk-root svg{display:block} #pk-root .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} #pk-root .eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)} #pk-root .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;border-radius:13px;padding:14px 22px;cursor:pointer;border:1.5px solid transparent;transition:.18s;white-space:nowrap} #pk-root .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 24px -10px rgba(0,202,132,.7)} #pk-root .btn-primary:hover{background:var(--coral-dk);transform:translateY(-2px)} #pk-root .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} #pk-root .btn-ghost:hover{border-color:var(--ink);background:rgba(21,53,42,.04)} #pk-root .btn-dark{background:var(--ink);color:#fff} #pk-root .btn-dark:hover{background:#0e271f;transform:translateY(-2px)} #pk-root .announce{background:var(--ink);color:#fff;font-size:12.5px;text-align:center;padding:9px 16px;letter-spacing:.01em} #pk-root .announce b{color:var(--gold);font-weight:600} #pk-root .announce .sep{opacity:.4;margin:0 12px} #pk-root .nav{position:sticky;top:0;z-index:50;background:rgba(244,248,241,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)} #pk-root .nav-in{display:flex;align-items:center;gap:26px;height:70px} #pk-root .brand{display:flex;align-items:center;gap:9px} #pk-root .brand .mk{width:34px;height:34px} #pk-root .brand .nm{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 780;font-size:22px;letter-spacing:-.02em} #pk-root .brand .nm b{color:var(--coral);font-weight:inherit} #pk-root .brand .tag{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:3px 7px;border-radius:6px;margin-left:2px} #pk-root .menu{display:flex;gap:22px;margin-left:8px;align-items:center} #pk-root .menu a{font-size:14.5px;font-weight:500;color:var(--ink2);padding:6px 0;position:relative} #pk-root .menu a:hover{color:var(--ink)} #pk-root .menu a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--coral);transition:.2s} #pk-root .menu a:hover::after{width:100%} /* „Aplikace ↗" = zelený zaoblený rámeček (zelená jako v logu) */ #pk-root .menu a.menu-app{color:#fff;background:var(--coral);border-radius:999px;padding:9px 16px;font-weight:700;line-height:1;box-shadow:0 8px 18px -9px rgba(15,138,87,.7);transition:background .18s ease,transform .18s ease,box-shadow .18s ease} #pk-root .menu a.menu-app:hover{color:#fff;background:var(--coral-dk);transform:translateY(-1px);box-shadow:0 12px 24px -9px rgba(15,138,87,.85)} #pk-root .menu a.menu-app::after{display:none} @media(max-width:980px){#pk-root .nav.pk-menu-open .menu a.menu-app{background:none;color:var(--ink);border-radius:0;padding:14px 2px;box-shadow:none;transform:none}} #pk-root .nav-act{margin-left:auto;display:flex;align-items:center;gap:6px} #pk-root .icobtn{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:.15s;position:relative;cursor:pointer} #pk-root .icobtn:hover{background:rgba(21,53,42,.06)} #pk-root .cartn{position:absolute;top:5px;right:5px;min-width:17px;height:17px;border-radius:9px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;transition:transform .25s} #pk-root .cartn.bump{transform:scale(1.4)} #pk-root .burger{display:none} #pk-root .rv{opacity:0;transform:translateY(18px)} @media(prefers-reduced-motion:no-preference){#pk-root .rv{transition:opacity .7s ease,transform .7s ease}} #pk-root .rv.in{opacity:1;transform:none} /* ===================================================================== PK-LP – landing stránka appky PetKarta (vylepšená kopie www.petkarta.cz) · v131. Prvních obsah homepage, žádný modal. #pk-lp = kotva nahoru (nav „Aplikace"), #pk-hero (eshop hero, níž v souboru) = kotva „Obchod"/„Vstoupit do obchodu". Vše zůstává na jedné doméně – nikam se needchází. ===================================================================== */ #pk-root .pk-lp-hero{position:relative;overflow:hidden; background:radial-gradient(120% 140% at 12% 0%,#237F5B 0%,#186549 45%,#134F3A 100%); color:#fff} #pk-root .pk-lp-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 24px 70px} #pk-root .pk-lp-hero-copy .eyebrow{color:var(--gold);display:inline-block;margin-bottom:14px} #pk-root .pk-lp-hero-copy h1{color:#fff;font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 780,"opsz" 44;font-size:46px;line-height:1.08;letter-spacing:-.025em;margin:0 0 16px;font-style:normal} #pk-root .pk-lp-hero-copy h1 .c{color:var(--gold);font-style:italic;font-variation-settings:"wght" 600;font-weight:400} #pk-root .pk-lp-hero-copy .lead{font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.8);max-width:46ch;margin-bottom:26px} #pk-root .pk-lp-hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px} #pk-root .pk-lp-hero-cta .btn-primary{background:linear-gradient(135deg,#6af0b0,#20c67d 62%,#12b56f);color:#08281b;box-shadow:0 16px 34px -14px rgba(47,217,138,.85)} #pk-root .pk-lp-hero-cta .btn-primary:hover{background:linear-gradient(135deg,#7ff5bd,#28d488 62%,#15c479);transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(47,217,138,.95)} #pk-root .pk-lp-hero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06)} #pk-root .pk-lp-hero-cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);transform:translateY(-2px)} #pk-root .pk-lp-hero-vis{--pw:min(400px,94%);position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex-direction:column} /* v141: telefon větší + „orbit" popisky OKOLO telefonu (mimo jeho tělo, jen lehce se dotýkají okraje – dřív seděly PŘES displej, což user chtěl pryč). --pw (šířka telefonu) jako custom property, aby offsety `calc()` seděly nezávisle na šířce .pk-lp-hero-vis. Jen jeden je vždy rozbalený – bootLpTabs(). */ #pk-root .pk-lp-phone-big{width:var(--pw)} #pk-root .pk-lp-orbits{position:absolute;inset:0;pointer-events:none;z-index:6} #pk-root .pk-lp-orbit{position:absolute;pointer-events:auto;display:flex;align-items:center;height:50px;max-width:50px;padding:0;border-radius:99px;background:#fff;border:none;color:var(--ink);box-shadow:0 14px 28px -14px rgba(21,53,42,.4);cursor:pointer;overflow:hidden;transition:max-width .38s cubic-bezier(.3,.9,.3,1),box-shadow .3s ease,background .3s ease,color .3s ease;font:inherit} #pk-root .pk-lp-orbit .oic{flex:0 0 auto;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:21px} #pk-root .pk-lp-orbit .otx{flex:0 0 auto;white-space:nowrap;font-size:13.5px;font-weight:750;padding-right:20px;opacity:0;transition:opacity .18s ease} #pk-root .pk-lp-orbit.on{max-width:240px;background:linear-gradient(135deg,#6af0b0,#20c67d 62%,#12b56f);color:#08281b;box-shadow:0 16px 32px -14px rgba(47,217,138,.75),0 0 0 5px rgba(47,217,138,.16)} #pk-root .pk-lp-orbit.on .otx{opacity:1;transition-delay:.14s} #pk-root .pk-lp-orbit:not(.on):hover{box-shadow:0 16px 30px -14px rgba(21,53,42,.5)} #pk-root .pk-lp-orbit.o0{left:calc(50% - var(--pw)/2 - 30px);top:46%;transform:translateY(-50%)} #pk-root .pk-lp-orbit.o1{left:calc(50% + var(--pw)/2 - 12px);top:16%} #pk-root .pk-lp-orbit.o2{left:calc(50% + var(--pw)/2 - 12px);top:66%} @media(prefers-reduced-motion:no-preference){ #pk-root .pk-lp-hero-copy .eyebrow{animation:pk-fadeUp .7s .05s both} #pk-root .pk-lp-hero-copy h1{animation:pk-fadeUp .8s .16s both} #pk-root .pk-lp-hero-copy .lead{animation:pk-fadeUp .8s .30s both} #pk-root .pk-lp-hero-cta{animation:pk-fadeUp .8s .44s both} #pk-root .pk-lp-hero-vis{animation:pk-fadeIn 1s .35s both} #pk-root .pk-lp-orbit.o0{animation:pk-lpOrbitIn0 .5s .6s both} #pk-root .pk-lp-orbit.o1{animation:pk-lpOrbitIn .5s .75s both} #pk-root .pk-lp-orbit.o2{animation:pk-lpOrbitIn .5s .9s both} } #pk-root .pk-lp-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} #pk-root .pk-lp-fcard{background:var(--paper);border:1px solid var(--line2);border-radius:20px;padding:28px 26px;transition:.22s} #pk-root .pk-lp-fcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(21,53,42,.25)} #pk-root .pk-lp-fcard .ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:var(--green-soft);font-size:22px;margin-bottom:16px} #pk-root .pk-lp-fcard h3{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:18px;margin-bottom:8px} #pk-root .pk-lp-fcard p{font-size:14px;line-height:1.55;color:var(--ink2)} #pk-root .pk-lp-quote{max-width:640px;margin:0 0 40px;font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 600;font-style:italic;font-size:19px;line-height:1.5;color:var(--ink2);border-left:3px solid var(--coral);padding-left:20px} #pk-root .pk-lp-timeline{position:relative;display:flex;flex-direction:column;gap:26px;padding-left:26px;border-left:2px solid var(--line)} #pk-root .pk-lp-tstep{position:relative} #pk-root .pk-lp-tstep .dot{position:absolute;left:-32px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px var(--green-soft)} #pk-root .pk-lp-tstep h4{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 700;font-size:16.5px;margin-bottom:5px} #pk-root .pk-lp-tstep p{font-size:14px;line-height:1.5;color:var(--ink2);max-width:56ch} #pk-root .pk-lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end;margin-top:44px} #pk-root .pk-lp-plan{position:relative;background:#E4EEE7;border:1px solid var(--line2);border-radius:22px;padding:30px 26px;display:flex;flex-direction:column;overflow:visible;transition:transform .25s ease,box-shadow .25s ease} #pk-root .pk-lp-plan.featured{background:var(--paper)} /* vedlejší (nedoporučené) plány: ztlumené fajfky, ať doporučená karta víc vynikne */ #pk-root .pk-lp-plan:not(.featured) .pk-lp-pfeat li .ck{background:rgba(21,53,42,.09);color:var(--ink3)} #pk-root .pk-lp-plan:not(.featured) .pk-lp-pfeat li{color:var(--ink3)} /* v139: prostřední/doporučená karta je teď VĘTŠÍ a „vytažená" nahoru (jako klasický 3-tier ceník), ne zelená – barva u ceníku byla podle referencí moc */ #pk-root .pk-lp-plan.featured{margin:-22px 0 0;padding:40px 30px 34px;box-shadow:0 30px 60px -26px rgba(21,53,42,.28)} #pk-root .pk-lp-plan.featured:hover{transform:translateY(-4px)} #pk-root .pk-lp-plan .badge{position:absolute;top:-13px;right:24px;background:var(--coral);color:#fff;font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:99px;padding:5px 13px;z-index:2} #pk-root .pk-lp-plan h3{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:19px} #pk-root .pk-lp-plandiv{display:block;height:1px;background:var(--line2);margin:14px 0 18px} #pk-root .pk-lp-mascot{position:absolute;top:-64px;left:50%;transform:translateX(-50%);z-index:1;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(21,53,42,.28))} #pk-root .pk-lp-mascot img{display:block;width:84px;height:84px;object-fit:cover;object-position:top center;border-radius:50%;border:3px solid #fff} #pk-root .pk-lp-pprice{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 780;font-size:32px;color:var(--ink);margin-bottom:16px} #pk-root .pk-lp-pprice span{font-size:14px;font-weight:500;color:var(--ink2);margin-left:3px} #pk-root .pk-lp-pfeat{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:24px;flex:1} #pk-root .pk-lp-pfeat li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink2);line-height:1.4} #pk-root .pk-lp-pfeat li .ck{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--coral-dk)} #pk-root .pk-lp-plan .btn{justify-content:center;width:100%} #pk-root .pk-lp-pnote{text-align:center;margin-top:30px;font-size:14px;color:var(--ink2)} #pk-root .pk-lp-dl{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:28px;padding:52px;text-align:center} #pk-root .pk-lp-dl h2{position:relative;z-index:2;font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 760;font-size:32px;margin-bottom:12px;color:#fff} #pk-root .pk-lp-dl p{position:relative;z-index:2;font-size:15.5px;color:rgba(255,255,255,.75);max-width:52ch;margin:0 auto 28px} #pk-root .pk-lp-dl-paw{position:absolute;font-size:60px;opacity:.06;pointer-events:none;z-index:1} #pk-root .pk-lp-dl-paw.p1{left:-10px;top:-14px;transform:rotate(-18deg)} #pk-root .pk-lp-dl-paw.p2{right:-6px;bottom:-16px;transform:rotate(14deg)} #pk-root .pk-lp-dl-badges{position:relative;z-index:2;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} #pk-root .pk-lp-badge{display:inline-flex;align-items:center;gap:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:15px;padding:15px 26px;color:#fff;transition:.18s} #pk-root .pk-lp-badge:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)} #pk-root .pk-lp-badge svg{transition:transform .3s cubic-bezier(.3,1.6,.5,1)} #pk-root .pk-lp-badge:hover svg{transform:scale(1.15) rotate(-4deg)} #pk-root .pk-lp-badge span{display:flex;flex-direction:column;font-size:16.5px;font-weight:700;line-height:1.25;text-align:left} #pk-root .pk-lp-badge span b{font-size:11px;font-weight:600;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.03em} #pk-root .pk-lp-contact-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;background:var(--paper);border:1px solid var(--line2);border-radius:28px;padding:48px} #pk-root .pk-lp-contact-copy h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 760;font-size:30px;letter-spacing:-.02em;margin:10px 0 10px} #pk-root .pk-lp-contact-copy p{font-size:15px;color:var(--ink2)} #pk-root .pk-lp-form{display:flex;flex-direction:column;gap:14px} #pk-root .pk-lp-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.02em;text-transform:uppercase} #pk-root .pk-lp-form input, #pk-root .pk-lp-form textarea{font:15px/1.4 'InterV',system-ui,sans-serif;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;resize:vertical} #pk-root .pk-lp-form input:focus, #pk-root .pk-lp-form textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px var(--green-soft)} #pk-root .pk-lp-form textarea{min-height:96px} #pk-root .pk-lp-form .btn{align-self:flex-start;margin-top:4px} #pk-root .pk-lp-form-ok{display:none;font-size:13.5px;color:var(--coral-dk);font-weight:600;margin-top:-4px} #pk-root .pk-lp-form.pk-sent .pk-lp-form-ok{display:block} #pk-root .pk-lp-form.pk-sent .btn{opacity:.6;pointer-events:none} @media(max-width:980px){ #pk-root .pk-lp-hero-in{grid-template-columns:1fr;gap:34px;padding:48px 24px 54px} #pk-root .pk-lp-hero-vis{order:-1;min-height:auto} #pk-root .pk-lp-phone-big{width:min(300px,84%)} #pk-root .pk-lp-orbits{position:static;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px} #pk-root .pk-lp-orbit{position:static;transform:none!important} #pk-root .pk-lp-feat-grid{grid-template-columns:1fr;gap:16px} #pk-root .pk-lp-plans{grid-template-columns:1fr;gap:16px;align-items:stretch} #pk-root .pk-lp-plan.featured{margin:26px 0 0;padding:30px 26px} #pk-root .pk-lp-plan.featured:hover{transform:none} #pk-root .pk-lp-contact-in{grid-template-columns:1fr;gap:30px;padding:36px} /* v142b: menší bloby na mobilu – hlavně bf4 (left:60%+260px) přetékal mimo viewport */ #pk-root .pk-lp-blob2{width:180px!important;height:180px!important;filter:blur(40px)} #pk-root .pk-lp-blob2.bf2{left:-60px} #pk-root .pk-lp-blob2.bf4{left:auto;right:-40px} } @media(max-width:560px){ #pk-root .pk-lp-hero-copy h1{font-size:32px} #pk-root .pk-lp-dl{padding:36px 24px} #pk-root .pk-lp-dl h2{font-size:25px} #pk-root .pk-lp-dl-badges{flex-direction:column;align-items:stretch} #pk-root .pk-lp-contact-in{padding:26px} #pk-root .pk-lp-plan .badge{right:16px} } /* ===================================================================== PK-LP WOW – animační vrstva landing stránky · v135 Vlastní opravy pro znovupoužité .pk-app-* třídy: jejich BÁZOVÁ pravidla (opacity:0 dokud .pk-app.in) čekají na předka .pk-app, kterého tu nemáme (jinak layout) – proto explicitní override níže. ===================================================================== */ #pk-root .pk-lp-hero-in{position:relative;z-index:3} /* v138: organické „blob" tvary (SVG path) místo prostých rozostřených kruhů – bližší referenci appky */ #pk-root .pk-lp-blob{position:absolute;filter:blur(18px);opacity:.4;z-index:0;pointer-events:none} #pk-root .pk-lp-blob path{fill:#2fd98a} #pk-root .pk-lp-blob.b1{width:340px;height:340px;left:-90px;top:-90px} #pk-root .pk-lp-blob.b2{width:300px;height:300px;right:-80px;bottom:-110px;opacity:.28} #pk-root .pk-lp-blob.b2 path{fill:#0a7d66} #pk-root .pk-lp-paw{position:absolute;z-index:1;font-size:22px;opacity:.1;pointer-events:none;filter:grayscale(.2)} #pk-root .pk-lp-paw.pw1{left:7%;bottom:10%;font-size:26px} #pk-root .pk-lp-paw.pw2{left:46%;top:8%;font-size:18px} #pk-root .pk-lp-paw.pw3{right:6%;top:36%;font-size:30px} #pk-root .pk-lp-paw.pw4{left:28%;bottom:6%;font-size:20px} /* v142: bledé dekorativní bloby i na zbytku (světlé) landing stránky, ať to „nevypadá suše" mimo hero – z-index:-1 + kontext na obsahu, ať bloby nikdy nepadnou PŘED text/karty (pozor: position:absolute + z-index:0 by jinak malovalo NAD normálním obsahem, viz CSS stacking pravidla). */ #pk-root .pk-lp-feat, #pk-root .pk-lp-price, #pk-root #pk-lp-download, #pk-root #pk-lp-contact{position:relative} #pk-root .pk-lp-feat-grid, #pk-root .pk-lp-plans, #pk-root .pk-lp-dl, #pk-root .pk-lp-contact-in{position:relative;z-index:1} #pk-root .pk-lp-blob2{position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.5;background:radial-gradient(circle,var(--green-soft),transparent 72%)} #pk-root .pk-lp-blob2.bf1{width:300px;height:300px;right:-80px;top:-60px} #pk-root .pk-lp-blob2.bf2{width:340px;height:340px;left:-100px;top:20%} #pk-root .pk-lp-blob2.bf3{width:280px;height:280px;right:10%;top:-90px;opacity:.35} #pk-root .pk-lp-blob2.bf4{width:260px;height:260px;left:60%;bottom:-100px} #pk-root .pk-lp-glint{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;border-radius:39px} #pk-root .pk-lp-glint::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-16deg)} @media(prefers-reduced-motion:no-preference){ #pk-root .pk-lp-blob.b1{animation:pk-appDrift 16s ease-in-out infinite} #pk-root .pk-lp-blob.b2{animation:pk-appDrift 20s ease-in-out infinite reverse} #pk-root .pk-lp-paw{animation:pk-appPaw 9s ease-in-out infinite} #pk-root .pk-lp-paw.pw2{animation-duration:11s;animation-delay:.6s} #pk-root .pk-lp-paw.pw3{animation-duration:8s;animation-delay:1.1s} #pk-root .pk-lp-paw.pw4{animation-duration:12s;animation-delay:.3s} #pk-root .pk-lp-hero-vis .pk-app-phone{animation:pk-appFloat 6.5s ease-in-out infinite} #pk-root .pk-lp-hero-vis .pk-app-glow{animation:pk-appGlow 7s ease-in-out infinite} #pk-root .pk-lp-glint::before{animation:pk-appShine 4.5s ease-in-out 1.3s infinite} #pk-root .pk-lp-blob2.bf1{animation:pk-appDrift 18s ease-in-out infinite} #pk-root .pk-lp-blob2.bf2{animation:pk-appDrift 22s ease-in-out infinite reverse} #pk-root .pk-lp-blob2.bf3{animation:pk-appDrift 15s ease-in-out infinite} #pk-root .pk-lp-blob2.bf4{animation:pk-appDrift 19s ease-in-out infinite reverse} } @keyframes pk-lpOrbitIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} @keyframes pk-lpOrbitIn0{from{opacity:0;transform:translateY(-50%) scale(.4)}to{opacity:1;transform:translateY(-50%) scale(1)}} /* v142: roadmapa – svislá čára se „nakreslí" (výška 0→100%) jak se timeline objeví ve viewportu (.rv/.in generický systém, viz initDesign()). */ #pk-root .pk-lp-timeline{position:relative} #pk-root .pk-lp-timeline::after{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--coral),var(--gold));transition:height 1.7s cubic-bezier(.2,.7,.2,1)} #pk-root .pk-lp-timeline.in::after{height:100%} /* feature cards: icon pop + hover tilt */ #pk-root .pk-lp-fcard{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease} #pk-root .pk-lp-fcard:hover{transform:translateY(-6px);box-shadow:0 24px 46px -26px rgba(21,53,42,.3)} #pk-root .pk-lp-fcard .ic{transition:transform .3s cubic-bezier(.3,1.6,.5,1)} #pk-root .pk-lp-fcard:hover .ic{transform:scale(1.14) rotate(-6deg)} #pk-root .pk-lp-feat-grid.in .pk-lp-fcard:nth-child(1){transition-delay:.05s} #pk-root .pk-lp-feat-grid.in .pk-lp-fcard:nth-child(2){transition-delay:.16s} #pk-root .pk-lp-feat-grid.in .pk-lp-fcard:nth-child(3){transition-delay:.27s} /* timeline: dot pop-in when its own .rv gets .in */ #pk-root .pk-lp-tstep .dot{transition:transform .4s cubic-bezier(.3,1.7,.4,1),box-shadow .4s ease;transform:scale(.3)} #pk-root .pk-lp-tstep.in .dot{transform:scale(1)} #pk-root .pk-lp-n{display:inline-block;min-width:2.6ch} /* pricing: featured glow ring + staggered checkmarks on reveal isolation:isolate zaručí, že ::before se z-index:-1 nikdy neprobije přes sousední karty (v135 na hoveru „vytopil" celou kartu zeleně – bez isolate z-index:auto na .featured negarantuje vlastní stacking context). Pulz je teď statický (žádná infinite animace, co by mohla dopadnout na peak = washed-out screenshot) a jen se zesílí na :hover přes transition. */ #pk-root .pk-lp-plan.featured{isolation:isolate;z-index:2} #pk-root .pk-lp-plan.featured::before{content:"";position:absolute;inset:-14px;border-radius:34px;background:linear-gradient(135deg,#6af0b0,#20c67d 55%,#12b56f);z-index:-1;opacity:.35;filter:blur(18px)} #pk-root .pk-lp-pfeat li{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease} #pk-root .pk-lp-plans.in .pk-lp-pfeat li{opacity:1;transform:none} #pk-root .pk-lp-pfeat li:nth-child(1){transition-delay:.02s} #pk-root .pk-lp-pfeat li:nth-child(2){transition-delay:.06s} #pk-root .pk-lp-pfeat li:nth-child(3){transition-delay:.10s} #pk-root .pk-lp-pfeat li:nth-child(4){transition-delay:.14s} #pk-root .pk-lp-pfeat li:nth-child(5){transition-delay:.18s} #pk-root .pk-lp-pfeat li:nth-child(6){transition-delay:.22s} #pk-root .pk-lp-pfeat li:nth-child(7){transition-delay:.26s} #pk-root .pk-lp-pfeat li:nth-child(8){transition-delay:.30s} #pk-root .pk-lp-pfeat li:nth-child(9){transition-delay:.34s} #pk-root .pk-lp-plan{transition:transform .25s ease,box-shadow .25s ease} #pk-root .pk-lp-plan:hover{transform:translateY(-5px)} @keyframes pk-lpMascot{0%,100%{transform:translateX(-50%) translateY(0) rotate(-2deg)}50%{transform:translateX(-50%) translateY(-7px) rotate(2deg)}} @media(prefers-reduced-motion:no-preference){#pk-root .pk-lp-mascot{animation:pk-lpMascot 4.5s ease-in-out infinite}} /* download badges: shine sweep + lift on hover */ #pk-root .pk-lp-badge{position:relative;overflow:hidden} #pk-root .pk-lp-badge::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-16deg)} @media(prefers-reduced-motion:no-preference){ #pk-root .pk-lp-badge::after{animation:pk-appShine 3.6s ease-in-out infinite} #pk-root .pk-lp-dl-paw.p1{animation:pk-appPaw 10s ease-in-out infinite} #pk-root .pk-lp-dl-paw.p2{animation:pk-appPaw 12s ease-in-out .5s infinite} } /* contact: fajfka/paw burst na úspěšné odeslání (reuse .pk-paw vzoru z initDesign burst()) */ #pk-root .pk-lp-form .pk-paw{position:absolute;top:50%;pointer-events:none;color:#fff;animation:pk-lp-burst .7s ease forwards} @keyframes pk-lp-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-160%) scale(1.3)}} #pk-root .hero{position:relative;overflow:hidden} #pk-root .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:54px 24px 64px} #pk-root .hero h1{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 790,"opsz"44;font-size:56px;line-height:1.02;letter-spacing:-.03em;margin:16px 0 18px} #pk-root .hero h1 .c{color:var(--coral)} #pk-root .hero .lead{font-size:17px;line-height:1.6;color:var(--ink2);max-width:46ch} #pk-root .hero .lead b{color:var(--ink);font-weight:600} #pk-root .hero-cta{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap} #pk-root .hero-meta{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap} #pk-root .hero-meta .hm{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);font-weight:500} #pk-root .hero-meta .hm svg{flex:0 0 auto} #pk-root .stage{position:relative;height:460px;display:flex;align-items:center;justify-content:center} #pk-root .stage .glow{position:absolute;inset:0;background:radial-gradient(60% 55% at 60% 42%,rgba(26,165,147,.22),transparent 70%);filter:blur(6px)} #pk-root .metalcard{position:absolute;width:330px;border-radius:20px;padding:22px 24px;transform:rotate(-5deg) translate(-26px,8px); background:linear-gradient(135deg,#eef2f4 0%,#c4cdd3 30%,#e7edf0 52%,#aab4ba 80%,#d2dadf 100%); box-shadow:0 30px 60px -22px rgba(21,53,42,.5),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -2px 6px rgba(0,0,0,.12);overflow:hidden} #pk-root .metalcard::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px);opacity:.5;pointer-events:none} #pk-root .mc-top{display:flex;align-items:center;justify-content:space-between} #pk-root .mc-lab{font-size:9px;font-weight:800;letter-spacing:.2em;color:#5a6770;text-shadow:0 1px 0 rgba(255,255,255,.6)} #pk-root .mc-title{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;font-size:25px;letter-spacing:-.01em;color:#374650;text-shadow:0 1px 0 rgba(255,255,255,.55);margin:14px 0 4px;line-height:1.05} #pk-root .mc-sub{font-size:11.5px;color:#5d6a72;text-shadow:0 1px 0 rgba(255,255,255,.5);max-width:200px} #pk-root .mc-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:18px} #pk-root .mc-paw{color:#586771} #pk-root .mc-qr{width:70px;height:70px;background:#fff;border-radius:11px;padding:5px;box-shadow:0 3px 8px rgba(0,0,0,.18)} #pk-root .mc-qr svg{width:100%;height:100%} #pk-root .tagchip{position:absolute;width:140px;height:140px;border-radius:50%;right:6px;top:14px;transform:rotate(8deg); background:linear-gradient(140deg,#f6dd92,#e7b94e 45%,#c9972f 100%); box-shadow:0 24px 44px -18px rgba(120,80,10,.6),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(90,60,0,.3); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} #pk-root .tagchip .nm{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;font-size:24px;color:#7a5712;text-shadow:0 1px 0 rgba(255,255,255,.45)} #pk-root .tagchip .ph{font-size:10px;color:#876018;letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.4);margin-top:2px} #pk-root .tagchip .hole{position:absolute;top:12px;width:13px;height:13px;border-radius:50%;background:rgba(120,80,10,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} #pk-root .scanbub{position:absolute;right:-6px;bottom:34px;background:#fff;border-radius:14px;padding:10px 13px;display:flex;align-items:center;gap:10px;box-shadow:0 18px 34px -14px rgba(21,53,42,.45);border:1px solid var(--line2);z-index:3} #pk-root .scanbub .b{width:30px;height:30px;border-radius:10px;background:var(--teal);display:flex;align-items:center;justify-content:center;flex:0 0 auto} #pk-root .scanbub .t1{font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)} #pk-root .scanbub .t2{font-size:12px;font-weight:600;color:var(--ink);line-height:1.15} #pk-root .trust{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:rgba(255,255,255,.5)} #pk-root .trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:22px 24px} #pk-root .trust .ti{display:flex;align-items:center;gap:12px} #pk-root .trust .ti .ic{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:0 0 auto} #pk-root .trust .ti .tt{font-size:13.5px;font-weight:600;line-height:1.25} #pk-root .trust .ti .ts{font-size:11.5px;color:var(--ink3)} #pk-root .sec{padding:66px 0} #pk-root .sec-h{max-width:680px;margin-bottom:34px} #pk-root .sec-h h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 760;font-size:38px;letter-spacing:-.025em;line-height:1.05;margin:11px 0 12px} #pk-root .sec-h p{font-size:16px;color:var(--ink2);line-height:1.5} #pk-root .center{margin-left:auto;margin-right:auto;text-align:center} #pk-root .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* dlaždice = fotka nahoře (vlastní zóna) + čistý pruh s textem dole (žádný přechod, žádné prosvítání) */ #pk-root .cat{position:relative;border-radius:20px;min-height:250px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line2);background:var(--paper);transition:.22s;cursor:pointer} #pk-root .cat:hover{transform:translateY(-5px);box-shadow:0 26px 46px -26px rgba(21,53,42,.4)} #pk-root .cat .vis{position:relative;flex:1 1 auto;min-height:158px;display:flex;align-items:center;justify-content:center;overflow:hidden} #pk-root .cat .vis svg{filter:drop-shadow(0 14px 22px rgba(21,53,42,.22))} #pk-root .cat .vis img{width:100%;height:100%;object-fit:cover;display:block} #pk-root .cat .grad{display:none} /* mini „nouzová kartička" jako vizuál dlaždice (Lukas: „použij toto") */ #pk-root .cat .pk-emcard{width:88%;max-width:250px;box-sizing:border-box;border-radius:14px;padding:13px 16px 12px;color:#F0E1A8;background:linear-gradient(152deg,#34A94F,#279B45,#1C8A3A);box-shadow:0 18px 34px -16px rgba(12,50,24,.55),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 9px rgba(0,0,0,.16);font-family:'InterV','Inter',system-ui,sans-serif;transform:rotate(-2.5deg)} #pk-root .cat .pk-emcard .em-t{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 800;font-weight:800;text-align:center;font-size:11px;line-height:1.15;letter-spacing:.01em;text-shadow:0 1px 1px rgba(0,0,0,.25)} #pk-root .cat .pk-emcard .em-rule{height:1.5px;background:currentColor;opacity:.9;border-radius:2px;margin:7px 0 0} #pk-root .cat .pk-emcard .em-rule.c{width:58%;margin:7px auto 0;opacity:.8} #pk-root .cat .pk-emcard .em-paw{display:block;width:42px;height:23px;margin:9px auto 7px;background:currentColor;-webkit-mask:url(data:image/png;base64,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) no-repeat center/contain;mask:url(data:image/png;base64,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) no-repeat center/contain;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.24))} #pk-root .cat .pk-emcard .em-sub{text-align:center;font-size:8px;font-weight:600} #pk-root .cat .pk-emcard .em-rows{margin:7px 4px 0;font-size:8.5px;font-weight:600;line-height:1.5} #pk-root .cat .pk-emcard .em-thx{text-align:center;font-size:8.5px;font-weight:600;margin-top:8px} #pk-root .cat .ct{position:relative;z-index:2;background:var(--paper);padding:14px 18px 17px;border-top:1px solid var(--line2)} #pk-root .cat .cn{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:18px;letter-spacing:-.01em} #pk-root .cat .cp{font-size:12.5px;color:var(--ink2);margin-top:3px} #pk-root .cat .cprice{font-size:12px;font-weight:700;color:var(--coral-dk);margin-top:8px;display:inline-flex;align-items:center;gap:5px} #pk-root .cat.tint1{background:linear-gradient(180deg,#fff,#fdeee9)} #pk-root .cat.tint2{background:linear-gradient(180deg,#fff,#e9f4f1)} #pk-root .cat.tint3{background:linear-gradient(180deg,#fff,#fdf3df)} #pk-root .cat.tint4{background:linear-gradient(160deg,#1E7A54,#155A3D);border-color:transparent} #pk-root .cat.tint4 .cn{color:#fff} #pk-root .cat.tint4 .cp{color:rgba(255,255,255,.7)} #pk-root .cat.tint4 .cprice{color:var(--gold)} #pk-root .cat.tint4 .ct{background:transparent;border-top-color:rgba(255,255,255,.14)} #pk-root .cat.tint4 .grad{background:linear-gradient(180deg,transparent 45%,rgba(21,53,42,.85) 82%)} #pk-root .sync{background:linear-gradient(150deg,#1b3e32,#0A3F2F);color:#fff;border-radius:28px;padding:54px;position:relative;overflow:hidden} #pk-root .sync::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(26,165,147,.4),transparent 70%)} #pk-root .sync::after{content:"";position:absolute;left:-50px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,202,132,.28),transparent 70%)} #pk-root .sync-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:46px;align-items:center} #pk-root .sync .eyebrow{color:var(--gold)} #pk-root .sync h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 760;font-size:36px;letter-spacing:-.025em;line-height:1.06;margin:12px 0 14px} #pk-root .sync p{font-size:15.5px;color:rgba(255,255,255,.78);line-height:1.6;max-width:44ch} #pk-root .sync ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px} #pk-root .sync li{display:flex;gap:11px;font-size:14.5px;color:rgba(255,255,255,.9)} #pk-root .sync li svg{flex:0 0 auto;margin-top:2px} #pk-root .flow{display:flex;align-items:center;justify-content:center;gap:8px} #pk-root .fl-node{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px 14px;text-align:center;width:150px} #pk-root .fl-node .ic{width:52px;height:52px;margin:0 auto 10px;border-radius:14px;display:flex;align-items:center;justify-content:center} #pk-root .fl-node .fn{font-size:13px;font-weight:700} #pk-root .fl-node .fs{font-size:11px;color:rgba(255,255,255,.62);margin-top:3px;line-height:1.3} #pk-root .flow .arr{color:var(--gold);flex:0 0 auto} #pk-root .lab{background:var(--paper);border:1px solid var(--line2);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(21,53,42,.5)} /* COMBO krok 2: „swipe" live preview ze známky na kartičku (žádná navigace) */ #pk-root .lab-track{display:flex;width:200%;align-items:flex-start} #pk-root .lab-step{flex:0 0 50%;min-width:0} #pk-root .lab.lab-swiping{transition:height .55s cubic-bezier(.7,0,.2,1)} #pk-root .lab.lab-swiping .lab-track{transition:transform .55s cubic-bezier(.7,0,.2,1)} @media(prefers-reduced-motion:reduce){#pk-root .lab.lab-swiping,#pk-root .lab.lab-swiping .lab-track{transition:none}} #pk-root .lab-grid{display:grid;grid-template-columns:1.05fr .95fr} #pk-root .lab-preview{background:radial-gradient(70% 70% at 50% 40%,#27493c,#0A3F2F);display:flex;align-items:center;justify-content:center;padding:46px;position:relative} #pk-root .lab-preview .pill{position:absolute;top:20px;left:20px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(255,194,75,.12);padding:6px 11px;border-radius:20px} #pk-root .tagsvg{width:100%;max-width:380px;filter:drop-shadow(0 26px 40px rgba(0,0,0,.4))} #pk-root .lab-controls{padding:40px 42px} #pk-root .lab-controls h3{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 740;font-size:26px;letter-spacing:-.02em;margin-bottom:5px} #pk-root .lab-controls .sub{font-size:13.5px;color:var(--ink2);margin-bottom:22px} #pk-root .ctl{margin-bottom:18px} #pk-root .ctl .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px;display:block} #pk-root .opts{display:flex;gap:8px;flex-wrap:wrap} #pk-root .opt{font-size:13px;font-weight:600;border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;cursor:pointer;background:#fff;transition:.15s;color:var(--ink2)} #pk-root .opt:hover{border-color:var(--ink3)} #pk-root .opt.on{border-color:var(--ink);background:var(--ink);color:#fff} #pk-root .swatch{width:42px;height:42px;border-radius:12px;cursor:pointer;border:2px solid transparent;box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5);position:relative;transition:.15s;padding:0;font:inherit;-webkit-appearance:none;appearance:none} #pk-root .swatch.on{border-color:var(--ink)} #pk-root .swatch.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0A3F2F;font-weight:800;font-size:15px} #pk-root .sw-steel{background:linear-gradient(135deg,#eef2f4,#aab4ba)} #pk-root .sw-brass{background:linear-gradient(135deg,#f6dd92,#c9972f)} #pk-root .sw-gold{background:linear-gradient(135deg,#ffe9a8,#e0a93c)} #pk-root .sw-black{background:linear-gradient(135deg,#4a5054,#1c2023)} #pk-root .field{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;font:inherit;font-size:14px;color:var(--ink);background:#fff;transition:.15s} #pk-root .field:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(26,165,147,.16)} #pk-root .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* .qrtog je sdílená „přepínač-karta" (QR kód i balíček #pk-comboTog): .sw/.sw i je klasický posuvník pro #pk-comboTog (ten pořád jde vypnout). v194: QR kód (#pk-qrTog) je teď natvrdo zapnutý (nejde vypnout) — nahrazen zaškrtávacím odznakem .qrtog-ck a .locked ruší kurzor. Nescoped varianta pro embed mimo #pk-root (produktová stránka). */ #pk-root .qrtog, .qrtog{display:flex;align-items:center;gap:12px;background:#f3f7f0;border:1px solid var(--line2);border-radius:13px;padding:13px 15px;cursor:pointer;margin-bottom:20px} #pk-root .qrtog.locked, .qrtog.locked{cursor:default} #pk-root .qrtog .sw, .qrtog .sw{width:42px;height:25px;border-radius:20px;background:#cdd8d0;position:relative;transition:.2s;flex:0 0 auto} #pk-root .qrtog .sw i, .qrtog .sw i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)} #pk-root .qrtog.on .sw, .qrtog.on .sw{background:var(--teal)} #pk-root .qrtog.on .sw i, .qrtog.on .sw i{left:20px} #pk-root .qrtog-ck, .qrtog-ck{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:var(--teal);flex:0 0 auto;box-shadow:0 0 0 4px rgba(10,125,102,.12)} #pk-root .qrtog .qt, .qrtog .qt{font-size:13px;font-weight:600} #pk-root .qrtog .qd, .qrtog .qd{font-size:11.5px;color:var(--ink2)} /* Balíček přepínač: nadpis se zalomí i s cenou a „?" vysvětlivkou */ #pk-root .pk-combotog .qt{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap} #pk-root .pk-help-wrap{position:relative;display:inline-flex;align-items:center} #pk-root .pk-help{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink3);background:none;color:var(--ink3);font-size:10.5px;font-weight:800;line-height:1;cursor:help;display:inline-flex;align-items:center;justify-content:center;padding:0} #pk-root .pk-help:hover,#pk-root .pk-help:focus-visible{border-color:var(--coral);color:var(--coral)} #pk-root .pk-help-tip{position:absolute;bottom:calc(100% + 9px);right:0;transform:translateY(4px);width:250px;max-width:min(250px,calc(100vw - 24px));background:#0E2A20;color:#EAF5EE;font-size:11.5px;font-weight:500;line-height:1.5;padding:10px 12px;border-radius:11px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease;z-index:70;white-space:normal;text-align:left} #pk-root .pk-help-tip b{color:#fff} #pk-root .pk-help-tip::after{content:"";position:absolute;top:100%;right:11px;border:6px solid transparent;border-top-color:#0E2A20} #pk-root .pk-help-wrap:hover .pk-help-tip,#pk-root .pk-help-wrap:focus-within .pk-help-tip{opacity:1;visibility:visible;transform:translateY(0)} @media(max-width:560px){#pk-root .pk-help-tip{left:50%;right:auto;transform:translateX(-50%) translateY(4px);width:calc(100vw - 48px);max-width:280px}#pk-root .pk-help-wrap:hover .pk-help-tip,#pk-root .pk-help-wrap:focus-within .pk-help-tip{transform:translateX(-50%) translateY(0)}#pk-root .pk-help-tip::after{left:50%;right:auto;transform:translateX(-50%)}} #pk-root .lab-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line2);padding-top:20px;margin-top:4px} #pk-root .lab-price{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;font-size:30px;letter-spacing:-.02em} #pk-root .lab-price small{font-size:12px;font-weight:600;color:var(--ink3);font-family:'InterV','Inter','Plus Jakarta Sans',system-ui,sans-serif} /* v167: přepínač Známka/Kartička jako zelené pilulky (stejný jazyk jako .menu-app v nav), ať se nedá přehlédnout. Aktivní = plná zelená, neaktivní = obtažená bílá – tab přepínač musí pořád ukazovat, co je vybrané, takže obě NEJSOU plné zelené. */ #pk-root .pk-cfgtabs{display:flex;justify-content:center;gap:10px;margin:0 0 22px;flex-wrap:wrap} #pk-root .pk-cfgtab{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif; font-size:15.5px;font-weight:700;line-height:1;color:var(--ink2);background:var(--paper); border:1.6px solid var(--line);border-radius:999px;padding:12px 22px;cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease} #pk-root .pk-cfgtab:hover{color:var(--coral-dk);border-color:var(--coral);transform:translateY(-1px)} #pk-root .pk-cfgtab.on{background:var(--coral);border-color:var(--coral);color:#fff; font-variation-settings:"wght" 780;box-shadow:0 10px 22px -10px rgba(16,185,129,.85)} #pk-root .pk-cfgtab.on:hover{background:var(--coral-dk);border-color:var(--coral-dk);color:#fff} #pk-root .pk-combo-banner{display:none;align-items:center;gap:9px;justify-content:center;max-width:640px;margin:0 auto 18px;padding:11px 16px;border-radius:13px;background:var(--green-soft);color:var(--ink);font-size:13.5px;font-weight:600;text-align:center} #pk-root .pk-combo-banner.show{display:flex} #pk-root .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} #pk-root .pcard{background:var(--paper);border:1px solid var(--line2);border-radius:20px;overflow:hidden;transition:.22s;display:flex;flex-direction:column} #pk-root .pcard:hover{transform:translateY(-5px);box-shadow:0 28px 50px -28px rgba(21,53,42,.4)} #pk-root .pcard .pimg{aspect-ratio:1.15;display:flex;align-items:center;justify-content:center;position:relative;background:#fff} #pk-root .pcard.dk .pimg{background:radial-gradient(60% 60% at 50% 45%,#27493c,#0A3F2F)} #pk-root .pcard .pimg svg{filter:drop-shadow(0 12px 18px rgba(21,53,42,.26));width:56%;height:56%;max-width:120px;max-height:120px;display:block} #pk-root .pcard .pbadge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:8px;background:var(--coral);color:#fff} #pk-root .pcard .pbadge.tl{background:var(--teal)} #pk-root .pcard .pbadge.gd{background:var(--gold);color:var(--ink)} #pk-root .pcard .pbody{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1} #pk-root .pcard .prate{font-size:11px;color:var(--gold-dk);font-weight:600;display:flex;align-items:center;gap:4px} #pk-root .pcard .pn{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 700;font-size:16px;letter-spacing:-.01em;margin:6px 0 5px} #pk-root .pcard .pchips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px} #pk-root .pcard .chip{font-size:10.5px;font-weight:600;color:var(--ink2);background:#f1f6ef;border:1px solid var(--line2);border-radius:7px;padding:3px 7px} #pk-root .pcard .pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between} #pk-root .pcard .pp{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 780;font-size:19px;letter-spacing:-.01em} #pk-root .addbtn{width:40px;height:40px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;border:none} #pk-root .addbtn:hover{background:var(--coral)} #pk-root .bundle{background:linear-gradient(135deg,#FFE7C2,#FFC24B);border-radius:28px;padding:48px;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;position:relative;overflow:hidden} #pk-root .bundle .eyebrow{color:var(--coral-dk)} #pk-root .bundle h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 770;font-size:34px;letter-spacing:-.025em;line-height:1.06;margin:11px 0 12px;color:var(--ink)} #pk-root .bundle p{font-size:15px;color:#6b4f12;line-height:1.55;max-width:42ch} #pk-root .bundle .blist{display:flex;flex-direction:column;gap:9px;margin:18px 0 24px} #pk-root .bundle .bl{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#5a4310} #pk-root .bundle .bprice{display:flex;align-items:baseline;gap:10px;margin-bottom:18px} #pk-root .bundle .bnow{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;font-size:38px;color:var(--ink)} #pk-root .bundle .bwas{font-size:17px;color:#9a7a2a;text-decoration:line-through} #pk-root .bundle .bsave{font-size:12px;font-weight:700;color:#fff;background:var(--coral);padding:4px 9px;border-radius:8px} #pk-root .bundle-vis{display:flex;align-items:center;justify-content:center} /* fotka balíčku (PNG s průhledným pozadím) – karta+známky přímo na krémové kartě, bez zeleného rámu. drop-shadow (ne box-shadow) kopíruje tvar objektů (průhledné pozadí → žádný obdélníkový stín). */ #pk-root .bundle-vis img.bundle-photo{width:100%;max-width:400px;height:auto;display:block;filter:drop-shadow(0 18px 24px rgba(21,53,42,.3))} @media(prefers-reduced-motion:no-preference){#pk-root .bundle-vis img.bundle-photo{transition:transform .5s cubic-bezier(.2,.7,.2,1)}#pk-root .bundle:hover img.bundle-photo{transform:translateY(-5px) rotate(-1deg)}} #pk-root .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s} #pk-root .step{position:relative;padding-top:8px} #pk-root .step .no{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;font-size:15px;width:38px;height:38px;border-radius:12px;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:15px} #pk-root .step h4{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:18px;letter-spacing:-.01em;margin-bottom:6px} #pk-root .step p{font-size:13.5px;color:var(--ink2);line-height:1.5} #pk-root .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} #pk-root .quote{background:var(--paper);border:1px solid var(--line2);border-radius:20px;padding:24px} #pk-root .quote .stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:11px} #pk-root .quote p{font-size:14.5px;line-height:1.55;color:var(--ink)} #pk-root .quote .by{display:flex;align-items:center;gap:10px;margin-top:16px} #pk-root .quote .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;color:#fff;font-size:15px} #pk-root .quote .who{font-size:12.5px;font-weight:700} #pk-root .quote .role{font-size:11.5px;color:var(--ink3)} #pk-root .news{background:var(--ink);color:#fff;border-radius:28px;padding:46px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;position:relative;overflow:hidden} #pk-root .news::before{content:"";position:absolute;right:8%;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,75,.22),transparent 70%)} #pk-root .news h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 760;font-size:30px;letter-spacing:-.02em;margin-bottom:8px;position:relative} #pk-root .news p{font-size:14.5px;color:rgba(255,255,255,.7);position:relative} #pk-root .news-form{display:flex;gap:10px;position:relative} #pk-root .news-form input{border:none;border-radius:13px;padding:15px 18px;font:inherit;font-size:14px;width:280px} #pk-root .news-form input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,194,75,.4)} #pk-root .ftr{background:#0f261e;color:rgba(255,255,255,.7);padding:56px 0 26px;margin-top:10px} #pk-root .ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)} #pk-root .ftr .brand .nm{color:#fff} #pk-root .ftr-about{font-size:13px;line-height:1.6;margin:16px 0 18px;max-width:34ch} #pk-root .ftr h5{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:15px} #pk-root .ftr ul{list-style:none;display:flex;flex-direction:column;gap:10px} #pk-root .ftr ul a{font-size:13.5px;color:rgba(255,255,255,.72)} #pk-root .ftr ul a:hover{color:#fff} #pk-root .ftr-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px;flex-wrap:wrap;gap:16px} #pk-root .pays{display:flex;gap:7px;flex-wrap:wrap;align-items:center} #pk-root .pay{display:inline-flex;align-items:center;gap:5px;height:28px;box-sizing:border-box;padding:0 11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:7px} #pk-root .pay-visa,#pk-root .pay-mc,#pk-root .pay-ap,#pk-root .pay-gp,#pk-root .pay-gopay{background:#fff;border-color:rgba(255,255,255,.6)} #pk-root .pay .pay-tx{font-family:'InterV','Inter',system-ui,sans-serif;font-size:13px;font-weight:700;line-height:1} #pk-root .pay-visa .pay-tx{font-style:italic;font-weight:900;font-size:15px;color:#1434CB;letter-spacing:-.02em} #pk-root .pay-mc .pay-ic{width:28px;height:17px;display:block} #pk-root .pay-ap .pay-ic{width:14px;height:14px;fill:#000;display:block} #pk-root .pay-ap .pay-tx{color:#000;font-size:14px;font-weight:600;font-family:-apple-system,'SF Pro Text',system-ui,sans-serif} #pk-root .pay-gp .pay-tx-g{color:#4285F4;font-size:15px;font-weight:800;font-family:Arial,sans-serif} #pk-root .pay-gp .pay-tx-p{color:#5F6368;font-size:13px;font-weight:600;margin-left:1px;font-family:Arial,sans-serif} #pk-root .pay-gopay .pay-tx-gopay{color:#0B57D0;font-size:13.5px;font-weight:800;letter-spacing:-.01em} #pk-root .pay-cod .pay-ic{width:15px;height:11px;color:rgba(255,255,255,.85);display:block} #pk-root .pay-cod .pay-tx{color:rgba(255,255,255,.85);font-size:11px} #pk-root .ftr-copy{font-size:12px;color:rgba(255,255,255,.5)} #pk-root .ftr-shoptet{display:inline-flex;align-items:center;gap:6px;margin-left:12px;color:rgba(255,255,255,.72);font-weight:600;text-decoration:none;vertical-align:middle;transition:color .15s} #pk-root .ftr-shoptet img{display:block;width:16px;height:16px} #pk-root .ftr-shoptet:hover{color:#fff} @media(max-width:980px){#pk-root .menu, #pk-root .hero-meta{display:none}#pk-root .burger{display:flex}#pk-root .hero-in, #pk-root .sync-grid, #pk-root .lab-grid, #pk-root .bundle, #pk-root .news{grid-template-columns:1fr;gap:28px}#pk-root .hero h1{font-size:42px}#pk-root .stage{height:380px}#pk-root .cats, #pk-root .grid4{grid-template-columns:repeat(2,1fr)}#pk-root .trust-in{grid-template-columns:repeat(2,1fr)}#pk-root .steps, #pk-root .quotes{grid-template-columns:1fr}#pk-root .sync, #pk-root .bundle, #pk-root .news{padding:32px}#pk-root .lab-controls{padding:30px}#pk-root .news-form input{width:auto;flex:1}#pk-root .ftr-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){#pk-root .cats, #pk-root .grid4, #pk-root .trust-in, #pk-root .ftr-grid{grid-template-columns:1fr}#pk-root .hero h1{font-size:34px}} #pk-root .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:-8px 0 28px} #pk-root .tab{font-family:inherit;font-size:13.5px;font-weight:600;border:1.5px solid var(--line);border-radius:11px;padding:9px 16px;cursor:pointer;background:#fff;color:var(--ink2);transition:.15s} #pk-root .tab:hover{border-color:var(--ink3);color:var(--ink)} #pk-root .tab.on{border-color:var(--ink);background:var(--ink);color:#fff} #pk-root .tab .tn{margin-left:6px;font-size:11px;opacity:.55;font-weight:700} #pk-root .pcard .pprice{display:flex;align-items:baseline;gap:7px} #pk-root .pcard .pwas{font-size:12.5px;color:var(--ink3);text-decoration:line-through;font-weight:600} #pk-root .shopmore{display:flex;justify-content:center;margin-top:34px} #pk-root :focus-visible{outline:2.5px solid var(--teal);outline-offset:2px;border-radius:8px} #pk-root .addbtn:focus-visible, #pk-root .tab:focus-visible{outline-offset:3px} #pk-root .rubby{position:relative;overflow:hidden;border-radius:28px;padding:46px 54px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;background:linear-gradient(135deg,#FFF7EC 0%,#F2F8F0 55%,#E7F3EF 100%);border:1px solid var(--line2)} #pk-root .rubby::before{content:"";position:absolute;left:-70px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(0,202,132,.16),transparent 70%)} #pk-root .rubby::after{content:"";position:absolute;right:34%;bottom:-100px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(26,165,147,.16),transparent 70%)} #pk-root .rubby-copy{position:relative;z-index:2} #pk-root .rubby-copy h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 790;font-size:42px;letter-spacing:-.03em;line-height:1.02;margin:12px 0 14px;color:var(--ink)} #pk-root .rubby-copy h2 b{color:var(--coral);font-weight:inherit} #pk-root .rubby-copy p{font-size:16px;color:var(--ink2);line-height:1.5;max-width:46ch} #pk-root .rubby-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:14px 0 20px} #pk-root .rubby-list li{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--ink)} #pk-root .rubby-list li svg{flex:0 0 auto} #pk-root .rubby-cta{display:flex;gap:12px;flex-wrap:wrap} #pk-root .rubby-photo{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px} #pk-root .rubby-disc{position:absolute;width:100%;max-width:430px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 44%,#FFE7C2 0%,rgba(255,231,194,.5) 46%,rgba(255,231,194,0) 72%)} #pk-root .rubby-disc::after{content:"";position:absolute;inset:7%;border-radius:50%;border:2px dashed rgba(26,165,147,.32)} #pk-root .rubby-img{position:relative;z-index:2;width:auto;max-width:86%;max-height:420px;height:auto;filter:drop-shadow(0 26px 30px rgba(21,53,42,.26))} #pk-root .rubby-bubble{position:absolute;top:5%;right:4%;z-index:3;background:#fff;color:var(--ink);font-weight:700;font-size:14px;padding:11px 15px;border-radius:16px 16px 16px 5px;box-shadow:0 16px 30px -12px rgba(21,53,42,.4);border:1px solid var(--line2)} #pk-root .rubby-paw{position:absolute;left:6%;bottom:12%;z-index:1;color:rgba(26,165,147,.5)} @media(max-width:980px){#pk-root .rubby{grid-template-columns:1fr;gap:24px;padding:34px}#pk-root .rubby-copy h2{font-size:34px}#pk-root .rubby-photo{min-height:360px;order:2}#pk-root .rubby-img{max-height:340px}} @media(max-width:560px){#pk-root .rubby-copy h2{font-size:29px}#pk-root .rubby-img{max-height:280px}#pk-root .rubby-bubble{font-size:12.5px;padding:9px 12px}} @keyframes pk-fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes pk-fadeIn{from{opacity:0}to{opacity:1}} @keyframes pk-floatCard{0%,100%{transform:rotate(-5deg) translate(-26px,8px)}50%{transform:rotate(-5deg) translate(-26px,-8px)}} @keyframes pk-floatTag{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-13px)}} @keyframes pk-floatBub{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes pk-floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes pk-spin{to{transform:rotate(360deg)}} @keyframes pk-pulseGlow{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}} @keyframes pk-shine{0%{transform:translateX(-130%) skewX(-18deg)}60%,100%{transform:translateX(280%) skewX(-18deg)}} @keyframes pk-scan{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(var(--pk-scan,56px));opacity:0}} @keyframes pk-wave{0%,55%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-7deg)}45%{transform:rotate(13deg)}} @keyframes pk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes pk-pricePop{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}} @keyframes pk-pawburst{0%{transform:scale(.3) translateY(0);opacity:0}25%{opacity:1}100%{transform:scale(1.1) translateY(-48px) rotate(12deg);opacity:0}} @keyframes pk-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-16px)}} @media (prefers-reduced-motion: no-preference){#pk-root .hero .eyebrow{animation:pk-fadeUp .7s .05s both}#pk-root .hero h1{animation:pk-fadeUp .8s .16s both}#pk-root .hero .lead{animation:pk-fadeUp .8s .30s both}#pk-root .hero-cta{animation:pk-fadeUp .8s .44s both}#pk-root .hero-meta{animation:pk-fadeUp .8s .58s both}#pk-root .stage{animation:pk-fadeIn 1s .35s both}#pk-root .metalcard{animation:pk-floatCard 6.5s ease-in-out infinite}#pk-root .tagchip{animation:pk-floatTag 7.5s ease-in-out infinite}#pk-root .scanbub{animation:pk-floatBub 4.5s ease-in-out infinite}#pk-root .stage .glow{animation:pk-pulseGlow 8s ease-in-out infinite}#pk-root .rubby-img{animation:pk-floatY 6s ease-in-out infinite}#pk-root .rubby-bubble{transform-origin:bottom left;animation:pk-wave 3.4s ease-in-out 1s infinite}#pk-root .rubby-disc::after{animation:pk-spin 28s linear infinite}#pk-root .flow .arr{animation:pk-pulseGlow 2.4s ease-in-out infinite}#pk-root .sync::before{animation:pk-drift 15s ease-in-out infinite}#pk-root .sync::after{animation:pk-drift 18s ease-in-out infinite reverse}} #pk-root .btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#0A8050,#067A45);box-shadow:0 12px 26px -12px rgba(0,202,132,.8)} #pk-root .btn-primary:hover{background:linear-gradient(135deg,#078048,#06703F);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(0,202,132,.95)} #pk-root .btn-primary::after{content:"";position:absolute;top:-40%;left:0;width:38%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none} @media (prefers-reduced-motion: no-preference){#pk-root .btn-primary:hover::after{animation:pk-shine .9s ease}} #pk-root .btn{will-change:transform} #pk-root .btn-primary:active, #pk-root .btn-dark:active, #pk-root .btn-ghost:active{transform:translateY(0) scale(.97)} #pk-root .nav{transition:background .25s,box-shadow .25s} #pk-root .nav.pk-scrolled{box-shadow:0 10px 30px -20px rgba(21,53,42,.55);background:rgba(241,248,243,.94)} #pk-root .nav-in{transition:height .25s} #pk-root .nav.pk-scrolled .nav-in{height:60px} #pk-root .brand{transition:transform .25s} #pk-root .brand:hover{transform:translateY(-1px) scale(1.03)} #pk-root .pk-logo{transition:filter .25s,transform .25s} #pk-root .ftr .pk-logo{filter:brightness(0) invert(1)} #pk-root .icobtn{transition:background .15s,transform .15s} #pk-root .icobtn:hover{transform:translateY(-2px)} #pk-root .cat .vis svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)} #pk-root .cat:hover .vis svg{transform:scale(1.09) rotate(-3deg) translateY(-4px)} #pk-root .cat::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,rgba(0,202,132,.16),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none} #pk-root .cat:hover::after{opacity:1} #pk-root .pcard{position:relative} #pk-root .pcard .pimg svg{transition:transform .45s cubic-bezier(.2,.7,.2,1)} #pk-root .pcard:hover .pimg svg{transform:scale(1.12) translateY(-3px)} #pk-root .pcard::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--green-dk));transition:width .4s;z-index:4} #pk-root .pcard:hover::before{width:100%} #pk-root .addbtn{position:relative} #pk-root .addbtn.pk-ok{background:var(--green)!important;animation:pk-pricePop .4s ease} #pk-root .pk-paw{position:absolute;left:50%;top:0;width:18px;height:18px;margin-left:-9px;color:var(--gold);pointer-events:none;z-index:30;animation:pk-pawburst .7s ease forwards} #pk-root .lab-price.pk-pop{animation:pk-pricePop .4s ease} #pk-root .swatch.on, #pk-root .opt.on{animation:pk-pricePop .35s ease} #pk-root .mc-qr{position:relative;overflow:hidden} #pk-root .mc-qr::after{content:"";position:absolute;left:6%;right:6%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent);box-shadow:0 0 8px var(--brand);top:6%;--pk-scan:54px} #pk-root .lab-preview{overflow:hidden} @media (prefers-reduced-motion: no-preference){#pk-root .mc-qr::after{animation:pk-scan 3.2s ease-in-out infinite}} #pk-root .pk-reveal{opacity:0;transform:translateY(22px)} @media (prefers-reduced-motion: no-preference){#pk-root .pk-reveal{transition:opacity .6s ease,transform .6s ease}} #pk-root .pk-reveal.pk-vis{opacity:1;transform:none} #pk-root .hero h1 .c{background:linear-gradient(120deg,var(--brand),var(--green-dk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--green-dk)} #pk-root .hero h1, #pk-root .sec-h h2, #pk-root .lab-controls h3, #pk-root .step h4, #pk-root .bundle h2, #pk-root .rubby-copy h2{color:var(--ink)} #pk-root .sync h2, #pk-root .news h2{color:#fff} #pk-root .news-form input{color:var(--ink)} #pk-root .field, #pk-root .field::placeholder{color:var(--ink)} #pk-root .trust .ti .ic{transition:transform .25s} #pk-root .trust .ti:hover .ic{transform:translateY(-3px) rotate(-4deg)} #pk-root .step .no{transition:transform .25s} #pk-root .step:hover .no{transform:translateY(-3px) scale(1.06)} #pk-root .pk-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--brand),var(--green-dk));box-shadow:0 0 10px rgba(0,202,132,.6);transition:width .1s linear} /* v184: „šipka nahoru" nad chat bublinou schovaná na přání majitele – necháváme button dál existovat/funkční (žádná JS logika se neruší), jen se nikdy nezobrazí. */ #pk-root .pk-top{display:none!important;position:fixed;right:20px;bottom:92px;width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;align-items:center;justify-content:center;cursor:pointer;z-index:59;opacity:0;transform:translateY(16px) scale(.9);transition:.3s;box-shadow:0 14px 30px -12px rgba(21,53,42,.6);border:none} #pk-root .pk-top.pk-show{opacity:1;transform:none} #pk-root .pk-top:hover{background:var(--green)} #pk-root .announce{overflow:hidden} #pk-root .announce .pk-track{display:inline-flex;white-space:nowrap;will-change:transform} @media (prefers-reduced-motion: no-preference){#pk-root .announce .pk-track{animation:pk-marquee 30s linear infinite}#pk-root .announce:hover .pk-track{animation-play-state:paused}} /* Announce karusel: jedna zpráva, po čase přejede na další + šipky ‹ › (nahrazuje ujíždějící marquee) */ #pk-root .announce .pk-ann{display:flex;align-items:center;justify-content:center;gap:8px;max-width:660px;margin:0 auto} #pk-root .announce .pk-ann-arw{flex:0 0 auto;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:#fff;opacity:.5;cursor:pointer;border-radius:7px;transition:opacity .15s,background .15s;-webkit-appearance:none;appearance:none} #pk-root .announce .pk-ann-arw:hover{opacity:1;background:rgba(255,255,255,.14)} #pk-root .announce .pk-ann-arw svg{width:15px;height:15px;display:block} #pk-root .announce .pk-ann-vp{flex:1 1 auto;min-width:0;overflow:hidden;position:relative} #pk-root .announce .pk-ann-track{display:flex;will-change:transform} @media(prefers-reduced-motion:no-preference){#pk-root .announce .pk-ann-track{transition:transform .5s cubic-bezier(.4,0,.2,1)}} #pk-root .announce .pk-ann-item{flex:0 0 100%;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px} @media(max-width:560px){#pk-root .announce{font-size:11.5px}#pk-root .announce .pk-ann{gap:4px}#pk-root .announce .pk-ann-arw{width:22px;height:22px}} @keyframes pk-menudrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} @media(max-width:980px){#pk-root .burger{cursor:pointer}#pk-root .nav.pk-menu-open .menu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;margin:0;gap:0;background:#fff;backdrop-filter:blur(14px);padding:6px 24px 16px;box-shadow:0 24px 44px -18px rgba(21,53,42,.4);border-bottom:1px solid var(--line2);z-index:55}#pk-root .nav.pk-menu-open .menu a{padding:14px 2px;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line2)}#pk-root .nav.pk-menu-open .menu a:last-child{border-bottom:none}#pk-root .nav.pk-menu-open .menu a::after{display:none}} @media (prefers-reduced-motion: no-preference){#pk-root .nav.pk-menu-open .menu{animation:pk-menudrop .24s ease}} @media(max-width:620px){#pk-root .flow{flex-direction:column;gap:9px}#pk-root .flow .fl-node{width:100%;max-width:260px}#pk-root .flow .arr{transform:rotate(90deg)}} @media(max-width:430px){#pk-root .sec{padding:48px 0}#pk-root .sync, #pk-root .bundle, #pk-root .news, #pk-root .rubby{padding:26px}#pk-root .lab-controls{padding:24px 20px}#pk-root .hero h1{font-size:30px}#pk-root .rubby-copy h2, #pk-root .sec-h h2{font-size:27px}#pk-root .row2{grid-template-columns:1fr}} /* Lukáš: menší mezery MEZI sekcemi na mobilu (default 66px, ≤430 48px → moc velké). Sjednotit na 20px u všech telefonů (~40px mezi kartami). */ @media(max-width:560px){#pk-root .sec{padding:20px 0}} @keyframes pkc-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}} @keyframes pkc-blink{0%,100%{box-shadow:0 0 0 0 rgba(124,243,192,.6)}50%{box-shadow:0 0 0 5px rgba(124,243,192,0)}} @keyframes pkc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pkc-bob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}} @keyframes pkc-fabin{from{opacity:0;transform:translateY(20px) scale(.6)}to{opacity:1;transform:none}} #pk-root .pkc-fab{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;z-index:62;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#03C57F,#067A45);box-shadow:0 14px 30px -8px rgba(0,202,132,.6),0 6px 14px rgba(21,53,42,.25);transition:transform .25s,box-shadow .25s} @media (prefers-reduced-motion: no-preference){#pk-root .pkc-fab{animation:pkc-fabin .5s .4s both}} #pk-root .pkc-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 38px -8px rgba(0,202,132,.72)} #pk-root .pkc-fab svg{width:28px;height:28px} #pk-root .pkc-fab .pkc-ic-close{display:none} #pk-root .pkc-fab.pkc-open .pkc-ic-chat{display:none} #pk-root .pkc-fab.pkc-open .pkc-ic-close{display:block} #pk-root .pkc-fab .pkc-badge{position:absolute;top:-3px;right:-3px;min-width:21px;height:21px;border-radius:11px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;font-family:'InterV',system-ui,sans-serif} #pk-root .pkc-fab .pkc-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(0,202,132,.5);z-index:-1} @media (prefers-reduced-motion: no-preference){#pk-root .pkc-fab .pkc-pulse{animation:pkc-pulse 2.4s ease-out infinite}} #pk-root .pkc-panel{position:fixed;right:20px;bottom:90px;width:370px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 120px);background:#fff;border-radius:22px;box-shadow:0 30px 70px -20px rgba(21,53,42,.5),0 0 0 1px rgba(21,53,42,.06);z-index:63;display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.2,1);font-family:'InterV',system-ui,sans-serif} #pk-root .pkc-panel.pkc-show{opacity:1;transform:none;pointer-events:auto} #pk-root .pkc-head{background:linear-gradient(135deg,#03C57F,#067A45);color:#fff;padding:15px 15px 14px;display:flex;align-items:center;gap:11px} #pk-root .pkc-ava{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex:0 0 auto} #pk-root .pkc-ava svg{width:30px;height:30px} #pk-root .pkc-htxt{flex:1;min-width:0} #pk-root .pkc-htitle{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em} #pk-root .pkc-hsub{font-size:11.5px;opacity:.92;display:flex;align-items:center;gap:6px;margin-top:1px} #pk-root .pkc-dot{width:8px;height:8px;border-radius:50%;background:#7CF3C0} @media (prefers-reduced-motion: no-preference){#pk-root .pkc-dot{animation:pkc-blink 2s ease-in-out infinite}} #pk-root .pkc-x{background:rgba(255,255,255,.16);border:none;color:#fff;width:32px;height:32px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s} #pk-root .pkc-x:hover{background:rgba(255,255,255,.32)} #pk-root .pkc-x svg{width:18px;height:18px} #pk-root .pkc-body{flex:1;overflow-y:auto;padding:16px 14px 8px;background:#F1F8F3;display:flex;flex-direction:column;gap:10px} #pk-root .pkc-msg{max-width:85%;font-size:14px;line-height:1.5;padding:10px 13px;border-radius:16px;animation:pkc-in .3s ease both;word-wrap:break-word} #pk-root .pkc-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid rgba(21,53,42,.07);border-bottom-left-radius:5px} #pk-root .pkc-msg.user{align-self:flex-end;background:linear-gradient(135deg,#078048,#067A45);color:#fff;border-bottom-right-radius:5px} #pk-root .pkc-msg b{font-weight:700} #pk-root .pkc-typing{align-self:flex-start;background:#fff;border:1px solid rgba(21,53,42,.07);border-radius:16px;border-bottom-left-radius:5px;padding:13px 15px;display:flex;gap:5px} #pk-root .pkc-typing i{width:7px;height:7px;border-radius:50%;background:#6C8479;opacity:.5} @media (prefers-reduced-motion: no-preference){#pk-root .pkc-typing i{animation:pkc-bob 1s ease-in-out infinite}#pk-root .pkc-typing i:nth-child(2){animation-delay:.15s}#pk-root .pkc-typing i:nth-child(3){animation-delay:.3s}} #pk-root .pkc-quick{display:flex;flex-wrap:wrap;gap:7px;padding:2px 14px 12px;background:#F1F8F3} #pk-root .pkc-chip{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--green-dk);background:#fff;border:1.5px solid rgba(6,122,69,.35);border-radius:20px;padding:7px 12px;cursor:pointer;transition:.15s;white-space:nowrap} #pk-root .pkc-chip:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-1px)} #pk-root .pkc-foot{display:flex;gap:8px;padding:11px 12px;border-top:1px solid rgba(21,53,42,.08);background:#fff;align-items:center} #pk-root .pkc-input{flex:1;border:1.5px solid rgba(21,53,42,.14);border-radius:22px;padding:11px 15px;font:inherit;font-size:14px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s} #pk-root .pkc-input::placeholder{color:#9BAaa1} #pk-root .pkc-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,202,132,.16)} #pk-root .pkc-send{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#03C57F,#067A45);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .15s} #pk-root .pkc-send svg{width:20px;height:20px} #pk-root .pkc-send:hover{transform:scale(1.08)} @media(max-width:480px){#pk-root .pkc-panel{right:10px;left:10px;width:auto;max-width:none;bottom:80px;top:60px;height:auto;max-height:none}} #pk-root .btn-primary{background:var(--green);box-shadow:none} #pk-root .btn-primary:hover{background:var(--green-dk);box-shadow:none;transform:translateY(-2px)} #pk-root .btn-primary::after{display:none} #pk-root .btn-dark{box-shadow:none} #pk-root .btn-dark:hover{background:#0e271f} #pk-root .hero h1 .c{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)} #pk-root .pk-progress{background:var(--green);box-shadow:none} #pk-root .sync{background:linear-gradient(150deg,#1E7A54,#155A3D)} #pk-root .sync::before, #pk-root .sync::after{display:none} #pk-root .news{box-shadow:none} #pk-root .news::before{display:none} #pk-root .bundle{background:#FFF0CC} #pk-root .rubby{background:var(--green-soft)} #pk-root .rubby::before, #pk-root .rubby::after{display:none} #pk-root .rubby-disc{background:#FFF4E2} #pk-root .rubby-disc::after{border-color:rgba(21,158,99,.28)} #pk-root .stage .glow{display:none} #pk-root .cat{box-shadow:none;border:1px solid var(--line2)} #pk-root .cat:hover{box-shadow:0 16px 30px -22px rgba(21,53,42,.3)} #pk-root .cat.tint1{background:#FCEEE9} #pk-root .cat.tint2{background:#E7F4EF} #pk-root .cat.tint3{background:#FCF3DE} #pk-root .cat.tint4{background:linear-gradient(160deg,#1E7A54,#155A3D)} #pk-root .cat .grad{background:linear-gradient(180deg,transparent 56%,rgba(255,255,255,.85))} #pk-root .cat.tint4 .grad{background:linear-gradient(180deg,transparent 56%,rgba(21,53,42,.82))} #pk-root .pcard{box-shadow:none;border:1px solid var(--line2)} #pk-root .pcard:hover{box-shadow:0 16px 34px -24px rgba(21,53,42,.35)} #pk-root .pcard .pimg{background:#fff} #pk-root .pcard.dk .pimg{background:var(--ink)} #pk-root .metalcard{background:#E9EEF1;box-shadow:0 16px 36px -22px rgba(21,53,42,.32)} #pk-root .metalcard::after{display:none} #pk-root .mc-title, #pk-root .mc-lab, #pk-root .mc-sub{text-shadow:none} #pk-root .tagchip{background:var(--gold);box-shadow:0 14px 28px -16px rgba(120,80,10,.45)} #pk-root .tagchip .nm, #pk-root .tagchip .ph{text-shadow:none} #pk-root .lab-preview{background:var(--ink)} #pk-root .sw-steel{background:#C4CDD3} #pk-root .sw-brass{background:#E0A93C} #pk-root .sw-gold{background:#E8C158} #pk-root .sw-black{background:#2B3134} #pk-root .fl-node .ic[style*="gradient"]{background:var(--gold)!important} #pk-root .pkc-fab{background:var(--green);box-shadow:0 10px 22px -10px rgba(21,53,42,.45)} #pk-root .pkc-fab:hover{box-shadow:0 14px 26px -10px rgba(21,53,42,.55)} #pk-root .pkc-fab .pkc-pulse{background:rgba(15,138,87,.35)} #pk-root .pkc-head{background:var(--green)} #pk-root .pkc-send{background:var(--green)} #pk-root .pkc-msg.user{background:var(--green)} #pk-root .pkc-panel{box-shadow:0 24px 60px -24px rgba(21,53,42,.4)} /* ====== PK-LIGHTEN: configurator preview po vzoru petkarta.cz ====== */ #pk-root .lab-preview{background:radial-gradient(115% 115% at 50% 18%,#ffffff 0%,#EAF6EF 60%,#D8EEE2 100%)!important;box-shadow:inset 0 0 0 1px rgba(21,53,42,.06)} #pk-root .lab-preview .pill{color:var(--green-dk);background:#fff;border:1px solid rgba(15,138,87,.28)} #pk-root .tagsvg{filter:drop-shadow(0 18px 30px rgba(21,53,42,.16))} /* ====== v31: OTOČNÁ ZNÁMKA – zadní strana s gravírovaným QR ====== */ #pk-root .lab-preview .pk-flip{position:relative;width:100%;max-width:380px;aspect-ratio:3/2;perspective:1100px} #pk-root .lab-preview .pk-flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.35,.9,.3,1)} #pk-root .lab-preview .pk-flip-in.pk-flipped{transform:rotateY(180deg)} #pk-root .lab-preview .pk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden} #pk-root .lab-preview .pk-face .tagsvg{width:100%;height:100%;max-width:none;display:block} #pk-root .lab-preview .pk-face-b{transform:rotateY(180deg)} #pk-root .pk-flip-btn{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--green-dk,#10B981);border:1px solid rgba(15,138,87,.28);border-radius:999px;padding:9px 15px;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;cursor:pointer;box-shadow:0 12px 26px -12px rgba(21,53,42,.4);transition:transform .15s,box-shadow .15s;white-space:normal;text-align:center;max-width:calc(100% - 24px)} #pk-root .pk-flip-btn:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 16px 30px -12px rgba(21,53,42,.45)} #pk-root .pk-flip-btn svg{flex:0 0 auto} @media (prefers-reduced-motion: reduce){#pk-root .lab-preview .pk-flip-in{transition:none}} /* ============ v38: kotvy sekcí – odsazení pod sticky hlavičkou ============ */ #pk-root #kategorie,#pk-root #konfigurator,#pk-root #vybaveni,#pk-root #set,#pk-root #jak{scroll-margin-top:88px} /* ===== HERO: zelená nouzová kartička (nahrazuje .metalcard) ===== */ #pk-root .emcard{position:absolute;width:368px;border-radius:22px;padding:20px 26px 18px;transform:rotate(-5deg) translate(-28px,4px);color:#F0E1A8;background:radial-gradient(130% 95% at 28% 8%,rgba(255,255,255,.12),rgba(255,255,255,0) 46%),linear-gradient(152deg,#34A94F 0%,#279B45 46%,#1C8A3A 100%);box-shadow:0 30px 62px -24px rgba(12,74,28,.62),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 10px rgba(0,0,0,.20);overflow:hidden;z-index:2} #pk-root .emcard::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(122deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);opacity:.55;pointer-events:none} /* prémiový „glint" – jednou při otevření přejede po kartě odlesk */ #pk-root .emcard::before{content:"";position:absolute;top:0;left:0;height:100%;width:36%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);transform:translateX(-170%) skewX(-16deg)} @keyframes pk-glint{from{transform:translateX(-170%) skewX(-16deg)}to{transform:translateX(390%) skewX(-16deg)}} @media (prefers-reduced-motion: no-preference){#pk-root .emcard::before{animation:pk-glint 1.15s ease 1.15s 1 both}} #pk-root .em-title{position:relative;z-index:1;font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 800;text-align:center;font-size:15px;letter-spacing:.015em;line-height:1.12;margin:2px 0 0;text-shadow:0 1px 1px rgba(0,0,0,.30)} #pk-root .em-rule{position:relative;z-index:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(240,225,168,.92) 12%,rgba(240,225,168,.92) 88%,transparent);margin:9px 0 0} #pk-root .em-rule.c{width:60%;margin:7px auto 0} #pk-root .em-emblem{position:relative;z-index:1;display:flex;justify-content:center;margin:10px 0 8px;color:#F0E1A8} #pk-root .em-mark{width:82px;height:auto;display:block;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.30))} #pk-root .em-prompt{position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;text-shadow:0 1px 1px rgba(0,0,0,.26)} #pk-root .em-rows{position:relative;z-index:1;margin:12px 6px 0} #pk-root .em-row{font-size:15px;font-weight:700;padding:5px 0;text-shadow:0 1px 1px rgba(0,0,0,.26)} #pk-root .em-thanks{position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;margin-top:12px;text-shadow:0 1px 1px rgba(0,0,0,.26)} #pk-root .em-thanks .hrt{color:#F0E1A8} /* šéf: tlačítko „Navrhnout známku" (obě instance, href=#konfigurator) bez animace – jen jemná změna barvy, žádný pohyb/zdvih */ #pk-root .hero-cta .btn-primary, #pk-root .btn-primary[href="#konfigurator"]{transition:background-color .18s ease,box-shadow .18s ease} #pk-root .hero-cta .btn-primary:hover, #pk-root .btn-primary[href="#konfigurator"]:hover{transform:none} /* oprava „odstavec nalepený na levo": .sec (padding:66px 0) přebíjí boční padding z .wrap → na mobilu obsah lepí na kraj. Vrátíme .wrap gutter (24px) pro sekce .sec.wrap. */ #pk-root .sec.wrap{padding-left:24px;padding-right:24px} @keyframes pk-floatEm{0%,100%{transform:rotate(-5deg) translate(-28px,4px)}50%{transform:rotate(-5deg) translate(-28px,-12px)}} @media (prefers-reduced-motion: no-preference){#pk-root .emcard{animation:pk-floatEm 6.5s ease-in-out infinite}} @media(max-width:560px){#pk-root .em-title{font-size:13px}#pk-root .em-row{font-size:14px}#pk-root .em-prompt,#pk-root .em-thanks{font-size:12px}} /* Mobil – hero scéna se překrývala (zlatá známka za rohem karty, QR bublina na kartě). Uživatel: „aby se to nepřekrývalo". → čistý svislý sloupec: známka NAHOŘE, karta, QR bublina DOLE. Vše v toku, vycentrované, s mezerami – nic se nepřekrývá. */ @media(max-width:560px){ #pk-root .stage{height:auto;min-height:0;width:100%;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:15px;padding:22px 6px 8px;overflow:visible} /* Lukáš: menší mezera pod QR bublinou v hero na mobilu (hero-in mělo padding-bottom 64px) */ #pk-root .hero-in{padding-bottom:20px} #pk-root .stage .glow{display:none} #pk-root .tagchip{order:-1;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:108px;height:108px;margin:0;transform:rotate(6deg);animation:none;z-index:1} #pk-root .emcard{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:340px;box-sizing:border-box;margin:0;transform:rotate(-1.5deg);animation:none} #pk-root .scanbub{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0;animation:none} } /* jemný zoom fotky produktu při najetí (fotky, ne jen SVG ilustrace) */ #pk-root .pcard .pimg{overflow:hidden} #pk-root .pcard .pk-pimg{transition:transform .45s cubic-bezier(.2,.7,.2,1)} #pk-root .pcard:hover .pk-pimg{transform:scale(1.06)} /* toast je globální overlay z petkarta-cart.js (ensureChrome → document.body), používaný i na homepage (přidání do košíku z karet/konfigurátoru). Jeho fixed styl je jinak jen v petkarta-cart.css → když ta je stará/necachovaná, zůstane v toku a udělá obří prázdné místo POD patičkou. Definujeme ho i tady, ať je homepage soběstačná. */ #pk-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,160%);z-index:9999;background:var(--ink,#0A3F2F);color:#fff;font-size:14px;font-weight:600;padding:12px 18px 12px 12px;border-radius:16px;display:flex;align-items:center;gap:11px;box-shadow:0 24px 50px -18px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.22,1,.36,1);max-width:90vw} #pk-toast.show{transform:translate(-50%,0)} #pk-toast img{width:34px;height:34px;flex:0 0 auto;object-fit:contain} #pk-toast b{color:var(--gold,#FFC24B)} /* v41: konfigurátor – combo hláška je nad řádkem; tlačítko se nikdy nesmrští (jinak se „Přidat do košíku" ořízne, .btn-primary má overflow:hidden) */ #pk-root .lab-buy{flex-wrap:wrap} #pk-root .lab-buy #pk-addCustom{flex:0 0 auto;max-width:100%} #pk-root .lab-buy .lab-price{flex:1 1 auto;min-width:0} /* ===================================================================== APLIKACE PetKarta – showcase sekce (#aplikace / .pk-app) · v57 Nahrazuje recenze+newsletter; propaguje appku na www.petkarta.cz. ===================================================================== */ #pk-root .pk-app{position:relative;overflow:hidden;border-radius:32px;padding:60px 56px; background:radial-gradient(120% 140% at 12% 0%,#237F5B 0%,#186549 45%,#134F3A 100%); color:#fff;box-shadow:0 40px 90px -40px rgba(9,28,20,.85),inset 0 1px 0 rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)} #pk-root .pk-app .pk-app-in{position:relative;z-index:3;display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center} /* dekor: rozostřené bloby + tlapky */ #pk-root .pk-app-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;z-index:1;pointer-events:none} #pk-root .pk-app-blob.b1{width:340px;height:340px;left:-90px;top:-120px;background:radial-gradient(circle,#2fd98a,transparent 70%)} #pk-root .pk-app-blob.b2{width:300px;height:300px;right:-70px;bottom:-110px;background:radial-gradient(circle,#0a7d66,transparent 70%)} #pk-root .pk-app-blob.b3{width:220px;height:220px;right:34%;top:-90px;background:radial-gradient(circle,rgba(255,194,75,.6),transparent 70%);opacity:.35} #pk-root .pk-app-paw{position:absolute;z-index:2;font-size:22px;opacity:.12;pointer-events:none;filter:grayscale(.2)} #pk-root .pk-app-paw.pw1{left:6%;bottom:14%;font-size:26px} #pk-root .pk-app-paw.pw2{left:44%;top:9%;font-size:18px} #pk-root .pk-app-paw.pw3{right:8%;top:40%;font-size:30px} #pk-root .pk-app-paw.pw4{left:30%;bottom:8%;font-size:20px} /* copy */ #pk-root .pk-app-copy .eyebrow{color:var(--gold)} #pk-root .pk-app-copy h2{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 780;color:#fff;font-size:44px;line-height:1.02;letter-spacing:-.03em;margin:12px 0 14px} #pk-root .pk-app-copy h2 .c{color:var(--gold);position:relative} #pk-root .pk-app-copy>p{font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.78);max-width:46ch;margin-bottom:22px} #pk-root .pk-app-copy>p b{color:#fff;font-weight:600} #pk-root .pk-app-feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 28px} #pk-root .pk-app-feats li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;color:rgba(255,255,255,.9)} #pk-root .pk-app-feats li b{color:#fff;font-weight:650} #pk-root .pk-app-feats .ic{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#0f2c22;background:linear-gradient(135deg,#5ff0ac,#22c980);box-shadow:0 6px 14px -6px rgba(47,217,138,.8);margin-top:1px} /* CTA */ #pk-root .pk-app-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap} #pk-root .pk-app-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:16px;color:#08281b;background:linear-gradient(135deg,#6af0b0,#20c67d 62%,#12b56f);border-radius:15px;padding:16px 26px;box-shadow:0 18px 40px -14px rgba(47,217,138,.85),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .18s ease,box-shadow .18s ease} #pk-root .pk-app-btn:hover{transform:translateY(-3px);box-shadow:0 26px 54px -16px rgba(47,217,138,.95),inset 0 1px 0 rgba(255,255,255,.6)} #pk-root .pk-app-btn:active{transform:translateY(-1px) scale(.99)} #pk-root .pk-app-btn svg{position:relative;z-index:2} #pk-root .pk-app-btn .sh{position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg)} /* v173: QR "Naskenuj mě" nahrazen skutečnými App Store / Google Play tlačítky (uživatel: chce funkční odkazy, ne dekorativní QR). Stejné PNG jako na /aplikace/. */ #pk-root .pk-app-stores{display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* v174: BEZ border-radius zde – appstore.png/gplay.png už mají zaoblené rohy vypálené v samotném PNG; přidané CSS zaoblení navrch je oříznulo podruhé v jiném poloměru a vypadalo to rozmazaně/divně (nahlásil majitel se screenshotem). */ #pk-root .pk-app-store{display:block;line-height:0;transition:transform .18s ease,filter .18s ease} #pk-root .pk-app-store img{display:block;height:40px;width:auto} #pk-root .pk-app-store:hover{transform:translateY(-2px);filter:brightness(1.08)} @media(max-width:430px){#pk-root .pk-app-store img{height:38px}} /* vizuál – telefon */ #pk-root .pk-app-vis{position:relative;display:flex;align-items:center;justify-content:center;min-height:580px} #pk-root .pk-app-glow{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(47,217,138,.55),transparent 66%);filter:blur(20px);z-index:1} #pk-root .pk-app-phone{position:relative;z-index:2;width:min(350px,92%);aspect-ratio:350/544;height:auto;border-radius:52px;padding:15px;background:linear-gradient(160deg,#20302a,#0c1c16);box-shadow:0 46px 80px -34px rgba(0,0,0,.75),inset 0 0 0 1.5px rgba(255,255,255,.12),inset 0 0 0 6px rgba(0,0,0,.35);will-change:transform} #pk-root .pk-app-notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:126px;height:26px;border-radius:15px;background:#0b1712;z-index:5} #pk-root .pk-app-screen{position:relative;height:100%;border-radius:39px;overflow:hidden;background:linear-gradient(180deg,#f2fbf5,#e6f4ea);display:flex;flex-direction:column} #pk-root .pk-app-shot{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} #pk-root #pk-lp-shot{transition:opacity .18s ease} #pk-root #pk-lp-shot.pk-lp-shotfade{opacity:0} #pk-root .pk-app-topbar{display:flex;align-items:center;justify-content:space-between;padding:26px 18px 12px} #pk-root .pk-app-topbar .logo{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:17px;color:#0A3F2F} #pk-root .pk-app-topbar .logo b{color:var(--coral);font-weight:inherit} #pk-root .pk-app-topbar .live{position:relative;font-size:11px;font-weight:800;letter-spacing:.02em;color:#0A6B42;background:rgba(15,138,87,.12);border:1px solid rgba(15,138,87,.28);border-radius:99px;padding:4px 10px 4px 20px} #pk-root .pk-app-topbar .live::before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#12b56f;box-shadow:0 0 0 0 rgba(18,181,111,.6)} #pk-root .pk-app-card{position:relative;margin:6px 14px 16px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 20px 40px -24px rgba(21,53,42,.5);overflow:hidden;flex:1} #pk-root .pk-app-scan{position:absolute;left:0;right:0;top:0;height:38px;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(47,217,138,.45),rgba(47,217,138,0));border-top:2px solid rgba(47,217,138,.9)} #pk-root .pk-app-head{display:flex;align-items:center;gap:11px;margin-bottom:14px} #pk-root .pk-app-head .ava{flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#eef7ee,#dcebdd);display:flex;align-items:center;justify-content:center;font-size:26px} #pk-root .pk-app-head .hd{display:flex;flex-direction:column;flex:1;min-width:0} #pk-root .pk-app-head .nm{font-family:'Bricolage','Bricolage Grotesque',system-ui,sans-serif;font-variation-settings:"wght" 720;font-size:18px;color:#0A3F2F;line-height:1.1} #pk-root .pk-app-head .br{font-size:11.5px;color:#6C8479;font-weight:600} #pk-root .pk-app-head .ok{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#12b56f;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center} #pk-root .pk-app-rows{display:flex;flex-direction:column;gap:7px;margin-bottom:12px} #pk-root .pk-app-rows .r{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;background:#f4faf5;border-radius:10px;padding:8px 10px} #pk-root .pk-app-rows .k{color:#3E5A4E;font-weight:600;white-space:nowrap} #pk-root .pk-app-rows .v{color:#0A3F2F;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #pk-root .pk-app-rows .v.good{color:#0A6B42} #pk-root .pk-app-qr2{width:74px;height:74px;margin:0 auto;padding:6px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(21,53,42,.08)} #pk-root .pk-app-qr2 svg{width:100%;height:100%} #pk-root .pk-app-chip{position:absolute;z-index:6;font-size:12px;font-weight:700;color:#0A3F2F;background:#fff;border-radius:12px;padding:9px 13px;box-shadow:0 16px 34px -16px rgba(0,0,0,.5);white-space:nowrap} #pk-root .pk-app-chip.ch1{top:8%;right:2%;color:#0A6B42} #pk-root .pk-app-chip.ch2{bottom:11%;left:-2%} /* reveal stagger uvnitř panelu (řídí .pk-app.in z .rv observeru) */ #pk-root .pk-app-feats li,#pk-root .pk-app-cta,#pk-root .pk-app-chip{opacity:1} @media(prefers-reduced-motion:no-preference){ #pk-root .pk-app-feats li,#pk-root .pk-app-cta{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease} #pk-root .pk-app.in .pk-app-feats li,#pk-root .pk-app.in .pk-app-cta{opacity:1;transform:none} #pk-root .pk-app.in .pk-app-feats li:nth-child(1){transition-delay:.12s} #pk-root .pk-app.in .pk-app-feats li:nth-child(2){transition-delay:.22s} #pk-root .pk-app.in .pk-app-feats li:nth-child(3){transition-delay:.32s} #pk-root .pk-app.in .pk-app-feats li:nth-child(4){transition-delay:.42s} #pk-root .pk-app.in .pk-app-cta{transition-delay:.52s} #pk-root .pk-app-chip{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s ease,transform .5s ease} #pk-root .pk-app.in .pk-app-chip.ch1{opacity:1;transform:none;transition-delay:.7s} #pk-root .pk-app.in .pk-app-chip.ch2{opacity:1;transform:none;transition-delay:.9s} #pk-root .pk-app-phone{animation:pk-appFloat 6.5s ease-in-out infinite} #pk-root .pk-app-glow{animation:pk-appGlow 7s ease-in-out infinite} #pk-root .pk-app-scan{animation:pk-appScan 3.4s cubic-bezier(.5,0,.5,1) infinite} #pk-root .pk-app-topbar .live::before{animation:pk-appBlink 1.8s ease-in-out infinite} #pk-root .pk-app-btn .sh{animation:pk-appShine 4.2s ease-in-out 1.2s infinite} #pk-root .pk-app-qr2{animation:pk-appQr 3.4s ease-in-out infinite} #pk-root .pk-app-blob.b1{animation:pk-appDrift 16s ease-in-out infinite} #pk-root .pk-app-blob.b2{animation:pk-appDrift 20s ease-in-out infinite reverse} #pk-root .pk-app-paw{animation:pk-appPaw 9s ease-in-out infinite} #pk-root .pk-app-paw.pw2{animation-duration:11s;animation-delay:.6s} #pk-root .pk-app-paw.pw3{animation-duration:8s;animation-delay:1.1s} #pk-root .pk-app-paw.pw4{animation-duration:12s;animation-delay:.3s} #pk-root .pk-app-chip.ch1{animation:pk-appFloat 5s ease-in-out .8s infinite} #pk-root .pk-app-chip.ch2{animation:pk-appFloat 6s ease-in-out 1.1s infinite} } @keyframes pk-appFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @keyframes pk-appGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} @keyframes pk-appScan{0%{top:-40px;opacity:0}12%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}} @keyframes pk-appBlink{0%,100%{box-shadow:0 0 0 0 rgba(18,181,111,.55)}50%{box-shadow:0 0 0 5px rgba(18,181,111,0)}} @keyframes pk-appShine{0%{left:-60%}18%,100%{left:130%}} @keyframes pk-appQr{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes pk-appDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-22px)}} @keyframes pk-appPaw{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}} @media(max-width:980px){ #pk-root .pk-app{padding:38px 26px} #pk-root .pk-app .pk-app-in{grid-template-columns:1fr;gap:34px} #pk-root .pk-app-copy h2{font-size:34px} #pk-root .pk-app-vis{order:-1;min-height:400px} } @media(max-width:430px){ #pk-root .pk-app{padding:30px 20px} #pk-root .pk-app-copy h2{font-size:29px} #pk-root .pk-app-chip.ch2{left:0} #pk-root .pk-app-cta{gap:16px} } /* v57: proklik na kategorii vpravo nahoře v sekci Vybavení (#vybaveni) */ /* v168: „Zobrazit celý sortiment" (i varianta „Zobrazit celou kategorii") – zelený rámeček místo šedého, ať je vidět, že je to akce. Ostatní .btn-ghost na webu zůstávají šedé. */ #pk-root #vybaveni .pk-eq-catlink{flex:0 0 auto;white-space:nowrap;align-self:flex-end; border-color:var(--coral);color:var(--coral-dk)} #pk-root #vybaveni .pk-eq-catlink:hover{border-color:var(--coral-dk);color:var(--coral-dk); background:rgba(16,185,129,.08)} #pk-root #vybaveni .pk-eq-catlink svg{transition:transform .16s ease} #pk-root #vybaveni .pk-eq-catlink:hover svg{transform:translateX(3px)} @media(max-width:720px){#pk-root #vybaveni .pk-eq-catlink{align-self:flex-start;margin-top:4px}} /* ===================================================================== NAV mega-dropdown pod „Vybavení" (kategorie s fotkami) · v68 ===================================================================== */ #pk-root .menu-drop{position:relative;display:inline-flex} #pk-root .menu-drop-t{display:inline-flex;align-items:center;gap:5px} #pk-root .menu-caret{transition:transform .2s ease;opacity:.7} #pk-root .menu-drop:hover .menu-caret,#pk-root .menu-drop:focus-within .menu-caret{transform:rotate(180deg);opacity:1} #pk-root .menu-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);padding-top:14px;z-index:60;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .22s cubic-bezier(.22,1,.36,1);max-width:calc(100vw - 32px)} #pk-root .menu-drop:hover .menu-mega,#pk-root .menu-drop:focus-within .menu-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} #pk-root .menu-mega .mm-inner{display:grid;grid-template-columns:repeat(3,minmax(0,224px));width:min(672px,calc(100vw - 64px));gap:12px;background:#fff;border:1px solid var(--line2);border-radius:22px;box-shadow:0 34px 66px -26px rgba(21,53,42,.55);padding:14px} #pk-root .mm-card{display:flex;flex-direction:column;border-radius:15px;overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--line2);background:var(--paper);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} #pk-root .mm-card:hover{transform:translateY(-3px);border-color:rgba(15,138,87,.45);box-shadow:0 20px 36px -18px rgba(21,53,42,.5)} #pk-root .mm-im{display:block;height:118px;background:radial-gradient(60% 60% at 50% 45%,#f2f9f0,#e4efe2);overflow:hidden} #pk-root .mm-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} #pk-root .mm-card:hover .mm-im img{transform:scale(1.05)} #pk-root .mm-tx{display:flex;flex-direction:column;gap:3px;padding:11px 13px 13px} #pk-root .mm-tx b{font-family:'Bricolage','Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;font-variation-settings:"wght" 680;font-size:15px;line-height:1.1;color:var(--ink)} #pk-root .mm-tx span{font-size:12px;color:var(--ink3);line-height:1.35} @media(prefers-reduced-motion:reduce){#pk-root .menu-mega{transition:opacity .15s ease}#pk-root .menu-mega,#pk-root .menu-drop:hover .menu-mega{transform:translateX(-50%)}} /* ===== 4×4 dávkování sortimentu „Vše pro spokojený…" + „Zobrazit více" ===== */ #pk-root .grid4 .pcard.pk-eq-hidden{display:none!important} #pk-root .grid4 .pcard.pk-eq-rv{opacity:0;transform:translateY(16px)} @media(prefers-reduced-motion:no-preference){#pk-root .grid4 .pcard.pk-eq-rv{transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}} #pk-root .grid4 .pcard.pk-eq-rv.pk-eq-in{opacity:1;transform:none} /* reveal end-state má transform:none (1,4,0) → musíme obnovit hover-lift s vyšší specificitou (1,5,0) */ #pk-root .grid4 .pcard.pk-eq-rv.pk-eq-in:hover{transform:translateY(-5px)} /* reduced-motion: základ .pcard{transition:.22s} není zagejtovaný → tady ho pro reveal vypneme, ať karty naskočí ihned */ @media(prefers-reduced-motion:reduce){#pk-root .grid4 .pcard.pk-eq-rv{transition:none}} #pk-root .pk-eq-foot{display:flex;justify-content:center;margin-top:30px} #pk-root .pk-eq-more{position:relative;overflow:hidden} #pk-root .pk-eq-more .pk-eq-n{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 8px;border-radius:99px;background:rgba(255,255,255,.24);font-size:12.5px;font-weight:800;line-height:1} #pk-root .pk-eq-more::after{content:"";display:block;position:absolute;top:-40%;left:0;width:38%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none} @media(prefers-reduced-motion:no-preference){#pk-root .pk-eq-more::after{animation:pk-eq-shine 3.6s ease-in-out 1.2s infinite}} @keyframes pk-eq-shine{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(320%) skewX(-18deg)}} /* ===== Lukáš: mobil – čisté hamburger menu. Desktopový mega (fotky kategorií, absolutní 3×224px) se překrýval s obsahem a uřezával. Na mobilu z „Produkty" uděláme TEXTOVÝ accordion: klik rozbalí svislý seznam kategorií (jen názvy, bez obrázků), nic nepřekrývá. ===== */ @media(max-width:980px){ #pk-root .nav.pk-menu-open .menu-drop{display:block;width:100%;position:static} #pk-root .nav.pk-menu-open .menu-drop-t{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;box-sizing:border-box} #pk-root .nav.pk-menu-open .menu-caret{display:inline-block;flex:0 0 auto;opacity:.55;transition:transform .22s ease} #pk-root .nav.pk-menu-open .menu-drop.pk-sub-open .menu-caret{transform:rotate(180deg);opacity:1} /* mega → vnitřní accordion: žádný absolutní overlay, žádné fotky */ #pk-root .nav.pk-menu-open .menu-mega{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;padding:0!important;z-index:auto!important;max-height:0;overflow:hidden;transition:max-height .26s ease} #pk-root .nav.pk-menu-open .menu-drop.pk-sub-open .menu-mega{max-height:340px} #pk-root .nav.pk-menu-open .menu-mega .mm-inner{display:block;grid-template-columns:none;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 6px} #pk-root .nav.pk-menu-open .menu-mega .mm-card{display:block;border:0;background:transparent;border-radius:0;overflow:visible} #pk-root .nav.pk-menu-open .menu-mega .mm-card:hover{transform:none;box-shadow:none} #pk-root .nav.pk-menu-open .menu-mega .mm-im{display:none} #pk-root .nav.pk-menu-open .menu-mega .mm-tx{gap:0;padding:12px 2px 12px 22px;border-bottom:1px solid var(--line2)} #pk-root .nav.pk-menu-open .menu-mega .mm-card:last-child .mm-tx{border-bottom:0} #pk-root .nav.pk-menu-open .menu-mega .mm-tx b{font-weight:600;font-size:15px;color:var(--ink)} #pk-root .nav.pk-menu-open .menu-mega .mm-tx span{display:none} } /* Lukáš: homepage je moc dlouhá → produktová mřížka i na telefonu 2 sloupce (místo 1) = kratší stránka */ @media(max-width:560px){#pk-root .grid4{grid-template-columns:repeat(2,1fr);gap:12px}} /* ========================================================================== v185 — dialog cookies (Shoptet Colorbox) na mobilu -------------------------------------------------------------------------- PROBLÉM: #colorbox je position:absolute a Colorbox mu `top` dopočítává JS-em podle scrollu. Obsah tohohle dialogu je ~2800 px vysoký (viewport 812) a při nešťastném souběhu (načítání stránky, přepočet výšky) se dokázal vykreslit mimo obraz. Uživatel pak viděl jen ztmavení (#cboxOverlay je fixed přes celou obrazovku) a nešlo to zavřít — křížek byl mimo viewport, pomohl až refresh. ŘEŠENÍ: dialog ukotvíme napevno doprostřed viewportu a rolujeme obsah UVNITŘ něj, ne stránkou. Tím přestane na poloze počítané JS-em vůbec záležet. Cílíme přes :has(.cookiesDialog), aby to netrefilo galerii fotek u produktu — ta Colorbox používá taky. Staré prohlížeče :has() neumí a pravidlo prostě ignorují → chování zůstane jako dosud, nic se nerozbije. ========================================================================== */ @media(max-width:767px){ #colorbox:has(.cookiesDialog){ position:fixed!important; top:50%!important;left:50%!important;right:auto!important;bottom:auto!important; transform:translate(-50%,-50%); width:min(94vw,420px)!important; height:auto!important; max-height:88vh!important; max-height:88svh!important; } /* #cboxWrapper je nativně position:absolute → rodiči (#colorbox) nedává žádnou výšku a ten by zkolaboval na 0 px. Musí být relative, jinak je modal neviditelný. */ #colorbox:has(.cookiesDialog) #cboxWrapper{ position:relative!important; width:100%!important;height:auto!important; max-height:88vh!important; max-height:88svh!important; } #colorbox:has(.cookiesDialog) #cboxContent{ width:100%!important;height:auto!important; max-height:88vh!important; max-height:88svh!important; } #colorbox:has(.cookiesDialog) #cboxLoadedContent{ width:100%!important;height:auto!important; max-height:calc(88vh - 10px)!important; max-height:calc(88svh - 10px)!important; overflow-y:auto!important;-webkit-overflow-scrolling:touch; } /* křížek musí zůstat v dosahu i když se obsah uvnitř roluje */ #colorbox:has(.cookiesDialog) #cboxClose{position:absolute!important;z-index:3} } /* v187 — „Všechny produkty" v mega-menu (proklik na plný katalog /petkarta/). Na desktopu je to pruh přes celou šířku pod třemi dlaždicemi, na mobilu (kde se z dlaždic stává prostý seznam) další řádek, jen zvýrazněný. */ #pk-root .mm-all{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px; padding:11px 14px;border-radius:12px;background:rgba(15,138,87,.09);color:var(--coral-dk); font-weight:750;font-size:14px;text-decoration:none;transition:background .16s ease} #pk-root .mm-all:hover{background:rgba(15,138,87,.16)} #pk-root .mm-all svg{flex:0 0 auto} @media(max-width:980px){ #pk-root .nav.pk-menu-open .menu-mega .mm-all{justify-content:flex-start;padding:12px 2px 12px 22px; border-radius:0;background:none;font-size:15px;font-weight:600;color:var(--coral-dk)} } /* v190 ─── jedna mřížka pro celou landing stránku (logo ukotvené s nadpisem) ─── Šéf chtěl logo v menu srovnané s nadpisem „Vše pro vašeho…". Nesedělo, protože se na stránce potkávaly DVĚ mřížky: naše shopová hlavička/patička jede na `.wrap` (--maxw 1180px), kolegův obsah na `.page-width` (max 1400px). Změřeno živě při 1720px: logo 287, nadpis hero 189, sekce pod ním 153 — tři různé levé hrany na jedné stránce. Na landing stránkách proto `.wrap` přepneme na mřížku obsahu. Je to bezpečné: na /, /aplikace/ i /funkce-aplikace/ jsou v #pk-root právě DVA `.wrap` — header.nav a footer.ftr (ověřeno v DOMu živého webu). Shop má vlastních 20 `.wrap` a --maxw:1180px zůstává nedotčené; tam už nav i obsah spolu sedí (změřeno na /obchod/: logo 287 = nadpis hero 287 = logo v patičce 287). Breakpointy kopírují .page-width / .funkce-width z petkarta-applanding.css 1:1, ať se rail nerozejde na tabletu a mobilu. Selektory jsou vzájemně vylučující (`:not(.pk-funkce)`), takže nezávisí na pořadí v souboru. Druhá půlka téhle opravy je v build-applanding-css.py (OVERRIDES): `.hero__inner` mělo vlastní vodorovný padding 36px. Dokud šířka nebyla zastropovaná, rozdíl nebyl vidět (inset 96 vs 100px), ale nad stropem 1400px odsadil nadpis hero o 36px dovnitř proti sekcím pod ním. */ body.pk-applanding:not(.pk-funkce) #pk-root .wrap{ width:calc(100% - 192px);max-width:1400px;padding-left:0;padding-right:0} @media(max-width:1100px){body.pk-applanding:not(.pk-funkce) #pk-root .wrap{width:min(940px,calc(100% - 56px))}} @media(max-width:800px){body.pk-applanding:not(.pk-funkce) #pk-root .wrap{width:min(680px,calc(100% - 40px))}} @media(max-width:520px){body.pk-applanding:not(.pk-funkce) #pk-root .wrap{width:min(100% - 32px,430px)}} /* /funkce-aplikace/ má vlastní, užší rail (.funkce-width, max 1080px) */ body.pk-funkce #pk-root .wrap{width:calc(100% - 192px);max-width:1080px;padding-left:0;padding-right:0} @media(max-width:800px){body.pk-funkce #pk-root .wrap{width:calc(100% - 32px);max-width:100%}}