Steven002
108 lines
2.7 KiB
CSS
108 lines
2.7 KiB
CSS
/**
|
|
* 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-top-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
|
|
--aifo-glow-left-image: url("../images/backgrounds/bg_left_academy_section.webp");
|
|
--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;
|
|
}
|
|
|
|
.aifo-glow-left {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: auto;
|
|
left: calc((100% - 100vw) / 2);
|
|
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-left-image);
|
|
background-repeat: no-repeat;
|
|
background-position: left 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-top-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;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
.aifo-glow-left
|
|
{
|
|
width: 127%;
|
|
}
|
|
} |