/* ============================================================================ DIWALLI · UNIFICAÇÃO VISUAL DO SITE PÚBLICO · ETAPA DESKTOP ---------------------------------------------------------------------------- Decisão do dono, 11/08/2026: a página /diwalli-atendimento é o padrão oficial do site público. Esta folha leva TODAS as páginas públicas ao mesmo desenho dela no desktop. 🔒 REGRA ABSOLUTA DESTE ARQUIVO: cada declaração vive dentro de @media (min-width:1025px). Nada aqui altera 320, 390 ou 768px: o comportamento em celular e tablet fica EXATAMENTE como está no main. A guarda backend/tests/dw-desktop-guard.test.js reprova qualquer regra escrita fora desse media query. Medido em Chromium a 1440px antes desta folha (o que já estava certo e o que não estava): página body cabeçalho wrap alternador de tema atendimento (ref) #F4F6FB #4F46E5 1120px não clientes #F4F6FB #4F46E5 1120px SIM blog + 25 posts #F4F6FB #4F46E5 1120px SIM quem-somos #F4F6FB #4F46E5 1120px SIM parceiros #FFFFFF #4F46E5 1120px SIM home (/) #080B16 escuro 1140px SIM Ou seja: a barra roxa, o fundo claro e a largura já eram quase iguais em cinco páginas. O que destoava era a Home (a única com data-theme="dark" cravado no ): a largura dela, o branco do Parceiros, o alternador de tema em toda página menos a referência, e o accent de produto pintando a casca do Pulse, do Connect e do Estoque. ============================================================================ */ /* ── ANDAIME DE RÓTULO · a ÚNICA regra desta folha fora do @media ──────────── "Entrar" e "Agendar demonstração" são os rótulos da referência; as outras páginas dizem "Acessar" e "Agendar apresentação". Trocar o texto no HTML mudaria também o celular, que esta etapa não pode tocar; então cada cabeçalho carrega os dois e o CSS escolhe por faixa. Esta linha PRECISA ficar fora do media query: é ela que mantém o celular idêntico ao main, escondendo o rótulo de desktop por padrão. Sem ela, as duas versões apareceriam juntas no celular, exatamente o que a etapa proíbe. Por ser display:none, o rótulo oculto sai da árvore de acessibilidade: o leitor de tela recebe UM nome só, o visível. É andaime declarado. Quando a etapa mobile for autorizada, sobra um rótulo só no HTML e este bloco inteiro desaparece. ============================================================================ */ .dw-rot-desktop{display:none} @media (min-width:1025px){ /* ── 1 · HOME: a única página com o tema escuro cravado ──────────────────── Ela é 100% tokenizada e JÁ TRAZ a paleta clara pronta (o bloco :root[data-theme="light"] do próprio arquivo). Aqui só reaplicamos esses mesmos valores; não é inversão automática nem paleta nova. A dupla [data-theme][data-theme] existe para vencer, por especificidade (0,3,0), o :root[data-theme="dark"] (0,2,0) que a página declara depois desta folha. Sem isso, a ordem do decidiria. */ html[data-theme][data-theme]{ --bg:#F5F7FC; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F1F4FB; --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.20); --brand-2:#4F46E5; --brand-3:#6366F1; --glow:rgba(99,102,241,.14); --good:#15803D; --bad:#DC2626; --warn:#B45309; --t-1:#0F172A; --t-2:#334155; --t-3:#52627A; --t-4:#7C8AA0; --topo:rgba(245,247,252,.86); --codigo:rgba(15,23,42,.05); /* largura interna: 1140 → 1120, a da referência */ --wrap:1120px; } /* ── 2 · CABEÇALHO ROXO, IGUAL EM TODA PÁGINA ────────────────────────────── O site tem três cabeçalhos legados (.top das páginas escuras, .ds-topbar das de produto, .nav do Quem somos). Cinco já eram roxos; a Home era translúcida sobre fundo escuro. Aqui os três recebem o mesmo desenho: mesma cor, mesma altura, mesma borda. */ header.top, header.nav, header.ds-topbar{ background:#4F46E5; border-bottom:1px solid #4338CA; -webkit-backdrop-filter:none;backdrop-filter:none; } header.top .wrap, header.nav .wrap, header.ds-topbar .ds-wrap{max-width:1120px;height:64px} /* CTA do topo: branco sobre o roxo, como na referência. Sem isto, a Home fica com um botão índigo sobre barra índigo: invisível. */ header.top .top-cta,header.nav .nav-cta,header.top .nav-cta{ background:#fff;color:#4F46E5;border:1px solid rgba(255,255,255,.9)} header.top .top-cta:hover,header.nav .nav-cta:hover,header.top .nav-cta:hover{ background:#EEF2FF;color:#4338CA} /* marca, links e ações em branco sobre o roxo */ header.top .brand,header.nav .brand, header.top .top-nav a,header.nav .nav-links a, header.top .top-entrar,header.top .enter,header.nav .nav-enter{color:#fff} header.top .top-nav a:hover,header.nav .nav-links a:hover{color:rgba(255,255,255,.78)} /* ── 2b · PÁGINAS LEGAIS E LOGIN ─────────────────────────────────────────── Privacidade, Termos e Exclusão de Dados usam

sem classe, branco. São as páginas que o App Review da Meta abre: precisam parecer o mesmo site. O conteúdo jurídico não é tocado, só a casca. */ header:not([class]){background:#4F46E5;border-bottom:1px solid #4338CA} header:not([class]) *{color:#fff;border-color:rgba(255,255,255,.35)} /* [href] eleva a especificidade para (0,2,2), acima do .nav a.voltar (0,2,1) que /privacidade usa para pintar o link de cinza. Sem isso, o link fica ilegível sobre o roxo. */ header:not([class]) a[href],header:not([class]) span,header:not([class]) p{color:#fff} header:not([class]) a:hover{color:rgba(255,255,255,.78)} /* ── 3 · FUNDO INSTITUCIONAL ─────────────────────────────────────────────── Parceiros era o único branco puro. #F4F6FB é o --page do design system. */ body{background:#F4F6FB} /* ── 4 · SEM ALTERNADOR DE TEMA NO DESKTOP COMERCIAL ─────────────────────── Decisão do dono: a identidade visual do site de venda não é preferência do visitante. O botão continua existindo no HTML e no celular; some só aqui. A área autenticada NÃO é atingida: esta folha só é carregada por página pública, e o alternador de lá vem da casca (diwalli-appshell.js). */ [data-tema-toggle],.tema-btn,#dwTema{display:none!important} /* o espaço reservado para o botão flutuante deixa de ser necessário */ header.top .wrap,header.ds-topbar .ds-wrap,header.nav .wrap{padding-right:24px} /* ── 5 · CASCA SEMPRE ROXA, PRODUTO SÓ NO CONTEÚDO ───────────────────────── Decisão do dono: "cabeçalho, rodapé, CTA principal e estrutura continuam roxos; a cor do produto vive em etiqueta, gráfico, detalhe e ícone". O [data-produto] do pintava a casca inteira. Aqui a casca volta à marca; a etiqueta (.ds-tag) e os ícones seguem com a cor do produto. */ [data-produto] .ds-btn-primary{background:#4F46E5} [data-produto] .ds-btn-primary:hover{background:#4338CA} [data-produto] .ds-h1 .hl,[data-produto] .ds-title .hl{color:#4F46E5} [data-produto] .ds-topbar,[data-produto] .ds-footer{--accent:#4F46E5;--accent-text:#4338CA} /* ── 6 · NENHUMA IMAGEM ABRE O ARQUIVO BRUTO ─────────────────────────────── No Pulse e no Connect a tela do produto é : clicar leva o visitante ao arquivo da imagem, fora do site. Desligar o clique aqui resolve no desktop sem tocar no HTML, e portanto sem tocar no celular. A remoção do vem no PR de cada página. */ a.ds-hero-visual,a.ds-shot{pointer-events:none;cursor:default} /* ── 7 · RODAPÉ DE QUATRO COLUNAS ────────────────────────────────────────── Marca · Produtos · Empresa · Legal. A coluna Legal é exigência do App Review da Meta e não pode cair sozinha numa segunda linha. */ .ds-footer .cols,.ds-footer .cols--4{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px 28px} /* ── 8 · RÓTULOS ÚNICOS NO TOPO ──────────────────────────────────────────── "Entrar" e "Agendar demonstração" são os rótulos da referência. As outras páginas dizem "Acessar" e "Agendar apresentação". Trocar o texto no HTML mudaria também o celular, que esta etapa não pode tocar; então cada página carrega os dois rótulos e o CSS escolhe por faixa. É andaime declarado: quando a etapa mobile for autorizada, sobra um rótulo só. */ .dw-rot-mobile{display:none} .dw-rot-desktop{display:inline} /* o rótulo de desktop herda o layout do que o contém */ .ds-btn .dw-rot-desktop,.top-cta .dw-rot-desktop,.nav-cta .dw-rot-desktop{white-space:nowrap} /* ── 9 · ZERO ESTOURO HORIZONTAL ─────────────────────────────────────────── Item de grade não pode ser mais largo que a coluna: min-width:auto é o padrão do flex/grid e é o que empurra a página de lado. */ .ds-grid > *,.ds-hero > *,.ds-hero--split > *{min-width:0} /* ── 10 · COOKIES E WHATSAPP NÃO SE COBREM ───────────────────────────────── O banner de cookies é fixo embaixo à esquerda e o botão do WhatsApp embaixo à direita. Nas páginas em que os dois aparecem juntos, o banner encostava no botão. Aqui o banner reserva a faixa do botão e fica abaixo dele na pilha, para nunca cobrir um controle. */ #dwCookies,.dw-cookies,[class*="cookie"][class*="banner"]{z-index:70} .wa-fab,#waFab,[class*="wa-fab"]{z-index:80} }