/* Men's Optimal Health — the small-screen layer the design export never had. Every other page on this site ships two complete renderings and site.css swaps them at 1023px. This design arrived as a single desktop tree with no @media rules at all, so at 390px it scrolled to 879px wide and the hero, the pricing grids and the bottom bar all overflowed. The export styles everything inline, so these rules have to out-specify a style attribute — hence the attribute selectors and !important, which is the same technique site.css already uses on the generated pages. Scoped to .page--moh so nothing here can reach another page. */ /* Let flex and grid children actually shrink. Without this a long unbroken word or a wide image keeps its min-content width and pushes the row out. */ /* Scoped to the page content only. Applied to the whole wrapper it also let the header nav items shrink below their own text, so the labels overlapped ("Energy & RecoveryMen's Vitality") on the live desktop page. */ .page--moh > :not(.moh-chrome):not(.moh-chrome-desktop):not(.moh-chrome-mobile) *:not(svg):not(path) { min-width: 0; } /* ---- chrome swap -------------------------------------------------------- The export has no mobile rendering, so it carries no mobile header. The desktop header's eight nav items are white-space:nowrap and overlap each other badly at 390px, so the house mobile header takes over below 1024 — the same breakpoint site.css uses to swap renderings elsewhere. */ .page--moh .moh-chrome-mobile { display: none; } @media (max-width: 1023px) { .page--moh .moh-chrome-desktop { display: none; } .page--moh .moh-chrome-mobile { display: block; } } @media (max-width: 1023px) { /* ---- the bottom bar ------------------------------------------------- #sticky-cta is left:0;right:0, so it tracks the viewport — but its two buttons are white-space:nowrap and together demand ~860px, and a flex row cannot go below its min-content width. Let them wrap and shrink. */ .page--moh #sticky-cta { flex-wrap: wrap; padding: 12px 16px !important; gap: 10px !important; } .page--moh #sticky-cta > * { flex: 1 1 100%; } .page--moh #sticky-cta a { white-space: normal !important; justify-content: center !important; text-align: center; padding: 13px 14px !important; font-size: 13px !important; gap: 8px !important; } .page--moh #sticky-cta p, .page--moh #sticky-cta span { font-size: 12.5px !important; } /* ---- multi-column layouts ------------------------------------------ 13 grids stay multi-column at 390px, down to 46px-wide columns in the footer and the 5-up step row. Collapse every one of them. An earlier version of this file kept the 3- and 4-up grids at two columns "because the tiles read better in pairs". That is what put the 15% stat card in a 136px column with a 56px numeral inside it, hanging 60px off the right edge. Anything holding display type needs the full width, so nothing is exempted; auto-fit grids are left alone because they already choose their own column count from minmax(). */ .page--moh [style*="grid-template-columns"]:not([style*="auto-fit"]) { grid-template-columns: 1fr !important; } /* auto-fit grids are deliberately NOT overridden. They already pick their own column count from minmax(): the benefit cards (240px) and the testimonials (300px) fall to one column on a phone by design. An earlier rule here forced every auto-fit grid to minmax(148px), which squeezed both into two columns — testimonial quotes wrapped one word per line. */ /* ---- gutters -------------------------------------------------------- The design's section padding is 48px and 64px a side, which eats a quarter of a 390px screen. */ .page--moh [style*="px 48px"], .page--moh [style*="px 64px"] { padding-left: 16px !important; padding-right: 16px !important; } /* ---- type ----------------------------------------------------------- Display sizes are set for a 1440px canvas; at 390px the headlines break mid-word. Cap them without touching the design's scale on desktop. */ .page--moh h1 { font-size: clamp(34px, 9.5vw, 56px) !important; line-height: 1.05 !important; } .page--moh h2 { font-size: clamp(26px, 7.2vw, 40px) !important; line-height: 1.1 !important; } .page--moh h3 { font-size: clamp(19px, 5vw, 26px) !important; } /* The stat numerals are clamp()ed, but their floor is the desktop size — clamp(56px,5.4vw,82px) resolves to 56px on a phone because 5.4vw is only 21px there. A floor taller than its column is how "15%" escaped its card, so the floor has to come down too. */ .page--moh [style*="font-size:clamp(48px"], .page--moh [style*="font-size:clamp(56px"], .page--moh [style*="font-size:clamp(64px"], .page--moh [style*="font-size:clamp(72px"], .page--moh [style*="font-size:clamp(82px"] { font-size: clamp(30px, 9vw, 46px) !important; } /* Minimum reading size, matching site.css's rule for the generated pages: 10.5-11.5px is fine for uppercase tracking labels, but this is prose a member has to read — prescribing conditions and the EōS disclaimer. */ .page--moh p[style*="font-size:10.5px"], .page--moh p[style*="font-size:11px"], .page--moh p[style*="font-size:11.5px"] { font-size: 12.5px !important; line-height: 1.55 !important; } /* Nowrap is right on a desktop price row and wrong on a 390px one. Not scoped to a tag list. An earlier version named only and
, and the whole page still scrolled to 825px because of one it missed: the "No cookie-cutter plans…" line in the reassurance strip under "Choose how you want to start" is white-space:nowrap and wants 715px inside a 234px box. A single unwrappable line set the document width, and the sticky bar and the chat launcher — both of which look like the culprit when you measure them — were only sizing themselves against it. Match the declaration wherever it appears. */ .page--moh [style*="white-space:nowrap"] { white-space: normal !important; } /* ---- media ---------------------------------------------------------- Several images are object-fit:cover inside boxes sized for desktop; once the grids collapse they need to fill the new single column. The hero's transform:scale() images are left alone — their containers already clip them, so the overflow is visual only and never reaches the scroll width. */ .page--moh img { height: auto; } .page--moh [style*="aspect-ratio"] img { height: 100% !important; } } /* Phones proper: tighten the remaining desktop padding. Grids are already single-column from the rule above — do not re-introduce two here. */ @media (max-width: 560px) { .page--moh [style*="padding:48px"], .page--moh [style*="padding:64px"] { padding: 28px 16px !important; } } /* ---- mobile organisation pass -------------------------------------------- Measured at a true 390px: the page was 37,000px tall, with several sections three or four screens long and text pinched into narrow columns. */ @media (max-width: 1023px) { /* "What you get" under the hero — lab testing, clinician review, plan, ongoing optimisation. Four full-width cards made the hero ~2,250px; a 2x2 grid keeps all four on one screen. */ .page--moh [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:2px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .page--moh [style*="grid-template-columns:repeat(4,1fr)"][style*="gap:2px"] > * { padding: 16px 12px 18px !important; gap: 8px !important; } /* How the program works — the step badge sat beside the copy and left it a ~200px column, so each step ran very tall. Badge above, copy full width. */ .page--moh [style*="flex:1 1 480px"][style*="padding:36px 34px 38px"] { flex-direction: column !important; gap: 14px !important; padding: 26px 20px 28px !important; } /* At-home blood test — designed as copy on the left with the kit box floated over the right half. On a phone the kit covered the copy and the three features were crushed into 48% of the width. Stack them instead. */ .page--moh img[src*="kit-box-front"] { position: static !important; transform: none !important; display: block !important; width: 72% !important; margin: 8px auto 28px !important; } .page--moh section:has(img[src*="kit-box-front"]) [style*="max-width"]:not(img) { max-width: none !important; } .page--moh [style*="max-width:min(600px,48%)"] { flex-direction: column !important; gap: 16px !important; } /* each feature was a narrow column with a divider on its right edge */ .page--moh [style*="max-width:min(600px,48%)"] > * { width: 100% !important; max-width: none !important; border: 0 !important; padding-right: 0 !important; } }