/* Grupo Dls/ — /resultados
=============================================================
Duas peças moram aqui:
1. A GRADE de cartões verticais (`.grade` / `.rcard`) — densa, um
cartão por case com número. É o formato do bloco da Papoca.
2. O MODO INSTITUCIONAL do cartão em pilha (`--unidade`), que
apresenta as três frentes. O cartão em si, o empilhamento e a
foto sangrando moram em `scenes.css`, junto do componente: esta
folha só acrescenta o que muda no modo.
A pilha depende de `overflow-x: clip` no `body` — `hidden` faz do
corpo um contêiner de rolagem e desliga todo `sticky` descendente.
Está comentado em `base.css`.
============================================================= */
/* ---------- a página ---------- */
/* A PÁGINA É CLARA, e por `data-theme="light"` no `` — o mesmo
mecanismo de /cases, /performance e do case. Nada de cor forçada
aqui: `--bg`, `--fg`, `--fg-muted` e `--line` viram os do tema claro
sozinhos, e o `.btn` fica preto com texto branco, que é o certo.
A EXCEÇÃO DELIBERADA é a seção das frentes: `.provastack` pinta o
próprio chão de preto e fixa os próprios tokens (ver `scenes.css`).
Numa página clara ela vira uma faixa escura no meio — e é o que dá
ritmo entre a grade e os depoimentos. */
/* Pintado na RAIZ e no corpo, como o case faz. O fundo do `body` é
propagado para a tela quando o `html` é transparente, e nessa
propagação o valor deixa de ser consultável — pintar o `html` também
não muda um pixel e devolve a cor à medição. */
:root:has(> .res),
.res {
background: var(--bg);
}
/* O RODAPÉ é preto no site inteiro, e em página clara ele precisa
DECLARAR o tema de volta — declarar `background` e `color` não basta,
porque quem pinta as colunas são os tokens. Essa regra é uma só, em
`layout.css`, e `.res` entrou na lista dela. NÃO copiar para cá: o
comentário de lá registra que a decisão já esteve espalhada em quatro
folhas e duas divergiram, deixando preto sobre preto em /cases e
/conteudo. */
/* O HEADER SOBRE CHÃO CLARO — a mesma solução da /cases e do case.
O header tem um scrim próprio (preto 88% → transparente) que existe
para segurar o contraste do logotipo contra o VÍDEO do hero. Esta
página não tem vídeo, e ali ele virava uma mancha escura escorrendo
sobre o branco. Sobre chão claro o header se resolve por subtração:
sem fundo, invertendo o que estiver embaixo. */
.res .header {
background: none;
mix-blend-mode: difference;
}
/* O anel de foco amarelo do sistema mede 1.07:1 sobre claro — preto com
um segundo anel branco por fora sobrevive também sobre as capas.
Copiado de `.cases-page`, pelo mesmo motivo. */
.res :focus-visible {
outline: 2px solid var(--c-black);
outline-offset: 3px;
box-shadow: 0 0 0 5px var(--c-white);
}
.res-hero {
/* O VÃO ENTRE A MANCHETE E A GRADE é grande de propósito: a manchete
precisa de silêncio embaixo para o número da grade chegar como
segunda batida, não como continuação da frase. */
padding-block: clamp(var(--sp-9), 18vh, 200px) clamp(var(--sp-9), 14vh, 180px);
}
/* ---------- a grade do hero ----------
Texto à esquerda, o objeto da performance à direita. A proporção é
~58/42: a manchete é justificada (`text-align-last: justify`), e numa
coluna estreita demais a justificação abre vãos que não fecham — o
mesmo motivo dos degraus de `max-width` mais abaixo. */
.res-hero__grade {
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
gap: clamp(var(--sp-6), 4vw, var(--sp-8));
align-items: center;
}
/* A CAIXA DE REFERÊNCIA DA CENA, e é só isto que ela faz.
As frações que põem o alvo em 86% x 25% e o ponto final do traçado no
mesmo lugar são medidas CONTRA ESTE RETÂNGULO — quem desenha é
`frente.css`, que a peça compartilhada exige. Sem `position: relative`
aqui, o `.perf-alvo` sobe para o primeiro pai posicionado e a ponta
descola do núcleo.
`aspect-ratio` e não altura: as duas linhas do SVG têm proporção fixa
(1000x560), e é ela que mantém a curva com a mesma inclinação em
qualquer largura. */
.res-hero__cena {
position: relative;
aspect-ratio: 1000 / 560;
/* O ESTADO FINAL, ESCRITO. `frente.css` já traz estes dois em 1 no
repouso do `.perf-hero`, mas ali eles moram naquela classe, que esta
página não tem. Declarados aqui, a cena nasce com a linha inteira
desenhada e o núcleo aceso — e nunca vai a zero, porque quem zera é
o `hero-linha.js`, que esta página não carrega. */
--subida: 1;
--acerto: 1;
--saida: 0;
--halo: 0;
/* O lado do alvo. `16vw` e não `26vw` como na /performance: lá a cena é
a tela inteira, aqui ela é a coluna da direita.
NADA DE PORCENTAGEM AQUI, e isto é uma armadilha paga. O token é
lido por DOIS elementos com pais diferentes: `.perf-alvo`, cujo pai é
a cena, e `.perf-nucleo`, cujo pai é o próprio `.perf-alvo`. Uma
porcentagem resolve contra cada um deles — com `min(42%, 220px)` o
alvo saía nos 220px certos e o núcleo em 24px em vez de 57, porque
os 42% dele eram 42% DO ALVO. Medido. `vw` e `px` resolvem igual nos
dois, que é a única forma de a razão 0,26 entre eles se manter. */
--alvo-lado: min(16vw, 220px);
/* A COR DO NÚCLEO — o "box verde". `.perf-nucleo` pinta
`color-mix(var(--unidade) × --acerto)`, e sem o token o mix cai em
transparente e o alvo fica com os anéis e nada dentro. Lime porque é
a cor da Metrik, que é quem faz performance. */
--unidade: var(--c-lime);
}
@media (max-width: 899px) {
.res-hero__grade {
/* Uma coluna: a cena desce para baixo do texto em vez de espremer os
dois. Abaixo desta largura a manchete já perde o degrau de 64% e
precisa da linha inteira. */
grid-template-columns: 1fr;
gap: clamp(var(--sp-7), 6vh, var(--sp-8));
}
.res-hero__cena {
/* Sem a coluna, a referência do lado do alvo volta a ser a tela. */
--alvo-lado: min(26vw, 160px);
}
}
/* A PROPORÇÃO DA CAIXA TEM QUE ACOMPANHAR O `viewBox` QUE ESTÁ NO AR.
Em 767px `frente.css` troca a linha larga (1000x560) pela alta
(480x620) — e as duas são desenhadas com `preserveAspectRatio="none"`,
ou seja, esticam para preencher a caixa. Numa caixa 1000/560 a curva
alta sai achatada: ela foi desenhada com uma inclinação maior
justamente para uma tela em pé.
A CAIXA TAMBÉM ENCOLHE. Em 480/620 a largura cheia daria 433px de
altura num aparelho de 812 — metade da tela para um elemento
decorativo, empurrando o primeiro cartão para fora da primeira
dobra. A 62% ela mede 208x268, que é presença sem custo. */
@media (max-width: 767px) {
.res-hero__cena {
aspect-ratio: 480 / 620;
width: 62%;
margin-inline: auto;
/* Absoluto pelo mesmo motivo do desktop — ver o comentário lá. */
--alvo-lado: min(16vw, 90px);
}
}
.res-hero__titulo {
/* Peso, caixa alta e justificação vêm de `t-justified` — a assinatura
tipográfica do site. O TAMANHO é o das páginas internas: as três
frentes (/comunicacao, /tecnologia, /performance) reduzem o
`--fs-display-xl` para este mesmo clamp, e a manchete daqui é irmã
das delas, não da home. Valor copiado, não recalculado. */
margin: 0;
font-size: clamp(1.9rem, 0.9rem + 2.9vw, 3.5rem);
/* SEM O RECUO DE 64% QUE AS OUTRAS PÁGINAS TÊM: ali ele existe para a
manchete não atravessar a tela inteira, e aqui quem faz esse trabalho
é a coluna da grade — a cena ocupa os 42% da direita. Somar os dois
deixaria a manchete em 37% da tela, num filete de três palavras por
linha, e a justificação abriria vãos que não fecham. */
max-width: 900px;
}
.res-hero__sub {
margin: clamp(var(--sp-6), 4vh, var(--sp-7)) 0 0;
color: var(--fg-muted);
max-width: 46ch;
}
/* ============================================================
1. A GRADE
============================================================ */
.grade {
padding-block-end: clamp(var(--sp-8), 10vh, var(--sp-10));
}
.grade__rotulo {
color: var(--fg-muted);
margin: 0 0 clamp(var(--sp-6), 4vh, var(--sp-7));
}
.grade__lista {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
}
.rcard {
/* `relative` é o que deixa o `::after` do botão cobrir o cartão. */
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--line);
border-radius: 16px;
overflow: clip;
background: var(--bg);
transition: border-color var(--dur-base) var(--ease-out);
}
.rcard:has(.rcard__btn:hover),
.rcard:has(.rcard__btn:focus-visible) {
/* CINZA, e não a cor de unidade: a grade mistura clientes de frentes
diferentes, e um contorno colorido no hover sugeriria que aquele
cartão pertence àquela frente. Cinza é só "você está aqui". */
border-color: var(--fg-muted);
}
.rcard__capa {
/* Quadrada: é a `capa` do case, a mesma da grade de /cases. Fixar a
proporção aqui é o que alinha os cartões numa linha, mesmo com
legendas de alturas diferentes embaixo. */
aspect-ratio: 1 / 1;
overflow: clip;
}
.rcard__capa--reserva {
/* A MESMA RESERVA da pilha da home, na pele desta página: lá o chão é
preto e o filete é claro; aqui é o contrário. O tracejado em volta
ficou de fora pelo mesmo motivo de lá — a moldura do cartão já é a
caixa, e uma segunda seria caixa dentro de caixa. */
display: grid;
place-items: center;
border-bottom: 1px solid var(--line);
background: linear-gradient(135deg, color-mix(in srgb, var(--fg) 6%, transparent), transparent);
color: var(--fg-muted);
font-size: var(--fs-small);
letter-spacing: 0.06em;
}
.rcard__capa img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.rcard__corpo {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: clamp(var(--sp-5), 2.4vw, var(--sp-6));
/* Empurra o botão para o pé, para que ele fique na mesma altura em
todos os cartões da linha. */
flex: 1;
}
.rcard__cliente {
margin: 0;
}
.rcard__contexto {
/* "O que foi feito · em quanto tempo" — a linha de contexto, no mesmo
lugar e no mesmo corpo que o cartão da home usa. */
margin: 0;
font-size: var(--fs-small);
color: var(--fg-muted);
/* Trava de segurança: quando o campo do case está em branco a linha cai
para os três primeiros serviços da taxonomia, e "Identidade visual de
produto e serviço" sozinho já ocupa duas linhas. Passou de duas, o
cartão deixa de ter altura previsível na fileira. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
/* DUAS LINHAS SEMPRE, cheias ou não. O corte em duas já existia como
teto; o que faltava era o PISO. Com uma linha só ("Rebranding e
identidade visual") o cartão subia tudo que vem depois, e o número
do JM — que tem contexto de duas linhas — ficava 23px abaixo do dos
vizinhos. Números grandes desalinhados numa fileira de três é o
defeito que se vê primeiro.
`min-height` em `em` e não em `px`: a conta é 2 linhas x a
entrelinha, e ela tem que acompanhar o corpo se ele mudar. */
line-height: 1.4;
min-height: 2.8em;
}
.rcard__destaque {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin: clamp(var(--sp-4), 2vh, var(--sp-5)) 0 0;
}
.rcard__valor {
/* `order` inverte a dupla na tela sem inverter o documento, onde o
`` precisa vir antes do ``. */
order: 1;
margin: 0;
/* O TAMANHO É O DA CASA. `t-numeral` já traz `--fs-numeral`, o mesmo
token dos big numbers da home — o peso 100 sempre foi igual (medido),
o que divergia era o tamanho, porque eu tinha inventado um clamp
próprio aqui. Sem override, os três lugares passam a ser o mesmo
número. */
/* PRETO, NAO LIME. #d3ff35 sobre o off-white mede ~1,1:1 — ilegivel.
O proprio site so usa lime como FUNDO com texto preto (~16:1, ver
`frente.css`). Numa pagina clara o acento do lime fica na borda do
cartao em foco, e o numero — que e' o que precisa ser lido de
longe — fica no maior contraste que a pagina tem. */
color: var(--fg);
}
.rcard__metrica {
order: 2;
/* 16px e negrito: ela não é legenda do número, é a segunda metade da
frase que o número começa ("+91%" / "de crescimento na procura pela
marca"). Em 14px normal ela pesava o mesmo que a linha de contexto
lá em cima, que é secundária, e o cartão ficava com três cinzas
iguais em volta do número. */
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--fg);
}
.rcard__resumo {
/* O DESCRITIVO. Em corpo de leitura e na cor cheia, não em `--fg-muted`:
ele é o argumento do cartão, e não uma legenda do número. A linha de
contexto lá em cima é que é secundária. */
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--fg);
/* A fileira do desktop alinha os botões pelo pé (`margin-top: auto`),
mas descritivos de alturas muito diferentes ainda desalinham o resto.
Três linhas é o teto: é a altura de duas frases curtas. */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.rcard__btn {
align-self: flex-start;
/* Empurra o botão para o pé do cartão, alinhando-o em todos os da
linha. NÃO MEXER NO `padding` DAQUI: ele é o do `.btn`, e é
simétrico — uma versão anterior zerava o topo para "acertar o
respiro" e o texto encostava na borda de cima da pílula. O respiro
é `margin`, nunca `padding`. */
margin-top: auto;
}
.rcard__btn::after {
/* O cartão inteiro é clicável, com UMA parada de tabulação e um nome
acessível só — ver o comentário em `partials/grade-resultados.php`. */
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
@media (max-width: 1023px) {
.grade__lista {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 639px) {
.grade__lista {
grid-template-columns: 1fr;
}
}
/* ============================================================
2. O CARTÃO EM PILHA, MODO INSTITUCIONAL
O cartão, o empilhamento e a foto estão em `scenes.css`. Aqui só o
que muda quando ele apresenta uma unidade em vez de um resultado.
============================================================ */
.provastack__logo {
/* A ALTURA é o que alinha marcas de proporções diferentes, nunca a
largura. `flex: none` porque item flexível com imagem sem largura
intrínseca encolhe até sumir — os SVG do acervo não têm dimensão.
SEM FILTRO: a marca chega na cor dela. É o que a cena das frentes da
home já faz (`.frente__unit`, sem filtro, sobre o mesmo preto), e é
o que separa as três unidades de relance — antes elas saíam achatadas
em branco e só o texto do eyebrow as distinguia.
ISSO EXIGE O LOCKUP CERTO NO PAINEL. `dls-2.svg` tem o logotipo em
PRETO com o ponto amarelo: sobre o preto do cartão a palavra some e
sobra o ponto. Quem serve aqui é `dls-1.svg`, o lockup reverso
(palavra branca, ponto amarelo), que é o mesmo arquivo que a home
usa. Elleven e Metrik já vêm coloridas do arquivo. */
flex: none;
align-self: flex-start;
/* 22px É O TAMANHO DA CASA — o mesmo de `.frente__unit`, o logotipo de
unidade na cena das frentes da home. Estava em até 40px e o logotipo
virava o assunto do cartão, competindo com a manchete. Marca se
reconhece pequena; ela identifica, não anuncia. */
height: 22px;
/* LARGURA FIXA + `contain`, e NÃO `width: auto`. Os SVG do acervo não
têm `width`/`height` no arquivo, e o banco guarda os dois como NULL
para SVG — o uploader não mede vetor. Sem dimensão intrínseca e sem
atributo, `width: auto` resolve como ZERO e o logotipo desaparece
sem um erro sequer no console. Com uma caixa fixa, `contain` encaixa
cada marca preservando a proporção, e `object-position` encosta
todas na esquerda para alinharem entre si. */
width: 150px;
object-fit: contain;
object-position: left center;
}
.provastack__unidade {
margin: 0;
font-weight: 300;
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
line-height: 1.02;
letter-spacing: var(--tr-display);
/* A COR É A INFORMAÇÃO aqui: é o que separa as três unidades de
relance. O token chega inline, da taxonomia `frente`. */
color: var(--unidade, var(--c-white));
}
/* PESO 300 NOS TEXTOS DO CARTÃO. `t-title` chega em peso normal, e ao
lado de um logotipo de 22px e de um botão pequeno ele lia como bloco
pesado. 300 é o mesmo peso da manchete da página (`t-justified`) e o
que a família foi desenhada para fazer em corpo grande. */
.provastack__descricao {
font-weight: 300;
/* É o do cartão: tamanho vem de `t-title`, aqui só cor e medida. */
margin: 0;
color: var(--c-white);
max-width: 22ch;
}
.provastack__btn--unidade:hover,
.provastack__btn--unidade:focus-visible {
/* Branco em repouso (vem de `.provastack`), a cor da unidade no hover.
`--sobre-unidade` viaja no dado por cartão porque o par muda: preto
sobre o amarelo e o lime, branco sobre o azul #0153ff. */
--btn-bg: var(--unidade, var(--c-white));
--btn-fg: var(--sobre-unidade, var(--c-black));
}
/* SEM KEY VISUAL, O CARTÃO É UMA COLUNA SÓ. O cartão nasce como duas
metades (texto | foto); quando a unidade ainda não tem imagem cadastrada
não existe segunda metade, e manter a grade de duas colunas deixaria
metade do cartão em branco. `:not(:has())` pergunta pelo que está lá,
em vez de exigir uma classe extra na marcação. */
.provastack__card--unidade:not(:has(.provastack__foto)) {
grid-template-columns: 1fr;
}
.provastack__card--unidade .provastack__conteudo {
/* Três peças (nome, descrição, botão) em vez das quatro do modo de
resultado: sem `space-between`, elas ficam agrupadas em cima e o
cartão respira embaixo. */
justify-content: center;
gap: clamp(var(--sp-5), 3vh, var(--sp-6));
}
/* ============================================================
3. DEPOIMENTOS
Lidos de dentro dos cases — ver o template. São a única voz de
terceiro na página: tudo o mais aqui é o grupo falando de si.
CARTÕES CINZA-CLARO, lado a lado. O cinza sai de `color-mix` sobre os
próprios tokens, e não de um hexadecimal solto: assim ele acompanha o
tema em vez de ser uma cor a mais para alguém manter.
============================================================ */
.depos {
padding-block: clamp(var(--sp-8), 10vh, var(--sp-10));
}
.depos__titulo {
color: var(--fg-muted);
margin: 0 0 clamp(var(--sp-6), 4vh, var(--sp-7));
}
.depos__lista {
list-style: none;
margin: 0;
padding: 0;
/* Três lado a lado: cartões menores e mais densos que as duas colunas
anteriores, que deixavam cada fala com largura de artigo. */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
}
.depo {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
gap: var(--sp-5);
background: color-mix(in srgb, var(--fg) 6%, var(--bg));
border-radius: 16px;
padding: clamp(var(--sp-5), 2.4vw, var(--sp-6));
}
.depo__fala {
margin: 0;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--fg);
/* A fala vem em parágrafos agora (abertura + continuação). O vão entre
eles é menor que o `gap` do cartão de propósito: são partes da mesma
citação, e não blocos irmãos. */
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.depo__fala p {
margin: 0;
}
.depo__assinatura {
display: flex;
align-items: center;
gap: var(--sp-4);
/* Empurra a assinatura para o pé: com falas de tamanhos diferentes, é
o que alinha os rostos numa linha só entre os três cartões. */
margin-top: auto;
}
.depo__foto {
flex: none;
width: 48px;
height: 48px;
border-radius: var(--r-pill);
overflow: clip;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--fg) 12%, var(--bg));
}
.depo__foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.depo__inicial {
font-size: var(--fs-body-l);
color: var(--fg-muted);
}
.depo__quem {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--fs-small);
min-width: 0;
}
.depo__nome {
color: var(--fg);
font-weight: 500;
}
.depo__cargo {
color: var(--fg-muted);
}
.depo__case {
font-size: var(--fs-small);
align-self: flex-start;
}
/* ============================================================
4. O FECHAMENTO
O layout das páginas internas — chão preto com a placa recuada —, mas
`.fr-fechamento` mora em `frente.css`, que esta página não carrega.
Aqui a seção é própria e declara os dois tokens que a `.placa` lê:
sem eles o fundo dela cai em vazio (avisado em `layout.css`).
============================================================ */
.res-fechamento {
background: var(--c-black);
/* A PLACA DESCOLA DO RODAPÉ. Nas páginas de frente o fechamento emenda
com o rodapé preto de propósito; aqui a folga embaixo é maior que a
de cima, para a placa não encostar na primeira linha do rodapé e o
conjunto ler como caixa, não como faixa. */
padding-block: clamp(var(--sp-8), 10vh, var(--sp-10)) clamp(var(--sp-9), 14vh, 160px);
/* Lime, que é o acento de resultado desta página inteira. Preto sobre
#D3FF35 mede ~16:1 — o par que `--sobre-unidade` já resolve no site. */
--unidade: var(--c-lime);
--sobre-unidade: var(--c-black);
}
@media (max-width: 1023px) {
.depos__lista {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 639px) {
.depos__lista {
grid-template-columns: 1fr;
}
}