/* clients/forma/css/post-article.css — gerado a partir de post-design-system.json. Escopo exclusivo: .mfc-article.mfc-article--forma e body.mfc-managed-article.mfc-client-forma. Nunca editar valores de cor/fonte aqui — editar o JSON e regerar via buildArticleStylesheet(). */ /* Variáveis compartilhadas no (ancestral comum do H1 do tema E do .mfc-article) — assim o H1 real, que fica FORA de post_content, consegue usar a mesma largura de coluna e cor sem duplicar o valor. */ body.mfc-managed-article.mfc-client-forma { --mfc-column-width: 760px; /* dentro da faixa aprovada 760-840px */ --mfc-primary: #041E42; --mfc-cta: #BD9B60; --mfc-text: #4E4E4E; --mfc-bg-light: #F9F9F9; --mfc-link: #041E42; } /* H1 real do tema (ex.:

) — nunca duplicado/movido para post_content; só estilizado aqui, restrito à classe que o plugin adiciona ao body. / body.mfc-managed-article.mfc-client-forma .entry-title { max-width: var(--mfc-column-width); margin: 0.7em auto 0.3em; padding: 0 20px; font-family: Titillium Web, sans-serif; color: var(--mfc-text); line-height: 1.25; text-wrap: balance; } @media (max-width: 767px) { body.mfc-managed-article.mfc-client-forma .entry-title { padding: 0 20px; } } @media (max-width: 480px) { body.mfc-managed-article.mfc-client-forma .entry-title { padding: 0 18px; } } .mfc-article.mfc-article--forma { font-family: Titillium Web, sans-serif; color: var(--mfc-text); max-width: var(--mfc-column-width); margin: 0 auto; padding: 0 20px; line-height: 1.7; font-size: 17.5px; display: block; } / ADIÇÃO MANUAL ESPECÍFICA DA FORMA (não gerada por buildArticleStylesheet — preservar esta seção se o arquivo for regenerado a partir do JSON). CORREÇÃO 2026-08-23: a hipótese anterior (widgets do Elementor Theme Builder, ids 448ee77c/fe87e63/5bce0180) estava ERRADA — confirmado via inspeção real do DOM (DevTools) que isso é markup NATIVO do tema Konstruktion/VamTam, sem nenhuma relação com Elementor. Estrutura real: .single-post-meta-wrapper > .meta-top (autor + data) e, dentro do mesmo wrapper, .post-content-outer (onde nosso the_content renderiza). Por isso o alvo certo é .meta-top — nunca .single-post-meta-wrapper inteiro, que também contém o artigo. / body.mfc-managed-article.mfc-client-forma .meta-top { display: none !important; } / Featured image nativa do tema (confirmado via DOM: dentro de .post-content-outer > .post-media.post-media-image > .media-inner > img, classes puras do tema Konstruktion/WordPress core — "wp-post-image" — sem nenhuma relação com Elementor). Ela seguia a largura total do container do post (mais larga que os 760px do artigo); alinhada aqui à mesma coluna do resto do conteúdo. / body.mfc-managed-article.mfc-client-forma .post-media.post-media-image { max-width: var(--mfc-column-width); margin: 0 auto; } body.mfc-managed-article.mfc-client-forma .post-media.post-media-image .media-inner img { border-radius: 4px; } .mfc-article.mfc-article--forma h2, .mfc-article.mfc-article--forma h3 { font-family: Titillium Web, sans-serif; color: var(--mfc-text); line-height: 1.3; text-wrap: balance; } .mfc-article.mfc-article--forma h2 { margin-top: 2.2em; margin-bottom: 0.6em; font-size: 1.5em; } .mfc-article.mfc-article--forma h3 { margin-top: 1.4em; margin-bottom: 0.5em; font-size: 1.18em; } .mfc-article.mfc-article--forma p { margin: 0 0 1.1em; } .mfc-article.mfc-article--forma ul, .mfc-article.mfc-article--forma ol { margin: 0 0 1.1em; padding-left: 1.4em; } .mfc-article.mfc-article--forma li { margin-bottom: 0.4em; } .mfc-article.mfc-article--forma a { color: var(--mfc-link); text-decoration: underline; text-underline-offset: 0.15em; } .mfc-article.mfc-article--forma a:hover, .mfc-article.mfc-article--forma a:focus-visible { text-decoration-thickness: 2px; } .mfc-article.mfc-article--forma a:focus-visible { outline: 2px solid var(--mfc-primary); outline-offset: 2px; } .mfc-article.mfc-article--forma .mfc-articleexcerpt { font-size: 1.15em; color: var(--mfc-text); opacity: 0.85; max-width: var(--mfc-column-width); margin: 0.4em auto 1.2em; padding: 0 20px; } .mfc-article.mfc-article--forma .mfc-articlefeatured { max-width: var(--mfc-column-width); margin: 0 auto 1.8em; padding: 0 20px; } .mfc-article.mfc-article--forma .mfc-articlefeatured img { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 4px; } .mfc-article.mfc-article--forma .mfc-articleintro { font-size: 1.08em; border-left: 3px solid var(--mfc-primary); padding-left: 1em; } .mfc-article.mfc-article--forma .mfc-articleanswer { background: var(--mfc-bg-light); border-radius: 6px; padding: 1em 1.3em; font-weight: 500; margin: 1.4em 0; } .mfc-article.mfc-article--forma .mfc-articletoc { background: var(--mfc-bg-light); border-radius: 6px; padding: 1.1em 1.4em; margin: 1.6em 0; } .mfc-article.mfc-article--forma .mfc-articletoctitle { margin: 0; font-weight: 700; text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.04em; color: var(--mfc-text); } .mfc-article.mfc-article--forma .mfc-articletoc ul { margin: 0.5em 0 0; padding-left: 1.2em; } .mfc-article.mfc-article--forma .mfc-articletoc a { color: var(--mfc-text); text-decoration: none; } .mfc-article.mfc-article--forma .mfc-articletoc a:hover, .mfc-article.mfc-article--forma .mfc-articletoc a:focus-visible { text-decoration: underline; color: var(--mfc-primary); } .mfc-article.mfc-article--forma .mfc-articlecontent { } .mfc-article.mfc-article--forma .mfc-articlesection { margin-bottom: 0.4em; } .mfc-article.mfc-article--forma .mfc-articlemedia { margin: 1.8em auto; max-width: var(--mfc-column-width); } .mfc-article.mfc-article--forma .mfc-articlemedia img { max-width: 100%; width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; } .mfc-article.mfc-article--forma .mfc-articlecaption { font-size: 0.82em; color: var(--mfc-text); opacity: 0.65; margin-top: 0.4em; } .mfc-article.mfc-article--forma .mfc-articlefaq h2 { margin-top: 2.4em; } .mfc-article.mfc-article--forma .mfc-articlefaq h3 { font-size: 1.05em; margin-top: 1.2em; } .mfc-article.mfc-article--forma .mfc-articlecta { background: var(--mfc-primary); color: #ffffff; padding: 1.7em 1.8em; border-radius: 8px; text-align: center; margin: 2.6em 0; } .mfc-article.mfc-article--forma .mfc-articlecta h2 { color: #ffffff; margin-top: 0; } .mfc-article.mfc-article--forma .mfc-articlecta p { color: #ffffff; opacity: 0.92; } / Qualquer link dentro do CTA (inclusive um link simples de texto, não só o botão estruturado) precisa de contraste contra o fundo escuro do CTA — sem esta regra, o link herdava a cor geral de link (às vezes igual à cor de fundo do CTA), ficando ilegível. */ .mfc-article.mfc-article--forma .mfc-articlecta a { color: #ffffff; text-decoration: underline; font-weight: 600; } .mfc-article.mfc-article--forma .mfc-articlecta a:hover, .mfc-article.mfc-article--forma .mfc-articlecta a:focus-visible { text-decoration-thickness: 2px; } .mfc-article.mfc-article--forma .mfc-articlecta a.mfc-articlectabutton { display: inline-block; background: var(--mfc-cta); color: #1a1a1a; font-weight: 600; padding: 0.85em 1.9em; min-height: 44px; border-radius: 0px; text-decoration: none; margin-top: 0.7em; } .mfc-article.mfc-article--forma .mfc-articlecta a.mfc-articlectabutton:hover, .mfc-article.mfc-article--forma .mfc-articlecta a.mfc-articlectabutton:focus-visible { text-decoration: none; outline: 2px solid #ffffff; outline-offset: 2px; } .mfc-article.mfc-article--forma .mfc-articlecredits { font-size: 0.85em; color: var(--mfc-text); opacity: 0.65; margin-top: 2em; } @media (max-width: 767px) { .mfc-article.mfc-article--forma { padding: 0 20px; font-size: 17px; } .mfc-article.mfc-article--forma .mfc-articleexcerpt, .mfc-article.mfc-article--forma .mfc-articlefeatured { padding: 0 20px; } .mfc-article.mfc-article--forma .mfc-articlecta { padding: 1.3em 1.2em; } } @media (max-width: 480px) { .mfc-article.mfc-article--forma { padding: 0 18px; } .mfc-article.mfc-article--forma .mfc-articleexcerpt, .mfc-article.mfc-article--forma .mfc-articlefeatured { padding: 0 18px; } }