/* ═══════════════════════════════════════════════════════════════ mcg-prose — scoped stylesheet for editorial / UGC prose. Ported from mycamgirl-ds/src/styles/mcg-prose.css. Adapted for WordPress: wraps the_content() output and additionally normalizes block-editor markup (.wp-block-*) that doesn't appear in the Angular app's TinyMCE flow. All tokens resolve from main.css. Dark mode follows through the `.dark` class on via the same custom-property cascade. Scope contract: - Place around the_content() only — NOT around chrome that is already DS-aligned (nav, footers, sidebars, headers). - h1 is owned by the page chrome and excluded here. ═══════════════════════════════════════════════════════════════ */ /* Body — DS Prose helper (review-detail.tsx line 690): text-[16px] leading-[1.75] text-mc-secondary-text. */ .mcg-prose { font-family: var(--mc-font-body); font-size: 16px; line-height: 1.75; color: var(--mc-secondary-text); word-break: break-word; overflow-wrap: break-word; } /* ── Headings — DS ArticleSection/ArticleSubSection (lines 656-687). h2: 24px (md+ 26px) font-bold leading-tight mt-8 mb-2 → ~16px + 8px h3: 20px font-semibold mt-4 → 16px top */ .mcg-prose h2 { font-family: var(--mc-font-heading); font-size: 24px; font-weight: 700; line-height: 1.15; color: var(--mc-primary); margin: 2rem 0 0.5rem; } @media (min-width: 768px) { .mcg-prose h2 { font-size: 26px; } } .mcg-prose h3 { font-family: var(--mc-font-heading); font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--mc-primary); margin: 1rem 0 0.5rem; } .mcg-prose h4 { font-family: var(--mc-font-heading); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--mc-primary); margin: 1.5rem 0 0.5rem; } .mcg-prose h5, .mcg-prose h6 { font-family: var(--mc-font-heading); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--mc-primary); margin: 1.25rem 0 0.375rem; } /* ── Flow spacing — DS uses space-y-4 inside ArticleSection ── */ .mcg-prose > :first-child { margin-top: 0; } .mcg-prose > :last-child { margin-bottom: 0; } .mcg-prose p { font-size: 16px; line-height: 1.75; color: var(--mc-secondary-text); margin: 0 0 1rem; } /* ── Links ────────────────────────────────────────────────── */ .mcg-prose a { color: var(--mc-accent); text-decoration: underline; text-decoration-color: var(--mc-accent-muted); text-underline-offset: 2px; transition: text-decoration-color 0.15s ease, color 0.15s ease; } .mcg-prose a:hover { text-decoration-color: var(--mc-accent); color: var(--mc-accent-hover); } /* ── Emphasis ─────────────────────────────────────────────── */ .mcg-prose strong, .mcg-prose b { font-weight: 600; color: var(--mc-dark); } .mcg-prose em, .mcg-prose i { font-style: italic; } /* ── Lists ────────────────────────────────────────────────── */ .mcg-prose ul, .mcg-prose ol, .mcg-prose .wp-block-list { margin: 0 0 1rem; padding-left: 1.5rem; } .mcg-prose ul, .mcg-prose ul.wp-block-list { list-style-type: disc; } .mcg-prose ol, .mcg-prose ol.wp-block-list { list-style-type: decimal; } .mcg-prose li { margin-bottom: 0.35rem; padding-left: 0.25rem; } .mcg-prose li > ul, .mcg-prose li > ol { margin-top: 0.35rem; margin-bottom: 0; } /* ── Blockquote ───────────────────────────────────────────── */ .mcg-prose blockquote, .mcg-prose .wp-block-quote { margin: 1.25rem 0; padding: 0.875rem 1rem 0.875rem 1.25rem; border-left: 4px solid var(--mc-primary-light); background: var(--mc-primary-surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-style: italic; color: var(--mc-body); } .mcg-prose blockquote p:last-child, .mcg-prose .wp-block-quote p:last-child { margin-bottom: 0; } .mcg-prose .wp-block-quote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.875rem; color: var(--mc-secondary-text); } /* Pullquote — accent-bordered editorial callout */ .mcg-prose .wp-block-pullquote { margin: 1.5rem 0; padding: 1.25rem 1rem; border-top: 3px solid var(--mc-accent); border-bottom: 3px solid var(--mc-accent); background: transparent; text-align: center; font-style: italic; font-size: 1.125rem; color: var(--mc-body); } .mcg-prose .wp-block-pullquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.875rem; color: var(--mc-secondary-text); } /* ── Images ───────────────────────────────────────────────── */ .mcg-prose img, .mcg-prose .wp-block-image img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: var(--radius-lg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } /* Block-editor images with no legacy wrapper — 23 review posts. Same reasoning as .review-inline-media img below: max-width alone leaves an image narrower than its container at intrinsic size, which became visible once .mcg-page-column widened from 1100px to the DS's 1440px. alignright is excluded — those 25 are authored to sit small and right. */ .mcg-prose .wp-block-image:not(.alignright) img { width: 100%; } .mcg-prose p > img { margin: 0.5rem auto; } .mcg-prose p:has(> img:only-child) { text-align: center; margin: 1.5rem 0; } .mcg-prose img + img, .mcg-prose p:has(> img:only-child) + p:has(> img:only-child) { margin-top: -0.5rem; } /* Figures — captioned images and figures */ .mcg-prose figure, .mcg-prose .wp-block-image { margin: 1.5rem 0; } /* ── Legacy inline review media ───────────────────────────── 54 posts carry hand-written
from mycamgirls-theme, with width and margin as inline styles. mcg-theme never ported the rules, so every one rendered as a plain left-aligned block: -center images sat at their intrinsic width instead of filling the column, and consecutive -right pairs (authored at 45% each to share a row) stacked vertically. Legacy behaviour, for reference: .review-inline-media border 1px #eee, 5px padding .review-inline-media-center width: 83%; margin: 10px auto 20px .review-inline-media-right float: right ------------------------------------------------------------ */ .mcg-prose .review-inline-media { box-sizing: border-box; padding: 4px; border: 1px solid var(--mc-border-gray); border-radius: var(--radius-md); } .mcg-prose .review-inline-media img { /* Fill the figure. The base rule only sets max-width, which leaves an image narrower than its container at intrinsic size — the reason -center screenshots stopped filling the column once .mcg-page-column widened from 1100px to the DS's 1440px. */ width: 100%; margin: 0; border-radius: calc(var(--radius-md) - 3px); box-shadow: none; } /* Single full-bleed screenshot. Legacy pinned these to 83%; widened to fill the prose column. */ .mcg-prose .review-inline-media-center { width: 100%; margin: 1.5rem auto; } /* Consecutive pairs, authored at width:45% each via inline style. inline-block rather than the legacy float:right — float reversed their visual order and pulled the following paragraph up alongside them. The inline width/margin stay as authored, so the pair still shares a row and drops to one-per-row when the column gets narrow. */ .mcg-prose .review-inline-media-right { display: inline-block; vertical-align: top; } @media (max-width: 640px) { .mcg-prose .review-inline-media-right { display: block; width: 100% !important; margin-inline: 0 !important; } } .mcg-prose figcaption, .mcg-prose .wp-block-image figcaption { margin-top: 0.5rem; font-size: 0.875rem; font-style: italic; color: var(--mc-secondary-text); text-align: center; } /* ── Tables ───────────────────────────────────────────────── */ .mcg-prose table, .mcg-prose .wp-block-table table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.9em; } .mcg-prose th, .mcg-prose td, .mcg-prose .wp-block-table th, .mcg-prose .wp-block-table td { border: 1px solid var(--mc-border-gray); padding: 0.5rem 0.75rem; text-align: left; } .mcg-prose th, .mcg-prose .wp-block-table th { background: var(--mc-primary-surface); font-family: var(--mc-font-heading); font-weight: 600; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.02em; color: var(--mc-primary); } .mcg-prose tr:nth-child(even) td, .mcg-prose .wp-block-table tr:nth-child(even) td { background: var(--mc-offwhite); } /* ── Code & preformatted ──────────────────────────────────── */ .mcg-prose code { font-family: var(--mc-font-mono); font-size: 0.9em; background: var(--mc-primary-surface); color: var(--mc-primary); padding: 0.125em 0.375em; border-radius: var(--radius-sm); border: 1px solid var(--mc-primary-border-soft); } .mcg-prose pre, .mcg-prose .wp-block-code, .mcg-prose .wp-block-preformatted { font-family: var(--mc-font-mono); font-size: 0.875rem; background: var(--mc-light-gray); color: var(--mc-body); padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; line-height: 1.5; margin: 1.25rem 0; } .mcg-prose pre code, .mcg-prose .wp-block-code code { background: transparent; border: 0; padding: 0; color: inherit; } /* ── Horizontal rule ──────────────────────────────────────── */ .mcg-prose hr, .mcg-prose .wp-block-separator { border: none; border-top: 1px solid var(--mc-border-gray); margin: 2rem 0; max-width: 100%; } /* ── Embeds and iframes (BunnyCDN, YouTube, etc.) ─────────── */ .mcg-prose iframe, .mcg-prose .wp-block-embed iframe, .mcg-prose .wp-block-embed__wrapper iframe { max-width: 100%; border: 0; border-radius: var(--radius-md); } .mcg-prose .wp-block-embed { margin: 1.5rem 0; } /* ── Defensive resets ───────────────────────────────────────── Strip inline-style overrides the editor can inject: users pasting from Word / Google Docs or using the block editor's font / color pickers must not be able to escape the design tokens. */ .mcg-prose [style*="font-size"] { font-size: inherit !important; } .mcg-prose [style*="font-family"] { font-family: inherit !important; } .mcg-prose :not(a)[style*="color"] { color: inherit !important; } .mcg-prose img[style*="width"] { max-width: 100% !important; width: auto !important; height: auto !important; }