/* ========================================================================== Classic Texturas e Grafiatos Home v2. Folha unica, sem framework e sem pre-processador. Ordem: o 17 era a FAQ, que saiu da pagina. Os numeros seguintes ficaram como estavam, para nao invalidar quem procura a secao pelo numero do comentario. 01 variaveis 08 hero e banners 15 avaliacoes google 02 reset 09 faixa de prova 16 lojas 03 tipografia 10 ambiente 18 cta final 04 layout 11 produtos 19 footer 05 botoes 12 cores 20 whatsapp flutuante 06 header e menu 13 duas frentes 20B alvos de toque 07 placeholder .ph 14 obras 20C aviso de cookies 21 responsivo 22 animacao Os blocos @media (max-width: ...) espalhados pelo arquivo sao os ajustes de celular: eles ficam junto do componente que corrigem, e nao no 21, porque a razao de cada um so faz sentido ao lado da regra que ele desfaz. ========================================================================== */ /* -------------------------------------------------------------------------- 01. VARIAVEIS Trocar a paleta aqui muda o site inteiro. -------------------------------------------------------------------------- */ :root { /* paleta da marca */ --areia: #F5F2ED; --areia-escura: #EBE6DE; --tinta: #1C1A17; --tinta-suave: #6B655C; --terracota: #B8552E; --terracota-label: #A34A26; /* so para o label: o da marca nao passa em 12px */ --terracota-escuro: #93411F; --marinho: #16164A; --linha: #D9D2C7; --branco: #FFFFFF; /* derivadas, so para uso interno */ --marinho-escuro: #0F0F35; --terracota-claro: #E8926A; /* terracota so tem contraste sobre o marinho depois de clarear */ --whatsapp: #25D366; --whatsapp-escuro: #1EB456; /* texto sobre fundo escuro */ --sobre-escuro: #F1EEE8; --sobre-escuro-suave: rgba(241, 238, 232, 0.72); --linha-escura: rgba(241, 238, 232, 0.18); /* Vermelho e verde da comparacao revenda x fabrica. Vivem so na secao "Por que a Classic". O vermelho e mais frio e mais escuro que o terracota (#B8552E) de proposito: perto demais e a pessoa le a cor da marca como o lado ruim da comparacao. */ --negado: #A32C22; --negado-fundo: #FBF1EF; --negado-linha: #EFDBD7; --negado-linha-forte: #DCBDB7; --aprovado: #2C6B4F; --aprovado-fundo: #EFF5F1; --aprovado-linha: #D3E4D9; /* tipografia. A Bitter substituiu a Fraunces, que era fonte de display sendo usada de 17px a 88px: nas medidas pequenas as hastes finas dela sumiam. A Bitter e slab, de traco quase constante e altura de x alta, feita para leitura em tela; ela atravessa a faixa inteira sem trocar de desenho. E variavel de 400 a 700, entao continua havendo peso sem virar negrito. A Georgia fica na fila de reserva porque e a serif que mais se aproxima dela entre as que ja existem em qualquer maquina. */ --fonte-titulo: "Bitter", Georgia, "Times New Roman", serif; --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* medidas. Na v2 o respiro vertical cresce em relacao a v1. */ --largura-max: 1240px; --raio: 3px; --borda: 1px solid var(--linha); --secao-y: 72px; /* Sobe junto com a altura do logo, logo abaixo em 06. O header usa isto como min-height, entao um logo maior que a variavel faria a barra crescer sem que a variavel soubesse, e o hero e as ancoras, que descontam por ela, ficariam desalinhados. Mexer em um dos dois pede mexer no outro. */ --header-h: 76px; --gutter: 20px; --transicao: 220ms ease; /* botao responde mais rapido que o resto: 220ms num elemento que a pessoa esta prestes a clicar ja se sente como atraso */ --transicao-btn: 180ms ease; /* Curva unica das animacoes da pagina: sai rapido e chega devagar, sem balanco no fim. E o que da a sensacao de peso leve em vez de "efeito". */ --suave: cubic-bezier(0.16, 1, 0.3, 1); /* ------------------------------------------------------------------------ ELEVACAO A empresa vende relevo, entao a pagina tem relevo. Uma unica fonte de luz, no canto superior esquerdo, e toda sombra cai para baixo e para a direita. Isso vale para a pagina inteira: nao ha sombra com deslocamento negativo em Y, nem sombra para a esquerda, em lugar nenhum desta folha. SOMBRA COLORIDA, NUNCA PRETA, sobre fundo claro. Preto sobre a areia #F5F2ED da cinza sujo, porque tira a saturacao do fundo em vez de escurecer dentro da mesma familia. Todas as sombras de fundo claro sao o marinho da marca, #16164A, com opacidade baixa. CADA NIVEL TEM DUAS SOMBRAS. Uma curta e densa, que e o contato do objeto com a superficie, e uma longa e difusa, que e a luz ambiente contornando ele. Sombra unica sempre parece adesivo: ou fica dura demais na borda ou vira uma mancha sem pe. Quem da o peso e a razao entre as duas. Onde cada nivel entra: 1 o que so precisa descolar do fundo: botao em repouso, swatch, header 2 cartao em repouso: produto, loja, depoimento 3 cartao no hover, e o cartao de texto sobre a foto de ambiente 4 so o comparador grande da secao de obras NENHUMA SOMBRA SOLTA NO RESTO DA FOLHA. Se um box-shadow novo nao sair daqui, ou ele esta errado ou falta um nivel nesta escala. */ --sombra-1: 0 1px 2px rgba(22, 22, 74, 0.04), 0 2px 8px rgba(22, 22, 74, 0.04); --sombra-2: 0 2px 4px rgba(22, 22, 74, 0.05), 0 8px 24px rgba(22, 22, 74, 0.06); --sombra-3: 0 4px 8px rgba(22, 22, 74, 0.06), 0 16px 48px rgba(22, 22, 74, 0.08); --sombra-4: 0 8px 16px rgba(22, 22, 74, 0.08), 0 32px 80px rgba(22, 22, 74, 0.10); /* O header nao cabe em nenhum dos quatro: ele flutua menos que um cartao e mais que um botao em repouso, e o contato dele e um fio de 1px sem blur, porque a barra atravessa a tela inteira e um contato borrado nela viraria faixa cinza. Fica com nivel proprio, mas token, para a folha continuar sem sombra solta. */ --sombra-header: 0 1px 0 rgba(22, 22, 74, 0.06), 0 4px 16px rgba(22, 22, 74, 0.06); /* Os tres controles redondos que boiam sobre conteudo que a folha nao controla: a seta do banner, o pegador do comparador e o botao flutuante do WhatsApp. Nenhum deles sabe o que tem atras: pode cair sobre ceu claro ou sobre parede escura na mesma foto. Por isso ficam acima do nivel 2, que sumiria em cima de metade das fotos. Continua marinho e continua caindo para baixo; so a opacidade sobe. Antes eram tres valores diferentes, 0.18, 0.22 e 0.28, sem motivo nenhum para serem diferentes. */ --sombra-flutuante: 0 2px 4px rgba(22, 22, 74, 0.18), 0 6px 18px rgba(22, 22, 74, 0.16); /* O anel da cor escolhida na cartela. E box-shadow por conveniencia de desenho, e nao elevacao: nao tem deslocamento nem borrao, e um contorno. */ --anel-selecao: 0 0 0 2px var(--tinta); /* SOBRE FUNDO ESCURO A SOMBRA COLORIDA SOME. O marinho a 8% em cima do marinho e o proprio marinho, entao nas secoes escuras a sombra volta a ser preta de verdade, e mais forte, senao nao existe. A escala e a mesma, so que traduzida: a -escura corresponde ao nivel 2, a -escura-4 ao nivel 4 e e do comparador. */ --sombra-escura: 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.25); --sombra-escura-4: 0 8px 16px rgba(0, 0, 0, 0.3), 0 32px 80px rgba(0, 0, 0, 0.25); /* AS QUINAS. A sombra poe o objeto acima da superficie; estas tres linhas dizem que ele tem espessura. Todas sao inset, e por isso nao contam como sombra solta: sao o desenho da propria borda. --luz-quina topo do objeto pegando a luz, sobre fundo claro --luz-quina-escura a mesma coisa nas secoes marinho, onde 40% estouraria --luz-quina-btn no terracota, que ja e escuro, 15% e o que nao vira brilho --base-marcada a linha de baixo, no lado onde a luz nao chega --espessura a base do swatch, que precisa parecer pastilha e nao papel --poco o inverso de tudo isto: a foto rebaixada dentro do cartao */ --luz-quina: inset 0 1px 0 rgba(255, 255, 255, 0.4); --luz-quina-escura: inset 0 1px 0 rgba(255, 255, 255, 0.12); --luz-quina-btn: inset 0 1px 0 rgba(255, 255, 255, 0.15); --base-marcada: inset 0 -1px 0 rgba(22, 22, 74, 0.06); --espessura: inset 0 -2px 4px rgba(0, 0, 0, 0.06); --poco: inset 0 2px 6px rgba(22, 22, 74, 0.1); /* As faixas escuras nao sao objetos em cima da pagina, sao cavadas nela: as duas sombras internas escurecem a junta de cima e a de baixo e a faixa afunda. O -8px de spread segura a sombra na beirada em vez de deixar ela subir pelo meio da faixa. */ --faixa-cavada: inset 0 8px 16px -8px rgba(0, 0, 0, 0.25), inset 0 -8px 16px -8px rgba(0, 0, 0, 0.25); /* A luz entrando na secao escura, no mesmo canto de onde vem toda sombra da pagina. Sem ela o marinho fica chapado e a faixa cavada nao tem o que iluminar. E background-image, entao entra empilhada antes da cor. */ --luz-secao: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 255, 255, 0.06), transparent 60%); /* Ruido de fundo das secoes claras, para a areia nao ser uma chapada digital. E uma pastilha de 120px de turbulencia a 2%, repetida. Se der para ver a trama a olho nu sem aproximar, esta forte demais. */ --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.02'/%3E%3C/svg%3E"); } @media (min-width: 768px) { :root { --secao-y: 128px; --header-h: 92px; --gutter: 40px; } } /* -------------------------------------------------------------------------- 02. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } body { margin: 0; background: var(--areia); color: var(--tinta); font-family: var(--fonte-corpo); font-size: 1rem; font-weight: 400; line-height: 1.65; /* tracking que a Inter pede no corpo de 16px; sem isso ela lê espacada */ letter-spacing: -0.011em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.is-locked { overflow: hidden; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; border: 0; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { background: none; border: 0; cursor: pointer; } address { font-style: normal; } /* sprite de icones no topo do body, nunca visivel */ .sprite { display: none; } :focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } .pular-para-conteudo { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 12px 20px; background: var(--tinta); color: var(--areia); border-radius: var(--raio); } .pular-para-conteudo:focus { left: 8px; top: 8px; } /* Texto que existe para o Google e para o leitor de tela, mas nao aparece na tela. Usado no H1 do hero, cujo texto ja esta desenhado dentro do banner. */ .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 03. TIPOGRAFIA A escala da v2 e maior que a da v1. Titulo grande, corpo curto. -------------------------------------------------------------------------- */ /* text-wrap: balance distribui as palavras entre as linhas em vez de encher a primeira e jogar o resto na seguinte. E o que impede casos como "Nao e parede pintada. E / acabamento.", que deixava uma palavra sozinha embaixo. So vale a pena em texto curto: o navegador desiste depois de umas seis linhas, e por isso os titulos usam balance e os paragrafos usam pretty, logo abaixo. Navegador antigo ignora a propriedade e quebra como antes, sem prejuizo. */ h1, h2, h3, h4, .label, .fonte-titulo { text-wrap: balance; } /* O peso 600 e o que a Bitter pede em titulo: no 400 ela fica clara demais para o corpo grande, e acima de 700 os slabs engrossam e viram anuncio. A Bitter nao tem eixo optico, ao contrario da Fraunces que estava aqui antes, entao o font-optical-sizing abaixo nao faz nada e fica so como no-op inofensivo para o dia em que a fonte trocar de novo. */ h1, h2, h3, .fonte-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-optical-sizing: auto; } h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.02em; } /* A Bitter desenha um pouco mais estreito que a Fraunces, mas o teto do clamp fica onde estava: o limite abaixo foi medido contra o titulo mais longo da pagina, e sobrar folga e melhor que voltar a estourar a coluna. Comentario antigo, mantido porque a razao continua valendo: A fonte de titulo desenha mais largo que a fonte antiga, entao o teto do clamp caiu de 3.25rem para 3rem: com o valor antigo os titulos de duas palavras longas, como "Mande a metragem e cuidamos do resto", passavam da coluna. */ h2 { font-size: clamp(1.9375rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; } h3 { font-size: 1.4375rem; line-height: 1.18; letter-spacing: -0.012em; } h4 { font-family: var(--fonte-corpo); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; } /* pretty cuida do outro defeito, a viuva: a ultima linha do paragrafo com uma palavra so. Ele mexe apenas nas linhas finais, entao nao desalinha o bloco. */ p { max-width: 65ch; text-wrap: pretty; } strong { font-weight: 500; } /* O label usa um terracota proprio, mais escuro que o da marca. O #B8552E dos botoes rende 4.30:1 sobre o areia e 3.86:1 sobre o areia escura, e o minimo para texto normal e 4.5:1; em 12px de caixa alta com entreletra aberta isso se sente. O #A34A26 sobe para 5.28:1 e 4.74:1 e continua sendo o mesmo tom. No botao o terracota da marca fica: la o texto e branco por cima dele, e essa combinacao ja passa com 4.80:1. */ .label { display: block; font-size: 0.75rem; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.16em; color: var(--terracota-label); } .lead { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; color: var(--tinta-suave); } .texto-suave { color: var(--tinta-suave); } /* -------------------------------------------------------------------------- 04. LAYOUT -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); } .secao { padding-block: var(--secao-y); } /* O grao entra nas duas secoes claras e em nenhum outro lugar. A areia sozinha e uma chapada perfeita, que nenhum material de obra e; a pastilha de ruido a 2% tira essa perfeicao sem virar textura visivel. E background-image, entao convive com a cor sem precisar de pseudo-elemento. */ .secao--areia { background-color: var(--areia); background-image: var(--grao); } .secao--areia-escura { background-color: var(--areia-escura); background-image: var(--grao); } /* Faixa escura em marinho. Todo texto solto dentro dela passa a claro. O terracota tambem clareia, senao some no fundo azul. */ /* A secao escura era um retangulo de cor chapada. Ganha duas coisas. A LUZ, no mesmo canto de onde vem toda sombra da pagina: um oval de branco a 6% no alto e a esquerda. Sem ele nao ha de onde a sombra dos elementos de dentro estar caindo, e a faixa cavada logo abaixo nao tem o que iluminar. A FAIXA CAVADA. As sombras internas em cima e embaixo escurecem as duas juntas com as secoes vizinhas, e a faixa afunda na pagina em vez de estar pousada nela. Isto NAO contraria a regra de nao pousar sombra em secao de largura total: sao inset, e o efeito e o inverso, a secao vira o buraco e nao o objeto. Sombra externa em faixa continua proibida. Aqui a sombra e preta de verdade, e nao o marinho da escala: marinho a 8% em cima de marinho e o proprio marinho. */ .secao--marinho { background-color: var(--marinho); background-image: var(--luz-secao); box-shadow: var(--faixa-cavada); color: var(--sobre-escuro); --contorno-cor: var(--terracota-claro); --contorno-hover-texto: var(--marinho); } .secao--marinho h2, .secao--marinho h3, .secao--marinho h4 { color: var(--sobre-escuro); } .secao--marinho .label { color: var(--terracota-claro); } .secao--marinho p, .secao--marinho .lead, .secao--marinho .texto-suave { color: var(--sobre-escuro-suave); } /* Cabecalho de secao. Na v2 nao tem risco embaixo do titulo, o respiro resolve. NAO HA MAIS TETO DE LARGURA AQUI. Ele ja foi 46ch, depois 46rem, e as duas vezes prendia o titulo numa coluna mais estreita que a secao. Medindo os oito titulos da pagina na Bitter de 3rem, o mais largo, "O que dizem nossos clientes depois de comprar.", mede 1025px; a coluna util tem 1160px. Ou seja, TODOS cabiam numa linha so, e o teto de 736px era o unico motivo de eles quebrarem em duas. Quebra no meio da frase quando a frase inteira cabe e defeito, nao decisao. O .lead solta o proprio teto de 60ch pelo mesmo motivo. Isso da linhas longas para um paragrafo, o que normalmente e ruim de ler; aqui vale porque estes subtitulos tem uma ou duas frases e passam a caber em UMA linha, e linha unica nao sofre do problema que a medida longa causa, que e perder o lugar ao voltar para a linha seguinte. Se algum subtitulo crescer a ponto de precisar de tres linhas, devolva um teto para ele em vez de deixar correr. O text-wrap: balance dos titulos, la em cima na secao 03, continua valendo e nao briga com isto: ele so entra quando a frase realmente nao cabe, o que agora acontece no celular e em telas medias, onde duas linhas equilibradas sao melhores que uma linha cheia mais uma orfa. */ .secao__cabecalho { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; } /* precisa vir antes do --duplo, que tem teto proprio de 36ch na coluna da direita e tem que continuar ganhando desta regra */ .secao__cabecalho .lead { max-width: none; } .secao__cabecalho h2 + p, .secao__cabecalho h1 + p { margin-top: 4px; } /* O

das paginas internas usa a escala do h2. POR QUE ELE EXISTE. A home tem um h1 invisivel, porque a chamada dela esta desenhada dentro da arte do banner. As paginas internas nao tem banner: o primeiro titulo que aparece na tela E o titulo da pagina, e ate 11/09/2026 ele era um h2, o que deixava as tres paginas sem h1 nenhum. POR QUE NAO A ESCALA DO h1. O clamp do h1 vai ate 4.5rem, medida pensada para competir com uma arte de banner em volta. Numa pagina de texto corrido ele viraria cartaz. A escala do h2 e a que o .secao__cabecalho foi desenhado para receber, e e ela que o cabecalho continua recebendo: muda a tag, nao o desenho. */ .secao__cabecalho h1 { font-size: clamp(1.9375rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; } /* 56px de respiro embaixo do cabecalho sao proporcionais a um titulo de 3rem. No celular o titulo cai para 1.94rem e o mesmo vao passa a ler como buraco entre o cabecalho e o conteudo dele. */ @media (max-width: 639px) { .secao__cabecalho { margin-bottom: 36px; } } /* Cabecalho com o texto de apoio na coluna da direita, na altura do titulo. So dos 900px para cima: abaixo disso as duas colunas dariam 40 caracteres cada e a linha de apoio quebraria em cinco linhas curtas. */ .secao__cabecalho--duplo { max-width: none; } @media (min-width: 900px) { .secao__cabecalho--duplo { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } .secao__cabecalho--duplo .secao__cabecalho-texto { display: grid; gap: 16px; max-width: 34rem; } .secao__cabecalho--duplo .lead { max-width: 36ch; margin-bottom: 6px; } } /* cabecalho em duas colunas: titulo a esquerda, acao a direita, mesma linha */ .secao__cabecalho--linha { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; } .secao__cabecalho--linha > div { display: grid; gap: 14px; } /* -------------------------------------------------------------------------- 05. BOTOES Par de CTAs sempre com o mesmo peso: mesma altura, mesmo padding, mesma tipografia. Muda so o preenchimento. -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 15px 30px; border: 1px solid transparent; border-radius: var(--raio); font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--transicao-btn), color var(--transicao-btn), border-color var(--transicao-btn), transform var(--transicao-btn), box-shadow var(--transicao-btn); } /* A seta vive dentro do botao, nunca antes do texto, e anda 3px no hover. E o mesmo gesto do .link-seta logo abaixo: a pagina inteira aponta para a direita quando o link leva para fora ou para o WhatsApp. */ .btn__seta { width: 15px; height: 15px; flex: none; transition: transform var(--transicao); } .btn:hover .btn__seta, .btn:focus-visible .btn__seta { transform: translateX(3px); } /* O primario carrega o pedido de orcamento, entao ele tem massa: em repouso ja esta pousado acima da pagina, no hover levanta, e no clique afunda abaixo do proprio repouso. Os tres estados sao o mesmo objeto em alturas diferentes, e nao tres aparencias. A quina de luz no topo e o que separa "botao com sombra" de "botao com espessura": sem ela o terracota fica com cara de retangulo pintado. Sao 15% de branco, e nao os 40% das superficies claras, porque sobre o terracota qualquer coisa acima disso vira brilho de plastico. O afundar do :active e o unico lugar da folha onde a sombra encolhe em vez de crescer, e e de proposito: o dedo empurra o botao para dentro da pagina. */ .btn--primario { background: var(--terracota); border-color: var(--terracota); color: var(--branco); box-shadow: var(--sombra-1), var(--luz-quina-btn); } .btn--primario:hover, .btn--primario:focus-visible { background: var(--terracota-escuro); border-color: var(--terracota-escuro); transform: translateY(-2px); box-shadow: var(--sombra-2), var(--luz-quina-btn); } .btn--primario:active { transform: translateY(1px); box-shadow: var(--sombra-1); } /* O contorno muda de cor conforme o fundo, via variavel. Sobre imagem e sobre marinho ele vira claro, no resto continua terracota. */ .btn--contorno { background: transparent; border-color: var(--contorno-cor, var(--terracota)); color: var(--contorno-cor, var(--terracota)); } /* Em repouso o contorno e um desenho na pagina, sem elevacao nenhuma: ele e a opcao secundaria e nao pode disputar altura com o primario. So no hover, ja preenchido, ele vira objeto e ganha o primeiro degrau. */ .btn--contorno:hover, .btn--contorno:focus-visible { background: var(--contorno-cor, var(--terracota)); color: var(--contorno-hover-texto, var(--branco)); box-shadow: var(--sombra-1); } .btn--contorno:active { transform: translateY(1px); } /* Verde do WhatsApp: so no botao do header e no flutuante. Em qualquer outro lugar o link do WhatsApp e texto ou contorno em terracota. */ .btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #0B3D21; } .btn--whatsapp:hover, .btn--whatsapp:focus-visible { background: var(--whatsapp-escuro); border-color: var(--whatsapp-escuro); transform: translateY(-2px); box-shadow: var(--sombra-2), var(--luz-quina-btn); } .btn--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--areia); } .btn--tinta:hover, .btn--tinta:focus-visible { background: #000; border-color: #000; } /* Branco com contorno e texto marinho. Nasceu para o botao do banner: sobre uma arte clara ele precisa aparecer sem brigar com a tipografia dela. No hover inverte, e o marinho passa a ser o preenchimento. */ .btn--branco { background: var(--branco); border-color: var(--marinho); color: var(--marinho); } .btn--branco:hover, .btn--branco:focus-visible { background: var(--marinho); border-color: var(--marinho); color: var(--branco); } .btn--pequeno { min-height: 44px; padding: 11px 18px; font-size: 0.875rem; } .btn--bloco { width: 100%; } .btn-par { display: grid; gap: 12px; } @media (min-width: 480px) { .btn-par { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; justify-content: start; } /* 268px, e nao os 240px de antes: com o rotulo do CTA final nomeando o que vai ser orcado, mais a seta, o texto quebrava em duas linhas dentro do botao e as duas caixas ficavam de alturas diferentes. */ .btn-par--auto { grid-template-columns: repeat(2, minmax(0, 268px)); } .btn-par--centro { grid-template-columns: repeat(2, minmax(0, 268px)); justify-content: center; } } /* link de texto com seta. Substitui o botao onde a caixa pesaria demais. A seta era um tracinho de 16px que esticava para 28px no hover, e de longe lia como travessao antes de ler como direcao. Virou uma ponta de seta desenhada com duas bordas de um quadrado girado: mesmo peso de traco, mas agora aponta para onde o link leva. */ .link-seta { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9375rem; font-weight: 500; color: var(--terracota); transition: color var(--transicao); } .link-seta::after { content: ""; width: 7px; height: 7px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); transition: transform var(--transicao); } .link-seta:hover, .link-seta:focus-visible { color: var(--terracota-escuro); } .link-seta:hover::after, .link-seta:focus-visible::after { transform: translateX(4px) rotate(45deg); } .icone-wa { width: 18px; height: 18px; flex: none; fill: currentColor; } /* -------------------------------------------------------------------------- 06. HEADER E MENU Solido desde o topo, em qualquer pagina e em qualquer ponto da rolagem. Nao existe mais o estado transparente sobre o hero nem a troca de cor no scroll, entao o logo aparece sempre na versao colorida original. -------------------------------------------------------------------------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--areia); color: var(--tinta); border-bottom: 1px solid var(--linha); transition: box-shadow 300ms var(--suave), background-color 300ms var(--suave), border-color 300ms var(--suave); } /* Depois dos primeiros 40px de rolagem a barra passa a pairar sobre o conteudo em vez de ser uma faixa colada no alto. O main.js poe a classe. A altura nao muda de proposito: mexer nela empurraria a pagina inteira. Sao tres coisas juntas, e as tres precisam uma da outra. O fundo perde 15% de opacidade e o blur de 12px devolve a legibilidade que essa transparencia custaria: sem o blur, o texto do site passando por tras da barra briga com o menu. A sombra e o que poe a barra acima da pagina; ela comeca com um fio de 1px, que e a linha de contato, e continua num borrao de 16px, que e a ambiente. Sao os mesmos dois tempos da escala de elevacao, so que rasos, porque a barra flutua pouco. A borda de baixo sai junto: com o fio de 1px da sombra no lugar dela, as duas viravam uma linha de 2px, mais grossa do que qualquer outra da pagina. */ .header.is-rolado { background: rgba(245, 242, 237, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: transparent; box-shadow: var(--sombra-header); } /* o header ignora a largura maxima do site e usa a tela inteira, so com respiro nas laterais. Logo colado na esquerda, acoes coladas na direita. */ .header .container { max-width: none; padding-inline: clamp(16px, 3vw, 48px); } .header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: var(--header-h); } /* o menu fica centralizado no vao entre o logo e as acoes */ .header .nav { justify-self: center; min-width: 0; } /* o botao nunca quebra em duas linhas, mesmo com o texto longo */ .header .btn--whatsapp { white-space: nowrap; } .logo { display: inline-flex; align-items: center; flex: none; } /* A marca nova e bem mais larga que a antiga: 471x223 contra 573x438, ou seja 2.1:1 no lugar de 1.3:1. Cada pixel de altura custa mais que o dobro de largura do que custava antes, e e a largura que aperta o menu no meio. Por isso a altura sobe ate onde o header comporta com respiro, e nao mais. */ .logo img { display: block; width: auto; height: 48px; } @media (min-width: 768px) { .logo img { height: 64px; } } /* O rodape e escuro, mas a marca continua colorida: em vez de achatar tudo em branco com filtro, ela ganha uma placa clara atras. Assim a marca e a mesma nos dois lugares, com as cores do anel preservadas. O inline-flex do .logo faz a placa envolver a imagem sem sobra. */ /* No rodape entra a versao negativa do arquivo, com a palavra em claro e o anel colorido intacto, e ela vai direto sobre o fundo escuro. Nao existe caixa nem filtro: qualquer placa clara sobre o marinho lia como remendo, e o filtro monocromatico jogava fora as cores da marca. O que impedia o logo de ir direto ao fundo era so a palavra "CLASSIC", em azul-marinho escuro sobre azul-marinho escuro, e e exatamente isso que o negativo resolve. */ .nav { display: none; } .nav__lista { display: flex; align-items: center; gap: 24px; } .nav__link { font-size: 0.9375rem; opacity: 0.82; transition: opacity var(--transicao); } .nav__link:hover { opacity: 1; } /* O justify-self nao e enfeite. Abaixo de 1024px o .nav sai com display none e, com isso, deixa de ocupar a coluna do meio: as acoes escorregam para a coluna 1fr e encostam no logo. Ancorar no fim mantem elas na borda direita tanto com o menu na tela quanto sem ele. */ .header__acoes { display: flex; align-items: center; gap: 12px; justify-self: end; } .header .btn--whatsapp { display: none; } /* redes sociais no header. Herdam a cor do header, entao ficam brancas sobre o hero e marinho depois que ele fica solido. */ .header__redes { display: none; align-items: center; gap: 4px; } .header__redes a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; opacity: 0.82; transition: opacity var(--transicao); } .header__redes a:hover { opacity: 1; } .header__redes svg { width: 19px; height: 19px; fill: currentColor; } .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; } .menu-btn span { display: block; height: 1.5px; background: currentColor; } .menu-painel { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; padding: calc(var(--header-h) + 32px) var(--gutter) 40px; background: var(--areia); visibility: hidden; opacity: 0; overflow-y: auto; transition: opacity var(--transicao), visibility var(--transicao); } .menu-painel.is-aberto { visibility: visible; opacity: 1; } .menu-painel__lista { display: flex; flex-direction: column; } /* O overflow-y e o line-height sao os dois lados do mesmo problema: com o item "Antes e depois" o menu passou a ter seis linhas, e o conteudo media 862px num painel que e a altura da janela. Em 390x844, 375x812 e 360x800 o rodape com os dois telefones caia fora da tela sem rolagem nenhuma, porque um position: fixed com overflow visible nao rola: o que sobra fica inalcancavel. O line-height traz o conteudo de volta para dentro nos aparelhos de hoje. Os itens herdavam o 1.7 do corpo, que e medida de paragrafo: em 2rem cada linha ganhava 22px de entrelinha que ninguem le, 96px por item. Em 1.2 o item mede 79px, a lista inteira encolhe ~100px e o painel volta a caber. O padding de 20px fica como esta, que e o que garante o alvo de toque. O overflow-y: auto e a rede embaixo, para tela curta de verdade: em 375x667 e 320x568 o painel nao cabe nem com cinco itens, e essa parte ja estava assim antes deste item entrar. */ .menu-painel__lista a { display: block; padding: 20px 0; border-bottom: var(--borda); font-family: var(--fonte-titulo); font-size: 2rem; line-height: 1.2; letter-spacing: -0.02em; } .menu-painel__rodape { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; } .menu-painel__tel { font-size: 0.9375rem; color: var(--tinta-suave); } /* -------------------------------------------------------------------------- 07. PLACEHOLDER DE IMAGEM (.ph) MODO WIREFRAME. As fotos ainda nao existem. Cada placeholder e um
. O nome do arquivo aparece na tela lido do proprio data-src, entao nao ha texto duplicado no HTML. A dimensao recomendada vai no . Quando a foto chegar, troque a div inteira por: ... Nada muda no CSS. As classes de proporcao (.ph--16x9, .ph--4x5, .ph--4x3) existem so para o placeholder segurar o mesmo espaco da foto final. -------------------------------------------------------------------------- */ .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 16px; overflow: hidden; text-align: center; background-color: var(--areia-escura); background-image: repeating-linear-gradient( 45deg, rgba(28, 26, 23, 0.05) 0, rgba(28, 26, 23, 0.05) 1px, transparent 1px, transparent 6px ); border: 1px dashed var(--linha); color: var(--tinta-suave); } /* icone de moldura, SVG embutido no proprio CSS. A ordem na tela e icone, nome do arquivo, dimensao. Como o ::after nasce depois do no fluxo normal, a ordem e ajustada com order. */ .ph::before { content: ""; order: 1; display: block; width: 34px; height: 34px; margin-bottom: 6px; opacity: 0.75; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B655C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='1.5'/%3E%3Cpath d='m5.5 17 3.6-4.4 2.6 3 2.4-3.4L19 17'/%3E%3Ccircle cx='8.6' cy='9' r='1.3'/%3E%3C/svg%3E"); } /* o nome do arquivo sai do data-src, nao do texto do HTML */ .ph::after { content: attr(data-src); order: 2; display: block; max-width: 100%; font-family: var(--fonte-mono); font-size: 12px; line-height: 1.4; color: var(--tinta-suave); overflow-wrap: anywhere; } .ph__dim { order: 3; display: block; font-family: var(--fonte-mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.04em; color: var(--tinta-suave); opacity: 0.7; } /* proporcoes finais da foto */ .ph--16x9 { aspect-ratio: 16 / 9; } .ph--4x5 { aspect-ratio: 4 / 5; } .ph--4x3 { aspect-ratio: 4 / 3; } /* Dentro de caixa de altura fixa (faixa de ambiente de 70vh, comparador) a foto real vai entrar com object-fit: cover. O placeholder faz o mesmo: preenche a caixa em vez de impor a propria proporcao. */ .ph--cobrir { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border: 0; } /* Dentro do comparador as duas camadas ficam empilhadas e a alca corta o meio. Se o rotulo dos dois ficasse centralizado, um cobriria o outro e os dois sumiriam atras da alca. Por isso o "antes" vai para o alto a esquerda e o "depois" para o alto a direita. */ .compare .ph--cobrir { justify-content: flex-start; padding-top: 13%; } .compare__quadro > .ph--cobrir { align-items: flex-end; padding-right: 7%; } .compare__camada > .ph--cobrir { align-items: flex-start; padding-left: 7%; } /* em tela estreita os dois rotulos encostam um no outro. O de baixo desce. */ @media (max-width: 639px) { .compare .ph--cobrir { padding-inline: 12px; } .compare__quadro > .ph--cobrir { padding-top: 34%; } } /* placeholder pequeno, dentro da tira de obras: encolhe o icone e o texto */ .ph--mini { padding: 10px; gap: 4px; } .ph--mini::before { width: 22px; height: 22px; margin-bottom: 2px; } .ph--mini::after { font-size: 10px; } .ph--mini .ph__dim { display: none; } /* -------------------------------------------------------------------------- 08. HERO, CARROSSEL DE BANNERS O hero nao tem mais comparador nem bloco de texto por cima. Agora e uma arte fechada, que ja traz a propria tipografia, com um unico botao centralizado embaixo. O comparador antes e depois vive so na secao 14, obras. -------------------------------------------------------------------------- */ .hero--banner { position: relative; background: var(--areia); /* O header e fixo e solido, entao o banner comeca abaixo dele para nao ficar com a moldura cortada. */ padding-top: var(--header-h); } .banners { position: relative; overflow: hidden; } /* Os slides ficam lado a lado numa fita e a fita anda. Com um banner so ela nunca sai do lugar, e o custo disso e zero. */ .banners__trilho { display: flex; transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1); } .banner { position: relative; flex: 0 0 100%; /* Item de flex nao encolhe abaixo do conteudo por padrao. A arte tem 2000px de largura natural, entao sem isto um slide poderia ficar mais largo que a janela e empurrar a pagina para o lado. */ min-width: 0; /* A proporcao vem da arte, hoje 3840 x 1536, ou seja 2,5 por 1. Ela precisa bater com o width e o height do no HTML: sempre que a arte mudou e este numero ficou para tras, a caixa reservou uma altura que a imagem nao tinha e sobrou faixa de fundo em volta dela. 2,5 por 1 tambem e a proporcao que faz o banner encher a largura da janela em qualquer desktop. A conta e simples: a caixa so encolhe quando a altura que ela pediria, largura dividida por 2,5, passa do max-height logo abaixo. Numa tela de 1920 isso daria 768px contra um teto de 860px, entao nao encolhe. Numa arte 2 por 1, a mesma tela pedia 960px, o teto cortava, e a imagem recuava para o meio deixando areia nos dois lados. O max-height impede que num monitor largo o banner empurre a pagina inteira para baixo da dobra. */ aspect-ratio: var(--banner-proporcao, 3840 / 1536); max-height: calc(100vh - var(--header-h)); } /* A arte de celular e quadrada, 2000 x 2000, entao aqui a caixa deixa de ser 2,5 por 1 e vira 1 por 1. O corte de 639px e o mesmo do no HTML: e o navegador que escolhe o arquivo, e este numero so diz a que altura a caixa tem que ficar para receber o arquivo escolhido. Mexer em um sem o outro faz a caixa reservar altura que a arte nao tem, e sobra faixa de areia em volta. Num celular de 390px isso da 390px de altura de arte, mais os 76px do header: o hero fecha em 466px e a faixa de numeros ja aparece na primeira tela. */ @media (max-width: 639px) { .banner { --banner-proporcao: 1 / 1; } } /* O link cobre a arte inteira, e o precisa ocupar a caixa toda: sem isso ele fica com altura automatica, o height: 100% da imagem nao tem contra o que resolver e a arte para de acompanhar a caixa. */ .banner__link, .banner picture { position: absolute; inset: 0; display: block; } /* cover, agora que a caixa tem exatamente a proporcao da arte. Nesse caso os dois valores dao no mesmo em tela normal, e so se separam quando o max-height encurta a caixa, em janela muito baixa: o contain deixava um fio de areia nas laterais e o cover preenche, comendo cerca de 1% da largura da arte, que ali e so fundo. Se um dia a arte voltar a ter proporcao diferente da caixa, volte para contain, senao o corte passa a pegar a tipografia de dentro dela. */ .banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Enquanto a arte nao estiver em images/banners/, o slide mostra a mesma trama de placeholder do resto da pagina, em vez do icone de imagem quebrada. Quem poe e tira a classe e o main.js, no load e no error da imagem. */ .banner.is-faltando { background-color: var(--areia-escura); background-image: repeating-linear-gradient( 45deg, rgba(28, 26, 23, 0.05) 0, rgba(28, 26, 23, 0.05) 1px, transparent 1px, transparent 6px ); } .banner.is-faltando img { visibility: hidden; } /* O BOTAO SOBRE A ARTE NAO EXISTE MAIS. Ate 11/09/2026 havia um .banner__cta: um de HTML posicionado por cima da arte, com --cta-top e --cta-left medidos arte por arte. A regra ja tinha um display:none no celular, porque a arte de celular trazia o botao desenhado; nas artes novas as quatro trazem, desktop inclusive, e o botao de HTML virou duplicata em todas as larguras. Quem voltar a usar arte sem botao desenhado precisa do bloco de volta: ele esta no historico do git, com as medidas e o porque de cada uma. */ /* As setas so existem a partir do segundo banner, e foi ao entrar o segundo que elas viraram problema: centradas em 50% da altura, a da direita caia em cima do fim do subtitulo da arte 2, que corre ate 93,8% da largura. A sobreposicao ia de 1px em 1280 ate uns 24px em 900, o suficiente para comer a ultima palavra. Os 68% resolvem sem tirar as setas da lateral, que e onde se espera achar seta de carrossel. As duas artes poem o texto no terco de cima e deixam o piso vazio embaixo; e nessa faixa vazia que as setas passam a pousar. Se uma arte nova trouxer texto na parte de baixo, este numero pede revisao, do mesmo jeito que o --cta-top de cada banner. */ .banners__seta { position: absolute; top: 68%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.86); border-radius: 50%; color: var(--tinta); box-shadow: var(--sombra-flutuante); transition: background-color var(--transicao); } .banners__seta:hover { background: var(--branco); } .banners__seta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; } .banners__seta--ant { left: 14px; } .banners__seta--prox { right: 14px; } .banners__seta--ant svg { transform: rotate(180deg); } .banners__pontos { position: absolute; left: 50%; bottom: 16px; z-index: 3; display: flex; gap: 8px; transform: translateX(-50%); } .banners__ponto { width: 8px; height: 8px; padding: 0; background: rgba(28, 26, 23, 0.3); border-radius: 50%; transition: width var(--transicao), background-color var(--transicao); } .banners__ponto[aria-current="true"] { width: 22px; background: var(--tinta); border-radius: 4px; } /* Com um banner so nao ha para onde navegar. O main.js poe esta classe. */ .banners.is-unico .banners__seta, .banners.is-unico .banners__pontos { display: none; } /* -------------------------------------------------------------------------- COMPARADOR ANTES E DEPOIS Duas camadas sobrepostas. A de cima e recortada por clip-path conforme a posicao do arrastador, guardada em --pos. -------------------------------------------------------------------------- */ /* O UNICO ELEMENTO DA PAGINA NO NIVEL 4. E a peca maior e a que a secao existe para mostrar, entao ela e a que mais se afasta do fundo. A sombra e preta, e nao o marinho da escala: o comparador vive dentro da secao marinho, e marinho a 10% em cima de marinho nao e sombra nenhuma. A geometria continua sendo a do nivel 4, 8px de contato e 32px de ambiente; so a cor mudou de contexto. Essa e a traducao que a --sombra-escura-4 faz. A quina de luz precisa de camada propria porque o comparador e todo feito de filhos absolutos cobrindo a caixa inteira, e inset box-shadow pinta abaixo do conteudo. Mesmo motivo do poco das fotos de produto. */ .compare { --pos: 50%; position: relative; overflow: hidden; background: var(--areia-escura); border-radius: var(--raio); box-shadow: var(--sombra-escura-4); touch-action: pan-y; user-select: none; -webkit-user-select: none; } .compare::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: var(--luz-quina-escura); } .compare__quadro { position: absolute; inset: 0; } /* Com o wrapper e inline e nao tem altura propria, entao a img perderia o height: 100%. O picture passa a ocupar a caixa inteira. */ .compare__quadro > picture, .compare__camada > picture, .ambiente__midia > picture { position: absolute; inset: 0; display: block; } .compare__quadro img { width: 100%; height: 100%; object-fit: cover; } .compare__camada { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5; width: 2px; margin-left: -1px; background: var(--branco); cursor: ew-resize; touch-action: none; } .compare__grip { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; transform: translate(-50%, -50%); background: var(--branco); border-radius: 50%; color: var(--tinta); box-shadow: var(--sombra-flutuante); } .compare__grip svg { width: 24px; height: 24px; fill: currentColor; } .compare__handle:focus-visible { outline: none; } .compare__handle:focus-visible .compare__grip { outline: 2px solid var(--terracota); outline-offset: 3px; } .compare__tag { position: absolute; bottom: 16px; z-index: 4; padding: 6px 12px; background: rgba(15, 15, 53, 0.72); border-radius: var(--raio); color: var(--branco); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; pointer-events: none; } .compare__tag--antes { left: 16px; } .compare__tag--depois { right: 16px; } /* Enquanto as obras 02 a 05 forem placeholder, clicar numa miniatura aponta o comparador para um arquivo que ainda nao existe. Em vez do icone de imagem quebrada, a caixa volta a parecer o placeholder do resto da pagina. O main.js poe e tira a classe conforme a foto carrega ou falha, e a trama vai no pai porque uma quebrada continua desenhando o icone dela. */ .compare img.is-faltando { visibility: hidden; } .compare__quadro:has(> img.is-faltando), .compare__camada:has(> img.is-faltando) { background-color: var(--areia-escura); background-image: repeating-linear-gradient( 45deg, rgba(28, 26, 23, 0.05) 0, rgba(28, 26, 23, 0.05) 1px, transparent 1px, transparent 6px ); } /* -------------------------------------------------------------------------- 09. FAIXA DE PROVA -------------------------------------------------------------------------- */ /* A faixa saiu do formato "numero grande + frase, tres colunas iguais com risco no meio". Aquilo e o bloco de confianca mais copiado da web, e tinha um defeito proprio: o "15" ficava orfao do "anos", que descia para a frase. Lido de relance sobrava um numeral solto sem unidade. Agora cada item e uma marca: o numeral e a unidade na mesma linha de base ("15 ANOS"), um risco curto de terracota embaixo, e so entao a frase. E a anatomia de uma placa de fabrica, que e o que a faixa esta dizendo. Os riscos verticais sairam: eram eles que faziam a faixa parecer tabela. Quem separa agora e o respiro entre as colunas e o risco de cada marca. */ .prova { /* Duas camadas. Em cima, uma estriacao vertical de 7px quase invisivel: e o risco de desempenadeira do grafiato, que e o produto que a faixa esta vendendo. De longe nao se ve listra nenhuma, so uma superficie que nao e chapada. Embaixo, o degrade que da profundidade ao marinho. */ background-image: var(--luz-secao), repeating-linear-gradient(90deg, rgba(232, 146, 106, 0.05) 0 1px, transparent 1px 7px), linear-gradient(155deg, var(--marinho) 0%, var(--marinho-escuro) 100%); /* mesma faixa cavada das secoes marinho: as duas sao rebaixadas na pagina */ box-shadow: var(--faixa-cavada); color: var(--sobre-escuro); /* fio de terracota no topo: assenta a faixa contra a arte do banner logo acima em vez de deixar os dois azuis se encostarem sem transicao */ border-top: 1px solid rgba(232, 146, 106, 0.22); padding: 40px 0; } /* Tres colunas em qualquer largura, inclusive no celular. Empilhados, os tres numeros gastavam 343px de altura e cada um chegava sozinho na tela, sem o vizinho ao lado: a faixa deixava de ser uma comparacao e virava tres frases soltas. Lado a lado eles sao lidos de uma vez, que e a unica coisa que a faixa tem para fazer. O que muda por tamanho de tela e so o respiro e o corpo, la embaixo. */ /* O vao entre as colunas e zero: quem separa e a divisoria vertical de cada item, e o respiro vem do padding dele. Com gap E padding a distancia entre duas colunas dobrava e a divisoria ficava boiando no meio de um vazio. */ .prova__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .prova__item { display: grid; gap: 14px; align-content: start; padding-inline: 32px; border-left: 1px solid var(--linha-escura); } /* a divisoria separa, entao nao existe antes do primeiro nem depois do ultimo, e o padding tambem cai nas pontas para os tres alinharem com a pagina */ .prova__item:first-child { padding-left: 0; border-left: 0; } .prova__item:last-child { padding-right: 0; } /* A regua e o que faz a faixa ler como placa de fabrica: o numeral ancorado a esquerda, a unidade empurrada para a direita, e um fio ligando os dois por baixo. Sem o fio a unidade parece ter escorregado para longe do numero; com ele, os dois viram uma linha de ficha tecnica. Quem empurra a unidade e o margin-left: auto dela, e nao um space-between aqui. O item do Google tem tres filhos, numeral, estrelas e unidade, e o space-between distribuiria os tres pela linha: as estrelas parariam soltas no meio do vao, longe do numero que elas qualificam. Com o auto na unidade, o numeral e as estrelas ficam juntos na esquerda e so a unidade vai para a direita, valha o item dois ou tres filhos. */ .prova__marca { display: flex; align-items: baseline; gap: 10px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--linha-escura); } /* as estrelas qualificam o numeral, entao andam com ele. O center e porque baseline de um svg de 13px ao lado de um numeral de 56px joga a fileira la embaixo, na linha de base do numero. */ .prova__estrelas { align-self: center; } .prova__estrelas svg { width: 13px; height: 13px; } /* O numeral e o unico elemento grande da faixa: ele sozinho tem que ser lido de relance, na rolagem. Por isso vem no claro, e nao mais no terracota. O terracota claro rende 7.01:1 sobre o marinho e o claro rende 14.53:1: com o numeral em terracota, o elemento que precisa ser visto primeiro era o de MENOR contraste da faixa, com metade do contraste da propria legenda embaixo dele. A hierarquia estava invertida, e era isso que fazia a faixa parecer errada sem que desse para apontar o que era. O terracota nao sumiu: ele desceu para a unidade, onde um acento pequeno rende mais do que um numeral inteiro. */ .prova__num { font-family: var(--fonte-titulo); font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 600; line-height: 0.85; letter-spacing: -0.04em; color: var(--sobre-escuro); } /* A unidade em caixa alta espacada, no sans, contra o numeral em serif: e o contraste que faz "15 ANOS" ler como uma coisa so em vez de dois pedacos. */ .prova__unidade { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap; color: var(--terracota-claro); /* e este auto, e nao o container, que manda a unidade para a direita */ margin-left: auto; } .prova__texto { font-size: 0.9375rem; line-height: 1.45; color: var(--sobre-escuro-suave); /* a frase e um , entao nao herda o text-wrap: pretty que o seletor de

da a pagina inteira. Sem isto ela cai em duas linhas com a ultima palavra sozinha: "dentro" embaixo de "misturando textura e grafiato aqui" */ text-wrap: pretty; } /* Numa tela de 390px cada uma das tres colunas fica com uns 96px uteis. O numeral em 40px e o texto em 15px nao cabiam ali: a frase quebrava em palavra solta por linha. O corpo menor e o que compra as tres colunas, e continua legivel porque a frase e curta e existe so para explicar a marca que esta logo acima dela. O max-width sai porque, com a coluna ja estreita, o limite de 30ch nao tem mais o que segurar: quem define a largura da linha e a propria coluna. */ @media (max-width: 767px) { .prova { padding: 28px 0; } .prova__item { gap: 8px; padding-inline: 10px; } /* Numa coluna de 96px o numeral e a unidade nao cabem na mesma linha, e o space-between jogaria um em cada ponta com nada no meio. Aqui eles empilham. A REGUA SAI no celular. Ela existia para separar a marca da frase de apoio, e a frase agora esta escondida: sobrava um risco embaixo do nada, lido como sublinhado solto. Pior, os tres nao se alinhavam, porque o item do Google tem uma linha a mais, a das estrelas, e a regua dele descia junto. As estrelas nao tem como subir para o lado do "4,5": as cinco mais o numeral dao 115px numa coluna de 96. Quem estrutura a faixa no celular passam a ser as divisorias verticais entre as colunas, que continuam de pe. */ .prova__marca { flex-direction: column; align-items: flex-start; gap: 5px; padding-bottom: 0; border-bottom: 0; } /* em coluna o auto empurraria a unidade para a borda direita da coluna, longe do numeral; aqui os tres ficam alinhados a esquerda, um sobre o outro */ .prova__unidade { margin-left: 0; } .prova__estrelas { align-self: flex-start; } .prova__estrelas svg { width: 11px; height: 11px; } .prova__num { font-size: clamp(1.75rem, 7vw, 2.25rem); } .prova__unidade { font-size: 0.5625rem; letter-spacing: 0.14em; } /* A frase de apoio SAI DA TELA no celular. Numa coluna de 96px ela caia em tres a quatro linhas de duas palavras, e as tres juntas ocupavam mais altura que os proprios numeros, que sao o assunto da faixa. Escondida, e nao apagada: e a unica parte da faixa que diz de onde vem a nota ("no Google") e o que a fabrica faz. Apagar do HTML tiraria isso tambem de quem ouve a pagina, e no celular, que e onde o Google indexa primeiro. Sao as mesmas declaracoes do .so-leitor, na secao 02. O position: absolute tira o span do fluxo do grid, entao o .prova__item encolhe de verdade em vez de so ficar com um vao vazio embaixo. */ .prova__texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } /* -------------------------------------------------------------------------- 11. A ROTA DA BARRICA + A TABELA "NA PRATICA" -------------------------------------------------------------------------- Dois paineis, um por caminho. Cada parada e um circulo com o icone dentro; o que liga uma parada a outra e um fio com o custo escrito em cima dele. Na revenda o fio e pontilhado e cada trecho cobra alguma coisa; no nosso o fio e inteiro e nao cobra nada, e essa e a figura toda. No celular a trilha desce em coluna, com o fio na vertical: sete paradas em linha nao cabem em 390px. Dos 640px para cima ela vira linha e os elos crescem para ocupar a sobra, entao os dois paineis terminam no mesmo ponto e o que se compara passa a ser quantas paradas existem no meio. Vermelho e verde vivem so aqui. O vermelho e mais frio e mais escuro que o terracota de proposito: perto demais e a pessoa le a cor da marca como o lado ruim da comparacao. -------------------------------------------------------------------------- */ .rota { display: grid; gap: 16px; margin-bottom: 44px; } /* O min-width: 0 e a rede de seguranca. .rota e display: grid, entao cada via e item de grid e nasce com min-width: auto, que vale o min-content do que ela guarda. Com a trilha deitada esse min-content e a soma das paradas mais as pilulas de custo, que sao nowrap: 597px com paradas de 92 e 741px com paradas de 128. Quando isso passava da largura do container, a via crescia junto e empurrava a PAGINA INTEIRA, nao so o cartao. Era esse o estouro de 16px em 640 e de 80px em 768. Os breakpoints la embaixo foram corrigidos para a trilha so deitar quando couber, e este zero garante que, se alguem acrescentar uma parada, o defeito volte como corte dentro do cartao em vez de como barra de rolagem no site. */ .rota__via { min-width: 0; padding: 20px 18px; border: 1px solid var(--negado-linha); /* 12px era canto de app; o site inteiro anda em 3px */ border-radius: var(--raio); background: var(--negado-fundo); box-shadow: var(--sombra-1); } .rota__via--classic { border-color: var(--aprovado-linha); background: var(--aprovado-fundo); } .rota__cabecalho { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .rota__selo { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--negado); } .rota__via--classic .rota__selo { background: var(--aprovado); } .rota__selo svg { width: 14px; height: 14px; stroke: var(--branco); stroke-width: 2.6; fill: none; } .rota__titulo { font-family: var(--fonte-corpo); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--negado); } .rota__via--classic .rota__titulo { color: var(--aprovado); } /* a pilula vai para a direita sozinha; no celular ela cai para a linha de baixo pelo flex-wrap do cabecalho, e o margin-left: auto deixa de ter efeito */ /* O margin-left: auto empurra a pilula para a direita da linha do titulo. Isso so vale quando os dois cabem lado a lado; abaixo disso ela quebra para a linha de baixo e fica encostada na direita, sozinha, desalinhada de tudo que vem depois. O bloco de 560px devolve o alinhamento a esquerda. */ .rota__pilula { margin-left: auto; flex: none; padding: 6px 13px; border-radius: 999px; background: var(--negado); color: var(--branco); font-size: 0.75rem; font-weight: 600; line-height: 1.2; } .rota__via--classic .rota__pilula { background: var(--aprovado); } @media (max-width: 559px) { .rota__pilula { margin-left: 0; } } .rota__trilha { display: flex; flex-direction: column; align-items: flex-start; list-style: none; margin: 0; padding: 0; } .rota__parada { display: flex; align-items: center; gap: 12px; flex: none; } .rota__icone { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--branco); border: 1px solid var(--negado-linha); } .rota__via--classic .rota__icone { border-color: var(--aprovado-linha); } .rota__icone svg { width: 25px; height: 25px; stroke: var(--tinta-suave); stroke-width: 1.5; fill: none; } /* a fabrica da nossa trilha e a unica parada com o icone em terracota: e a marca dizendo qual das duas pontas e ela */ .rota__via--classic .rota__parada:first-child .rota__icone svg { stroke: var(--terracota); } /* o selinho no canto do circulo, que marca a parada que cobra a mais */ .rota__marca { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--negado-fundo); background: var(--negado); } .rota__marca svg { width: 10px; height: 10px; stroke: var(--branco); stroke-width: 3; } .rota__parada--fim-bom .rota__marca { background: var(--aprovado); border-color: var(--aprovado-fundo); } .rota__nome { font-size: 0.875rem; font-weight: 500; line-height: 1.25; color: var(--tinta); } .rota__parada--fim .rota__nome { color: var(--negado); font-weight: 600; } .rota__parada--fim-bom .rota__nome { color: var(--aprovado); } /* O elo e o fio mais o custo. No celular o fio e vertical e nasce no centro do circulo (26px = metade de 52), para descer alinhado com a coluna de icones. */ .rota__elo { position: relative; display: flex; align-items: center; min-height: 38px; padding-left: 64px; } .rota__elo::before { content: ""; position: absolute; left: 26px; top: 0; bottom: 0; border-left: 1.5px dashed var(--negado-linha-forte); } .rota__via--classic .rota__elo::before { border-left-style: solid; border-left-color: var(--aprovado); } /* fundo proprio para o fio nao passar por tras do texto */ .rota__custo { position: relative; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--negado-linha-forte); background: var(--branco); font-size: 0.75rem; font-weight: 600; color: var(--negado); white-space: nowrap; } .rota__elo--bom .rota__custo { display: inline-flex; align-items: center; gap: 6px; border-color: var(--aprovado); background: var(--aprovado); color: var(--branco); } .rota__custo-ico { width: 13px; height: 13px; stroke: currentColor; stroke-width: 3; fill: none; } @media (max-width: 519px) { .rota__via { padding: 18px 14px; } .rota__elo { padding-left: 58px; } } /* -------------------------------------------------------------------------- 10. AMBIENTE FULL BLEED Faixa de imagem de largura total com um bloco de texto por cima. -------------------------------------------------------------------------- */ .ambiente { /* Os dois numeros que a banda de foto do desktop le para se medir. O cartao mora aqui, e nao no .ambiente__bloco, porque a largura dele e dado de composicao da faixa inteira: a foto termina em funcao dela. Ter o valor em dois lugares era garantir que um dia um deles ficasse para tras. */ --ambiente-cartao: 480px; --ambiente-sobreposicao: 72px; position: relative; height: 70vh; min-height: 480px; display: flex; align-items: center; overflow: hidden; background: var(--marinho); } .ambiente__midia { position: absolute; inset: 0; } .ambiente__midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 53, 0.35), rgba(15, 15, 53, 0.05)); } .ambiente--direita .ambiente__midia::after { background: linear-gradient(to left, rgba(15, 15, 53, 0.35), rgba(15, 15, 53, 0.05)); } .ambiente__midia img { width: 100%; height: 100%; object-fit: cover; } .ambiente__container { position: relative; z-index: 2; width: 100%; display: flex; } .ambiente--direita .ambiente__container { justify-content: flex-end; } .ambiente__bloco { /* O cartao vira container de consulta para o h2 se medir por ele. Nao ha descendente posicionado aqui dentro, entao a contencao de layout que o container-type liga nao muda nada do que ja existe. */ container-type: inline-size; width: 100%; max-width: var(--ambiente-cartao); display: grid; gap: 16px; padding: 32px 28px 34px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--raio); /* Nivel 3, um degrau acima dos cartoes de produto e de loja, e o unico elemento em repouso da pagina que fica nessa altura. Ele precisa: esta em cima de uma foto, nao de um fundo liso, e sem a sombra longa a peca branca parece recortada e colada na imagem em vez de estar na frente dela. */ box-shadow: var(--sombra-3), var(--base-marcada); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* O corpo deste h2 e medido em unidade de container, nao em vw. POR QUE cqi E NAO vw. O que a frase precisa caber e a coluna do cartao, e a relacao dela com a janela muda tres vezes descendo a pagina: ate 767px o cartao ocupa a largura toda, dos 768 aos 1023 ele trava em 480px, e dos 1024 para cima em 520px, com o padding mudando junto. Fora isso, a barra de rolagem do desktop tira mais 15px da conta e some no celular. Em vw isso vira uma fila de breakpoints, cada um com um numero medido a mao e um deles fatalmente errado depois da proxima mexida no cartao. Em cqi o h2 mede a caixa em que ele esta, e nao sobra conta nenhuma para manter. O TETO DE 2.1rem NAO E LIMITE DE CABER, e de desenho. Entre 540px e 767px o cartao e a largura inteira da tela, a coluna passa dos 600px e o 8.5cqi pediria 56px, maior que o h2 das secoes. O teto segura o cartao no lugar dele na hierarquia. O piso de 1rem so entraria numa coluna de menos de 188px, que nao existe na pagina. A primeira declaracao de font-size, em vw, e o plano B de quem nao tem unidade de container. Ela nao acerta o corpo tao bem, mas erra para baixo. POR QUE text-wrap: wrap, E NAO O balance DA SECAO 03. A chamada, "Texturas e acabamentos que transformam superficies.", cai em tres linhas de 320px a 1440px, e em duas na faixa dos 600px. Na quebra normal ela desce em escada, 404 / 295 / 194px no desktop, que e como a frase se le. O balance procura tres linhas do mesmo tamanho e com estas palavras nao acha: ele sobe em escada invertida, 157 / 269 / 389px, com "Texturas e" pendurado sozinho na primeira linha. Dai o wrap, que devolve este h2, e so este, para a quebra normal. AO TROCAR A CHAMADA, MECA DE NOVO: as larguras acima sao desta frase. */ .ambiente__bloco h2 { /* a primeira linha e o plano B de quem nao tem unidade de container; a segunda ganha em todo navegador que tem, e e ela que vale */ font-size: clamp(1rem, 5.9vw, 2.1rem); font-size: clamp(1rem, 8.5cqi, 2.1rem); text-wrap: wrap; } .ambiente__bloco p { color: var(--tinta-suave); max-width: 42ch; } .ambiente__bloco .link-seta { margin-top: 4px; justify-self: start; } /* No celular o cartao de texto media 416px dentro de uma faixa de 480: a foto sobrava como uma moldura de dois dedos em volta dele e a secao inteira lia como caixa branca sobre fundo listrado. Aqui a faixa deixa de ter altura fixa: a foto entra como banda 3:2 e o cartao desce para baixo dela, subindo 44px por cima da borda para os dois continuarem sendo um bloco so. O FUNDO E MARINHO, e ja foi areia. Enquanto a faixa do desktop era full bleed, o marinho que sobrava embaixo do cartao no celular era mesmo uma faixa escura sem funcao entre a foto e os produtos, e a areia resolvia. Isso mudou quando o desktop virou foto de um lado e marinho do outro: agora o marinho nao esta sobrando, ele e a outra metade da composicao. No celular a mesma divisao acontece deitada, foto em cima e marinho embaixo, com o cartao montado em cima da junta das duas. Os 44px de padding embaixo sao o que faz o marinho aparecer depois do cartao; sem eles a secao terminaria rente a ele e sobrariam so as duas tiras de 20px do gutter, que leem como descuido. O degrade sobre a foto continua desligado: ele existia para o texto ser legivel por cima dela, e aqui nao ha mais texto por cima. */ @media (max-width: 767px) { .ambiente { display: block; height: auto; min-height: 0; padding-bottom: 44px; background: var(--marinho); } /* A banda era 3/2 quando a foto prevista era uma sala em 16:9. A fachada que entrou no lugar mede 1079x895, quase 5:4, e num 3/2 o cover comia um quinto da altura: sumia a linha do telhado e sobrava a faixa das janelas. Em 4/3 a perda cai para um decimo e a fachada aparece inteira. Trocando a foto, confira a proporcao dela antes de confiar neste numero. */ .ambiente__midia { position: relative; aspect-ratio: 4 / 3; } .ambiente__midia::after { display: none; } .ambiente__container { display: block; } .ambiente__bloco { max-width: none; margin-top: -44px; padding: 28px 24px 30px; background: var(--branco); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--sombra-3), var(--base-marcada); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* DESKTOP, DOS 1024 PARA CIMA: a foto para de ser o fundo da faixa e vira um objeto dentro dela. Ocupa uma banda que sai da borda esquerda da secao e termina logo depois da quina esquerda do cartao; o que sobra a direita fica no marinho que a .ambiente ja tinha de fundo. O cartao encosta de leve na foto em vez de flutuar no meio dela. A LARGURA DA BANDA NAO E UM PALPITE. Ela e a posicao da quina esquerda do cartao mais a sobreposicao pedida. O cartao esta encostado a direita de um .container centrado, entao essa quina mede, a partir da borda esquerda da secao: (100% + min(100%, --largura-max)) / 2 - --gutter - --ambiente-cartao O primeiro termo e a borda direita do container: a sobra de um lado so, que e metade da sobra total, mais a largura dele. O min() cobre as duas situacoes de uma vez, porque enquanto a janela for mais estreita que o --largura-max o container ocupa tudo e o termo empata em 100%. Dai se tira o respiro do container e a largura do cartao, e o que sobra e onde ele comeca. Como a conta le as mesmas tres variaveis que posicionam o cartao, a sobreposicao fica exatamente nos 72px em qualquer largura, e continua certa se um dia o --largura-max, o --gutter ou o cartao mudarem de medida. NAO TROQUE ISTO POR UMA PORCENTAGEM FIXA. Entre 1024px e 1920px a quina esquerda do cartao anda de 45% para 53% da secao, e qualquer numero unico ou avanca por cima da foto ou perde o encosto numa das pontas do intervalo. As porcentagens sao do .ambiente, e nao da janela: com 100vw a barra de rolagem entraria na conta e a banda escorregaria uns pixels para a direita. Abaixo de 1024 nada disso vale. A banda so tem sentido com largura de sobra: em 768px ela mediria 320px contra 717px de altura numa tela de tablet em pe, uma tira estreita que corta a fachada em uma janela e meia. Ate os 1023 a faixa continua como sempre foi, foto cobrindo tudo com o cartao por cima, e no celular ela continua empilhada. */ @media (min-width: 1024px) { .ambiente--direita .ambiente__midia { right: auto; width: calc( (100% + min(100%, var(--largura-max))) / 2 - var(--gutter) - var(--ambiente-cartao) + var(--ambiente-sobreposicao) ); } } /* -------------------------------------------------------------------------- 11. PRODUTOS, GRADE DE CARTOES ESTA SECAO JA FOI EDITORIAL, sem card, sem borda e sem fundo, e virou cartao em 31/08/2026 junto com o sistema de elevacao. O que a mudanca compra e o contraste que da o nome a secao: a FOTO AFUNDA e o CARTAO LEVANTA. Um poco e uma placa na mesma peca, e e isso que se le como profundidade. Chapada, a grade editorial nao tinha como dizer isso, e a empresa vende exatamente isso. Se um dia voltar a ser editorial, tire o padding, o fundo, a borda e a sombra do .produto e o ::after do .produto__midia. Nada mais depende deles. -------------------------------------------------------------------------- */ .produtos { display: grid; grid-template-columns: 1fr; gap: 56px 32px; } /* imagem em cima, corpo ocupa o resto: mantem os cards da linha alinhados. A borda e branca, e nao da cor da linha do site: ela nao existe para desenhar o contorno do cartao, existe para ser a quina de cima pegando a luz. Sobre a areia ela quase nao aparece no topo, que e o certo, e o que fecha o cartao por baixo e o inset escuro que vem junto da sombra. Contorno desenhado e retangulo; quina iluminada mais base marcada e placa levantada. */ .produto { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 16px 16px 20px; background: var(--branco); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: var(--raio); box-shadow: var(--sombra-2), var(--base-marcada); transition: transform 280ms var(--suave), box-shadow 280ms var(--suave); } /* O POCO. A foto fica rebaixada dentro do cartao, e nao colada em cima dele: e o contraste entre ela afundada e o cartao levantado que se le como profundidade. Uma coisa so elevada nao tem com o que ser comparada. A sombra interna mora num ::after, e nao no proprio .produto__midia, porque inset box-shadow pinta acima do fundo do elemento mas ABAIXO do conteudo dele: a foto, que e opaca e cobre a caixa inteira, esconderia a sombra inteira. O ::after passa por cima da foto. O pointer-events: none e para ele nao roubar o clique do link que envolve o cartao. */ .produto__midia { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--areia-escura); } .produto__midia::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: var(--poco); } .produto__midia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 280ms var(--suave); } /* No hover quem sobe e o CARTAO INTEIRO, 6px, passando do nivel 2 para o 3. Ja foi a moldura da foto subindo 16px sozinha, de volta quando a secao era editorial e nao havia cartao para levantar. Agora seria a foto escapando da propria peca. Sao 6px e nao mais porque a sombra e que faz o trabalho: a distancia percebida vem do borrao passando de 24px para 48px, e o deslocamento so confirma. Card que salta 16px com sombra pesada vira balao. A foto cresce 4% dentro do poco, no mesmo tempo e na mesma curva, e o overflow do poco corta a sobra. Os dois movimentos precisam terminar juntos, senao a foto continua andando depois que o cartao parou. O will-change e so em transform, nunca em box-shadow: promover a camada ajuda o deslocamento e nao ajuda em nada a sombra, que e repintada de qualquer jeito. Fica dentro do @media (hover: hover) para nao promover seis camadas em celular, onde nada disto roda. */ @media (hover: hover) { .produto { will-change: transform; } .produto:hover, .produto:focus-within { z-index: 2; transform: translateY(-6px); box-shadow: var(--sombra-3), var(--base-marcada); } .produto:hover .produto__midia img, .produto:focus-within .produto__midia img { transform: scale(1.04); } } /* o paragrafo estica, entao o botao fica na mesma altura em todos os cards */ .produto__corpo { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; justify-items: start; } .produto__corpo h3 { font-size: 1.5rem; } .produto__corpo p { font-size: 0.9375rem; color: var(--tinta-suave); max-width: 34ch; } /* O pedido de preco era um link de texto e se perdia no meio do paragrafo. Virou botao cheio, um por acabamento, com o nome do produto dentro: quem chega pelo Google em "grafiato" cai no card certo e o botao ja diz do que se trata, sem depender do titulo logo acima. */ .produto__cta { margin-top: 6px; } @media (max-width: 639px) { /* Seis fotos em 4:5 numa coluna so davam 437px de altura cada, e a secao sozinha levava 4506px de rolagem, quase um terco da pagina. O quadrado corta 87px por foto e ainda mostra parede suficiente para a textura se ler de perto. No desktop, onde os cards ficam lado a lado, o 4:5 continua. */ .produtos { gap: 44px; } .produto__midia img { aspect-ratio: 1 / 1; } /* 34ch dao 255px e a coluna do celular tem 350: o paragrafo quebrava cedo e virava uma tira estreita com um palmo de vazio ao lado. No desktop o limite continua valendo, que la a coluna e mais larga que a linha confortavel. */ .produto__corpo p { max-width: none; } } /* -------------------------------------------------------------------------- 12. CORES A cartela deixou de rolar na horizontal e virou grade fixa de sete por duas. O fundo da secao e fixo: quem responde ao clique e o tamanho dos quadrados, nao a cor da parede atras deles. -------------------------------------------------------------------------- */ /* Faixa de ponta a ponta, e nao mais um cartao de 54ch parado a esquerda com meia linha vazia ao lado. O texto encolheu para um titulo e uma frase, entao a faixa fica baixa e nao rouba altura da cartela, que e o que a secao tem para mostrar. O max-width: none derruba dois limites de uma vez: os 54ch daqui e os 46rem que o .secao__cabecalho impoe a todo cabecalho de secao. Funciona porque este bloco vem depois daquele na folha, e as duas regras valem uma classe cada. */ .cores-moldura { background: var(--areia); border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px 28px; max-width: none; } /* A frase e curta e cabe numa linha so na largura cheia. Os 60ch do .lead padrao existem para paragrafo corrido; aqui eles quebrariam a frase em duas linhas no meio de uma faixa larga, sem ganho de leitura nenhum. */ .cores-moldura .lead { max-width: none; } .cores-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } /* CARTELA FECHADA: a grade guarda as 76 cores e mostra so as primeiras. O corte nao e um numero unico, e uma fileira cheia em cada largura: com 3 colunas sobra fileira quebrada em 10, com 5 sobra em 14, e meia fileira orfa em cima do botao de abrir parece erro de montagem, nao escolha. Nove aqui, dez a partir de 640px e catorze a partir de 1024px; os dois ultimos moram na secao 21, junto do numero de colunas de cada faixa, que e quem manda no corte. O :not(.is-expandida) vale uma classe a mais que o seletor sem ele, entao quando o JS liga a classe nenhuma destas regras casa e a grade abre sozinha, sem precisar de regra de contraponto. Nos blocos responsivos o reset e :nth-child(n+1), e nao o seletor cru, para empatar a especificidade com o corte da faixa de baixo e ganhar por vir depois na folha. display: none, e nao visibility, porque as escondidas precisam sair do fluxo do grid, da ordem de tabulacao e do leitor de tela. */ .cores-grade:not(.is-expandida) > .swatch:nth-child(n+10) { display: none; } /* O botao de abrir. Fica fora da grade, centralizado, com folga suficiente para nao ser lido como mais uma amostra da ultima fileira. */ .cores-mais { margin-top: 36px; text-align: center; } /* A seta do sprite aponta para a direita: girada 90 graus ela vira o "abre para baixo" e, com a cartela aberta, -90 graus a devolve apontando para cima. O translateX de 3px do hover entra DEPOIS do giro, entao ele anda no sentido para onde a seta aponta, que e o mesmo gesto do resto da pagina. As quatro regras precisam do :hover/:focus-visible escritos aqui porque .btn:hover .btn__seta vale tres classes e apagaria o giro. */ .cores-mais__btn .btn__seta { transform: rotate(90deg); } .cores-mais__btn:hover .btn__seta, .cores-mais__btn:focus-visible .btn__seta { transform: rotate(90deg) translateX(3px); } .cores-mais__btn[aria-expanded="true"] .btn__seta { transform: rotate(-90deg); } .cores-mais__btn[aria-expanded="true"]:hover .btn__seta, .cores-mais__btn[aria-expanded="true"]:focus-visible .btn__seta { transform: rotate(-90deg) translateX(3px); } /* As cores que entram quando a cartela abre. Transicao nao serve aqui: elas saem de display: none, e o navegador nao interpola a partir dele. Dai a animacao, com o atraso de cada uma escrito pelo main.js. O fill backwards, e nao both: enquanto o atraso corre a amostra fica no estado inicial, mas assim que a animacao acaba o transform volta a ser o que o CSS mandar. Com "both" o transform: none do fim ficaria grudado no elemento e o clique de ampliar, que e um scale, nao teria efeito nenhum. */ @keyframes cor-entra { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } } .swatch--nova { animation: cor-entra 380ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards; animation-delay: var(--d, 0ms); } /* o swatch virou