.wbg-artist-gallery{ --wbg-text:#15181a; --wbg-muted:#677177; --wbg-line:#dde2dc; --wbg-surface:#f6f6f2; --wbg-card:#ffffff; --wbg-accent:#5b7d67; --wbg-shadow:0 18px 46px rgba(18,24,20,.07); --wbg-shadow-soft:0 10px 24px rgba(18,24,20,.05); margin-top:clamp(1.5rem,3vw,2.75rem); } /* The lightbox, room and AR dialogs are relocated to by frontend.js (so they overlay the whole page). Once moved out of .wbg-artist-gallery they lose the custom properties below, which made --wbg-accent resolve to nothing and rendered the white "Werk anfragen" / "Im Raum ansehen" button text on a transparent (white) background — invisible. Defining the same tokens on the relocated roots keeps the buttons correctly coloured wherever they live. */ .wbg-lightbox,.wbg-room,.wbg-ar{ --wbg-text:#15181a; --wbg-muted:#677177; --wbg-line:#dde2dc; --wbg-surface:#f6f6f2; --wbg-card:#ffffff; --wbg-accent:#5b7d67; --wbg-shadow:0 18px 46px rgba(18,24,20,.07); --wbg-shadow-soft:0 10px 24px rgba(18,24,20,.05); } .wbg-artist-gallery .wes-section__inner{max-width:min(1440px,calc(100vw - 2rem));} .wbg-gallery{display:grid;gap:1.25rem;color:var(--wbg-text)} .wbg-gallery__header{display:flex;justify-content:flex-start;align-items:end;gap:1rem} .wbg-gallery__intro h2{margin:0;font-size:clamp(1.6rem,2vw,2.3rem);line-height:1.05;letter-spacing:-.03em} .wbg-gallery__viewport{position:relative} .wbg-slide{display:none;gap:1rem} .wbg-slide.is-active{display:grid} .wbg-slide__stage{display:grid;gap:1.15rem;align-items:start} .wbg-slide__media-shell{display:grid;gap:1rem} .wbg-slide__media-copy--mobile{display:none} .wbg-slide__open{appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;width:100%} .wbg-slide__image-frame{ display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#fbfbf8 0%,#f4f4f0 100%); border:1px solid var(--wbg-line);border-radius:30px; padding:clamp(.85rem,1.2vw,1.2rem); box-shadow:var(--wbg-shadow-soft); min-height:320px; } .wbg-slide__image{ display:block;width:auto;height:auto;max-width:100%;max-height:min(72vh,980px); margin-inline:auto;border-radius:16px;box-shadow:0 14px 28px rgba(17,24,20,.08) } .wbg-slide__panel--desktop,.wbg-slide__panel--mobile{min-width:0} .wbg-panel__eyebrow,.wbg-lightbox__eyebrow{ font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wbg-muted);margin-bottom:.85rem } .wbg-panel__title{ font-size:clamp(2.2rem,3vw,4.2rem);line-height:.95;letter-spacing:-.045em;margin:0 0 .8rem;text-wrap:balance } .wbg-panel__headline-meta,.wbg-panel__spec-meta,.wbg-panel__price,.wbg-panel__credit, .wbg-lightbox__meta,.wbg-lightbox__price,.wbg-lightbox__credit{ color:var(--wbg-muted);margin:.35rem 0 0;font-size:1rem;line-height:1.55 } .wbg-panel__details,.wbg-mobile-card__details{margin-top:1.15rem;border-top:1px solid var(--wbg-line);padding-top:.95rem} .wbg-panel__details summary,.wbg-mobile-card__details summary{ list-style:none;cursor:pointer;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.88rem } .wbg-panel__details summary::-webkit-details-marker,.wbg-mobile-card__details summary::-webkit-details-marker{display:none} .wbg-panel__copy,.wbg-mobile-card__copy,.wbg-lightbox__copy{padding-top:.8rem;font-size:1rem;line-height:1.72} .wbg-panel__copy p:first-child,.wbg-mobile-card__copy p:first-child,.wbg-lightbox__copy p:first-child{margin-top:0} .wbg-panel__copy p:last-child,.wbg-mobile-card__copy p:last-child,.wbg-lightbox__copy p:last-child{margin-bottom:0} .wbg-panel__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.15rem} .wbg-mobile-card{ background:transparent;border:0;border-radius:0;padding:0;box-shadow:none } .wbg-mobile-card__title{ margin:0;font-size:clamp(1.9rem,8vw,3.1rem);line-height:.96;letter-spacing:-.05em;text-wrap:balance } .wbg-mobile-card__headline-meta,.wbg-mobile-card__spec-meta,.wbg-mobile-card__price,.wbg-mobile-card__credit{ color:var(--wbg-muted);margin-top:.45rem;line-height:1.58;font-size:1rem } .wbg-gallery__nav{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem; max-width:min(1160px,100%);margin:.2rem auto 0 } .wbg-gallery__nav-center{display:grid;justify-items:center;gap:.7rem} .wbg-gallery__counter{font:600 1rem/1.15 inherit;white-space:nowrap;color:var(--wbg-text)} .wbg-gallery__dots{display:flex;align-items:center;justify-content:center;gap:.55rem;flex-wrap:wrap;max-width:100%} .wbg-dot{appearance:none;border:0;background:#d2d8d3;border-radius:999px;width:10px;height:10px;padding:0;cursor:pointer;transition:all .2s ease} .wbg-dot.is-active{background:var(--wbg-accent);width:24px} .wbg-nav,.wbg-lightbox__nav{ appearance:none;border:1px solid var(--wbg-line);background:rgba(255,255,255,.94);color:var(--wbg-text); border-radius:999px;width:56px;height:56px;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:var(--wbg-shadow-soft) } .wbg-nav:hover,.wbg-lightbox__nav:hover{border-color:var(--wbg-accent);color:var(--wbg-accent)} .wbg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--wbg-line);text-decoration:none;font-weight:600;color:var(--wbg-text);background:#fff} .wbg-btn:hover{border-color:var(--wbg-accent);color:var(--wbg-accent)} .wbg-btn--primary{background:var(--wbg-accent);border-color:var(--wbg-accent);color:#fff}.wbg-btn--primary:hover{color:#fff;filter:brightness(1.03)} .wbg-btn--ghost{background:transparent} .wbg-pill{display:inline-flex;align-items:center;padding:.35rem .7rem;border-radius:999px;background:#edf2ed;color:var(--wbg-accent);font-size:.84rem} .wbg-lightbox[hidden]{display:none!important} .wbg-lightbox{position:fixed;inset:0;z-index:99999} .wbg-lightbox__backdrop{position:absolute;inset:0;background:rgba(17,19,18,.54);backdrop-filter:blur(10px)} .wbg-lightbox__dialog{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem} .wbg-lightbox__close{position:absolute;top:1rem;right:1rem;border:1px solid var(--wbg-line);background:#fff;border-radius:999px;width:48px;height:48px;font-size:1.8rem;cursor:pointer;box-shadow:var(--wbg-shadow-soft)} .wbg-lightbox__shell{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:min(1480px,96vw)} .wbg-lightbox__grid{ display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.62fr);gap:1.4rem; background:#fff;border-radius:30px;padding:clamp(1rem,2vw,1.5rem);box-shadow:0 24px 80px rgba(0,0,0,.2) } .wbg-lightbox__media{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fbfbf8 0%,#f4f4f0 100%);border:1px solid var(--wbg-line);border-radius:24px;padding:1rem;min-height:360px} .wbg-lightbox__image{display:block;max-width:100%;max-height:78vh;height:auto;width:auto;border-radius:14px;box-shadow:0 14px 28px rgba(17,24,20,.08)} .wbg-lightbox__panel{min-width:0;align-self:start;padding-right:.25rem} .wbg-lightbox__title{margin:.45rem 0 .65rem;font-size:clamp(1.9rem,2.6vw,3.2rem);line-height:.97;letter-spacing:-.04em;text-wrap:balance} .wbg-lightbox__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem} .wbg-lightbox__footer{display:flex;justify-content:center;margin-top:.85rem} @media (min-width:1024px){ .wbg-slide__stage{grid-template-columns:minmax(0,1.7fr) minmax(280px,.58fr);gap:1.5rem} .wbg-slide__panel--mobile{display:none} .wbg-slide__image-frame{min-height:620px;padding:1.4rem;border-radius:34px} .wbg-slide.is-landscape .wbg-slide__stage{grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr)} .wbg-slide__panel--desktop{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-block:1rem} .wbg-gallery__header{margin-bottom:-.1rem} } @media (max-width:1023.98px){ .wbg-gallery{gap:1rem} .wbg-gallery__header{justify-content:center;text-align:center} .wbg-slide__panel--desktop,.wbg-slide__media-copy--desktop{display:none} .wbg-slide__media-copy--mobile{display:block;padding-inline:.1rem} .wbg-slide__stage{gap:1rem} .wbg-slide__media-shell{gap:.85rem} .wbg-slide__image-frame{min-height:0;padding:.55rem;border-radius:24px} .wbg-slide__image{max-height:56vh;border-radius:14px} .wbg-slide__panel--mobile{padding-inline:.1rem} .wbg-mobile-card__details{margin-top:.85rem} .wbg-gallery__nav{grid-template-columns:auto 1fr auto;gap:.8rem;margin-top:.1rem} .wbg-gallery__nav-center{gap:.6rem} .wbg-nav{width:58px;height:58px} .wbg-lightbox__dialog{align-items:center;padding:.75rem} .wbg-lightbox__shell{grid-template-columns:1fr;gap:.8rem;width:min(96vw,720px)} .wbg-lightbox__grid{grid-template-columns:1fr;max-height:88vh;overflow:auto;padding:1rem;border-radius:26px} .wbg-lightbox__nav{display:none} .wbg-lightbox__media{min-height:0} } /* 1.0.3 refinements */ .wbg-gallery{padding-top:.25rem} .wbg-gallery__header{display:none} .wbg-gallery__viewport{padding:0;background:transparent;border:0;box-shadow:none} .wbg-slide__stage{gap:1.25rem} .wbg-slide__media-shell{gap:1rem} .wbg-slide__media-copy--mobile{order:2;padding-inline:.2rem} .wbg-slide__media{order:1} .wbg-mobile-card__title{font-size:clamp(1.7rem,7.8vw,2.75rem);line-height:.98;letter-spacing:-.045em;margin-top:.15rem} .wbg-mobile-card__headline-meta,.wbg-mobile-card__spec-meta{font-size:1.02rem;color:var(--wbg-text)} .wbg-gallery__nav{max-width:min(720px,100%);margin:.55rem auto 0;gap:1.2rem} .wbg-gallery__nav-center{gap:.55rem} .wbg-gallery__counter{font-size:1.35rem;letter-spacing:-.03em} .wbg-gallery__dots{gap:.7rem} .wbg-dot{width:12px;height:12px;background:#cfd5d0} .wbg-dot.is-active{width:34px} .wbg-nav{width:72px;height:72px;font-size:2rem;background:#fff} .wbg-slide__open{width:100%} .wbg-slide__image-frame{background:linear-gradient(180deg,#fbfaf7 0%,#f4f2ee 100%)} .wbg-lightbox__dialog{padding:max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom))} .wbg-lightbox__close{top:max(1rem, env(safe-area-inset-top));right:max(1rem, env(safe-area-inset-right))} @media (min-width:1024px){ .wbg-gallery__viewport{padding:0} .wbg-slide__stage{grid-template-columns:minmax(0,1.95fr) minmax(280px,.5fr);align-items:center} .wbg-slide__image-frame{min-height:680px;padding:1.2rem;border-radius:30px} .wbg-panel__title{font-size:clamp(2.2rem,3vw,4rem);line-height:.95} .wbg-panel__eyebrow{display:none} .wbg-panel__headline-meta,.wbg-panel__spec-meta,.wbg-panel__price{font-size:1rem} .wbg-gallery__nav{max-width:min(1400px,100%);grid-template-columns:auto 1fr auto;margin-top:.4rem} .wbg-gallery__nav-center{gap:.85rem} .wbg-gallery__counter{font-size:1.05rem} } @media (max-width:1023.98px){ .wes-section--works-gallery{padding-top:.25rem} .wbg-gallery{gap:.8rem} .wbg-slide__stage{gap:.9rem} .wbg-slide__image-frame{padding:.5rem;border-radius:26px} .wbg-slide__image{max-height:50vh} .wbg-slide__panel--mobile{padding-inline:.2rem} .wbg-mobile-card__details summary{padding-top:.8rem;font-size:.98rem;letter-spacing:.18em} .wbg-mobile-card__copy{font-size:1rem;line-height:1.62} .wbg-gallery__nav{grid-template-columns:72px 1fr 72px;align-items:end} .wbg-nav{width:64px;height:64px} .wbg-gallery__counter{font-size:1.05rem} .wbg-lightbox__grid{padding:.85rem;border-radius:24px;gap:.85rem} .wbg-lightbox__title{font-size:clamp(1.8rem,7vw,2.65rem)} } /* 1.0.5 lightbox viewport fix */ html.wbg-lightbox-open, body.wbg-lightbox-open{ overflow:hidden; } body.wbg-lightbox-open{ position:fixed; left:0; right:0; width:100%; } .wbg-lightbox{ position:fixed; inset:0; width:100vw; height:100dvh; } .wbg-lightbox__dialog{ min-height:100dvh; } @media (min-width:1440px) and (min-height:820px){ .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 60vh), 860px); max-width:min(68vw,1120px); max-height:calc(100% - 16px); } .wbg-room__stage[data-scene="living"]::after{ width:calc(var(--wbg-room-prop-scale,1) * clamp(132px,8vw,190px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(206px,13.6vw,294px)); } .wbg-room__stage[data-scene="studio"]::after{ width:calc(var(--wbg-room-prop-scale,1) * clamp(122px,6.8vw,184px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(282px,16vw,446px)); } } @supports not (height: 100dvh){ .wbg-lightbox{height:100vh;} .wbg-lightbox__dialog{min-height:100vh;} } @media (max-width:1023.98px){ .wbg-lightbox__dialog{ align-items:center; justify-content:center; padding:max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) 14px; } .wbg-lightbox__shell{ width:min(94vw, 720px); } .wbg-lightbox__grid{ width:100%; max-height:min(84dvh, 760px); overflow:auto; } .wbg-lightbox__close{ position:fixed; top:max(18px, env(safe-area-inset-top)); right:max(18px, env(safe-area-inset-right)); z-index:100001; } } /* 1.1.0 Museum View */ .wbg-artist-gallery{ --wbg-surface:#f7f7f3; --wbg-card:#fff; --wbg-line:#e2e6df; --wbg-shadow:0 24px 60px rgba(17,24,20,.06); --wbg-shadow-soft:0 12px 28px rgba(17,24,20,.05); } .wes-section--works-gallery{padding-bottom:clamp(3rem,8vw,5rem)} .wbg-gallery{gap:1.15rem} .wbg-gallery__viewport{max-width:min(1480px,100%);margin-inline:auto} .wbg-slide__image-frame{ background:linear-gradient(180deg,#fbfaf7 0%,#f3f2ee 100%); border-color:#e5e8e1; } .wbg-slide__image{ box-shadow:0 18px 34px rgba(17,24,20,.09); } .wbg-panel__title, .wbg-mobile-card__title, .wbg-lightbox__title{ font-family:inherit; font-weight:700; } .wbg-panel__eyebrow, .wbg-lightbox__eyebrow{letter-spacing:.18em} .wbg-panel__details summary, .wbg-mobile-card__details summary{display:flex;align-items:center;justify-content:space-between} .wbg-panel__details summary::after, .wbg-mobile-card__details summary::after{content:'+';font-size:1.2rem;line-height:1;color:var(--wbg-muted)} .wbg-panel__details[open] summary::after, .wbg-mobile-card__details[open] summary::after{content:'–'} .wbg-gallery__nav{margin-top:.35rem} .wbg-gallery__nav-center{gap:.55rem} .wbg-gallery__counter{font-size:1.1rem;letter-spacing:-.02em} .wbg-dot{background:#d3d8d3} .wbg-dot.is-active{background:var(--wbg-accent)} .wbg-nav,.wbg-lightbox__nav, .wbg-lightbox__close{display:inline-flex;align-items:center;justify-content:center;color:var(--wbg-text);line-height:1} .wbg-lightbox__close{font-size:2rem;font-weight:400} .wbg-lightbox__backdrop{background:rgba(18,20,19,.6);backdrop-filter:blur(14px)} .wbg-lightbox__footer{margin-top:.55rem} @media (min-width:1024px){ .wbg-slide__stage{grid-template-columns:minmax(0,2.05fr) minmax(320px,.5fr);gap:2.1rem;align-items:center} .wbg-slide__image-frame{min-height:720px;padding:1.35rem;border-radius:34px} .wbg-slide.is-landscape .wbg-slide__stage{grid-template-columns:minmax(0,1.65fr) minmax(320px,.58fr)} .wbg-panel__title{font-size:clamp(2.6rem,3.2vw,4.5rem);max-width:10ch} .wbg-panel__headline-meta,.wbg-panel__spec-meta,.wbg-panel__price{font-size:1.02rem} .wbg-panel__copy{font-size:1rem;line-height:1.8;max-width:40ch} .wbg-gallery__nav{max-width:min(1120px,100%)} .wbg-lightbox__shell{width:min(1500px,96vw)} .wbg-lightbox__grid{grid-template-columns:minmax(0,1.8fr) minmax(320px,.56fr);padding:1.25rem 1.25rem 1.15rem;border-radius:34px} .wbg-lightbox__media{min-height:76vh;border-radius:28px;padding:1.2rem} .wbg-lightbox__image{max-height:80vh} .wbg-lightbox__panel{padding-right:.15rem;align-self:center} .wbg-lightbox__title{font-size:clamp(2.3rem,3vw,4rem);max-width:10ch} } @media (max-width:1023.98px){ .wbg-gallery{gap:.85rem} .wbg-slide__image-frame{padding:.6rem;border-radius:28px} .wbg-slide__image{max-height:54vh} .wbg-slide__media-copy--mobile{padding-inline:0} .wbg-mobile-card__title{font-size:clamp(2rem,8vw,3.2rem);line-height:.94;margin-top:.1rem} .wbg-mobile-card__headline-meta,.wbg-mobile-card__spec-meta,.wbg-mobile-card__price{font-size:1rem;line-height:1.55} .wbg-mobile-card__details{margin-top:1rem;padding-top:1rem} .wbg-mobile-card__copy{font-size:1rem;line-height:1.66} .wbg-gallery__nav{grid-template-columns:64px 1fr 64px;gap:.75rem;align-items:center;max-width:min(540px,100%)} .wbg-nav{width:62px;height:62px;font-size:1.9rem} .wbg-gallery__counter{font-size:1rem} .wbg-gallery__dots{gap:.65rem} .wbg-dot{width:11px;height:11px} .wbg-dot.is-active{width:30px} .wbg-lightbox__dialog{display:block;overflow:auto;padding:max(14px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))} .wbg-lightbox__shell{width:100%;display:block} .wbg-lightbox__grid{display:block;width:min(100%,560px);margin:0 auto;background:transparent;box-shadow:none;padding:0;max-height:none;overflow:visible} .wbg-lightbox__media{background:linear-gradient(180deg,#fbfaf7 0%,#f3f2ee 100%);border:1px solid var(--wbg-line);border-radius:30px;padding:.85rem;min-height:0;box-shadow:var(--wbg-shadow)} .wbg-lightbox__image{max-height:min(56dvh,560px);border-radius:18px} .wbg-lightbox__panel{margin-top:.9rem;background:#fff;border-radius:30px;padding:1.1rem 1.15rem 1.2rem;box-shadow:var(--wbg-shadow)} .wbg-lightbox__eyebrow{margin-bottom:.75rem;font-size:.78rem} .wbg-lightbox__title{font-size:clamp(2rem,8.4vw,3rem);line-height:.94;margin:.2rem 0 .65rem;max-width:11ch} .wbg-lightbox__meta,.wbg-lightbox__price,.wbg-lightbox__credit{font-size:1rem;line-height:1.56} .wbg-lightbox__copy{padding-top:.85rem;font-size:1rem;line-height:1.66} .wbg-lightbox__actions{margin-top:.85rem} .wbg-lightbox__footer{display:flex;justify-content:center;margin-top:.85rem} .wbg-lightbox__close{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:56px;height:56px;font-size:2.1rem} } /* 1.1.1 Professional Polish */ .wes-section--works-gallery{padding-bottom:clamp(4.5rem,10vw,7rem)} .wbg-gallery__nav{margin-top:.35rem} .wbg-slide__image-frame{padding:clamp(.55rem,1.2vw,.9rem)} .wbg-mobile-card__title{font-size:clamp(1.95rem,8.2vw,3rem);line-height:.96} .wbg-mobile-card__headline-meta,.wbg-mobile-card__spec-meta{font-size:1.06rem} .wbg-gallery__counter{font-size:1.15rem} @media (max-width:1023.98px){ .wbg-gallery{gap:.65rem} .wbg-slide__stage{gap:.7rem} .wbg-slide__image-frame{padding:.42rem;border-radius:24px} .wbg-slide__image{max-height:56vh} .wbg-slide__panel--mobile{padding-inline:0} .wbg-mobile-card{padding-top:.1rem} .wbg-mobile-card__price{margin-top:.75rem} .wbg-mobile-card__details summary{padding-top:.7rem} .wbg-gallery__nav{max-width:min(560px,100%);grid-template-columns:64px 1fr 64px;gap:.75rem;align-items:center;margin-top:.2rem} .wbg-gallery__nav-center{gap:.35rem} .wbg-gallery__dots{gap:.55rem} .wbg-dot{width:11px;height:11px} .wbg-dot.is-active{width:42px} .wbg-nav{width:58px;height:58px;font-size:1.85rem} } @media (max-width:1023.98px){ .wbg-lightbox__dialog{align-items:flex-start;padding:max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom))} .wbg-lightbox__shell{position:relative;width:min(94vw,680px);padding-top:4.25rem} .wbg-lightbox__grid{max-height:min(88dvh, 880px);padding:.95rem;border-radius:28px;gap:.8rem;box-shadow:0 26px 70px rgba(17,24,20,.16)} .wbg-lightbox__media{min-height:0} .wbg-lightbox__image{max-height:56dvh;width:auto;margin-inline:auto} .wbg-lightbox__panel{padding:.05rem .15rem .2rem} .wbg-lightbox__eyebrow{font-size:.82rem;letter-spacing:.16em} .wbg-lightbox__title{font-size:clamp(2rem,8vw,3.15rem);line-height:.94;margin-top:.18rem} .wbg-lightbox__meta{font-size:1.02rem} .wbg-lightbox__copy{font-size:1rem;line-height:1.62} .wbg-lightbox__credit,.wbg-lightbox__price{font-size:.98rem} .wbg-lightbox__nav{display:flex;position:absolute;top:calc(max(12px, env(safe-area-inset-top)) + 1rem);width:56px;height:56px;font-size:1.75rem;z-index:2;box-shadow:0 10px 24px rgba(17,24,20,.12)} .wbg-lightbox__nav--prev{left:0} .wbg-lightbox__nav--next{display:none} .wbg-lightbox__close{top:max(12px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));width:56px;height:56px;font-size:2rem;box-shadow:0 10px 24px rgba(17,24,20,.12)} .wbg-lightbox__footer{margin-top:.2rem} } /* 1.1.2 refinement */ @media (max-width:1023.98px){ .wbg-slide__image-frame{padding:.45rem;border-radius:22px} .wbg-slide__image{max-height:52vh} .wbg-mobile-card__title{font-size:clamp(2rem,8.2vw,3.3rem);line-height:.94} .wbg-gallery__nav{margin:.15rem auto 0;gap:.9rem} .wbg-gallery__nav-center{gap:.45rem} .wbg-gallery__counter{font-size:1.15rem} .wbg-dot{width:11px;height:11px} .wbg-dot.is-active{width:38px} .wbg-nav{width:64px;height:64px;font-size:1.8rem} .wbg-lightbox__dialog{align-items:flex-start;padding:max(.7rem, env(safe-area-inset-top)) .8rem max(.8rem, env(safe-area-inset-bottom))} .wbg-lightbox__shell{width:min(94vw,680px);gap:.55rem} .wbg-lightbox__grid{padding:.75rem;border-radius:24px;max-height:calc(100dvh - max(1.4rem, env(safe-area-inset-top)) - max(1.6rem, env(safe-area-inset-bottom)));overflow:auto} .wbg-lightbox__media{padding:.75rem;border-radius:20px} .wbg-lightbox__image{max-height:54dvh} .wbg-lightbox__panel{padding:0 .1rem .15rem} .wbg-lightbox__panel-inner.is-compact{padding-top:.1rem} .wbg-lightbox__eyebrow{font-size:.74rem;margin-bottom:.55rem} .wbg-lightbox__title{font-size:clamp(2rem,8vw,3.15rem);margin:.1rem 0 .45rem;line-height:.94} .wbg-lightbox__meta,.wbg-lightbox__price,.wbg-lightbox__credit{font-size:1rem;line-height:1.5} .wbg-lightbox__copy{padding-top:.55rem;font-size:1rem;line-height:1.62} .wbg-lightbox__actions{margin-top:.75rem} .wbg-lightbox__footer{margin-top:.15rem} .wbg-lightbox__close, .wbg-lightbox__nav{width:44px;height:44px;font-size:1.55rem} .wbg-lightbox__close{top:max(.8rem, env(safe-area-inset-top));right:max(.8rem, env(safe-area-inset-right))} } /* 1.1.3 mobile text readability fix */ @media (max-width:1023.98px){ .wbg-lightbox__dialog{overflow-y:auto;-webkit-overflow-scrolling:touch;} .wbg-lightbox__shell{padding-top:3.7rem;padding-bottom:max(1rem, env(safe-area-inset-bottom));} .wbg-lightbox__grid{display:grid;grid-template-columns:1fr;align-content:start;max-height:none;overflow:visible;padding:.7rem;border-radius:24px;} .wbg-lightbox__media{padding:.65rem;border-radius:20px;} .wbg-lightbox__image{max-height:42dvh;} .wbg-lightbox__panel{padding:0 .05rem .2rem;max-height:none;overflow:visible;} .wbg-lightbox__panel-inner{padding-bottom:1rem;} .wbg-lightbox__copy{max-height:none;overflow:visible;word-break:break-word;overflow-wrap:anywhere;} .wbg-lightbox__footer{display:none;} } /* 1.1.4 mobile lightbox structure fix */ @media (max-width:1023.98px){ .wbg-lightbox{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } .wbg-lightbox__dialog{ display:block; min-height:auto; height:auto; overflow:visible; padding: max(.75rem, env(safe-area-inset-top)) .8rem max(8.5rem, calc(env(safe-area-inset-bottom) + 7.5rem)); } .wbg-lightbox__shell{ display:block; width:min(94vw, 680px); margin:0 auto; padding-top:4rem; padding-bottom:0; } .wbg-lightbox__grid{ display:block; width:100%; max-height:none !important; height:auto; overflow:visible !important; padding:.7rem; border-radius:24px; background:transparent; box-shadow:none; } .wbg-lightbox__media{ padding:.7rem; border-radius:22px; min-height:0; } .wbg-lightbox__image{ display:block; width:auto; height:auto; max-width:100%; max-height:min(42dvh, 420px); margin:0 auto; } .wbg-lightbox__panel{ margin-top:.9rem; max-height:none !important; height:auto; overflow:visible !important; background:#fff; border-radius:28px; padding:1.1rem 1.1rem 1.2rem; box-shadow:var(--wbg-shadow); } .wbg-lightbox__panel-inner, .wbg-lightbox__copy{ max-height:none !important; overflow:visible !important; } .wbg-lightbox__panel-inner{ padding-bottom:.2rem; } .wbg-lightbox__copy{ padding-top:.7rem; word-break:break-word; overflow-wrap:anywhere; } .wbg-lightbox__footer{ display:none !important; } .wbg-lightbox__nav, .wbg-lightbox__close{ position:fixed; top:max(.8rem, env(safe-area-inset-top)); z-index:100001; } .wbg-lightbox__nav--prev{ left:.8rem; } .wbg-lightbox__close{ right:max(.8rem, env(safe-area-inset-right)); } } /* 1.1.5 Mobile Lightbox Scroll Refinement */ @media (max-width: 767.98px){ .wbg-lightbox{ overflow:hidden; } .wbg-lightbox__dialog{ display:grid; grid-template-rows:1fr; align-items:stretch; justify-items:stretch; min-height:100dvh; height:100dvh; overflow:hidden; padding:max(.8rem, env(safe-area-inset-top)) .8rem max(.8rem, env(safe-area-inset-bottom)) .8rem; } .wbg-lightbox__shell{ position:relative; display:block; width:min(94vw, 680px); margin:0 auto; padding-top:3.9rem; } .wbg-lightbox__grid{ display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); align-content:start; gap:.75rem; max-height:calc(100dvh - max(.8rem, env(safe-area-inset-top)) - max(.8rem, env(safe-area-inset-bottom)) - 4.6rem); overflow:hidden; padding:.75rem; border-radius:24px; } .wbg-lightbox__media{ flex:0 0 auto; min-height:0; padding:.65rem; border-radius:20px; } .wbg-lightbox__image{ display:block; width:auto; height:auto; max-width:100%; max-height:min(42dvh, 380px); margin-inline:auto; object-fit:contain; } .wbg-lightbox__panel{ min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 .05rem .2rem; } .wbg-lightbox__panel-inner, .wbg-lightbox__copy{ max-height:none; overflow:visible; } .wbg-lightbox__panel-inner{ padding:0 0 .9rem; } .wbg-lightbox__copy{ word-break:break-word; overflow-wrap:anywhere; } .wbg-lightbox__footer{ display:none; } .wbg-lightbox__nav, .wbg-lightbox__close{ width:44px; height:44px; font-size:1.55rem; } .wbg-lightbox__nav{ display:flex; position:absolute; top:max(.75rem, env(safe-area-inset-top)); z-index:2; box-shadow:0 10px 24px rgba(17,24,20,.12); } .wbg-lightbox__nav--prev{left:0;} .wbg-lightbox__nav--next{display:flex;right:0;} .wbg-lightbox__close{ top:max(.75rem, env(safe-area-inset-top)); right:max(.75rem, env(safe-area-inset-right)); box-shadow:0 10px 24px rgba(17,24,20,.12); } } /* 1.1.6 mobile lightbox panel scroll fix */ @media (max-width:1023.98px){ .wbg-lightbox__dialog{ display:flex; align-items:flex-start; justify-content:center; overflow:hidden; padding:max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); } .wbg-lightbox__shell{ position:relative; width:min(94vw, 680px); height:calc(100dvh - max(24px, env(safe-area-inset-top) + 12px) - max(28px, env(safe-area-inset-bottom) + 14px)); max-height:calc(100dvh - max(24px, env(safe-area-inset-top) + 12px) - max(28px, env(safe-area-inset-bottom) + 14px)); padding-top:0; display:block; } .wbg-lightbox__grid{ display:grid; grid-template-rows:auto minmax(0,1fr); width:100%; height:100%; max-height:none; overflow:hidden; margin:0; padding:.75rem; gap:.8rem; border-radius:24px; background:transparent; box-shadow:none; } .wbg-lightbox__media{ flex:none; min-height:0; padding:.75rem; border-radius:22px; } .wbg-lightbox__image{ max-height:min(44dvh, 420px); width:auto; height:auto; margin-inline:auto; } .wbg-lightbox__panel{ margin-top:0; min-height:0; scrollbar-width:thin; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:#fff; border-radius:28px; padding:1rem 1.05rem 1.2rem; box-shadow:var(--wbg-shadow); } .wbg-lightbox__panel-inner, .wbg-lightbox__copy{ overflow:visible; } .wbg-lightbox__footer{display:none !important;} .wbg-lightbox__nav{ display:flex; position:absolute; top:max(10px, env(safe-area-inset-top)); width:52px; height:52px; font-size:1.65rem; z-index:3; } .wbg-lightbox__nav--prev{left:10px;} .wbg-lightbox__nav--next{display:flex;right:10px;} .wbg-lightbox__close{ top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); width:52px; height:52px; font-size:1.85rem; z-index:3; } } .wbg-mobile-card__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0 0} .wbg-mobile-card__actions .wbg-btn{flex:1 1 180px;justify-content:center} /* 1.2.1 museum interaction */ .wbg-lightbox__media{position:relative;overflow:auto} .wbg-lightbox__zoom{position:absolute;right:16px;bottom:16px;z-index:3;border:0;background:rgba(255,255,255,.9);border-radius:999px;padding:.55rem .9rem;font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 24px rgba(17,24,20,.12)} .wbg-lightbox__media.is-zoomed{cursor:zoom-out;overflow:auto} .wbg-lightbox__media.is-zoomed .wbg-lightbox__image{transform:scale(1.45);transform-origin:center center;cursor:zoom-out} .wbg-lightbox__image{transition:transform .32s ease} .wbg-room[hidden]{display:none !important} .wbg-room{ position:fixed; inset:0; z-index:100050; } .wbg-room__backdrop{ position:absolute; inset:0; background:rgba(11,14,16,.82); backdrop-filter:blur(16px) saturate(110%); } .wbg-room__dialog{ position:relative; z-index:2; display:flex; flex-direction:column; min-height:100dvh; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); } .wbg-room__close{ position:absolute; top:max(18px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); z-index:5; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border:1px solid rgba(17,24,20,.08); border-radius:20px; background:rgba(255,255,255,.94); color:#1f2937; box-shadow:0 16px 36px rgba(17,24,20,.16); font-size:2rem; line-height:1; } .wbg-room__stage{ --wbg-room-floor-h:clamp(104px,14vh,164px); position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; grid-template-rows:minmax(0,1fr) var(--wbg-room-floor-h); border-radius:32px; overflow:hidden; background:#e9e5dd; box-shadow:0 30px 90px rgba(0,0,0,.24); isolation:isolate; } .wbg-room__stage::before, .wbg-room__stage::after, .wbg-room__floor::after{ content:""; position:absolute; display:block; pointer-events:none; } .wbg-room__stage::before{ inset:0; z-index:1; background:none; } .wbg-room__stage::after{ left:0; bottom:0; z-index:2; opacity:0; background-repeat:no-repeat; background-position:left bottom; background-size:contain; } .wbg-room__wall::before, .wbg-room__wall::after, .wbg-room__floor::before{ content:none; display:none; } .wbg-room__floor::after{ left:50%; top:-18px; z-index:1; width:min(38vw,540px); height:clamp(42px,8vh,98px); transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(31,41,55,.20) 0%, rgba(31,41,55,.09) 42%, rgba(31,41,55,0) 74%); filter:blur(15px); opacity:.74; } .wbg-room__wall{ position:relative; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden; padding:clamp(26px,5vh,54px) clamp(28px,6vw,86px) clamp(18px,3vh,32px); z-index:1; background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 12%, rgba(255,255,255,.58) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#f5f7f9 0%,#edf1f4 100%); background-repeat:no-repeat,no-repeat,no-repeat; background-position:center center,center top,center center; background-size:cover,cover,auto; } .wbg-room__floor{ position:relative; min-height:0; z-index:0; overflow:hidden; border-top:0; background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d7dee6 0%,#c6ced7 100%); background-repeat:no-repeat,no-repeat; background-position:center top,center center; background-size:cover,auto; } .wbg-room__artwork{ --wbg-room-scale:1; position:relative; z-index:2; display:block; width:auto; height:min(calc(var(--wbg-room-scale,1) * 54vh), 760px); transform:translateY(calc(var(--wbg-room-art-lift,0px) * -1)); max-width:min(72vw,980px); max-height:calc(100% - 10px); object-fit:contain; filter:drop-shadow(0 18px 24px rgba(14,18,19,.14)) drop-shadow(0 34px 44px rgba(14,18,19,.12)); } .wbg-room__toolbar{ position:absolute; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:4; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; width:min(640px,calc(100% - 40px)); padding:.68rem; border-radius:22px; border:1px solid rgba(255,255,255,.52); background:rgba(255,255,255,.84); backdrop-filter:blur(18px) saturate(110%); box-shadow:0 18px 48px rgba(0,0,0,.14); } .wbg-room__toolbar .wbg-btn{ min-width:0; min-height:54px; justify-content:center; border-radius:16px; border-color:transparent; background:transparent; color:#475569; font-weight:650; box-shadow:none; } .wbg-room__toolbar .wbg-btn.is-active{ background:#fff; color:#111827; border-color:rgba(17,24,20,.08); box-shadow:0 10px 24px rgba(17,24,20,.10); } .wbg-room__stage[data-scene="whitecube"]::before{ background:radial-gradient(circle at 50% 16%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 34%), linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 22%, rgba(31,41,55,.04) 100%); } .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 14%, rgba(255,255,255,.80) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#f7f8f8 0%,#eef1f3 100%); background-position:center center,center top,center center; background-size:cover,cover,auto; } .wbg-room__stage[data-scene="whitecube"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d5dce3 0%,#c2cbd4 100%); background-position:center top,center center; background-size:cover,auto; } .wbg-room__stage[data-scene="living"]::before{ background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 28%, rgba(72,42,18,.04) 100%); backdrop-filter:none; } .wbg-room__stage[data-scene="living"]::after{ z-index:3; opacity:1; left:clamp(38px,4vw,92px); bottom:clamp(4px,0.8vw,14px); width:calc(var(--wbg-room-prop-scale,1) * clamp(118px,7.4vw,176px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(186px,12.4vw,278px)); background-image:url("../img/room/living-rubber-real.png"); filter:drop-shadow(0 22px 20px rgba(0,0,0,.18)); } .wbg-room__stage[data-scene="living"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 78% 18%, rgba(255,255,255,.34) 0, rgba(255,255,255,0) 28%), linear-gradient(180deg,#f4ecdf 0%,#e6d9c7 100%); background-position:center center,center top,center center; background-size:cover,cover,auto; } .wbg-room__stage[data-scene="living"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d7bb93 0%,#caa77b 100%); background-position:center top,center center; background-size:cover,auto; } .wbg-room__stage[data-scene="studio"]::before{ background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 26%, rgba(15,23,42,.06) 100%); } .wbg-room__stage[data-scene="studio"]::after{ z-index:3; opacity:.96; left:clamp(30px,3.2vw,78px); bottom:clamp(8px,1vw,16px); width:calc(var(--wbg-room-prop-scale,1) * clamp(110px,6.6vw,168px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(256px,17vw,430px)); background-image:url("../img/room/studio-easel-real.png"); filter:drop-shadow(0 24px 22px rgba(0,0,0,.18)); } .wbg-room__stage[data-scene="studio"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 16%, rgba(255,255,255,.68) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#eef2f5 0%,#dde4ea 100%); background-position:center center,center top,center center; background-size:cover,cover,auto; } .wbg-room__stage[data-scene="studio"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#a9b3be 0%,#949eaa 100%); background-position:center top,center center; background-size:cover,auto; } .wbg-room[data-layout="compact"] .wbg-room__dialog{ padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) 8px; } .wbg-room[data-layout="compact"] .wbg-room__stage{ --wbg-room-floor-h:74px; border-radius:20px; } .wbg-room[data-layout="compact"] .wbg-room__wall{ padding:14px 14px 8px; } .wbg-room[data-layout="compact"] .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 38vh), 380px); max-width:min(44vw,380px); max-height:calc(100% - 2px); transform:translateY(calc(var(--wbg-room-art-lift,0px) * -1)); } .wbg-room[data-layout="compact"] .wbg-room__toolbar{ width:calc(100% - 16px); bottom:max(8px,env(safe-area-inset-bottom)); padding:6px; gap:6px; border-radius:18px; } .wbg-room[data-layout="compact"] .wbg-room__toolbar .wbg-btn{ min-height:42px; border-radius:14px; font-size:.86rem; padding:.45rem .35rem; } .wbg-room[data-layout="compact"] .wbg-room__close{ top:max(8px,env(safe-area-inset-top)); right:8px; width:50px; height:50px; border-radius:16px; } .wbg-room[data-layout="compact"] .wbg-room__stage::after{ left:12px; bottom:6px; } .wbg-room[data-layout="compact"] .wbg-room__stage[data-scene="living"]::after{ width:calc(var(--wbg-room-prop-scale,1) * 66px); height:calc(var(--wbg-room-prop-scale,1) * 108px); } .wbg-room[data-layout="compact"] .wbg-room__stage[data-scene="studio"]::after{ width:calc(var(--wbg-room-prop-scale,1) * 62px); height:calc(var(--wbg-room-prop-scale,1) * 138px); opacity:.92; } @media (max-width:1024px){ .wbg-room__dialog{ padding:max(12px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)) 12px; } .wbg-room__stage{ border-radius:24px; } .wbg-room__wall{ padding:24px 22px 16px; } .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 46vh), 580px); max-width:min(78vw,720px); max-height:calc(100% - 8px); } .wbg-room__toolbar{ width:calc(100% - 24px); gap:.6rem; bottom:max(12px,env(safe-area-inset-bottom)); } .wbg-room__toolbar .wbg-btn{ min-height:48px; font-size:.94rem; padding:.6rem .5rem; } .wbg-room__close{ top:max(12px,env(safe-area-inset-top)); right:12px; width:52px; height:52px; border-radius:18px; } } @media (max-width:782px){ .wbg-room__stage{ --wbg-room-floor-h:96px; border-radius:22px; } .wbg-room__wall{ padding:72px 18px 18px; } .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 50vh), 620px); max-width:min(84vw,600px); max-height:calc(100% - 8px); } .wbg-room__toolbar{ width:calc(100% - 16px); gap:.55rem; padding:8px; border-radius:20px; } .wbg-room__toolbar .wbg-btn{ min-height:46px; border-radius:14px; font-size:.95rem; } .wbg-room__stage[data-scene="living"]::after{ left:12px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 76px); height:calc(var(--wbg-room-prop-scale,1) * 126px); } .wbg-room__stage[data-scene="studio"]::after{ left:10px; bottom:10px; width:calc(var(--wbg-room-prop-scale,1) * 76px); height:calc(var(--wbg-room-prop-scale,1) * 170px); } } @media (min-width:1440px) and (min-height:820px){ .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 60vh), 860px); max-width:min(68vw,1120px); max-height:calc(100% - 16px); } .wbg-room__stage[data-scene="living"]::after{ width:calc(var(--wbg-room-prop-scale,1) * clamp(132px,8vw,190px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(206px,13.6vw,294px)); } .wbg-room__stage[data-scene="studio"]::after{ width:calc(var(--wbg-room-prop-scale,1) * clamp(122px,6.8vw,184px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(282px,16vw,446px)); } } @supports not (height: 100dvh){ .wbg-room__dialog{ min-height:100vh; } } /* 1.4.3 room realism + proportion refinement */ @media (max-width: 932px) and (orientation: landscape){ .wbg-room__dialog{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) 8px;} .wbg-room__stage{--wbg-room-floor-h:80px;border-radius:20px;} .wbg-room__wall{padding:58px 14px 10px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 39vh), 330px);max-width:min(46vw,360px);} .wbg-room__toolbar{width:calc(100% - 16px);padding:6px;gap:5px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:18px;} .wbg-room__toolbar .wbg-btn{min-height:40px;border-radius:13px;font-size:.82rem;padding:.38rem .2rem;} .wbg-room__close{width:48px;height:48px;border-radius:16px;top:max(8px,env(safe-area-inset-top));right:8px;} } @media (max-width: 767.98px) and (orientation: portrait){ .wbg-room__stage{--wbg-room-floor-h:92px;} .wbg-room__wall{padding:78px 16px 16px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 46vh), 500px);max-width:min(86vw,560px);} .wbg-room__toolbar{width:calc(100% - 14px);padding:7px;gap:6px;} .wbg-room__toolbar .wbg-btn{min-height:44px;font-size:.9rem;} .wbg-room__stage[data-scene="living"]::after{left:6px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 54px);height:calc(var(--wbg-room-prop-scale,1) * 92px);} .wbg-room__stage[data-scene="studio"]::after{left:6px;bottom:10px;width:calc(var(--wbg-room-prop-scale,1) * 60px);height:calc(var(--wbg-room-prop-scale,1) * 148px);} } /* 1.4.4 scene realism + proportional refinement */ .wbg-room__floor::after{ width:min(34vw,500px); height:clamp(36px,7vh,82px); background:radial-gradient(circle, rgba(31,41,55,.16) 0%, rgba(31,41,55,.08) 40%, rgba(31,41,55,0) 76%); filter:blur(18px); opacity:.62; } .wbg-room__stage[data-scene="living"]::after{ left:clamp(28px,3vw,64px); bottom:clamp(6px,0.8vw,14px); width:calc(var(--wbg-room-prop-scale,1) * clamp(94px,5.8vw,138px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(150px,9.5vw,220px)); filter:drop-shadow(0 18px 18px rgba(0,0,0,.15)); } .wbg-room__stage[data-scene="studio"]::after{ left:clamp(34px,3.2vw,72px); bottom:clamp(6px,0.8vw,14px); width:calc(var(--wbg-room-prop-scale,1) * clamp(92px,5.6vw,136px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(222px,13vw,338px)); filter:drop-shadow(0 18px 18px rgba(0,0,0,.16)); } .wbg-room__stage[data-scene="living"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 68% 18%, rgba(255,255,255,.26) 0, rgba(255,255,255,0) 28%), linear-gradient(180deg,#f1e9dc 0%,#e6d9c7 100%); } .wbg-room__stage[data-scene="studio"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 52% 16%, rgba(255,255,255,.50) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#eef2f5 0%,#dce3ea 100%); } .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 14%, rgba(255,255,255,.70) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#f7f8f8 0%,#eef1f3 100%); } @media (max-width: 932px) and (orientation: landscape){ .wbg-room__stage[data-scene="living"]::after{ left:8px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 50px); height:calc(var(--wbg-room-prop-scale,1) * 82px); } .wbg-room__stage[data-scene="studio"]::after{ left:8px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 52px); height:calc(var(--wbg-room-prop-scale,1) * 128px); } } @media (max-width: 767.98px) and (orientation: portrait){ .wbg-room__stage{--wbg-room-floor-h:88px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 44vh), 470px);max-width:min(84vw,540px);} .wbg-room__stage[data-scene="living"]::after{ left:8px; bottom:10px; width:calc(var(--wbg-room-prop-scale,1) * 46px); height:calc(var(--wbg-room-prop-scale,1) * 74px); } .wbg-room__stage[data-scene="studio"]::after{ left:10px; bottom:10px; width:calc(var(--wbg-room-prop-scale,1) * 42px); height:calc(var(--wbg-room-prop-scale,1) * 108px); } } /* 1.5.0 room realism refinement */ .wbg-room__dialog{overflow:hidden;} .wbg-room__toolbar{overflow:hidden;overscroll-behavior-x:none;} .wbg-room__toolbar::-webkit-scrollbar{display:none;} .wbg-room__toolbar .wbg-btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall::before, .wbg-room__stage[data-scene="living"] .wbg-room__wall::before, .wbg-room__stage[data-scene="studio"] .wbg-room__wall::before, .wbg-room__stage[data-scene="living"] .wbg-room__floor::before, .wbg-room__stage[data-scene="studio"] .wbg-room__floor::before{ content:""; position:absolute; inset:0; display:block; pointer-events:none; } .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall::before{ z-index:0; background: linear-gradient(90deg, rgba(31,41,55,.04) 0%, rgba(31,41,55,0) 12%, rgba(31,41,55,0) 88%, rgba(31,41,55,.03) 100%), radial-gradient(circle at 50% 12%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%); opacity:.52; } .wbg-room__stage[data-scene="living"] .wbg-room__wall::before{ z-index:0; background: radial-gradient(circle at 50% 16%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 42%), linear-gradient(90deg, rgba(76,52,26,.035) 0%, rgba(76,52,26,0) 16%, rgba(76,52,26,0) 84%, rgba(76,52,26,.03) 100%); opacity:.45; } .wbg-room__stage[data-scene="studio"] .wbg-room__wall::before{ z-index:0; background: radial-gradient(circle at 50% 14%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 40%), linear-gradient(90deg, rgba(31,41,55,.035) 0%, rgba(31,41,55,0) 14%, rgba(31,41,55,0) 86%, rgba(31,41,55,.03) 100%); opacity:.46; } .wbg-room__stage[data-scene="living"] .wbg-room__floor::before{ z-index:1; background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 24%), radial-gradient(circle at 50% 2%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 54%); opacity:.48; } .wbg-room__stage[data-scene="studio"] .wbg-room__floor::before{ z-index:1; background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 24%), radial-gradient(circle at 50% 0%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 50%); opacity:.42; } .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 56vh), 780px); max-width:min(76vw,1000px); } .wbg-room__stage[data-scene="living"]::after{ left:clamp(18px,2.4vw,52px); bottom:clamp(8px,0.8vw,14px); width:calc(var(--wbg-room-prop-scale,1) * clamp(80px,4.8vw,120px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(132px,8.2vw,198px)); opacity:.94; } .wbg-room__stage[data-scene="studio"]::after{ left:clamp(18px,2.4vw,54px); bottom:clamp(8px,0.8vw,14px); width:calc(var(--wbg-room-prop-scale,1) * clamp(78px,4.7vw,118px)); height:calc(var(--wbg-room-prop-scale,1) * clamp(198px,11.6vw,308px)); opacity:.92; } @media (max-width:1024px){ .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 49vh), 620px); max-width:min(82vw,760px); } } @media (max-width: 932px) and (orientation: landscape){ .wbg-room__stage{--wbg-room-floor-h:76px;} .wbg-room__wall{padding:56px 12px 8px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 43vh), 356px);max-width:min(54vw,430px);} .wbg-room__stage[data-scene="living"]::after{ left:10px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 42px); height:calc(var(--wbg-room-prop-scale,1) * 68px); } .wbg-room__stage[data-scene="studio"]::after{ left:10px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 40px); height:calc(var(--wbg-room-prop-scale,1) * 102px); } } @media (max-width: 767.98px) and (orientation: portrait){ .wbg-room__stage{--wbg-room-floor-h:84px;} .wbg-room__wall{padding:72px 14px 14px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 47vh), 492px);max-width:min(86vw,560px);} .wbg-room__stage[data-scene="living"]::after{ left:10px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 36px); height:calc(var(--wbg-room-prop-scale,1) * 60px); opacity:.88; } .wbg-room__stage[data-scene="studio"]::after{ left:10px; bottom:8px; width:calc(var(--wbg-room-prop-scale,1) * 34px); height:calc(var(--wbg-room-prop-scale,1) * 92px); opacity:.86; } } /* 1.5.0 room navigation + realism */ .wbg-room__meta{ position:absolute; top:max(18px,env(safe-area-inset-top)); left:18px; z-index:4; max-width:min(52vw,560px); pointer-events:none; } .wbg-room__status{ display:inline-flex; align-items:center; gap:.7rem; padding:.72rem .95rem; border-radius:18px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.78); backdrop-filter:blur(16px) saturate(115%); box-shadow:0 14px 32px rgba(17,24,39,.10); color:#0f172a; } .wbg-room__status-title{ font-weight:700; letter-spacing:.01em; max-width:28ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wbg-room__status-counter{ color:#64748b; font-weight:650; white-space:nowrap; } .wbg-room__nav{ position:absolute; top:50%; z-index:4; width:56px; height:56px; transform:translateY(-50%); border-radius:999px; border:1px solid rgba(255,255,255,.62); background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(112%); box-shadow:0 18px 42px rgba(15,23,42,.12); color:#111827; font-size:2rem; line-height:1; display:grid; place-items:center; } .wbg-room__nav:hover{background:rgba(255,255,255,.94);} .wbg-room__nav--prev{left:18px;} .wbg-room__nav--next{right:18px;} .wbg-room__wall{ background-position:center center,center top,center center; background-size:cover,cover,cover; } .wbg-room__floor{ background-position:center top,center center; background-size:cover,cover; } .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 58vh), 820px); max-width:min(78vw,1040px); filter:drop-shadow(0 18px 30px rgba(10,14,18,.12)) drop-shadow(0 32px 52px rgba(10,14,18,.10)); } .wbg-room__stage[data-scene="living"]::after, .wbg-room__stage[data-scene="studio"]::after{ opacity:.88; } .wbg-room__stage[data-scene="living"]::after{ left:clamp(14px,2vw,42px); bottom:clamp(8px,0.9vw,16px); filter:drop-shadow(0 16px 18px rgba(0,0,0,.14)); } .wbg-room__stage[data-scene="studio"]::after{ left:clamp(16px,2.2vw,46px); bottom:clamp(10px,1vw,18px); filter:drop-shadow(0 16px 18px rgba(0,0,0,.15)); } .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 12%, rgba(255,255,255,.80) 0, rgba(255,255,255,0) 36%), linear-gradient(180deg,#f8f9fa 0%,#eef2f4 100%); } .wbg-room__stage[data-scene="whitecube"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d8dfe6 0%,#c4cdd6 100%); } .wbg-room__stage[data-scene="living"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 52% 16%, rgba(255,255,255,.20) 0, rgba(255,255,255,0) 40%), linear-gradient(180deg,#f2ebdf 0%,#e7dccb 100%); } .wbg-room__stage[data-scene="living"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d9c19b 0%,#caa980 100%); } .wbg-room__stage[data-scene="studio"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 14%, rgba(255,255,255,.60) 0, rgba(255,255,255,0) 38%), linear-gradient(180deg,#edf2f6 0%,#dee5ec 100%); } .wbg-room__stage[data-scene="studio"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#b5bec8 0%,#9ca6b1 100%); } @media (max-width: 1024px){ .wbg-room__meta{max-width:min(60vw,460px);} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 50vh), 660px);max-width:min(84vw,820px);} .wbg-room__nav{width:50px;height:50px;font-size:1.8rem;} } @media (max-width: 932px) and (orientation: landscape){ .wbg-room__meta{top:10px;left:10px;max-width:42vw;} .wbg-room__status{padding:.54rem .74rem;border-radius:15px;gap:.45rem;} .wbg-room__status-title{font-size:.84rem;max-width:18ch;} .wbg-room__status-counter{font-size:.8rem;} .wbg-room__nav{width:42px;height:42px;font-size:1.45rem;top:calc(50% - 8px);} .wbg-room__nav--prev{left:8px;} .wbg-room__nav--next{right:8px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 43vh), 360px);max-width:min(56vw,440px);} .wbg-room__stage[data-scene="living"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 34px);height:calc(var(--wbg-room-prop-scale,1) * 56px);} .wbg-room__stage[data-scene="studio"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 32px);height:calc(var(--wbg-room-prop-scale,1) * 82px);} } @media (max-width: 767.98px) and (orientation: portrait){ .wbg-room__meta{display:block;top:auto;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100% - 28px);} .wbg-room__status{padding:.42rem .68rem;border-radius:14px;gap:.4rem;background:rgba(255,255,255,.76);} .wbg-room__status-title{display:none;} .wbg-room__status-counter{font-size:.82rem;color:#475569;} .wbg-room__nav{display:none;} .wbg-room__stage{--wbg-room-floor-h:86px;} .wbg-room__wall{padding:70px 14px 14px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 48vh), 510px);max-width:min(86vw,560px);} .wbg-room__stage[data-scene="living"]::after{left:8px;bottom:6px;width:calc(var(--wbg-room-prop-scale,1) * 30px);height:calc(var(--wbg-room-prop-scale,1) * 50px);opacity:.78;} .wbg-room__stage[data-scene="studio"]::after{left:8px;bottom:6px;width:calc(var(--wbg-room-prop-scale,1) * 28px);height:calc(var(--wbg-room-prop-scale,1) * 74px);opacity:.78;} } /* 1.5.1 realism + room browsing polish */ .wbg-room__status{background:rgba(255,255,255,.84);box-shadow:0 12px 28px rgba(17,24,39,.10);} .wbg-room__status-title{font-weight:680;} .wbg-room__nav{background:rgba(255,255,255,.88);box-shadow:0 14px 30px rgba(15,23,42,.10);} .wbg-room__wall{background-size:cover,cover,cover;background-position:center center,center top,center center;} .wbg-room__floor{background-size:cover,cover;background-position:center top,center center;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 57vh), 800px);max-width:min(76vw,1000px);filter:drop-shadow(0 16px 26px rgba(10,14,18,.11)) drop-shadow(0 28px 42px rgba(10,14,18,.09));} .wbg-room__stage[data-scene="living"]::after{left:clamp(18px,2.2vw,52px);bottom:clamp(6px,.8vw,14px);width:calc(var(--wbg-room-prop-scale,1) * clamp(84px,5.2vw,124px));height:calc(var(--wbg-room-prop-scale,1) * clamp(132px,8.4vw,188px));opacity:.86;filter:drop-shadow(0 14px 16px rgba(0,0,0,.14));} .wbg-room__stage[data-scene="studio"]::after{left:clamp(18px,2.2vw,50px);bottom:clamp(8px,.9vw,14px);width:calc(var(--wbg-room-prop-scale,1) * clamp(72px,4.4vw,108px));height:calc(var(--wbg-room-prop-scale,1) * clamp(152px,9.8vw,236px));opacity:.88;filter:drop-shadow(0 14px 16px rgba(0,0,0,.14));} .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall{background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 12%, rgba(255,255,255,.72) 0, rgba(255,255,255,0) 34%), linear-gradient(180deg,#f7f9fa 0%,#eef2f5 100%);} .wbg-room__stage[data-scene="whitecube"] .wbg-room__floor{background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d7dfe6 0%,#c3ccd5 100%);} .wbg-room__stage[data-scene="living"] .wbg-room__wall{background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 16%, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 42%), linear-gradient(180deg,#f1eadf 0%,#e5dbc8 100%);} .wbg-room__stage[data-scene="living"] .wbg-room__floor{background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d8c19a 0%,#c9a87b 100%);} .wbg-room__stage[data-scene="studio"] .wbg-room__wall{background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 16%, rgba(255,255,255,.46) 0, rgba(255,255,255,0) 38%), linear-gradient(180deg,#eef2f6 0%,#dde4ea 100%);} .wbg-room__stage[data-scene="studio"] .wbg-room__floor{background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#b3bcc6 0%,#99a3ae 100%);} @media (max-width:1024px){.wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 50vh), 640px);max-width:min(84vw,800px);}} @media (max-width: 932px) and (orientation: landscape){.wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 42vh), 350px);max-width:min(54vw,430px);} .wbg-room__stage[data-scene="living"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 28px);height:calc(var(--wbg-room-prop-scale,1) * 46px);} .wbg-room__stage[data-scene="studio"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 24px);height:calc(var(--wbg-room-prop-scale,1) * 62px);} } @media (max-width: 767.98px) and (orientation: portrait){.wbg-room__meta{bottom:calc(92px + env(safe-area-inset-bottom));}.wbg-room__status{padding:.44rem .7rem;border-radius:15px;}.wbg-room__stage{--wbg-room-floor-h:90px;}.wbg-room__wall{padding:74px 14px 14px;}.wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 47vh), 500px);max-width:min(86vw,560px);} .wbg-room__stage[data-scene="living"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 24px);height:calc(var(--wbg-room-prop-scale,1) * 40px);opacity:.74;} .wbg-room__stage[data-scene="studio"]::after{left:8px;bottom:8px;width:calc(var(--wbg-room-prop-scale,1) * 22px);height:calc(var(--wbg-room-prop-scale,1) * 56px);opacity:.78;}} /* 1.6.0 scene configurator + fullscreen refinement */ .wbg-room__dialog{ padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); } .wbg-room__stage{ --wbg-room-prop-layout-scale:1; border-radius:22px; box-shadow:0 24px 72px rgba(0,0,0,.22); } .wbg-room__wall{ padding:clamp(18px,4.2vh,44px) clamp(20px,4.8vw,68px) clamp(12px,2vh,24px); } .wbg-room__artwork{ height:min(calc(var(--wbg-room-scale,1) * 58vh), 840px); max-width:min(80vw,1080px); filter:drop-shadow(0 18px 26px rgba(14,18,19,.12)) drop-shadow(0 34px 54px rgba(14,18,19,.10)); } .wbg-room__close{ top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); width:54px; height:54px; border-radius:18px; } .wbg-room__meta{ top:max(10px,env(safe-area-inset-top)); left:10px; } .wbg-room__toolbar{ width:min(540px,calc(100% - 20px)); bottom:max(10px,env(safe-area-inset-bottom)); padding:.56rem; gap:.55rem; border-radius:20px; } .wbg-room__toolbar .wbg-btn{ min-height:50px; border-radius:14px; } .wbg-room__stage::after{ opacity:var(--wbg-room-prop-opacity,.94); background-image:var(--wbg-room-prop-image, none); width:calc(var(--wbg-room-prop-scale,1) * var(--wbg-room-prop-layout-scale,1) * var(--wbg-room-prop-width,0px)); height:calc(var(--wbg-room-prop-scale,1) * var(--wbg-room-prop-layout-scale,1) * var(--wbg-room-prop-height,0px)); left:var(--wbg-room-prop-left,24px); bottom:var(--wbg-room-prop-bottom,12px); filter:drop-shadow(0 16px 16px rgba(0,0,0,.16)); } .wbg-room__stage:not([data-has-prop])::after{ opacity:0 !important; width:0 !important; height:0 !important; } .wbg-room__stage[data-scene="whitecube"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 50% 14%, rgba(255,255,255,.62) 0, rgba(255,255,255,0) 36%), linear-gradient(180deg,#f8f9fa 0%,#eef2f4 100%); } .wbg-room__stage[data-scene="living"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 70% 16%, rgba(255,255,255,.18) 0, rgba(255,255,255,0) 32%), linear-gradient(180deg,#efe6d7 0%,#e4d6c2 100%); } .wbg-room__stage[data-scene="living"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#d8c094 0%,#cda777 100%); } .wbg-room__stage[data-scene="living"] .wbg-room__floor::before{ background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 52%), linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(0,0,0,.04) 100%); opacity:.58; } .wbg-room__stage[data-scene="studio"] .wbg-room__wall{ background-image:var(--wbg-room-bg-image), radial-gradient(circle at 48% 14%, rgba(255,255,255,.48) 0, rgba(255,255,255,0) 36%), linear-gradient(180deg,#eef2f5 0%,#dde4ea 100%); } .wbg-room__stage[data-scene="studio"] .wbg-room__floor{ background-image:var(--wbg-room-floor-image), linear-gradient(180deg,#adb7c2 0%,#98a3af 100%); } .wbg-room__stage[data-scene="studio"] .wbg-room__floor::before{ background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%), linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(0,0,0,.04) 100%); opacity:.52; } .wbg-room__status{ border-radius:16px; padding:.68rem .88rem; } @media (max-width: 1024px){ .wbg-room__dialog{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) 8px;} .wbg-room__stage{border-radius:20px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 52vh), 660px);max-width:min(86vw,780px);} .wbg-room__toolbar{width:calc(100% - 16px);} } @media (max-width: 932px) and (orientation: landscape){ .wbg-room__stage{--wbg-room-floor-h:74px;--wbg-room-prop-layout-scale:.84;border-radius:18px;} .wbg-room__wall{padding:54px 10px 8px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 44vh), 372px);max-width:min(58vw,460px);} .wbg-room__toolbar{width:calc(100% - 12px);padding:.45rem;gap:.45rem;border-radius:18px;} .wbg-room__toolbar .wbg-btn{min-height:42px;font-size:.84rem;} .wbg-room__close{width:48px;height:48px;border-radius:16px;} .wbg-room__status{padding:.56rem .75rem;gap:.5rem;} .wbg-room__status-title{max-width:16ch;} } @media (max-width: 767.98px) and (orientation: portrait){ .wbg-room__stage{--wbg-room-floor-h:80px;--wbg-room-prop-layout-scale:.76;border-radius:18px;} .wbg-room__wall{padding:66px 12px 12px;} .wbg-room__artwork{height:min(calc(var(--wbg-room-scale,1) * 48vh), 520px);max-width:min(88vw,580px);} .wbg-room__toolbar{width:calc(100% - 12px);padding:.48rem;gap:.45rem;border-radius:18px;} .wbg-room__toolbar .wbg-btn{min-height:44px;font-size:.92rem;} .wbg-room__status{padding:.52rem .7rem;} .wbg-room__status-title{display:none;} .wbg-room__status-counter{font-size:1.2rem;color:#334155;} } /* 1.6.1 fullscreen lightbox polish */ .wbg-lightbox__zoom{ color:#fff; background:rgba(17,24,20,.82); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .wbg-lightbox__zoom[aria-pressed="true"]{ background:rgba(210,132,0,.96); color:#fff; } @media (max-width: 1023.98px){ .wbg-lightbox__grid{ padding:.68rem; border-radius:22px; } .wbg-lightbox__media{ border-radius:18px; } .wbg-lightbox__close{ width:50px; height:50px; font-size:1.9rem; background:rgba(255,255,255,.94); border:1px solid rgba(19,24,27,.08); } .wbg-lightbox__nav{ width:48px; height:48px; font-size:1.55rem; background:rgba(255,255,255,.92); border:1px solid rgba(19,24,27,.08); top:clamp(112px, 23dvh, 248px); transform:translateY(-50%); box-shadow:0 14px 30px rgba(17,24,20,.16); } .wbg-lightbox__nav--prev{left:10px !important;} .wbg-lightbox__nav--next{right:10px !important;} .wbg-lightbox__zoom{ right:12px; bottom:12px; padding:.62rem .96rem; font-size:.8rem; font-weight:700; letter-spacing:.05em; } } @media (max-width: 767.98px){ .wbg-lightbox__shell{ width:min(95vw, 680px); } .wbg-lightbox__grid{ padding:.62rem; border-radius:20px; gap:.7rem; } .wbg-lightbox__media{ padding:.62rem; border-radius:18px; } .wbg-lightbox__nav, .wbg-lightbox__close{ width:46px; height:46px; } .wbg-lightbox__nav{ top:clamp(98px, 22dvh, 220px); font-size:1.45rem; } .wbg-lightbox__nav--prev{left:8px !important;} .wbg-lightbox__nav--next{right:8px !important;} .wbg-lightbox__close{ top:max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); } .wbg-lightbox__zoom{ right:10px; bottom:10px; min-width:104px; text-align:center; } } /* 1.6.2 fullscreen controls refinement */ .wbg-lightbox__zoom{ display:inline-flex; align-items:center; justify-content:center; min-width:118px; color:#fff !important; background:rgba(18,24,28,.92) !important; border:1px solid rgba(255,255,255,.16) !important; text-shadow:none; } .wbg-lightbox__zoom[aria-pressed="true"]{ background:rgba(212,135,0,.98) !important; color:#fff !important; } .wbg-lightbox.is-zoomed .wbg-lightbox__nav{ opacity:.22; pointer-events:none; } .wbg-lightbox.is-zoomed .wbg-lightbox__close{ opacity:.78; } @media (min-width:768px){ .wbg-lightbox__shell{ width:min(1560px,97vw); } .wbg-lightbox__grid{ padding:.9rem 1rem .95rem; border-radius:28px; } .wbg-lightbox__media{ padding:.85rem; border-radius:22px; } .wbg-lightbox__close, .wbg-lightbox__nav{ width:54px; height:54px; } .wbg-lightbox__nav{ top:50% !important; transform:translateY(-54%); background:rgba(255,255,255,.95); border:1px solid rgba(18,24,28,.08); box-shadow:0 14px 28px rgba(17,24,20,.14); } .wbg-lightbox__nav--prev{left:12px !important;} .wbg-lightbox__nav--next{right:12px !important;} .wbg-lightbox__zoom{ right:14px; bottom:14px; min-width:124px; } } @media (max-width:767.98px){ .wbg-lightbox__dialog{ padding:max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); } .wbg-lightbox__shell{ width:min(96vw,720px); height:auto; max-height:none; padding-top:0; } .wbg-lightbox__grid{ grid-template-rows:auto auto; max-height:none; overflow:visible; padding:.68rem; gap:.72rem; border-radius:26px; } .wbg-lightbox__media{ overflow:visible; padding:.72rem; border-radius:22px; } .wbg-lightbox__image{ max-height:min(48svh, 460px); } .wbg-lightbox__panel{ border-radius:26px; padding:1rem 1.05rem 1.1rem; } .wbg-lightbox__close, .wbg-lightbox__nav{ width:48px; height:48px; } .wbg-lightbox__close{ top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); z-index:7; } .wbg-lightbox__nav{ top:clamp(152px, 24svh, 244px) !important; transform:translateY(-50%); z-index:6; background:rgba(255,255,255,.96); border:1px solid rgba(18,24,28,.08); box-shadow:0 12px 24px rgba(17,24,20,.14); } .wbg-lightbox__nav--prev{left:-2px !important;} .wbg-lightbox__nav--next{right:-2px !important;} .wbg-lightbox__zoom{ right:12px; bottom:12px; min-width:112px; padding:.68rem 1rem; font-size:.78rem; z-index:5; } } /* 1.6.3 mobile/fullscreen control cleanup */ .wbg-lightbox__status{ position:absolute; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); z-index:7; display:inline-flex; align-items:center; gap:.55rem; max-width:min(42vw,360px); padding:.62rem .82rem; border-radius:18px; background:rgba(255,255,255,.92); border:1px solid rgba(17,24,20,.08); box-shadow:0 14px 30px rgba(17,24,20,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .wbg-lightbox__status-title{ font-weight:720; font-size:.92rem; line-height:1.15; color:#111827; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wbg-lightbox__status-counter{ font-weight:650; font-size:.88rem; color:#64748b; white-space:nowrap; } .wbg-lightbox__tools{ display:flex; justify-content:flex-end; margin:0 0 .85rem; } .wbg-lightbox__tools .wbg-lightbox__zoom{ position:static; min-width:116px; padding:.7rem 1rem; font-size:.8rem; font-weight:700; border-radius:999px; } .wbg-lightbox__media .wbg-lightbox__zoom{position:absolute;} .wbg-lightbox__panel .wbg-lightbox__zoom{position:static;} .wbg-lightbox__footer{display:none !important;} .wbg-room__meta{ left:max(14px,env(safe-area-inset-left) + 6px); max-width:min(46vw,420px); z-index:6; } @media (min-width:768px){ .wbg-lightbox__close{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));} .wbg-lightbox__nav{top:50% !important;transform:translateY(-50%);} .wbg-lightbox__nav--prev{left:14px !important;} .wbg-lightbox__nav--next{right:14px !important;} } @media (max-width:767.98px){ .wbg-lightbox__dialog{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));} .wbg-lightbox__status{ top:max(10px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); right:auto; max-width:calc(100% - 92px); padding:.54rem .72rem; border-radius:16px; } .wbg-lightbox__status-title{font-size:.84rem;max-width:12ch;} .wbg-lightbox__status-counter{font-size:.82rem;} .wbg-lightbox__shell{width:min(96vw,720px);} .wbg-lightbox__grid{padding:.58rem;gap:.64rem;border-radius:22px;} .wbg-lightbox__media{padding:.58rem;border-radius:18px;} .wbg-lightbox__image{max-height:min(48svh,460px);} .wbg-lightbox__panel{padding:.92rem .96rem 1rem;border-radius:22px;} .wbg-lightbox__tools{justify-content:flex-end;margin:0 0 .75rem;} .wbg-lightbox__tools .wbg-lightbox__zoom{min-width:108px;padding:.64rem .9rem;font-size:.76rem;} .wbg-lightbox__nav{display:none !important;} .wbg-lightbox__close{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:50px;height:50px;border-radius:18px;z-index:8;} .wbg-room__meta{left:max(10px,env(safe-area-inset-left) + 6px);max-width:calc(100% - 90px);} .wbg-room__status{padding:.5rem .68rem;border-radius:15px;} .wbg-room__status-counter{font-size:1rem;} } /* 1.6.4 lightbox content scroll stabilisation */ @media (min-width:768px){ .wbg-lightbox__grid{ align-items:stretch; max-height:min(86vh, 920px); overflow:hidden; } .wbg-lightbox__media{ min-height:0; max-height:100%; } .wbg-lightbox__panel{ align-self:stretch; min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .wbg-lightbox__panel-inner{ min-height:100%; display:flex; flex-direction:column; align-items:stretch; } } @media (max-width:767.98px){ .wbg-lightbox{ overflow:hidden; } .wbg-lightbox__dialog{ display:flex; align-items:flex-start; justify-content:center; min-height:100dvh; height:100dvh; overflow:hidden; padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); } .wbg-lightbox__status{ top:max(14px, env(safe-area-inset-top)); left:max(14px, env(safe-area-inset-left)); max-width:calc(100% - 104px); } .wbg-lightbox__shell{ position:relative; width:min(96vw,720px); height:calc(100dvh - max(20px, env(safe-area-inset-top) + 10px) - max(20px, env(safe-area-inset-bottom) + 10px)); max-height:calc(100dvh - max(20px, env(safe-area-inset-top) + 10px) - max(20px, env(safe-area-inset-bottom) + 10px)); } .wbg-lightbox__grid{ display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:100%; max-height:none; overflow:hidden; padding:.58rem; gap:.64rem; border-radius:22px; } .wbg-lightbox__media{ min-height:0; overflow:hidden; } .wbg-lightbox__image{ max-height:min(44dvh, 420px); } .wbg-lightbox__panel{ min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:.92rem .96rem 1rem; padding-bottom:max(1rem, env(safe-area-inset-bottom)); } .wbg-lightbox__panel-inner{ min-height:100%; display:flex; flex-direction:column; align-items:stretch; } } /* 1.6.5 lightbox panel body scroll hardening */ .wbg-lightbox__panel{ display:flex; flex-direction:column; min-height:0; overflow:hidden !important; } .wbg-lightbox__panel-inner{ display:flex; flex-direction:column; min-height:0; height:100%; } .wbg-lightbox__panel-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:thin; padding-right:2px; } .wbg-lightbox__panel-inner.is-compact .wbg-lightbox__panel-body{ overflow:hidden; } @media (min-width:768px){ .wbg-lightbox__panel{ max-height:100%; } .wbg-lightbox__panel-body{ padding-bottom:.25rem; } } @media (max-width:767.98px){ .wbg-lightbox__panel{ height:100%; max-height:100%; } .wbg-lightbox__panel-inner{ min-height:100%; } .wbg-lightbox__panel-body{ padding-bottom:max(.9rem, env(safe-area-inset-bottom)); } } /* 1.7.4 visible work actions restore */ .wbg-slide__quick-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.85rem; justify-content:flex-start; } .wbg-slide__quick-actions .wbg-btn{ min-width:170px; justify-content:center; } @media (max-width: 1024px){ .wbg-slide__quick-actions{ justify-content:center; } } /* 1.8.0 AR Layer */ .wbg-btn--ar{ background:linear-gradient(135deg,#ba5b2f 0%,#d57a42 100%); border-color:rgba(186,91,47,.32); color:#fff; } .wbg-ar[hidden]{display:none!important} .wbg-ar{position:fixed;inset:0;z-index:100000;width:100vw;height:100dvh} .wbg-ar__backdrop{position:absolute;inset:0;background:rgba(17,19,18,.58);backdrop-filter:blur(14px)} .wbg-ar__dialog{position:relative;z-index:1;width:min(1040px,94vw);min-height:min(760px,88dvh);margin:max(1rem,env(safe-area-inset-top)) auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1rem;background:#fff;border:1px solid rgba(255,255,255,.55);border-radius:32px;padding:clamp(1rem,2vw,1.6rem);box-shadow:0 28px 90px rgba(0,0,0,.24)} .wbg-ar__close{position:absolute;top:.9rem;right:.9rem;z-index:2;width:46px;height:46px;border:1px solid var(--wbg-line);border-radius:999px;background:#fff;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:var(--wbg-shadow-soft)} .wbg-ar__header{padding-right:3.25rem}.wbg-ar__eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wbg-muted);font-weight:700}.wbg-ar__title{margin:.2rem 0 .4rem;font-size:clamp(1.8rem,4vw,3.2rem);line-height:.95;letter-spacing:-.045em}.wbg-ar__hint{margin:0;color:var(--wbg-muted);line-height:1.55} .wbg-ar__viewer{min-height:360px;border:1px solid var(--wbg-line);border-radius:24px;background:linear-gradient(180deg,#fbfaf7 0%,#f1f0ea 100%);overflow:hidden;display:grid;place-items:center} .wbg-ar__viewer model-viewer{display:block;width:100%;height:min(58vh,560px);background:transparent}.wbg-ar__loading,.wbg-ar__fallback{padding:2rem;text-align:center;color:var(--wbg-muted);line-height:1.6}.wbg-ar__actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:flex-start}.wbg-ar__quicklook img{width:1px;height:1px;opacity:0;position:absolute;pointer-events:none}.wbg-ar__slot-button{position:absolute;right:1rem;bottom:1rem} @media (max-width:767.98px){.wbg-ar{overflow:auto}.wbg-ar__dialog{width:min(94vw,680px);min-height:calc(100dvh - 1.6rem);margin:.8rem auto;padding:.85rem;border-radius:24px}.wbg-ar__viewer{min-height:300px}.wbg-ar__viewer model-viewer{height:48dvh}.wbg-ar__title{font-size:clamp(2rem,8vw,3rem)}.wbg-ar__actions .wbg-btn{width:100%;justify-content:center}} /* ========================================================================= 1.8.6 — "Im Raum" view: refined title pill + navigation buttons Consolidated and appended last, so it cleanly supersedes the layered status/nav overrides accumulated across earlier versions. Goals: smaller, high-quality glass title chip (desktop + mobile) and softer, more tactile prev/next buttons. 1.8.8 — fix: the meta container kept a stale transform:translateX(-50%) from an old portrait rule, which pushed the title/counter pill off the left edge. Position is now reset explicitly (transform/bottom/right). ========================================================================= */ .wbg-room__meta{ top:max(14px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:auto; bottom:auto; transform:none; max-width:min(48vw,440px); z-index:6; } .wbg-room__status{ gap:.5rem; padding:.4rem .42rem .4rem .8rem; border-radius:13px; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); box-shadow:0 8px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.7); } .wbg-room__status-title{ font-size:.82rem; line-height:1.2; font-weight:600; letter-spacing:.005em; color:#0f172a; max-width:22ch; } .wbg-room__status-counter{ font-size:.72rem; font-weight:650; letter-spacing:.03em; color:#475569; background:rgba(15,23,42,.055); padding:.22rem .5rem; border-radius:8px; font-variant-numeric:tabular-nums; } .wbg-room__nav{ top:50%; width:46px; height:46px; font-size:1.35rem; color:#0f172a; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.66); -webkit-backdrop-filter:blur(22px) saturate(140%); backdrop-filter:blur(22px) saturate(140%); box-shadow:0 10px 26px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.65); transition:transform .18s ease, background .18s ease, box-shadow .18s ease; } .wbg-room__nav:hover{ background:rgba(255,255,255,.9); transform:translateY(-50%) scale(1.07); box-shadow:0 14px 32px rgba(15,23,42,.18); } .wbg-room__nav:active{ transform:translateY(-50%) scale(.96); } .wbg-room__nav--prev{left:16px;} .wbg-room__nav--next{right:16px;} /* Small landscape phones — keep the controls proportionate to the smaller stage. */ @media (max-width:932px) and (orientation:landscape){ .wbg-room__status{padding:.34rem .38rem .34rem .68rem;border-radius:12px;} .wbg-room__status-title{font-size:.78rem;max-width:16ch;} .wbg-room__status-counter{font-size:.68rem;padding:.18rem .42rem;} .wbg-room__nav{width:40px;height:40px;font-size:1.2rem;} .wbg-room__nav--prev{left:10px;} .wbg-room__nav--next{right:10px;} } /* Portrait phones — title is hidden, so the counter is the sole marker: keep it a compact, legible glass chip. */ @media (max-width:767.98px) and (orientation:portrait){ .wbg-room__status{padding:.32rem .56rem;border-radius:12px;} .wbg-room__status-title{display:none;} .wbg-room__status-counter{ font-size:.82rem; color:#334155; background:transparent; padding:.1rem .2rem; } } /* ========================================================================= 1.9.0 — "Im Raum": data-driven prop element, gallery wall label, realism The old scene props were painted onto .wbg-room__stage::after with hard-coded images and clamp() sizes — they ignored the backend size / position fields and could not be switched off. They are replaced by a dedicated, fully configurable .wbg-room__prop element (enable / size / position / opacity all driven from the Room-Scenes screen) plus a soft contact shadow that grounds the object realistically on the floor. A discreet, gallery-style wall label (artist + work) is shown beside the artwork, like vinyl lettering next to a piece in a real exhibition. ========================================================================= */ /* Retire the legacy ::after prop so we never render two objects. */ .wbg-room__stage::after{content:none !important;background:none !important;} /* Dedicated prop element — inherits --wbg-room-prop-scale and --wbg-room-prop-layout-scale from the stage and multiplies them with the backend base size (px). Capped so it can never crowd the centred artwork. */ .wbg-room__prop{ position:absolute; z-index:3; left:var(--wbg-prop-left,32px); bottom:var(--wbg-prop-bottom,0px); width:calc(var(--wbg-room-prop-scale,1) * var(--wbg-room-prop-layout-scale,1) * var(--wbg-prop-w,0px)); height:calc(var(--wbg-room-prop-scale,1) * var(--wbg-room-prop-layout-scale,1) * var(--wbg-prop-h,0px)); max-width:34vw; background-image:var(--wbg-prop-img,none); background-repeat:no-repeat; background-position:left bottom; background-size:contain; opacity:var(--wbg-prop-op,1); pointer-events:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) drop-shadow(0 16px 16px rgba(0,0,0,.22)); transition:opacity .3s ease; } .wbg-room__prop[hidden]{display:none !important;} /* Soft elliptical contact shadow at the foot of the object → grounding. */ .wbg-room__prop::after{ content:""; position:absolute; left:50%; bottom:0; width:104%; height:22px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,0) 72%); filter:blur(6px); z-index:-1; } /* Slightly richer, layered shadow on the artwork for a more convincing "hanging on the wall" feel. */ .wbg-room__artwork{ filter:drop-shadow(0 2px 3px rgba(14,18,19,.10)) drop-shadow(0 16px 22px rgba(14,18,19,.16)) drop-shadow(0 34px 46px rgba(14,18,19,.12)); } /* Gallery wall label — discreet vinyl-lettering look, sitting low on the wall to the right of the work so it never overlaps art or prop. */ .wbg-room__label{ position:absolute; z-index:3; right:clamp(26px,5vw,84px); bottom:clamp(14px,4.2vh,42px); max-width:min(32vw,250px); display:flex; flex-direction:column; gap:.16rem; text-align:left; pointer-events:none; text-shadow:0 1px 1px rgba(255,255,255,.45); } .wbg-room__label[hidden]{display:none !important;} .wbg-room__label-artist{ font-size:clamp(.74rem,1vw,.9rem); font-weight:680; letter-spacing:.012em; line-height:1.2; color:#1f2733; } .wbg-room__label-work{ display:flex; flex-direction:column; gap:.04rem; font-size:clamp(.66rem,.9vw,.78rem); line-height:1.35; color:#5a6472; } .wbg-room__label-title{font-style:italic;} .wbg-room__label-meta{font-size:.92em;color:#79828f;} /* Compact / phone layout: keep the small stage clean (title still shows in the top-left pill). */ .wbg-room[data-layout="compact"] .wbg-room__label{display:none;} @media (max-width:767.98px){ .wbg-room__label{display:none;} } /* Proportional object scaling per layout (multiplied into the prop size so the object shrinks gracefully on tablets and phones). */ .wbg-room__stage{--wbg-room-prop-layout-scale:1;} @media (max-width:1024px){ .wbg-room__stage{--wbg-room-prop-layout-scale:.88;} } @media (max-width:767.98px){ .wbg-room__stage{--wbg-room-prop-layout-scale:.74;} } .wbg-room[data-layout="compact"] .wbg-room__stage{--wbg-room-prop-layout-scale:.7;} /* ========================================================================= 1.10.0 — "Im Raum" NEXT LEVEL: framed artwork with realistic shadow, gallery label directly beneath the work, a discreet pulsing info hotspot on the piece, and a slide-in detail card (side drawer on desktop/tablet, bottom sheet on mobile) for the extended "Saaltext". ========================================================================= */ /* The wall now centres a frame (artwork + label as a vertical group). */ .wbg-room__frame{ position:relative; height:100%; width:auto; max-width:100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* Discreet pulsing info hotspot, bottom-right corner of the artwork. */ .wbg-room__info{ position:absolute; right:12px; bottom:12px; width:38px; height:38px; display:grid; place-items:center; padding:0; border:none; cursor:pointer; border-radius:50%; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%); box-shadow:0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7); color:#1f2733; z-index:5; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .wbg-room__info-glyph{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:1.06rem; line-height:1; } .wbg-room__info-dot{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(31,39,51,.42); animation:wbg-room-pulse 2.4s cubic-bezier(.22,1,.36,1) infinite; } @keyframes wbg-room-pulse{ 0%{ box-shadow:0 0 0 0 rgba(31,39,51,.40); } 70%{ box-shadow:0 0 0 15px rgba(31,39,51,0); } 100%{ box-shadow:0 0 0 0 rgba(31,39,51,0); } } .wbg-room__info:hover{ transform:scale(1.08); background:#fff; box-shadow:0 10px 22px rgba(0,0,0,.26); } .wbg-room__info:active{ transform:scale(.96); } .wbg-room.is-card-open .wbg-room__info-dot{ animation:none; } @media (prefers-reduced-motion: reduce){ .wbg-room__info-dot{ animation:none; } } /* Gallery label — now centred directly beneath the work ("näher ans Werk"). */ .wbg-room__label{ position:static; right:auto; bottom:auto; margin-top:14px; max-width:min(82vw,560px); display:flex; flex-direction:column; align-items:center; gap:.12rem; text-align:center; pointer-events:none; text-shadow:0 1px 1px rgba(255,255,255,.4); } .wbg-room__label[hidden]{ display:none !important; } .wbg-room__label-artist{ font-size:clamp(.78rem,1vw,.92rem); font-weight:680; letter-spacing:.012em; line-height:1.2; color:#1f2733; } .wbg-room__label-work{ display:flex; flex-direction:column; gap:.02rem; font-size:clamp(.68rem,.9vw,.78rem); line-height:1.3; color:#5a6472; } /* Keep a compact (artist-only) label on phones / compact layout. */ @media (max-width:767.98px){ .wbg-room__label{ display:flex; margin-top:9px; } .wbg-room__label-work{ display:none; } } .wbg-room[data-layout="compact"] .wbg-room__label{ display:flex; } .wbg-room[data-layout="compact"] .wbg-room__label-work{ display:none; } /* Scrim behind the detail card. */ .wbg-room__card-scrim{ position:absolute; inset:0; z-index:7; background:rgba(12,15,20,.34); opacity:0; pointer-events:none; transition:opacity .34s ease; } .wbg-room.is-card-open .wbg-room__card-scrim{ opacity:1; pointer-events:auto; } /* Detail card — side drawer (desktop/tablet). */ .wbg-room__card{ position:absolute; top:0; right:0; height:100%; width:min(420px,86vw); display:flex; flex-direction:column; background:rgba(252,252,251,.975); -webkit-backdrop-filter:blur(26px) saturate(125%); backdrop-filter:blur(26px) saturate(125%); border-left:1px solid rgba(0,0,0,.06); box-shadow:-26px 0 66px rgba(10,12,16,.26); transform:translateX(101%); transition:transform .46s cubic-bezier(.22,1,.36,1); z-index:8; overflow:hidden; } .wbg-room.is-card-open .wbg-room__card{ transform:translateX(0); } .wbg-room__card-head{ position:relative; flex:0 0 auto; display:flex; justify-content:flex-end; padding:12px 12px 0; } .wbg-room__card-grab{ display:none; } .wbg-room__card-close{ width:38px; height:38px; border:none; cursor:pointer; border-radius:50%; background:rgba(0,0,0,.05); color:#1f2733; font-size:1.45rem; line-height:1; display:grid; place-items:center; transition:background .2s ease; } .wbg-room__card-close:hover{ background:rgba(0,0,0,.10); } .wbg-room__card-body{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:4px clamp(20px,4vw,30px) clamp(24px,5vh,40px); } .wbg-room__card-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a93a0; margin:0 0 .45rem; } .wbg-room__card-title{ margin:0 0 .5rem; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.16; font-weight:700; color:#161b22; } .wbg-room__card-headline{ margin:.1rem 0; font-size:.96rem; color:#3f4855; } .wbg-room__card-spec{ margin:.1rem 0 .85rem; font-size:.9rem; color:#5a6472; } .wbg-room__card-desc{ margin:.7rem 0; font-size:.96rem; line-height:1.62; color:#2c333d; white-space:pre-line; } .wbg-room__card-credit{ margin:.7rem 0 .15rem; font-size:.82rem; color:#79828f; } .wbg-room__card-price{ margin:.45rem 0 .15rem; font-size:.96rem; font-weight:650; color:#161b22; } .wbg-room__card-actions{ margin-top:1.15rem; display:flex; flex-direction:column; gap:.6rem; } .wbg-room__card-inquiry{ justify-content:center; } /* Detail card — bottom sheet (mobile). */ @media (max-width:767.98px){ .wbg-room__card{ top:auto; bottom:0; left:0; right:0; width:auto; height:auto; max-height:84vh; border-left:none; border-top:1px solid rgba(0,0,0,.06); border-radius:20px 20px 0 0; transform:translateY(101%); box-shadow:0 -20px 54px rgba(10,12,16,.30); } .wbg-room.is-card-open .wbg-room__card{ transform:translateY(0); } .wbg-room__card-head{ padding-top:18px; } .wbg-room__card-grab{ display:block; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:42px; height:5px; border-radius:3px; background:rgba(0,0,0,.16); } } /* ========================================================================= 1.10.1 — "Im Raum" refinements • The framed container (.wbg-room__art-wrap box-shadow) was a rigid box that did not match every image's aspect ratio, so light "passepartout" bands appeared around squares / tall portraits. The shadow now lives on the image itself via drop-shadow(), which follows the painted pixels exactly — fits every format, no stray frame. • Info hotspot moved BELOW the work (no longer overlapping the painting). • The dimensions line beneath the work is removed (handled in JS). ========================================================================= */ .wbg-room__frame{ position:relative; height:100%; width:auto; max-width:100%; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; } /* Artwork: shadow follows the image outline → fits any aspect ratio. Reserve room beneath for the label + info button so nothing clips. */ .wbg-room__frame .wbg-room__artwork{ max-width:min(74vw,1000px); max-height:calc(100% - 118px); object-fit:contain; filter: drop-shadow(0 2px 2px rgba(14,18,19,.16)) drop-shadow(0 16px 26px rgba(14,18,19,.20)) drop-shadow(0 34px 48px rgba(14,18,19,.13)); } /* Gallery label directly beneath the work — artist + title only (no size). */ .wbg-room__label{ position:static; right:auto; bottom:auto; margin-top:14px; max-width:min(82vw,560px); display:flex; flex-direction:column; align-items:center; gap:.08rem; text-align:center; pointer-events:none; text-shadow:0 1px 1px rgba(255,255,255,.4); } .wbg-room__label-artist{ font-size:clamp(.78rem,1vw,.92rem); font-weight:680; letter-spacing:.012em; line-height:1.2; color:#1f2733; } .wbg-room__label-work{ font-size:clamp(.68rem,.9vw,.78rem); line-height:1.3; color:#5a6472; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:min(82vw,560px); } .wbg-room__label-title{ font-style:italic; } /* Info hotspot — now a discreet, pulsing round button BELOW the work. */ .wbg-room__info{ position:relative; /* relative (not static) so the pulse ring fills the button */ margin-top:13px; inset:auto; right:auto; bottom:auto; width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; padding:0; border:none; cursor:pointer; border-radius:50%; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px) saturate(120%); backdrop-filter:blur(8px) saturate(120%); box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7); color:#1f2733; z-index:5; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .wbg-room__info:hover{ transform:scale(1.08); background:#fff; box-shadow:0 10px 22px rgba(0,0,0,.24); } .wbg-room__info:active{ transform:scale(.96); } /* On phones keep the label compact (artist only); the info button stays. */ @media (max-width:767.98px){ .wbg-room__label{ margin-top:10px; } .wbg-room__info{ margin-top:11px; width:38px; height:38px; } } /* ========================================================================= 1.10.2 — room fixes • Clamp the dialog to the viewport height so the scene toolbar can never be pushed off-screen by tall artwork+label+button stacks. • Make the info hotspot more discreet (smaller, softer, gentler pulse). ========================================================================= */ .wbg-room__dialog{ height:100dvh; min-height:0; overflow:hidden; } /* extra safety: reserve room for the toolbar so the stack never collides */ .wbg-room__frame .wbg-room__artwork{ max-height:calc(100% - 124px); } .wbg-room__info{ width:34px; height:34px; margin-top:12px; background:rgba(255,255,255,.74); box-shadow:0 3px 10px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); color:#5b6573; opacity:.92; } .wbg-room__info-glyph{ font-size:.92rem; } .wbg-room__info:hover{ transform:scale(1.06); background:rgba(255,255,255,.95); color:#1f2733; box-shadow:0 8px 18px rgba(0,0,0,.18); opacity:1; } .wbg-room__info-dot{ animation:wbg-room-pulse-soft 3s ease-out infinite; } @keyframes wbg-room-pulse-soft{ 0%{ box-shadow:0 0 0 0 rgba(91,101,115,.26); } 70%{ box-shadow:0 0 0 9px rgba(91,101,115,0); } 100%{ box-shadow:0 0 0 0 rgba(91,101,115,0); } } @media (max-width:767.98px){ .wbg-room__info{ width:33px; height:33px; } } /* ========================================================================= 1.11.1 — room-only launcher The virtual-gallery shortcode renders ONLY a button that opens the room viewer (all members' works, one after another). The grid/lightbox stay in the DOM as data carriers but are hidden, so their (lazy) images never load — only the room loads each full image on demand as you browse. ========================================================================= */ .wbg-gallery[data-wbg-room-only="1"] .wbg-gallery__viewport, .wbg-gallery[data-wbg-room-only="1"] .wbg-gallery__nav, .wbg-gallery[data-wbg-room-only="1"] .wbg-gallery__rail, .wbg-gallery[data-wbg-room-only="1"] .wbg-lightbox{ display:none !important; } .wbg-artist-gallery--room-only{ padding:0; } .wbg-artist-gallery--room-only .wes-section__inner{ padding:0; } .wbg-room-launch-wrap{ display:flex; justify-content:center; padding:clamp(6px,2vh,18px) 0; } .wbg-room-launch{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.6rem; font-size:clamp(1rem,1.4vw,1.12rem); font-weight:680; letter-spacing:.01em; border-radius:16px; cursor:pointer; border:1px solid rgba(17,24,20,.10); color:#fff; background:linear-gradient(180deg,#3f4a3c 0%,#333d31 100%); box-shadow:0 12px 30px rgba(17,24,20,.22), inset 0 1px 0 rgba(255,255,255,.14); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .wbg-room-launch:hover{ transform:translateY(-1px); box-shadow:0 16px 40px rgba(17,24,20,.28); filter:brightness(1.06); } .wbg-room-launch:active{ transform:translateY(0); } .wbg-room-launch__icon{ font-size:1.15em; line-height:1; opacity:.9; } @media (max-width:767.98px){ .wbg-room-launch{ width:100%; justify-content:center; padding:1rem 1.2rem; } } /* ========================================================================= 1.11.2 — premium polish + landscape fix + prop grounding ========================================================================= */ /* Smooth cross-fade when navigating between works in the room. */ .wbg-room__artwork{ transition:opacity .32s ease; } .wbg-room__artwork.is-swapping{ opacity:0; } @media (prefers-reduced-motion: reduce){ .wbg-room__artwork{ transition:none; } } /* Landscape / low-height fix: cap the artwork by the actual viewport height so it can never overflow above the visible area, and keep label+button clear of the toolbar. The viewport bound is reliable even where percentage-height chains do not resolve (the cause of the cropped artwork in landscape). */ /* The artwork must always leave room beneath it for the label + info button, otherwise the centred (artwork+label+button) group grows taller than the wall and the artwork is clipped at the top while the button hides behind the toolbar — exactly what happened in landscape. Reserve scales per layout. */ .wbg-room__frame .wbg-room__artwork{ max-height:calc(100% - 124px); } /* Landscape / compact phones+tablets: smaller floor, generous reserve so the work is never cropped, button stays clear of the toolbar, and the scene objects are capped so they no longer dominate the (short) view. */ .wbg-room[data-layout="compact"] .wbg-room__stage{ --wbg-room-floor-h:64px; } .wbg-room[data-layout="compact"] .wbg-room__frame .wbg-room__artwork{ max-height:calc(100% - 88px); } .wbg-room[data-layout="compact"] .wbg-room__label{ margin-top:7px; } .wbg-room[data-layout="compact"] .wbg-room__label-work{ display:none; } .wbg-room[data-layout="compact"] .wbg-room__info{ margin-top:8px; width:30px; height:30px; } .wbg-room[data-layout="compact"] .wbg-room__prop{ max-width:22vw; max-height:56%; } /* More believable contact shadow at the foot of the object (plant/easel): softer, a touch wider and lower so the object reads as standing on the floor. */ .wbg-room__prop::after{ left:50%; bottom:-3px; width:104%; height:18px; background:radial-gradient(ellipse at center, rgba(0,0,0,.34) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,0) 74%); filter:blur(7px); } .wbg-room__prop{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.20)) drop-shadow(0 20px 20px rgba(0,0,0,.24)); } /* ========================================================================= 1.12.0 — Premium Animated Room Gallery Two-layer, direction-aware crossfade for the in-room work viewer. Goal: museal, calm, Apple-like. Only the artwork layers move — the wall, floor, props, label and info hotspot stay put. transform + opacity only, no rotation. This block is intentionally LAST so it cleanly supersedes the older, layered .wbg-room__artwork sizing rules via specificity + source order (no !important orgy). The legacy .wbg-room__meta/.wbg-room__status and ::after-prop rules are left untouched on purpose (later cleanup). ========================================================================= */ /* Tunables (overridden per breakpoint below). */ .wbg-room{ --wbg-room-anim-dur:.62s; /* desktop 560–680ms band */ --wbg-room-anim-ease:cubic-bezier(.22,1,.36,1); --wbg-room-travel:clamp(20px,3.2vw,44px); /* subtle horizontal dolly */ --wbg-room-dir:1; } .wbg-room.is-direction-next{ --wbg-room-dir:1; } .wbg-room.is-direction-prev{ --wbg-room-dir:-1; } /* The mount carries the fixed, responsive artwork geometry. Because the box never changes between works, the label beneath it never jumps — only the contained image inside the box changes. */ .wbg-room__art-mount{ position:relative; flex:0 0 auto; display:block; width:min(76vw,1000px); height:min(56vh,760px); max-width:100%; max-height:calc(100% - 132px); /* reserve room for label + info button */ margin:0 auto; isolation:isolate; } /* Soft gallery-light wash + subtle object/canvas depth. Image-independent, so it can never misalign with a contained artwork or paint a false white edge. */ .wbg-room__art-depth{ position:absolute; inset:-7% -9%; z-index:0; pointer-events:none; border-radius:6px; background: radial-gradient(120% 78% at 50% 6%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 56%), radial-gradient(92% 70% at 50% 97%, rgba(15,20,26,.10) 0%, rgba(15,20,26,0) 60%); opacity:.9; } /* Both layers share identical geometry and stack centred inside the mount. object-fit:contain keeps every aspect ratio correct (no distortion); the per-work --wbg-art-fit gently sizes smaller works on the wall WITHOUT ever resizing the mount → no layout jump between portrait and landscape. The higher specificity + trailing source position lets this win over the older .wbg-room__artwork sizing rules. */ .wbg-room__frame .wbg-room__artwork{ position:absolute; top:50%; left:50%; width:100%; height:100%; max-width:100%; max-height:100%; margin:0; object-fit:contain; transform-origin:center center; transform:translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) scale(var(--wbg-art-fit,1)); /* "Hanging on the wall": layered cast shadow that follows the image pixels. */ filter: drop-shadow(0 2px 3px rgba(14,18,19,.16)) drop-shadow(0 14px 24px rgba(14,18,19,.18)) drop-shadow(0 30px 44px rgba(14,18,19,.13)); transition:none; /* at rest: no transition → clean snap */ } .wbg-room__frame .wbg-room__artwork--current{ z-index:2; opacity:1; } .wbg-room__frame .wbg-room__artwork--incoming{ z-index:1; opacity:0; } /* Compact / short-landscape: minimaler Reserve, damit das Werk im flachen Querformat die verfügbare Höhe nutzt (Label ist hier ausgeblendet, nur der Info-Button braucht Platz) – behebt das geschrumpfte Werk im Querformat. */ .wbg-room[data-layout="compact"] .wbg-room__art-mount{ max-height:calc(100% - 44px); } .wbg-room[data-layout="compact"] .wbg-room__frame .wbg-room__artwork{ max-height:100%; } /* Promote to the compositor only while a layer is actually moving. */ .wbg-room__frame.is-leaving .wbg-room__artwork--current, .wbg-room__frame.is-entering .wbg-room__artwork--incoming{ will-change:transform, opacity; } /* ---- The transition itself ---------------------------------------------- Transitions exist ONLY while the room is animating, so removing the class at commit snaps both layers back to rest with zero residual fade. */ .wbg-room.is-room-transitioning .wbg-room__frame .wbg-room__artwork{ transition: transform var(--wbg-room-anim-dur) var(--wbg-room-anim-ease), opacity var(--wbg-room-anim-dur) var(--wbg-room-anim-ease); } /* Phase A — armed start position (set while transitions are still off): incoming waits just off the entry side, a touch back. */ .wbg-room.is-armed .wbg-room__frame .wbg-room__artwork--incoming{ opacity:0; transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(calc(var(--wbg-room-dir,1) * var(--wbg-room-travel))) scale(calc(var(--wbg-art-fit,1) * .965)); } /* Phase B — end states (these rules sit AFTER is-armed, so at equal specificity they win once is-room-transitioning is added): incoming eases to centre; current eases out the opposite side and a touch back. */ .wbg-room.is-room-transitioning .wbg-room__frame .wbg-room__artwork--incoming{ opacity:1; transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(0) scale(var(--wbg-art-fit,1)); } .wbg-room.is-room-transitioning .wbg-room__frame .wbg-room__artwork--current{ opacity:0; transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(calc(var(--wbg-room-dir,1) * -0.8 * var(--wbg-room-travel))) scale(calc(var(--wbg-art-fit,1) * .975)); } /* The wall label may update softly during the move but must not lurch. */ .wbg-room.is-room-transitioning .wbg-room__label{ transition:opacity .28s ease; } /* ---- Responsive geometry (mount only; layers always fill it) ------------- */ @media (max-width:1024px){ .wbg-room__art-mount{ width:min(84vw,820px); height:min(50vh,640px); } } @media (max-width:932px) and (orientation:landscape){ .wbg-room{ --wbg-room-anim-dur:.5s; --wbg-room-travel:clamp(16px,2.6vw,32px); } .wbg-room__art-mount{ width:min(64vw,480px); height:min(80vh,480px); max-height:calc(100% - 44px); } } @media (max-width:767.98px) and (orientation:portrait){ .wbg-room{ --wbg-room-anim-dur:.5s; --wbg-room-travel:clamp(16px,4vw,30px); } .wbg-room__art-mount{ width:min(88vw,580px); height:min(48vh,520px); max-height:calc(100% - 120px); } } @media (max-width:767.98px){ .wbg-room{ --wbg-room-anim-dur:.48s; } /* mobile 440–560ms band */ } /* ---- Reduced motion: no dolly, no transform animation (safety net) ------ The JS path already does an instant swap when reduced motion is on; these rules guarantee the same even if the preference flips mid-interaction. */ @media (prefers-reduced-motion: reduce){ .wbg-room.is-room-transitioning .wbg-room__frame .wbg-room__artwork, .wbg-room.is-armed .wbg-room__frame .wbg-room__artwork{ transition:none !important; } .wbg-room .wbg-room__frame .wbg-room__artwork--current{ transform:translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) scale(var(--wbg-art-fit,1)) !important; } .wbg-room .wbg-room__frame .wbg-room__artwork--incoming{ opacity:0 !important; } .wbg-room.is-room-transitioning .wbg-room__label{ transition:none !important; } } /* 1.12.1 — Lightbox tall-content fix (desktop two-column): keep the artwork fully visible and let ONLY the text panel scroll when a portrait work carries a long description. Mobile (<=1023.98px) already scrolls its single-column grid, so this override is scoped to desktop. */ @media (min-width:1024px){ .wbg-lightbox__grid{ max-height:calc(100dvh - 2rem); align-items:stretch; } .wbg-lightbox__media{ min-height:0; max-height:calc(100dvh - 4rem); } .wbg-lightbox__image{ max-height:calc(100dvh - 5rem); } .wbg-lightbox__panel{ align-self:stretch; max-height:calc(100dvh - 4rem); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-right:.6rem; } } /* ---- Label-Lesbarkeit über Deko-Ebenen --------------------------------- */ /* Hinweis: Die Deko (Pflanze/Staffelei, stage::after, z-index:3) steht bewusst VOR der Wand (z-index:1) – sie ist ein Objekt im Raum. Die Wand darf NICHT über die Deko gehoben werden, sonst verschwinden die Objekte hinter der Wand. Für die Lesbarkeit der Beschriftung sorgt allein der dezente Halo. */ .wbg-room__label-artist, .wbg-room__label-work, .wbg-room__label-title{ text-shadow:0 1px 2px rgba(255,255,255,.78), 0 0 14px rgba(255,255,255,.55); } /* ---- Parallax-Diorama (konsolidiert ab 1.20.0) ------------------------- */ /* Tiefenstaffelung: Wand statisch → Werk (wenig) → Boden (mittel, gleiche Richtung wie Prop!) → Prop/Deko (stark, nächste Ebene). Boden und Prop bewegen sich in DIESELBE Richtung – damit bleibt der Bodenkontakt (Topf/Staffelei) optisch erhalten statt sich zu trennen. */ .wbg-room.is-parallax .wbg-room__frame{ perspective:1500px; perspective-origin:50% 42%; } .wbg-room.is-parallax .wbg-room__art-mount{ transform: translate3d(calc(var(--wbg-par-x,0) * -11px), calc(var(--wbg-par-y,0) * -8px), 0) rotateY(calc(var(--wbg-par-x,0) * 2.7deg)) rotateX(calc(var(--wbg-par-y,0) * -2deg)); will-change:transform; } .wbg-room.is-parallax .wbg-room__floor{ /* Gleiche Richtung wie der Prop, etwas schwächer → Boden „trägt" die Objekte */ transform:translate3d(calc(var(--wbg-par-x,0) * -24px), calc(var(--wbg-par-y,0) * -4px), 0) scale(1.04); transform-origin:50% 0%; will-change:transform; } .wbg-room.is-parallax .wbg-room__prop{ /* Vordergrund: stärkste Bewegung, in gleicher Richtung wie Boden */ transform:translate3d(calc(var(--wbg-par-x,0) * -30px), calc(var(--wbg-par-y,0) * -21px), 0); will-change:transform; } /* Wand-Textur als FERNSTE Ebene minimal mitführen → kompletter Kamera-Schwenk statt eingefrorener Kulisse. Nur der Textur-Layer (1. bg-layer) bewegt sich; Licht (radial) und Grundton (linear) bleiben fix = feste Lichtquelle im Raum. Das Werk ist ein DOM-Kind der Wand und bleibt davon völlig unberührt. Bewusst die geringste Auslenkung (−7px < Werk −11 < Boden −24 < Deko −30). */ /* Wand-Textur-Parallax ENTFERNT (Performance): Das frühere Mitführen über background-position erzwang bei jedem Frame einen Vollflächen-Repaint der größten Fläche im Raum – auf jedem Gerät teuer, auch am Desktop. Die Wand bleibt jetzt statisch (background-position aus der Basisregel); die Tiefe tragen weiterhin Werk, Boden und Deko über GPU-günstiges translate3d. Die −7px-Auslenkung der Wand war die subtilste Ebene – der Verlust ist visuell minimal, der Performance-Gewinn groß. */ @media (prefers-reduced-motion: reduce){ .wbg-room.is-parallax .wbg-room__frame{ perspective:none; } .wbg-room.is-parallax .wbg-room__art-mount, .wbg-room.is-parallax .wbg-room__floor, .wbg-room.is-parallax .wbg-room__prop{ transform:none; } .wbg-room.is-parallax .wbg-room__wall{ background-position:center center,center top,center center; } } /* ---- 1.16.0 — Premium-Interface: Glas & ruhige Motion ------------------ */ /* Einheitliche, hochwertige Material- und Bewegungssprache der Bedien-Ebene. Frosted-Glass für helle Wände über starkem blur+saturate bei mittlerer Deckkraft (sichtbar UND edel), gemeinsame Easing cubic-bezier(.22,1,.36,1). Bewusst am Dateiende, um die über mehrere Versionen gewachsenen Einzel- regeln gezielt aufzuwerten, ohne sie zu entfernen. */ /* Schließen: kleiner, rund, frosted – ruhig statt CTA-artig. */ .wbg-room__close{ width:46px; height:46px; border-radius:999px; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); color:#1f2937; font-size:1.4rem; box-shadow:0 8px 22px rgba(17,24,20,.14), inset 0 1px 0 rgba(255,255,255,.55); transition:background-color .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1); } .wbg-room__close:hover{ background:rgba(255,255,255,.74); } .wbg-room__close:active{ transform:scale(.94); } .wbg-room[data-layout="compact"] .wbg-room__close{ width:44px; height:44px; border-radius:999px; } /* Untere Tabs (Galerie/Wohnraum/Studio): gläserne, native App-Steuerung. */ .wbg-room__toolbar{ border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.58); -webkit-backdrop-filter:blur(26px) saturate(175%); backdrop-filter:blur(26px) saturate(175%); box-shadow:0 18px 48px rgba(10,12,16,.16), inset 0 1px 0 rgba(255,255,255,.55); } .wbg-room__toolbar .wbg-btn{ transition:background-color .26s cubic-bezier(.22,1,.36,1), color .26s cubic-bezier(.22,1,.36,1), transform .26s cubic-bezier(.22,1,.36,1); } .wbg-room__toolbar .wbg-btn:active{ transform:scale(.97); } .wbg-room__toolbar .wbg-btn.is-active{ background:rgba(255,255,255,.92); color:#111827; border-color:rgba(255,255,255,.60); box-shadow:inset 0 1px 0 rgba(255,255,255,.60), 0 8px 22px rgba(17,24,20,.10); } /* Detail-Sheet: gläserne, kuratierte Werkkarte (nur Material aufgewertet). */ .wbg-room__card{ background:rgba(252,252,251,.90); -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%); } .wbg-room__card-scrim{ background:rgba(12,15,20,.26); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:opacity .42s cubic-bezier(.22,1,.36,1); } /* Ruhe bei reduzierter Bewegung. */ @media (prefers-reduced-motion: reduce){ .wbg-room__close, .wbg-room__toolbar .wbg-btn, .wbg-room__card-scrim{ transition-duration:.001ms; } } /* ---- 1.18.0 — Bodenleiste entfernt ------------------------------------- */ /* Die Status-/Titelleiste am Boden ("Künstler – Titel · n/89") dupliziert die Beschriftung am Werk. Sie wird entfernt; die Beschriftung an der Wand (Künstlername, Werktitel, i-Button) bleibt erhalten. */ .wbg-room__status, .wbg-room__meta{ display:none; } /* ---- 1.21.0 — Beschriftung als Wand-Gravur + Museums-Plakette ---------- */ /* Das Werk-Label gehört konzeptionell zur WAND, nicht zum Werk. Daher: (1) Es wandert exakt mit der Wand-Textur mit (identische −7px / −4px). (2) Es wirkt in die Wand eingelassen (graviert), nicht aufgedruckt. Die Tiefendifferenz zum Werk (−11px) lässt das Werk minimal VOR der gravierten Wandschrift stehen → zusätzliche, glaubwürdige Tiefe. */ .wbg-room.is-parallax .wbg-room__label{ transform:translate3d(calc(var(--wbg-par-x,0) * -7px), calc(var(--wbg-par-y,0) * -4px), 0); will-change:transform; } /* Gravur-Optik: Lichtkante unten (Licht trifft die untere Vertiefungswand) + zarte Schattenkante oben (Tiefe der Gravur). Halbtransparente Tinte nimmt den jeweiligen Wandton auf und trägt in allen drei Szenen. */ .wbg-room__label{ text-shadow: 0 1px 0 rgba(255,255,255,.62), 0 -1px 1px rgba(0,0,0,.13); } /* Künstlername: gravierte Museums-Plakette in Kapitälchen — museal, institutionell, ruhig. Mehr Laufweite trägt die Small-Caps. */ .wbg-room__label-artist{ color:rgba(24,30,38,.74); font-variant-caps:all-small-caps; letter-spacing:.07em; font-weight:640; } /* Werktitel: zart, kursiv, klar untergeordnet. */ .wbg-room__label-work{ color:rgba(48,54,62,.6); } @media (prefers-reduced-motion: reduce){ .wbg-room.is-parallax .wbg-room__label{ transform:none; } } /* ---- 1.24.0 — iPhone Querformat: robust über data-layout="compact" ----- Die @media-(orientation:landscape)-Query griff auf dem Gerät nicht. Das "compact"-Layout setzt dagegen das Skript zuverlässig, sobald der Raum im flachen Querformat ist (im UI an der runden Schließen-Schaltfläche erkennbar). Daran hängen die Regeln jetzt – unabhängig von der Media-Query. Ergebnis: Werk deterministisch in der Bühnenmitte, Beschriftung als seitliches "Saalschild" links. compact ist ausschließlich im Querformat aktiv, Hochformat/Desktop bleiben daher unberührt. */ /* Keine 3D-Perspektive im flachen Querformat (planare, ruhige Parallax). */ .wbg-room.is-parallax[data-layout="compact"] .wbg-room__frame{ perspective:none; } /* Frame trägt die volle Bühne; Beschriftung + Info links, vertikal mittig. */ .wbg-room[data-layout="compact"] .wbg-room__frame{ width:100%; height:100%; margin:0; align-items:flex-start; justify-content:center; padding-left:clamp(18px,4.5vw,60px); box-sizing:border-box; } /* WERK: absolut zentriert, aber bewusst im OBEREN Wandbereich verankert (Galerie-Augenhöhe) und in der Höhe begrenzt, damit die Unterkante immer deutlich ÜBER der Wand-Boden-Kante bleibt – das Werk wandert nicht mehr hinter den Boden. Box = Begrenzung, das Werk selbst wird bildgroß zentriert. */ .wbg-room[data-layout="compact"] .wbg-room__art-mount{ position:absolute; left:50%; top:44%; width:min(50vw,340px); height:min(64vh,330px); max-width:none; max-height:calc(100% - 54px); margin:0; transform:translate(-50%,-50%); } .wbg-room.is-parallax[data-layout="compact"] .wbg-room__art-mount{ transform:translate(-50%,-50%) translate3d(calc(var(--wbg-par-x,0) * -6px), calc(var(--wbg-par-y,0) * -4px), 0); } /* WERK-Bild: object-fit:contain für KONSISTENTE Größe (füllt die Box gleich, unabhängig von srcset/intrinsischer Bildgröße – behebt das winzige/uneinheit- liche Werk durch width:auto). object-position:center zentriert in beiden Achsen. Die orientierungsabhängige scale() wird im Querformat NICHT angewendet (sie war die Ursache des Versatzes); nur saubere Zentrierung. Größe steuert die Box. */ .wbg-room[data-layout="compact"] .wbg-room__frame .wbg-room__artwork{ width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center center; transform:translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))); } /* Wechsel-Animation im Querformat: gleicher sanfter horizontaler Slide, aber OHNE scale (sonst Größensprung/Versatz). Spezifität schlägt Ruhe- + Basisregel. */ .wbg-room.is-armed[data-layout="compact"] .wbg-room__frame .wbg-room__artwork--incoming{ transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(calc(var(--wbg-room-dir,1) * var(--wbg-room-travel))); } .wbg-room.is-room-transitioning[data-layout="compact"] .wbg-room__frame .wbg-room__artwork--incoming{ transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(0); } .wbg-room.is-room-transitioning[data-layout="compact"] .wbg-room__frame .wbg-room__artwork--current{ transform: translate(-50%, calc(-50% - var(--wbg-room-art-lift,0px))) translateX(calc(var(--wbg-room-dir,1) * -0.8 * var(--wbg-room-travel))); } /* BESCHRIFTUNG als seitliches Saalschild: linksbündig, graviert, im Fluss (Frame ist hier links ausgerichtet). Name + Werktitel, da Platz ist. */ .wbg-room[data-layout="compact"] .wbg-room__label{ position:static; left:auto; right:auto; top:auto; bottom:auto; margin:0; max-width:22vw; text-align:left; align-items:flex-start; display:flex; transform:none; } .wbg-room.is-parallax[data-layout="compact"] .wbg-room__label{ transform:translate3d(calc(var(--wbg-par-x,0) * -7px), calc(var(--wbg-par-y,0) * -4px), 0); } .wbg-room[data-layout="compact"] .wbg-room__label-work{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* Info-Button direkt unter das Saalschild. */ .wbg-room[data-layout="compact"] .wbg-room__info{ margin:10px 0 0; }