/* ============================================================ §REVEALBG — let the §BGLEAP cream+lattice+glow show THROUGH the big beige/white surfaces, SITE-WIDE (Experience Leap, 2026-06-15). Approach: "Hybrid best, HARDENED" (Hybrid spine + AA patches + low-alpha band tints where muted text can land). APPEND LAST to bioheal-brand.css (loads everywhere) so it wins by SOURCE ORDER over the same-/lower-specificity opaque fills. ADDITIVE. Excludes: checkout / cart / account (dense forms stay clean), footer (z:-1 reveal layer), header chrome, dark/forest bands, white-bg JPG stage cores. WCAG AA: surfaces stay light (L*~93-97) so ink #17231E ~12:1, ink-soft ~9:1; muted is HARDENED to #5E6E63 on revealed cards (>=4.6:1); green/forest CTAs are solid + UNTOUCHED. Rollback = strip from this "§REVEALBG" marker to EOF. ============================================================ */ /* 0) Reusable tokens + the dense-flow guard values. */ :root{ --bh-reveal-glass:rgba(255,255,255,.76); /* text-card frosted fill (was .72; +AA) */ --bh-reveal-glass-2:rgba(250,248,242,.80); /* paper-toned product-story card */ --bh-reveal-blur:blur(3px) saturate(1.04); /* small, reserved to text cards + PDP */ --bh-reveal-muted:#5E6E63; /* hardened muted (vs #6B7A70) for sub-labels on revealed cards */ /* low-alpha band tints — keep a hint of fill so stray muted text never lands on raw lattice nodes */ --bh-band-paper:rgba(250,248,242,.30); /* paper #FAF8F2 */ --bh-band-paper2:rgba(244,241,232,.32); /* paper2 #F4F1E8 */ --bh-band-mist:rgba(245,248,245,.28); /* mist #F5F8F5 */ --bh-band-sage:rgba(238,245,239,.32); /* sage50 #EEF5EF */ } /* graceful fallback where backdrop-filter is unsupported: opaque-up so text never sits on raw lattice. */ @supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ :root{ --bh-reveal-glass:rgba(255,255,255,.92); --bh-reveal-glass-2:rgba(250,248,242,.93); } } /* ---- T1: #1 BLOCKER — site-wide content column. Stop painting opaque paper so the body texture shows on EVERY page (home/PLP/PDP/CMS/account profile). `main` holds no direct text -> zero readability cost. Footer-reveal box-shadow (brand.css L147) is a SEPARATE rule and survives; html/.page-wrapper stay bg-less per the footer-reveal invariants (L128-148). ---- */ body:not(.checkout-index-index):not(.checkout-cart-index):not(.checkout-onepage-success):not(.customer-account-login):not(.customer-account-create):not(.customer-account-index):not(.customer-account-edit) .page-wrapper > main{ background: transparent !important; } /* ---- T2: full-bleed SECTION bands -> a FAINT low-alpha tint of their own hue (NOT fully transparent). Texture floods the band, but a stray muted label on a band still has a light substrate -> never the 3.32:1 raw-node fail. NO blur (bands are huge; blur would be a GPU tax). ---- */ /* homepage bands (bioheal-home.css). Match both cms-index-index AND cms-home. */ .cms-index-index .bh-hero, .cms-home .bh-hero, .cms-index-index .bh-edu, .cms-home .bh-edu, .cms-index-index .bh-ritual, .cms-home .bh-ritual, .cms-index-index .bh-slogan, .cms-home .bh-slogan, .cms-index-index .bh-trust, .cms-home .bh-trust, .cms-index-index .bh-gem, .cms-home .bh-gem, .cms-index-index .bh-final, .cms-home .bh-final{ background: var(--bh-band-paper) !important; } .cms-index-index .bh-stats, .cms-home .bh-stats, .cms-index-index .bh-pillars, .cms-home .bh-pillars, .cms-index-index .bh-nl, .cms-home .bh-nl{ background: var(--bh-band-paper2) !important; } .cms-index-index .bh-focus, .cms-home .bh-focus, .cms-index-index .bh-band, .cms-home .bh-band, .cms-index-index .bh-d3, .cms-home .bh-d3{ background: var(--bh-band-mist) !important; } .cms-index-index .bh-3dnote, .cms-home .bh-3dnote, .cms-index-index .bh-offer, .cms-home .bh-offer{ background: var(--bh-band-sage) !important; } /* summer landing bands (bioheal-summer26.css, .bh-home--summer26) */ .bh-home--summer26 .bh-su-offerbar, .bh-home--summer26 .bh-su-pick, .bh-home--summer26 .bh-su-stage--paper{ background: var(--bh-band-paper) !important; } .bh-home--summer26 .bh-su-mission, .bh-home--summer26 .bh-su-packs{ background: var(--bh-band-paper2) !important; } .bh-home--summer26 .bh-su-stack, .bh-home--summer26 .bh-su-stage--mist{ background: var(--bh-band-mist) !important; } .bh-home--summer26 .bh-su-stage--sage{ background: var(--bh-band-sage) !important; } .bh-home--summer26 .bh-su-stage--white, .bh-home--summer26 .bh-su-proof, .bh-home--summer26 .bh-su-pillars{ background: var(--bh-band-paper) !important; } /* pure-white -> faint paper tint */ /* generic dormant section utilities, where used as big wrappers */ .bh-surface-0, .bh-surface-1{ background: var(--bh-band-paper) !important; } .bh-surface-3{ background: var(--bh-band-sage) !important; } /* Seasonal category hero is text-bearing -> keep a light veil, protect gold zone */ .catalog-category-view .bh-cat-hero--summer{ background: linear-gradient(120deg, rgba(238,245,239,.80), rgba(245,248,245,.72) 55%, rgba(251,241,217,.82)) !important; } /* NOTE: dark/forest bands left OPAQUE on purpose: .bh-partner #034C3C, .bh-su-group --bh-forest, .bh-su-final::after photo wash, footer .bh-footer*. */ /* ---- T3: text-bearing CARDS / PANELS -> restrained frosted glass. ink #17231E ~9-12:1, ink-soft ~7:1, hardened muted #5E6E63 >=4.6:1, green CTA is a solid opaque fill (UNTOUCHED) so white-on-green stays ~7:1. One shared small blur (3px) keeps GPU cost low and is reserved to these + the single PDP gallery — NOT to bands or PLP stages. ---- */ .catalog-category-view .bh-product-card, .catalogsearch-result-index .bh-product-card, .catalog-product-view .bh-pdp-info, .cms-index-index .bh-need, .cms-home .bh-need, .cms-index-index .bh-edu__card, .cms-home .bh-edu__card, .cms-index-index .bh-pillars__item, .cms-home .bh-pillars__item, .cms-index-index .bh-about-home__item, .cms-home .bh-about-home__item, .bh-home--summer26 .bh-su-pick__card, .bh-home--summer26 .bh-su-pack{ background-color: var(--bh-reveal-glass) !important; -webkit-backdrop-filter: var(--bh-reveal-blur); backdrop-filter: var(--bh-reveal-blur); } /* HARDEN the weak token ONLY inside revealed cards so small price/meta sub-labels clear AA over a faint lattice node (Judge 2 fix). Scoped: does not change muted anywhere else on the site. */ .catalog-category-view .bh-product-card .price-box .price, .catalog-category-view .bh-product-card small, .catalogsearch-result-index .bh-product-card .price-box .price, .catalogsearch-result-index .bh-product-card small, .cms-index-index .bh-need span, .cms-home .bh-need span, .cms-index-index .bh-about-home__item span, .cms-home .bh-about-home__item span, .bh-home--summer26 .bh-su-pick__card .bh-su-pick__desc, .bh-home--summer26 .bh-su-pack .bh-su-pack__meta{ color: var(--bh-reveal-muted); } /* Home product-story stack card: keep its two white highlight radials (§CARDSTACK), only thin the paper base; denser copy -> stay denser. */ .bh-home--summer26 .bh-su-stack__cards .bh-su-card{ background-color: var(--bh-reveal-glass-2) !important; -webkit-backdrop-filter: var(--bh-reveal-blur); backdrop-filter: var(--bh-reveal-blur); } /* keep homepage WIDGET cards exactly as they are (already transparent floats) */ .block-products-list .bh-product-card, .block-products-list .bh-product-card:hover, .block-products-list .bh-product-card__stage{ background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; } /* ---- T4: image-only product STAGES -> OPAQUE WHITE CENTRE (packshot contrast + hides any leftover white-bg JPG square) fading to TRANSPARENT outer ring so the lattice meets the stage edge. Green-glow + dashed molecular ring layers PRESERVED verbatim from the audited last-wins rules. No text on these surfaces -> zero contrast risk. Centre kept fully #fff (not .92) to eliminate JPG-halo risk. ---- */ /* 4a) PLP / search grid stage (overrides §CATALOGSTAGE, catalog.css 159-165). NO blur (grid perf). */ .catalog-category-view .bh-product-card__stage, .catalogsearch-result-index .bh-product-card__stage{ background: url("data:image/svg+xml;utf8,") 50% 44% / auto 72% no-repeat, radial-gradient(46% 46% at 50% 44%, rgba(46,125,50,.06), transparent 70%) 0 0 / cover no-repeat, radial-gradient(64% 64% at 50% 40%, #ffffff 0%, #ffffff 40%, rgba(251,250,247,.55) 72%, transparent 100%) 0 0 / cover no-repeat !important; } /* 4b) PDP main-image stage (overrides §PDPRING, catalog.css 176-181). Single element -> cheap blur. */ .catalog-product-view #gallery-main{ background: url("data:image/svg+xml;utf8,") 50% 38% / auto 58% no-repeat, radial-gradient(82% 70% at 50% 34%, #fff 0%, #fff 46%, rgba(252,250,244,.6) 78%, transparent 100%) !important; border-radius: var(--bh-radius-lg); -webkit-backdrop-filter: blur(6px) saturate(1.03); backdrop-filter: blur(6px) saturate(1.03); } /* 4c) Home stack per-card stage (overrides §STACKFIT, summer26 862-867). NO blur (grid). */ .bh-su-card__media--editorial .bh-su-card__world-bg{ background: url("data:image/svg+xml;utf8,") 50% 47% / auto 72% no-repeat, radial-gradient(48% 48% at 50% 47%, rgba(46,125,50,.07), transparent 70%) 0 0 / cover no-repeat, radial-gradient(62% 62% at 50% 42%, #ffffff 0%, #ffffff 40%, rgba(251,250,247,.55) 72%, transparent 100%) 0 0 / cover no-repeat !important; } /* 4d) Summer .bh-su-stagebox disc (overrides summer26 304-306) */ .bh-home--summer26 .bh-su-stagebox::before{ background: radial-gradient(92% 84% at 50% 22%, #ffffff 0%, #ffffff 42%, rgba(251,247,238,.5) 78%, transparent 100%) !important; } /* 4e) Home D3 product stage (overrides bioheal-home.css .bh-stage11 286) */ .cms-index-index .bh-stage11, .cms-home .bh-stage11{ background: radial-gradient(88% 80% at 50% 30%, #ffffff 0%, #ffffff 48%, rgba(251,250,246,.5) 80%, transparent 100%) !important; } /* 4f) Hero/focus stages (overrides bioheal-leap.css .bh-hero__media/.bh-focus__media) */ .cms-index-index .bh-hero__media, .cms-home .bh-hero__media{ background: radial-gradient(82% 70% at 50% 34%, #ffffff 0%, #ffffff 44%, rgba(252,250,244,.55) 78%, transparent 100%) !important; } .cms-index-index .bh-focus__media, .cms-home .bh-focus__media{ background: radial-gradient(96% 86% at 50% 26%, #fff 0%, #fff 50%, rgba(251,250,246,.5) 82%, transparent 100%) !important; } /* ---- 5) Bioheal Vilag teaser (/bioheal-vilag .bvw + homepage teaser .bh-bvteaser): wrapper drops to a faint paper tint so the canvas shows; the .bh-bvteaser__row img #fff is a fallback BEHIND real cover photos (object-fit:cover) -> NOT touched. ---- */ .bh-bvteaser, .bvw{ background: var(--bh-band-paper) !important; } /* ---- 6) Mobile: blur(3px) is cheap (few cards per viewport), keep it; but on tiny coarse-pointer screens drop blur and opaque-up so AA holds on low-end GPUs. ---- */ @media (max-width:600px) and (pointer:coarse){ :root{ --bh-reveal-glass:rgba(255,255,255,.90); --bh-reveal-glass-2:rgba(250,248,242,.92); --bh-reveal-blur:none; } } /* ---- 7) Motion safety: blur is static, no animation added; reduced-motion unaffected. body::before stays fixed z-index:-1 (no opacity bump here, unlike Open canvas — avoids raising the texture floor under all text). ---- */ /* ===== end §REVEALBG ===== */ /* =========================================================================== §PDPFIX — product page image window + responsive polish (2026-06-15). APPEND to bioheal-revealbg.css (last-loading site-wide layer). - Round the corners of the product-image WINDOW. We round the IMAGES (their content clips to border-radius) instead of overflow:hidden on #gallery-main, because the prev/next arrows, zoom (galleryFullscreenBtn) and "Forgatható nézet" 3D control are absolute children of #gallery-main and would be clipped. - Mobile: keep wide spec/ingredient tables inside their block (scroll, never push the page). Long text wraps. Rollback = strip from the "§PDPFIX" marker to EOF. =========================================================================== */ /* rounded product image window (main gallery image + the active x-for images) */ .catalog-product-view #gallery-main img { border-radius: var(--bh-radius-lg, 24px); } .catalog-product-view #gallery-main { border-radius: var(--bh-radius-lg, 24px); } /* mobile: wide description/spec tables scroll inside their column, never overflow the page; cells keep readable wrapping */ @media (max-width: 767px) { .catalog-product-view .bh-richtext__table, .catalog-product-view .product-description table, .catalog-product-view .bh-pdp__table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .catalog-product-view .product-description img, .catalog-product-view .bh-richtext img { max-width: 100%; height: auto; } } /* ============================================================ §DEFROST (2026-06-16) — 3-model audit, Option A. Solid surfaces, no frosted glass, one calm cream stage ladder, near-zero texture. Appended LAST -> wins over §REVEALBG by source order. Rollback = strip from this §DEFROST marker to EOF. ============================================================ */ :root{ --bh-reveal-glass:#FAFBF8 !important; --bh-reveal-glass-2:#FAFBF8 !important; --bh-reveal-blur:none !important; } /* solid text/product cards + soft real shadow, no blur */ .catalog-category-view .bh-product-card,.catalogsearch-result-index .bh-product-card, .catalog-product-view .bh-pdp-info, .cms-index-index .bh-need,.cms-home .bh-need, .cms-index-index .bh-edu__card,.cms-home .bh-edu__card, .cms-index-index .bh-pillars__item,.cms-home .bh-pillars__item, .cms-index-index .bh-about-home__item,.cms-home .bh-about-home__item, .bh-home--summer26 .bh-su-pick__card,.bh-home--summer26 .bh-su-pack, .bh-home--summer26 .bh-su-stack__cards .bh-su-card{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background-color:#FAFBF8 !important; box-shadow:0 10px 30px -18px rgba(20,40,28,.28) !important; } /* unify the striped stage/section surfaces -> one calm cream (GROUP dark-green anchor stays) */ .bh-home--summer26 .bh-su-stage--mist, .bh-home--summer26 .bh-su-stage--sage, .bh-home--summer26 .bh-su-stage--white, .bh-home--summer26 .bh-su-stage--paper, .bh-home--summer26 .bh-su-stack, .bh-home--summer26 .bh-su-mission, .bh-home--summer26 .bh-su-proof, .bh-home--summer26 .bh-su-pillars{ background:transparent !important; } /* §BGLEAP texture -> near-zero whisper (no hexagons resolving at card edges) */ body::before{ opacity:.13 !important; } /* ===== end §DEFROST ===== */ /* ============================================================ §MOBILE (2026-06-16) — funnel compaction (mobile only). Rollback = strip from this §MOBILE marker to EOF. ============================================================ */ @media (max-width:767px){ .bh-section{ padding:34px 0 !important; } .bh-su-mission .bh-wrap{ padding-top:40px !important; padding-bottom:40px !important; } .bh-su-stagebox{ max-width:280px !important; } /* stage related products -> swipe row instead of 3 tall stacked cards */ .bh-su-stage__related .bh-prodflip-grid{ display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; } .bh-su-stage__related .bh-prodflip-grid::-webkit-scrollbar{ display:none; } .bh-su-stage__related .bh-prodflip-grid > *{ flex:0 0 78% !important; scroll-snap-align:center; min-width:0; } } /* ===== end §MOBILE ===== */ /* ============================================================ §PRODSTAGE (2026-06-16, CLEAN/safe) — calm light halo, grounded product, no cell, no sage corner. Rollback = strip from this §PRODSTAGE marker to EOF. ============================================================ */ .bh-pf__stage{ overflow:hidden !important; background:radial-gradient(50% 11% at 50% 85%, rgba(36,74,49,.15) 0%, rgba(36,74,49,.06) 50%, transparent 75%),radial-gradient(ellipse 78% 78% at 50% 42%, #ffffff 0%, #FBFCFA 42%, #F2F7F1 74%, #E9F1E8 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important; } .bh-pf__stage::before{ display:none !important; content:none !important; } .bh-pf__stage img{ z-index:2 !important; filter:drop-shadow(0 16px 20px rgba(21,48,31,.14)) drop-shadow(0 4px 7px rgba(21,48,31,.09)) !important; } .catalog-category-view .bh-product-card__stage, .catalogsearch-result-index .bh-product-card__stage{ position:relative; overflow:hidden; background:radial-gradient(50% 11% at 50% 85%, rgba(36,74,49,.15) 0%, rgba(36,74,49,.06) 50%, transparent 75%),radial-gradient(ellipse 78% 78% at 50% 42%, #ffffff 0%, #FBFCFA 42%, #F2F7F1 74%, #E9F1E8 100%) !important; } .catalog-category-view .bh-product-card__stage::before, .catalogsearch-result-index .bh-product-card__stage::before{ display:none !important; content:none !important; } .catalog-category-view .bh-product-card__stage img, .catalogsearch-result-index .bh-product-card__stage img{ filter:drop-shadow(0 16px 20px rgba(21,48,31,.14)) drop-shadow(0 4px 7px rgba(21,48,31,.09)) !important; } .catalog-product-view #gallery-main{ position:relative; background:radial-gradient(50% 11% at 50% 85%, rgba(36,74,49,.15) 0%, rgba(36,74,49,.06) 50%, transparent 75%),radial-gradient(ellipse 78% 78% at 50% 42%, #ffffff 0%, #FBFCFA 42%, #F2F7F1 74%, #E9F1E8 100%) !important; } .catalog-product-view #gallery-main::before{ display:none !important; content:none !important; } .catalog-product-view #gallery-main img{ filter:drop-shadow(0 16px 22px rgba(21,48,31,.12)) drop-shadow(0 4px 7px rgba(21,48,31,.08)) !important; } /* ---- flip-back typography ---- */ .bh-face--back{ background:linear-gradient(168deg,#FFFFFF 0%,#EEF4EC 100%) !important; padding:22px 21px !important; } .bh-face--back::after{ content:none !important; display:none !important; } .bh-pf__kick{ font-size:10.5px !important; letter-spacing:.17em !important; text-transform:uppercase !important; color:var(--bh-fresh,#2E9E6B) !important; font-weight:700 !important; margin:0 0 3px !important; } .bh-pf__ctitle{ font-family:'Newsreader',Georgia,serif !important; font-weight:500 !important; font-size:20px !important; line-height:1.18 !important; letter-spacing:-.01em !important; color:var(--bh-ink,#17231E) !important; margin:3px 0 0 !important; gap:9px !important; } .bh-pf__rule{ width:34px !important; height:2px !important; margin:12px 0 13px !important; } .bh-claims p{ line-height:1.62 !important; color:#46544B !important; } /* ===== end §PRODSTAGE ===== */