/* ============================================================================= BOON AESTHETICS - OFFER VIDEO offers/assets/offers-video.css The play button that sits over an offer image, and the lightbox it opens. DELIBERATELY UNSCOPED. Unlike offers.css (scoped to .boon-offers) and offers-treatment.css (scoped to .boon-toffers), these rules are shared by both surfaces and by the single lightbox element, which lives on rather than inside either wrapper. Class names are prefixed .boon-offer-play / .boon-vlb instead, which is what keeps them from colliding with anything on the site. THE PLAY BUTTON MATCHES THE [treatment_video] SNIPPET ON PURPOSE White circle, near-black triangle, soft shadow, grows on hover. That control already appears on every treatment page's hero image, so a client who has seen one knows what this is. Only the diameter differs between surfaces. ============================================================================= */ /* --------------------------------------------------------------------------- PLAY BUTTON Absolutely positioned, so every media block that hosts one needs position:relative - both offers.css and offers-treatment.css set that on their own __media element. EVERY SELECTOR HERE DOUBLES THE CLASS. READ THIS BEFORE SIMPLIFYING THEM. Elementor's global kit emits button styling as `.elementor-kit-NNN button`, which is (0,1,1) and beats a bare `.boon-offer-play` (0,1,0). It overrides only the properties it sets - background, colour, border, padding, radius - so the button stayed correctly centred while being repainted as the theme's outlined button: a bordered box with a pale peach triangle instead of a white disc with a dark one. `all: unset` does not save you, because it is itself just a declaration in the losing rule. Doubling the class is (0,2,0) and wins, without !important and without depending on which wrapper the button happens to sit in - this control is shared by the marketing cards and the treatment card, which have different ancestors. offers-treatment.css uses the same technique for the same reason. --------------------------------------------------------------------------- */ .boon-offer-play.boon-offer-play { all: unset; box-sizing: border-box; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFFFFF; color: #272727; cursor: pointer; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .boon-offer-play.boon-offer-play svg { display: block; /* Optically centres the triangle - a play glyph's visual centre of mass sits left of its bounding box, so a mathematically centred one looks off. */ margin-left: 4px; } .boon-offer-play.boon-offer-play--lg { width: 72px; height: 72px; } .boon-offer-play.boon-offer-play--lg svg { width: 30px; height: 30px; } .boon-offer-play.boon-offer-play--sm { width: 48px; height: 48px; } .boon-offer-play.boon-offer-play--sm svg { width: 19px; height: 19px; margin-left: 3px; } .boon-offer-play.boon-offer-play:hover, .boon-offer-play.boon-offer-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .boon-offer-play.boon-offer-play:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } /* Slight scrim on hover so the white button keeps its contrast over a light image. Applied to the media block, triggered from either the image or the button, and non-interactive so it never eats the click. HOVER ONLY, DELIBERATELY. A resting scrim was tried, both flat and as a radial gradient behind the disc, to help the button read on a bright photograph. It looked like dirt on the image and was worse than the problem. If the button ever gets lost on a particular offer, change that offer's image rather than dimming every one of them. */ .boon-offer-card__media--video::after, .boon-toffer__media--video::after, .boon-hero-offer__media--video::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.35s ease; pointer-events: none; } .boon-offer-card__media--video:hover::after, .boon-toffer__media--video:hover::after, .boon-hero-offer__media--video:hover::after { background: rgba(0, 0, 0, 0.12); } @media (prefers-reduced-motion: reduce) { .boon-offer-play.boon-offer-play, .boon-offer-card__media--video::after, .boon-toffer__media--video::after { transition: none; } .boon-offer-play.boon-offer-play:hover, .boon-offer-play.boon-offer-play:focus-visible { transform: translate(-50%, -50%); } } /* --------------------------------------------------------------------------- LIGHTBOX One element, created once by offers-video.js and appended to . Hidden with [hidden] rather than a class so it is inert to assistive tech and to find-in-page while closed. z-index 99999 matches the [treatment_video] snippet, which is above Elementor's sticky header. The booking modal is a separate overlay and the two are never open together - offers video is not rendered inside the modal. --------------------------------------------------------------------------- */ .boon-vlb { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.92); animation: boon-vlb-fade 0.2s ease; } .boon-vlb[hidden] { display: none; } @keyframes boon-vlb-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .boon-vlb { animation: none; } } .boon-vlb__close { all: unset; box-sizing: border-box; position: absolute; top: 12px; right: 16px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', system-ui, sans-serif; font-size: 40px; line-height: 1; color: #FFFFFF; opacity: 0.8; cursor: pointer; transition: opacity 0.2s ease; } .boon-vlb__close:hover, .boon-vlb__close:focus-visible { opacity: 1; } .boon-vlb__close:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } /* 16:9 rather than the snippet's 90vh. A fixed tall box letterboxes a landscape video with black bars top and bottom on a desktop screen; aspect-ratio sizes the frame to the video instead. max-height keeps it inside a short viewport. */ .boon-vlb__frame { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; max-height: 84vh; } .boon-vlb__frame > iframe, .boon-vlb__frame > video { width: 100%; height: 100%; display: block; border: none; border-radius: 6px; background: #000; } @media (max-width: 600px) { .boon-vlb { padding: 12px; } .boon-vlb__close { top: 4px; right: 6px; font-size: 34px; } }