/* ========================================================================== Gallery hero — scroll-linked parallax inside a tall track. The hero is position:sticky + 100vh tall so it fills the viewport while the user scrolls through (track height − viewport height) ≈ one viewport of scroll — no gap below the image until the pan completes. ========================================================================== */ .lbv-gallery-hero-track { min-height: 200vh; display: flow-root; } .lbv-gallery-hero-track .lbv-hero--gallery { position: sticky; top: 0; height: 100vh; min-height: unset; overflow: hidden; } /* Media clips the image; captions live outside the media so they are unaffected */ .lbv-gallery-hero-track .lbv-hero--gallery .lbv-hero__media { overflow: hidden; } .lbv-gallery-hero-track .lbv-hero--gallery .lbv-hero__media img { width: 100%; height: auto; object-fit: unset; display: block; will-change: transform; } @media (max-width: 720px) { /* No sticky track / image pan on small screens */ .lbv-gallery-hero-track { min-height: 0; } .lbv-gallery-hero-track .lbv-hero--gallery { position: relative; top: auto; height: auto; min-height: min(78vh, 720px); overflow: hidden; } .lbv-gallery-hero-track .lbv-hero--gallery .lbv-hero__media img { object-fit: contain; object-position: left; will-change: auto; transform: none !important; } .lbv-hero--gallery .lbv-hero__caption--top { display: none; } } @media (prefers-reduced-motion: reduce) { .lbv-gallery-hero-track { min-height: 0; } .lbv-gallery-hero-track .lbv-hero--gallery { position: relative; top: auto; } .page-template-template-gallery.js-lbv-gallery-gate-post-hero #fragrances.is-gallery-post-hero-revealed { transition: none; } } /* Discover Mother — scroll target; disable scroll anchoring jump when section is removed */ #discover-mother { scroll-margin-top: clamp(96px, calc(24px + 1.44rem + 5.5rem), 200px); overflow-anchor: none; } /* * Exit animation: collapse vertical padding/margin with max-height so layout * doesn’t “jump” when `hidden` removes the box (padding-block alone was ~120px). * Timer in gallery-discover.js should match transition duration + buffer. */ @media (prefers-reduced-motion: no-preference) { #discover-mother.lbv-discover--exiting { overflow: hidden; opacity: 0; padding-block: 0; margin-block: 0; pointer-events: none; overflow-anchor: none; transition: max-height 0.6s var(--ease), opacity 0.6s var(--ease), padding-block 0.6s var(--ease), margin-block 0.6s var(--ease); } } /* Post-hero (#fragrances): hidden until hero image parallax completes (see gallery-hero-parallax.js). * Selectors use one compound class on a single element; WP puts page-template-* on body and the * inline script adds js-lbv-gallery-gate-post-hero on , so these rules do not match and * the section stays visible—preserving current scroll/UX. Intentionally left as-is (non-breaking). */ .page-template-template-gallery.js-lbv-gallery-gate-post-hero #fragrances:not(.is-gallery-post-hero-revealed) { opacity: 0; visibility: hidden; pointer-events: none; } .page-template-template-gallery.js-lbv-gallery-gate-post-hero #fragrances.is-gallery-post-hero-revealed { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.75s var(--ease); } /* ========================================================================== The Gallery — page-specific layout. Mother purchase block + the rhythm between sections. ========================================================================== */ /* ---------- Gallery hero overlay ---------- Two-caption composition layered onto the photograph: • top-right: MOTHER · sub · DISCOVER button (dark ink — over bright wall) • bottom-center: The Gallery · A study in scent. · sub (white — over the default tone-dark bottom-gradient veil from patterns.css). */ .lbv-hero--gallery { display: block; position: relative; min-height: min(86vh, 880px); overflow: hidden; isolation: isolate; } /* Tone-dark stack shadows come from patterns.css; Gallery captions stay clean. */ .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__display, .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__sub, .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__eyebrow { text-shadow: none; } /* Both captions are absolutely positioned over the media. */ .lbv-hero--gallery .lbv-hero__caption { position: absolute; inset-inline: 0; width: 100%; padding: 0; z-index: 1; } .lbv-hero--gallery .lbv-hero__caption--top { top: clamp(40px, 12vw, 208px); } .lbv-hero--gallery .lbv-hero__caption--bottom { bottom: clamp(40px, 13vw, 250px); } @media (max-width: 720px) { .lbv-hero--gallery .lbv-hero__caption--bottom { bottom: clamp(40px, 20vw, 250px); } .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__eyebrow, .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__display, .lbv-hero.lbv-hero--gallery.is-tone-dark .lbv-hero__caption .lbv-stack__sub { text-shadow: 1px 1px 1px #11111170; } } /* Top-right column — narrow, center-aligned text, pushed to the right. */ .lbv-hero--gallery .lbv-hero__caption--top .lbv-container { display: flex; justify-content: flex-end; padding-right: 0; } .lbv-hero--gallery .lbv-hero__column { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(440px, 100%); } .lbv-hero--gallery .lbv-hero__column .lbv-stack { align-items: center; text-align: center; gap: 16px; margin: 0; } .lbv-hero--gallery .lbv-hero__column .lbv-stack__display { text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem); margin: 0; } .lbv-hero--gallery .lbv-hero__column .lbv-stack__sub { font-style: normal; font-size: var(--fs-lead); max-width: none; margin: 0; } .lbv-hero--gallery .lbv-hero__column .lbv-hero__cta { margin: 28px 0 0; } /* The top-right stack sits over the bright wall, so override the inherited `is-tone-dark` whites back to dark ink. Selector matches the specificity of `.lbv-hero.is-tone-dark .lbv-hero__caption .lbv-stack__*` so source order in the cascade resolves the tie in our favour. */ .lbv-hero.lbv-hero--gallery .lbv-hero__caption--top .lbv-stack__display { color: var(--ink); } .lbv-hero.lbv-hero--gallery .lbv-hero__caption--top .lbv-stack__sub { color: var(--ink); } .lbv-hero.lbv-hero--gallery .lbv-hero__caption--top .btn--ink { color: var(--ink); border-color: var(--ink); } .lbv-hero.lbv-hero--gallery .lbv-hero__caption--top .btn--ink:hover { background: var(--ink); color: var(--ivory); } /* Bottom-center caption — standard centred stack. Colour comes from `.lbv-hero.is-tone-dark` rules in patterns.css. */ .lbv-hero--gallery .lbv-hero__caption--bottom .lbv-stack { text-align: center; align-items: center; margin-inline: auto; } /* Bottom caption: no text-shadow — readability from photography + veil only (House page keeps shadows on its own hero track in house.css). */ /* Top caption hides below 720px in the gallery hero block above; mother / discover styles below apply at all viewports. (A stray @media here previously nested the rest of this file under max-width:720px and broke desktop.) */ .lbv-mother__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: center; } .lbv-mother__media { display: flex; flex-direction: column; gap: clamp(12px, 2vw, 18px); margin: 0; } .lbv-mother__media-main { position: relative; overflow: visible; } .lbv-mother__main-expand { position: absolute; inset: 0; margin: 0; padding: 0; border: none; border-radius: 0; cursor: zoom-in; background: transparent; color: transparent; } .lbv-mother__main-expand:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 4px; } .lbv-mother__main-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; /* box-shadow: 0 2px 6px rgba(40, 24, 6, 0.07), 0 8px 28px rgba(40, 24, 6, 0.13), 0 28px 72px rgba(40, 24, 6, 0.10); */ } /* Collective & legacy: lone hero image directly inside figure */ .lbv-mother__media > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; box-shadow: 0 2px 6px rgba(40, 24, 6, 0.07), 0 8px 28px rgba(40, 24, 6, 0.13), 0 28px 72px rgba(40, 24, 6, 0.10); } /* Thumbnail strip — below main hero crop */ .lbv-mother__thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: clamp(8px, 1.5vw, 12px); } .lbv-mother__thumbs-item { flex: 1 1 0; min-width: 0; margin: 0; } .lbv-mother__thumb { display: block; width: 100%; margin: 0; padding: 0; border: 2px solid transparent; border-radius: 2px; cursor: pointer; background: var(--cream); overflow: visible; aspect-ratio: 4 / 5; transition: border-color var(--dur-fast, 0.2s) var(--ease, ease); } .lbv-mother__thumb:hover { border-color: rgba(17, 17, 17, 0.18); } .lbv-mother__thumb:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 2px; } .lbv-mother__thumb.is-selected { border-color: var(--gold-warm); } .lbv-mother__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; box-shadow: 0 1px 4px rgba(40, 24, 6, 0.06), 0 4px 14px rgba(40, 24, 6, 0.10), 0 14px 36px rgba(40, 24, 6, 0.08); transition: box-shadow var(--dur-fast, 0.2s) var(--ease, ease); } .lbv-mother__thumb.is-selected img { box-shadow: 0 2px 8px rgba(40, 24, 6, 0.10), 0 6px 20px rgba(40, 24, 6, 0.14), 0 18px 44px rgba(40, 24, 6, 0.11); } /* ---------- Mother gallery — fullscreen lightbox ---------- */ .lbv-mother-lightbox { position: fixed; inset: 0; z-index: calc(var(--z-drawer, 1100) + 100); display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 28px); } .lbv-mother-lightbox[hidden] { display: none !important; } .lbv-mother-lightbox__backdrop { position: absolute; inset: 0; margin: 0; padding: 0; border: none; cursor: zoom-out; background: rgba(10, 10, 10, 0.94); } .lbv-mother-lightbox__shell { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(6px, 2vw, 20px); width: min(96vw, 1320px); max-height: min(92vh, 1100px); pointer-events: none; } .lbv-mother-lightbox__shell > * { pointer-events: auto; } .lbv-mother-lightbox__img { width: 100%; max-height: min(88vh, 1000px); height: auto; object-fit: contain; justify-self: center; align-self: center; } .lbv-mother-lightbox__close { position: fixed; top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; cursor: pointer; background: rgba(8, 8, 8, 0.65); color: var(--ivory); transition: background 0.2s ease, border-color 0.2s ease; } .lbv-mother-lightbox__close:hover { background: rgba(24, 24, 24, 0.85); border-color: rgba(212, 175, 55, 0.55); } .lbv-mother-lightbox__close:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 3px; } .lbv-mother-lightbox__nav { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; cursor: pointer; background: rgba(8, 8, 8, 0.55); color: rgba(255, 255, 255, 0.92); flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .lbv-mother-lightbox__nav:hover { background: rgba(28, 28, 28, 0.85); border-color: rgba(212, 175, 55, 0.45); color: var(--ivory); } .lbv-mother-lightbox__nav:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 3px; } @media (max-width: 540px) { .lbv-mother-lightbox__shell { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px; width: 100%; max-height: none; } .lbv-mother-lightbox__img { grid-column: 1 / -1; grid-row: 1; max-height: min(68vh, 620px); } .lbv-mother-lightbox__nav--prev { grid-column: 1; grid-row: 2; justify-self: start; } .lbv-mother-lightbox__nav--next { grid-column: 2; grid-row: 2; justify-self: end; } } /* ---------- Commercial film — full-bleed scroll-triggered video (between Mother and Extension) ---------- */ .lbv-commercial-video { position: relative; width: 100%; overflow: hidden; background: var(--ink); /* 16:9 on wide; collapses to 9:16 portrait on mobile */ aspect-ratio: 16 / 9; line-height: 0; } .lbv-commercial-video__el { display: block; width: 100%; height: 100%; object-fit: cover; /* fp-engine pattern: no native controls, fills container */ } @media (max-width: 720px) { .lbv-commercial-video { aspect-ratio: 9 / 16; } } @media (prefers-reduced-motion: reduce) { /* Show static first frame; JS never calls play() under reduced-motion */ .lbv-commercial-video__el { pointer-events: none; } } /* Loading spinner — centred gold arc, same pattern as collective How It's Made */ .lbv-commercial-video__loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; background: rgba(17, 17, 17, 0.28); transition: opacity 0.3s ease; } .lbv-commercial-video__loader[hidden] { display: none; } .lbv-commercial-video__spinner { width: 44px; height: 44px; animation: lbv-gallery-spin 1.1s linear infinite; } @keyframes lbv-gallery-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lbv-commercial-video__spinner { animation: none; } } /* Controls — minimal icon row pinned to bottom-right */ .lbv-commercial-video__controls { position: absolute; bottom: clamp(14px, 3vw, 24px); right: clamp(14px, 3vw, 24px); display: flex; gap: 8px; z-index: 2; } .lbv-vid-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: rgba(0, 0, 0, 0.38); color: rgba(255, 255, 255, 0.88); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lbv-vid-btn:hover { background: rgba(0, 0, 0, 0.62); border-color: rgba(255, 255, 255, 0.5); color: #fff; } .lbv-vid-btn:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 3px; } .lbv-vid-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; } /* Show muted icon when muted (default), hide it when unmuted */ .lbv-vid-btn--mute .lbv-vid-icon--unmuted { display: none; } .lbv-vid-btn--mute[data-muted="false"] .lbv-vid-icon--muted { display: none; } .lbv-vid-btn--mute[data-muted="false"] .lbv-vid-icon--unmuted { display: block; } /* Show pause icon while playing (default), play icon while paused */ .lbv-vid-btn--play .lbv-vid-icon--play { display: none; } .lbv-vid-btn--play[data-paused="true"] .lbv-vid-icon--pause { display: none; } .lbv-vid-btn--play[data-paused="true"] .lbv-vid-icon--play { display: block; } /* ---------- Image depth — editorial figures (warm shadow stack, matches House) ---------- */ .page-template-template-gallery .lbv-block__media img, .lbv-discover__composition-row .lbv-discover__media img { box-shadow: 0 2px 6px rgba(40, 24, 6, 0.07), 0 8px 28px rgba(40, 24, 6, 0.13), 0 28px 72px rgba(40, 24, 6, 0.10); } .lbv-discover__composition-row .lbv-discover__media { margin: 0; } .lbv-mother__display { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400; margin: 14px 0 8px; line-height: 1.05; } .lbv-mother__sub { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--ink-soft); margin: 0 0 28px; } .lbv-mother__notes { display: grid; gap: 8px; margin: 0 0 28px; } .lbv-mother__notes > div { display: grid; /* Was fixed 96px — labels like “Composition” + eyebrow tracking overflowed into
*/ grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(16px, 4vw, 28px); align-items: baseline; border-bottom: 1px solid var(--rule); padding-block: 12px; } .lbv-mother__notes dt { font-family: var(--font-text); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow); color: var(--ink-soft); white-space: nowrap; } .lbv-mother__notes dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.02em; min-width: 0; } @media (max-width: 520px) { .lbv-mother__notes > div { grid-template-columns: 1fr; row-gap: 6px; align-items: start; } .lbv-mother__notes dt { white-space: normal; } } .lbv-mother__discover { margin: 14px 0 36px; } .lbv-mother__legacy { display: flex; flex-direction: column; gap: 8px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--rule-gold); max-width: 420px; } .lbv-mother__legacy-line { font-family: var(--font-display); font-style: italic; color: var(--gold-warm); font-size: 1.125rem; } @media (max-width: 900px) { .lbv-mother__grid { grid-template-columns: 1fr; gap: 36px; } } /* ---------- Discover Mother — composition cover (full-bleed image + overlay copy) ---------- */ .lbv-discover__composition-cover { position: relative; overflow: hidden; min-height: 100vh; } .lbv-discover__cover-media { margin: 0; width: 100%; height: 100%; position: absolute; inset: 0; } .lbv-discover__cover-media img { width: 106%; height: 106%; object-fit: cover; object-position: center; display: block; will-change: transform; transition: transform 0.08s linear; } /* Gradient rises from the bottom where the notes sit */ .lbv-discover__composition-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.2) 45%, transparent 70%); pointer-events: none; } /* Footer bar — pinned to the bottom, full width */ .lbv-discover__cover-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; padding: 0 clamp(24px, 5vw, 72px) clamp(32px, 5vw, 56px); color: var(--ivory); } .lbv-discover__cover-label { font-family: var(--font-text); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow); color: rgba(255,255,255,0.55); margin: 0 0 12px; } .lbv-discover__cover-rule { border: none; border-top: 1px solid var(--gold-warm); margin: 0 0 24px; opacity: 0.6; } /* Three notes spread left · center · right */ .lbv-discover__cover-notes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 clamp(16px, 4vw, 48px); margin: 0; } .lbv-discover__cover-notes .lbv-notes__row { display: flex; flex-direction: column; gap: 6px; border: none; padding: 0; } .lbv-discover__cover-notes .lbv-notes__row:nth-child(2) { text-align: center; } .lbv-discover__cover-notes .lbv-notes__row:nth-child(3) { text-align: right; } .lbv-discover__cover-notes dt { font-family: var(--font-text); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-size: var(--fs-eyebrow); color: var(--gold-warm); } .lbv-discover__cover-notes dd { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(0.9rem, 1.2vw, 1.0625rem); color: rgba(255,255,255,0.85); letter-spacing: 0.02em; } /* Staggered entry */ @media (prefers-reduced-motion: no-preference) { .lbv-discover__cover-label, .lbv-discover__cover-rule, .lbv-discover__cover-notes .lbv-notes__row { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } .lbv-discover__cover-label { transition-delay: 0.05s; } .lbv-discover__cover-rule { transition-delay: 0.2s; } .lbv-discover__cover-notes .lbv-notes__row:nth-child(1) { transition-delay: 0.35s; } .lbv-discover__cover-notes .lbv-notes__row:nth-child(2) { transition-delay: 0.5s; } .lbv-discover__cover-notes .lbv-notes__row:nth-child(3) { transition-delay: 0.65s; } .lbv-discover__composition-cover.notes-visible .lbv-discover__cover-label, .lbv-discover__composition-cover.notes-visible .lbv-discover__cover-rule, .lbv-discover__composition-cover.notes-visible .lbv-discover__cover-notes .lbv-notes__row { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .lbv-discover__composition-cover { min-height: 80vh; } .lbv-discover__cover-copy { padding: 40px 24px; } } /* ---------- Discover Mother — composition row ---------- */ .lbv-discover__composition-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .lbv-discover__composition-row .lbv-discover__media--bleed { margin: 0; } .lbv-discover__composition-row .lbv-discover__media--bleed img { width: 100%; height: auto; display: block; } @media (max-width: 720px) { .lbv-discover__composition-row { grid-template-columns: 1fr; } } /* ---------- Discover Mother — Experience / Wearing overlaid on images ---------- */ .lbv-discover__composition-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 36px); align-items: start; } .lbv-discover__composition-pair > .lbv-discover__composition-row--overlay { min-width: 0; } @media (max-width: 720px) { .lbv-discover__composition-pair { grid-template-columns: 1fr; } } .lbv-discover__composition-row--overlay { grid-template-columns: 1fr; gap: 0; } .lbv-discover__media--overlay { position: relative; margin: 0; /* Allow editorial box-shadow on img (matches .lbv-block__media); hidden clips it */ overflow: visible; } .lbv-discover__media--overlay img { width: 100%; height: auto; display: block; } .lbv-discover__media--overlay .lbv-discover__overlay { position: absolute; inset: 0; margin: 0; display: flex; justify-content: center; align-items: top; gap: clamp(14px, 3vw, 22px); padding: clamp(28px, 6vw, 56px); text-align: center; box-sizing: border-box; background: linear-gradient( to top, rgba(17, 17, 17, 0.72) 0%, rgba(17, 17, 17, 0.35) 42%, rgba(17, 17, 17, 0.12) 100% ); } /* Shared overlay copy stack (Experience + Wearing) */ .lbv-discover__media--overlay .lbv-discover__overlay-stack { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 600px; text-align: center; } .lbv-discover__media--overlay .lbv-eyebrow { color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4); } .lbv-discover__media--overlay .lbv-discover__wearing-line { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--gold-warm); text-shadow: 0 2px 24px rgba(0, 0, 0, 1); } .lbv-discover__media--overlay .lbv-discover__wearing-line em { font-style: italic; } /* ---------- Discover Mother — collapsed / expanded ---------- */ [data-lbv-discover] .lbv-discover__body { overflow: hidden; max-height: 6000px; /* large enough to fit the full expanded content */ transition: max-height 0.6s ease, opacity 0.4s ease; opacity: 1; } [data-lbv-discover][data-collapsed="true"] .lbv-discover__body { max-height: 0; opacity: 0; } #discover-mother-body { overflow: visible; }