/* ============================================================ css/header-web.css - header javne stranice centohost.com Lokacija: /css/header-web.css Dizajn preuzet sa genesis.ba (assets/css/main.css + custom.css), svi selektori su ograniceni na .gh-header i .gh-mobile-menu da se ne sudaraju sa postojecim css/main.css. Ucitava se u POSLIJE css/main.css i css/lib.css (nadjacava padding-top bannera na kraju fajla). ============================================================ */ /* ---------- Fontovi (isti fajlovi kao na genesis.ba) ---------- */ /* Mulish - font headera */ @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/mulish/mulish-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/mulish/mulish-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/mulish/mulish-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/mulish/mulish-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/mulish/mulish-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/mulish/mulish-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/mulish/mulish-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Mulish"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/mulish/mulish-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Phosphor - ikonice u headeru (headset, telefon, korpa, korisnik, lista, x, koverta) */ @font-face { font-family: "Phosphor"; src: url("../fonts/phosphor/Phosphor.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; } .gh-header .ph, .gh-mobile-menu .ph { font-family: "Phosphor" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; letter-spacing: 0; font-size: 20px; min-width: 1em; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gh-header .ph.ph-headset:before, .gh-mobile-menu .ph.ph-headset:before { content: "\e584"; } .gh-header .ph.ph-phone:before, .gh-mobile-menu .ph.ph-phone:before { content: "\e3b8"; } .gh-header .ph.ph-shopping-cart-simple:before, .gh-mobile-menu .ph.ph-shopping-cart-simple:before { content: "\e420"; } .gh-header .ph.ph-user:before, .gh-mobile-menu .ph.ph-user:before { content: "\e4c2"; } .gh-header .ph.ph-list:before, .gh-mobile-menu .ph.ph-list:before { content: "\e2f0"; } .gh-header .ph.ph-x:before, .gh-mobile-menu .ph.ph-x:before { content: "\e4f6"; } .gh-header .ph.ph-envelope-simple:before, .gh-mobile-menu .ph.ph-envelope-simple:before { content: "\e218"; } .gh-header .ph.ph-translate:before, .gh-mobile-menu .ph.ph-translate:before { content: "\e4a2"; } .gh-header .ph.ph-caret-down:before, .gh-mobile-menu .ph.ph-caret-down:before { content: "\e136"; } /* ---------- Header - osnova ---------- */ /* Header je providan i lezi PREKO bannera (position:absolute, kao i stari header) - pozadina bannera se vidi do samog vrha stranice. Nije fixed ni sticky, skroluje se sa stranicom. Prostor za njega pravi padding-top bannera na kraju ovog fajla. */ .gh-header { position: absolute; top: 0; left: 0; width: 100%; background: none; font-family: "Mulish", sans-serif; font-size: 14px; z-index: 20; } .gh-header a { text-decoration: none; -webkit-transition: color .3s ease-in; transition: color .3s ease-in; } .gh-header ul { margin: 0; padding: 0; list-style: none; } /* ---------- Topbar (plava traka) ---------- */ .gh-header .topbar { padding: 17px 0; } .gh-header .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .gh-header .topbar-left { display: flex; align-items: center; gap: 22px; } .gh-header .topbar-left a { display: inline-flex; align-items: center; gap: 6px; color: #000; font-weight: 500; font-size: 14px; white-space: nowrap; } .gh-header .topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; } .gh-header .topbar-right a { display: inline-flex; align-items: center; gap: 8px; color: #000; font-weight: 600; font-size: 14px; white-space: nowrap; } .gh-header .topbar-left a:hover, .gh-header .topbar-right a:hover { color: #1c40f2; } /* Ikonica korpe sa badge-om (broj artikala puni js/brojukorpi.js) */ .gh-header .cart-icon { position: relative; display: inline-block; line-height: 1; } .gh-header .brojukorpi { position: absolute; display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; top: -6px; right: -9px; width: 16px; height: 16px; background: red; color: #fff; border-radius: 50%; padding: 0; margin: 0; line-height: 1; } /* ---------- Prebacivac jezika (native
, bez JS-a) - isti kao na CP-u ---------- */ .gh-header .lang-switch { position: relative; display: inline-block; font-size: 14px; } .gh-header .lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #000; font-weight: 600; user-select: none; white-space: nowrap; -webkit-transition: color .3s ease-in; transition: color .3s ease-in; } .gh-header .lang-switch > summary:hover { color: #1c40f2; } .gh-header .lang-switch > summary::-webkit-details-marker { display: none; } .gh-header .lang-switch > summary .lang-caret { font-size: 11px; -webkit-transition: -webkit-transform .15s ease; transition: transform .15s ease; } .gh-header .lang-switch[open] > summary .lang-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gh-header .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: #fff; border-radius: 8px; -webkit-box-shadow: 0 8px 24px rgba(0, 14, 80, .18); box-shadow: 0 8px 24px rgba(0, 14, 80, .18); padding: 6px; z-index: 1050; list-style: none; margin: 0; } .gh-header .lang-menu li { margin: 0; } .gh-header .lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; color: #1c2434; font-weight: 500; font-size: 14px; line-height: 1.2; white-space: nowrap; -webkit-transition: background .12s ease; transition: background .12s ease; } .gh-header .lang-menu a:hover { background: #f2f4f8; color: #1c2434; } .gh-header .lang-menu a.active { background: #fff1bf; color: #1c2434; font-weight: 600; } .gh-header .lang-menu .lang-code { font-size: 11px; font-weight: 600; color: #8a94a6; margin-left: auto; } .gh-header .lang-menu a.active .lang-code { color: #1c2434; } .gh-header .header-right .lang-switch > summary { color: #001042; font-size: 15px; line-height: 1; } .gh-header .header-right .lang-switch > summary:hover { color: #ff6e5f; } /* ---------- Bijela kartica sa logom i menijem ---------- */ .gh-header .nav-menu { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #ffffffd9; padding: 0 15px; border-radius: 5px; /* isti okvir kao CP meni (.globalcp-border u /cp/assets/css/all.min.css: 1px solid var(--border-color) = #D1D5DB); javna stranica te varijable nema */ border: 1px solid #D1D5DB; position: relative; z-index: 10; } .gh-header .logo-wrapper { flex: 0 0 auto; display: flex; align-items: center; } .gh-header .logo-wrapper a { display: inline-block; line-height: 0; } .gh-header .logo { max-width: 180px; width: 100%; height: auto; padding-left: 8px; padding-top: 2px; opacity: 0.95; } .gh-header .nav-wrapper { flex: 1 1 auto; min-width: 0; } .gh-header .nav-wrapper nav { text-align: right; } .gh-header .nav-wrapper ul { display: inline-block; } .gh-header .nav-wrapper ul li { display: inline-block; position: relative; } .gh-header .nav-wrapper ul li a { display: block; padding: 25px 15px; color: #001042; font-weight: 500; font-size: 15px; line-height: 1.4; white-space: nowrap; } .gh-header .nav-wrapper ul li:hover > a, .gh-header .nav-wrapper ul li > a.active, .gh-header .nav-wrapper ul li > a:focus-visible { color: #1c40f2; } /* Stavka sa podmenijem (Domains) */ .gh-header .nav-wrapper ul li.has-submenu > a { padding-right: 26px; } .gh-header .nav-wrapper ul li.has-submenu::after { content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 8px; top: 28px; font-size: 12px; color: #001042; pointer-events: none; -webkit-transition: color .3s ease-in; transition: color .3s ease-in; } .gh-header .nav-wrapper ul li.has-submenu:hover::after, .gh-header .nav-wrapper ul li.has-submenu:focus-within::after { color: #1c40f2; } .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper { position: absolute; left: 0; top: 100%; background-color: #fff; width: 240px; border-radius: 0 0 4px 4px; text-align: left; display: none; overflow: hidden; z-index: 30; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .06); box-shadow: 0px 0px 10px rgba(0, 0, 0, .06); } .gh-header .nav-wrapper ul li.has-submenu:hover > .submenu-wrapper, .gh-header .nav-wrapper ul li.has-submenu:focus-within > .submenu-wrapper { display: block; } .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper li { display: block; } .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper li a { padding: 10px 15px; color: #001042; font-size: 14px; border-top: 1px solid rgba(221, 221, 221, .15); border-radius: 4px; white-space: normal; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper li:first-child a { border-top: 0; } .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper li a:hover, .gh-header .nav-wrapper ul li.has-submenu .submenu-wrapper li a:focus-visible { background: #f6f6f6; color: #1c40f2; } /* ---------- Desna strana kartice - samo mobilni/tablet ---------- */ .gh-header .header-right { display: none; align-items: center; justify-content: flex-end; padding: 6px 0; } .gh-header .header-right a, .gh-header .header-right button { color: #001042; font-size: 15px; line-height: 1; -webkit-transition: color .3s ease-in; transition: color .3s ease-in; } .gh-header .header-right a:hover, .gh-header .header-right button:hover { color: #ff6e5f; } .gh-header .header-right .product-cart a { display: inline-block; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .gh-header .header-right .next { margin-left: 20px; position: relative; } .gh-header .header-right .next::before { content: ""; position: absolute; left: -10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 18px; background-color: #e8e8e8; } .gh-header .mobile-menu-toggle { background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; } .gh-header .mobile-menu-toggle .ph { font-size: 24px; } /* ---------- Mobilni meni (izvlaci se sa lijeve strane) ---------- */ .gh-mobile-menu { position: fixed; top: 0; left: -320px; min-width: 300px; max-width: 90vw; height: 100vh; background: #fff; z-index: 150; padding: 40px 15px; overflow-y: auto; font-family: "Mulish", sans-serif; -webkit-box-shadow: 0px 12px 50px rgba(125, 125, 125, .1); box-shadow: 0px 12px 50px rgba(125, 125, 125, .1); -webkit-transition: left .3s ease-in; transition: left .3s ease-in; } .gh-mobile-menu.active { left: 0; } .gh-mobile-menu .close-menu { position: absolute; right: 20px; top: 15px; background: transparent; border: 0; padding: 0; font-size: 20px; line-height: 1; color: #001042; cursor: pointer; } .gh-mobile-menu .logo-wrapper { display: inline-block; line-height: 0; } .gh-mobile-menu .logo { max-width: 160px; width: 100%; height: auto; } .gh-mobile-menu ul { margin: 0; padding: 0; list-style: none; } .gh-mobile-menu .mobile-menu-wrapper { margin-top: 40px; } .gh-mobile-menu .mobile-menu-wrapper ul li { display: block; } .gh-mobile-menu .mobile-menu-wrapper ul li a { display: block; padding: 10px 0; color: #001042; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid #e8e8e8; -webkit-transition: color .3s ease-in; transition: color .3s ease-in; } .gh-mobile-menu .mobile-menu-wrapper ul li a:hover, .gh-mobile-menu .mobile-menu-wrapper ul li a.active { color: #1c40f2; } .gh-mobile-menu .mobile-menu-wrapper ul li ul { padding-left: 10px; display: none; } .gh-mobile-menu .mobile-menu-wrapper ul li ul li a { font-size: 14px; font-weight: 500; } .gh-mobile-menu .mobile-menu-wrapper ul li.has-submenu > a { position: relative; padding-right: 24px; } .gh-mobile-menu .mobile-menu-wrapper ul li.has-submenu > a::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; top: 10px; color: #001042; -webkit-transition: -webkit-transform .3s ease-in; transition: transform .3s ease-in; } .gh-mobile-menu .mobile-menu-wrapper ul li.has-submenu.open > a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .gh-mobile-menu .mobile-menu-wrapper ul li.has-submenu.open > ul { display: block; } .gh-mobile-menu .mobile-lang { margin-top: 30px; } .gh-mobile-menu .mobile-lang ul li a { display: block; padding: 8px 0; color: #001042; font-weight: 500; font-size: 14px; text-decoration: none; border-bottom: 1px solid #e8e8e8; } .gh-mobile-menu .mobile-lang ul li a.active { font-weight: 700; } .gh-mobile-menu .contact-info { margin-top: 40px; } .gh-mobile-menu .contact-info ul li { margin-bottom: 8px; } .gh-mobile-menu .contact-info ul li a { display: inline-flex; align-items: center; gap: 10px; color: #001042; font-weight: 500; font-size: 14px; text-decoration: none; } .gh-mobile-menu .contact-info ul li a:hover { color: #1c40f2; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .gh-header .nav-menu { padding: 10px 15px; } .gh-header .nav-wrapper { display: none; } .gh-header .header-right { display: flex; } } @media (max-width: 767.98px) { .gh-header .topbar { display: none; } .gh-header .nav-menu { padding-left: 0; padding-right: 0; } .gh-header .logo { max-width: 150px; padding-left: 0; } } /* Korisnici koji su iskljucili animacije */ @media (prefers-reduced-motion: reduce) { .gh-header a, .gh-header .header-right button, .gh-header .nav-wrapper ul li.has-submenu::after, .gh-mobile-menu, .gh-mobile-menu .mobile-menu-wrapper ul li.has-submenu > a::after { -webkit-transition: none; transition: none; } } /* ---------- Razmak bannera ispod headera ---------- Header lezi preko bannera (absolute), pa banner mora imati gornji padding barem koliko je header visok (gornja traka + bijela kartica) plus mali razmak. Stari header je za to imao 115px; novi je visi. */ .banner.landing-banner, .banner.inner-banner { padding-top: 135px; } @media (max-width: 991.98px) { .banner.landing-banner, .banner.inner-banner { padding-top: 125px; } } @media (max-width: 767.98px) { .banner.landing-banner, .banner.inner-banner { padding-top: 70px; } } /* ---------- Sirina stranice ---------- Ista sirina sadrzaja kao na CP-u: /cp/assets/css/custom.css ima @media (min-width:1200px) .container { max-width: 86% !important } Ovo vazi za cijelu javnu stranicu (svi .container), ne samo za header; nadjacava css/main.css (.container 1224px na >=1400px). */ @media (min-width: 1200px) { .container { max-width: 86% !important; } }