/* ============================================================================ Setor 3 Contabilidade — tokens do design system ---------------------------------------------------------------------------- DUAS FONTES DE MEDIÇÃO, papéis separados: COR — donatekart.com, 17 rotas medidas em Chrome real. (decisão do Alexandre: manter esta paleta) FORMA — blackbaud.com, 8 rotas medidas do mesmo jeito: tipografia, escala, movimento, gradiente e superfície. Artefatos: _extraction/donatekart/agregado.txt e _extraction/blackbaud/agregado.txt Ferramenta: _extraction/donatekart/capturar.js Comparação de fontes: _extraction/comparar_fontes.js Onde houve extrapolação está marcado com DERIVADO. ========================================================================= */ :root { /* ================================================================== COR Medida no donatekart.com. #903A27 aparece 316 vezes nas 17 rotas, como fundo de botão, texto, borda, sombra e gradiente. Os tons "pressionados" não foram calculados: são os que o próprio site assume no hover, medidos com mouse real. */ --s3-laranja: #903A27; /* TERRACOTA (manual) */ --s3-laranja-pressionada:#7C3222; /* Laranja para TEXTO sobre fundo claro. A #903A27 faz 3,19:1 — passa em título grande e REPROVA em corpo. Esta faz 4,66:1 e passa em qualquer tamanho. A da marca continua mandando em preenchimento e ícone. */ /* Laranja de AÇÃO: fundo de botão com rótulo branco de 14px. A da marca faz 3,19:1 e reprova; esta faz 4,66:1. O botão do governo (referência) é um vermelho de 6,26:1 — o princípio é o mesmo. */ --s3-laranja-acao: #903A27; /* sólido = terracota; hover usa telha */ --s3-laranja-texto: #903A27; /* 6,34:1 no papel, 7,03:1 no claro */ /* 5,52:1 no branco e 4,91:1 no selo claro; a #7C3222 passava no branco mas caía para 4,14 sobre o selo */ --s3-laranja-clara: #F1E3DC; /* lavagem terracota */ --s3-laranja-suave: #F0E7DB; --s3-azul: #0069ff; --s3-azul-pressionado: #005fe6; --s3-azul-claro: #e6f0ff; --s3-tinta: #432119; /* CAFÉ */ /* ------------------------------------------------ acentos (donatekart) Sondados do proprio site de referencia: rosa, marrom, verde e azul da pilha de valores + o menta das secoes claras. As versoes -texto sao escurecidas do MESMO matiz ate passar de 4,5:1 no branco (medido). */ /* --s3-azul ja existe acima (#0069ff — por sorte, o MESMO da referencia) */ --s3-azul-acao: #35190f; /* área institucional = CAFÉ profundo */ --s3-azul-texto: #432119; --s3-azul-clara: #E9E0D2; --s3-verde: #556B4A; /* SÁLVIA */ --s3-verde-acao: #47593E; --s3-verde-texto: #556B4A; /* 5,52:1 no claro */ --s3-verde-clara: #E6EADF; --s3-rosa: #A6432B; /* TELHA (área do jornal) */ --s3-rosa-acao: #8F3A25; --s3-rosa-texto: #A6432B; /* 5,73:1 no claro */ --s3-rosa-clara: #F2E2DA; --s3-marrom: #432119; /* café, para os cartões */ /* 5,23:1 com branco */ --s3-marrom-texto: #432119; /* 6,64:1 no branco */ --s3-marrom-clara: #E9E0D2; --s3-menta: #EDEFE3; /* papel com um fio de sálvia */ /* ------------------------------------------------- acento da AREA Default: laranja (solucoes/conversao). As areas sobrescrevem no componentes.css: institucional=azul, jornal=rosa, diagnostico=verde. */ --s3-acento: var(--s3-laranja); --s3-acento-acao: var(--s3-laranja-acao); --s3-acento-texto: var(--s3-laranja-texto); --s3-acento-clara: var(--s3-laranja-clara); --s3-texto: #432119; --s3-texto-fraco: #5A3226; /* café-suave, 10,3:1 */ /* escurecido do #939393 medido: aquele fazia só 3,07 sobre branco e reprovava em corpo de texto. DERIVADO. */ --s3-texto-tenue: #B6A790; /* LINHO, decorativo */ /* o medido, para uso decorativo */ --s3-borda: #D9CDBB; /* line do manual */ --s3-borda-suave: #E3DACB; --s3-papel: #FBF8F3; /* branco-quente do manual */ --s3-tela: #f5f5f5; /* A escada de fundos das seções. O #fdfcf7 antigo ficava a 2,8% do branco do corpo — invisível; medido em medir_secoes.js. Estes três degraus mantêm ≥6,9% entre vizinhos, que é onde o olho registra troca de seção. */ --s3-tela-quente: #F2ECE4; /* PAPEL do manual */ /* areia clara — lum 0,9314 */ --s3-tela-areia: #E7DFCF; /* CREME */ /* areia funda — lum 0,8407 */ --s3-cinza-medio: #d9d9d9; --s3-sucesso: #00ae5b; /* medido — para preenchimento */ --s3-sucesso-texto: #047857; /* 5,48:1: o medido faz só 2,91 e reprova em texto */ --s3-sucesso-claro: #f4fff8; --s3-erro: #d92d20; /* DERIVADO */ --s3-erro-claro: #fef3f2; /* DERIVADO */ --s3-aviso: #dc6803; /* DERIVADO */ --s3-aviso-claro: #fffaeb; /* DERIVADO */ --s3-info: var(--s3-azul); --s3-info-claro: var(--s3-azul-claro); /* ============================================================ GRADIENTE É AQUI que estava a diferença. O Blackbaud usa gradiente por toda parte — linear e radial, angulado, sobreposto: 135 ocorrências só da cor primária em gradiente, contra superfícies chapadas no que eu tinha feito. Os ângulos abaixo são os medidos lá; as cores são as nossas. */ --s3-grad-marca: linear-gradient(134.52deg, #903A27 0%, #A6432B 100%); --s3-grad-quente: linear-gradient(269.53deg, #903A27 0.5%, #ff8a3d 99.68%); --s3-grad-frio: linear-gradient(90deg, #0069ff 0.14%, #00ae5b 100.14%); --s3-grad-papel: linear-gradient(134.52deg, #ffffff 0%, #fff6f2 100%); --s3-grad-tela: linear-gradient(134.36deg, #fdfcf7 0%, #F1E3DC 100%); --s3-grad-escuro: linear-gradient(134.36deg, #432119 50%, #3c3c35 100%); --s3-grad-brilho: radial-gradient(46% 113% at 2% -21%, rgba(255,138,61,.55) 0%, rgba(144,58,39,0) 100%); --s3-grad-veu: linear-gradient(to right, rgba(144,58,39,.7), rgba(255,138,61,.7)); /* =========================================================== TIPOGRAFIA QUINTA VOLTA — sobriedade de governo, medida em sc.gov.br e sef.sc.gov.br. Montserrat é a família dos dois sites (506 e 1.148 ocorrências) e está no Google Fonts sob licença aberta: pela primeira vez a tipografia da referência pode ser replicada literalmente, sem substituta. A sobriedade vem do PESO: os títulos de governo ficam entre 500 e 700 — o maior título medido é 38px em peso 500. Nada de 800/900. A hierarquia nasce de tamanho e espaço, não de peso. Histórico das voltas anteriores nos comentários do git; a lição que fica: peso 800 lia como panfleto, peso 200 lia como aguado. 500-700 é o meio que um órgão sério usa. */ --s3-fonte-display: 'Fraunces', Georgia, serif; --s3-fonte-grotesca: 'Red Hat Display', system-ui, sans-serif; --s3-fonte-mono: 'IBM Plex Mono', ui-monospace, monospace; --s3-fonte: 'Lato', 'Segoe UI', system-ui, sans-serif; --s3-fonte-corpo: var(--s3-fonte); --s3-tracking: normal; /* Escala: interpolada dos dois sites medidos (38/45,6 peso 500 no maior título; 28,8 peso 700 na página interna; corpo 16). */ --s3-t-heroi: 52px; --s3-t-heroi-lh: 1.12; /* peso 500 — polo leve */ --s3-t-secao: 38px; --s3-t-secao-lh: 1.2; /* peso 500 — o 38/45,6 medido */ --s3-t-subsecao: 28px; --s3-t-subsecao-lh: 1.25; /* peso 600 */ --s3-t-titulo: 22px; --s3-t-titulo-lh: 1.3; /* peso 600 */ --s3-t-cartao: 18px; --s3-t-cartao-lh: 1.35; /* peso 600 */ --s3-t-olho: 16px; --s3-t-olho-lh: 1.5; /* legado; o olho agora é rótulo 13/700 caps */ --s3-t-leitura: 18px; --s3-t-leitura-lh: 1.6; --s3-t-corpo: 16px; --s3-t-corpo-lh: 1.6; /* 16/24 medido */ --s3-t-apoio: 14px; --s3-t-apoio-lh: 1.5; /* 14/19,6 medido */ --s3-t-legenda: 12px; --s3-t-legenda-lh: 1.4; --s3-t-rotulo: 14px; --s3-t-rotulo-lh: 1.2; /* botão, peso 600 */ --s3-peso-normal: 400; --s3-peso-medio: 500; --s3-peso-forte: 600; --s3-peso-negro: 700; --s3-peso-black: 700; /* teto rebaixado: governo não passa de 700 */ --s3-peso-leve: 400; --s3-peso-fino: 400; /* =========================================================== ESPAÇAMENTO Blackbaud: 20px×864, 40px×164, 16px×177, 8px×146, 80px×51. Ritmo mais largo que o do DonateKart — respira mais. */ --s3-e-1: 4px; --s3-e-2: 6px; --s3-e-3: 8px; --s3-e-4: 10px; --s3-e-5: 12px; --s3-e-6: 16px; --s3-e-7: 20px; /* o mais usado do Blackbaud, com folga */ --s3-e-8: 24px; --s3-e-9: 32px; --s3-e-10: 40px; /* segundo mais usado */ --s3-e-11: 56px; --s3-e-12: 80px; /* ================================================================ FORMA O raio dominante nos sites de governo é 4px (119 ocorrências). Moderamos para 8/12 — mais sóbrio que os 10/16 anteriores, sem voltar ao quadrado absoluto que já foi recusado. */ --s3-raio-pequeno: 6px; --s3-raio-botao: 8px; --s3-raio-cartao: 12px; --s3-raio-medio: 14px; --s3-raio-grande: 18px; --s3-raio-extra: 24px; --s3-raio-pilula: 999px; --s3-raio-circulo: 50%; --s3-raio-imagem-topo: 12px 12px 0 0; /* ============================================================= ELEVAÇÃO Sombras MEDIDAS nos sites de governo: discretas, neutras, curtas. A tingida de laranja fica só para o hover de elementos de marca, com a opacidade reduzida — sobriedade não combina com brilho espalhado. */ --s3-sombra-1: 0 1px 3px rgba(0, 0, 0, .10); --s3-sombra-2: 0 2px 8px rgba(0, 0, 0, .15); /* medida: ×2 */ --s3-sombra-3: 0 3px 6px rgba(0, 0, 0, .16); /* medida: ×1 */ --s3-sombra-4: 0 8px 24px rgba(0, 0, 0, .14); --s3-sombra-marca: 0 3px 10px rgba(144, 58, 39, .16); --s3-sombra-brilho: 0 0 0 4px rgba(144, 58, 39, .18); /* ============================================================ MOVIMENTO Do indicium.ai: 350ms ease em `transform`, com 416 ocorrências — o movimento profissional é por DESLOCAMENTO, mais lento e mais suave, não por troca de cor. O DonateKart usa 200ms ease em cor; ficam os dois, cada um no seu papel. */ --s3-tempo-rapido: 200ms; /* cor, borda — DonateKart */ --s3-tempo: 350ms; /* transform, opacidade — indicium */ --s3-tempo-medio: 500ms; --s3-tempo-lento: 700ms; --s3-curva: ease; --s3-curva-saida: cubic-bezier(.16, 1, .3, 1); /* saída expressiva */ --s3-curva-suave: cubic-bezier(.4, 0, .2, 1); --s3-curva-expressiva: cubic-bezier(.22, 1, .36, 1); --s3-transicao-cor: color var(--s3-tempo-rapido) var(--s3-curva), background-color var(--s3-tempo-rapido) var(--s3-curva), border-color var(--s3-tempo-rapido) var(--s3-curva); --s3-transicao-mov: transform var(--s3-tempo) var(--s3-curva), opacity var(--s3-tempo) var(--s3-curva), box-shadow var(--s3-tempo) var(--s3-curva); --s3-transicao: var(--s3-transicao-cor), var(--s3-transicao-mov); /* ============================================================ ESTRUTURA */ /* UMA RÉGUA SÓ. O cabeçalho e o herói foram para 1400px para alinhar com a folha do balancete, e as outras dez seções ficaram 110px para dentro — medido em cada uma. Em vez de remendar seção por seção, o container padrão passa a ser o largo: toda borda esquerda do site na mesma linha. */ --s3-container: 1400px; --s3-container-texto: 700px; --s3-container-largo: 1400px; --s3-margem-lateral: clamp(20px, 4vw, 40px); --s3-altura-botao: 44px; /* entre os 34px e os 50px medidos lá */ --s3-altura-botao-pequeno:36px; --s3-altura-campo: 48px; /* o campo alto do Blackbaud */ --s3-z-base: 1; --s3-z-elevado: 5; --s3-z-fixo: 10; --s3-z-cabecalho: 98; --s3-z-menu: 999; --s3-z-modal: 10007; --s3-icone-pequeno: 16px; --s3-icone: 20px; --s3-icone-grande: 24px; } /* ============================================================================ Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--s3-papel); color: var(--s3-texto); font-family: var(--s3-fonte); font-size: var(--s3-t-corpo); line-height: var(--s3-t-corpo-lh); font-optical-sizing: auto; font-weight: var(--s3-peso-normal); letter-spacing: var(--s3-tracking); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; } img { height: auto; } /* O Blackbaud protege as animações em laço; nós vamos além e desligamos animação e transição de forma ampla. Mais conservador, por escolha. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--s3-sombra-brilho); border-radius: var(--s3-raio-pequeno); }