/* PLEVIX v72 – dotykové ciele minimálne 44 x 44 px na mobile. Zásada: rozloženie stránky sa nesmie posunúť. (A) Prvky v bežnom toku stránky dostanú iba priehľadný ::after prekryv. Vizuál, výška ani šírka prvku sa nemenia, rastie len klikacia plocha. (B) min-height / width sa použije len tam, kde je prvok vnútri panela s position:fixed (VIXI panel, popover účtu, cookie lišta a modal). Tam rast neposunie obsah stránky, zmení sa iba pomer plôch v paneli. */ @media (max-width:768px){ /* ---------- (A) Priehľadný prekryv ---------- */ /* Prekryv potrebuje pozicovaného rodiča. */ .hero-price a, .footer-links a, .tool-filter button, .suite-status-card a.status-action, .addon-card .btn, .news-card h3 a, .lp-card b a, .pc-cookie-copy a, .pc-switch{position:relative} /* Inline odkazy nemajú spoľahlivý obsahujúci blok pre absolútny prekryv. h3 > a je jediné dieťa bloku, preto display:block nemení rozloženie. Odkaz v cookie lište je uprostred vety, preto inline-block. */ .news-card h3 a, .lp-card b a{display:block} .pc-cookie-copy a{display:inline-block} /* width/height 100 % + min-width/min-height 44px znamená, že prekryv rastie len v tej osi, v ktorej je prvok menší ako 44 px. */ .hero-price a::after, .footer-links a::after, .tool-filter button::after, .suite-status-card a.status-action::after, .addon-card .btn::after, .news-card h3 a::after, .lp-card b a::after, .pc-cookie-copy a::after, .pc-switch::after{ content:""; position:absolute; left:50%; top:50%; width:100%; height:100%; min-width:44px; min-height:44px; transform:translate(-50%,-50%); background:transparent; } /* Prekryv je vyšší ako samotný riadok odkazu. Pri zalomení do viacerých riadkov by sa prekryvy susedných riadkov prekryli, preto väčšia medzera medzi riadkami. Stĺpcová medzera zostáva pôvodná. */ .footer-links{row-gap:32px} /* odkaz ~12 px + prekryv 44 px => 16 px nad a pod */ .tool-filter{row-gap:10px} /* chip ~34 px + prekryv 44 px => 5 px nad a pod */ /* ---------- (B) Prvky vo fixed paneloch ---------- */ /* VIXI panel: position:fixed s pevnou výškou (grid auto 1fr auto auto). Zväčšenie ovládacích prvkov iba zmenší plochu správ, stránka sa neposunie. Druhý selektor je poistka proti štýlu, ktorý do vkladá vixi-personalization.js až po načítaní tohto súboru. */ .vixi-head button, .vixi-head .px-vixi-settings-btn{width:44px;height:44px} .vixi-quick button{min-height:44px} .vixi-form{grid-template-columns:1fr 44px} .vixi-form textarea{min-height:44px} .vixi-form button{min-height:44px} /* Popover účtu je na mobile position:fixed (index.html, @media max-width:680px). */ .account-pop-actions a, .account-pop-actions button{min-height:44px} .account-signout{display:flex;align-items:center;justify-content:center;min-height:44px} /* Cookie lišta aj modal sú position:fixed. */ .pc-btn{min-height:44px} .pc-cookie-close{width:44px;height:44px} } /* ---------- Plávajúca výzva na mobile (v72) ---------- Zobrazí sa až po prejdení úvodu a skryje sa, keď je cenník na obrazovke – vtedy už je tlačidlo v samotnom cenníku a lišta by len prekážala. z-index 900 = pod VIXI (1000) aj pod cookie lištou (100000). Spodný okraj je nad VIXI tlačidlom, aby sa neprekrývali. */ .px-sticky-cta{ position:fixed;left:12px;right:78px;bottom:22px;z-index:900; display:none;align-items:center;gap:12px; padding:10px 12px 10px 16px;border-radius:14px; background:#111a2f;border:1px solid #3a2f7a; box-shadow:0 14px 40px rgba(8,12,24,.42); opacity:0;transform:translateY(12px);transition:opacity .18s,transform .18s; } .px-sticky-cta.show{opacity:1;transform:none} .px-sticky-cta-copy{display:flex;flex-direction:column;line-height:1.3;min-width:0} .px-sticky-cta-copy b{color:#fff;font-size:12px} .px-sticky-cta-copy small{color:#93a1b8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .px-sticky-cta a{ margin-left:auto;flex:none;display:flex;align-items:center; min-height:44px;padding:0 16px;border-radius:11px; background:linear-gradient(135deg,#5548e8,#7c3aed); color:#fff;font-weight:800;font-size:12px;text-decoration:none;white-space:nowrap; } @media (max-width:768px){ .px-sticky-cta{display:flex} } @media (prefers-reduced-motion:reduce){ .px-sticky-cta{transition:none} } /* --------------------------------------------------------------------------- kontrast-posledne-slovo Tento subor je v hlavicke posledny, takze tieto pravidla uz nic neprebije. Su tu iba prvky, ktore sa nedali opravit inde kvoli poradiu a plosnym !important pravidlam. Vsetky sedia na TMAVYCH paneloch, ktore su tmave v oboch temach - farba textu preto nesmie zavisiet od zvolenej temy. */ /* Plosne pravidlo ma specificitu 0,1,3 (html + :not([attr]) + body + :is(small)). Preto tu musi byt aspon 0,2,2 - samotne "html body .trieda" (0,1,2) nestaci. */ html:not([data-plevix-theme="dark"]) body .tool-filter-hint, html:not([data-plevix-theme="dark"]) body .tool-filter-label, html[data-plevix-theme="dark"] body .tool-filter-hint, html[data-plevix-theme="dark"] body .tool-filter-label{color:#aeb8cb!important} html:not([data-plevix-theme="dark"]) body .platforms-section .platform-card p, html:not([data-plevix-theme="dark"]) body .platforms-section .platform-card small, html[data-plevix-theme="dark"] body .platforms-section .platform-card p{color:#aeb8cb!important} /* POZOR: .roadmap-section na HLAVNEJ stranke ma SVETLE pozadie, kym .hero na roadmap.html je tmavy. Preto sa nesmie pouzit spolocny selektor - svetlofialova na svetlom pozadi dava pomer 1,75. */ html:not([data-plevix-theme="dark"]) body .epostar-trust .eyebrow, html[data-plevix-theme="dark"] body .epostar-trust .eyebrow{color:#c4b5fd!important} /* --------------------------------------------------------------------------- pomoc-dotykove-ciele — selektory overene meranim na 360 px. POZOR na falosne nalezy: vo .faq-search ma len 18 px, ale jeho obal label.faq-search ma 45 px a je cely klikaci – to netreba menit. --------------------------------------------------------------------------- */ @media (max-width:768px){ /* Skutocne kontajnery zistene meranim (moje prve odhady boli nespravne): */ .faq-answer button{min-height:40px!important} /* 164x, bolo 32 px */ .faq-categories button{min-height:40px} /* 28x, bolo 34 px */ .vixi-prompts button{min-height:40px} /* 3x, bolo 29 px */ .guide-filters button{min-height:40px} .guide-card footer button{min-height:40px} .nav-account{min-height:40px;display:inline-flex;align-items:center} /* Inline odkazy vo vetach – iba priehladny prekryv, aby sa text nerozhodil. */ .support-note a, .support-side p a, .pricing-contact-legal a, .legal-nav-links a, .legal-nav-links button, .legal-footer a, .blog-crumbs a{position:relative} .support-note a::after, .support-side p a::after, .pricing-contact-legal a::after, .legal-nav-links a::after, .legal-nav-links button::after, .legal-footer a::after, .blog-crumbs a::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;height:100%;min-width:44px;min-height:44px;background:transparent; } /* Prekryv je vyssi nez riadok textu – vacsie riadkovanie zabrani tomu, aby prekryv jedneho odkazu zachytil klik urceny susednemu riadku. */ .support-note,.support-side p,.pricing-contact-legal,.blog-crumbs{line-height:2.1} .legal-nav-links,.legal-footer span{row-gap:20px} } /* v74: samostatny kategoriovy orbit uz neexistuje - kategorie su priamo v hlavnom orbite, ktory je tmavy v oboch temach. Plosne svetle pravidlo by mu inak dalo sedy text, preto vynimka zostava, len na novych triedach. */ html:not([data-plevix-theme="dark"]) body .suite-web .product-node .node-copy small, html[data-plevix-theme="dark"] body .suite-web .product-node .node-copy small{color:#9aa6ba!important} html:not([data-plevix-theme="dark"]) body .suite-web .product-node .node-copy b, html[data-plevix-theme="dark"] body .suite-web .product-node .node-copy b{color:#f1f5f9!important} html:not([data-plevix-theme="dark"]) body :is(.teren-badge,.sun-soon){color:#c4b5fd!important} html:not([data-plevix-theme="dark"]) body :is(.teren-live,.sun-live){color:#34d399!important} html:not([data-plevix-theme="dark"]) body .teren-premium :is(li,p){color:#aeb8ca!important} html:not([data-plevix-theme="dark"]) body .teren-premium :is(h3,li b){color:#fff!important} html:not([data-plevix-theme="dark"]) body .teren-domain :is(li,summary b){color:#aeb8ca!important} html:not([data-plevix-theme="dark"]) body .teren-domain summary b{color:#fff!important} /* Texty priamo na podklade stranky – v svetlej teme musia byt tmave. */ html:not([data-plevix-theme="dark"]) body .teren-domains-title{color:#172033!important} html:not([data-plevix-theme="dark"]) body .teren-plans-note{color:#4b5768!important} html:not([data-plevix-theme="dark"]) body .teren-plans-note :is(b,a){color:#4338ca!important} html:not([data-plevix-theme="dark"]) body .kat-hint{color:#4b5768!important} html[data-plevix-theme="dark"] body .teren-domains-title{color:#e8edf7!important} html[data-plevix-theme="dark"] body .teren-plans-note{color:#9aa6ba!important} html[data-plevix-theme="dark"] body .teren-plans-note :is(b,a){color:#c4b5fd!important} /* Sipka v bielom tlacidle "Otvorit VIXI" zdedila bielu farbu z pravidla pre tmave sekcie a stala sa neviditelnou (kontrast 1,00). Tlacidlo ma vlastne pozadie, takze mu farbu textu nastavime spat. */ html:not([hidden]) body a.vixi-open[href], html:not([hidden]) body a.vixi-open[href] :is(b,strong){color:#3d347e!important} /* --- v74-dotykove-ciele ----------------------------------------------------- Na mobile sa navigačné odkazy vysoké 26 px trafia zle. Zväčšujeme LEN navigáciu, mapu v päte a filtre — odkazy vnútri odsekov nie, tam by sa dotykové plochy susedných odkazov prekrývali a trafili by ste iný. */ @media(max-width:760px){ .legal-nav-links a,.footer-col a{display:inline-flex;align-items:center;min-height:40px} .footer-col{gap:2px} #toolFilter button{min-height:44px} .pb-strip a,.teren-domain-link{min-height:44px} .legal-footer a{display:inline-flex;align-items:center;min-height:40px} } /* Plávajúca výzva sa na mobile zapína pravidlom `.px-sticky-cta{display:flex}` v media dotaze. To ale prebíja aj atribút `hidden`, ktorým ju skript skrýva: lišta ostávala v stránke stále — len priehľadná (`opacity:0`). Priehľadný prvok však ďalej chytá klepnutia, takže neviditeľná lišta brala klepnutia tlačidlám v úvode. Preto obe poistky: keď je skrytá, nech naozaj zmizne, a kým sa neobjaví, nech neberie dotyk. */ .px-sticky-cta[hidden]{display:none!important} .px-sticky-cta:not(.show){pointer-events:none}