/* ============================================================ bargiel.AI — site menu + "wave to top" option. Menu: inline links on desktop, hamburger + full-screen overlay on mobile. Wave reach switched via . ============================================================ */ /* ====== WAVE TO TOP — let the hero field run behind a transparent header all the way to the top edge of the page ====== */ body[data-wavetop="full"] .site-head{ background:transparent;border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none; } /* once the user scrolls, the header re-gains its glass plate */ body[data-wavetop="full"] .site-head.scrolled{ background:rgba(244,245,251,0.82); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); } /* ...but over a dark section the dark plate wins, even under wave-to-top. Specificity (0,4,1) beats the scrolled wave plate (0,3,1) so .over-dark is honoured. */ body[data-wavetop="full"] .site-head.scrolled.over-dark{ background:rgba(7,10,20,0.86); border-bottom-color:rgba(255,255,255,0.08); } body[data-wavetop="full"] .hero{ margin-top:calc(-1 * (68px + env(safe-area-inset-top))); padding-top:calc(68px + env(safe-area-inset-top) + clamp(8px,2vw,24px)); } @media(min-width:720px){ body[data-wavetop="full"] .hero{ margin-top:calc(-1 * (76px + env(safe-area-inset-top))); padding-top:calc(76px + env(safe-area-inset-top) + clamp(8px,2vw,24px)); } } @media (prefers-color-scheme: dark){ body[data-wavetop="full"] .site-head.scrolled{background:rgba(7,10,20,0.82)} } /* ====== HEADER LAYOUT ====== */ .head-actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px)} /* inline nav links (desktop) — animated underline */ .site-nav{display:none;align-items:center;gap:clamp(20px,2.4vw,34px)} .site-nav a{ position:relative;padding-bottom:3px; font-family:var(--fd);font-weight:600;font-size:0.96rem;letter-spacing:-0.005em; color:var(--tx-soft);text-decoration:none;line-height:1;white-space:nowrap; transition:color .18s ease; } .site-nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--accent); transition:right .22s ease; } .site-nav a:hover{color:var(--accent)} .site-nav a:hover::after{right:0} .site-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px} .site-head.over-dark .site-nav a{color:rgba(237,240,253,0.78)} .site-head.over-dark .site-nav a:hover{color:#fff} /* hamburger / menu trigger (mobile) */ .nav-toggle{ display:inline-flex;align-items:center;gap:9px;cursor:pointer; background:none;border:none;padding:8px 4px;color:var(--ink); font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase; } .nav-toggle-bars{position:relative;width:22px;height:11px;display:inline-block} .nav-toggle-bars::before,.nav-toggle-bars::after{ content:"";position:absolute;left:0;width:22px;height:1.6px;background:currentColor;border-radius:2px; transition:transform .26s cubic-bezier(.4,0,.2,1),top .26s ease; } .nav-toggle-bars::before{top:1px} .nav-toggle-bars::after{top:8px} .site-head.over-dark .nav-toggle{color:#fff} body.nav-open .nav-toggle-bars::before{top:5px;transform:rotate(45deg)} body.nav-open .nav-toggle-bars::after{top:5px;transform:rotate(-45deg)} .nav-toggle-label{margin-top:1px} /* responsive: inline links on desktop, hamburger + overlay on mobile */ @media(min-width:900px){ .nav-toggle{display:none} .site-nav{display:flex} } @media(max-width:899px){ .site-nav{display:none !important} .head-cta{display:none !important} } /* ====== FULL-SCREEN OVERLAY (mobile menu) ====== */ .nav-overlay{ position:fixed;inset:0;z-index:90; background:rgba(244,245,251,0.94); -webkit-backdrop-filter:saturate(140%) blur(20px);backdrop-filter:saturate(140%) blur(20px); opacity:0;pointer-events:none; transition:opacity .32s ease; } .nav-overlay[hidden]{display:block} /* keep it animatable */ body.nav-open .nav-overlay{opacity:1;pointer-events:auto} .nav-overlay-inner{ position:relative;height:100%;display:flex;flex-direction:column;justify-content:center; gap:clamp(28px,5vh,52px);padding-block:clamp(96px,16vh,160px) clamp(40px,8vh,72px); } /* explicit close (×) — top-right of the overlay; the single, clear way to dismiss the mobile menu (plus tapping a link or pressing Escape) */ .nav-close{ position:absolute;top:clamp(14px,2.4vh,24px);right:0;z-index:2; display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;padding:0;margin:0; background:none;border:none;border-radius:9px;cursor:pointer;color:var(--ink); transition:color .18s ease,background .18s ease; } .nav-close svg{width:23px;height:23px;display:block} .nav-close:hover{color:var(--accent);background:rgba(79,70,229,0.08)} .nav-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .nav-overlay-eyebrow{ font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase; color:var(--mu);display:flex;align-items:center;gap:11px;margin:0; } .nav-overlay-eyebrow .tick{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block} .nav-overlay-nav{display:flex;flex-direction:column} .nav-overlay-nav a{ display:flex;align-items:baseline;gap:clamp(16px,2.5vw,28px);text-decoration:none; padding:clamp(10px,1.6vh,18px) 0;border-top:1px solid var(--line);color:var(--ink); transition:color .18s ease,padding-left .25s ease; } .nav-overlay-nav a:last-child{border-bottom:1px solid var(--line)} .nav-overlay-nav a:hover{color:var(--accent);padding-left:14px} .no-idx{font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:0.04em;color:var(--mu);flex-shrink:0;width:2ch} .nav-overlay-nav a:hover .no-idx{color:var(--accent)} .no-label{font-family:var(--fd);font-weight:700;font-size:clamp(2rem,6vw,3.4rem);line-height:1;letter-spacing:-0.02em} .nav-overlay-foot{display:flex;align-items:center;gap:clamp(18px,3vw,30px);flex-wrap:wrap} .nav-overlay-link{ font-family:var(--fm);font-size:12px;letter-spacing:0.06em;color:var(--mu);text-decoration:none; transition:color .18s ease; } .nav-overlay-link:hover{color:var(--accent)} html.js .nav-overlay-nav a{opacity:0;transform:translateY(10px)} html.js body.nav-open .nav-overlay-nav a{animation:navIn .42s cubic-bezier(.2,.7,.2,1) forwards} body.nav-open .nav-overlay-nav a:nth-child(1){animation-delay:.06s} body.nav-open .nav-overlay-nav a:nth-child(2){animation-delay:.12s} body.nav-open .nav-overlay-nav a:nth-child(3){animation-delay:.18s} body.nav-open .nav-overlay-nav a:nth-child(4){animation-delay:.24s} body.nav-open .nav-overlay-nav a:nth-child(5){animation-delay:.30s} @keyframes navIn{to{opacity:1;transform:none}} body.nav-open{overflow:hidden} @media (prefers-color-scheme: dark){ /* --ink does not flip in dark mode, so the closed hamburger/MENU trigger would be dark navy on the dark header (invisible). Force it light. */ .nav-toggle{color:#F4F6FF} body.nav-open .nav-overlay{background:rgba(7,10,20,0.94)} .nav-close{color:#F4F6FF} .nav-overlay-nav a{color:#F4F6FF;border-color:rgba(255,255,255,0.1)} .nav-overlay-nav a:last-child{border-color:rgba(255,255,255,0.1)} } @media(prefers-reduced-motion:reduce){ html.js .nav-overlay-nav a{opacity:1;transform:none;animation:none} }