/* ============================================================================
nav.css — SHARED top-nav component (home index.html + case/blog pages).
Self-contained on purpose: concrete colour values, no Tailwind utilities, no
site.css tokens — so any page can reuse it with just:
Home page: js/mobile/nav.js morphs the padding, fades .nav-blur in, and
toggles .scrolled (frosted pill + Book-a-call) as you scroll over the hero.
Content pages (no hero): add class="nav-static" — the JS no-ops there, so the
CSS renders the resting frosted state directly.
============================================================================ */
/* ── container ── */
#nav-mobile { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; color: #1e272e; transition: opacity .25s ease; }
#nav-inner { position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-start; padding: 27px 24px 15px 29px; }
/* ── logo (Tailwind-free) ── */
#nav-mobile .nav-logo { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
#nav-mobile .nav-logo-word { font-family: 'Surt Expanded','Surt','Inter Tight',system-ui,sans-serif; font-weight: 500; font-size: 18px; line-height: 1; letter-spacing: -0.45px; }
/* ── progressive-blur backdrop (off over a hero; nav.js fades it in, .nav-static shows it) ── */
#nav-mobile .nav-blur { position: absolute; top: 0; left: 0; right: 0; height: 96px; pointer-events: none; opacity: 0; }
#nav-mobile .nav-blur > div { position: absolute; inset: 0; }
#nav-mobile .nav-blur .tint { background: linear-gradient(to bottom, rgba(255,255,255,.38), rgba(255,255,255,0)); }
#nav-mobile .nav-blur .l1 { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%); mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 55%); }
#nav-mobile .nav-blur .l2 { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 45%, #000 62%, transparent 82%); mask-image: linear-gradient(to bottom, transparent 20%, #000 45%, #000 62%, transparent 82%); }
#nav-mobile .nav-blur .l3 { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
-webkit-mask-image: linear-gradient(to bottom, transparent 52%, #000 74%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 52%, #000 74%, #000 86%, transparent 100%); }
/* right group hidden on mobile (logo only), shown ≥821 */
#nav-mobile .nav-right { display: none; }
@media (min-width: 821px) {
#nav-inner { margin-top: 10px; } /* home: nav sits 10px lower over the hero (nav.js still lerps the padding) */
#nav-mobile #nav-inner { justify-content: space-between; }
/* nav-right anchors the group: the pill is in flow (flush-right over the hero); the CTA is absolute so the
chained GSAP entrance (nav.js) slides the pill left + drops the CTA in past the hero. */
#nav-mobile .nav-right { position: relative; display: flex; align-items: center; }
#nav-mobile .nav-pill { display: flex; align-items: center; height: 52px; padding: 0 24px; gap: 24px; border-radius: 999px;
background: rgba(242,242,242,0); transition: background-color .4s ease; }
#nav-mobile .nav-pill a { position: relative; font: 400 15px/1 'Surt','Inter Tight',system-ui,sans-serif; letter-spacing: -.01em; color: #1e272e; text-decoration: none; }
/* underline (flair.digital spec: 1px rule ~0.5em under the text) — wipes in L→R on hover, out to the
right on leave. transform-only, so it stays on the compositor (no JS/GSAP needed for a 1-axis wipe). */
#nav-mobile .nav-pill a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: right;
transition: transform .38s cubic-bezier(.22,.8,.24,1); }
#nav-mobile .nav-pill a:hover::after { transform: scaleX(1); transform-origin: left; }
/* the pill IS the frosted-glass container (Framer spec): translucent grey + blur(48px), past the hero */
#nav-mobile.scrolled .nav-pill { background: rgba(237,237,237,.64); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); }
#nav-mobile .nav-cta { position: absolute; right: 0; top: 0; height: 52px; --k2-ic: 40px; --k2-icon: 18px;
opacity: 0; visibility: hidden; will-change: transform; } /* the K2 call button (below); GSAP owns opacity/transform/visibility (nav.js) */
}
/* ── STATIC mode — content pages with no hero: rest in the "scrolled" look, JS-free ── */
#nav-mobile.nav-static #nav-inner { padding: 20px 20px 12px 20px; margin-top: 0; } /* logo aligns to the 20px page gutter */
#nav-mobile.nav-static .nav-blur { opacity: 1; }
@media (min-width: 821px) {
#nav-mobile.nav-static #nav-inner { padding: 18px 60px 14px 60px; }
#nav-mobile.nav-static .nav-right { gap: 12px; }
#nav-mobile.nav-static .nav-pill { background: rgba(237,237,237,.64); -webkit-backdrop-filter: blur(48px); backdrop-filter: blur(48px); }
#nav-mobile.nav-static .nav-cta { position: static; opacity: 1; visibility: visible; }
}
/* ── K2 call button (Figma 1755:19270 "K2 60 Violet", refined with the dark footer's choices, Oct 26). One look for every
"Book a call" on light pages (the nav CTA, the hero CTA):
· ink pill on a 45° diagonal, light top-left → deep bottom-right (the footer button's lit-from-above logic)
· a quiet top rim instead of Figma's 1.5px white border; a soft far-light shadow tinted with the ink
· the icon in a SOLID violet circle (the call colour) with a uniform 1px stroke and its own drop shadow; duotone icon
· the label rule (optical-alignment §2): the 11px gap is padding on BOTH sides of the label, the end padding adds 11 more.
Sizes per use: --k2-ic (circle) and --k2-icon; height = circle + 2 × 6. ── */
.cta-k2 { --k2-ic: 48px; --k2-icon: 20px; display: inline-flex; align-items: center; gap: 0; box-sizing: border-box; padding: 0 11px 0 6px;
border-radius: 999px; color: #fff; text-decoration: none; white-space: nowrap; font: 500 15px/1 'Surt Expanded','Surt',system-ui,sans-serif; letter-spacing: -.01em;
/* dark glass (owner, Oct 26): very subtle colour blurs inside the ink, as if frosted over the brand colours */
background: radial-gradient(55% 110% at 18% 0%, rgba(164,133,247,.16), transparent 70%),
radial-gradient(45% 100% at 92% 105%, rgba(83,149,247,.13), transparent 70%),
radial-gradient(35% 90% at 62% -10%, rgba(247,133,154,.08), transparent 70%),
linear-gradient(135deg, #33404a 0%, #172027 100%);
isolation: isolate;
box-shadow: inset 0 0 14px rgba(255,255,255,.03),
0 1px 2px rgba(30,39,46,.06), 0 4px 8px rgba(30,39,46,.06), 0 10px 18px rgba(30,39,46,.06), 0 22px 40px rgba(30,39,46,.07); } /* softer, wider (Oct 26) */
.cta-k2:not(#nav-mobile .nav-cta) { position: relative; } /* the nav CTA keeps its absolute slot */
/* the glass rim: a 1px light that is bright top-left and faint bottom-right (the footer bar's specular edge), not a flat stroke */
.cta-k2::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(138deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 28%, rgba(255,255,255,0) 50%, rgba(255,255,255,.04) 72%, rgba(255,255,255,.2));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cta-k2 .k2-ic { flex: none; width: var(--k2-ic); height: var(--k2-ic); border-radius: 50%; display: grid; place-items: center; background: #7a4ce8;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 1px 1.5px rgba(10,8,30,.18), 0 2px 4px rgba(10,8,30,.14); } /* compact: the rolodex window (overflow hidden) leaves 6px below the circle */
.cta-k2 .k2-ic img { display: block; width: var(--k2-icon); height: var(--k2-icon); }
.cta-k2 .k2-lbl { padding: 0 11px; }
/* desktop rolodex (index.html builds it from data-swap): the icon circle stays put and only the LABEL rolls, inside its own
window right of the circle (the whole face used to swing out, so a second circle slid past the edge, Oct 26) */
.cta-k2 .ctar-win { position: relative; align-self: stretch; display: flex; align-items: center; overflow: hidden; }
.cta-k2 .ctar-sizer, .cta-k2 .ctar-face { gap: 0; justify-content: flex-start; padding: 0; }