/* ========================================================================== Marathon Menu Replaces the theme's header on every page. Every rule is scoped to .mnav or one of a few plugin-only classes, and leans on !important for the layout-critical ones: this is the site's navigation, so it has to win against the theme's own header styles rather than merely coexist. Poppins is declared here as @font-face, straight from Google's font FILE server (fonts.gstatic.com). It deliberately never links to Google's font STYLESHEET service - the same rule the other plugins follow, since WP-Optimize has been known to fatal on PHP 8 when it meets one of those. ========================================================================== */ @font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Poppins';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root { --mn-o: #f1582f; /* the orange from the logo - the settings page can change these two */ --mn-g: #0f6939; /* the green from the logo */ --mn-deep: #0b1a13; --mn-ink: #14231b; --mn-body: #4b5a52; --mn-mute: #7c8a82; --mn-line: #e3e8e4; --mn-mist: #f6f8f6; --mn-font: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; --mn-h: 86px; /* the main bar; the spacer under the fixed header is measured from it */ --mn-h-small: 68px; /* once the page is scrolled */ --mn-ease: cubic-bezier(.22, .61, .36, 1); } /* The panel and the veil are siblings of the header, not children of it, so every base rule has to name them too - one shared parent selector cannot reach them. */ .mnav, .mnav *, .mnav *::before, .mnav *::after, .mnav-veil, .mnav-panel, .mnav-panel * { box-sizing: border-box; font-family: var(--mn-font); } .mnav img, .mnav-panel img { display: block; height: auto; max-width: 100%; } .mnav svg, .mnav-panel svg { display: block; } .mnav a, .mnav-panel a { text-decoration: none; } .mnav ul, .mnav-panel ul { list-style: none; margin: 0; padding: 0; } .mnav button, .mnav-panel button { cursor: pointer; } .mnav a:focus-visible, .mnav button:focus-visible, .mnav-panel a:focus-visible, .mnav-panel button:focus-visible { border-radius: 6px; outline: 3px solid var(--mn-o); outline-offset: 2px; } .mnav-ic { flex: none; height: 20px; width: 20px; } .mnav-ic--sm { height: 16px; width: 16px; } .mnav-ic--chev { height: 14px; margin-left: 5px; transition: transform .2s ease; width: 14px; } /* the plugin owns the very top of the page */ .mnav { left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } body.admin-bar .mnav { top: 32px; } @media (max-width: 782px) { body.admin-bar .mnav { top: 46px; } } /* while menu.js measures the header at full height, nothing may animate */ .mnav-measuring, .mnav-measuring * { transition: none !important; } /* keeps the page from sliding underneath - height set by menu.js */ .mnav-spacer { display: block; } /* ---------------------------------------------------------------- top strip */ .mnav-top { background: linear-gradient(90deg, var(--mn-deep), var(--mn-g) 70%); color: #fff; font-size: 13.5px; max-height: 46px; overflow: hidden; transition: max-height .3s var(--mn-ease), opacity .25s ease; } /* out of the way once the visitor starts reading */ .mnav.is-scrolled .mnav-top { max-height: 0; opacity: 0; } .mnav-top-in { align-items: center; display: flex; gap: 18px; height: 40px; justify-content: space-between; margin: 0 auto; max-width: 1320px; padding: 0 clamp(16px, 3vw, 32px); } .mnav-top-left, .mnav-top-right { align-items: center; display: flex; gap: 8px 20px; min-width: 0; } .mnav-top a, .mnav-top span { align-items: center; color: #fff; display: inline-flex; gap: 7px; white-space: nowrap; } .mnav-top a { font-weight: 500; transition: color .2s ease; } .mnav-top a:hover { color: #ffd9cd; } .mnav-top .mnav-ic { color: var(--mn-o); } .mnav-top-hours { color: rgba(255, 255, 255, .8) !important; } .mnav-top-social { display: inline-flex; gap: 14px; } .mnav-top-social a { color: rgba(255, 255, 255, .85); height: 17px; width: 17px; } .mnav-top-social a:hover { color: var(--mn-o); transform: translateY(-1px); } .mnav-top-social svg { height: 16px; width: 16px; } /* ---------------------------------------------------------------- main bar */ .mnav-main { background: #fff; box-shadow: 0 1px 0 var(--mn-line); transition: box-shadow .25s ease; } .mnav.is-scrolled .mnav-main { box-shadow: 0 12px 30px -18px rgba(11, 26, 19, .38); } .mnav-main-in { align-items: center; display: flex; gap: 18px; height: var(--mn-h); justify-content: space-between; margin: 0 auto; max-width: 1320px; padding: 0 clamp(16px, 3vw, 32px); transition: height .3s var(--mn-ease); } .mnav.is-scrolled .mnav-main-in { height: var(--mn-h-small); } .mnav-logo { align-items: center; color: var(--mn-ink) !important; display: flex; flex: none; gap: 10px; } .mnav-logo img { height: 52px; transition: height .3s var(--mn-ease); width: auto; } .mnav.is-scrolled .mnav-logo img { height: 42px; } .mnav-logo-name { font-size: 1.16rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } .mnav-desktop { flex: 1; min-width: 0; } .mnav-desktop > ul { align-items: center; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; } .mnav-item { position: relative; } .mnav-item > a { align-items: center; border-radius: 10px; color: var(--mn-ink) !important; display: flex; font-size: .95rem; font-weight: 600; padding: 10px 13px; position: relative; transition: color .2s ease, background .2s ease; } /* the underline grows out from the left, like the chevrons in the logo */ .mnav-item > a::after { background: var(--mn-o); border-radius: 2px; bottom: 4px; content: ""; height: 3px; left: 13px; opacity: 0; position: absolute; right: 13px; transform: scaleX(.3); transform-origin: left; transition: opacity .2s ease, transform .25s var(--mn-ease); } .mnav-item > a:hover, .mnav-item.is-current > a { background: var(--mn-mist); color: var(--mn-g) !important; } .mnav-item > a:hover::after, .mnav-item.is-current > a::after { opacity: 1; transform: scaleX(1); } .mnav-item.has-children:hover .mnav-ic--chev { transform: rotate(180deg); } /* The dropdown sits flush against the item. A gap here - even a few pixels - is empty page belonging to neither, so the pointer crossing it drops the hover and the dropdown closes before it can be reached. The hidden state therefore overlaps upward, never below the flush line. */ .mnav .mnav-sub { background: #fff; border-radius: 14px; box-shadow: 0 26px 52px -22px rgba(11, 26, 19, .45); left: 0; min-width: 236px; opacity: 0; padding: 10px; pointer-events: none; position: absolute; top: 100%; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; z-index: 10; } .mnav-sub .mnav-item > a { border-radius: 9px; font-weight: 500; padding: 9px 12px; } .mnav-sub .mnav-item > a::after { display: none; } .mnav-sub .mnav-item > a:hover { background: var(--mn-mist); padding-left: 16px; } @media (hover: hover) and (pointer: fine) { .mnav-item.has-children:hover > .mnav-sub, .mnav-item.has-children:focus-within > .mnav-sub { opacity: 1; pointer-events: auto; transform: none; } } .mnav-item.has-children.is-open > .mnav-sub { opacity: 1; pointer-events: auto; transform: none; } /* near the end of the bar there is no room to the right, so those hang from their right edge instead of running off the screen */ .mnav-desktop > ul > .mnav-item:nth-last-child(-n+2) > .mnav-sub { left: auto; right: 0; } /* ---------------------------------------------------------------- the actions on the right */ .mnav-actions { align-items: center; display: flex; flex: none; gap: 10px; } .mnav-wa { align-items: center; background: var(--mn-g); border-radius: 50%; color: #fff; display: flex; height: 42px; justify-content: center; transition: transform .2s ease, background .2s ease; width: 42px; } .mnav-wa svg { height: 20px; width: 20px; } .mnav-wa:hover { background: #25d366; transform: translateY(-2px); } .mnav-cta { align-items: center; background: var(--mn-o); border-radius: 999px; box-shadow: 0 12px 26px -12px rgba(241, 88, 47, .8); color: #fff !important; display: inline-flex; font-size: .94rem; font-weight: 600; gap: 8px; padding: 12px 20px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .mnav-cta .mnav-ic { transition: transform .2s ease; } .mnav-cta:hover { background: #d94a24; box-shadow: 0 16px 30px -12px rgba(241, 88, 47, .9); transform: translateY(-2px); } .mnav-cta:hover .mnav-ic { transform: translateX(3px); } .mnav-burger { background: none; border: 0; display: none; flex-direction: column; gap: 5px; height: 44px; padding: 10px; width: 44px; } .mnav-burger span { background: var(--mn-g); border-radius: 2px; display: block; height: 2.5px; transition: transform .3s var(--mn-ease), opacity .2s ease; width: 100%; } .mnav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .mnav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mnav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------------------------------------------------------------- the panel on a phone */ .mnav-veil { background: rgba(6, 16, 11, .55); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .3s ease; z-index: 10000; } .mnav-veil.is-open { opacity: 1; pointer-events: auto; } .mnav-panel { background: #fff; bottom: 0; box-shadow: -30px 0 60px -20px rgba(6, 16, 11, .38); display: flex; flex-direction: column; max-width: 400px; position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .38s var(--mn-ease); width: 86vw; z-index: 10001; } .mnav-panel.is-open { transform: none; } .mnav-panel-head { align-items: center; border-bottom: 1px solid var(--mn-line); display: flex; gap: 12px; justify-content: space-between; padding: 16px 18px; } .mnav-logo--panel img { height: 40px; } .mnav-logo--panel .mnav-logo-name { font-size: 1.02rem; } .mnav-x { align-items: center; background: var(--mn-mist); border: 0; border-radius: 50%; color: var(--mn-ink); display: grid; height: 38px; place-items: center; width: 38px; } .mnav-x:hover { background: #ffe9e2; color: var(--mn-o); } /* Both of these carry their own padding, so they have to out-weigh the list reset above - a bare class loses to ".mnav ul" and the rows end up flush against the edges. */ .mnav-panel .mnav-m-list { flex: 1; overflow-y: auto; padding: 8px 10px 18px; } .mnav-m-item { border-bottom: 1px solid var(--mn-line); } .mnav-m-item:last-child { border-bottom: 0; } .mnav-m-row { align-items: center; display: flex; } .mnav-m-row > a { align-items: center; color: var(--mn-ink) !important; display: flex; flex: 1; font-size: 1.02rem; font-weight: 600; gap: 14px; padding: 15px 8px; } .mnav-m-ic { color: var(--mn-g); } .mnav-m-item.is-current > .mnav-m-row > a { color: var(--mn-o) !important; } .mnav-m-item.is-current .mnav-m-ic { color: var(--mn-o); } .mnav-m-toggle { background: none; border: 0; color: var(--mn-mute); padding: 14px; } .mnav-m-toggle .mnav-ic { transition: transform .25s ease; } .mnav-m-toggle[aria-expanded="true"] .mnav-ic { transform: rotate(180deg); } /* menu.js sets max-height from the measured content. The grid 0fr/1fr collapse trick only works with a single child, so it cannot be used on a