/* ========================================================================= CBMGO • Normas Técnicas — design tokens + base Wiki técnico institucional. IBM Plex pair (Sans + Serif + Mono). Paleta calma com vermelho/laranja CBMGO como acento. Direção fechada no protótipo Claude Design (calm · serif · cozy · 75ch). Classes do corpo (.item, .subheading, .alpha-item, .enum-item, .nota-asterisco, .child-d*, a.ref, a.term) são emitidas por web/src/lib/render.ts — estilizadas aqui sobre os novos tokens. ========================================================================= */ /* ---------- Fontes (servidas pelo Base.astro via Google Fonts) ---------- */ /* ---------- Tokens (light by default; tweakable via data-attrs no ) ---------- */ :root { /* Paleta — neutros quentes */ --bg: oklch(0.987 0.005 80); /* off-white quente */ --bg-surface: #ffffff; --bg-sunken: oklch(0.965 0.006 80); --bg-rail: oklch(0.978 0.005 80); --ink: oklch(0.21 0.012 60); /* corpo */ --ink-soft: oklch(0.36 0.012 60); /* secundário */ --ink-muted: oklch(0.52 0.010 60); /* meta */ --ink-faint: oklch(0.68 0.008 60); --line: oklch(0.905 0.006 70); --line-soft: oklch(0.945 0.005 70); --line-strong: oklch(0.83 0.008 70); /* CBMGO — acentos institucionais */ --red: oklch(0.55 0.18 28); /* vermelho CBMGO */ --red-deep: oklch(0.43 0.16 28); --red-soft: oklch(0.94 0.04 28); /* fundo de pílula */ --orange: oklch(0.72 0.16 60); /* fênix laranja */ --orange-soft: oklch(0.95 0.05 65); --gold: oklch(0.78 0.12 85); /* Link wiki — azul desaturado */ --link: oklch(0.45 0.13 250); --link-hover: oklch(0.38 0.15 250); --link-visited: oklch(0.43 0.12 290); /* Tipografia (tweakable via data-pair) */ --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Serif", ui-serif, Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; --measure: 75ch; /* largura da medida de leitura */ --density: 1; /* 0.875 compacto · 1 padrão · 1.125 espaçado */ --radius: 6px; --radius-lg: 10px; --shadow-pop: 0 1px 2px rgba(20,18,16,.05), 0 8px 24px rgba(20,18,16,.10); --shadow-rail: 0 1px 0 rgba(20,18,16,.02); /* Layout */ --topbar-h: 64px; --sidebar-w: 264px; --rail-w: 248px; --content-x-pad: 40px; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: calc(1.62 * var(--density)); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1, "liga" 1, "ss01" 1; font-variant-numeric: oldstyle-nums proportional-nums; } a { color: var(--link); text-decoration-color: color-mix(in oklab, var(--link) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .12s, text-decoration-color .12s; } a:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); } a:visited { color: var(--link-visited); } button { font: inherit; cursor: pointer; } img { max-width: 100%; height: auto; display: block; } hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } ::selection { background: color-mix(in oklab, var(--orange) 30%, transparent); color: var(--ink); } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--bg-surface); border-bottom: 1px solid var(--line); height: var(--topbar-h); display: flex; align-items: center; padding: 0 24px; gap: 24px; } .topbar::before { /* faixa fina institucional vermelha (chega de cromo, mas presente) */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0%, var(--red) 55%, var(--orange) 100%); } .topbar__brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; } .topbar__brand img { width: 34px; height: 34px; object-fit: contain; } .topbar__wordmark { display: flex; flex-direction: column; line-height: 1; gap: 3px; min-width: 0; } .topbar__wordmark .org { font: 600 11px/1 var(--font-ui); letter-spacing: .12em; color: var(--red-deep); text-transform: uppercase; } .topbar__wordmark .product { font: 500 15px/1 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .topbar__search { flex: 1; max-width: 560px; position: relative; display: flex; } .topbar__search input { width: 100%; height: 38px; border: 1px solid var(--line); background: var(--bg-sunken); border-radius: 999px; padding: 0 16px 0 38px; font: 14px/1 var(--font-ui); color: var(--ink); transition: background .12s, border-color .12s, box-shadow .12s; } .topbar__search input::placeholder { color: var(--ink-faint); } .topbar__search input:focus { outline: none; background: var(--bg-surface); border-color: var(--link); box-shadow: 0 0 0 3px color-mix(in oklab, var(--link) 18%, transparent); } .topbar__search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; } .topbar__search .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 11px/1 var(--font-mono); color: var(--ink-muted); padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-surface); } .topbar__nav { display: flex; gap: 4px; align-items: center; } .topbar__nav a { font: 500 14px/1 var(--font-ui); color: var(--ink-soft); text-decoration: none; padding: 8px 12px; border-radius: var(--radius); } .topbar__nav a:hover { color: var(--ink); background: var(--bg-sunken); } .topbar__nav a.is-active { color: var(--red-deep); background: var(--red-soft); } /* hamburger (mobile) */ .topbar__menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-surface); color: var(--ink-soft); flex: 0 0 auto; } .topbar__menu-btn:hover { color: var(--ink); border-color: var(--line-strong); } /* ---------- Page shells ---------- */ .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w); gap: 0; min-height: calc(100vh - var(--topbar-h)); max-width: 1440px; margin: 0 auto; } .shell--narrow { grid-template-columns: minmax(0, 1fr); max-width: 1100px; padding: 0 24px; } .shell--two { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .shell--three { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w); } /* ---------- Sidebar (TOC) ---------- */ .sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg); padding: 20px 8px 32px 24px; scrollbar-width: thin; } .sidebar__heading { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; padding: 0 8px 10px; } .sidebar__norma-label { font: 600 13px/1 var(--font-ui); color: var(--red-deep); padding: 4px 8px 2px; font-feature-settings: "tnum" 1; } .sidebar__norma-title { font: 500 14px/1.4 var(--font-ui); color: var(--ink); padding: 0 8px 14px; } .toc { list-style: none; margin: 0; padding: 0; } .toc li { margin: 0; } .toc a { display: block; font: 14px/1.45 var(--font-ui); color: var(--ink-soft); text-decoration: none; padding: 5px 8px 5px 10px; border-left: 2px solid transparent; border-radius: 0; margin-left: -2px; font-feature-settings: "tnum" 1; } .toc a:hover { color: var(--ink); background: var(--bg-sunken); } .toc a.is-active { color: var(--red-deep); background: var(--red-soft); border-left-color: var(--red); font-weight: 500; } .toc .num { display: inline-block; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; margin-right: 8px; } .toc a.is-active .num { color: var(--red-deep); } /* Numbered: número fixo enfatizado */ .toc[data-style="numbered"] .num { min-width: 28px; font-weight: 500; } /* Indent: número fica, filhos indentam */ .toc[data-style="indent"] li[data-depth="2"] a { padding-left: 22px; } .toc[data-style="indent"] li[data-depth="3"] a { padding-left: 34px; font-size: 13px; } .toc[data-style="indent"] li[data-depth="4"] a { padding-left: 46px; font-size: 13px; color: var(--ink-muted); } /* Clean: esconde números, indenta */ .toc[data-style="clean"] .num { display: none; } .toc[data-style="clean"] li[data-depth="2"] a { padding-left: 22px; } .toc[data-style="clean"] li[data-depth="3"] a { padding-left: 22px; font-size: 13px; color: var(--ink-muted); } .toc[data-style="clean"] li[data-depth="4"] a { display: none; } /* ---------- Article (norma) ---------- */ .article { padding: 32px var(--content-x-pad) 80px; min-width: 0; max-width: calc(var(--measure) + var(--content-x-pad) * 2); } .article__breadcrumb { font: 13px/1 var(--font-ui); color: var(--ink-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .article__breadcrumb > * { white-space: nowrap; } .article__breadcrumb a { color: var(--ink-muted); text-decoration: none; } .article__breadcrumb a:hover { color: var(--link); text-decoration: underline; } .article__breadcrumb svg { width: 12px; height: 12px; opacity: .6; } .article__header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--line); position: relative; } .article__header::before { /* faixa lateral vermelha sutil — identidade institucional */ content: ""; position: absolute; left: -16px; top: 6px; bottom: 28px; width: 3px; background: var(--red); border-radius: 2px; } .article__eyebrow { font: 600 12px/1 var(--font-ui); letter-spacing: .1em; color: var(--red-deep); text-transform: uppercase; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .article__title { font: 600 38px/1.18 var(--font-ui); margin: 0; color: var(--ink); letter-spacing: -.012em; text-wrap: balance; } .article__sub { font: 16px/1.5 var(--font-ui); color: var(--ink-soft); max-width: 60ch; } .article__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font: 13px/1 var(--font-ui); color: var(--ink-muted); align-items: center; } .article__meta > * { white-space: nowrap; } .article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; } .article__meta a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--line-strong); display: inline-flex; align-items: center; gap: 5px; } .article__meta a:hover { color: var(--link); border-bottom-color: var(--link); } .badge { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; } .badge--vigente { background: oklch(0.94 0.06 145); color: oklch(0.32 0.10 145); } .badge--portaria { background: var(--orange-soft); color: oklch(0.40 0.13 60); } .badge--anexo { background: var(--red-soft); color: var(--red-deep); } /* ---------- Article body (corpo da norma — saída do render.ts) ---------- */ .body { font-family: var(--font-body); max-width: var(--measure); font-size: 17px; color: var(--ink); } .body h2 { font: 600 24px/1.28 var(--font-ui); margin: 44px 0 14px; color: var(--ink); letter-spacing: -.005em; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); scroll-margin-top: calc(var(--topbar-h) + 16px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .body h2 .num { color: var(--red-deep); margin-right: 10px; font-weight: 600; } .body h3 { font: 600 19px/1.3 var(--font-ui); margin: 32px 0 10px; color: var(--ink); scroll-margin-top: calc(var(--topbar-h) + 16px); } .body h3 .num { color: var(--red-deep); margin-right: 8px; } .body h4, .body h5, .body h6 { font: 600 16px/1.3 var(--font-ui); margin: 24px 0 8px; color: var(--ink); scroll-margin-top: calc(var(--topbar-h) + 16px); } .body h4 .num, .body h5 .num, .body h6 .num { color: var(--red-deep); margin-right: 8px; } /* texto justificado com hifenização (pt-BR) para evitar buracos */ .body p, .body li { margin: 0 0 14px; text-align: justify; hyphens: auto; } .body .item { margin: 0 0 14px; scroll-margin-top: calc(var(--topbar-h) + 16px); position: relative; } /* número-rótulo do item (render.ts emite como primeiro filho) */ .body .item > strong:first-child, .body .item .num { font: 500 15px/1 var(--font-mono); color: var(--red-deep); margin-right: 10px; font-feature-settings: "tnum" 1; } /* rótulo do termo (NT-03): negrito, sem o estilo vermelho/mono do número */ .body .item > strong.termo { font-family: inherit; font-weight: 700; color: var(--ink); margin-right: 0; } .body .item.depth-3 { padding-left: 20px; } .body .item.depth-4 { padding-left: 40px; } .body .item.depth-5 { padding-left: 60px; } .body .item.depth-6 { padding-left: 72px; } /* subseções: **N.N Título** (linha toda em negrito) → sub-cabeçalho */ .body .subheading { font: 600 18px/1.35 var(--font-ui); margin: 28px 0 8px; color: var(--ink); text-align: left; hyphens: none; scroll-margin-top: calc(var(--topbar-h) + 16px); } .body .subheading > strong:first-child { font-weight: 600; color: var(--ink); } .body .subheading .num { color: var(--red-deep); margin-right: 8px; font-family: var(--font-mono); font-size: .85em; } .body .subheading .sub-title { color: var(--ink); } /* sub-enumerações: **a)** / 1) / (a) / a) → indentadas como sub-item */ .body .alpha-item, .body .enum-item { margin-left: 28px; max-width: calc(var(--measure) + 28px); } .body .alpha-item > strong:first-child { color: var(--ink-muted); font-style: italic; font-weight: 600; margin-right: 8px; } /* a)/b)/1) sob um item profundo: indenta relativo à profundidade do item-pai (28px + padding do pai) */ .body .alpha-item.under-3, .body .enum-item.under-3 { margin-left: 48px; } .body .alpha-item.under-4, .body .enum-item.under-4 { margin-left: 68px; } .body .alpha-item.under-5, .body .enum-item.under-5 { margin-left: 88px; } .body .alpha-item.under-6, .body .enum-item.under-6 { margin-left: 100px; } /* notas de rodapé com asterisco */ .body .nota-asterisco { font: 13px/1.6 var(--font-ui); color: var(--ink-muted); text-align: left; hyphens: none; border-left: 2px solid var(--line); padding-left: 12px; margin: 14px 0; } .body .aster-mark { color: var(--red); font-weight: 700; } .body a.aster { vertical-align: super; font-size: .7em; font-weight: 700; color: var(--red); text-decoration: none; padding: 0 1px; } /* listas */ .body ul { list-style: none; padding-left: 24px; margin: 10px 0; max-width: var(--measure); } .body ul > li { position: relative; } .body ul > li::before { content: "–"; position: absolute; left: -18px; color: var(--red); } .body ol { padding-left: 30px; margin: 10px 0; max-width: var(--measure); } .body li > ul, .body li > ol { margin: 6px 0; } /* listas-filhas indentadas sob o item-pai */ .body ul.child-d3, .body ol.child-d3 { margin-left: 20px; } .body ul.child-d4, .body ol.child-d4 { margin-left: 40px; } .body ul.child-d5, .body ol.child-d5 { margin-left: 60px; } .body ul.child-d6, .body ol.child-d6 { margin-left: 72px; } /* listas-filhas: apenas indentação, sem caixinha */ .body ul[class*="child-d"], .body ol[class*="child-d"] { margin-top: 8px; margin-bottom: 14px; } /* fluxograma/processo achatado (diagrama do Word perdido) agrupado numa caixinha */ .body .fluxo-callout { background: color-mix(in oklab, var(--orange) 5%, transparent); border-left: 3px solid color-mix(in oklab, var(--orange) 28%, transparent); border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 14px 0; } .body .fluxo-callout p { margin: 2px 0; text-align: left; hyphens: none; } /* item ancorado (alvo de hash) — destaque laranja fênix */ .body .item:target, .body div[id]:target, .body h2:target, .body h3:target { background: color-mix(in oklab, var(--orange) 16%, transparent); outline: 4px solid color-mix(in oklab, var(--orange) 16%, transparent); border-radius: 4px; } /* Cross-ref link dentro do corpo */ .body a.ref { color: var(--link); text-decoration: none; text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent); font-family: var(--font-ui); font-size: .95em; font-feature-settings: "tnum" 1; padding: 0 1px; border-radius: 2px; border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent); white-space: nowrap; cursor: pointer; } .body a.ref:hover { color: var(--link-hover); background: color-mix(in oklab, var(--link) 8%, transparent); border-bottom-color: var(--link-hover); } .body a.ref-ext { white-space: normal; } .body a.ref-ext::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 3px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; opacity: .55; vertical-align: baseline; } /* Termo do glossário — sublinhado pontilhado (default; tweakable via data-term-style) */ .body a.term { color: inherit; text-decoration: none; cursor: help; border-bottom: 1px dotted var(--orange); } .body[data-term-style="bg"] a.term { border-bottom: 0; background: linear-gradient(transparent 62%, var(--orange-soft) 62%); padding: 0 1px; } .body[data-term-style="none"] a.term { border-bottom: 0; } .body[data-term-style="none"] a.term:hover { background: var(--orange-soft); } /* Figure / imagem do corpo */ .body figure, .body p:has(> img:only-child) { margin: 28px 0; } .body img { margin: 0 auto; border-radius: 6px; border: 1px solid var(--line-soft); } .body figcaption { font: 13px/1.5 var(--font-ui); color: var(--ink-muted); margin-top: 12px; text-align: center; } /* ---------- Table (tabelas da norma — HTML cru, sticky/zebra/scroll) ---------- */ .table-wrap { margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); position: relative; overflow: hidden; } .table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); background: var(--bg-sunken); font: 13px/1 var(--font-ui); } .table-toolbar .label { color: var(--ink-soft); display: flex; align-items: center; gap: 8px; min-width: 0; } .table-toolbar .label .tag { font: 600 11px/1 var(--font-ui); letter-spacing: .06em; color: var(--red-deep); background: var(--red-soft); padding: 3px 7px; border-radius: 4px; text-transform: uppercase; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .table-toolbar .label .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-toolbar .actions { display: flex; gap: 4px; flex: 0 0 auto; } .table-toolbar .actions button { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ink-muted); border: 1px solid transparent; padding: 5px 8px; border-radius: var(--radius); font: 12px/1 var(--font-ui); } .table-toolbar .actions button:hover { background: var(--bg-surface); color: var(--ink); border-color: var(--line); } .table-toolbar .actions svg { width: 13px; height: 13px; } /* Por padrão: tabela reflowa, NUNCA scroll horizontal */ .table-scroll { overflow-x: hidden; position: relative; } .body table, .table-scroll table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 0; table-layout: auto; font: 14px/1.4 var(--font-ui); color: var(--ink); } .body th, .table-scroll th { background: var(--bg-sunken); color: var(--ink); font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--line); position: sticky; top: 0; z-index: 1; font-size: 13px; letter-spacing: .01em; overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; } .body td, .table-scroll td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; } /* Auto-compactação por número de colunas */ .table-scroll[data-cols="5"] th, .table-scroll[data-cols="5"] td, .table-scroll[data-cols="6"] th, .table-scroll[data-cols="6"] td { padding: 8px 10px; font-size: 13px; } .table-scroll[data-cols="7"] th, .table-scroll[data-cols="7"] td, .table-scroll[data-cols="8"] th, .table-scroll[data-cols="8"] td { padding: 6px 7px; font-size: 12px; line-height: 1.35; } /* 9+ colunas — máxima compactação */ .table-scroll[data-cols="9"] th, .table-scroll[data-cols="9"] td, .table-scroll[data-cols="10"] th, .table-scroll[data-cols="10"] td, .table-scroll[data-cols="11"] th, .table-scroll[data-cols="11"] td, .table-scroll[data-cols="12"] th, .table-scroll[data-cols="12"] td, .table-scroll[data-cols="13"] th, .table-scroll[data-cols="13"] td { padding: 4px 5px; font-size: 11px; line-height: 1.3; } .body tr:nth-child(even) td, .table-scroll tr:nth-child(even) td { background: color-mix(in oklab, var(--bg-sunken) 50%, var(--bg-surface)); } .body tr:last-child td, .table-scroll tr:last-child td { border-bottom: 0; } .table-wrap.is-fullscreen { position: fixed; inset: 24px; z-index: 100; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(20,18,16,.25); } /* Modo TELA CHEIA — scroll horizontal é OK pra ver linha inteira */ .table-wrap.is-fullscreen .table-scroll { flex: 1; max-height: none; overflow-x: auto; } .table-wrap.is-fullscreen table { min-width: max-content; } .table-fullscreen-overlay { position: fixed; inset: 0; background: rgba(20,18,16,.45); z-index: 99; backdrop-filter: blur(2px); } /* ---------- Right rail ---------- */ .rail { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 32px 24px 32px 16px; border-left: 1px solid var(--line); background: var(--bg-rail); scrollbar-width: thin; } .rail__section { margin-bottom: 28px; } .rail__section h4 { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; margin: 0 0 10px; } .rail__list { list-style: none; margin: 0; padding: 0; } .rail__list li { margin-bottom: 4px; } .rail__list a { display: block; font: 13px/1.4 var(--font-ui); color: var(--ink-soft); text-decoration: none; padding: 4px 0; font-variant-numeric: tabular-nums; } .rail__list a:hover { color: var(--link); } .rail__list .nid { color: var(--red-deep); margin-right: 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .rail__ext { margin-bottom: 10px; } .rail__ext .ext-label { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--ink); font-weight: 500; } .rail__ext .ext-desc { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--ink-muted); margin-top: 2px; } .rail__cite { font-family: var(--font-ui); font-size: 12px; color: var(--ink-soft); line-height: 1.55; } .rail__note { font-family: var(--font-ui); font-size: 11px; color: var(--ink-faint); margin-top: 8px; } /* Anexo cards no rail */ .anexo-mini { display: flex; gap: 10px; padding: 10px; background: var(--bg-surface); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 6px; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; align-items: flex-start; } .anexo-mini:hover { border-color: var(--line-strong); } .anexo-mini__letter { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; background: var(--red-soft); color: var(--red-deep); font: 600 13px/1 var(--font-ui); border-radius: var(--radius); } .anexo-mini__body { min-width: 0; } .anexo-mini__title { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } .anexo-mini__type { font: 11px/1 var(--font-ui); color: var(--ink-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Tooltip preview (#tip, montado em Base.astro) ---------- */ .tip { position: absolute; z-index: 80; width: min(360px, 92vw); max-height: 280px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 14px 16px; font: 14px/1.55 var(--font-body); color: var(--ink); } .tip .tip-head { font: 600 11px/1 var(--font-ui); letter-spacing: .08em; color: var(--red-deep); text-transform: uppercase; margin-bottom: 8px; } .tip .tip-head .tip-tag { background: var(--red-soft); padding: 3px 6px; border-radius: 4px; } /* ---------- Acervo (index) ---------- */ .hero { padding: 56px 24px 32px; max-width: 1100px; margin: 0 auto; } .hero__kicker { font: 600 12px/1 var(--font-ui); letter-spacing: .12em; color: var(--red-deep); text-transform: uppercase; margin-bottom: 14px; } .hero__title { font: 600 44px/1.12 var(--font-ui); margin: 0 0 14px; color: var(--ink); letter-spacing: -.015em; text-wrap: balance; max-width: 22ch; } .hero__sub { font: 18px/1.55 var(--font-body); color: var(--ink-soft); max-width: 60ch; margin: 0 0 28px; } .hero__search { display: flex; gap: 8px; max-width: 600px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: 0 1px 0 rgba(20,18,16,.02); align-items: center; } .hero__search:focus-within { border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in oklab, var(--link) 15%, transparent); } .hero__search svg { width: 18px; height: 18px; color: var(--ink-muted); flex: 0 0 18px; } .hero__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 16px/1 var(--font-ui); color: var(--ink); padding: 12px 0; } .hero__search input::placeholder { color: var(--ink-faint); } .hero__search button { background: var(--red); color: white; border: 0; padding: 10px 18px; font: 500 14px/1 var(--font-ui); border-radius: 999px; flex: 0 0 auto; } .hero__search button:hover { background: var(--red-deep); } .hero__stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 22px; font: 13px/1 var(--font-ui); color: var(--ink-muted); } .hero__stats strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Acervo section */ .acervo { max-width: 1100px; margin: 0 auto; padding: 20px 24px 80px; } .acervo__group { margin-top: 36px; } .acervo__group-title { font: 600 13px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; } .acervo__group-title .count { color: var(--ink-faint); font-weight: 500; font-variant-numeric: tabular-nums; } .acervo__list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; } .acervo__card { min-height: 96px; display: flex; flex-direction: column; background: var(--bg-surface); color: inherit; transition: background .1s; } .acervo__card:hover { background: var(--bg-sunken); } .acervo__card-main { flex: 1; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: inherit; } .acervo__card .id { font: 600 13px/1 var(--font-mono); color: var(--red-deep); background: var(--red-soft); padding: 6px 8px; border-radius: var(--radius); font-variant-numeric: tabular-nums; white-space: nowrap; } .acervo__card .title { font: 500 15px/1.35 var(--font-ui); color: var(--ink); } .acervo__card .meta { font: 12px/1 var(--font-ui); color: var(--ink-muted); margin-top: 4px; display: flex; gap: 10px; } .acervo__card .arrow { color: var(--ink-faint); opacity: 0; transition: opacity .12s, transform .12s; } .acervo__card:hover .arrow { opacity: 1; transform: translateX(3px); } /* Barra de partes (NT-15 P1..P8, NT-25 P1..P4, etc.) */ .acervo__card-parts-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 18px 10px; border-top: 1px solid var(--line-soft); } .acervo__card-part-btn { font: 600 11px/1 var(--font-mono); padding: 4px 10px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-soft); text-decoration: none; transition: background .1s, color .1s; } .acervo__card-part-btn:hover { background: var(--red-soft); color: var(--red-deep); } .acervo__empty { padding: 60px 0; text-align: center; color: var(--ink-muted); font-family: var(--font-ui); } /* ---------- Anexos showcase (NT-01) ---------- */ .anexos { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; } .anexos > h2 { font: 600 24px/1.28 var(--font-ui); margin: 0 0 4px; color: var(--ink); } .anexos .muted { color: var(--ink-muted); font: 14px/1.5 var(--font-ui); margin: 0 0 18px; } .anexo-group { margin-bottom: 28px; } .anexo-group h3 { display: flex; align-items: baseline; gap: 10px; font: 600 17px/1.3 var(--font-ui); color: var(--ink); margin: 0 0 4px; } .anexo-group h3 .cnt { font: 500 12px/1 var(--font-ui); color: var(--ink-muted); letter-spacing: .04em; } .anexo-group .desc { font: 14px/1.5 var(--font-ui); color: var(--ink-soft); margin: 0 0 14px; } .anexo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .anexo-grid .anexo-mini__letter { background: var(--red-soft); color: var(--red-deep); } .anexo-grid[data-kind="aplicacao"] .anexo-mini__letter { background: var(--orange-soft); color: oklch(0.40 0.13 60); } .anexo-grid[data-kind="formulario"] .anexo-mini__letter { background: oklch(0.94 0.04 250); color: var(--link); } .anexo-grid[data-kind="reservado"] .anexo-mini { opacity: .72; } .anexo-grid[data-kind="reservado"] div.anexo-mini { cursor: not-allowed; } .anexo-grid[data-kind="reservado"] .anexo-mini__letter { background: var(--bg-sunken); color: var(--ink-faint); } .anexo-mini__tags { display: flex; gap: 4px; font: 11px/1 var(--font-ui); flex: 0 0 auto; } .anexo-mini__tags span { padding: 2px 6px; background: var(--bg-sunken); border-radius: 3px; color: var(--ink-muted); } /* ---------- Busca page ---------- */ .busca { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; max-width: 1240px; margin: 0 auto; padding: 32px 24px 80px; } .busca__filters { position: sticky; top: calc(var(--topbar-h) + 24px); align-self: start; font-family: var(--font-ui); } .busca__filters h4 { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; margin: 0 0 12px; } .busca__results { min-width: 0; } .busca__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; font-family: var(--font-ui); gap: 12px; flex-wrap: wrap; } .busca__head .h-title { font: 600 22px/1.2 var(--font-ui); color: var(--ink); } .busca__head .h-sub { font: 14px/1.5 var(--font-ui); color: var(--ink-muted); margin-top: 4px; } /* ---------- Mobile drawer ---------- */ .drawer-scrim { position: fixed; inset: 0; background: rgba(20,18,16,.4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .18s; } .drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 61; background: var(--bg-surface); border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto; box-shadow: 0 0 40px rgba(20,18,16,.18); } .drawer__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .drawer__head img { width: 28px; height: 28px; } .drawer__head .name { font: 500 14px/1.2 var(--font-ui); color: var(--ink); } .drawer__head .name small { display: block; font: 600 9px/1 var(--font-ui); letter-spacing: .14em; color: var(--red-deep); text-transform: uppercase; margin-bottom: 2px; } .drawer__head .close { margin-left: auto; color: var(--ink-soft); background: transparent; border: 0; width: 32px; height: 32px; display: grid; place-items: center; } .drawer__body { padding: 8px; } .drawer h3 { font: 600 11px/1 var(--font-ui); letter-spacing: .1em; color: var(--ink-muted); text-transform: uppercase; margin: 16px 8px 8px; } body.drawer-open .drawer { transform: translateX(0); } body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; } /* ---------- Density + measure (data-attrs no body) ---------- */ body[data-density="compact"] { --density: 0.875; font-size: 15.5px; } body[data-density="cozy"] { --density: 1; font-size: 17px; } body[data-density="comfortable"] { --density: 1.12; font-size: 18px; } body[data-measure="65"] { --measure: 65ch; } body[data-measure="75"] { --measure: 75ch; } body[data-measure="90"] { --measure: 90ch; } /* Palette swap */ body[data-palette="institutional"] { --bg: oklch(0.99 0.005 80); } body[data-palette="institutional"] .topbar::before { background: var(--red); height: 4px; } body[data-palette="institutional"] .article__header::before { background: var(--red); } body[data-palette="mono"] { --red: oklch(0.30 0.01 60); --red-deep: oklch(0.22 0.01 60); --red-soft: oklch(0.94 0.005 60); --orange: oklch(0.50 0.01 60); --orange-soft: oklch(0.93 0.005 60); } body[data-palette="mono"] .topbar::before { background: var(--ink); } /* Font pair swap */ body[data-pair="serif"] { --font-body: "IBM Plex Serif", ui-serif, Georgia, serif; --font-ui: "IBM Plex Sans", ui-sans-serif, sans-serif; } body[data-pair="sans"] { --font-body: "IBM Plex Sans", ui-sans-serif, sans-serif; --font-ui: "IBM Plex Sans", ui-sans-serif, sans-serif; } body[data-pair="humanist"] { --font-body: "Source Serif 4", "IBM Plex Serif", Georgia, serif; --font-ui: "Public Sans", "IBM Plex Sans", sans-serif; } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .shell--three { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); } .shell--three .rail { display: none; } :root { --content-x-pad: 32px; } } @media (max-width: 900px) { .shell--three, .shell--two { grid-template-columns: minmax(0, 1fr); } .sidebar { display: none; } :root { --content-x-pad: 20px; --topbar-h: 60px; } .topbar { padding: 0 14px; gap: 12px; } .topbar__nav { display: none; } .topbar__menu-btn { display: inline-flex; } .topbar__wordmark .product { font-size: 14px; } .article__title { font-size: 30px; } .hero { padding: 36px 20px 24px; } .hero__title { font-size: 34px; } .acervo__list { grid-template-columns: 1fr; } .busca { grid-template-columns: 1fr; gap: 20px; } .busca__filters { position: static; } } @media (min-width: 901px) { .drawer, .drawer-scrim { display: none; } } /* Subtle scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--line-strong) 80%, transparent); border-radius: 999px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } /* Footer */ .footer { border-top: 1px solid var(--line); background: var(--bg-sunken); padding: 28px 24px; font: 13px/1.5 var(--font-ui); color: var(--ink-muted); text-align: center; } .footer a { color: var(--ink-soft); } .footer .fine { margin-top: 6px; font-size: 12px; color: var(--ink-faint); max-width: 70ch; margin-left: auto; margin-right: auto; } /* ---------- Pagefind (neutro, tokens do tema) ---------- */ .pagefind-ui { --pagefind-ui-scale: .9; --pagefind-ui-primary: var(--red-deep); --pagefind-ui-text: var(--ink); --pagefind-ui-background: var(--bg-surface); --pagefind-ui-border: var(--line); --pagefind-ui-tag: var(--bg-sunken); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: 8px; --pagefind-ui-font: var(--font-ui); }