/** * AIFO section glow — shared left/right decorative glows. * Copied from special-offer-50 (.so-welcome__glow, #special-offer-50::before). * Original special-offer-50 page is unchanged; import this file for new sections/pages. */ :root { --aifo-glow-right-image: url("../images/backgrounds/new-user-promo-welcome-side-glow.png"); --aifo-glow-left-image: url("../images/backgrounds/new-user-promo-corner-glow.png"); --aifo-glow-right-width: min(82vw, 720px); --aifo-glow-left-top: 106px; --aifo-glow-left-offset: -2vw; --aifo-glow-left-size: min(60vw, 555px); --aifo-glow-left-max-height: min(52vh, 485px); } /* Section-level host */ .aifo-section-glow-host { position: relative; overflow: visible; } .aifo-section-glow-host > *:not(.aifo-glow-right):not(.left_bg_light) { position: relative; z-index: 1; } /* Right — from .so-welcome__glow */ .aifo-glow-right { position: absolute; top: 50%; right: calc((100% - 100vw) / 2); left: auto; bottom: auto; transform: translateY(-50%); width: var(--aifo-glow-right-width); height: 100vh; height: 100dvh; max-height: 100svh; z-index: 0; pointer-events: none; background-color: transparent; background-image: var(--aifo-glow-right-image); background-repeat: no-repeat; background-position: right center; background-size: auto 100%; mix-blend-mode: screen; } /* Left — from #special-offer-50::before */ .left_bg_light { position: absolute; top: var(--aifo-glow-left-top); left: var(--aifo-glow-left-offset); width: var(--aifo-glow-left-size); height: var(--aifo-glow-left-size); max-height: var(--aifo-glow-left-max-height); z-index: 0; pointer-events: none; background: var(--aifo-glow-left-image) no-repeat left top / cover; } /* Page-level host (left glow on full page) */ .aifo-page-glow-host { position: relative; } .aifo-page-glow-host > .left_bg_light, .aifo-page-glow-host > .aifo-glow-right { z-index: 0; } .aifo-page-glow-host > *:not(.left_bg_light):not(.aifo-glow-right) { position: relative; z-index: 1; }