/* ==========================================================================
JSDB.CSS — Customizações Mercoluz por cima do style.css do template
Nunca editar assets/css/style.css diretamente — toda identidade visual
do cliente (cores, fontes, ajustes finos) entra aqui.
========================================================================== */
/* -----------------------------------------------------------------------
1. Paleta oficial Mercoluz (Manual da Marca v1.0)
----------------------------------------------------------------------- */
:root {
--mercoluz-amarelo: #FFC400;
--mercoluz-grafite: #1C1D21;
--mercoluz-ambar: #FF8A00;
--mercoluz-branco: #FFFFFF;
--mercoluz-cinza-nevoa: #F4F5F7;
--mercoluz-cinza-medio: #6B7079;
}
/* -----------------------------------------------------------------------
2. Tipografia da marca — Poppins (títulos) + Inter (texto/corpo)
Os do Google Fonts ficam no de cada página.
----------------------------------------------------------------------- */
body {
font-family: 'Inter', 'Lato', Helvetica, Arial, sans-serif;
color: var(--mercoluz-grafite);
}
h1, h2, h3, h4, h5, h6,
.hero-title h1,
.btn {
font-family: 'Poppins', Montserrat, Arial, sans-serif;
}
/* -----------------------------------------------------------------------
3. Fundos escuros do template → Grafite oficial (nunca preto puro)
----------------------------------------------------------------------- */
/* Dobra de diferenciais (logo abaixo do hero) em amarelo solido da marca.
Texto e icones em grafite/preto (regra: nunca branco sobre amarelo).
Botao vira a variacao "grafite" (fundo grafite, texto branco), pra nao
sumir sobre o proprio fundo amarelo. */
.bloco-amarelo {
background-color: var(--mercoluz-amarelo);
color: var(--mercoluz-grafite);
}
.bloco-amarelo h3,
.bloco-amarelo p {
color: var(--mercoluz-grafite);
}
.bloco-amarelo .btn.btn-default {
background-color: var(--mercoluz-grafite);
border-color: var(--mercoluz-grafite);
color: var(--mercoluz-branco);
}
.bloco-amarelo .btn.btn-default:hover,
.bloco-amarelo .btn.btn-default:active,
.bloco-amarelo .btn.btn-default:focus {
background-color: #000;
border-color: #000;
color: var(--mercoluz-branco);
}
/* CTA unico, centralizado, abaixo das 3 colunas de diferenciais */
.bloco-amarelo-cta {
text-align: center;
margin-top: 30px;
}
/* Alinhamento das 3 colunas de diferenciais — titulo de tamanho diferente
(uma quebra em 2 linhas, as outras em 1) fazia cada coluna comecar o
texto numa altura diferente, com aparencia desorganizada. Reserva
sempre o espaco de 2 linhas de titulo e estica as colunas pra mesma
altura, então elas ficam alinhadas mesmo com textos de tamanhos diferentes. */
.bloco-amarelo .row {
display: flex;
flex-wrap: wrap;
}
.bloco-amarelo .feature {
height: 100%;
}
.bloco-amarelo .feature h3 {
min-height: 58px;
display: flex;
align-items: flex-start;
}
.background-wrapper .background-color.background-color-black {
background-color: var(--mercoluz-grafite);
}
/* -----------------------------------------------------------------------
4. Botões — mesmo tamanho/tipografia/padding em todo o site (referência:
botão "Chamar no WhatsApp" do header). Cor continua vindo de cada
variante (btn-primary, btn-default, btn-framed etc) — aqui só padroniza
formato, nunca cor.
----------------------------------------------------------------------- */
.btn {
font-size: 11px;
padding: 12px 22px;
line-height: 1.4;
}
/* CTA único do site é "Chamar no WhatsApp": botão amarelo com texto
grafite (nunca texto branco sobre amarelo, regra de marca) */
.btn.btn-primary,
.btn.btn-default {
background-color: var(--mercoluz-amarelo);
border-color: var(--mercoluz-amarelo);
color: var(--mercoluz-grafite);
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus,
.btn.btn-default:hover, .btn.btn-default:active, .btn.btn-default:focus {
background-color: var(--mercoluz-ambar);
border-color: var(--mercoluz-ambar);
color: var(--mercoluz-grafite);
}
.background-is-dark a.btn-default,
.background-is-dark a.btn-primary {
color: var(--mercoluz-grafite);
}
/* Segundo CTA do hero (contorno/outline) — o btn-framed do template nao
deve virar amarelo solido igual ao botao principal, senao os dois CTAs
ficam identicos. Mantem contorno branco sobre o hero escuro. */
.btn.btn-default.btn-framed {
background-color: transparent;
border-color: var(--mercoluz-branco);
color: var(--mercoluz-branco);
}
.btn.btn-default.btn-framed:hover,
.btn.btn-default.btn-framed:active,
.btn.btn-default.btn-framed:focus {
background-color: rgba(255, 255, 255, 0.15);
border-color: var(--mercoluz-branco);
color: var(--mercoluz-branco);
}
/* Texto de apoio do hero em opacidade total — o template deixa todo
paragrafo do site em 60% de opacidade por padrao (p, address{opacity:.6}),
mas no hero o texto precisa ler bem em cima da foto de fundo */
.hero-title p {
opacity: 1;
}
/* Icone do WhatsApp em SVG inline (nao depende de fonte de icone nenhuma).
Trocamos a fonte de icones porque a Font Awesome 4 embutida no template
e a Font Awesome 6 (CDN) definem a MESMA classe "fa-whatsapp" com fontes
diferentes, e uma brigava com a outra — o icone aparecia quebrado/atras
do texto dependendo da ordem de carregamento. SVG inline resolve de vez. */
.icon-whatsapp {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: -2px;
margin-right: 6px;
flex-shrink: 0;
}
.icon-whatsapp--lg {
width: 28px;
height: 28px;
vertical-align: middle;
margin-right: 0;
}
/* Respiro vertical no topo do header — logo e botao coladinhos na borda
do navegador no layout original do template */
.navigation .wrapper {
padding-top: 60px;
transition: padding-top 0.3s ease;
}
/* Ao rolar a pagina, o JS do template adiciona .show-background na navbar
(fundo fica opaco) - nesse estado o padding volta ao normal, so o hero
(topo, fundo transparente) mantem os 60px de respiro */
.navigation.show-background .wrapper {
padding-top: 30px;
padding-bottom: 30px;
}
/* Logo oficial (wordmark horizontal, proporção bem larga) — o template
original não limitava altura porque usava um placeholder quadrado */
.navigation .brand img {
max-height: 34px;
width: auto;
}
#page-footer .brand img {
max-height: 42px;
width: auto;
}
/* Botão do WhatsApp no lugar do menu, no header (tamanho/padding agora
vem da regra global .btn, na secao 4) */
.header-whatsapp-btn {
align-self: center;
}
.navigation .right {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
}
/* Botao "voltar ao topo" do rodape — estava herdando o position:relative
do template, que prendia o "right:0" do arrow-up as bordas do .container
(mais estreito que a tela). Passa a se posicionar em relacao ao
#page-footer (que e full-bleed), ficando de fato na borda direita do navegador. */
#page-footer .to-top {
position: absolute;
right: 30px;
bottom: 40px;
}
/* Caixa de CTA do WhatsApp ao lado do FAQ (substitui a newsletter do
template, que nao fazia sentido pra uma LP 100% focada em WhatsApp) */
.faq-whatsapp-box {
text-align: center;
}
.faq-whatsapp-box label {
display: block;
margin-bottom: 16px;
}
.faq-whatsapp-box .btn {
display: inline-flex;
align-items: center;
}
/* Assinatura da JS Digital Business no copyright do rodape */
#page-footer .note a {
text-decoration: underline;
}
/* Redes sociais na mesma linha da logo, alinhadas a direita — icone
branco por padrao, amarelo da marca no hover */
.footer-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.footer-top .brand {
margin-bottom: 0;
}
.footer-social a {
color: var(--mercoluz-branco);
font-size: 22px;
margin-left: 18px;
display: inline-block;
}
.footer-social a:hover {
color: var(--mercoluz-amarelo);
}
/* Topicos da dobra "Sobre" — o ul.check-marks herda line-height:30px do
estilo global de
, que fica largo demais por topico. Usa o mesmo
line-height padrao de paragrafo do site (20px) e separa um topico do
outro com 10px de margem, em vez de depender so do line-height. */
#about .check-marks li {
line-height: 20px;
margin-bottom: 10px;
}
/* Foto da Mercoluz na dobra "Sobre" — antes era so um placeholder dentro
de um link de video que nao existe; agora e uma foto real, sem link e
sem escurecer por cima (o .has-overlay do template era pro botao de
play, que nao faz mais sentido aqui) */
.sobre-foto {
width: 100%;
height: auto;
border-radius: 8px;
}
/* Coluna de texto da dobra "Sobre" — padding-right extra so no desktop,
estreita a coluna pra forcar mais quebra de linha e preencher mais
altura ao lado da foto. No mobile/tablet a coluna empilha, entao nao
faz sentido reduzir a largura la. */
@media (min-width: 992px) {
#about .row > .col-md-6:first-child {
padding-right: 60px;
}
}
/* CTA no final do texto da dobra "Sobre" — mesma margem que existe entre
o h3 "Quem cuida da sua iluminação" e o paragrafo abaixo dele (30px,
vem do margin-bottom padrao de h3 no site) */
.sobre-cta {
display: inline-block;
margin-top: 30px;
}
/* -----------------------------------------------------------------------
5. Depoimentos — redesenhado do zero a pedido de Jeferson (layout claro,
2 depoimentos por vez no carrossel, texto a esquerda com nome embaixo,
foto a direita com ~100px de largura, sem cortar - altura proporcional)
----------------------------------------------------------------------- */
.bloco-depoimentos {
background-color: var(--mercoluz-branco);
margin-top: 40px;
}
.depoimentos-par {
display: flex;
gap: 50px;
}
.depoimento-card {
flex: 1 1 0;
display: flex;
align-items: center;
gap: 24px;
padding: 10px 0;
}
.depoimento-card + .depoimento-card {
border-left: 1px solid var(--mercoluz-cinza-nevoa);
padding-left: 50px;
}
.depoimento-conteudo {
flex: 1;
min-width: 0;
}
.depoimento-aspas {
display: block;
font-family: Georgia, 'Times New Roman', serif;
font-size: 56px;
line-height: 1;
color: var(--mercoluz-amarelo);
margin-bottom: -8px;
}
.depoimento-texto {
font-style: italic;
opacity: 1;
color: var(--mercoluz-grafite);
margin-bottom: 14px;
}
.depoimento-nome {
display: block;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--mercoluz-grafite);
}
.depoimentos-carousel .owl-dots {
text-align: center;
margin-top: 40px;
}
.depoimento-foto,
.depoimentos-carousel .owl-item img.depoimento-foto {
display: block;
width: 100px;
height: auto;
border-radius: 10px;
flex-shrink: 0;
}
/* Empilha os 2 depoimentos do par no mobile/tablet, tira a linha divisoria */
@media (max-width: 767px) {
.depoimentos-par {
flex-direction: column;
gap: 30px;
}
.depoimento-card + .depoimento-card {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--mercoluz-cinza-nevoa);
padding-top: 30px;
}
}
/* -----------------------------------------------------------------------
6. Preços em destaque (quando aparecerem nos cards de produto)
----------------------------------------------------------------------- */
.price-destaque {
font-family: 'Poppins', Arial, sans-serif;
font-weight: 800;
color: var(--mercoluz-grafite);
}
/* -----------------------------------------------------------------------
7. Mapa (iframe substitui o Google Maps JS legado do template)
----------------------------------------------------------------------- */
.contato-cta {
display: inline-block;
margin-top: 30px;
}
.contact .map#map {
overflow: hidden;
height: 255px;
}
.contact .map#map iframe {
width: 100%;
height: 100%;
border: 0;
}