/* ============================================================ MIRA DA NOTÍCIA — identidade visual Valores tirados do manual da marca (Marca mira da NOTICIA.pdf). Regra de ouro do manual: "O vermelho é reservado: centro do retículo, urgência (AGORA, AO VIVO) e a ação principal. Nunca como fundo de texto corrido — apenas em cartaz." ============================================================ */ :root { /* --- Paleta oficial (as quatro cores do manual) --- */ --vermelho: #EC3013; /* centro da mira, urgência, ação */ --preto: #201E1D; /* texto, cabeçalho, fundo negativo */ --cinza: #D7D3D3; /* bordas e divisórias */ --fundo: #F3F2F2; /* fundo das páginas */ --branco: #FFFFFF; /* --- Tons derivados --- O vermelho da marca sobre branco tem contraste 4,0:1 — bonito, mas abaixo do mínimo de leitura (4,5:1). Por isso existe uma versão levemente mais escura, usada só em TEXTO e BOTÃO. O #EC3013 puro continua sendo o vermelho de sinalização. */ --vermelho-acao: #C9260E; --vermelho-escuro: #A81F0B; /* * Vermelho para superfícies que carregam TEXTO BRANCO por cima * (faixa de plantão, etiqueta "Agora", botões). * * O vermelho da marca com branco em cima dá 4,2:1 de contraste — * bonito, mas abaixo do mínimo de leitura (4,5:1). Este tom, um * passo mais escuro, chega a 5,0:1 e passa. A diferença é quase * imperceptível ao lado, e o #EC3013 puro continua sendo o vermelho * do símbolo, do filete e de tudo que não tem letra em cima. */ --vermelho-fundo: #D62A10; --preto-suave: #34302E; --cinza-escuro: #6E6A68; /* texto secundário, legenda */ --cinza-claro: #E8E6E5; /* --- Papéis (o que cada cor faz na tela) --- */ --fundo-pagina: var(--fundo); --fundo-cartao: var(--branco); --fundo-inverso: var(--preto); --texto-principal: var(--preto); --texto-secundario: var(--cinza-escuro); --texto-inverso: var(--branco); --borda: var(--cinza); --borda-suave: var(--cinza-claro); --acao: var(--vermelho-acao); --acao-hover: var(--vermelho-escuro); --urgencia: var(--vermelho); /* --- Tipografia --- Archivo em três pesos, conforme o manual: manchete 700 | chapéu e subtítulo 600 | corpo 400 */ --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --peso-manchete: 700; --peso-chapeu: 600; --peso-corpo: 400; --tamanho-base: 1.0625rem; /* 17px */ --altura-linha: 1.62; /* Medida de leitura pedida no manual: 62 a 70 caracteres */ --medida-leitura: 66ch; /* Etiquetas (AGORA, AO VIVO, nome da editoria) */ --entreletra-etiqueta: 0.16em; /* --- Espaçamentos --- */ --espaco-1: 0.25rem; --espaco-2: 0.5rem; --espaco-3: 0.75rem; --espaco-4: 1rem; --espaco-5: 1.5rem; --espaco-6: 2rem; --espaco-7: 3rem; --espaco-8: 4.5rem; /* --- Formas --- A marca é geométrica e seca: cantos praticamente retos. */ --raio: 3px; --raio-pilula: 999px; --sombra: 0 1px 2px rgba(32, 30, 29, .06), 0 2px 8px rgba(32, 30, 29, .05); --sombra-alta: 0 8px 28px rgba(32, 30, 29, .12); --largura-maxima: 1220px; --transicao: 160ms ease; } /* ============================================================ MODO ESCURO O fundo é o preto da própria marca (#201E1D), não um cinza qualquer. O vermelho continua sendo o vermelho oficial: sobre fundo escuro ele ganha contraste em vez de perder. Como a escolha é aplicada, em ordem de prioridade: 1. data-tema no , escrito pelo servidor a partir do cookie de tema — por isso a página já nasce na cor certa, sem aquele susto branco antes de escurecer; 2. a preferência do sistema operacional do visitante; 3. o modo claro. ============================================================ */ /* --- Tokens do modo escuro, reunidos num só lugar --- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo-pagina: #1A1817; --fundo-cartao: #232120; --fundo-inverso: #100F0E; --texto-principal: #F3F2F2; --texto-secundario: #A9A4A1; --texto-inverso: #F3F2F2; --borda: #3A3634; --borda-suave: #2E2B29; /* Sobre fundo escuro o vermelho puro já tem contraste de sobra, então a versão escurecida do modo claro não é necessária. */ --acao: #FF6A4D; --acao-hover: #FF8B73; --cinza-escuro: #A9A4A1; --cinza-claro: #2E2B29; --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); --sombra-alta: 0 8px 28px rgba(0, 0, 0, .55); color-scheme: dark; } } /* --- A mesma paleta, quando a pessoa escolhe escuro no botão --- */ :root[data-tema="escuro"] { --fundo-pagina: #1A1817; --fundo-cartao: #232120; --fundo-inverso: #100F0E; --texto-principal: #F3F2F2; --texto-secundario: #A9A4A1; --texto-inverso: #F3F2F2; --borda: #3A3634; --borda-suave: #2E2B29; --acao: #FF6A4D; --acao-hover: #FF8B73; --cinza-escuro: #A9A4A1; --cinza-claro: #2E2B29; --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); --sombra-alta: 0 8px 28px rgba(0, 0, 0, .55); color-scheme: dark; } /* Modo claro escolhido na mão vence a preferência do sistema */ :root[data-tema="claro"] { color-scheme: light; }