appended to alongside other *

s. We force the dim via !important to defeat that selector's * 0,1,1 specificity even when it does happen to match.) * 3. Glass-morphism close button. */ /* Backdrop - !important defeats featherlight.min.css's `.featherlight:last-of-type { background: rgba(0,0,0,.8) }` (specificity 0,1,1). */ .featherlight { background: rgba(0, 0, 0, 0.88) !important; } /* Content wrapper - drop the white frame; wrapper just positions the image. Scoped with :not(.featherlight-iframe) so we do not clobber the vendor's iframe-mode rule (overflow-y: scroll; padding: 0) at equal specificity. */ .featherlight:not(.featherlight-iframe) .featherlight-content { background: transparent; padding: 0; border-bottom: 0; margin: 2.5% auto; max-height: 95%; overflow: visible; box-shadow: none; } /* Lightbox image - subtle drop shadow plus tiny corner radius. width: auto overrides the vendor `.featherlight .featherlight-image { width: 100% }` so small images render at intrinsic size rather than being upscaled. */ .featherlight .featherlight-image { display: block; width: auto; max-width: 100%; height: auto; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55); border-radius: 2px; } /* Close button - frosted glass pill. backdrop-filter falls back to a flat semi-transparent fill on browsers that do not support it; still legible. */ .featherlight .featherlight-close-icon { background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; width: 38px; height: 38px; line-height: 36px; font-size: 16px; color: #fff; top: 18px; right: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease; } .featherlight .featherlight-close-icon:hover { background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.45); transform: scale(1.08); } /* WCAG 2.4.7 Focus Visible - keyboard-only focus ring (not shown on click). */ .featherlight .featherlight-close-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.45); } /* Gallery prev/next nav arrows - same glass aesthetic as the close button. Injected by mlOpenGalleryLightbox() in mixinglight.js when 2+ images are in the same Advanced Gallery. */ .featherlight .ml-fl-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; width: 48px; height: 48px; font-size: 20px; line-height: 1; color: #fff; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.18s ease, transform 0.15s ease, border-color 0.18s ease; } .featherlight .ml-fl-nav:hover { background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-50%) scale(1.08); } .featherlight .ml-fl-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.45); } .featherlight .ml-fl-nav-prev { left: 24px; } .featherlight .ml-fl-nav-next { right: 24px; } /* Caption text below the lightbox image. Sits inside .featherlight-content so it inherits the inline-block centering and image width naturally. */ .featherlight .ml-fl-caption { display: block; margin: 12px auto 0; max-width: 100%; padding: 10px 16px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: #fff; font-size: 14px; font-style: italic; line-height: 1.5; text-align: center; box-sizing: border-box; } .featherlight .ml-fl-caption a { color: #fff; text-decoration: underline; } /* Mobile - tighter margins, no white frame. Mirrors structure of the parent media query in featherlight.min.css for parity. */ @media only screen and (max-width: 1024px) { .featherlight:not(.featherlight-iframe) .featherlight-content { margin: 2% auto; padding: 0; border-bottom: 0; } /* Mobile nav arrows - keep 44x44 minimum hit target, tighter inset. */ .featherlight .ml-fl-nav { width: 44px; height: 44px; font-size: 18px; } .featherlight .ml-fl-nav-prev { left: 12px; } .featherlight .ml-fl-nav-next { right: 12px; } /* Mobile caption - tighter sizing. */ .featherlight .ml-fl-caption { font-size: 13px; padding: 8px 14px; margin-top: 8px; } /* 44x44 hit target meets the mobile touch heuristic; ~30% of traffic is mobile. */ .featherlight .featherlight-close-icon { width: 44px; height: 44px; line-height: 42px; top: 12px; right: 12px; } }