/* ============================================================ AZ Docs — base.css Fundação compartilhada por todas as abas: reset, tokens de cor/escala, tipografia e os componentes que aparecem em mais de uma página (callouts, tabelas, selos de severidade). Componentes exclusivos de uma aba ficam no CSS dela. ============================================================ */ /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } img, video { max-width: 100%; height: auto; } /* ── Tokens (tema claro = padrão) ────────────────────────── */ :root { --ground: #DFE4EA; --ground-2: #EAEEF2; --surface: #FFFFFF; --surface-alt: #F4F6F9; --ink: #12181D; --ink-soft: #3C4750; --ink-muted: #64727D; --rule: #D2DAE1; --rule-soft: #E3E9ED; --accent: #D14A16; --accent-ink: #A93A0F; --accent-wash: #FBEDE6; --sev-high: #A4231C; --sev-high-bg: #F8E7E5; --sev-mid: #96590A; --sev-mid-bg: #FAF0DE; --sev-low: #1B6247; --sev-low-bg: #E4F0EA; --shadow: 0 1px 2px rgba(18, 24, 29, .05), 0 8px 24px -12px rgba(18, 24, 29, .14); --measure: 68ch; --step--1: clamp(.80rem, .78rem + .10vw, .86rem); --step-0: clamp(1rem, .97rem + .16vw, 1.09rem); --step-1: clamp(1.18rem, 1.12rem + .30vw, 1.38rem); --step-2: clamp(1.45rem, 1.32rem + .62vw, 1.90rem); --step-3: clamp(1.90rem, 1.62rem + 1.35vw, 2.90rem); --font-sans: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: Roboto, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Sistema em modo escuro (nenhum data-theme cravado no ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #070B0E; --ground-2: #10171D; --surface: #121A20; --surface-alt: #18222A; --ink: #E8EDF1; --ink-soft: #BDC8D1; --ink-muted: #8B99A4; --rule: #2C3942; --rule-soft: #232E36; --accent: #F0783E; --accent-ink: #F79461; --accent-wash: #2A1A12; --sev-high: #F08A82; --sev-high-bg: #2E1715; --sev-mid: #E0AE5C; --sev-mid-bg: #2A2013; --sev-low: #6DC3A0; --sev-low-bg: #12261E; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7); } } /* Escolha explícita do leitor vence a preferência do sistema. */ :root[data-theme="dark"] { --ground: #070B0E; --ground-2: #10171D; --surface: #121A20; --surface-alt: #18222A; --ink: #E8EDF1; --ink-soft: #BDC8D1; --ink-muted: #8B99A4; --rule: #2C3942; --rule-soft: #232E36; --accent: #F0783E; --accent-ink: #F79461; --accent-wash: #2A1A12; --sev-high: #F08A82; --sev-high-bg: #2E1715; --sev-mid: #E0AE5C; --sev-mid-bg: #2A2013; --sev-low: #6DC3A0; --sev-low-bg: #12261E; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7); } /* ── Página ──────────────────────────────────────────────── */ body { margin: 0; background: var(--ground); background-image: linear-gradient(180deg, var(--ground-2) 0%, var(--ground) 60%); background-repeat: no-repeat; min-height: 100vh; color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wrap { max-width: 78rem; margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 3.5rem) clamp(1.1rem, .6rem + 2vw, 2.5rem) 6rem; } /* ── Cabeçalho da página ─────────────────────────────────── */ .masthead { display: grid; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--ink); margin-bottom: 2.75rem; } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0; } h1 { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-3); line-height: 1.06; letter-spacing: -.015em; text-wrap: balance; margin: 0; } .standfirst { max-width: var(--measure); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; margin: 0; } .meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); margin: 0; padding: 0; list-style: none; } .meta b { color: var(--ink-soft); font-weight: 500; } /* ── Blocos de texto ─────────────────────────────────────── */ section { margin-bottom: 3.5rem; } h2 { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-2); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; margin: 0 0 1.25rem; } h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-1); line-height: 1.3; text-wrap: balance; margin: 2rem 0 .6rem; } h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-0); margin: 1.5rem 0 .4rem; } p, li { max-width: var(--measure); } p { margin: 0 0 1rem; } ul { margin: 0 0 1rem; padding-left: 1.15rem; } li { margin-bottom: .45rem; } li::marker { color: var(--accent); } strong { font-weight: 600; color: var(--ink); } em { font-style: italic; color: var(--ink-soft); } code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-alt); border: 1px solid var(--rule-soft); padding: .1em .35em; color: var(--ink-soft); word-break: break-word; } /* ── Etiqueta genérica ───────────────────────────────────── */ .tag { display: inline-block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; } /* ── Callouts ────────────────────────────────────────────── */ .note { border-left: 3px solid var(--accent); background: var(--accent-wash); padding: 1rem 1.2rem; margin: 1.25rem 0; } .note > :last-child { margin-bottom: 0; } .note p { max-width: none; } .note__label { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: .35rem; } .decide { background: var(--surface-alt); border: 1px solid var(--rule); padding: 1.4rem 1.5rem; margin: 1.25rem 0; } .decide > :last-child { margin-bottom: 0; } .decide h4 { margin-top: 0; } .decide .ask { font-weight: 600; color: var(--accent-ink); max-width: none; } /* ── Tabelas ─────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); } table { border-collapse: collapse; width: 100%; min-width: 40rem; } caption { text-align: left; font-size: var(--step--1); color: var(--ink-muted); padding: 0 0 .65rem; } th, td { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; font-size: var(--step--1); line-height: 1.5; } thead th { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; border-bottom: 1px solid var(--rule); background: var(--surface-alt); } tbody tr:last-child td { border-bottom: none; } td:first-child { font-weight: 500; color: var(--ink); } /* ── Selo de severidade (usado em tabelas) ───────────────── */ .sev { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .sev::before { content: ""; width: .5rem; height: .5rem; background: currentColor; flex: none; } .sev--high { color: var(--sev-high); } .sev--mid { color: var(--sev-mid); } .sev--mid::before { border-radius: 999px; } .sev--low { color: var(--sev-low); } .sev--low::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* ── Rodapé ──────────────────────────────────────────────── */ footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-muted); } footer p { max-width: var(--measure); } .updated { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); max-width: none; } .updated::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--sev-low); flex: none; } .updated b { font-weight: 500; color: var(--ink-soft); letter-spacing: .06em; }