/* * CCV2 Navigation Manager — mobilni meni (hamburger) * Verzija: 1.2.0 * * Modul sam dodaje dugme i pretvara postojeci meni u izvlacni panel, * ili ispisuje zaseban meni sa nove mobilne lokacije u traku * .ccv2-nav-mobile-bar. * * Prekidac je klasa .ccv2-nav-mobile na , koju postavlja JS * prema izmjerenoj sirini ekrana. Zato prag nije zakljucan u CSS-u * i moze se mijenjati filterom bez uredjivanja ove datoteke. */ /* ---- dugme ---- */ .ccv2-nav-burger{ display:none; align-items:center; justify-content:center; gap:8px; margin:0; padding:9px 13px; font-family:"Myriad Pro","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif; font-size:15px; font-weight:600; line-height:1; color:#1F2226; background:#EFE429; border:1px solid #1F2226; border-radius:3px; cursor:pointer; -webkit-appearance:none; appearance:none; } body.ccv2-nav-mobile .ccv2-nav-burger{ display:inline-flex; } .ccv2-nav-burger:hover, .ccv2-nav-burger:focus{ background:#FA461E; color:#fff; border-color:#FA461E; } .ccv2-nav-burger:focus-visible{ outline:2px solid #1F2226; outline-offset:2px; } /* tri crtice */ .ccv2-nav-burger-bars{ position:relative; display:block; width:20px; height:14px; flex:0 0 auto; } .ccv2-nav-burger-bars span{ position:absolute; left:0; display:block; width:100%; height:2px; background:currentColor; border-radius:2px; transition:transform .18s ease,opacity .18s ease,top .18s ease; } .ccv2-nav-burger-bars span:nth-child(1){top:0} .ccv2-nav-burger-bars span:nth-child(2){top:6px} .ccv2-nav-burger-bars span:nth-child(3){top:12px} .ccv2-nav-burger[aria-expanded="true"] .ccv2-nav-burger-bars span:nth-child(1){ top:6px; transform:rotate(45deg); } .ccv2-nav-burger[aria-expanded="true"] .ccv2-nav-burger-bars span:nth-child(2){ opacity:0; } .ccv2-nav-burger[aria-expanded="true"] .ccv2-nav-burger-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); } /* ---- panel: sam meni ---- */ body.ccv2-nav-mobile ul.ccv2-nav-mobile-target{ display:none !important; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open{ display:block !important; position:absolute; left:0; right:0; z-index:99990; width:100%; max-height:78vh; margin:0; padding:6px 0; overflow-y:auto; -webkit-overflow-scrolling:touch; list-style:none; background:#fff; border-top:3px solid #FA461E; border-bottom:1px solid #E9E3D6; box-shadow:0 10px 26px rgba(31,34,38,.16); } /* stavke unutar mobilnog panela — sirok cilj za prst */ body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li{ position:relative; float:none; display:block; width:100%; margin:0; list-style:none; border-bottom:1px solid #E9E3D6; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li:last-child{ border-bottom:0; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li > a{ display:block; padding:13px 18px; font-size:15px; line-height:1.35; color:#1F2226; text-decoration:none; border-left:3px solid transparent; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li > a:hover, body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li > a:focus{ background:#E9E3D6; border-left-color:#FA461E; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .current-menu-item > a{ border-left-color:#EFE429; font-weight:700; } /* podmeni u mobilnom panelu ide jedan pod drugi, ne lebdi */ body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .sub-menu, body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .ccv2-nav-submenu{ position:static !important; left:auto !important; top:auto !important; width:100%; min-width:0; margin:0; padding:0 0 0 14px; border:0; border-top:1px solid #E9E3D6; background:#F7F5F0; box-shadow:none; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .sub-menu li{ float:none; display:block; width:100%; list-style:none; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .sub-menu li > a{ display:block; padding:11px 16px; font-size:14px; color:#1F2226; text-decoration:none; } /* zatvoreni podmeni ostaje skriven dok se ne klikne */ body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .menu-item-has-children > .sub-menu, body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .menu-item-has-children > .ccv2-nav-submenu{ display:none; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .menu-item-has-children.ccv2-nav-open > .sub-menu, body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open .menu-item-has-children.ccv2-nav-open > .ccv2-nav-submenu{ display:block; } /* strelica za otvaranje podmenija kod stavki koje nisu CCV2 */ .ccv2-nav-sub-toggle{ display:none; position:absolute; top:0; right:0; width:48px; height:46px; padding:0; font-size:16px; line-height:46px; color:#1F2226; text-align:center; background:transparent; border:0; border-left:1px solid #E9E3D6; cursor:pointer; -webkit-appearance:none; appearance:none; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li > .ccv2-nav-sub-toggle{ display:block; } body.ccv2-nav-mobile ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open > li > a{ padding-right:56px; } .ccv2-nav-sub-toggle[aria-expanded="true"]{ color:#FA461E; transform:rotate(180deg); } .ccv2-nav-sub-toggle:focus-visible{ outline:2px solid #1F2226; outline-offset:-2px; } /* meni teme se na uskim ekranima sakriva (samo u rezimu "location") */ body.ccv2-nav-mobile .ccv2-nav-theme-hidden{ display:none !important; } /* Traka u koju modul sam ispisuje mobilni meni (rezim "location"). Traka nema vlastitu podlogu ni visinu u toku stranice — dugme lebdi u gornjem lijevom uglu preko sadrzaja, pa iznad hero bloka nema bijelog pojasa. Sama traka ne prima klikove, samo dugme. */ .ccv2-nav-mobile-bar{ display:none; } body.ccv2-nav-mobile .ccv2-nav-mobile-bar{ display:block; position:fixed; top:0; left:0; right:0; z-index:99991; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top, 0px)); background:transparent; border:0; pointer-events:none; } body.ccv2-nav-mobile .ccv2-nav-mobile-bar .ccv2-nav-burger{ pointer-events:auto; box-shadow:0 2px 8px rgba(31,34,38,.28); } /* nosac dobija relativni polozaj da panel legne tacno pod header */ body.ccv2-nav-mobile .ccv2-nav-mobile-host{ position:relative; } body.ccv2-nav-mobile .ccv2-nav-mobile-bar .ccv2-nav-mobile-host{ position:static; } /* panel iz lebdece trake pada ispod dugmeta, preko cijele sirine */ body.ccv2-nav-mobile .ccv2-nav-mobile-bar ul.ccv2-nav-mobile-target.ccv2-nav-mobile-open{ position:fixed; top:calc(58px + env(safe-area-inset-top, 0px)); left:0; right:0; max-height:calc(100vh - 58px - env(safe-area-inset-top, 0px)); pointer-events:auto; } /* dok je panel otvoren, stranica ispod se ne skrola */ body.ccv2-nav-mobile-locked{ overflow:hidden; } /* korisnici koji su iskljucili animacije */ @media (prefers-reduced-motion: reduce){ .ccv2-nav-burger-bars span{transition:none} }