/* ------------------------------------------------------------------ nav.css (see nav.js) - the HFS Login / AdminStrat CMS "New Portal" navigation, ported to Route 66 (2026-09-22) in the site's own colours: navy bar (#0d2444), white dropdowns with navy text, the light-blue #6dcef4 underline on the active section. Replaces the old mbmcpebul css_menu + menu.js. One palette per section, so public / client / admin can differ later without a second stylesheet: .nav-r66 public site #0d2444 navy, #6dcef4 underline (default) .nav-r66-client dealer portal same navy, #006699 accent .nav-r66-admin administration darker bar, so staff can see at a glance which side of the site they are on Palette variables live on :root (nav.js copies the master's nav-* class onto ) because the phone drawer is appended to , outside #siteNav. The server-rendered list (#mbmcpebul_wrapper in the master) is data only: nav.js builds the real bar from it, so whatever the server decided to emit is exactly what appears. Desktop bar >= 992px; below that a slide-in drawer. ------------------------------------------------------------------ */ #mbmcpebul_wrapper { display: none !important; } /* Sticky, like the classic site's menu was once you scrolled past the banner. */ #siteNav { overflow: visible !important; height: var(--nav-h) !important; background: var(--nav-bg) !important; box-shadow: 0 2px 10px rgba(0,0,0,.18); position: sticky; top: 0; z-index: 1030; } :root { --nav-h: 56px; --nav-bg: #0d2444; --nav-text: #ffffff; --nav-muted: rgba(255,255,255,.72); --nav-hover: rgba(255,255,255,.14); --nav-underline: #6dcef4; --nav-accent: #006699; /* active / hover text inside dropdowns and the drawer */ --nav-accent-tint: rgba(13,36,68,.08); --nav-menu-bg: #ffffff; --nav-menu-text: #0d2444; --nav-menu-border: #dde3ea; --nav-brand: #ffffff; } :root.nav-r66 { --nav-bg: #0d2444; --nav-underline: #6dcef4; --nav-accent: #006699; --nav-accent-tint: rgba(13,36,68,.08); } :root.nav-r66-client { --nav-bg: #0d2444; --nav-underline: #6dcef4; --nav-accent: #006699; --nav-accent-tint: rgba(0,102,153,.10); } :root.nav-r66-admin { --nav-bg: #071729; --nav-underline: #6dcef4; --nav-accent: #006699; --nav-accent-tint: rgba(7,23,41,.10); } /* ===================== desktop bar ===================== */ .tnav { display: none; } @media (min-width: 992px) { .tnav { display: flex; align-items: center; height: var(--nav-h); padding: 0 16px 0 12px; gap: 8px; margin: auto; width: 98%; background: var(--nav-bg); color: var(--nav-text); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Open Sans", sans-serif; font-size: 15px; } .tnav-brand { display: flex; align-items: center; gap: 10px; height: var(--nav-h); padding: 0 10px 0 4px; color: var(--nav-brand) !important; text-decoration: none !important; font-weight: 700; font-size: 16px; letter-spacing: .3px; white-space: nowrap; } .tnav-brand img { height: 40px; width: auto; display: block; } .tnav-brand-item > .tnav-link { font-weight: 700; font-size: 16px; color: var(--nav-brand) !important; padding-left: 4px; } .tnav-brand-item > .tnav-link img { height: 40px; width: auto; display: block; } .tnav-sep { width: 1px; height: 28px; background: var(--nav-muted); opacity: .45; margin: 0 6px; } .tnav-items { display: flex; align-items: stretch; height: var(--nav-h); flex: 1 1 auto; min-width: 0; } .tnav-item { position: relative; display: flex; align-items: stretch; } .tnav-link { display: flex; align-items: center; gap: 7px; padding: 0 14px; height: var(--nav-h); background: transparent; border: 0; color: var(--nav-text) !important; text-decoration: none !important; font: inherit; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; border-top: 3px solid transparent; } .tnav-link .tnav-chev { font-size: 10px; opacity: .7; transition: transform .15s; } .tnav-item.open .tnav-link .tnav-chev { transform: rotate(180deg); } .tnav-link:hover, .tnav-item.open > .tnav-link { background: var(--nav-hover); } .tnav-item.active > .tnav-link { border-bottom-color: var(--nav-underline); } .tnav-menu { display: none; position: absolute; top: var(--nav-h); left: 0; min-width: 230px; padding: 6px 0; background: var(--nav-menu-bg); color: var(--nav-menu-text); border: 1px solid var(--nav-menu-border); border-radius: 0 0 10px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 1600; } .tnav-menu.tnav-menu-right { left: auto; right: 0; } .tnav-item.open > .tnav-menu { display: block; } .tnav-menu-head { padding: 6px 16px 4px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--nav-menu-text); opacity: .55; } .tnav-menu-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; background: transparent; border: 0; text-align: left; font: inherit; font-size: 14px; color: var(--nav-menu-text) !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; } .tnav-menu-link:hover { background: var(--nav-accent-tint); } .tnav-menu-link.active { color: var(--nav-accent) !important; font-weight: 600; } .tnav-menu-link i { width: 16px; text-align: center; opacity: .75; } /* nested group = fly-out submenu (opens to the right, flips left near the window edge) */ .tnav-flyout { position: relative; } .tnav-flyout-head { justify-content: space-between; } .tnav-flyout-chev { font-size: 10px; opacity: .55; margin-left: 18px; } .tnav-flyout.active > .tnav-flyout-head { color: var(--nav-accent) !important; font-weight: 600; } .tnav-submenu { display: none; position: absolute; top: -7px; left: 100%; min-width: 220px; padding: 6px 0; background: var(--nav-menu-bg); color: var(--nav-menu-text); border: 1px solid var(--nav-menu-border); border-radius: 0 10px 10px 10px; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 1601; } .tnav-flyout.flip > .tnav-submenu { left: auto; right: 100%; border-radius: 10px 0 10px 10px; } .tnav-flyout.open > .tnav-submenu { display: block; } .tnav-flyout.open > .tnav-flyout-head { background: var(--nav-accent-tint); } .tnav-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } .tnav-right img { height: 40px; width: auto; display: block; margin-right: 6px; } .tnav-logout i { font-size: 14px; opacity: .85; } } /* ===================== phone bar + drawer ===================== */ .mnav-bar, .mnav-drawer, .mnav-backdrop { display: none; } @media (max-width: 991px) { .mnav-bar { display: flex; align-items: center; height: var(--nav-h); padding: 0 8px; background: var(--nav-bg); color: var(--nav-text); } .mnav-brand { display: flex; align-items: center; gap: 8px; margin-left: 4px; color: var(--nav-brand) !important; text-decoration: none !important; font-weight: 700; font-size: 15px; letter-spacing: .3px; } .mnav-brand img { height: 34px; width: auto; display: block; } .mnav-burger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; background: transparent; border: 0; border-radius: 8px; -webkit-tap-highlight-color: transparent; } .mnav-burger span { display: block; height: 2px; width: 22px; background: var(--nav-text); border-radius: 2px; transition: transform .2s, opacity .2s; } html.mnav-open .mnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.mnav-open .mnav-burger span:nth-child(2) { opacity: 0; } html.mnav-open .mnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav-backdrop { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1700; } .mnav-drawer { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 84vw; max-width: 320px; background: var(--nav-menu-bg); color: var(--nav-menu-text); box-shadow: 4px 0 24px rgba(0,0,0,.35); transform: translateX(-102%); transition: transform .25s ease; z-index: 1701; overscroll-behavior: contain; } html.mnav-open .mnav-backdrop { opacity: 1; pointer-events: auto; } html.mnav-open .mnav-drawer { transform: translateX(0); } html.mnav-open body { overflow: hidden; } .mnav-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--nav-menu-border); background: var(--nav-bg); color: var(--nav-text); flex: 0 0 auto; } .mnav-title { font-size: 16px; font-weight: 700; color: var(--nav-brand); } .mnav-close { width: 44px; height: 44px; font-size: 28px; line-height: 1; background: transparent; border: 0; color: inherit; opacity: .85; } .mnav-list { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; } .mnav-foot { flex: 0 0 auto; padding: 8px 0 12px; border-top: 1px solid var(--nav-menu-border); } .mnav-group { padding: 10px 16px 4px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; opacity: .55; } .mnav-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 16px; background: transparent; border: 0; border-left: 3px solid transparent; color: inherit; font: inherit; font-size: 16px; text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; } .mnav-drawer a.mnav-item, .mnav-drawer a.mnav-item:hover, .mnav-drawer a.mnav-item:focus { color: inherit !important; } .mnav-item:hover, .mnav-item:focus { text-decoration: none; background: rgba(127,127,127,.08); outline: none; } .mnav-item.active { border-left-color: var(--nav-accent); background: var(--nav-accent-tint); font-weight: 600; } .mnav-ico { width: 22px; text-align: center; font-size: 18px; opacity: .8; flex: 0 0 22px; } .mnav-text { flex: 1 1 auto; } .mnav-chev { font-size: 12px; opacity: .55; transition: transform .2s; } .mnav-sec.open > .mnav-toggle .mnav-chev { transform: rotate(180deg); } .mnav-sec { padding: 0 !important; } .mnav-panel { display: none; } .mnav-sec.open > .mnav-panel { display: block; } a.mnav-d1 { padding-left: 52px; min-height: 44px; font-size: 15px; } a.mnav-d2 { padding-left: 68px; min-height: 40px; font-size: 14px; opacity: .9; } .mnav-sec.mnav-d1 > .mnav-toggle { padding-left: 52px; min-height: 44px; font-size: 15px; } .mnav-sec.mnav-d1 > .mnav-panel { background: rgba(127,127,127,.06); } .mnav-logout { color: #b02a37 !important; } } /* A bar with no brand and no Log Out centres its links (nav.js adds tnav-center). */ @media (min-width: 992px) { .tnav-items.tnav-center { justify-content: center; } }