/* ============================================================ Kanvox — folha de estilos unica do frontend CSS puro, sem framework (decisao de projeto: simplicidade) Direcao visual: claro e minimalista. A separacao entre as areas vem de bordas finas e de espaco em branco, nao de sombras e caixas cinzas. Existe um unico acento de cor, usado com parcimonia (foco, links, estado ativo); as demais cores servem apenas para comunicar estado (prazo vencido, sucesso, erro, papel do usuario no projeto). ============================================================ */ /* ---------- variaveis de tema ---------- */ /* Tema claro (padrao). O tema escuro logo abaixo redefine apenas as cores — nenhuma outra regra da folha muda de um tema para o outro, porque todas as cores usadas no arquivo saem daqui. */ :root { /* neutros: a base de todo o visual */ --cor-tinta: #14161a; /* texto principal, botoes primarios */ --cor-tinta-media: #4b5261; /* texto secundario */ --cor-tinta-suave: #79808f; /* legendas, rotulos, apoio */ --cor-tinta-fraca: #9aa0ad; /* placeholder e textos de preenchimento */ --cor-tinta-contraste: #ffffff;/* texto sobre a cor-tinta (botao primario) */ --cor-tinta-hover: #2c3038; --cor-fundo: #fbfbfc; /* fundo da pagina */ --cor-superficie: #ffffff; /* cartoes, dialogos */ --cor-superficie-suave: #f5f6f8; --cor-superficie-hover: #fdfdfe; --cor-superficie-inativa: #fcfcfd; --cor-superficie-translucida: rgba(255, 255, 255, 0.85); /* cabecalho */ --cor-borda: #e7e8ec; --cor-borda-forte: #d3d5dc; --cor-borda-hover: #bcc0ca; /* acento unico: foco, links e estado ativo */ --cor-acento: #2f5cd6; --cor-acento-suave: #eef2fd; --cor-acento-borda: #d8e1fb; --cor-anel-de-foco: rgba(47, 92, 214, 0.18); /* cores de estado */ --cor-sucesso: #17794a; --cor-sucesso-suave: #eaf7f0; --cor-sucesso-borda: #cfe9dc; --cor-perigo: #b3261e; --cor-perigo-suave: #fdf0ef; --cor-perigo-borda: #f3d6d3; --cor-aviso: #96590a; --cor-aviso-suave: #fdf5e6; --cor-aviso-borda: #f3e4c4; --cor-info: #0e6f7d; --cor-info-suave: #e9f6f8; --cor-info-borda: #c9e7ec; --cor-sobre-estado: #ffffff; /* texto sobre fundo de estado cheio */ /* sombras: usadas so no que realmente flutua sobre a pagina */ --sombra-cartao: 0 1px 2px rgba(17, 19, 24, 0.05); --sombra-painel: 0 8px 28px rgba(17, 19, 24, 0.1); --sombra-dialogo: 0 16px 48px rgba(17, 19, 24, 0.16); --sombra-arrasto: 0 8px 24px rgba(17, 19, 24, 0.14); --sombra-flutuante: 0 8px 28px rgba(17, 19, 24, 0.22); --cor-fundo-do-dialogo: rgba(20, 22, 26, 0.35); /* medidas */ --raio-pequeno: 7px; --raio: 10px; --raio-grande: 14px; --largura-do-conteudo: 1180px; /* faz o navegador desenhar campos de data, audio e barras de rolagem no mesmo tom do tema */ color-scheme: light; } /* Tema escuro. O atributo data-tema fica no e e definido por js/tema.js antes da pagina aparecer. */ :root[data-tema="escuro"] { --cor-tinta: #e9ebef; --cor-tinta-media: #aab2c0; --cor-tinta-suave: #7f8797; --cor-tinta-fraca: #6a7382; --cor-tinta-contraste: #10131a; --cor-tinta-hover: #ffffff; --cor-fundo: #0e1116; --cor-superficie: #161a21; --cor-superficie-suave: #1e232c; --cor-superficie-hover: #1b2029; --cor-superficie-inativa: #13171d; --cor-superficie-translucida: rgba(22, 26, 33, 0.85); --cor-borda: #262c36; --cor-borda-forte: #363d4a; --cor-borda-hover: #48505f; --cor-acento: #7ba3f5; --cor-acento-suave: #172136; --cor-acento-borda: #2a3a5c; --cor-anel-de-foco: rgba(123, 163, 245, 0.32); --cor-sucesso: #58c08d; --cor-sucesso-suave: #11251c; --cor-sucesso-borda: #204336; --cor-perigo: #ef8981; --cor-perigo-suave: #2a1718; --cor-perigo-borda: #4d2a29; --cor-aviso: #dfae5c; --cor-aviso-suave: #271e10; --cor-aviso-borda: #46371d; --cor-info: #5fc3d4; --cor-info-suave: #0f242a; --cor-info-borda: #1d4049; --cor-sobre-estado: #12161c; --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-painel: 0 8px 28px rgba(0, 0, 0, 0.5); --sombra-dialogo: 0 16px 48px rgba(0, 0, 0, 0.6); --sombra-arrasto: 0 8px 24px rgba(0, 0, 0, 0.55); --sombra-flutuante: 0 8px 28px rgba(0, 0, 0, 0.55); --cor-fundo-do-dialogo: rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Garante que o atributo hidden sempre esconda o elemento, mesmo quando uma classe define display (flex, block...) — sem isso, elementos como o formulario de convite apareceriam para quem nao deveria ve-los. */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; background: var(--cor-fundo); color: var(--cor-tinta); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0 0 0.5rem; font-weight: 650; line-height: 1.3; } h1 { font-size: 1.5rem; letter-spacing: -0.022em; } h2 { font-size: 1.12rem; letter-spacing: -0.012em; } h3 { font-size: 1rem; letter-spacing: -0.008em; } p { margin: 0 0 0.6rem; } a { color: var(--cor-acento); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- formularios ---------- */ label { display: block; margin-bottom: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--cor-tinta-media); } /* A fonte e declarada campo a campo (e nao com "font: inherit"): dentro de um