/** * SkyLearner header navigation skin * Version: 1.0.0 * * Scope: * - BuddyBoss primary desktop navigation only (#primary-navbar) * - BuddyBoss primary mobile navigation only (.bb-mobile-panel-inner .bb-primary-menu) * * Goals: * - Clean white floating dropdown panels * - Clear submenu hierarchy and right-opening nested menus * - No generic "page/file" placeholder icon when no menu icon is selected * - Consistent text alignment when a menu mixes icon and non-icon items * - Keyboard/focus-visible support and responsive mobile accordion styling */ :root { --sl-nav-ink: #17243f; --sl-nav-blue: #213368; --sl-nav-blue-strong: #163d74; --sl-nav-sky: #3198e6; --sl-nav-amber: #fdb913; --sl-nav-surface: #ffffff; --sl-nav-surface-soft: #f6f9fc; --sl-nav-surface-hover: #eef5fc; --sl-nav-border: #e1e9f1; --sl-nav-muted: #657181; --sl-nav-shadow: 0 12px 34px rgba(16, 37, 63, 0.13), 0 3px 10px rgba(16, 37, 63, 0.07); } /* ------------------------------------------------------------------------- * Desktop primary navigation * ---------------------------------------------------------------------- */ @media screen and (min-width: 1025px) { /* Give the top-level navigation the same rounded, deliberate rhythm as the newer SkyLearner UI without replacing BuddyBoss header structure. */ .site-header #primary-navbar .primary-menu > li { padding-left: 4px; padding-right: 4px; } .site-header #primary-navbar .primary-menu > li > a { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 48px; min-width: 0; margin-top: calc((var(--bb-header-height) - 48px) / 2); margin-bottom: calc((var(--bb-header-height) - 48px) / 2); padding: 0 14px; border: 0 !important; border-radius: 10px; background: transparent; font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } /* BuddyBoss uses a pseudo-element for the standard hover background. We use the anchor surface itself so all menu styles behave consistently. */ .site-header #primary-navbar .primary-menu > li > a::before { display: none !important; content: none !important; } .site-header #primary-navbar .primary-menu > li:not(.current-menu-item):not(.current-menu-parent):not(.current-menu-ancestor):not(.current_page_item):hover > a, .site-header #primary-navbar .primary-menu > li:not(.current-menu-item):not(.current-menu-parent):not(.current-menu-ancestor):not(.current_page_item):focus-within > a { background: rgba(255, 255, 255, 0.10); } /* Current/ancestor item: restrained SkyLearner amber, matching the approved header direction in the page mock-up. */ .site-header #primary-navbar .primary-menu > li.current-menu-item > a, .site-header #primary-navbar .primary-menu > li.current-menu-parent > a, .site-header #primary-navbar .primary-menu > li.current-menu-ancestor > a, .site-header #primary-navbar .primary-menu > li.current_page_item > a { background: var(--sl-nav-amber) !important; color: #132444 !important; box-shadow: 0 4px 12px rgba(253, 185, 19, 0.16); font-weight: 600; } .site-header #primary-navbar .primary-menu > li.current-menu-item > a > i, .site-header #primary-navbar .primary-menu > li.current-menu-parent > a > i, .site-header #primary-navbar .primary-menu > li.current-menu-ancestor > a > i, .site-header #primary-navbar .primary-menu > li.current_page_item > a > i { color: #132444 !important; } /* Keep top-level dropdown arrows neatly spaced. */ .menu-style-standard .site-header #primary-navbar .primary-menu > li.menu-item-has-children:not(.hideshow) { padding-right: 11px; } .menu-style-standard .site-header #primary-navbar .primary-menu > li.menu-item-has-children:not(.hideshow) > a { padding-right: 30px; } .menu-style-standard .site-header #primary-navbar .primary-menu > li.menu-item-has-children:not(.hideshow)::after { right: 12px; font-size: 18px; transition: color 150ms ease, transform 150ms ease; } .menu-style-standard .site-header #primary-navbar .primary-menu > li.current-menu-item.menu-item-has-children:not(.hideshow)::after, .menu-style-standard .site-header #primary-navbar .primary-menu > li.current-menu-parent.menu-item-has-children:not(.hideshow)::after, .menu-style-standard .site-header #primary-navbar .primary-menu > li.current-menu-ancestor.menu-item-has-children:not(.hideshow)::after, .menu-style-standard .site-header #primary-navbar .primary-menu > li.current_page_item.menu-item-has-children:not(.hideshow)::after { color: #132444 !important; } /* In BuddyBoss tab-bar mode, no-icon items are otherwise replaced with a generic page icon and their labels are made transparent. Never do that. */ .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.no-icon > a { color: var(--bb-header-links) !important; min-width: 0; } .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.no-icon > a::after { display: none !important; content: none !important; } .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.current-menu-item.no-icon > a, .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.current-menu-parent.no-icon > a, .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.current-menu-ancestor.no-icon > a, .menu-style-tab_bar .site-header #primary-navbar .primary-menu > li.current_page_item.no-icon > a { color: #132444 !important; } /* First-level floating panel. */ .site-header #primary-navbar .primary-menu > .menu-item > .ab-submenu { box-sizing: border-box; top: calc(100% - 7px) !important; left: 4px !important; right: auto !important; min-width: 270px !important; max-width: min(330px, calc(100vw - 32px)); padding: 8px !important; margin: 0 !important; border: 1px solid var(--sl-nav-border); border-radius: 15px !important; background: var(--sl-nav-surface) !important; box-shadow: var(--sl-nav-shadow) !important; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease; z-index: 10050; } .site-header #primary-navbar .primary-menu > .menu-item.sl-nav-root-flip > .ab-submenu { left: auto !important; right: 4px !important; } /* Remove BuddyBoss's old pointer triangle: rounded floating panels look cleaner and remain visually correct when a panel flips at the viewport. */ .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu::before { display: none !important; content: none !important; } .site-header #primary-navbar .primary-menu > .menu-item:hover > .ab-submenu, .site-header #primary-navbar .primary-menu > .menu-item:focus-within > .ab-submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* BuddyBoss tab-bar adds a large offset intended for its legacy card. */ .menu-style-tab_bar .site-header #primary-navbar .primary-menu > .menu-item > .ab-submenu { margin-top: 0 !important; left: 4px !important; } .menu-style-tab_bar .site-header #primary-navbar .primary-menu > .menu-item.sl-nav-root-flip > .ab-submenu { left: auto !important; right: 4px !important; } /* Dropdown list itself. Keep the wrapper uncluttered; each row becomes the visual target. */ .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu { box-sizing: border-box; width: 100%; min-width: 252px; max-width: none !important; max-height: min(70vh, 620px); margin: 0 !important; padding: 0 !important; background: transparent !important; scrollbar-width: thin; scrollbar-color: #c9d5e0 transparent; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu::-webkit-scrollbar { width: 7px; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c9d5e0; background-clip: padding-box; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .menu-item { box-sizing: border-box; position: relative !important; min-height: 0; margin: 0 !important; padding: 0; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .menu-item + .menu-item { margin-top: 2px !important; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .menu-item > a { box-sizing: border-box; display: flex !important; align-items: center; position: relative; width: 100% !important; min-height: 44px; margin: 0 !important; padding: 10px 13px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--sl-nav-ink) !important; font-size: 14px; font-weight: 500; line-height: 1.35; letter-spacing: -0.006em; white-space: normal; overflow: visible; text-overflow: clip; transition: background-color 130ms ease, color 130ms ease; } .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .menu-item:hover > a, .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .menu-item:focus-within > a, .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .current-menu-item > a, .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .current-menu-parent > a, .site-header #primary-navbar .primary-menu .menu-item > .ab-submenu > .bb-sub-menu > .current-menu-ancestor > a { background: var(--sl-nav-surface-hover) !important; color: var(--sl-nav-blue-strong) !important; } /* Real menu icons only. The exact BuddyBoss generic file icon is hidden in a later rule and does not count as a chosen icon. */ .site-header #primary-navbar .primary-menu .ab-submenu a > i._mi:not(.bs-submenu-toggle), .site-header #primary-navbar .primary-menu .ab-submenu a > i.bb-custom-icon:not(.bs-submenu-toggle), .site-header #primary-navbar .primary-menu .ab-submenu a > img._mi { flex: 0 0 22px; width: 22px; min-width: 22px; max-width: 22px; margin: 0 11px 0 0 !important; color: var(--sl-nav-blue) !important; font-size: 18px !important; line-height: 1; text-align: center; object-fit: contain; } /* When any row in one particular dropdown has a real icon, reserve that same icon column for the icon-less rows. This keeps labels aligned without inventing or displaying a placeholder icon. JS only adds these classes; navigation remains fully functional without JS. */ .site-header #primary-navbar .primary-menu .bb-sub-menu.sl-nav-menu-has-icons > .sl-nav-no-icon > a::before { content: ""; display: block; flex: 0 0 22px; width: 22px; min-width: 22px; height: 1px; margin-right: 11px; } /* Parent rows are unmistakably parents. Use BuddyBoss's existing chevron, never a generated icon asset. */ .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children > a { padding-right: 40px !important; font-weight: 600; } .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children > a::after { content: "\e826" !important; display: block !important; position: absolute !important; top: 50% !important; right: 12px !important; left: auto !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; color: #637386 !important; font-family: bb-icons !important; font-size: 18px !important; font-style: normal !important; font-weight: normal !important; line-height: 1 !important; transform: translateY(-50%) !important; transition: color 130ms ease, transform 130ms ease; } .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children:hover > a::after, .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children:focus-within > a::after { color: var(--sl-nav-blue-strong) !important; transform: translate(2px, -50%) !important; } /* Nested menus: open to the RIGHT by default. Keep BuddyBoss's nested LI statically positioned so the fly-out is positioned against the outer dropdown wrapper rather than clipped by the scrollable list. JS supplies the row's vertical offset as a CSS custom property. */ .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children { position: static !important; } .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children > .ab-submenu { box-sizing: border-box; top: var(--sl-nav-submenu-top, -8px) !important; left: calc(100% + 10px) !important; right: auto !important; width: 270px; min-width: 270px !important; max-width: min(320px, calc(100vw - 32px)); padding: 8px !important; margin: 0 !important; border: 1px solid var(--sl-nav-border); border-radius: 15px !important; background: var(--sl-nav-surface) !important; box-shadow: var(--sl-nav-shadow) !important; opacity: 0; visibility: hidden; transform: translateY(6px) !important; transition: opacity 140ms ease, visibility 140ms ease, transform 140ms ease; z-index: 10060; } .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children:hover > .ab-submenu, .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children:focus-within > .ab-submenu { opacity: 1; visibility: visible; transform: translateY(0) !important; } /* Edge-aware JS adds this only when opening to the right would cross the viewport. It is a progressive enhancement, not a dependency. */ .site-header #primary-navbar .primary-menu .ab-submenu .bb-sub-menu > .menu-item.menu-item-has-children.sl-nav-flip > .ab-submenu { left: auto !important; right: calc(100% + 10px) !important; } /* A generic placeholder file/page icon is never shown. If a real icon was selected in the menu editor it carries a different BuddyBoss icon class and remains visible. */ .site-header #primary-navbar i.bb-icon-file.bb-custom-icon, .site-header #primary-navbar i.bb-icon-l.bb-icon-file.bb-custom-icon, .site-header #primary-navbar i.bb-icon-f.bb-icon-file.bb-custom-icon { display: none !important; } /* Keyboard users get a clear focus state without changing pointer hover. */ .site-header #primary-navbar .primary-menu a:focus-visible { outline: 2px solid var(--sl-nav-sky) !important; outline-offset: 2px; } /* BuddyBoss's overflow / ellipsis menu should not fall back to an old, square legacy panel on narrower desktop widths. */ .site-header #primary-navbar #navbar-collapse > .sub-menu { border: 1px solid var(--sl-nav-border); border-radius: 15px; background: var(--sl-nav-surface); box-shadow: var(--sl-nav-shadow); padding: 8px; } .site-header #primary-navbar #navbar-collapse > .sub-menu::before { display: none !important; content: none !important; } .site-header #primary-navbar #navbar-collapse .sub-menu-inner { width: 260px !important; max-height: min(70vh, 620px); } .site-header #primary-navbar #navbar-collapse .sub-menu-inner > .menu-item > a { min-height: 44px; margin: 0; padding: 10px 13px !important; border-radius: 9px; color: var(--sl-nav-ink); font-size: 14px; font-weight: 500; line-height: 1.35; } .site-header #primary-navbar #navbar-collapse .sub-menu-inner > .menu-item > a:hover, .site-header #primary-navbar #navbar-collapse .sub-menu-inner > .menu-item > a:focus { background: var(--sl-nav-surface-hover); color: var(--sl-nav-blue-strong); } } /* ------------------------------------------------------------------------- * Mobile primary navigation * * BuddyBoss renders a dedicated left-side panel at <= 799px. Keep its native * menu/walker/accordion logic, but give the panel a deliberate SkyLearner UI: * calm light surface, clear hierarchy, strong current state and compact cards. * ---------------------------------------------------------------------- */ @media screen and (max-width: 799px) { .bb-mobile-panel-wrapper.light, .bb-mobile-panel-wrapper.light .bb-mobile-panel-inner { background: #f5f8fb !important; } .bb-mobile-panel-wrapper { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c8d4df transparent; } .bb-mobile-panel-wrapper::-webkit-scrollbar { width: 7px; } .bb-mobile-panel-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c8d4df; background-clip: padding-box; } /* Profile/header block: keep the avatar and user identity, remove the redundant "My Account" shortcut and make the header readable on navy. */ .bb-mobile-panel-wrapper .bb-mobile-panel-header { min-height: 92px; margin: 0 -20px 14px !important; padding: 15px 20px !important; border: 0; background: linear-gradient(135deg, #182957 0%, #213368 100%) !important; box-shadow: 0 8px 24px rgba(14, 31, 61, 0.14) !important; } .bb-mobile-panel-header .user-wrap { min-width: 0; } .bb-mobile-panel-header .user-wrap > a { flex: 0 0 auto; } .bb-mobile-panel-header .avatar { width: 54px; height: 54px; max-width: 54px; margin-right: 12px; border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: 0 3px 12px rgba(8, 22, 48, 0.18); } .bb-mobile-panel-header .user-name { display: block; max-width: min(62vw, 280px); overflow: hidden; color: #ffffff !important; font-size: 15px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .bb-mobile-panel-header .my-account-link { display: none !important; } /* Logged-out drawer uses the BuddyBoss mobile logo, which may be the dark brand asset. Keep that header light rather than forcing it onto navy. */ body:not(.logged-in) .bb-mobile-panel-wrapper .bb-mobile-panel-header { background: #ffffff !important; border-bottom: 1px solid #e3ebf3; box-shadow: 0 6px 18px rgba(16, 37, 63, 0.08) !important; } .bb-mobile-panel-header .bb-close-panel { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); transition: background-color 130ms ease; } .bb-mobile-panel-header .bb-close-panel:hover, .bb-mobile-panel-header .bb-close-panel:focus-visible { background: rgba(255, 255, 255, 0.16); } .bb-mobile-panel-header .bb-close-panel i { color: rgba(255, 255, 255, 0.9) !important; font-size: 25px; } body:not(.logged-in) .bb-mobile-panel-header .bb-close-panel { background: #f1f5f9; } body:not(.logged-in) .bb-mobile-panel-header .bb-close-panel:hover, body:not(.logged-in) .bb-mobile-panel-header .bb-close-panel:focus-visible { background: #e6eef6; } body:not(.logged-in) .bb-mobile-panel-header .bb-close-panel i { color: #213368 !important; } .bb-mobile-panel-inner { padding-bottom: max(26px, env(safe-area-inset-bottom)); } .bb-mobile-panel-inner .main-navigation { align-items: flex-start; } .bb-mobile-panel-inner .bb-primary-menu { width: 100%; margin: 0; padding: 0; } .bb-mobile-panel-inner .bb-primary-menu > li { min-height: 0 !important; margin: 0 0 4px !important; border: 0 !important; } .bb-mobile-panel-inner .bb-primary-menu > li:last-child { margin-bottom: 0 !important; } /* Menu section labels stay quiet and compact. If an old section uses only punctuation as a spacer it no longer creates a giant visual row. */ .bb-mobile-panel-inner .bb-primary-menu > li.bb-menu-section { min-height: 28px !important; margin: 8px 0 2px !important; } .bb-mobile-panel-inner .bb-primary-menu > li.bb-menu-section > a { min-height: 28px; padding: 5px 10px !important; border: 0 !important; background: transparent !important; color: #7c8897 !important; font-size: 10px !important; font-weight: 700; letter-spacing: 0.10em; } .bb-mobile-panel-inner .bb-primary-menu li > a { box-sizing: border-box; display: flex; align-items: center; position: relative; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 11px; background: transparent !important; color: var(--sl-nav-ink) !important; font-size: 15px !important; font-weight: 500; line-height: 1.35 !important; letter-spacing: -0.006em; text-decoration: none !important; transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease; } .bb-mobile-panel-inner .bb-primary-menu li > a > .link-text, .bb-mobile-panel-inner .bb-primary-menu li > a > span:not(.count) { min-width: 0; margin-right: auto; } .bb-mobile-panel-inner .bb-primary-menu > li:not(.bb-menu-section) > a:hover, .bb-mobile-panel-inner .bb-primary-menu > li:not(.bb-menu-section) > a:focus-visible { border-color: #e3ebf3 !important; background: #ffffff !important; color: var(--sl-nav-blue-strong) !important; box-shadow: 0 2px 8px rgba(16, 37, 63, 0.04); } /* Open parents are visibly parents, not mistaken for the selected page. */ .bb-mobile-panel-inner .bb-primary-menu li.bb-open-parent > a, .bb-mobile-panel-inner .bb-primary-menu li.current-menu-parent > a, .bb-mobile-panel-inner .bb-primary-menu li.current-menu-ancestor > a { border-color: #dce8f4 !important; background: #edf5fc !important; color: #173f72 !important; font-weight: 650; } /* The actual selected destination is deliberately unmistakable. */ .bb-template-v2 .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a, .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a { border-color: #213368 !important; background: #213368 !important; color: #ffffff !important; font-weight: 650; box-shadow: 0 5px 14px rgba(33, 51, 104, 0.14); } .bb-template-v2 .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > i, .bb-template-v2 .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > span, .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > i, .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > span { color: #ffffff !important; } .bb-mobile-panel-inner .bb-primary-menu li > a:focus-visible { outline: 2px solid var(--sl-nav-sky) !important; outline-offset: 2px; } /* Real chosen icons. The walker's bare bb-icon-file fallback is removed in PHP; this CSS fallback also suppresses it if markup is cached upstream. */ .bb-mobile-panel-inner .bb-primary-menu li > a > i._mi:not(.bs-submenu-toggle), .bb-mobile-panel-inner .bb-primary-menu li > a > i.bb-custom-icon:not(.bs-submenu-toggle), .bb-mobile-panel-inner .bb-primary-menu li > a > img._mi, .bb-mobile-panel-inner .bb-primary-menu li > a > svg._mi { flex: 0 0 22px; width: 22px; min-width: 22px; max-width: 22px; margin: 0 11px 0 0 !important; color: var(--sl-nav-blue) !important; font-size: 18px !important; line-height: 1; text-align: center; object-fit: contain; } .bb-mobile-panel-inner .bb-primary-menu i.bb-icon-file:not(._mi):not(.bb-custom-icon) { display: none !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; } .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > i._mi:not(.bs-submenu-toggle), .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > i.bb-custom-icon:not(.bs-submenu-toggle) { color: #ffffff !important; } /* If siblings at this level have real icons, reserve the same silent icon column for icon-less rows. Alignment remains perfect without a glyph. */ .bb-mobile-panel-inner .bb-primary-menu .sl-nav-menu-has-icons > .sl-nav-no-icon > a::before, .bb-mobile-panel-inner .bb-primary-menu.sl-nav-menu-has-icons > .sl-nav-no-icon > a::before { content: ""; display: block; flex: 0 0 22px; width: 22px; min-width: 22px; height: 1px; margin-right: 11px; } /* Parent caret = small dedicated control, visually separate from the title. */ .bb-mobile-panel-inner .bb-primary-menu .menu-item-has-children > a { padding-right: 52px !important; } .bb-mobile-panel-inner .bb-primary-menu li > a > .bs-submenu-toggle { display: flex !important; align-items: center; justify-content: center; position: absolute !important; top: 50% !important; right: 6px !important; width: 34px; height: 34px; margin: 0 !important; border-radius: 9px; background: #f1f5f9; color: #66788b !important; font-size: 18px !important; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: background-color 130ms ease, color 130ms ease, transform 170ms ease; } .bb-mobile-panel-inner .bb-primary-menu li > a > .bs-submenu-toggle:hover, .bb-mobile-panel-inner .bb-primary-menu li > a > .bs-submenu-toggle:focus { background: #e1edf8; color: #173f72 !important; } .bb-mobile-panel-inner .bb-primary-menu li > a > .bs-submenu-toggle.bs-submenu-open { background: #dbeaf8; color: #173f72 !important; transform: translateY(-50%) rotate(-180deg); } .bb-mobile-panel-inner .bb-primary-menu li.current-menu-item > a > .bs-submenu-toggle { background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } /* First child level = a contained card under its parent. */ .bb-mobile-panel-inner .bb-primary-menu .sub-menu, .bb-mobile-panel-inner .bb-primary-menu .sub-menu.bb-open { box-sizing: border-box; width: calc(100% - 12px); margin: 4px 0 10px 12px !important; padding: 6px !important; border: 1px solid #e1eaf2; border-left: 2px solid #c9dff2; border-radius: 12px; background: #ffffff !important; box-shadow: 0 3px 12px rgba(16, 37, 63, 0.035) !important; list-style: none; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li { min-height: 0 !important; margin: 0 0 2px !important; padding: 0; border: 0 !important; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li:last-child { margin-bottom: 0 !important; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li > a { min-height: 44px; padding: 9px 10px !important; border-radius: 9px; font-size: 14px !important; font-weight: 450; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li > a:hover, .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li > a:focus-visible { border-color: transparent !important; background: #f3f8fd !important; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu > li.menu-item-has-children > a { font-weight: 650; } /* Further nesting: progressively lighter inset panels, never huge blocks. */ .bb-mobile-panel-inner .bb-primary-menu .sub-menu .sub-menu, .bb-mobile-panel-inner .bb-primary-menu .sub-menu .sub-menu.bb-open { width: calc(100% - 10px); margin: 4px 0 7px 10px !important; padding: 5px !important; border-color: #dbe7f2; border-left-color: #9fc9eb; border-radius: 10px; background: #f6f9fc !important; box-shadow: none !important; } .bb-mobile-panel-inner .bb-primary-menu .sub-menu .sub-menu > li > a { min-height: 42px; padding: 8px 9px !important; font-size: 13.5px !important; } /* Counts stay compact and legible in every state. */ .bb-mobile-panel-inner .bb-primary-menu .count { flex: 0 0 auto; min-width: 24px; margin: 0 38px 0 8px !important; padding: 2px 7px; border: 1px solid #d8e2ec !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #40546b !important; font-size: 11px; font-weight: 700; line-height: 1.45; text-align: center; } .bb-mobile-panel-inner .bb-primary-menu .current-menu-item > a > .count { border-color: rgba(255, 255, 255, 0.28) !important; background: rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; } } /* Respect reduced-motion preferences throughout the navigation polish. */ @media (prefers-reduced-motion: reduce) { .site-header #primary-navbar .primary-menu *, .bb-mobile-panel-inner .bb-primary-menu * { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }