/* Fuel Theme Version: 6.0.0 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Shared Menu Styles # Mobile Menu # Desktop Menu --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Shared Menu Styles --------------------------------------------------------------*/ .menu-italic{ font-family: var(--title-font); } /* .wp-block-fuel-sub-menu .wp-block-column { min-width: fit-content; } */ @media (min-width: 68.5em) { .wp-block-fuel-sub-menu .service-quote-column.wp-block-column{ min-width: initial; width: 30%; padding-left: 4em; } } .menu-notifications.wp-block-fuel-menu-item .notices-title, .sub-menu .wp-block-heading { margin: 0.2rem 0 1rem; padding-bottom: 0.6rem; font-weight: bold; font-family: var(--content-font); font-size: clamp(0.9rem, 4vw, 1rem); } .primary-menu .sub-menu nav { margin-top: 0; } .primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link) { padding: 0.3rem 1rem; margin-left: -0.8rem; font-style: normal; position: relative; } .wp-block-fuel-sub-menu-tab-link::after { content: ""; background: var(--wp--preset--color--sub-menu-color); clip-path: url(#menu_chevron); width: 0.6rem; height: 0.4rem; transform: rotate(270deg); margin: auto; position: absolute; inset: 0 1rem 0 auto; } .wp-block-navigation.is-vertical .wp-block-navigation-item { margin: 0 0 0.3rem; } /*-------------------------------------------------------------- # Mobile Menu --------------------------------------------------------------*/ @media (max-width: 68.49em) { body { /* Reverses menu colors from desktop */ --wp--preset--color--sub-menu-background: var(--primary-color); --wp--preset--color--sub-menu-color: #fff; } .primary-menu .wp-block-fuel-menu-wrapper { border-top: 1px solid #fff; } .primary-menu .wp-block-fuel-menu-item:nth-child(n+3) { border-left: 1px solid #fff; } .sub-menu::before { content: url('data:image/svg+xml,'); background: var(--wp--preset--color--sub-menu-background); display: inline-block; padding: 0.5rem 0.5rem 0; position: relative; z-index: 1; } .sub-menu::after { content: ''; height: 1px; width: calc(100% - 2rem); background: #fff; position: absolute; inset: 1.5rem 0 100% 0; margin: 0 auto; } .primary-menu .sub-menu a:not(.wp-block-button__link, .icon-item, .notice, .map-link) { margin-left: -1rem; margin-right: -1rem; } .primary-menu .menu-label { min-width: 3.5rem; flex-direction: column; } .primary-menu .wp-block-fuel-menu-item .menu-label .menu-label-svg svg { width: 1rem; height: 1rem; } .sub-menu .tablist, .sub-menu .tabpanel { padding-top: 0.4rem; } .wp-block-fuel-sub-menu .wp-block-columns { flex-wrap: wrap !important; } .wp-block-fuel-sub-menu .wp-block-column { flex-basis: 100% !important; } .sub-menu .wp-block-heading { background: rgba(0, 0, 0, 0.15); padding: 0.5rem 1rem; margin: 0 0 0 -1rem; width: calc(100% + 2rem) } .wp-block-fuel-sub-menu-tab-link:is(:hover, :focus-visible)::after { background-color: var(--wp--preset--color--sub-menu-background); } .sub-menu p { /* font-style: italic; */ line-height: 1.7; margin-left: 0 !important; } /* .sub-menu p br { display: none; } */ .back-to-tabs-btn { display: block; margin-bottom: 0.8rem; } .sub-menu .wp-block-navigation__container, .sub-menu .wp-block-navigation__container * { width: 100%; flex: 1 1 100%; } /* Menu bio list */ .sub-menu .bio-list .bio-box.bio-box { margin-left: -1rem; width: calc(100% + 2rem); } .sub-menu .bio-list .bio-box:nth-child(odd) { background: rgba(255,255,255,0.1); } /* Menu location list */ .sub-menu .loc-title { margin-bottom: 0.5rem; } /* Notifications menu */ .menu-notifications.wp-block-fuel-menu-item .tablist { padding: 0.4rem clamp(1rem, calc(50vw - 30rem), 18rem) 2rem; } .menu-notifications.wp-block-fuel-menu-item .notices-title { display: none; } .menu-notifications li { background: var(--wp--preset--color--menu-hover-bg); } #menu-item-notices { order: 2; } li.wp-block-fuel-menu-item:nth-child(3) { order: 2; } } /*-------------------------------------------------------------- # Desktop Menu --------------------------------------------------------------*/ @media (min-width: 68.5em) { li:not(.menu-notifications, .mobile-label) .sub-menu-trigger::after { content: ''; display: inline-block; background: var(--wp--preset--color--menu-color); clip-path: url(#menu_chevron); margin-left: 0.5rem; margin-top: 0.3rem; width: 0.6rem; height: 0.4rem; transition: transform 0.3s; } .primary-menu .sub-menu-trigger[aria-expanded=true]::after { transform: rotate(-180deg); } .primary-menu .wp-block-fuel-menu-item .menu-label .menu-label-svg svg { width: 1.4rem; height: 1.3rem; } .sub-menu { background: url('../images/menu-bg-accent.svg') no-repeat; background-position: right bottom; } .sub-menu .wp-block-heading { border-bottom: 1px solid; } .back-to-tabs-btn { display: inline-block; margin-bottom: 0.5rem; } /* menu-col-# Helper classes. Add menu-col-# to break navigation block into columns */ .sub-menu .wp-block-navigation:is(.menu-col-2, .menu-col-3, .menu-col-4) .wp-block-navigation__container { display: block; column-gap: 2em; } .menu-col-2 { column-count: 2; } .menu-col-3 { column-count: 3; } .menu-col-4 { column-count: 4; } /* Notification Menu */ #menu-item-notices .sub-menu { background-image: none; max-width: 25rem; width: 100%; right: clamp(1rem, 8vw - 4rem, 3rem); } .menu-notifications li { background-color: var(--wp--preset--color--menu-background); color: #fff; } .menu-notifications li::before { left: 0.9rem; } .linkIcon { background: var(--wp--preset--color--menu-hover-bg); color: #fff; } .notice:is(:hover, :focus-visible) .linkIcon path { color: #fff; } } /* Makes sub-menu full height on computer when width is less than 18rem */ @media (max-width: 22.49em) { .sub-menu { height: 100% !important; } }