/* Bottom Fade — ported from Sketch Suite (modules/bottom-fade). A frosted band across the foot of the viewport: content softens as it scrolls under it and sharpens as it moves up. Four stacked layers (2/5/11/22px) so the blur compounds towards the bottom edge instead of starting on a hard line. Printed in footer.php as a direct child of so no transformed ancestor can trap it. z-index 5: above page content, below the header (50), chat (40), enquiry overlay (100) and preloader — so those stay sharp. */ .bllbf { position: fixed; inset: auto 0 0 0; height: clamp(80px, 15vh, 240px); z-index: 5; pointer-events: none; --bllbf-scale: 1; } .bllbf span { position: absolute; inset: 0; display: block; } .bllbf span:nth-child(1) { -webkit-backdrop-filter: blur(calc(var(--bllbf-scale) * 2px)); backdrop-filter: blur(calc(var(--bllbf-scale) * 2px)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%); } .bllbf span:nth-child(2) { -webkit-backdrop-filter: blur(calc(var(--bllbf-scale) * 5px)); backdrop-filter: blur(calc(var(--bllbf-scale) * 5px)); -webkit-mask-image: linear-gradient(to bottom, transparent 25%, #000 55%); mask-image: linear-gradient(to bottom, transparent 25%, #000 55%); } .bllbf span:nth-child(3) { -webkit-backdrop-filter: blur(calc(var(--bllbf-scale) * 11px)); backdrop-filter: blur(calc(var(--bllbf-scale) * 11px)); -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 80%); mask-image: linear-gradient(to bottom, transparent 50%, #000 80%); } .bllbf span:nth-child(4) { -webkit-backdrop-filter: blur(calc(var(--bllbf-scale) * 22px)); backdrop-filter: blur(calc(var(--bllbf-scale) * 22px)); -webkit-mask-image: linear-gradient(to bottom, transparent 72%, #000 100%); mask-image: linear-gradient(to bottom, transparent 72%, #000 100%); } @supports not (backdrop-filter: blur(1px)) { .bllbf { display: none; } } @media (prefers-reduced-transparency: reduce) { .bllbf { display: none; } } /* Out of the way while the menu or enquiry overlay is open. */ html.menu-open .bllbf, html.enq-open .bllbf { display: none; }