/* * Base CSS do PetCare Pro. * * Regras que precisam existir ANTES do Tailwind aplicar as utilities, e que nao * dependem do bundle do Tailwind estar carregado. Manter curto: composicao * visual e responsabilidade das utilities. */ /* Alpine: esconde o elemento ate o componente inicializar, evitando o flash de dropdowns e overlays abertos no primeiro paint. */ [x-cloak] { display: none !important; } /* Fallback tipografico enquanto o bundle do Tailwind ainda nao aplicou font-sans. Sem isto a primeira pintura usa a serifada do user agent e o layout "pula" quando o Tailwind entra. */ body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Alvo de foco visivel em qualquer elemento que receba foco programatico (ex.: o resumo de erros de formulario). WCAG 2.2 AA 2.4.7. */ [tabindex='-1']:focus { outline: none; } /* ═══════════════════════════════════════════════════════════════════════════ GAVETA DO PAINEL DA CRECHE — `#menu-da-creche` ═══════════════════════════════════════════════════════════════════════════ POR QUE O ESTADO FECHADO MORA AQUI, E NAO NUMA CLASSE DO ALPINE --------------------------------------------------------------- Uma regra `:class` do Alpine so existe depois que o Alpine hidrata. Entre o primeiro paint e a hidratacao, a gaveta fica sem transform -- ou seja, ABERTA, cobrindo o conteudo. Com uma transicao declarada, o usuario ve a gaveta DESLIZAR PARA FORA a cada carregamento: uma animacao de 200ms fechando um menu que ele nao abriu. Este arquivo e um `` no ``: ele esta aplicado antes do primeiro pixel. A gaveta nasce fora da tela e o Alpine so precisa dizer quando ABRIR, via `data-aberta`. O corte e 1024px para casar com o `lg:` do Tailwind, que e onde a lateral deixa de ser gaveta e passa a ser permanente. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023.98px) { #menu-da-creche { transform: translateX(-100%); transition: transform 0.2s ease-out; } #menu-da-creche[data-aberta='true'] { transform: translateX(0); } } /* Acima de 1024px a lateral e permanente: nenhum transform, e nenhuma transicao -- redimensionar a janela nao deve produzir um menu deslizando. */ @media (min-width: 1024px) { #menu-da-creche { transform: none; } } /* WCAG 2.2 AA 2.3.3. Quem pede menos movimento no sistema operacional recebe a gaveta aparecendo direto, sem deslizar. O estado final e identico -- so o caminho ate ele desaparece. */ @media (prefers-reduced-motion: reduce) { #menu-da-creche { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ GAVETA DO PORTAL DO TUTOR — `#menu-do-tutor` ═══════════════════════════════════════════════════════════════════════════ MESMA REGRA DA GAVETA DA CRECHE, OUTRO CORTE -------------------------------------------- O estado fechado mora aqui pelo motivo ja escrito acima: uma regra `:class` do Alpine so existe depois da hidratacao, e ate la a gaveta nasceria ABERTA e deslizaria para fora a cada carregamento. Este arquivo e `` no `` e ja esta aplicado no primeiro pixel. O CORTE E 640px (`sm:`), E NAO 1024px (`lg:`) COMO NO PAINEL ------------------------------------------------------------ Nao e inconsistencia -- e a mesma regra sobre dois menus de tamanhos diferentes. A lateral do painel tem mais de vinte itens em quatro grupos e so cabe a partir de 1024px. A barra de topo do portal tem cinco links e cabe folgada em 640px, que e o corte que o proprio portal ja usava (`sm:flex`). Abaixar o corte do portal para 1024px substituiria uma barra de topo que funciona por uma gaveta que ninguem pediu, em tablet. O que os dois compartilham e a REGRA -- abaixo do corte, barra inferior fixa mais gaveta, com o fechado em CSS --, e nao o numero. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 639.98px) { #menu-do-tutor { transform: translateX(100%); transition: transform 0.2s ease-out; } #menu-do-tutor[data-aberta='true'] { transform: translateX(0); } } /* Acima de 640px a gaveta do portal nao existe como interface -- a barra de topo horizontal e permanente. Ela continua no DOM e continua fora da tela: um menu que reaparecesse ao girar o tablet duplicaria a navegacao. */ @media (min-width: 640px) { #menu-do-tutor { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { #menu-do-tutor { transition: none; } } /* O rodape do portal reserva a altura da barra inferior -- e SO enquanto ela existe. Na primeira versao isto era um `style=` inline no template, e como atributo inline nao aceita media query o espaco sobrava tambem em tablet e desktop: uma faixa de ~72px de branco morto abaixo do rodape, em toda tela, reservada para uma barra que ali nao existe. Migrou para ca justamente para poder desaparecer acima de 640px. */ #rodape-do-portal { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } @media (min-width: 640px) { #rodape-do-portal { padding-bottom: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ CAMPOS DO PAINEL DA CRECHE — `.form-creche` ═══════════════════════════════════════════════════════════════════════════ POR QUE ISTO E CSS, E NAO CLASSE NO TEMPLATE -------------------------------------------- As 152 declaracoes de widget do painel vivem em `dashboard/forms.py` como `'class': 'w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500'`. O template escreve `{{ form.campo }}` e recebe a string pronta: nao ha ponto de interceptacao no lado do template. Dois problemas concretos nessa string, e nenhum e estetico: * `py-2` produz controle de ~38px. O minimo de alvo de toque da WCAG 2.2 AA (2.5.8) e 24px, mas o que este produto precisa e o de balcao: dedo, de pe, com o pet puxando a coleira. 44px e o piso adotado aqui. * `focus:ring-primary-500` desenha o anel em #0ea5e9, que da 1.6:1 contra o branco do campo. Um anel de foco que nao se ve nao e anel de foco -- e o teclado e a unica forma de operar a tela para parte dos usuarios. COMO A SOBREPOSICAO FUNCIONA ---------------------------- O bundle Play do Tailwind injeta as utilities num `