/* ═══════════════════════════════════════════════════════════ BOTTOM NAVIGATION (mobile) — Autenticou Carregado depois de app.css/theme.css. Barra fixa inferior, exclusiva de telas ≤991.98px (mesmo breakpoint em que o sidebar vira off-canvas). Os itens são montados por perfil em assets/js/bottom-nav.js — este arquivo cuida da aparência, das microinterações e de reservar o espaço para não cobrir conteúdo. A superfície é montada em camadas, como um componente de sistema: 1. vidro (blur + saturação) com gradiente de luz vindo de cima; 2. hairline superior em gradiente, que esvanece nas pontas; 3. scrim acima da barra, para o conteúdo sumir antes de encostar; 4. sombra dupla (ambiente larga + contato curta). Regras que valem para tudo aqui: · nada aparece sem a classe `bnav-on` no (o JS só a coloca depois que o app está logado e montou pelo menos 2 itens); · z-index 1035 → acima do FAB do WhatsApp (1030) e abaixo dos modais do Bootstrap (1050+), para nunca competir com um diálogo; · toda animação tem contraparte em prefers-reduced-motion. ═══════════════════════════════════════════════════════════ */ :root { --bnav-h: 64px; /* altura útil, sem a safe area */ --bnav-h-min: 47px; /* modo compacto (rolando) */ --bnav-safe: env(safe-area-inset-bottom, 0px); /* home indicator / gesture bar */ --bnav-total: calc(var(--bnav-h) + var(--bnav-safe)); --bnav-surface: rgba(255,255,255,.82); --bnav-sheen: rgba(255,255,255,.55); /* luz no topo da barra */ --bnav-hair: rgba(13,27,42,.14); /* hairline superior */ --bnav-scrim: rgba(244,247,251,.6); /* fade do conteúdo (= --bg-app) */ --bnav-shadow: 0 -14px 34px -20px rgba(13,27,42,.34), 0 -2px 8px -6px rgba(13,27,42,.18); --bnav-active: var(--blue, #1D4ED8); --bnav-idle: var(--text-muted, #94A3B8); --bnav-pill: rgba(29,78,216,.11); --bnav-pill-2: rgba(29,78,216,.03); --bnav-pill-ring: rgba(29,78,216,.16); --bnav-glow: rgba(29,78,216,.34); --bnav-track: #3B82F6; /* fim do gradiente do traço */ /* Anel do badge: precisa ser OPACO — sobre a superfície translúcida um anel semitransparente deixaria o ícone aparecer por baixo do número. */ --bnav-ring: #FFFFFF; --bnav-spring: cubic-bezier(.34,1.32,.42,1); /* mola contida, sem repique feio */ --bnav-ease: cubic-bezier(.4,0,.2,1); } [data-theme="dark"] { --bnav-surface: rgba(17,26,43,.84); --bnav-sheen: rgba(255,255,255,.06); --bnav-hair: rgba(255,255,255,.14); --bnav-scrim: rgba(11,18,32,.6); --bnav-shadow: 0 -16px 38px -20px rgba(0,0,0,.72), 0 -2px 8px -6px rgba(0,0,0,.5); --bnav-active: #7BA5F5; --bnav-pill: rgba(123,165,245,.17); --bnav-pill-2: rgba(123,165,245,.04); --bnav-pill-ring: rgba(123,165,245,.22); --bnav-glow: rgba(123,165,245,.36); --bnav-track: #A9C4FA; --bnav-ring: #111A2B; } /* ── Container ───────────────────────────────────────────── */ #bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: none; /* ligado só no mobile + bnav-on */ height: var(--bnav-total); padding-bottom: var(--bnav-safe); background: linear-gradient(180deg, var(--bnav-sheen) 0%, transparent 34%), var(--bnav-surface); box-shadow: var(--bnav-shadow); -webkit-backdrop-filter: saturate(190%) blur(22px); backdrop-filter: saturate(190%) blur(22px); transform: translate3d(0,0,0); transition: transform .38s var(--bnav-ease), opacity .22s linear, height .32s var(--bnav-ease); will-change: transform; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* Camada 2 — hairline que nasce e morre nas pontas (borda reta de ponta a ponta é o que faz uma barra parecer "colada" em cima do conteúdo). */ #bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--bnav-hair) 18%, var(--bnav-hair) 82%, transparent 100%); pointer-events: none; } /* Camada 3 — scrim: o conteúdo desaparece nos últimos pixels antes do vidro, em vez de ser cortado por uma linha dura. */ #bottom-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: linear-gradient(to top, var(--bnav-scrim) 0%, transparent 100%); pointer-events: none; } /* Navegadores sem backdrop-filter (Android antigo/Firefox mobile) recebem uma superfície opaca — translúcido sem blur vira texto ilegível. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #bottom-nav { background: var(--bg-card, #FFFFFF); } } @media (max-width: 991.98px) { body.bnav-on #bottom-nav { display: block; } /* Espaço no fim do conteúdo — a barra flutua sobre a página, então a última linha/botão de cada seção precisa de folga para não ficar debaixo dela. */ body.bnav-on #content-area { padding-bottom: calc(var(--bnav-total) + 20px); } /* Elementos flutuantes existentes sobem junto. */ body.bnav-on #wa-support { bottom: calc(var(--bnav-total) + 14px); } body.bnav-on #toast-container { bottom: calc(var(--bnav-total) + 4px); } /* O menu completo (sidebar off-canvas) termina acima da barra. */ body.bnav-on #sidebar { padding-bottom: var(--bnav-total); } } /* Contrapartida do viewport-fit=cover: em paisagem com notch, o conteúdo e os itens das pontas não podem entrar embaixo da borda arredondada. */ @media (max-width: 991.98px) and (orientation: landscape) { body.bnav-on #main-content { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body.bnav-on #sidebar { padding-left: env(safe-area-inset-left, 0px); } #bottom-nav .bnav-items { padding-left: calc(4px + env(safe-area-inset-left, 0px)); padding-right: calc(4px + env(safe-area-inset-right, 0px)); } } /* Sai de cena quando disputaria espaço: modal aberto ou teclado virtual. */ body.modal-open #bottom-nav, body.bnav-hidden #bottom-nav { transform: translate3d(0, 116%, 0); opacity: 0; pointer-events: none; } /* ── Modo compacto (durante a rolagem) ───────────────────── */ /* Rolando para baixo a barra se recolhe: os rótulos colapsam e a altura cai, devolvendo ~17px de tela. NÃO esconde a barra — o destino continua a um toque, que é o que separa "sofisticado" de "some do nada". */ #bottom-nav.is-compact { --bnav-h: var(--bnav-h-min); height: calc(var(--bnav-h-min) + var(--bnav-safe)); } #bottom-nav.is-compact .bnav-label { max-height: 0; opacity: 0; transform: translateY(-3px); } #bottom-nav.is-compact .bnav-item { gap: 0; } #bottom-nav.is-compact .bnav-item.is-active .bnav-ico { transform: translateY(0) scale(1.06); } #bottom-nav.is-compact .bnav-indicator::before { top: 8px; height: 31px; } /* ── Trilho de itens ─────────────────────────────────────── */ .bnav-items { position: relative; display: flex; align-items: stretch; height: var(--bnav-h); padding: 0 4px; transition: height .32s var(--bnav-ease); } /* ── Indicador da página ativa ───────────────────────────── */ /* Uma camada que desliza: pílula ao fundo (::before) + traço luminoso encostado na borda superior (::after). Posição em --bnav-x e largura em --bnav-w, ambas escritas pelo JS. */ .bnav-indicator { position: absolute; top: 0; left: 0; width: var(--bnav-w, 20%); height: 100%; pointer-events: none; transform: translate3d(var(--bnav-x, 0), 0, 0); transition: transform .5s var(--bnav-spring), width .3s var(--bnav-ease); opacity: 0; will-change: transform; } .bnav-indicator.is-ready { opacity: 1; } .bnav-indicator::before { content: ''; position: absolute; /* Pílula alinhada ao ícone (o rótulo fica fora dela): o realce é do símbolo, não do bloco todo. */ top: 9px; left: 50%; width: 56px; height: 31px; margin-left: -28px; border-radius: 12px; background: linear-gradient(180deg, var(--bnav-pill) 0%, var(--bnav-pill-2) 100%); box-shadow: inset 0 0 0 1px var(--bnav-pill-ring); transition: top .3s var(--bnav-ease), height .3s var(--bnav-ease); } .bnav-indicator::after { content: ''; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--bnav-active), var(--bnav-track)); box-shadow: 0 1px 12px var(--bnav-glow); transform-origin: center top; transition: transform .42s var(--bnav-spring); } /* Elástico: enquanto o indicador viaja, o traço estica no sentido do movimento e volta ao pousar. É o detalhe que faz a troca de aba parecer um material, e não um retângulo teleportando. */ .bnav-indicator.is-moving::after { transform: scaleX(var(--bnav-stretch, 2.4)) scaleY(.72); } /* Sem item ativo (estado defensivo: o JS sempre tem um alvo). */ .bnav-indicator.is-off { opacity: 0; } /* ── Item ────────────────────────────────────────────────── */ .bnav-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px; border: 0; background: none; color: var(--bnav-idle); font-family: 'Sora', sans-serif; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: color .24s var(--bnav-ease); } .bnav-item:focus { outline: none; } .bnav-item:focus-visible { outline: 2px solid var(--bnav-active); outline-offset: -4px; border-radius: 14px; } .bnav-ico { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; font-size: 18px; line-height: 1; transition: transform .34s var(--bnav-spring), filter .28s var(--bnav-ease); } .bnav-ico i { display: block; } .bnav-label { max-width: 100%; max-height: 15px; font-size: 10px; font-weight: 500; letter-spacing: .012em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; transition: opacity .26s var(--bnav-ease), max-height .3s var(--bnav-ease), transform .3s var(--bnav-ease), font-weight .2s linear; } /* Estado ativo — o ícone sobe, ganha peso de cor e um brilho curto que o descola do fundo; o rótulo firma em 600. */ .bnav-item.is-active { color: var(--bnav-active); } .bnav-item.is-active .bnav-ico { transform: translateY(-1px); filter: drop-shadow(0 3px 7px var(--bnav-glow)); } .bnav-item.is-active .bnav-label { font-weight: 600; opacity: 1; } /* Toque: afunda o ícone; o dedo enxerga a resposta antes da navegação. */ .bnav-item.is-pressed .bnav-ico { transform: scale(.84); } .bnav-item.is-pressed.is-active .bnav-ico { transform: scale(.88) translateY(-1px); } /* Pulso do ícone ao virar a página ativa. */ .bnav-item.is-pop .bnav-ico { animation: bnavPop .46s var(--bnav-spring); } @keyframes bnavPop { 0% { transform: scale(.8) translateY(1px); } 50% { transform: scale(1.18) translateY(-3px); } 100% { transform: scale(1) translateY(-1px); } } /* Ponteiro fino (tablet com mouse / desktop pequeno): leve elevação. */ @media (hover: hover) and (pointer: fine) { .bnav-item:hover { color: var(--bnav-active); } .bnav-item:hover .bnav-ico { transform: translateY(-2px); } } /* ── Entrada em cascata ──────────────────────────────────── */ /* A barra sobe uma vez, quando monta, e os itens chegam em sequência. --i é escrito pelo JS em cada botão. */ #bottom-nav.is-entering { animation: bnavRise .52s var(--bnav-ease) both; } #bottom-nav.is-entering .bnav-item, #bottom-nav.is-swapping .bnav-item { animation: bnavItemIn .46s var(--bnav-spring) both; animation-delay: calc(60ms + var(--i, 0) * 42ms); } @keyframes bnavRise { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes bnavItemIn { from { opacity: 0; transform: translateY(9px) scale(.94); } to { opacity: 1; transform: none; } } /* ── Ripple de toque ─────────────────────────────────────── */ .bnav-ripple { position: absolute; top: 0; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, var(--bnav-pill-ring) 0%, transparent 68%); pointer-events: none; transform: scale(0); opacity: .95; animation: bnavRipple .58s cubic-bezier(.22,1,.36,1) forwards; } @keyframes bnavRipple { to { transform: scale(7.5); opacity: 0; } } /* ── Badge de contagem ───────────────────────────────────── */ .bnav-badge { position: absolute; top: -5px; right: -9px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: linear-gradient(180deg, #F04545 0%, var(--red, #DC2626) 100%); border: 2px solid var(--bnav-ring); color: #fff; font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; box-shadow: 0 2px 6px rgba(220,38,38,.36); transform: scale(0); transition: transform .34s var(--bnav-spring); } .bnav-badge.is-on { transform: scale(1); } /* Variante ponto (sem número), usada no botão "Menu". */ .bnav-badge.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -5px; font-size: 0; } /* Um único anel ao aparecer/mudar de valor — avisa sem ficar piscando. */ .bnav-badge.is-ping::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--red, #DC2626); animation: bnavPing .9s cubic-bezier(.22,1,.36,1) forwards; } @keyframes bnavPing { from { transform: scale(.8); opacity: .7; } to { transform: scale(2.1); opacity: 0; } } /* ── Botão "Menu" ────────────────────────────────────────── */ /* Dois ícones sobrepostos que se trocam com rotação quando o menu completo abre — o mesmo botão comunica abrir e fechar. */ .bnav-more .bnav-ico i { position: absolute; transition: opacity .26s var(--bnav-ease), transform .38s var(--bnav-spring); } .bnav-more .bnav-ico .bnav-ico-close { opacity: 0; transform: rotate(-90deg) scale(.5); } .bnav-more.is-open { color: var(--bnav-active); } .bnav-more.is-open .bnav-label { font-weight: 600; opacity: 1; } .bnav-more.is-open .bnav-ico-open { opacity: 0; transform: rotate(90deg) scale(.5); } .bnav-more.is-open .bnav-ico-close { opacity: 1; transform: rotate(0) scale(1); } /* A transição de entrada da página NÃO é feita aqui: o app.css já anima toda troca de seção (.content-section / @keyframes sectionFadeIn), e ela reinicia sozinha quando o d-none sai. Duplicar aqui só criaria duas animações concorrentes no mesmo elemento. */ /* ── Acessibilidade: menos movimento ─────────────────────── */ @media (prefers-reduced-motion: reduce) { #bottom-nav, .bnav-indicator, .bnav-indicator::before, .bnav-indicator::after, .bnav-ico, .bnav-label, .bnav-badge, .bnav-items, .bnav-more .bnav-ico i { transition-duration: .01ms !important; } #bottom-nav.is-entering, #bottom-nav.is-entering .bnav-item, #bottom-nav.is-swapping .bnav-item, .bnav-item.is-pop .bnav-ico, .bnav-badge.is-ping::after { animation: none !important; } .bnav-ripple { display: none !important; } /* Recolher a barra é movimento induzido por scroll: fica desligado. */ #bottom-nav.is-compact { --bnav-h: 64px; height: var(--bnav-total); } #bottom-nav.is-compact .bnav-label { max-height: 14px; opacity: .9; transform: none; } }