/* --------------------------------------------------------------------------- PostCreator — direção "Industry". Wireframe técnico: aço-azul sobre fundo claro, Barlow Condensed em caixa alta nos títulos sobre Barlow no corpo, e cada card é um objeto de blueprint — canto reto, fundo transparente, borda hairline e marcas "+" de registro nos cantos. Profundidade vem da borda, não de sombra. CSS à mão, sem build step. Cada token carrega o par claro/escuro numa linha só, via `light-dark()`: os dois valores ficam lado a lado, o que documenta o mapeamento melhor que dois blocos separados e tira o risco de um tema receber um token novo e o outro não. Quem escolhe entre os dois é `color-scheme`, e é aí que entra o seletor de tema: sem `data-tema` o app segue o `prefers-color-scheme` do sistema; com `claro` ou `escuro` no (vindo das preferências do usuário, renderizado no servidor — nada de flash de tema errado), a escolha do usuário vence. `color-scheme` ainda dá de graça o tema certo em scrollbars e controles nativos do navegador. --------------------------------------------------------------------------- */ :root { color-scheme: light dark; --fundo: light-dark(#f2f2f3, #17191c); --superficie: light-dark(#e9e9ea, #1f2226); /* inputs, blocos rebaixados */ --texto: light-dark(#1d1f20, #e8eaec); --apagado: light-dark(#7a7a7d, #8d9095); /* notas */ --apagado-forte: light-dark(#5d5d60, #a5a8ad);/* notas mais presentes */ --divisor: light-dark(rgba(29, 31, 32, .16), rgba(232, 234, 236, .14)); /* Aço, o acento único. No escuro sobe para o accent-500: o #5980a6 do tema claro dá só 2,2:1 sobre o fundo escuro. */ --acento: light-dark(#5980a6, #749dc4); --acento-hover: light-dark(#597ea3, #94bce3); --acento-press: light-dark(#416180, #b5d9fd); --acento-texto: light-dark(#416180, #94bce3); /* acento em tamanho de texto */ --acento-texto-forte: light-dark(#2c455d, #b5d9fd); --sobre-acento: light-dark(#f2f2f3, #17191c); /* tinta sobre o acento sólido */ --sobre-tinta: light-dark(#1d2d3d, #e8eaec); /* tinta sobre as tintas */ --tinta-100: light-dark(#eef6ff, rgba(89, 128, 166, .12)); --tinta-200: light-dark(#d6ebff, rgba(89, 128, 166, .20)); --tinta-300: light-dark(#b5d9fd, rgba(89, 128, 166, .30)); --neutro-fundo: light-dark(#e7e7ea, rgba(232, 234, 236, .10)); --neutro-texto: light-dark(#424244, #a5a8ad); --marca-canto: light-dark(rgba(29, 31, 32, .55), rgba(232, 234, 236, .45)); --marca-linha: linear-gradient(var(--marca-canto), var(--marca-canto)); --grade: light-dark(rgba(29, 31, 32, .06), rgba(232, 234, 236, .07)); --realce: light-dark(rgba(29, 31, 32, .07), rgba(232, 234, 236, .07)); --realce-fraco: light-dark(rgba(29, 31, 32, .03), rgba(232, 234, 236, .03)); --realce-acento: light-dark(rgba(89, 128, 166, .10), rgba(116, 157, 196, .14)); --lavagem-acento: light-dark(rgba(89, 128, 166, .05), rgba(116, 157, 196, .07)); /* As duas séries do painel. Uma só por gráfico — nunca lado a lado —, então o que importa é cada uma separar do fundo, não uma da outra. */ --serie-posts: light-dark(#5980a6, #749dc4); --serie-posts-hover: light-dark(#416180, #94bce3); --serie-tokens: light-dark(#2c455d, #b5d9fd); --serie-tokens-hover: light-dark(#5980a6, #749dc4); --ok: light-dark(#2f7d4f, #7ec699); --erro: light-dark(#c0392b, #f07178); --aviso: light-dark(#9a6b00, #e0af68); --font-titulo: "Barlow Condensed", system-ui, sans-serif; --font-corpo: "Barlow", system-ui, sans-serif; } /* A escolha do usuário, quando existe, tira o sistema da jogada. */ :root[data-tema="claro"] { color-scheme: light; } :root[data-tema="escuro"] { color-scheme: dark; } * { box-sizing: border-box; } body { display: flex; min-height: 100vh; margin: 0; background: var(--fundo); color: var(--texto); font: 400 15px/1.55 var(--font-corpo); } main { flex: 1; min-width: 0; /* senão uma linha longa de post estica o layout */ padding: 30px 36px; } main.sozinho { display: grid; place-items: center; } /* Foco de teclado é tematizado em tudo — nunca o anel azul do navegador. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } ::selection { background: var(--realce-acento); } a { color: var(--acento-texto); } h1, h2, h3 { font-family: var(--font-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; margin: 0 0 10px; } h1 { font-size: 38px; } h2 { font-size: 26px; margin-top: 30px; } h3 { font-size: 18px; } .kicker { margin: 0 0 2px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); } .nota { color: var(--apagado); font-size: 12px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } /* --------------------------------------------------------------------------- Marcas de registro ("+" nos cantos) — a assinatura da direção. O design system desenha as quatro com quatro `` filhos. Aqui saem em pseudo-elementos: o mesmo desenho, sem quatro elementos vazios em cada card do template. `::before` leva os cantos de cima e `::after` os de baixo; cada canto são duas linhas de 1px num bloco de 11px, deslocado −6px para fora da borda. `.marcas-2` usa só os dois cantos opostos (superior esquerdo + inferior direito), para não poluir cards pequenos. --------------------------------------------------------------------------- */ .marcas, .marcas-2 { position: relative; } .marcas::before, .marcas::after, .marcas-2::before, .marcas-2::after { content: ""; position: absolute; inset: -6px; pointer-events: none; background-repeat: no-repeat; } .marcas::before, .marcas::after { background-image: var(--marca-linha), var(--marca-linha), var(--marca-linha), var(--marca-linha); background-size: 1px 11px, 11px 1px, 1px 11px, 11px 1px; } .marcas::before { background-position: 5px 0, 0 5px, right 5px top 0, right 0 top 5px; } .marcas::after { background-position: 5px bottom 0, 0 bottom 5px, right 5px bottom 0, right 0 bottom 5px; } .marcas-2::before, .marcas-2::after { background-image: var(--marca-linha), var(--marca-linha); background-size: 1px 11px, 11px 1px; } .marcas-2::before { background-position: 5px 0, 0 5px; } .marcas-2::after { background-position: right 5px bottom 0, right 0 bottom 5px; } /* --------------------------------------------------------------------------- Shell: sidebar fixa + main fluido --------------------------------------------------------------------------- */ .lateral { display: flex; flex-direction: column; flex: none; width: 232px; border-right: 1px solid var(--divisor); } .lateral-marca { padding: 22px 20px; border-bottom: 1px solid var(--divisor); } .lateral-marca a { display: block; font: 600 22px var(--font-titulo); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--texto); } .lateral-marca p { margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); } .lateral-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; } .lateral-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; font-size: 14px; text-decoration: none; color: var(--texto); transition: background-color 120ms ease, color 120ms ease; } .lateral-nav a:hover { background: var(--realce-acento); } .lateral-nav a.ativo { color: var(--acento-texto); font-weight: 500; background: var(--tinta-100); border-color: var(--tinta-300); } .lateral-rodape { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 16px 20px; border-top: 1px solid var(--divisor); font-size: 12px; } .lateral-rodape span { font-weight: 500; overflow-wrap: anywhere; } .lateral-rodape a { text-decoration: none; } .lateral-rodape a:hover { text-decoration: underline; } .icone { display: block; flex: none; } /* Nome acessível para controle que só mostra ícone: texto de verdade, fora da tela, em vez de aria-label — sobrevive a tradução automática e é o que o leitor de tela anuncia. */ .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Seletor de tema: mesmo controle segmentado do filtro de posts, em miniatura. */ .seletor-tema { display: inline-flex; width: fit-content; margin-bottom: 4px; border: 1px solid var(--divisor); } .seletor-tema button { display: flex; padding: 6px 10px; border: 0; background: transparent; color: var(--apagado); cursor: pointer; transition: background-color 130ms ease, color 130ms ease; } .seletor-tema button + button { border-left: 1px solid var(--divisor); } .seletor-tema button:hover { background: var(--realce); color: var(--texto); } .seletor-tema button.ativo { background: var(--acento); color: var(--sobre-acento); } .seletor-tema button.ativo:hover { background: var(--acento-hover); } .seletor-tema button:focus-visible { outline-offset: -2px; } /* --------------------------------------------------------------------------- Cards de blueprint --------------------------------------------------------------------------- */ .cartao { border: 1px solid var(--divisor); background: transparent; padding: 18px 20px; margin-bottom: 20px; } .cartao > :first-child { margin-top: 0; } .cartao.estreito { width: min(400px, 100%); } .cartao.leitura { max-width: 840px; } /* formulário longo não vira linha larga */ .cartao.vazio { text-align: center; color: var(--apagado); } .cartao.inativo { opacity: 0.55; } .cartao.destaque { border-color: var(--acento); } .cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .cabecalho-pagina h1 { margin: 0; } .cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } .cabecalho-secao h2 { margin: 0; } /* --------------------------------------------------------------------------- Botões --------------------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--divisor); border-radius: 0; background: transparent; color: var(--texto); font: 500 12px var(--font-corpo); cursor: pointer; text-decoration: none; transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease; } .botao:hover { background: var(--realce-acento); } .botao:active { background: var(--realce); } .botao:disabled { opacity: 0.45; cursor: not-allowed; } .botao:disabled:hover { background: transparent; } .botao.primario { padding: 7px 14px; border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); font: 600 14px var(--font-titulo); letter-spacing: .04em; text-transform: uppercase; } .botao.primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); } .botao.primario:active { background: var(--acento-press); border-color: var(--acento-press); } .botao.primario:disabled:hover { background: var(--acento); border-color: var(--acento); } .botao.grande { padding: 10px 18px; font-size: 15px; gap: 8px; } .botao.discreto { color: var(--acento-texto); } .botao.perigo:hover { border-color: var(--erro); color: var(--erro); } .botao.bloco { width: 100%; justify-content: center; margin-top: 8px; } .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .acoes form { margin: 0; } .acoes .direita { margin-left: auto; } /* --------------------------------------------------------------------------- Formulários --------------------------------------------------------------------------- */ label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--apagado-forte); } label.inline { display: inline; margin-left: 8px; } input[type=text], input[type=url], input[type=password], input[type=number], textarea, select { display: block; width: 100%; margin-top: 5px; padding: 7px 10px; border: 1px solid var(--divisor); border-radius: 0; background: var(--superficie); color: var(--texto); caret-color: var(--acento); font: 400 14px/1.5 var(--font-corpo); } input:hover, textarea:hover, select:hover { border-color: var(--acento); } input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--acento); outline-offset: 0; } textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } input[type=file] { margin-top: 5px; color: var(--apagado); font-size: 13px; } ::placeholder { color: var(--apagado); } .linha-form { display: flex; gap: 12px; align-items: flex-start; } .linha-form label { flex: 1; margin-bottom: 0; } .linha-form .botao { margin-top: 22px; } fieldset.provedor { border: 1px solid var(--divisor); padding: 16px 18px 4px; margin: 0 0 20px; } fieldset.provedor.ativo { border-color: var(--acento); } fieldset.provedor legend { display: flex; gap: 8px; align-items: center; padding: 0 8px; font: 600 18px var(--font-titulo); letter-spacing: .02em; text-transform: uppercase; } /* --------------------------------------------------------------------------- Flash e etiquetas --------------------------------------------------------------------------- */ .flash { border: 1px solid var(--divisor); padding: 12px 16px; margin-bottom: 20px; font-size: 14px; } .flash-ok { border-color: var(--ok); color: var(--ok); } .flash-erro { border-color: var(--erro); color: var(--erro); } .flash-aviso { border-color: var(--aviso); color: var(--aviso); } .flash a { color: inherit; } .etiqueta { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 0; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--neutro-fundo); color: var(--neutro-texto); } .etiqueta-novo { background: var(--tinta-100); color: var(--acento-texto); } .etiqueta-aprovado { background: var(--tinta-100); color: var(--acento-texto-forte); } .etiqueta-descartado { background: var(--neutro-fundo); color: var(--neutro-texto); } /* --------------------------------------------------------------------------- Painel: KPIs --------------------------------------------------------------------------- */ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 26px; } .kpi { border: 1px solid var(--divisor); padding: 16px 18px; } .kpi-rotulo { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); } .kpi-valor { font: 600 34px/1.1 var(--font-titulo); font-variant-numeric: tabular-nums; } .kpi-valor span { font: 400 14px var(--font-corpo); color: var(--apagado-forte); } .kpi-nota { font-size: 11px; color: var(--apagado-forte); } /* --------------------------------------------------------------------------- Painel: gráficos --------------------------------------------------------------------------- */ .painel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 26px; } .painel .cartao { margin-bottom: 0; } .grafico-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .grafico-cabecalho h3 { margin: 0; } .grafico-cabecalho .nota { font-size: 11px; } /* Colunas em flex: um dia por barra, altura em porcentagem vinda do servidor. A grade é o próprio fundo do plot — linhas hairline a cada passo. */ .plot { --altura-plot: 120px; --passo-grade: 30px; display: flex; align-items: flex-end; gap: 3px; height: var(--altura-plot); border-bottom: 1px solid var(--divisor); background: repeating-linear-gradient( to top, transparent, transparent calc(var(--passo-grade) - 1px), var(--grade) calc(var(--passo-grade) - 1px), var(--grade) var(--passo-grade) ); } .plot.compacto { --altura-plot: 88px; --passo-grade: 22px; } .barra { flex: 1; min-width: 0; min-height: 2px; /* dia zerado continua sendo um dia, e precisa aparecer */ background: var(--serie-posts); transition: background-color 120ms ease; } .barra:hover { background: var(--serie-posts-hover); } .barra.tokens { background: var(--serie-tokens); } .barra.tokens:hover { background: var(--serie-tokens-hover); } .eixo { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--apagado); } .vazio-grafico { color: var(--apagado); font-size: 13px; padding: 18px 0; margin: 0; } /* Medidor: uma razão contra um limite. A severidade nunca vai só na cor — o texto ao lado diz o número e a porcentagem. */ .medidor { margin-top: 10px; } .medidor-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; color: var(--apagado-forte); margin-bottom: 6px; } .medidor-topo strong { color: var(--texto); font-variant-numeric: tabular-nums; } .medidor-trilha { height: 6px; background: var(--tinta-200); } .medidor-preenchimento { height: 100%; min-width: 4px; background: var(--acento); } .medidor-atencao .medidor-trilha { background: color-mix(in srgb, var(--aviso) 22%, transparent); } .medidor-atencao .medidor-preenchimento { background: var(--aviso); } .medidor-critico .medidor-trilha { background: color-mix(in srgb, var(--erro) 22%, transparent); } .medidor-critico .medidor-preenchimento { background: var(--erro); } .medidor-topo .nota { font-size: 11px; text-align: right; } .medidor > .nota { display: block; margin-top: 8px; font-size: 11px; } /* Corpus: parte-todo em barra empilhada. Cada segmento cresce com a própria contagem (flex-grow), então a proporção é a do dado. */ .barra-corpus { display: flex; height: 22px; border: 1px solid var(--divisor); } .barra-corpus > div { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .corpus-autor { background: var(--acento); color: var(--sobre-acento); } .corpus-gerado { background: var(--tinta-300); color: var(--sobre-tinta); } .legenda { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 10px 0 0; font-size: 11px; color: var(--apagado-forte); } .legenda li { display: flex; align-items: center; gap: 6px; } .chave { width: 10px; height: 10px; flex: none; } .chave.corpus-autor { background: var(--acento); } .chave.corpus-gerado { background: var(--tinta-300); } /* Nenhum valor fica acessível só pelo hover: toda série leva a tabela junto. */ .tabela-dados { margin-top: 10px; max-height: 260px; overflow-y: auto; } .tabela-dados > summary { width: fit-content; cursor: pointer; font-size: 11px; color: var(--apagado); } .tabela-dados > summary:hover { color: var(--acento-texto); } .tabela-dados table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; } .tabela-dados th, .tabela-dados td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--divisor); } .tabela-dados th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); font-weight: 500; } .tabela-dados td:last-child { text-align: right; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Filtro segmentado --------------------------------------------------------------------------- */ .filtros { display: inline-flex; border: 1px solid var(--divisor); } .filtro { padding: 7px 14px; font-size: 12px; color: var(--texto); text-decoration: none; transition: background-color 130ms ease; } .filtro + .filtro { border-left: 1px solid var(--divisor); } .filtro:hover { background: var(--realce); } .filtro.ativo { background: var(--acento); color: var(--sobre-acento); font-weight: 500; } .filtro.ativo:hover { background: var(--acento-hover); } .filtro .contagem { font-variant-numeric: tabular-nums; opacity: .8; } /* --------------------------------------------------------------------------- Post compacto e expansível --------------------------------------------------------------------------- */ .lista-posts { display: flex; flex-direction: column; gap: 14px; } .post { border: 1px solid var(--divisor); } .post.inativo { opacity: 0.55; } .post > summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; list-style: none; cursor: pointer; transition: background-color 130ms ease; } .post > summary::-webkit-details-marker { display: none; } .post > summary:hover { background: var(--realce-fraco); } .post-titulo { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post-meta { font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; } .post > summary .icone { color: var(--apagado); transition: transform 150ms ease; } .post[open] > summary .icone { transform: rotate(180deg); } .post-corpo { padding: 0 18px 16px; } .post-corpo .origem { margin: 0 0 10px; font-size: 11px; } .texto-post { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--divisor); background: var(--lavagem-acento); font: 400 13px/1.6 var(--font-corpo); white-space: pre-wrap; word-break: break-word; } /* O gatilho do editor é o próprio , vestido de botão secundário: o textarea abre sem uma linha de JS. */ .editor { margin-top: 8px; } .editor > summary { display: inline-flex; align-items: center; width: fit-content; padding: 7px 12px; border: 1px solid var(--divisor); font-size: 12px; font-weight: 500; list-style: none; cursor: pointer; transition: background-color 130ms ease; } .editor > summary::-webkit-details-marker { display: none; } .editor > summary:hover { background: var(--realce-acento); } .editor form { margin-top: 10px; } .editor .nota { margin-left: 8px; } /* --------------------------------------------------------------------------- Resultados de busca --------------------------------------------------------------------------- */ .resultado h3 { font-family: var(--font-corpo); font-size: 16px; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.35; margin: 0 0 6px; } .resultado h3 a { color: var(--texto); text-decoration: none; } .resultado h3 a:hover { color: var(--acento-texto); text-decoration: underline; } .resultado .fonte { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 11px; } .resultado p { margin: 0 0 12px; font-size: 13px; } /* --------------------------------------------------------------------------- Prévia das imagens da matéria extraída (/gerar) --------------------------------------------------------------------------- */ .galeria { margin: -6px 0 16px; } .galeria .nota { margin: 0 0 8px; } .galeria code { font-size: 11px; } .galeria-tiras { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .galeria-tiras a { flex: 0 0 auto; line-height: 0; border: 1px solid var(--divisor); background: var(--realce); } .galeria-tiras a:hover { border-color: var(--acento); } .galeria-tiras img { height: 84px; width: auto; max-width: 200px; object-fit: cover; display: block; } /* --------------------------------------------------------------------------- Telas estreitas: a sidebar vira uma faixa no topo. --------------------------------------------------------------------------- */ @media (max-width: 860px) { body { display: block; } main { padding: 20px 18px; } .lateral { width: auto; border-right: 0; border-bottom: 1px solid var(--divisor); } .lateral-nav { flex-direction: row; overflow-x: auto; } .lateral-rodape { flex-direction: row; align-items: baseline; gap: 12px; } .kpis { grid-template-columns: repeat(2, 1fr); } .painel { grid-template-columns: 1fr; } .post > summary { flex-wrap: wrap; } .post-titulo { flex-basis: 100%; white-space: normal; } }