/* * Base do Ponto — reset leve + defaults de tipo/cor/foco. * Usa os tokens de tokens.css. Sem componentes aqui (ver forms.css). */ *, *::before, *::after { box-sizing: border-box; } /* turbo-cable-stream-source é um elemento de conexão INVISÍVEL (turbo_stream_from). O browser/Turbo o realoca pro ; como o shell .app é display:grid, ele viraria uma CÉLULA e empurraria a sidebar/conteúdo. display:none tira do fluxo sem afetar a conexão do ActionCable. */ turbo-cable-stream-source { display: none; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background-color: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* InterVariable é fonte variável (eixo opsz): deixa o navegador escolher o master óptico certo por tamanho, e liga o kerning explícito. Herdado por todo o app. */ font-optical-sizing: auto; font-kerning: normal; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } h1 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.25; letter-spacing: -0.01em; } h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.3; } h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } a { color: var(--color-accent); text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent); text-underline-offset: 2px; } a:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; } img, svg { display: block; max-width: 100%; } /* Foco visível e consistente (acento). Só teclado — não no clique de mouse. */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Colunas numéricas (durações, valores) — dígitos de largura fixa (Q70). */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Texto secundário utilitário. */ .muted { color: var(--color-text-subtle); } /* * Ícones inline (Lucide vendorizado — Q80, helper `icon`). Sempre acompanham um * label (Q63); herdam a cor do texto via currentColor (claro/escuro de graça). * Em containers flex (botões, nav) o alinhamento vem do align-items do pai; no * fluxo inline, o vertical-align negativo assenta o ícone na linha do texto denso. */ .icon { display: inline-block; flex: none; vertical-align: -0.1875em; /* -3px a 16px — centro óptico com texto 13–14px */ } /* Tamanhos por CSS (vencem os atributos width/height que o helper emite). */ .icon--sm { width: 14px; height: 14px; } .icon--lg { width: 40px; height: 40px; } /* * Container centralizado das telas simples (auth, etc.). Painel elevado discreto. * Componente mínimo p/ manter as telas existentes legíveis; telas de app virão * com seu próprio shell nas próximas fases. */ .card { width: min(24rem, calc(100% - 2 * var(--space-4))); margin: var(--space-8) auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); background-color: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius); } .card > form { display: flex; flex-direction: column; gap: var(--space-3); } /* Flash (notice/alert) — toasts flutuantes, fora do fluxo do documento. No TOPO (logo abaixo da barra do timer): embaixo passava batido (feedback do dono) — as ações acontecem perto do topo, o olho já está lá. */ #flash { position: fixed; top: calc(2.5rem + var(--space-4)); /* 2.5rem = min-height da .shell-timerbar */ left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; pointer-events: none; } .flash { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2); max-width: min(34rem, calc(100vw - 2 * var(--space-4))); width: max-content; padding: var(--space-3) var(--space-5); border-radius: var(--radius); /* Borda no ACENTO + fundo tingido (pedido do dono: toast conspícuo, não sutil). */ border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-raised)); color: var(--color-text); font-size: var(--text-lg); font-weight: var(--weight-medium); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); cursor: pointer; animation: toast-in 0.18s ease; } /* No mobile o topo empilha header da marca (~3rem) + barra do timer (~4rem): o offset de desktop deixava o toast EM CIMA da barra. Continua no topo (decisão do dono: embaixo passava batido), só desce pra baixo da pilha. */ @media (max-width: 48rem) { #flash { top: calc(7rem + var(--space-2)); } } /* O check no acento marca "deu certo" — presença por conteúdo, sem moldura. */ .flash--notice .icon { color: var(--color-accent); } .flash--alert { background: var(--color-danger); color: var(--color-on-danger); border-color: var(--color-danger); } .flash.toast--leaving { animation: toast-out 0.18s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-0.5rem); } } /* * Marca do Ponto (partial shared/_logo_mark). O SVG tem fundo transparente; * o wrapper só reserva o quadrado e centraliza. */ .logo-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; } .logo-mark svg { display: block; } /* Tema escuro: SVG puro por decisão do dono — o mostrador/cartão creme carregam a leitura; sem badge atrás. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; } /* Decisão do dono: o app ignora prefers-reduced-motion (contra WCAG 2.3.3, consciente) — animações rodam sempre. */