/* ============================================================================ sagazlab.io — CAMADA DE MARCA v2.0 ADR-032 · criada 2026-08-08 · reescrita 2026-08-08 (2ª rodada) ---------------------------------------------------------------------------- Camada de sobreposição. Carregar SEMPRE DEPOIS de styles-v3.css. Remapeia os tokens que o styles-v3.css já define para a Identidade Visual v2.0, nos DOIS temas. ── O QUE MUDOU DA 1ª PARA A 2ª RODADA ──────────────────────────────────── A 1ª versão só remapeava `:root`. Mas o styles-v3.css define um bloco `[data-theme="light"]` completo (linha ~2380) e o script.js entrega `preferredTheme = savedTheme || 'light'`. Ou seja: **o site é claro por padrão**, e `[data-theme="light"]` vence `:root` por especificidade. Resultado: a visão que o visitante via continuava azul e teal. Esta versão remapeia os dois temas, e o claro é o que casa com o mídia kit. ── CORREÇÃO DE CONTRASTE SOBRE O GUIA ──────────────────────────────────── A tabela da seção 07 do guia afirma "Vermelhão sobre papel — 4.6:1 · AA". Medido: **3,55:1**. O guia está errado nessa linha. Consequências reais: · texto em #E8431F sobre papel REPROVA AA em corpo (precisa de 4,5:1); · passa só como texto grande (≥24px regular / ≥18,66px bold — limiar 3:1); · papel sobre botão #E8431F também dá 3,55:1 → o botão primário do próprio guia reprova. Por isso o token de acento no tema claro é **#C0341A** (vermelhão queimado): 4,97:1 sobre papel e 5,60:1 sobre branco, nos dois sentidos. O #E8431F puro fica reservado a display grande e a bloco gráfico, onde 3:1 basta. No tema escuro nada disso se aplica: #FF5A33 sobre tinta dá 5,97:1. (Medições em `05-scripts/` — refazer com qualquer calculadora WCAG.) Reverter = remover o . Nada foi apagado do styles-v3.css. ⚠️ NÃO PUBLICADO. Deploy exige o checklist do ADR-017. ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ TEMA ESCURO — o `[data-theme="dark"]` do guia ════════════════════════════════════════════════════════════════════════════ */ :root { --bg-void: #0F1417; --bg-primary: #0F1417; --bg-card: #171E22; --bg-card-2: #1D262B; --bg-surface: #171E22; --teal: #FF5A33; /* 5,97:1 sobre tinta — AA inclusive em corpo */ --teal-dim: #E8431F; --teal-glow: transparent; --pink: #FF5A33; --yellow: #FF7A4D; --text-primary: #F4F1EC; --text-secondary: #9AA3AE; --text-muted: #838C97; --border: #2A3238; --border-hover: #3A444B; --border-teal: #FF5A33; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0; --r-pill: 0; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-teal: none; /* aliases legados — o styles-v3.css declara TRÊS conjuntos de tokens */ --home-bg: #0F1417; --home-bg-soft: #171E22; --home-surface: #171E22; --home-surface-alt: #1D262B; --home-ink: #F4F1EC; --home-muted: #9AA3AE; --home-border: #2A3238; --home-primary: #FF5A33; --home-primary-strong: #E8431F; --home-accent: #FF5A33; --home-success: #9AA3AE; --home-warning: #FF7A4D; --home-radius-sm: 0; --home-radius-md: 0; --home-radius-lg: 0; --color-bg: #0F1417; --color-bg-card: #171E22; --color-bg-card-2: #1D262B; --color-teal: #FF5A33; --color-neon-cyan: #FF5A33; --color-pink: #FF5A33; --color-text-primary: #F4F1EC; --color-text-secondary: #9AA3AE; --color-border: #2A3238; --color-border-hover: #3A444B; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; } /* ════════════════════════════════════════════════════════════════════════════ TEMA CLARO — o `:root` canônico do guia. É ESTE o padrão do site, e é este que espelha o mídia kit. ════════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-void: #F4F1EC; /* papel */ --bg-primary: #EDE9E1; /* papel um passo abaixo, p/ ritmo entre seções */ --bg-card: #FFFFFF; /* superfície do guia */ --bg-card-2: #FAF8F4; --bg-surface: #FFFFFF; --teal: #C0341A; /* vermelhão-texto · 4,97:1 papel · 5,60:1 branco */ --teal-dim: #A62B12; --teal-glow: transparent; --pink: #C0341A; /* o 2º e o 3º acento colapsam: duas cores mandam */ --yellow: #C0341A; --text-primary: #0F1417; /* tinta · 16,46:1 sobre papel · AAA */ --text-secondary: #4A525B; /* 7,04:1 · AA */ --text-muted: #5C646E; /* 5,32:1 · AA */ --border: #DDD8CF; --border-hover: #C6BFB2; --border-teal: #C0341A; --home-bg: #F4F1EC; --home-bg-soft: #EDE9E1; --home-surface: #FFFFFF; --home-surface-alt: #FAF8F4; --home-ink: #0F1417; --home-muted: #4A525B; --home-border: #DDD8CF; --home-primary: #C0341A; --home-primary-strong: #A62B12; --home-accent: #C0341A; --home-success: #4A525B; --home-warning: #C0341A; --color-bg: #F4F1EC; --color-bg-card: #FFFFFF; --color-bg-card-2: #FAF8F4; --color-teal: #C0341A; --color-neon-cyan: #C0341A; --color-pink: #C0341A; --color-text-primary: #0F1417; --color-text-secondary: #4A525B; --color-border: #DDD8CF; --color-border-hover: #C6BFB2; } /* ── Tipografia ───────────────────────────────────────────────────────────── Chakra Petch e Instrument Serif saem. Archivo assume display e corpo; IBM Plex Mono fica onde já era rótulo, número ou código. -------------------------------------------------------------------------- */ body, button, input, textarea, select { font-family: "Archivo", sans-serif; } /* Títulos com !important: o styles-v3.css estiliza h1/h2 (blog, cases) com seletor mais específico em Chakra Petch, que vence pela especificidade e não pela ordem de carga. Sem isto, só a home (que tem home-v2.css) migra. */ h1, h2, h3, h4, h5, h6, .hero-v2-title, .section-title, .nav-name { font-family: "Archivo", sans-serif !important; } h1, h2, h3, .hero-v2-title, .section-title { letter-spacing: -0.035em; } /* o hero usava um itálico serifado — o guia não tem serifa */ .hero-serif { font-family: "Archivo", sans-serif; font-style: normal; font-weight: 800; } body { line-height: 1.55; } /* Remap das variáveis de fonte do styles-v3. Headings e corpo do blog/cases usam var(--font-display)/var(--font-body); sem remapear a variável, .post-title e .article-title continuam em Chakra Petch (a especificidade da classe vence o seletor de elemento acima). Definido nos três níveis para bater a especificidade do styles-v3 em qualquer tema. O guia não tem serifa → --font-serif vira Archivo. */ :root, [data-theme="light"], [data-theme="dark"] { --font-display: "Archivo", sans-serif; --font-body: "Archivo", sans-serif; --font-serif: "Archivo", sans-serif; } /* ── Forma: raio 0, sem sombra ────────────────────────────────────────────── O styles-v3.css tem 61 `border-radius` e 32 `box-shadow` escritos direto na regra, sem passar por token. Estes blocos alcançam todos de uma vez — e são o que torna a reversão trivial. -------------------------------------------------------------------------- */ *, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; } /* o foco visível continua obrigatório (ADR-016) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #C0341A !important; outline-offset: 2px !important; } :root a:focus-visible, :root button:focus-visible { outline-color: #FF5A33 !important; } [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible { outline-color: #C0341A !important; } /* ── Fundos escritos direto na regra ──────────────────────────────────────── No escuro, o `body` monta um "aurora" com 3 radiais teal/pink + 1 linear azul-noite. No claro, o `.hero-v2` monta um gradiente lilás e o `.footer` fixa #e0e6f5. Nenhum passa por token. -------------------------------------------------------------------------- */ body { background-image: none; } :root body { background-color: #0F1417; color: #F4F1EC; } [data-theme="light"] body { background-color: #F4F1EC; color: #0F1417; } /* textura de grade → módulo de 32px do guia */ body::before { background-image: linear-gradient(rgba(244, 241, 236, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 236, 0.028) 1px, transparent 1px); background-size: 32px 32px; } [data-theme="light"] body::before { background-image: linear-gradient(rgba(15, 20, 23, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 20, 23, 0.045) 1px, transparent 1px); background-size: 32px 32px; } /* tira do topo → régua chapada em vermelhão */ body::after { background: #FF5A33; opacity: 1; } [data-theme="light"] body::after { background: #C0341A; } [data-theme="light"] .nav { background: rgba(244, 241, 236, 0.92); } [data-theme="light"] .hero-v2 { background: #F4F1EC; background-image: none; } [data-theme="light"] .footer { background: #EDE9E1; } [data-theme="light"] .ops-panel, [data-theme="light"] .ops-card { background: #FFFFFF; } /* ── Botões ───────────────────────────────────────────────────────────────── .btn-primary e .floating-cta fixam `color:#05101e` (azul-noite). Trocado por papel/tinta conforme o tema — e o vermelhão queimado do tema claro é justamente o que faz o par passar em AA (4,97:1 em vez de 3,55:1). -------------------------------------------------------------------------- */ .btn-primary, .floating-cta { background: #FF5A33; border-color: #FF5A33; color: #0F1417; } .btn-primary:hover, .floating-cta:hover { background: #FF7A4D; border-color: #FF7A4D; color: #0F1417; } [data-theme="light"] .btn-primary, [data-theme="light"] .floating-cta { background: #C0341A; border-color: #C0341A; color: #F4F1EC; } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .floating-cta:hover { background: #A62B12; border-color: #A62B12; color: #F4F1EC; } /* ── Marca no cabeçalho ───────────────────────────────────────────────────── O `.nav-logo` era o texto "S//". Vira o símbolo do guia. -------------------------------------------------------------------------- */ .nav-logo-mark { height: 26px; width: auto; flex: none; } .nav-brand { display: inline-flex; align-items: center; gap: 10px; } .nav-name { font-weight: 800; letter-spacing: -0.035em; } /* duas versões do símbolo, uma por tema — o duotone em tinta some no escuro */ .nav-logo-duo { display: none; } .nav-logo-rev { display: block; } [data-theme="light"] .nav-logo-duo { display: block; } [data-theme="light"] .nav-logo-rev { display: none; } /* o símbolo completo não sobrevive abaixo de 40px (seção 04 do guia). Em tela estreita o cabeçalho cai para o favicon, que é o S em bloco. */ @media (max-width: 420px) { .nav-logo-mark { height: 22px; } } /* ── Ficha técnica (fact sheet do mídia kit) ──────────────────────────────── */ .factsheet { margin: 0; display: grid; grid-template-columns: 1fr; } .factsheet > div { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); font-size: 0.95rem; } .factsheet > div:last-child { border-bottom: 1px solid var(--border); } .factsheet dt { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } .factsheet dd { margin: 0; color: var(--text-primary); } .factsheet dd a { color: var(--teal); text-decoration: underline; } @media (max-width: 560px) { .factsheet > div { grid-template-columns: 1fr; gap: 4px; } } /* ============================================================================ VAZAMENTOS CONHECIDOS — o que esta camada NÃO alcança ---------------------------------------------------------------------------- Medido em 08/08/2026 sobre styles-v3.css, fora dos blocos de token: 43 ocorrências de cor escrita direto na regra. As de fundo e de botão foram cobertas acima. Ficaram os estados — #ff6b6b (erro), #ffd166 (aviso), #00d68f (sucesso) — de propósito: o guia v2 não define paleta semântica de estado, e inventar uma aqui seria decisão de design sem respaldo. Falta uma passada visual no navegador. Nenhuma medição de contraste substitui abrir a página. ============================================================================ */