/* ============================================================ OreWiki público — folha de estilo Direção visual B: "Editorial moderno / produto premium" (docs tipo Stripe/Linear). SSR do prospector-api, CSS puro, sem Tailwind, sem build. Fonte da verdade visual: o mockup B aprovado (wiki-norma-B-editorial-moderno.html). Este arquivo replica exatamente aquela aparência, porém sob os nomes de classe do contrato de produção (padrão wiki-*), que o resto do sistema (layout.js + pages/*.js + helpers.js + wiki.js) consome. Linguagem: fundo quase-branco quente neutro; SANS refinada (Inter) para TODA a interface/metadados/números tabulares + SERIFA (Newsreader) só para texto de leitura (título da norma, ementa, corpo dos dispositivos). Número do artigo como pill; metadados em "spec sheet" com filetes internos; TOC lateral elegante (sticky no desktop,

no mobile); painel de backlinks à direita com teaser travado e CTA de domínio; acentos discretos em teal e dourado da marca; revogado em terracota. Anti-slop (memória project_anti_slop_ui_principles): SEM gradiente em ícone/glow/glass/mesh/shadow-lg/roxo/índigo/emoji e SEM hero de SaaS. Superfícies com filetes e steps sutis; sombra apenas a hairline mais leve possível em painéis. Famílias carregadas no pelo layout do SSR: Inter (interface, números tabulares) + Newsreader (leitura). ------------------------------------------------------------ COERÊNCIA DE CLASSES: este arquivo estiliza EXATAMENTE o conjunto de classes wiki-* emitido pelos templates (layout.js + pages/*.js + helpers.js) e as injetadas em runtime pelo wiki.js (.wiki-cite__menu / .wiki-cite__item / .is-copied). Aliases agrupados na mesma regra da classe emitida quando o template usa nomes intercambiáveis. ============================================================ */ /* ------------------------------------------------------------ 1. Tokens do tema editorial (direção B) — valores do mockup B ------------------------------------------------------------ */ :root { /* Superfícies — quase-branco quente neutro, steps sutis */ --paper: #fbfaf8; /* fundo geral da página */ --paper-2: #ffffff; /* cartões / painéis / coluna de leitura */ --paper-3: #f4f2ee; /* chips, blocos rebaixados, hover */ --paper-sunk: #f4f2ee; /* recuos (parágrafos §, citação) */ /* Filetes / bordas — hairlines editoriais */ --line: #e7e3db; /* filete principal */ --line-soft: #efece5; /* filete secundário (interno de spec sheet) */ /* Tinta / texto */ --ink: #2f2d29; /* corpo da lei / prosa */ --ink-strong: #1b1a17; /* títulos, ênfase forte */ --ink-soft: #4a463d; /* texto secundário */ --ink-mute: #6a655c; /* metadados, secundário */ --ink-faint: #777166; /* legendas/rótulos discretos (>=4.5:1 para texto AA) */ /* Teal — INTERAÇÃO (links, foco, botões) — acento discreto */ --teal: #0d6e6a; --teal-strong: #0a5a56; --teal-tint: #e6f0ef; --teal-line: #c9e0de; --teal-focus: #0d6e6a; /* anel de foco opaco (>=3:1, WCAG 2.2 SC 1.4.11) */ /* Dourado — ênfase LEGAL (ementa, marcadores, vigente) — sóbrio */ --gold: #9a7325; /* dourado profundo — filetes/marcadores decorativos */ --gold-text: #846320; /* dourado p/ TEXTO (rótulos/eyebrow) — >=4.5:1 em paper/paper-2/gold-tint (AA) */ --gold-mark: #b8901f; /* marcador/filete/fundo de botão de CTA (não é texto) */ --gold-line: rgba(154, 115, 37, 0.30); --gold-tint: #f6efe0; /* Revogado — terracota desaturada (não alarme puro) */ --revoked: #8a3324; --revoked-tint: #f6ece9; --revoked-line: #e4c9c2; /* Tipografia — Inter (sans/interface/números) + Newsreader (leitura) */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --display: 'Newsreader', Georgia, serif; /* títulos de leitura em serifa */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* números tabulares em Inter */ /* Métricas (espelham o mockup B) */ --measure: 68ch; /* largura de leitura de corpo/lei */ --container: 1180px; /* largura máxima do container geral */ --radius: 10px; /* cantos de painéis/cards */ --radius-sm: 7px; /* cantos de pills/chips/botões */ --gutter: clamp(1.125rem, 4vw, 2.5rem); --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.04), 0 1px 0 rgba(27, 26, 23, 0.02); } /* ------------------------------------------------------------ 2. Reset leve e base do documento ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); /* interface = Inter */ font-size: 1rem; line-height: 1.6; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } a { color: var(--teal); text-underline-offset: 0.16em; } a:hover { color: var(--teal-strong); } /* Foco visível global (acessibilidade AA — anel opaco >=3:1) */ :focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 2px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } /* Utility: esconde visualmente mantendo para leitores de tela */ .wiki-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip-link — some até receber foco por teclado */ .wiki-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink-strong); color: #fff; padding: 0.6rem 1rem; font-family: var(--sans); font-weight: 500; font-size: 0.875rem; border-radius: 0 0 var(--radius-sm) 0; } .wiki-skip:focus { left: 0; outline: 2px solid #c9a227; /* dourado mineral da marca (acento do cromo) */ outline-offset: -2px; } /* ------------------------------------------------------------ 3. Shell / cromo (masthead, nav, footer) ------------------------------------------------------------ */ .wiki-shell { min-height: 100vh; display: flex; flex-direction: column; } .wiki-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Masthead — topbar de produto escuro, identidade OrePocket (marca + nav). Espelha o HomeHeader do site: fundo grafite-900, logo real, nome em Playfair, nav cinza->branco, botão "Entrar" teal arredondado. */ .wiki-masthead { background: #1c1e22; /* graphite-900 */ border-bottom: 1px solid #23262b; /* graphite-800 */ } .wiki-masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 64px; padding-block: 0.5rem; } /* Marca: logo real + nomes (OrePocket em Playfair · selo OreWiki) */ .wiki-masthead__title { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #ffffff; } .wiki-brand__logo { flex: none; width: 34px; height: 34px; object-fit: contain; display: block; } .wiki-brand__names { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1; } .wiki-brand__op { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.375rem; letter-spacing: -0.005em; color: #ffffff; } .wiki-brand__wiki { font-family: var(--sans); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: #2dd4bf; /* teal-400 */ background: rgba(45, 212, 191, 0.12); border: 1px solid rgba(45, 212, 191, 0.28); border-radius: 999px; padding: 0.15em 0.6em; align-self: center; } /* Navegação de cromo — Inter, discreta, alinhada à direita */ .wiki-nav { display: flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.875rem; } .wiki-nav a { color: #8a8f98; /* graphite-400 */ text-decoration: none; font-weight: 450; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: color 0.14s ease, background-color 0.14s ease; } .wiki-nav a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } .wiki-nav a:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; color: #ffffff; } .wiki-nav a[aria-current="page"] { color: #ffffff; font-weight: 600; } /* CTA do cromo (Entrar) — botão teal arredondado, igual login do HomeHeader */ .wiki-nav a.wiki-nav__cta { color: #ffffff; font-weight: 600; background: #0f766e; /* teal-700 */ border: 1px solid #0f766e; border-radius: 999px; padding: 0.45rem 1.15rem; margin-left: 0.35rem; } .wiki-nav a.wiki-nav__cta:hover { color: #ffffff; background: #14b8a6; /* teal-500 */ border-color: #14b8a6; } @media (max-width: 40rem) { /* No mobile, mantém só os links essenciais (e o CTA) para não quebrar a barra */ .wiki-nav a:not(.wiki-nav__cta):nth-child(2), .wiki-nav a:not(.wiki-nav__cta):nth-child(3) { display: none; } .wiki-brand__op { font-size: 1.2rem; } } /* Masthead: marca empilhada (OrePocket + "by NexuCapital") e nav do site. Classes .wiki-mastnav__* / .wiki-brand__block emitidas pelo layout novo — espelham o HomeHeader real (links cinza + botão "Entrar" teal arredondado). */ .wiki-brand__block { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.12; } .wiki-brand__tagline { font-family: var(--sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.01em; color: #6b7280; /* graphite-500 */ } .wiki-mastnav { display: flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.875rem; } .wiki-mastnav__link { color: #8a8f98; /* graphite-400 */ text-decoration: none; font-weight: 450; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: color 0.14s ease, background-color 0.14s ease; } .wiki-mastnav__link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } .wiki-mastnav__link:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; color: #ffffff; } .wiki-mastnav__cta { color: #ffffff; text-decoration: none; font-weight: 600; background: #0f766e; /* teal-700 */ border: 1px solid #0f766e; border-radius: 999px; padding: 0.45rem 1.15rem; margin-left: 0.35rem; transition: background-color 0.14s ease, border-color 0.14s ease; } .wiki-mastnav__cta:hover { background: #14b8a6; border-color: #14b8a6; color: #ffffff; } @media (max-width: 40rem) { .wiki-mastnav__link { display: none; } /* no mobile, mantém só "Entrar" */ } /* Breadcrumb — trilha tipográfica (sequência plana de /) */ .wiki-breadcrumb { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-mute); padding-block: 0.9rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .wiki-breadcrumb__sep { color: var(--ink-faint); font-size: 0.75rem; } .wiki-breadcrumb a { color: var(--ink-mute); text-decoration: none; } .wiki-breadcrumb a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } .wiki-breadcrumb [aria-current="page"] { color: var(--ink-strong); font-weight: 500; } /* Área principal de conteúdo */ .wiki-main { flex: 1 0 auto; padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem); } /* ------------------------------------------------------------ Sub-barra da OreWiki — navegação da seção (Legislação/Biblioteca/ Buscar) numa faixa fina clara entre o masthead escuro e o corpo. ------------------------------------------------------------ */ .wiki-subnav { background: var(--paper-2); border-bottom: 1px solid var(--line); } .wiki-subnav__bar { display: flex; align-items: center; gap: 0.4rem 1.25rem; flex-wrap: wrap; min-height: 46px; padding-block: 0.4rem; } .wiki-subnav__brand a { font-family: var(--sans); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--ink-strong); text-decoration: none; } .wiki-subnav__brand a:hover { color: var(--teal); } .wiki-subnav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .wiki-subnav__links a { display: inline-block; padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: background 0.15s, color 0.15s; } .wiki-subnav__links a:hover { background: var(--paper-3); color: var(--ink-strong); } .wiki-subnav__links [aria-current="page"] { background: var(--teal-tint); color: var(--teal-strong); } .wiki-subnav__search { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } .wiki-subnav__input { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; width: 12rem; max-width: 42vw; } .wiki-subnav__input:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 1px; border-color: var(--teal); } .wiki-subnav__go { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: #fff; background: var(--teal); border: 0; border-radius: var(--radius-sm); padding: 0.42rem 0.85rem; cursor: pointer; transition: background 0.15s; } .wiki-subnav__go:hover { background: var(--teal-strong); } @media (max-width: 640px) { .wiki-subnav__search { margin-left: 0; width: 100%; } .wiki-subnav__input { flex: 1; width: auto; max-width: none; } } @media print { .wiki-subnav { display: none !important; } } /* Rodapé — identidade OrePocket escura, espelhando o Footer do site: fundo grafite-900, logo + colunas Produto/Legal, barra inferior. */ .wiki-footer { border-top: 1px solid #23262b; /* graphite-800 */ background: #1c1e22; /* graphite-900 */ font-family: var(--sans); font-size: 0.875rem; color: #8a8f98; /* graphite-400 */ } .wiki-footer__inner { padding-block: 3rem; } /* Grelha de colunas: marca larga + grupos de links */ .wiki-footer__cols { display: grid; grid-template-columns: 1fr; gap: 2rem 2.5rem; } @media (min-width: 44rem) { .wiki-footer__cols { grid-template-columns: minmax(0, 1.6fr) 1fr 1fr; gap: 2.5rem 3rem; } } .wiki-footer__brandcol { min-width: 0; } .wiki-footer__brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-bottom: 0.875rem; } .wiki-footer__logo { flex: none; width: 40px; height: 40px; object-fit: contain; display: block; } .wiki-footer__names { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1; } .wiki-footer__op { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1.25rem; color: #ffffff; } .wiki-footer__w { font-family: var(--sans); font-weight: 600; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: #2dd4bf; /* teal-400 */ background: rgba(45, 212, 191, 0.12); border: 1px solid rgba(45, 212, 191, 0.28); border-radius: 999px; padding: 0.15em 0.55em; align-self: center; } .wiki-footer__tag { margin: 0; max-width: 32ch; font-size: 0.8125rem; line-height: 1.55; color: #8a8f98; /* graphite-400 */ } /* Grupos de links (OreWiki / OrePocket) */ .wiki-footer__group { min-width: 0; } .wiki-footer__title { margin: 0 0 0.875rem; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: #ffffff; letter-spacing: 0; text-transform: none; } .wiki-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .wiki-footer__links a { color: #8a8f98; /* graphite-400 */ text-decoration: none; font-size: 0.875rem; transition: color 0.14s ease; } .wiki-footer__links a:hover { color: #2dd4bf; } /* teal-400 */ .wiki-footer__links a:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; color: #e5e7eb; } /* Barra inferior: disclaimer + copyright */ .wiki-footer__bar { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #23262b; /* graphite-800 */ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; } .wiki-footer__disc { margin: 0; font-size: 0.78rem; color: #6b7280; /* graphite-500 */ } .wiki-footer__copy { margin: 0; font-size: 0.78rem; color: #6b7280; /* graphite-500 */ } /* ------------------------------------------------------------ 4. Conteúdo editorial de leitura (SERIFA) .wiki-prose = artigo Markdown renderizado .wiki-lei = texto integral de dispositivo de lei ------------------------------------------------------------ */ .wiki-lei { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.62; color: var(--ink); max-width: var(--measure); } .wiki-lei strong, .wiki-lei b { color: var(--ink-strong); font-weight: 600; } .wiki-lei em { font-style: italic; } .wiki-lei p { margin: 0 0 0.875rem; } .wiki-lei p:last-child { margin-bottom: 0; } .wiki-prose { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.65; color: var(--ink); font-kerning: normal; max-width: var(--measure); } .wiki-prose > * + * { margin-top: 1.1em; } .wiki-prose h1, .wiki-prose h2, .wiki-prose h3 { font-family: var(--display); color: var(--ink-strong); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; } .wiki-prose h1 { font-size: 2rem; } .wiki-prose h2 { font-size: 1.6rem; margin-top: 1.9em; padding-bottom: 0.3em; border-bottom: 1px solid var(--line); } .wiki-prose h3 { font-size: 1.28rem; margin-top: 1.5em; } /* h4 vira rótulo de interface (sans, dourado) — quebra proposital de família */ .wiki-prose h4 { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); margin-top: 1.5em; } .wiki-prose strong { color: var(--ink-strong); font-weight: 600; } .wiki-prose em { font-style: italic; } .wiki-prose a { color: var(--teal-strong); text-decoration: none; border-bottom: 1px solid var(--teal-line); } .wiki-prose a:hover { border-bottom-color: var(--teal); } .wiki-prose ul, .wiki-prose ol { padding-left: 1.5em; } .wiki-prose ul > li + li, .wiki-prose ol > li + li { margin-top: 0.4em; } .wiki-prose ul li { list-style: none; position: relative; } .wiki-prose ul li::before { content: "—"; position: absolute; left: -1.4em; color: var(--ink-faint); } .wiki-prose ol { list-style: decimal; } .wiki-prose blockquote { border-left: 3px solid var(--gold); padding-left: 1em; color: var(--ink-soft); font-style: italic; } /* code/pre em Inter (sans), tom dourado sóbrio */ .wiki-prose code { font-family: var(--sans); font-style: normal; font-size: 0.9em; color: #6d5410; background: var(--gold-tint); padding: 0.05em 0.35em; border-radius: 4px; } .wiki-prose pre { font-family: var(--sans); font-size: 0.9em; background: var(--paper-3); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1em; overflow-x: auto; } .wiki-prose pre code { background: none; padding: 0; color: var(--ink); } .wiki-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .wiki-prose img { border-radius: var(--radius-sm); } .wiki-prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; } .wiki-prose th, .wiki-prose td { text-align: left; padding: 0.5em 0.75em; border-bottom: 1px solid var(--line-soft); } .wiki-prose th { font-family: var(--sans); font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); } /* Filetes finos — separadores editoriais */ .wiki-rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; } /* Filete dourado como cabeçalho de bloco (h2 de backlinks/fontes/relacionados) */ .wiki-rule-gold { border: 0; border-top: 1px solid var(--gold-line); margin: 2rem 0; } /* Números / rótulos tabulares — Inter tabular-nums (direção B) */ .wiki-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-size: 0.9em; letter-spacing: 0; color: var(--ink-soft); } /* Alias utilitário do mockup para números tabulares inline */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ------------------------------------------------------------ 5. Leitor de norma (a página mais importante) Estrutura real do template (espelha o mockup B):