Grand Opening—Art Parade

.module-intro–media:not(.module) { display: none; }
.module-intro–media .area-media:not(:has(img, picture, video)) { display: none; }
.fake-hero {
position: relative;
width: 100vw;
margin-left: calc(50% – 50vw);
margin-right: calc(50% – 50vw);
aspect-ratio: 5 / 2;
overflow: hidden;
z-index: 1;
}
@media (max-width: 1199px) {
.fake-hero { aspect-ratio: 3 / 2; }
}
@media (max-width: 1023px) {
.fake-hero { aspect-ratio: 1 / 1; }
}
.fake-hero img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Header transparency — both desktop and mobile */
body.fake-hero-event header.header–without-hero #desktop-header,
body.fake-hero-event header.header–without-hero .lacma-mobile-nav {
background: transparent !important;
}
/* Desktop nav — all links + hours */
body.fake-hero-event header.header–without-hero #desktop-header a,
body.fake-hero-event header.header–without-hero #desktop-header .museum-hours {
color: #fff !important;
}
/* Mobile nav — logo (custom font needs text-fill-color) */
body.fake-hero-event header.header–without-hero .lacma-mobile-nav a.lacma-logo {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Mobile nav — icon links */
body.fake-hero-event header.header–without-hero .lacma-mobile-nav .icon-list a {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
/* Mobile nav — SVG icon fills */
body.fake-hero-event header.header–without-hero .lacma-mobile-nav svg,
body.fake-hero-event header.header–without-hero .lacma-mobile-nav svg path {
fill: #fff !important;
stroke: #fff !important;
}
/* Mobile nav — icon-font pseudo-elements */
body.fake-hero-event header.header–without-hero .lacma-mobile-nav [data-icon]::before,
body.fake-hero-event header.header–without-hero .lacma-mobile-nav .icon-list a::before {
color: #fff !important;
}
/* Content spacing below hero */
body.fake-hero-event .module.module-intro.module-intro–media .area-header {
margin-top: 2rem;
}
body.fake-hero-event header.header–without-hero #desktop-header a.lacma-logo {
-webkit-text-fill-color: #fff !important;
}

(function(){
const root = document.currentScript.parentElement;
if (root.closest(‘.js-lpb-component’)) return;
root.style.display = ‘none’;
const build = () => {
const imgs = […root.querySelectorAll(‘img’)];
if (imgs.length i.currentSrc || i.src);
const moduleIntro = document.querySelector(‘.module.module-intro.module-intro–media’);
if (!moduleIntro || !moduleIntro.parentNode) return false;
const hero = document.createElement(‘div’);
hero.className = ‘fake-hero’;
const img = document.createElement(‘img’);
img.alt = ”;
img.decoding = ‘async’;
hero.appendChild(img);
moduleIntro.parentNode.insertBefore(hero, moduleIntro);
document.body.classList.add(‘fake-hero-event’);
const lift = () => {
hero.style.marginTop = ‘0’;
// force layout
const top = hero.getBoundingClientRect().top + window.scrollY;
hero.style.marginTop = `-${Math.max(0, top)}px`;
};
let bp;
const swap = () => {
const next = innerWidth >= 1200 ? 0 : innerWidth >= 1024 ? 1 : 2;
if (next === bp) return;
bp = next;
img.src = srcs[next];
};
swap();
// lift after image starts loading so dimensions settle
if (img.complete) lift(); else img.addEventListener(‘load’, lift, { once: true });
let resizeRAF;
addEventListener(‘resize’, () => {
cancelAnimationFrame(resizeRAF);
resizeRAF = requestAnimationFrame(() => { swap(); lift(); });
});
return true;
};
if (build()) return;
const obs = new MutationObserver(() => { if (build()) obs.disconnect(); });
obs.observe(root, { childList: true, subtree: true });
})();

Image

Image

Image