` inline. Its sibling paragraphs are 13px and 16px and are fine. The real fix is to clear that inline size in the HubSpot form, which corrects every embed of this shared form at once — that is on the ticket. This rule is a GUARD, not the fix. It is deliberately keyed to the offending inline declaration so it cannot touch the 13px and 16px paragraphs, and so it stops applying by itself once HubSpot is corrected. `!important` is required only because the size is inline. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ PEPTIDES HERO — launch-notice type hierarchy [2026-08-26 · Claude · ticket-868kwqd61] Client feedback, staging review week of 17 Aug: "the message is getting lost with the very large font size. Have 'We're Ready' remain very large and slightly reduce the size of the following two sentences." WHY THIS EXISTS: they reviewed the 13 AUG build (revision 2746), where the WHOLE launch notice WAS the H1 — "We're Ready. MediVera … has completed … Launch is set to follow final approval." — at --mv-text-h1, 79.5px at 1440. The 20 Aug edit answered only half of it: the H1 became "Peptides compounding pharmacy" (production's H1 AND the page title — do NOT change that back), and the entire launch notice was pushed into the hero sub-copy at --mv-text-body. So "We're Ready" ended up SMALLER than everything else, buried mid-paragraph in nine lines of 16px: the opposite of the request. This restores the three tiers the client described, inside the sub-copy and UNDER the H1 rather than replacing it: "We're Ready." --mv-text-h3 32px → 24px the two sentences --mv-text-lead 20px → 18px background paragraph --mv-text-body 16px, untouched SCOPED TO PAGE 2487 because the hero is shared native component 1880 (~9 live pages): its paragraph element cannot be restyled directly, and the runs cannot carry a class — html-v3 STRIPS class from inline tags on any Elementor-side save. The runs are marked by TAG + POSITION instead, which survives; the size lives here. 🔴 `body` prefix is LOAD-BEARING — see the .page-id-1029 note above. ⚠ The runs are separated by a real SPACE in the stored html-v3, not only by these display:block rules, so textContent still extracts as "We're Ready. MediVera …" and not "Ready.MediVera". ══════════════════════════════════════════════════════════════ */ body.page-id-2487 .mv-page-hero-sub > strong:first-child { display: block; margin-bottom: var(--mv-space-2xs); color: var(--mv-navy); font-size: var(--mv-text-h3); line-height: 1.15; } body.page-id-2487 .mv-page-hero-sub > strong:first-child + span { display: block; margin-bottom: var(--mv-space-sm); font-size: var(--mv-text-lead); line-height: 1.4; } /* [2026-08-31 · Claude · ticket-868kxrdfd] Blog post furniture imported from production. WHY: production's SEO team rewrote four posts on 12 Aug and the new bodies carry 40-87 INLINE STYLES each - an #ED1E79 pink button, #003D55 navy where the brand navy is #054059, and 'Open Sans' + warnock-pro where the brand font is Ubuntu. Importing verbatim would have put production's palette inside four blog posts. Every inline style is stripped by tools/post-import/import-prod-posts.mjs and the surviving panels land on these classes. WHY KIT CSS: post_content renders in a theme-post-content widget with no Elementor tree, so every v4 global class is inert there - the kit is the only sheet that reaches it. Same reason as mv-prose / mv-relmed-* / mv-fineprint above. ⭐ Only TWO panels are new. Production's pink button re-marks to the house pill (.mv-medcard__cta .explore-btn) and its sources block to .mv-fineprint + .mv-references, both already here from the medication-template pass. Tables: see the table block above. The kit's own rules are on-brand, but until 2026-09-10 they left three sides of every cell and the row stripe to the block library and the theme reset, which drew an ink grid and grey stripes. Every contrast figure below is COMPUTED against the composited ground, not eyeballed. */ /* a pull-aside note: tinted panel, accent rule on the leading edge. Production shipped this with a pink, a navy AND a green border across the four posts; one accent here, deliberately. The 4px --mv-green stripe is 2.56:1 on this ground, which is fine because it is DECORATIVE - the tint and the radius already say "aside", so the stripe carries no information of its own. 🔴 Do not promote it to the only cue without changing the colour. */ .elementor .mv-prose .mv-post-note { background-color: var(--mv-wash-blue); border-inline-start: 4px solid var(--mv-green); border-radius: var(--mv-radius-md); padding: var(--mv-space-md) var(--mv-space-lg); margin: var(--mv-space-xl) 0; } .elementor .mv-prose .mv-post-note > *:last-child { margin-bottom: 0; } /* Body copy inside a panel steps DOWN from the 20px article lead: at --mv-text-lead the note competes with the article it is meant to sit beside. Spelled out per element because .mv-prose ul li is (0,2,2) and a bare .mv-post-note li would be (0,3,1) but lose on the ul-vs-li tie the same way .mv-prose-page did. */ .elementor .mv-prose .mv-post-note p, .elementor .mv-prose .mv-post-note ul li, .elementor .mv-prose .mv-post-note ol li { font-size: var(--mv-text-body); line-height: 1.65em; } /* 10.36:1 on the wash */ .elementor .mv-prose .mv-post-note-t { font-size: var(--mv-prose-h3); font-weight: 700; line-height: 1.3em; color: var(--mv-teal-heading); margin: 0 0 var(--mv-space-xs); } /* eyebrow: production set this in pink or green at 13px. 🔴 --mv-teal is the obvious token here and it FAILS: #1A7D9B on --mv-wash-blue is 4.38:1, and 14px bold is NOT WCAG large text (that starts at 18.66px bold), so it needs 4.5. Missing by 0.12 is still missing. --mv-teal-deep is 6.18:1. --mv-green would be 2.56:1. (mv-eyebrow itself is an Elementor global class and inert in post_content.) */ .elementor .mv-prose .mv-post-eyebrow { font-size: var(--mv-text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mv-teal-deep); margin: 0 0 var(--mv-space-xs); } /* the dark CTA panel that closes a post. White on --mv-teal-heading is 11.15:1. */ .elementor .mv-prose .mv-post-cta { background-color: var(--mv-teal-heading); border-radius: var(--mv-radius-xl); padding: var(--mv-space-xl) var(--mv-space-lg); margin: var(--mv-space-2xl) 0; } .elementor .mv-prose .mv-post-cta > *:last-child { margin-bottom: 0; } .elementor .mv-prose .mv-post-cta p, .elementor .mv-prose .mv-post-cta ul li, .elementor .mv-prose .mv-post-cta ol li { font-size: var(--mv-text-body); line-height: 1.65em; color: var(--mv-white); } .elementor .mv-prose .mv-post-cta-t { font-size: var(--mv-prose-h3); font-weight: 700; line-height: 1.3em; color: var(--mv-white); margin: 0 0 var(--mv-space-xs); /* house rule: white text always ships with a soft shadow. Blur is 2x the offset and in em, so it scales with the type - 8x blur reads as grime, which is how the first version was rejected. */ text-shadow: 0 0.02em 0.04em rgba(2, 28, 38, 0.32); } /* an inline link on the navy ground. .mv-prose a is --mv-link-navy = #023A5F on #054059, which computes to 1.06:1 - invisible, not merely dim. The house pill is excluded: it keeps its own ink-on-pearlescent label at 17.55:1. */ .elementor .mv-prose .mv-post-cta a:not(.explore-btn) { color: var(--mv-white); } .elementor .mv-prose .mv-post-cta a:not(.explore-btn):hover, .elementor .mv-prose .mv-post-cta a:not(.explore-btn):focus-visible { color: var(--mv-green-soft); } /* the one place mv-fineprint could NOT be reused: it sets --mv-ink-80, which on navy is 1.1:1. --mv-white-80 composites to #CDD9DE = 7.74:1, well clear of the 4.5 that 14px needs. */ .elementor .mv-prose .mv-post-cta-fine { font-size: var(--mv-text-sm); line-height: 1.55em; color: var(--mv-white-80); margin: var(--mv-space-sm) 0 0; } .elementor .hs-richtext p[style*="font-size: 10px"], .elementor .hs-richtext p[style*="font-size:10px"] { font-size: var(--mv-text-xs) !important; line-height: 1.5 !important; }/* End custom CSS */