/* Homepage-scoped overflow cap — the site-wide nav dropdown submenus sit positioned right of the visible viewport while closed, which on some pages would cause a horizontal scrollbar. This file only loads on `/`, so capping html+body here doesn't affect any other route. */ /* `clip` instead of `hidden` — same visual effect but layout-neutral, so position:sticky inside descendants keeps working. */ html,body{overflow-x:clip;max-width:100vw} /* ═══════════════════════════════════════════════════════════════ Footer — 4-column top row + 2-block bottom row (Aphyx pattern). Row 1: Brand | Services | Explore | Resources Row 2: OUR CLINIC (spans 2 cols, contains 2 location cards w/ map+hours each) | LEGAL & TRUST | (empty) ═══════════════════════════════════════════════════════════════ */ /* Footer styling moved to /css/style.css so every page (not just /) gets the same 5-column treatment. Homepage gets it via style.css load order; no need for duplicate rules here. */ /* Homepage-only header merge — the site-header on every other route sits on a white page. On the homepage it should fade into the rose gradient at the top of so there's no hard white-to-pink edge. home.css is route-scoped so other pages keep their white header. */ /* Frosted-glass header — sticky at vp top, auto-hides during the awards section so it doesn't break immersion, then reappears once the user scrolls past the awards into services. Translation is driven by the scroll handler in render_home (--header-y). */ .site-header{ position:sticky !important; top:0; /* SOLID OPAQUE CREAM — matches the global default. Transparent and frosted variants both let the page bleed through and absorbed the cyan brand logo. Solid cream guarantees the cyan logo + dark nav text read on every page. The pill state takes over its own dark chrome via .is-floating below. */ background:#fdfaf8 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:1px solid rgba(120, 80, 90, 0.10) !important; box-shadow:0 4px 20px -10px rgba(120, 80, 90, 0.18) !important; /* margin-top is animated instead of transform — same visual hide- on-scroll-down + show-on-scroll-up effect, but margin-top does NOT create a containing block for fixed-position descendants the way `transform` does. With transform (even `translateY(0)`), the .primary-nav mobile-menu overlay was trapped inside the ~50px header and only the top of the menu showed. Switched to margin- top so the fixed-position .primary-nav can escape to the viewport when the burger opens, and clears the trap on every page (no special-case body class needed). */ transition:margin-top 0.4s cubic-bezier(.2,.7,.2,1); margin-top:var(--header-y, 0); } /* Hush the header while the dark "Trusted since 2009" band is the dominant view on MOBILE. The floating pill sets margin:0 auto inline (to centre itself), which overrides the --header-y hide above — so without this the pill sits on top of the trust stats (reported bug). opacity/visibility win because the pill's inline styles never set them. The render_home scroll handler toggles .bmb-hush-header. Desktop intentionally keeps the header. */ @media (max-width: 768px){ .site-header.bmb-hush-header{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .3s ease, visibility 0s linear .3s !important; } } /* The .is-light nav color rules used to flip nav text to dark ink over the cream services section. Now that the global default header is light cream-frost (style.css 2026-06-10) and the default nav text is already --ink, this override is redundant AND was fighting the .is-floating pill-state white-text rule on home (dark text on dark pill = invisible). Removed. */ /* Submenu styling — was previously overridden here with a rose-cream surface + rose shadow, but that diverged from every other page on the site. Removed 2026-06-05 so the homepage dropdown matches the global style.css treatment (white card, neutral shadow). */ /* Nav typography (Cormorant serif desktop / Inter sans mobile) was moved to style.css 2026-06-05 so all 54 URLs share it. The previous home-only !important overrides lived here. */ .site-header .caret{font-size:.85em;opacity:.6} /* Right-edge submenus — moved to style.css 2026-06-05 so every page gets the same anchoring (last two nav items open their dropdowns leftward to avoid right-edge clipping). Previously homepage-only. */ /* (Old homepage-only padding-right override removed — base style.css now applies a symmetric `max(1.5rem, calc((100vw - 1180px) / 2))` on both sides so the header is balanced and aligns with the page's 1180px content max-width.) */ /* ══════════════════════════════════════════════════════════════════ BMB homepage — visual port of aphyx.live/demos/bmb-preview design. Cormorant Garamond display + Inter body, dusty rose + sky blue. Targets the rebuild's existing .bmb-* class structure (no HTML retyping); a few sections receive small HTML edits (why-BMB photo+pillar, blog image headers). Site-wide HEADER (.site-header) and FOOTER (.site-footer) styled by style.css — this file does NOT override them. ══════════════════════════════════════════════════════════════════ */ :root{ --brand: #ba8f95; --brand-dk: #9a6f76; --brand-50: #fbf4f5; --brand-100: #f4e3e5; --brand-200: #e8c8cc; --brand-700: #6e4b50; --accent: #5bc2e7; --ink: #2a2a2a; --ink-2: #4a4a4a; --muted: #897c80; --bg: #fdfaf8; --bg-2: #f7efec; --surface: #ffffff; --line: #e7dfd8; --line-rose: rgba(186,143,149,.35); /* Updated 2026-06-15 to BMB v1.0 Brand Guidelines fonts. --serif = display font (now Quicksand, was Cormorant Garamond) --sans = body font (now Mulish, was Inter) */ --serif: 'Quicksand', system-ui, -apple-system, "Segoe UI", sans-serif; --sans: 'Mulish', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --max-home: 1180px; --r: 6px; --r-lg: 14px; --shadow-sm: 0 1px 3px rgba(120,80,90,.05), 0 6px 16px rgba(120,80,90,.06); --shadow: 0 6px 18px rgba(120,80,90,.08), 0 28px 60px rgba(120,80,90,.08); } /* Scope EVERYTHING under .home-preview (added to the
wrapper on the homepage only). The rebuild's other pages stay untouched. */ .home-preview{ font-family:var(--sans); color:var(--ink); font-size:16px;line-height:1.65; /* Don't clip horizontal overflow here — the body already has overflow-x:clip globally (line 7) which prevents a horizontal scrollbar. Putting clip on the article ALSO clips the hero's full-bleed (100vw + negative-margin) breakout, constraining the hero photo to main's 1180px max-width. Leaving article overflow as visible lets the hero/trust band extend edge-to-edge. */ max-width:100vw; /* Article itself is transparent — the tonal wash lives on so it spans the full viewport (the rebuild's
is capped at 1180px max-width, so a gradient placed here would only paint within that 1180px and read as a "boxed inset" against the body bg outside). Moving the wash to kills the box. */ background:transparent; } /* Continuous tonal wash — applied to so it spans the full viewport width, NOT just the
column. Each section sits in a different temperature band but there are no hard edges anywhere. The percentages roughly map to where each section sits vertically; all colours stay within ~3% of the base cream so the shifts read as warmth, not as colour blocks. home.css is only loaded on the homepage, so this body rule is homepage-scoped — other routes keep their default body bg. */ body{ background:linear-gradient( 180deg, #fbf4f5 0%, /* hero — soft rose dawn */ #fdfaf8 10%, /* stats — neutral cream pause */ #fdf8f1 22%, /* awards — warm ivory */ #fbf9f4 36%, /* services — cool paper-cream */ #faf5f3 52%, /* trimester — rose mist */ #fbf6f2 65%, /* why-BMB — blush ivory */ #fbf7f2 78%, /* testimonials — peachy warm cream */ #faf8f3 88%, /* blog — cool linen */ #fbf6ed 95%, /* locations — warm oat */ #fbf4f5 100% /* final CTA — back to rose, closes the loop */ ); } .home-preview *, .home-preview *::before, .home-preview *::after{box-sizing:border-box} .home-preview h1, .home-preview h2, .home-preview h3, .home-preview h4{ font-family:var(--serif);font-weight:500;line-height:1.15; letter-spacing:-.01em;color:var(--ink); } .home-preview p{color:var(--ink-2);margin:0} .home-preview img{max-width:100%;height:auto;display:block} .home-preview a{color:inherit;text-decoration:none} /* ─── Overflow safety net ───────────────────────────────────────── */ /* All grids/flex containers cap at 100% of their parent. min-width:0 on flex/grid children prevents long words / wide images from forcing the container wider than its column. Images are capped to their cell. Tables and pre would otherwise overflow without this. */ .home-preview > section, .home-preview > article, .home-preview > div{max-width:100%} .home-preview .bmb-service-grid, .home-preview .bmb-timeline, .home-preview .bmb-blog-grid, .home-preview .bmb-locations, .home-preview .bmb-review-track, .home-preview .bmb-award-grid, .home-preview .bmb-partner-strip, .home-preview .bmb-stats, .home-preview .bmb-hero-ctas, .home-preview .bmb-testimonials-head, .home-preview .bmb-testimonials-shell, .home-preview .bmb-why-grid{max-width:100%;min-width:0} .home-preview .bmb-service-grid > *, .home-preview .bmb-timeline > *, .home-preview .bmb-blog-grid > *, .home-preview .bmb-review-track > *, .home-preview .bmb-locations > *, .home-preview .bmb-stats > *, .home-preview .bmb-award-grid > *, .home-preview .bmb-why-grid > *, .home-preview .bmb-testimonials-shell > *{min-width:0} .home-preview img, .home-preview video, .home-preview iframe, .home-preview svg{max-width:100%;height:auto} .home-preview pre, .home-preview code, .home-preview blockquote{max-width:100%;overflow-wrap:break-word;word-break:break-word} /* ─── Eyebrow ───────────────────────────────────────────────────── */ .home-preview .bmb-eyebrow{ font-family:var(--sans);font-size:.74rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--brand-dk); display:inline-flex;align-items:center;gap:12px;margin:0; } .home-preview .bmb-eyebrow::before{content:"";width:24px;height:1px;background:var(--brand)} /* ─── Section head (reused by services / awards / why / etc.) ───── */ .home-preview .bmb-section-head{ text-align:center;margin-bottom:3rem;max-width:60ch;margin-left:auto;margin-right:auto; } /* Visual hierarchy flipped 2026-05-29 — the eyebrow ("OUR SERVICES", "TESTIMONIALS" etc.) is the section's primary label so users see *what the section is* before the editorial H2. Refined 2026-05-29: the previous treatment (1.15-1.65rem stark ink) felt corporate against the wellness palette. Now: smaller, brand-tinted, with strong tracking — reads like a tasteful editorial label rather than a heading. Inter at .9rem with .3em tracking has the same premium "section opener" feel you'd see in Vogue/Apothke/Maude. */ /* Section title — substantial size so it reads as the dominant section label. Editorial brand-tinted + strong-tracking palette keeps it from feeling corporate even at title scale. */ .home-preview .bmb-section-head .bmb-eyebrow{ justify-content:center; margin-bottom:1.25rem; font-family:var(--sans); font-size:clamp(1.9rem, 3.2vw, 2.7rem); font-weight:700; letter-spacing:.22em; /* Navy instead of rose — gives the section opener premium contrast against the cream page and breaks the all-pink monotony. */ color:var(--navy); gap:32px; } .home-preview .bmb-section-head .bmb-eyebrow::before{width:60px} /* Remove the leading dash from all section-head eyebrows (Pick your trimester, Testimonials, Why BMB, Our locations, From the BMB blog). Kept on the hero eyebrow only — that one's part of the editorial header design. */ .home-preview .bmb-section-head .bmb-eyebrow::before, .home-preview .bmb-testimonials-head-text .bmb-eyebrow::before, .home-preview .bmb-why-text .bmb-eyebrow::before{display:none} .home-preview .bmb-section-head h2{ font-size:clamp(1rem, 1.3vw, 1.22rem); font-weight:400; color:var(--muted); margin-bottom:1.5rem; } .home-preview .bmb-section-head .bmb-section-lead{ font-family:var(--sans);font-size:1rem;color:var(--muted);line-height:1.6;margin:0 auto; } /* ─── CTAs — Cormorant Garamond serif to match the nav typography ─ */ .home-preview .bmb-cta{ display:inline-flex;align-items:center;gap:.5rem; font-family: var(--sans); font-size:1.05rem;font-weight:500; letter-spacing:.005em;padding:.7rem 1.5rem;border-radius:999px; transition:transform .15s ease, box-shadow .15s ease, background .15s, color .15s, border-color .15s; white-space:nowrap; } .home-preview .bmb-cta--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)} .home-preview .bmb-cta--primary:hover{background:var(--brand-dk);transform:translateY(-1px);box-shadow:var(--shadow)} .home-preview .bmb-cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-rose)} .home-preview .bmb-cta--ghost:hover{border-color:var(--brand);color:var(--brand-dk)} /* ─── 1. HERO — minimal botanical scene. Two large brand-pink line-art sprigs flank the centred text via ::before / ::after. Nothing else — no butterflies, no scattered leaves. The body gradient supplies the wash; the hero just hosts the sprigs at z-index:-1 with pointer-events:none. */ .home-preview .bmb-hero{ position:relative;padding:5rem 2rem 3rem; overflow:hidden;text-align:center; isolation:isolate; background:transparent; } /* ── Large flanking sprigs (left + right) ── */ .home-preview .bmb-hero::before, .home-preview .bmb-hero::after{ content:""; position:absolute; top:50%; width:clamp(160px, 16vw, 240px); height:clamp(240px, 26vw, 360px); background-image:url("data:image/svg+xml;utf8,"); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:.16; pointer-events:none; z-index:-1; transform-origin:center bottom; } .home-preview .bmb-hero::before{ left:clamp(.5rem, 4vw, 5rem); transform:translateY(-50%); animation:bmbSwayL 9s ease-in-out infinite; } .home-preview .bmb-hero::after{ right:clamp(.5rem, 4vw, 5rem); transform:translateY(-50%) scaleX(-1); /* mirror so leaves face inward */ animation:bmbSwayR 11s ease-in-out infinite; } /* Gentle two-degree sway — like the plant is breathing in a breeze. Left and right have slightly different periods so they're never perfectly in sync, which feels organic instead of mechanical. */ @keyframes bmbSwayL{ 0%,100%{transform:translateY(-50%) rotate(-1.5deg)} 50% {transform:translateY(-50%) rotate(1.5deg)} } @keyframes bmbSwayR{ 0%,100%{transform:translateY(-50%) scaleX(-1) rotate(-1.5deg)} 50% {transform:translateY(-50%) scaleX(-1) rotate(1.5deg)} } @media (max-width:720px){ /* On narrow screens the sprigs would crowd the text — hide them so the hero reads as pure copy on the gradient wash. The scattered leaves are small enough to keep on mobile. */ .home-preview .bmb-hero::before, .home-preview .bmb-hero::after{display:none} } @media (prefers-reduced-motion:reduce){ /* Static — no sway for users who'd rather not see motion. */ .home-preview .bmb-hero::before, .home-preview .bmb-hero::after{animation:none} } .home-preview .bmb-hero > *{max-width:var(--max-home);margin-left:auto;margin-right:auto} .home-preview .bmb-hero .bmb-eyebrow{display:inline-flex;justify-content:center;margin-bottom:1.2rem} /* ── Display headline — the editorial focal point of the hero. Cormorant Garamond, oversized, italic-accented. This is what the eye lands on. The semantic

sits below it doing the SEO work, styled like a quiet tagline. */ .home-preview .bmb-hero-display{ font-family:var(--font-display); font-size:clamp(2.8rem, 6.8vw, 5.5rem); line-height:1.04; letter-spacing:-.025em; font-weight:400; color:var(--ink); max-width:18ch; margin:0 auto 1rem; } .home-preview .bmb-hero-display em{ font-style:italic; color:var(--brand); font-weight:400; } /* ── Demoted H1 — the locked SEO line. Reads as a refined sub-tagline. Still title-cased so the italic accent on "Postnatal Care" still has somewhere to land. Muted weight + colour so it cedes the stage to the display headline above. */ .home-preview .bmb-hero h1.bmb-hero-h1{ font-family:var(--font-body); font-size:clamp(1.02rem, .25vw + .92rem, 1.18rem); font-weight:400; letter-spacing:.005em; color:var(--muted); max-width:42ch; margin:0 auto 1.8rem; line-height:1.55; } .home-preview .bmb-hero h1.bmb-hero-h1 em{ font-style:italic; color:var(--brand); font-weight:500; } /* ═════════════════════════════════════════════════════════════════ STAGE — Frame-based cross-fade. Hero and trust are stacked layers inside a sticky frame pinned to the viewport. As the user scrolls, hero opacity fades 1→0 while trust fades 0→1 over a half-viewport range (scroll-driven by JS in render_home setting --hero-op and --trust-op). No "rising panel" motion — pure cross-fade like swapping slides in a feed. After cross-fade completes, the frame unsticks and the user scrolls down into services normally. Stage geometry: - .bmb-stage height = 150vh (100vh frame + 50vh transition scroll) - .bmb-stage-frame sticky top:0, height = 100vh, full-bleed - .bmb-hero, .bmb-trust absolute inset:0 inside the frame ═════════════════════════════════════════════════════════════════ */ .home-preview .bmb-stage{ position:relative; /* Tall stage so trust band has DWELL TIME pinned at vp centre after the cross-fade completes. Math: 0-50vh of scroll cross-fade hero → trust 50-150vh trust dwells, fully visible at vp centre 150vh+ services rises up and covers trust */ height:250vh; margin-top:calc(-1 * var(--header-h, 146px)); } .home-preview .bmb-stage-frame{ position:sticky; top:0; height:100svh; /* Full-bleed: break out of main's 1180px max-width. */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; } /* Hero + Trust are stacked layers inside the frame. Both fill 100% of the frame. Cross-fade via opacity, scroll-driven by JS. Padding is set separately (hero needs header_h top-pad for header overlap; trust uses symmetric padding so its content centres at true vp middle). */ .home-preview .bmb-stage-frame > .bmb-hero, .home-preview .bmb-stage-frame > .bmb-trust{ position:absolute; inset:0; width:100%; height:100%; margin:0; display:flex; flex-direction:column; align-items:center; border:none; box-shadow:none; } .home-preview .bmb-stage-frame > .bmb-hero{ padding:calc(var(--header-h, 146px) + 1rem) 2rem 2rem; } /* Centre the hero-core block in the hero, then nudge it down so the DISPLAY headline (top-weighted within hero-core) lands at the visual centre. translateY is viewport-scaled so it tracks across screen sizes. Microcopy is absolute-positioned at the bottom independent of this. */ .home-preview .bmb-stage-frame > .bmb-hero{ justify-content:center; } .home-preview .bmb-stage-frame > .bmb-hero > .bmb-hero-core{ /* Pull hero-core down so the display headline (top-weighted within hero-core) sits closer to viewport mid. Clamped so CTAs stay above the absolute-positioned microcopy at the bottom. !important because the reveal-killer rule below sets transform:none on all hero children — that's meant for entrance animations only. */ transform:translateY(clamp(1rem, 4.5vh, 3.5rem)) !important; } /* Microcopy now lives INSIDE .bmb-hero-core, immediately under the CTAs — it reads as supporting reassurance ("Free 15-min consult · Trusted by 25,000+ mums") rather than an orphaned line floating at the bottom of the hero. Kill the CTA-group's bottom margin so the microcopy snugs up under it as a CTA subtitle. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-core > .bmb-hero-ctas{ margin-bottom:0; } .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-core > .bmb-hero-microcopy{ text-align:center; margin-top:-0.8rem; letter-spacing:0.02em; } @media (max-width:720px){ .home-preview .bmb-stage-frame > .bmb-hero > .bmb-hero-core{ transform:translateY(clamp(1rem, 6vh, 4rem)); } } .home-preview .bmb-stage-frame > .bmb-trust{ /* Symmetric padding so flex-centred content lands at true vp middle. */ padding:3rem 2rem; } .home-preview .bmb-stage-frame > .bmb-hero{ /* Switched to hero-bg-2.webp (therapist with folded towels + pregnant woman). Original hero-bg.webp kept on disk in case we want to swap back. */ background:url('/img/hero-bg-2.webp') center/cover no-repeat; justify-content:center; z-index:1; /* Hero element stays fully opaque — keeps the photo visible through the entire scroll. Only its TEXT children fade (rule below). */ opacity:1; } /* Mobile only: shift the hero crop right so the pregnant woman is centred in the portrait frame (the wide photo only crops horizontally on phones, so this slides the focal point, not the whole layout). */ @media (max-width: 768px){ .home-preview .bmb-stage-frame > .bmb-hero{ background-position:75% center; } } /* Fade hero text/CTAs/microcopy out as user scrolls. --hero-op set by the scroll handler in render_home. Override the reveal-system transition (0.9s opacity/transform from the rule at line ~1196) and translateY — the scroll-driven cross-fade IS the entrance animation for these elements, no separate page-load reveal needed. */ .home-preview .bmb-stage-frame > .bmb-hero > *, .home-preview .bmb-stage-frame > .bmb-hero > *.is-revealed{ opacity:var(--hero-op, 1) !important; transform:none !important; transition:none !important; } .home-preview .bmb-stage-frame > .bmb-trust{ /* DARK warm translucent stage initially — like the velvet backdrop at an awards ceremony. As services rises into view, the bg transitions to CREAM (not transparent) so the photo never bleeds back through. --trust-bg-fade goes from 0% (dark) to 100% (cream) driven by the scroll handler in render_home. */ background:color-mix( in srgb, rgba(38, 28, 18, 0.55), rgba(253, 250, 248, 0.95) var(--trust-bg-fade, 0%) ); backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%); justify-content:center; z-index:2; opacity:var(--trust-op, 0); min-height:0; transition:background 0.05s linear; /* smooth interp between scroll ticks */ /* Trust band has no interactive children; making it pointer-events:none means the hero's CTAs (Book Now, Explore Services) and text below stay clickable / selectable even while the trust panel is layered on top at z-index:2. Without this, an invisible (opacity:0) trust band at the top of page intercepts all clicks over the hero. */ pointer-events:none; } /* ─── Laurel branches flanking the awards ───────────────────────── Champagne-gold curved-stem branches with 6 leaves each, mirrored so they "open inward" toward the awards content — the iconic Grammy/Olympic seal motif. Vertically centred at viewport middle. */ .home-preview .bmb-stage-frame > .bmb-trust::before, .home-preview .bmb-stage-frame > .bmb-trust::after{ content:""; position:absolute; top:50%; width:clamp(56px, 6vw, 84px); height:clamp(220px, 36vh, 320px); background-repeat:no-repeat; background-position:center; background-size:contain; pointer-events:none; z-index:0; opacity:0.85; background-image:url("data:image/svg+xml;utf8,"); } /* Laurels positioned RIGHT UP AGAINST the awards grid. The grid is max-width 1180px, centred. Each laurel hugs the grid's outer edge: position = (50vw − 680px), which places its outer edge ~10px outside the grid edge on viewports wide enough to fit. On narrower viewports (≤1320px) the value goes negative or would overlap the stat cards — hidden there. */ .home-preview .bmb-stage-frame > .bmb-trust::before{ left:calc(50vw - 680px); transform:translateY(-50%); } .home-preview .bmb-stage-frame > .bmb-trust::after{ right:calc(50vw - 680px); transform:translateY(-50%) scaleX(-1); } @media (max-width:1320px){ .home-preview .bmb-stage-frame > .bmb-trust::before, .home-preview .bmb-stage-frame > .bmb-trust::after{display:none} } /* ───── Hero text — LIGHT palette for photo-bg readability ───── The default editorial palette (dark ink + dusty-rose brand) was designed for the cream bg used elsewhere on the page. On the warm clinic photo it's nearly unreadable. These rules switch hero text to light variants (off-white + a lighter, more luminous pink for emphasis) with a soft dark text-shadow for lift. Scoped to the hero only — trust band + every other section keep the dark palette. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-eyebrow{ color:rgba(255,250,247,0.92); } .home-preview .bmb-stage-frame > .bmb-hero .bmb-eyebrow::before{ background:rgba(255,250,247,0.55); } /* Display headline — SHOUT. This is the only thing in the hero that should grab attention. Everything else is supporting whispers. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-display{ font-size:clamp(3.4rem, 8.5vw, 7.2rem); line-height:1; letter-spacing:-.03em; color:#fbf6f3; text-shadow:0 2px 28px rgba(40,20,15,0.5), 0 1px 6px rgba(40,20,15,0.35); } /* "most-loved" italic accent — a soft, dusty slate-blue derived from the brand sky-blue but with the chroma pulled down so it sits IN the warm photographic backdrop instead of fighting it. The neon Pantone P2985C is reserved for the logo; on a warm photo, an editorial accent needs lower saturation. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-display em{ color:#a8c5d6; text-shadow: 0 1px 8px rgba(40, 20, 15, 0.35), 0 2px 18px rgba(40, 20, 15, 0.45); } /* H1 — quieter than before. Stays as a semantic

(locked SEO), but visually a low-key supporting line under the shouting display. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-h1.bmb-hero-h1{ font-size:clamp(.82rem, .15vw + .78rem, .95rem); color:rgba(255,250,247,0.7); text-shadow:0 1px 6px rgba(40,20,15,0.45); letter-spacing:.01em; } .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-h1 em{ color:#a8c5d6; /* matches the softened slate-blue display accent */ } /* Sub paragraph — even quieter than the H1. Reads like fine print under a magazine pull-quote. Shorter line-height keeps it tight. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-sub{ font-size:clamp(.78rem, .12vw + .76rem, .88rem); color:rgba(255,250,247,0.72); text-shadow:0 1px 4px rgba(40,20,15,0.45); line-height:1.45; max-width:48ch; } .home-preview .bmb-stage-frame > .bmb-hero .bmb-hero-microcopy{ color:rgba(255,250,247,0.72); text-shadow:0 1px 3px rgba(40,20,15,0.4); } /* Primary CTA ("Book Now") — elevated hero-only treatment. Bigger, premium dimensional shadow stack (inset top highlight + warm ambient glow), subtle vertical brand→brand-dk gradient for depth, and a slow "breathing" shadow pulse so it draws the eye without being garish. Hover pauses the breath and lifts. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-cta.bmb-cta--primary{ font-size:1.22rem; font-weight:600; letter-spacing:.02em; padding:1.05rem 2.8rem; /* BMB brand navy → sky-blue gradient (Pantone P2985C family). Replaces the dusty rose primary so the hero CTA matches the blue logo + "most-loved" accent. */ background:linear-gradient(180deg, #0d2c54 0%, #1a4d8a 100%); color:#fff; border:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 24px -6px rgba(13, 44, 84, 0.55), 0 16px 44px -10px rgba(143, 110, 105, 0.4); animation:bmbCtaBreathe 3.6s ease-in-out infinite; } .home-preview .bmb-stage-frame > .bmb-hero .bmb-cta.bmb-cta--primary:hover{ transform:translateY(-2px) scale(1.025); animation:none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 32px -6px rgba(13, 44, 84, 0.75), 0 20px 52px -10px rgba(26, 77, 138, 0.5); } @keyframes bmbCtaBreathe{ 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 24px -6px rgba(13, 44, 84, 0.55), 0 16px 44px -10px rgba(26, 77, 138, 0.4); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 30px -6px rgba(13, 44, 84, 0.75), 0 18px 50px -10px rgba(26, 77, 138, 0.5); } } @media (prefers-reduced-motion:reduce){ .home-preview .bmb-stage-frame > .bmb-hero .bmb-cta.bmb-cta--primary{animation:none} } /* Ghost CTA ("Explore Services") — frosted-glass surface to match the header's vibe. Translucent white-ish background + backdrop blur so the photo behind subtly shows through, with a soft saturation pop. */ .home-preview .bmb-stage-frame > .bmb-hero .bmb-cta.bmb-cta--ghost{ color:rgba(255,250,247,0.95); border-color:rgba(255,250,247,0.55); background:rgba(255,250,247,0.18); backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%); } .home-preview .bmb-stage-frame > .bmb-hero .bmb-cta.bmb-cta--ghost:hover{ background:rgba(255,250,247,0.32); border-color:rgba(255,250,247,0.85); } /* Core group — display + h1 + sub + ctas in a tight vertical stack, centred within the hero frame via parent's space-between. */ .home-preview .bmb-hero-core{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; width:100%; max-width:var(--max-home); text-align:center; } .home-preview .bmb-hero-core > *{margin:0} .home-preview .bmb-stage-frame .bmb-eyebrow{margin:0} .home-preview .bmb-stage-frame .bmb-hero-microcopy{margin:0} /* Hide the decorative SVG sprigs — would clash with the photo bg. */ .home-preview .bmb-hero::before, .home-preview .bmb-hero::after{display:none !important} /* ─── Trust band — "grand award" highlight take-over ────────────── Rises up over the sticky hero with a soft top shadow that makes the panel feel like a curtain being raised. Full viewport height so it completely covers the hero as it scrolls into view. Stats are flex-centred within the panel; after the stage ends, services flow in naturally below. Solid bg (no gradient) — the shadow does the "rising" work without creating a visible white-to-cream edge. */ /* (Old `.bmb-stage .bmb-trust` sticky-rise rule removed — the trust band is now inside `.bmb-stage-frame` as a layered cross-fade panel. See rules above.) */ /* ═════════════════════════════════════════════════════════════════ TRUST BAND — GRAMMY-GRADE TREATMENT Brass/champagne-gold accents, oversized metallic numerals with ink→brass gradient text-fill, soft warm radial glow behind each stat (spotlight effect), ceremonial flanking flourishes. Gold palette (local — not added to brand tokens so other pages keep their cream/rose system): --tg-gold: #c9a961 champagne gold (highlights + accents) --tg-brass: #8a6f33 dark brass (eyebrow + labels) --tg-glow: rgba(201, 169, 97, 0.18) spotlight wash ═════════════════════════════════════════════════════════════════ */ .home-preview .bmb-trust{ --tg-gold:#c9a961; --tg-brass:#8a6f33; --tg-glow:rgba(201, 169, 97, 0.22); } /* Eyebrow — small caps champagne gold, sits JUST ABOVE the awards grid (was anchored at top:3rem, far from the awards). The grid is centred at vp y=50% so we position the eyebrow at calc(50% - 8rem) = ~128px above grid centre = directly above the awards. Grid stays the only flex child so it lands at exact centre. */ .home-preview .bmb-trust-eyebrow{ position:absolute; top:calc(50% - 8rem); left:50%; transform:translateX(-50%); font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.34em; text-transform:uppercase; color:var(--tg-gold); display:flex; align-items:center; justify-content:center; gap:1.6rem; margin:0; white-space:nowrap; } .home-preview .bmb-trust-eyebrow::before, .home-preview .bmb-trust-eyebrow::after{ content:""; width:80px;height:1px; background:linear-gradient(90deg, transparent, var(--tg-gold), transparent); } .home-preview .bmb-trust-grid{ list-style:none;padding:0;margin:0 auto; max-width:1180px; display:grid; grid-template-columns:repeat(3, 1fr); gap:3rem 0; align-items:start; } .home-preview .bmb-trust-stat{ display:flex; flex-direction:column; align-items:center; gap:.45rem; position:relative; padding:1.2rem 2.5rem; /* Start state — invisible + nudged down. JS adds .is-revealed. */ opacity:0; transform:translateY(36px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); } .home-preview .bmb-trust-stat.is-revealed{ opacity:1; transform:translateY(0); } .home-preview .bmb-trust-stat:nth-child(1){transition-delay:0ms} .home-preview .bmb-trust-stat:nth-child(2){transition-delay:220ms} .home-preview .bmb-trust-stat:nth-child(3){transition-delay:440ms} /* Spotlight glow behind each stat — soft warm-gold radial wash that makes the numeral feel "lit from behind" on a ceremony stage. */ .home-preview .bmb-trust-stat::before{ content:""; position:absolute; inset:-10% 5% 30% 5%; background:radial-gradient(ellipse at center 40%, var(--tg-glow), transparent 65%); z-index:-1; pointer-events:none; filter:blur(8px); } /* Gold-tone hairline separators between cards (desktop only). */ @media (min-width:721px){ .home-preview .bmb-trust-stat:not(:last-child)::after{ content:""; position:absolute; right:0;top:18%;bottom:18%; width:1px; background:linear-gradient(180deg, transparent, var(--tg-gold) 30%, var(--tg-gold) 70%, transparent); opacity:.45; } } /* Numerals — oversized Cormorant with PURE METALLIC GOLD gradient text-fill. Light champagne shine at top → bright Grammy gold mid → deep brass at bottom. No dark ink — reads as a polished trophy numeral, luminous and ceremonial. Drop-shadow for spotlight depth. */ .home-preview .bmb-trust-num{ font-family:var(--font-display); font-size:clamp(4.4rem, 8vw, 6.8rem); font-weight:500; line-height:1; letter-spacing:-.025em; display:inline-flex; align-items:baseline; gap:.1em; background:linear-gradient(180deg, #f4e5b8 5%, /* light champagne shine — the "white" top */ #e3c878 30%, /* warm pale gold */ #c9a961 55%, /* champagne gold body */ #a8853f 80%, /* deeper brass */ #7a5f28 100% /* shadowed base */ ); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 6px 20px rgba(120, 90, 30, 0.25)); } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .home-preview .bmb-trust-num{color:var(--ink);background:none} } /* The "+" and "★" are CHAMPAGNE GOLD — the celebratory accent. */ .home-preview .bmb-trust-plus{ font-size:.55em; font-weight:400; margin-left:-.05em; color:var(--tg-gold); -webkit-text-fill-color:var(--tg-gold); } .home-preview .bmb-trust-star{ font-size:.7em; margin-left:.22em; color:var(--tg-gold); -webkit-text-fill-color:var(--tg-gold); filter:drop-shadow(0 2px 8px rgba(201, 169, 97, 0.6)); } /* Unit ("YEARS", "MUMS", "ON GOOGLE") — champagne gold caps, readable on the dark stage bg. */ .home-preview .bmb-trust-unit{ font-family:var(--sans); font-size:.95rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--tg-gold); margin-top:1.1rem; } /* Sub-label — italic Cormorant in soft cream so it reads on the dark stage bg (was dark ink, invisible on dark). */ .home-preview .bmb-trust-label{ font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:rgba(255, 248, 235, 0.78); line-height:1.5; margin-top:.85rem; max-width:22ch; } /* Mobile — drop sticky behavior (claustrophobic in small viewports), stack stats vertically, lighten the panel shadow. */ @media (max-width:720px){ .home-preview .bmb-stage .bmb-hero{ position:relative; min-height:auto; } .home-preview .bmb-stage .bmb-trust{ padding:3.5rem 1rem 3rem; box-shadow:0 -16px 32px -8px rgba(143, 110, 105, 0.08); } /* (Stages-rise-up override moved below the .bmb-stages base rule so source order makes it win — see ~line 1390.) */ .home-preview .bmb-trust-grid{grid-template-columns:1fr;gap:2.2rem} /* On desktop the eyebrow is absolutely positioned at top:calc(50% - 8rem) so it floats above a horizontally-laid-out grid. On mobile the grid stacks vertically and is much taller, so that math puts the eyebrow in the MIDDLE of the stats. Put the eyebrow back into flex flow so it naturally sits at the TOP of the column. */ .home-preview .bmb-trust-eyebrow{ position:static; transform:none; top:auto;left:auto; margin:0 auto 2rem; gap:.8rem; } .home-preview .bmb-trust-eyebrow::before, .home-preview .bmb-trust-eyebrow::after{width:32px} .home-preview .bmb-trust-stat{padding:0} } /* Respect users who don't want motion — show stats immediately. Sticky positioning is layout (not animation) so it stays. */ @media (prefers-reduced-motion:reduce){ .home-preview .bmb-trust-stat{ opacity:1; transform:none; transition:none; } } .home-preview .bmb-section-head h2 em, .home-preview .bmb-why-text h2 em, .home-preview .bmb-testimonials-head-text h2 em, .home-preview .bmb-final-cta h2 em{ font-style:italic;color:var(--brand);font-weight:500; } /* ═════════════════════════════════════════════════════════════════ Aesthetic refinements — section ornaments, card polish, subtle colour warmth, decorative flourishes. All scoped to .home-preview so they only affect the homepage. ═════════════════════════════════════════════════════════════════ */ /* ─── Decorative section flourish (centred mini-rule with dot) ──── */ .home-preview .bmb-services > .bmb-section-head::before, .home-preview .bmb-journey > .bmb-section-head::before, .home-preview .bmb-testimonials .bmb-testimonials-head::before, .home-preview .bmb-blog-teaser > .bmb-section-head::before, .home-preview .bmb-final-cta::before{ content:""; display:block; width:80px;height:1px; background:linear-gradient(90deg,transparent,var(--brand-200),transparent); margin:0 auto 1.6rem; position:relative; } /* ─── Section heads — restrained, elegant ─────────────────────── */ .home-preview .bmb-section-head h2{ letter-spacing:0;line-height:1.5; } /* ─── Stats numbers — subtle brand-tone gradient text fill ─────── */ .home-preview .bmb-stat-num{ background:linear-gradient(180deg,var(--brand-dk),var(--brand-700)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* (stats section background intentionally transparent — see the base .bmb-stats rule above. No boxed pink wash on the page.) */ /* ─── Award marks — soft lift + brass-tone hover ────────────────── */ .home-preview .bmb-award-mark{ box-shadow:0 1px 3px rgba(120,80,90,.06), 0 6px 18px rgba(186,143,149,.10); transition:transform .3s ease, box-shadow .3s ease; } .home-preview .bmb-award:hover .bmb-award-mark{ transform:scale(1.06) rotate(-1deg); box-shadow:0 4px 14px rgba(120,80,90,.10), 0 14px 30px rgba(186,143,149,.18); } /* ─── Service cards — refined shadow + image rounded top ────────── */ .home-preview .bmb-service-card{ box-shadow:var(--shadow-sm); } .home-preview .bmb-service-card:hover{ box-shadow:0 10px 26px rgba(120,80,90,.10), 0 30px 60px rgba(120,80,90,.08); } .home-preview .bmb-service-card-img{ border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; } /* ─── Trimester cards — gentle shadow + lift on hover ───────────── */ .home-preview .bmb-timeline > li{ box-shadow:var(--shadow-sm); transition:box-shadow .3s ease, transform .8s ease, opacity .8s ease, border-color .25s ease; } .home-preview .bmb-timeline > li:hover{ box-shadow:var(--shadow); } .home-preview .bmb-timeline-illus{ filter:drop-shadow(0 4px 8px rgba(120,80,90,.08)); } /* ─── Why BMB — photo refined, quote elegant ────────────────────── */ .home-preview .bmb-why-visual{ box-shadow:0 10px 30px rgba(120,80,90,.12), 0 30px 60px rgba(120,80,90,.10); } .home-preview .bmb-why-pillars .bmb-pillar-num{ display:inline-block; position:relative; } .home-preview .bmb-why-pillars .bmb-pillar-num::after{ content:""; display:block; width:14px;height:1px; background:var(--brand); margin-top:.3rem;opacity:.5; } .home-preview .bmb-why-pillars li:hover .bmb-pillar-num{ color:var(--brand-dk); } /* ─── Testimonials — decorative quote glyph behind each card ────── */ .home-preview .bmb-review-card{ box-shadow:var(--shadow-sm); position:relative;overflow:hidden; } .home-preview .bmb-review-card::before{ content:"\201C"; /* curly opening quote */ position:absolute; top:-.6rem;right:.6rem; font-family:var(--serif); font-size:6rem; line-height:1; color:var(--brand-100); opacity:.8; pointer-events:none; z-index:0; } .home-preview .bmb-review-card > *{position:relative;z-index:1} .home-preview .bmb-review-summary{ box-shadow:var(--shadow-sm); background:linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%); } .home-preview .bmb-review-summary .bmb-review-summary-name{ font-family:var(--serif);font-style:italic;color:var(--brand-dk); } /* ─── Blog cards — refined shadow + tag chip ────────────────────── */ .home-preview .bmb-blog-card{ box-shadow:var(--shadow-sm); } .home-preview .bmb-blog-card:hover{ box-shadow:0 10px 24px rgba(120,80,90,.10); } /* ─── Location cards — gentle warmth + lift ─────────────────────── */ .home-preview .bmb-location-card{ box-shadow:var(--shadow-sm); transition:box-shadow .3s ease, transform .3s ease; } .home-preview .bmb-location-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); } .home-preview .bmb-location-card h2{ color:var(--brand-dk); } /* ─── Partner tiles — refined ──────────────────────────────────── */ .home-preview .bmb-partner-tile{ transition:border-color .2s ease, color .2s ease, transform .2s ease; } .home-preview .bmb-partner-tile:hover{ border-color:var(--brand);color:var(--brand-dk);transform:translateY(-1px); } /* ─── Tighter global section rhythm — close gaps between sections. Previously 5.5rem top + 5.5rem bottom (11rem of stacked padding between any two sections, ~176px). Now 2.75rem each side (~5.5rem total = ~88px), so the page flows together without dead bands of negative space, while sections still feel like distinct blocks. */ .home-preview .bmb-services, .home-preview .bmb-journey, .home-preview .bmb-why, .home-preview .bmb-testimonials, .home-preview .bmb-blog-teaser, .home-preview .bmb-locations{ padding-top:2.75rem;padding-bottom:2.75rem; } /* The Awards section sits between the hero and Services and wants a slightly tighter top so it follows the stats bar closely. */ .home-preview .bmb-awards{padding-top:2rem;padding-bottom:2.5rem} /* Hero already has its own intentional padding; pull its bottom in a touch so the stats bar sits closer underneath. */ .home-preview .bmb-hero{padding-bottom:2rem} /* Final CTA gets a touch more breathing room so the banner has weight, but still less than before. */ .home-preview .bmb-final-cta{padding-top:3.4rem;padding-bottom:3.4rem} @media (max-width:720px){ .home-preview .bmb-services, .home-preview .bmb-journey, .home-preview .bmb-why, .home-preview .bmb-testimonials, .home-preview .bmb-blog-teaser, .home-preview .bmb-locations{padding-top:2rem;padding-bottom:2rem} .home-preview .bmb-final-cta{padding-top:2.4rem;padding-bottom:2.4rem} } .home-preview .bmb-hero-sub{ font-family:var(--sans);font-size:1.05rem;color:var(--muted); max-width:62ch;margin-bottom:2.2rem;line-height:1.6; } .home-preview .bmb-hero-ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.2rem} .home-preview .bmb-hero-microcopy{ color:var(--muted);font-size:.82rem; } /* ─── 2. STATS bar (no boxed edges, full-width feel, labels wrap) ── */ .home-preview .bmb-stats{ max-width:var(--max-home);margin:0 auto;padding:1.2rem 2rem 2.6rem; display:flex;justify-content:space-between;align-items:flex-start; gap:1rem; background:transparent; /* no boxed pink wash */ border:0; /* no top/bottom hairlines */ } .home-preview .bmb-stat{ flex:1 1 0;min-width:0; /* each stat shares ¼ of the row, and is free to shrink so labels can wrap inside their column */ padding:1rem .8rem;text-align:center; display:flex;flex-direction:column;gap:.5rem;align-items:center; } .home-preview .bmb-stat-num{ font-family:var(--serif);font-size:2.2rem;font-weight:600; color:var(--brand-dk);line-height:1;letter-spacing:-.02em; } .home-preview .bmb-stat-label{ font-family:var(--sans);font-size:.7rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--muted); line-height:1.45;max-width:18ch; /* wraps to ~2 lines, never clips */ hyphens:auto; } .home-preview .bmb-stat-divider{ width:1px;height:44px;background:var(--line-rose);flex:0 0 auto; align-self:center; } /* ─── 3. RECOGNITION (merged stats + awards + partners) ───────── */ .home-preview .bmb-awards{ max-width:var(--max-home);margin:0 auto;padding:3.6rem 2rem 3.4rem; text-align:center; } /* Override stats inside the merged Recognition section — the stats used to be a standalone
; inside Recognition they're a compact row sitting between the section head and the awards. */ .home-preview .bmb-recognition .bmb-stats{ max-width:none;padding:0;margin:0 auto 2.4rem; display:flex;justify-content:space-between;align-items:flex-start;gap:1rem; background:transparent;border:0; } .home-preview .bmb-recognition .bmb-stats .bmb-stat{ flex:1 1 0;min-width:0;padding:.6rem .6rem; text-align:center;display:flex;flex-direction:column;gap:.4rem;align-items:center; } .home-preview .bmb-recognition .bmb-stats .bmb-stat-num{ font-size:1.7rem; } .home-preview .bmb-recognition .bmb-stats .bmb-stat-divider{ width:1px;height:42px;background:var(--line-rose);align-self:center;flex:0 0 auto; } /* Tighten gap between award-grid and the section above */ .home-preview .bmb-recognition .bmb-award-grid{ margin-top:0;padding-top:1.6rem;border-top:1px solid var(--line); } /* Tighten the partners block too */ .home-preview .bmb-recognition .bmb-awards-partners{ margin-top:1.6rem;padding-top:1.6rem; } .home-preview .bmb-awards .bmb-section-head{margin-bottom:2rem} .home-preview .bmb-award-grid{ display:flex;justify-content:space-evenly;align-items:center; gap:1rem;flex-wrap:wrap; } .home-preview .bmb-award{ display:flex;flex-direction:column;align-items:center;gap:.5rem; padding:.6rem 1rem;min-width:200px;margin:0; } .home-preview .bmb-award-mark{ width:74px;height:74px;border-radius:50%; background:var(--brand-100); display:grid;place-items:center; border:1px solid var(--brand-200);overflow:hidden; margin-bottom:.6rem; } .home-preview .bmb-award-mark img{width:54px;height:54px;object-fit:contain} .home-preview .bmb-award h3{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--ink);margin:0} .home-preview .bmb-award-year{font-family:var(--sans);font-size:.72rem;color:var(--muted);letter-spacing:.04em;margin:0} .home-preview .bmb-award-divider{width:1px;height:60px;background:var(--line-rose);align-self:center} .home-preview .bmb-awards-partners{ margin-top:2.4rem;padding-top:1.6rem;border-top:1px dashed var(--line-rose); } .home-preview .bmb-awards-partners .bmb-eyebrow{margin-bottom:.8rem;justify-content:center;display:inline-flex} .home-preview .bmb-partners-lead{ font-family:var(--sans);font-size:.86rem;color:var(--muted); margin:.4rem auto 1rem;max-width:68ch;line-height:1.55; } .home-preview .bmb-partner-strip{ display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .6rem; } .home-preview .bmb-partner-tile{ font-family:var(--sans);font-size:.78rem;font-weight:500;color:var(--ink-2); padding:.42rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface); } /* ═════════════════════════════════════════════════════════════════ STAGES — replaces both old "Services" (8-card grid) and "Pregnancy Journey" (4 trimester cards) sections. Five life stages, each showing the relevant services as direct links. Reads as a guide: "Where are you in your journey? Here's what to look at." ═════════════════════════════════════════════════════════════════ */ .home-preview .bmb-stages{ position:relative; z-index:5; margin-top:calc(-1 * 35svh); width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; background: linear-gradient(180deg, rgba(253, 250, 248, 0) 0%, rgba(253, 250, 248, 0.55) 120px, var(--bg) 280px, var(--bg) 100% ); padding:calc(280px + 3rem) 2rem 5rem; } /* Mobile override — the negative margin-top + huge padding-top above exists to let .bmb-stages "rise up" over the sticky trust band on desktop. On mobile that maths pulls the "Pick your trimester" copy INTO the trust band while it's still pinned, so reset both. */ @media (max-width:720px){ .home-preview .bmb-stages{ margin-top:0; padding-top:4rem; } } .home-preview .bmb-stages > .bmb-section-head{ max-width:var(--max-home); margin-left:auto; margin-right:auto; margin-bottom:3.5rem; } /* Hide the descriptive lead + "Select your stage" prompt — both kept in DOM for SEO (the lead has the locked "pre natal" and "prenatal massage Singapore" keywords) but visually removed so the title + tabs become the sole visual hierarchy. */ /* WhatsApp HELP CTA — soft handover for mums whose situation doesn't fit the 5-stage flow. Sits below all panels, separated by a hairline. */ .home-preview .bmb-stages-help{ max-width:560px; margin:4rem auto 0; padding:3rem 1.5rem 0; text-align:center; border-top:1px solid var(--line); } .home-preview .bmb-stages-help-line{ font-family:var(--font-display); font-size:1.5rem; font-style:italic; font-weight:500; color:var(--ink); margin:0 0 1.4rem; letter-spacing:-.005em; } .home-preview .bmb-stages-help-cta{ display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 2rem; background:#25D366; color:#fff; text-decoration:none; border-radius:999px; font-family:var(--sans); font-size:1rem; font-weight:600; letter-spacing:.005em; box-shadow:0 4px 16px -4px rgba(37, 211, 102, 0.45); transition:transform .22s ease, box-shadow .22s ease, background .22s ease; } .home-preview .bmb-stages-help-cta:hover{ transform:translateY(-2px); background:#1ebe5b; box-shadow:0 8px 24px -6px rgba(37, 211, 102, 0.55); } .home-preview .bmb-stages-help-icon{ width:18px; height:18px; flex-shrink:0; } .home-preview .bmb-stages-help-note{ font-family:var(--font-display); font-style:italic; font-size:.98rem; color:var(--muted); margin:1.2rem 0 0; } @media (max-width:640px){ .home-preview .bmb-stages-help{margin-top:3rem;padding:2.2rem 1rem 0} .home-preview .bmb-stages-help-line{font-size:1.25rem} } .home-preview .bmb-stages .bmb-section-lead, .home-preview .bmb-stages-prompt{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px;padding:0;border:0; } /* TRIMESTER PICKER — 5 watercolor illustrations as selectable tabs. Active tab has full opacity + a soft rose-tint backdrop. Inactive tabs are muted so the user understands they're clickable. */ .home-preview .bmb-stages-picker{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.7rem; max-width:var(--max-home); /* Reduced bottom margin so the panel card sits visually attached to the active tab (a notch on the panel points up to the tab). */ margin:0 auto .25rem; } .home-preview .bmb-stage-tab{ background:transparent; border:1px solid transparent; border-radius:20px; padding:1.6rem 1rem 1.4rem; cursor:pointer; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; opacity:.5; transition:opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease; font:inherit; color:inherit; } .home-preview .bmb-stage-tab:hover{ opacity:.85; transform:translateY(-2px); } /* Active tab — ANIMATED champagne-gold BORDER (only the 2px ring, never the background). A bright shine travels around the perimeter via an animated conic-gradient on a ::before pseudo whose inner region is masked out, so the gradient lives strictly in the border ring. The tab's own soft rose-cream background is unaffected. */ @property --bmb-border-angle{ syntax:""; initial-value:0deg; inherits:false; } .home-preview .bmb-stage-tab.is-active{ position:relative; opacity:1; background:linear-gradient(180deg, rgba(244, 229, 184, 0.12), rgba(186, 143, 149, 0.06)); border-color:transparent; box-shadow: 0 4px 24px -4px rgba(201, 169, 97, 0.32), 0 12px 44px -10px rgba(201, 169, 97, 0.22); } .home-preview .bmb-stage-tab.is-active::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:2px; background:conic-gradient(from var(--bmb-border-angle, 0deg), rgba(201, 169, 97, 0.22), rgba(201, 169, 97, 0.22) 14%, #f4e5b8 22%, #ffffff 26%, #c9a961 30%, #f4e5b8 34%, rgba(201, 169, 97, 0.22) 44%, rgba(201, 169, 97, 0.22) ); /* Mask trick: full pseudo gets the gradient, but the inner area (content-box) is masked OUT, leaving only the 2px padding ring. */ -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:bmbStageBorderRotate 4s linear infinite; pointer-events:none; } @keyframes bmbStageBorderRotate{ to { --bmb-border-angle: 360deg; } } @media (prefers-reduced-motion:reduce){ .home-preview .bmb-stage-tab.is-active::before{animation:none} } .home-preview .bmb-stage-tab-illus{ width:100%; max-width:200px; height:auto; margin-bottom:.6rem; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .home-preview .bmb-stage-tab.is-active .bmb-stage-tab-illus{ transform:scale(1.04); } /* Weeks = PRIMARY label (this is what a mum recognises). Now larger and bolder than the stage name. */ .home-preview .bmb-stage-tab-when{ font-family:var(--sans); font-size:1.18rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); } /* Stage name = supporting subtitle. Smaller italic Cormorant under the weeks. */ .home-preview .bmb-stage-tab-name{ font-family:var(--font-display); font-size:1.05rem; font-style:italic; font-weight:400; color:var(--muted); line-height:1.2; letter-spacing:0; } /* CONTENT PANELS — only the active panel is rendered. Smooth fade-in when user switches tabs. All 5 panels stay in the DOM (just display:none on inactive) so Google indexes every stage's content and service links. */ .home-preview .bmb-stages-content{ max-width:var(--max-home); margin:0 auto; position:relative; /* Soft card around the active panel so users see the services as belonging to the selected trimester. The notch (::before) points up to the active tab via the --active-idx custom property set by JS on .bmb-stages — that variable is 0–4, and we centre the notch on column (idx + 0.5) of a 5-col grid. */ background:linear-gradient(180deg, rgba(255, 250, 248, 0.85), rgba(252, 244, 238, 0.7)); border:1px solid rgba(186, 143, 149, 0.18); border-radius:24px; padding:2.5rem 2rem 2rem; box-shadow:0 12px 40px -16px rgba(186, 143, 149, 0.18); } .home-preview .bmb-stages-content::before{ content:""; position:absolute; top:-9px; width:18px; height:18px; background:inherit; border-top:1px solid rgba(186, 143, 149, 0.18); border-left:1px solid rgba(186, 143, 149, 0.18); left:10%; transform:translateX(-50%) rotate(45deg); /* NOTE: no transition on `left` — Chrome had a recompute glitch where the notch stayed at the initial position even after the class swap. Snapping is fine; tab switches are quick anyway. */ } .home-preview .bmb-stages-content.is-active-1::before{left:10%} .home-preview .bmb-stages-content.is-active-2::before{left:30%} .home-preview .bmb-stages-content.is-active-3::before{left:50%} .home-preview .bmb-stages-content.is-active-4::before{left:70%} .home-preview .bmb-stages-content.is-active-5::before{left:90%} @media (max-width:720px){ .home-preview .bmb-stages-content::before{display:none} .home-preview .bmb-stages-content{padding:1.75rem 1.25rem} } .home-preview .bmb-stage-panel{ display:none; animation:bmbStagePanelIn .4s cubic-bezier(.2,.7,.2,1); } .home-preview .bmb-stage-panel.is-active{display:block} /* Tab already shows the stage name + supporting description is hidden visually but stays in the DOM for SEO word count. Removing the redundant in-panel heading + bulk text means services become the only thing visible — the actual decision the user is making. */ .home-preview .bmb-stage-panel-text{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } @keyframes bmbStagePanelIn{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } .home-preview .bmb-stage-panel-text{display:flex;flex-direction:column} .home-preview .bmb-stage-panel-text h3{ font-family:var(--font-display); font-size:clamp(1.8rem, 2.6vw, 2.4rem); font-weight:500; line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:0 0 1rem; } .home-preview .bmb-stage-panel-text > p{ font-family:var(--sans); font-size:.98rem; line-height:1.6; color:var(--muted); margin:0; max-width:50ch; } /* "What to focus on" mini-list — quick educational tips for this stage. Sits below the descriptive paragraph as a small tasteful callout. */ .home-preview .bmb-stage-focus{ list-style:none; padding:1.1rem 0 0; margin:1.2rem 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:.55rem; max-width:34ch; } .home-preview .bmb-stage-focus li{ font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--ink); padding-left:1.1rem; position:relative; margin:0; } .home-preview .bmb-stage-focus li::before{ content:""; position:absolute; left:0;top:.6em; width:6px;height:1px; background:var(--brand); } .home-preview .bmb-stage-focus li em{ font-style:italic; color:var(--brand-dk); font-weight:500; } /* Services as VISUAL CARDS — image-led tiles in a 3-column grid. Each card: image (16:9) + title (display serif) + 1-line tagline. Image is the dominant visual cue so a scanning mum knows what each service IS without reading the title first. */ .home-preview .bmb-stage-services{ list-style:none; padding:0; margin:0; display:grid; /* Default to 3 cards per row when space allows (1180px max-home gives ~1100px usable, fits 3 × 340 + 2 × 22.4px gaps = 1064.8). auto-fit drops to 2 or 1 column at narrower widths. Capping the max so 2-card stages (Just discovered) don't stretch oversized. Each card and image stays uniform across every stage. */ grid-template-columns:repeat(auto-fit, minmax(260px, 340px)); gap:1.4rem; justify-content:center; max-width:var(--max-home); margin:0 auto; } .home-preview .bmb-stage-services > li{margin:0} .home-preview .bmb-stage-services a{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; height:100%; } .home-preview .bmb-stage-services a:hover{ transform:translateY(-3px); border-color:var(--brand); box-shadow:0 12px 30px -8px rgba(120,80,90,0.18); } .home-preview .bmb-stage-service-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--brand-100, #f5e8da); } .home-preview .bmb-stage-service-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.6,.2,1); } .home-preview .bmb-stage-services a:hover .bmb-stage-service-img img{ transform:scale(1.06); } .home-preview .bmb-stage-service-body{ display:flex; flex-direction:column; padding:1.3rem 1.4rem 1.5rem; gap:.35rem; } .home-preview .bmb-stage-services h4{ font-family:var(--font-display); font-size:1.45rem; font-weight:500; letter-spacing:-.005em; color:var(--ink); margin:0; line-height:1.2; } .home-preview .bmb-stage-services p{ font-family:var(--sans); font-size:.92rem; color:var(--muted); line-height:1.5; margin:0; } /* Tablet — picker shrinks; services drop to 2 columns */ @media (max-width:900px){ .home-preview .bmb-stages-picker{gap:.4rem} .home-preview .bmb-stage-tab{padding:.9rem .5rem .8rem} .home-preview .bmb-stage-tab-illus{max-width:100px} .home-preview .bmb-stage-tab-name{font-size:1rem} .home-preview .bmb-stage-tab-when{font-size:.62rem;letter-spacing:.15em} .home-preview .bmb-stage-services{grid-template-columns:repeat(2, 1fr)} } /* Mobile — picker becomes 3+2 grid, services stack single column */ @media (max-width:640px){ /* margin-top:0 (no rise-up) is set by the 720px override above; keep padding-top compact since there's no overlap to compensate for. */ .home-preview .bmb-stages{padding:4rem 1rem 4rem} .home-preview .bmb-stages-picker{grid-template-columns:repeat(3, 1fr);gap:.3rem} .home-preview .bmb-stage-tab{padding:.7rem .4rem} .home-preview .bmb-stage-tab-illus{max-width:78px} .home-preview .bmb-stage-tab-name{font-size:.88rem;line-height:1.15} .home-preview .bmb-stage-tab-when{font-size:.58rem;letter-spacing:.12em} .home-preview .bmb-stage-services{grid-template-columns:1fr;gap:1rem} .home-preview .bmb-stage-service-body{padding:1.1rem 1.2rem 1.3rem} } /* ─── 4. SERVICES (4×2 grid — DEPRECATED, replaced by .bmb-stages above) */ /* Negative margin-top + higher z-index makes services "rise UP over" the trust band. Now with a SMALLER overlap (-35vh, was -100vh) so the awards have a meaningful DWELL period after the cross-fade completes before services begins peeking — the "frame hold" the user asked for. The TOP of services fades from transparent → solid cream over the first 280px, so as services rises over the still-pinned dark trust panel, the trust visibly fades into white rather than hitting a hard cream-on-dark edge. Full-bleed so the bg covers viewport. */ .home-preview .bmb-services{ position:relative; z-index:5; margin-top:calc(-1 * 35svh); /* Full-bleed bg via the same breakout trick as hero/trust. */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; /* Soft fade-in: transparent at the top edge, solid cream by 280px down. As services rises over trust, this gradient is what crosses the trust panel, producing the "screen fades to white" effect. Content top-padding (calc(280px + 3rem) ≈ 328px) clears the gradient zone so the section-head label + lead paragraph never sit on the semi-transparent strip. */ background: linear-gradient(180deg, rgba(253, 250, 248, 0) 0%, rgba(253, 250, 248, 0.55) 120px, var(--bg) 280px, var(--bg) 100% ); padding:calc(280px + 3rem) 2rem 5rem; } /* Constrain services' inner content to the standard max-width (services itself is now full viewport width for the bg). */ .home-preview .bmb-services > .bmb-section-head, .home-preview .bmb-services > .bmb-service-grid{ max-width:var(--max-home); margin-left:auto; margin-right:auto; } /* ───── BENTO GRID — editorial asymmetric layout ─────────────────── The first two cards are HERO/FEATURE tiles spanning half the row each. The remaining six fill 3 columns × 2 rows beneath. Creates the visual rhythm that flat 4×2 grids lack — eye lands on the two pillar services first, then scans the rest. */ .home-preview .bmb-service-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:1rem; } /* First 2 cards = featured (span 3 of 6 cols, taller aspect ratio) */ .home-preview .bmb-service-card:nth-child(1), .home-preview .bmb-service-card:nth-child(2){ grid-column:span 3; aspect-ratio:16 / 11; } /* Cards 3-8 = smaller (span 2 of 6 cols, original aspect) */ .home-preview .bmb-service-card:nth-child(n+3){ grid-column:span 2; } /* Featured tiles get a larger headline */ .home-preview .bmb-service-card:nth-child(1) h3, .home-preview .bmb-service-card:nth-child(2) h3{ font-size:clamp(1.8rem, 2.4vw, 2.3rem); } /* Tablet — drop to 4 cols, all cards equal */ @media (max-width:1024px){ .home-preview .bmb-service-grid{grid-template-columns:repeat(4, 1fr)} .home-preview .bmb-service-card:nth-child(1), .home-preview .bmb-service-card:nth-child(2){grid-column:span 2;aspect-ratio:4/3} .home-preview .bmb-service-card:nth-child(n+3){grid-column:span 2} } /* Mobile — single column */ @media (max-width:640px){ .home-preview .bmb-service-grid{grid-template-columns:1fr} .home-preview .bmb-service-card, .home-preview .bmb-service-card:nth-child(1), .home-preview .bmb-service-card:nth-child(2), .home-preview .bmb-service-card:nth-child(n+3){grid-column:span 1;aspect-ratio:4/3} } /* ─── Service cards — image-dominant hover-reveal (modern editorial). Image fills the card. Title always anchored at the bottom over a soft dark gradient. Description + CTA collapsed at rest (max-height 0) and expand into the layout on hover — title stays at the bottom because the children below it have zero height when collapsed. */ .home-preview .bmb-service-card{ position:relative;display:block; aspect-ratio:3/4;overflow:hidden; background:var(--brand-100);border:1px solid var(--line);border-radius:18px; color:#fff; box-shadow:var(--shadow-sm); transition:transform .35s ease, box-shadow .35s ease; } .home-preview .bmb-service-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(120,80,90,.18), 0 30px 60px rgba(120,80,90,.12); } /* Image layer — fills the whole card */ .home-preview .bmb-service-card-img{ position:absolute;inset:0;z-index:0; display:block;background:var(--brand-100);overflow:hidden; } .home-preview .bmb-service-card-img img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .65s cubic-bezier(.2,.6,.2,1); will-change:transform; } .home-preview .bmb-service-card:hover .bmb-service-card-img img{transform:scale(1.06)} .home-preview .bmb-service-card-img::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg, transparent 30%, rgba(30,18,22,.10) 50%, rgba(30,18,22,.55) 78%, rgba(30,18,22,.85) 100%); transition:background .4s ease; } .home-preview .bmb-service-card:hover .bmb-service-card-img::after{ background: linear-gradient(180deg, rgba(30,18,22,.18) 0%, rgba(30,18,22,.42) 45%, rgba(30,18,22,.85) 100%); } /* Body — title pinned to the bottom; description/CTA collapsed below it at rest, expanded on hover (title stays in place). */ .home-preview .bmb-service-card-body{ position:absolute;inset:0;z-index:1;pointer-events:none; padding:1.4rem 1.4rem 1.3rem; display:flex;flex-direction:column;justify-content:flex-end;gap:0; contain:layout paint; } .home-preview .bmb-service-card-body > *{pointer-events:auto} .home-preview .bmb-service-card h3{ font-family:var(--serif);font-weight:500; font-size:1.45rem;line-height:1.15;letter-spacing:-.01em; color:#fff;margin:0; transform:translateY(0); transition:transform .4s ease; will-change:transform; } .home-preview .bmb-service-card:hover h3{transform:translateY(-2px)} .home-preview .bmb-service-card h3 a{color:inherit;text-decoration:none} /* Description — hidden at rest (max-height 0), revealed on hover. */ .home-preview .bmb-service-card p{ font-family:var(--sans); font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.94); margin:0; max-height:0;opacity:0;overflow:hidden; transition:max-height .45s ease, opacity .35s ease .05s, margin .45s ease; will-change:max-height, opacity; } .home-preview .bmb-service-card:hover p{ max-height:240px;opacity:1;margin-top:.7rem; } .home-preview .bmb-service-card-cta{ display:inline-flex;align-items:center;gap:.4rem; font-family: var(--sans); font-size:1rem;font-weight:500;letter-spacing:.005em; color:#fff;border:0;padding:0;margin:0; max-height:0;opacity:0;overflow:hidden; transition:max-height .45s ease .03s, opacity .35s ease .1s, margin .45s ease; will-change:max-height, opacity; } .home-preview .bmb-service-card:hover .bmb-service-card-cta{ max-height:32px;opacity:1;margin-top:.7rem; } .home-preview .bmb-service-card-cta span{ display:inline-block;transition:transform .25s ease; } .home-preview .bmb-service-card:hover .bmb-service-card-cta span{transform:translateX(4px)} /* Touch-device fallback — no hover, so show everything by default. */ @media (hover:none){ .home-preview .bmb-service-card-img::after{ background: linear-gradient(180deg, rgba(30,18,22,.18) 0%, rgba(30,18,22,.45) 45%, rgba(30,18,22,.85) 100%); } .home-preview .bmb-service-card p, .home-preview .bmb-service-card-cta{ max-height:240px;opacity:1; } .home-preview .bmb-service-card p{margin-top:.7rem} .home-preview .bmb-service-card-cta{margin-top:.7rem;max-height:32px} } /* ─── 5. TRIMESTER JOURNEY (4-col grid, silhouettes, staggered) ── */ .home-preview .bmb-journey{ padding:5rem 2rem;background:transparent; } .home-preview .bmb-journey > .bmb-section-head{max-width:60ch;margin:0 auto 3rem} .home-preview .bmb-timeline{ list-style:none;padding:0;margin:0 auto;max-width:var(--max-home); display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem; counter-reset:none; } .home-preview .bmb-timeline > li{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.8rem 1.2rem 1.6rem;text-align:center; transition:border-color .2s, transform .8s ease, opacity .8s ease; position:relative; } .home-preview .bmb-timeline > li:hover{border-color:var(--brand-200)} .home-preview .bmb-timeline-illus{ width:130px;height:170px;margin:0 auto .8rem; } .home-preview .bmb-timeline-illus img{width:100%;height:100%;object-fit:contain} .home-preview .bmb-timeline > li > h3{font-size:1.25rem;margin:0 0 .55rem;color:var(--brand-dk)} .home-preview .bmb-timeline > li > p{font-family:var(--sans);font-size:.86rem;color:var(--ink-2);line-height:1.6;margin:0} /* Staggered reveal — fires when .bmb-timeline scrolls into view */ .home-preview .bmb-timeline > li{opacity:0;transform:translateY(18px)} .home-preview .bmb-timeline.is-revealed > li{opacity:1;transform:none} .home-preview .bmb-timeline.is-revealed > li:nth-child(1){transition-delay:0ms} .home-preview .bmb-timeline.is-revealed > li:nth-child(2){transition-delay:300ms} .home-preview .bmb-timeline.is-revealed > li:nth-child(3){transition-delay:600ms} .home-preview .bmb-timeline.is-revealed > li:nth-child(4){transition-delay:900ms} @media (prefers-reduced-motion:reduce){ .home-preview .bmb-timeline > li{opacity:1;transform:none;transition:none} } /* ═════════════════════════════════════════════════════════════════ Page-wide reveal animation Every major section element fades + slides up on first scroll into view. One-shot (observer un-observes after trigger). Within a grid of siblings (service cards, award cards, blog cards, testimonial cards, location cards), cards stagger by nth-child to feel like a wave instead of a wall. prefers-reduced-motion users see everything as static. ═════════════════════════════════════════════════════════════════ */ .home-preview .bmb-hero > *, .home-preview .bmb-section-head, .home-preview .bmb-award, .home-preview .bmb-awards-partners, .home-preview .bmb-service-card, .home-preview .bmb-why-text, .home-preview .bmb-why-visual, .home-preview .bmb-testimonials-head, .home-preview .bmb-review-summary, .home-preview .bmb-review-card, .home-preview .bmb-blog-card, .home-preview .bmb-final-cta > *, .home-preview .bmb-location-card{ opacity:0;transform:translateY(22px); transition:opacity .9s ease, transform .9s ease; will-change:opacity, transform; } .home-preview .bmb-hero > *.is-revealed, .home-preview .bmb-section-head.is-revealed, .home-preview .bmb-award.is-revealed, .home-preview .bmb-awards-partners.is-revealed, .home-preview .bmb-service-card.is-revealed, .home-preview .bmb-why-text.is-revealed, .home-preview .bmb-why-visual.is-revealed, .home-preview .bmb-testimonials-head.is-revealed, .home-preview .bmb-review-summary.is-revealed, .home-preview .bmb-review-card.is-revealed, .home-preview .bmb-blog-card.is-revealed, .home-preview .bmb-final-cta > *.is-revealed, .home-preview .bmb-location-card.is-revealed{ opacity:1;transform:none; } /* Wave-stagger within grids (cards reveal 1 → 2 → 3 → 4) */ .home-preview .bmb-service-grid .bmb-service-card:nth-child(1){transition-delay:0ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(2){transition-delay:120ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(3){transition-delay:240ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(4){transition-delay:360ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(5){transition-delay:0ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(6){transition-delay:120ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(7){transition-delay:240ms} .home-preview .bmb-service-grid .bmb-service-card:nth-child(8){transition-delay:360ms} .home-preview .bmb-award-grid .bmb-award:nth-child(1){transition-delay:0ms} .home-preview .bmb-award-grid .bmb-award:nth-child(3){transition-delay:150ms} .home-preview .bmb-award-grid .bmb-award:nth-child(5){transition-delay:300ms} .home-preview .bmb-review-track .bmb-review-card:nth-child(1){transition-delay:0ms} .home-preview .bmb-review-track .bmb-review-card:nth-child(2){transition-delay:150ms} .home-preview .bmb-review-track .bmb-review-card:nth-child(3){transition-delay:300ms} .home-preview .bmb-blog-grid .bmb-blog-card:nth-child(1){transition-delay:0ms} .home-preview .bmb-blog-grid .bmb-blog-card:nth-child(2){transition-delay:130ms} .home-preview .bmb-blog-grid .bmb-blog-card:nth-child(3){transition-delay:260ms} .home-preview .bmb-blog-grid .bmb-blog-card:nth-child(4){transition-delay:390ms} .home-preview .bmb-locations .bmb-location-card:nth-child(1){transition-delay:0ms} .home-preview .bmb-locations .bmb-location-card:nth-child(2){transition-delay:150ms} .home-preview .bmb-hero > *:nth-child(1){transition-delay:0ms} .home-preview .bmb-hero > *:nth-child(2){transition-delay:120ms} .home-preview .bmb-hero > *:nth-child(3){transition-delay:240ms} .home-preview .bmb-hero > *:nth-child(4){transition-delay:360ms} .home-preview .bmb-hero > *:nth-child(5){transition-delay:480ms} .home-preview .bmb-why-visual{transition-delay:150ms} .home-preview .bmb-final-cta > *:nth-child(1){transition-delay:0ms} .home-preview .bmb-final-cta > *:nth-child(2){transition-delay:120ms} .home-preview .bmb-final-cta > *:nth-child(3){transition-delay:240ms} .home-preview .bmb-final-cta > *:nth-child(4){transition-delay:360ms} @media (prefers-reduced-motion:reduce){ .home-preview .bmb-hero > *, .home-preview .bmb-section-head, .home-preview .bmb-award, .home-preview .bmb-awards-partners, .home-preview .bmb-service-card, .home-preview .bmb-why-text, .home-preview .bmb-why-visual, .home-preview .bmb-testimonials-head, .home-preview .bmb-review-summary, .home-preview .bmb-review-card, .home-preview .bmb-blog-card, .home-preview .bmb-final-cta > *, .home-preview .bmb-location-card{ opacity:1;transform:none;transition:none; } } /* ─── 6. WHY BMB (photo + pillar 2-col) ─────────────────────────── */ /* Why BMB — full-bleed wrapper so the ambient blobs can extend past the content max-width. The inner grid keeps the content area at var(--max-home). */ .home-preview .bmb-why{ padding:5rem 2rem; position:relative; overflow:hidden; /* Break out of the parent's max-width so blobs reach edge-to-edge */ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; } /* Ambient gradient blobs — brand-palette accent colors at low opacity, heavily blurred so they read as soft atmospheric warmth rather than distinct shapes. Slow drift animation gives the section subtle life without the user noticing motion. Palette per brand guidelines: #b39555 (gold), #aa7f86 (mauve/rose), #0d2c54 (navy at very low opacity for depth), #5bc2e7 (sky-blue accent). */ .home-preview .bmb-why::before, .home-preview .bmb-why::after{ content:""; position:absolute; border-radius:50%; filter:blur(140px); pointer-events:none; z-index:0; } .home-preview .bmb-why::before{ width:55vw; height:55vw; max-width:780px; max-height:780px; top:-18%; left:-12%; background:radial-gradient(circle, rgba(179, 149, 85, 0.42) 0%, rgba(179, 149, 85, 0) 70%); animation:bmbWhyAmbientA 22s ease-in-out infinite; } .home-preview .bmb-why::after{ width:60vw; height:60vw; max-width:820px; max-height:820px; bottom:-22%; right:-15%; background:radial-gradient(circle, rgba(170, 127, 134, 0.46) 0%, rgba(91, 194, 231, 0.16) 55%, rgba(170, 127, 134, 0) 75%); animation:bmbWhyAmbientB 28s ease-in-out infinite; } @keyframes bmbWhyAmbientA{ 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.04); } } @keyframes bmbWhyAmbientB{ 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -20px) scale(1.06); } } @media (prefers-reduced-motion:reduce){ .home-preview .bmb-why::before, .home-preview .bmb-why::after{ animation:none; } } .home-preview .bmb-why .bmb-section-head{display:none} /* old centered head retired — new head lives in .bmb-why-text */ /* Image removed — text now takes a comfortable reading column centred in the section. */ .home-preview .bmb-why-grid{ display:block; position:relative; z-index:1; max-width:880px; margin:0 auto; } .home-preview .bmb-why-visual{display:none !important} /* Flipped hierarchy to match Services — eyebrow is the dominant section heading; H2 is the quiet supporting subtitle. Eyebrow size bumped to match the new section-head scale. */ .home-preview .bmb-why-text > .bmb-eyebrow{ font-family:var(--sans); font-size:clamp(1.9rem, 3.2vw, 2.7rem); font-weight:700; letter-spacing:.22em; color:var(--navy); /* match the other section eyebrows */ gap:32px; margin:0 auto 1rem; /* The base .bmb-eyebrow rule sets display:inline-flex, which makes the element shrink-to-fit and ignore text-align on its parent. Switch to display:flex with `width:fit-content` + `margin:0 auto` so the eyebrow box centres within .bmb-why-text. Pillars list below stays LTR for the numbered hierarchy. */ display:flex; width:fit-content; justify-content:center; text-align:center; } .home-preview .bmb-why-text > .bmb-eyebrow::before{width:60px} .home-preview .bmb-why-text > h2{ font-size:clamp(1rem, 1.3vw, 1.22rem); font-weight:400; color:var(--muted); letter-spacing:0; line-height:1.5; margin:.4rem auto 1.2rem; text-align:center; max-width:46ch; } .home-preview .bmb-why-intro{ font-family:var(--sans);color:var(--ink-2);line-height:1.7;margin-bottom:1.4rem; } /* Pillars laid out as zigzag cards — odd children sit on the left, even children on the right. Each card is a hoverable surface that lifts and brightens its description on interaction. */ .home-preview .bmb-why-pillars{ list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; row-gap:1.25rem; margin:2.5rem 0 0; padding:0; position:relative; } .home-preview .bmb-why-pillars li{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:flex-start; padding:1.8rem 1.8rem 1.8rem 1.6rem; background:rgba(255, 250, 248, 0.45); border:1px solid rgba(179, 149, 85, 0.10); border-radius:20px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease, border-color .35s ease; /* Slight bias toward the inner edge — odd lifts to the left-near-centre, even to the right-near-centre — keeps the zigzag readable without pulling them all the way to the outer page edges. */ } .home-preview .bmb-why-pillars li:nth-child(odd){ grid-column:1; margin-right:1rem; } .home-preview .bmb-why-pillars li:nth-child(even){ grid-column:2; margin-left:1rem; /* Push the second-column cards down half a row so they nest into the gaps between left-column cards (true editorial zigzag). */ margin-top:3rem; } .home-preview .bmb-why-pillars li:hover{ transform:translateY(-4px) scale(1.02); background:rgba(255, 252, 250, 0.92); border-color:rgba(179, 149, 85, 0.35); box-shadow:0 16px 42px -14px rgba(179, 149, 85, 0.25), 0 4px 14px -6px rgba(170, 127, 134, 0.18); } .home-preview .bmb-why-pillars li:hover .bmb-pillar-num{ color:var(--brand-dk); } .home-preview .bmb-why-pillars li:hover h3{ color:var(--brand-dk); } .home-preview .bmb-why-pillars li:hover p{ color:var(--ink); } .home-preview .bmb-why-pillars .bmb-pillar-num{ font-family:var(--serif); font-size:1.4rem; /* Gold instead of rose — pillar numbers read as editorial "01, 02" markings, breaks the rose monotony with warm contrast. */ color:var(--gold); font-weight:600; line-height:1.15; min-width:1.8rem; margin-top:.45rem; transition:color .35s ease; } /* Headline is dramatically dominant — large display serif so a quick scan picks up "Experience / Hospital-approved / Real credentials / One place every stage" before reading any body text. */ .home-preview .bmb-why-pillars h3{ font-family:var(--font-display, var(--serif)); font-size:clamp(1.85rem, 3vw, 2.5rem); font-weight:500; color:var(--ink); line-height:1.05; letter-spacing:-.015em; margin:0 0 .9rem; transition:color .35s ease; } /* Body is a single punchy line — small, muted, with brand-colored picking out the proof keywords (numbers, hospital names, credentials). Three visual levels: number → headline → fact. */ .home-preview .bmb-why-pillars p{ font-family:var(--sans); font-size:.92rem; color:var(--ink-2); line-height:1.55; margin:0; max-width:48ch; transition:color .35s ease; } .home-preview .bmb-why-pillars p strong{ /* Navy gives the proof-keywords ("25,000", "Mount Alvernia", "Webster-certified", etc.) authority weight — they read as facts rather than another flavour of pink emphasis. */ color:var(--navy); font-weight:600; } @media (max-width:720px){ /* On mobile collapse zigzag into a clean single column */ .home-preview .bmb-why-pillars{grid-template-columns:1fr;column-gap:0} .home-preview .bmb-why-pillars li:nth-child(odd), .home-preview .bmb-why-pillars li:nth-child(even){ grid-column:1;margin:0; } } .home-preview .bmb-why-visual{ aspect-ratio:5/6;background:var(--brand-100) center/cover no-repeat; background-image:url("/img/why-bmb.webp"); border-radius:var(--r-lg); position:relative; } .home-preview .bmb-why-visual::after{ content:"";position:absolute;inset:0;border-radius:var(--r-lg); background:linear-gradient(180deg,transparent 60%,rgba(110,75,80,.25)); } .home-preview .bmb-why-quote{ position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;color:#fff;z-index:2; font-family:var(--serif);font-size:1.05rem;line-height:1.4;font-style:italic; } .home-preview .bmb-why-quote::before{ content:"\201C";font-size:2.4rem;line-height:0;vertical-align:-.4em;margin-right:.2em;opacity:.6; } .home-preview .bmb-why-quote span{ display:block;font-size:.78rem;font-style:normal;letter-spacing:.06em; opacity:.85;margin-top:.5rem;text-transform:uppercase; } /* ─── 7. TESTIMONIALS (summary card + reviewer grid) ────────────── */ .home-preview .bmb-testimonials{ padding:5rem 2rem;background:transparent; } .home-preview .bmb-testimonials > *{max-width:var(--max-home);margin-left:auto;margin-right:auto} /* Desktop: let the testimonials break out of the page's 1180px column (set on .home-main) so the review cards have room to breathe. The section spans the full viewport width; the shell below re-caps to a wider max so the cards aren't cramped. The centred intro head keeps its normal narrow width. */ @media (min-width: 961px){ .home-preview .bmb-testimonials{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } } /* Section head — centred to match every other section on the page, with the "Write us a review" CTA sitting below the lead text. */ .home-preview .bmb-testimonials-head{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:1rem;margin:0 auto 2.4rem;max-width:70ch; } .home-preview .bmb-testimonials-head-text{max-width:60ch;margin:0 auto} /* Flipped hierarchy to match Services — section label is the dominant heading, editorial H2 is the quiet subtitle. */ .home-preview .bmb-testimonials-head-text .bmb-eyebrow{ justify-content:center; margin-bottom:1rem; font-family:var(--sans); font-size:clamp(1.4rem, 2.2vw, 1.95rem); font-weight:700; letter-spacing:.22em; color:var(--brand-dk); gap:32px; } .home-preview .bmb-testimonials-head-text .bmb-eyebrow::before{width:60px} .home-preview .bmb-testimonials-head-text h2{ font-size:clamp(1rem, 1.3vw, 1.22rem); font-weight:400; color:var(--muted); margin:0 0 1rem; letter-spacing:0; line-height:1.5; } .home-preview .bmb-testimonials-head-text .bmb-section-lead{ font-family:var(--sans);font-size:.95rem;color:var(--muted);line-height:1.6;margin:0; } .home-preview .bmb-review-cta{ font-family: var(--sans); font-size:1.02rem;font-weight:500;letter-spacing:.005em; color:var(--brand-dk); padding:.55rem 1.25rem;border:1px solid var(--brand);border-radius:999px; transition:background .15s, color .15s; margin-top:.6rem;align-self:center; } .home-preview .bmb-review-cta:hover{background:var(--brand);color:#fff} .home-preview .bmb-testimonials-shell{ display:grid;grid-template-columns:1fr 3.4fr;gap:1.6rem;align-items:stretch; /* Widen this block past the page's 1180px column so the three review cards have room to breathe (they read cramped at the narrower width). The centred intro head above stays at the normal width. */ max-width:min(1500px, 95vw);margin-left:auto;margin-right:auto; } .home-preview .bmb-review-summary{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.8rem;display:flex;flex-direction:column;justify-content:center;text-align:center; } .home-preview .bmb-review-summary-logo{margin:0 auto 1rem;height:42px;width:auto} .home-preview .bmb-review-summary-name{ font-family:var(--serif);font-size:1.1rem;color:var(--ink);margin-bottom:.4rem; } .home-preview .bmb-review-summary-stars{ color:#e6b04a;font-size:1.2rem;letter-spacing:.1em;margin:0 0 .4rem; } .home-preview .bmb-review-summary-count{ font-family:var(--sans);font-size:.86rem;color:var(--muted);margin:0 0 1.2rem; } .home-preview .bmb-review-summary-btn{ display:inline-block; font-family:var(--serif); font-size:1.02rem;font-weight:600;letter-spacing:-.005em; color:#fff;background:var(--brand); padding:.55rem 1.25rem;border-radius:999px;align-self:center; } .home-preview .bmb-review-summary-btn:hover{background:var(--brand-dk)} .home-preview .bmb-review-track{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem; overflow:visible; } .home-preview .bmb-review-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:1.7rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;margin:0; } .home-preview .bmb-review-card-head{display:flex;align-items:center;gap:.7rem} .home-preview .bmb-review-avatar{ width:38px;height:38px;border-radius:50%; background:var(--avatar-bg, var(--brand-100));color:#fff; display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:1rem; flex-shrink:0; } .home-preview .bmb-review-name{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.2;margin:0} .home-preview .bmb-review-meta{font-family:var(--sans);font-size:.72rem;color:var(--muted);margin:0} .home-preview .bmb-review-stars{color:#e6b04a;font-size:.85rem;letter-spacing:.1em;margin:0} .home-preview .bmb-review-quote{ font-family:var(--sans);font-size:.94rem;color:var(--ink-2);line-height:1.65;margin:0; font-style:normal; } /* ─── 8. BLOG TEASER (3 cards + image headers + see-all) ────────── */ .home-preview .bmb-blog-teaser{ padding:5rem 2rem;max-width:var(--max-home);margin:0 auto; } .home-preview .bmb-blog-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem; } .home-preview .bmb-blog-card{ display:flex;flex-direction:column;text-align:left; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;transition:transform .25s ease, box-shadow .25s ease; text-decoration:none;color:inherit; } .home-preview .bmb-blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .home-preview .bmb-blog-img{ aspect-ratio:16/10;background:var(--brand-100) center/cover no-repeat; display:block; } .home-preview .bmb-blog-card > h3{ font-size:1.1rem;line-height:1.3;margin:.5rem 0 .55rem;padding:0 1.2rem; } .home-preview .bmb-blog-card > p{ font-family:var(--sans);font-size:.86rem;color:var(--ink-2);line-height:1.55; padding:0 1.2rem 1.4rem;margin:0; } .home-preview .bmb-blog-card--more{ display:flex;flex-direction:column;justify-content:center;align-items:flex-start; background:linear-gradient(135deg, var(--brand-100), var(--brand-50)); padding:1.4rem;border-color:var(--brand-200); } .home-preview .bmb-blog-card--more > h3{padding:0;margin:0 0 .4rem;color:var(--brand-dk)} .home-preview .bmb-blog-card--more > p{padding:0;margin:0} .home-preview .bmb-blog-card--more .bmb-blog-img{display:none} /* ─── 9. FINAL CTA — transparent, blends with page-wide gradient ── */ .home-preview .bmb-final-cta{ text-align:center; padding:5rem 2rem; position:relative; /* No coloured wash. The section reads as a banner via the H2's italic-pink accent + the centred CTAs alone — letting the body gradient flow through behind the words avoids a saturated halo competing with the type. */ background:transparent; border:0; } .home-preview .bmb-final-cta > *{max-width:62ch;margin-left:auto;margin-right:auto} .home-preview .bmb-final-cta h2{ font-size:clamp(2rem,4vw,3rem);margin:0 auto 1rem;max-width:20ch; } .home-preview .bmb-final-cta h2 em{color:var(--brand);font-style:italic} .home-preview .bmb-final-cta p{ font-family:var(--sans);color:var(--muted);margin:0 auto 2rem;font-size:1rem; } .home-preview .bmb-final-cta .bmb-hero-ctas{ display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap; } /* ─── 10. LOCATIONS (2-card) ────────────────────────────────────── */ /* Body location cards — mirror the footer's location-card design: white card with hairline-divided HOURS block + contact + Google Map. Outer .bmb-locations is the section container (padding + section head sits inside), inner .bmb-locations-grid holds the 2 cards. */ .home-preview .bmb-locations{ padding:5rem 2rem;max-width:var(--max-home);margin:0 auto; } .home-preview .bmb-locations > .bmb-section-head{ margin-bottom:3rem; } .home-preview .bmb-locations-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem; } .home-preview .bmb-location-card{ background:#fff;border:1px solid var(--line);border-radius:16px; padding:2.4rem 2.4rem 2rem; display:flex;flex-direction:column;gap:1.2rem; box-shadow:0 1px 3px rgba(120,80,90,.05), 0 6px 18px rgba(120,80,90,.06); } .home-preview .bmb-location-card h3{ font-family:var(--serif);font-weight:500;font-size:1.55rem; letter-spacing:-.005em;color:var(--ink);margin:0; } .home-preview .bmb-location-card address{ font-family:var(--sans);font-style:normal;font-size:.96rem; line-height:1.65;color:var(--ink-2);margin:0; } .home-preview .bmb-loc-hours{ font-family:var(--sans);font-size:.92rem;color:var(--ink-2); line-height:1.6;margin:0;padding:1rem 0; border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .home-preview .bmb-loc-hours strong{ font-family:var(--sans);font-size:.74rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dk); display:block;margin-bottom:.4rem; } .home-preview .bmb-loc-contact{ font-family:var(--sans);font-size:.96rem;line-height:1.75;color:var(--ink-2);margin:0; } /* Aligned "Hotline:" / "WhatsApp:" labels — fixed-width inline-block so the numbers after each label line up vertically on the second line. Looks more professional than a free-flow label + number. */ .home-preview .bmb-loc-label{ display:inline-block;min-width:7.5rem;font-weight:400;color:var(--ink-2); font-family:var(--sans);font-size:.94rem;letter-spacing:.005em; } .home-preview .bmb-loc-contact a{ color:var(--brand-dk);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:2px;font-weight:600; font-feature-settings:"tnum" 1; /* tabular numbers — phone digits align */ } .home-preview .bmb-loc-contact a:hover{color:var(--brand)} .home-preview .bmb-loc-map{ margin-top:.6rem;border-radius:12px;overflow:hidden; border:1px solid var(--line); } .home-preview .bmb-loc-map iframe{ width:100%;height:280px;border:0;display:block; filter:grayscale(.15) saturate(.85); } /* ─── Mobile ────────────────────────────────────────────────────── */ @media (max-width:960px){ .home-preview .bmb-why-grid{grid-template-columns:1fr;gap:2rem} .home-preview .bmb-why-visual{order:-1;aspect-ratio:5/4} .home-preview .bmb-service-grid, .home-preview .bmb-timeline, .home-preview .bmb-blog-grid{grid-template-columns:repeat(2,1fr)} .home-preview .bmb-testimonials-shell{grid-template-columns:1fr} .home-preview .bmb-review-track{grid-template-columns:1fr} /* .bmb-locations-grid kept at 2-col here — only collapses at <=720 */ } @media (max-width:720px){ .home-preview .bmb-hero{padding:3rem 1.2rem 2rem} .home-preview .bmb-stats{padding:0 1.2rem;flex-wrap:wrap;gap:0} .home-preview .bmb-stat{padding:.9rem .6rem;flex:1 1 40%} .home-preview .bmb-stat-num{font-size:1.5rem} .home-preview .bmb-stat-divider{display:none} .home-preview .bmb-awards{padding:3rem 1.2rem} .home-preview .bmb-award-divider{display:none} .home-preview .bmb-award{min-width:44%;padding:.5rem} .home-preview .bmb-services, .home-preview .bmb-journey, .home-preview .bmb-why, .home-preview .bmb-testimonials, .home-preview .bmb-blog-teaser, .home-preview .bmb-final-cta, .home-preview .bmb-locations{padding:3.4rem 1.2rem} .home-preview .bmb-service-grid, .home-preview .bmb-timeline, .home-preview .bmb-blog-grid, .home-preview .bmb-review-track, .home-preview .bmb-locations-grid{grid-template-columns:1fr} }