/* Grupo Dls/ - índice editorial (/conteudo) * * A página que o "Ver todo o conteúdo" da home promete, e a irmã * estrutural do índice de cases: mesmo chão de papel, mesma grade de * três colunas alinhadas, mesmo fechamento preto emendado no rodapé. * * O QUE ESTA FOLHA NÃO REFAZ - e é quase tudo. * O cartão vem de `scenes.css` (`.case`), a grade e o fechamento vêm de * `cases.css` (`.ci-grade`, `.ci-fim`, `.ci-barra`, `.ci-conta`). Os dois * arquivos entram inteiros na página. Reimplementar o cartão aqui daria * dois cartões para manter juntos, e eles divergem na terceira alteração; * é o mesmo raciocínio que `cases.css` já escreveu quando reaproveitou o * cartão da faixa da home. * * O QUE MUDA, E SÓ ISSO: * 1. o topo editorial, que a referência (monks.com/thinking) põe antes * de qualquer peça; * 2. a PROPORÇÃO da moldura - 4/3 e não 4/5, porque as fotos das * matérias são paisagem; * 3. o corpo do cartão, que carrega título de matéria em vez de nome * de cliente e pílulas de serviço. */ /* ============================================================ a página As mesmas três decisões de superfície do índice de cases, reescritas para esta página em vez de emprestadas da classe `.cases-page`: pendurar /conteudo numa classe chamada "cases-page" é o tipo de economia que ninguém entende seis meses depois. ============================================================ */ .conteudo-page { background: var(--bg); } /* Sobre chão claro o header se resolve por subtração, sem coreografia - mesma decisão da página de case e do índice. */ .conteudo-page .header { background: none; mix-blend-mode: difference; } /* O anel de foco amarelo do sistema mede 1.07:1 sobre claro. Aqui ele é preto com um segundo anel branco por fora, para sobreviver também quando o alvo estiver sobre a capa da matéria. */ .conteudo-page :focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; box-shadow: 0 0 0 5px var(--c-white); } /* O rodapé vem junto com o fechamento: emendar preto com preto tira a costura, e o botão branco do rodapé sumiria sobre chão claro. */ /* A REGRA DO RODAPÉ ESCURO SUBIU PARA `layout.css` (25/08), junto com as das outras três páginas de chão claro. Eram quatro cópias da mesma decisão e duas estavam incompletas - o porquê está lá. */ /* ============================================================ co-topo Manchete, uma linha de recado, e a lista logo abaixo. Sem banner: no índice de cases a peça É a prova e a foto convence antes do texto; aqui a peça é o texto, e uma capa gigante no topo prometeria uma matéria em destaque que ninguém escolheu. ============================================================ */ .co-topo { padding-block: clamp(var(--sp-9), 15vh, var(--sp-10)) clamp(var(--sp-8), 8vh, var(--sp-9)); } .co-topo__rotulo { margin-bottom: clamp(var(--sp-5), 4vh, var(--sp-6)); } /* ESCALA PRÓPRIA, MENOR QUE `--fs-display-xl`, e pela mesma razão que a dos heros de frente: a manchete tem 73 caracteres e na escala da home sairia em cinco linhas, empurrando a primeira fileira de cartões para fora da primeira dobra. A CAIXA É MEDIDA EM `em`, E ISSO É O QUE ELIMINA O DEGRAU. Justificado abre vão de palavra quando sobram poucas palavras numa linha, e quantas palavras cabem por linha é a razão LARGURA / CORPO. Uma largura percentual e um corpo em `vw` crescem em ritmos diferentes, e essa razão passa a variar com a janela: a mesma frase quebra em duas linhas cheias numa largura e em três com uma órfã de oito caracteres na largura seguinte. Medido, com `min(72%, 1000px)`: 820 / 1024 / 1440 2 linhas vão de 1,8x a 2,5x o espaço normal 768 / 1180 / 1280 3 linhas vão de 3,6x a 4,7x <- o degrau Em `em` a largura da caixa é sempre N vezes o corpo, então a razão é CONSTANTE por construção - e com ela a quebra. Não há mais uma largura infeliz para alguém descobrir depois. O N SE ACERTA COM A FRASE, E TEM DE SER REMEDIDO QUANDO ELA MUDA. Ele não é uma medida de leitura, é o ponto onde a frase parte em duas linhas cheias - e isso depende de onde caem os espaços. A frase tinha 73 caracteres e 20em davam 38+34; ao trocar "quem executa" por "quem faz" ela caiu para 69 e os mesmos 20em passaram a dar 38+30, com a segunda linha esticada em 4,6x o espaço normal. Varrido de 16 a 24em, medido de 768 a 1920: 16em / 17em 3 linhas, última com 13 caracteres até 22,8x 18em 3 linhas, última com 9 caracteres até 58,8x 19em 2 linhas de 35 e 33 1,89x <- 20em 2 linhas de 38 e 30 4,61x 21em a 24em 2 linhas de 38 e 30 5,7x a 9,0x 19em é o único valor em que as duas linhas ficam parelhas. Trocar uma palavra da manchete pede refazer esta varredura - é o preço de a assinatura da identidade ser justificada dos dois lados. `em` E NÃO `ch`, mas pelo motivo oposto ao da armadilha 9. A armadilha é usar `ch` num CONTAINER, onde a unidade resolve contra a fonte do container e não contra a do texto lá dentro. Aqui a caixa É o texto: a unidade resolve contra a própria fonte da manchete, que é exatamente o que se quer. O `min(..., 100%)` existe só como cinto de segurança - a 768 os 19em dão 608px contra 706px de `shell`, e a caixa nunca encosta nele. E é por isso que a manchete precisa ser LONGA. `text-align-last: justify` estica a última linha até a borda da caixa: numa frase de quatro palavras isso abre vãos do tamanho de uma coluna. O documento não dá H1 para esta página, e a frase 6.3 - que é a tese dela - tem comprimento de sobra para encher as duas linhas. */ .co-topo__titulo { margin: 0; font-size: clamp(1.6rem, 0.8rem + 2.5vw, 3rem); max-width: min(19em, 100%); } .co-topo__sub { margin-top: clamp(var(--sp-5), 4vh, var(--sp-6)); max-width: 46ch; /* no próprio elemento que carrega a fonte do corpo */ color: var(--fg-muted); } /* ============================================================ o painel de filtro A barra, o botão, a contagem, as pílulas, o estado vazio - tudo isso é `.ci-filtros` de `cases.css`, e nada disso está aqui. O que muda é UMA coisa: a quantidade de colunas do painel. ============================================================ */ /* UMA COLUNA E NÃO TRÊS. `.ci-painel__grupos` divide o painel em três porque em /cases são vinte e três serviços repartidos entre as três frentes, e cada frente ocupa uma coluna com o nome dela em cima. Aqui há um grupo só, com quatro categorias: nas três colunas ele ficaria espremido no terço esquerdo do painel, com dois terços de papel vazio à direita e as pílulas quebrando linha sem precisar. A classe é própria (`.co-painel__grupos`) e não uma reescrita de `.ci-painel__grupos`: quem tem um eixo só é esta página, não o componente. */ .co-painel__grupos { grid-template-columns: minmax(0, 1fr); } /* ============================================================ co-grade Três colunas alinhadas, `align-items: start`, entrada em cascata - tudo isso é `.ci-grade`, e nada disso está aqui. ============================================================ */ .co-grade { padding-block: clamp(var(--sp-7), 7vh, var(--sp-9)) clamp(var(--sp-9), 11vh, var(--sp-10)); } /* PESO TRÊS DE PROPÓSITO. `.ci-grade .case__frame` já declara `aspect-ratio: 4 / 5`, e um seletor de peso igual venceria só por vir depois na ordem dos arquivos - o que faz a proporção da página depender da ordem dos `` no ``. Com a classe dupla no mesmo elemento o peso é (0,3,0) contra (0,2,0) e a disputa acaba na especificidade, que é onde ela pode ser lida. 4/3 E NÃO 4/5, e não 16/9: as três fotos são paisagem em 782x660 e 945x710, ou seja, 1.18 e 1.33. Em 4/5 (0.8) o recorte comeria 40% da largura de cada uma; em 16/9 (1.78) comeria um terço da altura das duas últimas. 4/3 é a proporção que as próprias fotos já têm. */ .ci-grade.co-grade .case__frame { height: auto; aspect-ratio: 4 / 3; border-radius: var(--r-cartao); } /* O corpo do cartão de case aperta os itens em 8px porque lá são quatro linhas curtas (frente, cliente, régua, pílulas). Aqui são três blocos de leitura, e o título ocupa duas ou três linhas. */ .ci-grade.co-grade .case__body { gap: var(--sp-3); } /* O TÍTULO É A PEÇA DO CARTÃO. Na referência ele é o único elemento em escala, com a categoria acima em corpo de rótulo - e é o que faz um índice editorial ler como lista de leituras e não como galeria de miniaturas. Peso 300 e não 500: o cartão de case usa Medium porque "Sinbi" é uma palavra e precisa de densidade; um título de matéria tem trinta caracteres e em Medium vira um bloco escuro. */ .co-titulo { font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem); font-weight: 300; line-height: 1.15; letter-spacing: var(--tr-display); } /* A saída da matéria, com a mesma palavra da home ("Leia o artigo") - quem viu o cartão lá e chegou aqui lê o mesmo convite. Cinza parado e preto no hover, e não uma pílula: a pílula da home existe porque lá a nota é uma LINHA de texto e o CTA é a única coisa que denuncia que ela é clicável. Aqui o cartão inteiro é a promessa - tem capa, tem botão redondo que segue o cursor - e uma pílula a mais seria o terceiro convite no mesmo cartão. */ .co-ler { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); transition: color var(--dur-base) var(--ease-out); } .case:hover .co-ler, .case:focus-visible .co-ler { color: var(--fg); } /* `.btn__arrow` só anda dentro de `.btn`. Aqui quem move é o cartão. */ .case:hover .co-ler .btn__arrow, .case:focus-visible .co-ler .btn__arrow { transform: translateX(3px); } /* ============================================================ telas menores A grade colapsa em `cases.css` (duas colunas a 1024, uma a 560) e nada disso se repete aqui. O que muda é a manchete: o justificado é o que sofre com pouca largura. ============================================================ */ /* ============================================================ o fechamento A seção preta continua sendo a `.ci-fim` de `cases.css`. O que mudou dentro dela é o convite: era a caixa do índice de cases (frase cinza, botão branco) e passou a ser a `.placa` que fecha as frentes - squircle na cor da unidade, com manchete e botão. ============================================================ */ /* OS DOIS TOKENS QUE A PLACA LÊ. Ela não carrega cor própria de propósito (ver `layout.css`), e quem os declarava era `.frente-page`. Esta página não é uma frente: é do grupo, e a cor do grupo é a mesma `--c-yellow` da Dls/ Comunicação - por isso o fechamento daqui sai idêntico ao de lá, e não por cópia de valor. Preto sobre #ffdd00 mede 15,59:1. */ .conteudo-page { --unidade: var(--c-yellow); --sobre-unidade: var(--c-black); } /* O MESMO RESPIRO DO `.fr-fechamento`. `.ci-fim` usa `clamp(--sp-9, 11vh, --sp-10)`, que é o fechamento do índice de cases; a placa é mais alta do que a caixa que estava aqui, e manter o padding maior somaria altura a uma seção que já cresceu. Igual à /comunicacao também nisto. */ .conteudo-page .ci-fim { padding-block: clamp(var(--sp-8), 10vh, var(--sp-10)); } /* A INVERSÃO DO BOTÃO PRECISA SER REDITA AQUI, e o motivo é empate de especificidade decidido por ordem de carga. `.placa .btn` (layout.css) e `.ci-fim .btn` (cases.css) pesam os dois (0,2,0), e `cases.css` vem depois: sem esta regra o botão da placa herda o par do fechamento de cases - pílula BRANCA, que sobre o amarelo mede 1,35:1 e some. `.conteudo-page` na frente sobe para (0,3,0) e `conteudo.css` é a última folha da página, então ganha nos dois critérios. Mesmo par da placa: chão claro, pílula escura. */ .conteudo-page .placa .btn { --btn-bg: var(--c-black); --btn-fg: var(--c-white); } .conteudo-page .placa .btn:hover { --btn-bg: var(--c-white); --btn-fg: var(--c-black); } @media (max-width: 767px) { /* NO CELULAR A CAIXA MANDA, E ENTÃO É O CORPO QUE TEM DE ACOMPANHAR. Aqui os 20em não cabem: a 375px eles pediriam 420px contra 335px de coluna. Quem fixa a largura passa a ser a página, e para manter constante a razão largura/corpo - que é o que segura o vão - o corpo precisa acompanhar a janela. Daí `5.6vw`, que é o 21px medido a 375px. Entre 320 e 430 dá sempre três linhas de 26, 28 e 17 caracteres, com vão de 4,0x a 4,9x o espaço normal. Sem `vw`, a mesma frase pulava de 4,4x (21px) para 10,6x (22px) - um pixel de corpo mudava a quebra e a linha do meio ficava com 19 caracteres. O TETO E O PISO NÃO SÃO ENFEITE. O piso de 17px impede a manchete de virar corpo de texto em telas de 300px; o teto de 24px segura o corpo enquanto a coluna cresce até 767, onde a frase já cabe em duas linhas (1,1x a 3,9x, medido). E A ÚLTIMA LINHA DEIXA DE SER ESTICADA. `text-align-last: justify` é o que faz a assinatura da identidade num bloco de linhas cheias, e é também o que arrebenta uma linha final de duas palavras: a /grupo, com a mesma primitiva a 375px, abre 136px entre "marca" e "inteira." - vinte e cinco vezes o espaço normal. As linhas de dentro continuam justificadas, que é onde a textura do KV mora; a última alinha à esquerda, que é o que justificado faz em qualquer livro. */ .co-topo__titulo { font-size: clamp(1.0625rem, 5.6vw, 1.5rem); max-width: 100%; text-align-last: left; } /* A barra vira duas linhas em vez de espremer rótulo e contagem numa largura de dedo. */ .co-barra { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-2); padding-block: var(--sp-4); } }