/* ============================================================================ RIAWORKS — camada de tema (claro/escuro) ---------------------------------------------------------------------------- Esta folha é a ÚNICA fonte de cor do site. As demais (hero, prova-cta, interna, timeline, artigo, workshop-home, getmodal-shell, rac) consomem token e não escrevem hex. Como funciona: :root → tema ESCURO (a identidade, e o padrão) :root[data-tema="claro"] → tema CLARO (a variação opcional) O escuro é o padrão de quem chega: é a identidade da riaworks e o que o arquipélago 3D da home foi feito para habitar. O claro entra por escolha, no botão do header, e fica gravado. O atributo é escrito no por um script inline no (layout.twig), ANTES do primeiro paint, lendo `localStorage['riaworks-tema']`. Sem isso o claro pisca preto no carregamento. Onde o laranja fica literal: traço, sublinhado, borda e preenchimento com alfa (`rgba(250,93,25,.45)`) NÃO viram token — a marca é a mesma nos dois temas e uma linha laranja translúcida lê bem sobre preto e sobre branco. Só o GLOW difuso (box-shadow, drop-shadow, text-shadow) usa `--brilho-*`, porque luz sobre preto vira mancha suja sobre branco. Regra ao mexer: token novo nasce nos DOIS blocos. Um token declarado só no escuro vaza para dentro do claro e o defeito aparece só na página que ninguém abriu. ============================================================================ */ :root { /* ---------- tipografia (não muda entre temas) ---------- */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --orange: #fa5d19; --orange-solido: #fa5d19; --orange-texto: #fa5d19; --orange-2: #e04e12; --orange-soft: #ff8a4d; --on-orange: #ffffff; --bg-base: #0b0f12; --bg-grad: radial-gradient(120% 100% at 80% 0%, #12191e 0%, #0b0f12 60%); --vinheta: rgba(0, 0, 0, 0.42); --surface-card: #161b1ea3; --surface-painel: #17191c; --surface-drawer: #0d1215; --surface-footer: rgba(11, 15, 18, 0.6); --surface-input: #101215; --surface-chip: rgba(255, 255, 255, 0.045); --surface-tooltip: rgba(19, 21, 23, 0.92); --surface-destaque: linear-gradient(135deg, #1a1410 0%, #131517 55%); --ink: #f4f4f2; --ink-soft: #d8dade; --ink-lead: #c6cad0; --ink-mid: #b3b8be; --ink-dim: #a9adb3; --ink-faint: #5b6066; --ink-chip: #d4d8dc; --line: #2a2d31; --line-card: rgba(46, 50, 54, 0.15); --line-base: rgba(46, 50, 54, 0.35); --line-hair: rgba(46, 50, 54, 0.6); --line-strong: rgba(46, 50, 54, 0.4); --line-chip: rgba(255, 255, 255, 0.09); --malha-larga: rgba(255, 255, 255, 0.028); --malha-fina: rgba(255, 255, 255, 0.011); --overlay: rgba(255, 255, 255, 0.06); --overlay-2: rgba(255, 255, 255, 0.04); --sombra-card: rgba(0, 0, 0, 0.4); --sombra-media: rgba(0, 0, 0, 0.5); --sombra-ilha: rgba(0, 0, 0, 0.55); --sombra-forte: rgba(0, 0, 0, 0.65); --brilho-forte: rgba(250, 93, 25, 0.55); --brilho-medio: rgba(250, 93, 25, 0.35); --brilho-suave: rgba(250, 93, 25, 0.28); --brilho-fraco: rgba(250, 93, 25, 0.12); --brilho-tenue: rgba(250, 93, 25, 0.08); --brilho-max: rgba(250, 93, 25, 0.75); --halo-1: rgba(250, 93, 25, 0.13); --halo-2: rgba(250, 93, 25, 0.05); --brilho-k: 1; --espinha-glow: #ff7a33; --espinha-core: #ff8a45; --espinha-no: #ffc27a; --espinha-brilho: rgba(255, 170, 90, 0.95); --espinha-anel: rgba(255, 160, 80, 0.55); --live: #4ade80; --erro: #e0574f; --erro-ink: #e88a84; --pulso: #ffc49a; --no-apagado: #3c4045; --on-orange-alto: #1a0b04; color-scheme: dark; } :root[data-tema="claro"] { /* ---------- marca ---------- */ /* --orange é o traço da marca (sublinhado, régua, ícone): idêntico nos dois temas, porque é a identidade. --orange-solido e --orange-texto existem porque #fa5d19 sobre branco não passa em AA. */ --orange: #fa5d19; --orange-solido: #d9480f; /* preenchimento de botão: #fff em cima dá 4,6:1 */ --orange-texto: #d9480f; /* link e texto laranja sobre fundo claro: 4,6:1 */ --orange-2: #b83b0b; /* ponta escura do gradiente do botão */ --orange-soft: #ff8a4d; --on-orange: #ffffff; /* ---------- fundo ---------- */ --bg-base: #f6f5f3; /* cor sólida do (evita faixa preta no mobile) */ --bg-grad: radial-gradient(120% 100% at 80% 0%, #ffffff 0%, #f2f0ec 60%); --vinheta: rgba(20, 23, 26, 0.05); /* ---------- superfícies ---------- */ --surface-card: rgba(255, 255, 255, 0.86); /* card translúcido padrão */ --surface-painel: #ffffff; /* folha do artigo */ --surface-drawer: #ffffff; /* menu mobile aberto */ --surface-footer: #f1efeb; --surface-input: #ffffff; --surface-chip: rgba(20, 23, 26, 0.05); --surface-tooltip: rgba(255, 255, 255, 0.96); --surface-destaque: linear-gradient(135deg, #fff6f1 0%, #fbfaf8 55%); /* ---------- tinta ---------- */ --ink: #14171a; --ink-soft: #3e454c; /* corpo longo de artigo */ --ink-lead: #4a5158; /* linha de abertura do artigo */ --ink-mid: #5a6169; /* legenda, sub, parágrafo de card */ --ink-dim: #5a6169; /* nav, texto secundário */ --ink-faint: #6f757c; /* metadado, placeholder, rodapé: 4,6:1 no #f6f5f3 */ --ink-chip: #2c3238; /* ---------- traço ---------- */ --line: #e4e1dc; --line-card: rgba(20, 23, 26, 0.10); --line-base: rgba(20, 23, 26, 0.09); --line-hair: rgba(20, 23, 26, 0.12); --line-strong: rgba(20, 23, 26, 0.16); --line-chip: rgba(20, 23, 26, 0.10); /* ---------- malha de engenharia ---------- */ --malha-larga: rgba(20, 23, 26, 0.045); --malha-fina: rgba(20, 23, 26, 0.018); /* ---------- overlay (código inline, bloco de código) ---------- */ --overlay: rgba(20, 23, 26, 0.055); --overlay-2: rgba(20, 23, 26, 0.035); /* ---------- sombra ---------- */ --sombra-card: rgba(20, 23, 26, 0.10); --sombra-media: rgba(20, 23, 26, 0.13); --sombra-ilha: rgba(20, 23, 26, 0.16); --sombra-forte: rgba(20, 23, 26, 0.20); /* ---------- brilho laranja ---------- No escuro o glow é luz sobre preto e pode ser forte. No claro ele vira mancha suja sobre branco — por isso os alfas caem à metade aqui. */ --brilho-forte: rgba(250, 93, 25, 0.30); --brilho-medio: rgba(250, 93, 25, 0.20); --brilho-suave: rgba(250, 93, 25, 0.16); --brilho-fraco: rgba(250, 93, 25, 0.08); --brilho-tenue: rgba(250, 93, 25, 0.05); --brilho-max: rgba(250, 93, 25, 0.38); --halo-1: rgba(250, 93, 25, 0.10); --halo-2: rgba(250, 93, 25, 0.04); /* multiplicador dos glows one-off da timeline, usados via color-mix(in srgb, var(--orange) calc(N% * var(--brilho-k)), transparent). Um número em vez de 9 tokens quase iguais. */ --brilho-k: 0.55; /* espinha da timeline — o traço luminoso do trilho */ --espinha-glow: #ff7a33; --espinha-core: #d9480f; --espinha-no: #b83b0b; --espinha-brilho: rgba(250, 93, 25, 0.45); --espinha-anel: rgba(217, 72, 15, 0.45); /* ---------- estado ---------- */ --live: #1f9d55; --erro: #c0392f; --erro-ink: #a8322a; --pulso: #c94a10; --no-apagado: #cfcbc4; /* nó da timeline ainda não aceso */ --on-orange-alto: #ffffff; /* tinta sobre preenchimento laranja cheio */ color-scheme: light; } /* ============================================================================ O header do RAC fica escuro mesmo no tema claro ---------------------------------------------------------------------------- A landing do RAC abre com uma foto de hora azul e scrim escuro, e esse hero é escuro nos DOIS temas (decisão de 2026-08-22 — ver rac.css). Um header claro em cima dele ficaria solto, então o header daquela página acompanha o hero. O resto da página segue o tema normalmente, e o rodapé também. O gancho é a classe `pagina-rac` no , declarada pelo próprio rac.twig. O header reencarna os tokens do escuro no próprio escopo, então hero.css continua consumindo token e não sabe de nada. ============================================================================ */ :root[data-tema="claro"] .pagina-rac .site-header { --ink: #f4f4f2; --ink-dim: #a9adb3; --ink-mid: #b3b8be; --orange-solido: #fa5d19; --orange-texto: #fa5d19; --orange-2: #e04e12; --brilho-medio: rgba(250, 93, 25, 0.35); --line: #2a2d31; --line-card: rgba(255, 255, 255, 0.10); --line-hair: rgba(46, 50, 54, 0.6); --line-chip: rgba(255, 255, 255, 0.09); --surface-chip: rgba(255, 255, 255, 0.06); --surface-drawer: #0d1215; --sombra-media: rgba(0, 0, 0, 0.5); color-scheme: dark; /* hero.css não dá fundo ao header (no escuro ele flutua sobre o degradê do body). Aqui ele precisa do seu próprio preto, porque o body é claro. */ background: var(--surface-drawer); } /* ============================================================================ O botão de tema no header ============================================================================ */ .tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--line-card); border-radius: 999px; background: var(--surface-chip); color: var(--ink-dim); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; } .tema-toggle:hover { color: var(--orange-texto); border-color: var(--orange); } .tema-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .tema-toggle svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* mostra o ícone do tema que o clique VAI aplicar: no escuro oferece o sol, no claro oferece a lua. */ .tema-toggle .ic-sol { display: block; } .tema-toggle .ic-lua { display: none; } :root[data-tema="claro"] .tema-toggle .ic-sol { display: none; } :root[data-tema="claro"] .tema-toggle .ic-lua { display: block; } /* No desktop o botão fica entre o menu e o CTA. No mobile ele sai do drawer e encosta ao lado do hambúrguer, para trocar o tema sem abrir o menu. */ .tema-toggle-mobile { display: none; } @media (max-width: 960px) { .nav-drawer .tema-toggle { display: none; } .tema-toggle-mobile { display: inline-flex; margin-left: auto; } .tema-toggle-mobile + .nav-toggle { margin-left: 0.4rem; } } /* Enquanto o tema troca, congela as transições de cor por um instante: sem isso cada elemento com `transition: color` anima em ritmo próprio e a página pisca em cascata. Removido pelo tema.js no frame seguinte. */ .tema-trocando, .tema-trocando * { transition: none !important; }