/* Grimório UI — camada dos sites (painel do Monstro, WL, Kanban e Chamados), visual Legado (v0.2). Carregue depois de tokens.css e bundle.css. Aqui só fica o que o bundle não tem: a página do site, a tela de entrada, tabelas, etiquetas, avisos e o vocabulário dos sites simples (). Botões, campos, painéis e o menu lateral são os do bundle (gr-btn, gr-input, gr-panel, gr-sidebar). Regras em DESIGN_v0.md §15. */ /* ---------- base ---------- */ :where(html) { -webkit-text-size-adjust: 100%; } :where(*, *::before, *::after) { box-sizing: border-box; } :where(body) { min-height: 100vh; -webkit-font-smoothing: antialiased; } ::selection { background: var(--gold); color: var(--on-gold); } :where(*) { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } :where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } a.gr-btn { text-decoration: none; } /* Ícones do sistema como máscara: pegam a cor do texto, sem SVG inline (a CSP dos sites bloqueia estilo inline). */ .gr-ico { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .gr-ico--s { width: 16px; height: 16px; } .gr-ico--ajustes { --ico: url("icons/ajustes.svg"); } .gr-ico--brasao { --ico: url("icons/brasao.svg"); } .gr-ico--coruja { --ico: url("icons/coruja.svg"); } .gr-ico--fechar { --ico: url("icons/fechar.svg"); } .gr-ico--livro { --ico: url("icons/livro.svg"); } .gr-ico--mapa { --ico: url("icons/mapa.svg"); } .gr-ico--mochila { --ico: url("icons/mochila.svg"); } .gr-ico--ok { --ico: url("icons/ok.svg"); } .gr-ico--personagem { --ico: url("icons/personagem.svg"); } .gr-ico--sair { --ico: url("icons/sair.svg"); } .gr-ico--seta { --ico: url("icons/seta.svg"); } .gr-ico--varinha { --ico: url("icons/varinha.svg"); } /* Rótulo pequeno acima de um título (de que sistema é a tela) */ .gr-eyebrow { margin: 0; font-family: var(--font-display); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); } /* ---------- tela de entrada:
+
---------- */ .gr-login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: var(--space-6); padding: var(--space-8) var(--space-4) var(--space-6); } .gr-login__painel { width: min(440px, 100%); padding: var(--space-8) var(--space-8) var(--space-6); text-align: center; } .gr-login__logo { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto var(--space-3); } .gr-login__titulo { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 14px var(--gold-glow); } .gr-login .gr-divider { max-width: 220px; margin: var(--space-4) auto; } .gr-login__texto { margin: 0 0 var(--space-6); font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink-muted); } .gr-login__erro { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); text-align: left; font-size: 14px; line-height: 20px; color: var(--ink); background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 18%, transparent), transparent 80%), var(--surface-200); border-left: 2px solid var(--danger); } .gr-login__entrar { width: 100%; min-height: 48px; } .gr-login__nota { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .gr-login__rodape { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted); } /* ---------- página de app:
com