/* * Veterina Branimir: vlastiti CSS (Impreza child tema) * * PRAVILO: sve se radi kroz Impreza alate (Theme Options, Header Builder, Live Builder, * Grid Layout, Design opcije elemenata). Ovdje ide SAMO ono što Impreza ne može, * a svaki blok ima opis zašto je custom i kako se koristi. * * Sadržaj: * A. Status "otvoreno / zatvoreno" (boje stanja koja postavlja vb.js) * B. Hover podizanje kartica (klasa vb-hover) * C. Traka o kolačićima (izgled Impreza cookie trake) * D. Forma na Kontaktu (odabir razloga kao kartice, termini kao kartice) * E. Gumbi preko cijele širine (klasa vb-gumbi + svi gumbi na mobitelu) * F. Hero sa sliderom na naslovnici (tekst i slider poravnati gore i dolje) * G. Gumb u headeru (tekst gumba uvijek u jednom redu) * H. Info okvir u heroju (podebljani tekst, veća ikona, tekst poravnat, klasa vb-info) * I. Drugi red naslova na naslovnici (manji, iste širine kao prvi red, klasa vb-naslov) * J. Slika uz naslov Usluga (iste visine kao tekst lijevo, klasa vb-usluge-slika) * K. Kartice lokacija na naslovnici (gumbi uvijek na dnu kartice, klasa vb-lok) * M. Sekcija "Zašto baš mi" (mozaik fotografija: velika do visine teksta, citat preko sve tri, vb-mozaik) * M. Značka statusa na Kontaktu (Otvoreno/Zatvoreno na slici ili karti, vb-lok-znacka) * N. Okvir "Hitno stanje?" u mega meniju (klasa vb-hitno-okvir) * O. Opisi na slikama u slideru u heroju (stupac vb-hero-slika) * Dodano poslije (opisano uz svaki dio niže u datoteci): * - Stupac s tekstom i gumbom uz sliku (klasa vb-cta-stupac, Usluge i naslovnica "Krenite od prvog pregleda") * - Vodeni žig, velika blijeda ikona (klase vb-ima-zig i vb-zig, mega meniji, Održavanje) * - Održavanje, pozadina cijelog ekrana (red s klasom vb-odr-puni, karte vb-odr-lok) * - Stupac s elementom na dnu (klasa vb-dno-stupac, O nama, Profil tvrtke) * - Slogan preko slike (klasa vb-slogan-slika, O nama) * - Footer (brze poveznice vb-footer-meni, pozadina, 2 stupca na manjim tabletima) * - Fotografija s potpisom (klase vb-foto i vb-foto-stupac, naslovnica Česta pitanja) * P. Česta pitanja, kartice s ikonom (accordion s klasom vb-faq) * Q. Pristupačnost (kontrast uloge u Person elementu, podcrtani linkovi u tekstu) * R. Ikone društvenih mreža bez fonta (klase vb-ikona-instagram, vb-ikona-facebook, vb-ikona-youtube) * S. Bez pomaka izgleda pri učitavanju (zamjenski fontovi podešeni na Onest i Bricolage, širine ikona) * T. Hitno u karticama, pauza slidera (klase vb-hitno-zatvoreno, vb-slider-a11y, vb-hero-foto-2x1) * U. Točka stanja u headeru (klasa vb-status-tocka uz vb-status-laniste / -precko) * V. Oblačić uz brojeve u headeru (stanje mišem, poruka kod klika izvan radnog vremena; vb.js) * W. Oznaka 00-24 na gumbu u izborniku (klasa vb-oznaka-0024 na gumbu u Header Builderu) * X. Razmak stavki izbornika na užim ekranima (961-1100 px) * Y. Rupe između breakpointa (sakrivanje sekcija na 1024-1025, 1280-1281 i 600-601 px) * Z. Hitni okvir na Kontaktu (klase vb-hitno-plavo, vb-hitno-broj, vb-hitno-tekst; vb-status-bez) * AA. Zaštita od preljeva (gumbi, kartice termina u formi, značke stanja, tablice) * AB. Mobilni izbornik (tamnoplavi, ikone stavki, usluge kao kartice, šapa u pozadini) * AE. Predložak objave (usluge) (hero iz istaknute slike, okvir Ukratko, kartica teksta, podnaslovi kao oznake) * AF. Filter kao pilule s brojem (Slučajevi i savjeti, Usluge) * AG. Rotirka pulsira (ikona far|siren-on) * AH. Pločice usluga jednake visine (bočni stupac, blok 761) * AI. Foto & video, kartice za odabir u uvodu (klasa vb-fv-kartica, stranica Foto & video) * AJ. Dva gumba u istom redu na tabletu (klasa vb-gumbi-tablet, O nama uvod) * AK. Stavke izbornika klikabilne po cijeloj kartici (Icon Box u mega menijima i mobilnom izborniku) * AL. Foto & video, galerije ordinacija kao mozaik (klasa vb-mozaik, + vb.js) * AM. Virtualna šetnja, uvod i šetnja zajedno na cijelom ekranu (klasa vb-setnja-ekran na stupcu) * AN. Gumb "Kopiraj link / Podijeli" uz gumbe za dijeljenje (klasa vb-kopiraj-link, predložak članaka, + vb.js) * AO. Isti radijus zaobljenja za sve gumbe (.8em kao Impreza Button Styles): gumbi za dijeljenje, traka za kolačiće * AP. Izvor ispod slike u članku (klasa vb-izvor u potpisu slike) * AQ. Podnaslovi (H2) u tekstu članaka i usluga manji od naslova sekcija (varijanta C) * AT. Izbornik Usluge na tabletu: "Sve usluge" i "Hitna stanja" dva u redu, ostale usluge tri u redu (klasa vb-mm-prvi-red) * AV. Virtualna šetnja se učitava tek na klik (klase vb-setnja-pokrov i vb-setnja-iframe, + vb.js) * AW. Kartica "+N kolega u timu" klikabilna cijela (poveznica gumba ::after preko kartice, klasa vb-tim-plus) * AX. Karta (OpenStreetMap) na stranicama ordinacija se učitava tek na klik (klasa confirm_load, + functions.php VB KARTA NA KLIK) */ /* ===== A. STATUS "OTVORENO / ZATVORENO" ===== Zašto custom: Impreza uvjeti prikaza (Display Logic) računaju se na serveru, a LiteSpeed sprema gotovu stranicu u cache, pa bi status ostao zamrznut. Zato stanje postavlja vb.js u pregledniku posjetitelja. Kako se koristi: bilo kojem Impreza "Text" elementu u polje Extra class upiši vb-status. Izgled (pozadina, razmaci, zaobljenje) podešava se u Design opcijama tog elementa, a ovdje su samo boje za dva stanja koja postavlja skripta. */ /* Tekst u okviru je crn, samo riječ "Otvoreno" (zeleno) ili "Zatvoreno" (crveno) je u boji stanja */ /* Okvir statusa (Text element s klasom vb-status). Tekst je crn, samo riječ "Otvoreno" (zeleno) ili "Zatvoreno" (crveno) je u boji stanja. Kartice (vb-status-kartica) nemaju okvir, vidi niže. */ .vb-status:not(.vb-status-kartica).is-open{background-color:#e7f6ec!important;color:#0a1a33!important;border:1px solid #bfe5cb} .vb-status:not(.vb-status-kartica).is-closed{background-color:#fdeeee!important;color:#0a1a33!important;border:1px solid #f6caca} .vb-status.is-open .vb-status-stanje{color:#137a3a} /* malo tamnija zelena: na svijetlozelenoj pločici kontrast 4,85:1 (#15803d je bio 4,49:1, ispod WCAG 4,5) */ .vb-status.is-closed .vb-status-stanje{color:#b91c1c} .vb-status .vb-status-stanje{font-weight:800} .vb-status:not(.vb-status-kartica).is-open i{color:#16a34a} .vb-status:not(.vb-status-kartica).is-closed i{color:#dc2626} /* Poruka u okviru ima dva reda, a veća ikona sata stoji lijevo, okomito na sredini između njih. */ .vb-status:not(.vb-status-kartica) .w-text-h{display:flex;align-items:center;gap:12px} .vb-status:not(.vb-status-kartica) i{font-size:1.7em;margin:0!important;flex-shrink:0} .vb-status .vb-status-2{display:block} /* Kartica ordinacije (naslovnica, ispod heroja): kutija s ikonom sata dobiva boju stanja, zelenu kad je otvoreno i crvenu kad je zatvoreno. Kartica ostaje bijela, a vanjski rub kartice također je zelen ili crven (iste boje kao rub info okvira). */ .vb-status-kartica .vb-status-ikona{transition:background-color .2s} .vb-status-kartica.is-open .vb-status-ikona{background-color:#e7f6ec!important} .vb-status-kartica.is-open .vb-status-ikona i{color:#15803d!important} .vb-status-kartica.is-closed .vb-status-ikona{background-color:#fdeeee!important} .vb-status-kartica.is-closed .vb-status-ikona i{color:#b91c1c!important} .vb-status-kartica.is-open{border-color:#bfe5cb!important} .vb-status-kartica.is-closed{border-color:#f6caca!important} /* Kartice ordinacija u heroju naslovnice (Extra class vb-status-puna uz vb-status-kartica; kutija ikone ima i vb-ikona-kutija za centriranje). Kartica je bijela s rubom u boji stanja (pravila iznad), ikona ordinacije je plava na svijetloplavoj kutiji, a stanje pokazuje točka na kutu kutije (zelena ili crvena, bijeli rub, lagani puls u oba stanja), ista kao točke uz telefone u headeru. Zašto custom: točka i boje ovise o stanju koje postavlja vb.js. Veličine i podebljani tekst su u Builderu. */ .vb-status-puna .vb-status-ikona{position:relative;overflow:visible!important} .vb-status-puna.is-open .vb-status-ikona,.vb-status-puna.is-closed .vb-status-ikona{background-color:#e8f0fa!important;box-shadow:none} .vb-status-puna.is-open .vb-status-ikona i,.vb-status-puna.is-closed .vb-status-ikona i{color:#014286!important} .vb-status-puna .vb-status-ikona::after{content:"";position:absolute;top:-4px;right:-4px;width:13px;height:13px;box-sizing:border-box;border-radius:50%;border:2px solid #fff;background:#16a34a} .vb-status-puna.is-open .vb-status-ikona::after{animation:vb-tocka-val 2.4s ease-out infinite} .vb-status-puna.is-closed .vb-status-ikona::after{background:#dc2626;animation:vb-tocka-val-crveno 2.4s ease-out infinite} @keyframes vb-tocka-val{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}80%,100%{box-shadow:0 0 0 7px rgba(22,163,74,0)}} @keyframes vb-tocka-val-crveno{0%{box-shadow:0 0 0 0 rgba(220,38,38,.45)}80%,100%{box-shadow:0 0 0 7px rgba(220,38,38,0)}} @media (prefers-reduced-motion:reduce){.vb-status-puna .vb-status-ikona::after{animation:none!important}} /* Kutije ikona iste veličine bez obzira na širinu ikone (Extra class vb-ikona-kutija na vwrapperu s Iconboxom). Veličina i boja su u Design opcijama, ovdje je samo centriranje jer Iconbox ispod ikone ima prazan dio koji ga gura gore. */ .vb-ikona-kutija{display:flex!important;align-items:center;justify-content:center;flex-shrink:0} .vb-ikona-kutija .w-iconbox{display:flex} .vb-ikona-kutija .w-iconbox-meta{display:none} .vb-ikona-kutija .w-iconbox-icon{margin:0!important} @media (prefers-reduced-motion:reduce){.vb-ikona-ordinacija .vb-status-ikona::after{animation:none!important}} /* ===== B. HOVER PODIZANJE KARTICA ===== Zašto custom: Design opcije Impreza elemenata nemaju hover efekte (osim u Grid Layoutima, gdje se hover podešava u samom layoutu). Kako se koristi: elementu (npr. IconBox kartici) u polje Extra class upiši vb-hover. */ .vb-hover{transition:transform .2s ease,box-shadow .2s ease} .vb-hover:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(1,66,134,.45)} @media (prefers-reduced-motion:reduce){.vb-hover,.vb-hover:hover{transition:none;transform:none}} /* ===== C. TRAKA O KOLAČIĆIMA ===== Zašto custom: Impreza za traku o kolačićima ima samo tekst, poziciju i stil gumba, bez opcija za izgled same trake. */ /* Tekst i gumb se mijenjaju u Theme Options > General > Cookie notice */ /* Desktop: mala kartica u donjem lijevom kutu umjesto trake preko cijele širine */ .l-cookie.pos_bottom{left:24px;right:auto;bottom:24px;max-width:440px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:18px 20px;background:#fff;color:#1e2a3b;border:1px solid #e1e8f1;border-radius:20px;box-shadow:0 24px 48px -20px rgba(10,26,51,.35)} /* Tekst poruke */ .l-cookie .l-cookie-message{flex:1 1 220px;margin:0;padding:0;font-size:14px;line-height:1.5;color:#3b4a60;text-align:left} /* Link na stranicu Uvjeti i privatnost */ .l-cookie .privacy-policy-link{color:#014286;font-weight:600} /* Gumb "U redu" */ .l-cookie .w-btn{margin:0;font-size:14px;padding:10px 22px} /* Mobitel: preko cijele širine s rubom, iznad donje trake s gumbima (visoka je oko 76 px) */ @media(max-width:899px){ .l-cookie.pos_bottom{left:12px;right:12px;bottom:88px;max-width:none;padding:14px 16px;border-radius:16px} .l-cookie .l-cookie-message{font-size:13px} } /* ===== D. FORMA NA KONTAKTU ===== Zašto custom: Impreza "Tabs" ima samo gotove izglede (default, simple, radio, modern...), a nijedan ne izgleda kao tri odvojene kartice iz dizajna. Isto vrijedi za checkbox polja u formi, koja Impreza prikazuje kao obične kvadratiće bez okvira. Kako se koristi: - Tabs elementu u polje Extra class upiši vb-razlog. Naslovi tabova postaju kartice za odabir (Naruči pregled / Imam pitanje / Hitan slučaj). Treći tab je narančasti (hitno). - Contact Form elementu u polje Extra class upiši vb-forma. Checkbox opcije (npr. Prijepodne, Poslijepodne) dobiju okvir u obliku "pilule". Sadržaj tabova (forme, tekst, gumbi) i dalje se uređuje normalno u Live Builderu. */ /* Traka s naslovima tabova: mreža kartica umjesto vodoravne trake */ .w-tabs.vb-razlog .w-tabs-list{background:none !important;border:0;margin-bottom:24px} /* Tema dodaje razmak iznad sadržaja taba, ovdje ga uklanjamo da forma bude odmah ispod kartica */ .w-tabs.vb-razlog .w-tabs-section-content{padding-top:0} .vb-razlog .w-tabs-list-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px} /* 16px = isti razmak kao između stupaca forme */ .vb-razlog .w-tabs-list-bar{display:none} /* Jedna kartica (neodabrana) */ /* Napomena: selektori su pojačani i boje imaju !important jer tema za Tabs postavlja vlastiti prozirni okvir i bijelu pozadinu koji bi inače pobijedili. */ .w-tabs.vb-razlog .w-tabs-list .w-tabs-item{min-height:64px;padding:12px 16px;border-radius:.8em;border:1.5px solid #c9d6e8 !important;background:#fff !important;color:#1e2a3b !important;font-weight:600;justify-content:flex-start;text-align:left;line-height:1.3} .w-tabs.vb-razlog .w-tabs-list .w-tabs-item:after,.w-tabs.vb-razlog .w-tabs-list .w-tabs-item:before{display:none} .w-tabs.vb-razlog .w-tabs-list .w-tabs-item:hover{border-color:#014286 !important} /* Odabrana kartica: plavi okvir i svijetloplava pozadina */ .w-tabs.vb-razlog .w-tabs-list .w-tabs-item.active{border:2px solid #014286 !important;background:#e8f0fa !important;color:#0a1a33 !important;font-weight:700} /* Treća kartica (Hitan slučaj): narančasta kad je odabrana */ .w-tabs.vb-razlog .w-tabs-list .w-tabs-item:nth-child(3):hover{border-color:#b91c1c !important} .w-tabs.vb-razlog .w-tabs-list .w-tabs-item:nth-child(3).active{border-color:#b91c1c !important;background:#fdeeee !important} /* Mobitel: tri kartice ostaju u jednom redu, manji tekst i centrirano */ @media (max-width:600px){ .w-tabs.vb-razlog .w-tabs-list-h{grid-template-columns:repeat(3,1fr);gap:8px} .w-tabs.vb-razlog .w-tabs-list .w-tabs-item{min-height:58px;padding:8px 6px;font-size:14px;justify-content:center;text-align:center} } /* Checkbox opcije u formi kao kartice s okvirom, jedna do druge */ /* Opcije su u mreži jednakih stupaca: koliko opcija, toliko jednakih dijelova cijele širine. Visina, zaobljenje, obrub i boje uzimaju se iz Theme Options > Field Styles (varijable --inputs-*), pa opcije uvijek izgledaju isto kao ostala polja forme. box-sizing content-box: obrub se dodaje na visinu, isto kao kod polja, pa su opcije točno visoke kao polje do njih. */ .vb-forma .for_checkboxes .w-form-row-field{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px} .vb-forma .for_checkboxes .w-form-row-field>label{display:flex;width:auto;max-width:none;justify-self:stretch;box-sizing:content-box;align-items:center;gap:10px;height:var(--inputs-height);margin:0;padding:0 var(--inputs-padding);border-radius:var(--inputs-border-radius);border:var(--inputs-border-width) solid var(--inputs-border-color);background:var(--inputs-background);font-size:15px;cursor:pointer;transition:border-color .2s,background .2s} .vb-forma .for_checkboxes .w-form-row-field>label:hover{border-color:var(--inputs-focus-border-color)} /* Kvadratić za kvačicu je blago zaobljen, ne okrugli, da prati ostale zaobljene elemente */ .vb-forma .for_checkboxes input[type=checkbox]{border-radius:6px;flex-shrink:0} /* Odabrana opcija: plavi obrub i svijetloplava pozadina, isto kao odabrana kartica gore */ .vb-forma .for_checkboxes .w-form-row-field>label:has(input:checked){border-color:#014286;background:#e8f0fa} /* Redoslijed polja kad je forma u jednom stupcu (mobitel, do 600 px, isto kao Impreza). Zašto custom: Contact Form ima samo jedan redoslijed polja za sve uređaje. Na računalu polja idu u parovima (Lokacija pored E-maila), a na mobitelu korisnik želi: Ime i prezime, Telefon, E-mail, Usluga, Vrsta ljubimca, Ime ljubimca, Lokacija. Polja se prepoznaju po nazivu koji Impreza sama daje (vrsta polja + redni broj te vrste u formi): text_1 = Ime i prezime, text_2 = Telefon, email_1 = E-mail, select_3 = Vrsta usluge, select_2 = Vrsta ljubimca, text_3 = Ime ljubimca, select_1 = Lokacija. PAZI: ako se u builderu doda, obriše ili premjesti polje iste vrste, ovi brojevi se pomaknu i ovdje ih treba uskladiti. Sva ostala polja (termin, opis, zaštita, privola, gumb) ostaju ispod, svojim redom. */ @media (max-width:600px){ .vb-forma .w-form-row{order:10} .vb-forma .w-form-row:has([name$="_text_1"]){order:1} .vb-forma .w-form-row:has([name$="_text_2"]){order:2} .vb-forma .w-form-row:has([name$="_email_1"]){order:3} .vb-forma .w-form-row:has([name$="_select_3"]){order:4} .vb-forma .w-form-row:has([name$="_select_2"]){order:5} .vb-forma .w-form-row:has([name$="_text_3"]){order:6} .vb-forma .w-form-row:has([name$="_select_1"]){order:7} } /* ===== E. GUMBI PREKO CIJELE ŠIRINE ===== Pravilo korisnika: gumbi su uvijek responzivni i zauzimaju sav raspoloživi prostor. Zašto custom: Impreza Horizontal Wrapper nema opciju "rastegni elemente na jednaku širinu", a gumb nema globalnu postavku "puna širina na mobitelu". 1) Klasa vb-gumbi Kako se koristi: Horizontal Wrapper u kojem su gumbi (ili IconBox kartice) dobije Extra class: vb-gumbi Elementi u njemu postaju iste širine i zajedno popune cijeli red. Ako u red ne stanu, prelaze jedan ispod drugoga (opet preko cijele širine). */ /* Razmak između elemenata uzima se iz postavke "Inner items gap" samog Wrappera (--hwrapper-gap). Tema razmak radi marginom desno, pa bi prvi element bio uži kad su jedan ispod drugoga. Zato ovdje koristimo gap, a marginu poništavamo. */ .vb-gumbi{gap:var(--hwrapper-gap,10px)} .vb-gumbi > *{flex:1 1 0;min-width:max-content;margin:0 !important} .vb-gumbi > .w-btn-wrapper > .w-btn{width:100%} /* 1b) Klasa vb-gumb-jedan-red (dodano 8. 11. 2026.) Zašto: na uskim ekranima dugi tekst gumba (npr. "Preuzmite cjenik proizvoda (PDF)") prelama se u dva reda, a ikona ode iznad teksta. Tema nema opciju "veličina slova prema širini gumba". Kako se koristi: Horizontal Wrapperu s gumbom uz vb-gumbi upisati i Extra class: vb-gumb-jedan-red Tekst i ikona su uvijek u jednom redu, a slova se smanje koliko treba da stanu u širinu gumba. Najveća veličina je 16 px (veličina gumba u temi). Djelitelj 19.5 izmjeren je za najduži tekst na stranici Cjenik (ikona + tekst + bočni razmaci 1em = oko 19 x veličina slova). Wrapperi s istom širinom dobiju istu veličinu slova, pa su gumbi jedan ispod drugoga ujednačeni. Ako se upiše bitno duži tekst, povećati djelitelj. */ .vb-gumb-jedan-red{container-type:inline-size} /* Bočni razmak gumba 1em umjesto 1.6em iz teme: tekst je centriran pa se na širem ekranu ne vidi razlika, a na mobitelu ostaje više mjesta za slova (veća slova). */ .vb-gumb-jedan-red .w-btn{font-size:16px;font-size:min(16px,calc(100cqi / 19.5));white-space:nowrap;padding-left:1em!important;padding-right:1em!important} /* 2) Mobitel (do 600 px): svaki gumb u sadržaju stranice ide preko cijele širine. Vrijedi automatski za sve postojeće i nove gumbe, ništa se ne podešava. Header i footer (mobilna traka) nisu obuhvaćeni jer imaju svoj raspored. */ @media (max-width:600px){ .l-main .w-btn-wrapper{flex:1 1 100%;width:100%} .l-main .w-btn-wrapper > .w-btn{width:100%} /* elementi u vb-gumbi idu jedan ispod drugoga, svaki preko cijele širine. Opcija "Stack on mobiles" Wrapper pretvara u običan blok i gubi se razmak, zato ostaje flex. */ .vb-gumbi{display:flex!important;flex-wrap:wrap} .vb-gumbi > *{flex:1 1 100%;min-width:0} /* dugi tekst gumba smije prijeći u drugi red umjesto da gumb izađe iz kartice */ .l-main .w-btn{white-space:normal} /* gumb je ionako preko cijele širine, pa manji bočni razmak (12 px) pušta duže tekstove u jedan red */ .l-main .w-btn{padding-left:12px;padding-right:12px} } /* ===== F. HERO SA SLIDEROM NA NASLOVNICI ===== Pravilo korisnika: kad je slider desno od teksta (računalo i laptop), vrh i dno lijevog stupca moraju biti točno u liniji s vrhom i dnom slidera, a sadržaj ravnomjerno raspoređen. Zašto custom: Image Slider ima samo fiksni omjer slike (Aspect Ratio), pa mu visina ovisi o širini, a visina teksta ovisi o širini ekrana i prelamanju redova. Impreza nema opciju "slider visok kao susjedni stupac". Kako se koristi: u hero redu lijevi stupac ima Extra class vb-hero-tekst, desni (sa sliderom) vb-hero-slika. Slider se tada uvijek rastegne na visinu teksta (slika se reže kao "cover"), a elementi teksta se rasporede od vrha do dna. Na tabletu i mobitelu (slider iznad teksta) ovo se ne primjenjuje. */ @media (min-width:1024.02px){ /* oba stupca iste visine; visinu reda određuje SAMO tekst */ .vb-hero > .l-section-h > .g-cols{align-items:stretch} /* lijevi stupac: elementi od vrha do dna, s jednakim razmacima */ .vb-hero-tekst > .vc_column-inner{display:flex;flex-direction:column;justify-content:space-between;height:100%} /* desni stupac: svi omotači slidera na punu visinu stupca */ .vb-hero-slika > .vc_column-inner, .vb-hero-slika .g-cols, .vb-hero-slika .g-cols > .wpb_column, .vb-hero-slika .g-cols > .wpb_column > .vc_column-inner{height:100%} .vb-hero-slika .g-cols > .wpb_column > .vc_column-inner{position:relative} /* VAŽNO: slider je apsolutno pozicioniran pa NE utječe na visinu reda. Bez toga slider i red jedan drugome povećavaju visinu u beskonačnost (to se dogodilo u Live Builderu, gdje se preview stalno preračunava). */ .vb-hero-slika .w-slider{position:absolute!important;top:0;right:0;bottom:0;left:0;height:auto!important} /* slider ne slijedi omjer slike nego visinu stupca */ .vb-hero-slika .w-slider-h, .vb-hero-slika .royalSlider, .vb-hero-slika .rsOverflow{height:100%!important;aspect-ratio:auto!important} /* prva slika slidera (pomoćna slika) vidi se odmah, preko cijelog prostora, dok se slider ne pokrene; tada je Impreza sama sakrije. Tako je slika vidljiva ranije (brzina, LCP). */ .vb-hero-slika .w-slider-h > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none} } /* Tablet i mobitel: slider iznad teksta, preko cijele širine. Visinu određuje natpis preko slike (logo i slogan) plus mali razmak gore i dolje, a slika ga popuni (cover). Tako nema velikih praznina iznad i ispod natpisa. */ @media (max-width:1024px){ .vb-hero-slika .g-cols > .wpb_column > .vc_column-inner{position:relative} .vb-hero-slika .w-slider{position:absolute!important;top:0;right:0;bottom:0;left:0;height:auto!important} .vb-hero-slika .w-slider-h, .vb-hero-slika .royalSlider, .vb-hero-slika .rsOverflow{height:100%!important;aspect-ratio:auto!important} .vb-hero-slika .w-slider-h > img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none} /* natpis više nije "zalijepljen" preko slidera nego određuje visinu */ .vb-hero-slika .g-cols > .wpb_column > .vc_column-inner > .w-vwrapper{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;height:auto!important;padding-top:36px!important;padding-bottom:36px!important} } @media (max-width:600px){ .vb-hero-slika .g-cols > .wpb_column > .vc_column-inner > .w-vwrapper{padding-top:24px!important;padding-bottom:24px!important} } /* ===== G. GUMB U HEADERU ===== Zašto custom: Header Builder nema postavku da tekst gumba ostane u jednom redu, pa se na užim laptopima "Naručite pregled" sa strelicom lomio u dva reda. */ .l-header .w-btn{white-space:nowrap} /* ===================================================================== * H. INFO OKVIR U HEROJU (naslovnica, ispod gumba) * Zašto custom: tema daje istu debljinu kao ostatak teksta (600), pa se * podebljani dijelovi ne bi vidjeli. Tekst i ikona mijenjaju se u Impreza Text elementu * s Extra class vb-info, podebljanje se radi s u samom tekstu. * ===================================================================== */ .vb-info strong{font-weight:800} /* Ikona iste veličine kao ikone u gumbima iznad (17 px), a tekst koji se prelama počinje točno ispod prve riječi ("Dežurni"), ne ispod ikone */ .vb-info .w-text-h{display:flex;align-items:center;gap:10px} .vb-info .w-text-h > i{font-size:17px;margin:0!important;flex-shrink:0} /* Tekst je podijeljen u dva dijela ( u tekstu elementa). Dio se nikad ne lomi, pa tekst stoji u jednom redu gdje stane, a inače se prelama samo između dijelova: "Dežurni veterinar vam je dostupan" / "svih 7 dana u tjednu 00-24 sata." */ .vb-info .vb-nw{white-space:nowrap} /* Ikona i tekst zajedno su na sredini okvira, kao tekst u gumbima iznad. Kad tekst ne stane u jedan red (okvir uži od 37em, otprilike 518 px), dva dijela idu jedan ispod drugoga, pa je blok teksta širok koliko i duži red i ostaje točno na sredini. */ .vb-info{container-type:inline-size} .vb-info .w-text-h{justify-content:center} @container (max-width:37em){.vb-info .vb-nw{display:block}} /* Dva reda (2026-10-14): svaki red je u tekstu elementa ("Dežurni veterinar ... 00-24." i "Obavezna telefonska najava ..."). Na računalu, laptopu i tabletu svaki red ostaje u jednom redu (veličina slova se po potrebi smanji prema širini okvira, vidi niže), a na mobitelu se red lomi samo između dijelova vb-nw. */ .vb-info .vb-red{display:block} @media (min-width:600.02px){.vb-info .vb-red{white-space:nowrap}.vb-info .vb-red .vb-nw{display:inline} /* Slova se smanje samo koliko treba da red stane u okvir (najviše do veličine iz Design opcija elementa). 27 px = ikona 17 px + razmak 10 px; 32 = širina duljeg reda u em. Ovisi o stvarnoj širini okvira, pa radi na svakoj širini ekrana, i između breakpointa. */ .vb-info .w-text-value{font-size:min(1em,calc((100cqi - 27px) / 32))}} /* Info okvir bez male ikone, velika blijeda rotirka u pozadini, okomito na sredini (naslovnica). Okvir je Vertical Wrapper "vb-ima-zig vb-info-okvir" (izgled u Design opcijama), rotirka je Text element vb-zig. Ovdje je samo veličina slova bez mjesta za ikonu (isti princip kao gore: 32 = širina duljeg reda u em). */ @media (min-width:600.02px){.vb-info.vb-info-bez-ikone .w-text-value{font-size:min(1em,calc(100cqi / 32))}} /* ===================================================================== * I. DRUGI RED NASLOVA NA NASLOVNICI ("Dostupni na lokacijama: Lanište i Prečko") * Zašto custom: Impreza "Highlighted Heading" nema veličinu slova po dijelu naslova. * Drugi red je duži od prvog, pa je ovdje manji, uvijek u jednom redu, iste širine kao * "Dežurni veterinar Zagreb" i s malim razmakom od prvog reda (margin-top), a naglasak ostaje na prvom redu. Veličina se mijenja sama * jer prati veličinu naslova (em). Tekst, boja i debljina mijenjaju se u Impreza elementu * (Extra class vb-naslov). * ===================================================================== */ .vb-naslov .w-highlight-heading-item.n2{display:block;margin-top:0.6em;font-size:0.637em;white-space:nowrap} /* ===================================================================== * J. SLIKA UZ NASLOV "SVE ŠTO VAŠ LJUBIMAC TREBA" (naslovnica, sekcija Usluge) * Zašto custom: Impreza slika ima fiksni omjer, a ovdje slika mora biti točno visoka koliko * i tekst lijevo (vrh u liniji s "USLUGE", dno s odlomkom), na svakoj širini ekrana. * Kako se koristi: sliku mijenjate u Impreza elementu Image (stupac s Extra class * vb-usluge-slika). Stupac je 1/4 reda pa je slika široka točno kao zadnja kartica ispod. * Na tabletu slika ide ispod teksta, preko cijele širine, u omjeru 2:1. Na mobitelu (do 600px) * slika je visoka 225px, da potpis ne prekriva lica. * ===================================================================== */ @media (min-width:1024.02px){ .vb-usluge-uvod{align-items:stretch} .vb-usluge-slika{align-self:stretch} .vb-usluge-slika > .vc_column-inner{height:100%} .vb-usluge-slika .w-image{position:absolute!important;top:0;right:0;bottom:0;left:0;margin:0!important} } .vb-usluge-slika > .vc_column-inner{position:relative} .vb-usluge-slika .w-image-h,.vb-usluge-slika .w-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%} .vb-usluge-slika .w-image{border-radius:16px;overflow:hidden} /* Stupac s tekstom i gumbom uz sliku (klasa vb-cta-stupac na stupcu, npr. Usluge "Krenite od prvog pregleda"): na desktopu su nadnaslov i naslov u ravnini s gornjim rubom slike, gumb s donjim rubom slike, a odlomak (Text Block) je okomito centriran u prostoru između naslova i gumba. */ @media (min-width:1024.02px){ .vb-cta-stupac > .vc_column-inner{display:flex!important;flex-direction:column!important;height:100%} .vb-cta-stupac > .vc_column-inner > :first-child{margin-top:0!important} .vb-cta-stupac .wpb_text_column{margin-top:auto!important;margin-bottom:auto!important} .vb-cta-stupac .vb-gumbi{margin-top:12px!important} /* isto koliko i razmak ispod naslova, da je odlomak točno u sredini */ } @media (max-width:1024px){ .vb-usluge-slika .w-image{aspect-ratio:2/1} .vb-usluge-uvod{row-gap:32px!important} } @media (max-width:600px){ .vb-usluge-uvod{row-gap:20px!important} .vb-usluge-slika .w-image{aspect-ratio:auto;height:225px} } /* Potpis na slici (Impreza Text element s Extra class vb-potpis, tekst se mijenja u elementu): poluprozirna bijela pločica (60%) s mutnom pozadinom u donjem lijevom kutu slike, da se slika vidi kroz nju. Boja teksta #1c2a40 je odabrana mjerenjem: i na najtamnijem dijelu slike kontrast je 5.2:1 (Google PageSpeed / WCAG AA traži najmanje 4.5:1). Ako se smanji prozirnost ili posvijetli tekst, ponovno provjeriti. */ .vb-usluge-slika .vb-potpis,.vb-foto .vb-potpis{position:absolute;left:24px;bottom:12px;margin:0!important;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;padding:7px 10px;font-size:12px;line-height:1.35;color:#1c2a40;box-shadow:0 6px 18px rgba(10,26,51,.18);z-index:2} .vb-usluge-slika .vb-potpis strong,.vb-foto .vb-potpis strong{color:#0a1a33;font-weight:700} /* Lijevi razmak potpisa = razmak ikone od ruba kartice usluge ispod (Grid Layout 1074), pa su poravnati: 24px na desktopu, laptopu i tabletu (2px obrub + 22px padding), 20px na mobitelu (2px + 18px). */ @media (max-width:600px){ .vb-usluge-slika .vb-potpis{left:20px} } /* ===================================================================== * K. KARTICE LOKACIJA NA NASLOVNICI (sekcija #lokacije, red s Extra class vb-lok) * Zašto custom: kartice su iste visine, ali opis Laništa je duži, pa bi gumbi u dvije * kartice stajali na različitoj visini. Ovdje su gumbi uvijek na dnu kartice, jedan ispod * drugoga preko cijele širine, a tekst gumba se smije prelomiti na uskim karticama. * Sav tekst, gumbi i boje mijenjaju se u Impreza elementima. * ===================================================================== */ .vb-lok > .wpb_column > .vc_column-inner{display:flex!important;flex-direction:column!important;flex-grow:1;width:100%} .vb-lok .vb-gumbi{margin-top:auto!important;flex-direction:column!important} .vb-lok .vb-gumbi > *{width:100%;min-width:0!important;flex:none!important} .vb-lok .vb-gumbi .w-btn{white-space:normal} /* Uži laptopi (1025-1180 px): stupci su uski, pa je razmak između slike i teksta manji, a u karticama je kvačica iznad naslova, da tekst kartice ima više mjesta u retku. Od 1181 px kartice izgledaju kao na računalu (kvačica lijevo). */ @media (min-width:1024.02px) and (max-width:1180px){ .vb-zasto{--columns-gap:40px!important} .vb-zasto .w-iconbox.iconpos_left{display:block} .vb-zasto .w-iconbox.iconpos_left .w-iconbox-icon{margin:0 0 10px!important} } /* ===================================================================== * M. ZNAČKA "OTVORENO / ZATVORENO" NA KARTICAMA LOKACIJA (Kontakt) * Zašto custom: značka mora stajati preko slike ili karte u kutu kartice, a boja ovisi o * stanju koje računa vb.js. Kako se koristi: Impreza Text element odmah iza slike ili karte, * Extra class "vb-status vb-status-laniste vb-status-kratko vb-lok-znacka" (ili -precko), * ikona sata. Upisani tekst (radno vrijeme) vidi se dok se skripta ne učita. * ===================================================================== */ /* Značka sjeda u donji lijevi kut slike ili karte: ima stalnu visinu (38 px, mobitel 34 px), negativni gornji razmak je povlači 16 px iznad donjeg ruba slike, a donji razmak vraća tekst ispod. */ .vb-lok-znacka.vb-status{position:relative!important;z-index:3;display:flex!important;align-items:center; width:fit-content!important;max-width:calc(100% - 32px);height:38px;box-sizing:border-box; margin:-54px 0 16px 16px!important;padding:0 16px 0 12px!important; background:#fff!important;border:0!important;border-radius:12px!important; font-size:14px!important;line-height:1.2;color:#0a1a33!important;white-space:nowrap;box-shadow:0 6px 20px rgba(10,26,51,.22)} /* Karta Prečkog iste visine kao slika Laništa (16:9), da su naslovi u obje kartice u istoj liniji */ .vb-kontakt-lok .w-map{aspect-ratio:16/9;height:auto!important} .vb-kontakt-lok .w-map > *{height:100%!important} /* Stranica Održavanje (klasa vb-odr-lok): karta Prečkog u istom omjeru 3:2 kao slika Laništa, da su kartice jednake */ .vb-odr-lok .w-map{aspect-ratio:3/2} .vb-status.vb-lok-znacka.is-open,.vb-status.vb-lok-znacka.is-closed{background:#fff!important;border:0!important} .vb-lok-znacka .w-text-h{display:flex;align-items:center;gap:8px} .vb-lok-znacka .w-text-h > i{font-size:16px;margin:0!important} .vb-lok-znacka.is-open .w-text-h > i{color:#15803d} .vb-lok-znacka.is-closed .w-text-h > i{color:#b91c1c} .vb-lok-znacka .vb-status-stanje{font-weight:800} @media (max-width:600px){ .vb-lok-znacka.vb-status{height:34px;margin:-46px 0 12px 12px!important;font-size:13px!important;padding:0 14px 0 10px!important} } } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * N. OKVIR "HITNO STANJE?" U MEGA MENIJU USLUGA (blok 845) * Zašto custom: Impreza stupac ne može gurnuti gumb na dno stupca niti staviti tekst iznad * ikone u pozadini. Okvir je visok koliko i popis usluga, pa gumb ide na dno, a velika blijeda * sirena (Text element s klasom vb-zig, izgled u Design opcijama) popunjava prazan prostor. * Kako se koristi: stupac ima Extra class vb-hitno-okvir, gumb je u Horizontal Wrapperu vb-gumbi. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .vb-hitno-okvir{align-self:stretch} .vb-hitno-okvir > .vc_column-inner{display:flex!important;flex-direction:column!important;flex:1 1 auto;width:100%} .vb-hitno-okvir .vb-hitno-broj{margin-top:auto!important} /* broj i gumb zajedno na dnu okvira */ .vb-hitno-okvir .vb-gumbi{margin-top:14px!important} .vb-hitno-okvir > .vc_column-inner > *:not(.vb-zig){position:relative;z-index:1} .vb-hitno-okvir .vb-zig{z-index:0;pointer-events:none} .vb-hitno-okvir .vb-zig .w-text-h > i{margin:0!important} /* Isto pravilo za bilo koji stupac s velikom blijedom ikonom u pozadini (Extra class vb-ima-zig na stupcu, ikona je Text element s klasom vb-zig), npr. kotačići na stranici Održavanje: sadržaj ostaje iznad ikone */ .vb-ima-zig > .vc_column-inner > *:not(.vb-zig){position:relative;z-index:1} .vb-ima-zig .vb-zig{z-index:0;pointer-events:none} .vb-ima-zig .vb-zig .w-text-h > i{margin:0!important} /* Stranica Održavanje: ispod sadržaja nema bijelog ruba. Pozadina cijele stranice je ista siva kao sekcija s karticom (Extra class vb-odr-puni na retku), raspored ostaje nepromijenjen. */ html:has(.vb-odr-puni),body:has(.vb-odr-puni),.l-canvas:has(.vb-odr-puni){background:#f1f5fa!important} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * O. OPISI NA SLIKAMA U SLIDERU U HEROJU (stupac vb-hero-slika, Impreza Image Slider s uključenim * "Show title and description") * Zašto custom: Impreza opis slike stavlja preko cijele širine slike u svom stilu. Ovdje izgleda isto * kao potpis na slici u sekciji Usluge: poluprozirna bijela pločica u donjem lijevom kutu. * Kako se koristi: tekst se mijenja u medijateci, polje Caption (naslov, podebljano) i * Description (drugi red). Slike i redoslijed mijenjaju se u Image Slideru. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* Ako hero slider ima fotografije bez natpisa (Extra class vb-hero-foto uz vb-hero-slika na stupcu), na tabletu i mobitelu visinu određuje omjer slike: 3:2 na tabletu, 4:3 na mobitelu. */ @media (max-width:1024px){ .vb-hero-foto .g-cols > .wpb_column > .vc_column-inner{aspect-ratio:3/2} } @media (max-width:600px){ .vb-hero-foto .g-cols > .wpb_column > .vc_column-inner{aspect-ratio:4/3} } .vb-hero-slika .w-slider .rsABlock{position:absolute!important;left:24px!important;right:auto!important;bottom:24px!important;top:auto!important;width:auto!important;max-width:calc(100% - 48px);margin:0!important;padding:9px 14px!important;background:rgba(255,255,255,.6)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 6px 18px rgba(10,26,51,.18);text-align:left;text-shadow:none!important;z-index:5} .vb-hero-slika .w-slider .w-slider-item-title{font-size:15px;font-weight:700;line-height:1.35;color:#0a1a33;margin:0} .vb-hero-slika .w-slider .w-slider-item-description{font-size:13px;line-height:1.4;color:#1c2a40;margin:0;opacity:1!important} /* Impreza opisu daje 50% prozirnosti, što je premalo kontrasta */ @media (max-width:600px){ .vb-hero-slika .w-slider .rsABlock{left:20px!important;bottom:12px!important;max-width:calc(100% - 40px);padding:7px 10px!important} .vb-hero-slika .w-slider .w-slider-item-title{font-size:13px} .vb-hero-slika .w-slider .w-slider-item-description{font-size:12px} } /* Stupac čiji zadnji okvir sjeda na dno, u ravninu s dnom susjednog stupca (Extra class vb-dno-stupac na stupcu), npr. O nama, Profil tvrtke: okvir s logom poravnat s dnom okvira s podacima. Impreza ne može element gurnuti na dno stupca. Kad su stupci jedan ispod drugoga, ne primjenjuje se. */ @media (min-width:600.02px){ .vb-dno-stupac > .vc_column-inner{display:flex!important;flex-direction:column!important;height:100%} .vb-dno-stupac > .vc_column-inner > :last-child{margin-top:auto!important} .vb-dno-stupac > .vc_column-inner > :nth-last-child(2){margin-bottom:40px!important} } /* Slogan preko slike (O nama): veličina teksta prati širinu SLIKE, a ne ekrana (jedinica cqw u Design opcijama teksta). Tako je tekst proporcionalan i kad je slika mala uz tekst i kad je preko cijele širine. Stupac sa slikom ima Extra class vb-slogan-slika. */ .vb-slogan-slika > .vc_column-inner{container-type:inline-size} .vb-slogan-slika{align-self:flex-start} /* stupac visok koliko slika, da slogan bude točno u sredini slike */ /* Footer: brze poveznice (Additional Menu s klasom vb-footer-meni) u jednom centriranom retku na računalu, a na tabletu i mobitelu prelamaju se u više centriranih redova umjesto dugog stupca. Impreza na mobitelu horizontalni izbornik pretvara u stupac i nema opciju centriranja. */ html body .l-footer .w-menu.vb-footer-meni ul.menu{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:center!important;gap:8px 28px} html body .l-footer .w-menu.vb-footer-meni ul.menu > li{margin:0!important;width:auto!important;display:block!important} @media (max-width:600px){html body .l-footer .w-menu.vb-footer-meni ul.menu{gap:8px 20px}} /* Footer: pozadina cijelog footera ista kao gornji dio, da se na ekranima s povećanjem (npr. 125%) između sekcija ne pojavi svijetla linija od 1px (zaokruživanje visina sekcija). */ .l-footer{background-color:#071528} /* Footer, info stupci (Lanište, Prečko, Radno vrijeme, Dežurni veterinar): Builder za Tablets ima 2 stupca, ali tema stupce slaže u jedan već ispod 768px (Theme Options, Columns Stacking Width). Tu je razlika između tableta (601 px naviše) i mobitela (do 600 px), pa na manjim tabletima (npr. iPad Mini, 744 px) ostavljamo 2 stupca kao na ostalim tabletima. Mobitel ostaje 1 stupac. */ @media (min-width:600.02px) and (max-width:767px){ .l-footer .g-cols.via_grid.tablets-cols_2.stacking_default{grid-template-columns:repeat(2,1fr);--cols:2} } /* Fotografija s potpisom (Vertical Wrapper s Extra class vb-foto, unutra Image i Text s klasom vb-potpis), npr. naslovnica, Česta pitanja ispod gumba. Omjer slike i zaobljenje se postavljaju u Image elementu (Builder), ovdje je samo ono što Builder nema: wrapper kao referenca za potpis, rezanje slike po zaobljenju i položaj potpisa. Izgled potpisa je zajednički s vb-usluge-slika (gore). */ .vb-foto{position:relative} .vb-foto .w-image{border-radius:16px;overflow:hidden} .vb-foto .vb-potpis{left:20px;bottom:20px} /* Stupac s fotografijom (klasa vb-foto-stupac na stupcu, npr. naslovnica Česta pitanja): od 1024px naviše fotografija popunjava prostor ispod gumba do dna susjednog stupca, pa je donji rub slike u ravnini s donjim rubom pitanja. Kad se otvori drugo pitanje, slika prati visinu (najmanje 200px). Ispod 1024px vrijedi omjer postavljen u Image elementu, jer bi na uskom tabletu (768) fotografija s 10 pitanja postala uska i visoka traka. */ @media (min-width:768px) and (max-width:1023px){ .vb-foto-stupac .vb-foto .w-image-h{aspect-ratio:4/5} .vb-foto-stupac .vb-foto .w-image-h > div{display:none} .vb-foto-stupac .vb-foto .w-image img{width:100%;height:100%;object-fit:cover;object-position:center 40%} } @media (min-width:1024px){ .vb-foto-stupac{align-self:stretch} .vb-foto-stupac > .vc_column-inner{display:flex!important;flex-direction:column!important;height:100%} .vb-foto-stupac .vb-foto{flex:1 1 auto;min-height:200px} .vb-foto-stupac .vb-foto .w-image{position:absolute!important;top:0;right:0;bottom:0;left:0;margin:0!important} .vb-foto-stupac .vb-foto .w-image-h{height:100%} .vb-foto-stupac .vb-foto .w-image-h > div{display:none} .vb-foto-stupac .vb-foto .w-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 40%} } /* ========================================================================== P. Česta pitanja, kartice s ikonom (accordion s Extra class vb-faq) U Builderu: Accordion (Extra class vb-faq, ikona kontrole Chevron, razmak 10px, naslov 17px), svaka sekcija ima svoju ikonu (Icon, pozicija lijevo). Pitanje o hitnim stanjima ima Extra class vb-faq-hitno (crvena ikona). Ovdje je samo izgled koji Builder nema: bijela kartica po pitanju, ikona u kvadratiću, plavi obrub otvorenog pitanja, odgovor poravnat s naslovom pitanja. ========================================================================== */ .vb-faq .w-tabs-section{background:#fff!important;border:1px solid #e1e8f1!important;border-radius:14px!important;overflow:hidden;transition:border-color .2s,box-shadow .2s} .vb-faq .w-tabs-section:not(.active):hover{border-color:#b9cbe3!important} .vb-faq .w-tabs-section.active{border-color:#014286!important;box-shadow:0 0 0 1px #014286} .vb-faq .w-tabs-section-header{padding:14px 18px 14px 14px!important;align-items:center;column-gap:14px;border-radius:0!important} .vb-faq .w-tabs-section-header > i{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;margin:0!important;border-radius:11px;background:#e8f0fa;color:#014286;font-size:18px;line-height:1} .vb-faq .vb-faq-hitno .w-tabs-section-header > i{background:#fdecec;color:#b91c1c} .vb-faq .w-tabs-section-title{color:#0a1a33} .vb-faq .w-tabs-section-control{color:#6b7a8f} .vb-faq .w-tabs-section.active .w-tabs-section-control{color:#014286} /* Odgovor počinje u ravnini s naslovom: 14px lijevi razmak + 42px ikona + 14px razmak = 70px */ .vb-faq .w-tabs-section-content{padding:0 18px 18px 70px!important} .vb-faq .w-tabs-section-content-h{color:#3b4a5e} @media (max-width:600px){ .vb-faq .w-tabs-section-header{padding:10px 14px 10px 10px!important;column-gap:12px} .vb-faq .w-tabs-section-header > i{width:38px;height:38px;font-size:16px;border-radius:10px} /* na mobitelu odgovor ide preko cijele širine kartice da tekst ne bude preuzak */ .vb-faq .w-tabs-section-content{padding:2px 16px 16px 16px!important} } /* ===================================================================== Q. PRISTUPAČNOST (PageSpeed / Lighthouse) Zašto: Impreza Person element opisu uloge (npr. "dr. med. vet.") daje prozirnost 0.5, pa je kontrast samo oko 3:1 (treba 4.5:1). Ovdje uloga dobiva punu boju "Faded text" iz Theme Options > Colors (kontrast 6:1). Linkovi unutar teksta (npr. broj telefona u odgovoru FAQ) moraju se razlikovati i po nečemu osim boje, pa su podcrtani. Theme Options opcija "Underlining Links" nije korištena jer podcrtava i header, mega meni i kartice; ovo pravilo vrijedi samo za linkove u odlomcima teksta. ===================================================================== */ .w-person-role{opacity:1;color:var(--color-content-faded)} .l-main .wpb_text_column p a:not(.w-btn), .l-main .w-tabs-section-content p a:not(.w-btn), .l-main .w-post-elm.post_content p a:not(.w-btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em} /* ===================================================================== R. IKONE DRUŠTVENIH MREŽA BEZ FONTA (brzina) Zašto custom: ikone Instagram, Facebook i YouTube postoje samo u fontu Font Awesome Brands (75 KB), koji se učitavao na svakoj stranici samo zbog nekoliko gumba. Ovdje su te tri ikone nacrtane kao mali SVG (stil ikona bez ispune, crteži prema Feather Icons, MIT licenca) pa se font više ne učitava. Kako se koristi: gumbu ili IconBoxu u builderu upisati Extra class vb-ikona-instagram, vb-ikona-facebook ili vb-ikona-youtube. U polju Icon ostaje obična ikona (far|camera, far|thumbs-up, far|play): ona određuje mjesto i veličinu, a ovdje se umjesto nje crta znak mreže u boji teksta. Ne birati ikone iz skupine Brands (fab|...), jer se onda font opet učitava. ===================================================================== */ .vb-ikona-instagram i::before, .vb-ikona-facebook i::before, .vb-ikona-youtube i::before{content:""!important;display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;background:currentColor;-webkit-mask:var(--vb-ikona) center/contain no-repeat;mask:var(--vb-ikona) center/contain no-repeat} .vb-ikona-instagram{--vb-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='%23000'/%3E%3C/svg%3E")} .vb-ikona-facebook{--vb-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E")} .vb-ikona-youtube{--vb-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E")} /* ===================================================================== S. BEZ POMAKA IZGLEDA DOK SE UČITAVAJU FONTOVI (CLS) Zašto custom: stranica se prvo nacrta zamjenskim fontom (Arial), a kad stignu Onest i Bricolage Grotesque, tekst promijeni širinu: izbornik se pomakne, a sadržaj ispod heroja spusti se ili digne oko 57 px (PageSpeed: Cumulative Layout Shift). Impreza ne nudi podešavanje zamjenskog fonta. 1) "Onest Fallback" i "Bricolage Fallback" su Arial (na Linuxu Liberation Sans) podešen na širinu i visinu pravih fontova (size-adjust, izmjereno u pregledniku); na Androidu isto preko fonta Roboto ("... Fallback R"), pa zamjena fonta više ne pomiče sadržaj. Dodani su u font varijable teme. VAŽNO: ako se u Theme Options > Typography promijeni font, ovaj blok uskladiti ili obrisati (vrijednosti vrijede samo za Onest i Bricolage Grotesque). 2) Ikone (Font Awesome Regular) dok se font ne učita imaju krivu širinu, pa se gumbi i tekst u headeru pomaknu. Ovdje ikone u headeru, gumbima i Text elementima dobiju točnu širinu unaprijed (iste kao kad se font učita, pa se izgled ne mijenja). Nova ikona radi i bez ovoga, samo se može malo pomaknuti pri učitavanju; po želji je dodati u odgovarajuću skupinu širine. ===================================================================== */ @font-face{font-family:"Onest Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");font-weight:100 500;size-adjust:104%;ascent-override:93%;descent-override:30%;line-gap-override:0%} @font-face{font-family:"Onest Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:501 900;size-adjust:102.5%;ascent-override:94.6%;descent-override:30.2%;line-gap-override:0%} @font-face{font-family:"Bricolage Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Helvetica Bold");font-weight:500 900;size-adjust:91%;ascent-override:102%;descent-override:30%;line-gap-override:0%} /* isto za Android, gdje nema Arial nego Roboto (vrijednosti izračunate iz datoteka fontova) */ @font-face{font-family:"Onest Fallback R";src:local("Roboto"),local("Roboto-Regular");font-weight:100 500;size-adjust:104.9%;ascent-override:92.5%;descent-override:29.1%;line-gap-override:0%} @font-face{font-family:"Onest Fallback R";src:local("Roboto Medium"),local("Roboto-Medium");font-weight:501 900;size-adjust:105.9%;ascent-override:91.6%;descent-override:28.8%;line-gap-override:0%} @font-face{font-family:"Bricolage Fallback R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:500 900;size-adjust:107.7%;ascent-override:86.4%;descent-override:25.1%;line-gap-override:0%} html:root{--font-family:Onest,"Onest Fallback","Onest Fallback R",sans-serif;--h1-font-family:"Bricolage Grotesque","Bricolage Fallback","Bricolage Fallback R",sans-serif} :is(.l-header,.w-btn,.w-text) i:is(.fa-siren-on,.fa-x-ray,.fa-bone,.fa-book-open,.fa-users,.fa-user-plus,.fa-procedures,.fa-graduation-cap,.fa-handshake){width:1.25em} :is(.l-header,.w-btn,.w-text) i:is(.fa-eye,.fa-images,.fa-clinic-medical,.fa-download){width:1.125em} :is(.l-header,.w-btn,.w-text) i:is(.fa-brain){width:1.0625em} :is(.l-header,.w-btn,.w-text) i:is(.fa-clock,.fa-phone-alt,.fa-syringe,.fa-stethoscope,.fa-microscope,.fa-th-large,.fa-street-view,.fa-info-circle,.fa-check-circle,.fa-envelope,.fa-search,.fa-search-plus,.fa-heart,.fa-play-circle,.fa-paper-plane,.fa-briefcase-medical,.fa-paw){width:1em} :is(.l-header,.w-btn,.w-text) i:is(.fa-allergies,.fa-vial){width:.9375em} :is(.l-header,.w-btn,.w-text) i:is(.fa-tooth,.fa-cut,.fa-building,.fa-calendar-check,.fa-user-md,.fa-arrow-right,.fa-check-square){width:.875em} :is(.l-header,.w-btn,.w-text) i:is(.fa-map-marker-alt,.fa-clipboard-list,.fa-file-pdf){width:.75em} :is(.l-header,.w-btn,.w-text) i:is(.fa-tint){width:.6875em} :is(.l-header,.w-btn,.w-text) i:is(.fa-chevron-right){width:.5em} /* strelice uz Usluge i O nama u izborniku (desktop) */ .w-nav.type_desktop .w-nav-arrow{width:.75em} /* ===================================================================== T. OKVIR ZA HITNO U KARTICAMA ORDINACIJA, GUMB ZA PAUZU SLIDERA, NIŽA SLIKA NA MOBITELU 1) Kartice ordinacija u sekciji Lokacije imaju Impreza IconBox (Extra class vb-hitno-zatvoreno) "Hitno stanje? Nazovite dežurnog veterinara". Tekst i broj se mijenjaju u builderu. Zašto custom: okvir se vidi samo kad je ordinacija zatvorena, a to stanje računa vb.js (klasa is-closed na kartici); Impreza to ne može. 2) Gumb Zaustavi / Pokreni na slideru dodaje vb.js (klasa vb-slider-a11y), ovdje je izgled. 3) Slika u heroju na mobitelu je u omjeru 2:1 (klasa vb-hero-foto-2x1 uz vb-hero-foto), da naslov, tekst i oba gumba stanu u prvi zaslon. 4) i 5) natpis slidera: vidi komentare na kraju bloka. ===================================================================== */ .vb-status-kartica:not(.is-closed) .vb-hitno-zatvoreno{display:none} .vb-hitno-zatvoreno .w-iconbox-title{font-weight:700;color:#0a1a33} .vb-hitno-zatvoreno .w-iconbox-text a{color:#b91c1c;font-weight:700;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap} .vb-slider-pauza{position:absolute;top:12px;right:12px;z-index:20;width:36px;height:36px;padding:0;border:0;border-radius:.8em;background:rgba(255,255,255,.85);cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 8px rgba(10,26,51,.15)} .vb-slider-pauza:hover{background:#fff} .vb-slider-pauza::before{content:"";box-sizing:border-box;width:10px;height:12px;border-left:3px solid #0a1a33;border-right:3px solid #0a1a33} .vb-slider-pauza.is-stoji::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #0a1a33;margin-left:3px} .vb-slider-pauza:focus-visible,.vb-slider-a11y .rsArrow:focus-visible{outline:3px solid #014286;outline-offset:2px} @media (max-width:600px){.vb-hero-foto.vb-hero-foto-2x1 .g-cols > .wpb_column > .vc_column-inner{aspect-ratio:2/1}} /* 4) Natpis slidera ispod slike (klasa vb-natpis-ispod na stupcu slidera): na tabletu i mobitelu pločica s natpisom stoji pola na slici, a pola ispod nje, puna bijela sa sjenom. Slider inače reže sve što izlazi iz okvira, pa se to ovdje dopušta samo uz tu klasu. */ /* 5) Natpis se izmjenjuje zajedno sa slikom: svaki natpis je stalno u svojoj slici (pa se novi pojavljuje s novom slikom), a stari nestaje u istom trajanju kao prijelaz slike (1 s). Klasu vb-natpis-izlazi postavlja vb.js. Samo opacity, bez utjecaja na raspored i brzinu. */ .vb-slider-a11y .rsSlide .rsABlock{display:block!important;opacity:1!important;transition:opacity 1s ease!important} .vb-slider-a11y .rsSlide .rsABlock.vb-natpis-izlazi{opacity:0!important} @media (max-width:1024px){ .vb-hero-slika.vb-natpis-ispod{position:relative;z-index:2;margin-bottom:calc(var(--vb-natpis-pola,24px) - 16px)} .vb-natpis-ispod .w-slider,.vb-natpis-ispod .rsOverflow,.vb-natpis-ispod .rsSlide{overflow:visible!important} .vb-hero-slika.vb-natpis-ispod .w-slider .rsABlock{top:auto!important;bottom:calc(var(--vb-natpis-pola,24px) * -1)!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 6px 20px rgba(10,26,51,.14)} } @media (min-width:600.02px) and (max-width:1024px){.vb-hero-slika.vb-natpis-ispod{--vb-natpis-pola:28px}} /* 6) Računalo i laptop: gornji rub natpisa slidera u ravnini s gornjim rubom kartica ordinacija lijevo (VB Lanište, VB Prečko). Kartice i slider završavaju u istoj liniji, pa je razmak natpisa od dna slike = visina kartica (72 px) - visina natpisa (56 px) = 16 px (izmjereno). */ @media (min-width:1024.02px){.vb-hero-slika .w-slider .rsABlock{bottom:16px!important}} /* ===================================================================== U. TOČKA STANJA UZ BROJEVE ORDINACIJA U GORNJOJ TRACI HEADERA Zašto custom: Header Builder nema element koji mijenja boju prema radnom vremenu. Kako se koristi: Text elementu u headeru (npr. "Lanište 01 3887 543") upisati Extra class vb-status-tocka i vb-status-laniste (ili vb-status-precko). vb.js mu doda klasu is-open ili is-closed, a ovdje se na ikoni slušalice crta točka kao značka (gornji desni kut, obrub u boji gornje trake iz Header Buildera, varijabla --color-header-top-bg): svijetlozelena kad ordinacija radi, svijetlocrvena kad ne radi (kontrast na tamnoplavoj traci 9:1 i 6,6:1), s blagim pulsiranjem. Dok se skripta ne učita točka je siva, pa se ništa ne pomiče. Uz smanjenje animacija u sustavu točka ne pulsira. ===================================================================== */ .vb-status-tocka .w-text-h > i{position:relative;margin-right:8px} .vb-status-tocka .w-text-h > i::after{content:"";position:absolute;top:-5px;right:-6px;box-sizing:border-box;width:11px;height:11px;border:2px solid var(--color-header-top-bg,#012f60);border-radius:50%;background:rgba(255,255,255,.45)} .vb-status-tocka.is-open .w-text-h > i::after{background:#86efac;animation:vb-puls-zeleno 2s ease-out infinite} .vb-status-tocka.is-closed .w-text-h > i::after{background:#fca5a5;animation:vb-puls-crveno 2s ease-out infinite} @keyframes vb-puls-zeleno{0%{box-shadow:0 0 0 0 rgba(134,239,172,.75)}70%{box-shadow:0 0 0 6px rgba(134,239,172,0)}100%{box-shadow:0 0 0 0 rgba(134,239,172,0)}} @keyframes vb-puls-crveno{0%{box-shadow:0 0 0 0 rgba(252,165,165,.75)}70%{box-shadow:0 0 0 6px rgba(252,165,165,0)}100%{box-shadow:0 0 0 0 rgba(252,165,165,0)}} @media (prefers-reduced-motion:reduce){.vb-status-tocka .w-text-h > i::after{animation:none!important}} /* Ista točka na ikoni slušalice u karticama ordinacija na Kontaktu. Kartica (stupac) ima Extra class vb-hover vb-status-tocka vb-status-laniste (ili -precko) i poveznicu tel:, pa vrijede i oblačić i poruka izvan radnog vremena (blok V). Boje prate tekst statusa u kartici (zelena / crvena), obrub je boje kvadratića iza ikone da točka izgleda izrezano. */ .vb-status-tocka .w-iconbox-icon > i{position:relative} .vb-status-tocka .w-iconbox-icon > i::after{content:"";position:absolute;top:-5px;right:-7px;box-sizing:border-box;width:12px;height:12px;border:2px solid #e8f0fa;border-radius:50%;background:#94a3b8} .vb-status-tocka.is-open .w-iconbox-icon > i::after{background:#15803d;animation:vb-puls-zeleno 2s ease-out infinite} .vb-status-tocka.is-closed .w-iconbox-icon > i::after{background:#b91c1c;animation:vb-puls-crveno 2s ease-out infinite} @media (prefers-reduced-motion:reduce){.vb-status-tocka .w-iconbox-icon > i::after{animation:none!important}} .vb-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* ===== V. OBLAČIĆ UZ BROJEVE U HEADERU ===== Zašto custom: Impreza nema oblačić koji ovisi o radnom vremenu, a obični opis za miš (title) preglednik smješta sam i zna izaći izvan ekrana. Oblačić stvara vb.js i smješta ga ispod broja, uvijek unutar ekrana (16 px od ruba); strelica pokazuje na broj (--vb-strelica). je-info: kratko stanje mišem ili tipkovnicom. je-poruka: klik na broj izvan radnog vremena. Gumb za hitna stanja koristi Impreza stil gumba 7 (isti kao gumb u headeru). */ .vb-oblacic{position:fixed;top:0;left:0;z-index:10000;box-sizing:border-box;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:12px;background:#fff;color:var(--color-content-text);font-size:14px;line-height:1.45;font-weight:400;text-align:center;box-shadow:0 12px 32px rgba(1,47,96,.22),0 2px 6px rgba(1,47,96,.12);animation:vb-oblacic-ulaz .15s ease-out} .vb-oblacic[hidden]{display:none} .vb-oblacic:focus{outline:none} .vb-oblacic::before{content:"";position:absolute;top:-6px;left:var(--vb-strelica,50%);width:12px;height:12px;margin-left:-6px;background:#fff;border-radius:2px 0 0 0;transform:rotate(45deg)} .vb-oblacic.je-info{white-space:nowrap} .vb-oblacic-stanje{font-weight:600} .vb-oblacic-stanje.is-open{color:#15803d} .vb-oblacic-stanje.is-closed{color:#b91c1c} .vb-oblacic.je-poruka{width:310px;padding:18px 20px 16px} .vb-oblacic.je-poruka p{margin:0 0 8px} .vb-oblacic .vb-oblacic-naslov{padding:0 22px;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-content-heading)} .vb-oblacic .w-btn{display:flex;justify-content:center;width:100%;margin:12px 0 10px;font-size:14px;white-space:nowrap} .vb-oblacic-ipak{display:inline-block;padding:4px 0;font-size:13px;color:var(--color-content-link);text-decoration:underline} .vb-oblacic-x{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--color-content-faded);font-size:16px;cursor:pointer} .vb-oblacic-x:hover{background:var(--color-content-bg-alt);color:var(--color-content-heading)} @keyframes vb-oblacic-ulaz{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.vb-oblacic{animation:none}} /* ===== W. OZNAKA 00-24 NA GUMBU U IZBORNIKU ===== Zašto custom: Font Awesome nema ikonu 0-24, a polje za ikonu u Impreza gumbu prima samo ikone. Kako se koristi: gumbu u Header Builderu upisati Extra class vb-oznaka-0024. Ikona u gumbu (sirena) ostaje upisana kao rezerva, a ovdje se umjesto nje crta oznaka "00-24" s obrubom u boji teksta gumba (na prelazak mišem postaje bijela zajedno s tekstom). Ispred oznake je rotirka (ista ikona far|siren-on, crta se u ::before) koja pulsira kao u ostalim gumbima (animacija vb-rotirka-puls iz bloka AG); oznaka 00-24 crta se u ::after. Oznaka je pravi tekst u fontu weba; čitači ekrana je preskaču jer gumb već kaže "Hitna stanja". Na mobitelu je oznaka manja, jer je i tekst gumba manji, a gumb stoji između logotipa i izbornika. */ .w-btn.vb-oznaka-0024 i{width:auto!important;font-style:normal} .w-btn.vb-oznaka-0024 i::before{content:"\e02e";content:"\e02e" / "";display:inline-block;margin-right:.45em;padding:0;border:0;border-radius:0;font-family:fontawesome;font-weight:400;letter-spacing:0;line-height:1;font-size:1.1em;vertical-align:-.04em;animation:vb-rotirka-puls 1.6s ease-in-out infinite} .w-btn.vb-oznaka-0024 i::after{content:"00-24";content:"00-24" / "";display:inline-block;padding:3px 5px 2px;border:1.5px solid currentColor;border-radius:6px;font-family:var(--font-family);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;vertical-align:.12em} @media (max-width:600px){.w-btn.vb-oznaka-0024 i::after{padding:2px 4px 1px;border-width:1px;border-radius:5px;font-size:9px;letter-spacing:0}} @media (prefers-reduced-motion:reduce){.w-btn.vb-oznaka-0024 i::before{animation:none!important}} /* Najuži mobiteli (do 350 px): gumb malo uži da rotirka i 00-24 stanu između logotipa i izbornika */ @media (max-width:350px){.w-btn.vb-oznaka-0024{padding-left:5px!important;padding-right:5px!important}.w-btn.vb-oznaka-0024 i{margin-right:3px!important}.w-btn.vb-oznaka-0024 i::before{margin-right:.25em}.w-btn.vb-oznaka-0024 i::after{padding:2px 3px 1px}} /* ===== X. RAZMAK STAVKI IZBORNIKA NA UŽIM EKRANIMA ===== Zašto custom: razmak stavki glavnog izbornika (Header Builder, Menu, Main Items Indents 20 px) nema zasebnu vrijednost po uređaju. Između 961 px (do 960 px je izbornik hamburger, Header Builder, Menu, Mobile Menu: 960px) i 1100 px izbornik, logotip i gumb "00-24 Hitna stanja" ne stanu u red, pa se razmak smanjuje na 14 px. Impreza razmak drži u varijabli --menu-items-gap na elementu izbornika. */ @media (max-width:1100px){.l-header .w-nav.type_desktop{--menu-items-gap:14px!important}} /* ===== Y. RUPE IZMEĐU BREAKPOINTA ===== Zašto custom: Impreza piše breakpointe kao (max-width:1024px) i (min-width:1025px). Kod skaliranja ekrana u Windowsima (125 %, 150 %) širina prozora zna biti decimalna, npr. 1024,8 px, i tada ne vrijedi ni jedno ni drugo. Tada se npr. donja traka "Nazovite / Naručite / Lokacije" (sekcija sakrivena na računalu i laptopu) pojavi na laptopu. Ovdje se "Hide on" opcije sekcija i elemenata (Live Builder) protežu i na tu rupu, a rupa pripada većem uređaju, kao i ostala pravila u vb.css. */ @media (min-width:1280.02px) and (max-width:1280.99px){body:not(.usb_preview) .hide_on_default{display:none!important}} @media (min-width:1024.02px) and (max-width:1024.99px){body:not(.usb_preview) .hide_on_laptops{display:none!important}} @media (min-width:600.02px) and (max-width:600.99px){body:not(.usb_preview) .hide_on_tablets{display:none!important}} /* ===== Z. HITNI OKVIR NA KONTAKTU (vrh stranice Kontakt) ===== Zašto custom: Impreza nema mjerenje veličine slova prema širini stupca ni vodeni žig ikonom. Sve ostalo (boje, pozadina, zaobljenje, razmaci, gumb, veličine slova) je u Live Builderu. - vb-hitno-plavo (Extra class stupca): stupac postaje "kontejner", pa veličine slova u Design opcijama mogu koristiti cqi (postotak širine stupca), npr. clamp(15px, calc(100cqi / 20.6), 26px). Tako se tekst skalira proporcionalno i prijelom je isti na svakoj širini. Dolje desno je velika blijeda rotirka (ikona far siren-on) kao vodeni žig. - vb-hitno-broj: broj se nikad ne lomi. - vb-hitno-tekst (Text Block): svaki u tekstu je zaseban red koji se ne lomi; podebljano je bijelo. - vb-status-bez: kratko stanje (vb-status-kratko) bez ružičaste ili zelene podloge, samo tekst. */ .vb-hitno-plavo{position:relative;overflow:hidden} .vb-hitno-plavo > .vc_column-inner{container-type:inline-size;position:relative;z-index:1} .vb-hitno-plavo::after{content:"\e02e";font-family:fontawesome;font-weight:400;font-style:normal;position:absolute;right:-6%;bottom:-14%;font-size:clamp(150px,22vw,280px);line-height:1;color:#fff;opacity:.07;pointer-events:none} .vb-hitno-broj,.vb-hitno-broj .w-text-h{white-space:nowrap} .vb-hitno-broj a,.vb-hitno-broj .w-text-h{color:inherit!important} .vb-hitno-tekst p{margin:0} .vb-hitno-tekst p+p{margin-top:.35em} .vb-hitno-tekst span{display:block;white-space:nowrap} .vb-hitno-tekst strong{color:#fff;font-weight:800} .vb-status.vb-status-bez.is-open,.vb-status.vb-status-bez.is-closed{background:none!important;border:0!important;padding:0!important;box-shadow:none!important} /* ===== AA. ZAŠTITA OD PRELJEVA ===== Zašto custom: pregled cijelog weba na širinama 1280-360 px našao je nekoliko mjesta gdje tekst ili gumb izlazi iz svog okvira (gumb s dugim tekstom u uskom stupcu na tabletu, kartice termina u formi na 360 px, značka stanja na Održavanju, tablica na Uvjetima i privatnosti). Pravila su općenita, pa vrijede i za buduće elemente. - Gumb nikad nije širi od svog stupca; ako tekst ne stane, lomi se u drugi red. - vb-gumbi: na tabletu i mobitelu gumbi su jedan ispod drugog (kao na mobitelu do sada). - Kartice termina u formi (Jutro, Podne, Poslijepodne) na mobitelu se slažu da stanu u red. - Široka tablica u tekstu dobije vodoravno pomicanje umjesto da se odreže. */ .l-main .w-hwrapper > .w-btn-wrapper{max-width:100%} .l-main .w-hwrapper:not(.wrap) > .w-btn-wrapper{flex-shrink:1;min-width:0} .l-main .w-btn{max-width:100%;text-align:center} .vb-gumbi .w-btn{white-space:normal} @media (max-width:1024px){.vb-gumbi > *{flex-basis:100%!important;min-width:0!important}} @media (max-width:600px){ .vb-forma .for_checkboxes .w-form-row-field{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))} .vb-forma .for_checkboxes .w-form-row-field>label{box-sizing:border-box;min-width:0;padding:0 10px;justify-content:center} } @media (max-width:1024px){.vb-lok-znacka.vb-status{white-space:normal!important;text-align:center}} .l-main .wpb_text_column table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* Gumbi u mega izbornicima (i u mobilnom izborniku) ne smiju izaći iz kartice: tekst se lomi ako ne stane. Gumb "Hitna stanja" u samom headeru i dalje ostaje u jednom redu (blok G). */ .l-header .w-nav .w-btn,.l-header .w-nav .w-btn-label{white-space:normal!important} .l-header .w-nav .w-btn{max-width:100%;text-align:center} /* ===== AB. MOBILNI IZBORNIK (hamburger, do 960 px) ===== Kroz Header Builder (Menu, Mobile Menu): fullscreen, header ostaje vidljiv, poravnanje lijevo, veličina slova, sve boje (pozadina je tamnoplavi gradijent, tekst bijeli, otvoreno svijetloplavo). Zašto custom: Impreza nema ikone uz stavke mobilnog izbornika, ni drugačiji izgled mega izbornika na mobitelu. Ovdje: - ikona uz svaku glavnu stavku: CSS klasa stavke u Izgled > Izbornici (vb-mi-pocetna, vb-mi-usluge, vb-mi-cjenik, vb-mi-onama, vb-mi-slucajevi, vb-mi-kontakt); nova stavka bez klase je i dalje vidljiva, samo bez ikone - stavke su okomito u sredini, s tankom crtom između; izbornik se uvijek može skrolati (sve stavke ostaju) - mega izbornici na mobitelu: stavke kao kartice u dva stupca; hitni okvir i kartica "Zapošljavamo" se ne prikazuju - blijeda šapa u pozadini */ .w-nav.type_mobile .w-nav-list.level_1{justify-content:flex-start!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:24px 22px 32px!important} .w-nav.type_mobile .w-nav-list.level_1 > li{margin-top:0!important;margin-bottom:0!important;position:relative;z-index:1} /* stavke su okomito u sredini ekrana; kad se Usluge ili O nama otvore i ne stanu, automatske margine padaju na nulu, pa izbornik kreće od vrha i normalno se skrola (bez rezanja prve stavke) */ .w-nav.type_mobile .w-nav-list.level_1 > li.level_1:first-child{margin-top:auto!important} .w-nav.type_mobile .w-nav-list.level_1 > li.level_1:nth-last-child(1 of .level_1){margin-bottom:auto!important} .w-nav.type_mobile .w-nav-list.level_1 > li.level_1:has(+ .w-nav-close){margin-bottom:auto!important} .w-nav.type_mobile .w-nav-list.level_1 > li.level_1{border-bottom:1px solid rgba(255,255,255,.12)} .w-nav.type_mobile .w-nav-anchor.level_1{display:flex!important;align-items:center;gap:14px;padding-top:14px!important;padding-bottom:14px!important;padding-left:0!important;font-family:var(--h1-font-family);font-weight:700} .w-nav.type_mobile .w-nav-anchor.level_1::before{font-family:fontawesome;font-weight:400;font-style:normal;width:22px;flex-shrink:0;text-align:center;font-size:18px;color:#93c5fd} .w-nav.type_mobile .vb-mi-usluge > .w-nav-anchor::before{content:"\f469"} .w-nav.type_mobile .vb-mi-cjenik > .w-nav-anchor::before{content:"\f02c"} .w-nav.type_mobile .vb-mi-onama > .w-nav-anchor::before{content:"\f1b0"} .w-nav.type_mobile .vb-mi-slucajevi > .w-nav-anchor::before{content:"\f518"} .w-nav.type_mobile .vb-mi-kontakt > .w-nav-anchor::before{content:"\f0e0"} .w-nav.type_mobile .vb-mi-pocetna > .w-nav-anchor::before{content:"\f015"} /* mobitel: Početna, ikona kućice (far fa-home) */ /* Početna na računalu: Impreza nema ikone uz stavke izbornika, pa kućica ide ispred naslova stavke (klasa vb-mi-pocetna u Izgled > Izbornici) */ .w-nav.type_desktop .vb-mi-pocetna > .w-nav-anchor .w-nav-title::before{content:"\f015";font-family:fontawesome;font-weight:400;font-style:normal;margin-right:6px} .w-nav.type_mobile .vb-mi-aplikacija > .w-nav-anchor::before{content:"\f10b"} /* mobitel: Spremite web kao aplikaciju (PWA blok u functions.php) */ /* stavka "Spremite web kao aplikaciju" (klasa vb-mi-aplikacija) postoji samo u mobilnom izborniku, ne na računalu */ .w-nav:not(.type_mobile) .vb-mi-aplikacija{display:none!important} /* kad je web otvoren kao aplikacija, stavka se skriva, pa okomito centriranje preuzima stavka iznad nje (JS iz PWA bloka stavku i briše, ovo vrijedi prije nego se skripta izvrši) */ @media (display-mode:standalone){.w-nav.type_mobile .w-nav-list.level_1 > li.level_1:has(+ .vb-mi-aplikacija){margin-bottom:auto!important}} .w-nav.type_mobile .w-nav-anchor.level_1 .w-nav-arrow{margin-left:auto} .w-nav.type_mobile .w-nav-list.level_1::after{content:"\f1b0";font-family:fontawesome;font-weight:400;position:fixed;right:-50px;bottom:40px;font-size:280px;line-height:1;color:#fff;opacity:.05;pointer-events:none;z-index:0} /* mega izbornici u mobilnom izborniku */ .w-nav.type_mobile .w-nav-list.level_2{background:transparent!important} .w-nav.type_mobile .w-nav-list.level_2 .l-section{background:transparent!important;padding:0 0 14px!important} .w-nav.type_mobile .w-nav-list.level_2 .l-section-h{padding:0!important} .w-nav.type_mobile .vb-hitno-okvir{display:none!important} .w-nav.type_mobile .w-nav-list.level_2 .g-cols{gap:8px!important} .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3,.w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_2{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3 > .wpb_column,.w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3 > .wpb_column > .vc_column-inner, .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_2 > .wpb_column,.w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_2 > .wpb_column > .vc_column-inner{display:contents!important} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);text-align:left} /* Mobilni izbornik: pravilo iznad daje stavkama mega menija display:flex!important, što bi pregazilo Impreza opciju "Hide on" (Sakrij na). Ovdje je vraćamo, da stavka skrivena za tablet ili mobitel u Builderu stvarno bude skrivena (npr. blok "Mega meni - O nama" ima drugačiji redoslijed na mobitelu). */ @media (min-width:601px) and (max-width:1024px){.w-nav.type_mobile .w-nav-list.level_2 .w-iconbox.hide_on_tablets{display:none!important}} @media (max-width:600px){.w-nav.type_mobile .w-nav-list.level_2 .w-iconbox.hide_on_mobiles{display:none!important}} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox-icon{--icon-bg-color:transparent!important;--icon-color:#93c5fd!important;width:auto!important;height:auto!important;padding:0!important;font-size:16px!important;margin:0!important} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox-meta{padding:0!important;margin:0!important} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox-title{margin:0!important;font-size:13.5px!important;line-height:1.3!important} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox-title,.w-nav.type_mobile .w-nav-list.level_2 .w-iconbox-title a{color:#fff!important;font-weight:600} .w-nav.type_mobile .w-nav-list.level_2 .w-btn{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important;box-shadow:none!important} .w-nav.type_mobile .w-nav-list.level_2 .w-btn i{color:#93c5fd!important} /* kartice s pozadinom u mega izbornicima ("Zapošljavamo" u O nama, okvir za hitna stanja u Uslugama) ne prikazuju se u mobilnom izborniku: iste poveznice već su stavke izbornika (Postanite dio tima), a hitni broj je stalno u headeru. Na računalu mega izbornik ostaje isti. */ .w-nav.type_mobile .w-nav-list.level_2 .vb-ima-zig{display:none!important} /* O nama na mobitelu: zadnji red su "Postanite dio tima" i "Virtualna šetnja" (korisnik, 22. 10. 2026.; prije je u zadnjem redu bio "Foto & video"). Mobilni izbornik slaže stavke u parove red po red, pa ih ovo pomiče na kraj. Prepoznaje se po poveznici stavke, pa vrijedi i ako se tekst promijeni; na računalu redoslijed ostaje kao u Builderu. */ .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox:has(a[href*="/postanite-dio-tima"]){order:1} .w-nav.type_mobile .w-nav-list.level_2 .w-iconbox:has(a[href*="/virtualna-setnja"]){order:2} /* vanjski stupci mega izbornika jedan ispod drugog; na tabletu usluge u tri stupca */ .w-nav.type_mobile .w-nav-list.level_2 .g-cols:not(.cols_3):not(.cols_2){display:grid!important;grid-template-columns:1fr!important} @media (min-width:600.02px){.w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3,.w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_2{grid-template-columns:repeat(3,1fr)!important}} /* ===== AE. PREDLOŽAK OBJAVE (USLUGE): izgled C ===== Sve je složeno u Builderu (Page Template "Post Usluge"): hero red s istaknutom slikom i plavim prijelazom, okvir "Ukratko" (Vertical Wrapper vb-ukratko, puni se iz Sažetka/Excerpt), bijela kartica teksta (vb-objava-tekst) i bočni blok 761. Ovdje je samo ono što Builder ne može: 1) Hero: putanja i oznaka ostaju gore, naslov je okomito u sredini preostale visine. 2) Okvir "Ukratko" se ne prikazuje ako objava nema upisan Sažetak. 3) Ikona u pozadini okvira (vb-zig) ostaje ispod teksta (isto pravilo kao blok N, za Vertical Wrapper). 4) Podnaslovi u tekstu objave: "Naslov 2" i "Naslov 3" iz editora dobivaju svijetloplavu oznaku, "Naslov 4" je podebljan plavi tekst. Kurziv iz starih tekstova se u podnaslovima ne prikazuje. */ .vb-objava-hero > .l-section-h > .g-cols > .wpb_column{display:flex;flex-direction:column} .vb-objava-hero > .l-section-h > .g-cols > .wpb_column > .vc_column-inner{flex-grow:1;display:flex;flex-direction:column} .vb-ukratko:not(:has(.w-post-elm.post_content)){display:none!important} .w-vwrapper.vb-ima-zig > *:not(.vb-zig){position:relative;z-index:1} .w-vwrapper.vb-ima-zig > .vb-zig{z-index:0;pointer-events:none} .vb-ukratko .w-post-elm.post_content p{margin:0} /* Naslovi u tekstu objave (plava oznaka). Naslovi pitanja u "Česta pitanja" (Impreza Accordion, klasa w-tabs-section-title) se izuzimaju, oni imaju svoj izgled kao na naslovnici. */ .vb-objava-tekst .post_content h2:not(.w-tabs-section-title), .vb-objava-tekst .post_content h3:not(.w-tabs-section-title){display:inline-block;margin:32px 0 14px;padding:8px 16px;border-radius:12px;background:#e8f0fa;color:#014286;font-size:22px;line-height:1.3;font-style:normal} .vb-objava-tekst .post_content h3:not(.w-tabs-section-title){font-size:20px} .vb-objava-tekst .post_content h4:not(.w-tabs-section-title){margin:24px 0 10px;color:#014286;font-size:18px;font-style:normal} .vb-objava-tekst .post_content :is(h2,h3,h4) :is(em,i){font-style:normal} .vb-objava-tekst .post_content > *:first-child, .vb-objava-tekst .post_content .wpb_text_column:first-child > .wpb_wrapper > *:first-child{margin-top:0} @media (max-width:600px){ .vb-objava-tekst .post_content h2:not(.w-tabs-section-title){font-size:19px} .vb-objava-tekst .post_content h3:not(.w-tabs-section-title){font-size:18px} } /* ========================================================================== AF. Filter kao pilule s brojem (Slučajevi i savjeti, Usluge) CUSTOM: Impreza List Filter s gumbima nema stil s ispunjenim aktivnim gumbom, pa je izgled ovdje. Zaobljenost 0.8em kao i ostali gumbi na webu. Uključuje se u Builderu: List Filteru upisati Extra class "vb-filter-pilule". Brojeve članaka daje sama Impreza (List Filter > More Options > Faceted Filtering; indeks u Theme Options > Advanced). ========================================================================== */ .vb-filter-pilule .w-filter-item.values_as_btn .w-filter-item-values{gap:10px} .vb-filter-pilule .w-filter-item.values_as_btn .w-filter-item-value{margin:0;padding:0 18px;border:1px solid #d3dce8;border-radius:0.8em;background:#fff;color:#0a1a33;font-weight:600} .no-touch .vb-filter-pilule .w-filter-item.values_as_btn .w-filter-item-value:hover{background:#e8f0fa;border-color:#93c5fd} .vb-filter-pilule .w-filter-item.values_as_btn .w-filter-item-value:has(input:checked){background:#014286;border-color:#014286;color:#fff} .vb-filter-pilule .w-filter-item-value-amount{margin-left:6px;color:#8a97a8;font-weight:600} .vb-filter-pilule .w-filter-item-value-amount:empty{display:none} .vb-filter-pilule .w-filter-item-value:has(input:checked) .w-filter-item-value-amount{color:#93c5fd} @media (max-width:600px){.vb-filter-pilule .w-filter-item.values_as_btn .w-filter-item-values{justify-content:center}} /* Oznaka teme na kartici usluge (Grid Layout 766, element Post Taxonomy s klasom vb-oznaka-teme): usluge imaju nadređenu kategoriju "Usluge" i jednu podkategoriju, a Impreza ne može izostaviti nadređenu, pa se ona ovdje skriva. */ .vb-oznaka-teme .term-usluge{display:none} /* ========================================================================== AG. Rotirka pulsira (ikona far|siren-on) CUSTOM: Impreza nema animaciju ikona. Vrijedi sama od sebe za svaku ikonu rotirke na webu (gumbi "Hitna stanja", iconbox), i za one koje se dodaju kasnije. Ne vrijedi za veliku blijedu rotirku u pozadini (vb-zig) ni za samu ikonu u gumbu s oznakom "00-24" u headeru (vb-oznaka-0024), jer se tamo rotirka crta i animira u bloku W. Animira se samo transform, pa ne usporava stranicu. Kod "smanji pokrete" na uređaju ne radi. ========================================================================== */ @keyframes vb-rotirka-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}} .fa-siren-on{animation:vb-rotirka-puls 1.6s ease-in-out infinite} .vb-zig .fa-siren-on,.vb-oznaka-0024 .fa-siren-on{animation:none} @media (prefers-reduced-motion:reduce){.fa-siren-on{animation:none!important}} /* ========================================================================== AH. Pločice usluga jednake visine (bočni stupac, blok 761) CUSTOM: Impreza Post List izjednačava visinu samo unutar jednog reda. Ovdje svi redovi dobiju visinu najvišeg, pa su sve pločice iste visine i kad se neki naziv prelomi u više redaka (npr. na uskim ekranima). Vrijedi za Post Listu s Extra class "vb-usluge-plocice". ========================================================================== */ .vb-usluge-plocice .w-grid-list{grid-auto-rows:1fr} /* Dio teksta koji se ne lomi u novi red (npr. "00-24" da se ne razdvoji na crtici). Kako se koristi: u Text Blocku oko teksta staviti 00-24. */ .vb-nw{white-space:nowrap} /* Lokacije na naslovnici, "plavi pojas i bijele kartice" (Extra class vb-lok-pojas na unutarnjem redu kartica). Zašto custom: Builder nema opciju "gurni gumbe na dno kartice", a kartica s okvirom za hitno je viša. Kartice su iste visine, gumbi uvijek na dnu i jednake širine (na mobitelu jedan ispod drugoga), oznaka stanja je široka koliko tekst (na mobitelu na sredini). */ .vb-lok-pojas > .wpb_column > .vc_column-inner{display:flex!important;flex-direction:column} .vb-lok-pojas .vb-gumbi{margin-top:auto!important} .vb-lok-pojas .vb-gumbi > *{flex:1 1 210px;min-width:0} .vb-lok-pojas .vb-gumbi .w-btn{width:100%} /* Kartice lokacija: sadržaj centriran na svim ekranima; kartica je container da se tekst radnog vremena (100cqi) skalira prema njenoj širini */ .vb-lok-pojas .vb-status-kartica > .vc_column-inner{container-type:inline-size} .vb-lok-pojas .vb-lok-stanje{align-self:center} @media (max-width:600px){.vb-lok-pojas .vb-gumbi > *{flex-basis:100%}} /* Prijelom reda samo na mobitelu: u tekstu
(na većim ekranima se ne vidi) */ .vb-br-mob{display:none} @media (max-width:600px){.vb-br-mob{display:inline}} /* Kartice ordinacija (vb-status-kartica): gumb s klasom vb-samo-otvoreno vidi se samo dok je ordinacija otvorena, a vb-samo-zatvoreno samo kad je zatvorena (npr. broj ordinacije / hitni broj 099). Zašto custom: stanje postavlja vb.js, Builder ne može prikaz ovisan o radnom vremenu. */ .vb-status-kartica.is-closed .w-btn-wrapper:has(> .vb-samo-otvoreno){display:none!important} .vb-status-kartica:not(.is-closed) .w-btn-wrapper:has(> .vb-samo-zatvoreno){display:none!important} .vb-lok-hitno > *:not(.vb-zig){position:relative;z-index:1} .vb-lok-kontakt > *{flex:0 0 auto!important;width:auto!important} .vb-lok-kontakt .w-btn{padding-left:2.2em;padding-right:2.2em} @media (max-width:600px){.vb-lok-kontakt > *{flex:1 1 100%!important;width:100%!important}.vb-lok-kontakt .w-btn{width:100%}} /* ------------------------------------------------------------------------ * M. MOZAIK FOTOGRAFIJA U SEKCIJI "ZAŠTO BAŠ MI" (klase vb-mozaik, vb-mozaik-velika, vb-mozaik-citat) * Zašto custom: Builder ne može natjerati sliku da popuni preostalu visinu stupca * (velika fotografija na računalu i laptopu raste do visine teksta desno), niti centrirati * citat točno na razmak između fotografija (transform). Sve ostalo je u Design opcijama: * omjeri slika, zaobljenja, boje i položaj citata (top -6px, left calc(100% + 6px)). * Na tabletu i mobitelu velika fotografija ima omjer 3:2 iz Design opcija. * */ @media (min-width:1024.02px){ .vb-mozaik{align-self:stretch!important} .vb-mozaik > .vc_column-inner{display:flex;flex-direction:column;height:100%} .vb-mozaik .vb-mozaik-velika{flex:1 1 240px;min-height:240px;aspect-ratio:auto!important;position:relative} .vb-mozaik .vb-mozaik-velika .w-image-h{position:absolute;inset:0} .vb-mozaik .vb-mozaik-velika img{width:100%;height:100%;object-fit:cover} } .vb-mozaik-citat{transform:translate(-50%,-50%);width:max-content;max-width:calc(200% - 20px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .vb-mozaik-citat strong{font-weight:600} .vb-mozaik-citat small{color:#8fb7e8;font-size:14px} /* ------------------------------------------------------------------------ * N. SEKCIJA "NAŠ TIM" NA NASLOVNICI (klase vb-tim, vb-tim-red, vb-tim-osnivac, vb-tim-kartice, vb-tim-znak) * Zašto custom: Builder ne može natjerati fotografiju osnivača da popuni visinu stupca * (kartica osnivača je visoka kao mreža kartica desno), a Horizontal Wrapper razmak radi * marginom pa tri kartice ne stanu u red; ovdje je pravi razmak (gap). Oznaka "Osnivač" * je široka koliko tekst. Sve ostalo (boje, zaobljenja, sjene, omjeri, natpis i ikone u * pozadini) je u Design opcijama. * */ /* kartice kao mreža 3 x 2 (mobitel 2 u redu): svi redovi iste visine i kad se ime prelomi u dva reda */ .vb-tim-kartice{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px} .vb-tim-kartice > *{margin:0!important} .vb-tim-znak{width:fit-content} /* plava pločica je "container" pa ikona u pozadini (font-size u cqi) raste točno do širine pločice */ .vb-tim-plus{container-type:inline-size} /* Kartica "+10" izgleda kao ostale kartice: gore tamnoplavi kvadrat iste visine kao fotografije (s velikom ikonom tima, +10 i "kolega u timu"), dolje bijeli dio s gumbom. Kvadrat je ::before jer Builder ne dopušta okvir u okviru unutar kartice; visina kvadrata = širina kartice (100cqi). */ .vb-tim-plus{padding:0!important;justify-content:flex-start!important} .vb-tim-plus::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;background:linear-gradient(160deg,#012f60 0%,#014286 100%);z-index:0} .vb-tim-plus > *{position:relative;z-index:2} .vb-tim-plus > .vb-zig{position:absolute!important;z-index:1} .vb-tim-plus > .vb-tim-plus-broj{margin-top:calc(50cqi - 38px)!important} /* Broj "+10" je od 30. 10. 2026. Text Block sa shortcodeom [vb_tim_broj] (računa se sam), pa odlomak ne smije dodati razmak ispod broja */ .vb-tim-plus-broj p{margin:0!important} /* tekst "kolega u timu" završava točno na dnu kvadrata, a gumb je okomito u sredini bijelog dijela */ .vb-tim-plus-broj + .w-text{margin-bottom:calc(50cqi - 38px)!important} .vb-tim-plus > .w-btn-wrapper{margin-top:auto!important;margin-bottom:auto!important;padding:18px 0 14px} /* gumb nikad širi od kartice (na uskim ekranima tekst ide u dva reda unutar gumba) */ .vb-tim-plus > .w-btn-wrapper{max-width:calc(100cqi - 20px);align-self:center;display:flex;justify-content:center;margin-left:0!important;margin-right:0!important} .vb-tim-plus .w-btn{max-width:100%;white-space:normal;text-align:center} /* Impreza na mobitelu gumbu daje flex:1 1 100% pa se gumb rasteže; vraćamo ga na prirodnu visinu */ .vb-tim-plus > .w-btn-wrapper{flex:0 0 auto!important;align-items:center!important} /* kraj kartice +10 */ /* Kartice doktora iz modula Tim (Post List s Extra class vb-tim-nasumicno, Grid Layout "Kartica člana tima (naslovnica)"). Lista i njen omotač nestaju iz rasporeda (display:contents), pa su kartice izravno u mreži vb-tim-kartice, uz karticu +10. Prikazuje se prvih 5; vb.js kod svakog posjeta pomiješa redoslijed (blok "NAŠ TIM: NASUMIČNI DOKTORI"). */ .vb-tim-kartice > .vb-tim-nasumicno,.vb-tim-nasumicno > .w-grid-list{display:contents!important} .vb-tim-nasumicno .w-grid-item{padding:0!important;margin:0!important;width:auto!important} .vb-tim-nasumicno .w-grid-item-h,.vb-tim-nasumicno .w-grid-item-h > .vb-tim-kartica{height:100%} .vb-tim-nasumicno .w-grid-item:nth-child(n+6){display:none!important} .vb-tim-nasumicno .post_content p{margin:0} /* Isti Grid Layout na stranici O nama (Post List s Extra class vb-tim-lista): kartica popuni visinu stavke, pa su sve kartice u redu iste visine */ .vb-tim-lista .w-grid-item-h,.vb-tim-lista .w-grid-item-h > .vb-tim-kartica{height:100%} .vb-tim-lista .post_content p{margin:0} .vb-tim-lista .w-grid-list{grid-auto-rows:1fr} /* svi redovi visine najviše kartice (Impreza izjednačava samo unutar reda) */ .vb-tim-osnivac,.vb-tim-osnivac > .vc_column-inner{padding:0!important} @media (max-width:600px){ .vb-tim-kartice{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .vb-tim-znak{margin-left:auto!important;margin-right:auto!important} .vb-tim-osnivac .w-vwrapper{align-items:center!important} } @media (min-width:1024.02px){ .vb-tim-red{align-items:stretch!important} .vb-tim-osnivac > .vc_column-inner{display:flex;flex-direction:column;height:100%} .vb-tim-osnivac .vb-tim-osnivac-slika{flex:1 1 260px;min-height:260px;aspect-ratio:auto!important;position:relative;margin:0!important} .vb-tim-osnivac .vb-tim-osnivac-slika .w-image-h{position:absolute;inset:0} /* nova fotografija osnivača (kvadrat, glava pri vrhu): poravnanje uz gornji rub da se ne odreže tjeme */ .vb-tim-osnivac .vb-tim-osnivac-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 0%} } /* ===== N2. SEKCIJA "NAŠ TIM" NA STRANICI O NAMA ===== Builder (stranica 195, red #nastim, Extra class vb-tim): - naslov skupine: Horizontal Wrapper vb-tim-skupina (crta desno od naslova je ::after); - veterinari: Horizontal Wrapper vb-onama-vet = kartica osnivača (Vertical Wrapper vb-onama-osnivac), Post List iz modula Tim (kategorija Veterinari) i pločica "Postanite dio tima" (Vertical Wrapper vb-tim-pridruzi); - tehničari i menadžment: Post List s Extra class vb-tim-sredina. Custom zato što Impreza ne može staviti osnivača preko 2 x 2 polja u istu mrežu s karticama iz Post Liste, ni napraviti pločicu koja sama popuni ostatak zadnjeg reda kad dođe novi član tima. */ .vb-tim-skupina::after{content:"";flex:1 1 auto;height:1px;background:#d3dce8} .vb-onama-vet{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px!important;align-items:stretch!important} .vb-onama-vet > *{margin:0!important} .vb-onama-vet > .w-grid,.vb-onama-vet > .w-grid > .w-grid-list{display:contents!important} .vb-onama-vet .w-grid-item{padding:0!important;margin:0!important;width:auto!important} /* osnivač: uvijek 2 x 2 polja, fotografija popuni visinu */ .vb-onama-osnivac{grid-column:span 2;grid-row:span 2;justify-content:flex-start!important} .vb-onama-osnivac > .vb-onama-osnivac-slika{align-self:stretch!important;width:100%} /* wrapper je poravnat lijevo, slika ipak preko cijele širine */ @media (min-width:800.02px){ .vb-onama-osnivac > .vb-onama-osnivac-slika{flex:1 1 260px;min-height:260px;aspect-ratio:auto!important;position:relative} .vb-onama-osnivac-slika .w-image-h{position:absolute;inset:0} .vb-onama-osnivac-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 0%} } /* pločica popuni ostatak zadnjeg reda: osnivač zauzima 4 polja, pa ovisi o broju kartica (n) u Post Listi */ .vb-onama-vet > .vb-tim-pridruzi{grid-column:span 4} .vb-onama-vet:has(.w-grid-item:last-child:nth-child(4n+1)) > .vb-tim-pridruzi{grid-column:span 3} .vb-onama-vet:has(.w-grid-item:last-child:nth-child(4n+2)) > .vb-tim-pridruzi{grid-column:span 2} .vb-onama-vet:has(.w-grid-item:last-child:nth-child(4n+3)) > .vb-tim-pridruzi{grid-column:span 1} /* pločica preko 3 ili 4 polja je niska vodoravna traka */ @media (min-width:800.02px){ .vb-onama-vet:not(:has(.w-grid-item:last-child:nth-child(4n+2))):not(:has(.w-grid-item:last-child:nth-child(4n+3))) > .vb-tim-pridruzi{flex-direction:row!important;flex-wrap:wrap;justify-content:space-between!important;align-items:center!important;text-align:left!important;column-gap:24px;padding:28px 36px!important} .vb-onama-vet:not(:has(.w-grid-item:last-child:nth-child(4n+2))):not(:has(.w-grid-item:last-child:nth-child(4n+3))) > .vb-tim-pridruzi > *{margin:0!important} .vb-onama-vet:not(:has(.w-grid-item:last-child:nth-child(4n+2))):not(:has(.w-grid-item:last-child:nth-child(4n+3))) .vb-tim-pridruzi-naslov{font-size:22px!important} .vb-onama-vet:not(:has(.w-grid-item:last-child:nth-child(4n+2))):not(:has(.w-grid-item:last-child:nth-child(4n+3))) .vb-tim-pridruzi-tekst{flex:1 1 260px} .vb-onama-vet .vb-tim-pridruzi > .vb-zig{position:absolute!important} } /* tablet do 800 px i mobitel: 2 stupca, osnivač preko cijele širine */ @media (max-width:800px){ .vb-onama-vet{grid-template-columns:repeat(2,minmax(0,1fr))} .vb-onama-osnivac{grid-row:auto} .vb-onama-vet > .vb-tim-pridruzi{grid-column:span 2!important} .vb-onama-vet:has(.w-grid-item:last-child:nth-child(odd)) > .vb-tim-pridruzi{grid-column:span 1!important} .vb-onama-vet{grid-template-rows:auto;grid-auto-rows:1fr} /* osnivač u prvom redu, ostali redovi jednake visine */ } @media (max-width:600px){ .vb-onama-vet{gap:12px!important} .vb-tim-skupina::after{display:none} } /* tehničari i menadžment: 4 u redu (mreža od 8 uskih stupaca, svaka kartica zauzima 2), sve kartice iste visine, a nepotpun zadnji red ide na sredinu */ .vb-tim-sredina .w-grid-list{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-auto-rows:1fr!important;gap:16px!important;margin:0!important} .vb-tim-sredina .w-grid-item{grid-column:span 2;max-width:none!important;width:auto!important;padding:0!important;margin:0!important} .vb-tim-sredina .w-grid-item:nth-child(4n+1):last-child{grid-column:4 / span 2} .vb-tim-sredina .w-grid-item:nth-child(4n+1):nth-last-child(2){grid-column:3 / span 2} .vb-tim-sredina .w-grid-item:nth-child(4n+1):nth-last-child(3){grid-column:2 / span 2} .vb-tim-sredina .w-grid-item:nth-child(4n+2):last-child{grid-column:5 / span 2} .vb-tim-sredina .w-grid-item:nth-child(4n+2):nth-last-child(2){grid-column:4 / span 2} .vb-tim-sredina .w-grid-item:nth-child(4n+3):last-child{grid-column:6 / span 2} @media (max-width:800px){ .vb-tim-sredina .w-grid-list{grid-template-columns:repeat(4,minmax(0,1fr))!important} .vb-tim-sredina .w-grid-item:nth-child(4n+1):last-child,.vb-tim-sredina .w-grid-item:nth-child(4n+1):nth-last-child(2),.vb-tim-sredina .w-grid-item:nth-child(4n+1):nth-last-child(3),.vb-tim-sredina .w-grid-item:nth-child(4n+2):last-child,.vb-tim-sredina .w-grid-item:nth-child(4n+2):nth-last-child(2),.vb-tim-sredina .w-grid-item:nth-child(4n+3):last-child{grid-column:span 2} .vb-tim-sredina .w-grid-item:nth-child(2n+1):last-child{grid-column:2 / span 2} } @media (max-width:600px){.vb-tim-sredina .w-grid-list{gap:12px!important}} /* ========================================================= O NAMA, UVOD: SLIKA VISOKA KOLIKO I TEKST (custom) Red uvoda ima ID onama-uvod, a stupac sa slikom klasu vb-slogan-slika. Impreza Image element nema opciju "popuni visinu stupca", pa na računalu i tabletu (od 768px, kad su tekst i slika jedno uz drugo) slika popunjava cijelu visinu lijevog stupca (od putanje do gumba) i reže se po potrebi (object-fit: cover). Ispod 768px Impreza slaže stupce jedan ispod drugog, pa je slika ispod teksta u svom prirodnom omjeru. Omjer stupaca na tabletu zadan je u Builderu (postavka reda). ========================================================= */ @media (min-width:768px){ #onama-uvod .vb-slogan-slika{align-self:stretch} #onama-uvod .vb-slogan-slika > .vc_column-inner{height:100%;position:relative} #onama-uvod .vb-slogan-slika .w-image{position:absolute!important;top:0;right:0;bottom:0;left:0;margin:0!important} #onama-uvod .vb-slogan-slika .w-image-h{height:100%} #onama-uvod .vb-slogan-slika .w-image img{width:100%;height:100%;object-fit:cover;object-position:60% 50%} } /* ===== KONTAKT, BOX "ŠTO SE DOGAĐA NAKON SLANJA?": ISPREKIDANA LINIJA IZMEĐU IKONA KORAKA (custom) ===== Builder nema liniju koja spaja ikone koraka jednu ispod druge. Ikona je krug 40 px, pa linija ide sredinom (19 px). */ .vb-slanje .vb-slanje-korak{position:relative} .vb-slanje .vb-slanje-korak:has(+ .vb-slanje-korak)::before{content:"";position:absolute;left:19px;top:46px;bottom:-12px;border-left:2px dashed #c7d6ea} /* ===== OSNIVAČ: FOTOGRAFIJA NA TABLETU I MOBITELU PORAVNATA GORE (custom, naslovnica 691 i O nama 195) ===== Impreza Image nema postavku položaja fotografije. Na tabletu je okvir 16:9 i bez ovoga se odreže vrh glave. Na mobitelu je omjer 1:1 postavljen u Builderu (Design > aspect ratio), pa se vidi cijela fotografija kao na računalu. */ .vb-tim-osnivac-slika img, .vb-onama-osnivac-slika img{object-position:50% 0%} /* ===== OSNIVAČ NA TABLETU: FOTOGRAFIJA LIJEVO, TEKST DESNO (custom, naslovnica 691 i O nama 195) ===== Desni rub fotografije prati rub kartica ispod (razmak u mreži 16 px): naslovnica ima ispod 3 kartice u redu, pa fotografija ide do kraja druge kartice; O nama ima 2 kartice u redu, pa ide do kraja prve (grid ima padding-right 30 px, zato +14 px). Kartica osnivača je jedan stupac (naslovnica) ili jedan Vertical Wrapper (O nama), pa Builder ne može složiti fotografiju i tekst jedno uz drugo samo na tabletu. Fotografija je kvadrat, poravnata gore; tekst je okomito na sredini. Naslovnica: tablet 601-1024 px. O nama: 601-800 px (iznad 800 px je kartica u mreži kao na računalu). */ @media (min-width:601px) and (max-width:1024px){ .vb-tim-osnivac > .vc_column-inner{display:flex;flex-direction:row;align-items:stretch} .vb-tim-osnivac .vb-tim-osnivac-slika{flex:0 0 calc((200% - 16px) / 3);width:calc((200% - 16px) / 3);aspect-ratio:1/1!important;position:relative;margin:0!important} .vb-tim-osnivac .vb-tim-osnivac-slika .w-image-h{position:absolute;inset:0} .vb-tim-osnivac .vb-tim-osnivac-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 0%} .vb-tim-osnivac .vb-tim-osnivac-slika + .w-vwrapper{flex:1 1 50%;justify-content:center!important;padding:26px 30px!important} } @media (min-width:601px) and (max-width:800px){ .vb-onama-osnivac{display:grid!important;grid-template-columns:calc((100% + 14px) / 2) 1fr;grid-template-rows:1fr repeat(4,auto) 1fr;column-gap:30px;padding-right:30px} .vb-onama-osnivac > .vb-onama-osnivac-slika{grid-column:1;grid-row:1 / -1;aspect-ratio:1/1!important;position:relative;margin:0!important;align-self:stretch} .vb-onama-osnivac-slika .w-image-h{position:absolute;inset:0} .vb-onama-osnivac-slika img{width:100%;height:100%;object-fit:cover;object-position:50% 0%} .vb-onama-osnivac > :nth-child(2){grid-column:2;grid-row:2;justify-self:start} .vb-onama-osnivac > :nth-child(3){grid-column:2;grid-row:3} .vb-onama-osnivac > :nth-child(4){grid-column:2;grid-row:4} .vb-onama-osnivac > :nth-child(5){grid-column:2;grid-row:5;margin-bottom:0!important} } /* ========================================================================== AI. Foto & video, kartice za odabir u uvodu (klasa vb-fv-kartica) U BUILDERU (stranica Foto & video, desni stupac uvoda): tamnoplavi okvir s gradijentom, natpis "Što želite pogledati?", 4 stupca s linkom (Ordinacije, Naši pacijenti, Video veterina, Virtualna šetnja), poluprozirna pozadina, rub, ikone, tekstovi i blijeda ikona (vb-zig). CUSTOM (ovdje), jer Impreza to nema: - omjer kartice 2:1 i sadržaj u sredini po visini, - strelica u krugu gore desno (znak da je kartica gumb), - prelazak mišem: kartica se podigne, posvijetli i dobije plavi rub, - bijeli naslov u Icon Boxu i manje ikone i tekst na mobitelu. Vrijedi za stupce s Extra class "vb-ima-zig vb-fv-kartica". ========================================================================== */ .vb-fv-kartica{aspect-ratio:2/1;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;box-shadow:0 8px 18px -12px rgba(0,0,0,.7)} .vb-fv-kartica > .vc_column-inner{height:100%;display:flex;flex-direction:column;justify-content:center} .vb-fv-kartica::after{content:"";position:absolute;top:9px;right:9px;z-index:2;width:28px;height:28px;border-radius:50%;border:1px solid rgba(143,183,232,.4);background:rgba(143,183,232,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb7e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;pointer-events:none} .vb-fv-kartica:hover{transform:translateY(-3px);background-color:rgba(255,255,255,.09)!important;border-color:rgba(143,183,232,.5)!important;box-shadow:0 14px 24px -14px rgba(0,0,0,.75)} .vb-fv-kartica .w-iconbox-title{color:#fff;font-weight:650;margin:0;padding:0} .vb-fv-kartica .w-iconbox-icon{margin-bottom:6px} .vb-fv-kartica .w-iconbox-text{margin-top:2px} @media (max-width:600px){ /* na mobitelu visina prati širinu (2:1), ali najmanje 78 px da tekst stane na najužim ekranima */ .vb-fv-kartica{aspect-ratio:auto;min-height:max(78px, calc((100vw - 90px) / 4))} .vb-fv-kartica::after{top:6px;right:6px;width:22px;height:22px;background-size:11px} .vb-fv-kartica .w-iconbox-icon{font-size:22px!important;margin-bottom:4px} .vb-fv-kartica .w-iconbox-title{font-size:14px!important} } /* oba reda kartica iste visine (i kad se tekst u jednoj kartici prelomi) */ .vb-fv-okvir .g-cols{grid-auto-rows:1fr} /* najuži mobiteli (do 400 px): manji tekst i rubovi da naslovi stanu u jedan red */ @media (max-width:400px){ .vb-fv-kartica{padding-left:4px!important;padding-right:4px!important} .vb-fv-kartica .w-iconbox-title{font-size:13px!important} .vb-fv-kartica .w-iconbox-text{font-size:10.5px!important} } @media (prefers-reduced-motion:reduce){.vb-fv-kartica,.vb-fv-kartica:hover{transition:none;transform:none}} /* ========================================================================== AJ. Dva gumba u istom redu na tabletu (klasa vb-gumbi-tablet) U BUILDERU: Horizontal Wrapper s gumbima, Extra class "vb-gumbi-tablet" (O nama, uvod: "Upoznajte tim" i "Virtualna šetnja"). CUSTOM, jer Impreza tablet postavke vrijede za 601-1024 px, a ovdje je tekst uz sliku samo od 767 do 1024 px (ispod 767 stupci idu jedan ispod drugoga i mjesta ima dovoljno). U tom rasponu tekst i rubovi gumba se smanjuju sa širinom ekrana (16 px na 1024, oko 13,4 px na 768), da oba gumba stanu u isti red. ========================================================================== */ @media (min-width:767px) and (max-width:1024px){ .vb-gumbi-tablet{flex-wrap:nowrap} .vb-gumbi-tablet .w-btn{font-size:clamp(12px, calc(0.9vw + 6.5px), 16px);padding-left:clamp(12px, calc(2.6vw - 6px), 25.6px);padding-right:clamp(12px, calc(2.6vw - 6px), 25.6px);white-space:nowrap} } /* ========================================================================== AK. Stavke izbornika klikabilne po cijeloj kartici U BUILDERU: stavke mega menija (blokovi izbornika) su Icon Box elementi s linkom. CUSTOM, jer Impreza Icon Box stavlja link samo na ikonu i naslov, pa se na mobitelu kartica nije mogla otvoriti dodirom na prazan dio. Link naslova se ovdje raširi preko cijele stavke (nevidljivi sloj), pa je klikabilna cijela kartica, i na mobitelu i na računalu. Vrijedi za sve Icon Boxe s linkom unutar izbornika (.w-nav, podizbornici). ========================================================================== */ .w-nav .w-nav-list.level_2 .w-iconbox{position:relative} .w-nav .w-nav-list.level_2 .w-iconbox .w-iconbox-title a.w-iconbox-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit} /* ========================================================================== AL. Foto & video, galerije ordinacija kao mozaik (klasa vb-mozaik) U BUILDERU: Gallery element (sve fotografije, lightbox) s Extra class "vb-galerija vb-mozaik". CUSTOM, jer Impreza Gallery nema ovaj raspored: - 5 i više fotografija: velika lijevo, četiri manje desno; ostale se ne prikazuju u mozaiku, ali su u lightboxu (klik na bilo koju fotografiju pa listanje), - na petoj fotografiji natpis "+N fotografija" (dodaje ga vb.js), - 4 fotografije: velika lijevo, tri manje jedna ispod druge, - mobitel: velika preko cijele širine, ispod manje u dva stupca (s 4 fotografije u tri), - "vb-mozaik-uspravno" za uspravne fotografije (pacijenti): viši mozaik, na mobitelu 3:4. ========================================================================== */ .vb-mozaik .w-gallery-list{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3.2/1} .vb-mozaik .w-gallery-item{aspect-ratio:auto;min-height:0;border-radius:14px;overflow:hidden} .vb-mozaik .w-gallery-item:nth-child(1){grid-row:span 2} .vb-mozaik .w-gallery-item:nth-child(n+6){display:none} .vb-mozaik .w-gallery-item-img,.vb-mozaik .w-gallery-item-img img{width:100%;height:100%;object-fit:cover} .vb-mozaik.vb-mz4 .w-gallery-list{grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);aspect-ratio:2.4/1} .vb-mozaik.vb-mz4 .w-gallery-item:nth-child(1){grid-row:span 3} .vb-mozaik.vb-mz1 .w-gallery-list,.vb-mozaik.vb-mz2 .w-gallery-list,.vb-mozaik.vb-mz3 .w-gallery-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-template-rows:none;aspect-ratio:auto} .vb-mozaik.vb-mz1 .w-gallery-item,.vb-mozaik.vb-mz2 .w-gallery-item,.vb-mozaik.vb-mz3 .w-gallery-item{aspect-ratio:3/2;grid-row:auto} .vb-mz-plus{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,26,51,.62);color:#fff;text-align:center;pointer-events:none} .vb-mz-plus b{font-size:34px;font-weight:800;line-height:1} .vb-mz-plus span{font-size:14px;margin-top:4px} /* Impreza 9.5 sama dodaje "+N" na zadnju vidljivu fotografiju kad su ostale skrivene; ovdje se skriva jer mozaik ima svoj natpis s podlogom */ .vb-mozaik .w-gallery-item-img::after{display:none!important;content:none!important} /* Uspravne fotografije (3:4, npr. Naši najdraži pacijenti): Extra class "vb-mozaik-uspravno", mozaik je viši da se fotografije manje režu */ @media (min-width:601px){.vb-mozaik-uspravno .w-gallery-list{aspect-ratio:1.7/1}} @media (max-width:600px){ .vb-mozaik .w-gallery-list{grid-template-columns:1fr 1fr;grid-template-rows:none;aspect-ratio:auto} .vb-mozaik .w-gallery-item{aspect-ratio:3/2} .vb-mozaik .w-gallery-item:nth-child(1){grid-column:span 2;grid-row:auto} .vb-mozaik.vb-mz4 .w-gallery-list{grid-template-columns:repeat(3,1fr);grid-template-rows:none;aspect-ratio:auto} .vb-mozaik.vb-mz4 .w-gallery-item{aspect-ratio:4/3} .vb-mozaik.vb-mz4 .w-gallery-item:nth-child(1){grid-column:span 3;grid-row:auto;aspect-ratio:3/2} .vb-mz-plus b{font-size:28px} .vb-mozaik-uspravno .w-gallery-item{aspect-ratio:3/4} .vb-mozaik-uspravno .w-gallery-item:nth-child(1){aspect-ratio:4/5} } /* ========================================================================== * AM. Virtualna šetnja: uvod i šetnja zajedno zauzimaju cijeli ekran * Zašto custom: Impreza ne može elementu zadati "ostatak visine stupca", * a visina uvoda ovisi o širini ekrana (tekst se prelama). * Kako radi: stupac s klasom vb-setnja-ekran visok je kao vidljivi ekran ispod * headera (bez gornjeg razmaka reda od 24/16 px); uvod zauzme koliko treba, * a šetnja (us_html s .vb-setnja) dobije sav preostali prostor, najmanje 400 px. * Koristi se samo na stranici Virtualna šetnja (571). * ========================================================================== */ .vb-setnja-ekran > .vc_column-inner{display:flex;flex-direction:column;height:calc(100vh - var(--header-height,0px) - 24px);height:calc(100svh - var(--header-height,0px) - 24px);min-height:560px} .vb-setnja-ekran > .vc_column-inner > .w-html:has(.vb-setnja){flex:1 1 auto;display:flex;min-height:400px} .vb-setnja-ekran .vb-setnja{flex:1 1 auto;display:flex;width:100%} .vb-setnja-ekran .vb-setnja iframe{height:auto!important;min-height:0!important;flex:1 1 auto} @media (max-width:600px){ .vb-setnja-ekran > .vc_column-inner{height:calc(100vh - var(--header-height,0px) - 16px);height:calc(100svh - var(--header-height,0px) - 16px)} } /* ===== AN. GUMB "KOPIRAJ LINK / PODIJELI" UZ GUMBE ZA DIJELJENJE ===== Gdje: predložak članaka (Page Template), iza Imprezinog elementa Sharing Buttons. Zašto custom: Impreza Sharing Buttons nema opciju "kopiraj link". Gumb je Imprezin Button (Extra class vb-kopiraj-link, ikona i naziv se mijenjaju u builderu), oba su u Horizontal Wrapperu s klasom vb-dijeljenje. Ovdje gumb dobiva isti izgled kao gumbi za dijeljenje (type outlined: 3em x 2em, obrub 2px; kut .8em kao svi gumbi, blok AO), a vb.js mu daje radnju. */ /* Razmak kao između gumba za dijeljenje (0.1em sa svake strane) */ .vb-dijeljenje{gap:0!important} /* Gumb ostaje malen i u istom redu i na mobitelu (inače pravilo "gumbi preko cijele širine" na mobitelu) */ .vb-dijeljenje{flex-wrap:nowrap!important} .vb-dijeljenje .w-btn-wrapper{flex:0 0 auto!important;width:auto!important;margin:0!important} .vb-dijeljenje .w-btn.vb-kopiraj-link{width:3em!important;max-width:3em!important;flex:0 0 auto!important} .w-btn.vb-kopiraj-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3em;height:2em;min-width:0;min-height:0;margin:0 0 0 .2em;padding:0!important;font-size:1rem;line-height:1;border:0!important;border-radius:.8em!important;background:transparent!important;color:#014286!important;box-shadow:inset 0 0 0 2px #014286!important;transition:background-color .2s,color .2s} .w-btn.vb-kopiraj-link i{margin:0!important;font-size:1em} /* Impreza u optimiziranom CSS-u učitava samo ikone pronađene u sadržaju, a ikonu za mobitel postavlja vb.js, pa su znakovi ovdje zadani ručno (Font Awesome 5: link f0c1, share-alt f1e0) */ .vb-kopiraj-link .fa-link:before{content:"\f0c1"} .vb-kopiraj-link .fa-share-alt:before{content:"\f1e0"} /* Naziv gumba ostaje za čitače ekrana, vizualno se vidi samo ikona */ .w-btn.vb-kopiraj-link .w-btn-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Hover i potvrda: obrub postaje pun, kao kod ostalih gumba */ .no-touch .w-btn.vb-kopiraj-link:hover,.w-btn.vb-kopiraj-link:focus-visible,.w-btn.vb-kopiraj-link.is-kopirano{background:#014286!important;color:#fff!important} /* Oblačić "Link kopiran" iznad gumba (stvara ga vb.js) */ .vb-kopiraj-poruka{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:5;padding:6px 10px;border-radius:6px;background:#0a1a33;color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;pointer-events:none} .vb-kopiraj-poruka::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#0a1a33} /* ===== AO. ISTI RADIJUS ZAOBLJENJA ZA SVE GUMBE ===== PRAVILO (korisnik 26.10.2026.): svi sadašnji i budući gumbi imaju isti dizajn i radijus kao Impreza Button Styles, a to je 0.8em (12.8 px kod slova od 16 px; manji gumb ima razmjerno manji kut). Kroz Impreza alate je već: Button Styles (svi .8em), oznaka kategorije u članku (Post Taxonomy, stil gumba Primarni), Field Styles. Ovdje je samo ono što nema postavku u Imprezi ili dolazi iz dodatka. */ /* Impreza Sharing Buttons: nema postavku za radijus (tema daje .3em) */ .w-sharing-item{border-radius:.8em!important} /* CookieAdmin Pro: gumbi u traci i u postavkama kolačića (dodatak daje 4px) */ .cookieadmin_btn,[class*="cookieadmin"] button.cookieadmin_btn{border-radius:.8em!important} /* ========================================================================== AP. Izvor ispod slike u članku (klasa vb-izvor) Zašto custom: Impreza nema postavku za dio teksta u potpisu slike (caption). Kako se koristi: u potpisu slike iza opisa
Izvor: .... 12 px je najmanja veličina koju Lighthouse smatra čitljivom, a #767676 najsvjetlija siva koja na bijeloj pozadini prolazi WCAG AA kontrast (4,54:1). ========================================================================== */ .vb-izvor{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:#767676} .vb-izvor a{color:inherit;text-decoration:underline} /* ========================================================================== AQ. Podnaslovi (H2) u tekstu članaka i usluga (varijanta C, odabrao korisnik 26. 10. 2026.) Zašto custom: Impreza ima samo jednu globalnu veličinu za H2 (48 / 35 / 30 px), a ona je prevelika za podnaslove u tekstu (tekst je 16 px). Post Content element nema postavku za veličinu naslova, pa se ovdje smanjuje samo H2 unutar sadržaja objave (single post). Naslovi sekcija na stranicama, bočni stupac i ostali H2 ostaju na globalnoj veličini. Veličine (varijanta B, korisnik 26.10.2026.): računalo i laptop 22 px, tablet 20 px, mobitel 19 px. ========================================================================== */ .single-post .w-post-elm.post_content h2{font-size:22px;line-height:1.25} @media (max-width:1024px){.single-post .w-post-elm.post_content h2{font-size:20px}} @media (max-width:600px){.single-post .w-post-elm.post_content h2{font-size:19px}} /* ~~~~~ PROBA (samo testna stranica /test-izbornik/, page-id-2755): ikone uz sve stavke izbornika na računalu ~~~~~ Isti način kao kućica uz Početnu (ikona ispred naslova stavke), iste ikone kao u mobilnom izborniku. Manji razmak između stavki (12 px umjesto 20 px), da sve stane uz gumb Hitna stanja od 1280 px naviše. Ispod 1280 px testni header (2766) prebacuje na izbornik ☰. Kad se odobri: pravila bez .page-id-2755 i Menu > mobile width 1279px u Headeru 1. */ .page-id-2755 .w-nav.type_desktop .w-nav-anchor.level_1{padding-left:12px!important;padding-right:12px!important} .page-id-2755 .w-nav.type_desktop .w-nav-list.level_1 > li > .w-nav-anchor .w-nav-title::before{font-family:fontawesome;font-weight:400;font-style:normal;margin-right:6px} .page-id-2755 .w-nav.type_desktop .vb-mi-usluge > .w-nav-anchor .w-nav-title::before{content:"\f469"} .page-id-2755 .w-nav.type_desktop .vb-mi-cjenik > .w-nav-anchor .w-nav-title::before{content:"\f02c"} .page-id-2755 .w-nav.type_desktop .vb-mi-onama > .w-nav-anchor .w-nav-title::before{content:"\f1b0"} .page-id-2755 .w-nav.type_desktop .vb-mi-slucajevi > .w-nav-anchor .w-nav-title::before{content:"\f518"} .page-id-2755 .w-nav.type_desktop .vb-mi-kontakt > .w-nav-anchor .w-nav-title::before{content:"\f0e0"} /* izbornik ☰ na laptopu (1025 do 1278 px): stavke u stupcu od najviše 720 px u sredini, ne uz lijevi rub */ @media (min-width:1025px){ .page-id-2755 .w-nav.type_mobile .w-nav-list.level_1{padding-left:max(40px,calc(50% - 360px))!important;padding-right:max(40px,calc(50% - 360px))!important} /* "Spremite web kao aplikaciju" je samo za mobitel i tablet (kao gumb u footeru); stavka iznad preuzima centriranje */ .page-id-2755 .w-nav.type_mobile .vb-mi-aplikacija{display:none!important} .page-id-2755 .w-nav.type_mobile .w-nav-list.level_1 > li.level_1:has(+ .vb-mi-aplikacija){margin-bottom:auto!important} } /* kad je izbornik ☰ (tablet i laptop do 1278 px), gumb Hitna stanja je točno u sredini headera, a ☰ ostaje desno. Na mobitelu (do 600 px) gumb je već u srednjoj ćeliji između loga i ☰, pa ostaje kako je (na 360 px ne bi stao točno u sredinu) */ @media (min-width:601px){ .page-id-2755 .l-header:has(.w-nav.type_mobile) .l-subheader.at_middle .l-subheader-h{position:relative} .page-id-2755 .l-header:has(.w-nav.type_mobile) .l-subheader.at_middle .l-subheader-cell.at_right > .ush_btn_1{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important} } /* VB HERO OCJENA: značka Google ocjene na slideru u heroju (Builder, klasa vb-hero-ocjena) prati natpis slike (rsABlock): Impreza builder nema backdrop-filter, pa je samo zamućenje pozadine ovdje. Na mobitelu je podloga bijela, kao natpis. */ @media (min-width:1025px){.vb-hero-ocjena{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}} /* zamućenje samo na računalu, kao natpis */ /* VB GOOGLE RECENZIJE: kartice recenzija u sekciji #recenzije (izgled u Builderu, ovdje samo ono što Builder ne može): - dugi tekst recenzije (Text Block vb-rec-tekst) prikazuje se u najviše 6 redaka; tekst se ne mijenja, a kod dužih recenzija ispod je poveznica "Pročitajte cijelu recenziju na Googleu" (kratki kod polje="vise") */ .vb-rec-tekst .wpb_wrapper{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden} .vb-rec-tekst .wpb_wrapper p{margin-bottom:0} /* VB MEGA RECENZIJE: kartica "Kako je prošao posjet?" u mega izborniku O nama (stupac s klasama vb-ima-zig vb-mm-recenzije). Ostale kartice s vodenim žigom (vb-ima-zig) u mobilnom izborniku su skrivene (blok AB), ova se prikazuje ispod stavki, preko cijele širine. Na mobitelu sve u plavim nijansama izbornika (tamnoplavi gradijent, svijetloplavo #93c5fd): kartica kao stavke izbornika (bijela 8 %), naslov bijeli u jednom redu, tekst svijetloplavi, gumbi svijetloplavi s tamnoplavim tekstom. Kontrasti: tekst #c7dcf5 5,7:1, gumbi #012f60 na #93c5fd 7,4:1. */ .w-nav.type_mobile .w-nav-list.level_2 .vb-ima-zig.vb-mm-recenzije{display:block!important;width:100%!important;margin-top:8px;background:rgba(255,255,255,.08)!important;border-color:rgba(147,197,253,.28)!important} .w-nav.type_mobile .vb-mm-recenzije .vb-zig{color:rgba(147,197,253,.12)!important} .w-nav.type_mobile .vb-mm-recenzije .wpb_text_column{color:#c7dcf5!important} .w-nav.type_mobile .vb-mm-recenzije .wpb_text_column strong{color:#fff!important} .w-nav.type_mobile .vb-mm-recenzije .wpb_text_column span[aria-hidden]{color:#bfdbfe!important} /* naslov: uvijek jedan red (na 320 px 18 px, od oko 400 px 22 px) */ .w-nav.type_mobile .vb-mm-recenzije .vb-zig + .wpb_text_column{color:#fff!important;white-space:nowrap;font-size:clamp(17px,5.6vw,22px)!important} .w-nav.type_mobile .vb-mm-recenzije .vb-zig + .wpb_text_column br{display:none} /* naslov i "Preporučite nas na Googleu:" (Text Block vb-mm-poziv) centrirani i iste širine: poziv ima font u omjeru 0,821 naslova (izmjereno pri istoj veličini fonta), oba u jednom redu */ .w-nav.type_mobile .vb-mm-recenzije .vb-zig + .wpb_text_column{text-align:center} .w-nav.type_mobile .vb-mm-recenzije .vb-mm-poziv{white-space:nowrap;text-align:center;font-size:clamp(13.96px,4.598vw,18.06px)!important} /* red s ocjenom (Text Block odmah ispod naslova) također centriran */ .w-nav.type_mobile .vb-mm-recenzije .vb-zig + .wpb_text_column + .wpb_text_column{text-align:center} /* gumbi Lanište i Prečko jedan pored drugog, jednake širine */ .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije .w-btn{background:#93c5fd!important;color:#012f60!important;border-color:#93c5fd!important} .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije .w-btn i{color:#012f60!important} .w-nav.type_mobile .vb-mm-recenzije .w-hwrapper{flex-wrap:nowrap!important} .w-nav.type_mobile .vb-mm-recenzije .w-hwrapper > *{flex:1 1 0;min-width:0} .w-nav.type_mobile .vb-mm-recenzije .w-btn{width:100%;justify-content:center;padding-left:10px!important;padding-right:10px!important} /* Recenzije po ordinacijama (naslovnica, red vb-rec-stupci): kartice recenzija ispod svake ambulante. Da kartice lijevo i desno budu iste visine, tekst recenzije zauzima uvijek 6 redaka (24 px) i red "Pročitajte cijelu recenziju" uvijek ima mjesta, i kad ga nema. Samo dok su stupci jedan pored drugog. */ @media (min-width:768px){ .vb-rec-stupci .vb-rec-tekst .wpb_wrapper{min-height:144px} } /* tablet (768-1024 px): red s imenom, datumom i poveznicom (vb-rec-meta) ponekad ide u dva reda, pa uvijek zauzima dva, da kartice lijevo i desno ostanu iste visine */ @media (min-width:768px) and (max-width:1024px){ .vb-rec-stupci .vb-rec-meta .wpb_wrapper{min-height:3.1em} } /* najuži tableti (768-899 px): dulje ime s ambulantom i datumom zna ići u dva reda, pa red s imenom i poveznicom zauzima tri */ @media (min-width:768px) and (max-width:899px){ .vb-rec-stupci .vb-rec-meta .wpb_wrapper{min-height:4.65em} } /* poveznica na Google (u redu s imenom) se nikad ne lomi; na tabletu i mobitelu (do 1024 px) uvijek ide cijela u novi red, bez točke ispred */ .vb-rec-stupci .vb-rec-meta a{white-space:nowrap} @media (max-width:1024px){ .vb-rec-stupci .vb-rec-meta .vb-rec-sep{display:none} .vb-rec-stupci .vb-rec-meta a{display:block;width:fit-content;margin-top:2px} } /* računalo i laptop (od 1025 px): stupci su široki, pa je tekst recenzije skraćen na 4 retka, da kartice ne budu previsoke */ @media (min-width:1025px){ .vb-rec-stupci .vb-rec-tekst .wpb_wrapper{-webkit-line-clamp:4;line-clamp:4;min-height:96px} } /* VB MEGA RECENZIJE, računalo: naslov "Kako je prošao posjet?" uvijek u jednom redu (prijelom
iz Buildera se ne prikazuje); izmjereno od 961 px naviše: s 22 px ostaje najmanje 60 px do ruba kartice */ .w-nav:not(.type_mobile) .vb-mm-recenzije .vb-zig + .wpb_text_column{white-space:nowrap} .w-nav:not(.type_mobile) .vb-mm-recenzije .vb-zig + .wpb_text_column br{display:none} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AE. HOVER NA KARTICAMA DOKTORA (custom) Isti pomak i sjena kao .vb-hover (kartice ambulanti u heroju): kartica se podigne 4 px i dobije plavu sjenu. Zašto custom: kartice doktora dolaze iz Grid Layouta 1758 (dijeli ga više stranica), a Extra class vb-hover na Grid Layoutu bi promijenila sve stranice odjednom. Uključivanje: Builder > unutarnji red s osnivačem i Post Listom (Extra class vb-tim-red) > dodati Extra class vb-hover-kartice (na O nama na red #nastim). Vrijedi za karticu osnivača (naslovnica .vb-tim-osnivac, O nama .vb-onama-osnivac) i kartice doktora i tehničara. Samo na uređajima s mišem (hover:hover); bez animacije kad korisnik isključi pokrete. */ @media (hover:hover){ .vb-hover-kartice .vb-tim-kartica, .vb-hover-kartice .vb-tim-osnivac, .vb-hover-kartice .vb-onama-osnivac{transition:transform .2s ease,box-shadow .2s ease} .vb-hover-kartice .w-grid-item:hover .vb-tim-kartica, .vb-hover-kartice .vb-tim-osnivac:hover, .vb-hover-kartice .vb-onama-osnivac:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(1,66,134,.45)} } @media (prefers-reduced-motion:reduce){ .vb-hover-kartice .vb-tim-kartica, .vb-hover-kartice .vb-tim-osnivac, .vb-hover-kartice .vb-onama-osnivac{transition:none!important;transform:none!important} } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AF. MEGA IZBORNIK O NAMA: KARTICA "UPOZNAJTE NAŠE ORDINACIJE" (custom) Page Block 920 (izbornik O nama). Klasa vb-mm-recenzije ostala je od prijašnje kartice s pozivom na recenzije: na nju je vezan izgled kartice u bloku "VB MEGA RECENZIJE", pa je ne brisati. Kartica u Page Blocku ima klase vb-ima-zig vb-mm-recenzije vb-mm-ordinacije: izgled (okvir, plave nijanse u mobilnom izborniku, gumbi) ostaje iz bloka "VB MEGA RECENZIJE", ovdje su samo veličine slova za novi tekst. Mobilni izbornik: naslov "Upoznajte naše ordinacije" uvijek u jednom redu (širina kartice je oko 100vw - 124 px), centriran. Kartica nema poziv iznad gumba (korisnik ga je maknuo). */ .w-nav.type_mobile .vb-mm-ordinacije .vb-zig + .wpb_text_column{font-size:clamp(15px,calc(7.87vw - 9.76px),22px)!important} /* Računalo: kartica je uža između 961 i 1280 px (1100 px: 244 px), pa se naslov smanjuje da ostane u jednom redu. */ .w-nav:not(.type_mobile) .vb-mm-ordinacije .vb-zig + .wpb_text_column{font-size:clamp(15px,calc(2.5vw - 9.2px),22px)!important} /* Mobilni izbornik: gumbi Lanište i Prečko u stilu mobilnog izbornika (kao pločice "Naša priča", "Naš tim"...): prozirno bijela podloga, tanki svijetloplavi rub, bijeli tekst, svjetloplava ikona. Pojačana specifičnost (.vb-mm-recenzije.vb-mm-ordinacije) da nadjača svijetloplave gumbe iz bloka "VB MEGA RECENZIJE". */ .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije.vb-mm-ordinacije .w-btn{background:rgba(255,255,255,.12)!important;border:1px solid rgba(147,197,253,.38)!important;color:#fff!important;border-radius:12px!important;box-shadow:none!important} .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije.vb-mm-ordinacije .w-btn i{color:#93c5fd!important} .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije.vb-mm-ordinacije .w-btn:hover, .w-nav.type_mobile .w-nav-list.level_2 .vb-mm-recenzije.vb-mm-ordinacije .w-btn:active{background:rgba(255,255,255,.2)!important;border-color:rgba(147,197,253,.6)!important} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AG. STATUS RADNOG VREMENA NA PLAVOJ KARTICI (custom) Status (vb-status, "Otvoreno · zatvaramo u 20:00") je inače svijetlozeleni okvir ravnih rubova. Na plavim karticama ("na jednom mjestu" na stranicama ordinacija) dobiva bijelu podlogu i zaobljene rubove kao kartica (12 px unutar kartice od 16 px), ikona zelena kad je otvoreno, crvena kad je zatvoreno. Uključivanje: Builder > Text element statusa > Extra class dodati vb-status-bijeli. */ .vb-status.vb-status-bijeli, .vb-status.vb-status-bijeli.is-open, .vb-status.vb-status-bijeli.is-closed{background:#fff!important;border:0!important;border-radius:12px!important;color:#0a1a33!important;box-shadow:0 6px 18px rgba(1,20,50,.22);padding:12px 16px 12px 12px!important} /* ikona i tekst: ista udaljenost od ruba lijevo i gore/dolje, tekst okomito centriran */ .vb-status-bijeli .w-text-h{display:flex;align-items:center;gap:10px} .vb-status-bijeli .w-text-h > i{margin:0!important;font-size:18px} .vb-status-bijeli.is-open .w-text-h > i{color:#15803d} .vb-status-bijeli.is-closed .w-text-h > i{color:#b91c1c} /* ======================================================================= * AR. STRANICA ČLANA TIMA: VREMENSKA CRTA I OZNAKE (CUSTOM) * Izgled HTML-a koji ispisuju shortcodeovi dodatka VB Tim IM: * [vb_tim_popis] > ul.vb-tim-popis (obrazovanje, usavršavanja: "godina | opis") * [vb_tim_oznake] > ul.vb-tim-oznake ("Posebno se bavi") * Zašto custom: Impreza nema element za popis iz tekstualnog polja s * godinom i opisom niti za oznake iz polja. Sve ostalo na stranici člana * je u Builderu. * ======================================================================= */ /* vremenska crta: okomita linija lijevo, kružić uz svaku stavku, godina iznad opisa */ .vb-tim-popis{list-style:none!important;margin:0!important;padding:0 0 0 24px!important;border-left:2px solid #dbe7f5;position:relative} .vb-tim-popis > li{position:relative;margin:0 0 20px!important;padding:0!important} .vb-tim-popis > li:last-child{margin-bottom:0!important} .vb-tim-popis > li::before{content:"";position:absolute;left:-32px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #014286;box-sizing:border-box} .vb-tim-popis-god{display:block;font-weight:700;font-size:14px;letter-spacing:.04em;color:#014286;margin-bottom:2px;line-height:1.4} .vb-tim-popis-tekst{display:block;font-size:16px;line-height:1.55;color:#3b4a60} /* oznake: svijetloplave pilule u redu, prelamaju se u novi red */ .vb-tim-oznake{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-wrap:wrap;gap:8px} .vb-tim-oznake > li{margin:0!important;padding:8px 14px;border-radius:999px;background:#eef4fb;border:1px solid #dbe7f5;color:#012f60;font-weight:600;font-size:15px;line-height:1.3} /* ======================================================================= * AS. KARTICA OSNIVAČA IZ TIMA (CUSTOM CSS ZA BUILDER ELEMENTE) * Kartica osnivača više nije ručno složena: Post List (kategorija tima * Osnivač) s Grid Layoutom 2986 (naslovnica, ordinacije, stranice članova) * ili 2987 (O nama). Podaci dolaze iz Tima (slika, ime, uloga, titula, * kratki opis), poveznica samo kad je stranica člana javna. * Zašto CSS: postojeći izgled (blokovi N i O nama) računa da su slika i * tekst izravno u kartici. Omoti Post Lista (w-grid, w-grid-item...) se * zato "izbrišu" iz rasporeda (display:contents), a slika iz Post Image * elementa popuni prostor kao prije. * ======================================================================= */ .vb-osnivac-lista,.vb-osnivac-lista > .w-grid-list,.vb-osnivac-lista .w-grid-item,.vb-osnivac-lista .w-grid-item-h{display:contents!important} /* !important: Impreza w-grid-list ima jači selektor za display:grid */ /* naslovnica i ordinacije: kartica je stupac vb-tim-osnivac, omot iz Grid Layouta ne smije biti dodatna kutija */ .vb-tim-osnivac .vb-osnivac-omot{display:contents} /* slika iz Post Image elementa popunjava okvir (us_image je imao .w-image-h, Post Image nema) */ .vb-tim-osnivac .post_image.vb-tim-osnivac-slika img,.vb-onama-osnivac .post_image.vb-onama-osnivac-slika img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%} /* poveznica na stranicu osnivača (kad je javna) bez podcrtavanja i plave boje */ .vb-osnivac-omot,.vb-osnivac-omot:hover{color:inherit;text-decoration:none} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * AT. HERO NA NASLOVNICI: SLIDER PRVI U KODU STRANICE (klasa vb-hero-slika-prva na redu) * Zašto custom: na mobitelu i tabletu slider stoji iznad teksta. Prije je u kodu stranice bio * tekst pa slider, a redoslijed je okretala opcija "Reverse order". Kad preglednik nacrta stranicu * prije nego učita slider, tekst se prvo pojavi na vrhu pa skoči dolje (pomak sadržaja, CLS). * Zato je u Builderu stupac sa sliderom prvi, a ovdje ga na računalu i laptopu vraćamo desno. * Kako se koristi: hero redu u Extra class upisati vb-hero-slika-prva, a stupac sa sliderom * (vb-hero-slika) staviti prvi u redu, bez "Reverse order". * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (min-width:1024.02px){ .vb-hero-slika-prva > .l-section-h > .g-cols > .vb-hero-slika{order:2} } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ * AT. IZBORNIK USLUGE NA TABLETU: PRVI RED S DVIJE PLOČICE (CUSTOM) * Zašto custom: Impreza ne zna u mreži mobilnog izbornika dati nekim * pločicama drukčiju širinu. Na tabletu (od 600 px, mobilni izbornik) su * usluge u tri stupca (pravilo gore), a "Sve usluge" i "Hitna stanja" * trebaju biti dvije u prvom redu. * Kako: mreža dobije 6 jednakih dijelova; svaka usluga zauzme 2 (tri u * redu), a pločice s klasom vb-mm-prvi-red zauzmu po 3 (dvije u redu). * Uključuje se u Builderu: Page Block 845 (mega meni Usluge), IconBox * "Sve usluge" i "Hitna stanja" > Extra class: vb-mm-prvi-red. * Na mobitelu (ispod 600 px) mreža ostaje dva stupca, pa su ionako dvije. * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @media (min-width:600.02px){ .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3:has(.vb-mm-prvi-red){grid-template-columns:repeat(6,1fr)!important} .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3:has(.vb-mm-prvi-red) .w-iconbox{grid-column:span 2} .w-nav.type_mobile .w-nav-list.level_2 .g-cols.cols_3:has(.vb-mm-prvi-red) .w-iconbox.vb-mm-prvi-red{grid-column:span 3} } /* AU. SIDRA NA STRANICAMA (CUSTOM, 5. 11. 2026.): kad se klikne poveznica na odjeljak (npr. sadržaj na * stranici Uvjeti i privatnost), naslov ne smije završiti ispod ljepljivog headera. Visina headera dolazi * iz Imprezine varijable --header-sticky-height, uz 24 px razmaka. */ .l-main :is(h2,h3,h4)[id]{scroll-margin-top:calc(var(--header-sticky-height,80px) + 24px)} /* AV. VIRTUALNA ŠETNJA NA KLIK (CUSTOM, 5. 11. 2026.) * Zašto custom: Impreza nema element za vanjski iframe koji se učitava tek na klik * (Video element to radi samo za YouTube i Vimeo). * Što radi: na stranici Virtualna šetnja umjesto šetnje prvo stoji pokrov (fotografija * recepcije i crveni gumb za pokretanje, kao kod videa). Šetnja s virtualno360.hr * učita se tek kad posjetitelj klikne: stranica je brža, a tuđi web ne dobije podatke * posjetitelja bez njegove radnje. Klik obrađuje skripta u vb.js ("Virtualna šetnja na klik"). * HTML je u HTML elementu na stranici: div.vb-setnja s data-vb-setnja (adresa šetnje). */ .vb-setnja-pokrov{position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:400px;margin:0;padding:24px;border:0;border-radius:20px;overflow:hidden;cursor:pointer;background:#0a1a33;color:#fff;font:inherit;text-align:center;-webkit-appearance:none;appearance:none} .vb-setnja-pokrov img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;transition:transform .5s ease} .vb-setnja-pokrov::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at center,rgba(10,26,51,.6) 0,rgba(10,26,51,.4) 60%,rgba(10,26,51,.3) 100%);transition:opacity .3s} .vb-setnja-pokrov > span{position:relative;z-index:2} .vb-setnja-ikona{display:flex;align-items:center;justify-content:center;width:5.5rem;height:5.5rem;margin-bottom:8px;border-radius:50%;background:#b91c1c;color:#fff;font-size:1.75rem;line-height:1;box-shadow:0 0 0 2px #b91c1c;transition:background .3s,color .3s} .vb-setnja-ikona i{margin-left:.15em} .vb-setnja-tekst{font-size:1.5rem;font-weight:700;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.35)} .vb-setnja-napomena{font-size:.875rem;opacity:.9} @media (max-width:600px){.vb-setnja-ikona{width:4.5rem;height:4.5rem;font-size:1.4rem}.vb-setnja-tekst{font-size:1.25rem}.vb-setnja-napomena{font-size:.8125rem}} .vb-setnja-pokrov:hover img{transform:scale(1.03)} .vb-setnja-pokrov:hover::after{opacity:.85} .vb-setnja-pokrov:hover .vb-setnja-ikona,.vb-setnja-pokrov:focus-visible .vb-setnja-ikona{background:#fff;color:#b91c1c} .vb-setnja-pokrov:focus-visible{outline:3px solid #014286;outline-offset:3px} .vb-setnja-iframe{display:block;width:100%;max-width:none;height:100%;min-height:400px;border:0;border-radius:20px;background:#e8f0fa} /* ===== CUSTOM BLOK AW: KARTICA "+N KOLEGA U TIMU" KLIKABILNA CIJELA (08.11.2026.) ===== Poveznica gumba "Upoznajte tim" preko ::after prekriva cijelu karticu, pa klik bilo gdje na kartici vodi na /o-nama/#nastim. Prelazak mišem preko kartice je prelazak preko poveznice, pa gumb mijenja stanje (hover) kao i inače. Vrijedi svugdje gdje je kartica: naslovnica, Lanište, Prečko, stranice članova. */ .vb-tim-plus > .w-btn-wrapper{position:static!important} .vb-tim-plus .w-btn{position:static!important} .vb-tim-plus .w-btn::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit} .vb-tim-plus{cursor:pointer} /* AX. KARTA NA KLIK (CUSTOM, 8. 11. 2026.) * Zašto custom: Imprezin okvir "Prikaži kartu" (prije učitavanja OpenStreetMap karte) ima samo * osnovni izgled, a na stranicama ordinacija je na tamnoplavoj kartici, pa tekst nije bio čitljiv. * Okvir uključuje functions.php (blok VB KARTA NA KLIK). Kvačica "Uvijek prikaži karte" je * skrivena, da se ne sprema kolačić: karta se učita na svaki klik, samo za tu posjetu. */ .w-map.confirm_load:has(.w-map-privacy){display:flex;align-items:center;justify-content:center;background:#eef4fb!important} .w-map.confirm_load .w-map-privacy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#1e2a3b;font-size:.9375rem;line-height:1.5} .w-map.confirm_load .w-map-privacy::before{content:"\f5a0";font-family:fontawesome;font-weight:400;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:50%;background:#014286;color:#fff;font-size:1.4rem;line-height:1} .w-map.confirm_load .w-map-privacy p{margin:0;max-width:420px} .w-map.confirm_load .w-map-privacy p:has(input[type=checkbox]){display:none} .w-map.confirm_load .w-map-privacy a{color:#014286;font-weight:600}