, então também perdia pra #lp p. */ #lp .faixa { color: var(--rose); } /* ========================================================================= Refino ========================================================================= */ /* Os cards foram desenhados quando as descrições eram longas. Com o texto curto, min-height + justify-end viraram buraco de ar no topo. */ #lp .svc { min-height: 0; justify-content: flex-start; gap: 6px; padding: 28px; } #lp .svc:first-child { min-height: 0; padding: clamp(32px, 4vw, 52px); } #lp .svc h3 { margin-top: 0; } #lp .svc:first-child h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } #lp .svc:first-child p { font-size: 1rem; } /* Bodoni é didone: em corpo pequeno as hastes finas somem. Títulos curtos de apoio voltam pra Karla; o display fica só onde tem tamanho pra sustentar. */ #lp .steps strong, #lp .faq summary, #lp .ben h3, #lp .type dt { font-family: var(--body); font-weight: 500; letter-spacing: 0; } #lp .faq summary { font-size: 1.02rem; } #lp .ben h3 { font-size: 1rem; letter-spacing: .01em; } #lp .steps strong { font-size: 1rem; } #lp h2 { font-weight: 400; text-wrap: balance; } /* Tipos: a foto era um selo pequeno ao lado de uma lista alta. Agora ela acompanha a coluna em retrato. */ .tipos-wrap { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } /* Como funciona: 4 passos curtos empilhados deixavam metade da tela vazia. Em telas largas viram uma faixa horizontal e o trilho de luz acompanha. */ @media (min-width: 861px) { .steps { max-width: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .steps::before { left: 15px; right: 15px; top: 15px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--sand) 10%, var(--sand) 90%, transparent); transform-origin: left; } .js-motion .steps::before { transform: scaleX(0); transition: transform 1s var(--ease-out); } .js-motion .steps.in::before { transform: scaleX(1); } .steps li { padding: 0; } .steps .n { position: static; margin-bottom: 18px; } .steps strong { margin-bottom: 6px; } /* O FAQ ficava encostado à esquerda com um vazio enorme à direita. */ .faq { max-width: 900px; margin-inline: auto; } #faq h2 { text-align: center; } } /* Ritmo: seções densas respiram menos que as de respiro. */ #servicos { padding-top: clamp(56px, 7vw, 104px); } #tipos { padding-block: clamp(56px, 7vw, 104px); } #como-funciona { padding-block: clamp(64px, 8vw, 112px); } #faq { padding-block: clamp(64px, 8vw, 116px); } #beneficios { padding-bottom: clamp(56px, 7vw, 96px); } /* ========================================================================= Correções: marca, espaçamento e alinhamento ========================================================================= */ /* A marca agora é o SD.png original, inteiro, com o arco completo. Antes era um recorte meu espremido num quadrado, cortando o arco nas laterais. Sobre claro entra a versão recolorida em vinho (mesmo alpha), sobre o hero escuro a rosé original. */ .sw-brand__mark, :root.past-hero .sw-brand__mark { width: 40px !important; height: 40px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 0 !important; box-shadow: none !important; } .sw-brand__mark { background-image: url('../img/selo-rose.png') !important; } :root.past-hero .sw-brand__mark { background-image: url('../img/selo-vinho.png') !important; } /* ESPAÇAMENTO: cada seção tinha 128px em cima e embaixo, então o vão entre duas seções era 256px de nada. As regras de ritmo que escrevi antes usavam `#servicos`, que perde para `#lp section` (id+elemento). Corrigido aqui com a especificidade certa. */ #lp section { padding-block: clamp(40px, 4.6vw, 62px); } #lp section#beneficios { padding-top: clamp(44px, 5vw, 72px); } #lp section#orcamento { padding-block: clamp(56px, 6.4vw, 88px); } #lp section#tipos { padding-block: clamp(44px, 5vw, 70px); } /* O texto da faixa ficava preso à esquerda numa coluna alta, desalinhado do grid de fotos ao lado. */ .amb-faixa__txt { align-self: center; } @media (max-width: 860px) { .amb-faixa__txt { text-align: center; } .amb-faixa__txt .rule { margin-inline: auto; } .amb-faixa__txt p br { display: none; } } /* ========================================================================= Alinhamento e vazios Regra única: todo conteúdo de seção alinha à ESQUERDA, na mesma coluna. Centralizado só no CTA final e no bloco de benefícios, que são blocos de destaque e não de leitura. Antes cada seção decidia sozinha e a página parecia torta. ========================================================================= */ /* O FAQ estava centralizado enquanto as seções vizinhas alinhavam à esquerda. */ @media (min-width: 861px) { .faq { max-width: 900px; margin-inline: 0; } #faq h2 { text-align: left; } } /* A foto de tipos era sticky: a lista tem 9 itens, a foto travava no topo e deixava uma coluna vazia embaixo dela. Sem sticky, ela acompanha o bloco. */ .tipos-wrap { align-items: stretch; } @media (min-width: 861px) { } /* Como funciona: os 4 passos são baixos e sobrava um vão antes do FAQ. */ #lp section#como-funciona { padding-bottom: clamp(36px, 4vw, 54px); } /* O card escuro de serviços ocupava a linha toda com o texto em um terço. Limitar a medida deixa a massa de texto proporcional ao card. */ #lp .svc:first-child p { max-width: 52ch; } /* CTA final: a linha de apoio quebrava desbalanceada. */ .cta-final .lead { margin-inline: auto; text-wrap: balance; } /* ------------------------------------------------------------------------- Vazios que sobraram ------------------------------------------------------------------------- */ /* O card destaque ocupa a linha inteira mas o texto vivia num terço dela, deixando dois terços de vinho vazio. Título e descrição passam a dividir a largura. */ @media (min-width: 861px) { #lp .svc:first-child { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(24px, 4vw, 64px); } #lp .svc:first-child h3 { margin: 0; } #lp .svc:first-child p { max-width: none; } } /* A coluna do texto da faixa era estreita e quebrava em três linhas curtas com ar embaixo. */ .amb-faixa { grid-template-columns: minmax(230px, 1fr) 2.6fr; } /* A foto de tipos, com height:100%, esticava junto com uma lista de 9 itens e virava uma tira alta e estreita. */ @media (min-width: 861px) { } /* Correção: a regra de colunas da faixa foi escrita sem media query e passou por cima do empilhamento mobile declarado antes. Reafirmado aqui. */ @media (max-width: 860px) { .amb-faixa { grid-template-columns: 1fr; gap: 22px; } .amb-faixa__grid { grid-template-columns: repeat(2, 1fr); } .amb-faixa__txt { text-align: center; align-self: auto; } .amb-faixa__txt p { max-width: 22ch; margin-inline: auto; } } @media (min-width: 861px) { .amb-faixa__txt p { max-width: 15ch; } } /* Os links do rodapé apontam para #servicos, #tipos etc. Sem isto, o topbar fixo cobre o topo da seção ao chegar pela âncora. */ #lp section { scroll-margin-top: 88px; } /* ------------------------------------------------------------------------- 1) Texto da faixa centralizado em TODAS as larguras (antes só no mobile). 2) O vão entre o fim da faixa vinho e o título seguinte estava em 124px. ------------------------------------------------------------------------- */ .amb-faixa__txt { text-align: center; align-self: center; } .amb-faixa__txt .rule { margin-inline: auto; } @media (min-width: 861px) { .amb-faixa__txt p { max-width: 18ch; margin-inline: auto; } } #lp section#beneficios { padding-bottom: clamp(20px, 2.2vw, 30px); } #lp section#servicos { padding-top: clamp(28px, 3vw, 40px); } /* ========================================================================= Tipos em grid de cards (substitui a lista dt/dd) ========================================================================= */ .tipos-grid { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(12px, 1.4vw, 18px); } .tipo { margin: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; padding: 14px 14px 18px; transition: transform .25s, background .25s; } .tipo__fig { margin-bottom: 14px; } .tipo__fig img, .tipo .ph--tipo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; } /* Placeholder claro: a seção é clara, o tracejado rosé de antes some aqui. */ .ph--tipo { display: grid; place-items: center; text-align: center; line-height: 1.3; background: repeating-linear-gradient(45deg, rgba(10,26,47,.05) 0 10px, transparent 10px 20px); border: 1px dashed rgba(10,26,47,.22); color: rgba(10,26,47,.5); font-size: .72rem; } #lp .tipo h3 { font-family: var(--body); font-weight: 500; font-size: .98rem; margin: 0 0 4px; } #lp .tipo p { margin: 0; font-size: .84rem; line-height: 1.45; } @media (max-width: 560px) { .tipos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .tipo { padding: 10px 10px 14px; } #lp .tipo p { font-size: .78rem; } } /* Nove tipos em grid davam 5 + 4, com um buraco à direita na última linha. Flex com wrap centraliza a linha incompleta. */ .tipos-grid { display: flex; flex-wrap: wrap; justify-content: center; } .tipos-grid .tipo { flex: 0 1 calc(20% - 15px); min-width: 190px; } @media (max-width: 1100px) { .tipos-grid .tipo { flex-basis: calc(25% - 14px); } } @media (max-width: 860px) { .tipos-grid .tipo { flex-basis: calc(33.333% - 12px); } } @media (max-width: 560px) { .tipos-grid .tipo { flex-basis: calc(50% - 6px); min-width: 0; } } /* ========================================================================= Momento focal do motion Cada quadro da faixa abre do centro para os lados, em sequência, como as cortinas do hero. É o único movimento autoral da página; o resto é apoio. (O focal anterior vivia na seção Ambientes, que foi substituída.) ========================================================================= */ .js-motion .abre > li > img, .js-motion .abre > li > .ph { clip-path: inset(0 50% 0 50%); transition: clip-path .85s var(--ease-out); } .js-motion .abre.in > li > img, .js-motion .abre.in > li > .ph { clip-path: inset(0 0 0 0); } .js-motion .abre.in > li:nth-child(1) > * { transition-delay: 0ms; } .js-motion .abre.in > li:nth-child(2) > * { transition-delay: 110ms; } .js-motion .abre.in > li:nth-child(3) > * { transition-delay: 220ms; } .js-motion .abre.in > li:nth-child(4) > * { transition-delay: 330ms; } @media (prefers-reduced-motion: reduce) { .js-motion .abre > li > img, .js-motion .abre > li > .ph { clip-path: none; transition: none; } } /* ========================================================================= Correções da auditoria de motion ========================================================================= */ /* [ALTA] Hover com movimento não pode valer no toque: o tap dispara um hover falso e o card se desloca sob o dedo. Gated por ponteiro fino. */ @media (hover: hover) and (pointer: fine) { .svc:hover { transform: translateY(-3px); } .tipo:hover { transform: translateY(-3px); background: #E6DDD1; } .btn:hover { transform: translateY(-2px); background: #6F97CC; } } /* Fora do @media o hover não move nada. Sobra só a mudança de cor, que é inofensiva no toque. */ .svc, .tipo, .btn { transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-hover); } /* [MÉDIA] Press feedback: os CTAs não davam nenhum retorno ao toque. */ .btn:active, .sw-topcta:active, .foot ul li a:active { transform: scale(.97); transition: transform 160ms var(--ease-out); } /* [MÉDIA] O topbar trocava de tema com corte seco ao passar o hero. */ .sw-topbar::after, .sw-brand, .sw-topcta, .sw-brand__mark { transition: background-color 220ms var(--ease-hover), color 220ms var(--ease-hover), background-image 220ms var(--ease-hover); } /* [BAIXA] FAQ abria teleportando. `block-size: auto` só é animável com interpolate-size, e ::details-content é o alvo certo — o @supports garante que navegadores sem suporte fiquem no comportamento atual, sem quebrar. */ @supports selector(::details-content) { :root { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete; } .faq details[open]::details-content { block-size: auto; } } .faq summary::after { transition: transform 200ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { .svc, .tipo, .btn, .sw-topbar::after, .sw-brand, .sw-topcta { transition: none; } .btn:active, .sw-topcta:active, .foot ul li a:active { transform: none; } @supports selector(::details-content) { .faq details::details-content { transition: none; } } } /* ========================================================================= Galeria de tipos em duas fileiras contínuas Cada trilho tem o conteúdo duplicado; a animação percorre exatamente 50%, que é uma cópia inteira, então o ponto final é idêntico ao inicial e o loop não tem salto. Linear porque movimento constante com aceleração parece defeito, não estilo. ========================================================================= */ .galeria { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: clamp(12px, 1.4vw, 18px); /* esmaece as bordas pra fileira não "cortar" o card no limite da tela */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .galeria__linha { overflow: hidden; } .galeria__trilho { display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content; margin: 0; padding: 0; list-style: none; } /* Sem @keyframes: quem move o trilho é o JS, medindo o ciclo real. A animação de CSS deslocava -50% do trilho, mas o ciclo certo é "6 cards + 6 espaços". Com `gap` no flex existem 11 espaços e não 12, então -50% erra meio espaço por volta (5px no celular, 9px no desktop) e a emenda desalinha a cada ciclo. Medindo `offsetLeft` do sétimo card, a conta fecha em qualquer largura e com qualquer gap. */ .galeria .tipo { flex: 0 0 clamp(200px, 21vw, 262px); margin: 0; } /* A pausa no ponteiro e sob o dedo agora é o JS que faz, junto com o resto do movimento. */ @media (max-width: 560px) { .galeria .tipo { flex-basis: 60vw; } } @media (prefers-reduced-motion: reduce) { /* Sem movimento contínuo: as fileiras viram faixas roláveis pelo usuário. */ .galeria__trilho { animation: none; } .galeria__linha { overflow-x: auto; scrollbar-width: thin; } .galeria { -webkit-mask-image: none; mask-image: none; } } /* ========================================================================= Hero: linha de apoio em caixa alta com traço, no estilo da referência ========================================================================= */ .sw-copy__body { margin-top: 22px !important; font-family: var(--body); font-size: clamp(.76rem, 1.05vw, .86rem) !important; letter-spacing: .18em; text-transform: uppercase; line-height: 1.9 !important; color: rgba(244,241,236,.9) !important; max-width: 26ch !important; } /* O traço fecha o bloco, como no material de referência. */ .sw-copy__body::after { content: ""; display: block; width: 66px; height: 1px; margin-top: 26px; background: linear-gradient(90deg, var(--rose), rgba(216,180,120,.15)); } @media (max-width: 860px) { .sw-copy__body { letter-spacing: .14em; max-width: 22ch !important; margin-top: 16px !important; } .sw-copy__body::after { margin-top: 18px; width: 52px; } } /* ========================================================================= Ajustes de mobile ========================================================================= */ @media (max-width: 860px) { /* [1] O CTA do topo é o botão principal da página e media 123x30. Sobe para 44px de altura, que é o alvo confortável no iOS. */ .sw-topcta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px !important; font-size: .82rem !important; } .sw-brand { min-height: 44px; display: flex; align-items: center; } /* [2] Os links do rodapé encostavam um no outro (gap 0). O mínimo é 8px, senão o dedo acerta o vizinho. */ .foot ul li { margin-bottom: 8px; } .foot ul li:last-child { margin-bottom: 0; } .foot ul li a { padding: 9px 0; display: inline-block; } /* O crédito media 26x14: alvo pequeno demais para o dedo. */ .foot .base a { display: inline-block; padding: 8px 4px; } /* [3] Corpo dos cards estava em 12.48px, abaixo do legível no celular. */ #lp .tipo p { font-size: .875rem; line-height: 1.5; } #lp .tipo h3 { font-size: 1rem; } .faixa { font-size: .8rem; padding: 12px 22px; } /* [4] Densidade: a galeria mostrava 60vw por card, então quase nada do segundo aparecia e ninguém percebia que ela desliza. */ .galeria .tipo { flex-basis: 68vw; } } /* ========================================================================= Rodapé no celular: o mínimo que serve A lista de serviços repete a seção que está logo acima e só gera rolagem. Fica o que alguém procura no rodapé de fato: como falar e onde atende. ========================================================================= */ @media (max-width: 860px) { .foot { padding: 30px clamp(16px, 5vw, 64px) 18px; } .foot .wrap { grid-template-columns: 1fr; gap: 18px; } .foot .wrap > :first-child { grid-column: auto; } .foot__col--servicos { display: none; } .foot__logo { width: 132px; margin-bottom: 10px; } .foot p { font-size: .84rem; line-height: 1.5; margin-bottom: 0; } .foot .label { display: none; } /* Telefone vira a ação principal, no tamanho de alvo confortável. */ .foot__col--contato ul { line-height: 1.4; } .foot__fone { margin-bottom: 10px; } .foot__fone a { font-size: 1.05rem; font-weight: 500; color: var(--rose); display: inline-flex; align-items: center; min-height: 44px; padding: 0; } /* Cidades em linha corrida, separadas por ponto, em vez de uma por linha. */ .foot__col--contato ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; } .foot__fone { flex: 0 0 100%; } .foot__cidade { font-size: .8rem; color: rgba(216,180,120,.62); } .foot__cidade + .foot__cidade::before { content: "· "; color: rgba(216,180,120,.38); } .foot ul li { margin-bottom: 0; } .foot .base { margin-top: 18px; padding-top: 12px; font-size: .72rem; gap: 8px; } } /* Rodapé mobile, segunda passada: a linha "cortinas e persianas sob medida, papel de parede e piso laminado" repete o que a página inteira já disse. No celular o rodapé serve para telefone e cobertura, nada além. */ @media (max-width: 860px) { .foot { padding: 22px clamp(16px, 5vw, 64px) 14px; } .foot .wrap { gap: 12px; } .foot__logo { width: 108px; margin-bottom: 0; } .foot__fone { margin-bottom: 6px; } .foot__fone a { font-size: 1.12rem; min-height: 40px; } .foot__cidade { font-size: .76rem; line-height: 1.6; } .foot .base { margin-top: 14px; padding-top: 10px; font-size: .68rem; } } /* O padding de toque no crédito abria um vão entre "pela" e "ZAYA". Margem negativa compensa sem reduzir a área clicável. */ @media (max-width: 860px) { /* Só vertical: padding horizontal com margem negativa empurrava o texto para fora do container e gerava transbordo no rodapé. */ .foot .base a { padding: 11px 0; margin: -11px 0; } } /* ========================================================================= Quebras de texto `pretty` evita a última linha com uma palavra sozinha em prosa; `balance` distribui as linhas de títulos curtos por igual. ========================================================================= */ #lp p, #lp dd, .foot p, .steps span, .ben p, .tipo p, .room p { text-wrap: pretty; } #lp h2, #lp h3, .faixa, .amb-faixa__txt p, .cta-final .lead, .sw-copy__title { text-wrap: balance; } /* Palavras longas do ramo não podem estourar container estreito no celular. */ @media (max-width: 560px) { #lp h2, #lp h3, .tipo h3 { overflow-wrap: break-word; hyphens: auto; } } /* Respiro entre os blocos de texto e o que vem depois deles. */ #lp .lead { margin-bottom: clamp(20px, 2.6vw, 30px); } .ben h3 { margin-bottom: 6px; } .steps strong { margin-bottom: 5px; } /* Rodapé mobile, arranjo final: logo e telefone dividem a primeira linha, cidades ocupam a segunda inteira. Menos altura, leitura mais organizada. */ @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px; } .foot .wrap > :first-child { grid-column: 1; } .foot__col--contato { grid-column: 2; } .foot__col--contato ul { justify-content: flex-end; text-align: right; } .foot__fone { flex: 0 0 100%; margin-bottom: 2px; } .foot__fone a { min-height: 34px; font-size: 1.05rem; } .foot__cidade { font-size: .72rem; line-height: 1.5; } .foot__logo { width: 96px; } .foot .base { margin-top: 12px; padding-top: 10px; } } /* As cidades quebravam deixando "Juruce e região" sozinha numa terceira linha. Ocupando a largura inteira abaixo da logo e do telefone, cabem em duas. */ @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto auto; justify-content: space-between; row-gap: 12px; } .foot__col--contato { grid-column: 2; } .foot__col--contato ul { display: block; text-align: right; } .foot__fone { margin-bottom: 4px; } .foot__cidade { display: inline; font-size: .72rem; } .foot__cidade + .foot__cidade::before { content: " · "; } } /* Cidades como linha própria de largura total, abaixo de logo e telefone. */ .foot__cidades { font-size: .8rem; color: rgba(216,180,120,.62); margin: 0; } @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto auto; } .foot__cidades { grid-column: 1 / -1; text-align: left; font-size: .74rem; margin-top: 2px; line-height: 1.5; } .foot__col--contato { display: contents; } .foot__col--contato .label { display: none; } .foot__col--contato ul { grid-column: 2; text-align: right; } } /* Desktop: telefone imediatamente à direita da logo; serviços vão para o fim. Antes o contato ficava na terceira coluna, longe da marca. */ @media (min-width: 861px) { .foot .wrap { grid-template-columns: auto auto 1fr; align-items: start; column-gap: clamp(40px, 6vw, 88px); } .foot__col--contato { order: 2; } .foot__col--servicos { order: 3; } .foot__col--contato .label { margin-top: 4px; } .foot__cidades { max-width: 34ch; } } /* No celular o lead media 3 linhas de 326/332/116px: a última com um terço da largura. `pretty` só cuida da última palavra; `balance` reparte as três. O max-width de 56ch resolvia para 514px numa tela de 351, então não limitava nada — no mobile ele passa a ser relativo à coluna. */ @media (max-width: 560px) { #lp .lead { text-wrap: balance; max-width: 100%; } #lp h2 { font-size: clamp(1.68rem, 7.4vw, 2rem); line-height: 1.18; } #lp .lead { margin-bottom: 22px; } } /* O CTA terminava com telefone e cidades, que o rodapé logo abaixo repete. Sem a nota, o bloco fecha no botão e o vão até o rodapé encurta. */ #lp section#orcamento { padding-bottom: clamp(40px, 5vw, 64px); } /* ========================================================================= Galeria: sempre rodando Antes a animação era pausada quando a seção saía da tela e retomada ao voltar, e `will-change` promovia o trilho a camada de GPU. As duas coisas davam o mesmo defeito no iPhone: subindo e descendo a página, a fileira voltava parada ou em branco, e parecia bug. `will-change` num trilho de 3.000px por 290px vira uma camada de ~30MB por fileira num aparelho 3x. Duas fileiras passam de 60MB, e sob pressão de memória o iOS descarta a camada — fica branco até algo forçar repintura. Sem a promoção forçada, o navegador gerencia sozinho e em pedaços. A animação agora nunca para por scroll. Só pausa com a aba em segundo plano (não adianta animar o que ninguém vê) e sob o dedo, pra dar tempo de ler o card. ========================================================================= */ /* Nada de `will-change`: um trilho de 3.000x290 vira camada de ~30MB por fileira num aparelho 3x, e sob pressão de memória o iOS descarta a camada e a fileira aparece em branco. Sem a promoção forçada o navegador gerencia sozinho, em pedaços. */ @media (max-width: 860px) { /* Máscara custa composição por pixel numa área animada e é o efeito que mais pesa aqui. No celular sai; a borda reta não faz falta. */ .galeria { -webkit-mask-image: none; mask-image: none; } /* Card menor = trilho mais estreito = camada menor para o aparelho segurar. */ .galeria .tipo { flex-basis: 62vw; } .galeria__trilho { gap: 10px; } } /* Fora da tela o navegador pode pular o trabalho de layout e pintura. O tamanho declarado evita que a barra de rolagem pule. `#tipos` FICA DE FORA. Enquanto o navegador pula a seção, ele também pausa as animações dela e nem reporta o estilo calculado direito: as duas fileiras ficavam `paused` mesmo com a galeria já marcada como ativa, e só destravavam quando a seção terminava de renderizar. Em rede lenta isso eram segundos de fileira parada. Pular a pintura de uma seção que é feita de imagem animada custa mais do que economiza. */ @media (max-width: 860px) { #lp section#faq, .foot { content-visibility: auto; } #lp section#faq { contain-intrinsic-size: auto 700px; } .foot { contain-intrinsic-size: auto 160px; } } /* ========================================================================= Marca do topo um pouco maior (pedido do cliente) Desktop tem folga de sobra; no celular sobram 62px até o botão, então o aumento ali é menor para a marca não encostar no CTA. ========================================================================= */ .sw-brand__name { font-size: 1.24rem !important; } .sw-brand__mark, :root.past-hero .sw-brand__mark { width: 46px !important; height: 46px !important; } @media (max-width: 860px) { .sw-brand__name { font-size: 1.12rem !important; } .sw-brand__mark, :root.past-hero .sw-brand__mark { width: 42px !important; height: 42px !important; } } .sw-topcta { transition: none; } .btn:active, .sw-topcta:active, .foot ul li a:active { transform: none; } @supports selector(::details-content) { .faq details::details-content { transition: none; } } } /* ========================================================================= Galeria de tipos em duas fileiras contínuas Cada trilho tem o conteúdo duplicado; a animação percorre exatamente 50%, que é uma cópia inteira, então o ponto final é idêntico ao inicial e o loop não tem salto. Linear porque movimento constante com aceleração parece defeito, não estilo. ========================================================================= */ .galeria { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: clamp(12px, 1.4vw, 18px); /* esmaece as bordas pra fileira não "cortar" o card no limite da tela */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .galeria__linha { overflow: hidden; } .galeria__trilho { display: flex; gap: clamp(12px, 1.4vw, 18px); width: max-content; margin: 0; padding: 0; list-style: none; } /* Sem @keyframes: quem move o trilho é o JS, medindo o ciclo real. A animação de CSS deslocava -50% do trilho, mas o ciclo certo é "6 cards + 6 espaços". Com `gap` no flex existem 11 espaços e não 12, então -50% erra meio espaço por volta (5px no celular, 9px no desktop) e a emenda desalinha a cada ciclo. Medindo `offsetLeft` do sétimo card, a conta fecha em qualquer largura e com qualquer gap. */ .galeria .tipo { flex: 0 0 clamp(200px, 21vw, 262px); margin: 0; } /* A pausa no ponteiro e sob o dedo agora é o JS que faz, junto com o resto do movimento. */ @media (max-width: 560px) { .galeria .tipo { flex-basis: 60vw; } } @media (prefers-reduced-motion: reduce) { /* Sem movimento contínuo: as fileiras viram faixas roláveis pelo usuário. */ .galeria__trilho { animation: none; } .galeria__linha { overflow-x: auto; scrollbar-width: thin; } .galeria { -webkit-mask-image: none; mask-image: none; } } /* ========================================================================= Hero: linha de apoio em caixa alta com traço, no estilo da referência ========================================================================= */ .sw-copy__body { margin-top: 22px !important; font-family: var(--body); font-size: clamp(.76rem, 1.05vw, .86rem) !important; letter-spacing: .18em; text-transform: uppercase; line-height: 1.9 !important; color: rgba(244,241,236,.9) !important; max-width: 26ch !important; } /* O traço fecha o bloco, como no material de referência. */ .sw-copy__body::after { content: ""; display: block; width: 66px; height: 1px; margin-top: 26px; background: linear-gradient(90deg, var(--rose), rgba(216,180,120,.15)); } @media (max-width: 860px) { .sw-copy__body { letter-spacing: .14em; max-width: 22ch !important; margin-top: 16px !important; } .sw-copy__body::after { margin-top: 18px; width: 52px; } } /* ========================================================================= Ajustes de mobile ========================================================================= */ @media (max-width: 860px) { /* [1] O CTA do topo é o botão principal da página e media 123x30. Sobe para 44px de altura, que é o alvo confortável no iOS. */ .sw-topcta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px !important; font-size: .82rem !important; } .sw-brand { min-height: 44px; display: flex; align-items: center; } /* [2] Os links do rodapé encostavam um no outro (gap 0). O mínimo é 8px, senão o dedo acerta o vizinho. */ .foot ul li { margin-bottom: 8px; } .foot ul li:last-child { margin-bottom: 0; } .foot ul li a { padding: 9px 0; display: inline-block; } /* O crédito media 26x14: alvo pequeno demais para o dedo. */ .foot .base a { display: inline-block; padding: 8px 4px; } /* [3] Corpo dos cards estava em 12.48px, abaixo do legível no celular. */ #lp .tipo p { font-size: .875rem; line-height: 1.5; } #lp .tipo h3 { font-size: 1rem; } .faixa { font-size: .8rem; padding: 12px 22px; } /* [4] Densidade: a galeria mostrava 60vw por card, então quase nada do segundo aparecia e ninguém percebia que ela desliza. */ .galeria .tipo { flex-basis: 68vw; } } /* ========================================================================= Rodapé no celular: o mínimo que serve A lista de serviços repete a seção que está logo acima e só gera rolagem. Fica o que alguém procura no rodapé de fato: como falar e onde atende. ========================================================================= */ @media (max-width: 860px) { .foot { padding: 30px clamp(16px, 5vw, 64px) 18px; } .foot .wrap { grid-template-columns: 1fr; gap: 18px; } .foot .wrap > :first-child { grid-column: auto; } .foot__col--servicos { display: none; } .foot__logo { width: 132px; margin-bottom: 10px; } .foot p { font-size: .84rem; line-height: 1.5; margin-bottom: 0; } .foot .label { display: none; } /* Telefone vira a ação principal, no tamanho de alvo confortável. */ .foot__col--contato ul { line-height: 1.4; } .foot__fone { margin-bottom: 10px; } .foot__fone a { font-size: 1.05rem; font-weight: 500; color: var(--rose); display: inline-flex; align-items: center; min-height: 44px; padding: 0; } /* Cidades em linha corrida, separadas por ponto, em vez de uma por linha. */ .foot__col--contato ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; } .foot__fone { flex: 0 0 100%; } .foot__cidade { font-size: .8rem; color: rgba(216,180,120,.62); } .foot__cidade + .foot__cidade::before { content: "· "; color: rgba(216,180,120,.38); } .foot ul li { margin-bottom: 0; } .foot .base { margin-top: 18px; padding-top: 12px; font-size: .72rem; gap: 8px; } } /* Rodapé mobile, segunda passada: a linha "cortinas e persianas sob medida, papel de parede e piso laminado" repete o que a página inteira já disse. No celular o rodapé serve para telefone e cobertura, nada além. */ @media (max-width: 860px) { .foot { padding: 22px clamp(16px, 5vw, 64px) 14px; } .foot .wrap { gap: 12px; } .foot__logo { width: 108px; margin-bottom: 0; } .foot__fone { margin-bottom: 6px; } .foot__fone a { font-size: 1.12rem; min-height: 40px; } .foot__cidade { font-size: .76rem; line-height: 1.6; } .foot .base { margin-top: 14px; padding-top: 10px; font-size: .68rem; } } /* O padding de toque no crédito abria um vão entre "pela" e "ZAYA". Margem negativa compensa sem reduzir a área clicável. */ @media (max-width: 860px) { /* Só vertical: padding horizontal com margem negativa empurrava o texto para fora do container e gerava transbordo no rodapé. */ .foot .base a { padding: 11px 0; margin: -11px 0; } } /* ========================================================================= Quebras de texto `pretty` evita a última linha com uma palavra sozinha em prosa; `balance` distribui as linhas de títulos curtos por igual. ========================================================================= */ #lp p, #lp dd, .foot p, .steps span, .ben p, .tipo p, .room p { text-wrap: pretty; } #lp h2, #lp h3, .faixa, .amb-faixa__txt p, .cta-final .lead, .sw-copy__title { text-wrap: balance; } /* Palavras longas do ramo não podem estourar container estreito no celular. */ @media (max-width: 560px) { #lp h2, #lp h3, .tipo h3 { overflow-wrap: break-word; hyphens: auto; } } /* Respiro entre os blocos de texto e o que vem depois deles. */ #lp .lead { margin-bottom: clamp(20px, 2.6vw, 30px); } .ben h3 { margin-bottom: 6px; } .steps strong { margin-bottom: 5px; } /* Rodapé mobile, arranjo final: logo e telefone dividem a primeira linha, cidades ocupam a segunda inteira. Menos altura, leitura mais organizada. */ @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto 1fr; align-items: center; gap: 10px 16px; } .foot .wrap > :first-child { grid-column: 1; } .foot__col--contato { grid-column: 2; } .foot__col--contato ul { justify-content: flex-end; text-align: right; } .foot__fone { flex: 0 0 100%; margin-bottom: 2px; } .foot__fone a { min-height: 34px; font-size: 1.05rem; } .foot__cidade { font-size: .72rem; line-height: 1.5; } .foot__logo { width: 96px; } .foot .base { margin-top: 12px; padding-top: 10px; } } /* As cidades quebravam deixando "Juruce e região" sozinha numa terceira linha. Ocupando a largura inteira abaixo da logo e do telefone, cabem em duas. */ @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto auto; justify-content: space-between; row-gap: 12px; } .foot__col--contato { grid-column: 2; } .foot__col--contato ul { display: block; text-align: right; } .foot__fone { margin-bottom: 4px; } .foot__cidade { display: inline; font-size: .72rem; } .foot__cidade + .foot__cidade::before { content: " · "; } } /* Cidades como linha própria de largura total, abaixo de logo e telefone. */ .foot__cidades { font-size: .8rem; color: rgba(216,180,120,.62); margin: 0; } @media (max-width: 860px) { .foot .wrap { grid-template-columns: auto auto; } .foot__cidades { grid-column: 1 / -1; text-align: left; font-size: .74rem; margin-top: 2px; line-height: 1.5; } .foot__col--contato { display: contents; } .foot__col--contato .label { display: none; } .foot__col--contato ul { grid-column: 2; text-align: right; } } /* Desktop: telefone imediatamente à direita da logo; serviços vão para o fim. Antes o contato ficava na terceira coluna, longe da marca. */ @media (min-width: 861px) { .foot .wrap { grid-template-columns: auto auto 1fr; align-items: start; column-gap: clamp(40px, 6vw, 88px); } .foot__col--contato { order: 2; } .foot__col--servicos { order: 3; } .foot__col--contato .label { margin-top: 4px; } .foot__cidades { max-width: 34ch; } } /* No celular o lead media 3 linhas de 326/332/116px: a última com um terço da largura. `pretty` só cuida da última palavra; `balance` reparte as três. O max-width de 56ch resolvia para 514px numa tela de 351, então não limitava nada — no mobile ele passa a ser relativo à coluna. */ @media (max-width: 560px) { #lp .lead { text-wrap: balance; max-width: 100%; } #lp h2 { font-size: clamp(1.68rem, 7.4vw, 2rem); line-height: 1.18; } #lp .lead { margin-bottom: 22px; } } /* O CTA terminava com telefone e cidades, que o rodapé logo abaixo repete. Sem a nota, o bloco fecha no botão e o vão até o rodapé encurta. */ #lp section#orcamento { padding-bottom: clamp(40px, 5vw, 64px); } /* ========================================================================= Galeria: sempre rodando Antes a animação era pausada quando a seção saía da tela e retomada ao voltar, e `will-change` promovia o trilho a camada de GPU. As duas coisas davam o mesmo defeito no iPhone: subindo e descendo a página, a fileira voltava parada ou em branco, e parecia bug. `will-change` num trilho de 3.000px por 290px vira uma camada de ~30MB por fileira num aparelho 3x. Duas fileiras passam de 60MB, e sob pressão de memória o iOS descarta a camada — fica branco até algo forçar repintura. Sem a promoção forçada, o navegador gerencia sozinho e em pedaços. A animação agora nunca para por scroll. Só pausa com a aba em segundo plano (não adianta animar o que ninguém vê) e sob o dedo, pra dar tempo de ler o card. ========================================================================= */ /* Nada de `will-change`: um trilho de 3.000x290 vira camada de ~30MB por fileira num aparelho 3x, e sob pressão de memória o iOS descarta a camada e a fileira aparece em branco. Sem a promoção forçada o navegador gerencia sozinho, em pedaços. */ @media (max-width: 860px) { /* Máscara custa composição por pixel numa área animada e é o efeito que mais pesa aqui. No celular sai; a borda reta não faz falta. */ .galeria { -webkit-mask-image: none; mask-image: none; } /* Card menor = trilho mais estreito = camada menor para o aparelho segurar. */ .galeria .tipo { flex-basis: 62vw; } .galeria__trilho { gap: 10px; } } /* Fora da tela o navegador pode pular o trabalho de layout e pintura. O tamanho declarado evita que a barra de rolagem pule. `#tipos` FICA DE FORA. Enquanto o navegador pula a seção, ele também pausa as animações dela e nem reporta o estilo calculado direito: as duas fileiras ficavam `paused` mesmo com a galeria já marcada como ativa, e só destravavam quando a seção terminava de renderizar. Em rede lenta isso eram segundos de fileira parada. Pular a pintura de uma seção que é feita de imagem animada custa mais do que economiza. */ @media (max-width: 860px) { #lp section#faq, .foot { content-visibility: auto; } #lp section#faq { contain-intrinsic-size: auto 700px; } .foot { contain-intrinsic-size: auto 160px; } } /* ========================================================================= Marca do topo um pouco maior (pedido do cliente) Desktop tem folga de sobra; no celular sobram 62px até o botão, então o aumento ali é menor para a marca não encostar no CTA. ========================================================================= */ .sw-brand__name { font-size: 1.24rem !important; } .sw-brand__mark, :root.past-hero .sw-brand__mark { width: 46px !important; height: 46px !important; } @media (max-width: 860px) { .sw-brand__name { font-size: 1.12rem !important; } .sw-brand__mark, :root.past-hero .sw-brand__mark { width: 42px !important; height: 42px !important; } } /* ========================================================================= Um CTA por vez Passado o hero, o botão do topo e o flutuante pedem a mesma coisa na mesma tela. Quem carrega o pedido no conteúdo é o flutuante, ao alcance do polegar; o topo fica só com a marca. No hero é o contrário: o flutuante ainda não entrou, então o botão do topbar é o único caminho. ========================================================================= */ /* O botão do topo acompanha a página inteira, não só o hero. Ele é a ação principal e fica sempre no mesmo lugar — quem decidir em qualquer ponto da leitura tem onde clicar sem procurar. Some só quando o CTA final entra na tela: ali o botão grande está na frente, e dois pedindo a mesma coisa na mesma tela viram ruído. */ .sw-topcta { transition: opacity .3s var(--ease-out), visibility .3s; } html.cta-a-vista .sw-topcta { opacity: 0; visibility: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .sw-topcta { transition: opacity .2s linear, visibility .2s; } } /* ========================================================================= Serviços, quarta versão — lista tipográfica, sem foto As versões 2 e 3 tinham foto, e por isso pareciam a seção de tipos logo abaixo, que é feita de foto de sala com cortina. Trocar grade por faixa não adiantou: o que se repetia era a imagem, não o arranjo. Sem foto nenhuma, a repetição acaba na raiz e a página ganha um respiro entre dois blocos visuais. Bônus: some o buraco dos serviços que ainda não têm foto, e a seção encolhe bastante no celular. ========================================================================= */ .svclista { list-style: none; margin: clamp(26px, 3.4vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--line); } .svcrow { position: relative; display: grid; grid-template-columns: minmax(46px, 68px) 1fr auto; gap: 0 clamp(12px, 2vw, 28px); align-items: start; padding: clamp(20px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); } .svcrow__num { font-family: var(--body); font-size: .7rem; letter-spacing: .2em; color: var(--wine); padding-top: .55em; } .svcrow__corpo { min-width: 0; } #lp .svcrow h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.32rem, 2.7vw, 2.05rem); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance; } #lp .svcrow p { margin: 0; font-size: clamp(.93rem, 1.4vw, 1.02rem); line-height: 1.55; max-width: 52ch; } /* Os dois últimos são o que sustenta depois da entrega: mesma lista, um tom abaixo. A ausência do link já os separa; o tamanho reforça sem gritar. */ #lp .svcrow--apoio h3 { font-size: clamp(1.1rem, 1.9vw, 1.42rem); } #lp .svcrow--apoio p { color: rgba(10,26,47,.56); } /* Link à direita, no alto da linha, alinhado com o nome do serviço. */ .svcrow__ver { align-self: center; justify-self: end; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 13px 20px; min-height: 46px; border-radius: 999px; border: 1px solid rgba(30,68,112,.32); background: transparent; color: var(--wine); font-family: var(--body); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; transition: background .22s var(--ease-hover), color .22s var(--ease-hover), border-color .22s var(--ease-hover); } .svcrow__seta { transition: transform .25s var(--ease-out); } /* Linha inteira clicável, sem link dentro de link: o ::after se estica sobre a linha. Quem sinaliza continua sendo o botão à direita. */ .svcrow__ver::after { content: ""; position: absolute; inset: 0; } @media (hover: hover) and (pointer: fine) { .svcrow:has(.svcrow__ver:hover) { background: rgba(30,68,112,.035); } .svcrow__ver:hover { background: var(--wine); color: var(--paper); border-color: var(--wine); } .svcrow__ver:hover .svcrow__seta { transform: translateX(3px); } } .svcrow__ver:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; } @media (max-width: 860px) { /* Número sai da coluna própria e encosta no nome: no celular aquela coluna comia 46px de largura útil em toda linha. */ .svcrow { grid-template-columns: 1fr; gap: 0; padding: 20px 0; } .svcrow__num { padding-top: 0; margin-bottom: 8px; display: block; } #lp .svcrow p { max-width: none; } .svcrow__ver { justify-self: end; margin-top: 14px; } } @media (prefers-reduced-motion: reduce) { .svcrow__ver, .svcrow__seta { transition: none; } .svcrow__ver:hover .svcrow__seta { transform: none; } } /* ========================================================================= Par título + subtítulo das seções O subtítulo media 16px no celular contra 14,9px do corpo logo abaixo: 1px de diferença não é hierarquia, é coincidência. Os dois liam como parágrafos soltos em vez de título e linha de apoio. Agora o subtítulo cresce, clareia e encosta no título — os dois viram um bloco só — e o respiro grande fica entre esse bloco e o conteúdo. ========================================================================= */ /* Dois blocos só leem como separados quando o vão entre eles é bem maior que a entrelinha interna deles. Estava 15px de vão contra 8px de branco dentro do subtítulo: razão de 1,9x, e o olho junta tudo num parágrafo só. A régua aqui é ~1,8x o corpo do subtítulo, o que dá 3,5x a entrelinha. */ #lp section > .wrap > h2 { margin-bottom: clamp(26px, 3vw, 34px); line-height: 1.14; } #lp section > .wrap > .lead { font-size: clamp(1.06rem, 2.4vw, 1.25rem); line-height: 1.5; color: rgba(10,26,47,.62); max-width: 46ch; margin-bottom: clamp(30px, 3.6vw, 48px); } @media (max-width: 560px) { #lp section > .wrap > .lead { font-size: 1.06rem; max-width: 100%; } } /* Sem o parágrafo entre os dois, o botão do CTA final encostava no título. O par título+subtítulo quer 10px; título+botão quer bem mais. */ #lp section#orcamento > .wrap > h2 { margin-bottom: clamp(26px, 3vw, 38px); } /* ========================================================================= Ar em volta do cabeçalho das seções O padding-top de serviços era 28px no celular — sobra de quando a seção era uma grade de card com título pequeno. Com o título serifado em 29px logo abaixo da faixa de ambientes, ele nascia colado. Um título grande precisa de espaço antes dele para ler como começo de assunto. Sem isso ele vira só mais uma linha na rolagem. ========================================================================= */ #lp section#servicos { padding-top: clamp(58px, 6.6vw, 96px); } #lp section#tipos { padding-top: clamp(58px, 6.6vw, 96px); } /* A faixa de benefícios virou