/* ========================================================================= CBD (v32) — inner-page header Full-width amber bar, stuck to the top of the window, same 90px height as the homepage pill. Loaded ONLY on inner pages (menu / cart / contact / profile …) via top-bar-inner-page.php — style.css does not load on those pages, so this file carries the fonts + header rules it needs on its own. ========================================================================= */ @font-face { font-family: 'Moche'; src: url('../assets/fonts/Moche-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Moche'; src: url('../assets/fonts/Moche-Light.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'poppins'; src: url('../assets/fonts/Poppins-Light_0.ttf') format('truetype'); font-weight: 300; font-display: swap; } .cbd-inner-header { position: sticky; top: 0; z-index: 50; /* sits above the page content while scrolling */ width: 100%; background: #FFAF34; color: #1F130D; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); } /* Hide the header while a full-screen overlay is open so it never pokes over it: - Bootstrap modals add .modal-open to ; - the product customise slide (#product_deatils_div) adds .menuPSlide to . visibility:hidden works regardless of the overlay's stacking context (a plain z-index tweak is unreliable for a position:sticky header). */ body.modal-open .cbd-inner-header, .menuPSlide .cbd-inner-header { visibility: hidden; } .cbd-inner-header-bar { position: relative; height: 90px; /* same header height as the homepage pill */ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 32px; } /* Left: nav links */ .cbd-inner-header-nav { display: flex; align-items: center; gap: 14px; } .cbd-inner-header-nav a { font-family: 'Moche', serif; font-size: 16px; color: #1F130D; white-space: nowrap; transition: color .2s, font-weight .2s; } .cbd-inner-header-nav a:hover { color: #EE4A3A; font-weight: 500; } .cbd-inner-header-nav a.is-active { color: #EE4A3A; font-weight: 900; } /* Centre: logo (absolutely centred over the bar, like the homepage header) */ .cbd-inner-header-logo-link { display: inline-flex; } .cbd-inner-header-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 36px; width: auto; } /* Right: "Find Us" socials + Get Directions */ .cbd-inner-header-right { display: flex; align-items: center; gap: 24px; } .cbd-inner-header-social { display: flex; align-items: center; gap: 8px; } .cbd-inner-header-social span { font-family: 'Moche', serif; font-size: 16px; } .cbd-inner-header-social a { width: 19px; height: 19px; display: flex; } .cbd-inner-header-social img { width: 100%; height: 100%; } .cbd-inner-header-directions { display: flex; align-items: center; gap: 8px; background: #25160F; color: #F8E7D1; border-radius: 999px; padding: 12px 20px; font-family: 'poppins', 'Helvetica Neue', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; transition: opacity .2s; } .cbd-inner-header-directions:hover { opacity: .85; } .cbd-inner-header-directions img { width: 15px; height: 15px; } /* Below 1200px this desktop bar is hidden — the shared mobile hamburger nav (cbd-mobile-nav.php + mobile-nav.css) takes over instead. */ @media (max-width: 1199px) { .cbd-inner-header { display: none; } }