/* Minimal replacement for the Squarespace JS-built mobile overlay menu. Toggled by /static/mobile-nav.js via .bloom-nav-open on . */ .bloom-mobile-overlay { position: fixed; inset: 0; z-index: 1000; display: none; } html.bloom-nav-open .bloom-mobile-overlay { display: block; } html.bloom-nav-open { overflow: hidden; } .bloom-mobile-overlay .backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .bloom-mobile-overlay nav { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; max-width: 320px; background: #211e19; padding: 84px 36px; display: flex; flex-direction: column; gap: 30px; } .bloom-mobile-overlay nav a { color: #cfcbc4; text-decoration: none; font-family: futura-pt, sans-serif; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; } .bloom-mobile-overlay .close { position: absolute; top: 14px; left: 14px; background: none; border: 0; color: #cfcbc4; font-size: 28px; line-height: 1; padding: 8px; cursor: pointer; } /* --- Static replacements for removed Squarespace JS behaviors ------------ ImageLoader used to add .loaded to gallery images, un-hide content-fill banner figures, and crop/position banner images from their focal points. Force the equivalent final states in CSS. */ .sqs-gallery-block-grid img:not(.loaded) { opacity: 1 !important; } .content-fill { opacity: 1 !important; position: relative; overflow: hidden; } .content-fill img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Gallery grid: the JS sized each slide's anchor/img inline (square crop). Reproduce with CSS. */ .sqs-gallery-block-grid .slide .image-slide-anchor { display: block; position: relative; overflow: hidden; } .sqs-gallery-aspect-ratio-square .slide .image-slide-anchor { aspect-ratio: 1 / 1; } .sqs-gallery-block-grid .slide img.thumb-image { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } /* Jost (our futura-pt stand-in) runs ~5% wider than Adobe Futura PT, which wrapped the homepage hero onto a third line and grew the banner. Widen the hero text column (homepage only) to restore the original two-line break. */ @media only screen and (min-width: 800px) { #collection-5eba1287fca1a508e831cea0 .banner-thumbnail-wrapper .desc-wrapper { width: 58% !important; } }