/* ============================================================================ palettes.css — GENERATED by docs/make-palette.py. Do not hand-edit the numbers; edit the JSON or the script and re-run. Safe to tweak by hand once you accept it stops being reproducible. Each block is a PRESET: put data-palette="name" on and the whole site changes. Default (no attribute) is untouched. ⚠️ --accent is the only token here that lands on TEXT, so it is darkened until it clears 4.5:1 on that palette's own paper. The --fig-* colours are figure colours — canvas and SVG only, never type. ========================================================================= */ body[data-palette="wilsons"]{ --paper: #F0F6F9; --ink: #060503; --accent: #D4200C; --fig-r1: #E7230E; --fig-r2: #704A28; --fig-r3: #AA1C14; --fig-lit: #E7230E; --fig-warm: #704A28; } body[data-palette="strelitzia"]{ --paper: #E5DDD1; --ink: #211A1E; --accent: #8A4D00; --fig-r1: #FE8F01; --fig-r2: #C45611; --fig-r3: #803309; --fig-lit: #FE8F01; --fig-warm: #C45611; } body[data-palette="navy"]{ /* ⚠️ PAPEL MAIS ESCURO PEDE TINTA SUAVE MAIS ESCURA — e é isto que dá espaço ao fundo. Em #E5DDD1 o `--ink-soft` padrão (alpha .60) dá 4.64:1 no papel LIMPO: 0,14 acima do piso, ou seja, sem folga nenhuma para uma camada de fundo. Medido por diferença contra uma captura sem o campo, o fundo a 11% de opacidade escurecia o papel até 4.32:1 — abaixo. Com alpha .66 o mesmo fundo dá 5.17:1 e o papel limpo 5.63:1. O ajuste é do token, não da opacidade: quem mudou foi o papel. */ --ink-soft: rgba(20,11,8,.66); --ink-faint: rgba(20,11,8,.66); --paper: #F4F3F8; /* 2026-09-09: papel do esquema ultramarine; era #E5DDD1 (strelitzia) */ --ink: #211A1E; --accent: #1B2A6B; /* ⚠️ O PAR ESCURO EXISTE PARA UMA SECÇÃO SÓ (§14: "one intentional dark / inverted section"). Não é um tema — é a inversão de Art & Exploration, e é o que faz WALK parecer outra intenção e não um terceiro passo de R&D. Derivado da paleta: o quase-preto é o `--ink` levado para o azul, e o texto é o papel arrefecido. Medido: #EDECE6 sobre #141317 dá 14.9:1. */ --paper-dark: #141317; --paper-band: #BAC1E2; /* 2026-09-11: o fundo do R&D — #9AA6D6 (--fig-r3) a 65% sobre o papel */ --paper-dark-text: #EDECE6; --rule: rgba(20,11,8,.16); --fig-r1: #1B2A6B; --fig-r2: #4C5FA8; --fig-r3: #9AA6D6; --fig-lit: #1B2A6B; --fig-warm: #4C5FA8; } /* ⚠️ A MARGEM DE CONTRASTE MUDA COM O PAPEL, ENTÃO A OPACIDADE TAMBÉM. O papel #E5DDD1 é mais escuro que o #F7F7FA original, então o mesmo fundo a .07 leva --ink-soft de 4.62:1 para 4.53:1 — passa, mas sem folga. Medido na página, não estimado. A .05 volta a haver margem. */ /* ============================================================================ O FUNDO SE MOVE, E NÃO CUSTA NADA. A geometria do molde é assada uma vez e usada como MÁSCARA; a cor vem de um gradiente CSS que desliza por baixo dela. Isso reproduz exatamente a "paleta dinâmica" do gerador na sua forma mais barata: lá, `rampBy: diagonal` indexa a rampa por posição, o que É um gradiente linear atravessando a placa, e a `deriva` o desloca devagar. Aqui o compositor faz as duas coisas. ⚠️ POR QUE NÃO A SIMULAÇÃO AO VIVO. Medido: 42 ms por passo na resolução que esta composição pede. A 15fps isso é seis vezes um segundo de CPU por segundo — não roda, e forçar prenderia um núcleo por algo que ninguém está olhando. Esta versão gasta zero CPU: máscara e gradiente vivem no compositor. ⚠️ O GRADIENTE É REPETIDO e a animação anda exatamente 200% em 180s, então o laço fecha sem emenda. Um gradiente não repetido bate na borda e a cor salta. ========================================================================= */ /* ⚠️ ESTE BLOCO ERA O EXPERIMENTO DO GRADIENTE CSS E FICOU AQUI DEPOIS DE DEIXAR DE SER USADO — e foi ele que fez a página parecer vazia. Duas coisas se somavam: (1) a base do #field era um gradiente animado a 6% de opacidade, e não a imagem assada, portanto o fallback era invisível; e (2) `.is-live` limpava só o `background-image`, deixando a `mask-image` do `mold-mask.webp` aplicada — o canvas VIVO estava a ser recortado pela silhueta de um molde assado antigo. Nenhum dos dois dava erro de consola: só desapareciam. A base é a imagem assada, sem máscara. O canvas vivo cobre-a. */ body[data-palette="navy"] #field{ opacity:.14; transition:opacity 1.2s ease; background-image:url(../assets/mold-bg-navy.webp); background-size:cover; background-position:center; background-repeat:no-repeat; -webkit-mask-image:none; mask-image:none; animation:none; } @media (max-width:760px){ body[data-palette="navy"] #field{opacity:.10} } /* ============================================================================ ONDE O MOVIMENTO PODE SER VISTO: O PLATE DO HERO. ⚠️ MEDIÇÃO, NÃO PREFERÊNCIA. O gradiente animado no #field funciona — mas na opacidade que o piso de contraste permite (.06) a diferença entre duas fases da animação é de **0,5 em 255 por pixel**. O mecanismo estava certo e o resultado era invisível. Um fundo de página inteira que respeita 4.5:1 não pode carregar movimento visível; não há ajuste que resolva isso, é a mesma restrição vista de dois lados. O plate já é uma figura mascarada com gradiente, a 30%, e fica AO LADO do texto e não atrás dele. Aqui o mesmo mecanismo custa o mesmo (zero: máscara e gradiente no compositor) e se vê. ========================================================================= */ body[data-palette="navy"] .plate{ /* 2026-09-09: era a rampa strelitzia (laranjas); com o esquema ultramarine no fundo, um plate laranja durante o aquecimento era a única coisa fora da paleta. */ background-image:repeating-linear-gradient(155deg, #1B2A6B 0%, #4C5FA8 33%, #9AA6D6 66%, #1B2A6B 100%); background-size:220% 220%; background-position:0% 50%; opacity:.34; animation:plateDrift 140s linear infinite; } @keyframes plateDrift{ from{background-position:0% 50%} to{background-position:220% 50%} } @media (prefers-reduced-motion:reduce){ body[data-palette="navy"] .plate{animation:none} } /* ---------------------------------------------------- o fundo vivo O #field já é um