/* * Identidade visual 2026 — Casa dos Parafusos * * Tokens oficiais (tailwind.config.js do storefront Wake, read-only): * main #1E28A5 azul principal * mainSecond #0fb9ff ciano de destaque * mainHover #291670 hover * dark #0F1E7D autoridade * mainBg #e1e1e1 cinza de fundo do site * lightBg #FFFFFF superfície * greenMain #5FC31E conversão / comprar * txtDark #323737 texto * cpBlue #232dcd azul complementar (cards do rodapé da loja) * * Este arquivo é a casca da marca: régua do topo, header, logo, navegação, * rodapé, links e foco. Correções de componente ficam em components.css. * * Os !important são herdados do CSS que estava no Customizer: o GeneratePress * e os blocos GenerateBlocks imprimem cor inline, com especificidade maior * que uma classe. */ :root { --cp-main: #1E28A5; --cp-second: #0fb9ff; /* O `mainHover #291670` do tailwind.config.js da loja lê como ROXO na tela, e roxo não é cor desta marca — o usuário apontou isso no botão "voltar ao topo". Este é o único ponto do blog onde a paleta diverge da loja, e diverge de propósito: o token de hover passa a ser o `dark #0F1E7D`, que é azul-marinho e continua sendo cor oficial. Alterar aqui muda todo hover do blog de uma vez — botão do topo, submenu, botões de formulário, slideout. */ --cp-hover: #0F1E7D; --cp-dark: #0F1E7D; --cp-bg: #e1e1e1; --cp-surface: #ffffff; --cp-green: #5FC31E; --cp-green-hov: #55aa1e; --cp-txt: #323737; --cp-cpblue: #232dcd; /* Sobrescreve a variável legada do GenerateBlocks. O nome "purple" vem da marca anterior; o valor tem que ser o azul atual. */ --purple-brand: #1E28A5; --brand-main: #1E28A5; --brand-hover: #291670; --brand-cyan: #0fb9ff; } body { background-color: var(--cp-bg) !important; color: var(--cp-txt); } /* ---------------------------------------------------------------- CASCA DA PÁGINA — o miolo branco O layout do blog é `one-container` (classe no ), então o GeneratePress envolve todo o conteúdo num só `#page.container`. No CSS que o Customizer imprime em /wp-content/uploads/generatepress/style.min.css existe: .separate-containers .inside-article, ..., .one-container .container, ... { color:#000000; background-color: var(--bg-light); } e o `--bg-light` de lá ainda é o **#F5F5F5** da marca anterior. Resultado medido no ar: `body` = #e1e1e1 (cinza correto) e `#page` = #F5F5F5 — quase branco. Daí a faixa clara no miolo, com o cinza aparecendo só nas laterais de fora do container. O container é a casca, não uma superfície: quem é branco no desenho são os cards (`.inside-article`), os tiles do mosaico e os widgets da barra lateral, e todos já pintam o próprio fundo. Então aqui o certo é ficar transparente e deixar o cinza do body passar — assim, se um dia o token de fundo mudar, muda num lugar só. ---------------------------------------------------------------- */ .one-container .container, .one-container .site.container, #page.container { background-color: transparent !important; } /* O mesmo CSS do Customizer manda `color:#000000` junto com o fundo. Com o container agora transparente, o texto herdado volta para o token da marca. */ .one-container .container { color: var(--cp-txt); } body, h1, h2, h3, h4, h5, h6, .main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a, input, button, select, textarea { font-family: 'Montserrat', sans-serif; } /* ---------------------------------------------------------------- RÉGUA DO TOPO Era `var(--purple-brand)` com texto branco — lida como o azul da marca anterior. Na loja essa faixa de serviço é parte do header cinza (bg-mainBg #e1e1e1) com texto txtDark. Mesmo tratamento aqui: a régua deixa de competir com a navegação azul logo abaixo. ---------------------------------------------------------------- */ .top-bar, .gb-container-5ea473c2 { background-color: var(--cp-bg) !important; color: var(--cp-txt) !important; border-bottom: 1px solid rgba(50, 55, 55, 0.14) !important; } .top-bar a, .top-bar a:visited, .gb-container-5ea473c2 a, .gb-container-5ea473c2 a:visited { color: var(--cp-txt) !important; text-decoration: none; } .top-bar a:hover, .gb-container-5ea473c2 a:hover { color: var(--cp-main) !important; } /* Separadores entre os itens da régua (portado do Customizer). */ .gb-container-5ea473c2 .wp-block-navigation__container, .gb-container-5ea473c2 > nav ul { display: flex !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .gb-container-5ea473c2 .wp-block-navigation-item, .gb-container-5ea473c2 > nav ul li { padding: 0 14px !important; border-right: 1px solid rgba(50, 55, 55, 0.25) !important; line-height: 1 !important; } .gb-container-5ea473c2 .wp-block-navigation-item:last-child, .gb-container-5ea473c2 > nav ul li:last-child { border-right: none !important; padding-right: 0 !important; } .top-bar-tel { text-decoration: underline; } .top-bar-link { margin-bottom: 0; } .top-bar-tel::before { content: '☎'; margin-right: 6px; font-style: normal; font-size: 13px; vertical-align: middle; display: inline-block; text-decoration: none; } /* ---------------------------------------------------------------- HEADER — faixa cinza única, igual ao header da loja ---------------------------------------------------------------- */ .site-header, .site-header .inside-header, .inside-header { background-color: var(--cp-bg) !important; } /* Topo fixo em CSS puro, como na loja (`sticky top-0 z-[90] bg-mainBg`). O JS do GP Premium foi desregistrado em functions.php porque fixava só a navegação: a logo saía da tela na rolagem. Aqui a faixa cinza (logo + busca) para no topo e a navegação azul encosta logo abaixo dela. Acima de 1130px vale o par header + navegação. Abaixo o GP troca para o #mobile-header — e ele TAMBÉM precisa de regra: medido no preview a 375px, o sticky do mobile dependia do mesmo `generate-sticky`, então sem a regra abaixo o topo do celular sumia na rolagem. A régua de serviço NÃO é fixa de propósito: é conteúdo de baixa frequência e prendê-la custaria 36px de altura útil em toda rolagem. */ @media (min-width: 1131px) { .site-header { position: sticky; top: 0; z-index: 91; } #site-navigation { position: sticky; /* altura da faixa cinza; o header encosta acima */ top: 100px; z-index: 90; } /* Sombra só depois que o topo descola, como o `.is-scrolled` da loja. `animation-timeline: scroll()` degrada em silêncio onde não existe: sem suporte, o topo continua fixo, só não ganha a sombra. */ @supports (animation-timeline: scroll()) { .site-header { animation: cp-sombra-topo linear both; animation-timeline: scroll(); animation-range: 0 80px; } } } /* Topo do celular — mesmo comportamento da loja, onde o grafismo da marca acompanha a rolagem. Sombra sempre presente aqui: no celular o topo fixo precisa se separar do conteúdo que passa por baixo. */ @media (max-width: 1130px) { #mobile-header.mobile-header-navigation { position: sticky; top: 0; z-index: 91; box-shadow: 0 2px 10px rgba(15, 20, 60, 0.14); } } @keyframes cp-sombra-topo { from { box-shadow: 0 0 0 rgba(15, 20, 60, 0); } to { box-shadow: 0 6px 18px rgba(15, 20, 60, 0.16); } } aside#block-64, aside#block-64 > .wp-block-group { background-color: transparent !important; } aside#block-64 { display: flex; align-items: center; min-height: 84px; } aside#block-64 .wp-block-group { display: flex; width: 50vw; justify-content: space-between; align-items: center; } @media screen and (max-width: 1368px) { aside#block-64 .wp-block-group { width: 65vw; } } .site-header .has-bg-light-background-color, .inside-header .has-bg-light-background-color, aside#block-64 .has-bg-light-background-color { background-color: var(--cp-bg) !important; background: var(--cp-bg) !important; } /* ---------------------------------------------------------------- LOGO — servida pelo CDN da loja, agora em SVG O PNG (884x241, paleta de 256 cores) perdia definição ao ser exibido em 220x60 e em telas 2x. O mesmo CDN serve logo.svg (vetorial, 5 KB): nítida em qualquer densidade e menor que o PNG. Trocar a logo na loja continua refletindo aqui automaticamente — a URL vai sem `v=` de propósito, para não ficar presa a um build. ---------------------------------------------------------------- */ /* Proporção copiada da loja (Components/header.html, logo desktop): `h-12 w-auto max-w-[180px] object-contain` — altura fixa de 48px e largura LIVRE. Antes eu fixava 220x60, que impõe uma proporção que não é a do arquivo e achata a marca. Altura fixa + largura auto é o que preserva o desenho em qualquer arquivo que a loja publicar. */ .site-header .site-logo img, .site-header .header-image { content: url('https://casadosparafusos.fbitsstatic.net/sf/img/logo.svg?theme=main'); height: 48px !important; width: auto !important; max-width: 180px !important; object-fit: contain; object-position: left center; } /* Abaixo de 1130px o GeneratePress troca para o #mobile-header, e lá a faixa é AZUL (medido: rgb(30, 40, 165)) — não a cinza do desktop. Por isso a variante muda junto: `logo-grafismo.svg` é desenhada em `#1e28a5` + ciano, ou seja, azul sobre azul. `footer/logo-simbolo.svg` é a mesma marca na versão para fundo escuro (`#fff` + ciano), que é a que a loja usa no rodapé azul. Conferido no próprio arquivo do CDN. Largura declarada em 40px, e não `auto`. O arquivo do CDN traz só `viewBox`, sem `width`/`height`, então como `` ele não tem tamanho intrínseco: com `width:auto` o navegador cai no tamanho padrão de substituído e renderizou 22x44 — medido. 40x44 é a proporção real do viewBox (196,19 / 218,06 = 0,90) arredondada, e o `object-fit: contain` garante que qualquer erro de arredondamento vire folga, nunca distorção. A URL vai sem `v=` de propósito (mesma razão da logo do desktop): não prender a marca a um build da loja. Testado — o CDN serve os mesmos 778 bytes com e sem o parâmetro. */ .mobile-header-navigation .site-logo.mobile-header-logo img { content: url('https://casadosparafusos.fbitsstatic.net/sf/img/footer/logo-simbolo.svg?theme=main'); width: 40px !important; height: 44px !important; max-width: none !important; object-fit: contain; object-position: left center; } /* ---------------------------------------------------------------- NAVEGAÇÃO — azul da marca + linha ciano, mesma construção da loja (#navbar tem faixa #1E28A5 e régua #0fb9ff de 6px logo abaixo). ---------------------------------------------------------------- */ .main-navigation, .nav-primary, #site-navigation { background-color: var(--cp-main) !important; border-top: none !important; border-bottom: 4px solid var(--cp-second) !important; } .main-navigation .main-nav ul li a, .main-navigation .mobile-bar-items a, .menu-toggle { color: #ffffff !important; } .main-navigation .menu > .menu-item > a::after { content: none; } /* Hover e item ativo: pastilha ciano com texto azul-escuro — o mesmo desenho do menu da loja (`Fixadores` em destaque na navbar). O bug do "hover branco quebrado" tinha origem exata: o GeneratePress imprime inline, no ``, .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a { color:#000000; background-color: var(--bg-light); } ou seja, caixa BRANCA com texto PRETO por cima da faixa azul. Minha regra anterior só somava um traço ciano e não desfazia o fundo, então a caixa branca continuava lá. Agora o fundo é sobrescrito de fato. Texto BRANCO, decisão do usuário (17/08/2026), com paridade exata com a navegação da loja. Registro o custo para quem vier depois: branco sobre `mainSecond #0fb9ff` dá 2,23:1 e fica abaixo do mínimo de 4,5:1 da WCAG AA. O peso 700 compensa em parte (texto bold acima de 18,66px cai para o critério de 3:1), e o estado é transitório — o item continua legível em branco sobre azul no estado de repouso, que é onde o leitor passa 99% do tempo. Se um dia isso precisar passar em auditoria de acessibilidade, o caminho é escurecer o ciano da pastilha, não trocar o texto: com `#0F1E7D` de fundo o branco vai a 12,9:1 e o desenho permanece. A pastilha ocupa a ALTURA INTEIRA da faixa e encosta na régua ciano de 6px logo abaixo — era o segundo apontamento. Medido antes: link de 44px dentro de faixa de 54px, sobrando 5px em cima e 5px embaixo, então a pastilha flutuava no meio do azul. Agora `line-height` = altura da faixa, e o único espaço que resta embaixo é a própria régua. Hover e ativo têm exatamente a mesma aparência, por decisão do usuário (18/08/2026): só a pastilha ciano muda, nada mais. Duas coisas saíram daqui e o motivo fica registrado: - `font-weight: 700`. Negrito no hover reflui o texto — a palavra fica mais larga, o item empurra os vizinhos e a navegação "pula" quando o mouse passa. O usuário viu isso como aumento de tamanho e pediu para tirar. Era também a compensação que eu usava para o contraste de 2,23:1 do branco sobre ciano; sem ela, o argumento de acessibilidade passa a depender só do escurecimento da pastilha, que continua sendo o caminho se um dia isso for auditado. - `box-shadow: inset 0 -4px` no item ativo. Era para separar "onde estou" de "onde vou", mas desenhava um segundo traço ciano a poucos pixels da régua de 6px que já corre sob a navegação inteira — dois riscos quase iguais empilhados. A régua continua sendo o único traço, e a pastilha sozinha marca a página atual. */ .main-navigation .main-nav ul li > a:hover, .main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li > a:focus-visible, .main-navigation .main-nav ul li.sfHover > a { background-color: var(--cp-second) !important; color: #ffffff !important; border-radius: 8px 8px 0 0; } .main-navigation .main-nav ul li.current-menu-item > a, .main-navigation .main-nav ul li.current-menu-parent > a, .main-navigation .main-nav ul li.current-post-parent > a, .main-navigation .main-nav ul li.current-menu-ancestor > a, .main-navigation .main-nav ul li.current-post-ancestor > a, .main-navigation .main-nav ul li[class*="current-menu-"] > a, #generate-slideout-menu .slideout-menu li.current-menu-item > a, #generate-slideout-menu .slideout-menu li[class*="current-menu-"] > a { background-color: var(--cp-second) !important; color: #ffffff !important; border-radius: 8px 8px 0 0; } /* Altura do item = altura da faixa, para a pastilha encostar na régua. O CTA "Loja" fica fora: ele é botão, não aba, e continua com folga própria (regra logo abaixo, mais específica). Era 54px + régua de 6px = 60px, depois 44px + 4 = 48px, depois 28px + 4 = 32px. Nesse último ajuste sobrou um bug: `ul.main-nav` tem 32px de altura por regra própria do GeneratePress, mas o `li` só ocupava 28px (herdado do `line-height`) e ficava CENTRALIZADO dentro da faixa — sobravam 2px vazios em cima e embaixo do `li`, então a pastilha do hover parava 2px antes da régua ciano em vez de encostar nela. `align-items: stretch` faz o `li` esticar para a altura real do container, e o `a` vira flex também para centralizar o texto dentro dessa altura esticada (sem isso o texto subiria para o topo do `li`, já que perdeu o `line-height` como mecanismo de centralização vertical). Pedido do usuário (18/08/2026): 38px de faixa. 34px de item + 4 de régua = 38px, e a pastilha agora esticada até a borda inferior do `li` encosta de fato na régua — sem os 2px de folga que sobravam antes. */ .main-navigation .main-nav > ul { align-items: stretch !important; } .main-navigation .main-nav > ul > li { display: flex !important; align-items: stretch !important; } .main-navigation .main-nav > ul > li > a { display: flex !important; align-items: center !important; height: 34px !important; line-height: normal !important; } @media (max-width: 1130px) { .main-navigation .main-nav > ul > li > a { height: 34px !important; } } .main-navigation .main-nav ul ul { background-color: var(--cp-main) !important; border-top: 2px solid var(--cp-second) !important; } .main-navigation .main-nav ul ul li a { color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .main-navigation .main-nav ul ul li a:hover { background-color: var(--cp-hover) !important; color: var(--cp-second) !important; } /* ---------------------------------------------------------------- "LOJA" — vira CTA, não item de menu É a única ação comercial do blog. greenMain é o token de conversão da loja (usado em Comprar / Adicionar ao carrinho), então o botão fala a mesma língua do e-commerce. Alvo pelo href: o item aponta para www.casadosparafusos.com e é o único assim no menu. ---------------------------------------------------------------- */ .main-navigation .main-nav ul li a[href^="https://www.casadosparafusos.com"] { background-color: var(--cp-green) !important; color: #ffffff !important; font-weight: 700; border-radius: 12px; padding-left: 20px !important; padding-right: 20px !important; margin: 5px 0 5px 14px; height: 24px !important; line-height: 24px !important; transition: background-color 0.15s ease; } /* Sem seta no CTA: a seta era ruído decorativo e o botão já se lê como botão pela cor e pelo formato. */ .main-navigation .main-nav ul li a[href^="https://www.casadosparafusos.com"]:hover { background-color: var(--cp-green-hov) !important; color: #ffffff !important; box-shadow: none; } #generate-slideout-menu .slideout-menu li a[href^="https://www.casadosparafusos.com"] { background-color: var(--cp-green) !important; color: #ffffff !important; font-weight: 700; border-radius: 12px; } /* ---------------------------------------------------------------- RODAPÉ — fundo claro, painel da newsletter em azul da marca Decisão do usuário (17/08/2026): manter a MESMA construção do rodapé da loja (www.casadosparafusos.com — `.cp-footer`, largura interna 1364px, card interno com raio 16px, links que viram ciano no hover), mas trocar o fundo azul por claro, "assim a logo da Rochare One fica com maior destaque". Consequências que essa troca obriga, todas aplicadas abaixo: - texto e títulos saem de #fff para --cp-txt (#323737): branco sobre #e1e1e1 dá 1,3:1, ilegível; - links saem de #fff para --cp-main (8,6:1 sobre claro) e o hover vai para --cp-hover, NÃO para --cp-second: ciano sobre claro dá 2,2:1 e reprovaria em qualquer critério de contraste; - ícones sociais trocam a borda branca por --cp-main; - a assinatura Rochare One volta para a variante de traço escuro (rochare-one.svg, "R One F-Claro-1"), que é a correta para fundo claro — ver bloco da faixa mais abaixo. O painel da newsletter continua azul: é o único bloco que deve puxar o olho, e sobre o fundo claro ele passa a funcionar como o card `bg-cpBlue rounded-2xl` da loja — âncora de cor, não fundo de página. ---------------------------------------------------------------- */ footer.gb-container, .gb-container-36cb9565, .site-footer, footer.site-footer, .footer-widgets, .inside-footer-widgets, .footer-bar, .inside-footer-bar { background-color: var(--cp-surface) !important; color: var(--cp-txt) !important; } /* Branco, não cinza (ajuste do usuário em 17/08/2026). O corpo da página é `mainBg #e1e1e1`; um rodapé cinza sobre corpo cinza não tinha aresta e os elementos dentro dele — logo Rochare One, ícones sociais, card da newsletter — perdiam definição. Branco separa o rodapé do corpo por si só e sobe o contraste de tudo que está dentro. Validação pedida: os links institucionais em `#5a6060` continuam a escolha certa sobre branco. Sobre `#e1e1e1` davam 6,2:1; sobre branco sobem para 7,0:1, e a hierarquia que motivou o cinza — link de apoio não competir com os títulos "Categorias" e "Institucional" — não muda com o fundo. Voltar para o azul `main` resolveria contraste (12,1:1) mas devolveria o problema original: a lista puxando mais olho que o título dela. Mantido o cinza; o azul continua no hover. */ /* Filete superior: sem ele o rodapé claro cola no conteúdo claro da página e a seção deixa de existir visualmente. */ footer.gb-container, .gb-container-36cb9565 { border-top: 1px solid rgba(30, 40, 165, 0.14); } footer.gb-container h1, footer.gb-container h2, footer.gb-container h3, footer.gb-container h4, footer.gb-container h5, footer.gb-container h6, .site-footer h2, .footer-widgets h2, .footer-widgets .widget-title { color: var(--cp-main) !important; } footer.gb-container p, footer.gb-container li { color: var(--cp-txt) !important; } /* Links institucionais em cinza-grafite, não em azul. O azul `main` chamava mais atenção que os próprios títulos "Categorias" e "Institucional" — num rodapé, a lista é navegação de apoio e não deve competir com a hierarquia. `#5a6060` é o `txtDark #323737` clareado: 7,0:1 sobre o fundo branco, bem acima do mínimo de 4,5:1, e visivelmente mais leve. O azul volta no hover, que é onde ele informa alguma coisa. */ footer.gb-container a, .footer-widgets a, .footer-bar a, .site-footer a { color: #5a6060 !important; } footer.gb-container a:hover, .footer-widgets a:hover, .site-footer a:hover { color: var(--cp-main) !important; text-decoration: underline; } /* Painel da newsletter — o card azul da loja (bg-cpBlue rounded-2xl). Aqui ele é a única superfície escura do rodapé, então o texto interno volta a ser branco: as regras acima são de fundo claro e não valem dentro dele. */ .gb-container-9ae4b4a4 { background-color: var(--cp-cpblue) !important; border-radius: 16px; padding: 24px !important; } /* `footer.gb-container p` (0,1,2) vence `.gb-container-9ae4b4a4 p` (0,1,1) mesmo com !important nos dois — empate de !important é resolvido por especificidade. Por isso o `footer` entra também aqui. */ footer .gb-container-9ae4b4a4, footer .gb-container-9ae4b4a4 p, footer .gb-container-9ae4b4a4 li, footer .gb-container-9ae4b4a4 h1, footer .gb-container-9ae4b4a4 h2, footer .gb-container-9ae4b4a4 h3, footer .gb-container-9ae4b4a4 h4 { color: #ffffff !important; } footer .gb-container-9ae4b4a4 a { color: #ffffff !important; } footer .gb-container-9ae4b4a4 a:hover { color: var(--cp-second) !important; } .second-section-footer { display: none; } .footer-copy-text { margin-bottom: 0; } footer ul { margin: 0 !important; } footer li { list-style: none; padding-bottom: 7px; } /* Ícones sociais — mesmo quadrado arredondado da loja, agora em azul, porque a borda branca sumiria sobre o fundo claro. */ .footer-widgets-container .wp-social-link, footer.gb-container .wp-social-link { background-color: transparent !important; border: 2px solid var(--cp-main) !important; border-radius: 5px !important; transition: background-color 0.2s ease, border-color 0.2s ease; } .footer-widgets-container .wp-social-link:hover, footer.gb-container .wp-social-link:hover { background-color: rgba(30, 40, 165, 0.10) !important; border-color: var(--cp-hover) !important; } .footer-widgets-container .wp-social-link svg, footer.gb-container .wp-social-link svg { fill: var(--cp-main) !important; } /* Faixa "Desenvolvido por" (assinatura Rochare One). Com o rodapé claro, a variante correta do logo é a de TRAÇO ESCURO (`R One F-Claro-1` => rochare-one.svg), que é justamente a que o usuário nomeou originalmente. A variante clara só era necessária enquanto o fundo era o #1E28A5. Um filete separa a assinatura do corpo do rodapé — no fundo azul a separação vinha do próprio contraste do bloco. `.fourth-section-footer` é seletor órfão herdado do CSS antigo; fica só como apelido caso o container volte a existir. Ajuste do usuário (19/08/2026): no tema da GVA a faixa é discreta — rótulo pequeno e cinza, logo do tamanho do texto ao lado, pouco respiro vertical. Aqui a faixa herdava o tamanho de parágrafo do corpo (1rem) e uma logo de 28px, dobrando a altura do texto — por isso "grande" demais perto do resto do rodapé. Rótulo desce para 0.8125rem e a cor mais leve de apoio (mesma dos links institucionais, #5a6060); a logo cai para 18px, alinhada à altura de texto; padding vertical reduz de 14px para 10px. */ .fourth-section-footer, .gb-container-25358577 { align-items: center !important; justify-content: center !important; column-gap: 8px !important; padding: 10px 0 !important; border-top: 1px solid rgba(30, 40, 165, 0.12); } .fourth-section-footer p, .gb-container-25358577 p { color: #5a6060 !important; font-size: 0.8125rem !important; margin: 0 !important; } .fourth-section-footer img, .gb-container-25358577 img { height: 18px; width: auto; } /* ---------------------------------------------------------------- LINKS E BOTÕES ---------------------------------------------------------------- */ .entry-content a:not(.button):not(.wp-block-button__link), .entry-summary a, a.read-more, .page-header a, .comments-area a { color: var(--cp-main); } .entry-content a:not(.button):not(.wp-block-button__link):hover, .entry-summary a:hover, a.read-more:hover, .comments-area a:hover { color: var(--cp-second); } input[type="submit"], .submit, a.button, a.button:visited, .comment-form input[type="submit"], #comments input.submit, .search-form input[type="submit"] { background-color: var(--cp-main) !important; border-color: var(--cp-main) !important; color: #ffffff !important; } input[type="submit"]:hover, .submit:hover, a.button:hover, a.button:focus, .comment-form input[type="submit"]:hover, #comments input.submit:hover, .search-form input[type="submit"]:hover { background-color: var(--cp-hover) !important; border-color: var(--cp-hover) !important; color: #ffffff !important; } .generate-back-to-top { background-color: var(--cp-main) !important; color: #ffffff !important; border-radius: 12px; } .generate-back-to-top:hover, .generate-back-to-top:focus { background-color: var(--cp-hover) !important; color: #ffffff !important; } .screen-reader-text.skip-link:focus, a.skip-link { color: var(--cp-main); border-color: var(--cp-main); } /* Foco visível para navegação por teclado. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--cp-second); outline-offset: 2px; } #generate-slideout-menu .menu-item a { color: var(--cp-main); font-family: 'Montserrat', sans-serif; } #generate-slideout-menu .menu-item a:hover { color: var(--cp-hover); }