/* ========================================================================== MindMixer Blog Post Template (ported from the approved v5 blog design) — scoped stylesheet Everything lives under .mm-blog so it cannot leak into the rest of the site. 1 tokens · 2 header · 3 body type · 4 headings · 5 layout pieces 6 old-post overrides · 7 after-the-post modules · 8 responsive Layout idea: one centered axis. Title, byline and a 760px text column are centered; pull quotes, columns and wide photos run wider (1080). The page is white. Only the title area carries a soft mint tint that fades out to white. ========================================================================== */ /* 1. TOKENS ---------------------------------------------------------------- */ .mm-blog { --orange: #C34A1D; --amber: #8C3B1A; --flare: #E05300; --seafoam: #EAF2F2; --navy: #16243F; --gold: #D9B86A; --ink: #1A1F24; --white: #FFFFFF; --mist-0: #FAFBFC; --mist-1: #F2F4F6; --mist-2: #E5E7EA; --mist-3: #CDD1D6; --mist-4: #A8AEB5; --mist-5: #6A7079; --mist-6: #44494F; --wash: #EAF2F2; /* Seafoam, used only at the top of the title area */ --font-heading: 'azo-sans-web','Azo Sans','Montserrat',sans-serif; --font-sub: 'Montserrat', sans-serif; --font-body: 'Lato', sans-serif; --measure: 760px; /* reading column */ --wide: 1080px; /* widest element */ --gutter: 32px; font-family: var(--font-body); color: var(--mist-6); background: var(--white); -webkit-font-smoothing: antialiased; } .mm-blog *, .mm-blog *::before, .mm-blog *::after { box-sizing: border-box; } .mm-blog [hidden] { display: none !important; } .mm-blog .mm-wrap { max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } /* 2. POST HEADER (theme template, not post content) ------------------------ */ .mm-blog .mm-post-head { padding: 48px 0 64px; text-align: center; background: linear-gradient(180deg, var(--wash) 0%, var(--white) 100%); /* title area: soft Seafoam at the top, fading to white */ } .mm-blog .mm-crumbs { font: 400 14px/1.4 var(--font-body); margin-bottom: 32px; } .mm-blog .mm-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .mm-blog .mm-crumbs li + li::before { content: "/"; color: var(--mist-5); margin-right: 8px; } .mm-blog .mm-crumbs a { color: var(--orange); text-decoration: underline; text-underline-offset: 0.15em; } .mm-blog .mm-crumbs a:hover { color: var(--amber); } .mm-blog .mm-crumbs [aria-current] { color: var(--mist-6); } .mm-blog .mm-post-head h1 { font: 700 clamp(34px, 4.8vw, 52px)/1.12 var(--font-heading); color: var(--navy); letter-spacing: -0.01em; margin: 0 auto 24px; max-width: 960px; text-wrap: balance; } .mm-blog .mm-byline { font: 400 15px/1.6 var(--font-body); color: var(--mist-6); margin: 0; } .mm-blog .mm-byline a { font-weight: 700; color: var(--ink); text-decoration: none; } .mm-blog .mm-byline a:hover { text-decoration: underline; } .mm-blog .mm-byline .mm-dot::before { content: "·"; margin: 0 10px; color: var(--mist-5); } .mm-blog .mm-byline::after { content: ""; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--gold); margin: 28px auto 0; } /* Featured image: small, lives with the title, always at its own proportions, never cropped. Placement: centered under the byline. */ .mm-blog .mm-head-img { display: none; } .mm-blog .mm-head-img img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--mist-2); } .mm-blog[data-img="under"] .mm-head-img { display: block; width: min(300px, 100%); margin: 36px auto 0; } /* 3. BODY TYPOGRAPHY (the_content) ----------------------------------------- */ .mm-blog .mm-post { max-width: calc(var(--wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) 64px; font: 400 19px/1.7 var(--font-body); color: var(--mist-6); } .mm-blog .mm-post :is(p, ul, ol, h1, h2, h3, h4, h5, h6, table, hr, figcaption, .wp-block-buttons) { max-width: var(--measure); margin-left: auto; margin-right: auto; } .mm-blog .mm-post p { margin-top: 0; margin-bottom: 24px; text-wrap: pretty; } .mm-blog .mm-post > p:first-child:not(.mm-note), .mm-blog .mm-post > p.mm-note:first-child ~ p:not(.mm-note ~ p ~ p), .mm-blog .mm-post > .wp-block-group:first-child p:first-of-type:not(.mm-note), .mm-blog .mm-post > .wp-block-group:first-child p.mm-note:first-of-type ~ p:not(.mm-note ~ p ~ p) { font-size: 22px; line-height: 1.6; color: var(--ink); /* lede: first paragraph of any post */ } /* Drop cap on the lede */ .mm-blog .mm-post > p:first-child:not(.mm-note)::first-letter, .mm-blog .mm-post > p.mm-note:first-child ~ p:not(.mm-note ~ p ~ p)::first-letter, .mm-blog .mm-post > .wp-block-group:first-child p:first-of-type:not(.mm-note)::first-letter, .mm-blog .mm-post > .wp-block-group:first-child p.mm-note:first-of-type ~ p:not(.mm-note ~ p ~ p)::first-letter { float: left; font: 700 3.4em/0.85 var(--font-sub); color: var(--orange); padding: 4px 10px 0 0; } /* Opening note: a short line set entirely in italics before the post starts ("Originally posted on…", "A letter from…"). The heading filter adds .mm-note. Centered, smaller text in a thin grey outline; the lead-in moves to the next paragraph. */ .mm-blog .mm-post p.mm-note { width: fit-content; max-width: var(--measure); margin: 0 auto 40px; padding: 12px 24px; border: 1px solid var(--mist-3); border-radius: 12px; background: none; font-size: 16px; line-height: 1.5; font-style: italic; text-align: center; color: var(--mist-6); text-wrap: balance; } .mm-blog .mm-post p.mm-note :is(em, i, strong, b) { font-weight: inherit; font-style: inherit; color: inherit; } /* Plain Image blocks line up with the text column instead of the wide edge. "Medium" images stay small. */ .mm-blog .mm-post figure.wp-block-image:not(.alignwide):not(.alignfull) { max-width: var(--measure); margin-left: auto; margin-right: auto; } .mm-blog .mm-post figure.wp-block-image.size-medium img { max-width: min(100%, 300px); } /* Sign-off: a small headshot right before the post's last paragraph, when that paragraph starts with a bold name (letters). The photo becomes a small round avatar beside the name and contact line. */ .mm-blog .mm-post figure.wp-block-image:is(.size-thumbnail, .size-medium):has(+ p:last-child > strong:first-child) { float: left; width: 72px; margin: 8px 16px 0 max(0px, calc(50% - var(--measure) / 2)); } .mm-blog .mm-post figure.wp-block-image:is(.size-thumbnail, .size-medium):has(+ p:last-child > strong:first-child) img { display: block; width: 72px; height: 72px; max-width: none; object-fit: cover; border-radius: 50%; } .mm-blog .mm-post figure.wp-block-image:is(.size-thumbnail, .size-medium) + p:last-child:has(> strong:first-child) { padding-top: 12px; } .mm-blog .mm-post figure.wp-block-image:is(.size-thumbnail, .size-medium) + p:last-child:has(> strong:first-child)::after { content: ""; display: block; clear: both; } .mm-blog .mm-post a { color: var(--orange); text-decoration: underline; text-underline-offset: 0.15em; transition: color 0.15s ease; } .mm-blog .mm-post a:hover { color: var(--amber); } .mm-blog .mm-post strong, .mm-blog .mm-post b { font-weight: 700; color: var(--ink); } .mm-blog .mm-post :is(ul, ol) { margin-top: 0; margin-bottom: 24px; padding-left: 24px; } .mm-blog .mm-post li { margin: 0 0 8px; padding-left: 4px; text-wrap: pretty; } .mm-blog .mm-post ul li::marker { color: var(--orange); } .mm-blog .mm-post ol li::marker { color: var(--orange); font: 700 17px var(--font-sub); } .mm-blog .mm-post hr { border: 0; border-top: 1px solid var(--mist-3); margin-top: 48px; margin-bottom: 48px; } .mm-blog .mm-post table { width: 100%; border-collapse: collapse; margin-top: 0; margin-bottom: 24px; font-size: 16px; } .mm-blog .mm-post :is(th, td) { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--mist-2); } .mm-blog .mm-post th { font: 700 14px var(--font-sub); color: var(--navy); background: var(--seafoam); } /* Images: always shown at their own proportions */ .mm-blog .mm-post img { max-width: 100%; height: auto; border-radius: 12px; background: var(--mist-2); } .mm-blog .mm-post img.emoji { border-radius: 0; background: none; } .mm-blog .mm-post figure { margin: 0 0 32px; } .mm-blog .mm-post :is(figcaption, .wp-element-caption) { font: 400 14px/1.5 var(--font-body); color: var(--mist-5); margin-top: 12px; text-wrap: pretty; } /* Social embeds (Facebook / Instagram) */ .mm-blog .mm-post iframe { display: block; max-width: 100%; margin: 32px auto; border: 0; } .mm-blog .mm-post .instagram-media { margin: 32px auto !important; max-width: 540px !important; min-width: 0 !important; width: calc(100% - 2px) !important; } .mm-blog .mm-post :is(.fb-post, .wp-block-embed) { margin: 32px auto; max-width: 540px; } /* Buttons — every button in every post, new or old */ .mm-blog .mm-post .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 0; margin-bottom: 0; } .mm-blog .mm-post .wp-block-button .wp-block-button__link, .mm-blog .mm-post a.wp-block-button__link { display: inline-block; background: var(--orange) !important; color: var(--white) !important; border: 2px solid var(--orange); border-radius: 8px !important; padding: 12px 24px !important; font: 600 15px/1.4 var(--font-sub) !important; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .mm-blog .mm-post .wp-block-button .wp-block-button__link:hover { background: var(--amber) !important; border-color: var(--amber); color: var(--white) !important; } .mm-blog .mm-post .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--orange) !important; } .mm-blog .mm-post .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--seafoam) !important; color: var(--amber) !important; } /* 4. HEADINGS — three personalities ---------------------------------------- */ .mm-blog .mm-post :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-sub); color: var(--navy); text-wrap: balance; margin-top: 56px; margin-bottom: 16px; } .mm-blog .mm-post :is(h1, h2) { font-size: 32px; font-weight: 500; line-height: 1.25; } /* section heading */ .mm-blog .mm-post h3 { font-size: 24px; font-weight: 600; line-height: 1.3; } .mm-blog .mm-post h4 { font-size: 22px; font-weight: 600; line-height: 1.35; } .mm-blog .mm-post :is(h5, h6) { font-size: 18px; font-weight: 700; line-height: 1.4; } .mm-blog .mm-post h2.mm-was-h4 { font-size: 22px; font-weight: 600; line-height: 1.35; } /* old H4s, promoted to H2 for search */ .mm-blog .mm-post h2.mm-was-h3 { font-size: 26px; font-weight: 600; line-height: 1.3; } .mm-blog .mm-post :is(h1,h2,h3,h4,h5,h6):first-child { margin-top: 0; } /* Numbered tip heading (starts with #1. or 1.): small, bold, orange number */ .mm-blog .mm-post .mm-tip { font-size: 19px; font-weight: 700; line-height: 1.4; margin-top: 40px; margin-bottom: 8px; } .mm-blog .mm-post .mm-tip .mm-num { color: var(--orange); margin-right: 6px; } /* 5. LAYOUT PIECES --------------------------------------------------------- */ /* 5a. Old posts wrap every section in a full-width Group > Column with 3rem padding. Neutralize that wrapper; the space between sections is set here instead. */ .mm-blog .mm-post .wp-block-group { display: flow-root; width: auto; max-width: none; margin: 0; padding: 0 !important; } .mm-blog .mm-post .wp-block-group > .wp-block-column { flex: none; width: 100%; max-width: none; margin: 0; padding: 0; align-self: auto; } .mm-blog .mm-post :is(.wp-block-group:has(> .wp-block-column:empty), .wp-block-group:empty, p:empty) { display: none; } .mm-blog .mm-post > .wp-block-group:has(:is(h2,h3,h4)):not(:first-child) { margin-top: 40px; } .mm-blog .mm-post > .wp-block-group:has(.mm-tip):not(:first-child) { margin-top: 8px; } .mm-blog .mm-post .wp-block-column > :is(h2,h3,h4) ~ :is(h2,h3,h4) { margin-top: 56px !important; } .mm-blog .mm-post .wp-block-column > :is(h2,h3,h4) ~ .mm-tip { margin-top: 40px !important; } .mm-blog .mm-post .wp-block-column > figure[style*="float"] + :is(h2,h3,h4) { margin-top: 0 !important; } /* 5b. Wide pieces — images, columns: full 1080 width, centered */ .mm-blog .mm-post :is(.alignwide, .mm-wide) { max-width: none; width: 100%; } .mm-blog .mm-post :is(.alignwide, .mm-wide) img { width: 100%; } /* 5c. Pull quote — Quote block, Pullquote block, or the old hand-built grey quote box */ .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, .is-style-mm-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)) { max-width: var(--wide); margin: 48px auto; padding: 40px 48px; background: var(--seafoam); border: 0; border-radius: 12px; color: var(--amber); } .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, .is-style-mm-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)) p { max-width: none; font: 500 24px/1.45 var(--font-sub); color: var(--amber); margin: 0; text-wrap: balance; } .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, blockquote) cite { display: block; margin-top: 24px; font: 700 15px/1.4 var(--font-body); font-style: normal; color: var(--amber); } /* 5d. Callout — Group block > Styles > "Callout" */ .mm-blog .mm-post .is-style-mm-callout { max-width: var(--measure); margin: 40px auto; padding: 32px !important; background: var(--white); border: 1px solid var(--mist-3); border-radius: 12px; } .mm-blog .mm-post .is-style-mm-callout > :last-child { margin-bottom: 0; } .mm-blog .mm-post .is-style-mm-callout :is(h2,h3,h4,h5) { margin-top: 0 !important; font-size: 20px; } /* 5e. Summary — Group block > Styles > "Summary" (answer-first box at the top of a post) */ .mm-blog .mm-post .is-style-mm-summary { max-width: var(--measure); margin: 0 auto 40px; padding: 32px !important; background: var(--mist-1); border-radius: 12px; } .mm-blog .mm-post .is-style-mm-summary > :last-child { margin-bottom: 0; } .mm-blog .mm-post .is-style-mm-summary :is(h2,h3,h4,h5) { margin: 0 0 12px !important; font-size: 20px; } .mm-blog .mm-post .is-style-mm-summary :is(p, li) { font-size: 18px; } /* 5f. Side by side — Columns block, any split (stacks on phones) */ .mm-blog .mm-post .wp-block-columns { display: flex; gap: 48px; align-items: center; margin: 48px auto; max-width: none; } .mm-blog .mm-post .wp-block-columns > .wp-block-column { flex: 1 1 0; min-width: 0; margin: 0; } .mm-blog .mm-post .wp-block-columns > .wp-block-column[style*="flex-basis"] { flex-grow: 0; } .mm-blog .mm-post .wp-block-columns figure { margin: 0; } .mm-blog .mm-post .wp-block-columns figure img { width: 100%; } .mm-blog .mm-post .wp-block-columns > .wp-block-column > :last-child { margin-bottom: 0; } .mm-blog .mm-post .wp-block-columns :is(h2,h3,h4) { margin-top: 0 !important; max-width: none; margin-left: 0; } /* 5g. Closing card — when the last section before the button starts with an H2/H3 */ .mm-blog .mm-post > .wp-block-group:has(> .wp-block-column > :is(h2,h3):first-child):has(+ .wp-block-group .wp-block-buttons) { max-width: var(--measure); margin: 64px auto 0; background: var(--mist-1); padding: 40px 40px 0 !important; border-radius: 12px 12px 0 0; } .mm-blog .mm-post > .wp-block-group:has(> .wp-block-column > :is(h2,h3):first-child):has(+ .wp-block-group .wp-block-buttons) + .wp-block-group { max-width: var(--measure); margin: 0 auto; background: var(--mist-1); padding: 0 40px 40px !important; border-radius: 0 0 12px 12px; } /* 6. OLD-POST INLINE-STYLE OVERRIDES --------------------------------------- */ /* Floated photo (inline: float:right; width:38%) → hangs a little into the right margin, never cropped */ .mm-blog .mm-post figure[style*="float"] { float: right; width: 320px !important; margin: 8px 0 24px 40px !important; } .mm-blog .mm-post figure[style*="float"] img { width: 100% !important; aspect-ratio: auto !important; height: auto !important; border-radius: 12px !important; } /* Full-width photo (inline: width:100%) → wide, never cropped */ .mm-blog .mm-post figure[style*="width: 100%"] { margin: 0 auto 40px !important; width: 100% !important; max-width: var(--wide); } .mm-blog .mm-post figure[style*="width: 100%"] img { border-radius: 12px !important; aspect-ratio: auto !important; } .mm-blog .mm-post figcaption[style] { font-family: var(--font-body) !important; font-size: 14px !important; color: var(--mist-5) !important; margin-top: 12px !important; } /* Hand-built quote div (inline: 4px teal left border, grey background) → the pull quote above */ .mm-blog .mm-post div[style*="border-left"] { max-width: var(--wide); margin: 48px auto !important; padding: 40px 48px !important; background: var(--seafoam) !important; border: 0 !important; border-radius: 12px !important; } .mm-blog .mm-post div[style*="border-left"] p:first-child { max-width: none; font: 500 24px/1.45 var(--font-sub) !important; font-style: normal !important; color: var(--amber) !important; margin: 0 !important; text-wrap: balance; } .mm-blog .mm-post div[style*="border-left"] p:last-child:not(:first-child) { max-width: none; font: 700 15px/1.4 var(--font-body) !important; font-style: normal !important; color: var(--amber) !important; margin: 24px 0 0 !important; } /* Heading nudges (inline margin-top:6rem etc.) */ .mm-blog .mm-post :is(h2,h3,h4)[style*="margin-top"] { margin-top: 56px !important; } /* Pull quotes are centered: the Seafoam panel runs wider than the text column, so a centered quote reads as a deliberate break. The quote text keeps the 760 reading width, centered in the panel. */ .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, .is-style-mm-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)), .mm-blog .mm-post div[style*="border-left"] { text-align: center !important; } .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, .is-style-mm-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)) :is(p, cite), .mm-blog .mm-post div[style*="border-left"] p:nth-child(n), .mm-blog .mm-post div[style*="border-left"] p:last-child:not(:first-child):nth-child(n) { max-width: var(--measure) !important; margin-left: auto !important; margin-right: auto !important; } /* 7. AFTER-THE-POST MODULES (theme template) ------------------------------- */ .mm-blog .mm-after { padding-bottom: 96px; } .mm-blog .mm-topics { max-width: var(--measure); margin: 0 auto 40px; padding-top: 24px; border-top: 1px solid var(--mist-3); font: 400 15px/1.8 var(--font-body); } .mm-blog .mm-topics strong { font: 700 13px var(--font-sub); color: var(--navy); margin-right: 12px; } .mm-blog .mm-topics ul { display: inline; list-style: none; margin: 0; padding: 0; } .mm-blog .mm-topics li { display: inline-block; white-space: nowrap; } .mm-blog .mm-topics li + li::before { content: "·"; margin: 0 10px; color: var(--mist-5); } .mm-blog .mm-topics a { color: var(--orange); text-decoration: underline; text-underline-offset: 0.15em; } .mm-blog .mm-topics a:hover { color: var(--amber); } .mm-blog .mm-author { max-width: var(--measure); margin: 0 auto; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 32px 0; border-top: 1px solid var(--mist-3); border-bottom: 1px solid var(--mist-3); } .mm-blog .mm-author .mm-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--amber); color: var(--white); display: grid; place-items: center; font: 700 20px/1 var(--font-sub); overflow: hidden; } .mm-blog .mm-author .mm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-blog .mm-author-label { font: 600 13px/1.3 var(--font-sub); color: var(--mist-5); margin: 0 0 4px; } .mm-blog .mm-author-name { font: 700 20px/1.3 var(--font-sub); color: var(--navy); margin: 0; } .mm-blog .mm-author-role { font: 400 15px/1.5 var(--font-body); color: var(--mist-6); margin: 2px 0 12px; } .mm-blog .mm-author-bio { font: 400 16px/1.65 var(--font-body); color: var(--mist-6); margin: 0 0 16px; text-wrap: pretty; } .mm-blog .link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.4 var(--font-sub); color: var(--orange); text-decoration: none; } .mm-blog .link-arrow:hover { text-decoration: underline; color: var(--amber); } .mm-blog .link-arrow svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.15s ease; } .mm-blog .link-arrow:hover svg.arrow-fwd { transform: translateX(4px); } .mm-blog .link-arrow:hover svg.arrow-back { transform: translateX(-4px); } .mm-blog .mm-more { padding-top: 64px; text-align: center; } .mm-blog .mm-more h2 { font: 500 28px/1.25 var(--font-sub); color: var(--navy); margin: 0 0 32px; } .mm-blog .mm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; text-align: left; } .mm-blog .mm-card { display: flex; flex-direction: column; border: 1px solid var(--mist-2); border-radius: 12px; overflow: hidden; background: var(--white); color: inherit; text-decoration: none; transition: box-shadow 0.15s ease; } .mm-blog .mm-card:hover { box-shadow: 0 8px 24px rgba(22, 36, 63, 0.10); } .mm-blog .mm-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 628; object-fit: cover; background: var(--mist-2); } .mm-blog .mm-card-body { padding: 20px 24px 24px; } .mm-blog .mm-card-title { font: 700 17px/1.35 var(--font-sub); color: var(--orange); margin: 0 0 12px; text-wrap: balance; } .mm-blog .mm-card:hover .mm-card-title { text-decoration: underline; } .mm-blog .mm-card-meta { font: 400 14px/1.4 var(--font-body); color: var(--mist-6); margin: 0; } .mm-blog .mm-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; } .mm-blog .mm-tile { background: var(--mist-1); border-radius: 12px; padding: 32px; } .mm-blog .mm-tile h2 { font: 700 18px/1.35 var(--font-sub); color: var(--navy); margin: 0 0 8px; } .mm-blog .mm-tile p { font: 400 16px/1.6 var(--font-body); color: var(--mist-6); margin: 0 0 16px; } /* 8. RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 1143px) { .mm-blog .mm-post figure[style*="float"] { width: 36% !important; } } @media (max-width: 767px) { .mm-blog { --gutter: 16px; } .mm-blog .mm-post-head { padding: 32px 0 48px; } .mm-blog .mm-post-head h1 { font-size: 29px; } .mm-blog .mm-crumbs { margin-bottom: 24px; } .mm-blog[data-img="under"] .mm-head-img { margin-top: 28px; } .mm-blog .mm-post { font-size: 17px; } .mm-blog .mm-post > p:first-child:not(.mm-note), .mm-blog .mm-post > p.mm-note:first-child ~ p:not(.mm-note ~ p ~ p), .mm-blog .mm-post > .wp-block-group:first-child p:first-of-type:not(.mm-note), .mm-blog .mm-post > .wp-block-group:first-child p.mm-note:first-of-type ~ p:not(.mm-note ~ p ~ p) { font-size: 20px; } .mm-blog .mm-post :is(h1, h2) { font-size: 28px; } .mm-blog .mm-post h3, .mm-blog .mm-post h2.mm-was-h3 { font-size: 22px; } .mm-blog .mm-post h4, .mm-blog .mm-post h2.mm-was-h4 { font-size: 20px; } .mm-blog .mm-post .mm-tip { font-size: 18px; } .mm-blog .mm-post .wp-block-columns { flex-direction: column; gap: 24px; } .mm-blog .mm-post figure[style*="float"] { float: none; width: 100% !important; margin: 0 0 24px !important; } .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, .is-style-mm-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)), .mm-blog .mm-post div[style*="border-left"] { padding: 24px !important; } .mm-blog .mm-post :is(.wp-block-quote, .wp-block-pullquote, blockquote:not(.instagram-media):not(.twitter-tweet)) p, .mm-blog .mm-post div[style*="border-left"] p:first-child { font-size: 20px !important; } .mm-blog .mm-post > .wp-block-group:has(> .wp-block-column > :is(h2,h3):first-child):has(+ .wp-block-group .wp-block-buttons) { padding: 24px 24px 0 !important; } .mm-blog .mm-post > .wp-block-group:has(> .wp-block-column > :is(h2,h3):first-child):has(+ .wp-block-group .wp-block-buttons) + .wp-block-group { padding: 0 24px 24px !important; } .mm-blog .mm-post .wp-block-buttons .wp-block-button, .mm-blog .mm-post .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; } .mm-blog .mm-cards, .mm-blog .mm-explore { grid-template-columns: minmax(0, 1fr); } .mm-blog .mm-author { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; } .mm-blog .mm-author .mm-avatar { width: 48px; height: 48px; font-size: 16px; } .mm-blog .mm-more { padding-top: 48px; } .mm-blog .mm-explore { margin-top: 48px; } } @media (prefers-reduced-motion: reduce) { .mm-blog * { transition: none !important; } .mm-blog .link-arrow:hover svg { transform: none !important; } } /* ════════ MINDMIXER + DESIGN REVIEW UPDATES ════════ */ /* The post area runs full width inside the site's theme (title tint edge to edge) */ .mm-blog { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } html, body { overflow-x: hidden; } .mm-blog .mm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Subheading: long titles split into a headline + a lighter subheading (Brand Guide H3: Montserrat Regular) */ .mm-blog .mm-post-head h1 .mm-subtitle { display: block; margin: 16px auto 0; max-width: 820px; font: 400 clamp(20px, 2.1vw, 24px)/1.4 var(--font-sub); letter-spacing: 0; color: var(--navy); text-wrap: balance; } /* Key Takeaways box at the top of a post (answer-first summary), in the reading column */ .mm-blog .mm-post-summary { max-width: calc(var(--measure) + var(--gutter) * 2); margin: 0 auto 48px; padding: 0 var(--gutter); } .mm-blog .mm-post-summary .mm-takeaways li { font-size: 18px; } /* Letter sign-off: closing line, cursive signature, printed name, email */ .mm-blog .mm-post .mm-signoff { max-width: var(--measure); margin: 8px auto 0; } .mm-blog .mm-post .mm-signoff p { margin: 0; } .mm-blog .mm-post .mm-signoff-closing { margin-bottom: 4px !important; } .mm-blog .mm-post .mm-signoff-signature { font: 400 56px/1.15 'Mrs Saint Delafield', 'Brush Script MT', cursive; color: var(--navy); margin: 4px 0 8px !important; } .mm-blog .mm-post .mm-signoff-name { font: 700 17px/1.4 var(--font-sub); color: var(--ink); } .mm-blog .mm-post .mm-signoff-email { font-size: 16px; } /* Links on Seafoam / Mist backgrounds use Amber (MM Orange is under 4.5:1 there) */ .mm-blog .mm-crumbs a, .mm-blog .mm-tile .link-arrow { color: var(--amber); } .mm-blog .mm-crumbs a:hover, .mm-blog .mm-tile .link-arrow:hover { color: var(--orange); } /* About the Author: headshot or initials */ .mm-blog .mm-author .mm-avatar { background: var(--amber); } .mm-blog .mm-author .mm-avatar img { border-radius: 50%; } .mm-blog .mm-card { position: relative; } .mm-blog .mm-card > .dl-img-empty { position: relative; aspect-ratio: 1200 / 628; } @media (max-width: 767px) { .mm-blog .mm-post .mm-signoff-signature { font-size: 46px; } } /* Key Takeaways box (same component on blog posts and webinars) */ .mm-blog .mm-takeaways { background: var(--white); border: 1px solid var(--mist-2); border-radius: 12px; padding: 28px; box-shadow: 0 4px 16px rgba(140,59,26,0.08); color: var(--ink); } .mm-blog .mm-takeaways-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--navy); margin: 0 0 20px; letter-spacing: normal; } .mm-blog .mm-takeaways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; max-width: none; } .mm-blog .mm-takeaways li { position: relative; margin: 0; padding: 0 0 0 28px; font: 400 17px/1.55 'Lato', sans-serif; color: var(--ink); } .mm-blog .mm-takeaways li::marker { content: none; } .mm-blog .mm-takeaways li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C34A1D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* No featured image: an on-brand placeholder fills the same frame */ .mm-blog .dl-img-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--seafoam); color: var(--orange); } .mm-blog .dl-img-empty svg { width: 32px; height: 32px; } .mm-rl-editor-note { display: block; padding: 16px; border: 1.5px dashed currentColor; border-radius: 8px; font: 400 14px/1.5 'Lato', sans-serif; } /* Pages end flush with the site footer. The theme adds a 4rem gap above .mm-footer, which shows the page background as a band. */ body:has(.mm-dl, .mm-dlp, .mm-bh-full, .mm-blog, .mm-wb, .mm-wbp) .mm-footer { margin-top: 0 !important; } body:has(.mm-dl, .mm-dlp, .mm-bh-full, .mm-blog, .mm-wb, .mm-wbp) :is(#mm-main, .mm-main) { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* ════════ 1.1.4 SHARED: forms ════════ */ /* reCAPTCHA: the badge is hidden (it keeps working) and Google's required notice sits under the privacy line instead */ :is(.mm-dl, .mm-dlp, .mm-bh-full, .mm-blog, .mm-wb, .mm-wbp) .hs-recaptcha { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; clip-path: inset(50%); white-space: nowrap; } body:has(.mm-dl, .mm-dlp, .mm-bh-full, .mm-blog, .mm-wb, .mm-wbp) .grecaptcha-badge { visibility: hidden !important; } .mm-recaptcha-note { display: block; margin-top: 6px; font-size: 12px !important; line-height: 1.5; font-weight: 400; letter-spacing: normal; text-transform: none; } .mm-recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .mm-recaptcha-note a:hover { opacity: 0.85; } /* Form buttons: same case on every form (HubSpot / the theme may set all caps) */ :is(.mm-dl, .mm-dlp, .mm-bh-full, .mm-blog, .mm-wb, .mm-wbp) .hs-form :is(.hs-button, input[type="submit"]) { text-transform: none !important; letter-spacing: normal !important; }