/* ======================================================== FONTE LOCAL — Montserrat (variável, subsetada) [CONFIRMAR] arquivo final em assets/fonts/montserrat-var.woff2 Peso 400 a 800 num único arquivo variável ======================================================== */ @font-face{ font-family:'Montserrat'; src:url('../fonts/montserrat-var.woff2') format('woff2-variations'); font-weight:400 800; font-style:normal; font-display:swap; } /* ======================================================== Reforço de tokens (mesmos definidos no crítico inline do — repetidos aqui apenas como fallback caso este arquivo seja usado isoladamente em outra página do projeto) ======================================================== */ :root{ --cor-primaria:#000000; --cor-secundaria:#F26324; --cor-cta:#57EE1C; --cor-cta-texto:#0B1A03; --branco:#FFFFFF; --preto-texto:#1A1A1A; --cinza-claro:#EEEEEE; --font-base:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif; --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:50px; --gap-sm:1rem;--gap-md:2rem;--gap-lg:4rem; } .acc{ color:var(--cor-secundaria) } /* ======================================================== 03 — PILARES ======================================================== */ .pilares{ padding:clamp(70px,6vw,80px) clamp(16px,4vw,48px); text-align:center; } .pilares__titulo{ font-size:clamp(30px, 21px + 2.3vw, 50px); font-weight:700; max-width:44ch; margin:0 auto 60px; line-height:1.3; } .pilares__grid{ display:grid; grid-template-columns:1fr; gap:40px; max-width:1100px; margin:0 auto; } .pilar-card{ min-width:0; border:1px solid #e6e6e6; border-radius:var(--radius-md); padding:24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; } .pilar-card img{ width:100%; min-width:0; align-self:stretch; border-radius:var(--radius-sm); aspect-ratio:2/1; object-fit:cover; } .pilar-card h3{ font-size:18px; font-weight:700; white-space:nowrap; } .pilar-card__cta{ background:var(--cor-cta); color:var(--cor-cta-texto); font-weight:700; font-size:18px; text-transform:uppercase; text-decoration:none; white-space:nowrap; border-radius:var(--radius-pill); padding:12px 22px; display:inline-flex; align-items:center; gap:8px; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; } .pilar-card__cta:hover, .pilar-card__cta:focus-visible{ transform:translateY(-2px); filter:brightness(0.94); box-shadow:0 6px 16px rgba(87,238,28,.35); } .pilar-card__legenda{ font-size:14px; color:#777} @media (min-width:768px){ .pilares__grid {grid-template-columns:repeat(3,1fr) } } /* ======================================================== 04 — PROVA SOCIAL ======================================================== */ .prova-social{ background:var(--cinza-claro); padding:clamp(80px,6vw,100px) clamp(16px,4vw,48px); text-align:center; } .prova-social h2{ font-size:clamp(30px, 21px + 2.3vw, 50px); font-weight:700; max-width:44ch; margin:0 auto 60px; line-height:1.3; } .prova-social__grid{ display:grid; grid-template-columns:1fr; gap:40px; max-width:1100px; margin:0 auto var(--gap-md); } .prova-social__grid img{ min-width:0; border-radius:var(--radius-sm); aspect-ratio:1/1; object-fit:cover; width:100%; } .prova-social__cta{ background:var(--cor-cta); color:var(--cor-cta-texto); font-weight:700; font-size:24px; text-transform:uppercase; text-decoration:none; white-space:nowrap; border-radius:var(--radius-pill); padding:16px 28px; display:inline-flex; align-items:center; gap:10px; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; } .prova-social__cta:hover, .prova-social__cta:focus-visible{ transform:translateY(-2px); filter:brightness(0.94); box-shadow:0 8px 20px rgba(87,238,28,.4); } .prova-social__legenda{ font-size:14px; color:#777; margin-top:10px } @media (min-width:768px){ .prova-social__grid{ grid-template-columns:repeat(3,1fr) } } /* Removido breakpoint de 6 colunas — o site original mantém 3 colunas (2 fileiras de 6 fotos) do tablet até o desktop, sem abrir mais */ /* ======================================================== 05 — DEPOIMENTOS ======================================================== */ .depoimentos{ padding:clamp(80px,6vw,100px) clamp(16px,4vw,48px); text-align:center; } .depoimentos h2{ font-size:clamp(30px, 21px + 2.3vw, 50px); font-weight:700; max-width:44ch; margin:0 auto 60px; line-height:1.3; } .depoimentos__grid{ display:grid; grid-template-columns:1fr; gap:40px; max-width:1100px; margin:0 auto var(--gap-md); } .depoimento-card{ border:1px solid #e6e6e6; border-radius:var(--radius-md); padding:24px 20px; text-align:left; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; } .depoimento-card__header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .depoimento-card__avatar{ border-radius:50%; aspect-ratio:1/1; object-fit:cover; flex-shrink:0; } .depoimento-card__id{ display:flex; flex-direction:column; gap:2px; } .depoimento-card__nome{ font-weight:700; font-size:15px; } .depoimento-card__google{ display:block; } .depoimento-card__estrelas{ color:#F2A824; font-size:14px; margin:0 0 10px; } .depoimento-card__texto{ font-size:14px; color:#444; line-height:1.6; } @media (min-width:768px){ .depoimentos__grid{ grid-template-columns:repeat(3,1fr) } } /* ======================================================== 06 — SELOS DE CONFIANÇA Bloco laranja full-bleed (edge-to-edge, igual à LP em WP); heading + grid de cards ficam dentro de um container interno com max-width, preservando o padrão de largura do resto do site (mesmo raciocínio do .hero__container) ======================================================== */ .selos{ background:var(--cor-secundaria); padding:clamp(56px,5vw,100px) clamp(16px,4vw,48px); } .selos__container{ max-width:1100px; margin:0 auto; } .selos__heading{ font-size:clamp(30px, 21px + 2.3vw, 50px); font-weight:700; color:var(--preto-texto); max-width:38ch; margin:0 auto clamp(24px,4vw,40px); line-height:1.3; text-align:center; } /* Sobre fundo laranja, o nome da marca vira branco (contraste), diferente do .acc padrão (laranja) usado sobre fundo branco */ .selos__heading .acc{ color:var(--branco); } .selos__grid{ display:grid; grid-template-columns:1fr; gap:50px; } .selo{ background:var(--branco); border-radius:var(--radius-md); padding:20px; display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center; min-width:0; } .selo__icone{ width:48px; height:48px; color:#111111; flex-shrink:0; } /* Selos ORIGINAIS e Revendedor Stihl: artes próprias multicoloridas (não usam currentColor), proporção retangular (~1.88:1) — não podem ser forçadas ao quadrado padrão dos outros ícones, senão distorcem a marca */ .selo__icone--wide{ width:88px; height:auto; } .selo__titulo{ font-size:20px; line-height:1.4; max-width:26ch; color:var(--preto-texto) } @media (min-width:600px){ .selos__grid{grid-template-columns:repeat(2,1fr)} } /* ======================================================== 07 — CTA FINAL (abaixo do bloco de selos) ======================================================== */ .cta-final{ padding:clamp(56px,5vw,100px) clamp(16px,4vw,48px); text-align:center; } .cta-final__botao{ background:var(--cor-cta); color:var(--cor-cta-texto); font-weight:700; font-size:24px; text-transform:uppercase; text-decoration:none; white-space:nowrap; border-radius:var(--radius-pill); padding:16px 28px; display:inline-flex; align-items:center; gap:10px; transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; } .cta-final__botao:hover, .cta-final__botao:focus-visible{ transform:translateY(-2px); filter:brightness(0.94); box-shadow:0 8px 20px rgba(87,238,28,.4); } .cta-final__legenda{ font-size:14px; color:#777; margin-top:10px } /* ======================================================== 08 — FOOTER ======================================================== */ .footer{ background:var(--cor-primaria); color:#bbb; padding:clamp(48px,6vw,64px) clamp(16px,4vw,48px) 0; font-size:13px; display:grid; grid-template-columns:1fr; gap:28px; text-align:center; } .footer__coluna{ display:flex; flex-direction:column; gap:8px;align-items:center; } .footer__titulo{ font-weight:700; color:var(--branco); margin-bottom:2px; } .footer a{ color:#bbb; text-decoration:none; } .footer a:hover{ color:var(--branco); } .footer__copyright{ grid-column:1/-1; border-top:1px solid #222; padding:16px 0; font-size:12px; color:#888; margin-top:8px; text-align:center; } @media (min-width:768px){ .footer{grid-template-columns:repeat(3,1fr); text-align:left; } .footer__coluna{ align-items:center; } } /* ======================================================== 09 — MODAL (estrutura pronta, ativação futura) ======================================================== */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000; } .modal-overlay[hidden]{display:none} .modal-card{ background:var(--branco); border-radius:var(--radius-lg); padding:28px 24px; width:100%; max-width:360px; position:relative; } .modal-card__fechar{ position:absolute; top:14px; right:14px; background:none; border:none; font-size:20px; color:#777; cursor:pointer; line-height:1; } .modal-card h2{ font-size:18px; font-weight:700; margin-bottom:6px; } .modal-card p{ font-size:13px; color:#666; margin-bottom:18px; } .modal-card__form{ display:flex; flex-direction:column; gap:12px; } .modal-card__form label{ font-size:13px; font-weight:600; } .modal-card__form input{ width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:var(--radius-sm); } .modal-card__enviar{ background:var(--cor-cta); color:var(--cor-cta-texto); font-weight:700; font-size:15px; border:none; border-radius:var(--radius-pill); padding:14px; cursor:pointer; margin-top:6px; transition:filter .2s ease, box-shadow .2s ease; } .modal-card__enviar:hover, .modal-card__enviar:focus-visible{ filter:brightness(0.94); box-shadow:0 6px 16px rgba(87,238,28,.35); } .modal-card__fechar{ transition:color .2s ease; } .modal-card__fechar:hover, .modal-card__fechar:focus-visible{ color:var(--preto-texto); } /* ======================================================== 10 — BOTÕES FLUTUANTES Scroll-to-top à esquerda, WhatsApp à direita — mesmo posicionamento da versão WP em produção. ======================================================== */ .scroll-top{ position:fixed; left:20px; bottom:20px; width:48px; height:48px; border-radius:50%; border:none; background:var(--cor-primaria); color:var(--branco); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease; z-index:998; } .scroll-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); } .scroll-top:hover, .scroll-top:focus-visible{ background:var(--cor-secundaria); transform:translateY(-2px) scale(1.06); } .whatsapp-float{ position:fixed; right:20px; bottom:20px; width:60px; height:60px; border-radius:50%; background:#25D366; color:var(--branco); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3); z-index:999; transition:transform .2s ease, box-shadow .2s ease; } .whatsapp-float:hover, .whatsapp-float:focus-visible{ transform:scale(1.06); box-shadow:0 6px 20px rgba(0,0,0,.4); } @media (max-width:480px){ .scroll-top{width:44px;height:44px;left:16px;bottom:16px} .whatsapp-float{width:54px;height:54px;right:16px;bottom:16px} } /* ======================================================== 11 — MOBILE: evitar quebra de linha nos textos dos CTAs (mesmo font-size grande usado no desktop, onde há mais espaço disponível e a quebra não ocorre) ======================================================== */ @media (max-width:767px){ .prova-social__cta, .cta-final__botao{ font-size:18px; white-space:nowrap; } .prova-social__cta svg, .cta-final__botao svg{ width:18px; height:18px; } } .header__cta svg, .pilar-card__cta svg, .prova-social__cta svg, .cta-final__botao svg{ flex-shrink:0; } /* ======================================================== 12 — ACESSIBILIDADE: reduzir/remover movimento para quem configurou "reduzir movimento" no sistema operacional ======================================================== */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ======================================================== 13 — SCROLL REVEAL (seções abaixo da dobra) Escopado em html.js: essa classe só existe se o JS rodou (ver