/* Modo escuro — só vale com (ver functions/modo-escuro.php).
As cores neutras do tema usam var(--bl-*, cor original): aqui elas ganham
o valor escuro. Abaixo dos tokens, os ajustes do que não é variável. */
html[data-tema="escuro"] {
color-scheme: dark;
/* Paleta "grafite neutro" (escolhida em 04/nov/2026): cinzas sem azul;
a cor da marca fica só nos destaques (linha do header, pílula ativa, links). */
--bl-pagina: #0a0a0a; /* fundo da página (atrás dos cartões); era #0f0f0f até 04/nov */
--bl-fundo: #1c1c1c; /* cartões, caixas, header (era branco) */
--bl-fundo-2: #212121; /* painéis suaves (era #f5…#fa) */
--bl-fundo-3: #2b2b2b; /* chips, hover (era #e1…#f1) */
--bl-fundo-4: #3d3d3d; /* cinzas médios (era #aaa…#ddd) */
--bl-fundo-escuro: #333333; /* selos escuros (era #111…#555): precisam destacar do cartão */
--bl-texto: #ececec;
--bl-texto-2: #c8c8c8;
--bl-texto-3: #9a9a9a;
--bl-borda: #2e2e2e;
--bl-borda-2: #3a3a3a;
--bl-borda-forte: #6a6a6a;
/* Variáveis que o tema já tinha (header12, grade de ofertas, página da oferta).
Só as de uso único (só fundo, só texto ou só borda). --color-white é fundo
E texto branco de botão: nos fundos ele virou var(--bl-fundo, var(--color-white)). */
--color-gray-50: var(--bl-fundo-2);
--color-gray-100: var(--bl-fundo-3);
--color-gray-200: var(--bl-borda-2);
--color-gray-300: var(--bl-borda-forte);
--color-gray-400: var(--bl-texto-3);
--color-gray-500: var(--bl-texto-3);
--color-gray-600: var(--bl-texto-3);
--color-gray-700: var(--bl-texto-2);
--color-gray-800: var(--bl-texto);
--oferta-bg: var(--bl-pagina);
/* Cards do grid um tom acima e com contorno visível: no escuro eles se fundiam
num bloco só (04/nov/2026). */
--oferta-card-bg: #232323;
--oferta-text: var(--bl-texto);
--oferta-text-muted: var(--bl-texto-3);
--oferta-border: #383838;
--oferta-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
--oferta-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.6);
}
/* --dd-* são definidas em .deal-page: redefine no mesmo nível para vencer. */
html[data-tema="escuro"] .deal-page {
--dd-background: var(--bl-pagina);
--dd-foreground: var(--bl-texto);
--dd-card: var(--bl-fundo);
--dd-card-foreground: var(--bl-texto);
--dd-secondary: var(--bl-fundo-3);
--dd-secondary-foreground: var(--bl-texto-2);
--dd-muted: var(--bl-fundo-2);
--dd-muted-foreground: var(--bl-texto-3);
--dd-border: var(--bl-borda);
--dd-shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
}
html[data-tema="escuro"] body {
background-color: var(--bl-pagina) !important;
color: var(--bl-texto);
}
/* ---------- Tons de destaque (pastéis do modo claro viram tinta escura) ---------- */
html[data-tema="escuro"] {
--bl-azul-suave: rgba(59, 159, 216, 0.16); /* era #e3f1fb / #eef6fd */
--bl-azul-texto: #7cc4ee; /* azul legível sobre fundo escuro */
}
/* ---------- Filtros das vitrines (plugin boletando-filtros: variáveis próprias em .bf) ---------- */
html[data-tema="escuro"] .bf {
--bf-fundo: var(--bl-fundo);
--bf-texto: var(--bl-texto);
--bf-mudo: var(--bl-texto-3);
--bf-borda: var(--bl-borda);
--bf-campo-borda: var(--bl-borda-2);
--bf-campo-texto: var(--bl-texto-2);
--bf-azul-claro: var(--bl-azul-suave);
}
html[data-tema="escuro"] .bf .bf-select,
html[data-tema="escuro"] .bf .bf-preco-caixa,
html[data-tema="escuro"] .bf input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
background-color: var(--bl-fundo-3);
color: var(--bl-texto);
}
/* ---------- Busca (Ajax Search Pro: CSS por ID, por isso !important) ---------- */
html[data-tema="escuro"] div.asp_m,
html[data-tema="escuro"] div.asp_m .probox {
background: var(--bl-fundo-3) !important;
border-color: var(--bl-borda-2) !important;
box-shadow: none !important;
}
html[data-tema="escuro"] div.asp_m .probox .proinput input,
html[data-tema="escuro"] div.asp_m .probox .proinput input.orig {
color: var(--bl-texto) !important;
}
/* Placeholder da busca ("Buscar ofertas, cupons…"): quase branco, o cinza sumia (04/nov). */
html[data-tema="escuro"] div.asp_m .probox .proinput input::placeholder,
html[data-tema="escuro"] .header-top input::placeholder { color: #d4d4d4 !important; opacity: 1; }
html[data-tema="escuro"] div.asp_m .probox .promagnifier { background: transparent !important; }
html[data-tema="escuro"] div.asp_m .probox .promagnifier svg,
html[data-tema="escuro"] div.asp_m .probox .proclose svg { fill: var(--bl-texto) !important; }
html[data-tema="escuro"] div.asp_r,
html[data-tema="escuro"] div.asp_r .results,
html[data-tema="escuro"] div.asp_r .results .item,
html[data-tema="escuro"] div.asp_r .asp_showmore_container {
background: var(--bl-fundo) !important;
border-color: var(--bl-borda) !important;
}
html[data-tema="escuro"] div.asp_r .results .item:hover,
html[data-tema="escuro"] div.asp_r .results .item.hovered { background: var(--bl-fundo-3) !important; }
html[data-tema="escuro"] div.asp_r .results .item .asp_content h3 a,
html[data-tema="escuro"] div.asp_r .results .item h3 a { color: var(--bl-texto) !important; }
html[data-tema="escuro"] div.asp_r .results .item .asp_res_text,
html[data-tema="escuro"] div.asp_r .results .item .etc { color: var(--bl-texto-3) !important; }
/* ---------- Grade de ofertas ---------- */
html[data-tema="escuro"] .oferta-card .oferta-card-cupom-ofertas {
background: var(--bl-azul-suave);
color: var(--bl-azul-texto);
}
/* ---------- Comentários (wpDiscuz) ---------- */
html[data-tema="escuro"] #wpdcom,
html[data-tema="escuro"] #wpdcom .wpd-login-to-comment,
html[data-tema="escuro"] #wpdcom .wpd-comment-text,
html[data-tema="escuro"] #wpdcom .wpd-comment-author,
html[data-tema="escuro"] #wpdcom .wpd-comment-author a { color: var(--bl-texto) !important; }
html[data-tema="escuro"] #wpdcom .wpd-comment-date,
html[data-tema="escuro"] #wpdcom .wpd-thread-info { color: var(--bl-texto-3) !important; }
html[data-tema="escuro"] #wpdcom .wpd-thread-head { border-bottom-color: var(--bl-borda-2) !important; }
html[data-tema="escuro"] #wpdcom .wpd-form textarea,
html[data-tema="escuro"] #wpdcom .ql-editor,
html[data-tema="escuro"] #wpdcom .ql-container,
html[data-tema="escuro"] #wpdcom .ql-toolbar,
html[data-tema="escuro"] #wpdcom input[type="text"],
html[data-tema="escuro"] #wpdcom input[type="email"] {
background: var(--bl-fundo-3) !important;
color: var(--bl-texto) !important;
border-color: var(--bl-borda-2) !important;
}
/* ---------- Perfil de membro (CSS em functions/user-stats.php) ---------- */
html[data-tema="escuro"] #rhbp-iconed-menu #item-nav li a:hover { background: var(--bl-fundo-3); color: var(--bl-azul-texto); }
html[data-tema="escuro"] #buddypress #subnav li.current a,
html[data-tema="escuro"] #buddypress #subnav li.selected a {
background: var(--bl-azul-suave);
border-color: rgba(59, 159, 216, 0.4);
color: var(--bl-azul-texto);
}
/* ---------- Fotos de produto: quadro branco ----------
As fotos das lojas têm fundo branco (e algumas são PNG transparente de
produto escuro, que some no cartão escuro). O quadro branco se funde com
a foto, como nos sites de oferta que têm modo escuro. */
html[data-tema="escuro"] .oferta-card-image,
html[data-tema="escuro"] .deal-page .deal-image {
background: #fff;
}
/* A própria ![]()
tem fundo (era #fff, virou --bl-fundo na fase 1): no escuro
volta a ser branca, senão as faixas ao lado da foto ficam escuras e o produto
encosta no fundo. O respiro interno afasta o produto da borda do quadro. */
html[data-tema="escuro"] .oferta-card-image img,
html[data-tema="escuro"] .deal-page .deal-image img {
background: #fff;
box-sizing: border-box;
padding: 6%;
}
html[data-tema="escuro"] .oferta-card-image .oferta-card-no-image {
background: var(--bl-fundo-2);
}
/* ---------- Histórico de preço (plugin price-history-graph: variáveis em .phc-widget) ---------- */
html[data-tema="escuro"] .phc-widget {
--phc-foreground: var(--bl-texto);
--phc-muted: var(--bl-texto-3);
--phc-border: var(--bl-borda);
--phc-secondary: var(--bl-fundo-3);
--phc-card: var(--bl-fundo);
}
/* ---------- Bloco de preço da oferta (plugin boletando-evergreen) ---------- */
html[data-tema="escuro"] .deal-stats-context .ds-v2--bom .ds-selo { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
html[data-tema="escuro"] .deal-stats-context .ds-nav a:not(.alert-trigger) { color: var(--bl-texto-2); }
/* ---------- Fundos claros escritos direto no HTML (style="background:#fff...") ----------
Pega os casos de plugins e templates com cor no próprio elemento. Só fundos:
"color:#333" também casaria com "background-color:#333", então texto é caso a caso. */
html[data-tema="escuro"] [style*="background:#fff"],
html[data-tema="escuro"] [style*="background: #fff"],
html[data-tema="escuro"] [style*="background-color:#fff"],
html[data-tema="escuro"] [style*="background-color: #fff"],
html[data-tema="escuro"] [style*="background:#ffffff"],
html[data-tema="escuro"] [style*="background: #ffffff"],
html[data-tema="escuro"] [style*="background-color:#ffffff"],
html[data-tema="escuro"] [style*="background-color: #ffffff"],
html[data-tema="escuro"] [style*="background:#FFF"],
html[data-tema="escuro"] [style*="background: #FFF"],
html[data-tema="escuro"] [style*="background-color:#FFF"],
html[data-tema="escuro"] [style*="background-color: #FFF"],
html[data-tema="escuro"] [style*="background:#f8fafc"],
html[data-tema="escuro"] [style*="background: #f8fafc"],
html[data-tema="escuro"] [style*="background-color:#f8fafc"],
html[data-tema="escuro"] [style*="background-color: #f8fafc"],
html[data-tema="escuro"] [style*="background:#f9fafb"],
html[data-tema="escuro"] [style*="background: #f9fafb"],
html[data-tema="escuro"] [style*="background-color:#f9fafb"],
html[data-tema="escuro"] [style*="background-color: #f9fafb"],
html[data-tema="escuro"] [style*="background:#f5f7fa"],
html[data-tema="escuro"] [style*="background: #f5f7fa"],
html[data-tema="escuro"] [style*="background-color:#f5f7fa"],
html[data-tema="escuro"] [style*="background-color: #f5f7fa"],
html[data-tema="escuro"] [style*="background:#f3f4f6"],
html[data-tema="escuro"] [style*="background: #f3f4f6"],
html[data-tema="escuro"] [style*="background-color:#f3f4f6"],
html[data-tema="escuro"] [style*="background-color: #f3f4f6"],
html[data-tema="escuro"] [style*="background:#f9f9f9"],
html[data-tema="escuro"] [style*="background: #f9f9f9"],
html[data-tema="escuro"] [style*="background-color:#f9f9f9"],
html[data-tema="escuro"] [style*="background-color: #f9f9f9"],
html[data-tema="escuro"] [style*="background:#fafafa"],
html[data-tema="escuro"] [style*="background: #fafafa"],
html[data-tema="escuro"] [style*="background-color:#fafafa"],
html[data-tema="escuro"] [style*="background-color: #fafafa"],
html[data-tema="escuro"] [style*="background:#f5f5f5"],
html[data-tema="escuro"] [style*="background: #f5f5f5"],
html[data-tema="escuro"] [style*="background-color:#f5f5f5"],
html[data-tema="escuro"] [style*="background-color: #f5f5f5"],
html[data-tema="escuro"] [style*="background:#f1f5f9"],
html[data-tema="escuro"] [style*="background: #f1f5f9"],
html[data-tema="escuro"] [style*="background-color:#f1f5f9"],
html[data-tema="escuro"] [style*="background-color: #f1f5f9"],
html[data-tema="escuro"] [style*="background:#eee"],
html[data-tema="escuro"] [style*="background: #eee"],
html[data-tema="escuro"] [style*="background-color:#eee"],
html[data-tema="escuro"] [style*="background-color: #eee"],
html[data-tema="escuro"] [style*="background:#f7f7f7"],
html[data-tema="escuro"] [style*="background: #f7f7f7"],
html[data-tema="escuro"] [style*="background-color:#f7f7f7"],
html[data-tema="escuro"] [style*="background-color: #f7f7f7"] {
background-color: var(--bl-fundo-2) !important;
border-color: var(--bl-borda) !important;
}
html[data-tema="escuro"] #spa_pref_siteonly_row { color: var(--bl-texto-2); }
/* Texto com cor escrita no HTML (style="color:#333"): escuro vira claro, cinza médio vira cinza claro.
Se casar com um "background-color:#333", texto claro sobre fundo escuro também está certo. */
html[data-tema="escuro"] [style*="color:#000"],
html[data-tema="escuro"] [style*="color: #000"],
html[data-tema="escuro"] [style*="color:#000000"],
html[data-tema="escuro"] [style*="color: #000000"],
html[data-tema="escuro"] [style*="color:#111"],
html[data-tema="escuro"] [style*="color: #111"],
html[data-tema="escuro"] [style*="color:#111111"],
html[data-tema="escuro"] [style*="color: #111111"],
html[data-tema="escuro"] [style*="color:#0f1419"],
html[data-tema="escuro"] [style*="color: #0f1419"],
html[data-tema="escuro"] [style*="color:#1a1a1a"],
html[data-tema="escuro"] [style*="color: #1a1a1a"],
html[data-tema="escuro"] [style*="color:#1e1e1e"],
html[data-tema="escuro"] [style*="color: #1e1e1e"],
html[data-tema="escuro"] [style*="color:#222"],
html[data-tema="escuro"] [style*="color: #222"],
html[data-tema="escuro"] [style*="color:#222222"],
html[data-tema="escuro"] [style*="color: #222222"],
html[data-tema="escuro"] [style*="color:#333"],
html[data-tema="escuro"] [style*="color: #333"],
html[data-tema="escuro"] [style*="color:#333333"],
html[data-tema="escuro"] [style*="color: #333333"],
html[data-tema="escuro"] [style*="color:#374151"],
html[data-tema="escuro"] [style*="color: #374151"],
html[data-tema="escuro"] [style*="color:#1f2937"],
html[data-tema="escuro"] [style*="color: #1f2937"],
html[data-tema="escuro"] [style*="color:#111827"],
html[data-tema="escuro"] [style*="color: #111827"],
html[data-tema="escuro"] [style*="color:#0f172a"],
html[data-tema="escuro"] [style*="color: #0f172a"],
html[data-tema="escuro"] [style*="color:#1e293b"],
html[data-tema="escuro"] [style*="color: #1e293b"],
html[data-tema="escuro"] [style*="color:#444"],
html[data-tema="escuro"] [style*="color: #444"],
html[data-tema="escuro"] [style*="color:#444444"],
html[data-tema="escuro"] [style*="color: #444444"],
html[data-tema="escuro"] [style*="color:#2d3748"],
html[data-tema="escuro"] [style*="color: #2d3748"] {
color: var(--bl-texto) !important;
}
html[data-tema="escuro"] [style*="color:#555"],
html[data-tema="escuro"] [style*="color: #555"],
html[data-tema="escuro"] [style*="color:#666"],
html[data-tema="escuro"] [style*="color: #666"],
html[data-tema="escuro"] [style*="color:#666666"],
html[data-tema="escuro"] [style*="color: #666666"],
html[data-tema="escuro"] [style*="color:#6b7280"],
html[data-tema="escuro"] [style*="color: #6b7280"],
html[data-tema="escuro"] [style*="color:#777"],
html[data-tema="escuro"] [style*="color: #777"],
html[data-tema="escuro"] [style*="color:#888"],
html[data-tema="escuro"] [style*="color: #888"],
html[data-tema="escuro"] [style*="color:#888888"],
html[data-tema="escuro"] [style*="color: #888888"],
html[data-tema="escuro"] [style*="color:#999"],
html[data-tema="escuro"] [style*="color: #999"],
html[data-tema="escuro"] [style*="color:#999999"],
html[data-tema="escuro"] [style*="color: #999999"],
html[data-tema="escuro"] [style*="color:#4b5563"],
html[data-tema="escuro"] [style*="color: #4b5563"],
html[data-tema="escuro"] [style*="color:#64748b"],
html[data-tema="escuro"] [style*="color: #64748b"] {
color: var(--bl-texto-3) !important;
}
/* ---------- Barra "Review / Ficha" (só admin; plugin boletando-review-builder) ---------- */
html[data-tema="escuro"] .brb-cs { background: var(--bl-fundo-2) !important; border-color: var(--bl-borda) !important; color: var(--bl-texto-2); }
html[data-tema="escuro"] .brb-cs button { background: var(--bl-fundo-3) !important; color: var(--bl-texto-2) !important; border-color: var(--bl-borda-2) !important; }
html[data-tema="escuro"] .brb-cs__item b { color: var(--bl-texto) !important; }
html[data-tema="escuro"] .brb-cs__item.is-none a { color: var(--bl-texto-3) !important; }
/* ========== Botão sol/lua do header (vale nos DOIS modos) ========== */
.bl-tema-wrap { position: relative; display: flex; margin-left: 10px; } /* mesma folga que o sino tinha do "Enviar Oferta" */
.bl-tema-ico { display: none; }
html:not([data-tema-escolha]) .bl-tema-ico--claro,
html[data-tema-escolha="claro"] .bl-tema-ico--claro,
html[data-tema-escolha="escuro"] .bl-tema-ico--escuro,
html[data-tema-escolha="auto"] .bl-tema-ico--auto { display: block; }
.bl-tema-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1000;
min-width: 200px;
padding: 6px;
background: var(--bl-fundo, #fff);
border: 1px solid var(--bl-borda, #e5e7eb);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.bl-tema-menu[hidden] { display: none; }
.bl-tema-menu__titulo {
padding: 6px 10px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-texto-3, #6b7280);
}
.bl-tema-menu button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--bl-texto, #1e293b);
font: inherit;
font-size: 14px;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.bl-tema-menu button:hover,
.bl-tema-menu button:focus-visible { background: var(--bl-fundo-3, #f1f5f9); outline: none; }
.bl-tema-menu__rot small { display: block; font-size: 12px; font-weight: 400; color: var(--bl-texto-3, #6b7280); }
.bl-tema-menu__ok { color: #3b9fd8; visibility: hidden; flex: none; }
.bl-tema-menu button[aria-checked="true"] { color: #3b9fd8; font-weight: 600; }
.bl-tema-menu button[aria-checked="true"] .bl-tema-menu__ok { visibility: visible; }
html[data-tema="escuro"] .bl-tema-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
html[data-tema="escuro"] .bl-tema-menu button[aria-checked="true"],
html[data-tema="escuro"] .bl-tema-menu__ok { color: var(--bl-azul-texto); }
/* Celular: o header não comporta mais um ícone (encostava no logo a 360px);
a escolha fica no menu ☰. */
@media (max-width: 767px) {
.header-actions .bl-tema-wrap { display: none; }
}
/* Seletor do menu ☰ numa linha só: "Tema" à esquerda, pílula pequena com texto à direita (04/nov/2026). */
.bl-tema-seg-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 8px 0 18px; /* rodapé do menu ☰: logo antes da Política de Privacidade (04/nov/2026) */
}
.bl-tema-seg-rot {
font-size: 13px;
font-weight: 600;
color: var(--color-gray-800);
}
.bl-tema-seg {
display: flex;
gap: 4px;
padding: 3px;
background: var(--bl-fundo-3, #f1f5f9);
border-radius: 999px;
}
.bl-tema-seg button {
padding: 7px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--bl-texto-2, #475569);
font: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
}
.bl-tema-seg button[aria-checked="true"] {
background: var(--bl-fundo, #fff);
color: #3b9fd8;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}
html[data-tema="escuro"] .bl-tema-seg button[aria-checked="true"] { color: var(--bl-azul-texto); background: var(--bl-fundo-4); }
/* ---------- Header no escuro: grafite do cartão com uma linha no azul da marca
(04/nov/2026; o azul cheio brigava com o preto). Topo do menu ☰ no mesmo tom. ---------- */
html[data-tema="escuro"] .header-top,
html[data-tema="escuro"] .nav-sidebar-header {
background: #1c1c1c !important;
border-bottom: 3px solid #3b9fd8;
}
/* ---------- Página da oferta: caixa do cupom (fundo azul-claro no modo claro) ---------- */
html[data-tema="escuro"] .deal-page .cupom-cta-linha > .coupon-box { background: var(--bl-azul-suave); border-color: rgba(59, 159, 216, 0.55); }
html[data-tema="escuro"] .deal-page .cupom-cta-linha > .coupon-box:hover { background: rgba(59, 159, 216, 0.26); }
html[data-tema="escuro"] .deal-page .cupom-cta-linha > .coupon-box.copied { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.6); }
html[data-tema="escuro"] .deal-page .coupon-code { color: var(--bl-azul-texto); }
/* ---------- Prós e contras / review (plugin boletando-review-builder: variáveis em .brb-review) ---------- */
html[data-tema="escuro"] .brb-review {
--brb-ink: var(--bl-texto);
--brb-ink-2: var(--bl-texto);
--brb-ink-soft: var(--bl-texto-2);
--brb-ink-fade: var(--bl-texto-3);
--brb-ink-ghost: var(--bl-borda-forte);
--brb-bg: var(--bl-fundo);
--brb-verde: #4ade80;
--brb-verde-bg: rgba(34, 197, 94, 0.16);
--brb-vermelho: #f87171;
--brb-vermelho-bg: rgba(220, 38, 38, 0.18);
--brb-rule-soft: 1px solid var(--bl-borda-2);
--brb-rule-dash: 1px dashed var(--bl-borda-forte);
/* Azul dos destaques (**palavra**), links das fontes e "ver ficha completa":
o #1976d2 do claro some no grafite. */
--brb-azul-deep: var(--bl-azul-texto);
--brb-azul: #2a6d99;
}
/* Faixa "Ficha Técnica": grafite com a linha azul, como o header (o azul cheio destoava). */
html[data-tema="escuro"] .brb-review .brb-specs__bar {
background: var(--bl-fundo-3);
color: var(--bl-texto);
border-bottom: 3px solid #3b9fd8;
}
/* Caixa "Fica a dica" da oferta: a borda azul-clara do modo claro ficava quase branca. */
html[data-tema="escuro"] .deal-page .deal-specs { border-color: rgba(59, 159, 216, 0.45); }
/* Botão flutuante da Play Store: branco também no escuro (o ícone tem 4 cores e
some num fundo escuro, ao lado do Telegram azul e do WhatsApp verde). */
html[data-tema="escuro"] .blt-fsocial__link--playstore { background: #fff; }
/* ========== Ajustes da crítica de design (03/nov/2026) ========== */
/* 1) Tarja "Preço Histórico" (escolhida em 04/nov/2026 entre 16 candidatas): degradê
vermelho → vinho, sem o brilho pulsando (no escuro o vermelho cheio lia como alerta).
Preço num vermelho claro (~6:1 sobre o cartão). O plugin usa !important. */
html[data-tema="escuro"] .oferta-card.phc-grid-lowest { box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.6) !important; }
html[data-tema="escuro"] .oferta-card.phc-grid-lowest::before {
background: linear-gradient(90deg, #dc2626 0%, #7f1d1d 100%);
color: #fff;
animation: none;
}
html[data-tema="escuro"] .oferta-card.phc-grid-lowest::after { animation: none; }
html[data-tema="escuro"] .oferta-card.phc-grid-lowest .oferta-card-price,
html[data-tema="escuro"] .oferta-card.phc-grid-lowest .oferta-card-price *,
html[data-tema="escuro"] .price_for_grid.phc-grid-lowest .oferta-card-price,
html[data-tema="escuro"] .price_for_grid.phc-grid-lowest .oferta-card-price span { color: #f87171 !important; }
/* 2) Botões verdes um tom mais fechado: a grade virava uma "parede verde" no escuro. */
html[data-tema="escuro"] .oferta-card-btn,
html[data-tema="escuro"] .btn-cta,
html[data-tema="escuro"] .deal-page .btn-cta {
background: linear-gradient(135deg, #22a55a 0%, #16843f 100%);
box-shadow: none;
}
/* 3) Cupom do card com presença (como na página da oferta) e selos um tom acima do cartão. */
html[data-tema="escuro"] .oferta-card .coupon-box {
background: var(--bl-azul-suave);
border-color: rgba(59, 159, 216, 0.55);
}
html[data-tema="escuro"] .oferta-card .coupon-code { color: var(--bl-azul-texto); }
/* Selos (256GB, 5G, QHD): ficam sobre o quadro BRANCO da foto e sobre o cartão
escuro ao mesmo tempo. Escuros (contrastam com o branco) com borda clara fina
(separa do cartão). Claros se misturavam com a foto. */
html[data-tema="escuro"] .special-feature-badge {
background: #111111;
color: #fff;
font-weight: 700;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
html[data-tema="escuro"] .special-feature-badge * { color: #fff; }
/* Pílula de categoria ativa / hover: azul da marca escurecido
(o azul cheio destoava logo abaixo dele). */
html[data-tema="escuro"] .category-pill.active,
html[data-tema="escuro"] .category-pill:hover {
background: #2a6d99;
color: #fff;
}
/* No celular a pílula vira item da barra de baixo, sem fundo: só a cor marca o ativo. */
@media (max-width: 767px) {
html[data-tema="escuro"] .categories-nav .category-pill.active,
html[data-tema="escuro"] .categories-nav .category-pill:hover { background: transparent; color: var(--bl-azul-texto); }
}
/* Busca: borda clara para o campo não se perder no header escuro. */
html[data-tema="escuro"] div.asp_w.asp_m,
html[data-tema="escuro"] div.asp_w.asp_m .probox {
border-radius: 8px !important;
}
html[data-tema="escuro"] div.asp_w.asp_m {
border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
html[data-tema="escuro"] div.asp_w.asp_m:focus-within {
border-color: rgba(124, 196, 238, 0.7) !important;
}
/* Logo da loja no card: círculo branco (os logos são feitos p/ fundo branco) com
anel na cor do cartão, p/ se destacar do quadro branco da foto. */
html[data-tema="escuro"] .oferta-card-store-badge {
background: #fff;
border-color: var(--bl-fundo);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* Filtros: lista do seletor (hover, selecionado), textos cinza-azulados e aviso laranja. */
html[data-tema="escuro"] .bf-dd-lista [role="option"]:hover,
html[data-tema="escuro"] .bf-dd-lista [role="option"]:focus-visible { background: #333333; }
html[data-tema="escuro"] .bf-dd-lista [aria-selected="true"] { background: var(--bl-azul-suave); color: var(--bl-azul-texto); }
html[data-tema="escuro"] .bf-dd-lista [aria-selected="true"] .bf-dd-qtd { color: var(--bl-azul-texto); background: var(--bl-fundo); }
html[data-tema="escuro"] .bf-dd-todos .bf-dd-nome,
html[data-tema="escuro"] .bf-preco-caixa span,
html[data-tema="escuro"] .bf-dd-lista .bf-dd-qtd { color: var(--bl-texto-3); }
html[data-tema="escuro"] .bf-vazio { background: rgba(249, 115, 22, 0.14); border-color: rgba(249, 115, 22, 0.45); color: var(--bl-texto-2); }
html[data-tema="escuro"] .bf-vazio a { color: var(--bl-azul-texto); }
/* A lupa da busca é uma MÁSCARA pintada com background-color (header12.css,
#ajaxsearchpro1_x .promagnifier .innericon) — a fase 1 trocou o #6a6a6a pelo
token de fundo escuro, que some na caixa. Aqui ela volta a ser clara. */
html[data-tema="escuro"] #ajaxsearchpro1_1 .promagnifier .innericon,
html[data-tema="escuro"] #ajaxsearchpro1_2 .promagnifier .innericon {
background-color: var(--bl-texto-2);
}
/* Botão "Publicar Comentário": azul da marca escurecido (é ação). */
html[data-tema="escuro"] #wpdcom .wpd-prim-button.wc_comm_submit {
background: linear-gradient(135deg, #2a78ab 0%, #1f5f87 100%) !important;
}
/* "Voltar ao topo": usa --color-gray-700 como FUNDO (e essa variável virou cor de
texto clara no escuro). */
html[data-tema="escuro"] .back-to-top { background: var(--bl-fundo-4); color: var(--bl-texto); }
/* Página 404: caixa da mensagem. */
html[data-tema="escuro"] .error-text { background: var(--bl-fundo) !important; color: var(--bl-texto-2) !important; border-color: var(--bl-borda) !important; }
/* Entrar / cadastrar (login-page.css): fundo da página (o azul cheio destoava). */
html[data-tema="escuro"] body.register .rh-outer-wrap.register_wrap_type {
background: var(--bl-pagina) !important;
}
html[data-tema="escuro"] body.register .bp_return_home { color: #fff; }
/* Vitrine filtrada: 2ª lista (produtos monitorados, sem oferta ativa).
Barra "Produtos abaixo…" e faixa "Preço monitorado" no grafite do header com a linha azul (o azul cheio
destoava); texto do "Ver na loja" num azul legível sobre o cartão escuro. */
html[data-tema="escuro"] .ofertas-grid-separator {
background: #1c1c1c !important;
border-bottom: 3px solid #3b9fd8;
}
html[data-tema="escuro"] .oferta-card--evergreen::before { background-color: #2a6d99; }
html[data-tema="escuro"] .oferta-card--evergreen { border-color: rgba(59, 159, 216, 0.45); }
html[data-tema="escuro"] .oferta-card.oferta-card--evergreen .oferta-card-btn--evergreen {
color: var(--bl-azul-texto);
border-color: rgba(124, 196, 238, 0.55);
background: transparent;
}
html[data-tema="escuro"] .oferta-card.oferta-card--evergreen .oferta-card-btn--evergreen:hover { background: var(--bl-azul-suave); }
/* ---------- Cadastro e ativação (BuddyPress) — 04/nov/2026 ----------
Os cards de "Ativar conta", "Conta ativada!" e "Cadastro realizado!" vêm com estilo
inline do mu-plugin boletando-emails-cadastro-usuario-recaptcha-buddypress.php. */
html[data-tema="escuro"] [style*="color:#334155"] { color: var(--bl-texto) !important; }
html[data-tema="escuro"] [style*="color:#475569"] { color: var(--bl-texto-2) !important; }
html[data-tema="escuro"] [style*="color:#94a3b8"] { color: var(--bl-texto-3) !important; }
html[data-tema="escuro"] [style*="border-top:1px solid #e2e8f0"] { border-top-color: var(--bl-borda) !important; }
html[data-tema="escuro"] #activate-page input[type="text"] {
background: var(--bl-fundo-2) !important;
border: 1px solid var(--bl-borda-2) !important;
color: var(--bl-texto) !important;
}
html[data-tema="escuro"] #activate-page input[type="submit"],
html[data-tema="escuro"] [style*="background:#41b9ff"][href] {
background: linear-gradient(135deg, #2a78ab 0%, #1f5f87 100%) !important;
color: #fff !important;
box-shadow: none !important;
}
/* O card "Cadastro realizado!" pinta o body de azul com !important. */
html[data-tema="escuro"] body.register { background: var(--bl-pagina) !important; }
/* Borda do card de entrar/cadastrar: era quase branca no escuro. */
html[data-tema="escuro"] body.register .rehub-login-popup.re-user-popup-wrap,
html[data-tema="escuro"] body.register #rehub-login-popup .rehub-login-popup,
html[data-tema="escuro"] body.register #rehub-register-popup .rehub-register-popup,
html[data-tema="escuro"] body.registration #register-page { border-color: var(--bl-borda-2) !important; }
/* ---------- Tela de login do WordPress (entrar, esqueci a senha, nova senha) ----------
Estilo claro no mu-plugin acima (login_enqueue_scripts); aqui só o escuro.
O script do também roda nessa tela (functions/modo-escuro.php). */
html[data-tema="escuro"] body.login { background: var(--bl-pagina) !important; }
html[data-tema="escuro"] body.login #loginform,
html[data-tema="escuro"] body.login #registerform,
html[data-tema="escuro"] body.login #lostpasswordform,
html[data-tema="escuro"] body.login #resetpassform {
background: var(--bl-fundo) !important;
border: 1px solid var(--bl-borda) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
html[data-tema="escuro"] body.login label,
html[data-tema="escuro"] body.login .description,
html[data-tema="escuro"] body.login .indicator-hint { color: var(--bl-texto-2) !important; }
html[data-tema="escuro"] body.login .forgetmenot label { color: var(--bl-texto-3) !important; }
/* Com #id: o estilo claro do mu-plugin usa #loginform input[...] com !important. */
html[data-tema="escuro"] body.login form input[type="text"],
html[data-tema="escuro"] body.login form input[type="password"],
html[data-tema="escuro"] body.login form input[type="email"],
html[data-tema="escuro"] body.login #loginform input[type="text"],
html[data-tema="escuro"] body.login #loginform input[type="password"],
html[data-tema="escuro"] body.login #registerform input[type="text"],
html[data-tema="escuro"] body.login #registerform input[type="email"],
html[data-tema="escuro"] body.login #lostpasswordform input[type="text"],
html[data-tema="escuro"] body.login #resetpassform input[type="password"],
html[data-tema="escuro"] body.login #resetpassform input[type="text"] {
background: var(--bl-fundo-2) !important;
border-color: var(--bl-borda-2) !important;
color: var(--bl-texto) !important;
}
html[data-tema="escuro"] body.login input[type="checkbox"] { background: var(--bl-fundo-2); border-color: var(--bl-borda-forte); }
html[data-tema="escuro"] body.login .button.wp-hide-pw { color: var(--bl-azul-texto) !important; }
html[data-tema="escuro"] body.login #wp-submit {
background: linear-gradient(135deg, #2a78ab 0%, #1f5f87 100%) !important;
box-shadow: none !important;
}
html[data-tema="escuro"] body.login #wp-submit:hover { background: #2a78ab !important; }
html[data-tema="escuro"] body.login .message,
html[data-tema="escuro"] body.login .success,
html[data-tema="escuro"] body.login #login_error,
html[data-tema="escuro"] body.login .notice {
background: var(--bl-fundo) !important;
color: var(--bl-texto-2) !important;
}
html[data-tema="escuro"] body.login form input[type="text"]:focus,
html[data-tema="escuro"] body.login form input[type="password"]:focus,
html[data-tema="escuro"] body.login form input[type="email"]:focus,
html[data-tema="escuro"] body.login #loginform input:focus {
border-color: #3b9fd8 !important;
box-shadow: 0 0 0 2px rgba(59, 159, 216, 0.25) !important;
}
/* Comentários (wpDiscuz) para quem não entrou: link "Login" azul-escuro e linha quase branca. */
html[data-tema="escuro"] #wpdcom .wpd-login a,
html[data-tema="escuro"] #wpdcom .wpd-login { color: var(--bl-azul-texto) !important; }
html[data-tema="escuro"] #wpdcom .wpd-form-head { border-bottom-color: var(--bl-borda-2) !important; }
/* Título do card azul no celular: era o :hover "grudado" depois do toque (telas
sem mouse mantêm o hover até tocar em outro lugar). Só onde há mouse ele acende.
Vale para o claro E o escuro (o claro tinha o mesmo efeito). */
@media (hover: none) {
.oferta-card:hover .oferta-card-title a { color: var(--oferta-text); }
}
/* 2º botão do card ("LISTA 2" etc.): o verde-claro cheio brilhava demais no escuro.
Vira verde em tinta, abaixo do botão principal na hierarquia. */
html[data-tema="escuro"] .oferta-card-btn-secondary {
background: rgba(34, 197, 94, 0.14);
color: #4ade80;
box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.45) !important;
}
html[data-tema="escuro"] .oferta-card-btn-secondary:hover { color: #86efac; }
/* Menu ☰ no computador (≥1024px): o rodapé é ordenado com `order` (header12.css);
sem isto o Tema (order 0) subiria para o topo. Fica logo antes do legal, como no celular. */
@media (min-width: 1024px) {
.nav-sidebar-footer .bl-tema-seg-wrap { order: 5; }
.nav-sidebar-footer .nav-sidebar-legal { order: 6; }
}
/* A partir de 768px o header mostra o botão sol/lua: o Tema do menu ☰ ficaria
repetido, então só aparece no celular (onde o botão do header some). */
@media (min-width: 768px) {
.nav-sidebar-footer .bl-tema-seg-wrap { display: none; }
}
/* "Enviar Oferta" do menu ☰: o verde-claro cheio brilhava no escuro; mesmo verde
do botão principal dos cards. */
html[data-tema="escuro"] .nav-sidebar-cta-green {
background: linear-gradient(135deg, #22a55a 0%, #16843f 100%);
}
/* ---------- Formulários próprios (plugin boletando-formularios: Enviar Oferta,
Fale com o Boletando, Reportar). As cores do texto são variáveis fixas em .bform
(#1e293b): no escuro o texto dos campos e o "Selecione…" do dropdown sumiam. ---------- */
html[data-tema="escuro"] .bform {
--bf-texto: var(--bl-texto);
--bf-suave: var(--bl-texto-2);
--bf-cinza: var(--bl-texto-3);
--bf-borda: var(--bl-borda-2);
--bf-erro: #f87171;
}
html[data-tema="escuro"] .bform .bform__controle { background-color: var(--bl-fundo-2); color: var(--bl-texto); }
html[data-tema="escuro"] .bform select.bform__controle {
background: var(--bl-fundo-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c8c8c8' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
color: var(--bl-texto);
}
/* "Selecione…" (opção vazia) em cinza, como os placeholders dos outros campos. */
html[data-tema="escuro"] .bform select.bform__controle:invalid,
html[data-tema="escuro"] .bform select.bform__controle:has(option[value=""]:checked) { color: #8a8a8a; }
html[data-tema="escuro"] .bform select.bform__controle option { background: var(--bl-fundo-2); color: var(--bl-texto); }
html[data-tema="escuro"] .bform .bform__controle::placeholder { color: #8a8a8a; }
html[data-tema="escuro"] .bform .bform__botoes .bform__opcao span { background: var(--bl-fundo-2); color: var(--bl-texto-2); border-color: var(--bl-borda-2); }
html[data-tema="escuro"] .bform .bform__aviso { color: #fca5a5; background: rgba(239, 68, 68, 0.14); border-color: rgba(248, 113, 113, 0.45); }
html[data-tema="escuro"] div.bform__sucesso { color: #bbf7d0; background: rgba(34, 197, 94, 0.14); border-color: rgba(74, 222, 128, 0.45); }
/* Barra de categorias (Recentes, Populares…): o cinza #9a9a9a ficava apagado demais. */
html[data-tema="escuro"] .category-pill:not(.active) { color: #e6e6e6; }
/* ---------- Página /parceiro ("Seja Parceiro", page 259571): estilo próprio no
conteúdo da página com variáveis --v-* e vários fundos #fff fixos. ---------- */
html[data-tema="escuro"] .blt-vagas {
--v-primary-ink: var(--bl-azul-texto);
--v-primary-soft: var(--bl-azul-suave);
--v-amber-soft: rgba(244, 166, 32, 0.14);
--v-amber-ink: #fcd34d;
--v-gray-50: var(--bl-fundo-2);
--v-gray-100: var(--bl-fundo-3);
--v-gray-200: var(--bl-borda-2);
--v-gray-400: #8a8a8a;
--v-gray-500: var(--bl-texto-3);
--v-gray-600: var(--bl-texto-3);
--v-gray-700: var(--bl-texto-2);
--v-gray-900: var(--bl-texto);
--v-shadow: 0 2px 8px rgba(0, 0, 0, .4);
--v-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
}
html[data-tema="escuro"] .blt-vagas details,
html[data-tema="escuro"] .blt-vagas .blt-vagas-benefit,
html[data-tema="escuro"] .blt-vagas .blt-vagas-step,
html[data-tema="escuro"] .blt-vagas .blt-vagas-mock,
html[data-tema="escuro"] .blt-vagas .blt-vagas-stats,
html[data-tema="escuro"] .blt-vagas .blt-vagas-job,
html[data-tema="escuro"] .blt-vagas .blt-vagas-chip {
background: var(--bl-fundo);
border-color: var(--bl-borda-2);
color: var(--bl-texto-2);
}
html[data-tema="escuro"] .blt-vagas .blt-vagas-tag { background: var(--bl-fundo-3); color: var(--bl-texto-2); }
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--money,
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--money p,
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--money strong { color: #fcd34d; }
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--doc,
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--doc p,
html[data-tema="escuro"] .blt-vagas .blt-vagas-note--doc strong { color: var(--bl-azul-texto); }
html[data-tema="escuro"] .blt-vagas .blt-vagas-job-badge { background: rgba(34, 197, 94, 0.16); color: #4ade80; }