/* ============================================================ native-app.css — camada de "cara de app" aplicada SÓ dentro do app Capacitor. Ativada por (capacitor-bridge.js / inline no _Layout). No navegador (sem a classe) nada disto vale → o site web fica intacto. Fase 7B. ============================================================ */ /* Mata comportamentos de browser que entregam "isto é web". */ html.cap-native, html.cap-native body { overscroll-behavior: none; } /* sem glow/bounce */ html.cap-native body { -webkit-user-select: none; user-select: none; /* sem seleção de texto */ -webkit-touch-callout: none; /* sem callout de long-press */ -webkit-tap-highlight-color: transparent; /* sem flash cinza no toque */ } /* digitação continua selecionável */ html.cap-native input, html.cap-native textarea, html.cap-native [contenteditable] { -webkit-user-select: text; user-select: text; } /* O app não usa o cabeçalho/rodapé de site — quem navega é a barra de abas. */ html.cap-native > body header.sticky { display: none; } html.cap-native footer { display: none; } /* respiro pro notch no topo (a flow-bar vira o topo visível) e pra barra de abas embaixo */ html.cap-native .flow-bar { padding-top: env(safe-area-inset-top); } html.cap-native main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* Máscara de transição: fade escuro entre páginas (mata o "flash" de navegação web). */ #capTrans { position: fixed; inset: 0; background: #0d1320; z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .18s ease; } html.cap-native #capTrans.show { opacity: 1; pointer-events: auto; } /* Barra de abas inferior (estilo app). Escondida no navegador. */ #capTabs { display: none; } html.cap-native #capTabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(13, 19, 32, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid rgba(255, 255, 255, .08); padding-bottom: env(safe-area-inset-bottom); } #capTabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 0 7px; min-height: 52px; color: #94a3b8; font-size: 11px; font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; } #capTabs a .ic { font-size: 20px; line-height: 1; } #capTabs a.active { color: #34d399; } #capTabs a:active { background: rgba(255, 255, 255, .04); }