/* * Tokens do site institucional — os mesmos da plataforma (ADR 0003). * * Copiados de `apps/web/src/design/tokens.ts` de propósito: o site é estático e * não pode importar TypeScript. Quando a direção for escolhida, o vencedor passa * a ler os tokens de um pacote compartilhado (`packages/ui` da §5.5) — manter * duas cópias vivas é como a paleta desanda. * * Cada conceito escolhe seu esquema com `data-scheme="dark"` ou `"light"` no * ``; nenhum conceito inventa cor fora desta lista. */ :root, [data-scheme="light"] { --z-bg: #f2f2f7; --z-surface: #ffffff; --z-elev: #fafafc; --z-overlay: #f4f4f9; --z-text: #101018; --z-text2: #474757; --z-muted: #676777; --z-border: #e3e3ea; --z-border-strong: #c6c6d3; --z-accent: #6d28d9; --z-accent-text: #ffffff; --z-accent-soft: #5b21b6; --z-focus: #0e7490; --z-critical: #c01c3c; --z-high: #9c4a09; --z-medium: #7d6200; --z-low: #1d6aa8; --z-ok: #0c6b48; --z-grid: #eaeaf1; --z-s1: #2a78d6; --z-s2: #eb6834; --z-s3: #1baf7a; --z-s4: #eda100; } [data-scheme="dark"] { --z-bg: #08080b; --z-surface: #0e0e13; --z-elev: #15151d; --z-overlay: #1b1b25; --z-text: #ececf3; --z-text2: #a5a5b8; --z-muted: #9090a1; --z-border: #20202b; --z-border-strong: #2e2e3d; --z-accent: #947acf; --z-accent-text: #08080b; --z-accent-soft: #b9a4e4; --z-focus: #22d3ee; --z-critical: #ff4d6a; --z-high: #ff9245; --z-medium: #ffd23f; --z-low: #38bdf8; --z-ok: #34d399; --z-grid: #191922; --z-s1: #3987e5; --z-s2: #d95926; --z-s3: #199e70; --z-s4: #c98500; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--z-bg); color: var(--z-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .display { font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .num { font-variant-numeric: tabular-nums; } a { color: inherit; } img, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--z-focus); outline-offset: 2px; } /* Toda animação desta pasta respeita a preferência do sistema (§7). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---- utilitários mínimos, compartilhados pelos dez conceitos ---- */ .wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .wrap-narrow { width: min(760px, calc(100% - 48px)); margin-inline: auto; } .eyebrow { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--z-muted); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 4px; border: 1px solid var(--z-border-strong); color: var(--z-text); text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.15s, background 0.15s; } .btn:hover { border-color: var(--z-accent); } /* * `.btn.btn-primary` e não `.btn-primary`: a barra de navegação de vários * conceitos estiliza `.nav a`, que tem especificidade (0,1,1) e vencia * `.btn-primary` (0,1,0). O botão ficava com texto secundário sobre fundo de * acento — reprovado por contraste em cinco das dez páginas. Duas classes * empatam em (0,2,0) e resolvem sem `!important`. */ .btn.btn-primary, a.btn.btn-primary { background: var(--z-accent); border-color: var(--z-accent); color: var(--z-accent-text); } .btn.btn-primary:hover { background: var(--z-accent-soft); border-color: var(--z-accent-soft); } .card { background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 4px; padding: 22px; } .sev { display: inline-flex; gap: 2px; vertical-align: middle; } .sev i { width: 4px; height: 12px; background: var(--z-border-strong); display: block; } .sev.c i:nth-child(-n+4) { background: var(--z-critical); } .sev.a i:nth-child(-n+3) { background: var(--z-high); } .sev.m i:nth-child(-n+2) { background: var(--z-medium); } .sev.b i:nth-child(-n+1) { background: var(--z-low); } footer.site { border-top: 1px solid var(--z-border); padding: 40px 0; color: var(--z-muted); font-size: 13px; } /* `--z-muted` já é o piso de contraste do tema; reduzir opacidade em cima dele derruba abaixo de 4.5:1. Se precisar de hierarquia aqui, use tamanho. */ footer.site [style*="opacity"] { opacity: 1 !important; } /* --------------------------------------------------------------- celular * * As barras de navegação dos conceitos são `display:flex` com altura fixa e sem * quebra — em 390 px elas empurravam a página inteira e produziam até 175 px de * rolagem horizontal. O reparo mora aqui porque o defeito era o mesmo em seis * das dez direções; corrigir arquivo a arquivo seria consertar o sintoma seis * vezes. Cada conceito continua livre para sobrescrever. */ @media (max-width: 780px) { .nav .wrap, .topbar .wrap, .bar .wrap-narrow, .topnav, header.top { flex-wrap: wrap; height: auto; row-gap: 10px; padding-top: 12px; padding-bottom: 12px; } .nav .right, .topbar nav, header.top nav { margin-left: 0; flex-wrap: wrap; } /* Tabela larga rola dentro do próprio bloco em vez de esticar a página. */ table { display: block; overflow-x: auto; max-width: 100%; } /* URL longa, comando e nome de host não podem furar o contêiner. */ body { overflow-wrap: anywhere; } }