/* TESTE DE TEMA ESCURO DA SEÇÃO DO DIA (09/09/2026). A .dia-section é hoje uma ilha branca num site de corpo preto: a .team-section acima dela é transparente sobre esse preto, e a emenda que se vê na entrada da seção é justamente a troca de papel. Esta folha inverte o papel da seção SEM editar nenhuma das seis folhas que a desenham — tudo aqui está escopado em .dia-section.dia-escura, e a classe a mais é o que dá a especificidade que vence o dia-visual.css em toda regra equivalente. O arquivo carrega por último, depois dele. A RÉGUA É O RATIO, NÃO O TOM. Cada tinta escura foi escolhida para medir sobre o preto o mesmo contraste que a tinta clara mede sobre o branco (WCAG 2.x), então a hierarquia da seção atravessa inteira para o outro lado: tinta primária #0c0c0d 19,55:1 -> #f5f5f7 19,29:1 tinta secundária #626268 6,06:1 -> #8a8a8f 6,11:1 headline da intro #73737a 4,71:1 -> #78787e 4,79:1 hora do cartão #515158 7,87:1 -> #a1a1a6 8,16:1 marco #707077 4,91:1 -> #7a7a80 4,92:1 bolinha da estação #cfcfd4 1,55:1 -> #303036 1,60:1 bolinha já passada #a2a2aa 2,53:1 -> #505056 2,62:1 placeholder da foto #ededee 1,17:1 -> #1c1c1f 1,24:1 Os dois valores de texto que mais aparecem não são invenção desta folha: o #f5f5f7 é o --gd-tinta e o #a1a1a6 é o --gd-t2 da seção de gráficos, que já mora no preto — a casa já tinha essas duas tintas medidas. METADE DO TRABALHO É TOKEN, METADE É LITERAL. O style.css pinta o fundo da seção, o fundo do trilho do celular e o halo de 4px da bola com var(--dia-branco), e escreve títulos, corpo, ponteiro e marco atual com var(--dia-tinta) e var(--dia-tinta-2): trocar os quatro tokens no bloco base já vira tudo isso de uma vez, sem uma regra sequer. O que sobra é o que o dia-visual.css, o dia-mobile.css e o dia-trilho.css cravam em cinza LITERAL — headline, hora, marcos, bolinhas, placeholder da foto e o halo da bola —, e cinza literal token nenhum alcança: cada um precisa de uma regra à altura, uma para uma, dentro dos mesmos media dos originais. É por isso que o --dia-tinta-2 e o --dia-fio estão declarados aqui embaixo mesmo já existindo no style.css: o dia-visual.css os redefine em .dia-section, e só a classe dupla passa por cima. UMA COISA SAIU DA COLUNA DO LITERAL (09/09/2026): a linha do trilho do celular. Ela passou a se preencher atrás da bolinha, e para o gradiente não ter de ser reescrito de um lado e do outro o dia-mobile.css o desenha entre duas variáveis novas (--dia-trilho-fio e --dia-trilho-cheio). Esta folha troca só as duas, no bloco de celular lá embaixo — token, não regra. PARA REVERTER, DUAS LINHAS NO index.html: tirar a classe dia-escura da
, tirar o desta folha do e DEVOLVER o data-header="claro" à seção. O atributo saiu porque ele é o interruptor que deixa o header de vidro claro com tinta escura sobre fundo claro; sobre a seção preta esse é o estado errado, e sem o atributo o header segue escuro aqui e religa sozinho na .mostra-section, que também é marcada. Nenhum arquivo da seção foi tocado, então a volta é literal. */ .dia-section.dia-escura { --dia-branco: #000000; --dia-tinta: #f5f5f7; --dia-tinta-2: #8a8a8f; --dia-fio: rgba(255, 255, 255, 0.12); } .dia-section.dia-escura .dia-intro .dia-headline { color: #78787e; } .dia-section.dia-escura .dia-foto { background: #1c1c1f; } .dia-section.dia-escura .dia-agua { color: rgba(255, 255, 255, 0.08); } @media (min-width: 961px) { .dia-section.dia-escura .dia-texto-card > .dia-hora { color: #a1a1a6; } .dia-section.dia-escura .dia-trilho > .dia-marco { color: #7a7a80; } .dia-section.dia-escura .dia-trilho > .dia-marco::after { background: #303036; } .dia-section.dia-escura .dia-trilho > .dia-marco.is-passed::after { background: #505056; } /* O HORÁRIO ATUAL PRECISA SER REESCRITO AQUI (09/09/2026). Quem o destaca é o dia-visual.css, casando o [data-ato] da seção com o do marco: são (0,4,0), o MESMO peso da regra de marco que abre este bloco — e como esta folha carrega depois, o empate se resolvia pela ordem e apagava o horário do ar junto com os outros quatro. A classe dupla leva o destaque a (0,5,0) e devolve a tinta primária a quem está no ar. */ .dia-section.dia-escura[data-ato="1"] .dia-marco[data-ato="1"], .dia-section.dia-escura[data-ato="2"] .dia-marco[data-ato="2"], .dia-section.dia-escura[data-ato="3"] .dia-marco[data-ato="3"], .dia-section.dia-escura[data-ato="4"] .dia-marco[data-ato="4"], .dia-section.dia-escura[data-ato="5"] .dia-marco[data-ato="5"] { color: var(--dia-tinta); } /* O halo separa a bola da linha; o papel mudou, o halo acompanha. */ .dia-section.dia-escura .dia-trilho::after { box-shadow: 0 0 0 3px #000; } } /* A mesma lista de media do dia-textos.css: quem dá cor à hora do cartão também no desktop com movimento reduzido é aquele bloco. */ @media (max-width: 960px), (prefers-reduced-motion: reduce) { .dia-section.dia-escura .dia-cartao > .dia-hora { color: #a1a1a6; } } @media (max-width: 960px) { .dia-section.dia-escura .dia-mobile-copy > p { color: var(--dia-tinta-2); } /* O TRILHO DO CELULAR VOLTOU AO DESENHO DE LINHA + BOLINHAS (09/09/2026), e com ele mudaram os cinzas que o escuro tem de vencer: agora são os do dia-mobile.css, não os da régua de tiques que o dia-visual.css punha por cima. A régua continua sendo o ratio. E A LINHA PASSOU A SE PREENCHER ATRÁS DA BOLINHA (09/09/2026, segunda passada do dia, junto com a morte do scroll travado do celular). Isso mudou o que esta folha tem de fazer aqui: AQUI NÃO HÁ MAIS REGRA DE ::before. O dia-mobile.css desenha o fio num gradiente duro entre duas variáveis — --dia-trilho-fio para o trecho que ainda vem e --dia-trilho-cheio para o que já passou —, e o escuro troca SÓ as duas. Uma regra a menos, e nenhum risco de o claro ganhar um desenho de linha que o escuro não acompanhe. OS DOIS PARES, pela régua de sempre: fio da linha #e0e0e5 1,31:1 -> rgba(255,255,255,0.12) ~1,3:1 o --dia-fio desta folha já faz esse papel de fio no resto da seção, então o token é literalmente o mesmo valor. trecho vivido #707077 4,91:1 -> #7a7a80 4,92:1 é o par "marco" do cabeçalho — o cinza que o dia-visual.css dá ao rótulo do trilho no desktop. O preenchimento é forte de propósito (ver a nota do dia-mobile.css): num fio de 1px é o degrau que faz o trecho já vivido ler à distância de um braço. */ .dia-section.dia-escura { --dia-trilho-fio: var(--dia-fio); --dia-trilho-cheio: #7a7a80; } /* O rótulo base do celular é #73737a, 4,71:1 — o MESMO cinza da headline da intro, então o escuro repete o par dela: #78787e, 4,79:1. */ .dia-section.dia-escura .dia-trilho > .dia-marco { color: #78787e; } /* As bolinhas das estações são #cfcfd4, as mesmas do trilho vertical do desktop: 1,55:1 -> 1,60:1, o mesmo par do bloco de cima. */ .dia-section.dia-escura .dia-trilho > .dia-marco::after { background: #303036; } /* A ESTAÇÃO JÁ CRUZADA PELA BOLINHA ESCURECE TAMBÉM NO CELULAR (09/09/2026). A classe is-passed era só do trilho vertical do desktop e agora o dia-mobile.js a escreve nos cinco trilhos clonados; o par é o "bolinha já passada" do cabeçalho, #a2a2aa 2,53:1 -> #505056 2,62:1, o MESMO que o bloco de min-width:961px logo acima já usa. E ELA PRECISA DE REGRA PRÓPRIA AQUI PELO MOTIVO DE SEMPRE: a regra de bolinha logo acima é (0,4,1) e a de is-passed do dia-mobile.css é (0,3,1) — sem esta linha, o escuro apagaria a marca de passagem em vez de traduzi-la. A classe dupla leva o desempate a (0,5,1). */ .dia-section.dia-escura .dia-trilho > .dia-marco.is-passed::after { background: #505056; } /* Mesmo empate de (0,4,0) do desktop, mesma saída: no celular quem marca a hora do ar é a classe do dia-mobile.js, e a classe dupla a repete em (0,5,0) para o rótulo atual voltar à tinta primária. */ .dia-section.dia-escura .dia-trilho > .dia-marco.is-mobile-current { color: var(--dia-tinta); } }