update 4page

2026-07-02 18:15:06 +08:00
parent 4d30803b60
commit 296db4a164
53 changed files with 5271 additions and 60 deletions
@@ -0,0 +1,76 @@
+/**
+ * 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;
+}