no PHP — como o tema estiliza especificamente
via "h6.heading" (style.css), replicando a mesma regra aqui pra "p.heading". */
.progress-charts p.heading {
margin-bottom: 15px;
color: var(--color-heading);
font-size: 14px;
font-weight: 400;
font-family: var(--font-secondary);
letter-spacing: 1px;
}
.progress-charts p.heading span.percent-label {
color: var(--color-heading);
font-size: 12px;
text-transform: uppercase;
opacity: 0.9;
}
/* Canvas do efeito de cursor fluido (ver includes/footer.php). Cobre a tela inteira,
fixo, sem capturar cliques (pointer-events:none) — o fundo do WebGL já sai
transparente (TRANSPARENT:true na config da lib), então não precisa de
mix-blend-mode pra "sumir" onde não tem fumaça.
BUG real encontrado: a biblioteca "smokey-fluid-cursor" seta ela mesma um
z-index NEGATIVO (-9999) via style inline no canvas — ela foi feita pra ser um
efeito de FUNDO (documentação: "automatically sets a low z-index... place it in
the background"). Um style inline sempre vence uma regra de stylesheet comum,
então nosso "z-index:9999" daqui era ignorado e o canvas ficava atrás de todo o
conteúdo da página, invisível. "!important" é a exceção que consegue vencer um
style inline sem !important — por isso aqui. */
#fluid-cursor-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 9999 !important;
pointer-events: none;
}
/* BUG do tema: .services-widget (a lista "O que eu faço") não tem NENHUM display
próprio no style.css (só .services-widget{position:relative}) — os .service-item
ficam em display:block padrão, ou seja, empilhados um embaixo do outro, cada um
ocupando 100% da largura. Com só 3-4 serviços passava despercebido; com a lista
completa (10 serviços) virava uma coluna gigante. Adicionando um grid responsivo. */
.services-widget.v1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.services-widget.v1 .service-item {
width: 100%;
}
.services-widget.v1 .my-skill-card {
height: 100%;
}
/* BUG do tema (consequência do grid acima): dentro de cada .service-item, o
.my-skill-card do tema é uma LINHA horizontal (ícone | título | parágrafo | botão,
com justify-content:space-between) — desenhada pra um item ocupando a largura toda
do container (~1200px+), não uma coluna estreita de grid (~280-320px). Espremida
numa coluna estreita, o flexbox encolhe o título (.card-title/.main-title) até ficar
mais estreito que a própria palavra — e como o tema aplica "word-break:break-word"
em todo h1-h6 (style.css linha ~215), o título quebra letra por letra (ex.: "S i t
e s"). Empilhando o conteúdo do card em coluna resolve, porque cada linha (ícone,
título, parágrafo, botão) passa a usar a largura cheia do card, sem disputa de espaço. */
.services-widget.v1 .my-skill-card {
flex-direction: column !important;
align-items: flex-start;
justify-content: flex-start;
gap: 0.9rem;
}
.services-widget.v1 .my-skill-card .card-title,
.services-widget.v1 .my-skill-card .card-para {
width: 100%;
text-align: left;
}
/* BUG do tema: ".active-bg" é um único elemento (position:absolute, inset:0 dentro de
.services-widget) pensado pra "deslizar" atrás do item em destaque num accordion
vertical de largura total — o JS do tema reposiciona/redimensiona ele via
mouseenter/mouseleave. No grid de cards (acima), ele nunca é reposicionado por
coluna e acaba cobrindo o widget inteiro com o fundo rosa sólido
(".services-widget.v1 .active-bg{background:var(--color-primary)}"). Como o grid de
cards não depende desse efeito de destaque, escondendo. */
.services-widget.v1 .active-bg {
display: none;
}
/* BUG do tema: .header-one .header-content .logo img usa max-width:max-content
(ou seja, sem limite real) em telas >767px. Funcionava por acaso no Reeni original
porque os logos de demonstração já eram arquivos pequenos — a logo real do Caio é um
PNG em alta resolução (1144px de largura nativa) e sem esse limite ela cobria a tela
inteira. Fixando explicitamente em todos os lugares onde a logo aparece. */
.logo img,
.header-one .header-content .logo img {
max-width: 175px !important;
width: auto;
height: auto;
}
@media (max-width: 575px) {
.logo img,
.header-one .header-content .logo img {
max-width: 130px !important;
}
}
/* Foto do hero: o arquivo do Caio é um busto mais largo (1163x860, já cortado sem a
margem transparente) em vez do retrato estreito e alto (486x781) que o tema original
usava — por isso, no max-width:600px padrão do tema, ela ficava bem mais baixa que o
design original. Aumentando o limite pra dar mais presença vertical à foto; o tema já
permite a foto "sangrar" pra fora da coluna em telas largas (ver .banner-right-content
com right:-80px no style.css), então isso é seguro. */
.banner-one-main-wrapper .banner-right-content img {
max-width: 760px !important;
}
@media (max-width: 1199px) {
.banner-one-main-wrapper .banner-right-content img {
max-width: 600px !important;
}
}
@media (max-width: 575px) {
.banner-one-main-wrapper .banner-right-content img {
max-width: 320px !important;
}
}
/* BUG do tema: ".contact-get-in-touch-wrap .get-in-touch-wrapper .section-head"
usa position:sticky + top:120px + padding-right:80px — regra pensada pro layout
ORIGINAL de 2 colunas (texto à esquerda "grudando" enquanto rola ao lado do
formulário à direita). Nas páginas onde uso esse mesmo card só como CTA
centralizado (sem formulário do lado), o sticky ficava tentando reservar
espaço/"grudar" dentro de um card curto — resultava em espaço vazio em cima,
conteúdo cortado embaixo, e um salto ao passar o mouse (recálculo do sticky).
Os 4 CTAs simples usam a classe .text-center (o de contato.php, que é o
2-colunas de verdade, não usa), então dá pra mirar só neles.
BUG (descoberto depois): a correção original trocava também position:sticky por
position:static — mas ".tmponhover > *{position:relative;z-index:2}" (efeito de
brilho na borda ao passar o mouse, ver mais abaixo) depende do .section-head ser
POSICIONADO pra entrar nessa regra e ficar acima da camada ".tmponhover::after"
(um retângulo sólido da mesma cor do card, usado pra criar o "anel" de brilho).
Com position:static, o z-index:2 não tem efeito nenhum (z-index só funciona em
elementos posicionados) — o retângulo sólido do ::after passava a ser pintado
POR CIMA do texto (title/subtitle/description), escondendo tudo e deixando só o
botão visível (que fica fora do .section-head). Usando position:relative em vez
de static resolve as duas coisas: mantém o span sem o salto do sticky E preserva
o empilhamento (z-index) que o tema espera. */
.get-in-touch-wrapper.text-center .section-head {
position: relative;
top: auto;
padding-right: 0;
}
/* Marquee de serviços (home) — o movimento é controlado via GSAP/ScrollTrigger
(ver script no fim de index.php), acompanhando o scroll da página em vez de
rodar sozinho num timer. */
.marquee-wrap {
margin-top: 3rem;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 1.5rem 0;
overflow: hidden;
background: var(--background-color-3);
}
.marquee-track {
display: flex;
width: max-content;
gap: 3.5rem;
will-change: transform;
}
.marquee-track span {
font-family: var(--font-primary);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-white-75);
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.6rem;
}
.marquee-track span::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-primary);
display: inline-block;
}
/* Estado ativo do link de menu (classe .active aplicada pelo PHP) */
.tmp-mainmenu > li > a.active { color: var(--color-primary); }
/* BUG do tema: ".img-box.v2" tem altura fixa (447px em telas largas, 400px em médias —
ver style.css ~15719), mas a dentro dele só tem "width:100%" (classe Bootstrap
w-100); sem "height:100%", o navegador calcula a altura pela proporção NATURAL da
imagem, não pela altura do box. Resultado: a imagem renderiza mais baixa que o box
(ex.: print 1200x750 vira 568x355 dentro de um box de 447px), sobrando uma faixa
vazia embaixo do card. "object-fit:cover" já está no tema, mas só tem efeito quando
a imagem realmente preenche 100% de largura E altura do container. */
.latest-portfolio-card .img-box.v2 > a {
display: block;
height: 100%;
}
.latest-portfolio-card .img-box.v2 img {
height: 100%;
object-fit: cover;
}
/* Estado vazio elegante pra projetos sem print limpo ainda (ver sql/seed.sql) */
.portfolio-thumb-placeholder {
width: 100%;
aspect-ratio: 16 / 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--background-color-3), var(--background-color-4));
}
.portfolio-thumb-placeholder span {
font-family: var(--font-secondary);
font-size: 3rem;
font-weight: 600;
color: var(--color-primary);
opacity: 0.85;
}
.portfolio-thumb-placeholder small {
color: var(--color-gray);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Botão flutuante do WhatsApp */
.whatsapp-float {
position: fixed;
bottom: 20px;
left: 20px;
height: 55px;
width: 55px;
border-radius: 50%;
background-color: #25d366;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float i { color: #fff; font-size: 1.6rem; }
@media only screen and (max-width: 575px) {
.whatsapp-float { height: 44px; width: 44px; bottom: 16px; left: 16px; }
.whatsapp-float i { font-size: 1.3rem; }
}
/* Botão de WhatsApp usado ao lado do ".tmp-btn" nos CTAs (ver .get-in-touch-wrapper
pelo site). O ".tmp-btn" do tema tem altura fixa de 60px via "height:60px;
line-height:60px" (style.css ~15089) — sem uma altura própria aqui, o alinhamento
entre os dois botões dependia do "align-items:stretch" padrão do flex container
pai, que só funciona enquanto os dois ficam na MESMA linha (quebra em telas
estreitas, ou qualquer mudança no wrapper, e os botões saem de altura). Fixando a
altura explicitamente pra sempre bater com o ".tmp-btn", independente do pai. */
.whatsapp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
height: 60px;
box-sizing: border-box;
background-color: #25d366;
color: #fff;
padding: 0 1.6rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(37, 211, 102, 0.6); color: #fff; }
.whatsapp-cta i { font-size: 1.2rem; }
/* Avaliações do Google (home) */
.google-rating-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: var(--color-body);
font-size: 0.95rem;
}
.google-rating-badge .stars { color: #fbbc04; letter-spacing: 2px; }
.google-rating-badge strong { color: var(--color-heading); }
.google-rating-badge .dot { opacity: 0.5; }
.google-stars {
display: block;
color: #fbbc04;
letter-spacing: 3px;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.testimonial-card .card-para i.fa-google { color: #4285f4; margin-right: 0.3rem; }
.testimonial-card .text-doc { text-transform: none; }