/* ── CANTOS ──────────────────────────────────────────────────────────────── Este desenho NÃO tem cantos redondos. As únicas excepções são os BOTÕES e os RÓTULOS/pastilhas (que levam `999px`, e são redondos de propósito porque a forma é que os distingue do texto à volta) e os RETRATOS (`50%`, que são círculos). Tudo o resto — cartões, painéis, caixas de diálogo, menus, campos de formulário, chamadas — fecha em canto vivo. Onze `border-radius` foram retirados a 26/08/2026 por terem entrado um a um sem ninguém decidir que o desenho mudara: cartão de opinião, campo da newsletter, caixa de parceiros vazia, painel ECO FAST, campo da conta, diálogo da conta, painel e lista do menu da conta, mensagens do RCP, chamada Premium e item da fila de opinião. Antes de acrescentar um `border-radius` novo: é botão ou rótulo? Se não é, não leva. ────────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────────── Camada de componentes do ECO ────────────────────────────────────────────────────────────────────────── Onde é que o CSS vive, agora que há uma regra: theme.json tokens (paleta, tipografia, espaçamento) e estilos de blocos do core. Nada de componentes. assets/css/components.css ESTE ficheiro — cartões, etiquetas, botões, títulos de secção, miniaturas. Carregado no site e também no editor (add_editor_style), por isso o que se vê no editor é o que sai no ecrã. style.css cromo do site: barra SAPO, cabeçalho, rodapé. inc/*.php só o que precisa de resolver um URL em PHP (brand-decor.php e a marca de água da faixa verde). Convenção: prefixo `eco-`, `__elemento`, `--modificador`. ── Porquê os `:is(.eco-x, .is-style-eco-x)` ─────────────────────────────── Há duas maneiras de um componente chegar ao ecrã e as duas têm de dar o mesmo resultado: 1. um padrão do tema escreve `"className":"eco-card eco-card--vertical"`; 2. alguém escolhe "Cartão vertical" no painel Estilos do editor, e aí quem manda é o core — gera `is-style-eco-card--vertical` e não nos pergunta nada (ver inc/block-styles.php). Daí o par. Cada variante é autónoma de propósito: não depende da classe base `.eco-card`, porque no caminho 2 essa classe não existe. ── Ausências ───────────────────────────────────────────────────────────── Tudo é tolerante à falta de partes. Uma categoria, um título ou um subtítulo podem não existir (cartões de citação sem título, cartões do Radar de Preços sem antetítulo). Por isso os espaçamentos saem de `* + *` e de adjacências, nunca de `:first-child`/`:nth-child` — um filho que falte não deixa buraco. Os elementos internos dos cartões não levam classe: são apanhados pelas classes do core (`.wp-block-post-title`, `.wp-block-post-terms`, …). Assim um padrão só precisa de uma classe no contentor e larga os atributos inline que tinha a repetir doze vezes. ────────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────────── 0. Alisamento de tipos ────────────────────────────────────────────────────────────────────────── Por omissão o macOS engorda o texto claro sobre fundo escuro e o texto pequeno em negrito, e é isso que faz as etiquetas e os botões lerem-se mais pesados aqui do que no desenho — que foi feito no Figma, que já alisa. Sem isto, baixar o peso de 700 para 600 corrige o Mac e deixa o Windows leve de mais; com isto, o mesmo valor serve os dois. ────────────────────────────────────────────────────────────────────────── */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ────────────────────────────────────────────────────────────────────────── 1. Antetítulos (kicker) ────────────────────────────────────────────────────────────────────────── O texto de categoria em maiúsculas que abre quase todos os cartões. Estava escrito à mão como atributos inline em doze sítios; agora é uma classe. ────────────────────────────────────────────────────────────────────────── */ /* Caixa de frase e não maiúsculas: no desenho lê-se "Categoria X" em todos os cartões da homepage (medido em pages-desktop/ECO homepage.png — #00672C, 14px, sem transformação). Em maiúsculas o antetítulo passava a ler-se como um rótulo de secção e competia com o título do cartão. */ :is(.eco-kicker, .is-style-eco-kicker) { color: var(--eco-accent-text); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.2; } :is(.eco-kicker, .is-style-eco-kicker) a { color: inherit; text-decoration: none; } :is(.eco-kicker, .is-style-eco-kicker) a:hover { text-decoration: underline; } /* Sobre imagem escura (cartão destaque) o verde não se lê: passa a branco. */ .eco-kicker--inverse, .eco-kicker--inverse a { color: var(--wp--preset--color--base); } /* A etiqueta de categoria aparece sublinhada por herdar o estilo de link; no desenho é texto limpo. (Vinha de style.css.) */ .eco-eyebrow a, .wp-block-post-terms a { text-decoration: none; } .eco-eyebrow a:hover, .wp-block-post-terms a:hover { text-decoration: underline; } /* ────────────────────────────────────────────────────────────────────────── 2. Etiquetas ────────────────────────────────────────────────────────────────────────── Pílula. As variantes pintam o próprio elemento (serve para parágrafos, como o chip de tema); `--brand` é a excepção e pinta cada link lá dentro, porque um bloco post-terms com dois termos tem de dar duas pílulas e não uma só à volta das duas. ────────────────────────────────────────────────────────────────────────── */ .eco-label, :is(.eco-label--topic, .is-style-eco-label--topic), :is(.eco-label--exclusive, .is-style-eco-label--exclusive), .eco-topic-chip { display: inline-block; width: fit-content; max-width: 100%; margin: 0; border-radius: 999px; /* 22px de altura no desenho, contra os 29px que isto tinha: a pastilha media 100×22 (pages-desktop/ECO homepage.png). 10px de cada lado e não 12: a pastilha "Empresas" do artigo mede 83×22 para um texto de ~62px, o que dá 10,5 de folga por lado. Com 12 a pílula ficava com uma coroa de fundo à volta da palavra em vez de a vestir. */ padding: 2px 10px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; /* Nenhuma etiqueta do desenho está em maiúsculas — nem a de categoria, nem a de tema, nem "Em Direto". Em versaletes a etiqueta gritava mais do que o título que devia estar a servir. */ letter-spacing: 0; } .eco-label a, :is(.eco-label--topic, .is-style-eco-label--topic) a, .eco-topic-chip a { color: inherit; text-decoration: none; } /* Exclusivo — o selo do desenho: verde escuro da marca, letra branca. Amostrado nas referências (`report screens/Group 39/40/41/42/12/38.png`) a 28/08/2026, isolando a coluna da pastilha da coluna da categoria ao lado, que também é verde e confundia a medição: pastilha ......... rgb(0, 103, 44) = `primary-dark` letra dela ....... rgb(255, 255, 255) categoria ao lado rgb(0, 103, 44) em texto, sem caixa ── Isto era PRETO, e a razão de o ser não se confirmou ─────────────────── O comentário anterior dizia «invertido, para saltar à vista por cima de uma imagem». A intenção era boa, mas as referências mostram a pastilha verde TAMBÉM por cima de fotografia — no `Group 12` ela está sobre a imagem, a y=438 de 564, e é verde na mesma. Ou seja, o preto resolvia um problema que o desenho resolve de outra maneira. Usa `--eco-accent-text` e não o verde escrito à mão, para o selo seguir a marca: numa home de canal o "Exclusivo" sai na cor dessa marca, como todas as outras pastilhas cheias já saem. */ :is(.eco-label--exclusive, .is-style-eco-label--exclusive) { background: var(--eco-accent-text); color: var(--wp--preset--color--base); padding: 2px 10px; } /* ── Categoria ──────────────────────────────────────────────────────────── A pastilha que abre quase todos os cartões do desenho. Veste a cor da marca do termo: eRadar azul, Local Online amarelo, Advocatus preto. A cor não está aqui — chega em `--eco-label-bg`/`--eco-label-text`, que inc/brands.php declara por slug a partir do registo de marcas, e que um filtro no post-terms pendura em cada termo. Assim um artigo com duas categorias dá duas pastilhas de cores diferentes, e acrescentar uma marca é uma linha no registo e mais nada. O recuo é a cor neutra para categorias sem marca (Política, Empresas). */ :is(.eco-label--categoria, .is-style-eco-label--categoria) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: none; padding: 0; text-transform: none; letter-spacing: 0; } /* Um artigo com duas categorias dá duas pastilhas, e o core mete-lhes uma vírgula pelo meio. Entre duas pastilhas a vírgula fica a pairar no meio do nada — quem separa agora é o espaço. */ :is(.eco-label--categoria, .is-style-eco-label--categoria) .wp-block-post-terms__separator { display: none; } :is(.eco-label--categoria, .is-style-eco-label--categoria) a { display: inline-block; border-radius: 999px; padding: 2px 10px; background: var(--eco-label-bg, var(--wp--preset--color--surface)); color: var(--eco-label-text, var(--wp--preset--color--ink)); font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; text-decoration: none; } :is(.eco-label--categoria, .is-style-eco-label--categoria) a:hover { text-decoration: none; opacity: .85; } /* ── A pastilha do artigo ───────────────────────────────────────────────── O antetítulo da peça é a mesma pastilha de categoria, mas vestida com a cor do tema em vez do recuo neutro: verde-escuro com letra clara, medido no desenho (pages-desktop/ECO artigo.png — fundo #00672C, que é o `--eco-accent-text`). Era texto verde solto e lia-se como um antetítulo de cartão, quando ali é a etiqueta que diz de que secção é a peça. As cores entram como valores por omissão no contentor e não no ``: assim uma categoria com marca própria continua a mandar — a regra que inc/brands.php gera está no próprio link e ganha à herança. Uma peça de Capital Verde mantém o azul da marca; uma de Empresas fica verde-escura. O tema de secção também passa por aqui sem nada mais: `--eco-accent-text` muda com a vertical e a pastilha muda com ele. */ :is(.eco-label--cheia, .is-style-eco-label--cheia) { --eco-label-bg: var(--eco-accent-text); --eco-label-text: var(--wp--preset--color--base); } /* A mesma caixa da pastilha comum — o que a distingue é a cor e o peso, não o tamanho. Medida no desenho: 22px de altura e ~10px de folga lateral, tanto a do artigo ("Empresas", 79×22 para 65px de texto) como a das colunas de temas ("Categoria X", 96×22 para 76). A 4px/14px saía com 26 de altura — quase um botão. */ :is(.eco-label--cheia, .is-style-eco-label--cheia) a { padding: 2px 10px; font-weight: 700; } /* A mesma pastilha sem link por baixo — é o caso das colunas de "Temas em Destaque", onde o rótulo é texto e não um termo. As variáveis acima só chegam ao ``; aqui a cor é posta na própria caixa. O selector exclui a de categoria de propósito: nessa, a caixa é só o contentor dos termos e pintá-la dava um retângulo verde à volta das pastilhas. */ :is(.eco-label--cheia, .is-style-eco-label--cheia):not(.eco-label--categoria):not(.is-style-eco-label--categoria) { background: var(--eco-label-bg); color: var(--eco-label-text); padding: 2px 10px; font-weight: 700; } /* Marca (Nossas Marcas): contorno em vez de fundo cheio, e caixa normal — são nomes próprios ("ECOseguros"), não categorias em maiúsculas. */ :is(.eco-label--brand, .is-style-eco-label--brand), .eco-brand-pill { background: none; padding: 0; text-transform: none; letter-spacing: 0; } :is(.eco-label--brand, .is-style-eco-label--brand) a, .eco-brand-pill a { display: inline-block; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 999px; padding: 2px 10px; text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 700; } /* ── "Em Direto" ─────────────────────────────────────────────────────────── Pílula vermelha de 22px com texto branco. Medido no sprite: 98×22, fundo #E05E5E (preset `negative`), ponto de 8px a 8px da esquerda, 8px de intervalo até ao texto. `width:fit-content` e não `display:inline-flex`: o core aplica `display:flex` com dois níveis de classe e ganharia à regra do tema — a pílula esticava-se aos 1360px da coluna. (Vinha de style.css.) */ .eco-label--live, .eco-live-badge { /* A folga lateral é aqui e não no markup do padrão: é a mesma medida que posiciona as ondas do sonar, e escrita nos dois sítios saía do sítio quando um deles mudasse. */ --eco-live-pad: 18px; position: relative; width: fit-content; max-width: 100%; align-items: center; /* Mais larga e menos alta: no desenho a pílula mede 127×32 e o texto lá dentro é maior do que o de uma etiqueta comum. A altura vem da folga lateral e do corpo do texto, não de uma altura mínima que sobrava por cima e por baixo das letras. */ min-height: 30px; padding: 0 var(--eco-live-pad); border-radius: 999px; font-size: var(--wp--preset--font-size--medium); /* Herdava as maiúsculas de `.eco-label` e saía "EM DIRETO"; no desenho é "Em Direto" em caixa de frase. */ text-transform: none; letter-spacing: 0; } .eco-label--live p, .eco-live-badge p { display: inline-flex; align-items: center; margin: 0; line-height: 1; white-space: nowrap; } /* O núcleo do ponto tem 8px e não se mexe; o que anima são os anéis à volta. */ .eco-label--live p::before, .eco-live-badge p::before { content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: currentColor; } /* ── O sonar ────────────────────────────────────────────────────────────── Réplica do efeito de referência (codepen.io/xmalinov/pen/VKrYox): não é um anel a expandir-se, é um comboio de ondas cheias — discos da cor do emissor, a partir da opacidade 0,4, a crescer até 3× e a apagar-se, com uma onda nova de meio em meio segundo e andamento linear. É a cadência que faz o gesto ler-se como sonar; uma onda sozinha lê-se como um clique. São duas e não as quatro da referência, e mais devagar do que lá: aquilo é um emissor de 160px numa página vazia, isto é um ponto de 8px ao lado de duas palavras. À escala do distintivo, quatro ondas de meio em meio segundo davam uma mancha em movimento constante a competir com a manchete que a pílula está a anunciar. Uma onda de 1,8 em 1,8 segundos deixa cada uma completar o seu percurso antes de a seguinte sair. O andamento também não é o linear da referência: `ease-out` abre depressa e trava no fim, que é como uma onda se propaga — a linear, a 3,6s, via-se o disco a arrastar-se a velocidade constante. Ficam presas ao ponto pela mesma medida que dá a folga da pílula (`--eco-live-pad`), mais os 4px do raio do ponto. Absolutas, não entram na caixa flex nem empurram o texto. Não podem ir para trás do emissor como na referência (lá, `z-index:-1`): aqui o "emissor" está por cima do fundo vermelho da própria pílula, e uma onda atrás dele desaparecia debaixo desse fundo. Ficam à frente, e como são da cor do ponto e translúcidas dá no mesmo. A cor sai de `currentColor`: trocar a cor do bloco no editor troca também as ondas. */ .eco-label--live::before, .eco-label--live::after, .eco-live-badge::before, .eco-live-badge::after { content: ""; position: absolute; left: var(--eco-live-pad); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; animation: eco-live-sonar 3.6s cubic-bezier(.16, .7, .3, 1) infinite; } /* Meio ciclo de atraso: é o que mantém o intervalo constante entre ondas. */ .eco-label--live::after, .eco-live-badge::after { animation-delay: 1.8s; } /* A opacidade apaga-se antes do fim do percurso: uma onda que ainda se vê quando pára de crescer termina de repente. Assim chega ao fim já apagada e o recomeço não tem costura. */ @keyframes eco-live-sonar { 0% { transform: scale(1); opacity: .34; } 75% { opacity: .04; } 100% { transform: scale(3); opacity: 0; } } /* Um sinal que pisca sem parar é desconfortável para quem pediu menos movimento; o ponto fica, as ondas saem. */ @media (prefers-reduced-motion: reduce) { .eco-label--live::before, .eco-label--live::after, .eco-live-badge::before, .eco-live-badge::after { display: none; } } /* ────────────────────────────────────────────────────────────────────────── 3. Títulos de secção ────────────────────────────────────────────────────────────────────────── O filete e o espaço por cima passam a viver no próprio título e não no grupo da secção — era o que obrigava a repetir as mesmas linhas de `border` e `padding` inline em cada padrão. A seta "→" também deixa de ser um caractere escrito à mão: aparece sozinha quando o título é um link e desaparece quando não é. Nunca mais há um "→" pendurado num título que não vai a lado nenhum. ────────────────────────────────────────────────────────────────────────── */ /* Medido em docs/reference-snapshots/pages-desktop/ECO homepage.png: filete verde da marca (#00C353) por cima, rótulo pequeno em verde-texto (#00672C) em caixa de frase, e um "+" numa pastilha redonda cinzenta. Não é um título grande em ink com uma seta — era o que o tema tinha e não está em lado nenhum do desenho. O peso da secção vem do filete verde, não do corpo de letra. */ :is(.eco-section-title, .is-style-eco-section-title) { display: flex; align-items: center; gap: .5rem; margin-top: 0; /* 2px: no desenho as linhas y2028 e y2029 são ambas #00C353. */ border-top: 2px solid var(--eco-accent); /* 8px e não 12: nos dez títulos de secção da homepage o desenho põe 9-10px entre o filete e o primeiro pixel de letra. Com 12 de folga mais a entrelinha do rótulo iam 16, e o filete deixava de se ler como a linha daquela secção para passar a linha a fechar a anterior. */ padding-top: var(--wp--preset--spacing--20); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.2; color: var(--eco-section-title-color, var(--eco-accent-text)); /* Folga por baixo, por omissão. Não estava declarada e o que se via era o que cada contentor desse: medido a 26/08/2026, a homepage e o /ultimas/ davam 24px pelo blockGap e as homes de canal davam **12** — onze títulos em doze. O padrão do site já era 24; o que faltava era estar escrito. As margens de irmãos colapsam em fluxo normal, por isso onde já havia 24 continua 24 e não passa a 48. */ margin-bottom: var(--wp--preset--spacing--50); } :is(.eco-section-title, .is-style-eco-section-title) a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; } :is(.eco-section-title, .is-style-eco-section-title) a:hover { text-decoration: underline; } /* A pastilha do "+" é desenhada e não escrita: um "+" no texto ia parar aos leitores de ecrã e ao resumo do motor de busca como parte do nome da secção ("Mercados +"). */ /* Pastilha de 16px com o "+" a ocupar metade dela — medido no desenho: círculo de 16px, glifo de 8px (rácio 0,50). Estava a 20px de círculo para 5px de glifo (0,25) e o sinal perdia-se lá dentro. */ :is(.eco-section-title, .is-style-eco-section-title) a::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--eco-accent-text); font-size: 1.3em; font-weight: 400; line-height: 1; text-decoration: none; } /* ────────────────────────────────────────────────────────────────────────── As secções de uma GRELHA — o ritmo, e só o ritmo ────────────────────────────────────────────────────────────────────────── Aqui esteve, durante algumas horas de 26/08/2026, um título de secção a `xx-large` (40px) na cor do canal. Foi retirado, e vale a pena dizer porquê para não voltar. A queixa que o originou era real — "não vejo os títulos" numa home de canal. O diagnóstico é que estava errado. Mediu-se a PRODUÇÃO (`.grid-block__section-title` em eco.sapo.pt/advocatus/ = 41px) e tratou-se isso como especificação. A produção é o site que estamos a substituir, não a fonte de desenho. No Figma os rótulos de secção medem **14px**, sem uma única excepção — `Opinião` 53×14, `Mercados` 67×14, `Política` 52×14, `Especiais` 65×14, `Temas em Destaque` 136×14. O único texto de secção maior no ficheiro é o `Política` a 44px do cabeçalho de arquivo de categoria, que tem 1360 de largura e um resumo por baixo: é título de página, não rótulo de fila. O que estava partido era o ESPAÇO, não a letra. Uma `.eco-bloco` é um `wp-block-group` e mais nada, por isso o único espaço entre secções era o `blockGap` da raiz: 16px. Vinte e quatro secções a 16px são uma coluna contínua sem juntas, e um rótulo de 14px a meio disso não se lê como o título da fila de baixo — lê-se como a última linha da fila de cima. Portanto: se os títulos voltarem a parecer pouco visíveis, o que se mexe é o espaço à volta deles, ou o filete, ou a cor — nunca o corpo de letra. O peso de uma secção vem do filete verde, não do tamanho da letra, e isso já estava escrito no tema antes de alguém lhe passar por cima. ── 27/08/2026: 64px fixos passaram a 80→144 fluidos ───────────────────── Os 64px (`spacing|80`) foram postos aqui a olho, por serem o que o rodapé já usava. Mediu-se agora, com o `npm run espacos` (visual-tests), o espaço REAL entre secções — da última coisa desenhada de uma à primeira da seguinte — nas dez homes de canal, dos dois lados: produção nós (64px) falta desktop 1440px 147.6px 64.8px −83px mobile 390px 98.3px 64.8px −34px 459 vãos medidos na produção, 264 nos nossos. No desktop as DEZ homes estavam curtas, entre 56 e 93px cada. A queixa era real e não era pequena: tínhamos 44% do respiro da produção. Duas coisas que a medição mostrou e que valem mais do que os números: 1. NA PRODUÇÃO O ESPAÇO VIVE DENTRO DA SECÇÃO, não entre secções. As caixas estão encostadas (vão de caixa = 0) e o respiro é `padding`: 73px por baixo do conteúdo, 47px por cima do título seguinte. Do nosso lado é tudo `margin` e o interior é rente (0.8px / 0px). Para o olho dá o mesmo enquanto o fundo for branco — deixa de dar no dia em que uma secção levar cor de fundo, e nesse dia o que se acrescenta é `padding` à secção, não mais margem a esta regra. 2. A PRODUÇÃO ENCOLHE O RITMO NO TELEMÓVEL, e de propósito: 147.6 → 98.3, dois terços. Um valor fixo não podia servir os dois. Daí o `clamp()`: ancorado em 80px a 390 e 144px a 1440, a subir em linha recta pelo meio (80 = 3.5rem + 6.1vw a 390; 144 = 3.5rem + 6.1vw a 1440). Porquê 80 no telemóvel e não os 98.3 da produção: ali a produção anda muito espalhada (p25 = 67, p75 = 144) e em três das dez homes já estava mais apertada do que nós. 80px tira dois terços da falta sem passar à frente da metade mais justa da produção. No desktop não há esse cuidado a ter — a produção é consistente (p25 = 130) e as dez páginas estavam curtas. ────────────────────────────────────────────────────────────────────────── */ .eco-bloco + .eco-bloco { margin-top: clamp(5rem, 3.5rem + 6.1vw, 9rem); } /* ── A fila da Opinião arranca toda da mesma linha ──────────────────────── A fila é uma grelha desenhada com estilo inline pelo eco-core (`display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px`) e sem `align-items`. Medido no Advocatus a 1440px: os quatro cartões acabavam todos em y=671 e começavam em y diferentes — o de título a duas linhas em 529, os outros três em 553. Alinhados pelo fundo, portanto, e o que se lê numa fila de quatro não é o fundo, são os títulos: pareciam três cartões descaídos ao lado de um. `start` e não `stretch`: esticar dava a todos a altura do mais alto e o espaço sobrava por baixo do texto, que é o mesmo desalinhamento com outro nome. O inline não declara `align-items`, por isso esta regra ganha sem precisar de tocar no PHP que o escreve. O `align-items` sozinho não chegou, e a segunda metade é a que interessa — e não é do core, é nossa. Os cartões traziam `margin-top: 24px`, todos menos o primeiro, e quem lho dava era esta regra, mais abaixo nesta folha: :is(.eco-card--opiniao, …) + :is(.eco-card--opiniao, …) { margin-top: … } Está certa para o que foi escrita: a fita de Opinião da homepage empilha os cartões numa COLUNA e ali a margem é o que os separa. Numa `__fila` os mesmos cartões são irmãos na horizontal, o `+` continua a casar, e a margem que devia separar linhas passa a empurrar para baixo três dos quatro cartões. Quem separa numa grelha é o `gap`, que já lá está a 40px. O selector abaixo leva as duas classes de cartão de propósito: com `> *` ficava em 0,2,0, empatado com o `:is() + :is()`, e um empate resolve-se pela ordem no ficheiro — que aqui é a errada, porque a regra da fita vem depois. Com a lista de cartões sobe a 0,3,0 e ganha onde quer que esteja escrita. Vale para qualquer `__fila` e não só para a da Opinião: são todas grelhas com `gap` próprio. */ [class*="eco-bloco--"] .eco-bloco__fila { align-items: start; } .eco-bloco .eco-bloco__fila > :is(.eco-card, [class*="eco-card--"]) { margin-top: 0; } /* Duas variantes de título de secção sairam daqui a 26/08/2026, e o motivo fica escrito para não voltarem por engano: `--display` (ink, x-large, filete cinzento) — zero utilizações vivas. Só existia no padrão de demonstração; nenhuma página do staging a servia. `--green` — punha a cor por omissão outra vez, em voz alta. Uma variante que repete o estado por omissão é uma escolha a mais para quem edita e nenhuma diferença para quem lê. Foram medidas antes de sair: `grep` no tema e contagem no HTML servido de `/`, `/ultimas/`, `/ficha-tecnica/`, `/manifesto-editorial/` e `/premium/`. Zero ocorrências das duas em todas. As outras quatro variantes ficaram precisamente por NÃO serem zero — a `--pagina`, por exemplo, está treze vezes no conteúdo guardado da Ficha Técnica e do Estatuto Editorial. */ /* A coluna Últimas é a excepção: abre a coluna do herói, e ali o filete verde duplicava a linha que a própria coluna já tem ao lado. */ :is(.eco-section-title--sem-filete, .is-style-eco-section-title--sem-filete) { border-top: 0; padding-top: 0; } /* Título de bloco de uma página institucional — Ficha Técnica, Estatuto Editorial. Mantém o filete verde e o verde-texto do título de secção, mas com o corpo do intertítulo do artigo (32px) em vez dos 14px do rótulo. Existe porque a combinação estava a acontecer por acidente: dentro de `.eco-article-body` a regra do intertítulo (`h2.wp-block-heading`, duas classes) ganha à do título de secção (uma), e o que saía era um híbrido que ninguém tinha decidido. Ou se impedia, ou se assumia — assume-se, porque num documento longo de leitura corrida o filete é o que dá a ver onde é que um bloco acaba e o seguinte começa. O `padding-top` sobe para acompanhar o corpo maior: a 8px, que é a medida do rótulo pequeno, um título de 32px ficava colado à linha. O ritmo à volta dele foi medido a 26/08/2026 e estava desequilibrado: 48px por cima e **12px** por baixo, contra os 24px que o corpo do artigo põe entre parágrafos. Um título ficava mais perto do texto que introduz do que do que lhe convinha — e como o `.eco-section-title` põe `margin-bottom: 0` para os rótulos pequenos, era esse zero que aqui sobrava. Fica com os mesmos 24px do corpo, e a folga por baixo do filete sobe de 16 para 24, que é o que dá ar a uma letra de 32px. */ :is(.eco-section-title--pagina, .is-style-eco-section-title--pagina) { display: block; font-family: var(--wp--preset--font-family--headline); font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; padding-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50); } /* Antetítulo de secção — maiúsculas, para "NOSSAS MARCAS" e para a coluna Últimas. Mantém o filete verde por cima. */ /* O espacejamento desceu duas vezes: 0.06em desmanchava um rótulo curto — "ÚLTIMAS", "FILTRAR POR CATEGORIA" — em letras soltas, e a 0.04em ainda se lia mais aberto do que o desenho. Fica em 0.02em, o mínimo que separa as maiúsculas sem as colar. */ :is(.eco-section-title--eyebrow, .is-style-eco-section-title--eyebrow) { text-transform: uppercase; letter-spacing: 0.02em; } /* Filete em baixo e cinzento, para os rótulos da coluna da direita. No desenho de /ultimas/ o "FILTRAR POR CATEGORIA" tem a linha por baixo do texto (y=714, 2px em #E0E0E0) e não o filete verde por cima — ali a coluna já é estreita e o verde por cima punha duas marcas verdes coladas, o rótulo e a linha. Medido em docs/reference-snapshots/pages-desktop/ECO ultimas.png. */ :is(.eco-section-title--filete-baixo, .is-style-eco-section-title--filete-baixo) { border-top: 0; padding-top: 0; padding-bottom: var(--wp--preset--spacing--30); border-bottom: 2px solid var(--wp--preset--color--border); /* Um degrau acima do `small` dos outros rótulos: aqui o título é a única coisa que abre a coluna da direita, e a 14px ficava mais pequeno do que as próprias pastilhas que anuncia. */ font-size: var(--wp--preset--font-size--medium); } /* `.eco-ultimas-head` deixou de ter regras próprias: o "+" que a distinguia passou a fazer parte do título de secção, e a coluna Últimas usa agora a variante `--eyebrow` como qualquer outra. A classe fica só como âncora para conteúdo já gravado na base de dados. */ /* ────────────────────────────────────────────────────────────────────────── 4. Ligações e botões ────────────────────────────────────────────────────────────────────────── As variantes servem num link solto e no bloco Botão do core. No bloco a classe cai no contentor (`div.wp-block-button`) e quem se vê é o `` lá dentro — por isso o contentor NÃO pode levar geometria. Era esse o erro que fazia os botões do painel Para Si terem duas bordas e 63px de altura em vez de 48: o contentor e a âncora recebiam ambos a moldura e a folga, e somavam-se. O `:not(.wp-block-button)` mantém a variante utilizável solta sem a duplicar dentro do bloco. ────────────────────────────────────────────────────────────────────────── */ .eco-btn:not(.wp-block-button), .eco-btn .wp-block-button__link, :is(.eco-btn--dark, .is-style-eco-btn--dark):not(.wp-block-button), :is(.eco-btn--dark, .is-style-eco-btn--dark) .wp-block-button__link, :is(.eco-btn--outline, .is-style-eco-btn--outline):not(.wp-block-button), :is(.eco-btn--outline, .is-style-eco-btn--outline) .wp-block-button__link, :is(.eco-btn--ghost, .is-style-eco-btn--ghost):not(.wp-block-button), :is(.eco-btn--ghost, .is-style-eco-btn--ghost) .wp-block-button__link, .eco-load-more a { display: inline-block; /* Um botão a 100% da coluna (painel Para Si) somava a folga à largura e transbordava 6px no telemóvel. */ box-sizing: border-box; border: 1px solid transparent; border-radius: 999px; /* 48px de altura, como o "Entrar" do cabeçalho e os dois botões do painel Para Si no desenho (medidos em components/themed-panel-with-login.png: bandas y131-178 e y203-250, ambas de 48px). */ padding: 12px 22px; /* 700 lia-se pesado de mais ao lado do texto do painel. O Manrope é variável, por isso 600 existe sem pedir outro ficheiro. */ font-weight: 600; line-height: 1.2; text-decoration: none; } /* Escuro — o botão principal do desenho. É esta a chamada à ação em todo o lado: "Registar" no painel Para Si, "Ver todas as newsletters" na faixa, "Assinatura Premium" no cabeçalho. Verde-escuro com letras claras, e não preto com letras verdes: o botão da faixa das newsletters foi medido pixel a pixel no desenho — fundo #002410 (preset `inverse`) e texto #EDEFEC (preset `surface`). Preto com texto verde era leitura nossa e não do desenho; sobre o painel cinzento dava um bloco muito mais duro do que o desenho pede. O botão verde-cheio existe mas quase não se usa: sobre o painel verde desaparecia, e sobre branco a ECO reserva o verde para os filetes e para o texto de secção. */ :is(.eco-btn--dark, .is-style-eco-btn--dark):not(.wp-block-button), :is(.eco-btn--dark, .is-style-eco-btn--dark) .wp-block-button__link { background: var(--wp--preset--color--inverse); border-color: var(--wp--preset--color--inverse); color: var(--wp--preset--color--surface); } :is(.eco-btn--dark, .is-style-eco-btn--dark):not(.wp-block-button):hover, :is(.eco-btn--dark, .is-style-eco-btn--dark) .wp-block-button__link:hover { background: var(--eco-accent); border-color: var(--eco-accent); color: var(--wp--preset--color--inverse); } /* Cheio a verde. Igual ao `styles.elements.button` do theme.json, aqui para poder ser usado fora do bloco Botão. */ .eco-btn--primary:not(.wp-block-button), .eco-btn--primary .wp-block-button__link { background: var(--eco-accent); color: var(--wp--preset--color--ink); } .eco-btn--primary:not(.wp-block-button):hover, .eco-btn--primary .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--eco-accent); } /* Contorno — a acção secundária ("Iniciar sessão" ao lado de "Registar"). */ :is(.eco-btn--outline, .is-style-eco-btn--outline):not(.wp-block-button), :is(.eco-btn--outline, .is-style-eco-btn--outline) .wp-block-button__link { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); background: none; } :is(.eco-btn--outline, .is-style-eco-btn--outline):not(.wp-block-button):hover, :is(.eco-btn--outline, .is-style-eco-btn--outline) .wp-block-button__link:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--eco-accent); } /* ── "Carregar mais artigos" ────────────────────────────────────────────── O paginador das listagens (/ultimas/ e arquivos de categoria) não é uma acção secundária, e estava a herdar o contorno: caixa vazia com letra preta. No desenho é o botão escuro do sistema, com texto claro e um disco branco com um "+" à direita (ECO ultimas.png, y≈3028–3072: #002410, 248×44, disco de 20px). O "+" é desenhado e não escrito, como na pastilha dos títulos de secção: escrito, ia parar ao leitor de ecrã e ao resumo do motor de busca colado ao rótulo — "Carregar mais artigos +". */ .eco-load-more a { display: inline-flex; align-items: center; gap: 14px; background: var(--wp--preset--color--inverse); border-color: var(--wp--preset--color--inverse); color: var(--wp--preset--color--base); } .eco-load-more a::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--inverse); font-size: 1.15em; font-weight: 700; line-height: 1; } .eco-load-more a:hover { background: var(--eco-accent); border-color: var(--eco-accent); color: var(--wp--preset--color--inverse); } .eco-load-more a:hover::after { background: var(--wp--preset--color--inverse); color: var(--eco-accent); } /* Sem caixa — acções secundárias dentro de um cartão ou painel. */ :is(.eco-btn--ghost, .is-style-eco-btn--ghost):not(.wp-block-button), :is(.eco-btn--ghost, .is-style-eco-btn--ghost) .wp-block-button__link { background: none; border-color: transparent; padding-left: 0; padding-right: 0; color: var(--eco-accent-text); } :is(.eco-btn--ghost, .is-style-eco-btn--ghost):not(.wp-block-button):hover, :is(.eco-btn--ghost, .is-style-eco-btn--ghost) .wp-block-button__link:hover { background: none; text-decoration: underline; } /* Nuvem de etiquetas ligáveis (arquivo, artigo). */ /* Medido na coluna da direita de docs/reference-snapshots/pages-desktop/ECO ultimas.png: pastilhas de 30px de altura, contorno #002410 (`inverse`) e não o cinzento da moldura, e 24px entre elas nos dois sentidos — o cinzento a 12px dava uma nuvem apertada e quase sem contraste com o fundo branco. O `core/categories` sai numa `