/* ═══════════════════════════════════════════════════════════════════════════ * arke-site-tema.css — CLARO × ESCURO no /site (CET, 2026-08-09) * --------------------------------------------------------------------------- * Ordem dele: "vamos criar o botão claro e preciso que arrume os tokens no css * para ativarmos tema claro e escuro — o topbar sempre será preto!" * * ┌─ POR QUE ESTA FOLHA EXISTE (e não bastava o arke-tokens.css) ──────────── * │ O `arke-tokens.css` já tinha os dois temas — mas ele descreve o vocabulário * │ do PRODUTO (--bg, --surface, --text). O /site nasceu de um template * │ comprado e cresceu em 40 folhas próprias que pintavam a cor NA MÃO: ~780 * │ hex estruturais e ~520 `rgba(245,242,237,…)` de tinta com alpha. Nenhuma * │ dessas declarações escutava token nenhum — por isso o site era escuro por * │ construção, e não escuro por escolha. * │ * │ Esta folha é a camada que faltava: um token para cada tom estrutural que o * │ site realmente usa. As 40 folhas foram reescritas para consumir daqui. * └────────────────────────────────────────────────────────────────────────── * * 🔒 O ESCURO É IDÊNTICO AO DE ANTES, POR CONSTRUÇÃO. Cada hex ganhou o SEU * token, com o MESMO valor no modo escuro — nada foi agrupado, nada foi * "aproximado". Se dois tons diferiam em 3/255, eles continuam diferindo. A * conversão só criou um lugar onde o valor pode mudar; ela não mudou valor * nenhum. Quem muda é o bloco [data-theme="light"] abaixo. * * 🎨 O CLARO é a inversão da ESCADA, não uma paleta nova: a tinta mais forte do * escuro (#F5F2ED) vira a tinta mais forte do claro (#17150F), e assim por * diante, degrau a degrau. Por isso hierarquia, contraste e ritmo continuam * legíveis sem redesenhar página nenhuma. O papel é o creme da marca (#F5F2ED, * o mesmo --bg claro que o produto já usa), não branco puro de escritório. * * ⚠️ AS CORES DE MARCA MUDAM DE TOM, NUNCA DE MATIZ. O ouro e as 21 cores de * página não podem ficar como estão no claro — medido: o ouro cai de 7.39 para * 2.40 de contraste sobre o papel creme, e as 21 cores de página ficam TODAS * abaixo de 4.5. Então cada uma ganha, no modo claro, a MESMA cor com a * luminosidade baixada até bater AA (§2.1 e §7). Matiz intocado: continua sendo * ouro, continua sendo o verde do archēON. É o que uma tinta faz — ela se * comporta diferente no papel branco e no papel preto. * O que NÃO entra na inversão: os semânticos de estado (sucesso/erro/aviso), * que já são legíveis nos dois fundos. * * Carregar DEPOIS de arke-tokens.css. O modo entra por `data-theme` no , * escrito pelo public/site/js/arke-tema.js. * ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────────── * 1 · ESCURO — o padrão. Valores idênticos aos que estavam na mão nas folhas. * ───────────────────────────────────────────────────────────────────────────*/ :root { /* TINTA — do título ao rodapé, na ordem em que o olho perde força */ --st-ink-1: #F5F2ED; /* título, texto forte */ --st-ink-1b: #F2EFE9; --st-ink-2: #E6E2DA; --st-ink-2b: #D8D3CB; --st-ink-3: #C9C4BC; /* corpo de texto */ --st-ink-4: #A29C93; --st-ink-4b: #9A9590; --st-ink-5: #8B8680; /* apoio, legenda */ --st-ink-6: #6B6560; /* overline, metadado */ --st-ink-6b: #5F5A54; /* o mais apagado que ainda se lê */ /* PAPEL — do fundo da página à superfície que se levanta dele */ --st-bg-0: #000000; /* preto pleno */ --st-bg-1: #08080A; /* fundo de página (frio) */ --st-bg-1b: #0A0A0A; --st-bg-1c: #0A0A0C; --st-bg-1d: #0C0A0F; --st-bg-1e: #0E0E11; --st-bg-w: #14110C; /* fundo de página (quente) */ --st-bg-2: #101010; /* seção alternada */ --st-bg-2b: #121212; --st-bg-3: #141414; /* card / superfície */ --st-bg-4: #1E1E1E; /* superfície elevada */ --st-line: #2A2A2A; /* borda */ /* CANAIS RGB — para os rgba() de véu, borda e sombra. São os mesmos tons acima, em canal, porque `rgba(var(--x), .12)` precisa do RGB cru. É o que faz uma borda de 12% de tinta continuar sendo borda quando o papel inverte. */ --st-ink-rgb: 245, 242, 237; --st-ink-rgb-b: 242, 239, 233; --st-ink-rgb-c: 240, 239, 234; --st-bg-rgb: 8, 8, 10; --st-bg-rgb-b: 14, 14, 17; } /* ───────────────────────────────────────────────────────────────────────────── * 2 · CLARO — a mesma escada, virada. * ───────────────────────────────────────────────────────────────────────────*/ :root[data-theme="light"] { --st-ink-1: #17150F; --st-ink-1b: #17150F; --st-ink-2: #2C2821; --st-ink-2b: #37322A; --st-ink-3: #453F36; --st-ink-4: #5A5349; --st-ink-4b: #605950; --st-ink-5: #6E675C; --st-ink-6: #837A6D; --st-ink-6b: #8D8477; /* O papel é o creme da marca — o mesmo --bg claro do produto. Branco puro deixaria o ouro estridente e o site com cara de documento. */ --st-bg-0: #FFFFFF; --st-bg-1: #F7F4EE; --st-bg-1b: #F5F2ED; --st-bg-1c: #F5F2EC; --st-bg-1d: #F4F0EA; --st-bg-1e: #F2EEE7; --st-bg-w: #F3EFE6; --st-bg-2: #EFEBE3; --st-bg-2b: #EDE9E0; /* Card BRANCO de propósito: no escuro o card (#141414) é mais claro que a seção (#101010) — ele se levanta do fundo. No claro a relação tem que se manter, então ele é mais claro que o creme, e o mais claro é o branco. */ --st-bg-3: #FFFFFF; --st-bg-4: #FAF7F1; --st-line: #E3DDD2; --st-ink-rgb: 23, 21, 15; --st-ink-rgb-b: 23, 21, 15; --st-ink-rgb-c: 27, 24, 17; --st-bg-rgb: 247, 244, 238; --st-bg-rgb-b: 242, 238, 231; /* ── 2.1 · O OURO PRECISA ESCURECER — e isto foi MEDIDO, não achado ─────── #C4973A sobre o preto do site dá 7.39 de contraste (WCAG AA folgado). O MESMO ouro sobre o papel creme dá 2.40 — abaixo até do mínimo de 3.0 para texto grande. E o ouro aqui é TEXTO: contei 649 declarações `color: var(--accent…)` contra 47 de fundo, proporção de 14 para 1. Deixar o ouro como está no claro entregaria um site com os overlines, os links e os destaques todos ilegíveis — bonito na miniatura, impossível de ler. #856419 é o mesmo ouro puxado para o bronze até bater 4.90 sobre o creme. Ele continua sendo a cor da marca, uma oitava abaixo — como uma tinta que se comporta diferente no papel branco e no papel preto, que é literalmente o caso. O ouro claro NÃO some: ele volta inteiro no topo e no rodapé, que seguem escuros. ⚠️ `--accent-rgb` acompanha, senão os 620 véus `rgba(var(--accent-rgb), α)` continuariam calculando o dourado claro e sumiriam sobre o creme. */ --accent: #856419; --accent-hover: #6F5312; --accent-active: #5E460D; --accent-text: #856419; --accent-rgb: 133, 100, 25; --accent-soft: rgba(133, 100, 25, 0.14); --accent-softer: rgba(133, 100, 25, 0.07); --accent-ring: rgba(133, 100, 25, 0.30); --gold: #856419; --gold-hover: #6F5312; } /* 2.2 · Os 47 lugares onde o ouro é FUNDO, não tinta. Com o ouro escuro, o texto preto que eles carregam cairia para 3.6 de contraste. Invertendo a tinta desses elementos — e só desses — o botão volta a 5.9. A lista saiu de uma varredura das folhas por `background: var(--accent|--gold)`; não é chute de nome de classe. */ :root[data-theme="light"] .st-hero-btn a, :root[data-theme="light"] [class*="btn--forte"], :root[data-theme="light"] .ins-comp__btn, :root[data-theme="light"] .ins-comp__badge, :root[data-theme="light"] .leg-btn, :root[data-theme="light"] .arq-lente.is-on, :root[data-theme="light"] .me-graf__b.is-on, :root[data-theme="light"] .flw-log__p, :root[data-theme="light"] .flw-no[data-estado] .flw-no__p, :root[data-theme="light"] .ark-line:hover .ark-line__go, :root[data-theme="light"] .tp-btn-border-2.st:hover, :root[data-theme="light"] .cat-meta__b i { color: #F7F3EA !important; } /* ───────────────────────────────────────────────────────────────────────────── * 3 · O TOPBAR É SEMPRE PRETO — ordem explícita do CET. * * No escuro isso já acontecia (arke-nav.css §1). No CLARO a barra herdaria o * papel creme e os links, que são claros, sumiriam. Em vez de dar cor clara aos * links no modo claro, a barra inteira fica preta nos DOIS temas: ela é a * assinatura do site, e assinatura não troca de cor com a preferência de quem * lê. Vale para a barra fixa, a transparente do topo e o menu que desce dela. * ───────────────────────────────────────────────────────────────────────────*/ /* ⚠️ `!important` aqui NÃO é preguiça: as regras que pintam a barra e o mega menu já nascem com !important (arke-nav.css §1) ou com seletores de 4 níveis (`.ark-menu > nav > ul > li > .ark-mega`). Sem a mesma força, a barra preta perderia para elas e o menu ficaria creme no tema claro — exatamente o que a ordem do CET proíbe. Toda regra deste bloco existe pra manter o topo PRETO. */ :root[data-theme="light"] #header-sticky, :root[data-theme="light"] .ark-nav, :root[data-theme="light"] .tp-header-area, :root[data-theme="light"] .header-transparent, :root[data-theme="light"] #header-sticky.header-sticky, :root[data-theme="light"] .ark-nav.header-sticky { background: #000 !important; border-bottom: 1px solid rgba(245, 242, 237, .08); } /* Dentro da barra preta a tinta volta a ser CLARA — senão o menu ficaria preto sobre preto. A inversão é local e proposital: a barra é uma ilha de escuro dentro da página clara. */ :root[data-theme="light"] #header-sticky .ark-menu > nav > ul > li > a, :root[data-theme="light"] #header-sticky .ark-menu > nav > ul > li > span, :root[data-theme="light"] #header-sticky .ark-btn-entrar, :root[data-theme="light"] .ark-nav .ark-menu > nav > ul > li > a, :root[data-theme="light"] .ark-nav .ark-menu > nav > ul > li > span, :root[data-theme="light"] .ark-nav .ark-btn-entrar { color: #F5F2ED !important; } :root[data-theme="light"] .ark-btn-entrar { border-color: rgba(245, 242, 237, .22) !important; } :root[data-theme="light"] .tp-offcanvas-open-btn i, :root[data-theme="light"] .tp-header-bar button i { background: #F5F2ED !important; } /* O mega menu desce da barra: é a mesma peça, aberta. */ :root[data-theme="light"] .ark-mega, :root[data-theme="light"] .ark-menu > nav > ul > li > .ark-mega, :root[data-theme="light"] .ark-menu .ark-mega .tp-submenu { background: #0A0A0B !important; background-color: #0A0A0B !important; border-top: 1px solid rgba(245, 242, 237, .08); color: #C9C4BC !important; } :root[data-theme="light"] .ark-mega a, :root[data-theme="light"] .ark-mega b, :root[data-theme="light"] .ark-mega .ark-soon { color: #F5F2ED !important; } :root[data-theme="light"] .ark-mega em, :root[data-theme="light"] .ark-mega p { color: #8B8680 !important; } :root[data-theme="light"] .ark-mega__card { background: rgba(245, 242, 237, .04) !important; } /* O menu do celular é a barra aberta em tela cheia — segue preto, com a tinta clara. Sem estas linhas o `theme-override.css` (que agora lê o token de tinta) escreveria texto escuro sobre o fundo preto que travamos acima. Vence por especificidade: :root[data-theme] soma um nível a mais que o seletor de lá. */ :root[data-theme="light"] .tp-offcanvas-area, :root[data-theme="light"] .tp-offcanvas-wrapper, :root[data-theme="light"] .tp-offcanvas-2-area, :root[data-theme="light"] .tp-offcanvas-2-wrapper { background: #0A0A0A !important; } :root[data-theme="light"] .tp-offcanvas-area *, :root[data-theme="light"] .tp-offcanvas-2-area * { color: #F5F2ED !important; } :root[data-theme="light"] .tp-offcanvas-area p, :root[data-theme="light"] .tp-offcanvas-menu nav ul li a, :root[data-theme="light"] .tp-offcanvas-2-menu nav ul li a { color: #C9C4BC !important; } :root[data-theme="light"] .tp-offcanvas-area a:hover, :root[data-theme="light"] .tp-offcanvas-menu nav ul li a:hover { color: var(--accent, #C4973A) !important; } :root[data-theme="light"] .tp-offcanvas-close-btn svg path { stroke: #F5F2ED !important; } /* ───────────────────────────────────────────────────────────────────────────── * 4 · O BOTÃO DE TEMA * * Mora na barra, no lugar onde estava o link "demonstração" (que o CET mandou * remover no mesmo pedido). É um alvo redondo com os dois símbolos empilhados: * o que está visível é o tema que o clique VAI TRAZER, não o que está ligado — * um interruptor mostra para onde ele leva. Como a barra é sempre preta, o * botão tem um visual só nos dois temas. * ───────────────────────────────────────────────────────────────────────────*/ .ark-tema { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: transparent; border: 1px solid rgba(245, 242, 237, .14); color: #F5F2ED; transition: border-color .3s ease, color .3s ease, background .3s ease; } .ark-tema:hover { border-color: rgba(var(--accent-rgb), .55); color: var(--accent, #C4973A); background: rgba(var(--accent-rgb), .08); } .ark-tema:focus-visible { outline: 2px solid var(--accent, #C4973A); outline-offset: 2px; } .ark-tema svg { position: absolute; width: 17px; height: 17px; transition: opacity .28s ease, transform .38s cubic-bezier(.16, 1, .3, 1); } /* No escuro o botão oferece o SOL; no claro, a LUA. */ .ark-tema .ark-tema__sol { opacity: 1; transform: rotate(0) scale(1); } .ark-tema .ark-tema__lua { opacity: 0; transform: rotate(-45deg) scale(.7); } :root[data-theme="light"] .ark-tema .ark-tema__sol { opacity: 0; transform: rotate(45deg) scale(.7); } :root[data-theme="light"] .ark-tema .ark-tema__lua { opacity: 1; transform: rotate(0) scale(1); } @media (prefers-reduced-motion: reduce) { .ark-tema svg { transition: opacity .01s linear; } } /* O botão vive em DOIS lugares: na barra (`--barra`) e no menu do celular (`--menu`). No celular a barra já carrega logo + Conectar + hambúrguer; um quarto alvo ali espremeria tudo. Então lá ele sai da barra e fica no menu aberto, que é onde sobra espaço. O JS liga o clique em todos os `.ark-tema`, então os dois funcionam e ficam em sincronia sozinhos. */ @media (max-width: 767px) { .ark-tema--barra { display: none; } .ark-tema { width: 32px; height: 32px; } .ark-tema svg { width: 15px; height: 15px; } } /* No desktop o menu do celular não existe — o botão de lá some. */ @media (min-width: 768px) { .ark-tema--menu { display: none; } } /* ───────────────────────────────────────────────────────────────────────────── * 5 · REMENDOS DO TEMPLATE COMPRADO * * O main.css (48 mil linhas) traz a própria escala de pretos em variáveis * `--tp-common-black*` e pinta corpo, rodapé e cartões com elas. Elas não * passaram pela conversão — são do template, não nossas — então o modo claro * as redefine aqui, num lugar só. É o ponto de contato entre o tema da casa e o * tema que veio de fora. * ───────────────────────────────────────────────────────────────────────────*/ :root[data-theme="light"] { --tp-common-black: #F5F2ED; --tp-common-black-2: #EDE9E0; --tp-common-black-3: #FFFFFF; --tp-common-black-4: #F7F4EE; --tp-common-black-5: #EFEBE3; --tp-common-black-6: #E9E4DA; --tp-common-black-7: #F7F4EE; --tp-common-black-8: #EFEBE3; --tp-common-white: #17150F; --tp-text-body: #453F36; --tp-grey-1: #EFEBE3; } :root[data-theme="light"] body { background-color: #F5F2ED; color: #453F36; } /* Títulos e texto corrido do template: a cor vinha de um branco fixo. */ :root[data-theme="light"] h1, :root[data-theme="light"] h2, :root[data-theme="light"] h3, :root[data-theme="light"] h4, :root[data-theme="light"] h5, :root[data-theme="light"] h6 { color: #17150F; } :root[data-theme="light"] p { color: #453F36; } /* Imagens e vídeos de fundo são fotografados no escuro. No claro eles continuam existindo, mas o véu que os cobre inverte de preto para creme — senão o texto escuro cairia em cima de imagem escura. */ :root[data-theme="light"] .ark-veu, :root[data-theme="light"] [data-bg-overlay] { background: rgba(245, 242, 237, .82); } /* ───────────────────────────────────────────────────────────────────────────── * 5.1 · AS DUAS ÂNCORAS ESCURAS — topo e rodapé, nos dois temas * * A ordem foi "o topbar sempre será preto". O rodapé segue junto pelo mesmo * raciocínio, e por um motivo técnico que vale escrever: os textos do rodapé * vêm do template em `rgba(255,255,255,.6)` — branco cru, sem token, em dezenas * de regras dentro do main.css. Enquanto o rodapé for escuro, esse branco está * CERTO. Clareá-lo obrigaria a caçar seletor por seletor num arquivo de 48 mil * linhas que não é nosso, para ganhar o quê — um rodapé bege. * * O resultado também é melhor de olhar: página clara entre duas faixas escuras * é uma moldura, e mantém a marca reconhecível nos dois temas. Quem chega no * claro vê o mesmo topo e o mesmo pé de quem chega no escuro. * ───────────────────────────────────────────────────────────────────────────*/ :root[data-theme="light"] .st-footer-area, :root[data-theme="light"] .st-copyright-area { background-color: #0A0A0B !important; color: rgba(245, 242, 237, .6); } :root[data-theme="light"] .st-footer-area h1, :root[data-theme="light"] .st-footer-area h2, :root[data-theme="light"] .st-footer-area h3, :root[data-theme="light"] .st-footer-area h4, :root[data-theme="light"] .st-footer-area h5, :root[data-theme="light"] .st-footer-area h6, :root[data-theme="light"] .st-footer-widget-title { color: #F5F2ED !important; } :root[data-theme="light"] .st-footer-area p, :root[data-theme="light"] .st-footer-area a, :root[data-theme="light"] .st-footer-widget-menu ul li a, :root[data-theme="light"] .st-copyright-area p, :root[data-theme="light"] .st-copyright-area a { color: rgba(245, 242, 237, .6) !important; } :root[data-theme="light"] .st-footer-area a:hover, :root[data-theme="light"] .st-copyright-area a:hover { color: var(--accent, #C4973A) !important; } /* ───────────────────────────────────────────────────────────────────────────── * 5.2 · O MIOLO QUE VEIO DO TEMPLATE * * O conteúdo do site é 9.253 classes `ark-` (nossas, convertidas para token) e * ~3.676 do template — destas, a esmagadora maioria é justamente header, * offcanvas e rodapé, já resolvidos acima. Sobram os títulos de seção e o texto * de apoio deles, que o template pinta com branco cru. É o que este bloco cobre. * ───────────────────────────────────────────────────────────────────────────*/ :root[data-theme="light"] .tp-section-title-playfair, :root[data-theme="light"] .tp-section-title, :root[data-theme="light"] .st-hero-title, :root[data-theme="light"] .st-section-title { color: #17150F; } :root[data-theme="light"] .tp-section-title-playfair p, :root[data-theme="light"] .tp-section-wrapper p, :root[data-theme="light"] .st-about-text p, :root[data-theme="light"] .st-choose-content p { color: #453F36; } /* O `span`/`i` desses títulos é o ouro da marca (theme-override §COR) — ele não entra na inversão, por isso não aparece em regra nenhuma daqui. */ /* ───────────────────────────────────────────────────────────────────────────── * 6 · ANTI-FLASH * O JS escreve `data-theme` antes da pintura; enquanto ele não roda, o * carrega a classe `ark-tema-carregando`, que segura a transição para a página * não piscar do escuro para o claro na frente do visitante. * ───────────────────────────────────────────────────────────────────────────*/ .ark-tema-carregando, .ark-tema-carregando * { transition: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ * 7 · AS CORES DE PÁGINA NO TEMA CLARO * * Cada página de módulo/produto do site troca o accent por uma classe no * (`.tema-core`, `.tema-cms`, `.tema-me`…) — 21 no total. Duas coisas * obrigavam este bloco a existir: * * 1) ESPECIFICIDADE. `:root[data-theme="light"]` (0,2,0) vence `.tema-core` * (0,1,0). Sem redeclarar aqui, o tema claro apagaria a cor de todas as 21 * páginas e pintaria tudo de ouro — o site inteiro perderia a identidade * por módulo no claro. * 2) CONTRASTE. Medi as 21 sobre o papel creme: TODAS ficavam abaixo de 4.5. * As piores eram a de Tecnologia (#84CC16 → 1.77) e a Comercial (#F59E0B → * 1.92) — verde-limão e âmbar são cores feitas para brilhar no escuro. * * COMO CADA TOM FOI DERIVADO — e o que NÃO foi feito: o MATIZ é o do escuro, * intocado. Só a luminosidade desce, com uma dessaturação leve junto, até bater * 4.6:1 sobre o creme. Sem a dessaturação, escurecer deixava os roxos e azuis * em neon (#7B41FF) — vívido demais para um site editorial. Ninguém escolheu * cor nova aqui: é a MESMA cor, com o comportamento que ela precisa ter sobre * papel claro. No escuro nada disso é lido, e o tom original continua valendo. * ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] .tema-adm { --accent: #6C6C75; --accent-rgb: 108, 108, 117; --accent-text: #6C6C75; } /* #A1A1AA → 4.66:1 */ :root[data-theme="light"] .tema-cat { --accent: #15796E; --accent-rgb: 21, 121, 110; --accent-text: #15796E; } /* #14B8A6 → 4.71:1 */ :root[data-theme="light"] .tema-cli { --accent: #15749F; --accent-rgb: 21, 116, 159; --accent-text: #15749F; } /* #0EA5E9 → 4.67:1 */ :root[data-theme="light"] .tema-cms { --accent: #0E7789; --accent-rgb: 14, 119, 137; --accent-text: #0E7789; } /* #06B6D4 → 4.68:1 */ :root[data-theme="light"] .tema-com { --accent: #926312; --accent-rgb: 146, 99, 18; --accent-text: #926312; } /* #F59E0B → 4.68:1 */ :root[data-theme="light"] .tema-core { --accent: #7B4AEB; --accent-rgb: 123, 74, 235; --accent-text: #7B4AEB; } /* #8B5CF6 → 4.68:1 */ :root[data-theme="light"] .tema-eduardo { --accent: #856930; --accent-rgb: 133, 105, 48; --accent-text: #856930; } /* #C4973A → 4.63:1 */ :root[data-theme="light"] .tema-fin { --accent: #1F7D41; --accent-rgb: 31, 125, 65; --accent-text: #1F7D41; } /* #22C55E → 4.62:1 */ :root[data-theme="light"] .tema-flow { --accent: #9439EA; --accent-rgb: 148, 57, 234; --accent-text: #9439EA; } /* #A855F7 → 4.66:1 */ :root[data-theme="light"] .tema-jur { --accent: #616E82; --accent-rgb: 97, 110, 130; --accent-text: #616E82; } /* #64748B → 4.63:1 */ :root[data-theme="light"] .tema-kpi { --accent: #856930; --accent-rgb: 133, 105, 48; --accent-text: #856930; } /* #C4973A → 4.63:1 */ :root[data-theme="light"] .tema-mkt { --accent: #B05212; --accent-rgb: 176, 82, 18; --accent-text: #B05212; } /* #F97316 → 4.63:1 */ :root[data-theme="light"] .tema-me { --accent: #1966E5; --accent-rgb: 25, 102, 229; --accent-text: #1966E5; } /* #3B82F6 → 4.62:1 */ :root[data-theme="light"] .tema-on { --accent: #1F7D41; --accent-rgb: 31, 125, 65; --accent-text: #1F7D41; } /* #22C55E → 4.62:1 */ :root[data-theme="light"] .tema-ope { --accent: #7B4AEB; --accent-rgb: 123, 74, 235; --accent-text: #7B4AEB; } /* #8B5CF6 → 4.68:1 */ :root[data-theme="light"] .tema-os { --accent: #D52121; --accent-rgb: 213, 33, 33; --accent-text: #D52121; } /* #EF4444 → 4.62:1 */ :root[data-theme="light"] .tema-pro { --accent: #585BE8; --accent-rgb: 88, 91, 232; --accent-text: #585BE8; } /* #6366F1 → 4.61:1 */ :root[data-theme="light"] .tema-rh { --accent: #CB2376; --accent-rgb: 203, 35, 118; --accent-text: #CB2376; } /* #EC4899 → 4.65:1 */ :root[data-theme="light"] .tema-std { --accent: #9439EA; --accent-rgb: 148, 57, 234; --accent-text: #9439EA; } /* #A855F7 → 4.66:1 */ :root[data-theme="light"] .tema-sup { --accent: #D61B3B; --accent-rgb: 214, 27, 59; --accent-text: #D61B3B; } /* #F43F5E → 4.61:1 */ :root[data-theme="light"] .tema-tec { --accent: #517816; --accent-rgb: 81, 120, 22; --accent-text: #517816; } /* #84CC16 → 4.65:1 */ /* ═══════════════════════════════════════════════════════════════════════════ * 8 · A CAUDA LONGA — os tons próprios de cada página * * A 1ª passada usou uma LISTA FIXA dos valores mais frequentes. Ela cobriu o * grosso do site e deixou passar justamente o que é ESPECÍFICO de cada página * de módulo/produto: o quase-preto do archēFLOW (#0B0714), o do archēOS, a * tinta do archēON (#E9FAEE), a do archēME (#EAF1FB)… Resultado que o CET viu * no ar: "texto branco, fundo preto em alguns cards" — o card e o texto ficaram * como no escuro, dentro da página clara. * * A lista fixa virou CRITÉRIO DE CANAL, que pega a cauda inteira sem adivinhar: * PAPEL = max(R,G,B) <= 40 · TINTA = min(R,G,B) >= 176 * * O que o critério DEIXA PASSAR, de propósito: #86EFAC, #FCA5A5, #FBBF24, * #F0C878 (cores de ESTADO, que vivem sobre caixa própria) e #AA2D00, #047857, * #1D4ED8, #8B3A3A (MARCA — canal alto em alguma componente). * * O par claro de cada papel mantém o MATIZ: o quase-preto arroxeado do archēFLOW * vira um creme levemente arroxeado, não um cinza neutro. A identidade da página * sobrevive à troca de tema. * * Nome do token = o próprio valor do escuro. Feio de ler, impossível de * confundir — e deixa o par visível sem consultar tabela nenhuma. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* véu branco dos rgba(255,255,255,α) — no claro vira tinta */ --st-veu-rgb: 255, 255, 255; --st-p-00020f: #00020F; --st-p-010f0a: #010F0A; --st-p-04080a: #04080A; --st-p-05070c: #05070C; --st-p-050d08: #050D08; --st-p-07080a: #07080A; --st-p-07090a: #07090A; --st-p-070a06: #070A06; --st-p-070b12: #070B12; --st-p-08050f: #08050F; --st-p-08060d: #08060D; --st-p-08070a: #08070A; --st-p-080808: #080808; --st-p-08090c: #08090C; --st-p-08120b: #08120B; --st-p-090d15: #090D15; --st-p-0a0505: #0A0505; --st-p-0a0614: #0A0614; --st-p-0a0700: #0A0700; --st-p-0a0708: #0A0708; --st-p-0a0810: #0A0810; --st-p-0a0906: #0A0906; --st-p-0a0a0b: #0A0A0B; --st-p-0b0714: #0B0714; --st-p-0b0b0b: #0B0B0B; --st-p-0b0e1a: #0B0E1A; --st-p-0c0c0c: #0C0C0C; --st-p-0c0c0f: #0C0C0F; --st-p-0c0f1e: #0C0F1E; --st-p-0d0d10: #0D0D10; --st-p-0d1120: #0D1120; --st-p-0e0e12: #0E0E12; --st-p-0e1220: #0E1220; --st-p-0f0c15: #0F0C15; --st-p-0f0e0b: #0F0E0B; --st-p-0f0f13: #0F0F13; --st-p-100b14: #100B14; --st-p-100b1c: #100B1C; --st-p-100d14: #100D14; --st-p-101014: #101014; --st-p-120c1f: #120C1F; --st-p-120f18: #120F18; --st-p-131313: #131313; --st-p-171717: #171717; --st-p-181d26: #181D26; --st-t-c5e6d2: #C5E6D2; --st-t-c6d6ea: #C6D6EA; --st-t-d8cbb0: #D8CBB0; --st-t-dce8f7: #DCE8F7; --st-t-def6e6: #DEF6E6; --st-t-e4daf6: #E4DAF6; --st-t-e8cfcf: #E8CFCF; --st-t-e9faee: #E9FAEE; --st-t-eaf1fb: #EAF1FB; --st-t-eef0f3: #EEF0F3; --st-t-eef1f3: #EEF1F3; --st-t-efe9f8: #EFE9F8; --st-t-eff0ea: #EFF0EA; --st-t-f0efea: #F0EFEA; --st-t-f2eef4: #F2EEF4; --st-t-f2efef: #F2EFEF; --st-t-f3eded: #F3EDED; --st-t-f3f0e9: #F3F0E9; --st-t-f4f1fb: #F4F1FB; --st-t-f5e9d4: #F5E9D4; --st-t-fdf2f8: #FDF2F8; --st-t-fff: #FFF; --st-t-ffffff: #FFFFFF; } :root[data-theme="light"] { --st-veu-rgb: 23, 21, 15; --st-p-00020f: #F2F2F4; --st-p-010f0a: #F1F4F3; --st-p-04080a: #F2F4F5; --st-p-05070c: #F1F1F3; --st-p-050d08: #F0F3F1; --st-p-07080a: #F1F1F3; --st-p-07090a: #F1F2F3; --st-p-070a06: #F2F4F1; --st-p-070b12: #ECEDEF; --st-p-08050f: #F0EFF2; --st-p-08060d: #F0EFF2; --st-p-08070a: #F1F1F3; --st-p-080808: #F2F2F2; --st-p-08090c: #EFEFF2; --st-p-08120b: #EBEFEC; --st-p-090d15: #E9EAED; --st-p-0a0505: #F4F2F2; --st-p-0a0614: #ECEBEF; --st-p-0a0700: #F7F6F5; --st-p-0a0708: #F3F1F1; --st-p-0a0810: #EDECF0; --st-p-0a0906: #F4F3F1; --st-p-0a0a0b: #EFEFF0; --st-p-0b0714: #ECEAEE; --st-p-0b0b0b: #EFEFEF; --st-p-0b0e1a: #E4E5E9; --st-p-0c0c0c: #EEEEEE; --st-p-0c0c0f: #EAEAEE; --st-p-0c0f1e: #E1E2E7; --st-p-0d0d10: #E9E9ED; --st-p-0d1120: #E0E1E5; --st-p-0e0e12: #E7E7EC; --st-p-0e1220: #DFE0E5; --st-p-0f0c15: #E8E7EB; --st-p-0f0e0b: #EFEEEB; --st-p-0f0f13: #E6E6EB; --st-p-100b14: #EAE8EC; --st-p-100b1c: #E5E3E8; --st-p-100d14: #E9E7EB; --st-p-101014: #E5E5EA; --st-p-120c1f: #E3E1E6; --st-p-120f18: #E5E3E8; --st-p-131313: #E6E6E6; --st-p-171717: #E2E2E2; --st-p-181d26: #D5D8DD; --st-t-c5e6d2: #3C5D49; /* #C5E6D2 → 6.59:1 */ --st-t-c6d6ea: #3C4B5D; /* #C6D6EA → 7.98:1 */ --st-t-d8cbb0: #5D523C; /* #D8CBB0 → 6.87:1 */ --st-t-dce8f7: #3C4B5D; /* #DCE8F7 → 7.98:1 */ --st-t-def6e6: #3C5D47; /* #DEF6E6 → 6.60:1 */ --st-t-e4daf6: #483C5D; /* #E4DAF6 → 9.04:1 */ --st-t-e8cfcf: #5D3C3C; /* #E8CFCF → 8.64:1 */ --st-t-e9faee: #3C5D46; /* #E9FAEE → 6.61:1 */ --st-t-eaf1fb: #3C4A5D; /* #EAF1FB → 8.07:1 */ --st-t-eef0f3: #3F4A5A; /* #EEF0F3 → 8.04:1 */ --st-t-eef1f3: #3F4F5A; /* #EEF1F3 → 7.59:1 */ --st-t-efe9f8: #493C5D; /* #EFE9F8 → 9.01:1 */ --st-t-eff0ea: #555940; /* #EFF0EA → 6.51:1 */ --st-t-f0efea: #595540; /* #F0EFEA → 6.72:1 */ --st-t-f2eef4: #523C5D; /* #F2EEF4 → 8.69:1 */ --st-t-f2efef: #544545; /* #F2EFEF → 8.13:1 */ --st-t-f3eded: #5C3D3D; /* #F3EDED → 8.59:1 */ --st-t-f3f0e9: #5D533C; /* #F3F0E9 → 6.79:1 */ --st-t-f4f1fb: #463C5D; /* #F4F1FB → 9.11:1 */ --st-t-f5e9d4: #5D513C; /* #F5E9D4 → 6.95:1 */ --st-t-fdf2f8: #5D3C4E; /* #FDF2F8 → 8.46:1 */ --st-t-fff: #4D4D4D; /* #FFF → 7.57:1 */ --st-t-ffffff: #4D4D4D; /* #FFFFFF → 7.57:1 */ } /* ═══════════════════════════════════════════════════════════════════════════ * 9 · O RESTO DA CAUDA — as variáveis que cada página batiza do seu jeito * * A passada anterior decidia pelo NOME da propriedade (background, border, * --*-fundo, --*-bg). Só que cada página batiza a própria variável: o catálogo * chama de `--cat-superficie`, o administrativo de `--adm-superficie`. Nenhuma * casava — e eram justamente as variáveis de CARD. Era o "fundo preto em alguns * cards" que ainda sobrava depois da 2ª passada. * * Agora, para custom property, quem decide é o VALOR: uma variável que guarda um * quase-preto É papel, chame-se ela como se chamar. `--accent*`, `--gold*`, * `--brand*`, `--tp-*` e qualquer `*-rgb` ficam de fora — são marca ou já são * token nosso. * * A tinta ganhou um segundo critério: claro o bastante (L>=0.25) E quase-neutro * (S<=0.20). É o que pega `#9EA3A1` (cinza claro, 2.6 de contraste sobre o * creme — ilegível) e deixa passar `#FCA5A5` e `#86EFAC`, que são cores de * ESTADO e vivem sobre caixa própria. Cinza médio (`#666C6A`) também fica: sobre * o creme ele já dá 5.4 e não precisa de ajuda. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --st-p-0a1013: #0A1013; --st-p-0b1710: #0B1710; --st-p-0c1012: #0C1012; --st-p-0c1109: #0C1109; --st-p-0c111b: #0C111B; --st-p-0d0f13: #0D0F13; --st-p-0d0f14: #0D0F14; --st-p-0d1418: #0D1418; --st-p-0e0a18: #0E0A18; --st-p-100b18: #100B18; --st-p-100e09: #100E09; --st-p-100e13: #100E13; --st-p-120d0f: #120D0F; --st-p-121316: #121316; --st-p-12140f: #12140F; --st-p-140a0a: #140A0A; --st-p-141118: #141118; --st-p-16120c: #16120C; --st-p-16130c: #16130C; --st-p-171014: #171014; --st-t-3b4056: #3B4056; --st-t-3b4757: #3B4757; --st-t-46403a: #46403A; --st-t-4a443a: #4A443A; --st-t-4a4640: #4A4640; --st-t-4a5560: #4A5560; --st-t-4c5a61: #4C5A61; --st-t-4e4a45: #4E4A45; --st-t-514c47: #514C47; --st-t-55647a: #55647A; --st-t-565b4e: #565B4E; --st-t-575b62: #575B62; --st-t-585264: #585264; --st-t-5a6b80: #5A6B80; --st-t-5c5548: #5C5548; --st-t-5c5748: #5C5748; --st-t-5d6280: #5D6280; --st-t-5e4e56: #5E4E56; --st-t-5e8871: #5E8871; --st-t-616a6f: #616A6F; --st-t-646b77: #646B77; --st-t-666c6a: #666C6A; --st-t-676a78: #676A78; --st-t-676c61: #676C61; --st-t-6a645c: #6A645C; --st-t-6b6470: #6B6470; --st-t-6b6478: #6B6478; --st-t-6b7c93: #6B7C93; --st-t-6c6567: #6C6567; --st-t-6d695e: #6D695E; --st-t-6e6486: #6E6486; --st-t-6e9e7c: #6E9E7C; --st-t-706161: #706161; --st-t-786e5c: #786E5C; --st-t-7a6f5c: #7A6F5C; --st-t-7c7770: #7C7770; --st-t-7e8fa6: #7E8FA6; --st-t-7e9aa8: #7E9AA8; --st-t-7ea891: #7EA891; --st-t-98928b: #98928B; --st-t-9aa1ad: #9AA1AD; --st-t-9aa3a8: #9AA3A8; --st-t-9ea3a1: #9EA3A1; --st-t-a0a2ad: #A0A2AD; --st-t-a2a79b: #A2A79B; --st-t-a69fab: #A69FAB; --st-t-a79cbd: #A79CBD; --st-t-a79fa1: #A79FA1; --st-t-a89898: #A89898; --st-t-a8a396: #A8A396; --st-t-a8a39c: #A8A39C; --st-t-c9afaf: #C9AFAF; --st-t-d6dcdf: #D6DCDF; --st-t-d9d6cf: #D9D6CF; --st-t-dbd7ce: #DBD7CE; --st-t-dcd9d1: #DCD9D1; --st-t-dedacf: #DEDACF; --st-t-dfd8d4: #DFD8D4; --st-t-dfdbd1: #DFDBD1; --st-t-e4dfd3: #E4DFD3; --st-t-eceae5: #ECEAE5; --st-t-edf0f1: #EDF0F1; --st-t-efede7: #EFEDE7; --st-t-efede8: #EFEDE8; --st-t-f0ede6: #F0EDE6; --st-t-f1edea: #F1EDEA; --st-t-f1eee7: #F1EEE7; } :root[data-theme="light"] { --st-p-0a1013: #E9ECED; --st-p-0b1710: #E6EBE8; --st-p-0c1012: #E9EBED; --st-p-0c1109: #ECEFEB; --st-p-0c111b: #E3E5E8; --st-p-0d0f13: #E7E9EC; --st-p-0d0f14: #E7E8EB; --st-p-0d1418: #E4E7E9; --st-p-0e0a18: #E8E6EB; --st-p-100b18: #E7E6EA; --st-p-100e09: #EFEEEC; --st-p-100e13: #E9E7EB; --st-p-120d0f: #ECE8EA; --st-p-121316: #E3E4E8; --st-p-12140f: #E8EAE6; --st-p-140a0a: #EDE9E9; --st-p-141118: #E4E2E7; --st-p-16120c: #EBE9E6; --st-p-16130c: #EBE9E6; --st-p-171014: #E8E3E6; --st-t-3b4056: #474D67; /* #3B4056 → 7.45:1 */ --st-t-3b4757: #465467; /* #3B4757 → 6.90:1 */ --st-t-46403a: #5F574F; /* #46403A → 6.35:1 */ --st-t-4a443a: #61594C; /* #4A443A → 6.18:1 */ --st-t-4a4640: #5D5850; /* #4A4640 → 6.32:1 */ --st-t-4a5560: #4B5762; /* #4A5560 → 6.62:1 */ --st-t-4c5a61: #4C5A61; /* #4C5A61 → 6.39:1 */ --st-t-4e4a45: #5C5751; /* #4E4A45 → 6.40:1 */ --st-t-514c47: #5C5751; /* #514C47 → 6.40:1 */ --st-t-55647a: #475466; /* #55647A → 6.89:1 */ --st-t-565b4e: #585D50; /* #565B4E → 6.07:1 */ --st-t-575b62: #52555C; /* #575B62 → 6.69:1 */ --st-t-585264: #544E5F; /* #585264 → 7.15:1 */ --st-t-5a6b80: #485566; /* #5A6B80 → 6.80:1 */ --st-t-5c5548: #615A4C; /* #5C5548 → 6.12:1 */ --st-t-5c5748: #615C4C; /* #5C5748 → 5.98:1 */ --st-t-5d6280: #494D64; /* #5D6280 → 7.44:1 */ --st-t-5e4e56: #5F4F57; /* #5E4E56 → 6.86:1 */ --st-t-5e8871: #476755; /* #5E8871 → 5.63:1 */ --st-t-616a6f: #51585D; /* #616A6F → 6.48:1 */ --st-t-646b77: #4F555E; /* #646B77 → 6.73:1 */ --st-t-666c6a: #545958; /* #666C6A → 6.38:1 */ --st-t-676a78: #50525D; /* #676A78 → 6.95:1 */ --st-t-676c61: #575B52; /* #676C61 → 6.22:1 */ --st-t-6a645c: #5D5851; /* #6A645C → 6.31:1 */ --st-t-6b6470: #58525C; /* #6B6470 → 6.77:1 */ --st-t-6b6478: #544F5F; /* #6B6478 → 7.07:1 */ --st-t-6b7c93: #495564; /* #6B7C93 → 6.80:1 */ --st-t-6c6567: #5A5455; /* #6C6567 → 6.64:1 */ --st-t-6d695e: #5D5A50; /* #6D695E → 6.18:1 */ --st-t-6e6486: #524A63; /* #6E6486 → 7.47:1 */ --st-t-6e9e7c: #466850; /* #6E9E7C → 5.60:1 */ --st-t-706161: #5D5050; /* #706161 → 6.89:1 */ --st-t-786e5c: #625A4B; /* #786E5C → 6.10:1 */ --st-t-7a6f5c: #635A4B; /* #7A6F5C → 6.08:1 */ --st-t-7c7770: #5B5752; /* #7C7770 → 6.42:1 */ --st-t-7e8fa6: #475467; /* #7E8FA6 → 6.88:1 */ --st-t-7e9aa8: #465C68; /* #7E9AA8 → 6.29:1 */ --st-t-7ea891: #466855; /* #7EA891 → 5.58:1 */ --st-t-98928b: #5C5752; /* #98928B → 6.40:1 */ --st-t-9aa1ad: #4E5460; /* #9AA1AD → 6.81:1 */ --st-t-9aa3a8: #50595D; /* #9AA3A8 → 6.42:1 */ --st-t-9ea3a1: #545957; /* #9EA3A1 → 6.39:1 */ --st-t-a0a2ad: #50525D; /* #A0A2AD → 6.95:1 */ --st-t-a2a79b: #585C51; /* #A2A79B → 6.14:1 */ --st-t-a69fab: #58515C; /* #A69FAB → 6.85:1 */ --st-t-a79cbd: #514568; /* #A79CBD → 7.83:1 */ --st-t-a79fa1: #5A5355; /* #A79FA1 → 6.71:1 */ --st-t-a89898: #5E4F4F; /* #A89898 → 6.95:1 */ --st-t-a8a396: #5F5A4F; /* #A8A396 → 6.14:1 */ --st-t-a8a39c: #5C5851; /* #A8A39C → 6.33:1 */ --st-t-c9afaf: #684646; /* #C9AFAF → 7.37:1 */ --st-t-d6dcdf: #4C5A61; /* #D6DCDF → 6.39:1 */ --st-t-d9d6cf: #615B4D; /* #D9D6CF → 6.04:1 */ --st-t-dbd7ce: #645C49; /* #DBD7CE → 5.93:1 */ --st-t-dcd9d1: #625C4B; /* #DCD9D1 → 5.97:1 */ --st-t-dedacf: #675E47; /* #DEDACF → 5.75:1 */ --st-t-dfd8d4: #63534A; /* #DFD8D4 → 6.56:1 */ --st-t-dfdbd1: #665D47; /* #DFDBD1 → 5.84:1 */ --st-t-e4dfd3: #6A5F44; /* #E4DFD3 → 5.64:1 */ --st-t-eceae5: #645C49; /* #ECEAE5 → 5.93:1 */ --st-t-edf0f1: #4C5C62; /* #EDF0F1 → 6.24:1 */ --st-t-efede7: #685F45; /* #EFEDE7 → 5.68:1 */ --st-t-efede8: #665D47; /* #EFEDE8 → 5.84:1 */ --st-t-f0ede6: #6A5E44; /* #F0EDE6 → 5.70:1 */ --st-t-f1edea: #685445; /* #F1EDEA → 6.39:1 */ --st-t-f1eee7: #6A5E44; /* #F1EEE7 → 5.70:1 */ } /* ═══════════════════════════════════════════════════════════════════════════ * 10 · AS SEÇÕES INVERTIDAS (os manifestos) * * Alguns blocos são CLAROS de propósito dentro do site escuro — o manifesto do * archeFLOW, o dos Módulos, o do Panteon. São inversão editorial: a página é * preta, a seção é creme. * * A 1ª passada converteu o FUNDO deles (que passou a inverter certo) e deixou o * TEXTO como hex escuro literal — porque a regra era "papel em color: não * converte", criada para o texto preto DENTRO DO BOTÃO OURO, onde o fundo NÃO * inverte. Aqui o fundo inverte, então o texto tem que inverter junto. Sem isto, * no tema claro a seção ficava preta com texto preto — parte do defeito que o * CET viu no ar. * * A LIÇÃO: a regra da propriedade não basta sozinha. O que decide se um texto * inverte é se o FUNDO daquela caixa inverte — não a propriedade em que a cor * foi escrita. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --st-inv-14101c: #14101C; --st-inv-14110c: #14110C; } :root[data-theme="light"] { --st-inv-14101c: #F5F2ED; --st-inv-14110c: #F5F2ED; } /* ═══════════════════════════════════════════════════════════════════════════ * 11 · AS CORES DE ESTADO E ACENTO USADAS COMO TEXTO * * Ultimo grupo, achado pelo teste que mede TODO texto contra o papel claro (e * nao so os pares fundo+texto da mesma regra). Sao 15 tons — verdes, ambares, * salmoes, azuis claros — que valem como acento sobre o preto e ficam entre * 1.26 e 2.91 de contraste sobre o creme. #86EFAC da 1.26: e literalmente * invisivel. * * Mesma receita do ouro e das 21 cores de pagina: matiz intocado, luminosidade * baixada ate bater AA, dessaturacao leve junto. Sao ACENTO, entao continuam * sendo a mesma cor — so se comportam como tinta quando o papel e claro. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --st-c-34d399: #34D399; --st-c-4a7c59: #4A7C59; --st-c-5b7b8a: #5B7B8A; --st-c-7bc49a: #7BC49A; --st-c-7fb08c: #7FB08C; --st-c-86efac: #86EFAC; --st-c-8fa2ba: #8FA2BA; --st-c-99c2aa: #99C2AA; --st-c-9a6410: #9A6410; --st-c-a9bcd6: #A9BCD6; --st-c-b0564f: #B0564F; --st-c-b8860b: #B8860B; --st-c-c4973a: #C4973A; --st-c-c97c74: #C97C74; --st-c-c9a08b: #C9A08B; --st-c-c9a26d: #C9A26D; --st-c-d4a94a: #D4A94A; --st-c-d8a93f: #D8A93F; --st-c-e08a7a: #E08A7A; --st-c-fbbf24: #FBBF24; --st-c-fca5a5: #FCA5A5; } :root[data-theme="light"] { --st-c-34d399: #247B5B; /* #34D399 → 4.63:1 */ --st-c-4a7c59: #4B7759; /* #4A7C59 → 4.61:1 */ --st-c-5b7b8a: #56717E; /* #5B7B8A → 4.63:1 */ --st-c-7bc49a: #3C7956; /* #7BC49A → 4.63:1 */ --st-c-7fb08c: #4D7658; /* #7FB08C → 4.65:1 */ --st-c-86efac: #1B7D3E; /* #86EFAC → 4.64:1 */ --st-c-8fa2ba: #596F8C; /* #8FA2BA → 4.61:1 */ --st-c-99c2aa: #4B765D; /* #99C2AA → 4.65:1 */ --st-c-9a6410: #93631A; /* #9A6410 → 4.65:1 */ --st-c-a9bcd6: #4E6F9C; /* #A9BCD6 → 4.61:1 */ --st-c-b0564f: #9F514B; /* #B0564F → 5.01:1 */ --st-c-b8860b: #8B6813; /* #B8860B → 4.60:1 */ --st-c-c4973a: #85692F; /* #C4973A → 4.63:1 */ --st-c-c97c74: #A64E45; /* #C97C74 → 4.95:1 */ --st-c-c9a08b: #936249; /* #C9A08B → 4.60:1 */ --st-c-c9a26d: #896739; /* #C9A26D → 4.63:1 */ --st-c-d4a94a: #876929; /* #D4A94A → 4.61:1 */ --st-c-d8a93f: #876925; /* #D8A93F → 4.61:1 */ --st-c-e08a7a: #BA4631; /* #E08A7A → 4.69:1 */ --st-c-fbbf24: #8B680E; /* #FBBF24 → 4.60:1 */ --st-c-fca5a5: #DB0E0E; /* #FCA5A5 → 4.61:1 */ } /* ═══════════════════════════════════════════════════════════════════════════ * 12 · OS rgba() COM TRIO LITERAL * * As passadas anteriores trataram hex e cinco trios conhecidos de rgba. Sobraram * 179 escritos na mão — e entre eles estava `rgba(16,16,16,.90)`, que é o fundo * do `.ark-node`: as PÍLULAS DE PRODUTO da home e do /site/arche. Eram * exatamente os "cards arredondados" que o CET apontou nas duas páginas, pretos * dentro da página clara. * * 🔴 A SOMBRA FICOU DE FORA, de propósito. `rgba(0,0,0,α)` em `box-shadow` é * sombra — preta nos dois temas, porque é física e não tema. Invertê-la daria ao * card do tema claro um halo branco. Só entrou o que é FUNDO, BORDA ou variável. * * Cada trio vira um canal com o mesmo matiz do outro lado: o quase-preto * arroxeado do archēFLOW vira creme arroxeado; o véu claro de cada página vira * tinta da mesma família. * ═══════════════════════════════════════════════════════════════════════════ */ :root { --st-r-0-0-0: 0, 0, 0; --st-r-0-2-15: 0, 2, 15; --st-r-1-15-10: 1, 15, 10; --st-r-10-10-12: 10, 10, 12; --st-r-10-12-22: 10, 12, 22; --st-r-10-6-20: 10, 6, 20; --st-r-10-7-0: 10, 7, 0; --st-r-11-18-32: 11, 18, 32; --st-r-12-10-15: 12, 10, 15; --st-r-12-17-27: 12, 17, 27; --st-r-13-20-24: 13, 20, 24; --st-r-14-10-24: 14, 10, 24; --st-r-16-16-16: 16, 16, 16; --st-r-18-19-22: 18, 19, 22; --st-r-18-20-15: 18, 20, 15; --st-r-20-16-28: 20, 16, 28; --st-r-20-17-12: 20, 17, 12; --st-r-20-17-24: 20, 17, 24; --st-r-22-18-12: 22, 18, 12; --st-r-22-19-12: 22, 19, 12; --st-r-22-19-13: 22, 19, 13; --st-r-22-20-16: 22, 20, 16; --st-r-23-16-20: 23, 16, 20; --st-r-232-235-253: 232, 235, 253; --st-r-233-241-251: 233, 241, 251; --st-r-238-240-243: 238, 240, 243; --st-r-238-241-243: 238, 241, 243; --st-r-239-233-248: 239, 233, 248; --st-r-239-240-234: 239, 240, 234; --st-r-24-29-38: 24, 29, 38; --st-r-240-245-255: 240, 245, 255; --st-r-240-253-249: 240, 253, 249; --st-r-242-238-244: 242, 238, 244; --st-r-242-239-239: 242, 239, 239; --st-r-243-237-237: 243, 237, 237; --st-r-243-240-233: 243, 240, 233; --st-r-245-233-212: 245, 233, 212; --st-r-251-246-237: 251, 246, 237; --st-r-6-6-8: 6, 6, 8; --st-r-8-7-10: 8, 7, 10; --st-r-8-8-8: 8, 8, 8; } :root[data-theme="light"] { --st-r-0-0-0: 251, 251, 251; --st-r-0-2-15: 242, 242, 244; --st-r-1-15-10: 241, 244, 243; --st-r-10-10-12: 238, 238, 241; --st-r-10-12-22: 231, 232, 236; --st-r-10-6-20: 236, 235, 239; --st-r-10-7-0: 247, 246, 245; --st-r-11-18-32: 225, 227, 230; --st-r-12-10-15: 237, 236, 239; --st-r-12-17-27: 227, 229, 232; --st-r-13-20-24: 228, 231, 233; --st-r-14-10-24: 232, 230, 235; --st-r-16-16-16: 234, 234, 234; --st-r-18-19-22: 227, 228, 232; --st-r-18-20-15: 232, 234, 230; --st-r-20-16-28: 226, 224, 230; --st-r-20-17-12: 236, 234, 231; --st-r-20-17-24: 228, 226, 231; --st-r-22-18-12: 235, 233, 230; --st-r-22-19-12: 235, 233, 230; --st-r-22-19-13: 234, 233, 230; --st-r-22-20-16: 233, 231, 228; --st-r-23-16-20: 232, 227, 230; --st-r-232-235-253: 68, 73, 106; --st-r-233-241-251: 68, 85, 106; --st-r-238-240-243: 72, 84, 102; --st-r-238-241-243: 72, 90, 102; --st-r-239-233-248: 83, 68, 106; --st-r-239-240-234: 96, 101, 72; --st-r-24-29-38: 213, 216, 221; --st-r-240-245-255: 68, 80, 106; --st-r-240-253-249: 68, 106, 94; --st-r-242-238-244: 93, 68, 105; --st-r-242-239-239: 96, 78, 78; --st-r-243-237-237: 104, 69, 69; --st-r-243-240-233: 106, 94, 68; --st-r-245-233-212: 106, 92, 68; --st-r-251-246-237: 106, 92, 68; --st-r-6-6-8: 242, 242, 245; --st-r-8-7-10: 241, 241, 243; --st-r-8-8-8: 242, 242, 242; } /* ═══════════════════════════════════════════════════════════════════════════ * 13 · AS CORES ESCRITAS NO MARKUP (style inline) * * Todas as passadas anteriores mexeram em CSS. Só que o HTML também pinta — e * style inline VENCE qualquer folha, inclusive esta. Dois casos que o CET achou: * * · o HERO da home é um