/* ==========================================================================
Male Infertility 2.0 — Hero Banner
Mobile-first. Desktop layout kicks in at 992px.
========================================================================== */
/* --------------------------------------------------------------------------
0. Demo page only — delete this block when dropping the banner into a site
-------------------------------------------------------------------------- */
body { margin: 0; background: #fff; }
/* --------------------------------------------------------------------------
1. Tokens + scoped reset
--------------------------------------------------------------------------
Every class is namespaced `mhp-`, every custom property `--mhp-`, and the
tokens live on `.mhp-hero` rather than `:root`. Nothing below section 0
selects a bare element, `:root` or `body`, so the banner can drop into a
live page without colliding with — or leaking into — the host's styles.
The host page must load Montserrat 400–800. */
.mhp-hero {
--mhp-red: #ee343b;
--mhp-red-dark: #d2262d;
--mhp-ink: #111417;
--mhp-white: #ffffff;
/* Sampled from the left edge of the hero photograph so the CSS fallback
and the image blend seamlessly while the photo is still loading. */
--mhp-sky-top: #c3def6;
--mhp-sky-mid: #e4f0fc;
--mhp-sky-bot: #f4f9fe;
--mhp-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--mhp-radius-card: 10px;
--mhp-radius-pill: 7px;
--mhp-shadow-icon: 0 3px 12px rgba(21, 74, 122, 0.14);
--mhp-shadow-card: 0 12px 30px rgba(17, 46, 74, 0.18);
/* Offsets for the small-screen photo backdrop, from the top-left of its
grid area (the offer row). Desktop ignores both. */
--mhp-photo-shift: 28px;
--mhp-photo-nudge-x: 25px;
/* Stops are tuned against the anchored position: opaque by the time the
photo clears the bottom of the offer card, holding through the first row
of icons, then gone before the CTA. */
--mhp-photo-fade: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.3) 12%,
#000 32%,
#000 52%,
rgba(0, 0, 0, 0.35) 72%,
transparent 88%
);
position: relative;
overflow: hidden;
font-family: var(--mhp-font);
color: var(--mhp-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(
180deg,
var(--mhp-sky-top) 0%,
var(--mhp-sky-mid) 42%,
var(--mhp-sky-bot) 100%
);
}
/* Scoped reset.
`.mhp-hero` outranks a host stylesheet's bare `p {}` / `ul {}` rules, and
:where() keeps the element part at zero specificity so these stay at
(0,1,0) — the same weight as the component's own single-class rules below,
which therefore win on source order. Writing `.mhp-hero p` instead would
score (0,1,1) and silently flatten every margin in the banner. */
.mhp-hero,
.mhp-hero *,
.mhp-hero *::before,
.mhp-hero *::after { box-sizing: border-box; }
.mhp-hero :where(h1, p, ul) { margin: 0; }
.mhp-hero :where(ul) { padding: 0; list-style: none; }
.mhp-hero :where(img) {
max-width: 100%;
display: block;
border: 0;
}
/* --------------------------------------------------------------------------
2. Hero shell
-------------------------------------------------------------------------- */
/* Grid (not flex) so the photo can be given a grid area to sit behind —
see section 5. Auto-placement puts copy/offer/features/cta in rows 1–4;
the photo is out of flow and takes no row of its own. */
.mhp-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
padding: 26px 18px 30px;
}
/* --------------------------------------------------------------------------
3. Copy
-------------------------------------------------------------------------- */
.mhp-hero__eyebrow {
color: var(--mhp-red);
font-size: clamp(17px, 4.9vw, 19px);
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}
.mhp-hero__title {
font-size: clamp(24px, 7.2vw, 29px);
font-weight: 800;
line-height: 1.16;
letter-spacing: -0.01em;
text-transform: uppercase;
margin-bottom: 12px;
}
.mhp-hero__title-line { display: block; }
.mhp-hero__title em { color: var(--mhp-red); font-style: normal; }
.mhp-hero__subtitle {
font-size: clamp(15px, 4.8vw, 19px);
font-weight: 700;
line-height: 1.42;
max-width: 30ch;
margin-inline: auto;
}
.mhp-hero__subtitle em { color: var(--mhp-red); font-style: normal; }
/* Desktop-only line. */
.mhp-hero__tagline { display: none; }
/* --------------------------------------------------------------------------
4. Offer card
-------------------------------------------------------------------------- */
.mhp-hero__offer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 20px;
}
.mhp-offer__flag {
position: relative;
z-index: 2;
margin-bottom: -9px;
padding: 7px 24px;
border-radius: 8px;
background: var(--mhp-ink);
color: var(--mhp-white);
font-size: clamp(14px, 4vw, 16px);
font-weight: 600;
line-height: 1.25;
}
.mhp-offer__body {
width: 100%;
padding: 16px 12px 12px;
border-radius: var(--mhp-radius-card);
background: var(--mhp-red);
box-shadow: var(--mhp-shadow-card);
}
.mhp-offer__headline {
color: var(--mhp-white);
font-size: clamp(21px, 6.2vw, 25px);
font-weight: 600;
line-height: 1.15;
margin-bottom: 12px;
}
.mhp-offer__headline strong { font-size: 1.3em; font-weight: 800; }
.mhp-offer__headline b { font-size: 1.16em; font-weight: 800; }
.mhp-offer__code {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 6px 6px 14px;
border-radius: var(--mhp-radius-pill);
background: var(--mhp-white);
}
.mhp-offer__code-label {
font-size: clamp(13px, 3.7vw, 15px);
font-weight: 700;
color: var(--mhp-ink);
white-space: nowrap;
}
.mhp-offer__code-pill {
flex: none;
padding: 7px 18px;
border: 0;
border-radius: 6px;
background: var(--mhp-red);
color: var(--mhp-white);
font-family: inherit;
font-size: clamp(13px, 3.7vw, 15px);
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.mhp-offer__code-pill:hover { background: var(--mhp-red-dark); }
.mhp-offer__code-pill:active { transform: scale(0.96); }
.mhp-offer__code-pill:focus-visible {
outline: 3px solid var(--mhp-ink);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
5. Photo
-------------------------------------------------------------------------- */
/* A backdrop, not a band: the photo is lifted out of flow and pinned across
the offer row and the features row, so it rises behind the lower half of
the offer card and runs on past the first row of icons. z-index:-1 keeps
it under the copy while staying above the hero's gradient. */
.mhp-hero__photo {
grid-column: 1;
grid-row: 2 / 4;
position: absolute;
z-index: -1;
display: block;
/* Zoomed past the column so the photo bleeds off both sides of the
viewport. Nothing to melt horizontally when there is no visible left or
right edge — the overlay is purely top and bottom. */
width: 140%;
max-width: none;
/* align-self:start pins the photo's layout position to the top of the grid
area, and the two offsets below nudge it from there. Both are fixed
values — change them here, nothing measures or overrides them. */
align-self: start;
translate: var(--mhp-photo-nudge-x) var(--mhp-photo-shift);
}
/* No object-fit crop — the right-half source is shown at its full height.
The image itself is never dimmed; the only overlay is the mask that
dissolves its top and bottom edges into the page background. */
.mhp-hero__photo img {
width: 100%;
height: auto;
-webkit-mask-image: var(--mhp-photo-fade);
mask-image: var(--mhp-photo-fade);
}
/* --------------------------------------------------------------------------
6. Feature strip
-------------------------------------------------------------------------- */
.mhp-hero__features {
display: grid;
/* minmax(0,…) so a nowrap caption can bleed into the gutter instead of
stretching the track and forcing a horizontal scrollbar. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px 6px;
width: 100%;
margin-top: 22px;
/* Opens up the band the photo backdrop shows through, below the offer
card and above the icons. Reset on desktop. */
padding-top: 250px;
}
.mhp-feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
min-width: 0;
}
.mhp-feature__icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--mhp-white);
box-shadow: var(--mhp-shadow-icon);
}
.mhp-feature__icon img {
width: auto;
height: 28px;
}
/* The CPD roundel is a logo, not a line icon — it fills more of the disc. */
.mhp-feature__icon--bare img { height: 40px; }
.mhp-feature__label {
font-size: clamp(7.5px, 2.35vw, 10px);
font-weight: 700;
line-height: 1.35;
color: var(--mhp-ink);
white-space: nowrap;
/* Lifts the caption off the photo backdrop it overlaps below 992px. */
text-shadow: 0 0 7px rgba(255, 255, 255, 0.95),
0 0 3px rgba(255, 255, 255, 0.9);
}
/* --------------------------------------------------------------------------
7. CTA
-------------------------------------------------------------------------- */
.mhp-hero__cta-wrap { margin-top: 24px; }
.mhp-btn {
display: inline-block;
text-decoration: none;
font-family: inherit;
font-weight: 600;
line-height: 1;
border-radius: 5px;
transition: background-color 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;
}
.mhp-btn--primary {
padding: 14px 46px;
background: var(--mhp-red);
color: var(--mhp-white);
font-size: clamp(16px, 4.6vw, 18px);
box-shadow: 0 6px 18px rgba(238, 52, 59, 0.32);
}
.mhp-btn--primary:hover {
background: var(--mhp-red-dark);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(238, 52, 59, 0.4);
}
.mhp-btn--primary:active { transform: translateY(0); }
.mhp-btn--primary:focus-visible {
outline: 3px solid var(--mhp-ink);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
8. Copy-to-clipboard toast
-------------------------------------------------------------------------- */
.mhp-hero__toast {
position: fixed;
z-index: 50;
left: 50%;
bottom: 26px;
transform: translate(-50%, 16px);
padding: 10px 22px;
border-radius: 999px;
background: var(--mhp-ink);
color: var(--mhp-white);
font-size: 14px;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.mhp-hero__toast.mhp-is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* --------------------------------------------------------------------------
9. Reveal animation
-------------------------------------------------------------------------- */
/* Default is *visible*: the starting state is only applied once the inline
head script has confirmed JS is running, so a missing or broken main.js
can never leave the banner blank. */
.mhp-js-ready [data-mhp-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--mhp-reveal-delay, 0ms);
}
.mhp-js-ready [data-mhp-reveal].mhp-is-revealed {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
10. Large phone / tablet — 480px and up: cap the backdrop
--------------------------------------------------------------------------
The photo is never cropped, so its height rides on its width. Left
unbounded, the 130% zoom would make it tall enough that the bottom of the
fade falls outside the section and gets sliced off by overflow:hidden.
Capping it costs the side bleed, so the left and right edges need melting
here too — the vertical fade stays on the ![]()
. */
@media (min-width: 480px) {
.mhp-hero__photo {
width: 100%;
/* Sized so the bottom of the fade clears the section edge with room to
spare if the offer card ever grows a line taller. */
max-width: 660px;
-webkit-mask-image: linear-gradient(
to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
mask-image: linear-gradient(
to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
}
/* --------------------------------------------------------------------------
11. Tablet — 600px and up (still stacked, just roomier)
-------------------------------------------------------------------------- */
@media (min-width: 600px) {
.mhp-hero__inner { padding: 40px 28px 44px; }
.mhp-hero__copy,
.mhp-hero__offer,
.mhp-hero__features,
.mhp-hero__cta-wrap {
width: 100%;
max-width: 664px;
}
.mhp-hero__title { font-size: 38px; }
.mhp-hero__eyebrow { font-size: 36px; }
.mhp-hero__subtitle { font-size: 20px; max-width: 34ch; }
/* Stays 3-across, as in the mobile comp: a single row of six would leave
the photo backdrop no vertical room to live in. */
.mhp-hero__features { gap: 26px 8px; }
.mhp-feature__label { font-size: 10px; }
.mhp-offer__headline { font-size: 30px; }
.mhp-offer__code-label, .mhp-offer__code-pill { font-size: 16px; }
}
/* --------------------------------------------------------------------------
12. Desktop — 992px and up
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
.mhp-hero {
display: flex;
min-height: clamp(500px, 40.5vw, 640px);
}
/* Photo becomes the full-bleed backdrop; its baked-in sky gradient
continues the CSS gradient behind the copy column. */
/* Desktop drops the mobile backdrop treatment entirely: the photo covers
the whole section, unmasked, with the copy on its empty left half. */
.mhp-hero__photo {
position: absolute;
inset: 0;
z-index: -1;
grid-row: auto;
align-self: stretch;
width: auto;
max-width: none;
margin: 0;
translate: none;
-webkit-mask-image: none;
mask-image: none;
}
.mhp-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
-webkit-mask-image: none;
mask-image: none;
}
/* The inner spans the full hero so the photo can cover it edge to edge;
--mhp-gutter does the centring that a max-width wrapper would normally do,
and the offer card reuses it to sit on the same rail as the copy. */
.mhp-hero__inner {
--mhp-gutter: max(clamp(28px, 6vw, 90px), (100% - 1440px) / 2);
flex: 1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
max-width: none;
margin-inline: 0;
padding: 46px var(--mhp-gutter);
}
.mhp-hero__copy,
.mhp-hero__cta-wrap { max-width: 640px; }
/* Wider than the copy rail: Montserrat sets the six nowrap captions a
little broader than 640px, and there is ~220px of clear space before
the offer card. */
.mhp-hero__features { max-width: 700px; }
.mhp-hero__eyebrow {
font-size: clamp(18px, 1.6vw, 36px);
margin-bottom: 14px;
}
.mhp-hero__title {
font-size: clamp(34px, 3.3vw, 50px);
line-height: 1.12;
margin-bottom: 16px;
}
.mhp-hero__subtitle {
font-size: clamp(17px, 1.55vw, 25px);
line-height: 1.38;
max-width: none;
margin-inline: 0;
}
/* Forces the comp's two-line break: black line, then the red line. */
.mhp-hero__subtitle em { display: block; }
.mhp-hero__tagline {
display: block;
margin-top: 24px;
font-size: clamp(13px, 1.2vw, 20px);
font-weight: 700;
line-height: 1.4;
}
.mhp-hero__features {
display: flex;
flex-wrap: nowrap;
gap: clamp(10px, 1.4vw, 22px);
width: auto;
margin-top: 20px;
padding-top: 0; /* the backdrop band is mobile/tablet only */
}
/* Each item sizes to its own caption, so the two
-separated lines
never wrap into a third. */
.mhp-feature {
flex: 0 0 auto;
gap: 8px;
}
.mhp-feature__icon { width: 65px; height: 65px; }
.mhp-feature__icon img { height: 40px; }
.mhp-feature__icon--bare img { height: 38px; }
.mhp-feature__label {
/* font-size: clamp(8px, 0.68vw, 12px); */
white-space: nowrap;
/* .mhp-hero__inner is left-aligned on desktop, so the captions need this
back — the icons above them are centred. */
text-align: center;
text-shadow: none; /* no photo behind the captions on desktop */
}
.mhp-hero__cta-wrap { margin-top: 26px; }
.mhp-btn--primary { padding: 13px 34px; font-size: clamp(15px, 1.25vw, 17px); }
/* Offer card pins to the bottom-right of the content rail. */
.mhp-hero__offer {
position: absolute;
z-index: 2;
right: var(--mhp-gutter);
bottom: 40px;
width: auto;
margin-top: 0;
align-items: center;
}
.mhp-offer__flag {
font-size: clamp(14px, 1.2vw, 17px);
padding: 7px 28px;
margin-bottom: -10px;
}
.mhp-offer__body { padding: 18px 22px 14px; }
.mhp-offer__headline {
font-size: clamp(22px, 2vw, 28px);
margin-bottom: 12px;
}
.mhp-offer__code {
justify-content: center;
gap: 14px;
padding: 6px 6px 6px 16px;
}
.mhp-offer__code-label,
.mhp-offer__code-pill { font-size: clamp(13px, 1.15vw, 16px); }
}
/* --------------------------------------------------------------------------
13. Extra-wide — keep the doctor from drifting too far from the copy
-------------------------------------------------------------------------- */
@media (min-width: 1700px) {
.mhp-hero__photo img { object-position: 82% center; }
}
/* --------------------------------------------------------------------------
14. Motion preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.mhp-js-ready [data-mhp-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.mhp-btn,
.mhp-offer__code-pill { transition: none; }
.mhp-btn--primary:hover { transform: none; }
}