/* ========================================================================== Paleta de cores — Joseh Fonte de verdade da identidade visual (manual de marca em `id_visual/`). Cores oficiais do manual: #030C1B marinho — fundo institucional, texto principal #DEBE58 dourado — cor de destaque / ação sobre fundo escuro #FFFFFF branco Uso: @import "./palette.css"; .botao { background: var(--cor-primaria); color: var(--cor-sobre-primaria); } Contexto escuro: aplique a classe `.escuro` no bloco (header, hero, rodapé…). Os papéis semânticos se reconfiguram sozinhos e os mesmos componentes funcionam nos dois fundos — veja o final deste arquivo. ========================================================================== */ :root { /* --- Marca / Marinho (escala primária) ------------------------------ */ --marinho-950: #030c1b; /* OFICIAL — fundo institucional [--blue-950] */ --marinho-900: #071427; /* fundo escuro alternativo */ --marinho-800: #0c1b31; /* elevação sobre o fundo escuro */ --marinho-700: #12233d; /* cartões sobre fundo escuro [--blue-900] */ --marinho-600: #1b2e4c; /* bordas e divisores no escuro */ --marinho-500: #2a3f63; /* realce discreto no escuro */ --marinho-200: #c9d0dc; /* bordas em destaque no claro */ --marinho-50: #eef0f4; /* tint suave (fundos, chips) [--blue-soft] */ /* --- Marca / Dourado ------------------------------------------------ */ /* Só use dourado como TEXTO sobre fundo escuro: sobre branco o contraste é de 1.8:1 e reprova em qualquer critério de acessibilidade. Em fundo claro o dourado vale para preenchimento de formas (logo, ícones). */ --ouro-300: #f0e17b; /* base do gradiente da marca */ --ouro-400: #e5cb65; /* hover sobre fundo escuro */ --ouro-500: #debe58; /* OFICIAL — destaque / ação */ --ouro-600: #d8b14b; /* pressionado */ --ouro-700: #cc9933; /* topo do gradiente da marca */ /* --- Neutros / Tinta ------------------------------------------------ */ --tinta: #030c1b; /* texto principal [--ink] */ --tinta-suave: #55617a; /* texto secundário [--muted] */ --linha: #dfe3eb; /* bordas e divisores [--line] */ --superficie: #f6f7f9; /* fundo suave [--soft] */ --branco: #ffffff; /* [--white] */ /* --- Feedback / Estados --------------------------------------------- */ --sucesso: #137a4a; --sucesso-texto: #0d6c41; --sucesso-fundo: #dcf6e9; --aviso: #8a6410; --aviso-texto: #7a5709; --aviso-fundo: #fbf1d6; --aviso-realce: var(--ouro-500); --perigo: #b42318; /* --- Papéis semânticos ---------------------------------------------- */ /* Em contexto claro (padrão) a ação é o marinho; o dourado assume esse papel dentro de `.escuro`. */ --cor-primaria: var(--marinho-950); --cor-primaria-hover: var(--marinho-700); --cor-sobre-primaria: var(--branco); --cor-acento: var(--ouro-500); --cor-sobre-acento: var(--marinho-950); --cor-texto: var(--tinta); --cor-texto-suave: var(--tinta-suave); --cor-borda: var(--linha); --cor-fundo: var(--branco); --cor-fundo-suave: var(--superficie); --cor-superficie: var(--branco); /* cartões e caixas sobre o fundo */ /* --- Gradientes de marca -------------------------------------------- */ --grad-ouro: linear-gradient(180deg, var(--ouro-700), var(--ouro-600) 30%, var(--ouro-400) 50%, var(--ouro-300) 70%, #f0e17b); --grad-ouro-horizontal: linear-gradient(135deg, var(--ouro-600), var(--ouro-300)); --grad-primario: linear-gradient(135deg, var(--marinho-800), var(--marinho-950)); --grad-escuro: linear-gradient(180deg, var(--marinho-950), var(--marinho-800)); /* Brilho azulado do fundo institucional do manual */ --grad-halo: radial-gradient(circle at 50% 0, rgba(42, 63, 99, .55), transparent 62%); /* Fundo de marca: o halo sobre o gradiente escuro. É o fundo do hero — use este token quando quiser a mesma profundidade em outra página, em vez de marinho chapado, que fecha demais. */ --fundo-marca: var(--grad-halo), var(--grad-escuro); /* --- Sombras -------------------------------------------------------- */ --sombra: 0 18px 50px rgba(3, 12, 27, .14); --sombra-sm: 0 8px 24px rgba(3, 12, 27, .09); --sombra-ouro: 0 14px 30px rgba(204, 153, 51, .28); /* --- Forma / Layout -------------------------------------------------- */ --raio: 20px; --largura-container: 1180px; --altura-header: 72px; /* --- Tipografia ------------------------------------------------------ */ /* Definição das faces e dos tokens completos em `tipografia.css`. */ --fonte: "Argentum Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fonte-titulo: "Novelin", var(--fonte); /* --- Compatibilidade com a landing ---------------------------------- */ /* Nomes de token legados usados no CSS de index.html / entrar / solicitar. Mantidos como aliases para as páginas atuais continuarem funcionando sem reescrever suas regras. Em código NOVO (site e SaaS), prefira os tokens canônicos e os papéis semânticos acima. */ --blue: var(--marinho-950); --blue-700: var(--marinho-800); --blue-900: var(--marinho-700); --blue-950: var(--marinho-950); --blue-soft: var(--marinho-50); --ink: var(--tinta); --muted: var(--tinta-suave); --line: var(--linha); --soft: var(--superficie); --white: var(--branco); --success: var(--sucesso); --warning: var(--aviso); --danger: var(--perigo); --shadow: var(--sombra); --shadow-sm: var(--sombra-sm); --radius: var(--raio); --container: var(--largura-container); --header: var(--altura-header); } /* ========================================================================== Contexto escuro Aplique `class="escuro"` num bloco (header, hero, faixa, rodapé) e os papéis semânticos se invertem: o dourado vira a cor de ação e as superfícies passam a ser marinho. Componentes não precisam saber em qual fundo estão, desde que usem os papéis e não hex cru. ========================================================================== */ /* Restaura o contexto claro dentro de um bloco escuro — usado, por exemplo, na tela de produto que flutua sobre o hero. */ .claro { --cor-primaria: var(--marinho-950); --cor-primaria-hover: var(--marinho-700); --cor-sobre-primaria: var(--branco); --cor-texto: var(--tinta); --cor-texto-suave: var(--tinta-suave); --cor-borda: var(--linha); --cor-fundo: var(--branco); --cor-fundo-suave: var(--superficie); --cor-superficie: var(--branco); } .escuro { --cor-primaria: var(--ouro-500); --cor-primaria-hover: var(--ouro-400); --cor-sobre-primaria: var(--marinho-950); --cor-acento: var(--ouro-500); --cor-sobre-acento: var(--marinho-950); --cor-texto: var(--branco); --cor-texto-suave: rgba(255, 255, 255, .72); --cor-borda: rgba(255, 255, 255, .13); --cor-fundo: var(--marinho-950); --cor-fundo-suave: var(--marinho-900); --cor-superficie: var(--marinho-800); } /* Cor e fundo padrão dos dois contextos ficam em `:where()`, de especificidade zero: são um ponto de partida, não uma trava. Sem isso a classe (0,1,0) venceria um `body { background: ... }` (0,0,1) da página e qualquer fundo próprio — gradiente do hero, cartão claro — seria ignorado. */ :where(.claro), :where(.escuro) { color: var(--cor-texto); background: var(--cor-fundo); }