/* Inctor — marca em movimento: o fundo "linha de base" e a entrada do Núcleo. * * Uma fonte só para o site e para as telas de entrada dos painéis; o * scripts/sync-shared-ui.mjs copia este arquivo e o brand-motion.js para * painel/ui/, painel-admin/ui/ e site/ui/. Não depende de tokens.css: o site * não carrega o kit. * * Cores: por padrão, Osso e Aço claro sobre Tinta (o site). Com a classe * .themed no , seguem o tema do painel — Tinta e Aço sobre Osso no claro. */ :root { --motion-ink: #EFEBE3; /* ângulos e blocos do Núcleo */ --motion-line: #7D93A6; /* traços do fundo */ --motion-strength: 1; /* opacidade do fundo inteiro */ } /* no claro, Aço sobre Osso pesa mais que Aço claro sobre Tinta: o fundo baixa */ .themed { --motion-ink: #0C1824; --motion-line: #1F3A52; --motion-strength: .6; } :root[data-theme="dark"] .themed { --motion-ink: #EFEBE3; --motion-line: #7D93A6; --motion-strength: 1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themed { --motion-ink: #EFEBE3; --motion-line: #7D93A6; --motion-strength: 1; } } /* ------------------------------------------------------------ fundo */ /* Canvas fixo atrás do conteúdo (brand-motion.js desenha; a cor vem de `color`). Some nas bordas para o texto ficar sobre o fundo limpo. */ .backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; color: var(--motion-line); opacity: var(--motion-strength); -webkit-mask-image: radial-gradient(130% 95% at 50% 38%, #000 30%, transparent 88%); mask-image: radial-gradient(130% 95% at 50% 38%, #000 30%, transparent 88%); } /* ------------------------------------------------------------ Núcleo */ /* Entrada Núcleo (brand/animacao/entrada-escuro.svg e entrada-claro.svg), na folha de estilo porque a CSP bloqueia