/* GLPI MOBILE — sistema de design do portal (público e autenticado). * * Derivado da referência visual aprovada para esta entrega: estética minimalista, navegação * translúcida, bordas discretas, sombras leves, espaçamento amplo, mono para dado técnico. * * TRÊS DECISÕES ONDE A REFERÊNCIA NÃO FOI SEGUIDA AO PÉ DA LETRA, e o motivo de cada uma: * * 1. SEM Tailwind por CDN. A referência carrega `cdn.tailwindcss.com`, que é o compilador JIT em * tempo de execução — a própria documentação do Tailwind diz para não usar em produção. Num * portal de técnico de campo isso custaria centenas de KB e uma dependência de terceiro no * caminho crítico. As utilidades foram traduzidas para CSS real aqui; o resultado visual é o * mesmo e não há etapa de build nova. * * 2. LARANJA #E54F13, e não o #F05123 da referência. O brief manda PRESERVAR a identidade Tecno IT, * e `redesign-tokens.css` documenta #E54F13 como a cor de MARCA, com o par #C43A08 para texto * sobre branco (contraste ~4.6:1). Identidade vence aproximação de referência. * * 3. TEMA por `data-theme` no , e não por `class="dark"`. O portal já tem `theme.js`, * `service-worker.js` e outras páginas presas ao atributo e à chave `glpi-theme` do * localStorage. Trocar o mecanismo quebraria as páginas que não entram nesta fatia; a PALETA * escura da referência foi adotada, o interruptor não. * * 4. TIPOGRAFIA UNIFICADA NA UBUNTU AUTO-HOSPEDADA (RC3). A versão anterior deste arquivo dizia que * auto-hospedar "exigiria acrescentar binários woff2 ao repositório". Eles JÁ ESTÃO no * repositório: `assets/fonts/ubuntu-{400,500,700}.woff2`, usados pela área de relatórios e pelo * aplicativo. Manter a Inter por `fonts.googleapis.com` custava (a) uma dependência de terceiro * no caminho crítico de um portal de técnico de campo e (b) DUAS tipografias no mesmo produto — * a central em Inter, os relatórios em Ubuntu. Agora as duas famílias de página leem a mesma * fonte, e o portal não depende de CDN nenhuma. Reverter é trocar `--pl-sans` de volta. * O mono não tem binário no repositório, então usa a pilha do sistema (nunca CDN). */ /* Ubuntu auto-hospedada. Mesmos arquivos que `redesign-tokens.css` declara, para que a central de * versões (que carrega SÓ este CSS) tenha a fonte sem depender da outra folha. */ @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Ubuntu'; src: url('../fonts/ubuntu-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- superfícies e texto (escala neutra da referência) ---- * RECALIBRAÇÃO (paridade com a referência): o fundo deixou de ser branco chapado — a página * assenta num off-white (#f7f8fa) e as SUPERFÍCIES (cartão, palco da mídia, busca) é que são * claras, um degrau acima. É a inversão que dá camadas à tela: antes tudo era #fff e a única * separação possível era borda. O texto não muda: contraste alto sem fundo estourado. */ --pl-bg: #f7f8fa; --pl-surface: #ffffff; --pl-surface-hover: #eef0f4; --pl-text: #11181c; /* DEGRAU INTERMEDIÁRIO DE TEXTO (9.52:1 sobre branco). * Só existiam dois tons de tinta: `--pl-text` para tudo o que é primário e `--pl-muted` para * tudo o mais. O resultado media-se na tela: a descrição de cada item do changelog, a data da * coluna presa, a contagem de resultados e a legenda da animação saíam todas EXATAMENTE na mesma * cor — o corpo do texto lido como se fosse metadado. Este degrau separa "texto secundário que * se lê" de "rótulo que se consulta", sem tirar nenhum dos dois do mínimo AA. */ --pl-text-2: #3d474d; --pl-muted: #667079; /* Bordas com a TINTA da página (azul-grafite), não preto puro: em cima do off-white o preto * a 8% esverdeia; a tinta própria mantém o divisor neutro e discreto. */ --pl-border: rgba(16, 22, 34, .08); --pl-border-strong: rgba(16, 22, 34, .16); --pl-code-bg: #eceef3; --pl-badge-bg: rgba(16, 22, 34, .04); --pl-glass: rgba(247, 248, 250, .78); /* O PALCO da mídia: um degrau ABAIXO do fundo no claro (poço suave onde o teaser assenta) e * um degrau ACIMA no escuro. É o token que faz a animação parecer inserida, não pousada. */ --pl-stage-bg: #eceef3; --pl-glow: rgba(229, 79, 19, .05); --pl-shadow-card: 0 0 0 1px rgba(16, 22, 34, .04), 0 8px 30px rgba(16, 22, 34, .06); --pl-shadow-inset: inset 0 1px 0 rgba(16, 22, 34, .05); --pl-shadow-modal: 0 24px 60px rgba(16, 22, 34, .18); --pl-skeleton: rgba(16, 22, 34, .06); /* ---- marca Tecno IT (preservada) ---- */ --pl-brand: #e54f13; --pl-brand-text: #c43a08; /* laranja legível sobre branco */ --pl-brand-soft: rgba(229, 79, 19, .10); --pl-brand-border: rgba(229, 79, 19, .30); /* ---- status: nunca só cor. Cada um tem forma/rótulo próprio no HTML ---- * O âmbar era #b7791f e MEDIA 3.64:1 sobre branco — abaixo do mínimo AA de 4.5:1 para texto * normal, e é justamente a cor do aviso "Versão de homologação" da central. #8A5A0C mede * 5.92:1 sobre branco e 5.23:1 sobre o próprio wash (--pl-warn-soft). O texto do aviso não * mudou; só a tinta ficou legível. */ --pl-ok: #1f7a44; --pl-warn: #8a5a0c; --pl-danger: #c0392b; --pl-ok-soft: rgba(31, 122, 68, .10); --pl-warn-soft: rgba(183, 121, 31, .12); --pl-danger-soft: rgba(192, 57, 43, .10); /* ---- tipografia (auto-hospedada; ver decisão 4 no topo) ---- */ --pl-sans: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --pl-r-sm: 6px; --pl-r: 8px; --pl-r-lg: 12px; --pl-r-xl: 16px; --pl-r-full: 999px; /* CABEÇALHO FINO do modelo aprovado: 56px + 1px de borda. A medida não é arbitrária: é ela que * define o ponto de parada da data presa no feed (`top: nav + 24`) e a folga das âncoras * (`scroll-padding-top: nav + 36`). Mudar aqui move os dois juntos. */ --pl-nav-h: 56px; --pl-dur: 200ms; --pl-ease: cubic-bezier(.2, 0, .2, 1); /* ---- escala de espaçamento FECHADA, com papéis fixos ---- * Base 4 com saltos em 8/16/32/64. Cada degrau tem um uso canônico, e é a existência do papel * — não o número — que impede a página de voltar a ter 14px aqui e 26px ali: * 8 item de lista · 12 título→1º parágrafo · 16 data→corpo e gap da navegação * 20 entre parágrafos · 24 recuo da data em relação à régua vertical * 32 gap da grade e régua→topo · 48 figura no meio do texto * 56 novo item dentro da MESMA data · 64 régua→feed · 72 entre datas */ --pl-s-8: 8px; --pl-s-12: 12px; --pl-s-16: 16px; --pl-s-20: 20px; --pl-s-24: 24px; --pl-s-32: 32px; --pl-s-48: 48px; --pl-s-56: 56px; --pl-s-64: 64px; --pl-s-72: 72px; /* ---- medida de leitura e grade editorial ---- * 624px a 17px dá 67 caracteres por linha. O texto PARA aqui mesmo em telas de 1920px: o resto * da grade fica vazio de propósito, e é esse vazio que a animação lateral ocupa. */ --pl-read: 624px; /* Coluna lateral de data e versão: a faixa do modelo é 160-190px. 180px acomoda "dd/mm/aaaa" * (15px) e o nome longo da versão em mono de 13px quebrando em duas linhas, sem sobrar trilho. */ --pl-col-date: 180px; /* CONTAINER DO MODELO: ~1024px de conteúdo (1088 − 2×32 de margem). A página media 1436px e o * feed parecia perdido nela: o teaser encostava no extremo direito, longe do texto, e o conjunto * lia como documentação esparramada em vez de página editorial. No container do modelo a * proporção fecha: 180 de lateral + 48 de vão + ~796 de conteúdo, tudo a um olhar de distância. */ --pl-page-max: 1088px; --pl-page-pad: 32px; } /* Âncora profunda não pode parar embaixo do cabeçalho fixo: 72 do cabeçalho + 36 de folga. */ html { scroll-padding-top: calc(var(--pl-nav-h) + 36px); } :root[data-theme="dark"] { /* NEAR-BLACK, não preto chapado: #0a0d12 é grafite-azulado profundo — o preto puro achatava * tudo num plano só e estourava o contraste do texto. As superfícies sobem meio degrau * (#10141b) e o palco da mídia fica entre as duas: a tela ganha as mesmas camadas do claro. */ --pl-bg: #0a0d12; --pl-surface: #10141b; --pl-surface-hover: #171c26; --pl-text: #e7e9ec; /* alto contraste (15.2:1) sem o branco estourado do #ededed sobre #000 */ --pl-text-2: #b3b9c2; /* 9.6:1 sobre o near-black — o mesmo papel do #3d474d no tema claro */ --pl-muted: #8a919c; --pl-border: rgba(255, 255, 255, .08); --pl-border-strong: rgba(255, 255, 255, .20); --pl-code-bg: #141924; --pl-badge-bg: rgba(255, 255, 255, .05); --pl-glass: rgba(10, 13, 18, .72); --pl-glow: rgba(229, 79, 19, .12); --pl-shadow-card: 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 40px rgba(0, 0, 0, .5); --pl-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .03); --pl-shadow-modal: 0 24px 60px rgba(0, 0, 0, .6); --pl-skeleton: rgba(255, 255, 255, .06); --pl-stage-bg: #0e1219; --pl-brand-text: #ff7a45; /* o #C43A08 não tem contraste sobre o near-black */ --pl-ok: #4ade80; --pl-warn: #fbbf24; --pl-danger: #f87171; } @media (prefers-reduced-motion: reduce) { :root { --pl-dur: 0ms; } } /* ================================ base ================================ */ .pl, .pl *, .pl *::before, .pl *::after { box-sizing: border-box; } .pl { margin: 0; min-height: 100svh; font-family: var(--pl-sans); background: var(--pl-bg); color: var(--pl-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; line-height: 1.55; transition: background-color var(--pl-dur) var(--pl-ease), color var(--pl-dur) var(--pl-ease); } .pl ::selection { background: var(--pl-brand-soft); color: var(--pl-text); } .pl ::-webkit-scrollbar { width: 6px; height: 6px; } .pl ::-webkit-scrollbar-track { background: transparent; } .pl ::-webkit-scrollbar-thumb { background: var(--pl-border-strong); border-radius: var(--pl-r-full); } .pl ::-webkit-scrollbar-thumb:hover { background: var(--pl-muted); } .pl :focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; border-radius: var(--pl-r-sm); } .pl-mono { font-family: var(--pl-mono); font-variant-ligatures: none; } .pl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* O SKIP-LINK precisa APARECER quando recebe foco, senão quem navega por teclado tem o foco * num alvo invisível — e o primeiro Tab da página vira um passo cego (WCAG 2.4.7). A regra * é restrita a `a.pl-sr:focus` para que `.pl-sr` continue servindo a textos só-leitor de tela. * A cor é a da marca; o azul padrão do navegador não entra nesta identidade. */ a.pl-sr:focus { position: fixed; top: 10px; left: 10px; z-index: 200; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; clip-path: none; overflow: visible; background: var(--pl-bg); color: var(--pl-brand-text); border: 1px solid var(--pl-brand-border); border-radius: var(--pl-r); box-shadow: var(--pl-shadow-card); font-size: 14px; font-weight: 500; text-decoration: none; } /* O brilho de fundo é decorativo: não recebe eventos e não entra na ordem de leitura. */ .pl-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; max-width: 100%; height: 400px; background: radial-gradient(circle, var(--pl-glow) 0%, transparent 70%); pointer-events: none; z-index: 0; } .pl-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; } .pl-wrap--wide { max-width: 1400px; } /* ============================ navegação ============================ */ .pl-nav { position: sticky; top: 0; z-index: 50; height: var(--pl-nav-h); display: flex; align-items: center; background: var(--pl-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pl-border); } .pl-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .pl-nav__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } /* A marca é o logo real da Tecno IT (símbolo "it" + wordmark), igual às demais páginas. Duas variantes por tema: o wordmark grafite não tem contraste sobre o nav escuro. */ .pl-nav__logo { height: 22px; width: auto; display: block; flex: none; } .pl-nav__logo--dark { display: none; } :root[data-theme="dark"] .pl-nav__logo--light { display: none; } :root[data-theme="dark"] .pl-nav__logo--dark { display: block; } /* Sem a opacidade de .45, que punha a barra em 1.86:1 sobre o cabeçalho — decorativa e * `aria-hidden`, mas ainda assim invisível para quem enxerga pouco, e é ela que separa a marca do * nome do produto. Na tinta de metadado ela mede 5.04:1 e continua discreta. */ .pl-nav__sep { color: var(--pl-muted); } .pl-nav__sub { font-size: 13px; font-weight: 500; color: var(--pl-muted); white-space: nowrap; } .pl-nav__links { display: flex; align-items: center; gap: 18px; font-size: 13px; } .pl-nav__link { color: var(--pl-muted); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; transition: color var(--pl-dur) var(--pl-ease); } .pl-nav__link:hover { color: var(--pl-text); } /* Sem `nowrap`, "Notas de atualização" quebrava em duas linhas dentro do cabeçalho de 56px no celular e empurrava os outros controles. Medido em 390px: com nowrap tudo cabe. */ .pl-nav__link { white-space: nowrap; } .pl-nav__rule { width: 1px; height: 16px; background: var(--pl-border); } .pl-themebtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--pl-r); background: none; color: var(--pl-muted); cursor: pointer; transition: background-color var(--pl-dur), border-color var(--pl-dur), color var(--pl-dur); } .pl-themebtn:hover { background: var(--pl-surface-hover); border-color: var(--pl-border); color: var(--pl-text); } .pl-themebtn svg { width: 16px; height: 16px; display: block; } .pl-themebtn .pl-i-dark { display: none; } :root[data-theme="dark"] .pl-themebtn .pl-i-light { display: none; } :root[data-theme="dark"] .pl-themebtn .pl-i-dark { display: block; } /* ============================ cabeçalho ============================ */ .pl-head { padding: 72px 0 28px; position: relative; z-index: 1; } .pl-head--tight { padding: 40px 0 20px; } .pl-h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; } .pl-lead { margin: 0; max-width: 62ch; font-size: 17px; color: var(--pl-muted); letter-spacing: -.01em; } /* ============================== abas ============================== */ .pl-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--pl-border); position: relative; z-index: 1; } .pl-tab { padding: 0 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--pl-muted); cursor: pointer; transition: color var(--pl-dur) var(--pl-ease), border-color var(--pl-dur) var(--pl-ease); } .pl-tab:hover { color: var(--pl-text); } .pl-tab[aria-selected="true"] { color: var(--pl-text); border-bottom-color: var(--pl-text); } .pl-panel { padding-top: 40px; animation: pl-fade .3s var(--pl-ease); } @keyframes pl-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pl-panel { animation: none; } } /* ============================ changelog ============================ * A GRADE do feed (`pl-log*`) foi escrita aqui e nunca usada: eram 180px de coluna de data e um * `1fr` sem teto de leitura. Ela vive agora na CAMADA EDITORIAL, no fim deste arquivo, com as * medidas da referência (293px de data, 624px de coluna de leitura, régua vertical de 1px). * Manter duas definições da mesma coisa fazia a primeira vencer as consultas por regra e a * segunda vencer a cascata — nenhuma das duas sendo a que se lê no arquivo. * `.pl-entry__meta` saiu junto: era `display: none` e nenhum renderizador a emitia. */ .pl-entry { padding-bottom: 72px; } .pl-entry:last-child { padding-bottom: 24px; } .pl-entry__h { margin: 0 0 12px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; } .pl-entry__lead { margin: 0 0 26px; font-size: 15px; color: var(--pl-muted); } /* A ENTRADA ANTERIOR NÃO É APAGADA. * Ela era desenhada com `opacity: .62`, e a leitura só voltava no `:hover`. Medido sobre branco: * o corpo dessas entradas caía para 2.45:1 e o texto do aviso de reprovação para 2.71:1, contra o * mínimo AA de 4.5:1 — e SETE das oito entradas do feed são "anteriores". Pior, `:hover` não * existe no telefone, que é justamente onde este portal é aberto: lá a legibilidade nunca voltava, * e o registro das três candidatas reprovadas ficava permanentemente ilegível. * A distinção continua existindo, e por TEXTO: "Arquivada", "Não recomendada" e a coluna de data. * A referência não usa opacidade em nenhum ponto do feed — ela orienta pela data. A classe segue * sendo emitida pelo renderizador e continua disponível como gancho. */ .pl-entry--past { opacity: 1; } /* A régua vertical de 1px do changelog é UMA só, e é a linha do tempo à esquerda do feed. Cada * bloco de itens tinha a sua, a 16px do texto: duas verticais paralelas dentro da mesma entrada, * e a segunda ainda comia 17px da medida de leitura. O que separa os blocos agora é o rótulo e o * espaço, como no resto da página. */ .pl-group { margin-bottom: 22px; } .pl-group__h { margin: 0 0 10px; font-size: 13px; font-weight: 500; } .pl-group__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .pl-group__list li { display: flex; gap: 12px; font-size: 14px; color: var(--pl-text-2); } /* Ponto médio, não travessão: regra permanente do dono — nenhum travessão em texto ou marcação * visível, em lugar nenhum. */ .pl-group__list li::before { content: '·'; color: var(--pl-muted); opacity: .7; flex: none; font-weight: 700; } .pl-group__list strong { color: var(--pl-text); font-weight: 500; } /* ============================== chips ============================== */ /* MONO SÓ PARA DADO TÉCNICO. Todo rótulo saía em monoespaçada de 11px — inclusive "Suspensa para * manutenção" e "Beta", que são palavras e não identificadores. Numa página de leitura isso faz * cada estado parecer um token de sistema. A base passa a ser a tipografia do texto; a mono fica * onde ela informa: o número da versão (`--brand`) e o `versionCode` (`pl-mono`). */ .pl-chip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 2px 9px; border-radius: var(--pl-r-full); border: 1px solid var(--pl-border); background: var(--pl-code-bg); font-family: var(--pl-sans); font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: var(--pl-muted); } .pl-chip.pl-mono { font-family: var(--pl-mono); font-size: 11px; letter-spacing: 0; } .pl-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-brand); opacity: .85; flex: none; } .pl-chip--brand { background: var(--pl-brand-soft); border-color: var(--pl-brand-border); color: var(--pl-brand-text); } .pl-chip--ok { background: var(--pl-ok-soft); color: var(--pl-ok); border-color: transparent; } .pl-chip--warn { background: var(--pl-warn-soft); color: var(--pl-warn); border-color: transparent; } .pl-chip--danger { background: var(--pl-danger-soft); color: var(--pl-danger); border-color: transparent; } /* ============================= botões ============================= */ /* `text-decoration: none` não é detalhe: metade dos botões do portal são (baixar, ver * detalhes), e sem a regra eles herdavam o sublinhado padrão do navegador — um retângulo com * borda, fundo e o rótulo sublinhado por dentro. `max-width: 100%` impede que o rótulo mais * comprido empurre a coluna que o contém. */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: var(--pl-r); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; max-width: 100%; background: var(--pl-text); color: var(--pl-bg); transition: opacity var(--pl-dur) var(--pl-ease), background-color var(--pl-dur), border-color var(--pl-dur); } .pl-btn:hover { opacity: .85; } .pl-btn[disabled] { opacity: .45; cursor: not-allowed; } /* A AUSÊNCIA DECLARADA NÃO É UM BOTÃO DESLIGADO. * Este elemento ocupa o lugar do CTA e diz POR QUE ele não existe — logo, é a frase que mais * precisa ser lida quando não há oferta. Com `opacity: .45` ela media 3.1:1 sobre branco, abaixo * do mínimo AA, e ainda parecia um controle que talvez respondesse ao toque. Agora: opacidade * cheia, tinta de metadado (5.04:1), moldura TRACEJADA — que se lê como vaga vazia, não como * controle — e o rótulo pode quebrar em duas linhas. Era essa quebra que faltava: em 360px o * rótulo tem 340px de largura numa coluna de 312px, e era ele quem produzia os 4px de rolagem * horizontal do documento inteiro. */ .pl-btn[aria-disabled="true"] { opacity: 1; cursor: default; background: none; color: var(--pl-muted); border: 1px dashed var(--pl-border-strong); white-space: normal; text-align: center; } .pl-btn--ghost { background: transparent; border-color: var(--pl-border); color: var(--pl-text); } .pl-btn--ghost:hover { background: var(--pl-surface); opacity: 1; } /* Mesma conta que já tinha tirado o `--pl-brand` do CTA de download: branco sobre #E54F13 mede * 3.85:1, abaixo do mínimo AA de 4.5:1 para 14px/500. Este é o botão de baixar da entrada em * destaque do feed e o "Ir para o acesso" do `login.html` — dois controles primários. O tom é o * mesmo do CTA (#c43a08, 5.31:1) e é LITERAL de propósito: `--pl-brand-text` vira #ff7a45 no tema * escuro, e branco sobre ele mede 2.4:1. Fundo preenchido não troca de tinta com o tema. */ .pl-btn--brand { background: #c43a08; color: #fff; } .pl-btn--brand:hover { opacity: 1; background: #a83207; } .pl-btn--sm { padding: 6px 12px; font-size: 13px; } .pl-btn--block { width: 100%; } /* CTA de download em DESTAQUE: laranja da marca, maior, com sombra e ícone — o botão principal da central de versões não deve se confundir com os secundários (grafite). */ /* CTA principal de download. * * O fundo NAO e' `--pl-brand` (#E54F13): branco sobre ele mede 3.85:1, abaixo do minimo * AA de 4.5:1 para 15px/600 — e este e' justamente o controle mais importante da pagina. * O tom usado (#c43a08, 5.31:1) ja existia no sistema: era o proprio estado de hover deste * botao. Texto, tamanho, forma, icone e sombra ficam identicos; muda so a tonalidade, e o * hover desce mais um passo (#a83207, 6.72:1) para continuar dando retorno visivel. */ /* SEM BRILHO COLORIDO. A sombra projetada em laranja (`0 8px 20px rgba(229,79,19,.30)`) fazia o * CTA pairar sobre o texto como um botão de loja de aplicativos — é o gesto mais chamativo de uma * página cuja proposta é o contrário disso, e a única sombra colorida do sistema. O destaque * continua inteiro: é o único elemento laranja preenchido da tela, e o maior deles. O retorno de * hover deixa de ser o tamanho da sombra e passa a ser a própria tinta, que escurece um degrau. */ .pl-btn--download { background: #c43a08; color: #fff; border-color: transparent; padding: 13px 26px; font-size: 15px; font-weight: 600; border-radius: 12px; } .pl-btn--download:hover { opacity: 1; background: #a83207; } .pl-btn--download svg { width: 18px; height: 18px; flex: none; } /* O BOTAO DA PAGINA DE DOWNLOAD, e o tamanho e a decisao. * * 56px de altura porque ele e a UNICA acao da pagina e vai ser tocado com o telefone na mao, muitas * vezes em pe e no sol. O minimo recomendado de alvo de toque e 44px; aqui nao ha disputa por * espaco com nada, entao nao ha motivo para ficar no minimo. Largura cheia no celular pelo mesmo * motivo: a area util e a linha inteira, e nao um retangulo no meio dela. */ .pl-btn--hero { min-height: 56px; padding: 16px 32px; font-size: 17px; letter-spacing: .01em; border-radius: 14px; justify-content: center; } .pl-btn--hero svg { width: 20px; height: 20px; } /* ====================== pagina de download (home) ====================== */ /* UMA PERGUNTA, UMA RESPOSTA, e agora a resposta tem CORPO. * * O QUE MUDOU EM 01/09/2026, e por que. A versao anterior era um bloco alinhado a esquerda com * quatro linhas de texto no alto de uma pagina vazia: tecnicamente correta, e lida pela gestao * como "pagina improvisada". O que faltava nao era conteudo - era CENTRO, PESO e RITMO. * * - O bloco e CENTRADO na pagina e o texto e centrado dentro dele. Uma pagina de um ato so nao * tem coluna: alinhar a esquerda deixa dois tercos da tela vazios a direita, e e isso que faz * a pagina parecer inacabada. * - Ele assenta numa SUPERFICIE (`--pl-surface`) sobre o off-white da pagina, com a sombra de * cartao que o resto do portal ja usa. Antes era texto solto sobre o fundo. * - A FICHA e uma grade de quatro campos, e ela e o que responde "e este mesmo o arquivo?" sem * virar paragrafo. Rotulo pequeno em cima, valor legivel embaixo: e a hierarquia que o painel * tambem passa a usar. * - Os TRES PASSOS sao numerados com marcador proprio, porque quem le esta em pe com o telefone * na mao e precisa achar onde parou. * * NADA AQUI VIROU BOTAO. Ha exatamente um `pl-btn` na pagina, e `home-download.test.js` conta. */ .pl-baixar { padding: 64px 0 88px; } .pl-baixar__bloco { max-width: 40rem; /* CENTRADO NA PAGINA. `pl-wrap--page` ja limita a largura util; isto centra o cartao dentro * dela em vez de o deixar colado a esquerda. */ margin: 0 auto; text-align: center; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: 20px; padding: 48px 40px 40px; box-shadow: var(--pl-shadow-card); } /* O icone do proprio aplicativo, com o raio do Android para ser reconhecido como icone de app. */ .pl-baixar__icone { width: 72px; height: 72px; display: block; margin: 0 auto 20px; border-radius: 18px; box-shadow: 0 4px 14px rgba(16, 22, 34, .14); } .pl-baixar__h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--pl-text); } /* `--pl-text-2` e nao `--pl-muted`: esta linha e para LER, e o cinza de metadado a empurrava para * o mesmo tom da ficha logo abaixo, que e para CONSULTAR. Os dois papeis nao podem ter a mesma * tinta - foi o defeito que o degrau intermediario de texto nasceu para resolver. */ .pl-baixar__lead { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--pl-text-2); } /* O `flex` em coluna e o que deixa o aviso de indisponivel cair embaixo do lugar do botao sem * mudar a estrutura: os dois estados ocupam o mesmo ponto da pagina. `center` porque o bloco * inteiro passou a ser centrado. */ .pl-baixar__acao { margin: 32px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; } .pl-baixar__motivo { font-size: 14px; color: var(--pl-muted); } /* ---- ficha do arquivo ---- */ .pl-baixar__ficha { margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--pl-border); display: grid; /* QUATRO CAMPOS EM UMA LINHA no desktop, dois no telefone, e a grade e EXPLICITA. * * `auto-fit` com `minmax(8.5rem, 1fr)` foi a primeira tentativa e ela produziu 3 + 1: dentro do * cartao sobram cerca de 520px, e quatro colunas de 8.5rem (136px) mais o vao nao cabem, entao a * grade quebrava a quarta para uma segunda linha sozinha - pior do que qualquer alternativa, * porque um campo orfao embaixo parece erro. Com quatro colunas declaradas, cada uma fica com * cerca de 120px e os quatro campos ficam na mesma linha, que e o que faz a ficha ser lida como * uma faixa de dados e nao como uma lista. */ grid-template-columns: repeat(4, 1fr); gap: 20px 12px; } .pl-baixar__ficha-item { min-width: 0; } /* ROTULO: pequeno, versalete, tinta de metadado. Ele e para CONSULTAR, nao para ler. 12px e * aceitavel aqui - e a unica tipografia abaixo de 14px que sobrou nesta pagina - porque nenhuma * informacao vive nele: ele so nomeia o valor que esta logo abaixo, em 17px. */ .pl-baixar__ficha dt { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); margin: 0 0 4px; } /* VALOR: e ele que se le. `tabular-nums` porque tres dos quatro campos sao numero. */ .pl-baixar__ficha dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--pl-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* ---- como instalar ---- */ .pl-baixar__comoinstalar { margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--pl-border); /* Os passos sao uma INSTRUCAO, e instrucao se le da esquerda. O resto do bloco e centrado; esta * secao e a excecao, e a excecao e o que a torna legivel. */ text-align: left; } .pl-baixar__passos-t { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--pl-text); text-align: center; } .pl-baixar__passos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; counter-reset: passo; } .pl-baixar__passos li { counter-increment: passo; position: relative; padding-left: 40px; font-size: 15px; line-height: 1.55; color: var(--pl-text-2); } /* O NUMERO E UM MARCADOR, e nao um `1.` de lista: disco da marca, com o digito centrado. Quem le * em pe no sol acha onde parou pelo circulo, nao pelo ponto. */ .pl-baixar__passos li::before { content: counter(passo); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--pl-brand-soft); color: var(--pl-brand-text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .pl-baixar__passos b { font-weight: 700; color: var(--pl-text); } /* ---- linha tecnica ---- */ /* POR ULTIMO E DISCRETA. Ela e para quem confere o pacote antes de distribuir; o tecnico de campo * ja terminou de ler nos tres passos acima. */ .pl-baixar__tec { margin: 28px 0 0; padding: 16px 0 0; border-top: 1px solid var(--pl-border); font-size: 13px; color: var(--pl-muted); } @media (max-width: 640px) { .pl-baixar { padding: 32px 0 56px; } /* NO TELEFONE O CARTAO PERDE A MOLDURA. Borda e sombra num bloco que ocupa a largura inteira da * tela nao separam nada de nada - so comem 40px de respiro horizontal, que e exatamente o que * falta quando a tela tem 360px. */ .pl-baixar__bloco { padding: 8px 0 0; background: none; border: 0; box-shadow: none; border-radius: 0; } .pl-baixar__h1 { font-size: 34px; } .pl-baixar__lead { font-size: 16px; } /* O botao ocupa a linha inteira, e o `

` que o abriga tambem: sem isto o alinhamento do container deixaria um botao estreito no meio. */ .pl-baixar__acao { align-items: stretch; } .pl-baixar__acao .pl-btn--hero { width: 100%; } /* DUAS COLUNAS NO TELEFONE. Quatro campos em 360px dariam 80px por coluna, e "31/08/2026" nao * cabe em 80px sem quebrar no meio da data. */ .pl-baixar__ficha { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } } /* ============================== cards ============================== */ .pl-card { /* SUPERFÍCIE, não fundo: com o off-white/near-black de página, o cartão sobe um degrau * (branco no claro, #10141b no escuro) e a camada aparece sem depender só da borda. */ background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-r-lg); padding: 22px; transition: border-color var(--pl-dur) var(--pl-ease); } .pl-card--raised { background: var(--pl-surface); box-shadow: var(--pl-shadow-inset); } .pl-card--featured { background: var(--pl-surface); border-color: var(--pl-brand-border); box-shadow: var(--pl-shadow-inset); position: relative; overflow: hidden; } .pl-card--featured::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--pl-brand); } .pl-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .pl-card__h { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .pl-card__sub { margin: 0; font-size: 13px; color: var(--pl-muted); } .pl-card__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-family: var(--pl-mono); font-size: 12px; color: var(--pl-muted); } .pl-card__fact { display: inline-flex; align-items: center; gap: 6px; } .pl-card__foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--pl-border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .pl-card__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-muted); } .pl-hash { font-family: var(--pl-mono); font-size: 11px; color: var(--pl-muted); background: var(--pl-code-bg); padding: 4px 8px; border-radius: var(--pl-r-sm); user-select: all; cursor: copy; overflow-wrap: anywhere; max-width: 100%; } .pl-stack { display: flex; flex-direction: column; gap: 18px; } .pl-links { display: flex; flex-wrap: wrap; gap: 10px; } .pl-links a { padding: 6px 12px; border-radius: var(--pl-r); border: 1px solid var(--pl-border); background: var(--pl-surface); color: var(--pl-text); font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color var(--pl-dur) var(--pl-ease); } .pl-links a:hover { border-color: var(--pl-border-strong); } /* ============================== modal ============================== */ .pl-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } .pl-modal[hidden] { display: none; } .pl-modal__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--pl-ease); border: 0; padding: 0; cursor: default; } .pl-modal__panel { position: relative; width: 100%; max-width: 400px; background: var(--pl-surface); border: 1px solid var(--pl-border); border-radius: var(--pl-r-xl); box-shadow: var(--pl-shadow-modal); padding: 30px; transform: scale(.96); opacity: 0; transition: transform .3s var(--pl-ease), opacity .3s var(--pl-ease); max-height: calc(100svh - 32px); overflow-y: auto; } .pl-modal[data-open="1"] .pl-modal__back { opacity: 1; } .pl-modal[data-open="1"] .pl-modal__panel { transform: none; opacity: 1; } .pl-modal__x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--pl-r-sm); background: none; color: var(--pl-muted); cursor: pointer; } .pl-modal__x:hover { background: var(--pl-surface-hover); color: var(--pl-text); } .pl-modal__x svg { width: 16px; height: 16px; } .pl-modal__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 26px; } .pl-modal__mark { width: 38px; height: 38px; border-radius: var(--pl-r); background: var(--pl-brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); color: #fff; font-size: 15px; font-weight: 700; user-select: none; } .pl-modal__h { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.025em; } .pl-modal__sub { margin: 0; font-size: 14px; color: var(--pl-muted); } /* ============================ formulário ============================ */ .pl-form { display: flex; flex-direction: column; gap: 16px; } .pl-field { display: flex; flex-direction: column; gap: 6px; } .pl-field__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pl-label { font-size: 13px; font-weight: 500; color: var(--pl-text); } .pl-hint { font-size: 12px; color: var(--pl-muted); } .pl-input { width: 100%; padding: 10px 12px; /* 16px evita o zoom automático do iOS ao focar o campo. */ font-family: inherit; font-size: 16px; color: var(--pl-text); background: var(--pl-bg); border: 1px solid var(--pl-border); border-radius: var(--pl-r); box-shadow: var(--pl-shadow-inset); transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur); } .pl-input::placeholder { color: var(--pl-muted); opacity: .55; } .pl-input:focus-visible { outline: none; border-color: var(--pl-brand); box-shadow: 0 0 0 3px var(--pl-brand-soft); } .pl-input[aria-invalid="true"] { border-color: var(--pl-danger); } select.pl-input { font-size: 14px; cursor: pointer; } .pl-pw { position: relative; display: flex; } .pl-pw .pl-input { padding-right: 76px; } .pl-pw__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--pl-r-sm); background: none; color: var(--pl-brand-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; } .pl-pw__btn:hover { background: var(--pl-surface-hover); } .pl-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .pl-check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--pl-brand); flex: none; cursor: pointer; } .pl-check__t { display: block; font-weight: 500; } .pl-check__d { display: block; font-size: 12px; color: var(--pl-muted); } /* ============================== estados ============================== */ /* BLOCO, e não flex. O conteúdo do aviso é uma frase contínua — "Versão de homologação. * Destinada a testes internos…" — e em `display: flex` o virava um item de flex próprio, que * encolhia e quebrava sozinho ("Versão de / homologação.") ao lado do resto do texto. Passava * despercebido enquanto o aviso atravessava a página inteira; com a coluna de leitura travada em * 624px ele quebra sempre. O mesmo markup está em `login.html` e em `relatorios.html`. */ .pl-alert { padding: 11px 14px; border-radius: var(--pl-r); font-size: 13px; line-height: 1.5; background: var(--pl-danger-soft); border: 1px solid var(--pl-danger); color: var(--pl-danger); } .pl-alert[hidden] { display: none; } .pl-alert--warn { background: var(--pl-warn-soft); border-color: var(--pl-warn); color: var(--pl-warn); } .pl-alert--ok { background: var(--pl-ok-soft); border-color: var(--pl-ok); color: var(--pl-ok); } .pl-empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--pl-border); border-radius: var(--pl-r-lg); } .pl-empty__h { margin: 0 0 6px; font-size: 15px; font-weight: 600; } .pl-empty__p { margin: 0 auto 16px; max-width: 46ch; font-size: 14px; color: var(--pl-muted); } .pl-skel { background: var(--pl-skeleton); border-radius: var(--pl-r-sm); animation: pl-pulse 1.4s ease-in-out infinite; } .pl-skel--line { height: 12px; margin-bottom: 10px; } .pl-skel--card { height: 92px; margin-bottom: 14px; border-radius: var(--pl-r-lg); } @keyframes pl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .pl-skel { animation: none; } } .pl-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: pl-rot .7s linear infinite; } @keyframes pl-rot { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pl-spin { animation: none; } } /* Aviso de recorte/indisponibilidade. "Não informado" nunca vira zero. */ .pl-na { color: var(--pl-muted); font-style: italic; } /* ============================ responsivo ============================ */ @media (max-width: 900px) { .pl-head { padding-top: 48px; } } @media (max-width: 620px) { .pl-wrap { padding: 0 16px; } .pl-nav__sub, .pl-nav__sep { display: none; } .pl-nav__links { gap: 12px; } /* Link REDUNDANTE no celular: "Central de versões" some porque o logo do cabeçalho já leva para lá e o rodapé repete o destino. O que não é redundante (Notas, Entrar) fica. */ .pl-nav__link--opt { display: none; } .pl-card__row { flex-direction: column; align-items: stretch; } .pl-card__row .pl-btn { width: 100%; } .pl-modal__panel { padding: 24px 20px; } } /* ====================================================================== * CAMADA COMPARTILHADA (RC3) — um só sistema para as DUAS famílias de página * * A central de versões carregava só este arquivo; os relatórios e o 404 carregavam * `redesign-tokens.css` + `redesign-pages.css`. Eram dois vocabulários visuais para o mesmo * produto. Em vez de criar um TERCEIRO, esta camada acrescenta aqui o que faltava (rodapé * institucional, breadcrumb, filtros, KPIs, tabela, tooltip, drawer, moldura de mídia, * lista de seções) e `redesign-tokens.css` passou a apontar as suas semânticas para as * MESMAS primitivas de cor, raio e tipografia. * * Nenhum seletor abaixo depende de `.pl` no : a página de relatórios usa o layout do * outro arquivo e ainda assim precisa do cabeçalho e do rodapé desta camada. * ====================================================================== */ /* Foco visível PORTÁVEL: os componentes `pl-*` guardam o próprio anel, senão o azul padrão do * navegador reaparece nas páginas que não têm `.pl` no . */ .pl-btn:focus-visible, .pl-tab:focus-visible, .pl-input:focus-visible, .pl-chipbtn:focus-visible, .pl-seg__b:focus-visible, .pl-kpi:focus-visible, .pl-crumb a:focus-visible, .pl-links a:focus-visible, .pl-nav__link:focus-visible, .pl-themebtn:focus-visible, .pl-media__play:focus-visible, .pl-drawer__link:focus-visible, .pl-navburger:focus-visible, .pl-foot__links a:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; border-radius: var(--pl-r-sm); } .pl-btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .pl-btn:active { transform: none; } } /* Estado de carregamento: o alvo não muda de tamanho e o clique repetido não passa. */ .pl-btn[data-loading="1"] { pointer-events: none; opacity: .7; } /* ALVO DE TOQUE DE 44px SEM INFLAR O DESENHO. * * Medido no portal antes desta camada: link de navegação com 20px de altura, botão de tema com * 32px, link de rodapé com 20px. No telefone do técnico — que é onde este portal é aberto — um * alvo de 20px é errar e tentar de novo. Aumentar o padding resolveria o toque e engordaria o * cabeçalho de 56px, então a área clicável é estendida por um pseudo-elemento POSICIONADO: ele * não ocupa espaço no fluxo, o desenho continua igual, e o dedo passa a ter 44px. * O pseudo-elemento é filho do próprio link/botão, então o clique nele aciona o elemento. */ .pl-nav__link, .pl-nav__brand, .pl-themebtn, .pl-crumb a, .pl-foot__links a, .pl-links a, .pl-chipbtn, .pl-seg__b, .pl-btn { position: relative; } .pl-nav__link::after, .pl-nav__brand::after, .pl-themebtn::after, .pl-crumb a::after, .pl-foot__links a::after, .pl-links a::after, .pl-chipbtn::after, .pl-seg__b::after, .pl-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; min-width: 44px; } /* O logo do cabeçalho é um com dois irmãos: o pseudo-elemento cobriria a área toda e * ficaria acima deles. Fica atrás, e o clique continua chegando ao link. */ .pl-nav__brand::after { z-index: -1; } /* ---------------------------- breadcrumb ---------------------------- */ .pl-crumb { font-size: 13px; color: var(--pl-muted); } .pl-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .pl-crumb a { color: var(--pl-muted); text-decoration: none; } .pl-crumb a:hover { color: var(--pl-text); text-decoration: underline; } .pl-crumb li + li::before { content: "/"; margin-right: 8px; opacity: .45; } .pl-crumb [aria-current="page"] { color: var(--pl-text); } /* --------------------------- barra de filtros --------------------------- * Alvo de toque de 44px em TODOS os controles: o portal é aberto no telefone do técnico. */ .pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .pl-toolbar__grow { flex: 1 1 240px; min-width: 0; } .pl-search { position: relative; display: flex; align-items: center; } .pl-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--pl-muted); pointer-events: none; } .pl-search .pl-input { padding-left: 38px; min-height: 44px; } .pl-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--pl-border); border-radius: var(--pl-r-full); background: var(--pl-surface); } .pl-seg__b { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--pl-r-full); background: none; color: var(--pl-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color var(--pl-dur) var(--pl-ease), color var(--pl-dur); } .pl-seg__b:hover { color: var(--pl-text); } /* O SEGMENTO ATIVO ERA LARANJA CHEIO, e branco sobre `--pl-brand` mede 3.85:1 — abaixo do mínimo * AA de 4.5:1 para 13px. É a mesma conta que já tinha tirado o `--pl-brand` do fundo do CTA de * download (ver `.pl-btn--download`), e aqui ela pesava duas vezes: além de ilegível, dois * segmentos laranja-cheio dentro de uma área RECOLHÍVEL de refinamento eram os objetos mais * saturados da página, mais do que o próprio botão de baixar. O wash da marca com o laranja * legível (#c43a08) mede 5.1:1 e já é o estado ativo dos chips do sistema. */ .pl-seg__b[aria-pressed="true"] { background: var(--pl-brand-soft); color: var(--pl-brand-text); font-weight: 500; } .pl-seg__b[disabled] { opacity: .45; cursor: not-allowed; } /* Chips CLICÁVEIS (filtro por categoria). O chip com contagem zero é DESABILITADO em vez de * escondido: sumir com a categoria faria parecer que ela não existe, e o zero é informação. */ .pl-chipbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid var(--pl-border); border-radius: var(--pl-r-full); background: var(--pl-surface); color: var(--pl-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color var(--pl-dur) var(--pl-ease), color var(--pl-dur), background-color var(--pl-dur); } .pl-chipbtn:hover:not([disabled]) { color: var(--pl-text); border-color: var(--pl-border-strong); } .pl-chipbtn[aria-pressed="true"] { background: var(--pl-brand-soft); border-color: var(--pl-brand-border); color: var(--pl-brand-text); } .pl-chipbtn[disabled] { opacity: .45; cursor: not-allowed; } .pl-chipbtn__n { font-family: var(--pl-mono); font-size: 11px; opacity: .8; } .pl-filters { display: flex; flex-wrap: wrap; gap: 8px; } /* -------------------------- grid, KPI, tabela -------------------------- */ .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .pl-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 720px) { .pl-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pl-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 76px; padding: 14px 16px; border: 1px solid var(--pl-border); border-radius: var(--pl-r-lg); background: var(--pl-bg); color: var(--pl-text); font: inherit; cursor: pointer; transition: border-color var(--pl-dur) var(--pl-ease); } .pl-kpi:hover { border-color: var(--pl-border-strong); } .pl-kpi[aria-pressed="true"] { border-color: var(--pl-brand-border); box-shadow: inset 0 -3px 0 var(--pl-brand); } .pl-kpi__v { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } .pl-kpi__l { font-size: 13px; color: var(--pl-muted); } .pl-tablewrap { overflow-x: auto; border: 1px solid var(--pl-border); border-radius: var(--pl-r-lg); } .pl-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pl-table th, .pl-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--pl-border); } .pl-table tbody tr:last-child td { border-bottom: 0; } .pl-table th { font-weight: 500; color: var(--pl-muted); background: var(--pl-surface); white-space: nowrap; } .pl-table td.pl-mono { font-size: 12px; overflow-wrap: anywhere; } /* ------------------------------ tooltip ------------------------------ * Só CSS, e só em hover/foco. O texto vive em `data-tip`, e o MESMO texto é obrigatório em * `aria-label` ou `title` no HTML: leitor de tela não lê pseudo-elemento. */ .pl-tip { position: relative; } .pl-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 130px; max-width: 240px; padding: 7px 10px; z-index: 90; background: var(--pl-text); color: var(--pl-bg); border-radius: var(--pl-r-sm); font-size: 12px; font-weight: 400; line-height: 1.35; text-align: center; white-space: normal; opacity: 0; pointer-events: none; transition: opacity var(--pl-dur) var(--pl-ease); } .pl-tip:hover::after, .pl-tip:focus-visible::after { opacity: 1; } /* ---------------------- drawer (navegação no celular) ---------------------- */ .pl-drawer { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: flex-end; } .pl-drawer[hidden] { display: none; } .pl-drawer__back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); border: 0; padding: 0; cursor: default; } .pl-drawer__panel { position: relative; width: min(86vw, 320px); height: 100%; overflow-y: auto; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--pl-bg); border-left: 1px solid var(--pl-border); box-shadow: var(--pl-shadow-modal); display: flex; flex-direction: column; gap: 6px; } .pl-drawer__link { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--pl-r); color: var(--pl-text); text-decoration: none; font-size: 15px; font-weight: 500; } .pl-drawer__link:hover { background: var(--pl-surface-hover); } .pl-drawer__link[aria-current="page"] { color: var(--pl-brand-text); background: var(--pl-brand-soft); } .pl-navburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--pl-border); border-radius: var(--pl-r); background: none; color: var(--pl-text); cursor: pointer; } .pl-navburger svg { width: 18px; height: 18px; } /* -------------------- moldura de mídia (animação em iframe) -------------------- * PROPORÇÃO REAL do teaser: 1080x1920 (9/16), lida do próprio HTML da animação. A altura é * limitada para o vertical não empurrar o resto da página no desktop, e a largura sai da * proporção — sem esticar, sem cortar e sem barra de rolagem interna. * O fundo é PRETO porque o HTML da animação é preto: fundo branco criaria uma moldura clara * em volta de um vídeo escuro. Nada de borda azul. */ .pl-media { display: flex; flex-direction: column; align-items: center; } /* A LARGURA é a única medida declarada, e a altura sai de `aspect-ratio`. Declarar largura E * altura (a primeira versão fazia `width:100%` no celular) faz a proporção ser IGNORADA e a * animação vertical aparece esticada. Aqui o teto de altura entra como teto de LARGURA — o * mesmo limite, sem tirar a proporção do controle. Medido: 0.5625 = 9/16 em todas as larguras. */ .pl-media__frame { position: relative; aspect-ratio: 9 / 16; --pl-media-h: min(76svh, 760px); width: min(100%, calc(var(--pl-media-h) * 9 / 16)); height: auto; /* Raio 8px e moldura de 1px, como toda mídia da referência — sem sombra projetada. A sombra de * cartão (`--pl-shadow-card`) fazia a animação flutuar acima da página como um widget; num * changelog editorial a mídia é parte do texto, não um objeto pousado sobre ele. */ overflow: hidden; border-radius: var(--pl-r); border: 1px solid var(--pl-border); background: #000; } .pl-media__frame > iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; } /* Legenda no degrau "micro" da escala: 13 / 20.8. */ .pl-media__cap { margin: 12px auto 0; max-width: 52ch; font-size: 13px; line-height: 20.8px; color: var(--pl-muted); text-align: center; } /* Com `prefers-reduced-motion` a animação NÃO começa sozinha: a moldura vira botão. O arquivo * da animação é intocado (fidelidade byte a byte), então o respeito ao ajuste é feito AQUI, * decidindo QUANDO carregar o iframe. */ .pl-media__play { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 24px; border: 0; background: #000; color: #fff; font: inherit; font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; } .pl-media__play span { max-width: 26ch; color: rgba(255, 255, 255, .72); font-size: 12px; font-weight: 400; } .pl-media__play::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: var(--pl-brand); box-shadow: 0 8px 20px rgba(229, 79, 19, .35); } .pl-media[data-hold="1"] .pl-media__play { display: flex; } /* No celular só o TETO muda; a proporção continua vindo de `aspect-ratio`. */ @media (max-width: 620px) { .pl-media__frame { --pl-media-h: min(72svh, 640px); } } /* O espaçamento da mídia é do HOSPEDEIRO, não do bloco: no detalhe ela segue o fluxo do artigo; * na home é a coluna direita da release em destaque e o recuo vem da grade. */ #detalhe .pl-media { margin: 32px 0 8px; } /* O aviso da nota na PÁGINA DE DETALHE — o mesmo bloco, outro hospedeiro, outro recuo. */ #detalhe .pl-aviso { margin: 16px 0 4px; } /* ---------------------------- rodapé institucional ---------------------------- */ .pl-foot { border-top: 1px solid var(--pl-border); margin-top: 48px; } .pl-foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 32px 0 calc(44px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--pl-muted); } .pl-foot__brand { display: flex; align-items: center; gap: 10px; } .pl-foot__logo { height: 18px; width: auto; display: block; } .pl-foot__logo--dark { display: none; } :root[data-theme="dark"] .pl-foot__logo--light { display: none; } :root[data-theme="dark"] .pl-foot__logo--dark { display: block; } .pl-foot b { color: var(--pl-text); font-weight: 500; } .pl-foot__links { display: flex; flex-wrap: wrap; gap: 16px; } .pl-foot__links a { color: var(--pl-muted); text-decoration: none; } .pl-foot__links a:hover { color: var(--pl-text); text-decoration: underline; } /* -------------------- lista de seções configuráveis -------------------- */ .pl-secs { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; } .pl-secs legend { padding: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-muted); } .pl-sec { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 14px; cursor: pointer; } .pl-sec input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--pl-brand); flex: none; cursor: pointer; } .pl-sec input[disabled] { cursor: not-allowed; } .pl-sec--off { cursor: not-allowed; color: var(--pl-muted); } .pl-sec__t { display: block; font-weight: 500; } .pl-sec__d { display: block; font-size: 12px; color: var(--pl-muted); } /* Indisponibilidade é sempre TEXTO, nunca só o checkbox apagado. */ .pl-sec__soon { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--pl-border); border-radius: var(--pl-r-full); font-size: 11px; font-weight: 500; color: var(--pl-muted); vertical-align: 1px; } /* ------------------------------- editorial ------------------------------- */ .pl-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .pl-h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; } .pl-h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .pl-prose { max-width: 68ch; font-size: 15px; color: var(--pl-muted); } .pl-prose p { margin: 0 0 14px; } .pl-prose strong { color: var(--pl-text); font-weight: 500; } .pl-rule { height: 1px; margin: 40px 0; background: var(--pl-border); border: 0; } .pl-facts { margin: 0; } .pl-facts dt { padding: 10px 0 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); } .pl-facts dd { margin: 0 0 10px; font-size: 14px; overflow-wrap: anywhere; } @media (min-width: 620px) { .pl-facts { display: grid; grid-template-columns: 210px 1fr; } .pl-facts dt { padding: 12px 0; border-top: 1px solid var(--pl-border); } .pl-facts dd { padding: 12px 0; margin: 0; border-top: 1px solid var(--pl-border); } } /* ====================================================================== * CAMADA EDITORIAL DA CENTRAL DE VERSÕES (changelog) * * O defeito que esta camada corrige, medido na captura de produção: o h1 rolava POR TRÁS do * cabeçalho translúcido e aparecia como texto fantasma; a animação vertical de ~600px abria a * página sozinha e centralizada, empurrando o feed inteiro para baixo da dobra em 1440x900; e * três fileiras de pílulas (canal, ano, categoria) somavam onze controles antes de qualquer nota. * * As medidas seguem o MODELO ESCOLHIDO PELO USUÁRIO ("Atualizações | GLPI MOBILE"): cabeçalho * fino de 56px grudado, título grande "Changelog" com descrição curta, abas Atualizações e * Downloads, feed editorial com coluna lateral de 160-190px trazendo data e versão, e a * atualização principal abrindo o feed com a mídia integrada. A coluna de leitura de 624px, a * régua única de 1px e o tracking inverso ao tamanho continuam da análise anterior. NADA foi * copiado do modelo: nenhum Tailwind por CDN, nenhuma fonte do Google, nenhum texto de exemplo — * só a composição, refeita sobre a stack real do portal. * * A DIVERGÊNCIA DELIBERADA está na MÍDIA da atualização principal: no modelo ela ocupa 100% da * coluna de leitura porque é vídeo 16:9. A nossa é 9/16 VERTICAL — a 624px de largura teria * 1109px de altura. Aqui ela é a coluna direita da composição interna do artigo: estreita * (300-360px), alinhada ao topo das seções, pertencendo à atualização. * ====================================================================== */ /* --------------------------- grade da página --------------------------- */ .pl-wrap--page { max-width: var(--pl-page-max); padding: 0 var(--pl-page-pad); } /* CABEÇALHO GRUDADO (`sticky`), como no modelo e nas outras páginas do portal: ele OCUPA espaço * no fluxo, então o h1 nasce estruturalmente abaixo dele — a colisão do título não tem como * existir, sem espaçador vazio e sem margem de correção no h1. O que rola por baixo dele durante * a rolagem é o comportamento normal de uma barra translúcida com blur. Sem sombra: a separação * é a borda de 1px e nada mais. */ .pl-home .pl-nav { box-shadow: none; } /* O feed é longo e o rodapé não deve nascer colado no fim dele. */ .pl-home__main { padding-bottom: var(--pl-s-72); } /* ------------------------------ hero ------------------------------ * Escala tipográfica com TRACKING INVERSO AO TAMANHO: -0.022em nos títulos grandes, 0 no corpo. * O h1 NÃO encolhe no celular — é o único ponto de escala fixa da página. * 64px de respiro entre o cabeçalho e o título (a faixa do modelo é 48-72): o conteúdo não pode * nascer grudado na barra. A dobra fecha mesmo assim porque busca e filtros saíram do topo — * a primeira dobra é Changelog, descrição, abas e a primeira atualização. */ .pl-masthead { padding: var(--pl-s-64) 0 0; } .pl-h1--display { margin: 0 0 var(--pl-s-12); /* Peso 600, não 500: é o título-assinatura da página ("presença do modelo") e o único 48px. */ font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -.022em; /* Correção óptica: o glifo encosta na coluna em vez de flutuar 2px para dentro dela. */ margin-left: -2px; } .pl-masthead__lead { max-width: var(--pl-read); font-size: 17px; line-height: 1.6; letter-spacing: 0; } /* ---------------------- alternância entre superfícies ---------------------- * As ABAS DO MODELO (`.pl-tabs`/`.pl-tab`, definidas na camada base): sublinhado de 2px na ativa * sobre a borda de 1px que atravessa a linha inteira. A ativa também muda de tinta — o sublinhado * não é o único sinal (WCAG 1.4.1). Aqui entra só a composição da home e o alvo de toque. */ .pl-home .pl-tabs { margin-top: var(--pl-s-48); } /* O indicador da aba ativa é o ÚNICO laranja permanente da metade de cima: presença Tecno IT * num traço de 2px, como pede a identidade — laranja só em destaque. A tinta do rótulo continua * mudando junto (o sublinhado não é o único sinal, WCAG 1.4.1). */ .pl-home .pl-tab[aria-selected="true"] { border-bottom-color: var(--pl-brand); } /* Alvo de toque de 44px sem engordar a linha (mesmo mecanismo do cabeçalho). */ .pl-tab { position: relative; } .pl-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; min-width: 44px; } /* Abas -> primeira atualização: 56px, dentro da faixa 48-64 do modelo. É o respiro que faz a * atualização principal abrir o painel como conteúdo, não como continuação dos controles. */ .pl-home .pl-panel { padding-top: var(--pl-s-56); } /* SEM BARRA DE FILTROS. As regras da navegação de categorias, da busca em pílula e do "Refinar" * (`.pl-filterbar`, `.pl-cats`, `.pl-cat`, `.pl-search--pill`, `.pl-quiet`, `.pl-refine`, * `.pl-count`) saíram junto com os controles, por decisão do dono do produto (07/08/2026): com * oito entradas, era mais controle do que conteúdo. A LÓGICA continua em `atualizacoes.js`, * inerte sem os hospedeiros `f-*`; se o feed crescer e os controles voltarem, as regras voltam * do histórico do git junto com o markup. Os componentes COMPARTILHADOS (.pl-search, .pl-seg, * .pl-chipbtn, na camada compartilhada acima) ficam: são a biblioteca do sistema. */ /* A ÚNICA RÉGUA HORIZONTAL DA PÁGINA: fecha a atualização principal e abre as anteriores, * com 64px de respiro dos dois lados — o único divisor que a página precisa. */ .pl-rule { margin: var(--pl-s-64) 0; } /* ------------------------- atualização principal ------------------------- * A primeira entrada do feed, na MESMA grade editorial das demais (`.pl-log`): data e versão na * coluna lateral, conteúdo ao lado. O teaser mora NO FLUXO do artigo — depois do resumo, antes * de Melhorias — como a mídia do modelo. A composição lateral anterior foi REPROVADA na captura * de produção: parecia uma coluna de publicidade desconectada, encostada no extremo direito. * É a divergência deliberada explicada no cabeçalho desta camada, na direção oposta: a mídia do * modelo é 16:9 e ocupa 100% da coluna; a nossa é 9/16, então entra no fluxo com largura fixa de * 340px (a faixa pedida é 320-360) — alta o bastante para ser vista, estreita o bastante para * não virar um segundo hero. */ .pl-log.pl-log--main { grid-template-columns: var(--pl-col-date) minmax(0, var(--pl-read)); } #destaque-corpo { max-width: var(--pl-read); } #destaque-secoes { min-width: 0; max-width: var(--pl-read); } /* O PALCO DA MÍDIA (o "player" da referência, traduzido para 9:16), agora na ABA APRESENTAÇÃO: * o teaser assenta CENTRADO numa superfície própria — um poço suave um degrau abaixo do fundo no * claro, um degrau acima no escuro (`--pl-stage-bg`) — com moldura de 1px, cantos de 16px e * respiro interno. O palco ocupa a largura da coluna de leitura; a legenda mora DENTRO dele, * como legenda de player. */ .pl-stage { --pl-stage-w: 340px; margin: var(--pl-s-32) 0; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--pl-read); padding: var(--pl-s-32) var(--pl-s-24) var(--pl-s-20); background: var(--pl-stage-bg); border: 1px solid var(--pl-border); border-radius: var(--pl-r-xl); } .pl-stage .pl-media { align-items: center; } /* A moldura mede a LARGURA DECLARADA, sempre: a regra base derivaria o teto da altura da janela * (`--pl-media-h`) e devolveria 328px num notebook de 768 — a largura aqui é do desenho, não da * janela. A altura sai da proporção 9/16 do arquivo (604px). */ .pl-stage .pl-media__frame { width: min(var(--pl-stage-w), 100%); } .pl-stage .pl-media__cap { margin: var(--pl-s-16) auto 0; text-align: center; max-width: 46ch; } /* O ATALHO DE DESCOBERTA da apresentação, dentro do artigo principal: vídeo atrás de aba some * para o leitor (queda de descoberta medida em pesquisa de página de produto), então o artigo * aponta para ele por TEXTO — uma linha discreta, sublinhada como link, sem ícone nenhum: * a primeira versão usava um SVG de "play" dimensionado só pelo CSS, e numa tela sem estilo * ele explodia para o tamanho padrão de elemento substituído. Texto não explode. */ .pl-peek { margin: var(--pl-s-20) 0 var(--pl-s-24); } .pl-peek__link { font-size: 14px; line-height: 21px; font-weight: 500; color: var(--pl-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pl-border-strong); transition: color var(--pl-dur) var(--pl-ease); } .pl-peek__link:hover { color: var(--pl-brand-text); text-decoration-color: var(--pl-brand-border); } .pl-peek__link:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 4px; border-radius: var(--pl-r-sm); } /* A versão mora na coluna lateral, sob a data — dado técnico, mono, pode quebrar. 13px, não 12: * "data e versão pequenas e perdidas" foi apontamento da reprovação. */ .pl-log__ver { margin: calc(var(--pl-s-8) * -1) 0 var(--pl-s-16); font-family: var(--pl-mono); font-size: 13px; line-height: 20px; color: var(--pl-muted); overflow-wrap: anywhere; } /* Na atualização principal a versão leva o laranja da marca: é O destaque da coluna lateral, * e o único laranja permanente além do indicador da aba ativa. */ .pl-log--main .pl-log__ver { color: var(--pl-brand-text); } /* ------------------------------ feed ------------------------------ * Um grupo por DATA (não por item): a data mora numa coluna própria, fica presa na rolagem * enquanto o grupo passa e é o único elemento de orientação da página. */ .pl-log { display: grid; grid-template-columns: var(--pl-col-date) minmax(0, var(--pl-read)); /* Vão de 48px entre a lateral e o conteúdo — a faixa do modelo é 48-80. Com 32 a data parecia * parte do parágrafo; com 48 ela vira eixo. */ gap: 0 var(--pl-s-48); padding-bottom: var(--pl-s-72); } .pl-log:last-child { padding-bottom: 0; } .pl-log__aside { position: relative; display: block; } .pl-log__stick { position: sticky; top: calc(var(--pl-nav-h) + 24px); } /* Régua vertical de 1px a 9px da borda da grade: a linha do tempo custa um pixel e resolve a * leitura cronológica sem nenhum ícone. Ela some no celular. */ .pl-log__aside::before { content: ""; position: absolute; left: 9px; top: 0; bottom: -9px; width: 1px; background: var(--pl-border); opacity: .6; } /* A data fica 24px à direita da régua vertical (15px de folga a partir dela). */ .pl-log__stick { padding-left: var(--pl-s-24); } /* `tabular-nums`: a coluna de data é uma pilha de dd/mm/aaaa presa na rolagem. Sem largura fixa * de algarismo os dígitos dançam de um grupo para o outro e a coluna deixa de ser eixo. */ .pl-log__when { margin: 0 0 var(--pl-s-16); /* 15px/500 na tinta de texto secundário, não 14px em tinta de metadado: a data é o eixo de * orientação do feed e estava "pequena e perdida" na captura reprovada. */ font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -.011em; font-variant-numeric: tabular-nums; color: var(--pl-text-2); } .pl-log__body { min-width: 0; } /* SEM DIVISOR ENTRE ENTRADAS: o que as separa é o espaço de 72px do `.pl-log`. */ .pl-log__body > .pl-entry { padding-bottom: 0; } .pl-log__body > .pl-entry:last-child { padding-bottom: 0; } .pl-home .pl-entry__h { margin: 0 0 var(--pl-s-12); /* Peso 600: "título forte" é pedido literal do modelo — 500 lia como entrada de glossário. */ font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -.022em; } /* Nas ATUALIZAÇÕES ANTERIORES o título é secundário: 24px, tracking mais curto. O 32px fica com * a atualização principal, que abre o feed. */ .pl-home #lista .pl-entry__h { font-size: 24px; line-height: 31.92px; letter-spacing: -.012em; } /* O RESUMO DA VERSÃO É O CORPO DO TEXTO, e corpo se escreve na tinta do texto. Ele saía em * `--pl-muted`, a mesma tinta da data, da contagem e da legenda: o parágrafo mais importante de * cada entrada era pintado como se fosse rodapé. */ .pl-home .pl-entry__lead { margin: 0 0 var(--pl-s-20); font-size: 17px; line-height: 27.2px; letter-spacing: 0; color: var(--pl-text); } /* O aviso de reprovação é um APARTE do texto, não uma caixa de sistema: a moldura fechada em * âmbar competia com o título da entrada. Fica o wash e um filete de 2px na borda de leitura — * o mesmo gesto da régua vertical do feed, uma escala abaixo. */ .pl-home .pl-entry .pl-alert--warn { border-color: transparent; border-left: 2px solid var(--pl-warn); border-radius: 0 var(--pl-r) var(--pl-r) 0; padding: var(--pl-s-12) var(--pl-s-16); font-size: 14px; line-height: 22px; } /* O bloco de aviso na escala: 20px do parágrafo acima (mesmo degrau de "entre parágrafos") e * 24px até o rótulo do bloco de itens seguinte. Antes eram 16 e 4 escritos no renderizador. */ .pl-home .pl-entry .pl-aviso { margin: var(--pl-s-20) 0 var(--pl-s-24); } /* METADADO É TEXTO, NÃO FILEIRA DE CÁPSULAS. * Cada entrada abria com quatro ou cinco pílulas monoespaçadas — situação, canal, número da * versão, versionCode — enfileiradas acima do título. Num changelog editorial isso é a etiqueta * de um sistema, não a abertura de uma nota: o olho tropeça em cinco objetos antes de chegar ao * assunto. Aqui só o AVISO continua sendo cápsula (é o único que precisa parar a leitura); o * resto vira uma linha corrida de metadado separada por ponto médio, na mesma família e no mesmo * papel da data que fica na coluna ao lado. */ .pl-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-s-8); margin-bottom: var(--pl-s-12); } .pl-metarow .pl-chip { gap: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--pl-muted); } /* Mono AQUI, e não na classe: `--brand` marca tanto o NÚMERO da versão (identificador, mono) na * linha de metadado quanto a frase "Beta · mais recente" no cartão da release (palavras, não * identificador). Quem decide a família é o contexto, que é a única coisa que o CSS enxerga. */ .pl-metarow .pl-chip.pl-mono, .pl-metarow .pl-chip--brand { font-family: var(--pl-mono); font-size: 12px; } .pl-metarow .pl-chip--brand { color: var(--pl-brand-text); } .pl-metarow .pl-chip--warn { padding: 2px 10px; border-radius: var(--pl-r-full); background: var(--pl-warn-soft); color: var(--pl-warn); font-weight: 500; } /* Ponto médio entre os metadados de texto — nunca depois de uma cápsula de aviso, que já se * separa sozinha pela forma. */ .pl-metarow .pl-chip + .pl-chip:not(.pl-chip--warn)::before { content: "·"; margin-right: var(--pl-s-8); color: var(--pl-muted); opacity: .55; } .pl-entry__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-s-12); margin-top: var(--pl-s-24); } /* HIERARQUIA DAS SEÇÕES ("Melhorias e Correções não possuem hierarquia suficiente"): rótulo em * 15px/600, 32px entre blocos, 16px do rótulo ao primeiro item, itens de 16px com entrelinha de * 1.65 e 12px entre eles. É o que desfaz a parede de texto sem mexer uma palavra no conteúdo. */ .pl-home .pl-group { margin-bottom: var(--pl-s-32); } .pl-home .pl-group__h { margin-bottom: var(--pl-s-16); font-size: 15px; font-weight: 600; color: var(--pl-text); } .pl-home .pl-group__list { gap: var(--pl-s-12); } .pl-home .pl-group__list li { font-size: 16px; line-height: 26.4px; } /* Na atualização principal o termo em negrito ganha a PRÓPRIA linha e a descrição corre abaixo: * é a diferença entre uma lista de entregas e um parágrafo com negritos afogados. As entradas * anteriores, mais curtas, continuam com termo e descrição na mesma linha. */ .pl-entry--main .pl-group__list strong { display: block; margin-bottom: 2px; } /* O termo em negrito e a descrição já se distinguem pelo peso; a descrição não precisa também * perder contraste. Ela sobe de 5.04:1 para 9.52:1 e o negrito continua sendo o destaque. */ .pl-home .pl-group__list strong { color: var(--pl-text); } /* ---------------------------- utilidades ---------------------------- * Substituem os `style="…"` que estavam espalhados pelo HTML da central. */ .pl-mt-16 { margin-top: var(--pl-s-16); } .pl-mt-24 { margin-top: var(--pl-s-24); } .pl-mt-48 { margin-top: var(--pl-s-48); } .pl-mb-16 { margin-bottom: var(--pl-s-16); } .pl-lead--sm { font-size: 15px; } .pl-steps { margin: 0; padding-left: var(--pl-s-20); display: flex; flex-direction: column; gap: var(--pl-s-8); /* Instrução se lê e se executa; não é legenda. Sai da tinta de metadado (5.04:1) para a de * texto secundário (9.52:1). */ font-size: 14px; color: var(--pl-text-2); } /* A ABA DOWNLOADS TEM A MESMA MEDIDA DE LEITURA DA ABA AO LADO. * Ela era a única superfície sem trilha: o aviso de homologação atravessava os 1269px da página * como uma faixa, e o cartão de "Como instalar" tinha a mesma largura. Duas abas da MESMA página * com medidas de leitura diferentes (624 numa, 1269 na outra) é a marca de que a régua não é do * sistema, é de um trecho. */ .pl-home #panel-downloads, .pl-home #panel-apresentacao { max-width: var(--pl-read); } /* ------------------------------ celular ------------------------------ * A data empilha ACIMA do título, a régua vertical some — e o h1 CONTINUA em 48px. */ @media (max-width: 900px) { .pl-wrap--page { padding: 0 var(--pl-s-24); } .pl-masthead { padding-top: var(--pl-s-48); } /* 624px É TETO, NÃO PISO — e o teto vale nas duas colunas e em todas as larguras. * Ao empilhar, as duas grades perdiam a trilha de leitura e passavam a ocupar a largura inteira: * medido em 768x1024, o corpo do texto ia a 720px (≈78 caracteres por linha) e em 820x1180 a * 772px. A medida ficava MAIS LARGA quanto MENOR a tela — 543px em 1024, 720px em 768 — que é o * contrário do que a régua de leitura existe para fazer. O vazio que sobra à direita é o mesmo * vazio deliberado das três últimas colunas da grade no desktop. */ /* No celular o PALCO da aba Apresentação encolhe o respiro interno para 16px e o teaser * mantém o teto de 320px com a proporção 9/16 — nunca maior que o viewport, centralizado * pelo próprio palco. */ .pl-stage { margin: var(--pl-s-24) 0; padding: var(--pl-s-16) var(--pl-s-16) var(--pl-s-12); } .pl-stage .pl-media__frame { width: min(320px, 100%); } /* O seletor dobrado acompanha a entrada principal: sem ele, a regra de duas colunas dela * (especificidade maior) venceria esta e a coluna lateral não empilharia no celular. */ .pl-log, .pl-log.pl-log--main { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: var(--pl-s-56); max-width: var(--pl-read); } /* A data NÃO some no celular: ela empilha acima do título. O que some é a régua vertical — * uma linha do tempo de 1px numa coluna de 342px não orienta ninguém, só estreita o texto. */ .pl-log__aside { display: block; } .pl-log__aside::before { display: none; } .pl-log__stick { position: static; padding-left: 0; } .pl-log__when { margin-bottom: var(--pl-s-8); } /* A atualização principal desce junto: 32 → 24 no título dela, 24 → 20 nas anteriores, e o * parágrafo acompanha (17/27.2 → 15/24), como no resto da página. */ .pl-home .pl-entry__h { font-size: 24px; line-height: 31.92px; letter-spacing: -.012em; } .pl-home #lista .pl-entry__h { font-size: 20px; line-height: 26.6px; } .pl-home .pl-entry__lead { font-size: 15px; line-height: 24px; letter-spacing: -.011em; } .pl-home .pl-group__list li { font-size: 14px; } .pl-masthead__lead { font-size: 15px; } /* A régua acompanha a coluna de leitura: um filete mais largo do que tudo o que ele separa * vira um traço solto na página. */ .pl-rule { max-width: var(--pl-read); } } /* O h1 é o único ponto de escala FIXA: 48px também em 390px. */ @media (max-width: 620px) { .pl-h1--display { font-size: 48px; line-height: 48px; margin-left: -1px; } }