/* ============================================================ grow-in 7 — shared site nav (sticky, frosted, dropdown) Loaded on every content page alongside style.css / pages.css. Hero pages add → nav is transparent over the hero, then frosts on scroll. Other pages get the frosted bar from the top + matching body top-padding. Needs js/nav.js for scroll-frost, the mobile panel and a11y. ============================================================ */ :root { --site-nav-h: 64px; } html { scroll-padding-top: 84px; } /* anchor targets clear the fixed bar */ body:not(.nav-overlay) { padding-top: var(--site-nav-h); } /* non-hero pages */ body.nav-locked { overflow: hidden; } /* while the mobile menu is open */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: rgba(247, 243, 235, 0.82); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line, rgba(26, 26, 26, 0.12)); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); transform: none !important; } /* transparent while sitting over a hero; frosts once scrolled */ body.nav-overlay .site-nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; } body.nav-overlay .site-nav.is-scrolled { background: rgba(247, 243, 235, 0.82); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: var(--line, rgba(26, 26, 26, 0.12)); box-shadow: 0 8px 30px rgba(26, 26, 26, 0.07); } .site-nav__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); max-width: 1440px; margin: 0 auto; padding: 12px var(--pad-x, clamp(20px, 5vw, 96px)); } /* logo */ .site-nav__logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 21px; color: var(--ink, #1a1a1a); white-space: nowrap; } .site-nav__logo svg { width: 28px; height: 28px; } .site-nav__logo em { color: var(--primary, #c4351f); font-style: normal; } /* primary links */ .site-nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; } .site-nav__links > a, .site-nav__drop-trigger { font-family: var(--font-body, sans-serif); font-size: 15px; font-weight: 600; color: var(--ink-soft, #3a3a3a); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: color 0.2s ease; } .site-nav__links > a:hover, .site-nav__drop-trigger:hover { color: var(--primary, #c4351f); } .site-nav__links a[aria-current="page"] { color: var(--ink, #1a1a1a); } .site-nav__caret { font-size: 11px; transition: transform 0.25s ease; } /* dropdown */ .site-nav__has-drop { position: relative; } /* invisible bridge across the trigger→panel gap so hover isn't lost mid-move */ .site-nav__has-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } .site-nav__drop { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; min-width: 340px; padding: 14px; background: var(--surface, #fff); border: 1px solid var(--line, rgba(26, 26, 26, 0.12)); border-radius: 18px; box-shadow: 0 26px 60px rgba(26, 26, 26, 0.16); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; } .site-nav__has-drop:hover .site-nav__drop, .site-nav__has-drop:focus-within .site-nav__drop, .site-nav__has-drop.is-open .site-nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site-nav__has-drop:hover .site-nav__caret, .site-nav__has-drop.is-open .site-nav__caret { transform: rotate(180deg); } /* narrower single-column variant for the short Services list */ .site-nav__drop--services { grid-template-columns: 1fr; min-width: 190px; } .site-nav__drop a { font-size: 14px; font-weight: 600; color: var(--ink-soft, #3a3a3a); padding: 9px 12px; border-radius: 10px; transition: background 0.18s ease, color 0.18s ease; } .site-nav__drop a:hover { background: var(--bg-alt, #efe9dd); color: var(--ink, #1a1a1a); } .site-nav__drop-all { grid-column: 1 / -1; margin-top: 4px; color: var(--primary, #c4351f) !important; font-weight: 700 !important; border-top: 1px solid var(--line, rgba(26, 26, 26, 0.12)); border-radius: 0 !important; padding-top: 12px !important; } /* CTA */ .site-nav__cta { background: var(--ink, #1a1a1a); color: var(--bg, #f7f3eb); font-family: var(--font-body, sans-serif); font-weight: 700; font-size: 14.5px; padding: 11px 20px; border-radius: 999px; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease; } .site-nav__cta:hover { background: var(--primary, #c4351f); color: #fff; transform: translateY(-1px); } /* burger (mobile only) */ .site-nav__burger { display: none; margin-left: auto; width: 44px; height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .site-nav__burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--ink, #1a1a1a); transition: transform 0.3s ease, opacity 0.2s ease; } .site-nav.is-open .site-nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav.is-open .site-nav__burger span:nth-child(2) { opacity: 0; } .site-nav.is-open .site-nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* mobile panel */ .site-nav__mobile { display: none; /* explicit height (not bottom:0) — the frosted header's backdrop-filter makes it the containing block for fixed children, so bottom:0 would size the panel to the header, not the viewport. */ position: fixed; top: var(--site-nav-h); left: 0; right: 0; height: calc(100vh - var(--site-nav-h)); height: calc(100dvh - var(--site-nav-h)); background: var(--bg, #f7f3eb); padding: 24px var(--pad-x, 24px) 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .site-nav.is-open .site-nav__mobile { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__mobile nav { display: flex; flex-direction: column; gap: 4px; } .site-nav__mobile a { font-family: var(--font-display, sans-serif); font-weight: 700; font-size: 22px; color: var(--ink, #1a1a1a); padding: 12px 0; border-bottom: 1px solid var(--line, rgba(26, 26, 26, 0.1)); } .site-nav__m-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-mute, #6b6b6b); margin-top: 18px; padding-bottom: 6px; } .site-nav__m-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .site-nav__m-sub a { font-family: var(--font-body, sans-serif); font-size: 15px; font-weight: 600; color: var(--ink-soft, #3a3a3a); padding: 9px 0; } .site-nav__mobile .site-nav__cta { margin-top: 22px; text-align: center; font-size: 17px; padding: 16px; border-bottom: 0; color: var(--bg, #f7f3eb); } .site-nav__mobile .site-nav__cta:hover { color: #fff; } /* breakpoint */ @media (max-width: 900px) { .site-nav__links, .site-nav__inner > .site-nav__cta { display: none; } .site-nav__burger { display: flex; } .site-nav__mobile { display: block; } } /* persistent mobile CTA — the header CTA is collapsed into the burger on phones, so keep a thumb-friendly "Start" always reachable. Injected by js/nav.js so it needs no per-page markup. */ .site-nav__sticky { display: none; } @media (max-width: 900px) { .site-nav__sticky { display: block; position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 190; text-align: center; background: var(--primary, #c4351f); color: #fff; font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 16px; padding: 15px 18px; border-radius: 999px; box-shadow: 0 14px 34px rgba(196, 53, 31, 0.42); padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); transition: opacity 0.25s ease, transform 0.25s ease; } } /* hide it while the mobile menu is open (the menu has its own CTA) */ body.nav-locked .site-nav__sticky { opacity: 0; pointer-events: none; transform: translateY(8px); } @media (prefers-reduced-motion: reduce) { .site-nav, .site-nav__drop, .site-nav__mobile { transition: none; } }