/* ========================================================================== site.css — static-site behavior Replaces the interactive behavior that the removed Next.js/React runtime used to provide. Hand-written, no build step. ========================================================================== */ /* --- Mobile mega-menu: slides in from the right with a fading backdrop and staggered sections — replicates the live site's framer-motion open animation, using pure CSS transitions/keyframes (no JS library). ------ */ .mega-menu-backdrop { display: block; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } body.menu-open .mega-menu-backdrop { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .mega-menu-panel { display: flex; transform: translateX(100%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s linear 0.32s; } body.menu-open .mega-menu-panel { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1); } body.menu-open { overflow: hidden; } /* staggered fade-up of each section as the panel arrives */ body.menu-open .mega-menu-section { animation: lsm-menu-section-in 0.45s ease both; } body.menu-open .mega-menu-section:nth-child(1) { animation-delay: 0.08s; } body.menu-open .mega-menu-section:nth-child(2) { animation-delay: 0.13s; } body.menu-open .mega-menu-section:nth-child(3) { animation-delay: 0.18s; } body.menu-open .mega-menu-section:nth-child(4) { animation-delay: 0.23s; } body.menu-open .mega-menu-section:nth-child(5) { animation-delay: 0.28s; } body.menu-open .mega-menu-section:nth-child(6) { animation-delay: 0.33s; } body.menu-open .mega-menu-section:nth-child(7) { animation-delay: 0.38s; } body.menu-open .mega-menu-section:nth-child(8) { animation-delay: 0.43s; } @keyframes lsm-menu-section-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* respect users who prefer reduced motion: show instantly, no animation */ @media (prefers-reduced-motion: reduce) { .mega-menu-backdrop, .mega-menu-panel { transition: opacity 0s, transform 0s; } body.menu-open .mega-menu-section { animation: none; } } /* --- FAQ accordion -------------------------------------------------------- Progressive enhancement: answers are only collapsed when JS is active (the `.js` class is added to before paint). With JS disabled every answer stays visible, so the page is still fully readable. */ .js .faq-answer-wrapper { display: none; } .js .faq-item.is-open .faq-answer-wrapper { display: block; } /* --- FAQ category tabs ---------------------------------------------------- app.js marks the non-active categories with data-faq-hidden="true". */ .js .faq-section[data-faq-hidden="true"] { display: none; } /* --- Announcement bar dismissal ------------------------------------------ */ .announcement-bar[hidden] { display: none; } /* --- pathway boxes: original revealed on JS-driven hover class; replicate with a pure-CSS :hover so the descriptions show without the React JS. */ .pathway-boxes__box:hover .pathway-boxes__overlay { background: hsla(0, 0%, 100%, 0.6); } .pathway-boxes__box:hover .pathway-boxes__description { max-height: 200px; opacity: 1; } .pathway-boxes__box:hover .pathway-boxes__title { transform: translateY(-5px); } /* ========================================================================== Scroll reveal — sections, headings, etc. fade in and rise as they enter the viewport, re-creating the live site's framer-motion "whileInView" animation. Elements are marked data-lsm-reveal; site.js adds .lsm-in via an IntersectionObserver (once per element). Hidden ONLY while JS is active (.js, set in before paint, so there is no flash). If site.js never runs, a failsafe adds .lsm-no-anim after 2.5s to reveal everything — content can never get stuck hidden. ========================================================================== */ .js [data-lsm-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.33, 1, 0.68, 1); } .js [data-lsm-reveal].lsm-in { opacity: 1; transform: none; } .lsm-no-anim [data-lsm-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .js [data-lsm-reveal] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Surrogacy-process diagram — interactive step circles + hover/click popups. The diagram is now the real inline SVG (matching the live site): each step has a highlight circle that fills brand color BEHIND its icon on hover (driven by site.js), with a transparent .step-circle hit-target on top. The popup is styled + positioned (per-step transform) by the bundle CSS. ========================================================================== */ .surrogacy-process__diagram { position: relative; overflow: visible; } .surrogacy-process__diagram .step-circle { cursor: pointer; } /* Match the live site's rendered diagram width (~800px) so the right/left popups land in the same place (the inlined SVG would otherwise stretch to 960px). */ .surrogacy-process__diagram > svg { max-width: 800px; } /* The bundle's popupFadeIn keyframe hard-codes transform: translate(-50%,-100%), which overrides the per-step positioning transform mid-animation and makes the popup jump then snap. Redefine it as opacity-only (this file loads last, so it wins) so the per-step transform stays applied throughout — no glitch. */ @keyframes popupFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Hero banner background video (replaces the static bannerbg image). Inherits position:fixed/full-size/z-index:0 from .banner .banner__fixed-bg. */ .banner__video-bg { object-fit: cover; background: var(--brand-main, #f3e9e4); } /* Announcement bar — the top strip is back (in normal flow, so it scrolls away with the page); the sticky header reverts to sliding in on scroll. The bar keeps the sticky header's dark background; its "Reserve Your Membership" link is restyled as a centered, white-outlined box with white letters — mirroring the sticky header's .sticky-header__cta--left button (same style, not identical). */ .announcement-bar__message { margin: 0; } .announcement-bar__link { display: inline-block; margin-left: 0; padding: 8px 16px; color: #fff; text-decoration: none; border: 1px solid hsla(0, 0%, 100%, 0.5); border-radius: 2px; font-family: var(--font-family-heading); font-size: 0.75rem; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .announcement-bar__link:hover { color: #fff; background: hsla(0, 0%, 100%, 0.12); border-color: #fff; text-decoration: none; } /* Center the card content (title + photo + description) vertically within the tall screening-carousel cards instead of top-aligning it. */ .screening-carousel__card { justify-content: center; } /* Surrogates carousel — per-step background images. The carousel JS swaps the section's data-bg-image as you move through the slides; the bundle CSS only ships :before rules for the original shutterstock photos, so add ours so the faded background changes per step too (same behavior as intended-parents). url() is relative to this file (assets/), hence ../images/. */ .screening-carousel[data-bg-image*="surrogate-step-1"]:before { background-image: url(../images/surrogate-step-1.webp); } .screening-carousel[data-bg-image*="surrogate-step-2"]:before { background-image: url(../images/surrogate-step-2.webp); } .screening-carousel[data-bg-image*="surrogate-step-3"]:before { background-image: url(../images/surrogate-step-3.webp); } .screening-carousel[data-bg-image*="surrogate-step-4"]:before { background-image: url(../images/surrogate-step-4.webp); } .screening-carousel[data-bg-image*="surrogate-step-5"]:before { background-image: url(../images/surrogate-step-5.webp); } .screening-carousel[data-bg-image*="surrogate-step-6"]:before { background-image: url(../images/surrogate-step-6.webp); } .screening-carousel[data-bg-image*="surrogate-step-7"]:before { background-image: url(../images/surrogate-step-7.webp); } .screening-carousel[data-bg-image*="surrogate-step-8"]:before { background-image: url(../images/surrogate-step-8.webp); } /* Collapsible section toggle (e.g. the "Independent vs. Agency" comparison) — a "+" circle (styled like .how-it-works__card-toggle-icon) expands/collapses the content; site.js drives it. Default collapsed (only while JS is active). */ .lux-collapse__trigger { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; cursor: pointer; text-align: center; } .lux-collapse__heading { width: 100%; text-align: center; } .lux-collapse__toggle { display: inline-flex; align-items: center; gap: 12px; } .lux-collapse__label { font-family: var(--font-family-title, "new-spirit"), sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem; color: var(--brand-ink, #494646); } .lux-collapse__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-accent, #d4acac); color: var(--color-white, #fff); font-size: 24px; font-weight: var(--font-weight-bold, 700); line-height: 1; transition: transform 0.3s ease, background-color 0.3s ease; } .lux-collapse__trigger:hover .lux-collapse__icon { transform: scale(1.1); } .lux-collapse__content { display: flex; flex-direction: column; align-items: center; } .js .lux-collapse__content { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } /* The subtitle is a

, which the bundle left-aligns inside full-content; re-center it (and any heading paragraph) within the collapse header. */ .luxury-section--full .luxury-section__full-content .lux-collapse__heading p { text-align: center; }