/* ========================================================================== ANONSHIELD — A CAMADA ESCURA (primeira passada) -------------------------------------------------------------------------- O tema.css define as variáveis; ESTE arquivo é o que de fato pinta o site de escuro. Sem ele, clicar no mascote trocava `data-tema` e mais nada acontecia, porque o CSS do tema WordPress não usa var(--...) — as cores estão escritas direto nos seletores. COMO OS SELETORES DAQUI FORAM ESCOLHIDOS Não foram no olho. Eu li os 155 KB de CSS embutido na home e listei TODAS as regras que pintam fundo claro: são 32, e cobrem seções com nome próprio (.mc-tp, .mc-hiw, .mc-bc4, .exc, .mc-cat, .mc-hero2). Este arquivo responde a essas 32, mais o cabeçalho e o corpo da página. POR QUE TUDO COM !important O CSS do site usa !important em quase tudo (só nas classes do cabeçalho já são 6 declarações forçadas). Para sobrescrever declaração forçada, a contra-declaração também tem de ser forçada — não é escolha, é a regra da cascata. A DECISÃO DO DONO, APLICADA AQUI Seção escura, CARD CLARO. As seções grandes viram escuras; os cartões brancos dentro delas continuam brancos, porque é onde ficam os logos dos produtos, que têm fundo branco assado no arquivo. É o que dispensa mexer nas 174 imagens. O QUE ESTA PASSADA AINDA NÃO COBRE O CSS do tema (800 KB minificados, 591 cores) e os 23 valores escritos dentro do HTML. Então vai sobrar canto claro. A ordem de ataque é: olhar, achar o canto, medir o seletor, acrescentar aqui. ========================================================================== */ /* -------------------------------------------------------------------------- 1) O CHÃO: página e corpo -------------------------------------------------------------------------- */ html[data-tema="escuro"], html[data-tema="escuro"] body { background-color: #101a20 !important; color: #e8eef2 !important; } /* os containers do Elementor herdam branco em vários lugares; deixá-los transparentes faz o fundo da página aparecer, em vez de eu ter que adivinhar a cor de cada um */ html[data-tema="escuro"] .e-con, html[data-tema="escuro"] .e-con-inner, html[data-tema="escuro"] .elementor-section, html[data-tema="escuro"] .elementor-container, html[data-tema="escuro"] .elementor-widget-container { background-color: transparent !important; } /* -------------------------------------------------------------------------- 2) O CABEÇALHO A barra de cima é clara, e o texto dela é #15232b !important (medido em .b1-lnk). Escurecer a barra sem clarear o texto deixaria texto escuro em fundo escuro — os dois têm de andar juntos. -------------------------------------------------------------------------- */ html[data-tema="escuro"] .elementor-location-header, html[data-tema="escuro"] .elementor-location-header .e-con, html[data-tema="escuro"] .elementor-location-header .e-con-inner { background-color: #17242c !important; } html[data-tema="escuro"] .b1-lnk, html[data-tema="escuro"] .b1-lnk * { color: #e8eef2 !important; } html[data-tema="escuro"] .b1-lnk svg { stroke: #e8eef2 !important; } /* o campo de busca: branco no claro */ html[data-tema="escuro"] .aws-search-form, html[data-tema="escuro"] .aws-wrapper, html[data-tema="escuro"] .aws-search-field { background-color: #0d1720 !important; color: #e8eef2 !important; border-color: #26363f !important; } html[data-tema="escuro"] .aws-search-field::placeholder { color: #7c8d99 !important; } /* -------------------------------------------------------------------------- 3) AS SEÇÕES DO SITE — as 32 regras medidas Cada uma destas eu encontrei pintando fundo claro no CSS embutido da home. -------------------------------------------------------------------------- */ /* ACHADO QUE SIMPLIFICOU TUDO: cada seção define as PRÓPRIAS variáveis CSS. Lendo o CSS de .mc-faq encontrei isto no começo dela: --navy:#004C6D; --ink:#132A36; --sub:#5B6B78; --line:#E2E7EA; --bg:#F7F7F7 e o resto da seção usa var(--ink), var(--sub), var(--line). Ou seja: em vez de caçar cada filho da seção e sobrescrever cor por cor, basta trocar as 5 variáveis. Os filhos acompanham sozinhos. É o caminho que eu tinha desejado desde o começo e que achei que não existia neste tema. .mc-faq e .mc-hero2 estavam FALTANDO nesta lista — era a faixa clara que sobrou atrás da FAQ. Eu tinha escurecido `.mc-faq details` (os itens) e esquecido `.mc-faq` (a seção). */ html[data-tema="escuro"] .mc-tp, html[data-tema="escuro"] .mc-hiw, html[data-tema="escuro"] .mc-bc4, html[data-tema="escuro"] .mc-cat, html[data-tema="escuro"] .mc-faq, html[data-tema="escuro"] .mc-hero2, html[data-tema="escuro"] .mc-cktrust, html[data-tema="escuro"] .exc { --navy: #4db3dc !important; --ink: #e8eef2 !important; --sub: #b9c8d2 !important; --line: #2c3f4a !important; --bg: #101a20 !important; background: #101a20 !important; background-color: #101a20 !important; color: #e8eef2 !important; } /* os títulos dessas seções tinham cor escrita à mão, sem variável */ html[data-tema="escuro"] .mc-faq .mcfaq-head h2, html[data-tema="escuro"] .mc-hiw h2, html[data-tema="escuro"] .exc h2 { color: #f2f7fa !important; } /* os quadradinhos de ícone dentro das seções: eram #eef3f6 */ html[data-tema="escuro"] .mc-bc4 .col .ic, html[data-tema="escuro"] .mc-hiw .mchiw-ic, html[data-tema="escuro"] .mc-hiw .mchiw-keyav, html[data-tema="escuro"] .mc-hiw .mchiw-keybox, html[data-tema="escuro"] .mc-hiw .mchiw-mg span { background-color: #17242c !important; color: #cfe0ea !important; } /* -------------------------------------------------------------------------- 4) OS CARDS TAMBÉM FICAM ESCUROS -------------------------------------------------------------------------- MUDANÇA DE DECISÃO. Antes eles ficavam brancos, porque o logo do produto tem fundo branco assado dentro do PNG — card escuro com logo desses deixaria um retângulo branco solto no meio. A saída não é escolher entre card escuro e logo legível: é conter o branco. O card fica escuro e a IMAGEM ganha um leito branco arredondado, do tamanho dela. Aí o branco vira moldura de propósito, e não vazamento. É o que se faz em loja quando o catálogo tem logo de terceiro que você não pode reprocessar. Um tom acima do fundo (#17242c contra #101a20) para o card se separar do fundo sem precisar de borda forte. -------------------------------------------------------------------------- */ html[data-tema="escuro"] .mc-hiw .mchiw-card, html[data-tema="escuro"] .mc-hiw .mchiw-key, html[data-tema="escuro"] .mc-hiw .mchiw-pill, html[data-tema="escuro"] .mc-cat .mccat-all, html[data-tema="escuro"] .mc-hero2 .mc-shop, html[data-tema="escuro"] .exc .exc-tab .exc-tab-c, html[data-tema="escuro"] .mc-faq details { background-color: #17242c !important; color: #e8eef2 !important; border-color: #2c3f4a !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .5) !important; } /* o texto dentro do card acompanha */ html[data-tema="escuro"] .mc-hiw .mchiw-card *, html[data-tema="escuro"] .mc-hiw .mchiw-key *, html[data-tema="escuro"] .mc-cat .mccat-all *, html[data-tema="escuro"] .mc-hero2 .mc-shop *, html[data-tema="escuro"] .exc .exc-tab .exc-tab-c *, html[data-tema="escuro"] .mc-faq details * { color: #d6e3ec !important; } /* LEITO BRANCO — só onde a imagem é LOGO com fundo branco assado. Tirei daqui as imagens da grade de produto: elas são FOTOS (a caixa do software sobre uma mesa), com fundo próprio. Leito branco em foto viraria uma moldura branca sem sentido em volta de uma imagem que já se resolve sozinha. Leito só faz sentido quando o arquivo é logo em fundo branco. */ html[data-tema="escuro"] .mchiw-card img, html[data-tema="escuro"] .mchiw-key img, html[data-tema="escuro"] .mccat-all img, html[data-tema="escuro"] .mc-shop img, html[data-tema="escuro"] .exc-tab-c img, html[data-tema="escuro"] .mchiw-viz img, html[data-tema="escuro"] .mccat-ic img, html[data-tema="escuro"] .mc-feat-logo img, html[data-tema="escuro"] .mc-bsoft-ic img { background-color: #ffffff !important; border-radius: 10px; padding: 6px; box-sizing: border-box; } /* -------------------------------------------------------------------------- 4b) OS CARDS DE PRODUTO — DUAS FAMÍLIAS DIFERENTES -------------------------------------------------------------------------- Eu tinha errado o alvo: escureci os cards do "como funciona" e deixei os de produto brancos, o que era pior que não mexer — com o card branco, o texto que eu havia clareado ficou branco em branco, ilegível. As duas famílias: .exc-item... a vitrine dos 37 softwares (feita neste projeto) uc_/ue_ ... a grade do plugin Unlimited Elements ATENÇÃO AO UNDERSCORE. A grade do plugin usa `uc_title`, `uc_content`, `ue_grid_item` — com underline, não hífen. Minha primeira medição procurou `uc-` e achou ZERO regra, o que me fez concluir errado que a grade não tinha estilo próprio. São dois padrões de nome convivendo no mesmo site. -------------------------------------------------------------------------- */ html[data-tema="escuro"] .exc-item, html[data-tema="escuro"] .exc-item-body, html[data-tema="escuro"] [class*="ue_grid_item"], html[data-tema="escuro"] .uc_content, html[data-tema="escuro"] .uc-items-wrapper > * { background-color: #17242c !important; border-color: #2c3f4a !important; color: #e8eef2 !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .5) !important; } /* O CONTAINER DA IMAGEM TAMBÉM — foi o que deixou as listras claras. O miolo de texto (.uc_content) escureceu, mas a moldura da imagem (.uc_post_image) continuou branca. A foto não preenche a largura toda dela, então o branco aparecia como duas listras verticais na esquerda e na direita de cada card. Fácil de não ver na pressa: parece borda, não fundo. */ html[data-tema="escuro"] .uc_post_image, html[data-tema="escuro"] .uc_post_image a, html[data-tema="escuro"] .exc-item-img, html[data-tema="escuro"] .exc-item-img a, html[data-tema="escuro"] .ue_grid_item_bottom, html[data-tema="escuro"] .ue_grid_prices, html[data-tema="escuro"] .ue_category_wrapper { background-color: #17242c !important; border-color: #2c3f4a !important; } /* nome do produto */ html[data-tema="escuro"] .exc-item-nome, html[data-tema="escuro"] .exc-item-nome a, html[data-tema="escuro"] .uc_title, html[data-tema="escuro"] .uc_title a { color: #f2f7fa !important; } /* a etiqueta da área (BIM / CAM / Engenharia) */ html[data-tema="escuro"] .exc-cat, html[data-tema="escuro"] .ue_category_label, html[data-tema="escuro"] .ue_category_wrapper a { color: #4db3dc !important; } /* preço e "Preço a definir" */ html[data-tema="escuro"] .exc-price, html[data-tema="escuro"] .uc_price, html[data-tema="escuro"] .uc_regular_price, html[data-tema="escuro"] .uc-sem-preco, html[data-tema="escuro"] .woocommerce-Price-amount { color: #cfdde6 !important; } /* -------------------------------------------------------------------------- 4c) O BOTÃO "ADICIONAR AO CARRINHO" Ele é verde e o texto dele é branco. A minha regra genérica de link estava pintando esse texto de azul claro sobre o verde — deu para ler no print que o dono mandou: o texto quase desaparecia. Aqui ele volta a ser branco, e o verde fica como está, que é a cor de ação do site. -------------------------------------------------------------------------- */ html[data-tema="escuro"] .uc-button-addcart, html[data-tema="escuro"] .uc-button-addcart *, html[data-tema="escuro"] .exc-cta, html[data-tema="escuro"] .exc-cta *, html[data-tema="escuro"] .add_to_cart_button, html[data-tema="escuro"] .add_to_cart_button *, html[data-tema="escuro"] .button, html[data-tema="escuro"] .elementor-button, html[data-tema="escuro"] .b1-deals { color: #ffffff !important; } /* -------------------------------------------------------------------------- 5) TEXTO Simplificou: com os cards escuros também, não há mais ilha clara para proteger. Antes cada título carregava um :not(.mchiw-card *) para não virar texto branco em fundo branco — deu para tirar. -------------------------------------------------------------------------- */ html[data-tema="escuro"] h1, html[data-tema="escuro"] h2, html[data-tema="escuro"] h3, html[data-tema="escuro"] h4, html[data-tema="escuro"] h5, html[data-tema="escuro"] h6 { color: #f2f7fa !important; } html[data-tema="escuro"] .mc-tp p, html[data-tema="escuro"] .mc-hiw p, html[data-tema="escuro"] .mc-bc4 p, html[data-tema="escuro"] .mc-cat p, html[data-tema="escuro"] .exc p, html[data-tema="escuro"] .mc-tp li, html[data-tema="escuro"] .mc-hiw li, html[data-tema="escuro"] .exc li { color: #b9c8d2 !important; } /* links: navy escuro sobre fundo escuro ninguém lê. #4db3dc é o navy da marca clareado até passar de 4,5:1 de contraste sobre #101a20. */ /* A LISTA DE EXCEÇÕES AQUI FOI PAGA COM UM DEFEITO VISÍVEL. Sem excluir os botões, esta regra pintava de azul claro o texto branco do botão verde "Adicionar ao carrinho" — sobre verde, quase não se lia. Botão tem cor de fundo própria e texto próprio; ele não é "um link" para efeito de cor. */ html[data-tema="escuro"] a:not(.b1-lnk):not(.button):not(.exc-cta):not(.uc-button-addcart):not(.add_to_cart_button):not(.elementor-button):not(.b1-deals):not(.uc_title):not(.mccat-all) { color: #4db3dc !important; } /* -------------------------------------------------------------------------- 6) BORDAS E LINHAS Borda clara em fundo escuro vira risco branco. #26363f é a mesma borda que o tema.css usa no escuro. -------------------------------------------------------------------------- */ html[data-tema="escuro"] hr, html[data-tema="escuro"] .mc-tp *, html[data-tema="escuro"] .mc-hiw *, html[data-tema="escuro"] .mc-bc4 *, html[data-tema="escuro"] .exc * { border-color: #26363f !important; } /* -------------------------------------------------------------------------- 7) O RODAPÉ -------------------------------------------------------------------------- */ html[data-tema="escuro"] .elementor-location-footer, html[data-tema="escuro"] .elementor-location-footer .e-con { background-color: #0c1419 !important; } html[data-tema="escuro"] .elementor-location-footer, html[data-tema="escuro"] .elementor-location-footer p, html[data-tema="escuro"] .elementor-location-footer li { color: #9fb0bc !important; } /* -------------------------------------------------------------------------- 8) A TROCA É INSTANTÂNEA — e isso foi uma correção, não um descuido inicial -------------------------------------------------------------------------- Eu tinha posto `transition: background-color .2s` aqui, achando que a troca seca seria um susto. Na prática deu o efeito oposto: com dezenas de elementos animando ao mesmo tempo, cada um repintando no seu ritmo, o olho lê como se o site fosse escurecendo POR PARTES. Ficou pior que a troca seca. O motivo é que a transição não é uma só: cada elemento tem a sua, e o navegador as repinta em ordens diferentes conforme vai recalculando o layout. Duzentos milissegundos bastam para isso aparecer. Então: nenhuma transição de cor na troca de tema. O site vira de uma vez. O mascote continua com as animações dele (o braço, o cordão) — aquelas são movimento de um elemento só, e ali a suavidade ajuda. Se um dia quiser o esmaecido de volta, o lugar é aqui e em tema.css. -------------------------------------------------------------------------- */ /* A TÉCNICA: congelar as transições SÓ DURANTE A TROCA. -------------------------------------------------------------------------- A tentativa óbvia — desligar transição de cor para sempre — está errada, e errei nela primeiro: o site tem transições legítimas (hover dos links, o slider do filtro, as sugestões da busca, o acordeão do "como funciona"). Desligar tudo deixaria o site morto ao toque. Então o mascote.js põe a classe `as-sem-transicao` no , troca o tema, e tira a classe dois quadros depois. Nesses dois quadros nada anima, então o site vira de uma vez; depois todas as transições do site voltam ao normal. Dois quadros, não um: o navegador precisa de um para aplicar a classe e outro para pintar com o tema novo. Tirando em um só, a transição pega a repintura. O mascote é reexcluído logo abaixo: as animações dele são de um elemento só e não têm nada a ver com a repintura da página — o braço precisa continuar descendo suave no mesmo clique. Classe vence seletor universal, então esta segunda regra ganha da primeira. */ html.as-sem-transicao *, html.as-sem-transicao *::before, html.as-sem-transicao *::after { transition: none !important; animation-duration: 0s !important; } html.as-sem-transicao .as-mascote, html.as-sem-transicao .as-mascote * { transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), opacity .2s ease, fill .22s ease, stroke .22s ease !important; animation-duration: revert !important; } /* Preços nos cards Opção A (modo escuro) */ html[data-tema="escuro"] .as-card-price__de { color: #64748B !important; } html[data-tema="escuro"] .as-card-price__subcartao { color: #94A3B8 !important; } html[data-tema="escuro"] .as-card-price__subcartao strong { color: #F1F5F9 !important; } html[data-tema="escuro"] .as-card-price__cifrao, html[data-tema="escuro"] .as-card-price__valor { color: #22c55e !important; } html[data-tema="escuro"] .as-card-price__subpix { color: #4ade80 !important; } html[data-tema="escuro"] .as-card-price__sob-consulta { color: #94A3B8 !important; } html[data-tema="escuro"] .elementor-element.elementor-element-da66d6b .elementor-nav-menu .elementor-item, html[data-tema="escuro"] .as-footer-software-menu .elementor-nav-menu .elementor-item { color: #9fb0bc !important; } html[data-tema="escuro"] .elementor-element.elementor-element-da66d6b .elementor-nav-menu .elementor-item:hover, html[data-tema="escuro"] .as-footer-software-menu .elementor-nav-menu .elementor-item:hover { color: #FFFFFF !important; } /* Cartões de Autenticação / Minha Conta / Cadastro */ html[data-tema="escuro"] .au-formcard, html[data-tema="escuro"] .au-inner { background-color: #ffffff !important; color: #111827 !important; } html[data-tema="escuro"] .au-formcard h1, html[data-tema="escuro"] .au-formcard h2, html[data-tema="escuro"] .au-formcard .au-h1 { color: #0f172a !important; } html[data-tema="escuro"] .au-formcard .au-alt, html[data-tema="escuro"] .au-formcard label, html[data-tema="escuro"] .au-formcard p { color: #334155 !important; } html[data-tema="escuro"] .au-formcard input.input-text { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }