/* ===================================================================== BIOHEAL SUMMER BACKGROUND — full-page static botanical pattern 2026-05-25 (v2: replaces the animated branches with a quieter, scenic summer apothecary garden background) ===================================================================== */ /* --- DISABLE the previous animated overlay --- */ body.cms-home .bh-living-bg, body.cms-home .bh-living-branch, body.cms-home .bh-living-butterfly, body.cms-home .bh-living-bird { display: none !important; } /* --- Skip-link mount fix: don't push the page header down --- Anchor wrapper out of flow, zero size, zero z-index intrusion. The skip link itself stays focusable for keyboards but its 1×1 pointer-event surface no longer intercepts clicks at viewport (0,0). */ #bh-skip-mount { position: absolute !important; top: 0 !important; left: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; z-index: 1 !important; } /* The 1×1 skip-link should ONLY become click-receiving when focused (keyboard nav). Default state = pointer-events: none, so a touch on viewport (0,0) — exactly where the mobile hamburger sits — passes through to the toggle button. */ #bh-skip-mount a[href="#contentarea"] { pointer-events: none; } #bh-skip-mount a[href="#contentarea"]:focus, #bh-skip-mount a[href="#contentarea"]:focus-visible, #bh-skip-mount a[href="#contentarea"].bh-skip-focused { pointer-events: auto; z-index: 99999; } /* --- ALSO disable the header z-index isolation from the old approach so the page returns to its natural stacking --- */ body.cms-home .page-header { isolation: auto; } /* --- The new fixed-position summer background --- Solid cream paper #FAF8F2 base inside the image — matches body bg. Fixed-position so it stays visible while user scrolls (true full-page bg). */ body.cms-home::before { content: ''; position: fixed; inset: 0; background-image: url('/pub/media/wysiwyg/home/summer_bg.webp?v=20260525c3'); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; z-index: 0; pointer-events: none; } @supports not (background-image: url('/pub/media/wysiwyg/home/summer_bg.webp?v=20260525c3')) { body.cms-home::before { background-image: url('/pub/media/wysiwyg/home/summer_bg.jpg?v=20260525c3'); } } /* Page-wrapper sits above the bg. We also strip the opaque body bg so the ::before bg shows through. IMPORTANT: do NOT force position on .page-header — the Bioheal theme uses position: sticky on mobile, and overriding it to relative breaks the sticky header. Stacking context is established via z-index alone. */ body.cms-home { background-color: transparent !important; } body.cms-home .page-wrapper, body.cms-home main, body.cms-home footer.page-footer { position: relative; z-index: 1; } /* Desktop only — on mobile the theme stacks its hamburger nav above the page-header, so an elevated z-index here would mask the open menu. */ @media (min-width: 768px) { body.cms-home .page-header { z-index: 100; } } /* When the mobile drawer opens (Magento adds .nav-before-open / .nav-open to /), make sure no z-index from our bg work overrides the sliding nav overlay. */ html.nav-before-open body.cms-home .page-header, html.nav-open body.cms-home .page-header, body.nav-before-open.cms-home .page-header, body.nav-open.cms-home .page-header { z-index: auto !important; } html.nav-before-open body.cms-home .nav-sections, html.nav-open body.cms-home .nav-sections, body.nav-before-open.cms-home .nav-sections, body.nav-open.cms-home .nav-sections { z-index: 9999 !important; } /* The mobile drawer needs an opaque background of its own — otherwise the Magento .action-overlay backdrop bleeds through and the menu items sit on a grey haze. MOBILE ONLY: desktop keeps the theme's forest-green horizontal nav bar untouched. */ @media (max-width: 767px) { body.cms-home .nav-sections, body.cms-home .nav-sections-items, body.cms-home .nav-sections-item-content, body.cms-home .navigation, body.cms-home .navigation ul, body.cms-home .navigation .level0 { background-color: var(--paper, #FAF8F2) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* The grey backdrop (Magento `.modals-overlay` / `body.nav-open` overlay) should remain only on the visible page strip to the right of the drawer. Our body::before bg overlay should NOT add to that grey — kill it while the menu is open. */ html.nav-open body.cms-home::before, html.nav-before-open body.cms-home::before, body.nav-open.cms-home::before { display: none !important; } /* ========================================================== MOBILE NAV — full custom-style suppression when drawer open While the Magento mobile menu is opened (html.nav-open or .nav-before-open during the transition), strip every homepage- specific override that could create stacking contexts, click interceptors, or extra paint layers. Restore Magento's natural layout so the drawer behaves exactly like it does on every non-cms-home page (where Attila confirms it works fine). ========================================================== */ html.nav-open body.cms-home, html.nav-before-open body.cms-home, body.nav-open.cms-home, body.nav-before-open.cms-home { background-color: transparent !important; } html.nav-open body.cms-home .page-wrapper, html.nav-open body.cms-home main, html.nav-open body.cms-home footer.page-footer, html.nav-before-open body.cms-home .page-wrapper, html.nav-before-open body.cms-home main, html.nav-before-open body.cms-home footer.page-footer, body.nav-open.cms-home .page-wrapper, body.nav-open.cms-home main, body.nav-open.cms-home footer.page-footer { position: static !important; z-index: auto !important; } html.nav-open body.cms-home #bh-skip-mount, html.nav-open body.cms-home .bh-sticky-cta, html.nav-open body.cms-home #bh-sticky-cta, html.nav-before-open body.cms-home #bh-skip-mount, html.nav-before-open body.cms-home .bh-sticky-cta, html.nav-before-open body.cms-home #bh-sticky-cta, body.nav-open.cms-home #bh-skip-mount, body.nav-open.cms-home .bh-sticky-cta, body.nav-open.cms-home #bh-sticky-cta { display: none !important; } /* Strip any backdrop-filter that might create a grey haze layer intercepting touches when the drawer is open. */ html.nav-open body.cms-home *, html.nav-before-open body.cms-home *, body.nav-open.cms-home * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Make all section-level v7 wrappers transparent so the bg runs through the full length of the homepage. Only the cards inside them carry their own (semi-transparent) backdrop. */ body.cms-home main, body.cms-home .page.messages, body.cms-home .columns, body.cms-home .column.main, body.cms-home section, body.cms-home .bh-section, body.cms-home .bh-pillars, body.cms-home .bh-mo-section, body.cms-home .bh-newsletter, body.cms-home .bh-info, body.cms-home .bh-articles-section, body.cms-home .bh-products-section { background-color: transparent !important; } /* ===================================================================== 70% WHITE FILL ON TEXT-BEARING REGIONS — readability over the bg ===================================================================== */ /* Existing cards (already covered) — keep */ body.cms-home .bh-pillar, body.cms-home .bh-pcard, body.cms-home .bh-mo, body.cms-home .bh-article, body.cms-home .bh-info-item, body.cms-home .bh-section.bh-card, body.cms-home .bh-card, body.cms-home .bh-slide, body.cms-home .bh-nl-inner { background-color: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Section-level text wrappers — hero, section headings, info bars, etc. Decorative end-bands (.bh-info-colophon, .bh-colophon) intentionally excluded — they are thin horizontal flourishes, not text-content. */ body.cms-home .bh-hero, body.cms-home .bh-hero-content, body.cms-home .bh-hero-text, body.cms-home .bh-shead, body.cms-home .bh-pillars-head, body.cms-home .bh-section-head, body.cms-home .bh-mo-text, body.cms-home .bh-mo-content, body.cms-home .bh-info, body.cms-home .bh-info-band, body.cms-home .bh-info-list, body.cms-home .bh-nl, body.cms-home .bh-newsletter, body.cms-home .bh-articles-grid, body.cms-home .bh-sticky-cta, body.cms-home #bh-sticky-cta, body.cms-home #cikkek-list, body.cms-home #cikkek-fallback { background-color: rgba(255, 255, 255, 0.70) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 18px; padding: 1.2rem 1.4rem; } /* Decorative end-bands — NO card fill, NO padding-as-card. They stay as thin horizontal flourishes the way v7 designed them. */ body.cms-home .bh-info-colophon, body.cms-home .bh-colophon { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0.6rem 0 !important; } /* text-shadow halo removed — it created a visible glow on Caveat script and italic em accents (e.g. "Limitált · Újra elérhető") that looked washed-out. Section/card backgrounds at 70-85% opacity give enough contrast on their own. */ /* Sticky CTA on mobile — keep its forest-pill look, not white */ body.cms-home .bh-sticky-cta, body.cms-home #bh-sticky-cta { background-color: rgba(255, 255, 255, 0.92) !important; } /* Mobile-only: hero image full-bleed (edge-to-edge, no corner radius) */ @media (max-width: 767px) { body.cms-home .bh-hero { overflow: visible !important; /* allow the figure to break out */ } body.cms-home .bh-hero-media, body.cms-home .bh-cf--hero, body.cms-home figure.bh-hero-media, body.cms-home .bh-hero > picture, body.cms-home .bh-hero figure { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; padding: 0 !important; overflow: hidden; } body.cms-home .bh-hero-media picture, body.cms-home .bh-hero-media img, body.cms-home .bh-hero picture img, body.cms-home .bh-cf-img, body.cms-home .bh-cf-img--1, body.cms-home .bh-cf-img--2, body.cms-home .bh-cf-img--3, body.cms-home .bh-cf-img--4, body.cms-home .bh-cf-img--5, body.cms-home .bh-cf-img--6 { border-radius: 0 !important; width: 100% !important; height: auto; display: block; } } /* Mobile tuning — slightly more opaque cards so text remains readable when the bg is denser per visible viewport. Also disable backdrop-filter on mobile — Chrome Android and iOS Safari render it buggily and can create grey haze layers that intercept the mobile nav drawer. */ @media (max-width: 767px) { body.cms-home::before { opacity: 0.55; /* a little dimmer on small screens */ } body.cms-home .bh-pillar, body.cms-home .bh-pcard, body.cms-home .bh-mo, body.cms-home .bh-article, body.cms-home .bh-info-item, body.cms-home .bh-section.bh-card, body.cms-home .bh-card, body.cms-home .bh-slide, body.cms-home .bh-nl-inner, body.cms-home .bh-hero, body.cms-home .bh-hero-content, body.cms-home .bh-hero-text, body.cms-home .bh-shead, body.cms-home .bh-pillars-head, body.cms-home .bh-section-head, body.cms-home .bh-mo-text, body.cms-home .bh-mo-content, body.cms-home .bh-info, body.cms-home .bh-info-band, body.cms-home .bh-info-list, body.cms-home .bh-nl, body.cms-home .bh-newsletter, body.cms-home .bh-articles-grid { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Slogan readability bump on mobile (newsletter sub-headline) */ body.cms-home .bh-nl-form-sub, body.cms-home .bh-nl-lead-p, body.cms-home .bh-nl p { font-size: 1rem !important; line-height: 1.55 !important; } body.cms-home .bh-nl-form-label, body.cms-home .bh-nl h2, body.cms-home .bh-nl-h h2 { font-size: 1.5rem !important; } } /* Respect reduced-motion (this CSS has no animations, but the dependent bioheal-living-bg.js may still try to spawn animations — guard) */ @media (prefers-reduced-motion: reduce) { body.cms-home .bh-living-butterfly, body.cms-home .bh-living-bird { display: none !important; } }