/* dna-tema-escuro.css — a mesma página, na paleta das artes da Bianca * (dourado sobre roxo profundo). Ativa com * ou abrindo a página com ?tema=escuro. * * NÃO é um swap de token puro, e o motivo importa: dois tokens do * dna-brand.css acumulam DOIS papéis cada — * --brand-alabaster = fundo da página E texto sobre escuro * --brand-obsidian = texto da página E fundo das seções escuras * Inverter só os valores conserta um papel e quebra o outro (texto sumindo * no fundo). Então: inverte-se o token pelo papel DOMINANTE e sobrescreve-se * explicitamente o papel minoritário, logo abaixo. */ html.tema-escuro { /* papel dominante: FUNDO da página */ --brand-alabaster: #150F28; --brand-alabaster-rgb: 21 15 40; /* papel dominante: TEXTO */ --brand-obsidian: #F2EADB; --brand-obsidian-rgb: 242 234 219; /* superfícies que eram claras */ --brand-cream: #1B1332; --brand-cream-rgb: 27 19 50; --brand-ice: #241A40; --brand-ice-rgb: 36 26 64; /* acentos: clareados para manter contraste sobre roxo profundo */ --brand-violet: #A98CE0; --brand-violet-rgb: 169 140 224; --brand-blue: #86AECB; --brand-blue-rgb: 134 174 203; /* o dourado é dela — fica idêntico */ --tb-deep: #0B0716; /* fundo das seções que já eram as mais escuras */ --tb-card: #221A3C; /* superfície de card */ --tb-ink: #F2EADB; /* tinta sobre escuro */ /* lida pelo dna-scroll.gen.js: o estado "rolado" do header é escrito inline com !important, então CSS puro não alcança — só esta var entra lá. */ --hdr-rolado: rgba(21, 15, 40, 0.86); } html.tema-escuro body { background-color: var(--brand-alabaster); } /* ── papel minoritário 1: alabaster como TINTA (dentro das seções escuras) ── */ html.tema-escuro .text-\[\#FCFCFD\] { color: var(--tb-ink) } html.tema-escuro .text-\[\#FCFCFD\]\/60 { color: rgb(242 234 219 / .6) } html.tema-escuro .text-\[\#FCFCFD\]\/40 { color: rgb(242 234 219 / .4) } html.tema-escuro .text-\[\#FCFCFD\]\/30 { color: rgb(242 234 219 / .3) } html.tema-escuro .hover\:text-\[\#FCFCFD\]:hover { color: var(--tb-ink) } /* ── papel minoritário 2: obsidian como FUNDO/scrim ── */ html.tema-escuro .bg-\[\#1A1F2B\] { background-color: var(--tb-deep) } html.tema-escuro .hover\:bg-\[\#1A1F2B\]\/90:hover { background-color: #2E2356 } html.tema-escuro .from-\[\#1A1F2B\]\/50 { --tw-gradient-from: rgb(11 7 22 / .75) var(--tw-gradient-from-position); --tw-gradient-to: rgb(11 7 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } html.tema-escuro .via-\[\#1A1F2B\]\/10 { --tw-gradient-to: rgb(11 7 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(11 7 22 / .35) var(--tw-gradient-via-position), var(--tw-gradient-to); } /* ── superfícies brancas literais (não passaram pela tokenização) ── */ html.tema-escuro .bg-white { background-color: var(--tb-card) } html.tema-escuro .bg-white\/80 { background-color: rgb(34 26 60 / .82) } html.tema-escuro .bg-white\/50 { background-color: rgb(34 26 60 / .55) } html.tema-escuro .bg-white\/40 { background-color: rgb(34 26 60 / .45) } html.tema-escuro .border-white { border-color: rgb(242 234 219 / .14) } /* ── o CTA do topo era quase-preto sobre quase-preto: vira dourado ── */ html.tema-escuro header .bg-\[\#1A1F2B\], html.tema-escuro nav .bg-\[\#1A1F2B\], html.tema-escuro .fixed .bg-\[\#1A1F2B\] { background-color: var(--brand-gold) } html.tema-escuro .fixed .bg-\[\#1A1F2B\] .text-\[\#FCFCFD\], html.tema-escuro .fixed .bg-\[\#1A1F2B\] { color: #1A1206 } html.tema-escuro .fixed .hover\:bg-\[\#1A1F2B\]\/90:hover { background-color: #E8C24A } /* ── fotografia: as 4 imagens são de chave alta e viravam retângulo de luz ── */ html.tema-escuro img { filter: brightness(.55) saturate(1.12) contrast(1.06) } /* a foto da Bianca é o rosto da página: escurece menos que as outras */ html.tema-escuro img[src$="bianca.webp"] { filter: brightness(.92) saturate(1.02) } /* ── o glow dourado dos orbes rende muito mais sobre roxo ── */ html.tema-escuro .animate-breathe { opacity: .16 !important } /* a arte dos chakras é da própria Bianca e JÁ é escura — escurecer de novo apagava os yantras. Fica no brilho original, como a foto dela. */ html.tema-escuro img[src$="chakras-arte.jpg"] { filter: none } /* ═══════════════════════════════════════════════════════════════════════ TINTA ESCURA — acrescentado em 07/08 depois que a prova de contraste (_provacontraste.mjs) achou 50 elementos com razão ~1,07 neste tema. O tema mapeava as SUPERFÍCIES (bg-white e derivados viram --tb-card) mas esqueceu a TINTA: as 98 ocorrências de text-[#1A1F2B] continuavam escuras sobre fundo agora escuro. Resultado visível em _previa/escuro-metodo.png: "Aterramento e segurança" e a nav inteira sumiam. Passou despercebido por sessões porque ninguém tinha OLHADO o tema escuro com atenção — o gate de build era verde e o accordion abria normalmente. Comportamento certo e página ilegível não se excluem. Alfas escolhidos para ficar acima de 4,5:1 sobre --tb-card (#221A3C), não copiados dos do tema claro. ═══════════════════════════════════════════════════════════════════════ */ html.tema-escuro .text-\[\#1A1F2B\] { color: var(--tb-ink) } html.tema-escuro .text-\[\#1A1F2B\]\/80 { color: rgb(242 234 219 / .88) } html.tema-escuro .text-\[\#1A1F2B\]\/70 { color: rgb(242 234 219 / .82) } html.tema-escuro .text-\[\#1A1F2B\]\/60 { color: rgb(242 234 219 / .76) } html.tema-escuro .text-\[\#1A1F2B\]\/50 { color: rgb(242 234 219 / .70) } html.tema-escuro .text-\[\#1A1F2B\]\/40 { color: rgb(242 234 219 / .64) } html.tema-escuro .text-\[\#1A1F2B\]\/30 { color: rgb(242 234 219 / .60) } html.tema-escuro .hover\:text-\[\#1A1F2B\]:hover { color: var(--tb-ink) } /* o preço riscado e o "de R$" ficavam esmaecidos demais sobre o card escuro */ html.tema-escuro .line-through { color: rgb(242 234 219 / .62) }