/* ═══════════════════════════════════════════════════════════════════ toque.css — a diferença entre um rato e um dedo. Um ponteiro tem um pixel. Um dedo tem nove milímetros, e não vê o que tapa. O desenho de 390 está certo — o que lhe falta é a caixa INVISÍVEL à volta de cada coisa clicável, que não é matéria de desenho e por isso nunca esteve no artboard. ═══ O QUE SE MEDIU ═══ Nas treze páginas, a 390, contadas as ligações e os botões visíveis: dezassete a vinte e dois por página abaixo de 24×24 CSS px, que é o mínimo da WCAG 2.2 AA. Os piores são os que mais interessam: «Ver o que fazemos» 304×18 a saída do herói «Entrar no PRO» 302×18 a outra saída do herói «Monta o teu kit» 350×16 o remate dos Brindes «Como garantimos o sigilo» 350×16 o remate do PRO «Espreita o armário» 152×15 a entrada do armário «Ver no mapa» 98×14 a morada as vinte do rodapé 163×15 ×13 páginas Dessas vinte já não há nenhuma: as três colunas de ligações saíram do rodapé a 12-set (ver o `fonte/rodape.mjs`). A conta fica porque foi ela que desenhou esta folha. ═══ A CORRECÇÃO NÃO MEXE UM PIXEL DO DESENHO ═══ Não se engorda o texto nem se lhe põe enchimento: as duas coisas empurravam o que está à volta, e num quadro em coordenadas empurrar é partir. Põe-se um `::after` transparente, ABSOLUTO, esticado para fora da caixa. Não ocupa espaço no fluxo, não pinta nada, e apanha o dedo. É a mesma peça, com uma auréola. Vê-se igual e toca-se ao primeiro. ═══════════════════════════════════════════════════════════════════ */ /* O `::after` mede-se contra o antepassado posicionado mais próximo. As peças do artboard já são quase todas absolutas ou relativas; as que não são ganham aqui um `relative`, que num elemento em linha não desloca coisa nenhuma — só lhe dá origem. */ .palco--estreito .quadro :is(.doorcta, .espreita, .bresto, .lagain, .s6-link, .rodape-mapa) { position: relative; } .palco--estreito .quadro :is(.doorcta, .espreita, .bresto, .lagain, .s6-link, .rodape-mapa)::after { content: ''; position: absolute; z-index: 0; /* O bastante para levar 15 a 18px de altura acima dos 44. Nunca se estende tanto que chegue ao alvo do lado — `site/_toque.html` mede as folgas e não deixa. */ inset: -14px -12px; } /* ═══ O RODAPÉ ERA OUTRO CASO, E DEIXOU DE SER (12-set) ═══ Aqui havia uma auréola APERTADA — `inset: -6px -8px -7px` — e a razão era o empilhamento: as vinte ligações das três colunas estavam a 13px de vão, e uma auréola de 14 para cada lado dava vinte e sete de sobreposição entre vizinhas. O dedo aterrava entre duas e abria a errada, que é pior do que falhar. Ficavam nos 28px de altura — o mínimo da WCAG com folga, e não os 44. AS COLUNAS SAÍRAM (ver o `fonte/rodape.mjs`), e a excepção com elas. O «Ver no mapa» não tem vizinha nenhuma a 13px — a morada por cima é um `

`, e por baixo vem o fio de cabelo do remate —, e passa a levar a auréola cheia do resto do sítio: de 28 para ~51px de altura, acima dos 44, que ali nunca se conseguiram. Uma coisa que as colunas pagavam sem se ver. E VOLTOU A HAVER LIGAÇÕES JUNTAS NO RODAPÉ, sem que isto precise de voltar a ser um caso (12-set, mais tarde no dia): o remate ganhou a LINHA DE LEGAIS, cinco ligações que a 390 quebram em três linhas. Levam esta auréola, a cheia, e o que garante que duas não se pisam NÃO é apertá-la — é o vão entre elas, que a `fonte/rodape.css` põe nos mínimos que ela exige: 28 de linha (14+14) e 24 de coluna (12+12), o que dá auréolas encostadas com sobreposição zero e alvos de ~48px de altura. A conta está escrita no `.rodape-legais` de lá, ao lado dos números que ela decide. Apertar a auréola devolvia os 28px de altura; afastar a letra era desenho a pagar por geometria que já fecha. E o logótipo do rodapé, que é a outra ligação do bloco: 188×34, sem auréola nenhuma porque não é `.s6-link`. Seis pixéis em volta põem-no nos 46. ═══ E A REGRA DO LOGÓTIPO SÓ AGORA É SÓ DELE (15-set) ═══ Isto está escrito como se os 6px fossem do logótipo, e o selector dizia `.rodape-marca > a[href]` — que também era o «Ver no mapa», filho directo da marca. Por especificidade ganhava à auréola cheia do `:is()` lá em cima, e o parágrafo anterior descrevia uma coisa que não estava a acontecer: o «Ver no mapa» andava com a auréola apertada, em ~32px de altura e não nos ~51 prometidos. Quando o Blog entrou no rodapé (ver o `ELOS DA MARCA` do `fonte/rodape.mjs`), os dois passaram a viver num `.rodape-elos` e deixaram de ser filhos directos da marca. A regra ficou a ser o que o texto sempre disse que era: só do logótipo, que é o único `` pendurado directamente ali. Os dois elos levam agora a auréola cheia, e o vão de 24 que a `rodape.css` lhes põe é o que impede que se pisem. */ .palco--estreito .quadro .rodape-marca > a[href] { position: relative; } .palco--estreito .quadro .rodape-marca > a[href]::after { content: ''; position: absolute; inset: -6px; } /* A pastilha da barra: o logótipo mede 142,6×25,8 desde que cresceu os 8% (ver o `ampliarLogo()` do `gerar.mjs`) — 121×21,9 no índice, que é o único artboard estreito com a nav de 44 e não de 56. A auréola põe-lhe a altura toda da pastilha, que é onde a pessoa aponta, e pára nos 15 para não passar a aresta dela. */ .barra--estreito .pill > a[href]::after { content: ''; position: absolute; inset: -15px -10px; } .barra--estreito .pill > a[href] { position: relative; } /* ═══ O HAMBÚRGUER DO ÍNDICE ═══ Nas doze páginas o botão é 44×42 dentro de uma pastilha de 56. No índice a pastilha mede 44 e o botão 38×32 — desenhado assim, e é o mais pequeno dos alvos da casca. Aos 44 não cabe: a pastilha só tem 40 de caixa por dentro dos 2px de borda, e crescê-la mudava a geometria que o `barra.js` mede e a faixa herda. A auréola resolve-o sem mexer no desenho, como em todo o resto desta folha: 38×32 passa a 50×44, e o botão é a última coisa da pastilha — não tem vizinha à direita com que se pisar. */ .barra--estreito .pill > button { position: relative; } .barra--estreito .pill > button::after { content: ''; position: absolute; inset: -6px; } /* ═══ AS DUAS SETAS DO CARROSSEL DOS BRINDES, NO ÍNDICE ═══ 32×27, lado a lado, com 6px de vão, e são os dois últimos alvos da banda estreita abaixo dos 44 (tirando o © do OpenStreetMap, que é uma atribuição e não um botão). A auréola cresce PARA FORA do par: 3px para dentro do vão — metade para cada uma, que é o que as deixa encostadas sem se pisarem, e o `site/_toque.html` não deixa passar mais — e 12 para o lado de fora, onde não há nada. Ficam 47×45 cada uma. Os 44 de largura não se conseguiam de outra maneira: simétricas, sobrepunham-se 6px no vão, e um dedo que aterra entre duas setas de carrossel roda para o lado errado. */ .palco--estreito .quadro button.pill[aria-label="Anterior"], .palco--estreito .quadro button.pill[aria-label="Seguinte"] { position: relative; } .palco--estreito .quadro button.pill[aria-label="Anterior"]::after { content: ''; position: absolute; inset: -9px -3px -9px -12px; } .palco--estreito .quadro button.pill[aria-label="Seguinte"]::after { content: ''; position: absolute; inset: -9px -12px -9px -3px; } /* ═══════════════════════════════════════════════════════════════════ OS CAMPOS, E O ZOOM DO iOS O Safari do iPhone AMPLIA a página inteira quando se toca num campo cuja letra meça menos de 16px. O formulário do orçamento tem onze campos a 11,6px: tocar em «Nome» faz a página saltar e crescer, e sair de lá é uma pinça — em cada campo, onze vezes. Não é uma opção que se desligue: o `user-scalable=no` que a apagava também tira o zoom a quem precisa dele para ler, e por isso não entra aqui. A saída é a letra ter mesmo 16px. Cabe: os campos medem 62px de altura e a letra passa de 11,6 para 16 — que é, aliás, a medida a que um formulário se lê com o telemóvel na mão. O que se perde é meia linha de espaço nos que têm marcador comprido; o que se ganha é o formulário deixar de saltar. Nota da escala: o `font-size` é o que o browser lê para decidir o zoom, e a escala do palco é um `transform` — não lhe toca. Abaixo dos 390 a letra pinta-se mais pequena, como todo o resto, mas o Safari continua a ver 16 e continua quieto. ═══════════════════════════════════════════════════════════════════ */ .palco--estreito .quadro :is(input, select, textarea) { font-size: 16px; } /* A caixa de visto é 18×18 — abaixo do mínimo, e é ela que autoriza o envio. O `