/* ============================================================
EM CARD – zdieľaný dizajnový systém (naprieč všetkými CSS balíkmi)
Načíta sa ako POSLEDNÝ stylesheet na každej stránke. Selektory
používajú ":not(#_):not(#_)" zámerne – ide o bežný CSS trik na
zvýšenie špecifickosti (ekvivalent ID), aby tieto pravidlá spoľahlivo
vyhrali nad hlboko vnorenými kontextovými pravidlami v starších
18 CSS balíkoch (napr. "body.provider-site .provider-actions .btn"),
bez toho, aby sme museli prepisovať každý jeden z nich ručne.
============================================================ */
/* --- Tlačidlá: jednotný tvar (radius, výška, padding, hrúbka písma) --- */
.btn:not(#_):not(#_),
.about-btn:not(#_):not(#_),
.psel-btn-primary:not(#_):not(#_),
.btn-qp-primary:not(#_):not(#_),
.btn-qp-outline:not(#_):not(#_){
min-height:48px!important;
padding:0 22px!important;
border-radius:8px!important;
font-weight:800!important;
font-size:14px!important;
letter-spacing:0!important;
transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.btn:hover:not(#_):not(#_),
.about-btn:hover:not(#_):not(#_),
.psel-btn-primary:hover:not(#_):not(#_),
.btn-qp-primary:hover:not(#_):not(#_),
.btn-qp-outline:hover:not(#_):not(#_){
transform:translateY(-2px)!important;
}
/* --- Hero nadpisy: jednotná škála (56–64px desktop) naprieč všetkými
variantmi hero sekcií, ktoré sa v týchto CSS balíkoch používajú --- */
.provider-hero h1:not(#_):not(#_),
.provider-copy h1:not(#_):not(#_),
.qp-hero h1:not(#_):not(#_),
.qp-hero-copy h1:not(#_):not(#_),
.operator-hero h1:not(#_):not(#_),
.choice-hero h1:not(#_):not(#_),
.detail-hero h1:not(#_):not(#_),
.article-hero h1:not(#_):not(#_),
.segment-hero h1:not(#_):not(#_),
.seg-hero h1:not(#_):not(#_),
.seg-copy h1:not(#_):not(#_),
.psel-hero h1:not(#_):not(#_),
.psel-hero-inner h1:not(#_):not(#_),
.subpage-hero h1:not(#_):not(#_),
.solution-hero-dark h1:not(#_):not(#_),
.payment-hero h1:not(#_):not(#_),
.pay-copy h1:not(#_):not(#_),
.app-hero-copy h1:not(#_):not(#_),
.user-hero-copy-v120 h1:not(#_):not(#_),
.simple-title h1:not(#_):not(#_),
.v64-hero h1:not(#_):not(#_),
.hero h1:not(#_):not(#_),
.about-company-hero h1:not(#_):not(#_),
.references-hero h1:not(#_):not(#_),
.home-hero h1:not(#_):not(#_){
font-size:clamp(30px,4vw,45px)!important;
line-height:1.1!important;
letter-spacing:-1.2px!important;
}
/* Homepage H1: samostatné doladenie na mobile/tablet (nahlásené ako
typografická chyba – na 390px mal nadpis 34px, na 768px len 30px,
pretože home-v120.css mal media-query pravidlo pre ≤640px, ktoré
ho vracalo na pevných 34px, nezávisle od plynulého zväčšovania nad
týmto breakpointom). Táto krivka rastie plynulo: ~35px pri 390px,
~39px pri 768px, strop 45px (rovnaký ako všade inde) okolo 1330px. */
.home-hero h1:not(#_):not(#_){
font-size:clamp(34px,31px + 1.05vw,45px)!important;
}
/* --- Hlavné nadpisy sekcií (H2): jednotná škála 32–36px --- */
.about-company-head h2:not(#_):not(#_),
.references-head h2:not(#_):not(#_),
.references-heading h2:not(#_):not(#_),
.section-head h2:not(#_):not(#_),
.provider-head h2:not(#_):not(#_),
.provider-references-head-v119 h2:not(#_):not(#_),
.detail-head h2:not(#_):not(#_),
.home-section-heading h2:not(#_):not(#_),
.psel-intro h2:not(#_):not(#_),
.psel-intro-text h2:not(#_):not(#_),
.qp-cfg-head h2:not(#_):not(#_),
.qp-contact-head h2:not(#_):not(#_),
.qp-order-head h2:not(#_):not(#_),
.qp-refsec-head h2:not(#_):not(#_),
.qp-stats-head h2:not(#_):not(#_),
.segment-gallery-head h2:not(#_):not(#_),
.solutions-heading-v118 h2:not(#_):not(#_),
.coverage-intro-v118 h2:not(#_):not(#_),
.v64-head h2:not(#_):not(#_),
.reach-copy h2:not(#_):not(#_),
.app-hero-copy h2:not(#_):not(#_),
.app-section-title h2:not(#_):not(#_),
.app-download-panel h2:not(#_):not(#_),
.contact-panel h2:not(#_):not(#_),
.form-panel h2:not(#_):not(#_){
font-size:clamp(26px,2.6vw,36px)!important;
line-height:1.15!important;
letter-spacing:-.8px!important;
}
/* --- Hero sekcie: jednotná výška naprieč všetkými typmi stránok --- */
.provider-hero:not(#_):not(#_),
.psel-hero:not(#_):not(#_),
.qp-hero:not(#_):not(#_),
.operator-hero:not(#_):not(#_),
.choice-hero:not(#_):not(#_),
.detail-hero:not(#_):not(#_),
.article-hero:not(#_):not(#_),
.segment-hero:not(#_):not(#_),
.seg-hero:not(#_):not(#_),
.solution-hero-dark:not(#_):not(#_),
.payment-hero:not(#_):not(#_),
.app-page-hero:not(#_):not(#_),
.wertyz-entry:not(#_):not(#_),
.user-hero-v120:not(#_):not(#_),
.v64-hero:not(#_):not(#_),
.hero:not(#_):not(#_),
.about-company-hero:not(#_):not(#_),
.references-hero:not(#_):not(#_),
.home-hero:not(#_):not(#_){
min-height:690px!important;
display:flex!important;
align-items:center!important;
box-sizing:border-box!important;
}
/* .subpage-hero (FAQ, Podpora) je zámerne kratšia než ostatné hero typy
(krátky obsah – kicker/H1/popis), preto má vlastnú, nižšiu jednotnú
výšku namiesto zdieľaných 690px vyššie. */
.subpage-hero:not(#_):not(#_){
min-height:400px!important;
display:flex!important;
align-items:center!important;
box-sizing:border-box!important;
}
/* .qp-hero--full: obrázok je position:absolute a vypĺňa CELÚ výšku
hero sekcie (top:0;height:100%). Aby to fungovalo, jeho najbližší
pozicovaný predok (.qp-hero-grid) musí sám vyplniť celú výšku – inak
ho vyššie pravidlo (.qp-hero{align-items:center}) vertikálne
vycentruje a nad aj pod fotkou ostane prázdny pás. */
.qp-hero--full .qp-hero-grid:not(#_):not(#_){
align-self:stretch!important;
}
/* Bezpečnostná poistka: obrázok v .psel-hero (stĺpec obrázka vedľa textu,
normálny , takže naň nesadne ".provider-site .mobile-panel a{color:...}"
(cieli len na ) a zdedí svetlosivú ".mobile-panel .mobile-sub{color:
#d8dfdc}" z pôvodného tmavého panelu (package-b.css) – na bielom
panely pôsobí ako neaktívne/needá sa kliknúť. inherit ho zjednotí s
tmavou farbou ostatných položiek menu. */
body.provider-site .mobile-solutions-menu .mobile-sub:not(#_):not(#_){
border-bottom:1px solid rgba(255,255,255,.06)!important;
color:inherit!important;
}
body.provider-site .mobile-panel-cta:not(#_):not(#_){
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin-top:16px!important;
padding:15px 20px!important;
border-radius:12px!important;
background:linear-gradient(135deg,#f37016,#ff9248)!important;
color:#fff!important;
font-weight:800!important;
border-bottom:0!important;
box-shadow:0 12px 28px rgba(243,112,22,.3)!important;
}
/* --- Dotykové ciele (touch targets): min. 44x44px, hlavné ovládacie prvky
(burger menu) 48x48px. Rozsah max-width:900px = najširšia hranica,
pri ktorej sa burger tlačidlo v ktoromkoľvek balíku CSS reálne
zobrazuje (provider-site a user-area ho ukazujú do 900px, ostatné
do 760px) – zámerne nemeníme "display", iba rozmery/box-sizing,
aby sme na desktope nič nezobrazili navyše. --- */
@media(max-width:900px){
.mobile-toggle:not(#_):not(#_){
box-sizing:border-box!important;
min-width:48px!important;
min-height:48px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
}
/* Filtre v galérii referencií: 40px -> 44px */
.references-filters button:not(#_):not(#_){
min-height:44px!important;
box-sizing:border-box!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Šípky karuselu referencií na segment stránkach: 42x42 -> 44x44 */
.qp-ref-nav:not(#_):not(#_){
width:44px!important;
height:44px!important;
}
/* --- QRpark/QRcharge hero (.psel-hero): na mobile (<=760px) CSS balík
package-a.css/package-b.css natvrdo preraďuje obrázok pred text
cez "order:-1", hoci v DOM je text (logo, H1, popis, CTA) pred
obrázkom. Výsledok: návštevník po otvorení stránky najprv vidí
veľkú fotografiu a hlavná hodnota produktu je až pod ňou.
Zrušením "order" sa obnoví prirodzené poradie z DOM (text, potom
obrázok). --- */
@media(max-width:760px){
.psel-intro-media:not(#_):not(#_){order:0!important}
}
/* --- Produktový headline QRpark/QRcharge a ostatných .psel-hero stránok
(Klub, Kupón, Príspevky, Verejná doprava, Vstupenky): oproti
zdieľanému hero-h1 pravidlu vyššie (clamp 30-45px) je tu žiadaná
ešte výraznejšia škála, keďže ide o hlavný produktový claim a mal
by pôsobiť rovnako silno ako na homepage/Poskytovateľ/WERTYZ.
Cieľ: mobil ~30-34px, tablet ~34-40px, desktop ~42-52px. Pravidlo
je zámerne AŽ ZA zdieľaným pravidlom vyššie (rovnaká špecificita
cez :not(#_):not(#_), víťazí poradím v súbore), takže prepisuje
iba .psel-hero h1, nie ostatné hero typy zdieľajúce clamp(30,4vw,45). --- */
.psel-hero h1:not(#_):not(#_){
font-size:clamp(30px,25px + 1.7vw,52px)!important;
}
/* --- Produktové stránky (QRpark, QRcharge, Klub, Kupón, Príspevky,
Verejná doprava, Vstupenky) sú na mobile extrémne dlhé (10-11 tis. px,
cca 12-13 obrazoviek), lebo sekcia s riešeniami (.psel-grid, 8-11 kariet)
sa na mobile ukladá pod seba a sama zaberá ~3000px. Na mobile/tablete
(<=900px) preto meníme z vertikálneho stohu na horizontálny swipe-
carousel – karty ostávajú v plnej veľkosti/čitateľnosti, len sa
posúvajú vedľa seba. Zámerne iba do 900px (rovnaká hranica ako pri
ostatných mobil/tablet úpravách vyššie) – od 900px vyššie ostáva
pôvodná 2/3-stĺpcová mriežka bez zmeny. --- */
@media(max-width:900px){
.psel-grid:not(#_):not(#_){
display:flex!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
gap:16px!important;
}
.psel-grid:not(#_):not(#_)::-webkit-scrollbar{display:none!important}
.psel-card:not(#_):not(#_){
flex:0 0 100%!important;
scroll-snap-align:start!important;
}
}
/* --- Ovládanie carouselu riešení (.psel-grid) na mobile/tablete: keďže
karty teraz zaberajú celú šírku (žiadny "peek" ďalšej karty –
predchádzajúca verzia s odrezaným náhľadom pôsobila ako chyba),
potrebuje používateľ jasný spôsob, ako zistiť, že existujú ďalšie
segmenty, a ako sa k nim dostať bez spoliehania sa na náhodné swipe.
Pridáva sa lišta so šípkami a počítadlom "N / total" pod kartami. --- */
.psel-carousel{position:relative}
.psel-grid-controls{display:none}
@media(max-width:900px){
.psel-grid-controls{
display:flex!important;
align-items:center;
justify-content:center;
gap:16px;
margin-top:14px;
}
.psel-grid-nav{
width:44px;
height:44px;
min-width:44px;
min-height:44px;
border-radius:50%;
background:#fff;
border:1px solid #e3e9ec;
box-shadow:0 10px 24px rgba(21,36,36,.16);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
color:#152424;
transition:.2s ease;
}
.psel-grid-nav:hover{background:#0d7a6e;border-color:#0d7a6e;color:#fff}
.psel-grid-nav[disabled]{opacity:.3;cursor:default;pointer-events:none}
.psel-grid-nav svg{width:20px;height:20px}
.psel-grid-counter{font-size:13px;font-weight:800;color:#5c7080;min-width:52px;text-align:center}
}
/* Tablet (781-1024px): fotografia je tu už riešená ako pozadie na celú
výšku hero sekcie (rovnako ako desktop), ktorej výška je daná
zdieľaným pravidlom min-height:690px vyššie. Na tablete to zaberá
neprimerane veľkú časť prvej obrazovky – skracujeme o ~25% (690 -> 520px,
stále dostatok miesta pre obsah, ktorý reálne potrebuje cca 490-540px). */
@media(min-width:781px) and (max-width:1024px){
.qp-hero.qp-hero--full:not(#_):not(#_){min-height:520px!important}
.about-company-hero:not(#_):not(#_),
.references-hero:not(#_):not(#_){min-height:520px!important}
}
.references-filters{position:relative}
/* --- WERTYZ (body.user-area): CTA "Podpora" v hlavičke sa paradoxne
zobrazovala len do 640px (malý mobil) a znova od 1024px (desktop),
ale zmizla presne v pásme 641-900px (tablet), kde ostal viditeľný
iba burger. Príčina: pravidlo, ktoré ju schováva do 900px, má nižšiu
špecificitu než pravidlo pre .btn v hlavičke platné len do 640px,
takže v medzere 641-900px vyhráva schovávacie pravidlo. Podpora sa
teraz zobrazuje spolu s burgerom v celom rozsahu do 900px. --- */
@media(min-width:641px) and (max-width:900px){
body.user-area .nav .nav-support-desktop:not(#_):not(#_){
display:inline-flex!important;
padding:10px 13px!important;
}
}
/* --- Prepínač jazykov (pridané): "Podpora" v hlavičke na mobile/tablete
(≤900px) sa nahrádza vycentrovaným prepínačom jazykov, takže CTA
tlačidlo tam už nepotrebujeme – prepíname vyššie pravidlo späť na
display:none v celom rozsahu do 900px. --- */
@media(max-width:900px){
body.user-area .nav .nav-support-desktop:not(#_):not(#_){
display:none!important;
}
}
/* --- Homepage "Vyberte si, kto ste" karty: pôvodné WERTYZ logá (okrúhly
odznak s "W") boli pri redesigne nahradené generickými lineárnymi
ikonami (postavička / budova). Vraciame späť pôvodné logá – teal pre
"Používateľ", oranžové pre "Poskytovateľ" (rovnaké súbory, aké sa
používajú v WERTYZ navigácii a na pouzivatel.html). Farebná
štvorcová dlaždica sa už nepoužíva, keďže logo má vlastnú farbu. --- */
.home-audience-icon.home-audience-icon-logo{
background:none!important;
box-shadow:none!important;
width:48px!important;
height:48px!important;
padding:0!important;
border-radius:50%!important;
}
.home-audience-icon.home-audience-icon-logo img{
display:block;
width:100%;
height:100%;
object-fit:contain;
border-radius:50%;
}
/* --- GDPR checkbox v kontaktných formulároch (Dopyt, Helpdesk): pôvodne
cca 13px (predvolená veľkosť prehliadača) je na dotyk príliš malé.
Zväčšené na ~21px, s farbou podľa brandu (teal) a celý label
zostáva klikateľný (natívne cez na Dopyte, cez
vnorenie na Helpdesku – v oboch prípadoch
funguje kliknutie na text bez ďalšej JS logiky). --- */
/* --- Kicker/eyebrow štítky nad nadpismi (WERTYZ): zjednotenie typografie
s .section-eyebrow-v118 z poskytovateľskej časti (rovnaká hrúbka
písma a rozostup písmen, farebný akcent WERTYZ ostáva zachovaný). --- */
.kicker:not(#_):not(#_){
font-weight:700!important;
letter-spacing:1.35px!important;
}
/* --- Nadpisy kariet (H3) v sekcii "S čím potrebujete pomôcť?" (WERTYZ):
zjednotenie veľkosti s .solution-content-v118 h3 z poskytovateľskej
časti. --- */
.customer-card h3:not(#_):not(#_){
font-size:23px!important;
}
/* --- Zlúčenie stránok Domov + Aplikácia WERTYZ (4.9.2026): sekcia
"S čím potrebujete pomôcť?" má na zlúčenej stránke už len 3 karty
(odstránená sebaodkazujúca karta "Aplikácia WERTYZ"), takže namiesto
pôvodnej 2-stĺpcovej mriežky (pre 4 karty) potrebuje 3 stĺpce v jednom
riadku na desktope. --- */
/* --- Hero sekcia 1 (Zaplaťte službu...) na zlúčenej stránke Aplikácia
WERTYZ: po zlúčení s pôvodnou hero sekciou Aplikácie pôsobila
stránka príliš dlho pred prvým scrollom (dve veľké hero sekcie za
sebou) — znížená výška aj obrázok telefónu. --- */
.wertyz-entry.compact:not(#_):not(#_){
min-height:0!important;
align-items:flex-start!important;
}
.wertyz-entry.compact .user-hero-v120:not(#_):not(#_){
min-height:0!important;
align-items:flex-start!important;
}
.wertyz-entry.compact .user-phone-v120:not(#_):not(#_){
margin-left:auto!important;
width:min(52vw,270px)!important;
}
@media(max-width:760px){
.wertyz-entry.compact .user-hero-v120:not(#_):not(#_){
flex-direction:column!important;
align-items:center!important;
}
.wertyz-entry.compact .user-phone-v120:not(#_):not(#_){
margin:32px auto 0!important;
width:min(62vw,280px)!important;
order:6!important;
}
.wertyz-entry.compact .user-hero-copy-v120:not(#_):not(#_){
display:contents!important;
}
.wertyz-entry.compact .user-hero-eyebrow-v120:not(#_):not(#_){order:1!important}
.wertyz-entry.compact .user-hero-copy-v120 h1:not(#_):not(#_){order:2!important}
.wertyz-entry.compact .user-hero-copy-v120>p:not(#_):not(#_){order:3!important}
.wertyz-entry.compact .store-buttons:not(#_):not(#_){order:4!important}
.wertyz-entry.compact .user-hero-benefits-v120:not(#_):not(#_){order:5!important}
.wertyz-entry.compact .hero-actions:not(#_):not(#_){
order:7!important;
width:min(62vw,280px)!important;
margin:32px auto 0!important;
}
}
.wertyz-entry.compact .hero-actions a.btn:first-child:not(#_):not(#_){
margin-right:16px!important;
}
.wertyz-entry.compact .store-buttons:not(#_):not(#_){
margin-top:18px!important;
}
@media(min-width:761px){
.wertyz-entry.compact .store-buttons:not(#_):not(#_){
margin-top:44px!important;
}
}
.wertyz-entry.compact .user-phone-note-v120:not(#_):not(#_){
width:138px!important;
padding:10px 12px!important;
}
.wertyz-entry.compact .user-phone-note-v120 b:not(#_):not(#_){
font-size:16px!important;
}
.wertyz-entry.compact .user-phone-note-v120 span:not(#_):not(#_){
font-size:9px!important;
}
/* --- Sekcia 2 (povodna hero sekcia Aplikacia WERTYZ) na zlucenej
stranke: po zluceni posobila ako druha velka hero sekcia hned pod
prvou. Zmenena na klasicku obsahovu sekciu - bez zvyraznenho
pozadia, bez obrazka telefonu, na vysku sirky. --- */
body.user-area .app-page-hero:not(#_):not(#_){
display:block!important;
min-height:0!important;
background:#fff!important;
padding:56px 0!important;
}
body.user-area .app-hero-grid:not(#_):not(#_){
display:block!important;
}
body.user-area .app-hero-copy:not(#_):not(#_){
max-width:820px!important;
margin:0 auto!important;
}
/* Zjednotenie s nasledujucou sekciou Ako prebieha platba: nadpis aj text
vycentrovane, nadpis rovnakej velkosti ako .app-section-title h2. Zoznam
sluzieb prepnuty z 3-stlpcovej mriezky (posledny riadok mal len 2 z 3
policok) na centrovany flex-wrap. */
body.user-area .app-page-hero .app-hero-copy h2:not(#_):not(#_){
text-align:center!important;
font-size:clamp(34px,4vw,52px)!important;
line-height:1.08!important;
letter-spacing:-1.6px!important;
color:#1a2d2d!important;
margin:0 0 12px!important;
}
body.user-area .app-page-hero .app-hero-copy>p:not(#_):not(#_){
text-align:center!important;
max-width:640px!important;
margin:0 auto!important;
color:#68777a!important;
font-size:17px!important;
}
body.user-area .app-page-hero .app-service-list:not(#_):not(#_){
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
max-width:760px!important;
margin:32px auto 0!important;
}
body.user-area .app-page-hero .app-service-list li:not(#_):not(#_){
flex:0 1 226px!important;
}
.customer-grid.simple.three-col:not(#_):not(#_){
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:680px){
.customer-grid.simple.three-col:not(#_):not(#_){
grid-template-columns:1fr!important;
gap:16px!important;
}
}
/* Zjednotenie horneho menu WERTYZ stranok (pouzivatel-*.html) so stylom
menu u poskytovatela (prevadzkovatel*.html): rovnaka velkost/hrubost
pisma odkazov, rovnake zaoblenie a farba aktivnej polozky/hoveru.
Tlacidlo Podpora zostava bez zmeny. */
body.user-area .nav .container:not(#_):not(#_){
min-height:76px!important;
justify-content:flex-start!important;
gap:22px!important;
}
body.user-area .nav.light .links:not(#_):not(#_){
gap:5px!important;
font-size:15px!important;
}
body.user-area .nav.light .links a:not(#_):not(#_){
color:#46514d!important;
border-radius:10px!important;
padding:10px 12px!important;
font-weight:700!important;
}
body.user-area .nav.light .links a.active:not(#_):not(#_),
body.user-area .nav.light .links a:hover:not(#_):not(#_){
background:#e9f7f5!important;
color:var(--w-teal-dark)!important;
}
.light .nav-support-desktop:not(#_):not(#_){
font-size:15px!important;
font-weight:800!important;
}
/* ...a v opacnom smere: hlavne odkazy + CTA v hlavicke poskytovatela
(prevadzkovatel*.html, segment-*.html) zosuladene na tu istu velkost/rez,
o niecoo vacsie nez povodnych 14px/600 - iba top-level polozky primo v
.links (Domov, O nas, Referencie, Som pouzivatel + tlacidlo Riesenia),
vnorene podmenu ostava bez zmeny. */
body.provider-site .nav .links:not(#_):not(#_) > a,
body.provider-site .nav .links:not(#_):not(#_) > .nav-dropdown > .nav-dropbtn{
font-size:15px!important;
font-weight:700!important;
}
body.provider-site .nav:not(#_):not(#_) .btn-o{
font-size:15px!important;
font-weight:800!important;
}
/* Prepinac jazyka v hlavicke (SK/EN/CZ/PL/DE toggle + rozbalovaci zoznam) -
rovnaka mierna zmena ako pri hlavnych odkazoch/CTA vyssie: trochu vacsie
pismo, jednotne naprieč homepage aj oboma hlavickami. */
.lang-switcher-toggle:not(#_):not(#_){
font-size:14px!important;
}
.lang-switcher-menu button:not(#_):not(#_){
font-size:14px!important;
}
/* Prepinac jazyka na mobile: povodne vycentrovany presne na stred hlavicky
(left:50%), co posobilo, akoby "visel" osamote medzi logom a burger
menu. Presunuty vpravo, bližšie k burger menu. */
@media(max-width:900px){
.provider-site .nav .lang-switcher:not(#_):not(#_),
.user-area .nav .lang-switcher:not(#_):not(#_){
left:auto!important;
right:60px!important;
}
}
/* --- WERTYZ logo presunute z vlastnej samostatnej sekcie (wertyz-divider,
s vlastnym tyrkysovym pozadim a oddelovacimi ciarami) priamo do
sekcie "Ako prebieha platba" nad jej nadpis - klientka: pozadie
s logom posobilo ako odtrhnuty samostatny blok. --- */
.app-section.soft .payment-logo:not(#_):not(#_){
margin-bottom:26px!important;
}
.app-section.soft .payment-logo img:not(#_):not(#_){
width:80px!important;
height:auto!important;
}
/* --- "S čím potrebujete pomôcť?" (customer-actions) mala rovnaké svetlosive
pozadie (#f4f8f8) ako susedná sekcia "Ako prebieha platba", takže
vizuálne splývali do jedného bloku. Biele pozadie + jemný horný
oddeľovač z nej robí samostatnú, jasne ohraničenú sekciu. --- */
body.user-area .customer-actions:not(#_):not(#_){
background:#ffffff!important;
border-top:1px solid #e3ecea!important;
}
/* --- Oprava: ikony "Pomoc a podpora" a "FAQ" v sekcii "S čím potrebujete
pomôcť?" sa vykresľovali ako plné čierne fľaky (chýbal fill:none +
stroke:currentColor na SVG), namiesto tenkej linkovej ikony na
tyrkysovom podklade ako inde na webe. --- */
.customer-card .icon svg:not(#_):not(#_){
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
/* --- FAQ: veta pod zoznamom otázok, ktorá odkazuje na kontaktný formulár
podpory (kotva #kontaktny-formular priamo na formulári v
pouzivatel-helpdesk.html). --- */
.faq-more:not(#_):not(#_){
margin-top:32px;
text-align:center;
}
.faq-more p:not(#_):not(#_){
margin:0;
color:#5d6763;
font-size:16px;
line-height:1.6;
}
/* --- FAQ + Podpora hero: fotografia na pozadí (žena s telefónom na zastávke
MHD), spoločná pre obe "support" stránky kvôli vizuálnej konzistencii.
Biely prechod zľava sprava zabezpečuje čitateľnosť textu (kicker/H1/p),
fotka je viditeľná v pravej časti sekcie. Dekoratívne pseudo-elementy
(:before aj :after z .subpage-hero) sú pre túto variantu skryté. --- */
.subpage-hero-photo:not(#_):not(#_){
background-image:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.5) 62%,rgba(255,255,255,.08) 85%),url("faq-hero-bg.jpg")!important;
background-size:cover!important;
background-position:center right!important;
background-repeat:no-repeat!important;
}
.subpage-hero-photo:before,
.subpage-hero-photo:after{
display:none!important;
}
@media(max-width:760px){
.subpage-hero-photo:not(#_):not(#_){
background-image:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.72) 100%),url("faq-hero-bg.jpg")!important;
background-position:85% 30%!important;
}
}
/* --- Podpora: vlastná fotka na pozadí hero sekcie (muž s notebookom a
telefónom), odlišná od FAQ. Rovnaký princíp prekrytia ako vyššie. --- */
.helpdesk-hero-photo:not(#_):not(#_){
background-image:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 40%,rgba(255,255,255,.5) 62%,rgba(255,255,255,.08) 85%),url("helpdesk-hero-bg.jpg")!important;
background-size:cover!important;
background-position:center right!important;
background-repeat:no-repeat!important;
min-height:0!important;
}
.helpdesk-hero-photo:before,
.helpdesk-hero-photo:after{
display:none!important;
}
@media(max-width:760px){
.helpdesk-hero-photo:not(#_):not(#_){
background-image:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.72) 100%),url("helpdesk-hero-bg.jpg")!important;
background-size:cover!important;
background-position:center 30%!important;
}
}
/* --- Podpora: 3 mini-karty "Daňový doklad / Reklamácia / FAQ" dostali
farebnú ikonu v krúžku (rovnaký vizuálny jazyk ako .customer-card
na "Aplikácia WERTYZ" a hlavnej FAQ stránke), aby nepôsobili oproti
zvyšku webu holo/plocho. --- */
.help-type .icon svg:not(#_):not(#_){
width:26px!important;
height:26px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
/* --- Podpora: box "K požiadavke pomôže" - konkretny zoznam namiesto
vseobecnej vety, aby ludia realne vedeli, co do spravy uviest. --- */
.help-hint-list:not(#_):not(#_){
margin:0!important;
padding-left:18px!important;
color:#68736f!important;
font-size:14px!important;
line-height:1.6!important;
}
.help-hint-list li:not(#_):not(#_){
margin-bottom:2px!important;
}
/* --- Podpora: súhlas s GDPR na celú šírku riadku (predtým polovica vedľa
tlačidla, text sa zbytočne zalamoval), tlačidlo "Odoslať požiadavku"
presunuté pod túto vetu, zarovnané vpravo. --- */
.help-submit-row:not(#_):not(#_){
display:flex!important;
justify-content:flex-end!important;
}
#suhlas[type="checkbox"]:not(#_):not(#_),
input[name="gdpr"][type="checkbox"]:not(#_):not(#_){
width:21px!important;
height:21px!important;
min-width:21px!important;
accent-color:var(--teal, #0aa39d)!important;
cursor:pointer!important;
vertical-align:middle!important;
}
.help-field.half label:has(input[name="gdpr"]){
cursor:pointer!important;
}
/* --- Prevádzkovateľ, sekcia "Riešenia podľa typu služby": odstránené
číselné odznaky (01, 02...) vpravo hore na fotke a zelený
kategorický podnadpis (napr. "Mestá · obce · súkromné prevádzky")
pod fotkou - klientka ich nechcela. --- */
.solution-visual-v118>span:not(#_):not(#_){
display:none!important;
}
.solution-meta-v118:not(#_):not(#_){
display:none!important;
}
/* Po odstránení zeleného podnadpisu vyššie zostávala pod popisom zbytočná
medzera (kartа mala fixnú min-height počítanú aj s týmto riadkom) -
znížená, aby "Pozrieť riešenie" nebolo zbytočne odtrhnuté od textu. */
.solution-content-v118:not(#_):not(#_){
min-height:200px!important;
}
/* Mobilné menu: hamburger (tri čiarky) zarovnaný úplne doprava v hlavičke */
@media(max-width:760px){
.mobile-toggle:not(#_):not(#_){
margin-left:auto!important;
}
}
/* --- Mobil/tablet (<=900px): karty riešení (.psel-grid) sa menia z
horizontálneho swipe-carouselu (viď pravidlo vyššie) na jednoduchý
zoznam pod sebou. Každá karta je vždy plne rozbalená (ikona, nadpis,
podnadpis, fotka a CTA) – žiadne rozbaľovacie tlačidlo. Pôvodné
carousel ovládanie (šípky vľavo/vpravo + počítadlo) už nie je
potrebné, keďže karty nie sú vedľa seba – schované. --- */
@media(max-width:900px){
.psel-grid:not(#_):not(#_){
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
overflow-x:visible!important;
scroll-snap-type:none!important;
gap:10px!important;
}
.psel-card:not(#_):not(#_){
flex:0 0 auto!important;
scroll-snap-align:none!important;
}
.psel-grid-controls:not(#_):not(#_){display:none!important}
.psel-cta:not(#_):not(#_){margin-top:12px!important}
}
.psel-card-toggle:not(#_):not(#_){display:none!important}
/* --- Segmentové stránky (.qp-hero.qp-hero--full): nové fotky (assets/
segmenty-wide, 3000x1200) sú zámerne pripravené so širokým bielym
dopĺnkom vľavo od reálnej fotky (fotka samotná siaha takmer po celej
výške plátna, pri pravom okraji). Pri object-fit:contain sa ale
celé plátno (biela plocha + fotka) zmenšuje ako jeden celok podľa
pomeru strán okna - na užších oknách (menej ako ~1725px) to znova
necháva prázdny biely pás NAD aj POD fotkou (fotka sa "vznáša"
uprostred), presne opačný problém ako predtým. Namiesto object-fit
preto fotke natvrdo nastavujeme height:100% (vždy presne na výšku
hero sekcie, bez medzery hore/dole) a width:auto (pomer strán sa
zachová, žiadne skreslenie) - prípadný pretečenie šírky sa odreže
sprava doľava (do bieleho dopĺnku, resp. v širokých oknách mierne aj
do samotnej fotky vľavo), keďže .qp-hero-photo má overflow:hidden a
fotka je ukotvená k pravému okraju. Niektoré zo zdrojových fotiek majú
navyše tesne pod/nad reálnou fotkou ešte tenký (cca 8px z 1200px) biely
okraj zabudovaný priamo v súbore - preto je fotka mierne "predimenzovaná"
(height:104% + posun hore o 2%), aby sa aj tento úzky zvyškový biely
prúžok odrezal a fotka siahala naozaj úplne od horného po spodný okraj.
AKTUALIZÁCIA: object-fit:cover + zväčšenie orezávalo fotku vrátane jej
vlastného vstavaného ľavého prechodu/gradientu (fotky z assets/segmenty-wide
ho už majú "zapečený" priamo v súbore) - na užších oknách tak namiesto
plynulého prechodu vznikal ostrý, nepekný rez tesne pri texte. Namiesto
orezávania sa teraz zobrazuje CELÁ fotka (object-fit:contain, zarovnaná
vpravo), takže jej vlastný gradient je vidno celý; kontajner pod ňou má
jemné priesvitné pozadie (viď nižšie), ktoré vyplní prípadný voľný
pás nad/pod fotkou namiesto ostrého bieleho okraja. --- */
body.provider-site .qp-hero.qp-hero--full .qp-hero-photo img:not(#_):not(#_){
left:auto!important;
right:0!important;
top:0!important;
width:100%!important;
max-width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:right center!important;
}
/* --- Segmentové stránky (.qp-hero.qp-hero--full): množstvo bieleho
dopĺnku vľavo od reálnej fotky sa medzi jednotlivými súbormi líši (napr.
parkovanie-samosprava má fotku od ~52% šírky plátna, ale
parkovanie-horeca už od ~32%) - keďže fotka sa vždy zobrazuje rovnako
"veľká" (height:100% hero sekcie, pevný pomer strán 2.5:1), pri fotkách
s menším dopĺnkom sa reálna fotka posúva viac doľava a zachádza pod
textový blok (nadpis/popis), čo vyzerá zle. Preto je celý fotografický
kontajner (nie len samotný obrázok) obmedzený tak, aby vždy nechal
aspoň 600px vpravo od textového bloku voľných - čokoľvek "naviac" sa
odreže (orezaním kontajnera, nie zmenšením fotky), takže fotka nikdy
nezasahuje do textu, nech má akokoľvek málo bieleho dopĺnku. --- */
body.provider-site .qp-hero.qp-hero--full .qp-hero-photo:not(#_):not(#_){
left:auto!important;
right:0!important;
transform:none!important;
width:calc(100% - 600px)!important;
background:rgba(13,138,125,.08)!important;
}
/* --- Segmentové stránky (.qp-hero.qp-hero--full): zdieľané pravidlo vyššie
(body.provider-site .qp-hero{background: mintový/oranžový radial-gradient
+ linear-gradient(135deg,#f7fbfb,#edf5f6)}) dáva hero sekcii jemný
mintový nádych pozadia. Na segmentových stránkach to teraz po zmenšení
fotky (contain) necháva veľkú plochu tohto pozadia viditeľnú vľavo od
fotky, čo pôsobí rušivo – biele pozadie namiesto mintového. Scoped iba na
.qp-hero--full (segmentové stránky), ostatné typy (.psel-hero produktové
stránky, .choice-hero, .detail-hero) zdieľané pravidlo nemenia. --- */
/* AKTUALIZÁCIA (9.9.2026): klientka požiadala nahradiť biele pozadie
tmavomodrým, rovnakým, aké už web používa v hlavnej "domov" hero sekcii
Poskytovateľa (.provider-hero na prevadzkovatel.html) - tá má tmavomodré
pozadie (--v120-navy) s tmavým prechodom cez fotku a bielym/svetlým
textom. Rovnaký vzor (farby aj princíp prechodu) je teraz použitý aj tu,
namiesto pôvodného bieleho pozadia vyššie. */
body.provider-site .qp-hero.qp-hero--full:not(#_):not(#_){
background:var(--v120-navy,#122020)!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-crumb:not(#_):not(#_),
body.provider-site .qp-hero.qp-hero--full .qp-crumb a:not(#_):not(#_),
body.provider-site .qp-hero.qp-hero--full .qp-crumb span:not(#_):not(#_){
color:#9fb3bb!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-hero-copy h1:not(#_):not(#_){
color:#fff!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-hero-copy h1 span:not(#_):not(#_){
color:#fff!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-lead:not(#_):not(#_){
color:#d9e4e1!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-feat span:not(#_):not(#_){
color:#fff!important;
}
body.provider-site .qp-hero.qp-hero--full .qp-feat-icon:not(#_):not(#_){
background:#fff!important;
}
/* Hlavné CTA tlačidlo v hero sekcii ("Konfigurovať systém") prefarbené
z tyrkysovej/zelenej na oranžovú - rovnaký oranžový gradient, aký web
používa aj inde (napr. tlačidlo "Konzultovať projekt" v hlavičke). */
body.provider-site .qp-hero.qp-hero--full .qp-hero-actions .btn-qp-primary:not(#_):not(#_){
background:linear-gradient(135deg,#f37016,#ff9a48)!important;
box-shadow:0 14px 30px rgba(243,112,22,.28)!important;
}
/* AKTUALIZÁCIA (9.9.2026): klientka chce logo bez pozadia, so zachovaním
jeho pôvodných farieb (predchádzajúce dve riešenia - biely podklad, potom
prefarbenie na bielu siluetu cez filter - obe nahradené, na želanie). */
body.provider-site .qp-hero.qp-hero--full .qp-brand:not(#_):not(#_){
background:none!important;
padding:0!important;
}
/* Poznámka: samotný biely prechod cez fotku je riešený nižšie v súbore,
v bloku "Finálne rozloženie segmentového hero" (@media(min-width:781px)),
kde je AJ REÁLNE aktívny (novšie pravidlo v cascade prepisuje staršie
::before o kúsok vyššie v súbore) - tam bol prefarbený z bielej na
tmavomodrú, nie tu. */
/* --- Segmentové stránky (.qp-hero.qp-hero--full): medzi popisom (qp-lead)
a riadkom ikoniek (qp-feature-row) bola iba zdieľaná medzera 14px (rovnaká
ako medzi všetkými ostatnými prvkami textového bloku - crumb/logo/H1/
popis/ikony/tlačidlá). Pridaná väčšia medzera len na tomto jednom mieste. --- */
body.provider-site .qp-hero.qp-hero--full .qp-feature-row:not(#_):not(#_){
margin-top:26px!important;
}
/* --- Riadok ikoniek (.qp-feat) v hero sekcii: ikona aj popisok pod ňou
boli zarovnané na začiatok stĺpca (align-items:flex-start v zdieľanom
pravidle), takže pri dvojriadkovom texte pôsobil popisok vizuálne
"vysunutý doľava" mimo stred ikony. Vycentrované. Samotné zalomenie na
presne 2 riadky (keď má popisok 2+ slová) rieši JS (assets/
emcard-v109.js) - vkladá , ktoré
vedelo iba rozbaliť zoznam segmentov, nikdy nikam nenavigovalo.
Šípka na rozbalenie je samostatné tlačidlo (.mobile-subtoggle) vedľa
odkazu, v spoločnom riadku .mobile-sub-row. */
.mobile-subgroup:not(#_):not(#_){
border-top:1px solid rgba(255,255,255,.08);
}
.mobile-sub-row:not(#_):not(#_){
display:flex;
align-items:stretch;
gap:0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-sub-row .mobile-sub-link:not(#_):not(#_){
flex:1 1 auto;
border-bottom:0!important;
}
.mobile-subtoggle:not(#_):not(#_){
flex:0 0 auto;
display:flex!important;
align-items:center;
justify-content:center;
padding:0 16px;
background:none;
border:0;
cursor:pointer;
}
.mobile-subchevron:not(#_):not(#_){
flex:0 0 auto;
transition:transform .16s ease;
}
.mobile-subgroup.open .mobile-subchevron:not(#_):not(#_){
transform:rotate(180deg);
}
.mobile-subitems:not(#_):not(#_){
display:none;
flex-direction:column;
padding:0 0 6px 16px;
}
.mobile-subgroup.open .mobile-subitems:not(#_):not(#_){
display:flex;
}
.mobile-subitems a:not(#_):not(#_){
padding:9px 10px!important;
font-size:13.5px!important;
}
.mobile-subitems-all:not(#_):not(#_){
opacity:.7;
}
/* --- Riešenia (psel-hero): tmavo modré pozadie hero sekcie, jednotné
s hero na Domov (--v120-navy #122020). Balíky package-a/b.css majú
pre .psel-hero (zdieľané aj s qp-hero/choice-hero/detail-hero/
simple-inquiry) svetlý gradient s !important – tu ho pre .psel-hero
prebíjame špecificitou (bez zásahu do ostatných zdieľaných tried). */
.psel-hero:not(#_):not(#_){
background:#122020!important;
}
.psel-hero .psel-intro-text h1:not(#_):not(#_){
color:#fff!important;
}
.psel-hero .psel-intro-text p:not(#_):not(#_),
.psel-hero .psel-hero-inner>p:not(#_):not(#_){
color:#c9dbe6!important;
}
/* "Porozprávajme sa o vašom projekte" (prevadzkovatel-o-nas.html) je na
tyrkysovom pozadí (.about-company-cta{color:#fff}), ale ".provider-site
h2{color:var(--p-ink)}" cieli priamo na h2, takže zdedenú bielu farbu
prebije tmavou (priame pravidlo vždy vyhráva nad dedením). */
.about-company-cta h2:not(#_):not(#_){
color:#fff!important;
}
/* Šípka "→" v texte rôznych tlačidiel/odkazov naprieč webom (napr.
"Vybrať riešenie →", "Pozrieť riešenie →", "Otvoriť FAQ →") bola len
bežný text, vizuálne pôsobila tenko a nie vždy presne na strede
riadku textu - rovnaké doladenie ako pri .psel-cta-arrow (Doplnkové
moduly): text-stroke ju zhrubne, malý posun hore ju vycentruje voči
priľahlému textu. */
.btn-arrow-thick:not(#_):not(#_){
-webkit-text-stroke:1px currentColor;
position:relative;
top:-1px;
}
/* V .solution-link-v118 (karty "Pozrieť riešenie" na homepage) je šípka
v kruhovom odznaku (.solution-link-v118 b { display:grid;
place-items:center }) - samotný glyf "→" má ale v tomto fonte/reze
vizuálne ťažisko (ink) posunuté doľava oproti stredu svojho vlastného
"advance" boxu (ktorý CSS centrovanie berie do úvahy) - v kruhu preto
pôsobil posunutý doľava. Kompenzované posunom doprava, zmerané presne
cez getBoundingClientRect na screenshotoch (stred kruhu vs. stred
vykresleného tvaru šípky). */
.solution-link-v118 b.btn-arrow-thick:not(#_):not(#_){
left:3px;
}
/* Hviezdička pri povinných poliach formulára (Meno, E-mail, Správa) -
predtým buď chýbala úplne, alebo bola len obyčajný neodlíšený text. */
.required-mark:not(#_):not(#_){
color:#d43b3b;
font-weight:800;
}
/* Konfigurátor zariadení/príslušenstva (napr. "Parkovací automat",
"Informačná tabuľa"): kým je otvorené pop-up okno konfigurácie
(assets/qp-configurator.js pridáva/odoberá túto triedu na body),
stránka pod ním sa nesmie scrolovať. */
body.qp-cfg-modal-open:not(#_):not(#_){
overflow:hidden;
}