/* ============================================================ BASE DOS MODELOS DE DEMONSTRAÇÃO — Vistonanet ============================================================ Uma folha para todas as demos. A paleta NÃO mora aqui: cada modelo define as suas variáveis no próprio . ⛔ Não escrever cor fixa neste arquivo (fora dos neutros). Cor fixa aqui = todo modelo com a mesma cara, que é exatamente o que a vitrine existe para desmentir. ⚠️ A paleta da Vistonanet (bronze sobre preto) vale para as páginas DA VISTONANET. Modelo de cliente usa a cor do NEGÓCIO dele — dentista não é bronze, obra não é bronze. O que vale para todo mundo é a regra de alinhamento do identidade/design-guide.md: nada solto, nada no vazio. ============================================================ */ :root{ --p:#0B3D6B; /* primária — CTA, ícone, destaque */ --p-esc:#082B4C; /* primária escura — hover, profundidade */ --a:#F26522; /* acento — urgência, badge (usar pouco) */ --escuro:#10141A; /* fundo escuro / cabeçalho */ --txt:#171A1F; /* texto principal */ --txt-2:#5B646F; /* texto secundário */ --bg:#FFFFFF; /* fundo */ --bg-2:#F4F6F8; /* fundo alternado */ --linha:#E3E7EC; /* bordas */ --raio:12px; --max:1160px; --sombra:0 1px 2px rgba(16,20,26,.05), 0 8px 24px rgba(16,20,26,.06); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--txt);background:var(--bg); line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;} .container{max-width:var(--max);margin:0 auto;padding:0 20px;width:100%;} h1,h2,h3{line-height:1.15;letter-spacing:-.02em;font-weight:800;} h2{font-size:clamp(26px,3.6vw,40px);} h3{font-size:19px;font-weight:700;letter-spacing:-.01em;} .olho{ display:block;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.18em;color:var(--p);margin-bottom:12px; } .sub{color:var(--txt-2);font-size:clamp(16px,1.9vw,18px);max-width:62ch;} section{padding:clamp(56px,7vw,88px) 0;} .alt{background:var(--bg-2);} .centro{text-align:center;} .centro .sub{margin-left:auto;margin-right:auto;} .cab{margin-bottom:clamp(32px,4vw,48px);} /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--p);color:#fff;font-weight:700;font-size:16px; padding:15px 26px;border-radius:var(--raio);border:0;cursor:pointer; transition:transform .15s ease,background .15s ease;text-align:center; } .btn:hover{background:var(--p-esc);transform:translateY(-1px);} .btn-2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);} .btn-2:hover{background:rgba(255,255,255,.1);} .btn-zap{background:#25D366;color:#0A2E17;} .btn-zap:hover{background:#1FBA57;} .btn-linha{background:transparent;color:var(--p);border:1.5px solid var(--p);} .btn-linha:hover{background:var(--p);color:#fff;} .acoes{display:flex;gap:12px;flex-wrap:wrap;} .centro .acoes{justify-content:center;} /* ---------- Barra de urgência ---------- */ .urgencia{ background:var(--a);color:#fff;text-align:center; padding:9px 16px;font-size:14px;font-weight:700;letter-spacing:.01em; } /* ---------- Cabeçalho ---------- */ header{ background:var(--escuro);color:#fff;position:sticky;top:0;z-index:90; border-bottom:1px solid rgba(255,255,255,.08); } header .container{ display:flex;align-items:center;justify-content:space-between; gap:18px;padding-top:14px;padding-bottom:14px; } .marca{font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.2;} /* ⚠️ A linha da marca fica sobre o cabeçalho ESCURO. Usar --p puro aqui deixa ela ilegível em toda paleta escura (azul sobre preto, grafite sobre preto). Por isso ela é a primária CLAREADA, nunca a primária crua. */ .marca span{display:block;font-size:10px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:color-mix(in srgb,var(--p) 42%,#fff);opacity:.95;} header nav ul{display:flex;gap:24px;align-items:center;} header nav a{font-size:15px;color:rgba(255,255,255,.82);font-weight:500;} header nav a:hover{color:#fff;} .btn-topo{ background:var(--p);color:#fff;padding:11px 20px;border-radius:10px; font-weight:700;font-size:15px;white-space:nowrap; } .btn-topo:hover{background:var(--p-esc);} @media(max-width:900px){header nav{display:none;}} /* ---------- Hero ---------- */ .hero{ background:var(--escuro);color:#fff; padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden; } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 80% at 82% 20%,rgba(255,255,255,.09),transparent 62%); } .hero .container{position:relative;z-index:1;} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;} .hero h1{font-size:clamp(31px,4.8vw,52px);margin-bottom:18px;} /* Mesma armadilha da marca: o hero padrão é escuro, então o destaque do título é a primária CLAREADA. Modelo de hero claro sobrescreve para --p. */ .hero h1 em{font-style:normal;color:color-mix(in srgb,var(--p) 50%,#fff);} .hero .sub{color:rgba(255,255,255,.8);margin-bottom:28px;} .selos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;} .selo{ background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); padding:7px 14px;border-radius:100px;font-size:13px;font-weight:600; display:inline-flex;align-items:center;gap:7px; } .selo b{color:color-mix(in srgb,var(--p) 40%,#fff);font-weight:700;} @media(max-width:860px){ .hero-grid{grid-template-columns:1fr;} .hero .acoes .btn{flex:1 1 100%;} } /* ---------- Cartão flutuante do hero ---------- */ .painel{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14); border-radius:16px;padding:26px;backdrop-filter:blur(6px); } .painel h3{color:#fff;margin-bottom:6px;} .painel p{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:18px;} .painel-item{ display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1); } .painel-item:last-of-type{border-bottom:0;} .painel-item .n{ width:26px;height:26px;border-radius:7px;background:var(--p);color:#fff; font-size:13px;font-weight:800;display:grid;place-items:center; } .painel-item strong{display:block;font-size:15px;color:#fff;font-weight:650;} .painel-item span{font-size:13.5px;color:rgba(255,255,255,.66);} /* ---------- Faixa de números ---------- */ .numeros{background:var(--p);color:#fff;padding:26px 0;} .numeros .container{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center; } .numeros b{display:block;font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.1;} .numeros span{font-size:13.5px;opacity:.86;} @media(max-width:700px){.numeros .container{grid-template-columns:repeat(2,1fr);gap:24px 16px;}} /* ---------- Grade de cards ---------- */ .grade{display:grid;gap:20px;} .g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);} .g-4{grid-template-columns:repeat(4,1fr);} @media(max-width:920px){.g-3,.g-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr;}} .card{ background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio); padding:26px 24px;box-shadow:var(--sombra); display:flex;flex-direction:column;gap:10px; } .card .ico{ width:42px;height:42px;border-radius:11px;display:grid;place-items:center; background:color-mix(in srgb,var(--p) 12%,transparent);color:var(--p); font-size:20px;font-weight:800;margin-bottom:4px; } .card p{color:var(--txt-2);font-size:15px;} .card .liga{margin-top:auto;padding-top:12px;color:var(--p);font-weight:700;font-size:14.5px;} /* ---------- Etapas ---------- */ .etapas{counter-reset:e;display:grid;gap:20px;grid-template-columns:repeat(3,1fr);} @media(max-width:820px){.etapas{grid-template-columns:1fr;}} .etapa{ background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio); padding:26px 24px;position:relative; } .etapa::before{ counter-increment:e;content:counter(e); position:absolute;top:-15px;left:24px; width:32px;height:32px;border-radius:9px;background:var(--p);color:#fff; display:grid;place-items:center;font-weight:800;font-size:15px; } .etapa h3{margin:10px 0 8px;} .etapa p{color:var(--txt-2);font-size:15px;} /* ---------- Depoimentos ---------- */ .dep{ background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio); padding:26px 24px;display:flex;flex-direction:column;gap:14px; } .estrelas{color:#F5A623;font-size:15px;letter-spacing:2px;} .dep p{font-size:15.5px;color:var(--txt);} .dep footer{ display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center; padding-top:6px;margin-top:auto; } .dep .av{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p); font-weight:800;font-size:15px; } .dep .quem{font-size:14.5px;font-weight:700;line-height:1.3;} .dep .quem span{display:block;font-weight:500;font-size:13px;color:var(--txt-2);} /* ---------- Lista com check ---------- */ .checks{display:grid;gap:12px;} .checks li{ display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start; font-size:15.5px; } .checks li::before{ content:"✓";color:var(--p);font-weight:800;font-size:15px; line-height:1.5;text-align:center; } /* ---------- Área de atendimento ---------- */ .bairros{display:flex;flex-wrap:wrap;gap:9px;} .bairros span{ background:var(--bg);border:1px solid var(--linha);border-radius:100px; padding:7px 15px;font-size:14px;color:var(--txt-2); } /* ---------- Formulário ---------- */ .form{ background:var(--bg);border:1px solid var(--linha);border-radius:16px; padding:clamp(24px,3.5vw,34px);box-shadow:var(--sombra); } .campo{display:grid;gap:7px;margin-bottom:16px;} .campo label{font-size:13.5px;font-weight:650;color:var(--txt);} .campo input,.campo select,.campo textarea{ font-family:inherit;font-size:15.5px;color:var(--txt); padding:13px 14px;border:1px solid var(--linha);border-radius:10px; background:var(--bg);width:100%; } .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:2px solid color-mix(in srgb,var(--p) 45%,transparent); outline-offset:1px;border-color:var(--p); } .dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;} @media(max-width:560px){.dupla{grid-template-columns:1fr;}} .form .btn{width:100%;} .form .nota{font-size:13px;color:var(--txt-2);margin-top:12px;text-align:center;} /* ---------- FAQ ---------- */ .faq{display:grid;gap:12px;max-width:820px;margin:0 auto;} .faq details{ background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio); padding:18px 22px; } .faq summary{ font-weight:700;font-size:16.5px;cursor:pointer;list-style:none; display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--p);font-size:22px;font-weight:700;line-height:1;} .faq details[open] summary::after{content:"−";} .faq details p{margin-top:12px;color:var(--txt-2);font-size:15.5px;} /* ---------- CTA final ---------- */ .cta{background:var(--escuro);color:#fff;text-align:center;} .cta h2{margin-bottom:14px;} .cta .sub{color:rgba(255,255,255,.78);margin:0 auto 28px;} /* ---------- Rodapé ---------- */ footer.pe{background:var(--escuro);color:rgba(255,255,255,.62);padding:44px 0 34px; border-top:1px solid rgba(255,255,255,.09);font-size:14.5px;} footer.pe .container{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;} footer.pe h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px; text-transform:uppercase;letter-spacing:.1em;} footer.pe li{margin-bottom:9px;} footer.pe a:hover{color:#fff;} footer.pe .fim{ grid-column:1/-1;border-top:1px solid rgba(255,255,255,.09); padding-top:20px;font-size:13px;color:rgba(255,255,255,.45); } @media(max-width:760px){footer.pe .container{grid-template-columns:1fr;gap:26px;}} /* ---------- Barra de ação no celular ---------- */ .acao-mobile{display:none;} @media(max-width:760px){ .acao-mobile{ display:grid;grid-template-columns:1fr 1fr;gap:10px; position:fixed;left:0;right:0;bottom:76px;z-index:80; padding:10px 14px;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-top:1px solid var(--linha); } .acao-mobile .btn{padding:13px 10px;font-size:15px;} body{padding-bottom:150px;} } /* ============================================================ PROVA SOCIAL DO GOOGLE ============================================================ Medido em 28/07/2026 nos dois melhores sites de chaveiro que o dono achou: `maurochaveiro.com.br` (forte) e `ederchaveiro24horasrj.com.br` (fraco). A diferença entre os dois é este bloco — o forte estampa "★★★★★ 5.0 · 347 avaliações no Google" com selo de verificada em cada uma; o fraco só cita o @ do Instagram e não mostra nota nenhuma. ⛔ Sem logo do Google e sem widget de terceiro: "no Google" em texto resolve, não pesa e não usa marca alheia. ============================================================ */ .google-nota{ display:flex;align-items:center;justify-content:center;gap:10px 16px; flex-wrap:wrap;margin-top:18px; background:var(--bg);border:1px solid var(--linha);border-radius:100px; padding:11px 22px;box-shadow:var(--sombra); } .google-nota .n{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;} .google-nota .estrelas{font-size:16px;} .google-nota .qtd{font-size:14.5px;color:var(--txt-2);} .google-nota .qtd b{color:var(--txt);font-weight:650;} /* selo por avaliação — é ele que separa "depoimento no site" de "avaliação que existe e dá para conferir" */ .dep .verificada{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:650;color:var(--p); background:color-mix(in srgb,var(--p) 9%,transparent); border-radius:100px;padding:4px 11px;align-self:flex-start; } .dep .verificada::before{content:"✓";font-weight:800;} /* ---------- selo de disponibilidade ---------- Rótulo, não relógio: sem JS de horário. Site que anuncia 24h está sempre disponível — e um script que erra o fuso diria "fechado" para um negócio que atende de madrugada. */ .selo-online{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); color:#fff;border-radius:100px;padding:6px 14px; font-size:12.5px;font-weight:650;white-space:nowrap; } .selo-online .ponto{ width:8px;height:8px;border-radius:50%;background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulsa 2.2s infinite; } @keyframes pulsa{ 70%{box-shadow:0 0 0 9px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} } @media(max-width:1040px){header .selo-online{display:none;}} /* ---------- vídeos de atendimento ---------- O elemento que o melhor site do nicho tem e os outros não. Casa com o pacote de vídeo que já está nos planos. */ .videos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media(max-width:960px){.videos{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.videos{grid-template-columns:1fr;}} .video{ background:var(--bg);border:1px solid var(--linha);border-radius:var(--raio); overflow:hidden;box-shadow:var(--sombra); } .video .quadro{ position:relative;aspect-ratio:9/16; background:linear-gradient(160deg,var(--escuro),color-mix(in srgb,var(--p) 55%,var(--escuro))); display:grid;place-items:center; } .video .play{ width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.92);color:var(--escuro); display:grid;place-items:center;font-size:17px;padding-left:4px; box-shadow:0 6px 20px rgba(0,0,0,.3); } .video .dur{ position:absolute;right:9px;bottom:9px; background:rgba(0,0,0,.66);color:#fff;border-radius:5px; padding:2px 7px;font-size:11.5px;font-weight:650; } .video p{padding:14px 16px;font-size:14px;color:var(--txt-2);} /* ---------- feed de rede social ---------- ⛔ Só em ramo de decisão pesquisada (reforma, clínica). Em urgência, feed vaza o visitante no momento de maior intenção. E aqui é HTML nosso: embed de terceiro pesa no celular e quebra quando a API muda. Vira embed de verdade no site do cliente. */ .feed-topo{ display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;margin-bottom:20px; } .feed-topo .quem{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;} .feed-topo .av{ width:46px;height:46px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--p); font-weight:800;font-size:17px; } .feed-topo .arroba{font-weight:700;font-size:15.5px;} .feed-topo .arroba span{display:block;font-weight:400;font-size:13.5px;color:var(--txt-2);} .feed{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;} @media(max-width:900px){.feed{grid-template-columns:repeat(3,1fr);}} /* ⚠️ Contraste conferido renderizando: com tinta fraca sobre fundo claro os quadros sumiam e o bloco parecia um erro de carregamento, não uma grade de fotos. Aqui eles têm peso suficiente para LER como conteúdo. */ .feed div{ aspect-ratio:1;border-radius:9px; background:linear-gradient(145deg, color-mix(in srgb,var(--p) 78%,#000) 0%, color-mix(in srgb,var(--p) 42%,#fff) 100%); position:relative;overflow:hidden; } .feed div::after{ content:"";position:absolute;inset:0; background:radial-gradient(70% 60% at 30% 25%,rgba(255,255,255,.28),transparent 70%); } .feed div:nth-child(even){ background:linear-gradient(145deg, color-mix(in srgb,var(--p) 52%,#fff) 0%, color-mix(in srgb,var(--p) 85%,#000) 100%); } /* ---------- rodapé social ---------- No rodapé de propósito: no meio da página, ícone de rede rouba clique de quem já estava decidindo. */ .redes{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;} .redes a{ display:inline-flex;align-items:center;gap:7px; border:1px solid rgba(255,255,255,.16);border-radius:100px; padding:7px 14px;font-size:13px;color:rgba(255,255,255,.8); } .redes a:hover{border-color:rgba(255,255,255,.4);color:#fff;} @media(prefers-reduced-motion:reduce){ .selo-online .ponto{animation:none;} }