/* ========================================================================== Página de Produtos — a montra dos cinco A PÁGINA TEM TRÊS SECÇÕES: a abertura, os cinco produtos e a conversão. Estiveram cá mais duas — o quadro "qual é a necessidade da sua empresa" e o anel "como os produtos se relacionam" — e saíram a 17/09. A COMPOSIÇÃO É A DA REFERÊNCIA ENVIADA A 17/09, adaptada: ┌──────────────────────┐ POSICIONAMENTO │ ilustração │ Vazto Search │ │ a pergunta de quem procura └──────────────────────┘ o que a Vazto faz Conhecer o Vazto Search → e os lados alternam de peça para peça. O QUE ISTO CORRIGE. A versão da manhã de 17/09 pôs os cinco produtos em bandas escuras sangradas de aresta a aresta, todas com o mesmo peso e o mesmo desenho: a página lia-se como cinco vezes o mesmo bloco, e não foi aprovada. Agora o escuro é só o LADRILHO; o resto respira em papel, e o texto sai de dentro de uma caixa preta para ficar na coluna de leitura. O COMPONENTE INTEIRO VIVE AQUI desde 17/09. Vivia em `home.css`, que seis páginas carregam para servir uma. --------------------------------------------------------------------------- A COR DO PRODUTO MUDA DE VALOR CONFORME O CHÃO, e é a regra que atravessa esta folha: --c a cor da marca. Serve o ladrilho, que é escuro, e os traços. --cl a variante clara, para o que assenta dentro do ladrilho. --tinta o `ink` de `paleta.js`. É a ÚNICA que pode ser texto sobre papel: o âmbar mede 1.8:1 sobre branco e desaparece. ========================================================================== */ /* O CHÃO NÃO É BRANCO CHAPADO. Um degradê muito leve de cinzento para branco, na mesma língua do que a página Sobre usa na secção do Método: dá profundidade à secção sem tirar leitura a nada, e evita o aspecto seco de um branco liso atrás de cinco ladrilhos escuros. O sentido é o da leitura: o cinzento entra em cima, onde a secção começa, e o branco fecha por baixo, a entregar a página ao bloco de conversão. */ .pgprod__lista{ padding-block:clamp(44px,6vw,86px); background:linear-gradient(180deg, #eef1f1 0%, #f4f7f7 26%, #fafbfb 58%, #ffffff 100%); } /* O ar entre as peças. É ele que faz cinco ladrilhos lerem-se como cinco peças e não como uma grelha. */ .palco{ display:grid; gap:clamp(30px,4.6vw,66px) } /* -------------------------------------------------------------------------- A PEÇA -------------------------------------------------------------------------- */ .vitr{ display:grid; gap:clamp(18px,2.4vw,34px); align-items:center; } /* -------------------------------------------------------------------------- O LADRILHO Cantos arredondados nos quatro lados: é um ladrilho e não uma banda. O escurecido é o mesmo da versão anterior — é a identidade do produto —, mas agora recortado, com a cor a entrar por um halo no canto de cima. -------------------------------------------------------------------------- */ /* SANGRA PARA FORA, RECORTA PARA DENTRO. Os cantos arredondados ficam só do lado do texto; do lado da aresta do ecrã não há canto nenhum para desenhar. Uma caixa arredondada nos quatro lados a tocar a aresta deixa dois cantos a flutuar fora do ecrã — ou sangra, ou é cartão. A borda segue a mesma regra: existe nos três lados que se veem. */ .vitr__arte{ position:relative; margin:0; overflow:hidden; --raio:clamp(16px,1.8vw,22px); border-start-end-radius:var(--raio); border-end-end-radius:var(--raio); border:1px solid color-mix(in srgb, var(--c) 22%, transparent); border-inline-start:0; box-shadow:0 26px 60px -44px rgba(1,22,26,.55); background: radial-gradient(96% 118% at 74% 6%, color-mix(in srgb,var(--c) 26%,transparent), transparent 62%), linear-gradient(168deg, #05171b 0%, #061f24 54%, #04141a 100%); } .vitr--troca .vitr__arte{ border-start-end-radius:0; border-end-end-radius:0; border-start-start-radius:var(--raio); border-end-start-radius:var(--raio); border-inline-start:1px solid color-mix(in srgb, var(--c) 22%, transparent); border-inline-end:0; } /* O halo troca de canto com o lado, para a luz vir sempre do lado de fora. */ .vitr--troca .vitr__arte{ background: radial-gradient(96% 118% at 26% 6%, color-mix(in srgb,var(--c) 26%,transparent), transparent 62%), linear-gradient(192deg, #05171b 0%, #061f24 54%, #04141a 100%); } /* O risco da cor no cimo, como as páginas de produto têm. */ .vitr__arte::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; z-index:4; background:linear-gradient(90deg,var(--cl),var(--c) 58%,transparent); } .vitr--troca .vitr__arte::before{ background:linear-gradient(270deg,var(--cl),var(--c) 58%,transparent); } /* A PROPORÇÃO DO LADRILHO É UM ACORDO ENTRE DUAS COISAS QUE NÃO BATEM. A referência mostra ladrilhos de PAISAGEM, largos e baixos, à volta de 2.2:1. O motor desenha sempre num `viewBox` de 560×460, que é 1.22:1, e o SVG entra com `meet`: numa caixa mais larga do que o desenho, ele ajusta-se pela altura e o que sobra de cada lado fica a mostrar o fundo do ladrilho. 1.22:1 o desenho enche, e o ladrilho fica quase quadrado — nada parecido com a referência, e a secção passa dos 3200px; 2.20:1 a proporção da referência, e o desenho ocupa 55% da caixa; 1.50:1 paisagem a sério, 81% de preenchimento, e a secção cabe em 2700px. Fica o acordo. O que sobra de cada lado não é buraco: é o gradiente do ladrilho, com o halo da cor do produto a continuar por ele. */ .vitr__cena{ --acc:var(--c); --acc-2:var(--c); position:relative; display:block; aspect-ratio:3/2; overflow:hidden; } .vitr__cena svg{ position:absolute; inset:0; inline-size:100%; block-size:100% } /* -------------------------------------------------------------------------- A COLUNA DE TEXTO Sobre papel, e por isso tudo muda de valor: o nome a tinta, o posicionamento em cinzento, a cor do produto só no nome e no link. -------------------------------------------------------------------------- */ .vitr__txt{ min-inline-size:0; display:grid; justify-items:start; align-content:center } .vitr__pos{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); } /* O NOME É TEXTO, e não uma imagem. Sobre escuro usava-se `vazto-branco.png`; em chão claro um logótipo branco não existe e o projecto não tem ficheiro escuro. Escreve-se: "Vazto" a tinta e a palavra do produto na cor dele. */ .vitr__nome{ margin-block-start:10px; font-family:var(--display); font-weight:700; letter-spacing:-.03em; font-size:clamp(25px,3vw,34px); line-height:1.05; color:var(--ink); } .vitr__nome em{ font-style:normal; color:var(--tinta) } .vitr__q{ margin-block-start:12px; font-size:clamp(15px,1.6vw,17px); line-height:1.5; color:var(--text); max-inline-size:40ch; } .vitr__d{ margin-block-start:9px; font-size:14.5px; line-height:1.6; color:var(--text-soft); max-inline-size:44ch; } /* O BOTÃO É `.btn`, O COMPONENTE DO SITE. Esteve aqui um link sublinhado desenhado só para esta secção. Era um estilo novo para um CTA que já existe em todas as outras páginas, e é exactamente o que o briefing de 17/09 manda não fazer. A ALTURA, O RAIO, A TIPOGRAFIA, O ESPAÇAMENTO E A SETA são os do componente, e não se tocam. O que muda é a cor — e muda pela mesma razão por que muda em cada página de produto: o botão do Search é âmbar, o do Flow é lima. A variante usada é a que `.g-dark .btn` já traz no site: preenchimento claro e tinta escura por cima, que é o par que funciona com as cinco cores da marca. Sobre elas, texto branco não passa de 2:1. */ .vitr__cta{ margin-block-start:clamp(18px,2vw,26px); background:linear-gradient(160deg, var(--cl), var(--c) 52%, color-mix(in srgb, var(--c) 78%, #000)); color:#08141a; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), 0 12px 30px -14px color-mix(in srgb, var(--c) 90%, transparent); } .vitr__cta::after{ background:radial-gradient(closest-side, color-mix(in srgb, var(--c) 92%, transparent), transparent 74%); } .vitr__cta svg{ inline-size:15px; block-size:15px; transition:transform .22s } .vitr__cta:hover svg{ transform:translateX(3px) } /* -------------------------------------------------------------------------- O DESKTOP — e a simetria, que é o ponto desta ronda A GRELHA TEM DUAS COLUNAS E A DA ARTE É SEMPRE A MESMA LARGURA, nos dois sentidos. Esteve aqui uma "cadência" — as peças ímpares com a arte mais larga do que as pares — e era exactamente o defeito que o cliente apontou: os produtos com a ilustração à esquerda ficavam maiores do que os da direita. Medido, 709px contra 611px. Saiu. ├─ arte, até à aresta ─┤ respiro ├─ texto ─┤ goteira ┤ ├ goteira ┤ ├─ texto ─┤ respiro ├─ arte, até à aresta ─┤ A coluna da arte é `goteira + arte`: chega à aresta do ecrã e acaba a uma distância fixa do centro. Como o valor é o mesmo nos dois sentidos, as duas orientações são espelhos exactos uma da outra. A GOTEIRA É A DE LEITURA, e a conta é a mesma que a `shell` faz: metade do que sobra da coluna de 1160px, mais o padding de 20px que a `shell` acrescenta por dentro. A percentagem TEM DE SER RESOLVIDA AQUI, na peça, que é o elemento à largura do ecrã; declarada mais acima e gasta na coluna de texto, resolvia contra a coluna e devolvia sempre o mínimo. -------------------------------------------------------------------------- */ @media (min-width:900px){ .vitr{ --goteira:max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter))); /* Quanto da coluna de leitura a arte ocupa. 52% deixa ao texto uma linha confortável em qualquer largura, e é o mesmo valor nas cinco peças. */ --arte:calc(var(--shell) * .52); --respiro:clamp(28px, 3.6vw, 62px); /* TRÊS COLUNAS, E A GOTEIRA É UMA DELAS — vazia. Esteve aqui como `padding-inline` da coluna de texto, e falhava pela mesma razão de sempre: uma percentagem resolve-se onde é GASTA, e contra o bloco que contém quem a gasta. Na coluna de texto, `(100% - 1160px)/2` media contra os 517px dessa coluna, dava negativo, o `max()` devolvia 20px e o texto ia parar a 20px da aresta em vez dos 160px da coluna de leitura. Medido: acabava em 1420 quando devia acabar em 1280. Como COLUNA, a largura é resolvida pela grelha contra a peça inteira, que está à largura do ecrã. É a conta certa e não há nada a confiar. */ grid-template-columns:calc(var(--goteira) + var(--arte)) minmax(0, 1fr) var(--goteira); gap:0; } .vitr--troca{ grid-template-columns:var(--goteira) minmax(0, 1fr) calc(var(--goteira) + var(--arte)); } /* COLOCAÇÃO EXPLÍCITA, e `grid-row` nas duas. Com uma coluna vazia e a arte fixada na terceira, a colocação automática — que anda por ordem de documento e nunca recua — mandava o texto para uma segunda linha e duplicava a altura da peça invertida, com a metade de baixo vazia. Nada disto dá erro. */ .vitr__arte{ grid-column:1; grid-row:1 } .vitr__txt{ grid-column:2; grid-row:1; padding-inline:var(--respiro) 0 } .vitr--troca .vitr__arte{ grid-column:3; grid-row:1 } .vitr--troca .vitr__txt{ grid-column:2; grid-row:1; padding-inline:0 var(--respiro) } /* O TECTO DA ALTURA. A arte cresce com o ecrã — é o que o sangrado faz — e a 1920px a proporção pedia 669px só de ilustração em cada uma das cinco peças. Acima do tecto volta a haver margem de cada lado, mas já com o desenho no tamanho em que se vê. */ .vitr__cena{ max-block-size:clamp(420px, 36vw, 620px) } } /* -------------------------------------------------------------------------- O TELEMÓVEL Uma coluna, a ilustração em cima. O ladrilho continua a sangrar — em coluna única a aresta do ecrã é a aresta dos dois lados —, e por isso perde os cantos arredondados e ganha a largura toda. O texto recebe a goteira normal do site e alinha com a abertura e com o fecho. -------------------------------------------------------------------------- */ @media (max-width:899px){ .vitr{ gap:clamp(14px,3.4vw,20px) } .vitr__arte{ border-radius:0; border-inline:0; } .vitr--troca .vitr__arte{ border-radius:0; border-inline:0; } .vitr__cena{ max-block-size:clamp(220px, 58vw, 420px) } .vitr__txt{ padding-inline:var(--gutter) } .vitr__q{ max-inline-size:none } .vitr__d{ max-inline-size:none } } @media (max-width:520px){ .vitr__nome{ font-size:24px } .vitr__d{ font-size:14px } }