/* Base de uso no celular, comum a todas as telas. * * Existe como arquivo separado, importado no topo dos CSS de cada área, porque * o que está aqui não é estilo de uma tela: é o mínimo para o site ser usável * com o polegar. Espalhar essas regras pelos seis arquivos de estilo garantiria * que a próxima tela nascesse sem elas. * * As correções vieram de uma medição, e não de palpite. Num viewport de 390px, * antes deste arquivo: 61 alvos de toque abaixo de 40px no /feed, 34 na home e * 20 no /ranking (onde o @ de cada posição tinha 17px de altura), 161 textos * abaixo de 12px na home, e todo campo de formulário entre 14px e 15px. * * O que NÃO está aqui, de propósito: nada que mude o desktop. As regras vivem * dentro da media query, porque o site já funciona bem na tela grande e o * objetivo é o polegar, não uma reforma. */ @media (max-width: 640px) { /* ---------- 1. campos de formulário: 16px ---------- */ /* Abaixo de 16px o iOS DÁ ZOOM sozinho ao focar o campo, e a página inteira salta de escala no meio do preenchimento — o formulário de login e o cadastro da landing faziam isso em todo iPhone. Não é preferência de tamanho: 16px é o limiar do sistema. */ /* `body` na frente para ganhar de um `input { font-size: 14px }` escrito no