.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));
}
