/* ============================================================================= Paisagens Invisiveis, tokens de design ----------------------------------------------------------------------------- ESTE E O UNICO ARQUIVO DO PROJETO QUE PODE CONTER VALORES LITERAIS. Nenhum outro .css e nenhum .js deste repositorio deve conter hexadecimal, tamanho de fonte, raio, sombra, duracao ou medida de espacamento. Tudo la e var(--token). O script tools/check-tokens.mjs falha o build se alguem quebrar essa regra. Motivo: boa parte destes valores ainda nao foi aprovada pelo Heitor. Quando ele aprovar (ou recusar), a troca precisa ser a edicao deste arquivo, e nao uma refatoracao. PROCEDENCIA de cada bloco: [FONTE] vem do Apendice G v9 (ou E v5). Nao muda sem conversa. [PROPOSTA] nao existe em documento nenhum. Derivado aqui, pendente de aprovacao. Ver trabalho/design-system-web.md, secao 5. Canonico: 1. Projetos/[Jacques Palermo] Paisagens Invisiveis/trabalho/ design-system-web.md ========================================================================== */ :root { /* --- Eixos curatoriais ------------------------------------ [FONTE] ------ Apendice G v9, secao 3.2. A cor e affordance de categorizacao de eixo, e nunca e o unico canal de informacao: sempre acompanhada de rotulo textual. Quatro eixos vem da paleta institucional da PMPA (2025). O roxo da Cidade Intima e deliberadamente fora da paleta, marcando seu carater liminar. ATENCAO: o Apendice E v5 traz valores ANTIGOS. Vale o G v9. CONFERIDO CONTRA O MANUAL EM 2026-09-07, e tres valores mudaram. ------------------------------------------------------------------------ Decisao do Jacques: em divergencia entre documento e manual, vence o manual. A paleta oficial da PMPA (Manual de Aplicacao da Marca, jan/2025, pagina 4) tem SEIS pares, e a lista esta na nota de procedencia de assets/img/logo-prefeitura-poa.svg, extraida do mesmo PDF: #FFD95A/#F58A1F Amarelo #89CFC2/#00A084 Verde Agua #F69353/#D4622A Laranja #B9D432/#378432 Verde #E9837D/#D91C57 Rosa #3CAFCA/#006E7C Azul Claro Movimento estava em #30a2ba/#047482 e Celebra em #e87f7b/#d91d58: nenhum dos dois pares existe no manual, eram deslize de transcricao de poucos digitos. Corrigidos para os oficiais. Quase certo e indistinguivel de certo a olho nu, que e exatamente por que passou despercebido. A INTIMA nao vem do manual (nao ha roxo na identidade da prefeitura) e o valor aqui foi alinhado ao do mapa, #CA90FA: os dois documentos do Heitor divergiam num digito e um dos dois esta errado. Nao da para arbitrar pelo manual, entao vale a consistencia entre as duas telas. A NATURAL FICOU COMO ESTAVA AQUI, e quem se moveu foi o MAPA. Os dois pares sao oficiais, entao a regra "vence o manual" nao resolvia: o manual so lista as cores, quem as atribui aos eixos e o Heitor. O Jacques decidiu em 07/09, vendo os cinco no conjunto, e o motivo e de sistema: "O Verde Agua e muito parecido com o Movimento." Medido: em distancia RGB o tom medio da Natural estava a 53 do Movimento em Verde Agua, e passou a 161 em Verde. Com o Verde Agua, tres dos cinco eixos caiam na mesma faixa fria. */ --eixo-historica-de: #ffd95a; --eixo-historica-ate: #f58a1f; --eixo-natural-de: #b9d432; --eixo-natural-ate: #378432; --eixo-movimento-de: #3cafca; --eixo-movimento-ate: #006e7c; --eixo-celebra-de: #e9837d; --eixo-celebra-ate: #d91c57; --eixo-intima-de: #ca90fa; --eixo-intima-ate: #9146fb; /* Angulo do gradiente [DECIDIDO] ---- 90deg, HORIZONTAL, desde 2026-09-07. O manual da PMPA desenha as faixas correndo da esquerda para a direita, e o mapa ja tinha ido para 90deg no mesmo dia; o Jacques pediu que as duas telas ficassem iguais. ERA 160deg, com este motivo: "nenhuma fonte define direcao, e 160deg e o que melhor le num pin circular pequeno". O argumento nao era errado, mas perdeu para a identidade: preferir a leitura de um circulo de 24px a uma regra da marca fazia as duas telas do projeto discordarem entre si sobre a mesma cor. */ --eixo-angulo: 90deg; /* --- Interface -------------------------------------------- [FONTE] ------ Apendice G v9, secao 3.2 (token unico de interface). Apendice E v5, secao 1.1: reservado a "molduras, navegacao e tipografia". Contraste aferido aqui (o G marca como "[aferir na revisao final]"): #31576c sobre #ffffff .... 7,75:1 passa AA e AAA #31576c sobre --paper ..... 7,28:1 passa AA e AAA #ffffff sobre #31576c .... 7,75:1 passa AA e AAA */ --ink: #31576c; /* --- Neutros ---------------------------------------------- [PROPOSTA] --- Nenhum destes existe em documento. As fontes falam em "superficies claras" e "fundos claros" de forma descritiva, sem valor. Derivados do --ink, e nao de cinza puro, para manter a pagina inteira na mesma familia cromatica do sistema. */ --paper: #f7f8f9; /* fundo da pagina */ --surface: #ffffff; /* cards, janelas, companion card */ /* Texto secundario. Era #52748a, que dava 4,68:1 sobre --paper: passava, mas com margem fina demais. Quando o fundo do hero entrou, o pixel mais escuro atras da descricao derrubou o par para 4,32:1 e REPROVOU. Medido, nao estimado. Escurecido para ter folga real: sobre --paper .................... 5,10:1 sobre o pior pixel do hero ....... 4,71:1 (medida que motivou a troca) Ultima remedicao, 29/07, depois da troca do titulo do hero e da entrada da linha dos fones, em 1440x900: titulo (--ink) ................... 7,09:1 descricao (--ink-soft) ........... 4,92:1 linha das condicoes .............. 4,92:1 linha dos fones, nova ............ 4,96:1 (remedida com o icone, que deslocou a caixa da linha) A caixa do titulo nao se moveu um pixel na troca de copia (445, 314, 536, 110, exatamente as caixas padrao de tools/medir-contraste.py), porque o titulo novo ocupa as mesmas duas linhas do antigo. Mexer neste valor exige remedir o hero. */ --ink-soft: #4d6e84; --line: rgba(49, 87, 108, 0.16); /* filetes, nao textual */ --veil: rgba(49, 87, 108, 0.32); /* fundo de janela sobreposta */ /* Estado de acerto [PROPOSTA, ver DEC-12] --- O Apendice G pede "fundo em cor de sucesso" e nenhum documento traz o hex. CUIDADO: verde neste sistema significa Cidade Natural. A proposta e diferenciar acerto por icone, texto e SFX do sino, sobre superficie neutra, sem matiz proprio. Este token existe para que o dia em que o Heitor decidir o contrario custe uma linha. */ --sucesso-bg: var(--surface); --sucesso-fg: var(--ink); /* --- Foco visivel ----------------------------------------- [PROPOSTA] --- A WCAG 2.2 AA exige foco visivel (Apendice G, tabela 4.5), mas a lista de estados da secao 3.3 do proprio G nao inclui foco. Anel acromatico em relacao aos eixos, para nunca competir com o significado da cor. Contraste do anel contra o fundo: 7,28:1, muito acima do minimo de 3:1. */ --focus-cor: var(--ink); --focus-w: 2px; --focus-offset: 2px; /* --- Tipografia ------------------------------------------------------- */ /* [FONTE] Apendice G v9, secao 3.3: "Aptos; corpo minimo 14 px; entrelinha 1,5". E tudo o que existe sobre tipografia no projeto. [PROPOSTA] A Aptos do Microsoft 365 e licenciada para uso dentro de produtos Microsoft; servir por @font-face exige licenca de webfont comprada a parte, por dominio. Ate isso ser resolvido, Golos Text variavel self-hosted, subsetada para latim. Era Inter ate 29/07. Trocada por decisao do Jacques: a Inter virou o default de fato de interface gerada por IA, e o projeto nao deve carregar esse sotaque. A Golos Text cumpre o mesmo papel de grotesca neutra sem ser a escolha automatica. A Aptos NAO entra no fallback de proposito: se entrasse, quem tem Office veria uma pagina e quem nao tem veria outra, e variacao de renderizacao entre participantes e ruido numa plataforma que tambem e instrumento de pesquisa. Ver DEC-05 no memorial. */ --font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Escala [PROPOSTA] --- Piso de 14px e [FONTE] e e regra dura: a nav do mock aparece em ~12px e fura o minimo do proprio Apendice G. */ /* DESVIO CONSCIENTE DO APENDICE G. [PROPOSTA] --- O piso de 14px do Apendice G v9 e [FONTE] e vale para TODO O RESTO da pagina. Este degrau existe por pedido explicito do Heitor, repetido em 29/07 depois de ele ser informado de que 14px era o minimo da propria fonte: ele quer o rodape em letras miudas. Escopo: SO o texto corrido do rodape (licenca, identificacao academica, contato). Nao entra em nenhum outro lugar, e nao existe .caps aqui, para o rotulo "Apoio" seguir no corpo normal. 13px, e nao 12: o desvio fica em 1px, o menor possivel que ainda se ve. Os 12px do mock foram recusados na secao 2 da especificacao (item 7, nav em ~12px) e nao voltam pela porta de tras. Se o Heitor quiser 12px mesmo, e a edicao desta linha, e o desvio dobra. Contraste nao muda com o corpo: --ink-soft sobre --paper da 5,10:1, e o minimo de 4,5:1 da WCAG 2.2 AA vale para texto normal em qualquer tamanho (a folga de 3:1 e so para texto grande, que este nao e). Registrado em DEC-26 no memorial. */ --fs-050: 0.8125rem; /* 13px, SO o texto corrido do rodape */ --fs-100: 0.875rem; /* 14px, legenda, metadados, microcopy */ --fs-200: 1rem; /* 16px, corpo */ --fs-300: 1.125rem; /* 18px, corpo de abertura */ --fs-400: 1.5rem; /* 24px, titulo de bloco */ --fs-500: 2rem; /* 32px, titulo de secao */ --fs-600: clamp(2rem, 1.2rem + 3.2vw, 3rem); /* titulo do hero */ /* O eixo da Golos Text comeca em 400, entao nao existe peso 300 nesta familia. O token continua existindo porque o titulo do hero e o unico lugar que pede "o mais leve disponivel", e numa troca futura de fonte com eixo mais amplo basta baixar este valor. Declarar 300 aqui seria mentira: o navegador clamparia para 400 em silencio. */ --fw-light: 400; --fw-regular: 400; --fw-medium: 500; --lh-tight: 1.15; --lh-titulo: 1.35; --lh-corpo: 1.5; /* [FONTE] entrelinha 1,5 */ --tr-normal: 0; --tr-hero: 0.02em; --tr-caps: 0.14em; /* rotulo em caixa alta compensa o corpo pequeno */ /* --- Espacamento ------------------------------------------ [FONTE] ------ Apendice G v9, secao 3.3: base 8px, escala 8/16/24/32/48/64. */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; /* [PROPOSTA] a escala da fonte para em 64px, pouco para o ritmo vertical entre secoes. Mantem o multiplo de 8. */ --space-7: 96px; --space-8: 128px; /* --- Marcas institucionais do rodape ---------------------- [EXTERNO] ---- Estes tres nao sao proposta nossa nem vem do TCC: vem do manual de cada instituicao, e por isso ficam fora da escala de 8px. Quem aprova a mudanca aqui nao e o Heitor, e o manual. Alturas diferentes de proposito. A marca da Prefeitura e um lockup de tres linhas (porto / alegre + brasao / PREFEITURA) e a da PUCRS e uma palavra so: igualar altura deixaria a Prefeitura parecendo a menor das tres. O que se equilibra e a LARGURA otica resultante, que fica em 71px, 87px e 107px. Encolheram cerca de 22% em 29/07, quando as marcas saíram de uma faixa propria de largura inteira e passaram a dividir a linha do rodape com o bloco de copyright, no lugar do logotipo do projeto. PISO DURO: o manual da PMPA (janeiro de 2025) fixa reducao maxima de 60 px em web, e a medida e de LARGURA (a cota do manual e uma regua horizontal sob a marca, rotulada "15mm ou 42px"; os 60 px do texto sao a versao conservadora dela para tela). A 40px de altura o lockup mede 71px de largura. A folga ficou pequena: **nao descer deste valor**, porque abaixo de 34px de altura a marca fura o manual. */ --logo-prefeitura-h: 40px; /* 398 x 223 no arquivo, da 71px de largura */ --logo-pucrs-h: 22px; /* 139 x 35, da 87px de largura */ --logo-poafilm-h: 32px; /* 188 x 56, da 107px de largura */ /* --- Forma ------------------------------------------------ [FONTE] ------ */ --radius: 8px; /* botoes e cards */ --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* unica sombra do documento */ /* --- Grid ------------------------------------------------- [PROPOSTA] --- Nenhuma fonte define colunas, gutters, container ou margens. Existem so a base de 8px e a grade de icone 24x24. [FONTE] breakpoints 320 / 768 / 1024 px, alvo de toque >= 44x44 px. */ --container: 1200px; --gutter: clamp(24px, 5vw, 64px); --toque-min: 44px; /* Breakpoints. [FONTE] Apendice G v9, tabela 4.5. ATENCAO: media query nao aceita var(), entao os valores aparecem literalmente dentro de @media. Esta e a UNICA excecao permitida a regra de DEC-05, e o check-tokens.mjs a conhece pelo nome. Estes tokens existem para (a) documentar o valor num lugar so e (b) permitir que o JS leia o mesmo numero em vez de redigita-lo. */ --bp-sm: 320px; --bp-md: 768px; --bp-lg: 1024px; /* --- Movimento -------------------------------------------- [FONTE] ------ Apendice G v9, secao 3.3. O crossfade de audio de 200ms NAO fica aqui: e premissa de mixagem, nao token de UI (os masters sao cortados para casar com ele). */ --dur-ui: 400ms; --dur-overlay: 300ms; --ease: ease-out; /* Curva de entrada e saida das janelas. [PROPOSTA] O Apendice G so nomeia ease-out. Esta e uma ease-out mais suave no fim, que evita a parada seca que o ease-out padrao da em sobreposicao grande. */ --ease-suave: cubic-bezier(0.22, 1, 0.36, 1); /* Entrada da pagina. [PROPOSTA] --- Pedido do Jacques em 30/07: em vez de a pagina inteira aparecer de uma vez, os elementos entram um por vez, em fade com uma subida curta. 700ms e mais lento que os 400ms de --dur-ui, e e de proposito. --dur-ui responde a um gesto do visitante (janela que abre, menu que expande) e ali pressa e qualidade. Aqui ninguem pediu nada: a pagina esta se apresentando. O Apendice G nao regula coreografia de carga, e 700ms fica no meio da faixa de 500 a 800ms que se usa para entrada. 90ms e o intervalo entre um elemento e o proximo. Sao 8 elementos, entao o ultimo comeca em 630ms e a pagina assenta em 1,33s. ANTES DE SOMAR ELEMENTOS A LISTA, revisar o passo: o teto que nao vale a pena passar e cerca de 1,5s ate o ultimo terminar. Depois disso deixa de ser calma e vira espera. A subida NAO vem da escala de espacamento, e nao e descuido: 12px aqui nao e espaco, e distancia de percurso. Medido na tela, 8px em 700ms le como tremida e 16px ja le como deslize. 12px e o menor deslocamento que ainda se percebe como "subiu". Nao ha token de saida porque nao ha saida: isto toca uma vez, no carregar. Quem pede menos movimento nao ve nada disto, e o desligamento e por ausencia, nao por duracao curta. Ver landing.css e DEC-34. */ --dur-entrada: 700ms; --entrada-passo: 90ms; --entrada-sobe: 12px; /* Onda sonora da landing. [PROPOSTA] --- Ciclo longo de proposito: a pagina e muda, e a onda sugere som continuo da cidade, nao reproducao em curso. O passo negativo defasa cada barra e faz a onda viajar em vez de piscar tudo junto. */ --dur-onda: 2600ms; --onda-passo: -55ms; /* Pulso dos icones da janela "Como funciona". [PROPOSTA] --- Pedido do Heitor via Jacques em 29/07: "movimento bem leve, como o espectograma do audio da LP". Nao ganha duracao propria de proposito, e reusa --dur-onda: a pagina respira num tempo so, e a onda do hero e o pulso das bolas ficam sendo o mesmo gesto em dois tamanhos. O passo e NEGATIVO pela mesma razao da onda, e aqui a razao e mais forte: com atraso positivo, a segunda e a terceira bola ficariam paradas esperando a vez logo depois de a janela abrir, o que le como defeito. Com atraso negativo as tres ja estao em movimento no primeiro quadro, em fases diferentes, e o pulso viaja lista abaixo. 866ms e um terco de --dur-onda: as tres bolas ficam igualmente espacadas no ciclo. Se um quarto passo entrar na lista, revisar o divisor. */ --pulso-passo: -866ms; /* --- Fundo do hero ---------------------------------------- [PROPOSTA] --- Imagem de rua urbana desfocada ate ficar irreconhecivel. Os tres valores abaixo controlam a legibilidade do texto por cima e foram ajustados por medicao de contraste no pixel composto, nao no olho. Mexer neles exige remedir. Ver a nota em landing.css. */ --hero-img-opacidade: 0.92; --hero-blur: 3px; /* Veu geral fraco: e o halo abaixo que garante a leitura, nao ele. */ --hero-veu: rgba(247, 248, 249, 0.12); /* Halo atras do texto. Deixa a foto aparecer nas bordas e clareia so onde ha palavra, que e o que layout editorial faz com foto de fundo. Sem ele, tornar a imagem visivel obrigaria a reprovar o contraste. */ --hero-halo-centro: rgba(247, 248, 249, 0.97); --hero-halo-meio: rgba(247, 248, 249, 0.88); --hero-halo-borda: rgba(247, 248, 249, 0); /* RAIOS DO HALO, mobile-first. [PROPOSTA] --- O raio horizontal era 64% em qualquer largura, e isso foi um furo que so apareceu em 29/07, quando o texto do hero passou a alinhar a esquerda no celular. A elipse de 64% centrada em 50% cobre bem a coluna central de uma tela larga, que e onde o texto ficava quando era centralizado. Em 360px a coluna de texto E a tela toda, e a borda esquerda cai na parte fraca da elipse: medido, a descricao dava 4,42:1 e a linha de apoio 4,29:1, as duas abaixo do minimo de 4,5:1 do Apendice G. Importante para a leitura do historico: a medicao por CAIXA reprovava igual antes da mudanca de alinhamento, porque a caixa do paragrafo sempre ocupou a largura inteira. O que mudou foi que os glifos passaram a ficar de fato sobre os piores pixels, em vez de no meio da caixa. O hero nunca havia sido medido abaixo de 1440px. Em 200% a elipse fica tao larga que a queda vira praticamente vertical, o que e o desenho certo para tela estreita: no celular nao existe "coluna de texto" a iluminar, existe a tela. A foto de fundo nao perde nada com isso, porque em 360px ela ja e uma textura desfocada quase invisivel. A partir de 768px volta a elipse de 64%, que e a que foi medida e aprovada no desktop e a que deixa a foto aparecer nas bordas. Mexer nestes dois valores exige remedir o hero nas DUAS larguras. */ --hero-halo-rx: 200%; --hero-halo-ry: 68%; } @media (min-width: 768px) { :root { --hero-halo-rx: 64%; } } /* [PROPOSTA] Nenhuma fonte trata de movimento reduzido, mas e requisito de fato para WCAG 2.2 AA numa interface com slide-up, fade e chevron animado. O conteudo nunca depende da animacao para ser compreendido. */ @media (prefers-reduced-motion: reduce) { :root { --dur-ui: 0.01ms; --dur-overlay: 0.01ms; } }