/* ═══════════════════════════════════════════════════════════════════ letra.css — a ESCALA TIPOGRÁFICA da banda estreita. Substitui o chão de letra, que era um remendo: levantava para 11px pintados tudo o que descesse abaixo dos 16 declarados, e deixava a página com 20 tamanhos e o corpo a 11px em qualquer telemóvel. ═══ AS DUAS CAMADAS NÃO SE TRATAM DA MESMA MANEIRA ═══ Isto é o coração da folha, e saiu de uma medição, não de gosto. A camada de TITULARES (a face Designer) tem o tamanho decidido por uma coisa só: caber na coluna de 350. «PERSONALIZADA» mede 358px a 36px — já não cabia. Em caixa baixa mediria 334: a Designer poupa apenas 4,5 a 6,7% ao passar a minúscula, porque é uma face quase monocaixa. Ou seja: tirar-lhe as maiúsculas não resolve o problema de largura E perde a marca. Fica em CAIXA ALTA, e continua a escalar com o quadro — se se soltasse da escala, a 320 a coluna encolhia para 287px e o titular saltava fora dela. A camada de CORPO (a Roboto) envolve. Pode crescer à vontade porque uma linha a mais não desborda, dobra. E aqui a caixa alta custa 14,5 a 14,9% de largura — quinze por cento que se recuperam ao passar a caixa baixa, e que pagam quase metade da subida de 11 para 17px. Solta-se da escala do quadro e passa a responder ao LEITOR. ═══ O TRUQUE DA DIVISÃO, E PORQUE É QUE ELE FUNCIONA ═══ Tudo dentro do `.quadro` leva `transform: scale(k)`. Uma letra declarada a 17px pinta a 17×k — 13,9 num ecrã de 320. Para que a medida PINTADA seja a que se pediu, declara-se dividida: font-size: calc(var(--c2) / var(--kt, 1)) → pinta var(--c2) Medido nas cinco larguras: a expressão dá 20,62 / 18,59 / 17,34 / 15,94 / 11,48 declarados, e pinta 16,92 / 17,16 / 17,34 / 17,58 / 18,84. É a rampa fluida, intacta do outro lado da escala. NÃO SE DIVIDE PELO `--k`. O `--k` é `calc(100cqw / (qw * 1px))` e como divisor resolve-se como 1 — dá o mesmo número em todas as larguras, sem um aviso. Quem divide é o `--kt`, que o `quadro.js` escreve por extenso e trava aos 0,82051. Ver [[medir-no-navegador]]. ═══ E POR ISSO O TEXTO PASSA A OBEDECER A QUEM LÊ ═══ Os passos são `rem` + `vw`. O `rem` é a letra do navegador, por isso quem a aumenta aumenta o sítio. Medido a 390: letra do browser 16px → o corpo pinta 17,34px letra do browser 24px → o corpo pinta 24,84px letra do browser 32px → o corpo pinta 32,34px Antes pintava 13,4px nos três casos e a página não mudava um pixel de altura. Era um chumbo em WCAG 2.2 · 1.4.4 (Resize Text, AA). ═══════════════════════════════════════════════════════════════════ */ /* ═══ OS PASSOS VIVEM NA RAIZ, E NÃO NO PALCO ═══ Metade da letra pequena do sítio não está dentro do quadro: o rodapé, o aviso de cookies, as duas acções fixas ao fundo e a barra são CASCA, com folhas próprias, e traziam à mão a fórmula do chão antigo — `max(10,4px, calc(11px / var(--kt, 1)))` e mais seis iguais. Nunca passaram por escala nenhuma, e eram exactamente as peças que a auditoria apanhou a pintar 11px. Na raiz, os passos servem os dois lados. E a mesma expressão serve os dois sítios sem se escrever duas vezes: font-size: calc(var(--c2) / var(--kt, 1)) Dentro do quadro o `--kt` existe (o `quadro.js` escreve-o no palco) e desfaz a escala. Fora dele não existe, o `var()` cai no 1, e a conta devolve o passo tal e qual. Uma linha, dois mundos. */ :root { /* ═══ CORPO — Roboto, caixa baixa, direita, fluida ═══ Os quatro passos que substituem os catorze tamanhos de 9,4 a 14,5. O `rem` manda no piso, o `vw` na rampa, e o terceiro valor põe um tecto para a franja do tablet não a levar a lupa. 320 390 640 1023 c1 18,6 19,0 20,1 21,7 c2 16,7 17,0 18,1 19,9 c3 14,8 15,0 15,7 16,9 c4 13,3 13,5 14,1 15,1 O c3 e o c4 subiram de 14,1 e 12,9 depois da primeira medição: 705 dos 1163 blocos do sítio caem nestes dois passos — são os rótulos das peças, os «desde», as técnicas — e um terço da página a 12,9px continuava a ser uma página de letra pequena, por muito que o corpo estivesse resolvido. */ --c1: clamp(1.02rem, 1.06rem + 0.52vw, 1.44rem); /* entrada */ --c2: clamp(1.00rem, 0.95rem + 0.46vw, 1.30rem); /* corpo */ --c3: clamp(0.86rem, 0.864rem + 0.30vw, 1.12rem); /* nota, rótulo */ --c4: clamp(0.78rem, 0.780rem + 0.26vw, 1.00rem); /* micro */ /* ═══ TITULARES — Designer, caixa alta, presos ao quadro ═══ Em unidades de artboard, porque escalam com a coluna. Cinco passos no lugar de doze tamanhos entre 12,5 e 36. O d1 é 34 e não 36 de propósito: a 36 o «PERSONALIZADA» do herói media 358 numa coluna de 350 e saía cortado em TODAS as larguras. A 34 mede 338 e cabe. Foi a única medida que se mexeu por caber. Os três de cima são de 13-set e são OPT-IN: só os apanha quem declarar 39 ou mais no artboard, e nenhuma página estreita o fazia. Existem porque o tecto de cada titular é a sua palavra mais comprida, e não a escala — «Brindes & Kits» não passa dos 36.9, «Fardamentos» dos 39.1, «A escolha é tua» chega aos 51.9. */ --dxg: 44px; /* titular de secção que cabe folgado (A escolha é tua) */ --dg: 38px; /* titular de secção comprido (Roupa & Fardamentos) */ --dm: 36px; /* titular de secção no limite (Brindes & Kits) */ --d1: 34px; /* herói */ --d2: 29px; /* titular de secção */ --d3: 24px; /* subtitular, pergunta de carta */ --d4: 20px; /* nome de peça, valor */ --d5: 15px; /* rótulo, pastilha, chamada */ } /* ═══ A BASE HERDADA ═══ O `div` do quadro não declara `font-size`, por isso tudo o que não o declare herdava os 16px do browser e pintava 13,1 a 390. E das 229 peças de texto da página, só 70 declaram tamanho: as outras 159 vivem desta base. Por isso é aqui, e não nas marcas, que se ganha ou se perde a página. A CAIXA BAIXA É O DEFEITO, e é uma inversão deliberada. O quadro trazia `text-transform: uppercase` em linha e todas herdavam; o gerador tira-lho (ver `escalaDeLetra`, passo 0) e a partir daqui quem quer versais pede-as. Assim o caso comum — prosa — está certo sem marca nenhuma, e o caso especial — rótulo, titular — declara-se. Ao contrário, eram 159 peças à espera de uma marca que não tinham. */ .palco--estreito .quadro { font-size: calc(var(--c2) / var(--kt, 1)); line-height: 1.55; text-transform: none; font-style: normal; /* A Roboto do sítio é variável (wdth 75..100). Em caixa baixa e a correr, a largura normal lê-se melhor do que a condensada. */ font-variation-settings: 'wdth' 100; } /* ═══════════════════════════════════════════════════════════════════ A CAIXA ALTA E A ITÁLICA VÊM DE UM SÍTIO SÓ O artboard declara-as UMA vez, em linha, no `div` do quadro: font-style: italic; text-transform: uppercase; e as 262 peças de texto da página herdam-nas daí. Não há uma segunda declaração no ficheiro inteiro — procurei. É por isso que isto se faz numa folha e não a reescrever marcado: uma declaração em linha só ganha ao que está NO PRÓPRIO elemento. Herdada, perde para qualquer regra que acerte no filho. Por isso o gerador só tem de marcar o papel de cada peça; a caixa decide-se aqui, e voltar atrás é apagar duas linhas. O QUE MUDA DE CAIXA, E O QUE NÃO. Muda o que se LÊ — entrada e corpo. Não muda o que se ETIQUETA — rótulos, pastilhas, números, titulares. Um rótulo de três palavras em versaletes é a voz da casa; um parágrafo de quarenta é um castigo. ═══════════════════════════════════════════════════════════════════ */ /* Os TITULARES recuperam as versais. A Designer já é oblíqua de nascença: inclinar uma oblíqua é inclinar duas vezes, por isso não levam itálica. */ .palco--estreito .quadro [data-letra^="d"] { text-transform: uppercase; font-style: normal; } /* Os RÓTULOS guardam a voz inteira — versais, itálica, e o espacejamento que a caixa alta pede para não se fechar sobre si própria. Três palavras em versais são uma etiqueta; quarenta são um castigo, e por isso a entrada e o corpo ficam de fora. */ .palco--estreito .quadro [data-letra="c3"], .palco--estreito .quadro [data-letra="c4"] { text-transform: uppercase; font-style: italic; letter-spacing: 0.06em; } /* E o que se LÊ fica em caixa baixa e direito, mesmo dentro de um rótulo que o envolva. */ .palco--estreito .quadro [data-letra="c1"], .palco--estreito .quadro [data-letra="c2"] { text-transform: none; font-style: normal; } /* ═══ AS ENTRELINHAS ═══ 198 das 229 peças não declaravam nenhuma e ficavam no `normal` da Roboto, que é ~1,15. Para caixa alta a 11px isso era um bloco. */ .palco--estreito .quadro [data-letra="c1"] { line-height: 1.45; } .palco--estreito .quadro [data-letra="c2"] { line-height: 1.55; } .palco--estreito .quadro [data-letra="c3"] { line-height: 1.42; } .palco--estreito .quadro [data-letra="c4"] { line-height: 1.38; } .palco--estreito .quadro [data-letra="dxg"] { line-height: 0.96; } .palco--estreito .quadro [data-letra="dg"] { line-height: 1.00; } .palco--estreito .quadro [data-letra="dm"] { line-height: 1.01; } .palco--estreito .quadro [data-letra="d1"] { line-height: 1.02; } .palco--estreito .quadro [data-letra="d2"] { line-height: 1.08; } .palco--estreito .quadro [data-letra="d3"] { line-height: 1.16; } .palco--estreito .quadro [data-letra="d4"] { line-height: 1.22; } .palco--estreito .quadro [data-letra="d5"] { line-height: 1.28; } /* ═══ O EQUILÍBRIO DAS ÚLTIMAS LINHAS ═══ Um titular de três palavras que deixa uma sozinha na segunda linha lê-se como um erro de composição. O `balance` reparte-as; o browser que não o conheça ignora a linha e nada se perde. */ .palco--estreito .quadro [data-letra="dxg"], .palco--estreito .quadro [data-letra="dg"], .palco--estreito .quadro [data-letra="dm"], .palco--estreito .quadro [data-letra="d1"], .palco--estreito .quadro [data-letra="d2"], .palco--estreito .quadro [data-letra="d3"] { text-wrap: balance; } /* E no corpo, `pretty`: não reparte a coluna toda, só evita a palavra órfã no fim do parágrafo. */ .palco--estreito .quadro [data-letra="c1"], .palco--estreito .quadro [data-letra="c2"] { text-wrap: pretty; } /* ═══════════════════════════════════════════════════════════════════ O EIXO — A COLUNA DE 390 LÊ-SE AO CENTRO (12-set) Foi pedido: os parágrafos e o conteúdo das cartas centrados, «como num documento», harmónico. E é uma regra GLOBAL da banda estreita — página a página seriam treze artboards a divergir à primeira edição. ═══ UMA DECLARAÇÃO, E NÃO UMA LISTA ═══ Faz-se como se fez a caixa alta: muda-se o DEFEITO no quadro e deixa-se cada peça pedir o contrário. O `text-align` herda-se, e a herança é o que perde para tudo — para uma regra da folha do artboard, para um `style=` em linha, para uma declaração desta folha. Ou seja: as peças que o desenhador já alinhou à mão (os `text-align: left` e `right` que os artboards declaram) ficam exactamente como estavam, sem uma excepção escrita aqui. O que muda é o caso comum: as peças da banda que não declaram alinhamento nenhum — a prosa, os corpos das cartas, os títulos de secção. Essas passam a ler-se ao eixo da coluna. ═══ O QUE FICA DE FORA, E PORQUÊ ═══ · A CASCA. A barra, a gaveta do hambúrguer, as duas acções ao fundo e o aviso de cookies vivem FORA do `.quadro` — nem são apanhados. O rodapé está dentro, mas já declara `text-align: left` na sua folha (`rodape.css`), e continua à esquerda: é um bloco de marca, não prosa. · OS CAMPOS DE FORMULÁRIO. Um `placeholder` ao centro que salta para a esquerda quando se escreve lê-se como avaria, e um valor centrado num campo é mais difícil de reler do que um encostado. O rótulo do campo acompanha o campo, não a coluna. · AS LISTAS LONGAS DAS LEGAIS. O `#lgcorpo` são quatro páginas de prosa jurídica com alíneas: ao centro, cada alínea passa a começar num sítio diferente e perde-se a leitura em coluna. É o caso exacto em que centrar custa legibilidade, e a única prosa do sítio onde isso acontece — as outras são parágrafos de três a cinco linhas. · AS PASTILHAS. São caixas `display: flex` ajustadas ao conteúdo, e num flex o `text-align` não move item nenhum. Ficam onde as coordenadas do artboard as pousaram. ═══════════════════════════════════════════════════════════════════ */ .palco--estreito .quadro { text-align: center; } /* ═══ OS SOBRETÍTULOS ═══ Estes eram a pedra no sapato desta folha. O rótulo dos quatro pontos TAMBÉM é uma caixa `display: flex` — mas, ao contrário das pastilhas, tem a largura da coluna. Ou seja: a caixa foi ao eixo com o resto, o par pontos+texto ficou encostado à esquerda dela, e o `text-align` herdado dizia `center` sem mover nada. O que se via era o título ao meio e o rótulo que o anuncia a começar no bordo da coluna — em `pro.html` a 68px do eixo do próprio título. Num flex quem move os itens é o `justify-content`, e é a única declaração que isto precisa. Os selos vêm do `gerar.mjs` (`eixoDosSobretitulos()`), que os marca pela vizinhança dos quatro pontos porque o artboard não lhes dá classe, e que fecha a caixa a quem venha sem `width`. SEM `!important`, DE PROPÓSITO. Uma classe perde para o `style=` em linha, e é isso que se quer: quem o artboard já mandou para um lado com `justify-content` em linha continua lá. É o «Ponto por ponto» do Sobre, que anuncia uma linha de tempo pendurada numa espinha vertical em x=74 e ao eixo descolava dela. (O `gerar.mjs` já salta esses — a marca nem chega a ser posta. São duas voltas na mesma chave, e nenhuma delas custa nada.) ACOTADO À BANDA ESTREITA. A 1440 a composição é outra: o sobretítulo parte do mesmo x do título por desenho, e centrá-lo era desalinhar a coluna larga inteira. */ .palco--estreito .quadro .sobretitulo { justify-content: center; } /* Os campos, e o rótulo que os nomeia. Os nomes são os do artboard: `.ocampo` é o `