/* ============================================================================ Fylo shared marketing nav — ONE bar for every static page (/, /pricing, /store, ...). Namespaced under .fnav and fully self-contained so it renders identically no matter what the host page's own CSS defines. Load it in AFTER the page's fonts. Pair it with the tiny inline auth-hint script (see any page's ) so the signed-in state paints with no flash, and load /nav.js (defer) so the mobile drawer works. DESKTOP (>720px): brand left, page links + auth actions grouped on the right. MOBILE (<=720px): brand left, a single hamburger on the right; page links AND the auth CTAs live inside the slide-in side drawer. ========================================================================== */ .fnav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(13, 20, 23, 0.06); font-family: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif; } .fnav__wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; height: 68px; display: flex; align-items: center; justify-content: flex-start; gap: 0; } .fnav__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; /* pushes links + actions to the right */ } .fnav__brand img { height: 27px; width: auto; display: block; } .fnav__brand span { font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: #0d1417; } .fnav__brand span b { color: #0f766e; font-weight: 800; } /* --- page links (the side drawer on mobile) --- */ .fnav__links { display: flex; align-items: center; gap: 32px; margin-right: 32px; font-weight: 500; font-size: 15px; } .fnav__links a { text-decoration: none; color: #5b6b70; transition: color 0.18s ease; white-space: nowrap; } .fnav__links a:hover { color: #0d1417; } .fnav__links a.is-on { color: #0d1417; font-weight: 600; } /* the drawer panel gets programmatic focus on open (a11y) but must show no ring; links/close only show a focus ring for real keyboard use, never on touch */ .fnav__links:focus { outline: none; } .fnav__links a:focus:not(:focus-visible), .fnav__close:focus:not(:focus-visible) { outline: none; } /* --- auth actions (right of the bar on desktop) --- */ .fnav__actions { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: 15px; } .fnav__signin { text-decoration: none; color: #5b6b70; transition: color 0.18s ease; white-space: nowrap; } .fnav__signin:hover { color: #0d1417; } .fnav__cta { padding: 10px 20px; border-radius: 999px; background: #0d1417; color: #fff !important; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.18s ease, transform 0.18s ease; } .fnav__cta:hover { background: #0f766e; } .fnav__cta:active { transform: translateY(1px); } /* Signed-out is the default. The [Reviews] button is hidden until the auth-hint script adds .is-authed to — synchronously, before paint, so no swap. */ .fnav__reviews { display: none; } html.is-authed .fnav__signin, html.is-authed .fnav__cta[data-nav-cta] { display: none; } html.is-authed .fnav__reviews { display: inline-block; } /* the drawer's own auth CTAs are mobile-only; never shown in the desktop bar */ .fnav__drawer-actions { display: none; } /* --- hamburger + scrim: hidden on desktop, shown on mobile --- */ .fnav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; margin-left: 6px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fnav__burger span { display: block; width: 22px; height: 2px; margin: 0 auto; border-radius: 2px; background: #0d1417; transition: transform 0.28s ease, opacity 0.2s ease; } .fnav__scrim { display: none; /* .fnav has backdrop-filter, which makes it the containing block for this fixed child -- so `inset:0` would collapse to the 60px bar and only the top would be tappable. Size to the viewport explicitly so the whole screen outside the drawer closes it. */ position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; z-index: 65; background: rgba(13, 20, 23, 0.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* close (X) button lives inside the drawer top-right; hidden on desktop */ .fnav__close { display: none; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 18px; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 11px; background: #f2f3f5; color: #0d1417; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fnav__close:active { background: #e7e9ec; } @media (max-width: 720px) { .fnav__wrap { padding: 0 18px; height: 60px; } .fnav__burger { display: flex; } /* auth moves into the drawer so the top bar stays clean: brand + menu only */ .fnav__actions { display: none; } /* page links + auth become a right-side slide-in drawer */ .fnav__links { position: fixed; top: 0; right: 0; height: 100dvh; width: min(82vw, 330px); margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 80px) 26px 28px; background: #fff; box-shadow: -22px 0 60px rgba(13, 20, 23, 0.16); transform: translateX(100%); visibility: hidden; /* keeps closed-drawer links out of the tab order */ transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.36s; z-index: 70; overflow-y: auto; } .fnav__links::before { content: "Menu"; display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa7ac; margin-bottom: 4px; } .fnav__links > a { padding: 16px 0; font-size: 18px; font-weight: 600; color: #0d1417; border-bottom: 1px solid rgba(13, 20, 23, 0.07); } .fnav__links > a.is-on { color: #0f766e; } /* auth CTAs, pinned to the bottom of the drawer */ .fnav__drawer-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 26px; } .fnav__drawer-actions .fnav__cta { display: block; width: 100%; text-align: center; padding: 15px 16px; font-size: 16px; border-radius: 14px; } /* Reviews CTA stays hidden until signed in (beats the block rule above) */ .fnav__drawer-actions .fnav__reviews { display: none; } html.is-authed .fnav__drawer-actions .fnav__reviews { display: block; } .fnav__drawer-actions .fnav__signin { text-align: center; padding: 6px; font-size: 15px; font-weight: 600; color: #5b6b70; } .fnav__links::after { content: "Made in New Zealand"; padding-top: 20px; text-align: center; font-size: 12.5px; font-weight: 500; color: #9aa7ac; } .fnav__scrim { display: block; } .fnav__close { display: flex; } html.fnav-open .fnav__links { transform: translateX(0); visibility: visible; transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } html.fnav-open .fnav__scrim { opacity: 1; pointer-events: auto; } /* burger morphs to an X while open */ html.fnav-open .fnav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.fnav-open .fnav__burger span:nth-child(2) { opacity: 0; } html.fnav-open .fnav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* staggered reveal when the drawer opens */ html.fnav-open .fnav__links > a { animation: fnav-item-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; } html.fnav-open .fnav__links > a:nth-of-type(1) { animation-delay: 0.06s; } html.fnav-open .fnav__links > a:nth-of-type(2) { animation-delay: 0.12s; } html.fnav-open .fnav__links > a:nth-of-type(3) { animation-delay: 0.18s; } html.fnav-open .fnav__drawer-actions { animation: fnav-item-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.26s; } } @keyframes fnav-item-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .fnav__links, .fnav__burger span, .fnav__scrim { transition: none; } html.fnav-open .fnav__links > a, html.fnav-open .fnav__drawer-actions { animation: none; } }