/* ========================================================================== SISTEMA DE DESIGN · Think Tank Geração Agora -------------------------------------------------------------------------- Este ficheiro define TODAS as decisões visuais do site num só sítio: cores, tamanhos de letra, espaçamentos, formas e movimento. As páginas nunca escrevem valores directamente, usam sempre estes tokens. Consequência prática: mudar aqui uma linha muda o site inteiro de forma coerente. Por exemplo, mudar --verde muda todos os destaques, botões, gráficos e ícones de uma só vez. Todos os contrastes indicados foram medidos, não estimados. O critério é WCAG 2.1 nível AA: 4,5:1 para texto normal e 3:1 para texto grande. Para ver tudo isto aplicado, abrir design-system/index.html no browser. ========================================================================== */ :root { /* ====================================================================== 1 · COR DE MARCA Valores retirados directamente dos ficheiros originais do logótipo e da apresentação, por amostragem de pixel. Não alterar sem falar com a designer da identidade. ====================================================================== */ --preto-marca: #0A0A09; /* fundo dominante da marca, ligeiramente quente */ --verde-marca: #3CDB97; /* destaque de títulos na apresentação */ --verde-gradiente: #43F89B; /* início do gradiente do logótipo */ --azul-dados: #256EFF; /* gráficos e visualização de dados */ --azul-gradiente: #1D49FE; /* fim do gradiente do logótipo */ --lavanda: #D5E3FF; /* pictogramas e elementos secundários */ --branco: #FFFFFF; /* O gradiente da marca. O ângulo de 125 graus foi medido no ficheiro do logótipo, não é aproximado. ATENÇÃO: este é o gradiente DECORATIVO. Não pôr texto por cima. No extremo azul, texto escuro dá apenas 3,2:1 e texto branco 6,1:1, ou seja o contraste muda ao longo da superfície e deixa de ser garantido. Para superfícies com texto, usar as duas variantes abaixo. */ --gradiente-marca: linear-gradient(125deg, #43F89B 0%, #1D49FE 100%); --gradiente-suave: linear-gradient(125deg, #43F89B22 0%, #1D49FE22 100%); /* Fundo de bloco com TEXTO ESCURO por cima. Termina no azul claro em vez do azul profundo, o que garante no mínimo 11:1 em toda a extensão. */ --gradiente-claro: linear-gradient(125deg, #43F89B 0%, #8BC8FF 100%); /* Para TEXTO em gradiente sobre fundo escuro (títulos preenchidos com o gradiente). Garante no mínimo 8,5:1 em toda a extensão. */ --gradiente-brilho: linear-gradient(125deg, #43F89B 0%, #6FACFF 100%); /* ====================================================================== 2 · RAMPAS DE COR Geradas a partir das cores de marca em espaço perceptual (OKLCH), para que cada degrau pareça um passo igual ao olho. São estas que resolvem os casos em que a cor original não tem contraste suficiente. ====================================================================== */ /* Azul. A cor de marca (--azul-gradiente) tem apenas 3,2:1 sobre preto e por isso NÃO PODE ser usada como texto sobre fundo escuro. Para texto usa-se o degrau 400 ou mais claro. */ --azul-50: #B3EFFF; --azul-100: #A5E1FF; --azul-200: #8BC8FF; --azul-300: #6FACFF; /* 8,5:1 sobre preto · texto pequeno, nível AAA */ --azul-400: #548FFF; /* 6,4:1 sobre preto · LIGAÇÕES E TEXTO em fundo escuro */ --azul-500: #3B72FF; --azul-600: #2657FF; --azul-700: #1539E9; /* 7,5:1 sobre branco · texto azul em fundo claro */ --azul-800: #0B12C2; --azul-900: #0C0099; /* Verde. A cor de marca já tem 11,1:1 sobre preto, é excelente e usa-se tal e qual. O problema do verde é o inverso: sobre BRANCO tem 1,8:1 e é ilegível, por isso em fundo claro usa-se o degrau 700. */ --verde-50: #93FFD3; --verde-100: #81FFC5; --verde-200: #61F0AD; --verde-300: #37D693; --verde-400: #17BB7C; --verde-500: #00A066; --verde-600: #008954; --verde-700: #00703F; /* 6,2:1 sobre branco · texto verde em fundo claro */ --verde-800: #005529; --verde-900: #003812; /* Neutros, com o mesmo toque quente do preto da marca. */ --n-0: #0A0A09; --n-50: #121211; --n-100: #1B1B19; --n-200: #262623; --n-300: #3A3A35; --n-400: #55554E; --n-500: #8E8E88; --n-600: #9A9A93; --n-700: #C9C9C4; --n-800: #E6E6E2; --n-900: #FFFFFF; /* ====================================================================== 3 · CORES COM FUNÇÃO (tema escuro, que é o do site) A marca é assumidamente preta. O site vive em fundo escuro por omissão. Usar SEMPRE estes tokens nas páginas, nunca os da secção 1 e 2. ====================================================================== */ /* Superfícies, da mais funda para a mais elevada */ --superficie-0: var(--n-0); /* fundo da página */ --superficie-1: var(--n-50); /* cartões */ --superficie-2: var(--n-100); /* cartão em hover, menus suspensos */ --superficie-3: var(--n-200); /* campos de formulário, etiquetas */ /* Texto. Os rácios são o pior caso, medidos sobre a superfície mais clara. */ --texto-1: var(--n-900); /* títulos · 15,2:1 · AAA */ --texto-2: var(--n-700); /* corpo de texto · 9,1:1 · AAA */ --texto-3: var(--n-600); /* secundário, datas · 5,4:1 · AA */ --texto-4: var(--n-500); /* metadados, fontes · 4,6:1 · AA em todas as superfícies */ /* Acentos sobre fundo escuro */ --acento: var(--verde-marca); /* a cor que carrega o significado */ --acento-suave: #3CDB9722; /* fundo de etiquetas e realces */ --ligacao: var(--azul-400); /* ligações dentro de texto corrido */ --ligacao-hover: var(--azul-300); --dados: var(--azul-dados); /* séries de gráficos, ver secção 4 */ /* Linhas e separadores */ --linha: #FFFFFF14; /* separador subtil */ --linha-forte: #FFFFFF2E; /* contorno de cartão, campo de formulário */ /* Estado */ --erro: #FF5C5C; /* 6,5:1 sobre preto */ --aviso: #FFB020; /* 10,8:1 sobre preto */ --sucesso: var(--verde-marca); /* Foco do teclado. Obrigatório e sempre visível: é como quem não usa rato navega o site. Nunca remover o contorno sem pôr outro no lugar. */ --foco: var(--verde-marca); --foco-espessura: 3px; --foco-desvio: 3px; /* Selecção de texto com o rato */ --seleccao-fundo: var(--verde-marca); --seleccao-texto: var(--preto-marca); /* ====================================================================== 4 · COR PARA GRÁFICOS Ordem de uso das séries. A primeira cor é a mais importante. As cinco distinguem-se entre si e todas passam contraste sobre fundo escuro. ====================================================================== */ --serie-1: #3CDB97; /* verde de marca */ --serie-2: #548FFF; /* azul acessível */ --serie-3: #D5E3FF; /* lavanda */ --serie-4: #FFB020; /* âmbar, para a série que precisa de saltar */ --serie-5: #8BC8FF; /* azul claro */ --grelha: #FFFFFF1A; /* linhas de grelha dos gráficos */ /* ====================================================================== 5 · TIPOGRAFIA Duas famílias, com papéis separados e sem excepções: Nohemi para display, Manrope para tudo o resto. ====================================================================== */ --fonte-display: "Nohemi", "Arial Narrow", system-ui, sans-serif; --fonte-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* NÃO há terceira fonte. O brandbook (Identidade Gráfica, pág. 6) define Nohemi Bold como principal e Manrope como secundária, e o site usa só essas duas. O monospace que aqui esteve foi retirado em set/2026. */ /* Escala fluida. O clamp() define mínimo, valor que cresce com a largura do ecrã, e máximo. Resultado: o texto adapta-se sem saltos entre telemóvel e ecrã grande, e nunca fica nem minúsculo nem gigante. */ /* Display, em Nohemi */ --fs-hero: clamp(2.75rem, 8vw, 7.5rem); /* a frase do hero */ --fs-d1: clamp(2.5rem, 6.5vw, 5.25rem); /* título de página */ --fs-d2: clamp(2rem, 4.5vw, 3.5rem); /* título de secção */ --fs-d3: clamp(1.5rem, 3vw, 2.25rem); /* subtítulo, título de cartão */ --fs-d4: clamp(1.25rem, 2vw, 1.5rem); /* título pequeno */ --fs-numero: clamp(3rem, 8vw, 7rem); /* números grandes de estatística */ /* Texto, em Manrope */ --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem); /* parágrafo de entrada */ --fs-base: 1.0625rem; /* 17px, corpo de texto */ --fs-sm: 0.9375rem; /* 15px, secundário */ --fs-xs: 0.8125rem; /* 13px, legendas e metadados */ --fs-rotulo: 0.75rem; /* 12px, etiquetas em maiúsculas */ /* Pesos */ --peso-display: 700; /* Nohemi Bold — tipografia PRINCIPAL do brandbook (pág. 6) */ --peso-titulo: 700; --peso-forte: 600; --peso-medio: 500; --peso-normal: 400; /* Altura de linha. O display é apertado porque o Nohemi tem caixa alta larga e precisa de respirar pouco. O texto é folgado para leitura longa. */ --lh-hero: 0.88; --lh-display: 0.96; --lh-titulo: 1.12; --lh-texto: 1.62; --lh-apertado: 1.35; /* Espaçamento entre letras. Em tamanhos grandes o Nohemi precisa de tracking negativo para não parecer solto; nas etiquetas em maiúsculas precisa do contrário. */ --ls-hero: -0.035em; --ls-display: -0.02em; --ls-titulo: -0.01em; --ls-texto: 0; --ls-rotulo: 0.14em; /* Largura de linha confortável para leitura. Acima de 75 caracteres o olho perde a linha ao mudar de linha. */ --medida-texto: 68ch; --medida-curta: 46ch; /* ====================================================================== 6 · ESPAÇAMENTO Escala de base 4px. Usar sempre degraus da escala, nunca valores soltos: é o que faz o site parecer desenhado em vez de montado. ====================================================================== */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ --sp-11: 12rem; /* 192px */ /* Espaço vertical entre secções da página, que encolhe em telemóvel */ --sp-seccao: clamp(4rem, 9vw, 8.5rem); --sp-seccao-larga: clamp(6rem, 14vw, 13rem); /* ====================================================================== 7 · LAYOUT ====================================================================== */ --largura-max: 1440px; /* limite exterior do site */ --largura-conteudo: 1180px; /* grelha de conteúdo corrente */ --largura-estreita: 760px; /* artigos e leitura longa */ /* Margem lateral. Cresce com o ecrã, para o conteúdo não colar às bordas. */ --goteira: clamp(1.25rem, 5vw, 4rem); --grelha-colunas: 12; --grelha-vao: clamp(1rem, 2vw, 2rem); /* Pontos de quebra. Só para referência: no CSS usam-se em media queries. */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ====================================================================== 8 · FORMA A identidade é geométrica e dura: um rectângulo e um losango. Os cantos são rectos de propósito. Cantos redondos descaracterizariam a marca. ====================================================================== */ --raio-0: 0; /* omissão: cartões, botões, imagens, campos */ --raio-xs: 2px; /* apenas quando 0 cria problemas ópticos */ --raio-pilula: 999px; /* só para etiquetas de estado, usar com parcimónia */ /* O losango do logótipo, disponível como forma reutilizável. Aplicar com clip-path a qualquer elemento quadrado. */ --losango: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); --borda: 1px solid var(--linha-forte); --borda-acento: 1px solid var(--verde-marca); /* ====================================================================== 9 · ELEVAÇÃO Em fundo escuro as sombras quase não se vêem. A profundidade faz-se sobretudo com mudança de superfície e com brilho, não com sombra. ====================================================================== */ --sombra-1: 0 1px 2px #00000059; --sombra-2: 0 8px 24px -8px #000000A6; --sombra-3: 0 24px 64px -16px #000000CC; --brilho-verde: 0 0 48px -12px #3CDB9766; /* halo do acento */ --brilho-azul: 0 0 48px -12px #1D49FE80; /* ====================================================================== 10 · MOVIMENTO O movimento serve para explicar, não para decorar. Regra: quanto maior o elemento, mais lento se move. ====================================================================== */ --dur-1: 120ms; /* estados instantâneos: hover, foco */ --dur-2: 200ms; /* botões, etiquetas */ --dur-3: 320ms; /* cartões, painéis */ --dur-4: 560ms; /* entrada de secções ao rolar */ --dur-5: 900ms; /* peças grandes, contadores */ --ease-saida: cubic-bezier(0.22, 1, 0.36, 1); /* omissão, decidido e calmo */ --ease-ambos: cubic-bezier(0.65, 0, 0.35, 1); --ease-mola: cubic-bezier(0.34, 1.4, 0.64, 1); /* pequeno ressalto */ --desloc-entrada: 24px; /* distância que os elementos percorrem ao aparecer */ /* ====================================================================== 11 · CAMADAS Números centralizados evitam a guerra de z-index mais tarde. ====================================================================== */ --z-base: 0; --z-elevado: 10; --z-fixo: 100; /* barra de navegação */ --z-gaveta: 200; /* menu de telemóvel */ --z-modal: 300; --z-aviso: 400; /* mensagens temporárias */ } /* ========================================================================== TEMA CLARO Reservado para páginas de leitura longa (relatórios, policy papers), onde ler muitos parágrafos em fundo preto cansa a vista. Aplicar pondo data-tema="claro" no elemento ou numa secção. Atenção ao verde: sobre branco tem 1,8:1 e é ilegível. Em tema claro o verde só serve como fundo de bloco, nunca como cor de texto. ========================================================================== */ [data-tema="claro"] { --superficie-0: #FFFFFF; --superficie-1: #F5F5F2; --superficie-2: #ECECE8; --superficie-3: #E2E2DD; --texto-1: #0A0A09; /* 19,8:1 · AAA */ --texto-2: #3F3F3A; /* 10,6:1 · AAA */ --texto-3: #6B6B64; /* 5,4:1 · AA */ --texto-4: #70706A; /* 5,0:1 sobre branco */ --acento: var(--verde-700); /* 6,2:1 sobre branco */ --acento-suave: #00703F14; --ligacao: var(--azul-gradiente); /* 6,1:1 sobre branco */ --ligacao-hover: var(--azul-700); --linha: #0A0A0914; --linha-forte: #0A0A092E; --erro: #C42121; --sombra-1: 0 1px 2px #0A0A0914; --sombra-2: 0 8px 24px -8px #0A0A0926; --sombra-3: 0 24px 64px -16px #0A0A0933; /* Texto preenchido a gradiente. Em fundo claro tem de escurecer, senão o verde da marca fica com 1,8:1 e desaparece. Aqui garante 6,2:1 no mínimo. */ --gradiente-brilho: linear-gradient(125deg, #00703F 0%, #1539E9 100%); } /* As etiquetas usam cores de marca que só funcionam sobre fundo escuro. Em tema claro passam para os degraus escuros das rampas. */ [data-tema="claro"] .etiqueta--verde { color: var(--verde-700); border-color: #00703F59; } /* 6,2:1 */ [data-tema="claro"] .etiqueta--azul { color: var(--azul-700); border-color: #1539E959; } /* 7,5:1 */ [data-tema="claro"] .etiqueta--lavanda { color: var(--azul-800); border-color: #0B12C259; } /* 11,2:1 */ /* ========================================================================== ACESSIBILIDADE: MOVIMENTO REDUZIDO Quem configurou o sistema para reduzir animações tem problemas reais, de enxaqueca a vertigem. Aqui as durações passam a quase zero, o site continua inteiro e funcional, apenas deixa de se mexer. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --desloc-entrada: 0px; } }