/* ======================================================== TRANSOFT — Identidade Visual ======================================================== */ :root{ --bg-0:#05070d; --bg-1:#0a0e18; --bg-2:#0f1422; --surface:#11162338; --surface-2:#161c2e80; --border:#1c2440; --border-2:#243056; --text:#e7ecf6; --text-dim:#9aa5bf; --text-mute:#5f6a85; --primary:#0D6EE9; --primary-2:#3a8dff; --primary-glow:rgba(13,110,233,.55); --primary-soft:rgba(13,110,233,.12); --accent:#7cc4ff; --radius:14px; --radius-lg:22px; --shadow-glow:0 0 0 1px rgba(13,110,233,.25), 0 30px 90px -30px rgba(13,110,233,.55); --font-sans:"Raleway",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-display:"Raleway",sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); } /* ======================================================== RESET E BASE ======================================================== */ *,*::before,*::after{box-sizing:border-box} /* overflow-x:hidden também no html (não só no body): em vários navegadores mobile é o , não o , quem controla o scroll horizontal da página — um body{overflow-x:hidden} sozinho nem sempre é suficiente pra suprimir o swipe horizontal quando algum descendente transborda. */ html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0; font-family:var(--font-sans); background:var(--bg-0); color:var(--text); line-height:1.55; font-weight:400; letter-spacing:-.005em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{list-style:none;margin:0;padding:0} h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;letter-spacing:-.022em;margin:0;line-height:1.1} p{margin:0} ::selection{background:var(--primary);color:#fff} /* Grade e brilho ambiente globais */ body::before{ content:""; position:fixed;inset:0; background: radial-gradient(800px 600px at 80% -10%, rgba(13,110,233,.18), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(58,141,255,.10), transparent 60%), radial-gradient(900px 700px at 50% 110%, rgba(13,110,233,.12), transparent 60%); pointer-events:none; z-index:0; } body::after{ content:""; position:fixed;inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); pointer-events:none; z-index:0; } /* container principal */ .container{ width:100%; max-width:1240px; margin:0 auto; padding:0 28px; position:relative; z-index:1; } /* ======================================================== NAVBAR — efeito vidro ao rolar ======================================================== */ .nav{ position:fixed; top:0;left:0;right:0; z-index:100; padding:18px 0; transition:padding .35s var(--ease-out), border-color .35s var(--ease-out); border-bottom:1px solid transparent; } /* fundo/blur do header num pseudo-elemento à parte, não direto no .nav — `backdrop-filter` (e `filter`) num elemento cria um "containing block" novo pra qualquer descendente com position:fixed. .nav__menu (a gaveta mobile), .nav__close e .nav__toggle são todos position:fixed e descendentes de .nav — com o backdrop-filter direto no .nav, ao rolar a página (`.nav.scrolled` liga o backdrop-filter) o fixed desses elementos passava a ser relativo à CAIXA DO .nav (~90-120px de altura) em vez do viewport inteiro, então a gaveta ficava espremida/cortada dentro dessa altura pequena em vez de cobrir a tela toda — só acontecia com a página rolada porque só `.scrolled` tinha backdrop-filter (no topo, sem `.scrolled`, o .nav não tem filter nenhum, então o bug não aparece). Um ::before não é ancestral de .nav__menu/.nav__close/.nav__toggle (são todos irmãos dentro de .nav), então mover o backdrop-filter pra cá resolve sem tirar o efeito visual — o pseudo-elemento cobre a mesma área (inset:0) atrás de tudo (z-index:-1). */ .nav::before{ content:''; position:absolute;inset:0;z-index:-1; background:transparent; } /* sem transition de background/backdrop-filter de propósito — pedido explícito do usuário: animar os dois juntos (opacidade do branco subindo ao mesmo tempo que o blur) passava por um estado intermediário de "vidro transparente" (branco parcial + blur parcial) bem visível antes de chegar no branco opaco final. A troca agora é instantânea junto com o toggle de `.scrolled` — sai do topo 100% transparente e vira vidro branco de uma vez, sem gradiente perceptível no meio do caminho. */ .nav.scrolled{ padding:10px 0; border-bottom:1px solid rgba(11,15,26,.08); box-shadow:0 10px 40px -20px rgba(11,15,26,.25); } /* fundo branco glassmórfico ao rolar — pedido explícito do usuário, no lugar do vidro escuro que a barra usava antes (mesma técnica de sempre, só invertendo a paleta: branco quase opaco + blur, em vez de escuro). */ .nav.scrolled::before{ background:rgba(255,255,255,.75); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); } .nav__inner{ display:flex;align-items:center;justify-content:space-between;gap:24px; } .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.02em} .brand img,.brand video{height:34px;width:auto;display:block} /* troca de logo ao rolar — pedido explícito do usuário: a logo negativa (branca, pensada pro fundo escuro/transparente do topo da página) some e dá lugar à colorida assim que a barra vira o vidro branco acima, pro contraste continuar bom. Os dois