File: /home/kohlsol/public_html/wp-content/themes/brooklyn-child/style.css
/*
Theme Name: Kohl Soluções
Theme URI: https://kohlsolucoes.com.br
Description: Child theme do Brooklyn para o site institucional/comercial da Kohl Soluções — identidade herdada do Kohl Advogados, com tokens próprios.
Version: 1.0.0
Author: Redbeard
Author URI: https://redbeard.com.br
Template: brooklyn
Text Domain: kohl-solucoes-child
*/
/* ==========================================================================
Kohl Soluções — Design Tokens
Identidade herdada do Kohl Advogados. Ver plano (seção 4.2) para a regra
de proporção: marinho domina, creme só em faixa fina, champagne só em
ação/estado (nunca decorativo). Contraste champagne/marinho validado em
6.38:1 — acima do mínimo AA (4.5:1) para uso em botão de texto normal.
========================================================================== */
:root {
/* Cor */
--kohl-marinho: #0F2340;
--kohl-marinho-suave: #1A3454;
--kohl-champagne: #ABA58E;
--kohl-champagne-escuro: #8F8A73;
--kohl-creme: #F2EBD5;
--kohl-cinza-texto: #393C3E;
--kohl-cinza-texto-suave: #6B6E70;
--kohl-fundo-claro: #F7F8FA;
--kohl-branco: #FFFFFF;
/* Tipografia — decisão 18 (revoga 16): mesmo sistema real do site de
referência, confirmado por inspeção ao vivo (getComputedStyle), não
pela lista de fontes carregada via Google Fonts. */
--kohl-fonte-titulo: 'Open Sans', sans-serif;
--kohl-fonte-texto: 'Open Sans', sans-serif;
--kohl-fonte-ui: 'Roboto', sans-serif;
--kohl-fonte-destaque: 'Raleway', sans-serif;
--kohl-escala-h1: clamp(2.25rem, 4vw, 3.5rem);
--kohl-escala-h2: clamp(1.75rem, 3vw, 2.5rem);
--kohl-escala-h3: clamp(1.375rem, 2vw, 1.75rem);
--kohl-escala-h4: 1.125rem;
--kohl-escala-corpo: 1rem;
--kohl-escala-legenda: 0.875rem;
--kohl-altura-linha-titulo: 1.2;
--kohl-altura-linha-corpo: 1.6;
/* Espaçamento — escala base 8px */
--kohl-espaco-xs: 8px;
--kohl-espaco-sm: 16px;
--kohl-espaco-md: 24px;
--kohl-espaco-lg: 48px;
--kohl-espaco-xl: 80px;
--kohl-espaco-xxl: 120px;
/* Espaçamento vertical de seção -- separado da escala geral acima de
propósito (pedido de Daniel, 02/08: mais respiro entre seções, sem
inflar outros usos de --kohl-espaco-lg/xl, como gap de grid e padding
de card, que não são a mesma coisa que "distância entre uma seção e
a próxima"). */
--kohl-espaco-secao: 88px;
--kohl-espaco-secao-marinho: 104px;
}
/* Tipografia base — especificidade igual à do reset do Brooklyn (style.css),
vence por ordem de carregamento (child sempre depois do pai). Os elementos
com CSS dinâmica !important do Brooklyn são tratados à parte, via
wp_head prioridade 11 em functions.php — ver nota lá. */
body {
font-family: var(--kohl-fonte-texto);
color: var(--kohl-cinza-texto);
font-size: var(--kohl-escala-corpo);
line-height: var(--kohl-altura-linha-corpo);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--kohl-fonte-titulo);
color: var(--kohl-marinho);
line-height: var(--kohl-altura-linha-titulo);
font-weight: 600;
}
h1 { font-size: var(--kohl-escala-h1); }
h2 { font-size: var(--kohl-escala-h2); }
h3 { font-size: var(--kohl-escala-h3); }
h4, h5, h6 { font-size: var(--kohl-escala-h4); }
a {
color: var(--kohl-marinho);
}
a:hover {
color: var(--kohl-champagne-escuro);
}
.kohl-bg-marinho a {
color: var(--kohl-champagne);
}
.kohl-bg-marinho a:hover {
color: var(--kohl-branco);
}
/* Botão — champagne só aqui: é ação, não decoração (seção 4.2 do plano) */
.bklyn-btn {
background-color: var(--kohl-marinho);
border-color: var(--kohl-marinho);
color: var(--kohl-branco);
font-family: var(--kohl-fonte-ui);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bklyn-btn:hover,
.bklyn-btn:focus {
background-color: var(--kohl-champagne);
border-color: var(--kohl-champagne);
color: var(--kohl-marinho);
}
/* Botao sobre secao marinho: marinho-sobre-marinho fica invisivel. */
.kohl-bg-marinho .bklyn-btn {
background-color: var(--kohl-branco);
border-color: var(--kohl-branco);
color: var(--kohl-marinho);
}
.kohl-bg-marinho .bklyn-btn:hover,
.kohl-bg-marinho .bklyn-btn:focus {
background-color: var(--kohl-champagne);
border-color: var(--kohl-champagne);
color: var(--kohl-marinho);
}
/* Botão "ghost" -- contorno + preenchimento translúcido na mesma cor,
referência demo33 (pedido de Daniel, 01/08): "botões com efeitos de
transparência, contorno, hover". Usa a base do .bklyn-btn (padding,
radius, fonte) só trocando o preenchimento -- ação secundária, não um
sistema de botão novo. */
/* !important necessário -- functions.php tem um override inline (wp_head
prioridade 11, achado "marinho sobre marinho = botão invisível") que já
usa !important em `.kohl-bg-marinho .bklyn-btn`; sem !important aqui
também, o ghost nunca vencia essa regra mesmo tendo mais especificidade
(importance sempre bate especificidade). Achado no retorno de Daniel
(01/08): "ainda não vejo nada translúcido" -- o CSS existia, só perdia
essa disputa em toda seção de fundo marinho (ou seja, em todo hero de
unidade, que é exatamente onde acabei de aplicar o botão ghost). */
.bklyn-btn.kohl-btn-ghost {
background-color: rgba(171, 165, 142, 0.15) !important;
border-color: var(--kohl-champagne-escuro) !important;
color: var(--kohl-marinho) !important;
}
.bklyn-btn.kohl-btn-ghost:hover,
.bklyn-btn.kohl-btn-ghost:focus {
background-color: var(--kohl-champagne) !important;
border-color: var(--kohl-champagne) !important;
color: var(--kohl-marinho) !important;
}
.kohl-bg-marinho .bklyn-btn.kohl-btn-ghost {
background-color: rgba(242, 235, 213, 0.12) !important;
border-color: var(--kohl-champagne) !important;
color: var(--kohl-creme) !important;
}
.kohl-bg-marinho .bklyn-btn.kohl-btn-ghost:hover,
.kohl-bg-marinho .bklyn-btn.kohl-btn-ghost:focus {
background-color: var(--kohl-champagne) !important;
border-color: var(--kohl-champagne) !important;
color: var(--kohl-marinho) !important;
}
/* Par primário+ghost no hero das 6 unidades -- pedido de Daniel (01/08, 2ª
rodada): "ainda não vejo nada translúcido com contorno". O ghost só
estava no rodapé, fácil de não notar -- agora também como CTA
secundário ao lado do botão principal do hero ("Ver como funciona",
ancora pra timeline da página). */
.bklyn-btn + .bklyn-btn.kohl-btn-ghost {
margin-left: var(--kohl-espaco-sm);
}
@media (max-width: 480px) {
.bklyn-btn + .bklyn-btn.kohl-btn-ghost {
margin-left: 0;
margin-top: var(--kohl-espaco-sm);
}
}
/* Piso de acessibilidade — foco de teclado visível, sempre */
a:focus-visible,
button:focus-visible,
.bklyn-btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--kohl-champagne-escuro);
outline-offset: 2px;
}
/* ACHADO (QA de teclado, 01/08): Fluent Forms tem `.ff-el-form-control:focus
{ outline:none }` própria (0,3,0 de especificidade), vencendo a regra
acima (0,1,1) mesmo sem !important -- nenhum campo de formulário (Contato,
Kohl FIDIC, os 3 lead magnets) mostrava foco de teclado. !important
necessário aqui pra garantir. Mesmo problema no botão de enviar
(`.ff_btn_style:focus`, também 0,3,0) -- corrigido junto. */
.ff-el-form-control:focus-visible,
.ff_btn_style:focus-visible {
outline: 3px solid var(--kohl-champagne-escuro) !important;
outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
Kohl Soluções — Componentes do template de unidade (Bloco 4)
Marinho dominante em hero/CTA final, creme só como faixa de respiro,
branco/fundo-claro no meio — regra de proporção da seção 4.2 do plano.
========================================================================== */
/* Fundo de cor sempre fullwidth por padrão -- antes só o hero tinha a classe
.kohl-fullwidth aplicada manualmente, as demais faixas (creme/claro/marinho
de fechamento) ficavam limitadas ao container de 1140px, com margem branca
visível nas laterais. Achado de Daniel (01/08). Como todo .kohl-bg-* já
tem um .kohl-container próprio por dentro (ver content-templates/*.txt),
estender o fundo para 100vw aqui não estica o texto -- só o fundo. */
.kohl-bg-marinho, .kohl-bg-creme, .kohl-bg-claro {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.kohl-bg-marinho {
background-color: var(--kohl-marinho);
padding: var(--kohl-espaco-secao-marinho) 0;
}
.kohl-bg-marinho h1, .kohl-bg-marinho h2, .kohl-bg-marinho h3,
.kohl-bg-marinho h4, .kohl-bg-marinho h5, .kohl-bg-marinho h6 {
color: var(--kohl-branco) !important;
}
.kohl-bg-marinho p, .kohl-bg-marinho li {
color: var(--kohl-creme) !important;
}
.kohl-bg-marinho .kohl-eyebrow {
color: var(--kohl-champagne) !important;
}
.kohl-bg-creme {
background-color: var(--kohl-creme);
padding: var(--kohl-espaco-secao) 0;
}
.kohl-bg-claro {
background-color: var(--kohl-fundo-claro);
padding: var(--kohl-espaco-secao) 0;
}
.kohl-secao {
padding: var(--kohl-espaco-secao) 0;
}
/* ACHADO (QA de contraste, 01/08): champagne-escuro sobre branco/creme dá
3.47:1 -- reprova AA (mínimo 4.5:1 pra texto pequeno). Também contraria a
própria regra do plano (seção 4.2: "champagne só em ação/estado" -- um
eyebrow é rótulo passivo, não ação). Trocado pro cinza suave já usado no
projeto, que passa em ambos os fundos claros. Mantido o override em fundo
marinho (`.kohl-bg-marinho .kohl-eyebrow`, abaixo), que já usa champagne
claro sobre fundo escuro -- esse combina passa tranquilo. */
.kohl-eyebrow {
font-family: var(--kohl-fonte-titulo);
font-size: var(--kohl-escala-legenda);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kohl-cinza-texto-suave);
display: block;
margin-bottom: var(--kohl-espaco-xs);
}
/* Trilho numerado — "como funciona", sequência real (ver seção 4.4 do plano:
a numeração aqui carrega informação, não é decoração) */
.kohl-trilho {
list-style: none;
margin: var(--kohl-espaco-md) 0 0;
padding: 0;
counter-reset: kohl-trilho-passo;
}
.kohl-trilho li {
counter-increment: kohl-trilho-passo;
position: relative;
padding: var(--kohl-espaco-sm) 0 var(--kohl-espaco-sm) 52px;
border-bottom: 1px solid rgba(15, 35, 64, 0.1);
}
.kohl-trilho li:last-child {
border-bottom: none;
}
.kohl-trilho li::before {
content: counter(kohl-trilho-passo);
position: absolute;
left: 0;
top: var(--kohl-espaco-sm);
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--kohl-marinho);
color: var(--kohl-branco);
font-family: var(--kohl-fonte-titulo);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
/* Lista secundária de serviços (bloco "o que fazemos", os 3 não-promovidos) */
.kohl-lista-secundaria {
list-style: none;
margin: var(--kohl-espaco-md) 0 0;
padding: 0;
}
.kohl-lista-secundaria li {
padding: var(--kohl-espaco-xs) 0;
border-bottom: 1px solid rgba(15, 35, 64, 0.08);
}
/* Callout de marca-produto (ex.: Pague Rápido dentro de Recovery) */
.kohl-callout-produto {
background-color: var(--kohl-branco);
border: 1px solid rgba(171, 165, 142, 0.4);
border-left: 4px solid var(--kohl-champagne);
padding: var(--kohl-espaco-md);
margin-top: var(--kohl-espaco-sm);
}
/* Botões nativos do WPBakery (vc_btn) — mesmos tokens do .bklyn-btn, ver
reforço em wp_head (functions.php) para vencer a especificidade do VC */
.vc_btn3.vc_btn3-style-flat {
font-family: var(--kohl-fonte-titulo);
}
/* Grid simples para as colunas de "para quem é" / "o que fazemos" —
substitui vc_row/vc_column, que não estão registrados nesta instalação
(ver PROGRESSO.md, Bloco 4). Plain CSS Grid, sem dependência de shortcode. */
.kohl-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--kohl-espaco-md);
margin-top: var(--kohl-espaco-md);
}
@media (max-width: 768px) {
.kohl-grid-3 {
grid-template-columns: 1fr;
}
}
.kohl-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 var(--kohl-espaco-md);
}
/* ==========================================================================
Placeholder de imagem — marcador visual pra Daniel saber exatamente o que
e onde entra imagem de verdade. Remover a classe quando a imagem real
entrar; nao e componente de producao.
========================================================================== */
.kohl-placeholder-img {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: repeating-linear-gradient(
45deg,
rgba(15, 35, 64, 0.06),
rgba(15, 35, 64, 0.06) 10px,
rgba(15, 35, 64, 0.02) 10px,
rgba(15, 35, 64, 0.02) 20px
);
border: 2px dashed rgba(15, 35, 64, 0.35);
border-radius: 4px;
color: var(--kohl-cinza-texto-suave);
font-family: var(--kohl-fonte-texto);
font-size: var(--kohl-escala-legenda);
padding: var(--kohl-espaco-md);
margin: var(--kohl-espaco-md) 0;
min-height: 220px;
}
.kohl-bg-marinho .kohl-placeholder-img {
border-color: rgba(242, 235, 213, 0.4);
background: repeating-linear-gradient(
45deg,
rgba(242, 235, 213, 0.08),
rgba(242, 235, 213, 0.08) 10px,
rgba(242, 235, 213, 0.02) 10px,
rgba(242, 235, 213, 0.02) 20px
);
color: var(--kohl-creme) !important;
}
.kohl-placeholder-img span {
max-width: 240px;
}
.kohl-placeholder-img.kohl-placeholder-icone {
min-height: 96px;
margin: 0 0 var(--kohl-espaco-sm);
}
/* ==========================================================================
Rodapé — construído do zero (child theme sobrescreve footer.php do pai
automaticamente). Antes disso o site mostrava widgets padrão do WordPress
("Archives", "Categories") — nunca tinha sido configurado.
========================================================================== */
/* Rodapé no modelo do demo4 (pedido de Daniel, 01/08: "aplique o rodapé de
um dos demos que eu te apresentei... você não precisa criar, pode
aproveitar o que já existe"). Estrutura real do demo4 (Cafe Brooklyn,
verificada ao vivo): fundo de foto esmaecida cobrindo o rodapé inteiro,
3 colunas, e na primeira coluna um card de citação flutuando sobre uma
foto menor, sobrepondo a borda inferior. Conteúdo continua só o real do
projeto -- nada de horário de funcionamento, bandeira de cartão ou selo
de confiança do demo original (isso é fabricado pro café fictício, não
existe aqui). */
.kohl-footer {
position: relative;
overflow: hidden;
padding-top: var(--kohl-espaco-xxl);
}
.kohl-footer-photo {
position: absolute;
inset: 0;
z-index: 0;
}
.kohl-footer-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.kohl-footer-photo::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 900px 500px at 8% 0%, rgba(171, 165, 142, 0.12), transparent 60%),
linear-gradient(180deg, rgba(15, 35, 64, 0.93) 0%, rgba(10, 25, 48, 0.96) 100%);
}
/* Linha de transição no topo -- marca com clareza onde a página termina e o
rodapé começa (achado de Daniel, 02/08: rodapé "simples e monótono"). */
.kohl-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 2;
background: linear-gradient(90deg, transparent, var(--kohl-champagne) 50%, transparent);
}
.kohl-footer-contact {
list-style: none;
margin: var(--kohl-espaco-sm) 0 0;
padding: 0;
}
.kohl-footer-contact li {
margin-bottom: 4px;
}
.kohl-footer-contact a {
font-size: var(--kohl-escala-legenda);
}
.kohl-footer-top {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: var(--kohl-espaco-lg);
padding-bottom: var(--kohl-espaco-xl);
}
@media (max-width: 900px) {
.kohl-footer-top {
grid-template-columns: 1fr 1fr;
}
.kohl-footer-brand-col {
grid-column: 1 / -1;
max-width: 360px;
}
}
@media (max-width: 600px) {
.kohl-footer-top {
grid-template-columns: 1fr;
}
.kohl-footer-brand-col {
max-width: none;
}
}
.kohl-footer-brand-col {
padding-bottom: var(--kohl-espaco-md);
}
.kohl-footer-quote-photo {
position: relative;
width: 100%;
max-width: 280px;
aspect-ratio: 4 / 3;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
.kohl-footer-quote-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.kohl-footer-quote-card {
position: absolute;
left: var(--kohl-espaco-md);
right: calc(-1 * var(--kohl-espaco-lg));
bottom: calc(-1 * var(--kohl-espaco-lg));
background-color: #0A1930;
border-left: 3px solid var(--kohl-champagne);
padding: var(--kohl-espaco-md);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.kohl-footer-quote-card p {
font-family: var(--kohl-fonte-titulo);
font-weight: 700;
font-size: 1.05rem;
line-height: 1.3;
color: var(--kohl-branco);
margin: 0 0 var(--kohl-espaco-xs);
}
.kohl-footer-quote-card span {
display: block;
font-family: var(--kohl-fonte-ui);
font-size: var(--kohl-escala-legenda);
color: var(--kohl-champagne);
}
@media (max-width: 600px) {
.kohl-footer-quote-card {
right: 0;
}
}
.kohl-footer-col-title {
position: relative;
font-family: var(--kohl-fonte-ui);
font-weight: 600;
font-size: var(--kohl-escala-legenda);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--kohl-champagne);
margin: 0 0 var(--kohl-espaco-md);
padding-bottom: var(--kohl-espaco-xs);
}
.kohl-footer-col-title-second {
margin-top: var(--kohl-espaco-lg);
}
.kohl-footer-col-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2px;
background-color: rgba(171, 165, 142, 0.4);
}
.kohl-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.kohl-footer-col li {
margin-bottom: var(--kohl-espaco-xs);
}
/* Link do rodapé -- antes só trocava de cor no hover (creme pra champagne,
dois tons próximos, quase imperceptível). Agora soma sublinhado que
desliza e um leve avanço horizontal -- fica óbvio que é clicável. */
.kohl-footer-col a {
position: relative;
display: inline-block;
color: var(--kohl-creme);
font-size: var(--kohl-escala-legenda);
text-decoration: none;
transition: color 0.2s ease;
}
.kohl-footer-col a::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 1px;
background-color: var(--kohl-champagne);
transition: width 0.25s ease;
}
.kohl-footer-col a:hover {
color: var(--kohl-champagne);
}
.kohl-footer-col a:hover::before {
width: 100%;
}
/* CTA do rodapé virou botão ghost (era link de texto com seta) -- reaproveita
a fundação de fundo escuro do rodapé pra dar o preenchimento translúcido
certo, sem precisar marcar <footer> com .kohl-bg-marinho (evitaria herdar
regras não relacionadas desse seletor). */
.kohl-footer-cta.kohl-btn-ghost {
background-color: rgba(242, 235, 213, 0.12);
border-color: var(--kohl-champagne);
color: var(--kohl-creme);
}
.kohl-footer-cta.kohl-btn-ghost:hover,
.kohl-footer-cta.kohl-btn-ghost:focus {
background-color: var(--kohl-champagne);
border-color: var(--kohl-champagne);
color: var(--kohl-marinho);
}
.kohl-footer-divider {
height: 1px;
background-color: rgba(242, 235, 213, 0.15);
}
.kohl-footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--kohl-espaco-sm);
padding: var(--kohl-espaco-md) 0;
}
.kohl-footer-bottom p {
color: rgba(242, 235, 213, 0.6);
font-size: var(--kohl-escala-legenda);
margin: 0;
}
.kohl-footer-legal {
list-style: none;
display: flex;
gap: var(--kohl-espaco-md);
margin: 0;
padding: 0;
}
.kohl-footer-legal a {
color: rgba(242, 235, 213, 0.6);
font-size: var(--kohl-escala-legenda);
text-decoration: none;
}
.kohl-footer-legal a:hover {
color: var(--kohl-champagne);
}
/* ==========================================================================
Upgrade visual — pedido de Daniel (01/08): ícones, cantos arredondados,
fullwidth, timeline elaborada, FAQ+CTA em 2 colunas, efeitos de hover.
Inspirado nos layouts modelo do Brooklyn (unitedthemes.com), sem copiar.
========================================================================== */
/* Cantos arredondados — botão e imagens. Destaque maior nos CTAs (pedido
de Daniel, 01/08): sombra própria da cor da marca, peso maior, leve
elevação no hover -- sem trocar de cor fora do estado de ação. */
.bklyn-btn {
border-radius: 999px;
padding: 16px 36px !important;
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 8px 24px rgba(15, 35, 64, 0.22);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.bklyn-btn:hover,
.bklyn-btn:focus {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(171, 165, 142, 0.35);
}
.kohl-bg-marinho .bklyn-btn {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
/* ACHADO (Daniel, 02/08: "amarelo é a cor de destaque, foi escolha sua?"):
não foi -- é o dourado padrão de fábrica do tema (#FFBF00) pro item de
menu ativo, o mesmo valor que já tínhamos corrigido no acordeão do FAQ
mas esquecemos aqui. Trocado por sublinhado fino (padrão do demo49-light:
lá o item ativo não muda de cor, ganha um traço embaixo), sem introduzir
cor nova fora da paleta. */
.ut-main-navigation-link.active,
.ut-main-navigation-link.current-menu-item,
.ut-main-navigation-link.selected,
li.current-menu-item > .ut-main-navigation-link,
li.current_page_item > .ut-main-navigation-link,
li.current-menu-parent > .ut-main-navigation-link,
li.current_page_parent > .ut-main-navigation-link {
color: var(--kohl-marinho) !important;
position: relative;
}
.ut-main-navigation-link.active::after,
.ut-main-navigation-link.current-menu-item::after,
.ut-main-navigation-link.selected::after,
li.current-menu-item > .ut-main-navigation-link::after,
li.current_page_item > .ut-main-navigation-link::after,
li.current-menu-parent > .ut-main-navigation-link::after,
li.current_page_parent > .ut-main-navigation-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 2px;
background-color: var(--kohl-champagne-escuro);
}
/* Menu do header -- 2 rodadas de ajuste (Daniel, 01-02/08). Rodada 1: o
botão tinha padding duplicado (tema aplica no <li class="bklyn-btn"> E o
<a> por dentro mantinha padding próprio de link de texto). Rodada 2
(02/08): "Fale conosco" + ícone do WhatsApp DENTRO do botão, substituindo
o botão "Apresente seu projeto" + o círculo separado de WhatsApp -- um
botão só, que já linka pro WhatsApp. Hover em verde da marca (mesma cor
que já era do círculo removido). */
.ut-horizontal-navigation .menu-item-64 {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 30px 0 0 var(--kohl-espaco-sm) !important;
}
.ut-horizontal-navigation .menu-item-64 a {
display: inline-flex !important;
align-items: center;
gap: 8px;
background-color: var(--kohl-champagne) !important;
color: var(--kohl-marinho) !important;
border-radius: 999px;
padding: 12px 26px !important;
font-family: var(--kohl-fonte-ui);
font-weight: 700;
font-size: 0.8rem !important;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 6px 16px rgba(171, 165, 142, 0.45);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ut-horizontal-navigation .menu-item-64 a::before {
content: "";
width: 15px;
height: 15px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.39 1.26 4.82L2 22l5.4-1.42a9.9 9.9 0 0 0 4.64 1.18h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.32-1.93 1.37-.5.05-1 .23-3.32-.7-2.8-1.13-4.6-3.98-4.74-4.16-.14-.19-1.13-1.51-1.13-2.87 0-1.37.71-2.04.97-2.32.24-.27.53-.33.7-.33h.5c.16 0 .38-.03.58.45.24.58.8 2 .87 2.14.07.14.11.3.02.49-.55 1.1-1.13 1.06-.79 1.63.99 1.68 1.79 2.19 3.28 2.94.24.12.39.1.53-.06.14-.16.6-.7.76-.94.16-.24.31-.2.53-.12.21.08 1.36.64 1.6.76.23.11.39.17.44.27.06.1.06.55-.18 1.22Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.39 1.26 4.82L2 22l5.4-1.42a9.9 9.9 0 0 0 4.64 1.18h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.32-1.93 1.37-.5.05-1 .23-3.32-.7-2.8-1.13-4.6-3.98-4.74-4.16-.14-.19-1.13-1.51-1.13-2.87 0-1.37.71-2.04.97-2.32.24-.27.53-.33.7-.33h.5c.16 0 .38-.03.58.45.24.58.8 2 .87 2.14.07.14.11.3.02.49-.55 1.1-1.13 1.06-.79 1.63.99 1.68 1.79 2.19 3.28 2.94.24.12.39.1.53-.06.14-.16.6-.7.76-.94.16-.24.31-.2.53-.12.21.08 1.36.64 1.6.76.23.11.39.17.44.27.06.1.06.55-.18 1.22Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
.ut-horizontal-navigation .menu-item-64 a:hover {
background-color: #25D366 !important;
color: var(--kohl-branco) !important;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(37, 211, 102, 0.35);
}
/* ACHADO (Daniel, 01/08, 2ª rodada): "o amarelo continua" e "o botão ao
lado do menu está desalinhado" -- os dois eram o MESMO lugar, o menu
mobile (hamburguer), que eu nunca tinha testado. O tema imprime uma
segunda cópia inteira do menu pro mobile (#ut-mobile-menu), com marcação
diferente: o link ativo não carrega a classe .ut-main-navigation-link
(só "selected", por isso escapou do fix de desktop), TODO item tem um
bullet "•" amarelo de fábrica via ::before, e o item "Fale conosco" (o
<a> aqui não herda nenhuma classe minha, só a <li> tem menu-item-64) não
tinha ícone nem cor nenhuma -- ficava um link de texto cru, com sublinhado
de fábrica por cima. */
#ut-mobile-menu li a::before {
color: var(--kohl-champagne-escuro) !important;
}
#ut-mobile-menu li a.selected,
#ut-mobile-menu li.current-menu-item > a,
#ut-mobile-menu li.current_page_item > a,
#ut-mobile-menu li a.selected::before,
#ut-mobile-menu li.current-menu-item > a::before,
#ut-mobile-menu li.current_page_item > a::before {
color: var(--kohl-marinho) !important;
}
#ut-mobile-menu li.menu-item-64 {
background: none !important;
border: none !important;
box-shadow: none !important;
}
#ut-mobile-menu li.menu-item-64 a {
display: inline-flex !important;
align-items: center;
gap: 8px;
background-color: var(--kohl-champagne) !important;
color: var(--kohl-marinho) !important;
border-radius: 999px;
padding: 12px 26px !important;
margin-top: var(--kohl-espaco-sm);
font-family: var(--kohl-fonte-ui);
font-weight: 700;
font-size: 0.8rem !important;
letter-spacing: 0.03em;
text-transform: uppercase;
text-decoration: none !important;
box-shadow: 0 6px 16px rgba(171, 165, 142, 0.45);
}
#ut-mobile-menu li.menu-item-64 a::before {
content: "";
width: 15px;
height: 15px;
flex-shrink: 0;
position: static;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.39 1.26 4.82L2 22l5.4-1.42a9.9 9.9 0 0 0 4.64 1.18h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.32-1.93 1.37-.5.05-1 .23-3.32-.7-2.8-1.13-4.6-3.98-4.74-4.16-.14-.19-1.13-1.51-1.13-2.87 0-1.37.71-2.04.97-2.32.24-.27.53-.33.7-.33h.5c.16 0 .38-.03.58.45.24.58.8 2 .87 2.14.07.14.11.3.02.49-.55 1.1-1.13 1.06-.79 1.63.99 1.68 1.79 2.19 3.28 2.94.24.12.39.1.53-.06.14-.16.6-.7.76-.94.16-.24.31-.2.53-.12.21.08 1.36.64 1.6.76.23.11.39.17.44.27.06.1.06.55-.18 1.22Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.39 1.26 4.82L2 22l5.4-1.42a9.9 9.9 0 0 0 4.64 1.18h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm5.8 14.02c-.24.68-1.4 1.32-1.93 1.37-.5.05-1 .23-3.32-.7-2.8-1.13-4.6-3.98-4.74-4.16-.14-.19-1.13-1.51-1.13-2.87 0-1.37.71-2.04.97-2.32.24-.27.53-.33.7-.33h.5c.16 0 .38-.03.58.45.24.58.8 2 .87 2.14.07.14.11.3.02.49-.55 1.1-1.13 1.06-.79 1.63.99 1.68 1.79 2.19 3.28 2.94.24.12.39.1.53-.06.14-.16.6-.7.76-.94.16-.24.31-.2.53-.12.21.08 1.36.64 1.6.76.23.11.39.17.44.27.06.1.06.55-.18 1.22Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: contain;
-webkit-mask-size: contain;
}
.kohl-img, .kohl-placeholder-img {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.kohl-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
/* Foto com barra de destaque champagne -- generalização do painel lateral
do hero (demo49-light) pra usar em qualquer conteúdo, sem precisar de
texto de citação a cada vez (pedido de Daniel, 01/08: modernizar a
página Sobre, que estava "só texto e lista"). */
.kohl-photo-accent {
position: relative;
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}
.kohl-photo-accent::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background-color: var(--kohl-champagne);
}
/* Correção sistêmica (achado no QA mobile, 01/08): as seções de texto+foto
em 2 colunas (hero de unidade, "Por que existimos", "Como funciona" etc.)
usam grid inline direto no HTML de conteúdo -- style="display:grid;
grid-template-columns:..." -- em 8 páginas, sem breakpoint próprio. Sem
isso, ficavam lado a lado até 320px (foto espremida a uns 40px de
largura). !important é necessário pra vencer a especificidade do style
inline. */
@media (max-width: 900px) {
.kohl-container[style*="grid-template-columns"] {
display: block !important;
}
.kohl-container[style*="grid-template-columns"] > * + * {
margin-top: var(--kohl-espaco-lg);
}
}
/* Badge de ícone — círculo com anel, "sofisticado" em vez de bloco chapado */
.kohl-icon-badge {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--kohl-branco);
border: 1.5px solid rgba(15, 35, 64, 0.12);
box-shadow: 0 4px 14px rgba(15, 35, 64, 0.08);
margin-bottom: var(--kohl-espaco-sm);
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.kohl-icon-badge svg {
width: 24px;
height: 24px;
stroke: var(--kohl-marinho);
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.25s ease;
}
.kohl-grid-3 > div:hover .kohl-icon-badge,
.kohl-card:hover .kohl-icon-badge {
background-color: var(--kohl-marinho);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(15, 35, 64, 0.18);
}
.kohl-grid-3 > div:hover .kohl-icon-badge svg,
.kohl-card:hover .kohl-icon-badge svg {
stroke: var(--kohl-champagne);
}
.kohl-bg-marinho .kohl-icon-badge {
background-color: rgba(242, 235, 213, 0.08);
border-color: rgba(242, 235, 213, 0.25);
}
.kohl-bg-marinho .kohl-icon-badge svg {
stroke: var(--kohl-champagne);
}
/* Cards com leve elevação ao passar o mouse — mesma lógica em toda unidade */
.kohl-grid-3 > div {
padding: var(--kohl-espaco-md);
border-radius: 12px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kohl-grid-3 > div:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(15, 35, 64, 0.10);
}
/* ACHADO (Daniel, 01/08, 2ª rodada): "espaço acima do slider, deveria
colar no menu" -- `.main-content-background` carrega `padding-top:80px`
de uma opção do tema (CSS dinâmico, não está no style.css estático do
pai), pensada pra header não-flutuante. Nosso header é floating e já
reserva o espaço certo via `.ut-placeholder-light` -- os 80px extras só
sobravam como vão vazio antes do hero. */
.main-content-background {
padding-top: 0 !important;
}
/* Fullwidth — quebra o container em qualquer largura de viewport, sem
depender do toggle de página inteira do Brooklyn (que é tudo ou nada). */
.kohl-fullwidth {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Roadmap "Como funciona" — linha fina conectando marcadores em anel, rótulo
de etapa acima do título, último passo em destaque sólido (chegada).
Inspirado no roadmap do demo34 do Brooklyn, adaptado às cores/fontes da
Kohl (pedido de Daniel, 01/08). Substitui o .kohl-timeline anterior
(círculos grandes numerados), que por sua vez já tinha substituído o
.kohl-trilho do Bloco 4. */
.kohl-timeline {
list-style: none !important;
margin: var(--kohl-espaco-lg) 0 0 !important;
padding: 0 !important;
position: relative;
}
.kohl-timeline li {
list-style: none !important;
}
.kohl-timeline::before {
content: "";
position: absolute;
left: 9px;
top: 6px;
bottom: 6px;
width: 1px;
background: linear-gradient(to bottom, var(--kohl-champagne), rgba(171, 165, 142, 0.15));
}
.kohl-timeline li {
position: relative;
padding: 0 0 var(--kohl-espaco-lg) 40px;
}
.kohl-timeline li:last-child {
padding-bottom: 0;
}
.kohl-timeline-dot {
position: absolute;
left: 0;
top: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--kohl-branco);
border: 2px solid var(--kohl-marinho);
z-index: 1;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.kohl-bg-marinho .kohl-timeline-dot {
background-color: var(--kohl-marinho);
border-color: var(--kohl-creme);
}
.kohl-timeline li:hover .kohl-timeline-dot {
transform: scale(1.2);
border-color: var(--kohl-champagne);
}
/* Mesmo achado de contraste do .kohl-eyebrow (acima): champagne-escuro
sobre fundo claro reprova AA. Texto trocado pro cinza suave; o traço
embaixo (::after) continua champagne -- é decorativo, não texto, não
entra na exigência de contraste. */
.kohl-timeline-step {
position: relative;
display: inline-block;
font-family: var(--kohl-fonte-titulo);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kohl-cinza-texto-suave);
margin-bottom: 8px;
padding-bottom: 6px;
}
/* Rótulo com sublinhado curto -- device do demo33 (eyebrow com traço embaixo),
pedido de Daniel (01/08) pra ganhar o sistema visual dele sem copiar o
hero/menu minimalista demais que ele não quis. */
.kohl-timeline-step::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 22px;
height: 2px;
background-color: var(--kohl-champagne-escuro);
}
.kohl-bg-marinho .kohl-timeline-step {
color: var(--kohl-champagne) !important;
}
.kohl-bg-marinho .kohl-timeline-step::after {
background-color: var(--kohl-champagne);
}
.kohl-timeline h3 {
margin-bottom: 4px;
font-size: 1.15rem;
}
.kohl-timeline p {
margin: 0;
max-width: 60ch;
}
/* Último passo — chegada, destaque sólido em vez de anel vazio */
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot {
width: 24px;
height: 24px;
top: 2px;
left: -2px;
background-color: var(--kohl-champagne);
border-color: var(--kohl-champagne);
box-shadow: 0 0 0 5px rgba(171, 165, 142, 0.22);
}
.kohl-bg-marinho .kohl-timeline-item-final .kohl-timeline-dot {
background-color: var(--kohl-champagne);
border-color: var(--kohl-champagne);
box-shadow: 0 0 0 5px rgba(171, 165, 142, 0.28);
}
/* Animação contínua no passo final -- pedido de Daniel (02/08), inspirado
no marcador "etapa atual" do roadmap do demo34, e enriquecido em 01/08
(referência demo33: "roadmap com animação bonita e moderna", múltiplos
anéis concêntricos, não só um). Dois anéis defasados no tempo, só com
transform+opacity (leve, sem repintar box-shadow a cada frame). */
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::after,
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid var(--kohl-champagne);
animation: kohl-pulse-ring 2.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::before {
animation-delay: 0.9s;
border-color: var(--kohl-marinho);
}
.kohl-bg-marinho .kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::before {
border-color: var(--kohl-creme);
}
@keyframes kohl-pulse-ring {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::after,
.kohl-timeline li.kohl-timeline-item-final .kohl-timeline-dot::before {
animation: none;
display: none;
}
}
/* FAQ + CTA lado a lado, 2 colunas na mesma linha */
.kohl-split-2col {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--kohl-espaco-xl);
align-items: start;
}
@media (max-width: 900px) {
.kohl-split-2col {
grid-template-columns: 1fr;
}
}
.kohl-cta-card {
background-color: var(--kohl-marinho);
border-radius: 16px;
padding: var(--kohl-espaco-lg);
position: sticky;
top: var(--kohl-espaco-lg);
}
.kohl-cta-card h3 {
color: var(--kohl-branco) !important;
font-size: 1.4rem;
}
.kohl-cta-card p {
color: var(--kohl-creme) !important;
margin-bottom: var(--kohl-espaco-md);
}
/* Reveal suave ao entrar na tela — efeito do template, aplicado com
moderação (opacidade + leve deslocamento, sem exagero) */
.kohl-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.kohl-reveal.kohl-revealed {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.kohl-reveal { opacity: 1; transform: none; }
}
/* Voltar ao topo -- inspirado no demo4 (rodapé), sem nenhum dado, só
conveniência. Some por padrão, aparece depois de rolar a página. */
.kohl-back-to-top {
position: fixed;
right: var(--kohl-espaco-md);
bottom: var(--kohl-espaco-md);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--kohl-marinho);
color: var(--kohl-branco) !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(15, 35, 64, 0.3);
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
z-index: 9999;
}
.kohl-back-to-top-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.kohl-back-to-top:hover {
background-color: var(--kohl-champagne);
color: var(--kohl-marinho) !important;
}
@media (prefers-reduced-motion: reduce) {
.kohl-back-to-top { transition: opacity 0.01ms; transform: none; }
}
@media (max-width: 480px) {
.kohl-back-to-top {
width: 36px;
height: 36px;
right: var(--kohl-espaco-sm);
bottom: var(--kohl-espaco-sm);
}
}
/* Imagem fullwidth com efeito parallax + frase de efeito -- pedido de
Daniel (01/08), inspirado na seção do demo23 do Brooklyn. O shortcode
nativo do tema para isso (ut_parallax_quote) depende do WPBakery, que não
está registrado nesta instalação (mesma causa-raiz do vc_btn, ver
PROGRESSO.md) -- refeito em HTML + CSS puro. Parallax via
background-attachment:fixed (nativo do navegador, sem JS); desativado em
telas até 900px porque o iOS Safari renderiza mal fundo fixo. */
.kohl-parallax-quote {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
min-height: clamp(320px, 45vw, 480px);
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--kohl-espaco-md);
}
.kohl-parallax-quote::before {
content: "";
position: absolute;
inset: 0;
background: rgba(15, 35, 64, 0.6);
}
.kohl-parallax-quote-text {
position: relative;
z-index: 1;
color: var(--kohl-branco) !important;
font-family: var(--kohl-fonte-titulo);
font-weight: 700;
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 1.25;
max-width: 18ch;
}
.kohl-parallax-quote-caption {
position: relative;
z-index: 1;
display: block;
margin-top: var(--kohl-espaco-sm);
padding-top: var(--kohl-espaco-sm);
border-top: 1px solid rgba(242, 235, 213, 0.35);
color: var(--kohl-creme) !important;
font-family: var(--kohl-fonte-ui);
font-size: var(--kohl-escala-legenda);
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.kohl-parallax-quote {
background-attachment: scroll;
min-height: 320px;
}
}
/* Barra utilitária acima do header — WhatsApp + e-mail (pedido de Daniel,
01/08). Só desktop: em mobile o espaço é curto e o contato já está
acessível no rodapé/página de contato, mesmo padrão do demo49-light. */
.kohl-utility-bar {
background-color: var(--kohl-marinho);
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
}
.kohl-utility-bar-inner {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--kohl-espaco-md);
padding: 8px var(--kohl-espaco-md);
}
.kohl-utility-bar a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--kohl-creme);
font-size: 0.8rem;
text-decoration: none;
}
.kohl-utility-bar a:hover {
color: var(--kohl-champagne);
}
.kohl-utility-bar svg {
flex-shrink: 0;
}
@media (max-width: 900px) {
.kohl-utility-bar {
display: none;
}
}
/* ACHADO: o header do Brooklyn é #header-section.ut-header-floating, que é
position:fixed com top:auto (resolve pra 0). Sem essa barra ele fica bem
no topo; com ela, sobrepõe -- a barra fica escondida atrás do header. O
tema só compensa isso pra admin bar (regra .admin-bar #header-section com
margin-top:32px !important), não para uma barra nossa. Empurra o header
pela altura real da barra (44px). O espaço reservado para o conteúdo
abaixo (#main-content) não depende do header -- é um elemento normal em
fluxo, então não precisa de ajuste separado. */
#header-section.ut-header-floating {
top: 44px;
}
/* ACHADO 2 (Daniel, 02/08): o 44px acima só está certo no topo da página --
a barra utilitária é um elemento normal (não fixo), então ao rolar ela
sai de cena, mas o header (fixo) ficava PRA SEMPRE 44px afastado do topo,
deixando um vão vazio permanente que não "soma" com nada. kohl-header-
scroll-script (functions.php) soma essa classe assim que a rolagem passa
da altura da barra, e o header volta a ficar colado no topo real. */
body.kohl-scrolled #header-section.ut-header-floating {
top: 0;
}
@media (max-width: 900px) {
#header-section.ut-header-floating {
top: 0;
}
}
/* ACHADO (Daniel, 02/08): o cursor customizado ficava fora de posição --
o navegador reporta um "top" de ~156px (origem não localizada em nenhuma
regra estática do tema, nem sequer com varredura recursiva de
media-queries -- possivelmente uma cascata dinâmica interna do próprio
framework de tema) somado a margin-top:-32px só pra admin bar. A posição
real já vem 100% correta via transform (JS do próprio tema, calcula a
partir do mouseX/mouseY de verdade) -- top/margin-top são só ruído
competindo com isso. Zerando os dois, o cursor alinha exatamente com o
ponteiro real, testado e confirmado. */
#ut-hover-cursor, #ut-hover-cursor-follow {
top: 0 !important;
margin-top: 0 !important;
}
/* ACHADO 2 (Daniel, 02/08 e 01/08 de novo): "o mouse some sobre o cabeçalho"
-- o anel externo do cursor (o círculo maior, o que mais se vê) nunca teve
contorno visível nesta instalação: `stroke` sempre computava "none", em
qualquer fundo, mesmo com a regra correspondente existindo no CSS do tema
(não localizei a causa exata -- não é sobreposição por outra regra, é o
valor simplesmente não aplicando). Sobrava só o pontinho central de
poucos pixels, praticamente invisível sobre fundo branco (o cabeçalho).
1ª tentativa de reforço usou 1px/50% de opacidade -- ainda quase
imperceptível num anel de 96px de diâmetro (achado no retorno de
Daniel). Aumentado pra 2px/85% de opacidade, nos dois skins. */
.ut-hover-cursor[data-skin="dark"] svg ellipse.circle,
.ut-hover-cursor[data-skin="dark"] svg ellipse.circle-animation {
stroke: rgba(15, 35, 64, 0.85) !important;
stroke-width: 2px !important;
}
.ut-hover-cursor:not([data-skin="dark"]) svg ellipse.circle,
.ut-hover-cursor:not([data-skin="dark"]) svg ellipse.circle-animation {
stroke: rgba(242, 235, 213, 0.85) !important;
stroke-width: 2px !important;
}
/* ==========================================================================
Grid de notícias -- página Conteúdos (home.php sobrescreve o index.php
genérico do pai). Inspirado no blog-grid nativo do Brooklyn (thumbnail +
categoria + título + resumo), sem replicar igual: sem selo de data sobre
a foto, sem contagem de comentário (site não terá comentários abertos).
========================================================================== */
.kohl-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--kohl-espaco-lg) var(--kohl-espaco-md);
}
@media (max-width: 900px) {
.kohl-news-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.kohl-news-grid {
grid-template-columns: 1fr;
}
}
.kohl-news-card-link {
display: block;
color: inherit;
text-decoration: none;
transition: transform 0.25s ease;
}
.kohl-news-card-link:hover {
transform: translateY(-4px);
}
.kohl-news-card-img {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--kohl-fundo-claro);
box-shadow: 0 10px 28px rgba(15, 35, 64, 0.12);
}
.kohl-news-card-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.kohl-news-card-link:hover .kohl-news-card-img img {
transform: scale(1.05);
}
.kohl-news-card-tag {
position: absolute;
left: 14px;
bottom: 14px;
background-color: var(--kohl-champagne);
color: var(--kohl-branco);
font-family: var(--kohl-fonte-ui);
font-weight: 700;
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
}
.kohl-news-card-body {
padding-top: var(--kohl-espaco-sm);
}
.kohl-news-card-date {
display: block;
font-family: var(--kohl-fonte-ui);
font-size: var(--kohl-escala-legenda);
color: var(--kohl-cinza-texto-suave);
margin-bottom: 4px;
}
.kohl-news-card-body h3 {
font-size: 1.15rem;
margin: 0 0 8px;
transition: color 0.2s ease;
}
.kohl-news-card-link:hover .kohl-news-card-body h3 {
color: var(--kohl-champagne-escuro);
}
.kohl-news-card-body p {
color: var(--kohl-cinza-texto-suave);
font-size: 0.9rem;
margin: 0 0 var(--kohl-espaco-xs);
}
.kohl-news-card-readmore {
display: inline-block;
font-family: var(--kohl-fonte-ui);
font-weight: 600;
font-size: 0.85rem;
color: var(--kohl-marinho);
}
.kohl-news-pagination {
margin-top: var(--kohl-espaco-xl);
text-align: center;
}
.kohl-news-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
margin: 0 4px;
padding: 0 12px;
border-radius: 999px;
background-color: var(--kohl-fundo-claro);
color: var(--kohl-marinho);
font-family: var(--kohl-fonte-ui);
font-size: 0.85rem;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.kohl-news-pagination .page-numbers.current,
.kohl-news-pagination .page-numbers:hover {
background-color: var(--kohl-marinho);
color: var(--kohl-branco);
}
/* Post individual (single.php) */
.kohl-news-article-body p {
margin: 0 0 var(--kohl-espaco-md);
font-size: 1.05rem;
}
.kohl-news-article-body h2,
.kohl-news-article-body h3 {
margin-top: var(--kohl-espaco-lg);
}
.kohl-news-article-back {
margin-top: var(--kohl-espaco-xl);
padding-top: var(--kohl-espaco-md);
border-top: 1px solid rgba(15, 35, 64, 0.1);
}
.kohl-news-article-back a {
font-family: var(--kohl-fonte-ui);
font-weight: 600;
font-size: 0.9rem;
}
/* ==========================================================================
Grid das 6 unidades -- Home (Bloco 6). Card inteiro clicável, mesmo
vocabulário visual das outras seções (icon-badge, elevação no hover).
========================================================================== */
.kohl-units-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--kohl-espaco-md);
margin-top: var(--kohl-espaco-lg);
}
@media (max-width: 900px) {
.kohl-units-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.kohl-units-grid {
grid-template-columns: 1fr;
}
}
/* ACHADO (Bloco 6): <a> envolvendo bloco (div/h3/p) apanha do wpautop do
WordPress -- ele duplica a tag, só a instância do meio sobrevive com
conteúdo (mesmo bug documentado pros botões dinâmicos do tema, causa
diferente). Card agora é <div>, o link real fica só no <h3>, esticado
por cima do card inteiro via ::after (técnica padrão de "card clicável"),
sem depender de <a> envolvendo HTML de bloco em lugar nenhum. */
.kohl-unit-card {
position: relative;
display: block;
padding: var(--kohl-espaco-md);
border-radius: 12px;
border: 1px solid rgba(15, 35, 64, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.kohl-unit-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(15, 35, 64, 0.12);
border-color: transparent;
}
.kohl-unit-card h3 {
margin: 0 0 2px;
font-size: 1.15rem;
}
.kohl-unit-card-link {
color: inherit;
text-decoration: none;
}
.kohl-unit-card-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
}
.kohl-unit-card-desc {
font-family: var(--kohl-fonte-ui);
font-size: var(--kohl-escala-legenda);
color: var(--kohl-cinza-texto-suave);
font-weight: 600;
margin: 0 0 10px;
}
.kohl-unit-card > p:last-child {
color: var(--kohl-cinza-texto-suave);
font-size: 0.9rem;
margin: 0;
}
.kohl-unit-card:hover .kohl-icon-badge {
background-color: var(--kohl-marinho);
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(15, 35, 64, 0.18);
}
.kohl-unit-card:hover .kohl-icon-badge svg {
stroke: var(--kohl-champagne);
}
/* ==========================================================================
Hero da Home -- pedido de Daniel (01/08, 2ª rodada): usar o slider REAL
do demo49-light (Slider Revolution), não uma recriação em CSS puro. O
`.kohl-hero-demo49*` que existia aqui foi a tentativa anterior (CSS puro,
sem o plugin) -- removida depois de instalar o Slider Revolution e
importar o `slider_export.txt` real do pacote de demo do tema (extraído
de `/home/wwkohl/.../themes/brooklyn/demos/Brooklyn-49-light.zip`,
textos e link do botão editados antes da importação). O slider vive no
admin do Slider Revolution (módulo "Brooklyn #491", alias
`Brooklyn-491`) e é chamado na Home via `[rev_slider alias="Brooklyn-491"]`
-- não há CSS nosso pra manter aqui.
========================================================================== */
/* Achado no QA mobile (01/08, 2ª rodada): o headline do slider (engine
SR7, elemento <sr7-txt>) usa `white-space: nowrap` fixo, calibrado pro
texto curto original em inglês. Nosso texto em português é mais longo, e
na faixa mobile a 2ª linha ("Uma plataforma comercial só." etc.)
ultrapassava a largura da tela, cortada nas duas bordas. RS aplica isso
via style inline (JS, por breakpoint) -- !important no external
stylesheet ainda vence, sem precisar editar o JSON do slide (edição
direta no banco estava instável nesta VPS, matando o processo do
wp-cli por OOM de forma intermitente). */
@media (max-width: 767px) {
#SR7_2_1 sr7-txt {
white-space: normal !important;
max-width: 88vw !important;
}
/* Pendência do QA anterior, resolvida agora: a quebra em 3 linhas do
headline empurrou a altura dele além do que o subtítulo/botão
(posicionados em `top` fixo em px, calibrado pro texto curto
original) esperavam -- ficavam sobrepostos. Empurra os dois pra
baixo com folga suficiente pro pior caso (headline de 3 linhas +
subtítulo de 2-3 linhas), igual nos 3 slides -- o sufixo do id
(`-3` subtítulo, `-5` botão) é o mesmo em todos, só o meio muda por
slide. */
#SR7_2_1 [id$="-3"] {
top: 250px !important;
}
#SR7_2_1 a[id$="-5"] {
top: 330px !important;
}
}