/* ============================================================================ site_theme.css — Uskladjivanje headera, footera i vidljivih (pre-login) stranica sa Coral + Teal redizajnom wizarda (profile_wizard.css). Cisto vizuelni sloj: OVERRIDE preko Unify teme (style.css, header-default, footer-v2, theme-colors/default). NE dira HTML/tekst/forme/funkcije. Ucitava se POSLIJE svih tema u base.html. Scope: cijeli , ALI se NE primjenjuje unutar .pw (wizard ima svoj dizajn sistem) — svako pravilo koje bi se sudarilo sa .pw je van njega. ============================================================================ */ :root { --st-coral-700:#c74a42; --st-coral-600:#e0574c; --st-coral-500:#f2685f; --st-coral-400:#f88a7d; --st-coral-50:#fff1ef; --st-teal-700:#0c7266; --st-teal-600:#0d9488; --st-teal-500:#14b8a6; --st-teal-50:#eafaf7; --st-ink-900:#1c1815; --st-ink-700:#463f39; --st-ink-600:#5f5750; --st-ink-500:#7a726a; --st-ink-200:#e8e2dc; --st-ink-100:#f0ebe5; --st-ink-50:#f8f6f3; --st-bg:#f8f6f3; --st-surface:#ffffff; --st-f-head:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif; --st-f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif; --st-shadow:0 10px 30px rgba(28,23,20,.08); --st-shadow-sm:0 2px 10px rgba(28,23,20,.06); --st-radius:16px; --st-radius-sm:11px; --st-pill:999px; --st-ease:cubic-bezier(.16,1,.3,1); } /* ---- Osnova: tipografija + pozadina (van .pw) ---- */ body{background:var(--st-bg);color:var(--st-ink-700); font-family:var(--st-f-body);-webkit-font-smoothing:antialiased;} body h1,body h2,body h3,body h4,body h5{font-family:var(--st-f-head); letter-spacing:-.01em;color:var(--st-ink-900);} body a{color:var(--st-teal-600);transition:color .2s var(--st-ease);} body a:hover,body a:focus{color:var(--st-teal-700);} /* wizard nije diran */ .pw a{color:inherit;} /* zaostale zelene klase iz stare teme -> teal/coral */ body .color-green,body a.color-green{color:var(--st-teal-600)!important;} body .color-green:hover{color:var(--st-teal-700)!important;} /* ============ LOGO (novi SVG wordmark) ============ */ .st-logo{display:inline-flex!important;align-items:center;gap:11px;text-decoration:none!important; background:none!important;} .st-logo .st-logo-mark{flex:0 0 auto;width:40px;height:40px;display:block; filter:drop-shadow(0 4px 10px rgba(224,87,76,.28));} .st-logo .st-logo-mark svg{width:100%;height:100%;display:block;} .st-logo .st-logo-text{font-family:var(--st-f-head);font-weight:700;font-size:19px; letter-spacing:-.02em;color:var(--st-ink-800);line-height:1.05;white-space:nowrap;} .st-logo .st-logo-text b{color:var(--st-coral-600);font-weight:800;} .st-logo:hover .st-logo-text{color:var(--st-ink-900);} /* header logo poravnanje */ .header .st-logo{padding-top:14px!important;padding-bottom:12px!important;} /* footer logo — svijetli tekst na tamnom */ .st-logo-footer{margin-bottom:20px;} #footer-v2 .st-logo-footer .st-logo-text{color:#fff;} #footer-v2 .st-logo-footer .st-logo-text b{color:var(--st-coral-400);} @media(max-width:560px){ .st-logo .st-logo-text{font-size:16px;white-space:normal;} .st-logo .st-logo-mark{width:34px;height:34px;} } /* ============ HEADER ============ */ .header{background:var(--st-surface)!important;border-bottom:1px solid var(--st-ink-200)!important; box-shadow:var(--st-shadow-sm);} .header .container{position:relative;} .header .logo{padding-top:16px;padding-bottom:12px;} .header .logo img{max-height:44px;width:auto;} /* Nav linkovi */ .header .navbar-nav > li > a{color:var(--st-ink-600)!important;font-family:var(--st-f-body); font-weight:600!important;font-size:13.5px!important;letter-spacing:.01em; text-transform:none!important;padding:22px 16px!important;transition:color .2s var(--st-ease); border:none!important;background:transparent!important;} .header .navbar-nav > li > a:hover, .header .navbar-nav > li.active > a{color:var(--st-coral-600)!important;background:transparent!important;} /* aktivna stavka — coral podvlaka umjesto zelene */ .header .navbar-nav > li > a::after{content:"";position:absolute;left:16px;right:16px;bottom:14px; height:2.5px;border-radius:2px;background:var(--st-coral-500); transform:scaleX(0);transform-origin:left;transition:transform .25s var(--st-ease);} .header .navbar-nav > li > a{position:relative;} .header .navbar-nav > li > a:hover::after, .header .navbar-nav > li.active > a::after{transform:scaleX(1);} /* Log in / Log out — coral pill, FIKSIRAN gore desno (u logo redu, iznad nav-a da se ne preklapa sa nav stavkama). */ .header .topbar{position:absolute;top:16px;right:15px;margin:0;z-index:5;} /* Nav ne smije ici pod Login pill (gore desno) — rezervisi prostor desno na desktopu */ @media(min-width:992px){ .header .navbar-collapse .container{padding-right:110px;} } .header .loginbar{margin:0;} .header .loginbar > li{float:none;display:inline-block;} .header .loginbar > li > a{color:#fff!important;background:var(--st-coral-500); padding:9px 20px!important;border-radius:var(--st-pill);font-weight:700;font-size:12.5px; font-family:var(--st-f-body);text-transform:none!important;letter-spacing:.02em; box-shadow:0 4px 14px rgba(242,104,95,.35);transition:transform .2s var(--st-ease),background .2s; display:inline-block;margin:0;line-height:1;} .header .loginbar > li > a:hover{color:#fff!important;transform:translateY(-1px); background:var(--st-coral-600);} .header .loginbar > li > a::after{display:none;} /* mobilni toggle (hamburger) -> coral, poravnat desno u logo redu. VIDLJIV SAMO na mobilnom (<=991px) — na desktopu ostaje skriven (BS3 default). */ .header .navbar-toggle{position:absolute;top:18px;right:15px;margin:0!important; border-radius:11px!important;border:none!important;background:var(--st-coral-500)!important; padding:0!important;box-shadow:0 4px 12px rgba(242,104,95,.3);z-index:6; width:44px;height:42px;justify-content:center;align-items:center;} .header .navbar-toggle:hover,.header .navbar-toggle:focus{background:var(--st-coral-600)!important;} /* fa-bars ikona (hamburger) — bijela, centrirana */ .header .navbar-toggle .fa-bars{color:#fff!important;background:transparent!important; font-size:18px;line-height:1;} .header .navbar-toggle .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;} /* Login stavka u hamburger meniju — sakrivena na desktopu (tamo je topbar pill) */ .header .st-mobile-login{display:none;} @media(max-width:991px){ .header .navbar-toggle{display:flex!important;} .header .navbar-nav > li > a{padding:12px 16px!important;} .header .navbar-nav > li > a::after{display:none;} .header .navbar-collapse{background:var(--st-surface);border-top:1px solid var(--st-ink-100); box-shadow:var(--st-shadow);} /* na mobilnom: topbar pill se KRIJE, Login je u hamburger meniju */ .header .topbar{display:none;} /* Login/Logout stavka u meniju — coral pill, istaknuta */ .header .st-mobile-login{display:block;margin:10px 16px 6px;} .header .st-mobile-login > a{display:block!important;text-align:center; background:var(--st-coral-500)!important;color:#fff!important; padding:11px 18px!important;border-radius:var(--st-pill)!important; font-weight:700!important;font-size:13.5px!important; box-shadow:0 4px 14px rgba(242,104,95,.3);} .header .st-mobile-login > a:hover{background:var(--st-coral-600)!important;color:#fff!important;} .header .st-mobile-login > a::after{display:none!important;} } /* ============ BREADCRUMBS (Login / Home traka) ============ */ .breadcrumbs{background:var(--st-ink-50)!important;border-bottom:1px solid var(--st-ink-200)!important; padding:26px 0!important;} .breadcrumbs h1{font-size:24px;font-weight:800;color:var(--st-ink-900);} .breadcrumbs .breadcrumb{background:transparent;font-size:13px;} .breadcrumbs .breadcrumb a{color:var(--st-ink-500);} .breadcrumbs .breadcrumb .active, .breadcrumbs .breadcrumb > .active{color:var(--st-coral-600);} /* ============ GENERICKI SADRZAJ STRANICA ============ */ /* Naslovi sekcija sa linijom (OUR SERVICES i sl.) — coral linija umjesto zelene */ body .title-v1 h2::after, body .headline-center-v2 h2::after, body .heading-title::after{background:var(--st-coral-500)!important;} /* ---- Zaostala Unify ZELENA (#72c02c = rgb(114,192,44)) -> coral/teal ---- */ /* Servis ikonice u krugu (icon-custom rounded-x) -> teal */ body .icon-custom.rounded-x, body i.icon-custom{color:var(--st-teal-600)!important;border-color:var(--st-teal-500)!important;} body .icon-custom.rounded-x[style*="background"], body .rounded-x.dot-active, body .icon-custom.bg-color-theme, body .icon-bg-u,body i.icon-bg-u,body .icon-custom.icon-bg-u{background-color:var(--st-teal-500)!important; border-color:var(--st-teal-500)!important;color:#fff!important;} /* check kvacice (fa-check) u listama -> teal */ body .fa-check,body i.fa-check,body .list-unstyled .fa-check{color:var(--st-teal-600)!important;} /* zeleni divideri/podvlake ispod naslova kartica (border-top zeleni) -> coral */ body [style*="72c02c"],body [style*="rgb(114"]{border-color:var(--st-coral-500)!important;} /* dotted/dashed zeleni separatori u listama servisa -> topli neutral */ body .list-row li,body .service-list li,body .row-list li{border-color:var(--st-ink-200)!important;} /* zelene ivice/linije generalno (Unify theme-color default) */ body .border-green,body .color-green,body .text-green{color:var(--st-teal-600)!important;} body .bg-green,body .btn-u.btn-u-green{background-color:var(--st-coral-500)!important;color:#fff!important;} /* zelena podvlaka ispod naslova sekcija (heading-sm / headline zelena linija) */ body .headline h2,body .heading-sm{border-bottom-color:var(--st-coral-500)!important;} /* aktivne slider tackice zelene -> coral */ body .dot-active,body .owl-dots .active span,body .ms-bullet-selected{background:var(--st-coral-500)!important;} /* Divideri i podvlake (bili zeleni) */ body hr{border-top-color:var(--st-ink-200);} /* Servis kartice / bordered blokovi */ body .service,body .box,body .panel{border-radius:var(--st-radius);} /* Servis ikonice u kruzicima (bili zeleni okvir) -> teal */ body .service .icon,body .icon-bg,body .front-icons i, body [class*="service"] i.fa{border-color:var(--st-teal-500)!important;color:var(--st-teal-600)!important;} body .service .icon:hover,body .service:hover .icon{background:var(--st-teal-50)!important;} /* ============ DUGMAD ============ */ /* Bootstrap/Unify dugmad -> coral pill */ body .btn-u,body .btn-primary,body input[type=submit].btn,body button.btn-u{ background:var(--st-coral-500)!important;border:none!important;border-radius:var(--st-pill)!important; color:#fff!important;font-family:var(--st-f-body);font-weight:700;letter-spacing:.02em; padding:10px 24px!important;box-shadow:0 6px 18px rgba(242,104,95,.30); transition:transform .2s var(--st-ease),background .2s;text-transform:none;} body .btn-u:hover,body .btn-primary:hover,body button.btn-u:hover{ background:var(--st-coral-600)!important;transform:translateY(-1px);color:#fff!important;} /* sekundarni / teal varijante */ body .btn-u.btn-brown,body .btn-u.btn-u-blue{background:var(--st-teal-500)!important; box-shadow:0 6px 18px rgba(20,184,166,.28);} body .btn-u.btn-brown:hover{background:var(--st-teal-600)!important;} /* ============ FORME (login itd.) — vizuelno, ne dira polja ============ */ body .form-control{border-radius:var(--st-radius-sm);border:1.5px solid var(--st-ink-200); box-shadow:none;transition:border-color .2s,box-shadow .2s;font-family:var(--st-f-body);} body .form-control:focus{border-color:var(--st-teal-500); box-shadow:0 0 0 4px var(--st-teal-50);} /* login kartica (reg-block / sky-form / bordered form) */ body .reg-block,body .login-block,body form.sky-form{border-radius:var(--st-radius)!important; box-shadow:var(--st-shadow);border-color:var(--st-ink-200)!important;} body .reg-block h2,body .login-block h2{font-weight:800;color:var(--st-ink-900);} /* input group ikonice (username/password) */ body .input-group-addon{background:var(--st-ink-50);border-color:var(--st-ink-200); color:var(--st-ink-500);border-radius:var(--st-radius-sm) 0 0 var(--st-radius-sm);} /* ============ FOOTER ============ */ #footer-v2{background:var(--st-ink-900)!important;color:#cfc7bf;} #footer-v2 .footer{background:transparent!important;padding:56px 0 40px;} #footer-v2 p,#footer-v2 address,#footer-v2 li{color:#cfc7bf!important; font-family:var(--st-f-body);line-height:1.7;} #footer-v2 .footer-logo{max-height:42px;width:auto;margin-bottom:18px; filter:brightness(0) invert(1);opacity:.92;} /* naslovi kolona — coral linija umjesto zelene */ #footer-v2 .headline h2,#footer-v2 .heading-sm{color:#fff!important;font-weight:700; font-family:var(--st-f-head);font-size:16px;padding-bottom:12px;margin-bottom:18px; border-bottom:2px solid var(--st-coral-500)!important;display:inline-block;} #footer-v2 .headline{border:none!important;} /* linkovi */ #footer-v2 a{color:#e8e2dc!important;} #footer-v2 a:hover{color:var(--st-coral-400)!important;} #footer-v2 .link-list li{border-bottom:1px solid rgba(255,255,255,.08);padding:9px 0;} #footer-v2 .link-list li a{color:#cfc7bf!important;} #footer-v2 .link-list li a:hover{color:#fff!important;padding-left:3px;} #footer-v2 .link-list .fa{color:var(--st-coral-500);} /* address ikonice */ #footer-v2 address .fa{color:var(--st-teal-500);width:20px;} /* social ikonice — coral krug sa inline SVG FB ikonom (prazan je gubio ikonu) */ #footer-v2 .social-icons li a{background:rgba(255,255,255,.1)!important;border-radius:50%!important; width:40px!important;height:40px!important;display:inline-flex!important; align-items:center;justify-content:center;text-indent:0!important;overflow:visible!important; color:#fff!important;transition:background .2s,transform .2s;} #footer-v2 .social-icons li a svg{width:18px;height:18px;display:block;color:#fff;} #footer-v2 .social-icons li a:hover{background:var(--st-coral-500)!important; transform:translateY(-2px);} /* copyright traka */ #footer-v2 .copyright{background:#141110!important;border-top:1px solid rgba(255,255,255,.07)!important; padding:22px 0!important;} #footer-v2 .copyright p{color:#a89f96!important;font-size:13px;margin:0;} /* back-to-top dugme */ #topcontrol{background:var(--st-coral-500)!important;border-radius:12px!important; box-shadow:0 6px 18px rgba(242,104,95,.4)!important;color:#fff!important;} /* ============ RESPONSIVE fino ============ */ @media(max-width:767px){ .breadcrumbs{padding:18px 0!important;} .breadcrumbs h1{font-size:20px;} #footer-v2 .footer{padding:40px 0 28px;} } /* ============================================================================ LP (pre-login) SEKCIJE — hero, servisi, brojaci, zastave, mapa. Isti tekst i templati; cisto CSS restyle preko Unify klasa. Vazi za sve javne stranice (home, cultural-exchange, english teaching, agencies, families). ============================================================================ */ /* ---- Hero: fotografija OSTAJE; overlay za citljivost + moderna tipografija ---- */ body .parallax-quote{position:relative;padding:120px 0 110px;} body .parallax-quote::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0; background:linear-gradient(180deg,rgba(28,24,21,.30) 0%,rgba(28,24,21,.55) 100%);} body .parallax-quote .container{position:relative;} body .parallax-quote-in::before,body .parallax-quote-in::after{display:none!important;} body .parallax-quote-in p{font-family:var(--st-f-head)!important;font-weight:800;color:#fff!important; letter-spacing:-.02em;line-height:1.15;text-align:center; font-size:clamp(30px,5vw,52px)!important;text-shadow:0 2px 22px rgba(0,0,0,.4);} body .parallax-quote-in p .color-green{color:#5eead4!important;} /* ---- Naslovi sekcija: Jakarta 800 + coral crtica ---- */ body .title-v2{border:none!important;background:none!important;font-family:var(--st-f-head); font-weight:800;font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;color:var(--st-ink-900);} body .title-v2.title-center::after{content:"";display:block;width:46px;height:4px; border-radius:2px;background:var(--st-coral-500);margin:16px auto 0;} body .headline-center h2{font-family:var(--st-f-head);font-weight:800; font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;color:var(--st-ink-900);} body .headline-center h2::after{content:"";display:block;width:46px;height:4px; border-radius:2px;background:var(--st-coral-500);margin:16px auto 0;} /* ---- Servisne kartice (For Candidates / For Agencies) ---- */ body .service-block-default{background:var(--st-surface)!important; border:1px solid var(--st-ink-200)!important;border-radius:18px; box-shadow:var(--st-shadow-sm);padding:36px 32px 34px!important; transition:transform .25s var(--st-ease),box-shadow .25s var(--st-ease),border-color .25s;} body .service-block-default:hover{transform:translateY(-3px);box-shadow:var(--st-shadow); border-color:var(--st-coral-400)!important;} body .service-block i.icon-lg{width:64px;height:64px;line-height:64px!important; font-size:26px!important;border-radius:18px!important;border:none!important; background:var(--st-coral-50)!important;color:var(--st-coral-600)!important; box-shadow:none!important;margin-bottom:6px;} body .service-block h2{font-family:var(--st-f-head);font-weight:700; font-size:21px!important;color:var(--st-ink-900);text-transform:none;} body .service-block > p{color:var(--st-ink-600);} /* stara zelena crtica ispod uvodnog teksta kartice (#72c02c) — uklonjena */ body .service-block p::after{display:none!important;} body .service-block ul.list-unstyled{text-align:left;max-width:420px;margin:16px auto 0;} body .service-block ul.list-unstyled li{position:relative;padding:8px 0 8px 30px; border:none!important;color:var(--st-ink-700);line-height:1.5;} body .service-block ul.list-unstyled li::before{content:"\2713";position:absolute;left:2px;top:7px; width:19px;height:19px;border-radius:50%;background:var(--st-teal-50);color:var(--st-teal-600); font-weight:800;font-size:11.5px;line-height:19px;text-align:center;} /* ---- Brojaci (SOME FACTS) — krem traka + bijele kartice, veliki coral brojevi ---- */ body .parallax-counter-v1{background:var(--st-bg)!important;padding:60px 0 66px!important;} body .counters{background:var(--st-surface)!important;border:1px solid var(--st-ink-200); border-radius:var(--st-radius);box-shadow:var(--st-shadow-sm); padding:28px 10px 22px!important;margin-top:12px;} body .counters .counter{font-family:var(--st-f-head);font-weight:800; font-size:clamp(34px,4vw,44px);color:var(--st-coral-600);font-variant-numeric:tabular-nums;} body .counters h4{font-family:var(--st-f-body);font-weight:700;font-size:12px; letter-spacing:.08em;color:var(--st-ink-500);text-transform:uppercase;} /* ---- Zastave (owl carousel) — zaobljene sa sjenkom ---- */ body .owl-clients-v1 .item img{border-radius:10px;box-shadow:0 4px 14px rgba(28,23,20,.14);} /* ---- Mapa sekcija — krem pozadina umjesto sive ---- */ body .bg-color-light{background:var(--st-bg)!important;}