/* Deals / Cases nav dropdown — scoped styles (does not modify style.css) */ .main-menu li.nav-dropdown { position: relative; padding-right: 12px; } .main-menu li.nav-dropdown > .nav-dropdown-trigger { position: relative; } /* Desktop portal menu is moved to via custom.js */ body > .nav-dropdown-menu.nav-dropdown-menu--portaled { display: none !important; visibility: hidden; pointer-events: none; position: fixed; top: 0; left: 0; z-index: 999999; min-width: 220px; margin: 0; padding: 12px 0; list-style: none; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14); text-align: left; box-sizing: border-box; } body > .nav-dropdown-menu.nav-dropdown-menu--portaled.is-visible { display: block !important; visibility: visible; pointer-events: auto; } body > .nav-dropdown-menu.nav-dropdown-menu--portaled.is-measuring { display: block !important; visibility: hidden; pointer-events: none; } body > .nav-dropdown-menu.nav-dropdown-menu--portaled li { display: block; padding: 0; } body > .nav-dropdown-menu.nav-dropdown-menu--portaled a { display: block; padding: 10px 12px; color: #303030; font-size: 15px; font-weight: 400; line-height: 1.45; white-space: nowrap; text-align: left; text-decoration: none; } body > .nav-dropdown-menu.nav-dropdown-menu--portaled a:hover, body > .nav-dropdown-menu.nav-dropdown-menu--portaled a:focus-visible, body > .nav-dropdown-menu.nav-dropdown-menu--portaled a:active { color: #0084BA; background: #F8FAFC; text-decoration: underline; text-decoration-color: #339DC8; text-underline-offset: 3px; } /* Mobile menu sub-items */ .main-menu-container.mobilemenu li.nav-dropdown { padding-right: 0; } .main-menu-container.mobilemenu li.nav-dropdown > .nav-dropdown-row { display: flex; align-items: center; justify-content: space-between; gap: 0; width: 100%; } .main-menu-container.mobilemenu li.nav-dropdown .nav-dropdown-link { display: block; flex: 1 1 auto; min-width: 0; box-sizing: border-box; } .main-menu-container.mobilemenu li.nav-dropdown .nav-dropdown-toggle { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 52px; min-height: 52px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-size: inherit; line-height: 1; } .main-menu-container.mobilemenu .main-menu li.nav-dropdown .nav-dropdown-toggle { padding: 0; } .main-menu-container.mobilemenu .main-menu li.nav-dropdown .nav-dropdown-toggle-icon { display: block; width: 0; height: 0; margin: 0; padding: 0; font-size: 0; line-height: 0; border: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #434142; background: transparent; transition: transform 0.25s ease; transform-origin: center 40%; flex-shrink: 0; } .main-menu-container.mobilemenu li.nav-dropdown.is-open > .nav-dropdown-row .nav-dropdown-toggle-icon { transform: rotate(180deg); } .main-menu-container.mobilemenu li.nav-dropdown .nav-dropdown-menu { display: block; position: static; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; max-height: 0; overflow: hidden; transition: max-height 0.28s ease, padding 0.28s ease; box-sizing: border-box; } .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown .nav-dropdown-menu li { display: block; padding: 0; } .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown .nav-dropdown-menu li a { display: block; padding: 10px 20px; color: #303030; font-size: 15px; font-weight: 400; line-height: 1.45; white-space: nowrap; text-align: left; text-decoration: none; box-sizing: border-box; } .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown .nav-dropdown-menu li a:hover, .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown .nav-dropdown-menu li a:focus-visible, .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown .nav-dropdown-menu li a:active { color: #0084BA !important; background: #F8FAFC; text-decoration: underline; text-decoration-color: #339DC8; text-underline-offset: 3px; } .main-menu-container.mobilemenu .main-menu ul li.nav-dropdown:hover > .nav-dropdown-row .nav-dropdown-link { color: var(--chambers-black, #434142); } .main-menu-container.mobilemenu li.nav-dropdown.is-open > .nav-dropdown-menu { max-height: 180px; padding-bottom: 4px; } /* * Touch / mobile devices: always use hamburger MENU, * even when screen width is above the CSS mobile breakpoint. * Desktop Deals/Cases dropdown relies on hover and is unusable without a mouse. * Mirror the @media (max-width: 1150px) mobile-nav chrome so styles still apply * when force-mobile-nav is active outside that breakpoint. */ body.force-mobile-nav .logo-container { display: none; } body.force-mobile-nav .logo-container-mobile { display: block; position: fixed; float: left; top: 5px; left: 14px; z-index: 99999; width: 88px; min-width: 88px; max-width: 88px; overflow: visible; } body.force-mobile-nav .logo-container-mobile .logo { display: block; width: 88px !important; min-width: 88px !important; } body.force-mobile-nav .logo-container-mobile .logo img { display: block; width: 88px !important; max-width: 88px !important; height: auto !important; object-fit: contain; } body.force-mobile-nav .header { padding-left: 0; } body.force-mobile-nav .container { margin-top: 46px; } body.force-mobile-nav .main { margin: 47px auto 0; } body.force-mobile-nav .header { height: 46px; } body.force-mobile-nav .header-corners, body.force-mobile-nav .main-menu-container:not(.mobilemenu) { display: none !important; } body.force-mobile-nav .main-menu-container.mobilemenu { display: flex; flex-direction: column; position: fixed; top: 0; right: -300px; width: 300px; height: 100%; margin: 0; background-color: #fff; z-index: 999999; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } body.force-mobile-nav .main-menu-container.mobilemenu.active { right: 0; width: 300px; } body.force-mobile-nav .main-menu-container.mobilemenu .main-menu a { color: var(--chambers-black, #434142); } body.force-mobile-nav .main-menu-header { width: 100%; background-color: #00558D; height: 50px; border-bottom: 5px solid #dee2e6; } body.force-mobile-nav .main-menu-title { float: left; font-size: 2em; padding-left: 16px; font-weight: 700; color: white; padding-top: 13px; } body.force-mobile-nav .main-menu-close { display: block; float: right; width: 20px; height: 20px; margin: 10px; background: url(/images/menu-close-white@2x.png) no-repeat center center; background-size: contain; cursor: pointer; z-index: 1500; } body.force-mobile-nav .main-menu-container.mobilemenu .header-search, body.force-mobile-nav .main-menu-container.mobilemenu .main-menu { clear: both; } body.force-mobile-nav .main-menu-container.mobilemenu .header-search { margin: 0 22px 22px 22px; } body.force-mobile-nav .main-menu-mask { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 900; cursor: pointer; } body.force-mobile-nav .main-menu-button { position: fixed; top: 0; display: block !important; width: 100%; height: 46px; padding: 11px 17px; background-color: #FFF; text-align: right; border-bottom: 4px solid #F2F2F2; cursor: pointer; z-index: 99998; box-sizing: border-box; } body.force-mobile-nav .main-menu-button span { position: relative; display: inline-block; vertical-align: top; font-family: 'Open Sans', sans-serif; font-size: 1.6em; font-weight: 700; color: #0284BA; text-transform: uppercase; padding-left: 3px; border: 0; cursor: pointer; } body.force-mobile-nav .main-menu-button .menu-line-container { display: inline-block; width: 15px; } body.force-mobile-nav .main-menu-button .menu-line { display: block; width: 100%; height: 2px; margin: 3px auto; background-color: #0284BA; cursor: pointer; } body.force-mobile-nav .main-menu-container.mobilemenu .main-menu li { display: block; padding-right: 0; } body.force-mobile-nav .main-menu-container.mobilemenu .main-menu a, body.force-mobile-nav .main-menu-container.mobilemenu .main-menu span { display: block; font-size: 1.6em; padding: 16px; } body.force-mobile-nav .memberpage .member-page-header { display: block !important; } /* Member dashboard mobile drawer: member items only (no public nav / Login / search) */ body.memberpage .main-menu-container.mobilemenu .header-search, body.memberpage .main-menu-container.mobilemenu .header-line { display: none !important; } body.memberpage .main-menu-container.mobilemenu .member-page-header-mobile { display: block !important; } body.force-mobile-nav > .nav-dropdown-menu.nav-dropdown-menu--portaled { display: none !important; visibility: hidden; pointer-events: none; } .main-menu-container.mobilemenu .header-line, .main-menu-container.mobilemenu .member-header-line { width: 100%; margin-top: 8px; padding-top: 0; } .main-menu-container.mobilemenu .header-line li, .main-menu-container.mobilemenu .member-header-line li { display: block; } .main-menu-container.mobilemenu .header-line li:first-child, .main-menu-container.mobilemenu .member-header-line li:first-child { border-top: 1px solid #dee2e6; } @media (prefers-reduced-motion: reduce) { .main-menu-container.mobilemenu li.nav-dropdown .nav-dropdown-toggle-icon, .main-menu-container.mobilemenu li.nav-dropdown .nav-dropdown-menu { transition: none; } }