/** * D LUNAFAM — Homepage * ------------------------------------------------------------------ * front-page.php only. Built on the design tokens in design-tokens.css * and the shared page components in shared.css (section rhythm, buttons, * text links, image slots, hero, story split, final CTA — see that file); * only genuinely homepage-only rules live here. Product grids reuse * product-card.css (.woocommerce ul.products), not reimplemented here. * * Breakpoints (matches design-tokens.css documentation): * mobile: up to 479px · mobile-large: 480–767px · tablet: 768–1023px * laptop: 1024–1279px · desktop: 1280px+ */ .mmsc-home { overflow-x: hidden; } /* #site-header is `position: fixed` (a pre-existing, documented legacy Additional-CSS rule — see header.css) and whatever reserves space for it elsewhere doesn't quite match its real rendered height at mobile widths: confirmed via live measurement (elementFromPoint at the announcement strip's first line hit #site-header-inner, not the strip's own text) that the fixed header's box actually extends ~23px below where the homepage content starts, silently covering the top of whatever's first in it. Scoped to this wrapper (not header.css) so the frozen header itself stays untouched — this only adds clearance on the homepage. Matches the header's own mobile breakpoint. */ /* (A 30px "fixed header clearance" used to sit here. header.css now offsets the body by the header's exact height at every width — 65px mobile top bar, 80px desktop — so the extra padding only opened a blank band under the header. Removed 2026-09-29.) */ /* Headings scale down below tablet so a two-word heading never has to fight a "View All"-style link for room on the same line (found via Chrome inspection: "New Arrivals" was wrapping and clipping against the viewport edge at 375–430px at the old flat 39px size). */ .mmsc-home h2 { font-size: var(--mmsc-text-2xl); } @media (min-width: 768px) { .mmsc-home h2 { font-size: var(--mmsc-text-3xl); } } /* 1. Announcement strip --------------------------------------------------- Light/neutral utility bar, not a promotional ticker. `!important` on color matches the same escalation typography.css already uses elsewhere in this project (found via inspection: a legacy sitewide Additional-CSS rule forces plain `p` text black, which was fully overriding this strip's intended text color). */ .mmsc-announce { background-color: var(--mmsc-color-border); border-bottom: 1px solid rgba(45, 38, 33, 0.08); text-align: center; padding: 10px var(--mmsc-space-4); } .mmsc-announce p { margin: 0; color: var(--mmsc-color-text) !important; /* System font stack, not the site's Inter webfont: this is the very first text painted below the header, and reported (both from a real phone screenshot and reproduced here) with its first line rendering faint/partial — consistent with the browser repainting this text mid-swap once the async Google Fonts request resolves. A system font never triggers that swap, so this line is never at risk of it, regardless of network timing. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; } @media (min-width: 768px) { .mmsc-announce p { font-size: 13px; } } /* 2. Campaign Hero ---------------------------------------------------------- Homepage-only layer over shared.css's .mmsc-hero (the About hero keeps the shared version). Blueprint §11: < 768 4:5 photo capped at 58svh, copy below, primary CTA full width 768+ photo fills a 16:9 frame, copy over its calm left side 1024+ 16:7 with a 520px floor The media box reserves its size before the image loads (no CLS). Each slide fills that box; a