/* ETI Marine - jedinstveni stil sajta. Tokeni izmereni sa originala (tema Transmax): vidi arhiva/meta/dizajn-tokeni.md */ /* ---------- 1. Tokeni ---------- */ :root { --primary: #ff7d44; --secondary: #034b5b; --tamno: #003b49; --footer: #05313c; --tekst: #464646; --naslov: #202020; --belo: #ffffff; --svetlo: #f5f5f5; --ivica: #e5e5e5; --siva: #7b7b7b; --font-tekst: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-naslov: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --sirina: 1200px; --gutter: 20px; --header-h: 80px; --nav-h: 60px; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* kao tema originala (main.css: body, html): sivo zaglađivanje slova na macOS-u */ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-tekst); font-size: 16px; font-weight: 400; line-height: 1.875; color: var(--tekst); background: var(--belo); overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-naslov); font-weight: 700; color: var(--naslov); margin: 0 0 20px; text-transform: none; } h1 { font-size: 48px; line-height: 56px; } h2 { font-size: 42px; line-height: 48px; } h3 { font-size: 36px; line-height: 44px; } h4 { font-size: 30px; line-height: 38px; } h5 { font-size: 24px; line-height: 30px; } h6 { font-size: 20px; line-height: 28px; } p { margin: 0 0 20px; } p:last-child { margin-bottom: 0; } /* ---------- 4. Dugmad ---------- */ .dugme { display: inline-block; padding: 16px 32px; font-family: var(--font-naslov); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; background: var(--primary); color: #fff; transition: background-color .25s ease, color .25s ease; } .dugme:hover { background: var(--secondary); color: #fff; } .dugme--tamno { background: var(--tamno); } .dugme--tamno:hover { background: var(--primary); } /* ---------- responsive (zajednicko) ---------- */ @media (max-width: 1024px) { h1 { font-size: 40px; line-height: 48px; } h2 { font-size: 34px; line-height: 42px; } h3 { font-size: 28px; line-height: 36px; } } @media (max-width: 767px) { h1 { font-size: 32px; line-height: 40px; } h2 { font-size: 28px; line-height: 36px; } h3 { font-size: 24px; line-height: 32px; } } /* ---------- 5. Header ---------- */ .vrh { position: relative; z-index: 60; background: #fff; height: var(--header-h); display: flex; align-items: center; } /* kontejner originala: 1170px u sredini bez bocnog razmaka (i na 1201-1239px, gde ivica prozora dodiruje kontejner) */ .vrh__omot { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; max-width: 1170px; margin-inline: auto; } .vrh__logo img { width: 65px; height: auto; } /* vidljivost loga (namerno odstupanje, 30.9.2026): fajl loga je originalan, pseudo-elementi nose kopiju iste slike. U PNG-u 250x250: sidro redovi 15-192, prazno 193-198, tekst 199-231; "ETI" kolone 25-73, "MARINE" 85-224. >1200: tanak taman obris samo oko belog sidra - kutija ::before pokriva samo sidro (redovi 0-195), pa se obris ne racuna od teksta; ispod slike (z-index -1 unutar linka). */ .vrh__logo, .nav__logo { position: relative; isolation: isolate; } .vrh__logo::before, .nav__logo::before { content: ""; position: absolute; inset: 0 0 22% 0; z-index: -1; background: url("/slike/2025/10/Eti-Marin-Sidro-250-x-250.png") top / 100% auto no-repeat; filter: drop-shadow(0 0 1px rgba(0,0,0,.8)) drop-shadow(0 0 .5px rgba(0,0,0,.6)); } .vrh__desno { display: flex; align-items: center; } .vrh__desno .dugme { font-size: 13px; line-height: 1.1; letter-spacing: normal; padding: 17px 40px; } /* traka menija lezi preko heroja: senka i zamucena pozadina ispod nje (blur 12px), iz post-154.css originala */ .zaglavlje { position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 50; box-shadow: 9px 12px 38px rgba(0,0,0,.1); } .zaglavlje::after { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .zaglavlje--zalepljen::after { display: none; } /* na unutrasnjim stranama meni stoji preko page-hero slike, isto kao na pocetnoj */ .zaglavlje--nad-herojem { position: absolute; top: var(--header-h); } /* strana 404 nema traku sa slikom (Marko 2.10.2026): meni na tamnoj podlozi (boja trake originala), preko gornjeg dela paddinga sadrzaja (135px) */ @media (min-width: 1201px) { .zaglavlje--bez-heroja:not(.zaglavlje--zalepljen) { background: var(--tamno); } } .nav { display: flex; align-items: center; height: var(--nav-h); } /* kontejner originala: 1200px u sredini bez bocnog razmaka */ .nav__omot { display: flex; align-items: center; gap: 24px; height: 100%; width: 100%; max-width: var(--sirina); margin-inline: auto; } .nav__logo { display: none; } .nav__zatvori { display: none; } /* izmereno na originalu (tema Transmax): traka 60px, lista 11px levo od kontejnera, stavke bez razmaka sa padding 0 24px; prelomi 1545px i 1250px su iz responsive.css teme */ .nav__lista { position: relative; display: flex; align-items: stretch; gap: 0; height: 100%; margin-left: -11px; } .nav__link { position: relative; display: flex; align-items: center; height: 100%; padding: 0 24px; font-family: var(--font-naslov); font-size: 16px; font-weight: 500; line-height: 30px; color: #fff; transition: color .2s ease; } .nav__link:hover, .nav__stavka--aktivna > .nav__link { color: var(--primary); } /* strelica podmenija: glif U+F115 iz Flaticon fonta teme (9px, #a9a9a9, 10px od teksta) */ .nav__karet { display: inline-block; width: 9px; height: 5px; margin-left: 10px; flex: none; /* mastilo glifa kao na originalu */ background-color: #a9a9a9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -236 300 172'%3E%3Cpath transform='scale(1,-1)' d='M150 64Q141 64 135 71L6 200Q0 206 0 214.5Q0 223 6 229.5Q12 236 21 236Q30 236 36 229L150 115L264 229Q270 236 279 236Q288 236 294 229.5Q300 223 300 214.5Q300 206 294 200L165 71Q159 64 150 64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -236 300 172'%3E%3Cpath transform='scale(1,-1)' d='M150 64Q141 64 135 71L6 200Q0 206 0 214.5Q0 223 6 229.5Q12 236 21 236Q30 236 36 229L150 115L264 229Q270 236 279 236Q288 236 294 229.5Q300 223 300 214.5Q300 206 294 200L165 71Q159 64 150 64Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } /* strelica na hover stavke (i dok je podmeni otvoren) sklizne nanize i nestane, istom brzinom kojom se otvara podmeni (namerno odstupanje, Marko 30.9.2026); mobilni panel ima svoju strelicu */ @media (min-width: 1201px) { .nav__karet { transition: opacity .2s ease, transform .2s ease; } /* aktivna stavka (npr. Products na /spare-parts/): strelica u boji teksta, kao na originalu */ .nav__stavka--aktivna > .nav__link > .nav__karet { background-color: var(--primary); } .nav__stavka:hover > .nav__link > .nav__karet, .nav__stavka:focus-within > .nav__link > .nav__karet { opacity: 0; transform: translateY(3px); } } /* klizni trouglic ("lavalamp" teme): glif U+F10D 8px, rotate(-135deg) translateY(-70%), stoji ispod teksta aktivne stavke, a na hover klizi ispod stavke pod misem (0.6s). Poziciju (--lava-x) postavlja sajt.js; do tada je nevidljiv. */ .nav__lista::after { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; height: 8px; background-color: var(--primary); pointer-events: none; opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 8H8V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 8H8V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transform: translateX(var(--lava-x, 0px)) rotate(-135deg) translateY(-70%); } .nav__lista--lava::after { opacity: 1; } .nav__lista--lava-anim::after { transition: transform .6s cubic-bezier(.645, .045, .355, 1); } .zaglavlje--zalepljen { position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 8px 9px 38px rgba(0,0,0,.1); animation: spustiSe .3s ease; } @keyframes spustiSe { from { transform: translateY(-100%); } to { transform: translateY(0); } } .zaglavlje--zalepljen .nav { height: var(--header-h); } .zaglavlje--zalepljen .nav__omot { justify-content: space-between; } .zaglavlje--zalepljen .nav__logo { display: block; margin-left: 15px; } .zaglavlje--zalepljen .nav__logo img { width: 65px; } .zaglavlje--zalepljen .nav__lista { margin-inline: auto; } .zaglavlje--zalepljen .nav__link { color: var(--naslov); } .zaglavlje--zalepljen .nav__link:hover, .zaglavlje--zalepljen .nav__stavka--aktivna > .nav__link { color: var(--primary); } .zaglavlje--zalepljen .nav__prazno { width: 65px; margin-right: 15px; } .nav__stavka { position: relative; display: flex; } .podmeni { position: absolute; top: 100%; left: -20px; min-width: 240px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .nav__stavka:hover > .podmeni, .nav__stavka:focus-within > .podmeni { opacity: 1; visibility: visible; transform: translateY(0); } .podmeni a { display: block; padding: 8px 24px; font-family: var(--font-naslov); font-size: 15px; font-weight: 500; color: var(--naslov); transition: color .2s, background-color .2s; } .podmeni a:hover { color: var(--primary); background: var(--svetlo); } /* podmeni Products: proizvodjaci sa logotipima preko cele sirine prozora (namerno odstupanje, Marko 30.9.2026, predlog A). Panel je u stavci menija (zbog mobilnog panela), pa levu ivicu i sirinu (--mega-levo, --mega-sirina) postavlja sajt.js kad se stavka otvori; sadrzaj u sirini sajta 1170px. */ .podmeni--mega { left: var(--mega-levo, -20px); width: var(--mega-sirina, 1170px); min-width: 0; padding: 0; box-shadow: 0 20px 40px rgba(0,0,0,.12); } /* skriveni panel pre prvog otvaranja (pozicija jos nije izracunata) ne sme da prosiri stranu: traka menija vodoravno sece sve sto izlazi van nje (otvoren panel je tacno u prozoru) */ @media (min-width: 1201px) { .zaglavlje { overflow-x: clip; } } .mega__omot { max-width: 1170px; margin-inline: auto; padding: 30px 0; } .mega__mreza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .podmeni .mega__brend, .podmeni .mega__brend:hover { display: grid; place-items: center; height: 96px; padding: 0; border: 1px solid var(--ivica); background: none; transition: border-color .2s; } .podmeni .mega__brend:hover { border-color: var(--primary); } /* sivi logotip, na hover isti logotip u boji (kao karusel na pocetnoj) */ .mega__brend img { grid-area: 1 / 1; width: auto; height: auto; max-width: 70%; max-height: 54px; transition: opacity .3s; } .mega__boja { opacity: 0; } .mega__brend:hover .mega__boja, .mega__brend:focus-visible .mega__boja { opacity: 1; } .mega__brend:hover .mega__siva, .mega__brend:focus-visible .mega__siva { opacity: 0; } .podmeni .mega__dodatno, .podmeni .mega__dodatno:hover { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 18px 24px; background: var(--tamno); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .podmeni .mega__dodatno:hover { background: var(--primary); } .hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .hamburger span { position: relative; display: block; width: 24px; height: 2px; background: currentColor; } .hamburger span::before, .hamburger span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; } .hamburger span::before { top: -8px; } .hamburger span::after { top: 8px; } /* razmaci menija po prelomima teme (responsive.css originala) */ @media (max-width: 1545px) { .nav__lista { padding-inline: 10px; } .nav__link { padding-inline: 18px; } } @media (max-width: 1250px) { .nav__lista { padding-inline: 15px; } .nav__link { padding-inline: 13px; } } /* ---------- 26. Mobilni header i bocni meni (<=1200px) ---------- izmereno na originalu: traka 70px #222328 (sticky), hamburger levo (3 linije 20x2, razmak 7px), logo 43px u sredini; meni je panel sa leve strane (#113039, sirina 100%-48px do 400px, transform .45s ease-in-out), preko strane tamni sloj rgba(34,35,40,.8); dugme X 40x40 narandzasto, 5px desno od panela; stavke 38px, podmeni uvucen 20px, strelica 8x8 kosa crta rotirana 135deg (zatvoren) / 225deg (otvoren) */ @media (max-width: 1200px) { :root { --header-h: 70px; --nav-h: 0px; } .vrh { position: sticky; top: 0; z-index: 90; height: 70px; background: #222328; } /* kontejner mobilnog headera teme (.wgl-container), izmereno na originalu 2.10.2026: 950px do 1200, 708px do 992, 560px do 767, 420px do 600, 90% do 480; hamburger stoji na njegovoj levoj ivici */ .vrh__omot { position: relative; justify-content: center; width: 950px; max-width: none; padding: 0; height: 100%; } .vrh__logo img { width: 43px; } /* logo na tamnoj traci i u panelu: bez obrisa; tekst je ~6px visok - "ETI" svetlija crvena (::before iznad slike), "MARINE" belo (::after), isecene kopije iste slike preko originalnog teksta */ .vrh__logo::before, .nav__logo::before { inset: 0; z-index: auto; background-size: 100% 100%; clip-path: inset(79% 68.4% 0 0); filter: brightness(1.5); } .vrh__logo::after, .nav__logo::after { content: ""; position: absolute; inset: 0; background: url("/slike/2025/10/Eti-Marin-Sidro-250-x-250.png") center / 100% 100% no-repeat; clip-path: inset(79% 0 0 31.6%); filter: brightness(0) invert(1); } .vrh__desno { display: none; } /* linije (span, 15px od leve ivice dugmeta) na levoj ivici kontejnera */ .hamburger { display: block; position: absolute; left: -15px; top: 13px; width: 50px; height: 46px; } .hamburger span, .hamburger span::before, .hamburger span::after { position: absolute; left: 0; width: 20px; height: 2px; background: #fff; } .hamburger span { left: 15px; top: 15px; } .hamburger span::before { top: 7px; } .hamburger span::after { top: 14px; } .zaglavlje, .zaglavlje--nad-herojem { position: fixed; inset: 0; z-index: 100; background: rgba(34, 35, 40, .8); opacity: 0; visibility: hidden; transition: opacity .45s ease-in-out, visibility .45s; } .zaglavlje--otvoren { opacity: 1; visibility: visible; } .zaglavlje, .zaglavlje--nad-herojem { box-shadow: none; } .zaglavlje::after { display: none; } .nav { position: absolute; left: 0; top: 0; display: block; height: 100%; width: calc(100% - 48px); max-width: 400px; background: #113039; transform: translateX(-100%); transition: transform .45s ease-in-out; } .zaglavlje--otvoren .nav { transform: none; } .nav__omot { display: block; height: 100%; max-width: none; padding: 30px 13px 30px 30px; overflow-y: auto; } .nav__logo { display: block; width: 43px; margin-bottom: 30px; } .nav__logo img { width: 43px; } .nav__prazno { display: none; } .nav__lista { display: block; height: auto; margin: 0; padding: 0; } .nav__lista::after { display: none; } .nav__stavka { display: block; } /* u panelu originala hover ne menja boju; aktivna stavka ostaje narandzasta */ .nav__link, .nav__link:hover { height: 38px; padding: 0; color: #fff; } .nav__stavka--aktivna > .nav__link { color: var(--primary); } .nav__karet { position: absolute; right: 10px; top: 19px; width: 8px; height: 8px; margin: 0; background: none; -webkit-mask: none; mask: none; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: translate(-50%, -50%) rotate(135deg); transition: transform .3s; } .nav__stavka--otvoren .nav__karet { transform: translate(-50%, -50%) rotate(225deg); } .podmeni { position: static; display: none; min-width: 0; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav__stavka--otvoren > .podmeni { display: block; } .podmeni a, .podmeni a:hover { height: 38px; display: flex; align-items: center; margin-left: 20px; padding: 0; font-size: 16px; color: #fff; background: none; } /* proizvodjaci u panelu: svi logotipi u boji, bele plocice u 2 kolone; Spare Parts obican link */ .podmeni--mega { width: auto; } .mega__omot { max-width: none; padding: 6px 0 4px 20px; } .mega__mreza { grid-template-columns: 1fr 1fr; gap: 8px; } .podmeni .mega__brend, .podmeni .mega__brend:hover { height: 56px; margin: 0; border: 0; border-radius: 3px; background: #fff; } .mega__brend img { max-width: 78%; max-height: 32px; } .mega__siva { display: none; } .mega__boja { opacity: 1; } .podmeni .mega__dodatno, .podmeni .mega__dodatno:hover { display: flex; margin: 0; padding: 0; background: none; font-weight: 500; letter-spacing: normal; text-transform: none; } .mega__dodatno svg { display: none; } .nav__zatvori { display: block; position: absolute; left: calc(100% + 5px); top: 15px; width: 40px; height: 40px; border-radius: 5px; background: var(--primary); } .nav__zatvori span::before, .nav__zatvori span::after { content: ""; position: absolute; left: 10px; top: 19px; width: 20px; height: 2px; background: #fff; } .nav__zatvori span::before { transform: rotate(45deg); } .nav__zatvori span::after { transform: rotate(-45deg); } } @media (max-width: 992px) { .vrh__omot { width: 708px; } } @media (max-width: 767px) { .vrh__omot { width: 560px; } } @media (max-width: 600px) { .vrh__omot { width: 420px; } } @media (max-width: 480px) { .vrh__omot { width: 90%; } } /* ---------- 7. Page hero (page-header teme Transmax) ---------- Prepisano iz main.css / responsive.css teme i inline stila page-headera koji tema pise po strani (min-height 420px, padding 85px 0 40px, margin-bottom 40px; naslov 48/60, mrvice 14/24), plus transmax-theme-info-inline-css: do 1200px padding 90px 0, visina po sadrzaju, naslov 30/42. Kontejner = .wgl-container teme: 1170 / 950 (<=1200) / 708 (<=992) / 560 (<=767) / 420 (<=600) / 90% (<=480). Varijanta po strani (gradi.strana_hero): --u-redu = breadcrumbs_inline; ostalo inline stil. */ .strana-hero { position: relative; z-index: 1; display: flex; align-items: center; min-height: var(--hero-min, 420px); padding: 85px 0 40px; /* 40px margin-bottom page-headera + 40px padding-top #main (na originalu main je posle heroja) */ margin-bottom: 80px; background-size: cover; background-position: bottom center; background-repeat: no-repeat; } /* zatamnjenje: .page-header:before { background: #222328; opacity: .5 } */ .strana-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #222328; opacity: .5; } .strana-hero__omot { width: 1170px; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .strana-hero--u-redu .strana-hero__omot { flex-direction: row; align-items: center; justify-content: space-between; } .strana-hero__naslov { margin: 0; color: #fff; font-size: 48px; line-height: 60px; font-weight: 700; } /* mrvice: .page-header_breadcrumbs .breadcrumbs (DM Sans 700, uppercase, nowrap); breadcrumbs_align_right */ .mrvice { align-self: flex-end; color: #fff; font-family: var(--font-naslov); font-size: 14px; line-height: 24px; font-weight: 700; text-transform: uppercase; white-space: nowrap; } .strana-hero--u-redu .mrvice { align-self: auto; } .mrvice a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: all .4s; } .mrvice a:hover { text-decoration-color: currentColor; } .mrvice__tekuca { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: default; transition: .4s; } /* .divider { margin: 0 8px } + :before glif 14px, inline-block, line-height 1, margin-bottom 2px, vertical-align middle, transform scale(-1) */ .mrvice__crta { margin: 0 8px; } .mrvice__crta svg { display: inline-block; width: 14px; height: 14px; max-width: none; margin-bottom: 2px; vertical-align: middle; transform: scale(-1); fill: currentColor; /* mrvice su 700, a font ikonica nema bold rez pa ga browser podebljava (sinteticki bold); potez 22 jedinice izmeren pikselski prema originalu (1920px, DPR 1 i 2) */ stroke: currentColor; stroke-width: 22px; } /* #main { padding: 40px 0 } na unutrasnjim stranama: donjih 40px je razmak poslednje sekcije i futera; --mb = sopstvena donja margina poslednje sekcije na originalu (postavlja je sadrzaj, npr. about-us -40px) */ .strana-hero ~ :last-child { margin-bottom: calc(40px + var(--mb, 0px)); } /* ---------- Strana 404 (page-404.css teme) ---------- body.error404 #main { padding: 0 } > .wgl-container { padding: 135px 0 140px }; .page_404_wrapper max-width 830px, centrirano (<=992: padding 0 30px); .error_page padding 20px 0 (<=480: margin-top -70px); naslov h2 42/48 margin-top 13px (<=480: 34px, margin 0); opis margin 11px 0 30px; dugme .wgl-button: DM Sans 13px 700, padding 23px 40px, #034b5b -> hover #ff7d44, .4s */ .strana-hero ~ .greska { margin-bottom: 0; } .greska { padding: 135px 0 140px; } .greska__omot { max-width: 830px; margin-inline: auto; padding: 20px 0; text-align: center; } /* ukrasna slika 404.png (711x351) iznad naslova; tema je umanjuje transformom: <=768 .8, <=600 .7 */ .greska__slika img { margin-inline: auto; } .greska__naslov { margin: 13px 0 0; font-size: 42px; line-height: 48px; } .greska__opis { margin: 11px 0 30px; } .greska__dugme { display: inline-block; padding: 23px 40px; font-family: var(--font-naslov); font-size: 13px; font-weight: 700; line-height: 1.1; color: #fff; background: var(--secondary); transition: .4s; } .greska__dugme:hover { background: var(--primary); } @media (max-width: 992px) { .greska__omot { padding-inline: 30px; } } @media (max-width: 768px) { .greska__slika { transform: scale(.8); } } @media (max-width: 600px) { .greska__slika { transform: scale(.7); } } @media (max-width: 480px) { .greska__omot { margin-top: -70px; } .greska__naslov { margin-top: 0; font-size: 34px; } } @media (max-width: 1200px) { .strana-hero { min-height: 0; padding: 90px 0; } .strana-hero__omot { width: 950px; } .strana-hero__naslov { font-size: 30px; line-height: 42px; } /* tema: :before { width: 10px } - kutija 10px, glif ostaje 14px i preliva se; okretanje oko sredine kutije */ .mrvice__crta svg { margin-right: -4px; transform-origin: 5px 50%; } } @media (max-width: 992px) { .strana-hero__omot { width: 708px; } } @media (max-width: 768px) { .mrvice { white-space: normal; } } @media (max-width: 767px) { .strana-hero__omot { width: 560px; } .strana-hero--u-redu .strana-hero__omot { flex-direction: column; } .strana-hero--u-redu .mrvice { text-align: center; } } @media (max-width: 600px) { .strana-hero__omot { width: 420px; } } @media (max-width: 480px) { .strana-hero__omot { width: 90%; } } /* ---------- 6. Hero slider ---------- Na originalu Slider Revolution 7; podesavanja su prepisana iz arhiva/meta/hero-sr7-*.json. Mreza slojeva po nivou (sirina heroja = sirina prozora bez skrolbara, kao u slajderu): >=1024: 1200x800 | 778-1023: 1024x650 | 480-777: 778x600 | <480: 480x500 Ispod sirine mreze sve se skalira sa sirinom (--u = 1px mreze). Font, visina reda, sirina sloja i padding dugmeta se zaokruzuju na ceo piksel kao u slajderu. Ukrasni slojevi su zadati samo za mrezu 1200, pa se njihova velicina na svim nivoima skalira sa --u1. Tekst ulazi odozdo po redu (0.3 / 0.62 / 0.94 / 1.33 s, 1 s power3.inOut); na slajdovima 2 i 3 tekst nestaje posle 5 s, na prvom tek pri smeni. Smena na 8 s, pozadina fade 0.7 s. */ .hero { container: hero / inline-size; position: relative; overflow: hidden; } .hero__scena { --gw: 1200; --gh: 800; --u1: min(1px, 100cqw / 1200); --u: var(--u1); position: relative; height: calc(var(--gh) * var(--u)); } .hero__slajd { position: absolute; inset: 0; z-index: 1; visibility: hidden; } .hero__slajd--prethodni { z-index: 2; visibility: visible; } .hero__slajd--aktivan { z-index: 3; visibility: visible; } .hero__pozadina { position: absolute; inset: 0; background-size: cover; background-position: 0% 50%; background-repeat: no-repeat; } .hero__slajd--aktivan .hero__pozadina { animation: heroPozadina .7s cubic-bezier(.455, .03, .515, .955) both; } @keyframes heroPozadina { from { opacity: 0; } } /* mreza slojeva: 1200px u sredini, a uze od toga preko cele sirine */ .hero__mreza { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--gw) * var(--u)); translate: -50% 0; } .hero__slajd--prethodni .hero__mreza { animation: heroIzlaz .3s cubic-bezier(.645, .045, .355, 1) forwards; } .hero__sloj { position: absolute; margin: 0; opacity: 0; } .hero__naslov, .hero__tekst, .hero__dugme, .hero__link { left: calc(var(--x) * var(--u)); top: calc(50% + var(--y) * var(--u)); translate: 0 -50%; font-size: calc(var(--fs) * var(--u)); font-size: round(calc(var(--fs) * var(--u)), 1px); line-height: calc(var(--lh) * var(--u)); line-height: round(calc(var(--lh) * var(--u)), 1px); letter-spacing: 0; text-align: left; --od: translateY(calc(var(--gh) * var(--u) / 2 - var(--y) * var(--u) + 50%)); } .hero__naslov, .hero__tekst { width: calc(var(--w) * var(--u)); width: round(calc(var(--w) * var(--u)), 1px); color: #fff; } .hero__naslov { --x: 15; --y: -74; --w: 767; --fs: 60; --lh: 72; --kasni: .3s; z-index: 8; font-family: var(--font-naslov); font-weight: 700; } .hero__slajd--3 .hero__naslov { --w: 873; } .hero__tekst { --x: 15; --y: 44; --w: 541.188; --fs: 18; --lh: 32; --kasni: .62s; z-index: 9; font-family: var(--font-tekst); font-weight: 400; } .hero__slajd--2 .hero__tekst { --x: 16; --y: 40; } .hero__dugme, .hero__link { white-space: nowrap; font-family: var(--font-naslov); font-weight: 700; text-transform: uppercase; } .hero__dugme { --x: 15; --y: 148; --fs: 14; --lh: 60; --p: 40; --kasni: .94s; z-index: 11; padding-inline: calc(var(--p) * var(--u)); padding-inline: round(calc(var(--p) * var(--u)), 1px); color: #fff; background: var(--primary); transition: color .4s cubic-bezier(.25, .46, .45, .94), background-color .4s cubic-bezier(.25, .46, .45, .94); } .hero__dugme:hover { color: var(--secondary); background: var(--svetlo); } .hero__link { --x: 240; --y: 148; --fs: 14; --lh: 34; --kasni: 1.33s; z-index: 10; --od: translateX(-50px); color: var(--primary); text-decoration: underline; border-bottom: 1px solid var(--primary); transition: border-color .4s cubic-bezier(.25, .46, .45, .94); } .hero__link:hover { text-decoration: none; border-bottom-color: rgba(255, 125, 68, 0); } /* ukrasni trouglovi levo (na mobilnom desno); prate mis (paralaksa, --mis-x/--mis-y iz sajt.js) */ .hero__ukras { left: calc(var(--x) * var(--u)); object-fit: cover; width: calc(var(--iw) * var(--u1)); width: round(calc(var(--iw) * var(--u1)), 1px); height: calc(var(--ih) * var(--u1)); height: round(to-zero, calc(var(--ih) * var(--u1)), 1px); --od: translateX(calc(var(--odx) * var(--u))); translate: calc(var(--mis-x, 0) * var(--m) * 1px) calc(var(--mis-y, 0) * var(--m) * 1px); transition: translate .4s cubic-bezier(.215, .61, .355, 1); } .hero__ukras--1 { --iw: 68; --ih: 226; --x: -205; --y: 105; --odx: -50; --m: 5; --kasni: .78s; z-index: 12; top: calc(var(--y) * var(--u)); } .hero__ukras--2 { --iw: 157; --ih: 436; --x: -323; --y: 20; --odx: -50; --m: -4; --kasni: 1.12s; z-index: 13; bottom: calc(var(--y) * var(--u)); } .hero__slajd--aktivan .hero__sloj, .hero__slajd--prethodni .hero__sloj { opacity: 1; animation: heroUlaz 1s cubic-bezier(.645, .045, .355, 1) var(--kasni) both; } .hero__slajd--2.hero__slajd--aktivan .hero__sloj, .hero__slajd--2.hero__slajd--prethodni .hero__sloj, .hero__slajd--3.hero__slajd--aktivan .hero__sloj, .hero__slajd--3.hero__slajd--prethodni .hero__sloj { animation: heroUlaz 1s cubic-bezier(.645, .045, .355, 1) var(--kasni) both, heroIzlaz .3s cubic-bezier(.645, .045, .355, 1) 5s forwards; } @keyframes heroUlaz { from { opacity: 0; transform: var(--od); } to { opacity: 1; transform: none; } } @keyframes heroIzlaz { to { opacity: 0; } } @container hero (max-width: 1023px) { .hero__scena { --gw: 1024; --gh: 650; --u: calc(100cqw / 1024); } .hero__scena .hero__naslov { --y: -114; } .hero__scena .hero__tekst { --x: 15; --y: 4; --w: 541; } .hero__scena .hero__dugme { --y: 108; --p: 34; } .hero__scena .hero__link { --x: 218; --y: 106; } .hero__scena .hero__ukras--1 { --x: -174; --y: 89; --odx: -42; } .hero__scena .hero__ukras--2 { --x: -275; --y: 17; --odx: -42; } } @container hero (max-width: 777px) { .hero__scena { --gw: 778; --gh: 600; --u: calc(100cqw / 778); } .hero__scena .hero__naslov { --x: 9; --y: -97; } .hero__scena .hero__tekst { --x: 9; --y: 8; --w: 505; --fs: 16; --lh: 24; } .hero__scena .hero__dugme { --x: 9; --y: 95; --lh: 50; --p: 26; } .hero__scena .hero__link { --x: 195; --y: 94; } .hero__scena .hero__ukras--1 { --x: -132; --y: 68; --odx: -31; } .hero__scena .hero__ukras--2 { --x: -209; --y: 12; --odx: -31; } } @container hero (max-width: 479px) { .hero__scena { --gw: 480; --gh: 500; --u: calc(100cqw / 480); } .hero__scena .hero__naslov { --x: 10; --y: -119; --w: 356; --fs: 32; --lh: 40; } .hero__scena .hero__tekst { --x: 10; --y: -23; --w: 393; } .hero__scena .hero__dugme { --x: 10; --y: 68; --fs: 12; --lh: 44; --p: 16; } .hero__scena .hero__link { --x: 155; --y: 68; --fs: 12; --lh: 24; } /* na mobilnom trouglovi stoje desno i ne prate mis */ .hero__scena .hero__ukras--1 { --x: 448; --y: 15; --odx: -19; --m: 0; } .hero__scena .hero__ukras--2 { --x: 401; --y: 45; --odx: -19; --m: 0; } } /* strelice: krug 55px, glif U+F113 iz Flaticon fonta (24px); na <=1200px pomerene gore levo */ .hero__strelica { position: absolute; right: 0; top: 50%; z-index: 5; display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; background: #fff; color: #000; opacity: 0; transition: background-color .35s, color .35s; } .hero__strelica svg { width: 24px; height: 24px; } .hero__strelica--nazad { transform: translate(-40px, calc(-50% - 17px)); } .hero__strelica--nazad svg { transform: rotate(180deg); } .hero__strelica--napred { transform: translate(-40px, calc(-50% + 56px)); } .hero__strelica:hover { background: var(--primary); color: #fff; } .hero--pokrenut .hero__strelica { animation: heroStrelice 1.1s cubic-bezier(.645, .045, .355, 1) .9s forwards; } @keyframes heroStrelice { to { opacity: 1; } } @media (max-width: 1200px) { .hero__strelica--nazad { transform: translate(-65px, -94px); } .hero__strelica--napred { transform: translate(-65px, -21px); } } /* ========================================================================== Pocetna A - sekcije ispod heroja: kartice usluga, "Around the World", logotipi, cetiri istaknute kolone. Pravila prepisana iz CSS-a originala (tema Transmax main.css, dynamic.css, responsive.css; Elementor post-394.css i kit post-5665.css). Prelomi originala: 1200px (tablet) i 767px (mobilni); boxed kontejner teme: 1200 -> 980 (<=1200) -> 738 (<=992) -> 590 (<=767) -> 450 (<=600) -> 90%+30px (<=480). ========================================================================== */ /* ---------- 8. Kartice usluga (sekcija d46a18d, wgl-info-box) ---------- */ /* original: z-index 2; ovde 5 jer slajdovi heroja (z-index 1-3, .hero nije izolovan) inace prekrivaju gornjih 56px kartica */ .usluge { position: relative; z-index: 5; margin-top: -56px; } .usluge__mreza { display: flex; max-width: 1200px; margin-inline: auto; } .usluge__kolona { display: flex; width: 50%; } .usluge__kolona:first-child { padding-left: 15px; } .usluge__kolona:last-child { padding-right: 15px; } .usluga { display: flex; width: 100%; background-color: #fff; box-shadow: 5px 6px 30px 0 rgba(0,0,0,.1); } .usluga--tamna { color: #fff; background-color: #003b49; background-position: right bottom; background-repeat: no-repeat; } /* glif teme 52px (druga kartica 42px) sa krugom 45px iza (elementor-view-bubble) */ .usluga__ikona { flex: none; } .usluga__glif { position: relative; z-index: 1; display: inline-block; margin: 41px 0 14px 48px; font-size: 52px; line-height: 52px; color: var(--primary); } .usluga__glif svg { display: inline; width: 1em; height: 1em; max-width: none; } .usluga__glif::after { content: ""; position: absolute; top: 25%; left: 45%; z-index: -1; width: 45px; height: 45px; border-radius: 50%; background-color: rgba(255,125,68,.08); transition: .4s; } .usluga--tamna .usluga__glif { margin: 49px 0 14px 58px; font-size: 42px; line-height: 42px; } .usluga--tamna .usluga__glif::after { top: 15%; left: 32%; background-color: #034b5b; } .usluga:hover .usluga__glif::after { animation: usluga-mehur .5s ease; } @keyframes usluga-mehur { 0%, 100% { transform: scale(1); } 50% { transform: scale(.76); } } .usluga__sadrzaj { position: relative; flex-grow: 1; } .usluga__naslov { position: relative; z-index: 1; margin: 41px 0 9px 29px; font-size: 28px; line-height: 1.5; word-break: break-word; transition: .4s; } .usluga--tamna .usluga__naslov { color: #fff; } .usluga:hover .usluga__naslov { color: var(--primary); } .usluga__tekst { padding: 0 50px 10px 30px; font-size: 16px; line-height: 1.875em; transition: .4s; } .usluga__tekst p { margin: 0; } .usluga__dugme { padding: 0 0 42px 31px; } /* "Explore More" izmedju dve crtice (button-read-more); na prelaz misa crtice se prelivaju */ .usluga__vise { position: relative; z-index: 1; display: inline-block; font-family: var(--font-naslov); font-size: 14px; font-weight: 700; line-height: .8; white-space: nowrap; color: var(--primary); transition: .5s; } .usluga__vise span { display: inline-block; padding: 0 10px; } .usluga__vise::before, .usluga__vise::after, .usluga__vise span::before, .usluga__vise span::after { content: ""; position: absolute; z-index: 1; width: 2px; height: 100%; background: currentColor; transition: 0s; } .usluga__vise::before, .usluga__vise::after { left: 0; } .usluga__vise span::before, .usluga__vise span::after { right: 0; } .usluga__vise::before { bottom: 0; } .usluga__vise::after { top: 0; height: 0; transition: .5s; } .usluga__vise span::before { bottom: 0; height: 0; transition: .5s; } .usluga__vise span::after { top: 0; } .usluga:hover .usluga__vise::before { height: 0; transition: .5s; } .usluga:hover .usluga__vise::after { height: 100%; transition-delay: .5s; } .usluga:hover .usluga__vise span::after { height: 0; transition: .5s; } .usluga:hover .usluga__vise span::before { height: 100%; transition-delay: .5s; } @media (max-width: 1200px) { .usluge__mreza { flex-wrap: wrap; max-width: 1024px; } .usluge__kolona { width: 100%; } .usluge__kolona:first-child, .usluge__kolona:last-child { padding: 0; } } @media (max-width: 767px) { .usluge__mreza { max-width: 767px; } .usluga__glif { margin: 25px 0 0 20px; } .usluga--tamna .usluga__glif { margin: 23px 0 0 30px; } .usluga__naslov { margin: 23px 0 10px 30px; font-size: 20px; } .usluga__dugme { padding: 0 0 20px 30px; } } /* ---------- 9. Around the World (sekcije 3ab2f15 + 4eef446) ---------- */ /* drugi deo dvodelnog naslova (dblh__title-2) u boji teme - vazi i za .uvod__naslov i h2/h3 em na drugim stranama */ .svet__naslov em, .uvod__naslov em, h2 em, h3 em { font-style: normal; color: var(--primary); } .svet { padding-top: 120px; overflow-x: clip; } /* razmak 120px = spacer d7b7988 */ .svet__omot, .logotipi__omot { max-width: 1200px; margin-inline: auto; } .svet__omot { display: flex; } /* kolona 50%, unutra margina 10% kolone + 15px; na vrhu spacer 38px (f33885f) */ .svet__tekst { width: 50%; padding: 38px calc(5% + 15px) 0 15px; } /* wgl-double-heading: 42px / 1.3333em, razmak ispod 20 - 3 = 17px; omot naslova je z-index 0, a tekstovi ispod su pozicionirani (widgeti Elementora) - zato kosi ukras ide IZA teksta */ .svet__naslov { position: relative; z-index: 0; margin: 0 0 17px; font-size: 42px; line-height: 1.3333333333em; } .svet__razdelnik { position: relative; z-index: -1; display: inline-block; width: 0; height: 1em; color: #f5f5f5; } .svet__razdelnik::before { content: ""; position: absolute; z-index: 0; top: -.476em; left: -.833333em; width: 1.5476em; height: 2.976em; transform: skewY(45deg); background-color: currentColor; } .svet__uvod, .svet__opis { position: relative; display: flow-root; } .svet__uvod { margin-bottom: -4px; font-size: 18px; line-height: 32px; color: #202020; } .svet__opis { margin-bottom: 20px; } .svet__uvod > p, .svet__opis > p { margin: 0 0 16px; } /* wgl-button btn-size-xl */ .svet__dugme { position: relative; z-index: 1; display: inline-block; padding: 23px 42px 22px; font-family: var(--font-naslov); font-size: 14px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: var(--secondary); background-color: #f5f5f5; transition: .4s; } .svet__dugme:hover { color: #fff; background-color: var(--primary); } /* wgl-image-layers: 4 sloja iste velicine; kontejner izlazi 36px levo i 147px desno od kolone */ .svet__slike { width: 50%; padding: 0 15px; } .svet__slojevi { position: relative; margin: 0 -147px 0 -36px; } .svet__sloj { position: relative; display: block; max-width: 100%; line-height: 0; } .svet__sloj + .svet__sloj { position: absolute; left: 0; top: 0; } /* ulaz slojeva kao wgl-image-layers teme: kad blok udje u ekran (sajt.js dodaje .slojevi-kreni), svaki sloj ulazi za 1000 ms sa svojim kasnjenjem: slide_up / slide_left / slide_down / zoom_in */ .svet__sloj img { opacity: 0; visibility: hidden; transition: all 1000ms; } .svet__sloj:nth-child(1) img { transform: translateY(50%); transition-delay: 400ms; } .svet__sloj:nth-child(2) img { transform: translateX(50%); transition-delay: 800ms; } .svet__sloj:nth-child(3) img { transform: translateY(-50%); transition-delay: 1200ms; } .svet__sloj:nth-child(4) img { transform: scale3d(.2, .2, .2); transition-delay: 1600ms; } .slojevi-kreni .svet__sloj img { opacity: 1; visibility: visible; transform: none; } @media (max-width: 1200px) { .svet__omot, .logotipi__omot { width: 980px; max-width: 1024px; } .svet__omot { flex-wrap: wrap; } .svet__tekst { width: 100%; padding-right: calc(10% + 15px); } .svet__slike { width: 100%; } .svet__slojevi { margin: 50px 0 0; } } @media (max-width: 992px) { .svet__omot, .logotipi__omot { width: 738px; } } @media (max-width: 767px) { .svet__omot, .logotipi__omot { width: 590px; max-width: 767px; } .svet__naslov { font-size: 30px; } } @media (max-width: 600px) { .svet__omot, .logotipi__omot { width: 450px; } } @media (max-width: 480px) { .svet__omot, .logotipi__omot { width: calc(90% + 30px); max-width: 100%; } } /* ---------- 10. Logotipi (sekcija a938e85, wgl-clients / Swiper) ---------- */ /* razmaci: spacer 120px | karusel | razmak widgeta 20px + spacer 120px (<=1200: 70 / 20 + 60) */ .logotipi { padding: 120px 0 140px; } .logotipi__omot { padding: 0 15px; } .logotipi__okvir { overflow: hidden; } /* 16 slajdova (8 + kopija); u vidnom polju 5 (>1200), 2 (768-1200), 1 (<768): sirina trake = 16/5, 16/2, 16/1 okvira, slajd = 1/16 trake */ .logotipi__niz { display: flex; align-items: center; width: 320%; animation: logotipi-korak 26.4s ease infinite; } .logotipi__stavka { display: flex; flex: 0 0 6.25%; min-width: 0; justify-content: center; align-items: center; transition: .4s; } .logotipi__veza { position: relative; z-index: 1; display: flex; align-items: center; height: max-content; overflow: hidden; } .logotipi__veza img { transition: .3s; } /* anim-ex_images_ver: hover slika uklizava odozgo, glavna izlazi nadole */ .logotipi__hover { position: absolute; top: 0; left: 0; z-index: 1; visibility: hidden; transform: translateY(-100%); } .logotipi__veza:hover .logotipi__hover { visibility: visible; opacity: 1; transform: translateY(0); } .logotipi__veza:hover .logotipi__slika { transform: translateY(100%); } /* sirine logotipa - post-394.css (.elementor-repeater-item-* img), po brendu */ .logotipi__stavka--rolls-royce img { width: 200px; } .logotipi__stavka--cat img { width: 120px; } .logotipi__stavka--wartsila img { width: 123px; } .logotipi__stavka--yanmar img { width: 66px; } .logotipi__stavka--sulzer-products img { width: 120px; } .logotipi__stavka--man img { width: 106px; } .logotipi__stavka--mercury-marine img { width: 245px; } .logotipi__stavka--perkins img { width: 219px; } /* Swiper autoplay originala: 3000 ms mirovanja, pa pomak za jedan slajd 300 ms (ease); 8 koraka x 3,3 s = 26,4 s, na kraju traka stoji na pocetku kopije (bez skoka) */ @keyframes logotipi-korak { 0%, 11.364% { transform: translateX(0); } 12.5%, 23.864% { transform: translateX(-6.25%); } 25%, 36.364% { transform: translateX(-12.5%); } 37.5%, 48.864% { transform: translateX(-18.75%); } 50%, 61.364% { transform: translateX(-25%); } 62.5%, 73.864% { transform: translateX(-31.25%); } 75%, 86.364% { transform: translateX(-37.5%); } 87.5%, 98.864% { transform: translateX(-43.75%); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .logotipi__niz { animation: none; } } @media (max-width: 1200px) { .logotipi { padding: 70px 0 80px; } .logotipi__niz { width: 800%; } } @media (max-width: 767px) { .logotipi__niz { width: 1600%; } } /* ---------- 11. Istaknute kolone preko slike (sekcija 9ed938e, wgl-service-1) ---------- */ .istaknuto { position: relative; background-position: center; background-size: cover; } /* kolone ne izjednacavaju visinu: svaka kolona ima svoju visinu (i svoju ivicu) */ .istaknuto__mreza { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; } .istaknuto__stavka { position: relative; overflow: hidden; padding: 380px 0 109px; border: 0 solid rgba(255,255,255,.3); border-right-width: 1px; } .istaknuto__stavka:nth-child(4) { border: 0; } /* na prelaz misa: zamucenje pozadine iza kolone */ .istaknuto__stavka::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .4s; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .istaknuto__stavka:hover::before { opacity: 1; } .istaknuto__telo { position: relative; z-index: 2; } .istaknuto__telo::after { content: ""; display: block; width: 0; height: 1px; margin-top: 25px; } /* sadrzaj spusten za 53% svoje visine; na prelaz misa se podize, opis se pojavljuje */ .istaknuto__sadrzaj { transform: translateY(53%); transition: all .6s; } .istaknuto__stavka:hover .istaknuto__sadrzaj { transform: translateY(0); } .istaknuto__broj { margin: 0 38px 5px 48px; font-family: var(--font-naslov); font-size: 24px; font-weight: 400; line-height: 1.6; color: var(--primary); } .istaknuto__stavka:nth-child(2) .istaknuto__broj { margin-left: 46px; } .istaknuto__naslov { margin: 0 38px 20px 48px; font-size: 36px; line-height: 44px; } .istaknuto__naslov span { position: relative; font-size: 30px; line-height: 1.4em; color: #fff; } .istaknuto__opis { margin: 0 48px; font-size: 18px; line-height: 1.875em; color: #fff; opacity: 0; transition: opacity .4s; } .istaknuto__stavka:hover .istaknuto__opis { animation: istaknuto-opis .6s ease-in .3s forwards; } @keyframes istaknuto-opis { 0%, 30% { opacity: 0; } 100% { opacity: 1; } } .istaknuto__dugme-omot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0 0 50px 50px; line-height: 0; } .istaknuto__dugme { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 30px; color: #fff; background-color: rgba(255,255,255,.2); transition: background-color .4s, color .4s, transform .4s; } .istaknuto__dugme:hover { background-color: var(--primary); } .istaknuto__dugme svg { width: 24px; height: 24px; } @media (max-width: 1200px) { .istaknuto__mreza { grid-template-columns: repeat(2, 1fr); } .istaknuto__stavka { padding: 60px 0 110px; } .istaknuto__stavka:nth-child(1) { border-width: 0 1px 1px 0; } .istaknuto__stavka:nth-child(2) { border-width: 0 0 1px 0; } .istaknuto__naslov span { font-size: 28px; } } @media (max-width: 767px) { .istaknuto__mreza { grid-template-columns: 1fr; } .istaknuto__stavka:nth-child(-n+3) { border-width: 0 0 1px 0; } } /* ========================================================================== Pocetna, drugi deo: video, kompetencije, brojaci, poziv sa logom + strana /video/. Pravila prepisana sa originala: Elementor post-394.css (pocetna), post-5921.css (/video/), post-5665.css (kit), tema Transmax main.css + responsive.css, aiovg plejer (player-embed). Prelomi originala: tablet do 1200px, mobilni do 767px. ========================================================================== */ /* ---------- kontejner teme (boxed sekcija, column-gap-default) ---------- responsive.css: >1200 max 1200px | <=1200 980px | <=992 738px | <=767 590px | <=600 450px | <=480 90% + 30px; kolone imaju padding 0 15px. */ .pb-kontejner { width: 100%; max-width: 1200px; margin-inline: auto; } /* ---------- dvodelni naslov (wgl-double-heading) ---------- 42px / 1.3333em, DM Sans 700; prvi deo boja naslova, drugi narandzast. Widget ima margin-bottom -4px + 20px razmaka izmedju widgeta = 16px. z-index 0 (kao .wgl-double-heading): ukras je iza teksta naslova, a sledeci widget (pozicioniran, kasnije u DOM-u) crta se preko ukrasa. */ .pb-naslov { position: relative; z-index: 0; margin: 0 0 16px; font-size: 42px; line-height: 1.3333333333em; font-weight: 700; color: var(--naslov); } .pb-naslov em { font-style: normal; color: var(--primary); } .pb-naslov--svetao { color: #fff; } .pb-naslov--centar { text-align: center; } /* kosi ukras iza naslova (.dblh__divider + ::before, skewY 45deg) */ .pb-naslov__ukras { display: inline-block; position: relative; z-index: -1; width: 0; height: 1em; color: #034b5b; } .pb-naslov__ukras::before { content: ""; position: absolute; z-index: 0; top: -.476em; left: -.833333em; width: 1.5476em; height: 2.976em; transform: skewY(45deg); background-color: currentColor; } /* ---------- 12. Video (shortcode aiovg: iframe sa video.js plejerom) ---------- Pocetna: kontejner 7ef28e3 (e-con-full) 85% sirine, centriran, padding 10px; do 1200px 100%. Plejer 16:9 (padding-bottom 56.25%), border-radius 3px. */ .video-sekcija { width: 85%; max-width: 100%; margin-inline: auto; padding: 10px; } .video-okvir { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #000; } .video-okvir video { display: block; width: 100%; height: 100%; } /* veliko dugme video.js (aiovg): krug 3em = 90px, rgba(0,0,0,.5), ikonica 75%; hover bilo gde preko plejera .8, prelaz .4s; skriva se cim video krene */ .video-pusti { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: default; } .video-pusti span { width: 90px; height: 90px; border-radius: 50%; cursor: pointer; background: rgba(0, 0, 0, .5) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.56047 5.09337C8.34001 4.9668 8.07015 4.96875 7.85254 5.10019C7.63398 5.23162 7.5 5.47113 7.5 5.73011L7.5 18.2698C7.5 18.5298 7.63398 18.7693 7.85254 18.9007C7.96372 18.9669 8.0882 19 8.21268 19C8.33241 19 8.45309 18.9688 8.56047 18.9075L18.1351 12.6377C18.3603 12.5082 18.5 12.2648 18.5 12C18.5 11.7361 18.3603 11.4917 18.1351 11.3632L8.56047 5.09337Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E") center / 75% no-repeat; transition: all .4s; } .video-pusti:hover span, .video-pusti:focus-visible span { background-color: rgba(0, 0, 0, .8); } .video-okvir--pusten .video-pusti { display: none; } /* ---------- 13. Kompetencije (sekcija 3d6e220) ---------- */ /* overflow: clip (a ne hidden) da sekcija ne postane skrol-kontejner za paralaksu ukrasa */ .kompetencije { position: relative; overflow: hidden; overflow: clip; padding: 120px 0; background-color: #003b49; } .kompetencije .pb-kontejner { display: flex; } .kompetencije__tekst { position: relative; z-index: 2; width: 50%; padding: 42px 15px 0; color: #fff; } .kompetencije__slika { position: relative; z-index: 1; width: 50%; padding: 0 15px; } /* slika: margin 0 -4px 0 -30px, sirina kolone (570px) */ .kompetencije__slika img { margin-left: -30px; } /* pasus: 18px/32px, margin 0 7% (3% + 20px) 0; p ima 16px ispod (tema) */ .kompetencije__uvod { position: relative; display: flow-root; margin: 0 7% calc(20px + 3%) 0; font-size: 18px; line-height: 32px; color: #fff; } .kompetencije__uvod p, .kompetencije__lista p, .brojaci__uvod p { margin: 0 0 16px; } /* narandzasti okvir (unutrasnja sekcija 70a0fbb) i lista (3d3b632): lista ima margin-bottom -20px, pa izlazi 20px ispod okvira */ .kompetencije__okvir { display: flow-root; background-color: #ff7d44; } .kompetencije__lista { display: flow-root; margin-bottom: -20px; padding: 40px 0 40px 60px; background-color: #ff7d44; font-size: 18px; color: #fff; } /* ukrasni PNG-ovi (wgl parallax): polozaj u % sekcije, iznad slike, ispod teksta */ .kompetencije__ukras { position: absolute; z-index: 1; pointer-events: none; } .kompetencije__ukras img { display: block; max-width: none; } .kompetencije__ukras--2 { top: 36.6%; left: 86.6%; } .kompetencije__ukras--3 { top: 6.2%; left: 80.7%; } /* paralaksa (paroller, foreground, vertical): pomak = faktor * (vrh - pola prozora + visina - skrol), a visina ukrasa se na originalu meri pre nego sto se slika ucita (0; izmereno na 1920 i 1024), pa je pomak = faktor * (vrh ukrasa u prozoru - 50vh). Dok je ukras u prozoru to je linearno po napretku view() vremenske linije: od faktor * 50vh do -faktor * (50vh + visina). Bez podrske za scroll-driven animacije ukras stoji na mestu. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .kompetencije__ukras--2 { view-timeline: --pb-ukras-2 block; } .kompetencije__ukras--3 { view-timeline: --pb-ukras-3 block; } .kompetencije__ukras--2 img { animation: pb-paralaksa-2 linear both; animation-timeline: --pb-ukras-2; } .kompetencije__ukras--3 img { animation: pb-paralaksa-3 linear both; animation-timeline: --pb-ukras-3; } } } @keyframes pb-paralaksa-2 { from { transform: translateY(calc(.1 * 50vh)); } to { transform: translateY(calc(-.1 * (50vh + 429px))); } } @keyframes pb-paralaksa-3 { from { transform: translateY(calc(-.1 * 50vh)); } to { transform: translateY(calc(.1 * (50vh + 230px))); } } /* ---------- 14. Brojaci (sekcija 73486a8, wgl-counter) ---------- */ .brojaci { position: relative; z-index: 20; background-position: center center; background-repeat: no-repeat; background-size: cover; } /* spacer 129px gore, 100px dole; kolona je flex (kao widget-wrap), pa se margine ne sabijaju */ .brojaci__kolona { display: flex; flex-direction: column; padding: 129px 15px 100px; } .brojaci__uvod { display: flow-root; margin: 0 19% 20px; font-size: 18px; line-height: 32px; text-align: center; color: var(--tekst); } .brojaci__mreza { display: flex; flex-wrap: wrap; margin-top: 12px; } .brojaci__celija { width: 25%; padding: 0 15px; } .brojac { padding-bottom: 30px; text-align: center; } /* ikonica: glif 40px; na originalu blok ikonice 50px + 8px = 58px do broja, ovde 40 + 18 */ .brojac__ikona { display: block; width: 40px; height: 40px; margin: 0 auto 18px; color: var(--primary); } .brojac__ikona svg { display: block; width: 40px; height: 40px; } /* broj: inline-flex 40px/1, DM Sans 400, #034B5B; vrednost poravnata desno preko nevidljivog rezervisanog broja (wgl-counter__placeholder) */ .brojac__vrednost { display: inline-flex; justify-content: center; font-family: var(--font-naslov); font-size: 40px; line-height: 1; font-weight: 400; color: var(--secondary); } .brojac__mesto { position: relative; } .brojac__rezerva { visibility: hidden; } .brojac__broj { position: absolute; z-index: 1; right: 0; } .brojac__sufiks { text-align: left; } .brojac__naslov { width: 100%; margin: 3px 0 0; font-size: 20px; line-height: 44px; font-weight: 500; color: var(--naslov); } .brojac__opis { margin: 2px 20px 0; } /* ---------- 15. Poziv sa logom (sekcija c0de219) ---------- */ .poziv { position: relative; background-position: center center; background-size: cover; } .poziv::before { content: ""; position: absolute; inset: 0; opacity: .69; background-image: linear-gradient(333deg, #05313c 0%, #ff7d44 100%); } .poziv .pb-kontejner { position: relative; } /* spacer 144px gore, 124px dole; flex kolona - margine widgeta se ne sabijaju */ .poziv__kolona { display: flex; flex-direction: column; padding: 144px 15px 124px; text-align: center; } .poziv__logo { margin-bottom: 30px; } .poziv__logo img { width: auto; max-width: 142px; margin-inline: auto; } .poziv__naslov { margin: 0 10% 20px; font-size: 60px; line-height: 1.2em; color: #fff; } .poziv__dugme { margin: 16px 0 20px; } /* wgl-button btn-size-xl: 23px 42px 22px, 14px/1.1 DM Sans 700, velika slova */ .poziv__link { display: inline-block; position: relative; z-index: 1; padding: 23px 42px 22px; font-family: var(--font-naslov); font-size: 14px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; background-color: #ff7d44; transition: .4s; } .poziv__link:hover { color: #034b5b; background-color: #f5f5f5; } /* ---------- prelomi ---------- */ @media (max-width: 1200px) { .pb-kontejner { width: 980px; max-width: 100%; } .video-sekcija { width: 100%; } .kompetencije .pb-kontejner { flex-wrap: wrap; } .kompetencije__tekst, .kompetencije__slika { width: 100%; } .kompetencije__slika img { margin: 50px auto 0; } .kompetencije__lista { width: 50%; } .brojaci__uvod { margin: 0 0 20px; } .brojaci__celija { width: 50%; } .poziv__naslov { font-size: 46px; } } @media (max-width: 992px) { .pb-kontejner { width: 738px; } } /* ukrasi kompetencija: skriveni kad je prozor <= 768px (hide_mobile_resolution) */ @media (max-width: 768px) { .kompetencije__ukras { display: none; } } @media (max-width: 767px) { .pb-kontejner { width: 590px; } .pb-naslov { font-size: 30px; } .kompetencije { padding: 30px 0 70px; } .kompetencije__lista { width: 100%; padding: 30px 30px 20px; } .brojaci__kolona { padding: 80px 15px 60px; } .brojaci__celija { width: 100%; } .poziv__kolona { padding: 70px 15px 30px; } .poziv__naslov { font-size: 34px; } .poziv__dugme { margin: 0 0 60px; } } @media (max-width: 600px) { .pb-kontejner { width: 450px; } } @media (max-width: 480px) { .pb-kontejner { width: calc(90% + 30px); } } /* ---------- sadrzaj unutrasnjih strana: raspored po strukturi originala ---------- build.py (_blok_elementora) pravi za svaku Elementor sekciju / kontejner originala jedan blok. Pravila su prepisana iz CSS-a originala: tema Transmax (main.css, responsive.css, dynamic.css, inline stil teme), Elementor frontend (custom-frontend.min.css) i kit (post-5665.css). Vrednosti koje se razlikuju po widgetu (per-strana post-.css) stizu kao CSS promenljive u style atributu: --x (desktop), --x-t (<=1200px), --x-m (<=767px). */ /* razmak hero -> sadrzaj (80px) i poslednji blok -> podnozje (40px = #main padding-bottom teme) daje 15-strana-hero.css (.strana-hero ~ :last-child, calc(40px + var(--mb))). Sekcija sa sopstvenom donjom marginom iz post CSS-a nosi --mb u style atributu (about-us fffec11: -40px, pa nalegne na podnozje). */ /* ---- Elementor sekcija: pozadina iz post CSS-a ---- */ .sekcija-e, .kontejner-e { position: relative; background-color: var(--bg); background-position: var(--bgp, 0% 0%); background-size: var(--bgs, auto); background-repeat: no-repeat; } /* ukrasne slike sekcije (wgl parallax): main.css .extended-parallax, polozaj i z-index iz post CSS-a; sakrivaju se kad je prozor <= hide_mobile_resolution (wgl_elementor_sections.js) */ .ukras-e { position: absolute; z-index: -1; width: 100%; pointer-events: none; } @media (max-width: 1050px) { .ukras-e--do-1050 { visibility: hidden; } } @media (max-width: 768px) { .ukras-e--do-768 { visibility: hidden; } } /* paralaksa (paroller, foreground, vertical): pomak = faktor * (vrh + visina - pola prozora - skrol); paroller meri visinu ukrasa pre nego sto se slika ucita (0 - izmereno na originalu, kao na pocetnoj), pa je dok je ukras u prozoru pomak linearan po view() vremenskoj liniji: od faktor * 50vh do -faktor * (50vh + visina slike). Bez podrske (animation-timeline) ukras stoji na mestu. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .ukras-e { view-timeline: --ukras-e block; } .ukras-e img { animation: ukras-e-paralaksa linear both; animation-timeline: --ukras-e; } } } @keyframes ukras-e-paralaksa { from { transform: translateY(calc(var(--f) * 50vh)); } to { transform: translateY(calc(var(--f) * -1 * (50vh + var(--uh)))); } } /* kontejner sekcije: 1200px (kit); tema (responsive.css) za column-gap-default: 950+30 (<=1200), 708+30 (<=992), 560+30 (<=767), 420+30 (<=600), 90%+30px (<=480) */ .sekcija-e__omot { position: relative; display: flex; max-width: 1200px; margin-inline: auto; } .sekcija-e--puna .sekcija-e__omot { max-width: none; } /* kolona: Elementor .elementor-column + widget-wrap; inline stil teme daje column-gap-default koloni padding 0 15px (gore/dole 0) */ .kolona { position: relative; display: flex; min-height: 1px; width: var(--sir, 100%); } .kolona__sadrzaj { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: var(--kj, flex-start); padding: var(--kp, 0 15px); margin: var(--km, 0); background-position: var(--kbp, 0% 0%); background-size: var(--kbs, auto); background-repeat: var(--kbr, repeat); } /* about-us QR sekcija (namerno odstupanje, Marko 30.9.2026): tekst levo, novi QR desno - tekst pocinje gde i sadrzaj sekcija iznad (kontejner 1200px + padding kolone 15px; 100cqw = sirina sekcije), 85px od QR-a (ranije sa leve strane) */ .sekcija-e--qr .sekcija-e__omot { container-type: inline-size; } .sekcija-e--qr .kolona:first-child > .kolona__sadrzaj { margin: 0 85px 0 max(5px, calc((100cqw - 1200px) / 2)); padding-bottom: 34px; } /* duzi tekst (SR): 50px do dna kao na originalu (34 + 16 margine pasusa) */ /* QR u beloj kartici (Markov izbor, predlog 2): desna ivica kartice na desnoj ivici sadrzaja sajta, kao sto tekst pocinje na levoj; kartica po visini u sredini sekcije */ .sekcija-e--qr .kolona:last-child > .kolona__sadrzaj { min-height: 600px; /* visina sekcije kao na originalu (spacer kolone sa QR-om, 600px) */ align-items: center; align-content: center; justify-content: flex-end; padding: 40px max(15px, calc((100cqw - 1200px) / 2 + 15px)) 40px 15px; } .qr-karta { max-width: 100%; margin: 0; padding: 18px 18px 14px; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.28); outline: 3px solid var(--primary); outline-offset: -3px; text-align: center; } .qr-karta img { width: 320px; max-width: 100%; height: auto; } .qr-karta__natpis { margin: 10px 0 2px; font-family: var(--font-naslov); font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: var(--tamno); } /* ---- Elementor kontejner (e-con boxed): padding 10px, unutra max 1200 / 1024 / 767 (kit) ---- */ .kontejner-e { padding-inline: 10px; } .kontejner-e__omot { display: flex; flex-direction: column; gap: var(--gap, 20px); max-width: 1200px; margin-inline: auto; padding-block: 10px; } .kontejner-e__omot--red { flex-direction: row; } .kontejner-e__dete { display: flex; flex-direction: column; gap: 20px; min-width: 0; width: var(--sir, 100%); padding: 10px; } /* Elementor: widget-container u kontejneru ima height 100% - kutija sa donjom marginom (info kutije na <=1200: margin-bottom 30px) je zato visoka koliko widget zajedno sa tom marginom */ :is(.kontejner-e__omot, .kontejner-e__dete) > .w > .w__k { height: 100%; } /* widget u kontejneru-koloni se rasteze (align-self: stretch), pa margina (npr. 0 19%) suzava widget umesto da ga gura van kontejnera */ :is(.kontejner-e__omot:not(.kontejner-e__omot--red), .kontejner-e__dete) > .w:not(.w--sirina) { width: auto; } /* ---- widget: razmak ispod (kit 20px u koloni), sirina, poravnanje, font, boja ---- */ .w { position: relative; width: 100%; min-width: 0; margin: var(--m, 0); text-align: var(--ta, var(--ta0)); font-size: var(--fs); line-height: var(--lh); color: var(--boja); } .w--sirina { width: min(var(--mw), 100%); max-width: var(--mw); } /* promenljive ugnezdenog widgeta ne nasledjuju se od widgeta-okvira */ .w .w { --m: initial; --m-t: initial; --m-m: initial; --wm: initial; --wm-t: initial; --wm-m: initial; --wp: initial; --wp-t: initial; --wp-m: initial; --mw: initial; --mw-t: initial; --mw-m: initial; --h: initial; --h-t: initial; --h-m: initial; } .w__k { margin: var(--wm, 0); padding: var(--wp, 0); } /* spacer: visina --spacer-size po prelomu; spacer u koji je upisan tekst raste sa tekstom */ .w-razmak { height: var(--h, 0); } .w-razmak--tekst { height: auto; } /* text-editor: pasusi teme (p 0 0 16px, zadrzava se i posle poslednjeg); naslovi bez margine (reset teme) i u velicinama teme bez smanjivanja po prelomu (dynamic.css) */ .w-tekst p, .w-tekst p:last-child { margin: 0 0 16px; } .w-tekst :is(h1, h2, h3, h4, h5, h6) { margin: 0; } .w strong { font-weight: 700; } /* tema: strong 700 i u naslovu */ /* liste i tabele u tekstu (main.css teme: body ul, body ul li, table, table td) */ .w-tekst :is(ul, ol) { margin: 0; padding: 0 0 20px 1.1em; } .w-tekst ul { list-style: disc; } .w-tekst li { position: relative; z-index: 1; margin-bottom: 8px; } .w-tekst :is(ul, ol) > li:last-child { padding-bottom: 0; margin-bottom: 0; } .w-tekst li :is(ul, ol) { padding-bottom: 0; } .w-tekst table { width: 100%; border-collapse: collapse; } .w-tekst table:not(:last-child) { margin-bottom: 22px; } .w-tekst :is(td, th) { padding: 5px 10px; border: 1px solid #e4e4e4; text-align: left; } .w-tekst h1 { font-size: 48px; line-height: 56px; } .w-tekst h2 { font-size: 42px; line-height: 48px; } .w-tekst h3 { font-size: 36px; line-height: 44px; } .w-tekst h4 { font-size: 30px; line-height: 38px; } .w-tekst h5 { font-size: 24px; line-height: 30px; } .w-tekst h6 { font-size: 20px; line-height: 28px; } .w-naslov--h3 { --nfs0: 36px; --nlh0: 44px; } .w-naslov--h5 { --nfs0: 24px; --nlh0: 30px; } .naslov-e { margin: 0; padding: 0; color: var(--nboja, var(--naslov)); font-weight: var(--nfw, 700); font-size: var(--nfs, var(--nfs0)); line-height: var(--nlh, var(--nlh0)); } /* dvodelni naslov (wgl-double-heading): 42px / 1.3333em, drugi deo u primarnoj boji, iza pocetka naslova koso polje (divider) */ /* .wgl-double-heading je sopstveni sloj (z-index 0): koso polje ostaje ispod teksta koji sledi */ .w-dvonaslov .w__k { position: relative; z-index: 0; } .dvonaslov { position: relative; z-index: 1; margin: 0; padding: var(--dp, 0); font-size: var(--dfs, 42px); line-height: 1.3333333333em; font-weight: 700; color: var(--d1boja, var(--naslov)); } .dvonaslov em { font-style: normal; color: var(--d2boja, var(--primary)); } .dvonaslov__crta { display: inline-block; position: relative; z-index: -1; width: 0; height: 1em; color: var(--dcrta, #f5f5f5); } .dvonaslov__crta::before { content: ""; position: absolute; z-index: 0; top: -0.476em; left: -0.833333em; width: 1.5476em; height: 2.976em; transform: skewY(45deg); background-color: currentColor; } /* slika: Elementor image widget (centrirano, inline-block) */ .w-slika { --ta0: center; } /* Elementor image: text-align center */ .w-slika img { display: inline-block; vertical-align: middle; max-width: min(var(--imw, 100%), 100%); height: auto; } /* dugme (wgl-button btn-size-xl) */ .dugme-e { display: inline-block; position: relative; z-index: 1; padding: 23px 42px 22px; font-family: var(--font-naslov); font-size: 14px; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; background-color: var(--bbg, var(--primary)); transition: all .4s; } .dugme-e:hover { color: var(--bhboja, #fff); background-color: var(--bhbg, var(--secondary)); } /* info kutija (wgl-info-box): senka, na hover pozadina iz post CSS-a i bela slova */ .info-e { position: relative; height: var(--ivis, auto); box-shadow: var(--senka, none); transition: .4s; } .info-e:hover { box-shadow: var(--hsenka, var(--senka, none)); } .info-e::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: inherit; background-color: var(--ibg, transparent); } .info-e:hover::before { opacity: 1; } .info-e__omot { position: relative; transition: .6s; } .info-e__ikona { display: inline-block; position: relative; z-index: 1; margin: var(--ikm, 0); font-size: var(--ikfs, 32px); line-height: 1; color: var(--primary); transition: .4s; } /* glif stoji na osnovnoj liniji kao znak fonta: kutija ikonice je visoka kao red (1em + descent fonta teksta), pa mehur (top u %) pada na isto mesto kao na originalu */ .info-e__ikona svg { display: inline-block; vertical-align: baseline; width: 1em; height: 1em; } .info-e__ikona::after { content: ""; position: absolute; z-index: -1; top: var(--mt, 0); left: var(--ml, 0); width: var(--mw2, 0); height: var(--mh, 0); border-radius: 50%; background-color: rgba(255,125,68,.08); transition: .4s; } .info-e__tekst { position: relative; } .info-e__naslov { position: relative; z-index: 1; margin: var(--inm, 0 0 10px); padding: var(--inp, 0); font-size: var(--infs, 24px); line-height: var(--inlh, 1.5); font-weight: 500; word-break: break-word; color: var(--naslov); transition: .4s; } .info-e__sadrzaj { margin: var(--ism, 0); padding: var(--isp, 0); font-size: var(--isfs, 16px); line-height: 1.875em; transition: .4s; } .info-e__sadrzaj p { margin: 0 0 16px; } .info-e__sadrzaj p:last-child { margin-bottom: 0; } .info-e:hover .info-e__naslov { color: var(--inhb, var(--naslov)); } .info-e:hover .info-e__sadrzaj { color: var(--ishb); } /* animation_toggling: tekst se pojavljuje na hover, ikonica nestaje, sadrzaj se podize */ .w-info--prekidac .info-e { overflow: hidden; } .w-info--prekidac .info-e__omot { transform: var(--ipom, none); transition-duration: var(--itr, .6s); } .w-info--prekidac .info-e:hover .info-e__omot { transform: var(--ihpom, none); } .w-info--prekidac .info-e__ikona { transition: opacity var(--itr, .6s); } .w-info--prekidac .info-e:hover .info-e__ikona { opacity: 0; } .w-info--prekidac .info-e__sadrzaj { opacity: 0; } .w-info--prekidac .info-e:hover .info-e__sadrzaj { opacity: 1; } /* about-us: kutije WHY ETI MARINE? / FOR WHOM? / WHERE? (jedine sa prekidacem) - manje, sve tri iste visine (namerno odstupanje, Marko 30.9.2026; original 300px). Visina = najnize dno teksta na hover (izmereno 320-1920px, korak 5px, EN i SR) + 30px; na hover sadrzaj ide 50px nagore (original 30px), pa je iznad naslova ~30px kao ispod teksta; bez hovera ikonica i naslov su u sredini kutije. */ .w-info--prekidac .info-e { --ivis: 186px; --ipom: translateY(28px); --ihpom: translateY(-50px); } :lang(sr) .w-info--prekidac .info-e { --ivis: 276px; --ipom: translateY(72px); } /* kutije Main / Auxiliary Engine na stranama proizvoda (jedine info kutije bez prekidaca): tekst centriran u kutiji, 30px sa svih strana (namerno odstupanje, Marko 30.9.2026). Original: tekst uz vrh i ivice, 30px samo dole; do 1200px kutija je jos 30px visa (height 100% gore + margina ulazi u visinu) - ovde visina po sadrzaju, pa je razmak isti gore i dole na svim sirinama. */ .w-info:not(.w-info--prekidac) .info-e { height: auto; } .w-info:not(.w-info--prekidac) .info-e__sadrzaj { padding: 30px; } /* ---- prelom 1200px (Elementor tablet) ---- */ @media (max-width: 1200px) { .sekcija-e__omot { flex-wrap: wrap; } .sekcija-e--qr .kolona:first-child > .kolona__sadrzaj { margin: 0; padding-bottom: 0; } /* kolone jedna ispod druge */ .sekcija-e--qr .kolona:last-child > .kolona__sadrzaj { min-height: 0; justify-content: center; padding: 20px 15px 60px; } .sekcija-e:not(.sekcija-e--puna) .sekcija-e__omot { max-width: none; width: 980px; } .kontejner-e__omot { max-width: 1024px; } .kolona__sadrzaj { margin: var(--km-t, var(--km, 0)); padding: var(--kp-t, var(--kp, 0 15px)); justify-content: var(--kj-t, var(--kj, flex-start)); background-position: var(--kbp-t, var(--kbp, 0% 0%)); } .w { margin: var(--m-t, var(--m, 0)); text-align: var(--ta-t, var(--ta, var(--ta0))); font-size: var(--fs-t, var(--fs)); line-height: var(--lh-t, var(--lh)); } .w--sirina { width: min(var(--mw-t, var(--mw)), 100%); max-width: var(--mw-t, var(--mw)); } .w__k { margin: var(--wm-t, var(--wm, 0)); padding: var(--wp-t, var(--wp, 0)); } .w-razmak { height: var(--h-t, var(--h, 0)); } .w-razmak--tekst { height: auto; } .naslov-e { font-size: var(--nfs-t, var(--nfs, var(--nfs0))); } .info-e__naslov { font-size: var(--infs-t, var(--infs, 24px)); margin: var(--inm-t, var(--inm, 0 0 10px)); } /* kutija ovde ima i 10px bocnog paddinga (--wp-t) - ukupno opet 30px */ .w-info:not(.w-info--prekidac) .info-e__sadrzaj { padding: 30px 20px; } .w-info--prekidac .info-e { --ivis: 216px; --ipom: translateY(42px); } :lang(sr) .w-info--prekidac .info-e { --ivis: 306px; --ipom: translateY(88px); } .info-e__sadrzaj { font-size: var(--isfs-t, var(--isfs, 16px)); } } @media (min-width: 768px) and (max-width: 1200px) { .kolona { width: var(--sir-t, var(--sir, 100%)); } } @media (max-width: 992px) { .sekcija-e:not(.sekcija-e--puna) .sekcija-e__omot { width: 738px; } } /* ---- prelom 767px (Elementor mobilni) ---- */ @media (max-width: 767px) { .sekcija-e:not(.sekcija-e--puna) .sekcija-e__omot { width: 590px; } .kolona { width: 100%; } .kontejner-e__omot { max-width: 767px; } .kontejner-e__omot--red { flex-wrap: wrap; } .kontejner-e__dete { width: 100%; } .kolona__sadrzaj { margin: var(--km-m, var(--km-t, var(--km, 0))); padding: var(--kp-m, var(--kp-t, var(--kp, 0 15px))); justify-content: var(--kj-m, var(--kj-t, var(--kj, flex-start))); background-position: var(--kbp-m, var(--kbp-t, var(--kbp, 0% 0%))); } .w { margin: var(--m-m, var(--m-t, var(--m, 0))); text-align: var(--ta-m, var(--ta-t, var(--ta, var(--ta0)))); font-size: var(--fs-m, var(--fs-t, var(--fs))); line-height: var(--lh-m, var(--lh-t, var(--lh))); } .w--sirina { width: min(var(--mw-m, var(--mw-t, var(--mw))), 100%); max-width: var(--mw-m, var(--mw-t, var(--mw))); } .w__k { margin: var(--wm-m, var(--wm-t, var(--wm, 0))); padding: var(--wp-m, var(--wp-t, var(--wp, 0))); } .w-razmak { height: var(--h-m, var(--h-t, var(--h, 0))); } .w-razmak--tekst { height: auto; } .dvonaslov { font-size: var(--dfs-m, var(--dfs-t, var(--dfs, 42px))); } .naslov-e { font-size: var(--nfs-m, var(--nfs-t, var(--nfs, var(--nfs0)))); } .info-e__naslov { font-size: var(--infs-m, var(--infs-t, var(--infs, 24px))); margin: var(--inm-m, var(--inm-t, var(--inm, 0 0 10px))); } } @media (max-width: 600px) { .sekcija-e:not(.sekcija-e--puna) .sekcija-e__omot { width: 450px; } } @media (max-width: 480px) { .sekcija-e:not(.sekcija-e--puna) .sekcija-e__omot { width: calc(90% + 30px); max-width: 100%; } } /* about-us kutije ispod 360px: tekst se prelama u red vise (izmereno do 320px) */ @media (max-width: 359px) { .w-info--prekidac .info-e { --ivis: 246px; --ipom: translateY(58px); } :lang(sr) .w-info--prekidac .info-e { --ivis: 366px; --ipom: translateY(118px); } } /* ========================================================================== /spare-parts/ (tabovi + kartice proizvoda) i /products/ (kartice brendova). Pravila su prepisana sa originala, izvori: - tabovi: main.css (## WGL Tabs) + post-6431.css (zaglavlje taba 16/32/17/32, razmak 5px, sadrzaj 27/0/15); kartice: inline