/* ========================================================================== R&R Vidros e Esquadrias — CSS não crítico (abaixo da dobra) O crítico (tokens, reset, header, hero, faixa de confiança, barra fixa) está inline no . Ver .claude/skills/performance.md. ========================================================================== */ /* .sr-apenas fica no CSS crítico inline — é usado acima da dobra. */ /* ---------- Seções ---------- */ .secao{padding:64px 0} .secao--clara{background:var(--fundo-claro);border-block:1px solid var(--borda)} .secao--navy{ background:linear-gradient(165deg,var(--navy) 0%,var(--navy-900) 100%); color:var(--branco); } .secao__olho{ font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--teal-cta);margin:0 0 10px; } .secao--navy .secao__olho{color:var(--teal)} .secao__titulo{ font-size:clamp(1.6rem,3.4vw + .7rem,2.5rem); color:var(--navy);margin-bottom:14px;max-width:22ch; } .secao--navy .secao__titulo{color:var(--branco);max-width:26ch} .secao__intro{ color:var(--texto-suave);max-width:62ch;margin-bottom:36px; font-size:clamp(1rem,.5vw + .92rem,1.125rem); } .secao--navy .secao__intro{color:#C7D0E0} .secao__cta{margin-top:36px;display:flex;justify-content:center} .secao__cta--esq{justify-content:flex-start} .secao__cta .btn{width:100%} /* ---------- Carros-chefe ---------- */ .destaques{display:grid;grid-template-columns:1fr;gap:20px} .destaque{ position:relative; background:var(--branco);border:1px solid var(--borda);border-radius:var(--r); padding:28px 24px 24px; box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .destaque:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:#C3CEE4} /* Marca d'água decorativa (aria-hidden) — sem exigência de contraste, mas com tom forte o bastante para ler como intenção, e não como falha. */ .destaque__num{ position:absolute;top:20px;right:22px; font-size:2.25rem;font-weight:800;line-height:1; color:#E7EDF8;letter-spacing:-.04em; } .destaque__icone{ display:grid;place-items:center;width:52px;height:52px;border-radius:13px; background:var(--navy);color:var(--teal);margin-bottom:18px; } .destaque__titulo{font-size:1.25rem;color:var(--navy);margin-bottom:10px} .destaque__texto{color:var(--texto-suave);margin-bottom:12px} .destaque__texto strong{color:var(--texto);font-weight:700} .destaque__nota{ font-size:.875rem;color:var(--texto-suave); padding-top:12px;border-top:1px solid var(--borda); margin-bottom:16px; } .link-zap{ display:inline-flex;align-items:center;gap:8px; min-height:44px; color:var(--azul-link);font-weight:700;text-decoration:none;font-size:.9375rem; } .link-zap svg{transition:transform .18s ease} .link-zap:hover{text-decoration:underline} .link-zap:hover svg{transform:translateX(3px)} /* ---------- Serviços ---------- */ .servicos{display:grid;grid-template-columns:1fr;gap:2px; border:1px solid var(--borda);border-radius:var(--r);overflow:hidden;background:var(--borda)} .servico{background:var(--branco);padding:20px 22px} .servico__titulo{font-size:1.0625rem;color:var(--navy);margin-bottom:4px} .servico__texto{font-size:.9375rem;color:var(--texto-suave);margin:0} .nota-tecnica{ margin-top:28px; background:var(--branco); border:1px solid var(--borda); border-left:4px solid var(--teal-cta); border-radius:var(--r-sm); padding:22px 24px; } .nota-tecnica__titulo{font-size:1.0625rem;color:var(--navy);margin-bottom:8px} .nota-tecnica p{margin:0;color:var(--texto-suave);font-size:.9375rem} .nota-tecnica strong{color:var(--texto)} /* ---------- Cidades ---------- */ .cidades{display:flex;flex-wrap:wrap;gap:10px} .cidade{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#DDE4F2; padding:9px 15px;border-radius:999px; font-size:.9375rem;font-weight:600; } .cidade--forte{ background:rgba(32,176,144,.16); border-color:rgba(32,176,144,.45); color:#8FE3CA; } .cidades__legenda{ display:flex;align-items:center;gap:8px; margin:18px 0 0;font-size:.875rem;color:#9AA6C4; } .ponto{ width:11px;height:11px;border-radius:50%;flex:none; background:rgba(32,176,144,.30);border:1px solid rgba(32,176,144,.65); } /* ---------- Obras ---------- */ .obras{display:grid;grid-template-columns:1fr;gap:22px} .obra{ background:var(--branco);border:1px solid var(--borda);border-radius:var(--r); overflow:hidden;box-shadow:var(--sombra); display:flex;flex-direction:column; } /* Placeholder do portfólio — puro CSS, 0KB. A proporção fixa (4/3) já reserva o espaço da foto real: trocar por com width/height não vai gerar CLS. */ .obra__foto{ aspect-ratio:4/3; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; background: linear-gradient(135deg,rgba(48,160,216,.10),rgba(32,176,144,.10)), linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%); color:#9AA6C4; /* AA sobre o navy do placeholder — #6E7CA8 dava só 3,7:1 */ position:relative;overflow:hidden; } .obra__foto::before{ content:"";position:absolute;inset:0; background-image: linear-gradient(90deg,rgba(140,180,230,.10) 1px,transparent 1px), linear-gradient(rgba(140,180,230,.08) 1px,transparent 1px); background-size:64px 100%,100% 64px; } .obra__foto svg,.obra__foto span{position:relative} .obra__foto span{ font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; } .obra__corpo{padding:22px 22px 24px;flex:1} .obra__local{ font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--teal-cta);margin:0 0 6px; } .obra__titulo{font-size:1.125rem;color:var(--navy);margin-bottom:8px;line-height:1.25} .obra__texto{font-size:.9375rem;color:var(--texto-suave);margin:0} /* ---------- Primeiro contato ---------- */ .contato-grade{display:grid;grid-template-columns:1fr;gap:40px} /* Painel do primeiro contato: lista + botão como uma peça só. */ .enviar-painel{ background:var(--branco); border:1px solid var(--borda); border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; } .enviar{display:grid} .enviar__item{ display:flex;gap:14px;align-items:flex-start; padding:18px 20px; border-bottom:1px solid var(--borda); } /* o painel de ação já traz border-top — evita filete duplo */ .enviar__item:last-child{border-bottom:0} .enviar__num{ width:30px;height:30px;flex:none;border-radius:50%; background:var(--navy);color:var(--branco); display:grid;place-items:center; font-size:.875rem;font-weight:800; margin-top:2px; } .enviar__corpo{min-width:0} .enviar__titulo{font-size:1.0625rem;color:var(--navy);margin-bottom:2px} .enviar__texto{font-size:.9375rem;color:var(--texto-suave);margin:0} .enviar__texto strong{color:var(--texto)} .enviar__acao{ padding:20px; background:var(--fundo-claro); border-top:1px solid var(--borda); } .enviar__acao .btn{width:100%} .enviar__dica{ margin:12px 0 0;text-align:center; font-size:.8125rem;color:var(--texto-suave); } .passos{ background:var(--navy);color:var(--branco); border-radius:var(--r);padding:28px 24px; align-self:start; } .passos__titulo{font-size:1.125rem;color:var(--branco);margin-bottom:18px} .passos__lista{ list-style:none;margin:0;padding:0; display:grid;gap:14px;counter-reset:passo; } .passo{ position:relative;padding-left:30px; font-size:.9375rem;color:#C7D0E0;line-height:1.5; counter-increment:passo; } .passo::before{ content:counter(passo); position:absolute;left:0;top:2px; width:20px;height:20px;border-radius:50%; background:rgba(32,176,144,.18);border:1px solid rgba(32,176,144,.5); color:var(--teal); font-size:.6875rem;font-weight:800; display:grid;place-items:center; } .passo strong{color:var(--branco);font-weight:700} .passos__pgto{ margin:20px 0 0;padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:.875rem;color:#9AA6C4;line-height:1.5; } .passos__pgto strong{color:var(--teal)} /* ---------- Marcas ---------- */ .marcas{display:grid;grid-template-columns:1fr;gap:16px} .marca-item{ background:var(--fundo-claro);border:1px solid var(--borda); border-radius:var(--r-sm);padding:20px 22px; } .marca-item__nome{font-size:1.0625rem;color:var(--navy);margin-bottom:4px} .marca-item__texto{font-size:.9375rem;color:var(--texto-suave);margin:0} .selo{ margin-top:24px; display:flex;gap:16px;align-items:flex-start; background:var(--navy);color:var(--branco); border-radius:var(--r);padding:24px; } .selo__icone{ width:48px;height:48px;flex:none;border-radius:12px; background:rgba(32,176,144,.16);color:var(--teal); display:grid;place-items:center; } .selo__titulo{font-size:1.0625rem;color:var(--branco);margin-bottom:6px} .selo__texto{font-size:.9375rem;color:#C7D0E0;margin:0} .selo__texto strong{color:var(--teal);font-weight:700} /* ---------- Depoimentos (seção comentada no HTML; estilos prontos) ---------- */ .depoimentos{display:grid;grid-template-columns:1fr;gap:18px} .depoimento{ background:var(--branco);border:1px solid var(--borda); border-radius:var(--r);padding:24px;box-shadow:var(--sombra); } .depoimento__texto{ margin:0 0 14px;font-size:1rem;color:var(--texto);line-height:1.6; font-style:italic; } .depoimento__texto::before{content:"“"} .depoimento__texto::after{content:"”"} .depoimento__autor{margin:0;font-weight:800;color:var(--navy);font-size:.9375rem} .depoimento__autor span{ display:block;font-weight:500;color:var(--texto-suave);font-size:.8125rem; } /* ---------- Rodapé ---------- */ .rodape{ background:var(--navy-900);color:#C7D0E0; padding:56px 0 32px; border-top:4px solid var(--teal-cta); } .rodape__grade{display:grid;grid-template-columns:1fr;gap:36px} .marca--rodape{margin-bottom:14px} .marca--rodape .marca__selo{width:52px;height:52px;border-radius:13px} .marca--rodape .marca__nome{font-size:1.1875rem;color:var(--branco)} .rodape__slogan{color:var(--teal);font-style:italic;font-weight:600;margin:0 0 10px} .rodape__texto{font-size:.9375rem;color:#9AA6C4;max-width:42ch;margin-bottom:18px} .rodape__titulo{ font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--teal);margin:0 0 14px; } .rodape__titulo--esp{margin-top:26px} .rodape__endereco{font-style:normal;font-size:.9375rem;line-height:1.7;margin-bottom:12px} .rodape__contatos{display:grid;gap:4px} .rodape__link{ display:inline-flex;align-items:center;gap:7px; min-height:44px; color:#C7D0E0;text-decoration:none;font-size:.9375rem; border-bottom:1px solid transparent; } .rodape__link:hover{color:var(--branco);border-bottom-color:rgba(255,255,255,.4)} .rodape__link--forte{color:var(--teal);font-weight:700} .rodape__link--forte:hover{color:#8FE3CA} .rodape__horario{display:grid;gap:6px;font-size:.9375rem} .rodape__horario li{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:space-between;max-width:32ch} .rodape__horario span{color:#9AA6C4} .rodape__horario strong{color:var(--branco);font-weight:600} .redes{display:flex;gap:10px} .rede{ width:44px;height:44px;border-radius:11px; display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); color:#C7D0E0; transition:background-color .18s ease,color .18s ease,border-color .18s ease; } .rede:hover{background:rgba(32,176,144,.18);border-color:rgba(32,176,144,.5);color:var(--teal)} .rodape__base{ margin-top:40px;padding-top:24px; border-top:1px solid rgba(255,255,255,.10); font-size:.8125rem;color:#8592B4; } .rodape__base p{margin:0 0 8px} .rodape__cidades{line-height:1.6;max-width:92ch} /* ---------- Animação de entrada ---------- Progressive enhancement puro: o conteúdo é visível por padrão e a animação só existe onde o navegador tem scroll-driven animations (Chrome/Edge). NÃO usar opacity:0 + classe via JS: se o JS não revelar — aba aberta em segundo plano, rolagem rápida, salto por âncora — a seção some para sempre. Numa página de captação, enfeite não pode esconder conteúdo. */ @media (prefers-reduced-motion:no-preference){ @supports (animation-timeline:view()){ .destaque,.obra,.servico,.marca-item,.selo,.passos,.enviar-painel,.nota-tecnica{ animation:revelar linear both; animation-timeline:view(); /* termina cedo (30% da entrada) para nada ficar a meio caminho em elementos perto do fim da página, que param de rolar. */ animation-range:entry 0% entry 30%; } @keyframes revelar{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } } } /* ========================================================================== Breakpoints — mobile-first (min-width). Ver .claude/skills/mobile-first.md ========================================================================== */ @media (min-width:768px){ .secao{padding:80px 0} .secao__cta .btn{width:auto} .destaques{grid-template-columns:repeat(2,1fr);gap:22px} .servicos{grid-template-columns:repeat(2,1fr)} .obras{grid-template-columns:repeat(3,1fr);gap:20px} .marcas{grid-template-columns:repeat(3,1fr)} .depoimentos{grid-template-columns:repeat(3,1fr)} .contato-grade{grid-template-columns:1fr;gap:44px} .rodape__grade{grid-template-columns:1fr 1fr;gap:40px} .selo{padding:28px 30px} } @media (min-width:1024px){ .secao{padding:96px 0} .destaques{grid-template-columns:repeat(3,1fr)} .servicos{grid-template-columns:repeat(4,1fr)} .contato-grade{grid-template-columns:1.15fr .85fr;gap:56px} .passos{padding:32px 30px;position:sticky;top:96px} .rodape__grade{grid-template-columns:1.4fr 1fr 1fr;gap:44px} .rodape{padding:72px 0 32px} } /* ---------- Preferências do usuário ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---------- Impressão ---------- */ @media print{ .barra-zap,.cabecalho .btn,.navegacao,.secao__cta{display:none} body{padding-bottom:0;color:#000} .secao--navy,.passos,.selo,.rodape{background:#fff !important;color:#000 !important} }