/* ===================================================================== SOUL CORE ADS · menu.css · FASE 1 — Navegação Escopo: header/nav + drawer mobile. Aditivo, cirúrgico. Regra de ouro: o estado de REPOUSO (fechado) é o DEFAULT. Nenhuma camada full-screen depende de terminar animação para revelar. Fonte única de verdade da visibilidade = clip-path do drawer, alternado por .menu-open no . Falha = menu aparece/some (benigno). ===================================================================== */ /* --------------------------------------------------------------------- 1. HEADER · ações + hambúrguer --------------------------------------------------------------------- */ .header-actions{ display:flex; align-items:center; gap:.75rem; } /* Hambúrguer premium (mobile) · assimetria via scaleX (zero reflow) */ .menu-trigger{ width:44px; height:44px; /* alvo de toque ≥ 44px */ display:inline-grid; place-items:center; border-radius:50%; cursor:pointer; background:var(--bg-elev); border:1px solid var(--line-gold); color:var(--gold); transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease, background .25s ease; } .menu-trigger:hover, .menu-trigger:focus-visible{ transform:translateY(-1px); border-color:var(--gold); } .menu-trigger:active{ transform:scale(.94); } .menu-bars{ display:grid; gap:5px; width:20px; } .menu-bars span{ height:2px; width:20px; background:currentColor; border-radius:2px; transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; /* só transform/opacity */ } .menu-bars span:nth-child(2){ transform:scaleX(.65); transform-origin:right; } /* assimetria */ .menu-bars span:nth-child(3){ transform:scaleX(.85); transform-origin:left; } .menu-trigger:hover .menu-bars span, .menu-trigger:focus-visible .menu-bars span{ transform:scaleX(1); } /* Morph barras → X quando o menu abre (sem flicker; estado vem da classe única) */ body.menu-open .menu-trigger .menu-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); } body.menu-open .menu-trigger .menu-bars span:nth-child(2){ opacity:0; transform:scaleX(0); } body.menu-open .menu-trigger .menu-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* --------------------------------------------------------------------- 2. NAV DESKTOP · scroll-spy --------------------------------------------------------------------- */ .nav-desktop{ display:none; } .nav-link{ position:relative; padding:.35rem 0; display:inline-block; font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--text-mid); transition:color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); /* spring */ } .nav-link:hover, .nav-link:focus-visible{ transform:translateY(-2px); } .nav-link:active{ transform:translateY(0) scale(.97); } .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--silver)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .nav-link:hover, .nav-link:focus-visible{ color:var(--text-hi); } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link.is-active::after{ transform:scaleX(1); } .nav-link.is-active{ color:var(--gold); } /* --------------------------------------------------------------------- 3. OVERLAY (backdrop) · abaixo do drawer no z-index --------------------------------------------------------------------- */ .menu-overlay{ position:fixed; inset:0; z-index:990; background:rgba(5,5,7,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; visibility:hidden; pointer-events:none; /* DEFAULT seguro */ transition:opacity .4s ease, visibility 0s linear .4s; } body.menu-open .menu-overlay{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .4s ease, visibility 0s; } /* --------------------------------------------------------------------- 4. DRAWER EDITORIAL · revelação por clip-path (nunca por cobertura) --------------------------------------------------------------------- */ .menu-drawer{ position:fixed; inset:0; z-index:1000; min-height:100svh; min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto; gap:1.25rem; padding:calc(env(safe-area-inset-top) + 1.25rem) clamp(1.4rem,6vw,2.5rem) calc(env(safe-area-inset-bottom) + 1.75rem); background:var(--bg-black); /* fundo OPACO da marca */ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; /* DEFAULT = FECHADO E FORA DO CAMINHO (não depende de fill-mode) */ visibility:hidden; pointer-events:none; -webkit-clip-path:circle(0% at var(--ox,92%) var(--oy,4%)); clip-path:circle(0% at var(--ox,92%) var(--oy,4%)); /* FECHAMENTO RELÂMPAGO: rápido, delays zerados (devolve o controle já) */ transition:-webkit-clip-path .24s cubic-bezier(.4,0,.2,1), clip-path .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s; } /* ABERTURA: revelação a partir da origem do hambúrguer (~450ms ease-out) */ body.menu-open .menu-drawer{ visibility:visible; pointer-events:auto; -webkit-clip-path:circle(150% at var(--ox,92%) var(--oy,4%)); clip-path:circle(150% at var(--ox,92%) var(--oy,4%)); transition:-webkit-clip-path .45s cubic-bezier(.16,1,.3,1), clip-path .45s cubic-bezier(.16,1,.3,1), visibility 0s; } /* Fallback sem clip-path: slide clássico (transform = zero reflow) */ @supports not (clip-path:circle(1% at 50% 50%)){ .menu-drawer{ -webkit-clip-path:none; clip-path:none; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s; } body.menu-open .menu-drawer{ transform:translateX(0); transition:transform .38s cubic-bezier(.16,1,.3,1), visibility 0s; } } /* Texturas decorativas CONFINADAS ao drawer (aria-hidden, sem toque) */ .drawer-tex{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60% 40% at 85% 8%, rgba(212,175,55,.14), transparent 60%), radial-gradient(50% 40% at 5% 95%, rgba(201,205,214,.08), transparent 60%); } /* Linha de marca no topo (acento confinado · scaleX na abertura) */ .menu-drawer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--silver)); transform:scaleX(1); transform-origin:left; /* DEFAULT já visível */ } /* Cabeçalho do drawer */ .drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .drawer-eyebrow{ margin:0; } .menu-close{ width:44px; height:44px; display:inline-grid; place-items:center; border-radius:50%; cursor:pointer; font-size:1.15rem; background:var(--bg-elev); border:1px solid var(--line-gold); color:var(--gold); transition:transform .25s ease, border-color .25s ease; } .menu-close:hover, .menu-close:focus-visible{ transform:rotate(90deg); border-color:var(--gold); } /* Links do drawer · display grande + numeração via CSS counter */ .drawer-links{ counter-reset:navi; align-self:center; display:grid; } .drawer-links li + li{ border-top:1px solid var(--line); } .drawer-link{ position:relative; display:flex; align-items:baseline; gap:1rem; padding:clamp(.6rem,2.4vw,1rem) 0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,6vw,2.25rem); line-height:1.1; color:var(--text-hi); transition:color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1); /* spring, zero reflow */ } .drawer-link::before{ counter-increment:navi; content:counter(navi,decimal-leading-zero); font-family:var(--font-mono); font-weight:700; font-size:.8rem; color:var(--gold); transform:translateY(-.35em); } /* Estados NÃO dependem só de :hover (touch-safe) */ .drawer-link:hover, .drawer-link:focus-visible, .drawer-link:active{ color:var(--gold); transform:translateX(.5rem); } /* Rodapé do drawer · CTA de conversão + social */ .drawer-foot{ display:grid; gap:1.1rem; } .drawer-cta{ width:100%; } .drawer-social{ display:flex; gap:1rem; } .drawer-social a{ width:44px; height:44px; display:inline-grid; place-items:center; border-radius:50%; background:var(--bg-elev); border:1px solid var(--line); color:var(--silver); font-size:1.1rem; transition:color .25s ease, border-color .25s ease; } .drawer-social a:hover, .drawer-social a:focus-visible{ color:var(--gold); border-color:var(--line-gold); } /* --------------------------------------------------------------------- 5. COREOGRAFIA (acentos CONFINADOS · animam só a ENTRADA) Timeline de referência (a partir do início da revelação): ~0ms revelação (clip-path do drawer, 450ms) ~280ms linha de marca no topo (scaleX) ~340ms eyebrow ~380ms links em stagger de 60ms (translateX + blur clearing) ~760ms CTA ~840ms rodapé/social Todos repousam, por DEFAULT, no estado final visível. Se a animação for descartada, já estão no lugar (nenhum cobre conteúdo). --------------------------------------------------------------------- */ @keyframes drwLineIn { from{ transform:scaleX(0);} to{ transform:scaleX(1);} } @keyframes drwUpIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} } @keyframes drwLinkIn { from{ opacity:0; transform:translateX(-16px); filter:blur(6px);} to{ opacity:1; transform:none; filter:blur(0);} } body.menu-open .menu-drawer::before{ animation:drwLineIn .4s cubic-bezier(.16,1,.3,1) .16s both; } body.menu-open .drawer-eyebrow { animation:drwUpIn .4s ease .20s both; } body.menu-open .drawer-link { animation:drwLinkIn .4s cubic-bezier(.16,1,.3,1) both; } body.menu-open .drawer-links li:nth-child(1) .drawer-link{ animation-delay:.24s; } body.menu-open .drawer-links li:nth-child(2) .drawer-link{ animation-delay:.29s; } body.menu-open .drawer-links li:nth-child(3) .drawer-link{ animation-delay:.34s; } body.menu-open .drawer-links li:nth-child(4) .drawer-link{ animation-delay:.39s; } body.menu-open .drawer-links li:nth-child(5) .drawer-link{ animation-delay:.44s; } body.menu-open .drawer-links li:nth-child(6) .drawer-link{ animation-delay:.49s; } body.menu-open .drawer-cta { animation:drwUpIn .4s ease .55s both; } body.menu-open .drawer-social { animation:drwUpIn .4s ease .62s both; } /* --------------------------------------------------------------------- 6. SCROLL LOCK (drawer aberto) --------------------------------------------------------------------- */ body.menu-open{ overflow:hidden; } /* --------------------------------------------------------------------- 7. ÂNCORAS · compensar header fixo ao navegar --------------------------------------------------------------------- */ main section[id]{ scroll-margin-top:84px; } /* --------------------------------------------------------------------- 8. RESPONSIVO (mobile-first) ≥600px: CTA do header cabe ao lado do hambúrguer ≥960px: nav horizontal aparece; hambúrguer some --------------------------------------------------------------------- */ @media (min-width:600px){ .header-cta{ display:inline-flex; } } @media (min-width:960px){ .nav-desktop{ display:flex; gap:clamp(1rem,2.2vw,1.9rem); align-items:center; } .menu-trigger{ display:none; } .menu-drawer, .menu-overlay{ display:none !important; } /* drawer só existe no mobile */ } /* --------------------------------------------------------------------- 9. PREFERS-REDUCED-MOTION → abre/fecha instantâneo, sem stagger/varredura --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .menu-drawer, .menu-overlay{ transition-duration:.001ms !important; } body.menu-open .menu-drawer::before, body.menu-open .drawer-eyebrow, body.menu-open .drawer-link, body.menu-open .drawer-cta, body.menu-open .drawer-social{ animation:none !important; } .menu-bars span, .menu-trigger, .nav-link, .header-cta, .drawer-link{ transition:none !important; } } /* CTA do header: feedback spring (escopo do menu; não altera .btn global) */ .header-cta{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; } .header-cta:active{ transform:scale(.97); }