/* ========================================================================== Blog tecpet: design system (handoff jul/2026) Referência: design_handoff_blog_tecpet/README.md + Blog tecpet.dc.html Fontes self-hosted (sem Google Fonts): Lato, Instrument Serif, JetBrains Mono ========================================================================== */ /* --- Fontes ------------------------------------------------------------- */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/lato-400-latin.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/lato-400-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('/fonts/lato-700-latin.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 800 900; font-display: swap; src: url('/fonts/lato-900-latin.woff2') format('woff2'); } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/instrument-serif-400-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); } /* --- Tokens ------------------------------------------------------------- */ :root { /* papéis */ --acao: #025A88; --acao-hover: #504E8E; --tinta: #14202A; --papel: #F5F7F8; --superficie: #FFFFFF; --corpo: #22333F; --texto-2: #4A5F6D; --texto-3: #607484; --meta: #7C919E; --meta-fraco: #96A9B4; --linha: #E0E7EB; --linha-campo: #D5DEE3; --linha-tracejada: #BDCAD1; --linha-capa: #D8E1E6; --chip-neutro: #EAEFF1; --escuro-superficie: #1E2E3C; --escuro-linha: #35495A; --wordmark: #A2DAE3; --indigo-tint: #EAE9F4; --indigo-borda: #C9C7E6; /* categorias: cor · tom claro (capa) · tom escuro (texto sobre tom claro) */ --cat-atendimento: #025A88; --cat-atendimento-tint: #E4EFF5; --cat-atendimento-dark: #013C5C; --cat-gestao: #504E8E; --cat-gestao-tint: #EAE9F4; --cat-gestao-dark: #35336B; --cat-financeiro: #00AAA0; --cat-financeiro-tint: #E0F4F2; --cat-financeiro-dark: #00625C; --cat-operacao: #55C6D6; --cat-operacao-tint: #E6F7FA; --cat-operacao-dark: #0E6F7D; --cat-equipe: #8867AC; --cat-equipe-tint: #F0EAF6; --cat-equipe-dark: #57397A; --cat-crescimento: #70C7B0; --cat-crescimento-tint: #E4F5EF; --cat-crescimento-dark: #22705C; /* extensão do DS para as 3 categorias próprias do blog (paleta oficial da marca) */ --cat-tecnologia: #64A7DB; --cat-tecnologia-tint: #E7F0F9; --cat-tecnologia-dark: #1B5A8C; --cat-cases: #408CA9; --cat-cases-tint: #E4EFF3; --cat-cases-dark: #1D5568; --cat-implantacao: #AEABD5; --cat-implantacao-tint: #F0EFF8; --cat-implantacao-dark: #4C4986; /* cor "corrente" da página/artigo: sobrescrita por .cat- no */ --cor: var(--cat-atendimento); --cor-tint: var(--cat-atendimento-tint); --cor-dark: var(--cat-atendimento-dark); --max: 1240px; --max-artigo: 720px; /* alturas do chrome, medidas por js/chrome.js */ --bar: 0px; --hdr: 66px; --chrome: 66px; } .cat-atendimento { --cor: var(--cat-atendimento); --cor-tint: var(--cat-atendimento-tint); --cor-dark: var(--cat-atendimento-dark); } .cat-gestao { --cor: var(--cat-gestao); --cor-tint: var(--cat-gestao-tint); --cor-dark: var(--cat-gestao-dark); } .cat-financeiro { --cor: var(--cat-financeiro); --cor-tint: var(--cat-financeiro-tint); --cor-dark: var(--cat-financeiro-dark); } .cat-operacao { --cor: var(--cat-operacao); --cor-tint: var(--cat-operacao-tint); --cor-dark: var(--cat-operacao-dark); } .cat-equipe { --cor: var(--cat-equipe); --cor-tint: var(--cat-equipe-tint); --cor-dark: var(--cat-equipe-dark); } .cat-crescimento { --cor: var(--cat-crescimento); --cor-tint: var(--cat-crescimento-tint); --cor-dark: var(--cat-crescimento-dark); } .cat-tecnologia { --cor: var(--cat-tecnologia); --cor-tint: var(--cat-tecnologia-tint); --cor-dark: var(--cat-tecnologia-dark); } .cat-cases { --cor: var(--cat-cases); --cor-tint: var(--cat-cases-tint); --cor-dark: var(--cat-cases-dark); } .cat-implantacao { --cor: var(--cat-implantacao); --cor-tint: var(--cat-implantacao-tint); --cor-dark: var(--cat-implantacao-dark); } /* --- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: 'Lato', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } a { color: var(--acao); text-decoration: none; } a:hover { color: var(--acao-hover); } img, svg { max-width: 100%; display: block; } input, button, textarea, select { font-family: inherit; } ::selection { background: var(--indigo-borda); } [id] { scroll-margin-top: calc(var(--chrome) + 24px); } .container { max-width: var(--max); margin: 0 auto; padding: 0 32px; } .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--meta); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: var(--bar); z-index: 50; background: rgba(245, 247, 248, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); } .site-header-inner { max-width: var(--max); margin: 0 auto; padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } /* A palavra "tecpet" é a LOGO oficial (img/logo-tecpet.svg, vetor extraído do cabeçalho de tec.pet em 03/08/2026), nunca texto: a fonte do site não é a da marca. Só o "blog" ao lado segue sendo texto, porque é o que separa blog.tec.pet do site principal e não faz parte do lockup. */ .wordmark { display: flex; align-items: center; gap: 9px; color: var(--tinta); } .wordmark:hover { color: var(--tinta); } /* `flex: none` é obrigatório: a logo é item flex e, sem isso, encolhe junto com o cabeçalho apertado (a altura fica em 25px e a largura despenca, então o desenho sai achatado). Os atributos width/height do são o tamanho de EXIBIÇÃO, não a resolução do vetor, pra que a página sem CSS já renderize a logo no tamanho certo em vez de gigante. */ .wordmark img { height: 25px; width: auto; flex: none; display: block; } .wordmark i { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 22px; font-style: italic; color: var(--acao-hover); letter-spacing: -0.01em; /* ALINHAMENTO DE BASELINE (07/08/2026). O `align-items: center` do .wordmark centraliza as CAIXAS, e caixa centralizada não é alinhamento óptico: a caixa do "blog" tem 29px (Instrument Serif tem descendente longa) contra 25px da logo, e a letra caía 6,5px abaixo da baseline de "tecpet". Medido em captura a 4x, comparando a linha de base de tinta das duas palavras. Centrado pela faixa de X-HEIGHT das duas palavras, não pela baseline nem pela caixa de tinta: é o que faz "blog" e "tecpet" lerem na mesma linha (Marcus, 07/08). `translateY` e não `top`: não mexe no layout, então a altura do header não muda. ⚠️ O número depende da altura da logo (25px) e deste font-size. Mexeu num dos dois, mede de novo em vez de chutar. */ transform: translateY(-3.6px); } .site-nav { display: flex; gap: 22px; font-size: 14px; white-space: nowrap; } .site-nav a { color: var(--texto-2); } .site-nav a:hover { color: var(--acao); } .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 0; justify-content: flex-end; } .search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--linha-campo); border-radius: 999px; background: var(--superficie); flex: 0 1 216px; min-width: 0; } .search:focus-within { border-color: var(--acao); } .search span { width: 13px; height: 13px; border: 1.6px solid var(--meta); border-radius: 50%; flex: none; } .search input { border: 0; outline: none; background: transparent; font-size: 13.5px; width: 100%; color: var(--tinta); } .lang { display: flex; gap: 2px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--meta); padding: 4px; background: var(--chip-neutro); border-radius: 999px; } .lang span { padding: 3px 8px; border-radius: 999px; } .lang span[aria-current] { background: var(--superficie); color: var(--tinta); } .header-cta { padding: 10px 16px; border-radius: 999px; background: var(--acao); color: #FFFFFF; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .header-cta:hover { background: var(--acao-hover); color: #FFFFFF; } /* --- Botões ------------------------------------------------------------- */ .btn { display: inline-block; padding: 13px 24px; border-radius: 999px; border: 1px solid transparent; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; text-align: center; } .btn-primary { background: var(--acao); color: #FFFFFF; } .btn-primary:hover { background: var(--acao-hover); color: #FFFFFF; } .btn-secundario { background: transparent; border-color: var(--tinta); color: var(--tinta); } .btn-secundario:hover { background: var(--tinta); color: var(--papel); } .btn-escuro { background: var(--tinta); color: var(--papel); } .btn-escuro:hover { background: var(--acao); color: var(--papel); } .btn-claro { background: var(--papel); color: var(--tinta); } .btn-claro:hover { background: var(--indigo-borda); color: var(--tinta); } .btn-texto { padding: 0; background: none; border: 0; color: var(--acao); font-weight: 700; } .btn-texto::after { content: " →"; } .btn-texto:hover { color: var(--acao-hover); } .btn[disabled] { background: var(--linha); color: var(--meta-fraco); cursor: default; } .btn-full { display: block; width: 100%; } /* --- Capas (ilustração à mão) ------------------------------------------- */ .capa { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-capa); background: var(--cor-tint); display: flex; align-items: center; justify-content: center; padding: 18px; aspect-ratio: 3 / 2; } .capa img { width: 100%; height: 100%; object-fit: cover; } /* ilustração raster já vem com o fundo da categoria pintado: sem moldura em volta */ .capa.capa-raster { padding: 0; background: transparent; } .capa.capa-16x9 { aspect-ratio: 16 / 9; border-radius: 20px; } .capa.capa-21x9 { aspect-ratio: 21 / 9; border-radius: 22px; } /* legado */ .artigo-capa .capa { border-radius: 18px; } /* topo do artigo: 16:9, mesmo master do card */ /* o chip de categoria já está no cabeçalho do artigo: na capa vira repetição */ .artigo-capa .capa .etiqueta { display: none; } .capa.capa-4x3 { aspect-ratio: 4 / 3; border-radius: 10px; } /* moldura tracejada + descrição da cena: só enquanto a ilustração não existe */ .capa.sem-arte::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed var(--cor); border-radius: 10px; opacity: 0.3; } .capa.capa-16x9.sem-arte::before { inset: 14px; border-radius: 14px; opacity: 0.28; } .capa.capa-21x9.sem-arte::before { inset: 16px; border-radius: 16px; opacity: 0.28; } .capa .cena { position: relative; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.5; text-align: center; color: var(--cor-dark); opacity: 0.75; max-width: 24ch; } .capa.capa-16x9 .cena, .capa.capa-21x9 .cena { font-size: 12px; line-height: 1.6; max-width: 46ch; opacity: 0.8; } .capa .etiqueta { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-family: 'JetBrains Mono', monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tinta); } .capa.capa-16x9 .etiqueta { top: 16px; left: 16px; padding: 6px 12px; font-size: 10px; background: rgba(255, 255, 255, 0.92); } .capa .etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); display: block; flex: none; } /* --- Card A (padrão da grade) ------------------------------------------- */ .card { display: flex; flex-direction: column; gap: 14px; color: var(--tinta); padding-bottom: 4px; } .card:hover { color: var(--acao); } .card:hover h3 { color: var(--acao); } .card h3 { padding: 0 3px; font-size: 18px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; } .card .resumo { padding: 0 3px; font-size: 14px; line-height: 1.55; color: var(--texto-3); text-wrap: pretty; } .card .tags { padding: 0 3px; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .card .card-meta { font-size: 12.5px; color: var(--meta-fraco); margin-top: auto; padding: 6px 3px 0; } .tag { padding: 4px 9px; border-radius: 6px; border: 0; background: var(--chip-neutro); color: var(--texto-3); font-size: 11.5px; cursor: pointer; } .tag:hover { background: var(--indigo-tint); color: var(--cat-gestao-dark); } /* Card B: tipográfico, sem imagem */ .card-b { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); min-height: 280px; } .card-b:hover { border-color: var(--tinta); color: var(--tinta); } .card-b .cat-mono { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--meta); } .card-b .cat-mono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); display: block; } .card-b h3 { font-weight: 900; font-size: 29px; line-height: 1.08; letter-spacing: -0.02em; margin-top: 6px; } .card-b .resumo { font-size: 14px; line-height: 1.55; color: var(--texto-3); margin-top: 4px; } .card-b .tags { display: flex; gap: 6px; margin-top: auto; } .card-b .card-meta { font-size: 12.5px; color: var(--meta-fraco); } /* Card C: horizontal (listas laterais, mais lidos, novidades) */ .card-c { display: grid; grid-template-columns: 116px 1fr; gap: 16px; padding: 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); } .card-c:hover { border-color: var(--acao); color: var(--tinta); } .card-c .capa { aspect-ratio: 1 / 1; border-radius: 10px; padding: 10px; } .card-c .corpo { display: flex; flex-direction: column; gap: 8px; } .card-c .cat-mono { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--meta); } .card-c h3 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; } .card-c .card-meta { font-size: 12.5px; color: var(--meta-fraco); margin-top: auto; } /* ========================================================================== HOME ========================================================================== */ .home { max-width: var(--max); margin: 0 auto; padding: 0 32px 96px; } /* Destaque + rail */ .hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; padding: 56px 0 48px; border-bottom: 1px solid var(--linha); } .hero .rotulo { margin-bottom: 20px; } .hero-card { display: block; color: var(--tinta); } .hero-card:hover { color: var(--tinta); } .hero-card:hover h1 { color: var(--acao); } .hero-card h1 { font-weight: 900; font-size: 43px; line-height: 1.08; letter-spacing: -0.015em; margin: 26px 0 14px; max-width: 18ch; text-wrap: pretty; } .hero-card .lead { font-size: 16.5px; line-height: 1.6; color: var(--texto-2); max-width: 56ch; text-wrap: pretty; } .assinatura { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13px; color: var(--texto-3); } .assinatura .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--indigo-borda); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; color: var(--cat-gestao-dark); flex: none; } .assinatura .nome { color: var(--tinta); font-weight: 700; } .rail { display: flex; flex-direction: column; gap: 4px; } .rail .rotulo { margin-bottom: 16px; } .rail-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linha); color: var(--tinta); } .rail-item:hover { color: var(--acao); } .rail-item .num { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--meta-fraco); } .rail-item .titulo { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; } .rail-item .meta { display: block; margin-top: 8px; font-size: 12px; color: var(--meta); } .card-escuro { margin-top: 24px; padding: 22px; border-radius: 18px; background: var(--tinta); color: var(--papel); } .card-escuro h2, .card-escuro .titulo { font-weight: 900; font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; } .card-escuro p { font-size: 13.5px; line-height: 1.55; color: var(--meta-fraco); margin-top: 10px; } .card-escuro .btn { margin-top: 16px; font-size: 13.5px; padding: 11px 18px; } /* Sidebar de temas + coluna do feed São 9 categorias: chip ou aba não cabe numa linha, virava 2 ou 3 e empurrava o feed pra baixo. A sidebar cresce na vertical, que é o espaço que sobra. */ .home-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 44px; align-items: start; padding: 32px 0 0; } .sidebar { position: sticky; top: calc(var(--chrome) + 16px); align-self: start; display: flex; flex-direction: column; gap: 26px; } .sidebar .rotulo { letter-spacing: 0.14em; color: var(--meta-fraco); margin-bottom: 12px; } /* blocos futuros (colunas, autores) já entram separados por linha */ .sidebar .bloco + .bloco { padding-top: 22px; border-top: 1px solid var(--linha); } .lista-temas { display: flex; flex-direction: column; gap: 1px; } .tema { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer; } .tema:hover { background: var(--chip-neutro); } .tema[aria-pressed="true"] { background: var(--chip-neutro); color: var(--tinta); font-weight: 700; } .tema .ponto { width: 7px; height: 7px; border-radius: 50%; display: block; flex: none; } .tema .nome { flex: 1; min-width: 0; } .tema .qtd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--meta-fraco); } .coluna-feed { min-width: 0; } .filtro-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .filtro-tags .rotulo { font-size: 10.5px; letter-spacing: 0.14em; color: var(--meta-fraco); } .tag-ativa { padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--acao-hover); background: var(--indigo-tint); color: var(--cat-gestao-dark); font-size: 12.5px; cursor: pointer; } .tag-ativa::after { content: " ×"; } /* Resultados */ .resultados-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--linha); } .resultados-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .resultados-head .contagem { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--meta); } .vazio { padding: 72px 0; text-align: center; } .vazio .titulo { font-weight: 900; font-size: 30px; letter-spacing: -0.01em; } .vazio p { font-size: 14.5px; color: var(--texto-3); margin-top: 10px; } .vazio .btn { margin-top: 20px; padding: 10px 18px; font-size: 13.5px; } .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; padding: 32px 0 0; align-items: start; } .card.oculto, .carregar.oculto, .vazio.oculto, .filtro-tags.oculto { display: none; } .carregar { display: flex; justify-content: center; padding: 48px 0 0; } /* --- Ritmo do feed ------------------------------------------------------- */ /* Ciclo de 16 posts: grade 6 · mais do arquivo 6 · leitura rápida 4 · respiro. Só existe no estado sem filtro (js/home.js); filtro/busca voltam pra grade simples. */ .faixa { margin: 56px 0 8px; border-radius: 24px; padding: 32px; } .faixa-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; } .faixa-cabeca .apoio { font-size: 13px; color: var(--texto-3); text-align: right; } .faixa .cat-mono { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--meta); } .faixa .cat-mono::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); display: block; flex: none; } .faixa .card-meta { font-size: 12.5px; color: var(--meta-fraco); } /* Arquivo: 6 posts em card C. Sem container e sem rótulo (o card C já tem fundo e borda): a quebra vem da densidade, não de mais uma caixa nem de mais um título. */ .faixa-arquivo { padding: 0; border-radius: 0; } .faixa-arquivo .lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .faixa-arquivo .card-c .capa { border-radius: 10px; } /* a moldura tracejada (inset 7px) é só do placeholder; a ilustração vai sangrada */ .faixa-arquivo .card-c .capa.capa-raster { padding: 0; } .faixa-arquivo .card-c .capa.sem-arte { padding: 7px; } .faixa-arquivo .card-c .capa.sem-arte::before { inset: 7px; border-radius: 7px; } .faixa-arquivo .card-c .cat-mono { font-size: 9.5px; } .faixa-arquivo .card-c:hover h3 { color: var(--acao); } /* Leitura rápida: 4 cartões em 2 colunas, tempo em número grande */ .faixa-rapida { background: var(--chip-neutro); } .faixa-rapida .faixa-cabeca { margin-bottom: 24px; } .faixa-rapida .faixa-cabeca .rotulo { color: var(--texto-2); } .faixa-rapida .lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .faixa-rapida .item { background: var(--superficie); border-radius: 16px; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; color: var(--tinta); } .faixa-rapida .item:hover h3 { color: var(--acao); } .faixa-rapida .item .corpo-item { display: flex; flex-direction: column; gap: 9px; } .faixa-rapida .item h3 { font-size: 17px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; text-wrap: pretty; } .faixa-rapida .tempo { text-align: right; } .faixa-rapida .tempo b { display: block; font-weight: 900; font-size: 26px; line-height: 1; color: var(--cor); } .faixa-rapida .tempo span { font-size: 12px; font-weight: 400; color: var(--meta-fraco); } /* Respiro: faixa escura sem post, pro olho descansar entre duas grades */ .faixa-respiro { background: var(--tinta); color: var(--papel); padding: 34px 36px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .faixa-respiro .rotulo { color: var(--wordmark); } .faixa-respiro h2 { font-weight: 900; font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; max-width: 26ch; margin-top: 10px; text-wrap: pretty; } .faixa-respiro .acao { min-width: 380px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .faixa-respiro .acao .apoio { font-size: 13px; color: var(--meta-fraco); } /* Banner de material / cross-promo */ .banner { margin-top: 88px; padding: 40px; border-radius: 24px; background: var(--superficie); border: 1px solid var(--linha); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .banner .rotulo { color: var(--acao-hover); } .banner h2 { font-weight: 900; font-size: 34px; line-height: 1.12; letter-spacing: -0.015em; margin: 14px 0 12px; max-width: 22ch; } .banner p { font-size: 15px; line-height: 1.6; color: var(--texto-2); max-width: 48ch; } .banner .btn { margin-top: 24px; } .banner .mockup { aspect-ratio: 4 / 3; border-radius: 16px; background: #ECF1F3; border: 1px solid var(--linha-capa); display: flex; align-items: center; justify-content: center; /* o padding e a fonte mono existiam pro texto do placeholder; com imagem de verdade o slot vira moldura, e o overflow segura o canto arredondado */ overflow: hidden; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--meta); text-align: center; } /* a arte é 1350x1080 (1,25) e o slot é 4:3 (1,33): o cover corta ~34px em cima e embaixo, que ali é fundo e borda, sem comer nada da interface */ .banner .mockup img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ========================================================================== ARTIGO ========================================================================== */ /* A página do artigo é um grid de 2 colunas (TOC · texto). O cabeçalho e a capa vivem na coluna do TEXTO: antes eles começavam na borda esquerda da página, fora do eixo do corpo, e a tela ficava torta com um vão à direita. */ .artigo-main { max-width: var(--max); margin: 0 auto; padding: 0 32px 96px; display: grid; /* uma coluna lateral só, à esquerda: o TOC é apoio de leitura e entra no começo da varredura; a direita virava depósito de card promocional. */ grid-template-columns: 200px minmax(0, var(--max-artigo)); column-gap: 44px; justify-content: center; } .artigo-main > * { grid-column: 1 / -1; } /* `display: contents` dissolve o corpo: TOC e texto viram itens do grid da página. É o que faz o TOC começar lá em cima, ao lado do cabeçalho, em vez de só depois da capa. As linhas são explícitas porque a ordem do DOM (cabeçalho, capa, TOC, texto) não é a ordem visual. */ .artigo-main > .breadcrumb { grid-column: 2; grid-row: 1; } .artigo-main > .artigo-head { grid-column: 2; grid-row: 2; } .artigo-main > .artigo-capa { grid-column: 2; grid-row: 3; } .artigo-corpo > article { grid-column: 2; grid-row: 4; } .artigo-corpo > .toc { grid-column: 1; grid-row: 1 / 5; } .artigo-main > .relacionados { grid-column: 1 / -1; grid-row: 5; } /* Comparativos (/comparativos/) não têm TOC: a regra que colapsa essa coluna mora no FIM do arquivo, depois das media queries, senão o bloco de 1100px a derruba. */ .breadcrumb { padding: 28px 0 0; font-size: 12.5px; color: var(--meta); display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb a { color: var(--meta); } .breadcrumb a:hover { color: var(--acao); } .breadcrumb .atual { color: var(--texto-3); } .artigo-head { padding: 36px 0 0; } .artigo-head .linha-cat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cat-pill { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--cor-tint); color: var(--cor-dark); font-size: 12.5px; font-weight: 700; } .cat-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; } .artigo-head .tempo { font-size: 12.5px; color: var(--meta); } .artigo-head h1 { font-weight: 900; font-size: 54px; line-height: 1.04; letter-spacing: -0.02em; margin: 22px 0 18px; text-wrap: pretty; } .artigo-head .lead { font-size: 19px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; } .faixa-autor { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; padding: 20px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); font-size: 13.5px; color: var(--texto-3); } .faixa-autor .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--indigo-borda); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; color: var(--cat-gestao-dark); flex: none; } .faixa-autor .nome { display: block; color: var(--tinta); font-weight: 700; } .faixa-autor .cargo { display: block; font-size: 12.5px; } .faixa-autor .data { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--meta-fraco); text-transform: uppercase; } /* A capa do artigo é ilustrativa: acompanha o texto, não abre a página. Na largura inteira (16:9 em 1176px) ela tinha 661px de altura e virava o destaque da tela. */ .artigo-capa { max-width: min(100%, 640px); margin: 28px 0 40px; } /* Corpo em 3 colunas flexíveis */ /* o corpo não é mais uma caixa: ver `display: contents` no bloco do .artigo-main */ .artigo-corpo { display: contents; } /* O item do grid ocupa a área inteira (do topo até o fim do artigo) e quem gruda é o filho: assim o navegador tem um bloco de contenção com fim definido e solta o TOC ao chegar no "Continue por aqui", em vez de deixar ele flutuando por cima. */ .toc { min-width: 180px; } .toc-fixo { position: sticky; top: calc(var(--chrome) + 16px); max-height: calc(100vh - var(--chrome) - 48px); overflow-y: auto; overscroll-behavior: contain; } .toc .rotulo { color: var(--meta-fraco); letter-spacing: 0.14em; margin-bottom: 14px; } .toc details > summary { display: none; } /* só vira sanfona no mobile */ .toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--linha); } .toc nav a { padding: 8px 0 8px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--meta); } .toc nav a:hover { color: var(--tinta); } .toc nav a[aria-current="true"] { border-left-color: var(--acao-hover); color: var(--tinta); font-weight: 700; } .compartilhar { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; } .compartilhar .rotulo { color: var(--meta-fraco); letter-spacing: 0.14em; } .compartilhar .pilulas { display: flex; gap: 6px; flex-wrap: wrap; } .compartilhar a, .compartilhar button { padding: 7px 12px; border: 1px solid var(--linha-campo); border-radius: 8px; font-size: 12px; color: var(--texto-2); background: var(--superficie); cursor: pointer; } .compartilhar a:hover, .compartilhar button:hover { border-color: var(--acao); color: var(--acao); } article { flex: 1 1 560px; min-width: 0; max-width: var(--max-artigo); font-size: 17.5px; line-height: 1.68; color: var(--corpo); display: flex; flex-direction: column; gap: 22px; } article h2 { font-weight: 900; font-size: 32px; line-height: 1.14; letter-spacing: -0.015em; margin-top: 14px; color: var(--tinta); text-wrap: pretty; } article h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; margin-top: 10px; color: var(--tinta); text-wrap: pretty; } article p { text-wrap: pretty; } article ul, article ol { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; } article li { text-wrap: pretty; } article strong { font-weight: 700; color: var(--tinta); } article a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* Rail direita */ /* --- Componentes de conteúdo -------------------------------------------- */ .rotulo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--meta); display: block; } /* "Direto ao ponto" (índigo): antigo .tldr-box */ .tldr-box, .direto-ao-ponto { padding: 22px 24px; border-radius: 16px; background: var(--indigo-tint); border: 1px solid var(--indigo-borda); } .tldr-box .tldr-label, .direto-ao-ponto .rotulo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acao-hover); margin-bottom: 8px; display: block; } .tldr-box p, .direto-ao-ponto p { font-size: 16px; line-height: 1.6; color: var(--corpo); } .tldr-box ul { padding-left: 20px; gap: 8px; } .tldr-box li { font-size: 16px; line-height: 1.6; color: var(--corpo); } /* "No sistema" (branca, etiqueta azul): antigos .info-box / .tip-box */ .info-box, .tip-box, .no-sistema { padding: 22px 24px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); } .info-box h3, .tip-box h3, .no-sistema .rotulo { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acao); margin: 0 0 8px; display: block; } .info-box p, .tip-box p, .no-sistema p { font-size: 16px; line-height: 1.6; color: var(--corpo); } .info-box p + p, .tip-box p + p, .no-sistema p + p { margin-top: 10px; } .info-box ul, .tip-box ul { padding-left: 20px; gap: 8px; margin-top: 10px; font-size: 16px; } /* Diagrama de fluxo (máx. 4 blocos) */ .fluxo { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); } .fluxo .etapas { display: flex; align-items: stretch; gap: 10px; } .fluxo .etapa { flex: 1; padding: 14px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); } .fluxo .etapa .n { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; color: var(--meta-fraco); } .fluxo .etapa .txt { font-size: 14.5px; font-weight: 700; margin-top: 6px; line-height: 1.3; color: var(--tinta); } .fluxo .etapa.sistema { background: var(--cat-atendimento-tint); border-color: #BFD9E6; } .fluxo .etapa.sistema .n { color: #4A88A8; } .fluxo .etapa.regra { background: var(--indigo-tint); border-color: var(--indigo-borda); } .fluxo .etapa.regra .n { color: #7E7CB5; } .fluxo .etapa.resultado { background: var(--tinta); border-color: var(--tinta); } .fluxo .etapa.resultado .txt { color: var(--papel); } .fluxo .etapa.resultado .n { color: var(--meta); } .fluxo .seta { display: flex; align-items: center; color: var(--meta-fraco); font-size: 18px; } .fluxo .fig { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--meta-fraco); padding-top: 4px; } /* Citação */ .quote, blockquote { padding: 6px 0 6px 24px; border-left: 3px solid var(--acao-hover); font-size: 25px; line-height: 1.4; font-style: italic; font-weight: 400; color: var(--tinta); } /* Atribuição da citação. O seletor precisa cobrir `cite` DENTRO de .pull-quote: as pull-quotes antigas usam e as novas usam , e sem esta linha o herdava os 25px em itálico do bloco e colava na fala, virando uma frase só ("...já teve agendamento. Ivan, sobre agendamento fora do horário"). Estava assim em 9 posts, 4 deles publicados desde julho. */ .quote cite, blockquote cite, .pull-quote cite, .pull-quote .author { display: block; margin-top: 16px; font-size: 13px; font-style: italic; font-weight: 400; letter-spacing: 0.01em; color: var(--meta); } .pull-quote { padding: 6px 0 6px 24px; border-left: 3px solid var(--acao-hover); font-size: 25px; line-height: 1.4; font-style: italic; color: var(--tinta); } /* Trio de números-destaque */ .stats-row, .numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .stat-mini, .numeros > div { padding: 18px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); } .stat-mini .num, .numeros .num { font-weight: 900; font-size: 34px; letter-spacing: -0.02em; color: var(--acao); line-height: 1.1; } .stat-mini:nth-child(2) .num, .numeros > div:nth-child(2) .num { color: var(--acao-hover); } .stat-mini:nth-child(3) .num, .numeros > div:nth-child(3) .num { color: var(--tinta); } .stat-mini .lbl, .numeros .lbl { font-size: 13px; color: var(--texto-3); margin-top: 4px; line-height: 1.4; } /* Figura com print do sistema */ figure { display: flex; flex-direction: column; gap: 10px; } figure .print { border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-capa); background: #E3EAEE; aspect-ratio: 16 / 10; position: relative; } figcaption { font-size: 13px; color: var(--meta); } /* CTA escuro */ .cta-inline, .cta-escuro { margin-top: 20px; padding: 28px; border-radius: 18px; background: var(--tinta); color: var(--papel); } .cta-inline h3, .cta-escuro .titulo { font-weight: 900; font-size: 27px; line-height: 1.18; letter-spacing: -0.01em; max-width: 26ch; color: var(--papel); margin: 0; } .cta-inline p, .cta-escuro p { font-size: 14.5px; line-height: 1.55; color: var(--meta-fraco); margin-top: 10px; max-width: 46ch; } .cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* CTA do artigo com a arte do sistema ao lado (Marcus, 03/08/2026). A coluna do texto tem 720px, então a arte fica em ~300px: grande o bastante pra ler a agenda e o celular, pequena o bastante pra não empurrar o texto. Sem wrapper no HTML: o grid posiciona os filhos direto, e a arte ocupa a coluna 2 inteira. `minmax(0, 1fr)` e não `1fr`: ver a lição do .home-grid no fim deste arquivo. */ .cta-inline.com-arte { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 26px; align-items: center; } /* O texto precisa ser UM filho do grid. Deixando h3, p e botões soltos, cada um vira uma linha e todas esticam pra acompanhar a altura da arte, abrindo um vão enorme entre o título e o parágrafo. */ .cta-inline.com-arte > .cta-texto { grid-column: 1; } .cta-inline.com-arte > .arte { grid-column: 2; } .cta-inline.com-arte .cta-texto h3 { max-width: none; } .cta-inline .arte { border-radius: 12px; overflow: hidden; border: 1px solid var(--escuro-linha); aspect-ratio: 4 / 3; } .cta-inline .arte img { width: 100%; height: 100%; object-fit: cover; display: block; } .cta-inline .btn-primary, .cta-escuro .btn-primary { background: var(--papel); color: var(--tinta); } .cta-inline .btn-primary:hover, .cta-escuro .btn-primary:hover { background: var(--indigo-borda); color: var(--tinta); } .cta-inline .btn-ghost, .cta-escuro .btn-ghost { background: transparent; border: 1px solid var(--escuro-linha); color: var(--papel); } .cta-inline .btn-ghost:hover, .cta-escuro .btn-ghost:hover { border-color: var(--papel); color: var(--papel); } /* "Este artigo ajudou?" */ .util { margin-top: 12px; padding: 20px 24px; border-radius: 16px; border: 1px solid var(--linha); background: var(--superficie); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .util .pergunta { font-size: 14.5px; font-weight: 700; } .util .opcoes { display: flex; gap: 8px; margin-left: auto; } .util button { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--linha-campo); background: var(--superficie); font-size: 13.5px; cursor: pointer; } .util button:hover { border-color: var(--acao); color: var(--acao); } .util .obrigado { font-size: 13.5px; color: var(--texto-3); margin-left: auto; } /* Conversa simulada (WhatsApp) */ .demo { border-radius: 16px; border: 1px solid var(--linha); background: var(--superficie); padding: 22px 24px; } .demo .label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--acao); margin-bottom: 14px; } .demo .chat-thread { display: flex; flex-direction: column; gap: 10px; } .demo .msg { max-width: 82%; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; } .demo .msg.client { align-self: flex-start; background: var(--chip-neutro); color: var(--corpo); border-bottom-left-radius: 4px; } .demo .msg.ia { align-self: flex-end; background: var(--cat-atendimento-tint); color: var(--cat-atendimento-dark); border-bottom-right-radius: 4px; } .demo .demo-note { font-size: 13px; color: var(--meta); margin-top: 14px; line-height: 1.55; } /* Variante "janela do WhatsApp Web": a conversa simulada com a cara do lugar onde ela acontece de verdade. Convive com a variante antiga (.chat-thread + .msg), que segue valendo nos outros posts. O papel de parede é desenho nosso (`tools/gen_wa_bg.py` gera `img/wa-bg.svg`), nunca a arte da Meta. */ .wa { border: 1px solid #d1d7db; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 232px minmax(0, 1fr); font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #111b21; } .wa-side { background: #fff; border-right: 1px solid #e9edef; } .wa-side-topo { background: #f0f2f5; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; } .wa-busca { padding: 7px 10px; border-bottom: 1px solid #e9edef; } .wa-busca span { display: block; background: #f0f2f5; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; color: #8696a0; } .wa-conversa { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid #f4f4f4; } .wa-conversa.ativa { background: #f0f2f5; border-top-color: transparent; } .wa-conversa .av { width: 40px; height: 40px; border-radius: 50%; background: #dfe5e7; color: #5f6b6e; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; } .wa-conversa.ativa .av { background: #c9d1d3; } .wa-conversa .quem { min-width: 0; flex: 1; } .wa-conversa .l1, .wa-conversa .l2 { display: flex; align-items: center; gap: 8px; } .wa-conversa .nome { font-size: 14px; } .wa-conversa .hora { margin-left: auto; font-size: 11px; color: #667781; } .wa-conversa .hora.verde { color: #1fa855; } .wa-conversa .previa { font-size: 12.5px; color: #667781; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .wa-conversa .naolidas { background: #25d366; color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex: none; } .wa-painel { display: flex; flex-direction: column; min-width: 0; } .wa-topo { background: #f0f2f5; border-bottom: 1px solid #e9edef; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 16px; } .wa-topo .av { width: 30px; height: 30px; border-radius: 50%; background: #c9d1d3; color: #5f6b6e; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; } .wa-topo .nome { font-size: 14px; line-height: 1.2; } .wa-topo .status { font-size: 11.5px; color: #667781; line-height: 1.2; } .wa-topo .acoes { margin-left: auto; display: flex; gap: 18px; color: #54656f; } .wa-thread { flex: 1; padding: 16px 40px 12px; background-color: #efeae2; background-image: url("/img/wa-bg.svg"); background-size: 608px 608px; background-repeat: repeat; } .wa-dia { text-align: center; margin-bottom: 14px; } .wa-dia span { background: #fff; color: #54656f; font-size: 11.5px; padding: 5px 12px; border-radius: 7px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); } .wa-linha { display: flex; margin-bottom: 4px; } .wa-linha.saida { justify-content: flex-end; } .wa-bolha { position: relative; max-width: 76%; background: #fff; font-size: 14.2px; line-height: 19px; padding: 6px 9px 8px; border-radius: 7.5px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); } .wa-linha.saida .wa-bolha { background: #d9fdd3; } /* o rabinho só existe na primeira bolha de cada sequência, como no app */ .wa-bolha.primeira { border-top-left-radius: 0; } .wa-linha.saida .wa-bolha.primeira { border-top-left-radius: 7.5px; border-top-right-radius: 0; } .wa-bolha .marca { float: right; font-size: 11px; color: #667781; margin: 6px -4px -5px 8px; display: flex; align-items: center; gap: 3px; } .wa-bolha .rabo { position: absolute; top: 0; } .wa-bolha .rabo.esq { left: -8px; } .wa-bolha .rabo.dir { right: -8px; } .wa-barra { background: #f0f2f5; padding: 8px 16px; display: flex; align-items: center; gap: 12px; } .wa-campo { flex: 1; min-width: 0; background: #fff; border-radius: 999px; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; } .wa-campo .cursor { width: 2px; height: 18px; background: #25d366; flex: none; } .wa-campo .emoji { margin-left: auto; color: #54656f; display: flex; } .wa i-wa { display: flex; color: #54656f; flex: none; } .wa svg.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .wa svg.ico.pq { width: 17px; height: 17px; } .wa svg.ico.visto { width: 16px; height: 16px; stroke: #53bdeb; stroke-width: 2; } /* Sem espaço pras duas colunas: fica só o painel da conversa, que é o que importa */ @media (max-width: 760px) { .wa { grid-template-columns: minmax(0, 1fr); } .wa-side { display: none; } .wa-thread { padding: 14px 14px 10px; } .wa-bolha { max-width: 88%; } } /* Antes e depois */ .before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; } .before-after .ba-col { padding: 20px; border-radius: 14px; border: 1px solid var(--linha); background: var(--superficie); } .before-after .ba-col.before { background: var(--papel); } .before-after .ba-col.after { background: var(--cat-financeiro-tint); border-color: #BFE4DF; } .before-after .ba-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; color: var(--meta); } .before-after .ba-col.after .ba-label { color: var(--cat-financeiro-dark); } .before-after .ba-col ul { padding-left: 18px; gap: 8px; } .before-after .ba-col li { font-size: 15px; line-height: 1.5; } .before-after .arrow { display: flex; align-items: center; color: var(--meta-fraco); font-size: 20px; } /* Variante de um lado só: quando o "antes" não é uma referência útil pro leitor e o que importa é o ganho. Sem isso o painel único herda `1fr auto 1fr` e encolhe pro terço esquerdo da largura. */ .before-after.so-ganho { grid-template-columns: 1fr; } /* Tabela comparativa */ .compare-table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; font-size: 15px; } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--linha); } .compare-table th { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--meta); font-weight: 500; background: var(--papel); } .compare-table td:first-child { font-weight: 700; color: var(--tinta); } .compare-table .check { color: var(--cat-financeiro-dark); font-weight: 900; } .compare-table .x { color: #B3543F; font-weight: 900; } .compare-table .partial { color: #A07A1E; font-weight: 900; } .compare-table tr:last-child td { border-bottom: none; } .tabela-scroll { overflow-x: auto; } /* Checklist */ .checklist { padding: 22px 24px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); } .checklist h3 { margin-top: 0; font-size: 18px; } .checklist ul { list-style: none; padding-left: 0; gap: 10px; margin-top: 12px; } .checklist li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; } .checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 1.5px solid var(--linha-campo); border-radius: 5px; } .checklist.done li::before { content: "✓"; border-color: var(--cat-financeiro); color: var(--cat-financeiro-dark); font-size: 12px; line-height: 15px; text-align: center; } /* Alerta */ .red-flag-box { padding: 22px 24px; border-radius: 16px; background: #FAF0EC; border: 1px solid #EAD3C9; } .red-flag-box h3 { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: #A2523A; margin: 0 0 8px; } /* FAQ */ .faq-block { display: flex; flex-direction: column; gap: 10px; } .faq-item { border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); overflow: hidden; } .faq-item summary { padding: 16px 44px 16px 20px; font-size: 16px; font-weight: 700; cursor: pointer; position: relative; list-style: none; color: var(--tinta); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--meta); font-size: 20px; font-weight: 400; } .faq-item[open] summary::after { content: "−"; } .faq-item .faq-answer { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.6; color: var(--corpo); } .faq-item .faq-answer p + p { margin-top: 10px; } /* Timeline */ .timeline { display: flex; flex-direction: column; gap: 18px; padding-left: 6px; } .timeline-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; } .timeline-marker { width: 30px; height: 30px; border-radius: 50%; background: var(--cor-tint); color: var(--cor-dark); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; border: 1px solid var(--linha); } .timeline-content h3 { margin-top: 0; font-size: 18px; } .timeline-content p { font-size: 15.5px; line-height: 1.6; margin-top: 4px; } /* Perfil de cliente */ .profile-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px 24px; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); } .profile-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--cor-tint); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; } .profile-info { flex: 1; min-width: 200px; } .profile-info h3 { margin-top: 0; font-size: 18px; } .profile-info .profile-meta { font-size: 13.5px; color: var(--texto-3); margin-top: 4px; } .profile-info .profile-meta span::before { content: "· "; opacity: 0.5; } .profile-info .profile-meta span:first-child::before { content: ""; } /* Continue por aqui */ .relacionados { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--linha); } .relacionados h2 { font-weight: 900; font-size: 30px; letter-spacing: -0.015em; margin-bottom: 28px; } .relacionados .grade { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0; } .relacionados .card h3 { font-size: 17px; line-height: 1.3; } /* --- Footer -------------------------------------------------------------- */ .site-footer { background: var(--tinta); color: var(--meta-fraco); padding: 56px 32px 40px; } .site-footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .site-footer .wordmark { color: var(--papel); } .site-footer .wordmark i { color: var(--wordmark); } /* O rodapé é quase preto, e o lockup colorido (azul sobre roxo) morre nele. Em vez de manter um segundo arquivo de logo só pra inverter, o filtro achata o vetor em branco: mesmo desenho, um arquivo só. O site oficial faz o mesmo (lá a logo vem chapada em #f1f1f1, porque o cabeçalho dele também é escuro). */ .site-footer .wordmark img { filter: brightness(0) invert(1); opacity: 0.92; } .site-footer p { font-size: 13.5px; line-height: 1.6; margin-top: 12px; max-width: 34ch; } .footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; } .footer-col .rotulo { font-size: 10.5px; letter-spacing: 0.14em; color: var(--texto-3); } .footer-col a { color: var(--meta-fraco); } .footer-col a:hover { color: var(--papel); } .footer-col a[aria-current] { color: var(--papel); } .footer-bar { max-width: var(--max); margin: 40px auto 0; padding-top: 20px; border-top: 1px solid #2A3B4A; display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); } .footer-bar a { color: var(--texto-3); } .footer-bar a:hover { color: var(--meta-fraco); } .footer-bar .legais { margin-left: auto; display: flex; gap: 20px; } /* Diagrama ASCII e bloco "pra quem quer ir mais fundo": só o post técnico (por-que-ia-funciona) usa. Vieram do styles.css antigo, nos tokens novos. */ .diagram { background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 28px 24px; margin: 32px 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.8; overflow-x: auto; white-space: pre; } .diagram .label { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wordmark); margin-bottom: 18px; white-space: normal; } .advanced-section { background: var(--escuro-superficie); border: 1px solid var(--escuro-linha); color: var(--papel); border-radius: 20px; padding: 32px; margin: 48px 0; } .advanced-section .advanced-tag { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; background: rgba(245, 247, 248, 0.1); color: var(--wordmark); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; } .advanced-section h2, .advanced-section h3 { color: var(--papel); } .advanced-section h2:first-of-type { margin-top: 0; } .advanced-section p, .advanced-section li { color: var(--meta-fraco); } .advanced-section a { color: var(--wordmark); } .advanced-section code { background: rgba(245, 247, 248, 0.12); color: var(--papel); } /* Negrito em superfície escura. Sem isto, herda `article strong { color: var(--tinta) }` (#14202A) e cai sobre fundo escuro (#1E2E3C) com ~1,1:1 de contraste: some da tela. Nenhuma das superfícies escuras tinha regra própria, então a lista cobre todas de uma vez em vez de corrigir só onde o problema foi visto. */ .advanced-section strong, .advanced-section b, .cta-inline strong, .cta-inline b, .cta-escuro strong, .cta-escuro b, .card-escuro strong, .card-escuro b, .faixa-respiro strong, .faixa-respiro b, .diagram strong, .diagram b { color: var(--papel); } /* ========================================================================== COMPONENTES DE MOBILE (desligados no desktop, ligados abaixo de 880px) ========================================================================== */ .controles-mobile { display: none; gap: 10px; margin-left: auto; } .botao-redondo { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-campo); background: var(--superficie); color: var(--tinta); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .botao-redondo:hover { border-color: var(--tinta); } /* Telas cheias de busca e menu */ .tela { position: fixed; inset: 0; z-index: 60; background: var(--papel); display: flex; flex-direction: column; } .tela[hidden] { display: none; } .tela-topo { display: flex; align-items: center; gap: 12px; padding: 8px 18px 12px; border-bottom: 1px solid var(--linha); } .tela-topo .search { flex: 1 1 auto; min-height: 44px; } .tela-corpo { flex: 1; overflow-y: auto; padding: 18px 18px 40px; } .tela .rotulo { margin: 22px 0 12px; } .menu-itens { display: flex; flex-direction: column; } .menu-itens a { padding: 12px 0; min-height: 44px; display: flex; align-items: center; font-size: 17px; font-weight: 700; color: var(--tinta); border-bottom: 1px solid var(--linha); } .menu-itens a:hover { color: var(--acao); } .tela .btn-full { margin-top: 24px; min-height: 44px; } .atalhos { display: flex; flex-wrap: wrap; gap: 8px; } .atalhos button { min-height: 44px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--linha-campo); background: var(--superficie); color: var(--texto-2); font-size: 13.5px; cursor: pointer; } .atalhos button:hover { border-color: var(--tinta); color: var(--tinta); } /* Barra de progresso de leitura (só no artigo) */ .progresso { display: none; position: fixed; top: var(--chrome); left: 0; right: 0; height: 3px; background: var(--linha); z-index: 45; } .progresso i { display: block; height: 100%; width: 0; background: var(--acao); } /* Barra fixa no rodapé do artigo */ .barra-fim { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(245, 247, 248, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha); } .barra-fim .btn { flex: 1 1 auto; min-height: 44px; padding: 13px 18px; } /* ========================================================================== BUSCA (modal, desktop e mobile) Estrutura copiada da central de ajuda: resultado é o POST com as SEÇÕES que casaram dentro dele, cada uma com trecho e link pra âncora. ========================================================================== */ .busca-gatilho { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--linha-campo); border-radius: 999px; background: var(--superficie); color: var(--meta); font-size: 13.5px; cursor: pointer; flex: 0 1 216px; min-width: 0; } .busca-gatilho:hover { border-color: var(--acao); color: var(--texto-2); } .busca-gatilho .busca-lupa { display: flex; color: var(--meta); flex: none; } .busca-gatilho-texto { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .busca-atalho { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--meta); border: 1px solid var(--linha); border-radius: 6px; padding: 2px 6px; background: var(--papel); flex: none; } .busca-atalho span { font-size: 11px; } .busca-modal { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 20px 20px; } .busca-modal[hidden] { display: none; } .busca-fundo { position: absolute; inset: 0; background: rgba(20, 32, 42, 0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .busca-caixa { position: relative; width: min(700px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; } .busca-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); background: var(--superficie); } .busca-topo .busca-lupa { display: flex; color: var(--meta); flex: none; } .busca-campo { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16.5px; color: var(--tinta); } .busca-campo::-webkit-search-cancel-button { display: none; } .busca-fechar { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--chip-neutro); color: var(--texto-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .busca-fechar:hover { background: var(--linha); color: var(--tinta); } .busca-cancelar { display: none; border: 0; background: none; color: var(--acao); font-size: 14.5px; font-weight: 700; cursor: pointer; min-height: 44px; flex: none; } .busca-corpo { flex: 1; overflow-y: auto; padding: 16px 18px 22px; overscroll-behavior: contain; } .busca-contagem { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--meta); margin-bottom: 12px; } .busca-grupo { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; margin-bottom: 10px; } .busca-post { display: flex; align-items: center; gap: 10px; padding: 13px 16px; color: var(--tinta); font-size: 15.5px; font-weight: 700; line-height: 1.3; } .busca-post:hover { color: var(--acao); background: var(--papel); } .busca-post .busca-icone { display: flex; color: var(--meta-fraco); flex: none; } .busca-post-titulo { flex: 1; min-width: 0; } .busca-post-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: var(--meta-fraco); white-space: nowrap; flex: none; } /* a seção é filha do post: a linha em L à esquerda mostra isso sem indentar texto */ .busca-secao { position: relative; display: block; padding: 12px 16px 12px 42px; border-top: 1px solid var(--linha); color: var(--tinta); } .busca-secao::before { content: ""; position: absolute; left: 23px; top: 0; bottom: 50%; width: 9px; border-left: 1px solid var(--linha-campo); border-bottom: 1px solid var(--linha-campo); border-bottom-left-radius: 5px; } .busca-secao:hover { background: var(--papel); } .busca-secao:hover .busca-secao-titulo { color: var(--acao); } .busca-secao-titulo { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; } .busca-secao-trecho { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--texto-3); } .busca-secao-trecho mark { background: var(--indigo-tint); color: var(--cat-gestao-dark); border-radius: 3px; padding: 0 2px; font-weight: 700; } .busca-vazio { color: var(--texto-3); font-size: 14.5px; } .busca-vazio .rotulo { margin: 20px 0 12px; } .busca-atalhos { margin-top: 4px; } /* ========================================================================== RESPONSIVO: desktop-first, em ordem decrescente de largura. A ordem importa: dois blocos que casam na mesma largura resolvem pelo último, e overrides precisam repetir a especificidade do bloco base. ========================================================================== */ /* 1100px: o rail do artigo desce, a grade cai pra 2 colunas */ @media (max-width: 1100px) { .artigo-main { grid-template-columns: 200px minmax(0, 1fr); } .hero { grid-template-columns: 1fr; gap: 48px; } .hero-card h1 { font-size: 38px; max-width: 22ch; } .grade, .relacionados .grade { grid-template-columns: repeat(2, 1fr); } .site-footer-inner { grid-template-columns: 1fr 1fr; } } /* 1080px: a sidebar de temas encolhe */ @media (max-width: 1080px) { .home-grid { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; } } /* 920px: as faixas do ritmo viram coluna única */ @media (max-width: 920px) { .faixa-arquivo .lista { grid-template-columns: 1fr; } .faixa-rapida .lista { grid-template-columns: 1fr; } .faixa-respiro { grid-template-columns: 1fr; gap: 24px; } .faixa-respiro .acao { min-width: 0; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .faixa-cabeca { flex-wrap: wrap; gap: 8px; } .faixa-cabeca .apoio { text-align: left; } } /* ========================================================================== 880px: MOBILE. Header de uma linha com busca e menu em tela cheia, sidebar vira faixa de temas presa abaixo do header, artigo em coluna única com progresso no topo e CTA fixo no rodapé. ========================================================================== */ @media (max-width: 880px) { /* --- header: uma linha, dois alvos de 44px --- */ .site-header-inner { padding: 8px 18px 12px; gap: 12px; flex-wrap: nowrap; } .controles-mobile { display: flex; } .busca-gatilho { display: none; } .busca-modal { padding: 0; } .busca-caixa { width: 100%; max-height: none; height: 100%; border: 0; border-radius: 0; } .busca-fundo { display: none; } .busca-topo { padding: 10px 18px; } .busca-cancelar { display: block; } .busca-fechar { display: none; } .busca-corpo { padding: 16px 18px 40px; } /* só esconde o que virou menu se o JS montou o menu */ body.tem-menu .site-nav, body.tem-menu .header-right { display: none; } /* --- faixa de temas (mesma lista da sidebar, outro arranjo) --- */ /* `minmax(0, 1fr)`, nunca `1fr` puro: `1fr` é `minmax(auto, 1fr)`, e esse `auto` vale min-content. Um único filho que não encolhe estica a coluna inteira até o tamanho dele, e o feed sai da tela. Foi o que aconteceu até 03/08/2026: em 425px a coluna resolvia pra 1285px e a home rolava pro lado. As outras definições de .home-grid já usavam minmax(0, 1fr); só esta, a de mobile, estava sem. */ .home-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; } .sidebar { position: sticky; top: var(--chrome); z-index: 30; gap: 0; margin: 0 -32px 8px; padding: 12px 18px; background: rgba(245, 247, 248, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); } .sidebar .rotulo { display: none; } /* nunca dropdown: a rolagem mostra que existe mais tema adiante */ .lista-temas { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lista-temas::-webkit-scrollbar { display: none; } .tema { width: auto; flex: none; min-height: 44px; padding: 14px 16px; border-radius: 999px; border: 1px solid var(--linha-campo); background: var(--superficie); color: var(--texto-2); font-weight: 400; white-space: nowrap; } .tema[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 700; } .tema .qtd { color: inherit; opacity: 0.55; } .resultados-head { padding-top: 20px; border-top: 1px solid var(--linha); border-bottom: 0; } /* --- artigo: coluna única, TOC em sanfona, laterais fora --- */ .progresso { display: block; } .barra-fim { display: flex; } body.com-barra-fim { padding-bottom: 78px; } .artigo-main { grid-template-columns: 1fr; } .artigo-main > .breadcrumb, .artigo-main > .artigo-head, .artigo-main > .artigo-capa, .artigo-main > .relacionados, .artigo-corpo > article, .artigo-corpo > .toc { grid-column: 1; grid-row: auto; } .artigo-corpo > .toc { margin-bottom: 32px; } .toc-fixo { position: static; max-height: none; overflow: visible; } .toc { flex: 1 1 100%; min-width: 0; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); padding: 0; } .toc .rotulo { display: none; } .toc details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 14px 18px; font-size: 13.5px; font-weight: 700; color: var(--tinta); cursor: pointer; list-style: none; } .toc details > summary::-webkit-details-marker { display: none; } .toc details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--meta); border-bottom: 2px solid var(--meta); transform: translateY(-2px) rotate(45deg); flex: none; } .toc details[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .toc nav { padding: 0 18px 16px; border-left: 0; } .toc nav a { border-left: 0; padding-left: 0; min-height: 44px; } .toc nav a[aria-current="true"] { border-left: 0; } /* compartilhar já está na barra fixa do rodapé: dentro do TOC vira repetição */ .compartilhar { display: none; } article { max-width: none; } .artigo-head h1 { font-size: 38px; } .artigo-head .lead { font-size: 17px; } /* pisos de leitura: 11px no mono da etiqueta, 12.5px em texto de interface */ .capa .etiqueta { font-size: 11px; } .tag { font-size: 12.5px; } /* --- componentes de conteúdo em coluna única --- */ .banner { grid-template-columns: 1fr; gap: 28px; padding: 28px; } .banner h2 { font-size: 28px; } .fluxo .etapas { flex-direction: column; } .fluxo .seta { justify-content: center; transform: rotate(90deg); } .before-after { grid-template-columns: 1fr; } .before-after .arrow { justify-content: center; transform: rotate(90deg); } .stats-row, .numeros { grid-template-columns: 1fr; } } /* 680px: a margem da página encolhe */ @media (max-width: 680px) { .container, .home, .artigo-main { padding-left: 20px; padding-right: 20px; } .sidebar { margin: 0 -20px 8px; } .tela-corpo { padding: 18px 20px 40px; } } /* ========================================================================== 600px: uma coluna em tudo + escala tipográfica de mobile. Pisos: 12.5px em texto de interface, 11px no mono de etiqueta. ========================================================================== */ @media (max-width: 600px) { .grade, .relacionados .grade { grid-template-columns: 1fr; } .hero { padding: 24px 0 32px; } .hero-card h1 { font-size: 27px; } .hero-card .lead { font-size: 15px; } /* o destaque perde a assinatura: sobra data e tempo de leitura */ .hero-card .assinatura > span:nth-child(-n+3) { display: none; } /* 16:9 é raso demais em 390px: o destaque volta pro 3:2 (ver gen_home.py) */ .hero-card .capa.capa-16x9 { aspect-ratio: 3 / 2; } .artigo-head h1 { font-size: 31px; line-height: 1.06; letter-spacing: -0.025em; } article { font-size: 16.5px; line-height: 1.65; } .card h3 { font-size: 19px; } .card .resumo { font-size: 14.5px; } .card-b h3 { font-size: 25px; } .faixa-arquivo .card-c h3 { font-size: 15px; } .faixa-arquivo .card-c { grid-template-columns: 88px 1fr; gap: 14px; } .faixa-rapida { border-radius: 20px; } .faixa-rapida .tempo b { font-size: 23px; } .site-footer-inner { grid-template-columns: 1fr; gap: 28px; } .footer-bar .legais { margin-left: 0; } .quote, blockquote, .pull-quote { font-size: 20px; } .relacionados { margin-top: 56px; } .banner { margin-top: 56px; } .faixa { margin: 40px 0 8px; padding: 22px; border-radius: 18px; } .faixa-respiro { padding: 24px 22px; } .faixa-respiro h2 { font-size: 22px; } .faixa-arquivo { padding: 0; } .faixa-cabeca { flex-direction: column; align-items: flex-start; gap: 6px; } .faixa-respiro .acao { flex-direction: column; align-items: stretch; } .faixa-respiro .acao .btn { width: 100%; min-height: 44px; } .faixa-respiro .acao .apoio { text-align: center; } .carregar .btn { min-height: 44px; width: 100%; } } /* ========================================================================== COMPARATIVOS (/comparativos/) — páginas não listadas Fica no fim do arquivo de propósito. O responsivo acima redefine `.artigo-main { grid-template-columns: ... }` em 1100px e em 880px; como dois blocos que casam resolvem pelo último, um override colocado junto da regra base seria derrubado em toda tela menor que 1100px. Essas páginas não têm TOC, capa nem relacionados: são página de máquina (crawler de IA), não de leitura. Sem a coluna lateral de 200px o texto para de nascer empurrado pra direita. ========================================================================== */ .artigo-main.comparativo { grid-template-columns: minmax(0, var(--max-artigo)); } .artigo-main.comparativo > * { grid-column: 1; grid-row: auto; } .artigo-main.comparativo > article { padding-top: 4px; } /* Empilha a arte do CTA abaixo do texto em tela estreita. Fica no FIM do arquivo porque as media queries acima redefinem o bloco e venceriam um override colocado junto da regra base (mesmo motivo do .artigo-main.comparativo). */ @media (max-width: 700px) { .cta-inline.com-arte { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .cta-inline.com-arte > .arte { grid-column: 1; grid-row: auto; } } /* --- Etiqueta sobre capa em foto (rollout de 07/08/2026) ------------------ A capa deixou de ser ilustração em tom pastel e virou foto. A pílula branca com ponto colorido funcionava sobre o pastel; sobre foto ela some ou briga. Regra nova: a etiqueta acompanha a LUMINOSIDADE da capa, não a categoria. - capa escura (padrão) -> chip no tom pastel da categoria, texto no escuro. Contra a foto dá ~13:1 em todas as 9 categorias. - capa clara (.capa-clara, hoje só os 2 cases de logo sobre branco) -> chip no tom escuro com texto branco (8,23:1). O pastel sobre branco dá 1,13:1 e desaparece, que foi o defeito que motivou a regra. O ponto colorido sai: o chip inteiro já é a cor. */ .capa .etiqueta { background: var(--cor-tint); color: var(--cor-dark); gap: 0; } .capa .etiqueta::before { display: none; } .capa.capa-clara .etiqueta { background: var(--cor-dark); color: #FFFFFF; }