/* clients/topgm/css/post-article.css — gerado a partir de post-design-system.json. Escopo exclusivo: .mfc-article.mfc-article--topgm e body.mfc-managed-article.mfc-client-topgm. 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-topgm { --mfc-column-width: 760px; /* dentro da faixa aprovada 760-840px */ --mfc-primary: #4B637A; --mfc-cta: #EBBA16; --mfc-text: #4A4A4A; --mfc-bg-light: #E9E9E9; --mfc-link: #4B637A; } /* 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-topgm .entry-title { max-width: var(--mfc-column-width); margin: 0.7em auto 0.3em; padding: 0 20px; font-family: Antonio, Sans-serif; color: var(--mfc-text); line-height: 1.25; text-wrap: balance; } @media (max-width: 767px) { body.mfc-managed-article.mfc-client-topgm .entry-title { padding: 0 20px; } } @media (max-width: 480px) { body.mfc-managed-article.mfc-client-topgm .entry-title { padding: 0 18px; } } .mfc-article.mfc-article--topgm { font-family: Open Sans, 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; } .mfc-article.mfc-article--topgm h2, .mfc-article.mfc-article--topgm h3 { font-family: Antonio, Sans-serif; color: var(--mfc-text); line-height: 1.3; text-wrap: balance; } .mfc-article.mfc-article--topgm h2 { margin-top: 2.2em; margin-bottom: 0.6em; font-size: 1.5em; } .mfc-article.mfc-article--topgm h3 { margin-top: 1.4em; margin-bottom: 0.5em; font-size: 1.18em; } .mfc-article.mfc-article--topgm p { margin: 0 0 1.1em; } .mfc-article.mfc-article--topgm ul, .mfc-article.mfc-article--topgm ol { margin: 0 0 1.1em; padding-left: 1.4em; } .mfc-article.mfc-article--topgm li { margin-bottom: 0.4em; } .mfc-article.mfc-article--topgm a { color: var(--mfc-link); text-decoration: underline; text-underline-offset: 0.15em; } .mfc-article.mfc-article--topgm a:hover, .mfc-article.mfc-article--topgm a:focus-visible { text-decoration-thickness: 2px; } .mfc-article.mfc-article--topgm a:focus-visible { outline: 2px solid var(--mfc-primary); outline-offset: 2px; } .mfc-article.mfc-article--topgm .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--topgm .mfc-articlefeatured { max-width: var(--mfc-column-width); margin: 0 auto 1.8em; padding: 0 20px; } .mfc-article.mfc-article--topgm .mfc-articlefeatured img { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 4px; } .mfc-article.mfc-article--topgm .mfc-articleintro { font-size: 1.08em; border-left: 3px solid var(--mfc-primary); padding-left: 1em; } .mfc-article.mfc-article--topgm .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--topgm .mfc-articletoc { background: var(--mfc-bg-light); border-radius: 6px; padding: 1.1em 1.4em; margin: 1.6em 0; } .mfc-article.mfc-article--topgm .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--topgm .mfc-articletoc ul { margin: 0.5em 0 0; padding-left: 1.2em; } .mfc-article.mfc-article--topgm .mfc-articletoc a { color: var(--mfc-text); text-decoration: none; } .mfc-article.mfc-article--topgm .mfc-articletoc a:hover, .mfc-article.mfc-article--topgm .mfc-articletoc a:focus-visible { text-decoration: underline; color: var(--mfc-primary); } .mfc-article.mfc-article--topgm .mfc-articlecontent { } .mfc-article.mfc-article--topgm .mfc-articlesection { margin-bottom: 0.4em; } .mfc-article.mfc-article--topgm .mfc-articlemedia { margin: 1.8em auto; max-width: var(--mfc-column-width); } .mfc-article.mfc-article--topgm .mfc-articlemedia img { max-width: 100%; width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto; } .mfc-article.mfc-article--topgm .mfc-articlecaption { font-size: 0.82em; color: var(--mfc-text); opacity: 0.65; margin-top: 0.4em; } .mfc-article.mfc-article--topgm .mfc-articlefaq h2 { margin-top: 2.4em; } .mfc-article.mfc-article--topgm .mfc-articlefaq h3 { font-size: 1.05em; margin-top: 1.2em; } .mfc-article.mfc-article--topgm .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--topgm .mfc-articlecta h2 { color: #ffffff; margin-top: 0; } .mfc-article.mfc-article--topgm .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--topgm .mfc-articlecta a { color: #ffffff; text-decoration: underline; font-weight: 600; } .mfc-article.mfc-article--topgm .mfc-articlecta a:hover, .mfc-article.mfc-article--topgm .mfc-articlecta a:focus-visible { text-decoration-thickness: 2px; } .mfc-article.mfc-article--topgm .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: 5px; text-decoration: none; margin-top: 0.7em; } .mfc-article.mfc-article--topgm .mfc-articlecta a.mfc-articlectabutton:hover, .mfc-article.mfc-article--topgm .mfc-articlecta a.mfc-articlectabutton:focus-visible { text-decoration: none; outline: 2px solid #ffffff; outline-offset: 2px; } .mfc-article.mfc-article--topgm .mfc-articlecredits { font-size: 0.85em; color: var(--mfc-text); opacity: 0.65; margin-top: 2em; } @media (max-width: 767px) { .mfc-article.mfc-article--topgm { padding: 0 20px; font-size: 17px; } .mfc-article.mfc-article--topgm .mfc-articleexcerpt, .mfc-article.mfc-article--topgm .mfc-articlefeatured { padding: 0 20px; } .mfc-article.mfc-article--topgm .mfc-articlecta { padding: 1.3em 1.2em; } } @media (max-width: 480px) { .mfc-article.mfc-article--topgm { padding: 0 18px; } .mfc-article.mfc-article--topgm .mfc-articleexcerpt, .mfc-article.mfc-article--topgm .mfc-articlefeatured { padding: 0 18px; } }