/* ── Global layout — navbar overlay, logo sizes, ad slots, push bell. Linked from _Layout.cshtml so available on every page. ──────────────────────────────────────────────────────────────────────── */ .lang-flag { width:20px; height:15px; object-fit:cover; border-radius:2px; box-shadow:0 0 1px rgba(0,0,0,.3); vertical-align:middle; } .ad-slot { display:block; } .ad-slot-sidebar { position:sticky; top:80px; } /* ── Transparent navbar overlay ───────────────────────────────────── The navbar floats over the hero image. Contrast is provided by a semi-transparent white pill behind the logo and bright white nav links with subtle text-shadow. */ .navbar-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 100; background: transparent !important; box-shadow: none !important; } .navbar-overlay .navbar-brand { /* Navy pill at 15% opacity — barely visible tint; the backdrop-blur does most of the work to keep the logo legible on busy photos. */ background: rgba(31, 79, 120, 0.15); border-radius: 12px; padding: 4px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .navbar-overlay .nav-link, .navbar-overlay .dropdown-toggle, .navbar-overlay .navbar-toggler { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); font-weight: 500; } .navbar-overlay .nav-link:hover, .navbar-overlay .dropdown-toggle:hover { color: #FAD974 !important; } .navbar-overlay .navbar-toggler { border-color: rgba(255, 255, 255, 0.45); } /* Mobile: when the hamburger menu is open, give the entire navbar a solid dark background (full-width, covering logo + toggler too). :has() is supported in all modern browsers (Chrome 105+, FF 121+, Safari 15.4+). */ @media (max-width: 991.98px) { .navbar-overlay:has(.navbar-collapse.show), .navbar-overlay:has(.navbar-collapse.collapsing) { background: rgba(10, 40, 70, 0.95) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .navbar-overlay .navbar-collapse.show, .navbar-overlay .navbar-collapse.collapsing { padding-bottom: 0.75rem; } } .site-logo { height:60px; width:auto; display:block; } .footer-logo { height:54px; width:auto; display:inline-block; } /* ── Push notification bell button ─────────────────────────────────── */ .pn-bell-btn { padding: 6px 10px; border-radius: 8px; transition: background .15s, color .15s; font-size: .92rem; } .pn-bell-btn:hover { background: rgba(255,255,255,.15); } .pn-bell-btn.pn-active { color: #FAD974 !important; } .pn-bell-btn.pn-active:hover { background: rgba(250,215,116,.15); }