/* ========================================================= Viva Top Bar — viva-topbar.css ========================================================= */ #viva-topbar { width: 100%; text-align: center; font-family: inherit; letter-spacing: 0.06em; line-height: 1.5; z-index: 99999; box-sizing: border-box; /* Boje se setuju inline iz PHP-a, ali ovo su fallback */ background: #1e3d2f; color: #d4a843; } /* Links unutar bara nasljeđuju boju teksta */ #viva-topbar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #viva-topbar a:hover { opacity: 0.8; } /* Strong i em */ #viva-topbar strong { font-weight: 700; letter-spacing: 0.1em; } /* ── Sticky varijanta ──────────────────────────────────── */ #viva-topbar.viva-topbar--sticky { position: fixed; top: 0; left: 0; right: 0; } /* ── WordPress Admin Bar kompatibilnost ────────────────── */ /* Admin bar je visok 32px na desktopu, 46px na mobilnom. WordPress automatski dodaje .admin-bar klasu na kada je korisnik ulogovan i admin bar je vidljiv. */ .admin-bar #viva-topbar.viva-topbar--sticky { top: 32px; } @media screen and (max-width: 782px) { .admin-bar #viva-topbar.viva-topbar--sticky { top: 46px; } } /* Na vrlo malim ekranima WP admin bar ide na vrh i ostaje fiksiran (WordPress mobilni breakpoint) */ @media screen and (max-width: 600px) { .admin-bar #viva-topbar.viva-topbar--sticky { top: 46px; } } /* Kad je sticky, pomeramo ceo sadržaj nadole za visinu bara */ body:has(#viva-topbar.viva-topbar--sticky) { padding-top: var(--viva-topbar-height, 44px); } /* Kompatibilnost za stare browsere koji ne podržavaju :has() */ body.viva-has-sticky-bar { padding-top: var(--viva-topbar-height, 44px); } /* ── Jolie tema specifično ─────────────────────────────── */ /* Jolie koristi .site-header ili #masthead — sticky header treba da bude ispod bara */ body:has(#viva-topbar.viva-topbar--sticky) .site-header, body:has(#viva-topbar.viva-topbar--sticky) #masthead, body:has(#viva-topbar.viva-topbar--sticky) header.site-header { top: var(--viva-topbar-height, 44px) !important; } /* Ako tema ima sticky nav */ body:has(#viva-topbar.viva-topbar--sticky) .sticky-nav, body:has(#viva-topbar.viva-topbar--sticky) .fixed-nav { top: var(--viva-topbar-height, 44px) !important; } /* ── Mobile / Desktop tekst varijante ──────────────────── */ /* Ako postoje obe verzije, sakrivamo mobilni na desktopu i desktop na mobilnom */ #viva-topbar .viva-topbar__mobile { display: none; } #viva-topbar .viva-topbar__desktop { display: inline; } @media (max-width: 768px) { #viva-topbar .viva-topbar__desktop { display: none; } #viva-topbar .viva-topbar__mobile { display: inline; } } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 768px) { #viva-topbar { font-size: 12px !important; padding-left: 12px !important; padding-right: 12px !important; letter-spacing: 0.03em; } } @media (max-width: 480px) { #viva-topbar { font-size: 11px !important; letter-spacing: 0.02em; } }