/* ========================================================================== XCLUSIVE EVENTS · M1 BLACKOUT · Design tokens Spec de design M1 BLACKOUT (2026-08-19), §4-5: docs/superpowers/specs/ ========================================================================== */ :root { /* Neutros do blackout: fundo, tinta e a luz que revela. ESCALA DE TEXTO, medida sobre o #0A0A0B do corpo. Tem de ser monótona e todos os degraus que levam texto têm de passar os 4.5:1 de AA: --bone #F4F1EA 17.54:1 títulos e tinta principal (acento) ver mais abaixo 8.1:1 ênfase e interativo --bone-dim alfa 0.56 5.84:1 corpo e chapéus --bone-faint alfa 0.50 4.85:1 meta em caixa alta (datas, categorias, etiquetas de campo) --hair alfa 0.12 -- filetes de 1px, nunca texto O --bone-faint estava a alfa 0.24, ou seja 1.95:1, e reprovava AA nos treze sítios onde pinta texto, incluindo as cinco etiquetas do formulário de contacto. O alfa 0.50 é o mínimo que dá 4.5:1 nos dois fundos onde esse texto vive de facto: 4.85:1 sobre o #0A0A0B do corpo e 4.86:1 sobre o #101012 dos cartões. Já havia um remendo local a admitir o problema em css/sections.css (.journal-teaser .j-card .jc-meta), que este token torna desnecessário mas que fica de pé por ser mais escuro do lado seguro. O --bone-ghost guarda o alfa 0.24 antigo para o único uso do --bone-faint que NÃO era texto: o degradê do risco do .hero-hint. Sem ele, subir o token de texto duplicava a intensidade de um elemento decorativo. */ --ink: #0A0A0B; --void: #000000; --bone: #F4F1EA; --bone-dim: rgba(244, 241, 234, 0.56); --bone-faint: rgba(244, 241, 234, 0.50); --bone-ghost: rgba(244, 241, 234, 0.24); --hair: rgba(244, 241, 234, 0.12); --glow: #FFF6E8; /* Trilho do indicador de percurso. É o --hair já composto sobre o --ink (0.12*244 + 0.88*10 = 38 nos três canais), mas OPACO. Tem de ser opaco porque o rácio que interessa nesse componente é a parte cheia contra a parte vazia, e enquanto os dois eram translúcidos dentro de um mix-blend-mode: difference esse rácio dependia da foto que estivesse por trás: descia a 1.63:1 sobre certos pontos das experiências. Opaco, o rácio é fixo em 6.2:1 com qualquer um dos quatro acentos e em qualquer página. Sobre o preto do corpo pinta exatamente o mesmo cinzento de antes. */ --rail: #262626; /* Paleta do logo (Michel 31/08 20:09: "as cores gerais têm de ser as do logo"). ⚠️ O LOGÓTIPO MUDOU OUTRA VEZ a 2026-09-02: entrou o ficheiro final da agência (Drive, pasta "Rebranding Xclusive"), agora em SVG e não em PNG. Os números abaixo foram medidos sobre o PNG de 01/09 e NÃO foram refeitos. Medido por amostragem grosseira a 02/09, as matizes do X novo estão a menos de 10 graus das do antigo (358.6/340.5/339.7/292.1/255.0 contra 1.2/352.3/323.7/288.4/ 245.2), portanto a paleta não fica obviamente errada — mas isto é uma coluna de pixéis, não o método das 8 bandas que produziu os tokens. Refazer a medição antes de tratar estes valores como derivados do logótipo em uso. Medida com PIL sobre o PNG de 01/09: o "X" é um gradiente de 24 209 pixeis com cor (saturação > 18%), do canto superior esquerdo ao inferior direito. Dividido em 8 bandas ao longo dessa diagonal: banda 0 #E05132 L* 53.9 banda 4 #7B5DA0 L* 45.2 banda 1 #D44D49 L* 51.6 banda 5 #2D2855 L* 19.0 banda 2 #A5445C L* 42.5 banda 6 #292A6A L* 20.6 banda 3 #9C6092 L* 48.8 banda 7 #262A73 L* 21.3 REGRA DE DERIVAÇÃO: matiz do logo intacta, croma do logo mantido até onde o sRGB o aguenta, e o L* levado a 68. O piso NÃO é o 4.5:1 de AA. O piso é a hierarquia: o acento tem de ficar acima do degrau de texto imediatamente abaixo dele, que é o --bone-dim a 5.84:1. Uma primeira versão desta paleta fixou os quatro acentos no mínimo de AA (L* 52.6, 4.85:1) e o resultado foi que o acento passou a ser MAIS ESCURO do que o texto secundário: no cartão do journal o chapéu de categoria dava 4.87:1 e o "5 min de leitura" ao lado, desenhado para desaparecer, dava 5.82:1. Ao apontar para um título, ele escurecia de 17.54:1 para 4.85:1. A ênfase recuava em vez de avançar. A L* 68 os quatro acentos dão 8.1:1 sobre o #0A0A0B, ou seja 1.4x acima do --bone-dim e 2.2x abaixo do --bone: o acento passa a ser a segunda coisa mais clara da página e a única cromática. É a mesma regra que os pilares já usavam (mesma matiz, mesmo croma, L* subido), agora aplicada também aqui. O que se paga: a L* 68 nenhum destes hexadecimais existe tal e qual dentro do logo, porque o pixel mais claro do X está a L* 54. A distância CIEDE2000 ao pixel mais próximo passa de 0.36/5.80/0.72/2.51 para 9.06/7.59/9.12/13.67. A matiz, essa, não se move: 41.0 contra 40.9 do logo, 8.3 contra 8.5, 331.5 contra 331.8, 309.5 contra 309.5. Só o ember perde croma, de 71.7 para 59.5, por o sRGB não ter esse vermelho a L* 68. É o mesmo compromisso que os pilares já tinham assumido, e é o que permite ter cor do logo E hierarquia. Medições sobre os três fundos onde um acento vive em texto: ember #FF8262 ink 8.12:1 cookie #141416 7.55:1 cartão #101012 7.80:1 rose #EF869C ink 8.07:1 cookie 7.50:1 cartão 7.75:1 orchid #D191C6 ink 8.08:1 cookie 7.51:1 cartão 7.76:1 violet #B998DF ink 8.12:1 cookie 7.55:1 cartão 7.80:1 As bandas 5-7 (o indigo #262A73) continuam FORA da família de acentos, agora por duas razões e não uma. O indigo cru dá 1.57:1 sobre o #0A0A0B; levado a L* 68 pela mesma regra dá periwinkle, e aí fica a 6.9 de CIEDE2000 do --logo-violet (as matizes só distam 10.8 graus) e a 9.5 do azul de link por omissão do Chrome em esquema escuro. Não é um quinto acento, é o violet outra vez. Distância dos quatro acentos a esse azul do Chrome: ember 40.5, rose 29.5, orchid 19.2, violet 10.5. */ --logo-ember: #FF8262; /* bandas 0-1, o canto quente do X */ --logo-rose: #EF869C; /* banda 2 */ --logo-orchid: #D191C6; /* banda 3, a banda com mais pixeis do gradiente */ --logo-violet: #B998DF; /* banda 4 */ /* Pilares da home. A Daniela prescreveu as quatro cores por nome (música amarelo, dança verde, espetáculos violeta, decoração vermelho) e isso mantém-se: quatro matizes distintas e reconhecíveis. Vivem noutro substrato. As palavras MÚSICA / DANÇA / ESPETÁCULOS / DECORAÇÃO estão por cima de vídeo e foto a sangrar de bordo a bordo, não sobre o preto do corpo, por isso não podem ser os tokens de acento: precisam de mais luz para se separarem dos pixeis claros da imagem. DUAS COISAS TÊM DE SER VERDADE AO MESMO TEMPO: os quatro pilares têm de se distinguir uns dos outros (são o código de cor da proposta da marca) e têm de se distinguir do cromo das páginas (senão a palavra ESPETÁCULOS e um botão de sistema leem-se como a mesma cor). A versão anterior desta paleta cumpria a primeira e falhava a segunda: com os acentos subidos para L* 68 e os pilares em L* 72 pela regra da "mesma matiz, mais luz", o espetáculos ficou a 3.6 de CIEDE2000 do --logo-violet e a decoração a 9.1 do --logo-ember, ou seja na pior zona possível, a do "quase igual". música #FFD65E matiz 88.7, croma OKLCh 0.144. Fica. O amarelo não existe no logo e não colide com acento nenhum (34.7 do mais próximo, o ember). dança #9DDD7B era #3DFFA5. O verde também não existe no logo, mas o #3DFFA5 tinha croma OKLCh 0.195, o mais alto do site inteiro (acentos 0.104 a 0.159), e estava a 5.8 de CIEDE2000 do --neon-green que substituiu, ou seja não tinha mudado. Agora: matiz puxada 24 graus para o lado quente (155.8 -> 132.0), croma trazido para dentro da família (0.145) e L* 82. Distância ao verde néon antigo: 13.0. Aos outros pilares: 24.7 do amarelo, 51.4 e 52.8 dos outros dois. espetáculos #99B0FF era #C6A1F2. Passa a ser o CANTO FRIO do X, que estava por usar: as bandas 5-7 do gradiente são indigo (#262A73, matiz 298.7) e nenhum token as tocava. Fica um violeta-índigo a matiz 285, L* 73. Distância ao --logo-violet: 3.6 -> 14.9. A matiz não é a 298.7 do indigo em bruto porque a essa matiz a separação não chega: varridas as matizes 285 a 312 a L* 72-84 e croma dentro da família, o melhor mínimo por matiz é 15.3 a 285, 13.5 a 288, 11.8 a 291, 10.4 a 294, 8.9 a 297, 7.6 a 300 e 7.1 a 303. O indigo do logo está a dez graus do --logo-violet e por isso não serve para o separar dele; 285 é onde a curva tem o máximo. decoração #F6978E fica, e isto é uma decisão medida, não um esquecimento. O vermelho é a única das quatro prescrições que cai DENTRO do arco do logo, e cai exactamente entre dois acentos: o rose está a matiz 8.3 e o ember a 41.0. Varrida a grelha completa de matiz 8 a 40, L* 70 a 80 e todo o croma que o sRGB dá, o melhor mínimo alcançável por um vermelho que continue a passar o censo de pixel é 11.0 (com #FFA39B), contra os 9.1 de hoje: +1.9 de CIEDE2000, que é impercetível, ao preço de um coral mais claro e menos vermelho. Descer o L* para ganhar distância parte o censo: o #FF5261 (mínimo 13.2) deixa 25.7 a 40.8% dos pixeis de fundo abaixo de 3:1. E igualar o ember ao certo, para a colisão ser deliberada em vez de acidental, também parte: o #FF8262 deixa 3.0 a 6.8%. Fica o que está, e a colisão fica registada como custo desta paleta. ⚠️ REVOGADO A 2026-09-01. A prescrição acima (música amarelo, dança verde) era da Daniela e estava na lista do que não se relitigava. Foi ela própria que a revogou, por escrito, nesse dia: "o que diz musica e dança está com cores que não estão no logo. consegues trocar?". As quatro cores passaram a sair dos quatro braços do X, por decisão do Tiago no mesmo dia. As matizes são as do logo de 2026-09-01, medido sobre o PNG desse dia (o logo mudou nesse dia e trouxe um azul que o anterior não tinha): laranja 20°, azul 207°, violeta 273°, rosa 347°. ⚠️ O logótipo em uso desde 02/09 é o SVG final da agência; ver a nota no topo desta secção. ⚠️ E foram CLAREADAS até 12:1 sobre o fundo, não usadas como saem do logo. Medido: às 9:1 (o laranja #F3996B) o censo dava 9.58% dos pixeis de fundo abaixo de 3:1 no pilar da música, porque o vídeo dele tem confetti claro. Testadas as quatro matizes nos quatro pilares (matriz 4x4): a matiz não move o número, o brilho move. Daí 12:1. Censo sobre o render real (vídeos congelados no frame 0, palavra escondida, todos os pixeis da caixa da palavra), em 390x844 / 768x1024 / 1440x900, percentagem de fundo abaixo de 3:1 e mínimo. Pior das três larguras: música #FFBB98 0.33% mín 2.64 dança #95D0FF 0.10% mín 2.74 espetáculos #DFBDFA 0.01% mín 2.85 decoração #FCB8C7 0% mín 4.11 Corrida duas vezes, números idênticos nas duas. O pior caso (0.33%) fica ao nível dos 0.3% que o censo anterior já registava e aceitava para o espetáculos. Reproduzir com o script de censo, não a olho. */ --pilar-musica: #FFBB98; --pilar-danca: #95D0FF; --pilar-espetaculos: #DFBDFA; --pilar-decoracao: #FCB8C7; /* Erro de formulário. Era var(--logo-ember), ou seja o token de erro e o token de acento eram literalmente a mesma cor: nas páginas de acento ember a distância era 0.0, e no formulário de contactos as duas mensagens da mesma zona aria-live saíam a 17.7 uma da outra, dois rosas quentes no mesmo slot e ao mesmo tamanho. Um estado de erro não é cromo de marca: é sinal de sistema, e tem de ser reconhecível como tal antes de ser reconhecível como Xclusive. Este vermelho é a única cor do site mais escura E mais saturada do que qualquer acento (L* 54.9 contra os 68 dos quatro, croma OKLCh 0.244 contra 0.104-0.159), o que é precisamente o que o faz ler como alarme. O critério de escolha foi a distância ao acento que PARTILHA ECRÃ com ele. O `--error` só é desenhado onde há formulário, e há formulário em duas páginas: contactos (acento rose) e index (acento violet); `grep -ln nl-form *.html` confirma. Nas duas mensagens da mesma zona aria-live do contactos, a de sucesso é o acento e a de erro é este token: a distância entre elas era 17.7 e passa a 20.4. Na index, 36.9. Aos outros dois, que nunca co-ocorrem com um formulário: ember 15.1, orchid 31.0. O mínimo dos quatro sobe de 0.0 para 15.1. O tecto é estrutural, pela mesma razão da decoração: o vermelho vive entre o rose (matiz 8.3) e o ember (41.0), e nenhum vermelho com folga de contraste passa dos 17.3 de mínimo aos quatro; foi por isso que se optimizou o par que se vê, e não a média. Contraste medido: 5.24:1 sobre o #0A0A0B do corpo, 5.04:1 sobre o #101012 dos cartões e 4.87:1 sobre o #141416 da barra de cookies. */ --error: #FF2439; /* Acento por página, redefinido no style do . O mapa segue o gradiente do X, do canto quente ao canto frio, e agrupa as 15 páginas por registo em vez de deixar cair tudo no valor por omissão: violet a marca ........ index, manifesto, v2, v3 (4) rose o funil ........ experiencias, contactos, faqs (3) ember o trabalho ..... eventos, evento-wild, 404 (3) orchid a leitura ...... journal, os dois artigos, termos, privacidade (5) O manifesto volta a partilhar o acento com a home, como partilhava antes desta paleta: são as duas páginas de voz da marca e é a única coisa que as distingue das páginas de serviço. A versão anterior deste ficheiro punha nove das quinze páginas no mesmo orchid e dava ao manifesto o mesmo tratamento que aos termos; o rose e o ember estavam a servir uma página cada, portanto a diluição não vinha de falta de cores. O maior grupo passa de 9 para 5, e fica abaixo dos 8 que a paleta néon tinha no ciano. A home fica com violet por ser a página de voz da marca, e já não por ficar perto de um pilar: essa justificação caiu quando o --pilar-espetaculos se afastou do --logo-violet (3.6 -> 14.9). O grupo "a marca" é que manda no mapa, não a vizinhança cromática. O --acc2 não pinta nada. Está declarado aqui e em três (index, v2, v3) e nenhuma regra de CSS o consome: `grep -rn acc2` devolve exactamente essas quatro linhas. Fica registado porque muda a leitura da colisão decoração/ember: na única página onde os pilares são desenhados, o cromo em ecrã é só o violet, e a distância dele à decoração é 28.0. */ --acc: var(--logo-orchid); --acc2: var(--logo-ember); /* Tipo — Syne: excêntrica mas legível (substitui a Bodoni) */ --serif: 'Syne', 'Archivo', system-ui, sans-serif; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-display-xl: clamp(56px, 11vw, 190px); --fs-display-l: clamp(40px, 6.5vw, 104px); --fs-display-m: clamp(28px, 3.4vw, 56px); --fs-numeral: clamp(32px, 4vw, 64px); --fs-lead: clamp(19px, 1.6vw, 26px); --fs-body: 17px; --fs-label: 13px; /* Movimento — nada faz bounce. Nunca. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-both: cubic-bezier(0.87, 0, 0.13, 1); --dur-micro: 180ms; --dur-norm: 640ms; --dur-cine: 1200ms; --dur-cut: 420ms; /* Layout */ --margin: clamp(20px, 4vw, 72px); --gutter: 24px; --max-w: 1680px; --section-gap: clamp(48px, 6.5vh, 88px); }