/* ============================================================================ BLOCOS — Starter de landing pages ORCA ---------------------------------------------------------------------------- Camada 2 de 3. Depende de tokens.css, que deve vir ANTES no . REGRA ÚNICA: nenhum valor literal aqui. Cor, tamanho, raio, sombra e espaçamento saem sempre de var(--token). Se faltar token, cria-se o token — não se escreve o valor. Índice 0 Base e utilitários 1 Topo 9 Vídeo 2 Herói 10 Depoimentos 3 Carrossel 11 Planos 4 Faixa 12 Perguntas 5 Texto+imagem 13 Prático 6 Cartões 14 Chamada final 7 Cartão largo 15 Rodapé 8 Galeria 16 Flutuantes e texturas ========================================================================== */ /* ========================================================================== 0. BASE E UTILITÁRIOS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--corpo); font-size: var(--t-base); line-height: var(--entrelinha-corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Sem transition aqui: transicionar background-color no body congela a cor quando a variável de tema muda (verificado no Chrome). */ } img, video { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--display); font-weight: var(--peso-titulo); line-height: var(--entrelinha-titulo); letter-spacing: -.015em; text-wrap: balance; margin: 0; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } p { margin: 0; max-width: var(--medida); } a { color: inherit; } :focus-visible { outline: 2px solid var(--realce); outline-offset: 3px; border-radius: var(--raio-cartao); } .envelope { width: min(100% - (var(--margem-lateral) * 2), var(--largura-conteudo)); margin-inline: auto; } .secao { padding-block: var(--respiro-secao); position: relative; } .rotulo { font-size: var(--t-mini); font-weight: 700; letter-spacing: var(--espacamento-rotulo); text-transform: uppercase; color: var(--acento); display: flex; align-items: center; gap: var(--e2); } .rotulo::before { content: ""; width: var(--e4); height: 1px; background: currentColor; flex: none; } .rotulo--centro { justify-content: center; } /* --- utilitários de cor: sempre por token, nunca literal --- */ .cor-acento { color: var(--acento); } .cor-realce { color: var(--realce); } .cor-brasa { color: var(--brasa); } .cor-destaque { color: var(--destaque, var(--realce)); } .cor-fraca { color: var(--tinta-fraca); } /* --- botões --- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--botao-altura); padding: var(--botao-padding); background: var(--brasa); color: var(--brasa-tinta); font: 700 .95rem var(--corpo); text-decoration: none; border: 1px solid transparent; border-radius: var(--raio-botao); cursor: pointer; transition: transform var(--transicao-rapida), filter var(--transicao-rapida); } .botao:hover { transform: translateY(-2px); filter: brightness(1.08); } .botao--linha { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 35%, transparent); } .botao--linha:hover { border-color: var(--realce); color: var(--realce); } .botao--texto { background: transparent; color: var(--acento); padding-inline: var(--e2); } /* Botão em honey bronze, para quando o fundo não deixa o --brasa se destacar. A cor do texto tem token PRÓPRIO: usar --tinta quebra dentro de uma seção que redefine --tinta (herói de fundo escuro), e o texto some no botão. */ .botao--destaque { background: var(--destaque, var(--realce)); color: var(--destaque-tinta, #1A1A1A); } .botao--g { min-height: var(--botao-altura-g); padding: var(--botao-padding-g); font-size: var(--t-medio); } .botao[disabled], .botao[aria-disabled="true"] { opacity: .45; pointer-events: none; } .acoes { display: flex; flex-wrap: wrap; gap: var(--e3); } .acoes--centro { justify-content: center; } /* --- molduras de foto --- Cada uma corresponde a um slot da especificação. A composição em degradê existe para a página ficar apresentável ANTES de a foto do cliente chegar. */ .moldura { position: relative; /*
nasce com margin: 1em 40px do navegador. Dentro de um cartão isso encolhe a foto em 80px e desalinha a moldura da borda. */ margin: 0; display: block; border: 1px solid var(--linha); border-radius: var(--raio-midia); overflow: hidden; background: radial-gradient(90% 70% at 30% 15%, color-mix(in srgb, var(--acento) 34%, transparent), transparent 70%), radial-gradient(80% 80% at 85% 90%, color-mix(in srgb, var(--realce) 30%, transparent), transparent 68%), linear-gradient(var(--angulo-bloco), var(--fundo-alto), var(--fundo-baixo)); } /* o é inline por padrão: sem isto ele não dá altura ao img e a foto colapsa dentro da moldura */ .moldura picture { display: block; width: 100%; height: 100%; } .moldura img { display: block; width: 100%; height: 100%; object-fit: cover; } .moldura figcaption { position: absolute; inset: auto 0 0 0; padding: var(--e5) var(--e3) var(--e3); font-size: var(--t-peq); color: var(--tinta); background: linear-gradient(to top, color-mix(in srgb, var(--fundo-baixo) 92%, transparent), transparent); } .moldura--16x9 { aspect-ratio: 16 / 9; } .moldura--21x9 { aspect-ratio: 21 / 9; } .moldura--4x5 { aspect-ratio: 4 / 5; } .moldura--4x3 { aspect-ratio: 4 / 3; } .moldura--1x1 { aspect-ratio: 1 / 1; } .moldura--3x4 { aspect-ratio: 3 / 4; } /* ========================================================================== 1. TOPO ========================================================================== */ .topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--margem-lateral); z-index: var(--z-topo); } /* fixo com fundo desfocado */ .topo--fixo { position: fixed; inset: 0 0 auto 0; background: color-mix(in srgb, var(--fundo-baixo) 82%, transparent); backdrop-filter: blur(14px); padding-block: var(--topo-respiro); /* SEM transition aqui, de propósito. Transicionar este padding trava o valor no inicial e a barra nunca encolhe — testado com `padding`, com `padding-block` e com a variável registrada por @property. Todas as três travam no Chrome. A troca é instantânea, e barra que encolhe na hora é melhor que barra que não encolhe nunca. */ } /* Encolhe ao passar a primeira dobra. O respiro é o único que muda: a altura do botão (44px de alvo mínimo) é o piso e não pode encolher junto. */ .topo--fixo[data-encolhido="sim"] { padding-block: var(--topo-respiro-fino); } /* integrado ao herói: sem fundo, flutua sobre a imagem */ .topo--integrado { position: absolute; inset: 0 0 auto 0; background: transparent; backdrop-filter: none; } .marca { font-family: var(--display); font-size: var(--t-h3); font-weight: var(--peso-display); letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--toque-min); } .marca em { font-style: italic; color: var(--realce); } .menu { display: none; gap: var(--e5); font-size: var(--t-peq); font-weight: 500; } .menu a { text-decoration: none; color: var(--tinta-fraca); transition: color var(--transicao-rapida); display: inline-flex; align-items: center; justify-content: center; /* alvo de 44px nos dois eixos, mesmo com palavra curta */ min-height: var(--toque-min); min-width: var(--toque-min); } .menu a:hover { color: var(--tinta); } @media (min-width: 900px) { .menu { display: flex; } } /* --- topo em três colunas: menu REALMENTE centralizado --- Com space-between o menu fica no meio "por acaso" e desloca conforme o tamanho da marca e do botão. O grid 1fr auto 1fr fixa o centro. */ .topo--tres { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .topo--tres .menu { justify-self: center; } .topo--tres > :last-child { justify-self: end; } /* O botão precisa se encolher sozinho, não só quando é o último filho: desde que o sanduíche entrou, ele é o último do código (mesmo escondido no desktop, `:last-child` conta), e o botão passou a esticar pela coluna inteira de 1fr — virou uma pílula de ponta a ponta. */ .topo--tres > .botao { justify-self: end; } @media (max-width: 899px) { .topo--tres { grid-template-columns: 1fr auto; } } /* --- MENU SANDUÍCHE (só abaixo de 900px) --- Acima disso os links cabem na barra e o botão nem existe. Este bloco precisa vir DEPOIS da regra de colunas acima: mesma força, e num empate vence quem está por último. Escrito antes, a barra continuava com duas colunas e o botão do sanduíche caía numa segunda linha, engordando o topo de 82px para 134px. */ .sanduiche { display: none; } @media (max-width: 899px) { /* minmax(0, …), não 1fr: o mínimo automático de `1fr` é a largura natural da marca, então a coluna nunca encolhe, a barra fica mais larga que a tela e o que está à direita (botão e sanduíche) sai para fora do vidro. */ .topo--tres { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e2); } .sanduiche { display: inline-flex; align-items: center; justify-content: center; width: var(--toque-min); height: var(--toque-min); padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; } /* Os três riscos: o do meio é o próprio elemento, os outros dois são pseudo-elementos deslocados — evita três só para desenhar. */ .sanduiche__risco, .sanduiche__risco::before, .sanduiche__risco::after { content: ""; display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--transicao-rapida), opacity var(--transicao-rapida); } .sanduiche__risco { position: relative; } .sanduiche__risco::before { position: absolute; top: -7px; } .sanduiche__risco::after { position: absolute; top: 7px; } .sanduiche[aria-expanded="true"] .sanduiche__risco { background: transparent; } .sanduiche[aria-expanded="true"] .sanduiche__risco::before { top: 0; transform: rotate(45deg); } .sanduiche[aria-expanded="true"] .sanduiche__risco::after { top: 0; transform: rotate(-45deg); } /* O painel é uma LINHA da própria barra, não uma caixa flutuante. Posicionamento absoluto aqui não serve: filho absoluto de um container grid é ancorado na área de grid dele, não na barra inteira — o painel saía com 125px de largura, preso à coluna onde o menu estava. Como a barra é fixa, crescer para baixo já dá o efeito de painel. */ /* A barra e o painel são linhas FIXAS do grid, não posições automáticas. Sem isto o painel (que ocupa da primeira à última coluna) empurrava o botão do sanduíche para uma terceira linha: aberto, o "X" descia 261px e ia parar no rodapé do painel, longe de onde o usuário tinha clicado. No código o menu vem antes do botão, e a colocação automática segue a ordem do código, não a da tela. */ .topo--tres > .marca, .topo--tres > .botao, .topo--tres > .sanduiche { grid-row: 1; } .menu[data-aberto="sim"] { display: grid; grid-row: 2; grid-column: 1 / -1; /* o topo em três colunas centraliza o menu, e centralizado o item encolhe até o tamanho do conteúdo — o painel saía com 85px de largura */ justify-self: stretch; gap: 0; margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid var(--linha); } .menu[data-aberto="sim"] a { justify-content: flex-start; font-size: var(--t-base); color: var(--tinta); border-bottom: 1px solid var(--linha); } .menu[data-aberto="sim"] a:last-child { border-bottom: 0; } /* Aberto, a barra deixa de ser translúcida: texto de menu sobre a página borrada atrás fica ilegível justamente onde a foto clareia. */ .topo--fixo:has(.menu[data-aberto="sim"]) { background: var(--fundo-baixo); backdrop-filter: none; } } /* --- marca em duas linhas: nome + descritor --- */ .marca--dupla { display: grid; gap: 0; line-height: 1; min-height: var(--toque-min); align-content: center; } .marca__nome { font-family: var(--display); font-weight: var(--peso-display); font-size: var(--t-h3); letter-spacing: -.02em; } .marca__descritor { font-family: var(--corpo); font-weight: 700; font-size: var(--t-mini); letter-spacing: var(--espacamento-rotulo); text-transform: uppercase; color: var(--acento); } /* --- topo sólido: sem transparência, para a textura da página não passar --- */ .topo--solido { background: var(--fundo); backdrop-filter: none; } /* ========================================================================== 2. HERÓI ========================================================================== */ .heroi { position: relative; min-height: 100svh; display: grid; align-content: end; padding-block: calc(var(--e6) * 2) var(--e6); overflow: hidden; isolation: isolate; } .heroi__conteudo { display: grid; gap: var(--e4); justify-items: start; } .heroi h1 { text-shadow: var(--sombra-texto); max-width: 14ch; } .heroi h1 em { font-style: italic; color: var(--realce); } .heroi p { font-size: var(--t-medio); max-width: 46ch; text-shadow: var(--sombra-texto); } /* cena em degradê — usada quando não há foto */ .heroi__cena { position: absolute; inset: 0; z-index: -2; background: var(--grad-cena); } .heroi__cena::after { content: ""; position: absolute; inset: 0; background: var(--grad-scrim); } /* cena com foto do cliente */ .heroi__foto { position: absolute; inset: 0; z-index: -2; } .heroi__foto img { width: 100%; height: 100%; object-fit: cover; } .heroi__foto::after { content: ""; position: absolute; inset: 0; background: var(--grad-scrim); } /* --- herói que é só imagem, começando abaixo do topo fixo --- Use quando o topo for opaco: sem isso a imagem passa por baixo da barra e você perde a faixa de cima da foto. */ .heroi--imagem { min-height: calc(100svh - var(--topo-altura)); margin-top: var(--topo-altura); padding-block: 0; align-content: stretch; } .heroi--imagem .heroi__foto { position: relative; z-index: auto; } .heroi--imagem .heroi__foto img { height: 100%; } /* No celular a foto vazada aparece INTEIRA. Com `cover` o navegador preenche a tela cortando o que sobra, e numa figura em pé o primeiro a sair é o alto — onde estão o rosto e a logo. Como a foto é vazada, `contain` não deixa tarja nenhuma: o que sobra dos lados é o próprio verde da página. O título e o botão continuam SOBRE a imagem, como no desktop. */ @media (max-width: 700px) { .heroi--imagem .heroi__foto img { object-fit: contain; object-position: center top; } } /* Empilha foto e conteúdo na MESMA célula do grid, em vez de dividir a altura. Sem isso a foto e o botão viram duas linhas e o herói dobra de tamanho. */ /* --- SUPERFÍCIE DE COR --- Qualquer bloco vira uma faixa colorida com texto claro. Os tokens de tinta são redefinidos LOCALMENTE, então tudo dentro do bloco (texto de apoio, bordas, rótulos) acompanha sem precisar de classe extra — e o resto da página continua intocado. No herói, exige foto VAZADA: com foto retangular o retângulo aparece. */ .em-cor { background: var(--cor-fundo); color: var(--cor-tinta); --tinta: var(--cor-tinta); /* Mistura com o FUNDO, não com transparente: transparência sobre cor escura derruba o contraste do texto de apoio abaixo do mínimo legível. */ --tinta-fraca: color-mix(in srgb, var(--cor-tinta) 88%, var(--cor-fundo)); --linha: color-mix(in srgb, var(--cor-tinta) 28%, var(--cor-fundo)); } .topo.em-cor { backdrop-filter: none; } /* Dissolve a base da seção colorida na cor da página. Fica ACIMA da imagem e ABAIXO da ação, para o botão não ser lavado pelo degradê. Quatro paradas: com duas, o começo do degradê aparece como uma faixa. */ .em-cor--dissolve::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--dissolve-altura, 30%); z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--fundo) 0%, color-mix(in srgb, var(--fundo) 88%, transparent) 20%, color-mix(in srgb, var(--fundo) 52%, transparent) 48%, transparent 100%); } .heroi.em-cor .heroi__foto::after { display: none; } /* nada a dissolver */ /* O descritor da marca usa --acento, que some sobre cor. Sobre superfície colorida ele passa para a cor de destaque — na versão CLARA, porque em corpo pequeno o destaque puro fica abaixo do contraste mínimo. */ .em-cor .marca__descritor { color: var(--destaque-claro, var(--destaque, var(--realce))); } .heroi--imagem { grid-template-areas: "cena"; } .heroi--imagem > * { grid-area: cena; } /* Ação sobre a imagem, na altura definida por --heroi-acao-base. Posicionamento ABSOLUTO de propósito: `bottom` em porcentagem se mede pela ALTURA do container, enquanto `padding-bottom` em porcentagem se mede pela LARGURA — o que colocaria o botão em qualquer lugar menos onde se quer. O envelope interno alinha o botão pela mesma margem do conteúdo das outras seções, para o eixo continuar batendo quando o herói ganhar título. */ .heroi__acao { position: absolute; left: 0; right: 0; bottom: var(--heroi-acao-base); z-index: 2; } .heroi__acao > .envelope { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e4); } .heroi__acao--centro > .envelope { align-items: center; text-align: center; } .heroi__acao--direita > .envelope { align-items: flex-end; text-align: end; } /* Título sobre a foto. Menor que o herói padrão e com medida mais larga: uma frase longa em --t-h1 vira cinco linhas e não cabe na dobra. */ .heroi h1.heroi__titulo { font-size: var(--heroi-titulo-tamanho, var(--t-h2)); max-width: var(--heroi-titulo-medida, 24ch); text-shadow: none; } /* Primeira linha do título em corpo maior. Vira bloco, então não precisa de
depois dela. line-height 1 para não abrir buraco entre as linhas. */ .heroi__titulo .linha-forte { display: block; font-size: var(--heroi-titulo-forte, 1.45em); line-height: 1; } /* --- contorno na letra --- paint-order: stroke fill desenha o traço ATRÁS do preenchimento. Sem isso o contorno come a forma da letra por dentro e o texto engorda e some. */ .contorno { paint-order: stroke fill; -webkit-text-stroke: var(--contorno-espessura) var(--contorno-cor); } /* --- esmaecimento: a foto dissolve na cor da página --- Quatro paradas em vez de duas. Com duas o corte fica visível como uma faixa; com quatro a transição some. */ .heroi__foto--esmaecer::after { background: linear-gradient(to top, var(--fundo) 0%, color-mix(in srgb, var(--fundo) 92%, transparent) 8%, color-mix(in srgb, var(--fundo) 65%, transparent) 20%, color-mix(in srgb, var(--fundo) 28%, transparent) 38%, transparent 60%); } /* esmaecer também nas laterais, para a foto não ter borda dura */ .heroi__foto--esmaecer--lados::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, var(--fundo) 0%, transparent 12%, transparent 88%, var(--fundo) 100%); } /* variante dividida: texto de um lado, foto do outro */ .heroi--dividido { align-content: center; } .heroi--dividido .envelope { display: grid; gap: var(--e5); align-items: center; } @media (min-width: 900px) { .heroi--dividido .envelope { grid-template-columns: 1.05fr .95fr; } } .heroi--dividido h1 { text-shadow: none; } .heroi--dividido p { text-shadow: none; } /* ========================================================================== 3. CARROSSEL — rolagem com encaixe, sem biblioteca ========================================================================== */ .carrossel { display: flex; gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--e2); } .carrossel > * { flex: 0 0 min(88%, 720px); scroll-snap-align: center; } .carrossel--cheio > * { flex-basis: 100%; } .carrossel__pontos { display: flex; justify-content: center; margin-top: var(--e2); } /* O ponto é pequeno por estética, mas a área clicável tem 44px. Sem isso o controle fica impossível de acertar no celular. */ .carrossel__ponto { width: var(--toque-min); height: var(--toque-min); border: 0; padding: 0; background: none; display: grid; place-content: center; cursor: pointer; } .carrossel__ponto::before { content: ""; display: block; width: var(--e2); height: var(--e2); border-radius: 999px; background: color-mix(in srgb, var(--tinta) 30%, transparent); transition: width var(--transicao-rapida), background var(--transicao-rapida); } .carrossel__ponto[aria-current="true"]::before { background: var(--realce); width: var(--e4); } /* ========================================================================== 4. FAIXA DE CREDENCIAIS ========================================================================== */ .faixa { border-block: 1px solid var(--linha); background: var(--fundo-alto); } /* NOTA GERAL SOBRE AS GRADES Todo `repeat(auto-fit, minmax(Npx, 1fr))` aqui usa `minmax(min(Npx, 100%), 1fr)`. Sem o `min(...)`, o N é um piso absoluto: numa tela mais estreita que N a coluna não encolhe, ela FURA a borda — a página inteira passa a ser mais larga que o aparelho e tudo aparece cortado. Com o `min`, o piso vira "N ou a largura disponível, o que for menor". */ .faixa ul { list-style: none; margin: 0; padding-block: var(--e4); display: grid; gap: var(--e3) var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .faixa li { display: grid; gap: var(--e1); } .faixa b { font-family: var(--display); font-weight: var(--peso-display); font-size: var(--t-numero); color: var(--realce); line-height: 1; } .faixa span { font-size: var(--t-peq); color: var(--tinta-fraca); } /* --- FAIXA COM FOTO DE FUNDO --- A faixa de números ganha uma imagem atrás. Ela é filha direta da seção (não do envelope), então já nasce da largura da tela — sem `100vw`, que contaria a barra de rolagem e criaria rolagem lateral. O véu escuro por cima não é enfeite: é o que garante o contraste do texto. Foto de fundo muda de claridade a cada pedaço, e sem ele o número branco sumiria justamente onde a imagem clareia. */ .faixa--foto { position: relative; isolation: isolate; border-block: 0; background: var(--fundo-baixo); overflow: hidden; } .faixa--foto > picture { position: absolute; inset: 0; z-index: -2; display: block; } .faixa--foto > picture img { width: 100%; height: 100%; object-fit: cover; } .faixa--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, color-mix(in srgb, var(--fundo-baixo) 72%, transparent), color-mix(in srgb, var(--fundo-baixo) 62%, transparent)); } .faixa--foto > .envelope { padding-block: var(--e6); } .faixa--foto h2 { margin-bottom: var(--e5); } /* ========================================================================== 5. TEXTO + IMAGEM ========================================================================== */ .dupla { display: grid; gap: var(--e5); align-items: center; } @media (min-width: 880px) { .dupla { grid-template-columns: 1.05fr .95fr; } .dupla--invertida > *:first-child { order: 2; } } .dupla__texto { display: grid; gap: var(--e4); justify-items: start; } /* Alinha as duas colunas pelo TOPO. O padrão centraliza, e quando a coluna de texto começa com o título da seção isso o empurra para baixo do topo da foto — a seção parece começar depois que já começou. */ .dupla--topo { align-items: start; } /* ========================================================================== 6. CARTÕES PEQUENOS Cada cartão tem gradiente próprio, todos no MESMO ângulo — é daí que vem a coesão que as referências mostram. ========================================================================== */ .cartoes { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr)); } .cartoes--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } /* Colunas EXPLÍCITAS, não `auto-fit`. Com auto-fit o navegador decide quantas colunas cabem, e o CSS não tem como saber qual cartão abre cada linha. Isso quebrava o separador da superfície contínua: a regra `* + *` põe linha e recuo em todo cartão menos o primeiro do CÓDIGO — então, quando a grade dobrava para duas colunas, o terceiro cartão (primeiro da segunda linha) aparecia com um risco à esquerda e 40px de recuo que o cartão de cima não tinha. As duas linhas ficavam desalinhadas e o texto encostava no risco do vizinho. Com a contagem explícita dá para dizer quem abre a linha: nth-child(2n+1) com duas colunas, nth-child(4n+1) com quatro. */ .cartoes--4 { grid-template-columns: 1fr; } @media (min-width: 700px) { .cartoes--4 { grid-template-columns: repeat(2, 1fr); } } /* 4 colunas só a partir de 1150px: em 1000px cada cartão ficava com 204px, estreito demais para títulos como "Desenvolvimento de Coleções". */ @media (min-width: 1150px) { .cartoes--4 { grid-template-columns: repeat(4, 1fr); } } .cartao { position: relative; display: grid; gap: var(--e2); align-content: start; padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--raio-cartao); overflow: hidden; isolation: isolate; min-height: 19rem; } .cartao::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9; } .cartao:nth-child(3n+1)::before { background: var(--grad-bloco-acento); } .cartao:nth-child(3n+2)::before { background: var(--grad-bloco-realce); } .cartao:nth-child(3n)::before { background: var(--grad-bloco-brasa); } /* Cartão de número. Fundo opaco de propósito: sobre foto, superfície translúcida deixa o mapa vazar e o contraste do texto passa a depender de que pedaço da imagem caiu atrás — some justamente onde a foto clareia. Precisa vir depois das regras de gradiente por posição acima: mesma especificidade, quem vence é quem está por último. */ .cartao.cartao--numero { min-height: 0; padding: var(--e5) var(--e4); gap: var(--e2); } .cartao.cartao--numero::before { background: var(--fundo-baixo); opacity: 1; } .cartao--numero b { font-family: var(--display); font-weight: var(--peso-display); font-size: var(--t-numero); color: var(--realce); line-height: 1; display: block; } .cartao--numero span { color: var(--tinta-fraca); } /* Cartão com foto sangrando no topo. Estrutura:
…
h3 + p
*/ .cartao--foto { padding: 0; overflow: hidden; gap: 0; grid-template-rows: auto 1fr; } .cartao--foto > .moldura { border: 0; border-radius: 0; } .cartao--foto .cartao__corpo { padding: var(--e4) var(--e5) var(--e5); display: grid; gap: var(--e2); align-content: start; } /* Cartão curto: só ícone e rótulo. O mínimo de 19rem do cartão normal deixa uma faixa de destaques com buraco no meio. */ .cartao--compacto { min-height: 0; padding: var(--e5) var(--e4); gap: var(--e3); justify-items: center; text-align: center; } .cartao__icone { font-size: var(--t-numero); line-height: 1; } .cartao p { color: var(--tinta-fraca); } .cartao__num { font-family: var(--display); font-weight: var(--peso-display); font-size: var(--t-numero); line-height: 1; color: color-mix(in srgb, var(--realce) 70%, transparent); } /* ========================================================================== 7. CARTÃO LARGO — ponta a ponta ========================================================================== */ .cartao-largo { position: relative; display: grid; align-content: end; gap: var(--e3); min-height: 26rem; padding: var(--e6) var(--e5); border-radius: var(--raio-midia); overflow: hidden; isolation: isolate; } .cartao-largo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--grad-bloco-acento); } .cartao-largo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cartao-largo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-scrim); } .cartao-largo h2, .cartao-largo p { text-shadow: var(--sombra-texto); } .cartao-largo--sangria { border-radius: 0; margin-inline: calc(50% - 50vw); } /* Cartão largo usado só como TEXTO, sem foto ao fundo: o parágrafo cresce e se ancora no centro do bloco, em vez de ficar deitado no rodapé esperando uma imagem que não vem. A medida (--texto-medida) é o que segura a legibilidade: sem ela, o texto grande atravessa o cartão inteiro e a linha fica longa demais para o olho achar o começo da seguinte. */ .cartao-largo--texto { --texto-tamanho: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); --texto-medida: 34ch; align-content: center; /* centro na VERTICAL */ justify-items: start; text-align: left; } .cartao-largo--texto p { font-size: var(--texto-tamanho); font-weight: 700; line-height: 1.28; max-width: var(--texto-medida); text-wrap: balance; } /* ========================================================================== 8. GALERIA ========================================================================== */ .galeria { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); } /* proporções variadas dão ritmo — o grid uniforme fica burocrático */ .galeria--ritmo > *:nth-child(3n+1) { aspect-ratio: 3 / 4; } .galeria--ritmo > *:nth-child(3n+2) { aspect-ratio: 1 / 1; } .galeria--ritmo > *:nth-child(3n) { aspect-ratio: 4 / 5; } /* ========================================================================== 9. VÍDEO — fachada: o iframe só entra no clique ========================================================================== */ .video { position: relative; aspect-ratio: 16 / 9; width: 100%; padding: 0; border: 1px solid var(--linha); border-radius: var(--raio-midia); overflow: hidden; cursor: pointer; color: inherit; font: inherit; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--brasa) 40%, transparent), transparent 70%), linear-gradient(var(--angulo-bloco), var(--fundo-alto), var(--fundo-baixo)); } .video iframe, .video img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; } .video__play { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--e3); justify-items: center; } .video__disco { width: 5.5rem; height: 5.5rem; display: grid; place-content: center; border-radius: 999px; background: var(--tinta); color: var(--fundo); font-size: var(--t-h3); transition: transform var(--transicao-rapida); } .video:hover .video__disco { transform: scale(1.07); } .video__rotulo { font-size: var(--t-peq); letter-spacing: var(--espacamento-rotulo); text-transform: uppercase; color: var(--tinta); } /* ========================================================================== 10. DEPOIMENTOS ========================================================================== */ .vozes { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .voz { display: grid; gap: var(--e3); /*
nasce com margin: 1em 40px do navegador — dentro da fila isso empurrava os depoimentos 18px para baixo do título. */ margin: 0; padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--fundo-alto); } .voz blockquote { margin: 0; font-family: var(--display); font-weight: var(--peso-titulo); font-size: var(--t-medio); line-height: 1.3; font-style: italic; } .voz cite { font-style: normal; font-size: var(--t-peq); color: var(--tinta-fraca); } /* Depoimento que é só foto — entra na mesma fila dos outros, com o mesmo tamanho e o mesmo canto. Como item de flex ele estica até a altura do cartão mais alto, então a foto acompanha as vozes sem precisar de altura fixa. */ .voz--foto { padding: 0; overflow: hidden; } .voz--foto picture, .voz--foto img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Chamada: uma frase que precisa de mais peso que um parágrafo e menos que um título. O trilho à esquerda dá esse meio-termo sem inventar cor nova. */ .chamada { border-left: 3px solid var(--realce); padding-left: var(--e4); font-size: var(--t-medio); } /* Lista de selos: itens curtos, cada um aberto por um emoji. Sem marcador do navegador — o emoji já é o marcador, e os dois juntos viram sujeira. */ .selos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); } .selos li { display: flex; gap: var(--e2); align-items: baseline; } /* ========================================================================== 11. PLANOS ========================================================================== */ .planos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .plano { display: grid; gap: var(--e3); align-content: start; padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--fundo-alto); } .plano--destaque { border-color: var(--realce); box-shadow: var(--sombra-2); position: relative; } .plano--destaque::before { content: attr(data-selo); position: absolute; top: 0; right: var(--e4); transform: translateY(-50%); background: var(--realce); color: var(--fundo); font-size: var(--t-mini); font-weight: 700; letter-spacing: var(--espacamento-rotulo); text-transform: uppercase; padding: var(--e1) var(--e2); border-radius: var(--raio-botao); } .plano__preco { font-family: var(--display); font-weight: var(--peso-display); font-size: var(--t-numero); line-height: 1; font-variant-numeric: tabular-nums; } .plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); font-size: var(--t-peq); } .plano li { display: flex; gap: var(--e2); } .plano li::before { content: "✓"; color: var(--sucesso); flex: none; } /* ========================================================================== 12. PERGUNTAS FREQUENTES —
, sem JavaScript ========================================================================== */ .perguntas { display: grid; gap: 0; border-top: 1px solid var(--linha); } .pergunta { border-bottom: 1px solid var(--linha); } .pergunta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding-block: var(--e4); min-height: var(--toque-min); cursor: pointer; list-style: none; font-family: var(--display); font-weight: var(--peso-titulo); font-size: var(--t-h3); } .pergunta summary::-webkit-details-marker { display: none; } .pergunta summary::after { content: "+"; color: var(--acento); font-size: var(--t-h3); flex: none; transition: transform var(--transicao-rapida); } .pergunta[open] summary::after { transform: rotate(45deg); } .pergunta__corpo { padding-bottom: var(--e4); color: var(--tinta-fraca); } /* ========================================================================== 13. PRÁTICO — endereço, horários ========================================================================== */ .pratico { display: grid; gap: var(--e5); padding: var(--e5); border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: var(--fundo-alto); } @media (min-width: 820px) { .pratico { grid-template-columns: 1fr 1fr; } } .pratico__coluna { display: grid; gap: var(--e3); align-content: start; } .horarios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); } .horarios li { display: flex; justify-content: space-between; gap: var(--e3); padding-bottom: var(--e2); border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; font-size: var(--t-peq); } .horarios span:last-child { color: var(--tinta-fraca); } /* ========================================================================== 14. CHAMADA FINAL ========================================================================== */ .final { position: relative; text-align: center; overflow: hidden; isolation: isolate; } .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 50% 120%, color-mix(in srgb, var(--brasa) 55%, transparent), transparent 62%), linear-gradient(180deg, var(--fundo), var(--fundo-baixo)); } .final .envelope { display: grid; gap: var(--e4); justify-items: center; } .final p { text-align: center; } /* ========================================================================== 15. RODAPÉ ========================================================================== */ .rodape { border-top: 1px solid var(--linha); padding-block: var(--e6) var(--e5); background: var(--fundo-baixo); font-size: var(--t-peq); color: var(--tinta-fraca); } .rodape .envelope { display: grid; gap: var(--e4); } @media (min-width: 760px) { .rodape .envelope { grid-template-columns: 1fr auto; align-items: end; } } .rodape__identidade { display: grid; gap: var(--e2); } .rodape__assinatura { font-size: var(--t-mini); } .rodape__assinatura a { color: var(--acento); text-decoration: none; } /* Rodapé em três colunas. Precisa vir DEPOIS da media query acima: mesma especificidade, e quem vence é quem está por último. O `>` limita a regra ao envelope do topo do rodapé — a barra de baixo tem o dela. */ .rodape--tres > .envelope { gap: var(--e5); } @media (min-width: 760px) { .rodape--tres > .envelope { grid-template-columns: repeat(3, 1fr); align-items: start; } } .rodape__slogan { font-family: var(--display); font-weight: var(--peso-titulo); font-size: var(--t-medio); color: var(--tinta); } /* Barra final, separada do corpo do rodapé por um fio. */ .rodape__base { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linha); font-size: var(--t-mini); } /* Mantém o mesmo vão das seções antes do rodapé. O respiro da última seção é um clamp que muda com a largura da tela, então o desconto é feito por conta: assim o total continua batendo em qualquer tamanho, e não só no desktop. */ .rodape--afastado { margin-top: calc(var(--e5) * 2.25 - var(--respiro-secao)); } .redes { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-inline: calc(var(--e2) * -1); } .redes a { text-decoration: none; transition: color var(--transicao-rapida); padding: var(--e2); min-height: var(--toque-min); display: inline-flex; align-items: center; } .redes a:hover { color: var(--realce); } /* ========================================================================== 16. FLUTUANTES E TEXTURAS ========================================================================== */ .zap { position: fixed; right: var(--e3); bottom: var(--e3); z-index: var(--z-flutuante); display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--toque-min); padding: var(--e2) var(--e3); background: #1FA855; /* cor da marca WhatsApp — exceção consciente */ color: #FFF; font-weight: 700; font-size: var(--t-peq); text-decoration: none; border-radius: 999px; box-shadow: var(--sombra-3); transition: transform var(--transicao-rapida); } .zap:hover { transform: translateY(-2px); } .zap span { display: none; } @media (min-width: 560px) { .zap span { display: inline; } } /* --- texturas: todas em CSS puro, sem arquivo de imagem --- */ .tex-grade::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 88px 88px; opacity: .35; mask-image: radial-gradient(120% 80% at 50% 0%, #000 10%, transparent 70%); } .tex-grao::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } .tex-pontos::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--linha) 1.5px, transparent 1.5px); background-size: 22px 22px; opacity: .5; } .tex-listras::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( var(--angulo-bloco), color-mix(in srgb, var(--acento) 12%, transparent) 0 2px, transparent 2px 14px); } .tex-vinheta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(75% 65% at 50% 45%, transparent 40%, var(--fundo-baixo) 100%); } /* Reserva espaço para as texturas posicionadas */ .tex-grade, .tex-grao, .tex-pontos, .tex-listras, .tex-vinheta { position: relative; isolation: isolate; } /* ========================================================================== 17. REVELAÇÃO NO SCROLL — CSS puro, sem biblioteca ========================================================================== */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .revelar { animation: revelar-subida linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; } } } @keyframes revelar-subida { from { opacity: 0; transform: translateY(var(--e4)); } to { opacity: 1; transform: none; } } /* ========================================================================== 18. TRILHOS — faixas de cor, horizontais ou verticais Usos: divisor entre seções · acento lateral num bloco · assinatura da marca. Cores vêm de --trilho-c1/c2/c3, sobrescrevíveis no próprio elemento:
========================================================================== */ .trilho { --_c1: var(--trilho-c1); --_c2: var(--trilho-c2); --_c3: var(--trilho-c3); height: var(--trilho-espessura); width: 100%; border: 0; margin: 0; background: var(--_c1); flex: none; } /* quantidade de cores — segmentos com corte seco */ .trilho--2 { background: linear-gradient(90deg, var(--_c1) 0 50%, var(--_c2) 50% 100%); } .trilho--3 { background: linear-gradient(90deg, var(--_c1) 0 33.333%, var(--_c2) 33.333% 66.666%, var(--_c3) 66.666% 100%); } /* degradê contínuo em vez de segmentos */ .trilho--degrade { background: linear-gradient(90deg, var(--_c1), var(--_c2)); } .trilho--degrade.trilho--3 { background: linear-gradient(90deg, var(--_c1), var(--_c2), var(--_c3)); } /* espessura */ .trilho--fino { --trilho-espessura: var(--trilho-fino); } .trilho--grosso { --trilho-espessura: var(--trilho-grosso); } /* vertical — troca o eixo do degradê junto */ .trilho--v { width: var(--trilho-espessura); height: auto; min-height: var(--e6); align-self: stretch; } .trilho--v.trilho--2 { background: linear-gradient(180deg, var(--_c1) 0 50%, var(--_c2) 50% 100%); } .trilho--v.trilho--3 { background: linear-gradient(180deg, var(--_c1) 0 33.333%, var(--_c2) 33.333% 66.666%, var(--_c3) 66.666% 100%); } .trilho--v.trilho--degrade { background: linear-gradient(180deg, var(--_c1), var(--_c2)); } .trilho--v.trilho--degrade.trilho--3 { background: linear-gradient(180deg, var(--_c1), var(--_c2), var(--_c3)); } /* de ponta a ponta, ignorando o envelope */ .trilho--sangria { width: 100vw; margin-inline: calc(50% - 50vw); } /* acento lateral: aplique em qualquer bloco */ .com-trilho { border-inline-start: var(--trilho-espessura) solid var(--trilho-c1); padding-inline-start: var(--e4); } .com-trilho--degrade { border-inline-start: 0; padding-inline-start: calc(var(--e4) + var(--trilho-espessura)); position: relative; } .com-trilho--degrade::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--trilho-espessura); background: linear-gradient(180deg, var(--trilho-c1), var(--trilho-c2), var(--trilho-c3)); } /* ========================================================================== 19. SUPERFÍCIE — caixas ou contínua data-superficie="cartoes" (padrão) cada bloco é uma caixa com borda data-superficie="continua" nada de caixa; a separação vem de espaçamento, trilho e textura A contínua é o que as referências fazem: a página parece uma peça só, não um empilhamento de cartões. ========================================================================== */ :root[data-superficie="continua"] .cartao, :root[data-superficie="continua"] .voz, :root[data-superficie="continua"] .plano, :root[data-superficie="continua"] .pratico { background: none; border: 0; box-shadow: none; padding-inline: 0; border-radius: 0; } :root[data-superficie="continua"] .cartao::before { display: none; } :root[data-superficie="continua"] .cartao { min-height: 0; padding-block: var(--e4); } :root[data-superficie="continua"] .faixa { background: none; } /* sem caixa, a separação passa a ser uma linha fina */ :root[data-superficie="continua"] .cartoes > * + *, :root[data-superficie="continua"] .vozes > * + *, :root[data-superficie="continua"] .planos > * + * { border-inline-start: 1px solid var(--linha); padding-inline-start: var(--e5); } @media (max-width: 700px) { :root[data-superficie="continua"] .cartoes > * + *, :root[data-superficie="continua"] .vozes > * + *, :root[data-superficie="continua"] .planos > * + * { border-inline-start: 0; border-block-start: 1px solid var(--linha); padding-inline-start: 0; padding-block-start: var(--e4); } } /* o destaque do plano continua existindo, mas por trilho em vez de caixa */ :root[data-superficie="continua"] .plano--destaque { border-inline-start: var(--trilho-grosso) solid var(--realce); padding-inline-start: var(--e4); } :root[data-superficie="continua"] .plano--destaque::before { display: none; } /* ========================================================================== 20. SEÇÃO EM FAIXA — separa sem caixa Alterna tons quase idênticos de fundo, de ponta a ponta. É a técnica da referência institucional: separa seções sem desenhar bordas. ========================================================================== */ .secao--faixa { background: var(--fundo-alto); } .secao--faixa-baixa { background: var(--fundo-baixo); } .secao--sangria { width: 100vw; margin-inline: calc(50% - 50vw); } .secao--sangria > .envelope { margin-inline: auto; } /* Seção que CONTINUA a anterior em vez de começar assunto novo. O respiro cheio de seção aparece duas vezes entre dois blocos vizinhos (o de baixo do primeiro + o de cima do segundo) e abre um vão enorme. Aqui o de cima cai para o mesmo vão da grade de cartões, então os dois blocos leem como um grupo só. */ .secao--continua { /* a margem negativa cancela o respiro de baixo da seção ANTERIOR; sem ela sobraria o respiro cheio dela mesmo com o padding daqui zerado */ --continua-vao: var(--e3); /* colado: o mesmo vão da grade de cartões */ margin-top: calc(var(--respiro-secao) * -1); padding-top: var(--continua-vao); } /* Escada de vãos, do mais colado ao mais solto. Sem modificador nenhum o vão é o da grade de cartões (16px) e os blocos leem como um grupo só; a partir daí cada degrau marca uma separação maior de assunto: .secao--continua 16px continuação direta + .secao--continua-folgada 60px assunto novo, com título próprio + .secao--continua-ampla 90px troca de capítulo */ .secao--continua-folgada { --continua-vao: calc(var(--e5) * 1.5); } .secao--continua-ampla { --continua-vao: calc(var(--e5) * 2.25); } /* O reset zera as margens dos títulos, então o respiro entre o título de uma seção e o conteúdo dela precisa ser dito aqui — sem isto o h2 encosta na primeira linha de cartões. */ .secao > .envelope > h2 { margin-bottom: var(--e5); } /* --- CARROSSEL HORIZONTAL --- Fila que rola de lado, arrastando com o mouse ou deslizando no dedo. O próximo cartão aparece pela METADE de propósito: é o que avisa que tem mais coisa para o lado. Uma fila que termina certinha na borda parece uma fila completa e ninguém arrasta. A largura do cartão sai da conta: sobrando a largura do trilho, tiram-se os vãos dos cartões inteiros e divide-se pelo total à vista (inteiros + a metade). Mudou --carrossel-cheios, a conta se refaz sozinha. */ .carrossel { --carrossel-cheios: 2; --carrossel-vao: var(--e3); display: flex; gap: var(--carrossel-vao); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; } .carrossel::-webkit-scrollbar { display: none; } .carrossel > * { flex: 0 0 calc((100% - var(--carrossel-cheios) * var(--carrossel-vao)) / (var(--carrossel-cheios) + 0.5)); scroll-snap-align: start; } /* enquanto arrasta: mãozinha fechada, o encaixe sai da frente (senão ele briga com o dedo/mouse a cada pixel) e nada dentro recebe clique ou seleção */ .carrossel[data-arrastando="sim"] { cursor: grabbing; scroll-snap-type: none; } .carrossel[data-arrastando="sim"] * { pointer-events: none; user-select: none; } /* Carrossel que vaza pela DIREITA até a borda da tela. Dentro do envelope, o cartão seguinte era cortado pela margem do conteúdo e sobrava uma faixa vazia antes do fim da tela — parecia cartão quebrado, não cartão continuando. Aqui a fila é irmã do envelope e reproduz a margem dele só do lado esquerdo, então o corte passa a acontecer na borda da tela. A conta repete a do .envelope de propósito, em vez de usar vw: `100vw` conta a barra de rolagem junto e a fila passaria alguns pixels da tela, criando rolagem lateral na página inteira. O padding da direita não aparece parado — ele só entra em cena no fim da rolagem, para o último cartão não encostar na borda. */ .carrossel--sangria-direita { --sangria-margem: max(var(--margem-lateral), calc((100% - var(--largura-conteudo)) / 2)); padding-left: var(--sangria-margem); /* Sem isto o encaixe encosta o cartão na borda da TELA e a fila perde o alinhamento com o título: o scroll-snap mede pela caixa de padding, não pelo conteúdo. O scroll-padding manda o encaixe respeitar a mesma margem. */ scroll-padding-left: var(--sangria-margem); padding-right: var(--margem-lateral); } /* No celular não cabem dois e meio. A conta de "inteiros + metade" daria um cartão de 213px — mais estreito que os cartões normais da página, o que piora a leitura em vez de melhorar. Aqui o cartão toma quase a tela toda e sobra só uma fresta do seguinte, que já basta como convite para arrastar. */ @media (max-width: 700px) { .carrossel > * { flex-basis: 78%; } } /* --- SEÇÃO QUE SOBE POR CIMA DA ANTERIOR --- Levanta o bloco para invadir o de cima (tipicamente o herói de tela cheia). O quanto invade vem de --sobrepor, um NÚMERO (0.2 = 20%), multiplicado pela altura real do herói. Por que não `margin-top: -20%`: porcentagem de margem se mede pela LARGURA do pai, não pela altura — o mesmo tropeço do `padding-bottom` documentado no herói. Aqui a conta é explícita sobre a altura. padding-top zerado de propósito: com o respiro da seção, quem encostaria no herói seria a borda invisível da seção, não os cartões. */ .secao--sobrepor { --sobrepor: 0.2; /* No celular a figura do herói é mais curta que a faixa (ela cabe inteira, com sobra embaixo), então 20% ainda param DEPOIS do fim da figura e o avanço não aparece. Aqui os cartões sobem o suficiente para encostar de leve na foto. */ margin-top: calc((100svh - var(--topo-altura)) * var(--sobrepor) * -1); padding-top: 0; z-index: 1; /* .secao já é position: relative */ } /* ========================================================================== 21. TEXTURA DA PÁGINA INTEIRA data-textura no aplica a textura no fundo de toda a página, atrás de tudo. Diferente das classes .tex-*, que texturizam um bloco só. pontos | grade | listras | grao | nenhuma Intensidade opcional: data-textura-forca="leve" (padrão) | "media" | "forte" ========================================================================== */ :root { --textura-cor: color-mix(in srgb, var(--linha) 70%, transparent); --textura-passo: 22px; } :root[data-textura-forca="media"] { --textura-cor: var(--linha); } :root[data-textura-forca="forte"] { --textura-cor: color-mix(in srgb, var(--tinta-fraca) 55%, transparent); } :root[data-textura] body::before { content: ""; position: fixed; inset: 0; z-index: -10; pointer-events: none; } :root[data-textura="pontos"] body::before { background-image: radial-gradient(var(--textura-cor) 1.5px, transparent 1.5px); background-size: var(--textura-passo) var(--textura-passo); } :root[data-textura="grade"] body::before { background-image: linear-gradient(var(--textura-cor) 1px, transparent 1px), linear-gradient(90deg, var(--textura-cor) 1px, transparent 1px); background-size: calc(var(--textura-passo) * 4) calc(var(--textura-passo) * 4); } :root[data-textura="listras"] body::before { background: repeating-linear-gradient(var(--angulo-bloco), var(--textura-cor) 0 1px, transparent 1px calc(var(--textura-passo) / 1.6)); } :root[data-textura="grao"] body::before { opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } :root[data-textura="nenhuma"] body::before { display: none; } /* O body precisa deixar a textura aparecer atrás dele. */ :root[data-textura] body { background: transparent; } :root[data-textura] { background: var(--fundo); } /* --- topo em tela muito estreita --- Abaixo de 400px a marca, o botão e o sanduíche não cabem lado a lado com o respiro normal. Aperta o botão e a marca; a altura mínima de 44px do alvo de toque continua intacta. */ @media (max-width: 400px) { .topo .botao { padding-inline: var(--e3); font-size: var(--t-mini); } .marca__nome { font-size: var(--t-peq); } } /* --- TRAVA DE TELA ESTREITA --- O `min(Npx, 100%)` dentro de `minmax()` deveria bastar, mas em `repeat(auto-fit,…)` o navegador trata essa porcentagem como indefinida e volta a usar o N em pixels: medido, uma coluna de 280px continuou com 286px dentro de um pai de 200px, e a página inteira ficou mais larga que o aparelho — foi o "está tudo cortado". Abaixo de 380px, portanto, nenhuma grade tenta mais de uma coluna. */ @media (max-width: 380px) { /* minmax(0, …) e não 1fr: o mínimo automático de `1fr` é o min-content do cartão (respiro + a palavra mais longa), e ele estoura os 200px de tela. Com o zero explícito a coluna acompanha a tela. */ .cartoes, .galeria, .vozes, .planos, .faixa ul, .dupla { grid-template-columns: minmax(0, 1fr); } /* menos respiro dentro dos cartões: com 40px de cada lado sobrava pouco mais de 100px para o texto */ .cartao, .voz, .plano { padding: var(--e4) var(--e3); } /* última linha de defesa: palavra que não cabe quebra em vez de furar a caixa. Só aqui — em tela normal quebrar palavra piora a leitura. */ body { overflow-wrap: break-word; } } /* --- avanço dos cartões no celular --- (ver .secao--sobrepor) sobrepor no celular */ @media (max-width: 700px) { .secao--sobrepor { --sobrepor: 0.28; } } /* Foto que abre uma seção, logo abaixo do título e acima da fila de cartões. */ .secao > .envelope > .moldura { margin-bottom: var(--e5); } /* No celular a faixa 21:9 vira uma tira de 144px de altura e a foto deixa de contar história. O corte de celular do slot "largo" já sai em 3:2 — a moldura acompanha, senão o navegador ainda apara a foto na altura errada. */ @media (max-width: 700px) { .moldura--21x9 { aspect-ratio: 3 / 2; } } /* Título que existe para o buscador e para o leitor de tela, sem aparecer. `display: none` NÃO serve — o leitor de tela também pula. A receita é tirar o elemento do fluxo com 1px e recortar o conteúdo. */ .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- AVISO DE DEMONSTRAÇÃO --- Quadro suspenso no centro da tela, com o site desfocado atrás. O desfoque mora no VÉU (a camada de tela cheia), não no site: aplicar filtro no conteúdo da página criaria um novo contexto de empilhamento e a barra fixa do topo, que é `position: fixed`, passaria a se prender a ele — o topo deixaria de acompanhar a rolagem. */ .aviso-mockup { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: var(--margem-lateral); background: rgb(10 14 11 / .55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .aviso-mockup[hidden] { display: none; } .aviso-mockup__quadro { width: min(100%, 34rem); display: grid; gap: var(--e3); justify-items: start; padding: var(--e5); background: #FFFFFF; color: #24291F; border-radius: var(--raio-cartao); box-shadow: 0 24px 60px rgb(0 0 0 / .45); font-size: var(--t-base); line-height: 1.5; text-align: left; } .aviso-mockup__titulo { font-family: var(--display); font-weight: var(--peso-titulo); font-size: var(--t-h3); line-height: 1.15; color: #24291F; margin: 0; } .aviso-mockup p { margin: 0; } .aviso-mockup b { color: #24291F; } /* O botão do site é claro sobre mel; dentro do quadro branco ele precisa da cor da marca para não sumir no fundo. */ .aviso-mockup__ok { justify-self: stretch; min-height: var(--toque-min); padding: var(--e2) var(--e5); border: 0; border-radius: var(--raio-botao); background: #3A5A40; color: #FFFFFF; font: inherit; font-weight: 700; cursor: pointer; } .aviso-mockup__ok:hover { background: #324E37; } @media (min-width: 560px) { .aviso-mockup__ok { justify-self: end; } } /* Trava a rolagem da página (usada enquanto o aviso está aberto). É classe, e não estilo escrito pelo JavaScript, porque a política de segurança da página não libera estilo solto — classe nunca esbarra nisso. */ .sem-rolagem { overflow: hidden; } /* --- FORÇA DA TEXTURA POR BLOCO --- `data-textura-forca` no vale para o fundo da página inteira. Estes modificadores valem para UM bloco: é o que permite a página ficar em cor sólida e só o herói receber grão forte. */ .tex-grao { --grao-opacidade: .5; } .tex-grao--media { --grao-opacidade: .78; } .tex-grao--forte { --grao-opacidade: 1; } .tex-grao::after { opacity: var(--grao-opacidade); } /* A mistura continua sendo `soft-light` em todas as forças. Trocar para `overlay` foi testado e não serve: o ruído passa a escurecer o fundo claro de verdade — o bloco fica cinza sujo ao lado do resto da página, e lê como defeito de imagem, não como textura de papel. */ /* --- TEXTURA QUE ESMAECE --- A textura some para baixo e entrega o bloco na cor sólida da página, sem linha de corte. É máscara, não degradê sobreposto: degradê por cima escureceria também a foto e o texto; a máscara age só na camada de textura. Sem o prefixo -webkit, o Safari ignora a máscara e a textura vai até a borda — a emenda com a seção seguinte aparece. */ .tex-grao--esmaece::after, .tex-grade--esmaece::before, .tex-pontos--esmaece::before, .tex-listras--esmaece::before { --esmaece-inicio: 40%; --esmaece-fim: 94%; mask-image: linear-gradient(to bottom, #000 0%, #000 var(--esmaece-inicio), transparent var(--esmaece-fim)); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--esmaece-inicio), transparent var(--esmaece-fim)); } /* a grade já usa máscara própria; a de esmaecer precisa vencer */ .tex-grade--esmaece::before { mask-composite: intersect; -webkit-mask-composite: source-in; } /* --- herói do portfólio --- Sem foto por enquanto: o herói é texto sobre a cor sólida da página, com o grão por cima. Quando a foto vazada entrar, o bloco ganha .heroi--imagem e o texto volta a ser posicionado sobre ela. */ .heroi > .envelope { display: grid; gap: var(--e4); justify-items: start; } .heroi__apoio { max-width: 54ch; font-size: var(--t-medio); color: var(--tinta); } .heroi__complemento { max-width: 58ch; color: var(--tinta-fraca); } /* --- GRADE QUE DESLIZA NA DIAGONAL --- As linhas são RETAS: verticais cruzando horizontais, formando quadrados. O que anda na diagonal é a grade inteira — ela desce e vai para a esquerda ao mesmo tempo, saindo pelo canto inferior esquerdo (−45°). O laço é imperceptível porque o deslocamento é exatamente UM quadrado nos dois eixos: depois de andar (passo, passo) o desenho volta a coincidir consigo mesmo. Qualquer outro valor faz a emenda "pular" a cada volta. A folga da camada fica em cima e à direita — o lado OPOSTO ao movimento. É de lá que a grade "vem"; sem essa sobra, essas bordas apareceriam vazias à medida que o desenho escorre para o canto de baixo. A animação é de `transform`, não de `background-position`: transform corre na placa de vídeo, sem repintar a área a cada quadro. Numa faixa do tamanho de um herói, rodando para sempre, essa diferença aparece na bateria. */ .tex-grade--desliza { --grade-passo: 110px; /* lado do quadrado */ --grade-tempo: 14s; /* uma volta completa; menor = mais rápido */ position: relative; isolation: isolate; } .tex-grade--desliza::before { content: ""; position: absolute; inset: calc(var(--grade-passo) * -2) calc(var(--grade-passo) * -2) 0 0; z-index: -2; pointer-events: none; opacity: 1; mask-image: none; background-image: linear-gradient(var(--textura-cor) 1px, transparent 1px), linear-gradient(90deg, var(--textura-cor) 1px, transparent 1px); background-size: var(--grade-passo) var(--grade-passo); animation: grade-desliza var(--grade-tempo) linear infinite; } @keyframes grade-desliza { to { transform: translate(calc(var(--grade-passo) * -1), var(--grade-passo)); } } /* Esmaecer da grade: em vez de mascarar a camada, pinta a cor da página por cima dela. Fica acima da grade e abaixo do conteúdo, então o texto e a foto passam por cima sem serem afetados. */ .tex-grade--desliza.tex-grade--esmaece::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mask-image: none; background: linear-gradient(to bottom, transparent var(--esmaece-inicio, 45%), var(--fundo) var(--esmaece-fim, 96%)); } /* Quem pediu menos movimento no sistema não recebe animação nenhuma. */ @media (prefers-reduced-motion: reduce) { .tex-grade--desliza::before { animation: none; } } /* Força da grade POR BLOCO — mesma escala da global (data-textura-forca). */ .tex-grade--forca-media { --textura-cor: var(--linha); } .tex-grade--forca-forte { --textura-cor: color-mix(in srgb, var(--tinta-fraca) 55%, transparent); } /* --- herói em duas colunas: texto e retrato --- No celular vira uma coluna só, com o retrato centralizado abaixo do texto. O texto vem antes no código de propósito: quem chega pelo telefone lê a chamada e alcança os botões sem rolar uma foto alta inteira antes. */ .heroi__grade { display: grid; gap: var(--e5); align-items: end; } @media (min-width: 900px) { /* A coluna da foto tem largura PRÓPRIA, não uma fração: o retrato é o elemento que precisa de presença, e a coluna de texto se acomoda no que sobra. Com frações, alargar a foto encolhia o texto na mesma proporção e a linha ficava curta demais. */ .heroi__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 44rem); /* vão menor entre as colunas: cada pixel aqui é um pixel a menos de foto */ gap: var(--e4); } } .heroi__texto { display: grid; gap: var(--e4); justify-items: start; align-content: end; } .heroi__retrato { margin: 0; justify-self: center; } .heroi__retrato img { display: block; width: 100%; height: auto; /* teto de altura para o retrato não empurrar o herói para fora da tela */ max-height: 82svh; object-fit: contain; } @media (max-width: 899px) { .heroi__retrato { max-width: 22rem; /* No celular o retrato vem PRIMEIRO. A ordem no código continua sendo texto → foto, que é a ordem certa para leitor de tela e para o buscador; só a ordem visual muda. */ order: -1; } } /* O herói com retrato usa menos respiro vertical que o padrão: cada pixel de respiro é um pixel a menos de foto dentro da mesma primeira tela. O de cima ainda precisa passar da barra fixa. */ .heroi:has(.heroi__retrato) { padding-block: calc(var(--e6) * 1.5) var(--e5); } /* --- ações do herói lado a lado --- Os dois botões somavam 534px numa coluna de 452 e quebravam em duas linhas. No tamanho grande eles não cabem lado a lado sem roubar largura da foto; no tamanho normal cabem, e continuam com altura de alvo de toque. */ @media (min-width: 900px) { .heroi .acoes { flex-wrap: nowrap; gap: var(--e2); } .heroi .acoes .botao { white-space: nowrap; } /* o texto sobe em relação ao rodapé do herói; a foto continua encostada embaixo, onde ela se dissolve */ .heroi__texto { margin-bottom: var(--e6); } } /* --- o retrato dissolve no rodapé do herói --- Máscara, não degradê por cima: um degradê sobreposto pintaria a cor da página em cima da foto e, onde a grade passa por trás, apareceria uma faixa mais clara que o resto. A máscara apaga a própria foto. */ .heroi__retrato picture { display: block; /* Começa bem embaixo: aos 62% a dissolução pegava o tronco da estilista e ela aparecia meio transparente. Aqui só o pé do manequim se desfaz. */ --esmaece-foto: 84%; mask-image: linear-gradient(to bottom, #000 0%, #000 var(--esmaece-foto), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--esmaece-foto), transparent 100%); } /* --- GRADE VIVA NO FUNDO DA PÁGINA --- A mesma grade que estava só no herói, agora atrás da página inteira. É um elemento próprio, `position: fixed`, e não um pseudo-elemento do body: fixo, ele não rola junto com o conteúdo, então o navegador não precisa repintar a grade a cada pixel de rolagem — só a animação, que roda na placa de vídeo. Num fundo de página inteira essa diferença é a maior de todas. Fica em z-index -1, acima da cor de fundo e abaixo de tudo que é conteúdo. */ .grade-viva { --grade-passo: 110px; --grade-tempo: 14s; position: fixed; inset: calc(var(--grade-passo) * -2) calc(var(--grade-passo) * -2) 0 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--textura-cor) 1px, transparent 1px), linear-gradient(90deg, var(--textura-cor) 1px, transparent 1px); background-size: var(--grade-passo) var(--grade-passo); animation: grade-desliza var(--grade-tempo) linear infinite; } .grade-viva--forte { --textura-cor: color-mix(in srgb, var(--tinta-fraca) 55%, transparent); } .grade-viva--media { --textura-cor: var(--linha); } @media (prefers-reduced-motion: reduce) { .grade-viva { animation: none; } } /* --- FAIXA BRANCA SOBRE A GRADE --- Bloco central afastado das bordas, em branco sólido, flutuando sobre a grade que continua correndo atrás. O branco precisa ser opaco: translúcido, a grade passa por baixo do texto e o contraste passa a depender de onde a linha caiu. */ .faixa-branca { width: min(100% - (var(--margem-lateral) * 2), var(--largura-conteudo)); margin-inline: auto; background: #FFFFFF; border-radius: var(--raio-cartao); padding: var(--respiro-secao) clamp(var(--e4), 4vw, var(--e6)); box-shadow: 0 1px 2px rgb(27 29 28 / .04), 0 18px 50px rgb(27 29 28 / .07); } /* medida de leitura só para os textos soltos — a grade de cartões e as molduras precisam da largura inteira da faixa */ .faixa-branca > :is(p, h2, h3, h4, blockquote) { max-width: var(--largura-texto, 68ch); } /* Primeira seção depois do herói. O respiro cheio de seção (137px na densidade arejada) afasta demais aqui, porque o herói já traz o próprio respiro interno embaixo — os dois somam e a página parece ter um buraco. Não uso `.secao--continua`: aquele modificador cancela o respiro de baixo da seção anterior, e o herói não tem respiro de seção — cancelá-lo faria a faixa SUBIR por cima do herói. */ .secao--apos-heroi { /* Quanto a faixa sobe por cima do herói. Tem que ser MARGEM: `padding` não aceita valor negativo — o navegador descarta a linha inteira e a seção volta ao respiro padrão. Era isso que dava a sensação de "bate num limite e não sobe mais". */ --sobe: 152px; /* contexto próprio, para a faixa branca pintar na frente da foto */ position: relative; z-index: 1; margin-top: calc(var(--sobe) * -1); padding-top: var(--e6); } /* --- ETAPAS NUMERADAS --- Linha do tempo do processo. O numero e gerado por contador do CSS, nao escrito no HTML: reordenar ou inserir uma etapa nao obriga a renumerar tudo na mao, e o leitor de tela nao le "01" como se fosse conteudo. */ .etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); counter-reset: etapa; } @media (min-width: 780px) { .etapas { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); } } .etapas li { counter-increment: etapa; display: grid; gap: var(--e2); align-content: start; padding-top: var(--e3); border-top: 2px solid var(--linha); } .etapas li::before { content: counter(etapa, decimal-leading-zero); font-family: var(--display); font-weight: var(--peso-titulo); font-size: var(--t-medio); line-height: 1; color: var(--realce); } .etapas b { font-weight: 600; } /* --- ETIQUETAS --- Lista de competencias. Some o marcador do navegador: a caixa de cada etiqueta ja separa um item do outro. */ .etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); } .etiquetas li { padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--raio-botao); font-size: var(--t-peq); background: var(--fundo-alto); } /* Selo de projeto: a credencial vem antes do nome da colecao. */ .selo-projeto { display: inline-block; font-size: var(--t-mini); letter-spacing: .08em; text-transform: uppercase; color: var(--realce); } .rodape__cargo { font-family: var(--corpo); font-weight: 400; font-size: var(--t-peq); color: var(--tinta-fraca); } /* A faixa branca empilha titulo, grades e duplas com respiro proprio. */ .faixa-branca > * + * { margin-top: var(--e5); } /* --- FOLHA BRANCA CONTÍNUA --- Uma única superfície branca do fim do herói até o rodapé, com todas as seções dentro. A grade viva continua correndo atrás e aparece só nas laterais e nas pontas. O branco é opaco de propósito: translúcido, as linhas da grade passariam por baixo do texto e o contraste de cada trecho dependeria de onde a linha caiu. O respiro entre as seções continua vindo dos modificadores .secao--continua, como nas faixas separadas — a folha não muda o ritmo, só remove os cortes. */ .folha-branca { /* Quanto a folha avança por cima do herói. Em 152px ela cobria o tronco da estilista; em 40px o topo dela encosta na base da foto, onde o esmaecer já terminou. Aumente para invadir mais, zere para encostar sem sobrepor. */ --sobe: 40px; position: relative; z-index: 1; width: min(100% - (var(--margem-lateral) * 2), var(--largura-conteudo)); margin-inline: auto; margin-top: calc(var(--sobe) * -1); background: #FFFFFF; border-radius: var(--raio-cartao); padding-inline: clamp(var(--e4), 4vw, var(--e6)); box-shadow: 0 1px 2px rgb(27 29 28 / .04), 0 18px 50px rgb(27 29 28 / .07); } /* A primeira seção não traz o respiro cheio: quem abre a folha é o padding dela. Sem isto o topo da folha ficaria com 137px de branco vazio. */ .folha-branca .secao--primeira { padding-top: var(--e6); } /* medida de leitura só para os textos soltos — grades e molduras usam a largura inteira da folha */ .folha-branca .secao > :is(p, h2, h3, h4, blockquote) { max-width: var(--largura-texto, 68ch); } .folha-branca .secao > * + * { margin-top: var(--e5); } /* Rodapé depois da folha branca. NÃO use .rodape--afastado aqui: aquele modificador desconta o respiro de baixo da seção anterior, e com a folha esse respiro está DENTRO do branco — descontá-lo puxa o rodapé para cima da folha (medido: 48px de invasão). Aqui o vão é positivo, e é nele que a grade reaparece. */ .rodape--apos-folha { margin-top: var(--e6); } /* Quem abre a linha não leva separador nem recuo — senão a coluna da esquerda fica deslocada em relação à linha de cima. */ @media (min-width: 700px) and (max-width: 1149px) { :root[data-superficie="continua"] .cartoes--4 > *:nth-child(2n+1) { border-inline-start: 0; padding-inline-start: 0; } } @media (min-width: 1150px) { :root[data-superficie="continua"] .cartoes--4 > *:nth-child(4n+1) { border-inline-start: 0; padding-inline-start: 0; } } /* --- CARTÃO COM FOTO NA SUPERFÍCIE CONTÍNUA --- Sem caixa, o corpo do cartão não pode manter o respiro lateral que existia para afastar o texto da borda do cartão: a borda não existe mais. Medido: num cartão de 204px, os 40px de cada lado deixavam 124px para o texto — menos que a palavra "Desenvolvimento" sozinha. Como `.cartao` tem `overflow: hidden`, o excesso não vazava, era CORTADO: o texto ficava mais largo que a foto e terminava em palavra picada. Com o respiro zerado, o texto passa a alinhar pela borda da foto, que é o eixo certo quando não há caixa. */ :root[data-superficie="continua"] .cartao--foto .cartao__corpo { padding-inline: 0; } /* Rede de segurança: palavra que não couber quebra em vez de furar a caixa. */ .cartao__corpo h3, .cartao__corpo p { overflow-wrap: break-word; } /* min-width: 0 nos itens de grade. `overflow-wrap: break-word` quebra a linha, mas NÃO reduz o tamanho mínimo que o item declara para a grade — a palavra inteira continua contando. Sem este zero, o cartão pede mais largura do que a coluna tem e o excesso é cortado pelo `overflow: hidden`. */ .cartoes > .cartao { min-width: 0; } .cartao > .cartao__corpo { min-width: 0; }