/* app-navbar.css — DoreshTzion site CSS: top navigation bar + mobile offcanvas drawer (all pages). @split-marker */ .custom-navbar-toggle .navbar-toggler-icon { width: 2rem; height: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .offcanvas-header{ height: 100px !important; background-color: var(--dtz-blue) !important; } .offcanvas-header .btn-close{ display: none !important; } /* ===== Header ===== */ .header-area { background-color: var(--dtz-blue); position: sticky; top: 0; z-index: 999; height: 100px; overflow: visible; } .header-area .sticky-bar { height: 100%; } .header-area .navbar { height: 100%; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; } .sticky-bar { background-color: var(--dtz-blue); position: relative; } .sticky-bar.stick { box-shadow: 0 2px 8px rgba(0,0,0,.35); } /* Focus mode (admin Q&A archive): the page sets this class on to hide the site chrome above it, so its master–detail panel fills the screen. The page's fill-height re-measures and grows into the reclaimed space. Toggled off again on page leave. */ body.qadmin-immersive .header-area, body.qadmin-immersive .live-bar { display: none; } .header-logo-img { width: auto; height: 70px; display: block; } .menu-link { font-family: 'Heebo', Arial, sans-serif; font-weight: 400; font-size: 14px !important; color: #ffffff !important; text-align: center; transition: color var(--hover-transition); } .navbar-expand-lg .navbar-nav .nav-link { font-size: 14px !important; color: #ffffff !important; font-weight: 400; } @media (min-width: 992px) and (hover: hover) { .menu-link:hover, .navbar-expand-lg .navbar-nav .nav-link:hover { color: var(--dtz-bronze) !important; } } .menu-link:focus { outline: none; } .menu-link:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; } /* ===== Active-page indicator (desktop) ===== */ @media (min-width: 992px) { .navbar-nav .nav-link.menu-link.active { color: var(--dtz-bronze) !important; font-weight: 700 !important; } } /* ===== Icon-button active-page indicator (cart / login) ===== */ .header-icon-btn.active { border-color: var(--dtz-bronze); } .header-icon-btn.active i { color: var(--dtz-bronze); } @media (min-width: 1200px) { .menu-link, .navbar-expand-lg .navbar-nav .nav-link { font-size: 16px !important; } } @media (min-width: 1400px) { .menu-link, .navbar-expand-lg .navbar-nav .nav-link { font-size: 18px !important; } } .navbar-nav .nav-item { display: flex; align-items: center; } .btn-close { filter: invert(1); } /* Header action icon buttons (search, cart, login, hamburger) */ .header-icon-btn { background: var(--dtz-blue); border: 1px solid #fff; color: #fff; width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; position: relative; padding: 0; transition: background-color var(--hover-transition), box-shadow var(--hover-transition); } @media (hover: hover) { .header-icon-btn:hover { background: var(--dtz-blue-hover); color: #fff; } } .header-icon-btn:focus { outline: none; } .header-icon-btn:focus-visible { box-shadow: var(--focus-ring); } .header-icon-btn i { font-size: 16px; color: #fff; } .header-actions { flex-shrink: 0; } /* Offcanvas drawer styling (only applies in offcanvas mode = < lg) */ @media (max-width: 991.98px) { .offcanvas { background-color: #ffffff; color: var(--dtz-blue); } /* The drawer is position:fixed top:0, but the live-broadcast bar sits above it in a higher stacking context and would paint over its top. Start the drawer just below the bar instead. --live-bar-h is the bar's measured height, kept in sync by liveBanner.syncHeight() (App.razor); it is 0px when no broadcast is live, so this is a no-op the rest of the time. The full class list matches Bootstrap's own .offcanvas-lg.offcanvas-start top rule, to out-specify it. */ .offcanvas.offcanvas-lg.offcanvas-start { top: var(--live-bar-h, 0px); } .offcanvas-header { border-bottom: 1px solid var(--dtz-border-light); padding: 16px 20px; } .offcanvas-header .btn-close { filter: none; } .offcanvas-body { padding: 0; } .offcanvas-body .navbar-nav { flex-direction: column; gap: 0; width: 100%; } .offcanvas-body .nav-item { width: 100%; justify-content: flex-start; border-bottom: 1px solid var(--dtz-border-light); } .offcanvas-body .nav-item:last-child { border-bottom: none; } .offcanvas-body .navbar-nav .nav-link.menu-link { color: var(--dtz-blue) !important; text-align: right; padding: 14px 20px !important; font-size: 16px !important; width: 100%; transition: background-color var(--hover-transition); } .offcanvas-body .navbar-nav .nav-link.menu-link:hover, .offcanvas-body .navbar-nav .nav-link.menu-link:focus-visible { background-color: var(--hover-overlay-blue); color: var(--dtz-blue) !important; outline: none; } /* Active-page indicator inside the mobile drawer: right border + tinted background */ .offcanvas-body .navbar-nav .nav-link.menu-link.active { background-color: var(--hover-overlay-blue); color: var(--dtz-bronze) !important; font-weight: 700; border-right: 3px solid var(--dtz-bronze); } } @media (max-width: 479px) { .header-area .navbar { padding-left: 8px; padding-right: 8px; } .header-actions { gap: 4px !important; } } /* Anchor for the cart mini-flyout (rendered by CartFlyout, positioned beneath this wrapper around the header cart icon). */ .cart-icon-wrapper { position: relative; display: inline-flex; } /* ===== Header search dropdown (SiteHeader) ===== A centered pill that drops flush under the navbar. Anchored to .sticky-bar (position:relative) so it tracks the header whether or not the live banner is showing and at any scroll position. The page behind dims; header + this dropdown stay bright because .header-area has a higher stacking context. */ .header-search-backdrop { position: fixed; inset: 0; z-index: 990; /* below .header-area (z-index:999) */ background: rgba(10, 40, 58, .28); /* --dtz-blue at low alpha */ animation: dtz-search-fade .15s ease; } .header-search-dropdown { position: absolute; top: calc(100% + 10px); inset-inline: 0; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; /* only the box itself is clickable */ animation: dtz-search-drop .22s cubic-bezier(.2, .7, .3, 1); } .header-search-box { pointer-events: auto; width: min(640px, 100%); display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: 0 14px 34px rgba(10, 40, 58, .22); } .header-search-icon { flex: 0 0 auto; color: var(--dtz-bronze); font-size: 17px; margin-inline-start: 14px; /* nudge off the right (start) edge */ } .header-search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: Heebo, sans-serif; font-size: 18px; color: var(--dtz-blue); padding: 10px 6px; text-align: right; } .header-search-input::placeholder { color: #9aa0a6; } .header-search-clear { flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: transparent; color: #9aa0a6; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--hover-transition), color var(--hover-transition); } .header-search-clear:hover { background: var(--hover-overlay-blue); color: var(--dtz-blue); } .header-search-submit { flex: 0 0 auto; border: 0; background: var(--dtz-blue); color: #fff; border-radius: 999px; height: 44px; padding: 0 24px; font-family: Heebo, sans-serif; font-size: 16px; cursor: pointer; transition: background-color var(--hover-transition); } .header-search-submit:hover { background: var(--dtz-blue-hover); } .header-search-submit:focus-visible, .header-search-clear:focus-visible { outline: none; box-shadow: var(--focus-ring); } @keyframes dtz-search-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes dtz-search-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 575px) { .header-search-dropdown { padding: 0 12px; } .header-search-input { font-size: 16px; padding: 9px 4px; } .header-search-submit { height: 40px; padding: 0 18px; font-size: 15px; } .header-search-icon { margin-inline-start: 10px; } } /* ===== Mini search box — the home hero (.home-search-container markup: a white pill holding a borderless input + a round submit button). Flex layout so the input fills all space up to the button — no dead, unclickable gap. (The header search has its own dropdown styles above.) ===== */ .home-search-container { width: 100% !important; height: 60px; display: flex; align-items: center; gap: 4px; padding: 5px; } .home-search-container input.search-input { font-family: Heebo !important; flex: 1 1 auto; min-width: 0; /* let the input shrink instead of overflowing */ height: 100%; background: transparent; border: 0 !important; box-shadow: none !important; font-weight: 400; font-size: 20px; text-align: right; padding-inline: 16px; } .home-search-container input.search-input:focus { box-shadow: none !important; } .home-search-container button.btn { flex: 0 0 auto; width: 50px; height: 50px; /* Center the magnifier inside the round button (overrides Bootstrap's asymmetric .btn padding, which otherwise pushes the icon off-center). */ display: flex; align-items: center; justify-content: center; padding: 0; } .home-search-container button.btn .fas.fa-search { color: #fff; font-size: 28px; } /* Compact on phones / small tablets. */ @media (max-width: 767px) { .home-search-container { height: 44px; margin-top: 20px; margin-bottom: 20px; } .home-search-container input.search-input { font-size: 16px; padding-inline: 12px; } .home-search-container button.btn { width: 34px; height: 34px; } .home-search-container button.btn .fas.fa-search { font-size: 18px; } } /* Tablet / desktop: narrower hero box, medium controls. */ @media (min-width: 768px) { .home-search-container { width: 80% !important; height: 50px; } .home-search-container button.btn { width: 40px; height: 40px; } .home-search-container button.btn .fas.fa-search { font-size: 22px; } } /* Large desktop: full-size controls. */ @media (min-width: 1400px) { .home-search-container { height: 60px; } .home-search-container button.btn { width: 50px; height: 50px; } } /* Cap the width so the pill stays a reasonable proportion on wide screens. */ @media (min-width: 1600px) { .home-search-container { width: 70% !important; } }