/* ── barra.css ── */ /* A barra de navegação do espelho — UMA, em todas as páginas. * * Antes deste arquivo havia NOVE cabeçalhos diferentes no site, um por * família de captura, cada um com o seu próprio hash de escopo do Vue * (`data-v-105bb0ce`, `4194e554`, `7ce6e420`, `8fe1a67c`, …). Como o estilo * da origem é escopado por esse hash, "o mesmo botão" tinha altura, sombra e * hover diferentes de página para página — foi isso que o dono viu como * "tem abas que o navbar muda". * * 🔑 Enquanto o estilo vier do escopo da captura, cada página tem o cabeçalho * da página de onde ela foi capturada. Unificar não é ajustar as nove: é * deixar de depender delas. * * Por isso aqui não há UMA regra que dependa de classe da origem. Tudo o que * a barra desenha nasce neste arquivo, e o único elo com o resto da página é * a altura: `--navigation-height` continua sendo respeitada, porque o corpo * de várias telas reserva espaço por ela. * * ⚠️ Nenhum `rem` aqui. A raiz do site é `13.33vw` (~240px numa janela de * 1800), então `1rem` escrito à mão vale ~240px e o layout explode sem erro * nenhum. A guarda `_tools/checa_css.py` reprova o build se voltar. */ /* ── tokens ──────────────────────────────────────────────────────────────── * * Próprios, com prefixo. Derivam dos tokens do site (`--bg-1`, `--text-1`, * `--color-blue` = #f7931a) mas não os LEEM: uma tela que redefina `--bg-2` * para o painel dela não pode mudar o cabeçalho junto. * * Moram em `.oc-b`, que é a classe das DUAS raízes — a barra e a gaveta. A * gaveta é filha do ``, não da barra, e propriedade custom desce pela * árvore: declarada só na barra, a gaveta nasceria sem cor nenhuma. */ .oc-b { --ocb-h: var(--navigation-height, 65px); --ocb-tinta: #FFFFFF; --ocb-tinta-2: rgba(255, 255, 255, .74); --ocb-tinta-3: rgba(255, 255, 255, .54); --ocb-fundo: #020202; --ocb-superficie: #141519; --ocb-superficie-2: #202127; /* 🔴 Os menus caíam em `--ocb-superficie` — um cinza médio e AZULADO, e o * mesmo tom da barra atrás deles. Dois blocos de tom parecido empilhados, * sem hierarquia entre eles, é o que dá cara de gerado (dono, 28/08/2026). * E o azul era forasteiro: o site é preto #020202 com superfícies #0b0b0b. * * 🔑 O menu tem de parecer que está SOBRE a barra, não recortado dela. * Escurecer o painel faz isso sem precisar clarear coisa nenhuma. * * `--ocb-superficie` FICA como está: ela também pinta a pastilha de saldo, * que vive DENTRO da barra e some se ficar preta. Superfície de menu e * superfície de barra deixaram de ser a mesma coisa porque nunca foram. */ --ocb-menu: #0A0A0A; --ocb-menu-realce: rgba(255, 255, 255, .055); /* A curva do `blur-out-up` (21st.dev): sai rápido e assenta devagar. */ --ocb-mola: cubic-bezier(.22, 1, .36, 1); --ocb-fio: rgba(255, 255, 255, .10); --ocb-fio-forte: rgba(255, 255, 255, .20); --ocb-marca: #f7931a; --ocb-marca-hover: #ffa63d; --ocb-marca-tinta: #120800; --ocb-sombra: 0 20px 44px -14px rgba(0, 0, 0, .78), 0 3px 10px -3px rgba(0, 0, 0, .55); /* Véu sobre mídia: 0,66 de preto por cima do vídeo. Medido contra o quadro * mais claro possível (branco puro): o fundo efetivo fica em #575757, e * texto branco em cima dá 6,0:1 — acima do piso de 4,5:1. Com 0,55 daria * 4,0:1 e o rótulo sumiria na arquibancada, que é o defeito relatado. */ --ocb-veu: rgba(2, 2, 2, .66); } /* ── cortina de carregamento (30/08/2026) ────────────────────────────── * A captura da origem pinta ANTES de o nosso JS montar cabeçalho, abas e * terminal: o `DOMContentLoaded` só chega depois de 580 KB de HTML e 29 * scripts, e nesse intervalo (≈1 s no telefone; 1,9 s medido a 4G/CPU 4×) * o olho via o site antigo, depois um pulo de 60 px quando o cabeçalho * entrava, e peças sobrepostas por um quadro. Dono, 30/08: "todas as páginas * carregam algo antigo por 1 segundo depois entra no front atual". * * 🔑 O que o JS faz no fim, o CSS faz no começo: o `body` nasce invisível e * o `barra.js` marca `html.oc-pronto` no início de `inicia()`, na MESMA * tarefa do `DOMContentLoaded` em que abas e terminal montam ⇒ uma pintura * só, já com tudo. `opacity`, não `visibility`: filho com `visibility: * visible` explícito atravessaria a cortina; opacidade ninguém atravessa. O * fundo escuro continua (o canvas herda o fundo do body mesmo transparente). * * 🔑 Se o JS falhar, a animação revela em 4 s: página lenta é melhor que * página cega. `barra.css` e `barra.js` entram sempre juntos (861/861). */ /* 🔑 A cortina vale para o CONTEÚDO, não para o `body` inteiro: a tela de * carregamento é filha direta do body e precisa ficar VISÍVEL enquanto tudo o * mais está escondido. `opacity` num pai cria contexto de empilhamento — filho * nenhum escapa —, então exemtar o loader só é possível trocando o alvo. * Continua sendo `opacity` e não `visibility` pelo motivo de 30/08: filho com * `visibility: visible` atravessaria a cortina; opacidade ninguém atravessa. * Entre os filhos diretos do body só o `#__nuxt` desenha; o resto são * `