/* ============================================================ Template de site de chaveiro — estilo base As cores vêm de config.js. Não escrever cor fixa aqui. ============================================================ */ :root{ --cor-primaria:#E30613; --cor-secundaria:#0A0A0A; --cor-texto:#141414; --cor-fundo:#FFFFFF; --cor-fundo-alt:#F4F5F7; --raio:10px; --max:1180px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--cor-texto);background:var(--cor-fundo); line-height:1.6;-webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} .container{max-width:var(--max);margin:0 auto;padding:0 20px;} /* ---------- Barra de urgência ---------- */ .urgencia{ background:var(--cor-primaria);color:#fff;text-align:center; padding:10px 16px;font-weight:700;font-size:15px; } /* ---------- Cabeçalho ---------- */ header{ background:var(--cor-secundaria);color:#fff; position:sticky;top:0;z-index:100; } header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:16px;} .logo{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#fff;} .logo img{max-height:46px;} nav ul{display:flex;gap:22px;list-style:none;flex-wrap:wrap;} nav a{font-size:15px;font-weight:500;color:#fff;opacity:.9;} nav a:hover{opacity:1;color:var(--cor-primaria);} .btn-topo{ background:var(--cor-primaria);color:#fff;padding:11px 20px; border-radius:var(--raio);font-weight:700;font-size:15px;white-space:nowrap; } /* ---------- Hero ---------- */ .hero{ background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.82)),var(--cor-secundaria); color:#fff;padding:76px 0;text-align:center; } /* ---------- Hero CAPA: a foto no FUNDO da seção ---------- Mesmo padrão das outras demos (site/modelos/demo.css → .hero-capa), traduzido para as variáveis deste template, que são outras. ⚠️ Aqui o scrim é VERTICAL em toda largura, e não lateral como lá: neste herói o texto é centralizado e ocupa a linha inteira, então um degradê lateral deixaria o meio da frase sobre a parte clara da foto. ⛔ Só entra foto LARGA (16:9 ou 3:2): retrato esticado na largura cheia sobe borrado em tela retina. */ /* ⭐ A ALTURA É PARTE DO CONSERTO (02/08/2026), não estética: com 76px de respiro o herói fechava em 481px contra ~692px das outras demos, e o texto ocupava TODA linha. Scrim vertical só abre no meio — e num herói sem meio livre ele não tem onde abrir. Mais alto, a foto respira acima e abaixo do bloco de texto. */ .hero-capa{position:relative;overflow:hidden;background:var(--cor-secundaria);padding:118px 0;} .hero-capa .capa-foto{position:absolute;inset:0;z-index:0;} .hero-capa .capa-foto img{width:100%;height:100%;object-fit:cover;} /* ⚠️ Os valores são MAIS LEVES do que a intuição pede, e isso é decisão, não descuido: a primeira versão usava 82/58/86 e, sobre uma foto que já é escura (close de fechadura), o herói virou um bloco preto com fantasma de imagem atrás. É o mesmo erro que as outras demos cometeram em 30/07 e corrigiram. O escuro fica onde o texto está (topo e base); o meio abre. ⛔ E 74/38/80 AINDA era pesado demais — medido em 02/08/2026: o pico de brilho do herói era 156 contra 255 nas três demos aprovadas (clínica, petshop, oficina), ou seja, em ponto NENHUM a foto aparecia sem véu. O dono viu e disse que a página estava "sem a foto de destaque". A legibilidade agora vem da SOMBRA no texto, abaixo — não de afogar a imagem. */ .hero-capa::after{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(178deg, color-mix(in srgb,var(--cor-secundaria) 58%,transparent) 0%, color-mix(in srgb,var(--cor-secundaria) 12%,transparent) 50%, color-mix(in srgb,var(--cor-secundaria) 66%,transparent) 100%); } .hero-capa .container{position:relative;z-index:2;} /* ⛔ CÓPIA DA FAIXA DE PROTEÇÃO DO `../demo.css` — e a cópia é DÍVIDA, não desenho. ⚠️ Esta demo é a ÚNICA das 23 que não carrega o `demo.css`: ela é um FORK, com folha própria. Descoberto em 03/08/2026, investigando por que a faixa nova não pegava justamente aqui. É o mesmo mal das nove skills forkadas que esta casa já catalogou: **o fork nasce certo e envelhece parado**. Enquanto ele existir, todo conserto do comum precisa ser copiado à mão para cá — e vai ser esquecido. ⛔ E isto corrige o que ficou escrito em 02/08 (*"o chaveiro não tem override nenhum"*): ele não tem override porque tem uma folha inteira separada. ⏳ Unificar no `demo.css` é decisão do dono: mexe na demo do nicho de entrada, que é a que a `/chaveiros` estampa, e por isso não se faz de passagem. */ .hero-capa .container::before{ content:""; position:absolute; inset:-8% -10%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(12,14,18,.80) 0%, rgba(12,14,18,.66) 42%, rgba(12,14,18,.34) 68%, transparent 84%); } /* ⭐ A sombra é o que paga a legibilidade que o scrim deixou de pagar. Ela é BORRADA e larga, nunca dura — sombra dura sobre foto vira contorno sujo. */ .hero-capa h1{text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);} .hero-capa p{text-shadow:0 1px 12px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);} /* Sobre foto o chip precisa carregar o próprio contraste: a 12% de branco ele some quando cai numa área clara da imagem. */ .hero-capa .selo{ background:color-mix(in srgb,var(--cor-secundaria) 66%,transparent); border-color:rgba(255,255,255,.28); } .hero h1{font-size:clamp(30px,5vw,50px);line-height:1.15;font-weight:800;margin-bottom:16px;letter-spacing:-.02em;} .hero p{font-size:clamp(17px,2.2vw,20px);opacity:.92;max-width:660px;margin:0 auto 30px;} .selos{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;} .selo{ background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22); padding:8px 16px;border-radius:100px;font-size:14px;font-weight:600; } /* ---------- Botões ---------- */ .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .btn{ display:inline-flex;align-items:center;gap:9px; padding:16px 32px;border-radius:var(--raio); font-weight:700;font-size:17px;transition:transform .15s; } .btn:active{transform:scale(.98);} .btn-whats{background:#25D366;color:#fff;} .btn-tel{background:var(--cor-primaria);color:#fff;} .btn-linha{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);} /* ---------- Seções ---------- */ section{padding:64px 0;} section.alt{background:var(--cor-fundo-alt);} .titulo{text-align:center;margin-bottom:40px;} .titulo h2{font-size:clamp(25px,3.6vw,36px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px;} .titulo p{color:#5A6068;font-size:17px;max-width:620px;margin:0 auto;} /* ---------- Cards de serviço ---------- Flex com justify-content:center em vez de grid: quando o número de cards não fecha a linha (ex.: 5 cards), a sobra fica CENTRALIZADA em vez de largada à esquerda com um vazio do lado. Como os serviços são liga/desliga, a quantidade varia por cliente e isso acontece sempre. */ .grade{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:stretch;} .grade > *{flex:1 1 300px;max-width:362px;} .card{ background:var(--cor-fundo);border:1px solid #E3E6EA;border-radius:var(--raio); padding:28px;transition:box-shadow .18s,transform .18s; } .card:hover{box-shadow:0 10px 28px rgba(0,0,0,.09);transform:translateY(-3px);} .card .ico{ width:46px;height:46px;border-radius:9px;background:var(--cor-primaria); display:flex;align-items:center;justify-content:center;margin-bottom:16px; color:#fff;font-size:22px;font-weight:800; } .card h3{font-size:19px;font-weight:700;margin-bottom:9px;} .card p{color:#5A6068;font-size:15.5px;} .card .mais{display:inline-block;margin-top:14px;color:var(--cor-primaria);font-weight:700;font-size:15px;} /* ---------- Lista de itens relacionados ---------- */ .relacionados{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px;} .item{ background:var(--cor-fundo);border-left:3px solid var(--cor-primaria); padding:18px 20px;border-radius:0 var(--raio) var(--raio) 0; } .item h4{font-size:16.5px;font-weight:700;margin-bottom:5px;} .item p{font-size:14.5px;color:#5A6068;} /* ---------- Fotos de apoio ---------- Mesmas medidas do demo.css das outras demos. O teto de altura não é estética: sem ele, 16/9 na largura cheia dá ~640px no desktop e a foto de APOIO vira a dona da tela, empurrando o texto que vende pra baixo da dobra. */ .foto-bloco{ border-radius:var(--raio);overflow:hidden; border:1px solid #E3E6EA;background:var(--cor-fundo-alt); } .foto-bloco img{display:block;width:100%;height:100%;object-fit:cover;} /* margin-inline:auto porque o max-height, via aspect-ratio, vira max-width (~746px) — sem ele o bloco encolhido encostava na esquerda do container. */ .foto-larga{aspect-ratio:16/9;max-height:420px;margin-inline:auto;margin-bottom:36px;} .foto-dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:36px;} .foto-dupla .foto-bloco{aspect-ratio:4/3;} @media(max-width:640px){ .foto-dupla{grid-template-columns:1fr;gap:14px;} .foto-larga{aspect-ratio:3/2;margin-bottom:26px;} /* 🔴 02/09/2026, medido: a .logo era 21px SEM regra nenhuma de celular, entao o nome quebrava em DUAS linhas e o cabecalho ia a 101px de altura -- 18px a mais que o do advogado, que e a referencia que ele mandou copiar. Esses 18px atrasam a cena, que mede o progresso pelo TOPO DO PALCO. ⛔ Nao se troca a estrutura do cabecalho para "ficar igual": o chaveiro tem 6 itens de menu e a marca sem subtitulo, por desenho. O que se iguala e o EFEITO. */ .logo{font-size:17px;line-height:1.15;} } /* ---------- Depoimentos ---------- */ .depo{background:var(--cor-fundo);border-radius:var(--raio);padding:26px;border:1px solid #E3E6EA;} .depo .estrelas{color:#F5A623;margin-bottom:10px;letter-spacing:2px;} .depo p{font-style:italic;color:#3C4148;margin-bottom:12px;} .depo strong{display:block;font-size:14.5px;} /* ---------- Bairros ---------- */ .bairros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .bairros span{ background:var(--cor-fundo);border:1px solid #DDE1E6; padding:9px 17px;border-radius:100px;font-size:14.5px;font-weight:500; } /* ---------- Faixa de conversão ---------- */ .faixa{background:var(--cor-secundaria);color:#fff;text-align:center;padding:56px 0;} .faixa h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin-bottom:12px;} .faixa p{opacity:.9;margin-bottom:26px;font-size:17px;} /* ---------- Rodapé ---------- */ footer{background:#08090A;color:#9AA1A9;padding:44px 0 26px;font-size:14.5px;} .rodape-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:30px;margin-bottom:28px;} footer h4{color:#fff;font-size:16px;margin-bottom:13px;} footer a:hover{color:var(--cor-primaria);} footer ul{list-style:none;display:grid;gap:7px;} .rodape-fim{border-top:1px solid #1C1F23;padding-top:18px;text-align:center;font-size:13.5px;} /* ⛔ 02/09/2026: esta página tem o botão flutuante em TODA largura, então a pílula da cena * (#hero-cta) seria o segundo CTA fixo — pelo martelo dele, o que aparece sozinho na * borda some. Aqui ela some em qualquer largura. */ #hero-cta{display:none} /* ---------- Botão flutuante ---------- */ .flutuante{ /* ⛔ 02/09/2026, olho dele no desktop: a 18px do rodapé o botão ficava ATRÁS da barra do selo de demonstração (~52px). 76px é a mesma altura que a .acao-mobile das demos usa. */ position:fixed;right:18px;bottom:76px;z-index:200; background:#25D366;color:#fff;width:60px;height:60px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:29px; box-shadow:0 6px 22px rgba(0,0,0,.28); } /* ---------- Mobile ---------- */ @media(max-width:860px){ nav{display:none;} .hero{padding:52px 0;} /* ⚠️ O herói CAPA não volta aos 52px: em coluna estreita o recorte `cover` amplia muito a foto, e sem respiro o texto encosta no assunto. */ .hero-capa{padding:76px 0;} /* Um pouco mais velado que no desktop, e pelo motivo oposto ao de antes: aqui o texto ocupa quase toda a altura do herói, então não existe faixa livre — o meio precisa fechar um pouco para a frase não brigar com a chave. */ .hero-capa::after{ background:linear-gradient(178deg, color-mix(in srgb,var(--cor-secundaria) 66%,transparent) 0%, color-mix(in srgb,var(--cor-secundaria) 26%,transparent) 50%, color-mix(in srgb,var(--cor-secundaria) 72%,transparent) 100%); } section{padding:46px 0;} .btn{width:100%;justify-content:center;} .acoes{flex-direction:column;} } /* ---------- Nota do Google ---------- Medido em 28/07/2026: entre os dois melhores sites de chaveiro da região, o que estampa a nota com selo de verificada passa muito mais confiança que o que só cita o @ do Instagram. Some inteiro quando não há ficha verificada (config.js). */ .google-nota{ display:inline-flex;align-items:center;gap:10px 14px;flex-wrap:wrap; margin-top:14px;background:var(--cor-fundo);border:1px solid #E3E6EA; border-radius:100px;padding:10px 20px; } .google-nota .estrelas{color:#F5A623;letter-spacing:2px;font-size:15px;} .google-nota .n{font-size:21px;font-weight:800;line-height:1;} .google-nota .qtd{font-size:14px;color:#5B646F;} .google-nota .qtd b{color:var(--cor-texto);font-weight:700;} /* ⚠️ Linha própria: renderizado, o selo colava no nome de quem avaliou e a dupla quebrava torta em cartão de texto mais longo. */ .depo .verificada{ display:flex;width:fit-content;align-items:center;gap:6px;margin:0 0 10px; font-size:11.5px;font-weight:700;color:var(--cor-primaria); background:rgba(0,0,0,.04);border-radius:100px;padding:4px 10px; } .depo .verificada::before{content:"✓";font-weight:800;} /* ---------- Vídeos de atendimento ---------- */ /* Flex em vez de grid: fileira INCOMPLETA centraliza (1 vídeo não fica pendurado à esquerda sob o título centralizado); fileira cheia fica igual. */ .videos{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;} .videos .video{width:calc((100% - 48px)/4);} @media(max-width:900px){.videos .video{width:calc((100% - 16px)/2);}} @media(max-width:540px){.videos .video{width:100%;}} .video{ background:var(--cor-fundo);border:1px solid #E3E6EA; border-radius:var(--raio);overflow:hidden; } .video video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#0A0A0A;} .video figcaption{padding:12px 14px;font-size:13.5px;color:#5B646F;} /* ---------- Redes no rodapé ---------- */ .redes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .redes a{ border:1px solid rgba(255,255,255,.18);border-radius:100px; padding:6px 13px;font-size:13px;color:rgba(255,255,255,.78); } .redes a:hover{border-color:rgba(255,255,255,.42);color:#fff;} /* ---------- SÓ NA DEMO ---------- */ .nota-demo{ max-width:640px;margin:14px auto 0;font-size:13.5px;color:#5B646F;line-height:1.5; } /* ═══════════════════════════════════════════════════════════════════════ HERO-SCROLL — família Cyber Dark Gold · chaveiro (01/09/2026) ═══════════════════════════════════════════════════════════════════════ ⭐ MARTELO DO DONO (adendo 1 do plano, 01/09): "chaveiro: efeito no MEIO, CURTO". Então: o efeito NÃO abre a página nem rouba o primeiro segundo — ele acontece enquanto o visitante ROLA o hero, e termina antes do fim dele. ⛔ E ele obedece a lição de 02/08 que está escrita 40 linhas acima: a foto NUNCA se apaga. O véu do ::after já foi reprovado pelo dono por afogar a imagem ("a página está sem a foto de destaque"). Aqui o efeito ABRE o véu conforme se rola, em vez de fechá-lo — a foto ganha destaque, não perde. ⭐ MECANISMO: animação guiada pelo scroll (`animation-timeline: view()`), que roda no compositor e não custa JavaScript nenhum. ⚠️ FALLBACK DECLARADO: navegador sem suporte simplesmente não anima — a página fica exatamente como está hoje, que é o estado já aprovado. O efeito é ganho, nunca dependência. ⛔ E `prefers-reduced-motion` desliga tudo: quem pediu menos movimento manda mais que o efeito. */ /* 🔴 DESLIGADO em 01/09/2026 por MEDICAO, nao por gosto: varrido o percurso inteiro no Chromium -- o motor que SUPORTA isto -- o efeito saiu CONGELADO, 1 valor de `transform` em 13 posicoes de rolagem. Ele nunca animou em lugar nenhum, e o dono pegou no celular antes de qualquer regua: "so fica parado". ⭐ Quem anima agora e `modelos/motion-sem-suporte.js`, com o mesmo desenho e as mesmas faixas -- provado rolando: `--p` 0.0000 -> 0.8663 -> 1.0000. ⚠️ Fica AQUI, comentado e inteiro, em vez de apagado: no dia em que alguem descobrir por que a timeline nao pegava, o desenho original esta escrito. ⛔ NAO se religa sem a `prova-efeito-de-scroll-se-mexe.js` passando. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: MORTO-ver-nota-acima) { /* 1. A FOTO — respira de leve enquanto o hero passa. Escala pequena de propósito: 1.06 é perceptível e não distorce o close da fechadura. Acima disso a chave sai de foco. */ .hero-capa .capa-foto img { animation: chaveiro-respira linear both; animation-timeline: view(); animation-range: entry 0% exit 60%; will-change: transform; } @keyframes chaveiro-respira { from { transform: scale(1.00); } to { transform: scale(1.06); } } /* 2. O VÉU — ABRE no meio do percurso. É aqui que mora o "efeito no meio": o escuro cede, a foto aparece, e volta a fechar de leve para o texto continuar legível na saída. ⛔ Nunca passa de 66%, que é o teto que a lição de 02/08 fixou. */ .hero-capa::after { animation: chaveiro-veu-abre linear both; animation-timeline: view(); animation-range: entry 20% exit 40%; } @keyframes chaveiro-veu-abre { 0% { opacity: 1; } 50% { opacity: 0.42; } /* o MEIO: a foto ganha o palco */ 100% { opacity: 0.86; } } /* 3. OS SELOS — entram em cascata curta, um atrás do outro. ⚠️ 90ms entre eles: rápido o bastante para não parecer carregamento lento, lento o bastante para o olho registrar que são quatro. */ .hero-capa .selo { animation: chaveiro-selo-entra linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; } .hero-capa .selo:nth-child(2) { animation-delay: 90ms; } .hero-capa .selo:nth-child(3) { animation-delay: 180ms; } .hero-capa .selo:nth-child(4) { animation-delay: 270ms; } @keyframes chaveiro-selo-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } } /* ═══════════════════════════════════════════════════════════════════════ O TRABALHO DE PERTO — motion no lugar do vídeo (01/09/2026) ═══════════════════════════════════════════════════════════════════════ ⭐ Martelo do dono: o vídeo daqui nunca renderizou bem; o efeito fica no lugar. ⛔ Mesma disciplina do hero: a foto NUNCA se apaga (lição de 02/08), o efeito ABRE o véu em vez de fechar, e ele é opt-in por `@supports`. */ .motion-trabalho .motion-palco{ position:relative;overflow:hidden;border-radius:14px; aspect-ratio:16/9;max-width:980px;margin:0 auto; } .motion-trabalho .motion-palco img{ width:100%;height:100%;object-fit:cover;display:block; } .motion-trabalho .motion-veu{ position:absolute;inset:0; background:linear-gradient(180deg, color-mix(in srgb,var(--cor-secundaria) 10%,transparent) 0%, color-mix(in srgb,var(--cor-secundaria) 8%,transparent) 55%, color-mix(in srgb,var(--cor-secundaria) 72%,transparent) 100%); } .motion-trabalho .motion-legenda{ position:absolute;left:0;right:0;bottom:0;padding:20px 22px; display:flex;gap:10px;flex-wrap:wrap; } .motion-trabalho .motion-selo{ background:color-mix(in srgb,var(--cor-secundaria) 78%,transparent); color:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600; backdrop-filter:blur(4px); } /* mesmo motivo da nota acima — desligado em 01/09/2026, medido congelado */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: MORTO-ver-nota-acima){ /* a foto entra em contra-zoom: começa maior e ASSENTA — o oposto do hero, para as duas seções não parecerem a mesma animação repetida */ .motion-trabalho .motion-palco img{ animation:motion-assenta linear both; animation-timeline:view();animation-range:entry 5% cover 55%; will-change:transform; } @keyframes motion-assenta{from{transform:scale(1.12)}to{transform:scale(1.00)}} .motion-trabalho .motion-veu{ animation:motion-veu-abre linear both; animation-timeline:view();animation-range:entry 10% cover 50%; } @keyframes motion-veu-abre{from{opacity:1}to{opacity:.55}} .motion-trabalho .motion-selo{ animation:motion-selo-entra linear both; animation-timeline:view();animation-range:entry 25% cover 45%; } .motion-trabalho .motion-selo:nth-child(2){animation-delay:110ms} @keyframes motion-selo-entra{ from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} } } } /* ───────────────────────────────────────────────────────────────────────────── O MESMO MOTION, ONDE `animation-timeline` NAO EXISTE — 01/09/2026 🔴 Flagrante do dono, no celular dele: "so fica o video parado la nao funciona". ⭐ Medido: dos 32 modelos, `animation-timeline` existe em UM. Os outros 31 funcionam porque nao tentam isto. ⛔ E ali havia um `