/* Poucas telas, uma folha de estilo. Sem CDN, sem framework, sem JavaScript. * * A identidade é a da Grabatus, a mesma do procom e do site: fundo slate * escuro, superfície um degrau acima, borda discreta, acento cyan `#0e7490`. * Aqui ela é escrita à mão em vez de vir do Tailwind — este projeto não carrega * framework de CSS, e reproduzir as fichas custa menos que introduzir um. * Escuro é o padrão, como no procom; claro existe para quem usa de dia. * * A tela existe para sustentar uma decisão de cada vez. Por isso o próximo * passo é a única coisa grande, e todo o resto — tabela, número, filtro — é * material de consulta que não deve competir com ele. */ /* ───────────────────────────── fichas ───────────────────────────── * Os números são os do Tailwind que a Grabatus usa: slate para as * superfícies, cyan da marca para o acento, rose e amber para os avisos. */ /* Cada cor é declarada **uma vez**, em `light-dark(claro, escuro)`. Quem * escolhe entre as duas é o `color-scheme` da raiz, e é só ele que a classe * do `` precisa trocar: * * sem classe → `light dark` → o que o sistema operacional disser * .theme-light → `light` → claro, contrariando o sistema * .theme-dark → `dark` → escuro, idem * * A alternativa seria repetir a paleta inteira dentro de um `@media` e de * novo dentro de cada classe. Três cópias das mesmas vinte cores divergem na * primeira vez que alguém ajusta uma delas — e divergem em silêncio, porque * só uma das cópias está visível de cada vez. */ :root { color-scheme: light dark; --bg: light-dark(#f8fafc, #020617); /* slate-50 · slate-950 */ --surface: light-dark(#ffffff, #0f172a); /* branco · slate-900 */ --surface-2: light-dark(#f1f5f9, #1e293b); /* slate-100 · slate-800 */ --ink: light-dark(#0f172a, #f1f5f9); /* slate-900 · slate-100 */ --muted: light-dark(#475569, #94a3b8); /* slate-600 · slate-400 */ --faint: #64748b; /* slate-500, serve nos dois */ --line: light-dark(#e2e8f0, #1e293b); /* slate-200 · slate-800 */ --line-strong: light-dark(#cbd5e1, #334155); /* slate-300 · slate-700 */ --accent: #0e7490; /* cyan-700 — a cor da marca */ --accent-hover: light-dark(#155e75, #06b6d4); --accent-ink: #ffffff; --accent-soft: light-dark(#ecfeff, #164e63); /* Link sobre fundo escuro precisa clarear; sobre fundo claro, escurecer. */ --accent-text: light-dark(#0e7490, #67e8f9); --warn: light-dark(#b45309, #fbbf24); --warn-soft: light-dark(#fffbeb, #451a03); --danger: light-dark(#be123c, #fda4af); --danger-line: light-dark(#fda4af, #9f1239); --danger-soft: light-dark(#fff1f2, #4c0519); --radius: 1rem; /* rounded-2xl */ --radius-sm: 0.5rem; /* rounded-lg */ /* Sombra não é cor, então `light-dark()` não cabe nela — cabe na cor dela. */ --shadow-tint: light-dark(rgb(15 23 42 / 6%), rgb(0 0 0 / 40%)); --shadow-cast: light-dark(rgb(15 23 42 / 22%), rgb(0 0 0 / 80%)); --shadow: 0 1px 2px var(--shadow-tint); --shadow-lift: 0 1px 2px var(--shadow-tint), 0 12px 32px -16px var(--shadow-cast); } /* A escolha explícita ganha do sistema. Só isto, porque só isto basta. */ :root.theme-light { color-scheme: light; } :root.theme-dark { color-scheme: dark; } /* ───────────────────────────── base ───────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* A navegação tem dois estados, e o padrão é a **gaveta**: fechada, atrás de um * ícone, com uma barra fina no topo. A coluna ancorada é o caso especial — tela * larga e sem a preferência de recolher. * * A ordem importa. Escrito ao contrário (coluna ancorada como padrão, gaveta * dentro de um `@media`), as regras da gaveta precisariam ser repetidas: uma * vez para o telefone e outra para a coluna recolhida na tela larga. Duas * cópias da mesma gaveta divergem na primeira vez que alguém ajusta uma. * * Deslogado não há para onde navegar, e o `body` é uma coluna só. */ body.has-side { min-height: 100vh; } main { max-width: 64rem; margin: 0 auto; padding: 2.25rem 1.75rem 5rem; width: 100%; } /* As telas de uma coluna só (entrar, formulários) leem melhor estreitas: uma * linha de 60rem obriga o olho a varrer de volta a cada quebra. */ main.narrow { max-width: 30rem; } /* A agenda é a exceção: sete colunas em 64rem dariam pouco mais de 8rem por * dia, e um retângulo de meia hora não caberia com o título dentro. */ main.wide { max-width: 84rem; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--accent-hover); } /* Um anel visível só para quem navega pelo teclado — o `:focus-visible` evita * o anel sobrando depois de um clique de mouse. */ :focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; border-radius: var(--radius-sm); } h1, h2, h3 { color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); line-height: 1.25; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 0.5rem; } h2 { font-size: 1.125rem; line-height: 1.4; letter-spacing: -0.015em; font-weight: 650; margin: 3rem 0 0.25rem; } p { margin: 0 0 1rem; } .muted { color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.6875rem; font-weight: 650; color: var(--muted); margin: 0 0 0.6rem; } /* O ponto antes do modo: sinal de estado sem custar uma palavra a mais. */ .eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.7; } .lede { color: var(--muted); max-width: 58ch; margin: 0 0 1.75rem; } /* ──────────────────────── coluna lateral ───────────────────────── */ /* As âncoras não ocupam espaço: elas existem só para o `:target` ter em que * pegar. `scroll-margin` evita que pular para elas empurre a página. */ .menu-anchor { display: block; height: 0; scroll-margin-top: 100vh; } .side { display: flex; flex-direction: column; gap: 1.75rem; padding: 1.5rem 1rem; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; /* Gaveta: fora da tela, por cima de tudo, e ela mesma rolando. */ position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(17rem, 84vw); transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--shadow-lift); } #menu:target ~ .side { transform: none; } #menu:target ~ .menu-veil { display: block; } /* O véu é o que faz tocar fora fechar — e é um link, não um `div`, para * funcionar sem script. */ .menu-veil { display: none; position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 45%); } .side-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .topbar-menu { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .topbar-menu .brand { font-size: 1.05rem; padding: 0; } .topbar-inbox { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; color: var(--muted); text-decoration: none; } /* O ícone é o alvo do dedo: 44px, o mínimo de todo guia de toque. */ .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: -0.4rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; } .menu-toggle:hover { background: var(--surface-2); } .menu-dock { margin: 0; } /* O botão de recolher no topo da coluna. Escondido por padrão porque o padrão * é a gaveta, e recolher uma gaveta não quer dizer nada — ela já não divide * espaço com o conteúdo. Ele aparece exatamente onde o × desaparece: são os * dois lados do mesmo par, um por estado. */ .menu-dock-top { display: none; margin: 0; } /* `