/* ============================================================ ACCANTA · CAMADA 2 — MARCA (padrão: Accanta) Papéis, não cores. Componentes só podem citar os papéis abaixo ou tokens da fundação; hex de marca em componente reprova o build (tests/test_fiscal_css.py). MARCA POR CLIENTE (produto de cotação): este bloco inteiro é gerado a partir do cadastro da rede — kit derivado e validado em AA antes de gravar (4,5:1 texto; 3:1 componentes) — e servido no lugar deste arquivo. Nenhuma tela é editada. MARCAS DE INDÚSTRIA NA LOJA (decisão de 26/08/2026): - A navegação principal da loja é por CATEGORIA/necessidade (mamadeira, chupeta, bico, copo...). Marca de venda (Kinddy, Nenny, Mundo Bita...) é atributo do produto e filtro secundário — NUNCA a porta de entrada. Onde as linhas concorrem, aparecem lado a lado com o degrau de preço visível na mesma tela (é o que a consultoria de mix mostra). - A tela permanece Accanta. Marca de indústria aparece no logo do produto (imagem intocada, respeitando a área de segurança do manual da marca) e em acento discreto; a plataforma não vira camaleão por indústria. UI sempre em Archivo — não se licencia a tipografia das marcas (VAG Rounded fica só dentro dos logos, que entram como imagem). ============================================================ */ :root { /* Escala Accanta — só este arquivo a conhece */ --accanta-azul-950: #041838; --accanta-azul-900: #041E52; --accanta-azul-800: #062B76; --accanta-azul-700: #08348F; --accanta-azul-600: #0B3FA8; --accanta-azul-500: #2558C4; --accanta-azul-200: #BCCBF2; --accanta-azul-100: #DCE4F9; --accanta-azul-50: #EFF3FC; --accanta-amarelo-600: #E3B32A; --accanta-amarelo-500: #FBD24E; /* Papéis consumidos por toda tela */ --primaria: var(--accanta-azul-600); /* superfície de ação */ --primaria-hover: var(--accanta-azul-700); --primaria-ativa: var(--accanta-azul-800); --primaria-suave: var(--accanta-azul-50); /* fundos de apoio */ --primaria-media: var(--accanta-azul-200); /* bordas suaves */ --primaria-texto: var(--accanta-azul-600); /* links/texto (AA s/ branco) */ --sobre-primaria: var(--branco); /* texto sobre a primária */ --profunda: var(--accanta-azul-900); /* superfície de marca escura */ --profunda-2: var(--accanta-azul-800); --sobre-profunda: var(--branco); --sobre-profunda-suave: var(--accanta-azul-200); --acento: var(--accanta-amarelo-500); --acento-hover: var(--accanta-amarelo-600); --sobre-acento: var(--accanta-azul-950); --cor-foco: var(--accanta-azul-500); --anel-foco: 0 0 0 2px var(--branco), 0 0 0 4px var(--cor-foco); /* CAIXAS DE CONTENÇÃO DA LOGO — ajuste os tamanhos AQUI, e só aqui. As classes .logo-* em base.css consomem estas variáveis; o respiro de 25% da altura (mínimo 8px) é calculado automaticamente lá. */ --logo-cabecalho-largura: 200px; --logo-cabecalho-altura: 44px; --logo-entrada-largura: 260px; /* bloco de marca da tela de entrar */ --logo-entrada-altura: 58px; --logo-documento-largura: 220px; --logo-documento-altura: 64px; --logo-email-largura: 180px; --logo-email-altura: 48px; /* ---- LOLLY (indústria) — a PORTA da loja (02/09/2026) ---------- A porta é a primeira impressão da marca: cores MEDIDAS dos ativos oficiais (logo.png do acervo; respingos da capa do catálogo Nenny 2025) — nada inventado. O uso é pontual: hero da recepção, botão de entrar e o fio de cores da capa. A UI continua Accanta/Archivo; a logo entra como imagem, intocada. */ --lolly-marinho: #28307D; /* medido de logo.png (letra cheia) */ /* campo NENNY (06/09): magenta cheio da página institucional do catálogo (p.3 "Energia Verde/ISO/SEM BPA" e p.34 Material de PDV, que escreve texto branco sobre ele — precedente da marca). Contraste com branco: 4,0:1 — AA para texto grande/negrito; os corpos pequenos sobre magenta ficam em peso 600. */ --lolly-magenta: #E82E92; --sobre-magenta: #FFFFFF; --sobre-magenta-suave: rgba(255, 255, 255, .85); /* CONTRASTE SOBRE OS CAMPOS DE COR (decisão do Juninho, 24/09/2026): as cores da marca ficam EXATAMENTE como estão, em todo lugar — nenhum tom derivado de magenta, ciano ou roxo entra no código (trava em tests/test_revisao_bloco1_layout.py). Texto pequeno em branco sobre campo de cor vira TEXTO GRANDE EM NEGRITO (mínimo 18,7px com peso 700, ou 24px), como o catálogo da Lolly faz, e em branco SÓLIDO: aí a régua pede 3:1, e o magenta dá 4,01:1, o roxo 4,23:1. Onde nem isso chega (ciano 2,41:1, laranja 2,48:1, verde 1,95:1), a letra é o marinho da marca (4,8:1, 4,7:1, 5,9:1). */ /* controles do carrossel do banner (05/09/2026): brancos translúcidos que vivem sobre qualquer campo de cor da peça */ --banner-controle: rgba(255, 255, 255, .28); --banner-controle-vivo: rgba(255, 255, 255, .5); --banner-ponto: rgba(255, 255, 255, .45); --lolly-marinho-escuro: #1E2564; /* hover: o mesmo marinho, mais fundo (derivado) */ --lolly-ciano: #24B4E4; /* respingo da capa Nenny 2025 */ --lolly-laranja: #FC8424; /* respingo da capa Nenny 2025 */ --lolly-verde: #84CC54; /* respingo da capa Nenny 2025 */ --lolly-roxo: #7F72B3; /* respingo da capa Nenny 2025 */ /* véu do hero: a foto do acervo desvanece para o branco do cartão */ --porta-veu: linear-gradient(180deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .86) 78%, #FFFFFF 97%); /* sombra de leitura do nome da farmácia sobre a foto */ --porta-halo-texto: 0 1px 14px rgba(255, 255, 255, .9), 0 0 3px rgba(255, 255, 255, .9); } @media (max-width: 720px) { :root { --logo-cabecalho-largura: 160px; --logo-cabecalho-altura: 36px; --logo-entrada-largura: 220px; --logo-entrada-altura: 50px; } } /* ============================================================ LOGO — regras da marca branca (documentação normativa) FORMATOS NO CADASTRO - SVG é o formato preferido (vetor, escala sem perda em tela e em documento). - PNG é aceito se tiver fundo transparente e >= 512 px no maior lado; a plataforma grava como veio e AVISA que a qualidade de impressão em documento pode cair. - JPEG e demais formatos são recusados (sem transparência). CAIXAS DE CONTENÇÃO (classe .logo-caixa em base.css) O logo é encaixado por object-fit: contain — nunca cortado, nunca esticado. A caixa absorve horizontal, quadrado e vertical. Os TAMANHOS vivem nas variáveis --logo-* no topo deste arquivo (um lugar só para ajustar). Valores atuais: - Cabeçalho de aplicação: 200 x 44 (160 x 36 no celular) - Bloco de marca do login: 260 x 58 (220 x 50 no celular) - Documento emitido: 220 x 64 - E-mail: 180 x 48 Proporção extrema (> 8:1) gera aviso no cadastro: o logo ficaria ilegível na altura mínima. VERSÕES DA LOGO - Redes cliente (marca branca): duas versões no cadastro, para fundo claro e escuro. Se vier só uma, a plataforma mede a luminância das áreas opacas contra a primária e a profunda do cliente; contraste < 3:1 no contexto que falta gera AVISO antes de gravar, e o fallback tipográfico cobre aquele contexto até a segunda versão chegar. - Accanta: existe SÓ a versão amarela (logo-fundo-escuro.svg). REGRA GERAL DO SISTEMA: a logo amarela NUNCA vai sobre fundo claro. Se a posição não tiver superfície escura, cria-se uma (bloco --profunda) — como no topo do cartão de login, que é definitivo: nenhuma tela sonda uma versão para fundo claro (removido em 24/09/2026). Se ela um dia existir, as telas precisam ser ligadas a ela de propósito. FALLBACK SEM LOGO (classe .logo-fallback) O nome da rede em Archivo 600, dentro da MESMA caixa, com reticências se não couber. Nenhuma tela fica com buraco. RESPIRO Mínimo de 25% da altura da caixa em todo o redor (nunca menos de 8 px), embutido como padding da própria caixa — o logo não encosta em borda nem em texto. ASSINATURA "TECNOLOGIA ACCANTA" (classe .rodape-assinatura) Chave por rede (decisão comercial pendente): documentos de cotação e pedido levam OU não a assinatura. Quando ativa: só no rodapé, nunca no conteúdo, sempre secundária — corpo 11 px, cor n-500, alinhada à direita, menor que a marca da rede em qualquer hipótese. ============================================================ */