/* ===================================================================== Carregamento e transição de página — Maxal Vale para os três lugares: painel da empresa, Painel Master e site. O projeto não tem etapa de build, então isto é CSS à mão, servido direto (ADR dos assets). O problema que resolve, nas palavras do Max: "quando é muito rápido, parece que não aconteceu nada". Uma tela que troca em 80ms não dá ao olho tempo de perceber a troca, e o usuário clica de novo achando que falhou. Por isso o aviso de carregamento tem uma duração MÍNIMA — melhor meio segundo de certeza do que 80ms de dúvida. ===================================================================== */ /* --------------------------------------------------------------------- O aviso de carregamento --------------------------------------------------------------------- */ .maxal-carregando { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: #ffffff; opacity: 1; transition: opacity 260ms ease; } /* O tema escuro do Filament põe .dark no ; o site não tem tema escuro, então o padrão claro acima já serve para ele. */ .dark .maxal-carregando, html.dark .maxal-carregando { background: #0f172a; } /* Escondido: sai de cena sem continuar capturando clique. A opacidade anima; o visibility troca no fim, senão a camada invisível seguiria por cima do conteúdo engolindo o primeiro clique do usuário. */ .maxal-carregando[hidden], .maxal-carregando--fora { opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 0s linear 260ms; } /* O `hidden` do HTML tem `display:none` por padrão em alguns resets, e isso mataria a transição. Aqui ele volta a ser flex e quem esconde de verdade é a regra de cima. */ .maxal-carregando[hidden] { display: flex; } .maxal-carregando__marca { width: 160px; height: auto; /* O GIF tem 1536x1024 e transparência real: encolhe bem e funciona tanto no fundo claro quanto no escuro. */ max-width: 40vw; } .maxal-carregando__texto { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; } .dark .maxal-carregando__texto, html.dark .maxal-carregando__texto { color: #94a3b8; } /* --------------------------------------------------------------------- Entrada e saída da página --------------------------------------------------------------------- */ @keyframes maxal-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* O fade entra no CONTEÚDO, não no . Animar o body inteiro faria a barra lateral e o cabeçalho piscarem a cada troca de tela — e eles não mudaram, então piscar é mentira visual: o olho é chamado para onde não houve novidade. */ /* ATENCAO ao mexer aqui: `transform` num ancestral QUEBRA todo `position: fixed` que esteja dentro dele. Enquanto esta classe estiver no `.fi-main`, o elemento tem transform e vira o containing block dos descendentes fixos — e o modal do Filament e fixo. Ele deixava de se medir pela tela, caia para baixo do cabecalho, transbordava e nao rolava. Quem tira a classe assim que a animacao acaba e o `carregamento.js`. Se um dia a animacao voltar a ser permanente, ela nao pode usar `transform` — nem `translateY(0)`, que tambem cria o containing block. */ .maxal-conteudo-entrando { animation: maxal-entra 320ms ease-out both; } /* A saída é o inverso, e mais curta: ninguém quer esperar para sair. */ .maxal-saindo .fi-main, .maxal-saindo .maxal-site-conteudo { opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease-in, transform 180ms ease-in; } /* --------------------------------------------------------------------- Quem pediu para o sistema parar de se mexer --------------------------------------------------------------------- */ /* `prefers-reduced-motion` não é preferência estética: para parte das pessoas, movimento na tela causa enjoo e tontura de verdade. Aqui o aviso de carregamento continua aparecendo — ele informa —, mas sem deslizar nada. */ @media (prefers-reduced-motion: reduce) { .maxal-carregando, .maxal-carregando[hidden], .maxal-carregando--fora { transition-duration: 1ms; } .maxal-conteudo-entrando { animation: none; } .maxal-saindo .fi-main, .maxal-saindo .maxal-site-conteudo { transition: none; transform: none; opacity: 1; } } /* --------------------------------------------------------------------- A faixa do acesso como a empresa --------------------------------------------------------------------- */ /* Cor que não existe em nenhum outro lugar do painel, e de propósito: a tela do suporte é IDÊNTICA à do cliente, porque é a do cliente. Se a faixa combinasse com o resto, ela viraria parte da paisagem — e sessão de suporte esquecida aberta é alteração no lugar errado esperando acontecer. */ .maxal-impersonando { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 1rem; background: #7c2d12; color: #ffedd5; font-size: 0.8125rem; line-height: 1.4; } .maxal-impersonando__texto strong { color: #fff; } .maxal-impersonando__modo { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6875rem; } /* Poder escrever é o estado mais perigoso, e é o que fica mais visível. */ .maxal-impersonando__modo--escrita { color: #fecaca; } .maxal-impersonando__sair { padding: 0.25rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 0.375rem; background: transparent; color: #fff; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .maxal-impersonando__sair:hover { background: rgba(255, 255, 255, 0.14); }