Bricks Builder nav Styled

bricks-nav-styled-tpl.json

{"content":[{"id":"curpcj","name":"section","parent":0,"children":["bqaspm","zmvovg"],"settings":{"_cssGlobalClasses":["at_colorset","at_colorset--neutral-d-5"],"_padding":{"top":"var(--at-gutter)","bottom":"var(--at-gutter)","right":"var(--at-gutter)","left":"var(--at-gutter)"}}},{"id":"bqaspm","name":"code","parent":"curpcj","children":[],"settings":{"javascriptCode":"/*##################\n This script does two things\n 1. Adds a back button functionality\n 2. Adds a logo to the  mobile menu based on data attributes\n*/\ndocument.addEventListener('DOMContentLoaded', () => {\n  const roots = document.querySelectorAll('.ab-brick-nav');\n\n  const initRoot = (root) => {\n    if (!root) return;\n\n    const ready = () => {\n      const wrapper = root.querySelector('.bricks-mobile-menu-wrapper');\n      const track   = root.querySelector('.bricks-mobile-menu');\n      if (!wrapper || !track) return false;\n\n      // --- Mobile Logo from data-logo-src on the WRAPPER ---\n      const logoSrc = wrapper.dataset.logoSrc;\n      const logoAlt = wrapper.dataset.logoAlt || 'Mobile Logo';\n      if (logoSrc) {\n        let figure = wrapper.querySelector(':scope > .ab-brick-nav__mobile-logo');\n        if (!figure) {\n          figure = document.createElement('figure');\n          figure.className = 'ab-brick-nav__mobile-logo';\n\n          const img = document.createElement('img');\n          img.className = 'ab-brick-nav__mobile-logo__img';\n          img.alt = logoAlt;\n          img.decoding = 'async';\n          img.loading = 'eager';\n          img.src = logoSrc;\n\n          figure.appendChild(img);\n          wrapper.insertBefore(figure, track);\n        } else {\n          const img = figure.querySelector('img') || figure.appendChild(document.createElement('img'));\n          img.classList.add('ab-brick-nav__mobile-logo__img');\n          img.alt = logoAlt;\n          if (img.src !== logoSrc) img.src = logoSrc;\n        }\n      }\n\n      // --- Back button (deduped binding) ---\n      let backBtn = wrapper.querySelector('.ab-nav-back');\n      if (!backBtn) {\n        backBtn = document.createElement('button');\n        backBtn.className = 'ab-nav-back';\n        backBtn.type = 'button';\n        backBtn.innerHTML = `\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n            <path d=\"M7.5 2.5L3.5 6l4 3.5\" fill=\"none\" stroke=\"currentColor\"\n                  stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          <span class=\"ab-nav-back__label\">Back</span>`;\n        wrapper.insertBefore(backBtn, track);\n      }\n\n      const toggles = () => track.querySelectorAll('.brx-submenu-toggle > button');\n      const openToggles = () => [...toggles()].filter(b => b.getAttribute('aria-expanded') === 'true');\n      const deepestOpen = () => {\n        const all = openToggles();\n        return all.length ? all[all.length - 1] : null;\n      };\n      const immediateParentLi = (btn) => {\n        const li = btn.closest('.menu-item-has-children');\n        const parentUl = li?.parentElement;\n        return parentUl?.classList.contains('sub-menu')\n          ? parentUl.closest('.menu-item-has-children')\n          : null;\n      };\n      const updateBack = () => {\n        const d = deepestOpen();\n        if (!d) { backBtn.style.display = 'none'; return; }\n        backBtn.style.display = 'flex';\n        const txt = d.closest('.brx-submenu-toggle')?.querySelector('a')?.textContent?.trim() ||\n                    d.getAttribute('aria-label') || 'Back';\n        backBtn.querySelector('.ab-nav-back__label').textContent = `Back to ${txt}`;\n      };\n\n      if (!backBtn.dataset.bound) {\n        backBtn.addEventListener('click', () => {\n          const current = deepestOpen();\n          if (!current) return;\n          const currentLi = current.closest('.menu-item-has-children');\n          const parentLi  = immediateParentLi(current);\n\n          current.setAttribute('aria-expanded', 'false');\n          currentLi?.classList.remove('open','active','current-menu-item');\n\n          requestAnimationFrame(() => {\n            if (parentLi) {\n              const parentBtn = parentLi.querySelector(':scope > .brx-submenu-toggle > button');\n              if (parentBtn) parentBtn.setAttribute('aria-expanded','true');\n              parentLi.classList.add('open','active');\n            }\n            updateBack();\n          });\n        });\n        backBtn.dataset.bound = '1';\n      }\n\n      const observer = new MutationObserver(updateBack);\n      toggles().forEach(b =>\n        observer.observe(b, { attributes: true, attributeFilter: ['aria-expanded'] })\n      );\n      updateBack();\n\n      // Watch for changes to data-logo-src on the WRAPPER\n      const attrMo = new MutationObserver((muts) => {\n        for (const m of muts) {\n          if (m.type === 'attributes' && (m.attributeName === 'data-logo-src' || m.attributeName === 'data-logo-alt')) {\n            const newSrc = wrapper.dataset.logoSrc;\n            const newAlt = wrapper.dataset.logoAlt || 'Mobile Logo';\n            const fig = wrapper.querySelector(':scope > .ab-brick-nav__mobile-logo');\n            const img = fig?.querySelector('img');\n            if (img) {\n              if (newSrc && img.src !== newSrc) img.src = newSrc;\n              if (img.alt !== newAlt) img.alt = newAlt;\n            }\n          }\n        }\n      });\n      attrMo.observe(wrapper, { attributes: true, attributeFilter: ['data-logo-src','data-logo-alt'] });\n\n      return true;\n    };\n\n    if (!ready()) {\n      const mo = new MutationObserver(() => { if (ready()) mo.disconnect(); });\n      mo.observe(root, { childList: true, subtree: true });\n    }\n  };\n\n  roots.forEach(initRoot);\n});\n\n","noRoot":true,"_display":"none","executeCode":true},"label":"Mobile Nav Back"},{"id":"zmvovg","name":"container","parent":"curpcj","children":["lrbjui","hkjdnd","uijhow"],"settings":{"_direction":"row","_justifyContent":"space-between","_alignItems":"center"}},{"id":"lrbjui","name":"svg","parent":"zmvovg","children":[],"settings":{"source":"code","code":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 100 40\"><path d=\"M4.77 4.235C5.03 3.001 6.26 2 7.513 2h6.812L8.66 28.823H1.848c-1.254 0-2.06-1-1.799-2.235L4.77 4.235ZM27.477 4.235C27.738 3.001 28.967 2 30.22 2h6.812l-5.665 26.823h-6.812c-1.254 0-2.06-1-1.799-2.235l4.721-22.353ZM72.892 4.235C73.152 3.001 74.38 2 75.635 2h6.812l-5.665 26.823h-6.813c-1.254 0-2.059-1-1.798-2.235l4.72-22.353ZM39.303 2h6.812c1.254 0 2.06 1 1.799 2.235l-4.721 22.353c-.26 1.235-1.489 2.235-2.743 2.235h-6.812L39.303 2ZM84.718 2h6.812c1.254 0 2.06 1 1.799 2.235l-4.722 22.353c-.26 1.235-1.488 2.235-2.742 2.235h-6.813L84.718 2ZM50.185 4.235C50.445 3.001 51.673 2 52.927 2h6.813l-5.666 26.823h-6.812c-1.254 0-2.06-1-1.798-2.235l4.72-22.353ZM62.01 2h6.813c1.254 0 2.059 1 1.798 2.235l-7.081 33.53C63.278 38.999 62.05 40 60.796 40h-6.813L62.01 2ZM12.819 19.882h9.083l-1.416 6.706c-.261 1.235-1.49 2.235-2.743 2.235H10.93l1.888-8.94ZM44.52 31.059h9.082L51.714 40h-6.812c-1.255 0-2.06-1-1.799-2.235l1.416-6.706ZM69.174 33.138l-1.15 5.446c-.05.234-.128.298-.366.298h-.523c-.238 0-.29-.064-.24-.298l1.15-5.446c.05-.233.128-.298.366-.298h.523c.238 0 .29.065.24.298ZM70.686 36.812h-.107c-.114 0-.154.032-.177.145l-.344 1.627c-.05.234-.129.298-.366.298h-.524c-.237 0-.289-.064-.24-.298l1.15-5.446c.05-.233.13-.298.367-.298h1.08c1.244 0 1.715.443 1.485 1.53l-.192.911c-.23 1.088-.888 1.53-2.132 1.53Zm.316-2.699-.3 1.426c-.025.113.001.145.116.145h.172c.4 0 .615-.161.702-.572l.12-.572c.087-.41-.059-.572-.46-.572h-.172c-.114 0-.154.032-.178.145ZM74.74 34.991l.85.935c.446.483.508.773.394 1.313l-.03.145c-.215 1.015-.727 1.579-1.914 1.579-1.186 0-1.479-.475-1.205-1.773l.034-.16c.05-.234.129-.299.366-.299h.556c.238 0 .29.065.24.298l-.075.355c-.068.322.036.451.322.451.287 0 .443-.12.505-.41l.032-.154c.048-.226.022-.338-.224-.604l-.8-.862c-.448-.475-.505-.75-.391-1.29l.037-.176c.215-1.015.727-1.58 1.913-1.58 1.187 0 1.48.476 1.206 1.773l-.034.161c-.05.234-.129.298-.366.298h-.557c-.237 0-.289-.064-.24-.298l.075-.354c.068-.323-.035-.451-.322-.451-.286 0-.443.12-.504.41l-.029.137c-.05.234-.024.347.161.556ZM79.532 33.138c.05-.233.128-.298.366-.298h.523c.238 0 .29.065.24.298l-.856 4.053c-.274 1.297-.767 1.772-1.954 1.772-1.186 0-1.479-.475-1.205-1.773l.856-4.052c.05-.233.129-.298.366-.298h.524c.237 0 .289.065.24.298l-.897 4.246c-.068.322.044.451.355.451.302 0 .477-.129.545-.451l.897-4.246ZM82.938 36.417c.003.065.024.08.065.08.04 0 .069-.015.099-.08l1.414-3.367c.069-.17.151-.21.356-.21h.794c.237 0 .289.065.24.298l-1.15 5.446c-.05.234-.13.298-.367.298h-.376c-.237 0-.29-.064-.24-.298l.552-2.61c.015-.072.002-.089-.047-.089-.033 0-.07.017-.09.073l-1.142 2.659c-.082.193-.187.265-.424.265H82.4c-.246 0-.32-.072-.32-.265l-.028-2.66c-.005-.056-.018-.072-.059-.072-.049 0-.069.017-.084.089l-.551 2.61c-.05.234-.128.298-.366.298h-.376c-.238 0-.29-.064-.24-.298l1.15-5.446c.05-.233.129-.298.366-.298h.68c.286 0 .378.065.376.347l-.011 3.23ZM100 2c0 1.105-.89 2-1.987 2a1.993 1.993 0 0 1-1.987-2c0-1.105.89-2 1.987-2S100 .895 100 2Z\"></path></svg>","signature":"170e1bd539aba40778b1c9176d5f7dc0","user_id":1,"time":1760395799,"stroke":{"id":"at_primary","name":"primary","raw":"var(--at-primary)","rawValue":{"light":"hsla(182, 68%, 49%, 1)","dark":"hsla(182, 68%, 49%, 1)"},"complementaryChildren":[],"shadeChildren":["at_primary-l-1","at_primary-l-2","at_primary-l-3","at_primary-l-4","at_primary-l-5","at_primary-l-6","at_primary-d-1","at_primary-d-2","at_primary-d-3","at_primary-d-4","at_primary-d-5","at_primary-d-6","at_primary-t-1","at_primary-t-2","at_primary-t-3","at_primary-t-4","at_primary-t-5","at_primary-t-6"],"isExpanded":false,"at_framework":true,"at_version":"1.0.0"},"_width":"150px"}},{"id":"hkjdnd","name":"nav-menu","parent":"zmvovg","children":[],"settings":{"menu":"5","_display":"none"},"label":"Std Nav Menu"},{"id":"uijhow","name":"nav-menu","parent":"zmvovg","children":[],"settings":{"menu":"5","_cssGlobalClasses":["wspzfe","rtqgkx"],"mobileMenu":"always","_attributes":[{"id":"hqrlzd","name":"data-logo-src","value":"https://bricks-playground.local/wp-content/uploads/2025/10/logoipsum-317.webp"},{"id":"dcvlse","name":"data-logo-alt","value":"My alt name"}],"mobileMenuIcon":{"library":"svg","svg":{"id":692,"filename":"arrow-right-double-twotone-rounded.svg","url":"https://bricks-playground.local/wp-content/uploads/2025/10/arrow-right-double-twotone-rounded.svg"}}}}],"source":"bricksCopiedElements","sourceUrl":"https://bricks-playground.local","version":"2.1.3","globalClasses":[{"id":"at_colorset","name":"at-colorset","settings":{"_cssCustom":"/*\nCOLOR SETS\n*/\n\n/* Do not use :where on this rule or it will get overridden by .at-section--alt-odd and .at-section--alt-even */\n[class*=colorset--] {\n  color: var(--text-color);\n  background: var(--background);\n}\n\n[class*=colorset--] [class*=accent]{\n  color: var(--accent-text-color);\n}\n\n/* wherever possible, weaken selectors with :where */\n:where([class*=colorset--] h1, [class*=colorset--] h2, [class*=colorset--] h3, [class*=colorset--] h4) {\n  color: var(--heading-color);\n}\n\n:where([class*=colorset--]) :is(.brxe-text-link, .brxe-text a, .brxe-text-basic a) {\n  color: var(--link-color, var(--at-link-color));\n}\n\n:where([class*=colorset--]) :is(.brxe-text-link, .brxe-text a, .brxe-text-basic a):is(:hover, :focus-visible) {\n  color: var(--link-color--hover, var(--at-link-color--hover));\n}\n\n:where([class*=colorset--]) .brxe-text-link:active {\n  color: var(--link-color--active, var(--at-link-color--active));\n}\n\n/* !IMPORTANT \nAny class that contains the follwing wrapper class names get targeted \n*/\n:where([class*=colorset--] [class*=header-wrapper]){\n  color: var(--header-wrapper-color);\n  background: var(--header-wrapper-background);\n}\n:where([class*=colorset--] [class*=body-wrapper]){\n  color: var(--body-wrapper-color);\n  background: var(--body-wrapper-background);\n}\n:where([class*=colorset--] [class*=footer-wrapper]){\n  color: var(--footer-wrapper-color);\n  background: var(--footer-wrapper-background);\n}\n:where([class*=colorset--] [class*=media-wrapper]){\n  color: var(--media-wrapper-color);\n  background: var(--media-wrapper-background);\n}","at_framework":true,"at_version":"1.0.0"},"category":"at_colorset","_categoryData":{"id":"at_colorset","name":"Color Set"}},{"id":"at_colorset--neutral-d-5","name":"at-colorset--neutral-d-5","settings":{"_cssCustom":".at-colorset--neutral-d-5 {\n  --text-color: var(--at-neutral-l-5);\n  --background: var(--at-neutral-d-5);\n  --heading-color: var(--at-neutral-l-6);\n  --accent-text-color: var(--at-secondary);\n  \n  --link-color: var(--at-primary);\n  --link-color--hover: var(--at-primary-l-6);\n  --link-color--active: var(--at-primary-l-6);\n  \n    --header-wrapper-color: var(--at-neutral-l-6);\n  --header-wrapper-background: var(--at-white-t-5);\n\n  --body-wrapper-color: var(--at-neutral-l-5);\n  --body-wrapper-background: var(--at-white-t-5);\n\n  --footer-wrapper-color: var(--at-neutral-l-6);\n  --footer-wrapper-background: var(--at-white-t-5);\n\n  --media-wrapper-color: var(--at-neutral-l-6);\n  --media-wrapper-background: var(--at-white-t-5);\n}","at_framework":true,"at_version":"1.0.0"},"category":"at_colorset","_categoryData":{"id":"at_colorset","name":"Color Set"}},{"id":"wspzfe","name":"ab-brick-nav","settings":{"mobileMenuPadding":{"left":"var(--at-space--s)","right":"var(--at-space--s)"},"mobileSubMenuPadding":{"right":"var(--at-space--s)","left":"var(--at-space--s)"},"mobileMenuToggleWidth":"var(--at-text--l)","mobileMenuToggleColor":{"raw":"var(--at-neutral-l-5)"},"_cssCustom":"/* ============================================\n   AB Brick Nav — Sliding Mobile Menu (up to 6 levels)\n   Includes Back button + consistent line-height\n\n   Apply to the standard Bricks Nav Element, not the Nav (Nested)\n\n   Consider this class as the functional styling.\n\n   Style the look & feel using the Bricks UI or\n   add the class ab-bricks-nav-style to style with CSS\n   ============================================ */\n\n.ab-brick-nav {\n  /* Transitions */\n  --_ab-nav-transition: var(--ab-nav-transition, transform var(--at-duration--fast) ease-out);\n\n  /* Bricks defines different line-heights per level; unify for consistency */\n  --_ab-nav-item-line-height: var(--ab-nav-item-line-height, 2.5);\n\n  /* current depth (0–6) */\n  --_ab-nav-level: 0;\n  \n  /* Logo \n  Set the image SRC and ALT on the Nav Element attributes\n  data-logo-src, data-logo-alt \n  Note: the logo will only display if data-logo-src is set \n  */\n  --_ab-nav-logo-padding: var(--at-space--s);\n  --_ab-nav-logo-height: var(--at-text--l);\n  --_ab-nav-logo-background: linear-gradient(to bottom, var(--at-neutral-d-6), var(--at-neutral-d-4));\n  \n  /* Back button */\n  --_ab-nav-back-gap: var(--at-space--2xs);\n  --_ab-nav-back-padding: var(--at-space--s);\n  --_ab-nav-back-background: none;\n  --_ab-nav-back-border: 0;\n  --_ab-nav-back-color: var(--at-primary-l-5);\n  --_ab-nav-back-font-size: var(--at-text--xs);\n  --_ab-nav-back-cursor: pointer;\n  --_ab-nav-back-line-height: 1;\n\n}\n\n/*########## DO NOT CHANGE FROM HERE DOWN ##########*/\n\n/* Wrapper: clips horizontal overflow, keeps Back visible */\n.ab-brick-nav .bricks-mobile-menu-wrapper {\n  overflow-x: hidden;\n}\n\n/* Sliding track */\n.ab-brick-nav .bricks-mobile-menu {\n  position: relative;\n  width: 100%;\n  transform: translateX(calc(-100% * clamp(0, var(--_ab-nav-level), 6)));\n  transition: var(--_ab-nav-transition);\n  will-change: transform;\n  overflow: visible; /* allow next pane to slide in */\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Normalize line-height for all links */\n.ab-brick-nav .bricks-mobile-menu a {\n  line-height: var(--_ab-nav-item-line-height);\n}\n\n/* Sub-menus as full-width pages */\n.ab-brick-nav .bricks-mobile-menu .sub-menu {\n  position: absolute;\n  top: 0;\n  left: 100%;   /* every submenu sits one width to the right */\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n/* Ensure expanded submenus render (Bricks toggles aria-expanded) */\n.ab-brick-nav .brx-submenu-toggle > button[aria-expanded=\"true\"] + .sub-menu,\n.ab-brick-nav .menu-item-has-children.open > .sub-menu,\n.ab-brick-nav .menu-item-has-children.active > .sub-menu {\n  display: block !important;\n  height: auto !important;\n  max-height: none !important;\n  overflow: visible !important;\n  visibility: visible !important;\n  pointer-events: auto !important;\n}\n\n/* Depth detection — deepest open wins (ordered 6 → 1) */\n\n/* Level 6 */\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .sub-menu .menu-item-has-children.active) {\n  --_ab-nav-level: 6;\n}\n\n/* Level 5 */\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .sub-menu .menu-item-has-children.active) {\n  --_ab-nav-level: 5;\n}\n\n/* Level 4 */\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .sub-menu .menu-item-has-children.active) {\n  --_ab-nav-level: 4;\n}\n\n/* Level 3 */\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .sub-menu .menu-item-has-children.active) {\n  --_ab-nav-level: 3;\n}\n\n/* Level 2 */\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.sub-menu .menu-item-has-children.active) {\n  --_ab-nav-level: 2;\n}\n\n/* Level 1 */\n.ab-brick-nav .bricks-mobile-menu:has(.brx-submenu-toggle > button[aria-expanded=\"true\"]),\n.ab-brick-nav .bricks-mobile-menu:has(.menu-item-has-children.open),\n.ab-brick-nav .bricks-mobile-menu:has(.menu-item-has-children.active) {\n  --_ab-nav-level: 1;\n}\n\n/* Reduced motion (disable transitions) */\n@media (prefers-reduced-motion: reduce) {\n  .ab-brick-nav .bricks-mobile-menu {\n    transition: none !important;\n  }\n}\n\n/* ============================================\n   Back Button Styling (sticky, top of wrapper)\n   ============================================ */\n\n.ab-brick-nav .ab-nav-back {\n  display: none;                /* shown when depth > 0 using JS*/\n  align-items: center;\n  gap: var(--_ab-nav-back-gap);\n  width: 100%;\n  padding: var(--_ab-nav-back-padding);\n  background: var(--_ab-nav-back-background);\n  border: var(--_ab-nav-back-border);\n  color: var(--_ab-nav-back-color);\n  font-size: var(--_ab-nav-back-font-size);\n  cursor: var(--_ab-nav-back-cursor);\n  line-height: var(--_ab-nav-back-line-height);\n  position: sticky;             /* stays visible when menu scrolls */\n  top: 0;\n  z-index: 10;\n}\n\n.ab-brick-nav .ab-nav-back svg {\n  width: 1em;\n  height: 1em;\n  fill: var(--_ab-nav-back-color);\n}\n\n\n/*** MOBILE LOGO **/\n/* Figure container (prepended before the track with JavaScript) */\n.ab-brick-nav .bricks-mobile-menu-wrapper > .ab-brick-nav__mobile-logo {\n  padding: var(--_ab-nav-logo-padding);\n  background: var(--_ab-nav-logo-background);\n  margin: 0;\n  \n  img{\n    height: var(--_ab-nav-logo-height);\n  }\n}","mobileMenuWidth":"50%","mobileMenuWidth:mobile_portrait":"85%"},"modified":1760398448,"user_id":1},{"id":"rtqgkx","name":"ab-bricks-nav-style","settings":{"_cssCustom":".ab-bricks-nav-style {\n  --_nav-item-border-width: 1px;\n  --_nav-item-border-color: var(--at-white-t-5);\n\n  --_menu-item-transition: all var(--at-duration--medium) ease;\n  --_menu-item-color: var(--at-neutral-l-5);\n  --_menu-item-background: var(--at-neutral-d-6);\n  --_menu-item-color--hover: var(--at-neutral-d-5);\n  --_menu-item-background--hover: var(--at-primary-d-2);\n  --_menu-item-color--active: var(--at-neutral-d-5);\n  --_menu-item-background--active: var(--at-secondary);\n  \n  --_ab-nav-logo-background: var(--at-primary-d-4);\n}\n\n.ab-bricks-nav-style .bricks-mobile-menu-wrapper .menu-item {\n  border: var(--_nav-item-border-width) solid var(--_nav-item-border-color);\n\n  &:not(:last-child) {\n    border-bottom: none;\n  }\n\n  .brx-submenu-toggle {\n    align-items: stretch;\n\n    button {\n      border-left: 1px solid var(--_nav-item-border-color);\n    }\n  }\n\n  /* CSS to style all levels with the same style \n    Comment this out if you want to use the Bricks UI instead */\n\n  transition: var(--_menu-item-transition);\n  color: var(--_menu-item-color);\n  fill: var(--_menu-item-color);\n  background: var(--_menu-item-background);\n\n  &:is(:hover, :focus-visible) {\n    color: var(--_menu-item-color--hover);\n    fill: var(--_menu-item-color--hover);\n    background: var(--_menu-item-background--hover);\n  }\n  \n  &.current_page_item{\n    color: var(--_menu-item-color--active);\n    fill: var(--_menu-item-background--active);\n    background: var(--_menu-item-background--active);\n  }\n\n  a {\n    background: transparent;\n  }\n  /****************/\n  \n  \n}","mobileMenuIcon":{"stroke":{"raw":"var(--at-secondary-l-4)","rawValue":{"light":"hsla(182, 68%, 49%, 1)","dark":"hsla(182, 68%, 49%, 1)"},"complementaryChildren":[],"shadeChildren":["at_primary-l-1","at_primary-l-2","at_primary-l-3","at_primary-l-4","at_primary-l-5","at_primary-l-6","at_primary-d-1","at_primary-d-2","at_primary-d-3","at_primary-d-4","at_primary-d-5","at_primary-d-6","at_primary-t-1","at_primary-t-2","at_primary-t-3","at_primary-t-4","at_primary-t-5","at_primary-t-6"],"isExpanded":false,"at_framework":true,"at_version":"1.0.0"}}},"modified":1760398997,"user_id":1}]}