.form-control:focus, .masthead-container .masthead-location-search > .input-group-text:focus-within { z-index: 5; } /* lg/xl: spread nav icons more, shrink search box (old-site style) */ @media (min-width: 992px) { #masthead-icons { gap: 2.75rem !important; } .masthead-search-col { max-width: 480px !important; } } /* Below lg: spread icons evenly with equal sizing */ @media (max-width: 991.98px) { #masthead-icons { justify-content: space-evenly !important; } #masthead-icons > a, #masthead-icons > .dropdown { text-align: center; } #masthead-icons .masthead-icon, .masthead-profile-col .masthead-icon { align-items: center !important; } /* Keep SVG icons same size as lg */ #masthead-icons .masthead-icon svg, .masthead-person-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; } } /* Below lg: SearchBox top row, then Logo | Icons+Profile bottom row */ @media (max-width: 991.98px) { .masthead-container > .row { justify-content: space-between !important; flex-wrap: wrap !important; overflow: visible !important; } /* SearchBox must take full width to force wrap */ .masthead-container > .row > div:first-child { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-right: 0 !important; } .masthead-search-col { max-width: none !important; } /* Reduce search box size on small screens */ .masthead-container .input-group.input-group-lg { font-size: 0.875rem; } .masthead-container .input-group.input-group-lg .form-control, .masthead-container .input-group.input-group-lg .input-group-text { padding: 0.375rem 0.5rem; font-size: 0.875rem; } .masthead-container .input-group.input-group-lg .ic-search { font-size: 0.875rem; } /* Hamburger col */ .masthead-container > .row > .col-auto.order-2 { order: 2 !important; flex: 0 0 auto !important; padding-left: 0.25rem !important; display: flex !important; align-items: center !important; } .masthead-container .masthead-search-col a.d-lg-none { overflow: visible !important; } .masthead-container #mobile-drawer-toggle { min-width: 44px; min-height: 44px; margin-top: 0 !important; margin-left: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* Icons + Profile share the row, stretch to fill between logo edges */ .masthead-container > .row > .col-auto.order-3 { order: 3 !important; flex: 1 1 0 !important; margin-left: 0.5rem !important; margin-right: 0 !important; overflow: visible !important; } .masthead-profile-col { order: 4 !important; flex: 0 0 auto !important; } #masthead-icons { justify-content: space-evenly !important; gap: 0.5rem !important; width: 100%; overflow: visible !important; } #masthead-icons > a, #masthead-icons > .dropdown { text-align: center; flex: 1; position: relative; } #masthead-icons > a, #masthead-icons > .dropdown > a, .masthead-profile-col > .flex > .dropdown > a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-top: 0.25rem; padding-bottom: 0.25rem; } /* Profile col items also stretch evenly */ .masthead-profile-col > .flex > .dropdown { text-align: center; } /* Ensure dropdowns can overflow */ #masthead-icons .dropdown-menu, .masthead-profile-col .dropdown-menu { position: absolute !important; z-index: 1050 !important; } #masthead-icons .masthead-icon, .masthead-profile-col .masthead-icon { align-items: center !important; } /* Icons and font sized to fit within logo/profile height */ #masthead-icons .masthead-icon svg, .masthead-person-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; } #masthead-icons .masthead-icon div, .masthead-profile-col .masthead-icon div { font-size: 0.65rem !important; line-height: 1.1 !important; } .mobile-drawer-panel .mobile-drawer-content { padding-bottom: 188px !important; } .mobile-drawer-thumb-space { height: 50vh; height: 50dvh; pointer-events: none; flex-shrink: 0; } } /* M2 elevation 12dp (above masthead 6dp) — same spec as DropDown.scss .masthead-container .dropdown-menu */ .masthead-container .dropdown-menu { border: 1px solid #3d88b8; /* border of dropdown menu container */ box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12) !important; padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; } .dropdown-menu li { position: relative; } /* Submenu: hidden by default; absolute-positioned relative to parent li. Viewport clamping (flip left / pull back / shift up when the flyout would render off-screen, e.g. a 947x600 window) is done with inline styles by window.__sbClampSubmenu in _Layout02BodyStart.cshtml on every open. */ .dropdown-menu .dropdown-submenu { display: none; position: absolute; left: calc(100% - 1rem); top: 0; } /* Submenu opens via .show (tap on touch) or :hover (mouse/trackpad at ANY breakpoint, like the classic site). `pointer: fine` keeps phones/tablets on tap-to-open despite Android mis-reporting `hover: hover`. */ .masthead-container .dropdown-menu .dropdown-submenu.show { display: block; } @media (hover: hover) and (pointer: fine) { .masthead-container .dropdown-menu > li:hover > .dropdown-submenu { display: block; } } .masthead-container .dropdown-item .submenu-item-row { display: flex; align-items: center; width: 100%; justify-content: space-between; gap: 0.5rem; } .masthead-container .dropdown-item .submenu-item-row .ic-right { margin-left: auto; flex-shrink: 0; } /* Below md: parent dropdown is narrow, so overlap parent with left: 73% for visibility. */ @media (max-width: 767.98px) { .masthead-container .dropdown-menu .dropdown-submenu.show { left: 73%; } @media (hover: hover) and (pointer: fine) { .masthead-container .dropdown-menu > li:hover > .dropdown-submenu { left: 73%; } } /* Forums: single-level menu on touch only at xs/sm — submenus suppressed, tap navigates (ic-right indicator already hidden via d-none d-md-inline). Mouse/trackpad users keep the full sub-category flyouts on hover at every width, as the classic site did. */ @media (pointer: coarse) { .masthead-container [data-nav-section="forums_menu"] .dropdown-submenu { display: none !important; } } /* First-level dropdown: position at top:0 when it doesn't fit vertically */ .masthead-container > .row .dropdown > .dropdown-menu.dropdown-menu-top-adjusted { top: 0 !important; position: fixed !important; max-height: 100vh; overflow-y: auto; } } /* xs/sm: smooth compact/expand (Safari address-bar timing ~200ms) */ @media (max-width: 991.98px) { .masthead-container { transition: padding 0.2s ease-out; } .masthead-container .masthead-search-col, .masthead-container #masthead-search-container { transition: opacity 0.2s ease-out, max-height 0.2s ease-out; } .masthead-mobile-compact-logo { display: none; } .masthead-container.masthead-mobile-compact .masthead-search-col, .masthead-container.masthead-mobile-compact #masthead-search-container { display: none !important; } .masthead-container.masthead-mobile-compact .masthead-mobile-compact-logo { display: inline-flex !important; align-items: center; flex-shrink: 0; } .masthead-container.masthead-mobile-compact > .row > .col-auto.order-2 { } .masthead-container.masthead-mobile-compact > .row > .col-auto.order-3 { margin-left: 0 !important; margin-right: 0 !important; flex: 1 1 auto !important; min-width: 0; } .masthead-container.masthead-mobile-compact #masthead-icons .masthead-icon > div { display: none; } .masthead-container.masthead-mobile-compact #masthead-icons > a, .masthead-container.masthead-mobile-compact #masthead-icons > .dropdown > a { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 40px; } .masthead-container > div { padding-top: 0.5 !important; padding-bottom: 0.5 !important; } .masthead-container.masthead-mobile-compact > .row { flex-wrap: nowrap !important; justify-content: space-between !important; } .masthead-container.masthead-mobile-compact #masthead-icons { width: 100%; gap: 0 !important; justify-content: space-evenly !important; } .masthead-container.masthead-mobile-compact .masthead-profile-col { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .masthead-container.masthead-mobile-compact .masthead-profile-col > .flex > .dropdown > a, .masthead-container.masthead-mobile-compact .masthead-profile-col > .flex > .dropdown > a > .position-relative { min-width: 36px; min-height: 36px; } .masthead-container.masthead-mobile-compact .masthead-profile-col img.rounded-circle { margin-top: 0.25rem !important; width: 1.75rem !important; height: 1.75rem !important; } .masthead-container.masthead-mobile-compact .masthead-profile-col .sb-unread-mail-badge { font-size: 0.58rem; padding: 0.12rem 0.32rem !important; } .masthead-container.masthead-mobile-compact .masthead-mobile-compact-logo .logo { width: 60px; height: 30px; margin-top: 0; margin-bottom: 0; margin-right: 1.25rem; } .masthead-container.masthead-mobile-compact #mobile-drawer-toggle svg { width: 24px; height: 24px; } .masthead-container.masthead-mobile-compact #masthead-icons .masthead-icon svg { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; } } /* Mobile drawer menu */ .mobile-drawer-backdrop { position: fixed; inset: 0; z-index: 1039; background: rgba(0,0,0,0.4); } .mobile-drawer-panel { position: fixed; top: 0; height: 100vh; height: 100dvh; width: 76vw; z-index: 1040; display: flex; flex-direction: column; /* Right-handed: dock right; swipe from the right edge. */ left: auto; right: 0; /* Avoid fractional-pixel sliver at viewport edge on xs/sm when closed */ transform: translateX(calc(100% + 2px)); transition: transform 180ms ease-out; overflow: hidden; box-shadow: -4px 4px 24px rgba(0,0,0,0.25); /* Custom drawer ripple handles press feedback (not WebKit gray / primary flash) */ -webkit-tap-highlight-color: transparent; } .mobile-drawer-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-drawer-panel.open { transform: translateX(0); } /* Left-handed: drawer docks on the left; swipe opens from the left edge. */ html[data-sb-handedness="left"] .mobile-drawer-panel { left: 0; right: auto; transform: translateX(calc(-100% - 2px)); box-shadow: 4px 4px 24px rgba(0,0,0,0.25); } html[data-sb-handedness="left"] .mobile-drawer-panel.open { transform: translateX(0); } .transition-opacity { transition: opacity 180ms ease-out; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } /* Drawer section styling */ .drawer-section-header { cursor: pointer; user-select: none; min-height: 44px; position: relative; overflow: hidden; isolation: isolate; } .drawer-section-header:hover { background-color: var(--bs-tertiary-bg); } .drawer-nav-item { padding: 0.5rem 1rem 0.5rem 2.5rem; display: flex; align-items: center; gap: 0.75rem; color: var(--bs-body-color); text-decoration: none; min-height: 44px; position: relative; overflow: hidden; isolation: isolate; } .drawer-nav-item:hover, .drawer-nav-item:focus, .drawer-nav-item:active, .drawer-section-header:focus, .drawer-section-header:active { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); } .drawer-nav-item i { width: 20px; text-align: center; } /* Touch-origin fill: circle → full row (300ms), fade out on release (600ms). Fill color matches app AppColors.blue10 / --bg-secondary. z-index -1 keeps label text/icons above the fill (text nodes are not elevated by child selectors). */ .drawer-tap-ripple { position: absolute; border-radius: 50%; background-color: var(--bg-secondary, #E5F0FF); pointer-events: none; transform: translate(-50%, -50%) scale(0); opacity: 1; z-index: -1; will-change: transform, opacity; } .drawer-tap-ripple.is-expanding { transition: transform 300ms ease-out; transform: translate(-50%, -50%) scale(1); } .drawer-tap-ripple.is-fading { transition: opacity 600ms ease-out; opacity: 0; } /* Same press fill on weather rail items (lg+ equivalent of drawer weather links). Rail links shrink-wrap to icon+label by default — force full rail width so the ripple matches the mobile drawer row fill. */ .weather-rail-item { position: relative; overflow: hidden; isolation: isolate; align-self: stretch !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .rotate-180 { transform: rotate(180deg); } [x-cloak] { display: none !important; } /* Drawer: three-arrow wind legend (compact; matches member menu scale) */ .drawer-arrow-stack { width: 22px; height: 22px; } .drawer-arrow-stack i { width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35)); }