/* ========================================================================== ABITA — Serviços Regras e o porquê em specs/design.md. Números em tokens.css. Cinco blocos: abertura, as quatro frentes, uma por uma, o preço e o fechamento. Ritmo de bandas: escuro, claro, morno, claro, escuro. O escuro abre e fecha, e nunca há dois seguidos. **Os quatro serviços têm exatamente o mesmo peso.** Mesmo corpo, mesma estrutura, mesma quantidade de linhas, nenhuma cor de destaque e nenhum card maior. É decisão do cliente e substitui o "retrofit em destaque" do briefing §13. ========================================================================== */ /* -------------------------------------------------------------------------- RITMO DA PÁGINA Ritmo curto, como em Quem somos: os blocos têm duas a três linhas e o respiro da home separava frases em vez de argumentos. -------------------------------------------------------------------------- */ .frentes, .detalhe, .preco { padding-block: var(--secao-curta); } /* ========================================================================== 1 · ABERTURA Cena inteira ao fundo, texto no terço esquerdo, como nas outras páginas. Sem as variáveis de banda escura o título herda --texto, que é quase preto, e some sobre a fotografia: a seção é clara na aparência e escura na regra. ========================================================================== */ /* No celular o texto ocupa a largura toda e a ponta direita cai na parte clara do véu lateral. `--veu-largo` mantém a direção e nunca clareia abaixo de 0.62. */ /* ========================================================================== 2 · AS QUATRO FRENTES Grade de quatro colunas iguais, cada uma com nome e uma linha. O nome é âncora para a descrição completa logo abaixo. ========================================================================== */ .frentes__cabeca h2 { margin-top: var(--e-3); } .frentes__grade { display: grid; gap: var(--e-4); margin-top: clamp(var(--e-4), 2.5vw, var(--e-5)); list-style: none; } .frente { padding-top: var(--e-4); border-top: var(--fio) solid var(--linha-cor, var(--linha)); } .frente h3 { color: var(--texto-cor, var(--texto)); } .frente p { margin-top: var(--e-2); } /* O nome é link para a âncora, mas não deve parecer um link solto no meio da página: herda a cor do título e ganha o fio só no hover e no foco. */ .frente h3 a { color: inherit; text-decoration: none; border-bottom: var(--fio) solid transparent; transition: border-color var(--t-rapida) var(--suave); } .frente h3 a:hover, .frente h3 a:focus-visible { border-bottom-color: currentColor; } /* **O card inteiro é o alvo de toque.** O nome sozinho media 30px de altura, abaixo dos 44px do design.md §9, e no celular o dedo cai no card, não na palavra. O link se estende pelo card por pseudo-elemento: o HTML continua com um link só, e o leitor de tela anuncia só o nome. */ .frente { position: relative; } .frente h3 a::after { content: ""; position: absolute; inset: 0; } .frente:hover h3 a { border-bottom-color: currentColor; } @media (min-width: 620px) { .frentes__grade { grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-6); } } @media (min-width: 1000px) { .frentes__grade { grid-template-columns: repeat(4, 1fr); gap: var(--e-5); } } /* ========================================================================== 3 · UM POR UM Quatro linhas com a mesma forma: índice, nome, o que é e quando serve. A fotografia de operação sangra pela direita e acompanha a altura da coluna inteira. ========================================================================== */ .detalhe { row-gap: clamp(var(--e-4), 2.5vw, var(--e-5)); } .detalhe__lista { list-style: none; } .servico { padding-block: var(--e-5); border-top: var(--fio) solid var(--linha-cor, var(--linha)); } .servico:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); } .servico__nome { margin-top: var(--e-2); color: var(--texto-cor, var(--texto)); } /* Corpo normal, não `lead`. São quatro blocos curtos repetindo a mesma forma: em corpo de lead a seção lia como quatro chamadas seguidas, e a diferença entre o que o serviço é e quando ele serve sumia. */ .servico__oque { margin-top: var(--e-3); max-width: 46ch; font-size: var(--fs-corpo); } .servico__quando { margin-top: var(--e-2); max-width: 52ch; font-size: var(--fs-sm); color: var(--texto-meta); } /* Uma âncora rolando por baixo do cabeçalho fixo é âncora perdida: o `scroll-margin` desconta a altura dele. */ .servico { scroll-margin-top: calc(var(--cabecalho-h) + var(--e-5)); } /* Abaixo de 1280px a foto desce para baixo da lista, na largura da coluna, e fica em 3:2, como as fotos do miolo de Projeto e Layout Corporativo. Estava na proporção do arquivo de obra, 720 por 1280: no celular cada foto media 622px de altura, no tablet passava de 1.500, e a segunda, que é horizontal, saía espremida em retrato. Na de obra o assunto, mesas e equipe, está na faixa do meio, um pouco acima do centro. */ .detalhe__fig { border-radius: var(--raio-card); aspect-ratio: 3 / 2; } @media (max-width: 1279px) { .detalhe__fig--a img { object-position: center 42%; } } /* Duas linhas, e os lados alternam: o texto de 01 e 02 à esquerda com a imagem à direita, o de 03 e 04 à direita com a imagem à esquerda. A imagem **não sangra**: termina dentro da coluna de leitura, como na página Quem somos. Aqui a largura dela não vem da proporção do arquivo, e sim do que sobra da coluna depois do texto: com dois serviços por linha a coluna é baixa, e derivar a largura da altura deixaria as duas fotos estreitas com um vão enorme no meio. Aqui a moldura manda e o `cover` recorta. */ @media (min-width: 1280px) { .detalhe__lista--a, .detalhe__fig--a { grid-row: 1; } .detalhe__lista--b, .detalhe__fig--b { grid-row: 2; } .detalhe__lista--a, .detalhe__lista--b { grid-column: centro-start / centro-end; width: min(100%, 30rem); } .detalhe__lista--b { justify-self: end; } .detalhe__fig--a, .detalhe__fig--b { grid-column: centro-start / centro-end; /* Proporção fora: a altura vem da coluna de texto e a largura, do que sobra dela. Com `aspect-ratio` no meio, uma das duas vence e o alinhamento entre texto e imagem se perde. */ aspect-ratio: auto; width: calc(100% - 30rem - var(--e-6)); align-self: stretch; } .detalhe__fig--a { justify-self: end; } .detalhe__fig--b { justify-self: start; } /* Fora do fluxo dentro da moldura: em fluxo, a altura da imagem entra na conta da linha da grade e estica a seção inteira. Mesmo defeito corrigido na Prova em 02/09 e em Quem somos em 03/09. */ .detalhe__fig picture { position: absolute; inset: 0; } } /* ========================================================================== 4 · COMO FUNCIONA O PREÇO Cabeçalho de um lado, argumento do outro. Nada de `column-gap` numa `.tela`: o vão entra entre as cinco trilhas nomeadas e empurra `cheia-end` para fora da tela. ========================================================================== */ .preco { row-gap: clamp(var(--e-4), 2.5vw, var(--e-5)); } /* Sem teto em `ch`: a coluna de 26rem já governa a medida, e o `ch` resolve contra a fonte do elemento, não contra a largura desejada. Com 20ch o título quebrava em quatro linhas curtas. */ .preco__cabeca h2 { margin-top: var(--e-3); } .preco__texto > * + * { margin-top: var(--e-3); } .preco__texto p { max-width: 58ch; } @media (min-width: 900px) { .preco__cabeca { grid-column: centro-start / centro-end; grid-row: 1; width: min(100%, 26rem); } .preco__texto { grid-column: centro-start / centro-end; grid-row: 1; margin-left: auto; width: min(100%, 34rem); } } /* ========================================================================== 5 · CTA FINAL Cena inteira ao fundo, texto no terço esquerdo. Sem as variáveis de banda escura o título herda --texto, que é quase preto, e some sobre a foto. **Um CTA só, o do WhatsApp**, como em todo o site desde 19/10/2026. ========================================================================== */ /* No celular o texto ocupa a largura toda e a ponta direita dele cai na parte clara do véu lateral. `--veu-largo` mantém a direção e nunca clareia abaixo de 0.62. */ .fecho h2 { max-width: 16ch; color: var(--texto-sobre-foto); } .fecho .lead { margin-top: var(--e-4); max-width: 46ch; color: var(--texto-sobre-foto); } /* A linha do retrofit vem depois do lead, e sem margem encostava nele. */ .fecho .lead + p { margin-top: var(--e-3); } .fecho .cta { margin-top: clamp(var(--e-5), 3vw, var(--e-6)); }