/* ========================================================================== INSTITUTO VERDEJAR - Design Tokens FONTE DA VERDADE: Manual de Marca - Paleta de Cores (NEXO ARTS) Manual de Marca vol. 2 - Fontes para Correspondência A paleta tem CINCO cores. Nenhuma outra. Tons e transparências das cinco são permitidos; cores novas, não. Sem preto puro e sem branco puro - texto em Marrom Tronco, fundo em Off-White. ========================================================================== */ :root { /* ====================================================================== 1. PALETA OFICIAL - as cinco cores da marca Nomes conforme o manual, para bater com o documento na hora de conferir. ====================================================================== */ --verdejar-limao: #C3BF31; /* copa da esquerda - destaques e etiquetas */ --verdejar-oliva: #6F7016; /* copa da direita e tipografia do logo */ --verdejar-laranja: #F87E00; /* copa central - destaque e ação */ --verdejar-tronco: #523B0A; /* troncos - texto corrido, ícones e bordas */ --verdejar-offwhite: #F5F0E6; /* fundo padrão de todas as telas */ /* Canais RGB das mesmas cinco cores. Existem para que toda transparência do site saia da paleta oficial - rgb(var(--rgb-oliva) / 0.2) em vez de um rgba() solto e inventado. */ --rgb-limao: 195 191 49; --rgb-oliva: 111 112 22; --rgb-laranja: 248 126 0; --rgb-tronco: 82 59 10; --rgb-offwhite: 245 240 230; /* Tons derivados - permitidos pelo manual, nenhuma cor nova. Servem aos degraus de profundidade que o layout precisa (duas seções escuras seguidas viram uma mancha só sem esse degrau). */ --oliva-escuro: #565711; /* oliva escurecido - faixa de chamada */ --oliva-claro: #8A8B1C; /* oliva clareado - hover de botão */ --laranja-escuro: #DF7100; /* laranja 10% mais escuro - hover, conforme "no hover, escurecer o laranja em 10%" */ --laranja-fundo: #A33F00; /* tom profundo do laranja - estados de erro */ --offwhite-card: #EFEADC; /* off-white puxado ao oliva - cartões */ --tronco-suave: #6E5526; /* tronco clareado - texto de apoio */ /* ====================================================================== 2. TOKENS SEMÂNTICOS O restante do CSS fala por estes nomes; só este arquivo conhece os hex. ====================================================================== */ /* ---------- Fundos ---------- */ --fundo-pagina: var(--verdejar-offwhite); --fundo-painel: var(--verdejar-offwhite); --fundo-card: var(--offwhite-card); --fundo-escuro: var(--verdejar-oliva); /* rodapé, capas escuras */ --fundo-escuro-2: var(--oliva-escuro); /* degrau sobre o rodapé */ /* ---------- Texto ---------- */ --texto-corpo: var(--verdejar-tronco); /* nunca preto puro */ --texto-apoio: var(--tronco-suave); --texto-titulo: var(--verdejar-oliva); /* títulos sobre claro */ --texto-sobre-escuro: var(--verdejar-offwhite); --texto-sobre-escuro-suave: rgb(var(--rgb-offwhite) / 0.78); /* ---------- Ação ---------- */ --acao: var(--verdejar-laranja); /* botão principal */ --acao-hover: var(--laranja-escuro); --acao-texto: var(--verdejar-offwhite); --link: var(--verdejar-oliva); --link-hover: var(--verdejar-laranja); /* ---------- Linhas e realces ---------- */ --borda: rgb(var(--rgb-oliva) / 0.2); /* divisórias e cartões */ --borda-forte: rgb(var(--rgb-oliva) / 0.35); --realce: var(--verdejar-limao); /* tarjas, selos, ícones sobre fundo escuro */ --detalhe-escuro: var(--verdejar-laranja); /* detalhe do rodapé */ --erro: var(--laranja-fundo); /* ====================================================================== 3. ALIASES DE COMPATIBILIDADE Os nomes da etapa anterior continuam existindo, apontando para a paleta oficial. Assim os componentes seguem funcionando e a troca de identidade acontece num arquivo só. Em código novo, prefira os nomes semânticos. ====================================================================== */ --verde-floresta: var(--fundo-escuro); --verde-profundo: var(--fundo-escuro-2); --verde-cta: var(--verdejar-laranja); /* card "Fale Conosco" */ --verde-oliva: var(--verdejar-oliva); --verde-oliva-claro: var(--oliva-claro); --verde-folha: var(--verdejar-limao); /* realce sobre escuro */ --verde-tipo: var(--texto-titulo); --creme-papel: var(--verdejar-offwhite); --creme-card: var(--offwhite-card); --creme-claro: var(--verdejar-offwhite); --creme-borda: var(--borda); --dourado: var(--verdejar-limao); --dourado-suave: rgb(var(--rgb-limao) / 0.6); --texto-escuro: var(--texto-corpo); --texto-medio: var(--texto-apoio); --texto-claro: var(--texto-sobre-escuro); --texto-claro-suave: var(--texto-sobre-escuro-suave); /* ====================================================================== 4. TIPOGRAFIA Combinação 2 do manual de fontes: Oswald no título, Inter no corpo. Oswald é a letra do logo e nunca entra em texto corrido. Substitutas seguras definidas pelo próprio manual: Inter → Arial. ====================================================================== */ --font-titulo: 'Oswald', 'Arial Narrow', Arial, sans-serif; --font-corpo: 'Inter', Arial, 'Segoe UI', system-ui, sans-serif; /* Mantido como alias: o site não usa mais uma terceira família. "Duas fontes por documento, no máximo." */ --font-manual: var(--font-titulo); /* Pesos conforme o manual */ --peso-titulo: 700; /* Oswald Bold - H1 e H2 */ --peso-subtitulo: 500; /* Oswald Medium - subtítulos e categorias */ --peso-corpo: 400; /* Inter Regular - parágrafos e menu */ --peso-destaque: 600; /* Inter SemiBold - botões e destaques no texto */ /* Escala tipográfica fluida (clamp: mín / preferido / máx). Oswald é condensada: pede um passo a mais de corpo que a serifa antiga para ocupar a mesma mancha. O corpo respeita o mínimo de 16px do manual. */ --fs-hero: clamp(3rem, 7.6vw, 6.5rem); --fs-h1: clamp(2.4rem, 5.4vw, 4.25rem); --fs-h2: clamp(1.9rem, 3.9vw, 3rem); --fs-h3: clamp(1.3rem, 2.3vw, 1.75rem); --fs-corpo: clamp(1rem, 1.05vw, 1.125rem); /* mínimo de 16px */ --fs-pequeno: 0.9375rem; --fs-micro: 0.8125rem; --lh-apertado: 1.06; --lh-titulo: 1.14; --lh-corpo: 1.7; --ls-eyebrow: 0.22em; /* "PROGRAMA DE EDUCAÇÃO AMBIENTAL" */ --ls-logo: 0.34em; /* "I N S T I T U T O" */ --ls-titulo: 0.01em; /* Oswald já é condensada: quase nenhum respiro */ /* ---------- Espaçamento ---------- */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; --sp-3xl: 9rem; /* Recuo do crachá de progresso em relação à base do palco. Encolhe em tela baixa: cada pixel aqui é altura devolvida ao texto do capítulo. */ --recuo-progresso: clamp(var(--sp-2xs), 2.4svh, var(--sp-lg)); /* Faixa reservada ao crachá: altura dele (~2,4rem) + o recuo + folga. Nenhum texto de capítulo entra aqui. */ --zona-progresso: calc(3rem + var(--recuo-progresso)); --secao-y: clamp(4rem, 9vw, 9rem); --gutter: clamp(1.25rem, 4vw, 4rem); --largura-max: 1320px; --largura-texto: 68ch; /* ---------- Formas ---------- */ --raio-sm: 8px; --raio-md: 16px; --raio-lg: 24px; --raio-card: 18px; /* ---------- Sombras - tingidas de Marrom Tronco ---------- */ --sombra-card: 0 2px 10px rgb(var(--rgb-tronco) / 0.07), 0 12px 32px rgb(var(--rgb-tronco) / 0.09); --sombra-alta: 0 8px 24px rgb(var(--rgb-tronco) / 0.13), 0 28px 64px rgb(var(--rgb-tronco) / 0.17); /* ---------- Movimento ---------- */ --ease-suave: cubic-bezier(0.4, 0, 0.2, 1); --ease-organica: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); --dur-rapida: 240ms; --dur-media: 520ms; --dur-lenta: 900ms; /* ---------- Camadas ---------- */ --z-fundo: 0; --z-conteudo: 10; --z-onda: 20; --z-header: 100; --z-menu: 200; --z-loader: 900; } /* Textura de papel reaproveitável - aplicada sobre os painéis off-white. Gerada em SVG para não depender de arquivo de imagem externo. */ :root { --textura-papel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"); }