diff --git a/assets/css/about-us-2.css b/assets/css/about-us-2.css new file mode 100644 index 0000000..5ff697d --- /dev/null +++ b/assets/css/about-us-2.css @@ -0,0 +1,535 @@ +/** + * About Us 2 — from Figma AIFO About Us-2 (node 11157:34903). + */ +#about-us-2 { + --primary: #f98715; + --primary-hover: #f9a215; + --bg-page: #070400; + --bg-card: #0e0e0e; + --border-muted: #989795; + --text-main: #f9f9f9; + --text-muted: #909090; + --text-secondary: #ccc; + --aifo-page-bg-height: 920px; + --aifo-page-content-offset: 1.375rem; + background: var(--bg-page); + color: var(--text-main); + overflow-x: hidden; +} + +@media (max-width: 768px) { + #about-us-2 { + --aifo-page-bg-height: 520px; + --aifo-page-content-offset: 1rem; + } +} + +#about-us-2 .au2-page { + position: relative; + z-index: 2; + max-width: 1140px; + margin: 0 auto; + padding: 0 18px 80px; +} + +#about-us-2 .text-orange { + color: var(--primary); +} + +/* ── Buttons ── */ +#about-us-2 .au2-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border: none; + border-radius: 10px; + padding: 16px 32px; + min-height: 52px; + font-size: 16px; + font-weight: 500; + letter-spacing: -0.16px; + color: var(--text-main); + background: var(--primary); + text-decoration: none; + cursor: pointer; + transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; +} + +#about-us-2 .au2-btn:hover { + background: var(--primary-hover); + box-shadow: inset 0 5px 10px rgba(249, 135, 21, 0.6), 0 5px 10px rgba(249, 135, 21, 0.6); + color: var(--text-main); + text-decoration: none; +} + +#about-us-2 .au2-btn--outline { + background: rgba(15, 15, 15, 0.5); + border: 0.657px solid #666; + box-shadow: none; +} + +#about-us-2 .au2-btn--outline:hover { + background: rgba(249, 135, 21, 0.08); + border-color: var(--primary); + box-shadow: none; +} + +/* ── Shared typography ── */ +#about-us-2 .au2-label { + margin: 0 0 12px; + font-size: 14px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--primary); +} + +#about-us-2 .au2-section-title { + margin: 0 0 16px; + font-size: clamp(32px, 4.5vw, 48px); + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.48px; +} + +#about-us-2 .au2-section-title--center { + text-align: center; +} + +#about-us-2 .au2-section-desc { + margin: 0 0 48px; + font-size: 18px; + line-height: 1.5; + color: var(--text-muted); +} + +#about-us-2 .au2-section-desc--center { + text-align: center; + max-width: 560px; + margin-left: auto; + margin-right: auto; +} + +/* ── Hero ── */ +#about-us-2 .au2-hero { + position: relative; + display: flex; + justify-content: center; + padding: 72px 0 64px; + text-align: center; +} + +#about-us-2 .au2-hero__glow { + position: absolute; + top: -40px; + left: 50%; + width: min(90vw, 720px); + height: 360px; + transform: translateX(-50%); + background: radial-gradient(ellipse at center, rgba(249, 135, 21, 0.35) 0%, transparent 70%); + pointer-events: none; + z-index: 0; +} + +#about-us-2 .au2-hero__inner { + position: relative; + z-index: 1; + max-width: 720px; +} + +#about-us-2 .au2-hero__title { + margin: 0 0 24px; + font-size: clamp(40px, 6vw, 64px); + line-height: 1.12; + font-weight: 700; + letter-spacing: -0.02em; +} + +#about-us-2 .au2-hero__desc { + margin: 0 auto 32px; + max-width: 620px; + font-size: clamp(16px, 2.2vw, 20px); + line-height: 1.55; + font-weight: 400; + color: var(--text-secondary); +} + +#about-us-2 .au2-hero__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +/* ── Intro ── */ +#about-us-2 .au2-intro { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 48px; + padding: 48px 0 64px; +} + +#about-us-2 .au2-intro__title { + margin: 0 0 20px; + font-size: clamp(28px, 4vw, 40px); + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.4px; +} + +#about-us-2 .au2-intro__text { + margin: 0; + font-size: 16px; + line-height: 1.7; + color: var(--text-muted); +} + +#about-us-2 .au2-intro__visual img { + display: block; + width: 100%; + height: auto; + border-radius: 16px; + border: 0.5px solid rgba(152, 151, 149, 0.35); + object-fit: cover; +} + +/* ── Stats ── */ +#about-us-2 .au2-stats { + padding: 0 0 72px; +} + +#about-us-2 .au2-stats__bar { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + padding: 40px 24px; + border-radius: 16px; + background: url("../images/backgrounds/bg_key_states.png") center / 100% 100% no-repeat; + border: 0.5px solid rgba(152, 151, 149, 0.22); +} + +#about-us-2 .au2-stats__item { + position: relative; + text-align: center; + padding: 0 16px; +} + +#about-us-2 .au2-stats__item:not(:last-child)::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 1px; + height: 48px; + background: rgba(255, 255, 255, 0.13); +} + +#about-us-2 .au2-stats__value { + margin: 0 0 6px; + font-size: clamp(24px, 3vw, 34px); + font-weight: 800; + line-height: 1.2; + color: #fff; +} + +#about-us-2 .au2-stats__label { + margin: 0; + font-size: 12px; + line-height: 1.4; + color: rgba(255, 255, 255, 0.6); +} + +/* ── CTA Banner ── */ +#about-us-2 .au2-cta { + position: relative; + margin: 0 0 72px; + padding: 64px 32px; + border-radius: 20px; + text-align: center; + overflow: hidden; + border: 0.5px solid rgba(152, 151, 149, 0.22); + background: rgba(12, 12, 12, 0.85); +} + +#about-us-2 .au2-cta__glow { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + height: 200px; + transform: translate(-50%, -50%); + background: radial-gradient(ellipse at center, rgba(249, 135, 21, 0.3) 0%, transparent 70%); + pointer-events: none; + z-index: 0; +} + +#about-us-2 .au2-cta__inner { + position: relative; + z-index: 1; + max-width: 560px; + margin: 0 auto; +} + +#about-us-2 .au2-cta__title { + margin: 0 0 16px; + font-size: clamp(28px, 4vw, 40px); + line-height: 1.2; + font-weight: 700; +} + +#about-us-2 .au2-cta__desc { + margin: 0 0 28px; + font-size: 16px; + line-height: 1.55; + color: var(--text-muted); +} + +/* ── Core Values ── */ +#about-us-2 .au2-values { + padding: 0 0 72px; +} + +#about-us-2 .au2-values__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-top: 48px; +} + +#about-us-2 .au2-value-card { + padding: 32px 28px; + border-radius: 16px; + border: 0.5px solid rgba(152, 151, 149, 0.35); + background: var(--bg-card); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +#about-us-2 .au2-value-card:hover { + border-color: rgba(249, 135, 21, 0.4); + box-shadow: 0 8px 32px rgba(249, 135, 21, 0.08); +} + +#about-us-2 .au2-value-card__icon { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + margin-bottom: 20px; + border-radius: 12px; + background: rgba(249, 135, 21, 0.1); +} + +#about-us-2 .au2-value-card__icon img { + display: block; + width: 32px; + height: 32px; +} + +#about-us-2 .au2-value-card__title { + margin: 0 0 12px; + font-size: 22px; + font-weight: 700; + line-height: 1.3; +} + +#about-us-2 .au2-value-card__text { + margin: 0; + font-size: 15px; + line-height: 1.65; + color: var(--text-muted); +} + +/* ── Testimonials ── */ +#about-us-2 .au2-testimonials { + padding: 0 0 72px; +} + +#about-us-2 .au2-testimonials__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +#about-us-2 .au2-testimonial { + padding: 24px; + border-radius: 15px; + border: 0.5px solid var(--border-muted); + background: var(--bg-card); +} + +#about-us-2 .au2-testimonial--wide { + grid-column: span 2; +} + +#about-us-2 .au2-testimonial__head { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +#about-us-2 .au2-testimonial__flag.fi { + width: 28px; + height: 20px; + line-height: 20px; + border-radius: 2px; + overflow: hidden; + flex-shrink: 0; + background-size: cover; +} + +#about-us-2 .au2-testimonial__name { + margin: 0; + font-size: 18px; + font-weight: 600; + line-height: 1.3; +} + +#about-us-2 .au2-testimonial__meta { + margin: 2px 0 0; + font-size: 14px; + color: var(--text-muted); +} + +#about-us-2 .au2-testimonial__quote { + margin: 0; + font-size: 15px; + line-height: 1.7; + font-weight: 300; + color: var(--text-muted); +} + +/* ── Support ── */ +#about-us-2 .au2-support { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 48px; + padding: 48px 0 0; +} + +#about-us-2 .au2-support__title { + margin: 0 0 16px; + font-size: clamp(28px, 4vw, 36px); + line-height: 1.2; + font-weight: 700; +} + +#about-us-2 .au2-support__desc { + margin: 0 0 28px; + font-size: 16px; + line-height: 1.55; + color: var(--text-muted); +} + +#about-us-2 .au2-support__actions { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +#about-us-2 .au2-support__visual { + display: flex; + justify-content: center; + align-items: center; +} + +#about-us-2 .au2-support__visual img { + display: block; + width: min(100%, 360px); + height: auto; + filter: drop-shadow(0 0 40px rgba(249, 135, 21, 0.35)); +} + +/* ── Responsive ── */ +@media (max-width: 991px) { + #about-us-2 .au2-intro { + grid-template-columns: 1fr; + gap: 32px; + } + + #about-us-2 .au2-intro__visual { + order: -1; + } + + #about-us-2 .au2-stats__bar { + grid-template-columns: repeat(2, 1fr); + gap: 32px 16px; + background-image: url("../images/backgrounds/bg_key_states_mb.png"); + } + + #about-us-2 .au2-stats__item:nth-child(2)::after { + display: none; + } + + #about-us-2 .au2-stats__item:nth-child(odd):not(:last-child)::after { + display: block; + } + + #about-us-2 .au2-values__grid { + grid-template-columns: 1fr; + } + + #about-us-2 .au2-testimonials__grid { + grid-template-columns: 1fr; + } + + #about-us-2 .au2-testimonial--wide { + grid-column: span 1; + } + + #about-us-2 .au2-support { + grid-template-columns: 1fr; + text-align: center; + } + + #about-us-2 .au2-support__actions { + justify-content: center; + } +} + +@media (max-width: 768px) { + #about-us-2 .au2-page { + padding-left: 16px; + padding-right: 16px; + padding-bottom: 56px; + } + + #about-us-2 .au2-hero { + padding-top: 48px; + padding-bottom: 40px; + } + + #about-us-2 .au2-hero__actions, + #about-us-2 .au2-support__actions { + flex-direction: column; + align-items: center; + } + + #about-us-2 .au2-btn { + width: 100%; + max-width: 280px; + } + + #about-us-2 .au2-stats__bar { + padding: 32px 16px; + } + + #about-us-2 .au2-stats__item::after { + display: none !important; + } + + #about-us-2 .au2-cta { + padding: 48px 20px; + margin-bottom: 48px; + } + + #about-us-2 .au2-values, + #about-us-2 .au2-testimonials { + padding-bottom: 48px; + } +} diff --git a/assets/css/aifo-section-glow.css b/assets/css/aifo-section-glow.css new file mode 100644 index 0000000..682a0cd --- /dev/null +++ b/assets/css/aifo-section-glow.css @@ -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; +} diff --git a/assets/css/foot.css b/assets/css/foot.css index 31739f8..fd274e4 100644 --- a/assets/css/foot.css +++ b/assets/css/foot.css @@ -1,5 +1,3 @@ -/* AIFO Footer — Figma ref: temp/底部栏20260610 Footer */ - .aifo-foot { --foot-bg: #070400; --foot-accent: #f98715; @@ -8,9 +6,12 @@ --foot-muted-60: rgba(255, 255, 255, 0.6); --foot-border: rgba(255, 255, 255, 0.16); --foot-chip-bg: rgba(255, 255, 255, 0.2); + --foot-glow-overlap: clamp(72px, 11vw, 200px); position: relative; width: 100%; overflow: hidden; + /* margin-top: calc(var(--foot-glow-overlap) * -1); + padding-top: var(--foot-glow-overlap); */ background: var(--foot-bg); color: var(--foot-text); font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; @@ -18,10 +19,43 @@ .aifo-foot__glow { position: absolute; - inset: 0; + left: 50%; + bottom: 0; + transform: translateX(-50%); + width: max(100%, 1920px); + height: clamp(560px, 72vw, 960px); pointer-events: none; z-index: 0; - background: url("/assets/images/backgrounds/footer_bg.png") center bottom / cover no-repeat; + background: url("../images/backgrounds/footer_bg.png") center bottom / 100% auto no-repeat; + /* PNG 顶部为纯黑 #000,与 --foot-bg #070400 在宽屏下会形成硬边;顶部渐隐后与页面底色融合 */ + -webkit-mask-image: linear-gradient( + to bottom, + transparent 0%, + rgba(0, 0, 0, 0.25) 14%, + rgba(0, 0, 0, 0.72) 28%, + #000 42%, + #000 100% + ); + mask-image: linear-gradient( + to bottom, + transparent 0%, + rgba(0, 0, 0, 0.25) 14%, + rgba(0, 0, 0, 0.72) 28%, + #000 42%, + #000 100% + ); +} + +.aifo-foot::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: var(--foot-glow-overlap); + z-index: 0; + pointer-events: none; + background: linear-gradient(to bottom, var(--foot-bg) 0%, rgba(7, 4, 0, 0.55) 55%, transparent 100%); } .aifo-foot__inner { @@ -139,6 +173,15 @@ flex-shrink: 0; } +.aifo-foot__contact-label .icon-dianhua, +.aifo-foot__contact-label .icon-youxiang, +.aifo-foot__contact-label .icon-dizhi { + flex-shrink: 0; + font-size: 14px; + line-height: 14px; + color: #f98715; +} + .aifo-foot__contact-value { margin: 0; font-size: 14px; diff --git a/assets/css/index.css b/assets/css/index.css index c594c68..ad1e555 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1591,13 +1591,102 @@ /* home page */ #block-1 { - height: 90.9375rem; - background-image: url("../images/backgrounds/20251203-153844.png"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; + height: 39.9375rem; + background-image: none; position: relative; + z-index: 1; } + +.main { + position: relative; + z-index: 1; +} + +/* Hero background img — height derived from dots position + arc offset in source image + * + * Formula (object-fit: cover; object-position: center bottom; width-limited): + * hero-bg-height = dots-bottom-y + arc-gap + viewportWidth × (arcOffsetPx / imageWidth) + * + * arcOffsetPx: arc peak distance from bottom of source PNG (measure once in Figma) + * dots-bottom-y: distance from hero top to bottom of .home-hero-carousel__dots + */ +#homepage { + --hero-img-width: 2880; + --hero-img-height: 1982; + --hero-img-arc-offset: 920; + --hero-nav-gap: 76px; + --hero-coach-dots-gap: 35px; + --hero-dots-height: 10px; + /* left column: badge top → AI Coach bottom */ + --hero-slide1-content-height: 486px; + /* viewport height (fits right visual + left column) */ + --hero-slide1-viewport-height: 580px; + --hero-inner-padding-bottom: 40px; + /* Mobile: arc ~30px below dots (height-limited cover) */ + --hero-arc-gap: 30px; + --hero-dots-y: calc(48px + 720px + 56px - 32px + 10px); +} + +#homepage .hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + /* Narrow screens: scale driven by height → solve H from dots + arc-gap */ + height: calc( + (var(--hero-dots-y) + var(--hero-arc-gap)) * var(--hero-img-height) + / (var(--hero-img-height) - var(--hero-img-arc-offset)) + ); + object-fit: cover; + object-position: center bottom; + z-index: -1; + background-color: #050302; + display: block; + pointer-events: none; +} + +@media (min-width: 768px) and (max-width: 991.98px) { + #homepage { + --hero-dots-y: calc(80px + 720px + 64px - 40px + 10px); + } +} + +@media (min-width: 992px) { + #homepage { + --hero-arc-gap: 8px; + --hero-bg-height-adjust: -15px; + --hero-dots-y: calc( + var(--hero-nav-gap) + var(--hero-slide1-content-height) + + var(--hero-coach-dots-gap) + var(--hero-dots-height) + + var(--hero-inner-padding-bottom) + ); + } + + #homepage .hero-bg { + /* Wide screens: scale driven by width */ + height: calc( + var(--hero-dots-y) + var(--hero-arc-gap) + + 100vw * var(--hero-img-arc-offset) / var(--hero-img-width) + + var(--hero-bg-height-adjust) + ); + } +} + +/* Fallback for pages without #homepage wrapper */ +.hero-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 39.9375rem; + object-fit: cover; + object-position: center bottom; + z-index: -1; + background-color: #050302; + display: block; + pointer-events: none; +} + #block-1 .hero-buttons { margin-top: 5rem; } @@ -5616,7 +5705,7 @@ text-align: left; } } -.footer .text-muted { +.footer p.text-muted{ text-align: justify; } @@ -5625,10 +5714,27 @@ padding-right: 1.9376rem; padding-left: 1.9376rem; } - .footer .text-muted { + .footer p.text-muted{ padding: 0 15px; } } + +@media(max-width:768px){ + .banner-desc br,#block-1{height:62.9375rem;position:relative;min-height:42vh;min-height:42svh} + #homepage #block-1{ + height:auto; + min-height:0; + } + .funded-trading-hero .d-flex .img-fluid-r{right:-13px} + .hero-img{top:7px} + .funded-trading-hero .d-flex .img-fluid-l{left:-3px} + .funded-trading-hero .hero-title{font-size:35px} + #section-6 h2{text-align:center} + #section-3 h5 .h-inline-icon{margin-right:.25rem} + .banner-desc br, .hero-bg { display: block; } +} + + @media (min-width: 2500px) { .section-challenge .content-container { max-width: 70vw; diff --git a/assets/css/leading-v2.css b/assets/css/leading-v2.css new file mode 100644 index 0000000..5b23544 --- /dev/null +++ b/assets/css/leading-v2.css @@ -0,0 +1,262 @@ +/** + * Leading V2 — header, footer, and page (from Figma export leading-v2). + * Use with layout-v2.js + aifo-page-bg.css (same background pattern as promotion-activity). + */ +#leading-v2 { + --primary: #f98715; + --bg-page: #070400; + --text-main: #f9f9f9; + --text-muted: #909090; + --aifo-page-bg-height: 805px; + --aifo-page-content-offset: 1.375rem; + --lv2-header-height: 5.75rem; + background: var(--bg-page); + color: var(--text-main); + overflow-x: hidden; +} + +@media (max-width: 768px) { + #leading-v2 { + --aifo-page-bg-height: 445px; + --aifo-page-content-offset: 1rem; + --lv2-header-height: 72px; + } +} + +#leading-v2 { + --aifo-nav-height: var(--lv2-header-height); +} + +/* ── Header (glass-panel — same as components/nav.html) ── */ +.lv2-header { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1541; + padding: 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); +} + +@media (min-width: 992px) { + .lv2-header.glass-panel { + background-color: rgba(0, 0, 0, 0.5); + } +} + +.lv2-header__inner { + display: flex; + align-items: center; + justify-content: flex-start; + max-width: 1128px; + margin: 0 auto; + padding: 20px; +} + +@media (min-width: 768px) { + .lv2-header__inner { + padding: 30px 32px; + } +} + +.lv2-header__logo { + display: inline-flex; + flex-shrink: 0; +} + +.lv2-header__logo img { + display: block; + height: 32px; + width: auto; +} + +/* ── Page ── */ +#leading-v2 .leading-v2-page { + position: relative; + z-index: 2; + max-width: 1140px; + margin: 0 auto; + padding: 0 18px 24px; +} + +#leading-v2 .lv2-hero { + display: flex; + flex-direction: column; + align-items: center; + max-width: 900px; + margin: 0 auto; + padding: 48px 0 0; + text-align: center; +} + +@media (min-width: 768px) { + #leading-v2 .lv2-hero { + padding-top: 80px; + } +} + +#leading-v2 .lv2-hero__title { + margin: 0; + font-size: clamp(34px, 5vw, 60px); + line-height: 1.15; + font-weight: 700; + letter-spacing: -0.01em; + color: #fff; +} + +#leading-v2 .lv2-hero__title-accent { + color: var(--primary); +} + +#leading-v2 .lv2-hero__subtitle { + margin: 16px 0 0; + font-size: clamp(18px, 2.5vw, 20px); + line-height: 1.5; + letter-spacing: -0.01em; + color: #fff; +} + +#leading-v2 .lv2-hero__form { + width: 100%; + max-width: 900px; + margin-top: 40px; +} + +#leading-v2 #promo-compare-module { + width: 100%; + margin-top: 64px; +} + +@media (min-width: 768px) { + #leading-v2 #promo-compare-module { + margin-top: 112px; + } +} + +#leading-v2 #promo-compare-module .promo-section { + padding: 48px 0 24px; +} + +#leading-v2 #promo-compare-module .promo-section--compare { + padding-top: 32px; + padding-bottom: 24px; +} + +@media (max-width: 768px) { + #leading-v2 #promo-compare-module .promo-section { + padding: 32px 0 16px; + } + + #leading-v2 #promo-compare-module .promo-section__title { + margin-bottom: 24px; + } +} + +/* ── Footer (RegisterLanding) ── */ +.lv2-footer { + position: relative; + overflow: hidden; + margin-top: 32px; + padding: 40px 20px 48px; + background: var(--bg-page); +} + +@media (min-width: 768px) { + .lv2-footer { + padding: 40px 32px 48px; + } +} + +.lv2-footer__glow { + position: absolute; + bottom: 0; + left: 50%; + width: 120%; + height: 400px; + border-radius: 50%; + background: var(--primary); + opacity: 0.25; + filter: blur(175px); + transform: translateX(-50%); + pointer-events: none; +} + +.lv2-footer__inner { + position: relative; + max-width: 1046px; + margin: 0 auto; +} + +.lv2-footer__logo-row { + display: flex; + justify-content: center; + padding-bottom: 24px; + border-bottom: 1px solid rgba(152, 151, 149, 0.5); +} + +.lv2-footer__logo img { + display: block; + height: 32px; + width: auto; +} + +.lv2-footer__text { + margin: 32px 0 0; + font-size: 13px; + line-height: 20px; + letter-spacing: -0.01em; + color: #fff; +} + +.lv2-footer__company { + margin-top: 20px; + font-size: 13px; + line-height: 20px; + color: #fff; +} + +.lv2-footer__company p { + margin: 0; +} + +.lv2-footer__bottom { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 32px; + padding-top: 24px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + font-size: 12px; + line-height: 1.5; + letter-spacing: 0.24px; + color: #f9f9f9; +} + +@media (min-width: 768px) { + .lv2-footer__bottom { + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + +.lv2-footer__bottom > p { + margin: 0; +} + +.lv2-footer__bottom-links { + display: flex; + flex-wrap: wrap; + gap: 8px 32px; +} + +.lv2-footer__bottom-links a { + color: #fff; + text-decoration: none; + transition: color 0.2s ease; +} + +.lv2-footer__bottom-links a:hover { + color: var(--primary); + text-decoration: none; +} diff --git a/assets/css/modules/adl-register.css b/assets/css/modules/adl-register.css new file mode 100644 index 0000000..10fa872 --- /dev/null +++ b/assets/css/modules/adl-register.css @@ -0,0 +1,463 @@ +/** + * ADL register form styles (from aifo theme adl-register.css). + * Used by pages/modules/adl-register.section.html + */ +.adl-register { + --adl-primary: #F98715; + --adl-white: #FFFFFF; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + color: var(--adl-white); +} + +.adl-btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 22px; + border-radius: 12px; + font-size: 13px; + line-height: 24px; + font-weight: 700; + text-decoration: none; + transition: .18s; + cursor: pointer; +} + +.adl-btn-primary { + background: var(--adl-primary); + color: #fff; + border: 1px solid rgba(255, 255, 255, .18); +} + +.adl-btn-primary:hover { + color: #fff; + background: #ffa12f; + box-shadow: 0 0 16px rgba(249, 135, 21, .45); + transform: translateY(-1px); +} + +.adl-btn-primary:disabled { + opacity: 0.65; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.adl-btn-ghost { + background: rgba(255, 255, 255, .08); + color: #fff; + border: 1px solid rgba(255, 255, 255, .25); +} + +.adl-btn-ghost:hover { + color: #fff; + background: rgba(255, 255, 255, .16); + transform: translateY(-1px); +} + +.adl-register { + padding: 86px 0; + background: linear-gradient(180deg, #090909, #050505); +} + +.adl-register-top { + padding: 18px 0 74px; + background: transparent; +} + +.adl-register-top .adl-register-box { + max-width: 900px; + box-shadow: 0 20px 55px rgba(0, 0, 0, .42); +} + +.adl-register .container { + width: 100%; + max-width: 1140px; + margin: 0 auto; + padding: 0 15px; +} + +.adl-register-box { + max-width: 860px; + margin: 0 auto; + text-align: center; + padding: 40px 30px; + border-radius: 24px; + border: 1px solid rgba(249, 135, 21, .46); + background: radial-gradient(circle at 50% 0, rgba(249, 135, 21, .24), rgba(0, 0, 0, .28) 52%); + backdrop-filter: blur(3px); +} + +.adl-register-box h2 { + font-size: 56px; + line-height: 64px; + color: #fff; + margin: 0 0 12px; + font-weight: 700; +} + +.adl-register-box > p { + font-size: 20px; + line-height: 30px; + color: #fff; + margin: 0 0 28px; + opacity: .95; + font-weight: 400; +} + +.adl-register-form { + max-width: 800px; + margin: 0 auto; + text-align: left; + background: rgba(255, 255, 255, .03); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 20px; + padding: 20px 18px 16px; +} + +.adl-form-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.adl-field label { + display: block; + font-size: 16px; + line-height: 24px; + margin: 0 0 8px; + color: #fff; + font-weight: 700; + letter-spacing: .01em; +} + +.adl-field input, +.adl-country-wrap select { + width: 100%; + height: 54px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, .24); + background: rgba(0, 0, 0, .55); + color: #fff; + padding: 0 14px; + font-size: 16px; + transition: border-color .18s, box-shadow .18s, background .18s; + box-sizing: border-box; +} + +.adl-field input:focus, +.adl-country-wrap select:focus { + outline: none; + border-color: rgba(249, 135, 21, .7); + box-shadow: 0 0 0 3px rgba(249, 135, 21, .16); +} + +.adl-phone-row { + display: block; +} + +.adl-phone-wrapper { + display: flex; + align-items: center; + background: #111; + border: 1px solid #2a2a2a; + border-radius: 14px; + padding: 2px 10px; + position: relative; + height: 54px; +} + +.adl-phone-wrapper:focus-within { + border-color: #F98715; + box-shadow: 0 0 0 3px rgba(249, 135, 21, .16); +} + +.adl-country-select { + display: flex; + align-items: center; + gap: 8px; + border: 0; + background: transparent; + color: #fff; + font-size: 14px; + min-width: 92px; + padding: 0; + cursor: pointer; +} + +.adl-country-flag { + font-size: 18px; + line-height: 1; +} + +.adl-country-code { + font-size: 14px; +} + +.adl-country-arrow { + font-size: 12px; + opacity: .7; +} + +.adl-phone-input { + background: transparent !important; + border: 0 !important; + box-shadow: none !important; + flex: 1; + height: 44px !important; + padding: 8px 10px !important; +} + +.adl-country-menu { + display: none; + position: absolute; + left: 0; + top: 56px; + width: 100%; + background: #1B1B1B; + border: 1px solid #333; + border-radius: 10px; + padding: 8px; + z-index: 30; + max-height: 260px; + overflow: hidden; +} + +.adl-country-menu.open { + display: block; +} + +.adl-country-search { + width: 100%; + height: 36px; + border: 1px solid #3a3a3a; + border-radius: 6px; + background: #3a3a3a; + color: #fff; + padding: 0 10px; + font-size: 14px; + margin-bottom: 8px; + box-sizing: border-box; +} + +.adl-country-list { + max-height: 190px; + overflow: auto; +} + +.adl-country-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px; + border-radius: 6px; + color: #fff; + font-size: 14px; + cursor: pointer; +} + +.adl-country-item:hover { + background: #2a2a2a; +} + +.adl-pass-wrap { + position: relative; +} + +.adl-pass-wrap input { + padding-right: 50px; +} + +.adl-eye-toggle { + position: absolute; + right: 14px; + top: 9px; + width: 36px; + height: 36px; + border: 0; + background: none; + color: rgba(249, 249, 249, .55); + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: color .2s ease; +} + +.adl-eye-icon { + width: 20px; + height: 20px; + stroke-width: 2; +} + +.adl-eye-toggle:hover { + color: rgba(249, 249, 249, .85); +} + +.adl-eye-toggle.is-visible { + color: var(--adl-primary); +} + +.adl-code-row { + display: flex; + gap: 10px; +} + +.adl-code-row input { + flex: 1; +} + +.adl-code-row button { + white-space: nowrap; + font-size: 14px; + height: 50px; + padding: 0 18px; +} + +.adl-check { + display: flex; + gap: 8px; + align-items: flex-start; + font-size: 14px; + line-height: 22px; + color: #fff; + margin: 10px 0 0; + cursor: pointer; +} + +.adl-check input { + margin-top: 4px; + width: auto; + height: auto; +} + +.adl-register-error { + display: none; + background: rgba(255, 92, 92, .12); + border: 1px solid rgba(255, 92, 92, .35); + border-radius: 10px; + padding: 10px 12px; + color: #fff; + font-size: 13px; + line-height: 20px; + margin: 8px 0 12px; +} + +.adl-register-error.show { + display: block; +} + +.adl-submit { + width: 300px !important; + max-width: 100% !important; + height: auto !important; + background: var(--adl-primary) !important; + color: #fff !important; + border: none !important; + border-radius: 12px !important; + padding: 12px 22px !important; + font-size: 16px !important; + font-weight: 700 !important; + line-height: 24px !important; + letter-spacing: 0 !important; + margin: 15px auto 0 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + box-shadow: none !important; +} + +.adl-login-hint { + margin: 10px 0 0; + text-align: center; + font-size: 14px !important; + line-height: 22.4px !important; + color: rgba(249, 249, 249, .75) !important; + font-weight: 400 !important; +} + +.adl-login-hint a { + color: var(--adl-primary); + font-size: 14px !important; + font-weight: 400 !important; + text-decoration: none; + margin-left: 4px; +} + +.adl-login-hint a:hover { + text-decoration: underline; +} + +.adl-register-actions { + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; + margin-top: 16px; +} + +.adl-register-actions .adl-btn { + width: 300px; + max-width: 100%; + justify-content: center; +} + +.adl-disclaimer { + margin-top: 14px !important; + font-size: 12px !important; + line-height: 20px !important; + opacity: .82; +} + +/* Embedded in leading-v2 hero */ +#leading-v2 .lv2-hero .adl-register-top { + padding: 0; + width: 100%; +} + +#leading-v2 .lv2-hero .adl-register .container { + padding: 0; + max-width: none; +} + +@media (max-width: 768px) { + .adl-register-box h2 { + font-size: 36px; + line-height: 44px; + } + + .adl-register-box > p { + font-size: 16px; + line-height: 24px; + } + + .adl-form-grid { + grid-template-columns: 1fr; + gap: 12px; + } + + .adl-code-row { + flex-direction: column; + } + + .adl-register-top { + padding-top: 20px; + } + + .adl-register-top .adl-register-box { + padding: 24px 16px; + } + + .adl-register-form { + padding: 14px 12px; + } + + .adl-code-row input { + flex: unset; + } + + #leading-v2 .lv2-hero .adl-register-top { + padding-top: 0; + } +} diff --git a/assets/css/modules/home-hero-carousel.css b/assets/css/modules/home-hero-carousel.css new file mode 100644 index 0000000..dd8cde2 --- /dev/null +++ b/assets/css/modules/home-hero-carousel.css @@ -0,0 +1,400 @@ +/** + * Home hero carousel — scoped to #section-1.home-hero-carousel + * Source: Serena/Figma HeroCarousel.tsx (autoplay 5s, fade, pill dots) + */ +#homepage #section-1.home-hero-carousel { + position: relative; + overflow: hidden; + padding: 0; + margin: 0; + background: transparent; + --hero-inner-padding-bottom: 40px; +} + +/* #homepage .home-hero-carousel__glow { + pointer-events: none; + position: absolute; + top: -120px; + left: 50%; + width: 140%; + max-width: 1600px; + height: 700px; + transform: translateX(-50%); + border-radius: 50%; + opacity: 0.7; + background: radial-gradient( + ellipse at center, + #f7931e 0%, + #88510f 18%, + #2b1905 40%, + transparent 70% + ); +} */ + +#homepage .home-hero-carousel__inner { + position: relative; + z-index: 1; + max-width: 1128px; + margin: 0 auto; + padding: 48px 20px 56px; +} + +@media (min-width: 768px) { + #homepage .home-hero-carousel__inner { + padding: 76px 32px 64px; + } +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__inner { + padding: var(--hero-nav-gap) 32px + calc(var(--hero-coach-dots-gap) + var(--hero-dots-height) + var(--hero-inner-padding-bottom)); + min-height: calc( + var(--hero-nav-gap) + var(--hero-slide1-viewport-height) + + var(--hero-coach-dots-gap) + var(--hero-dots-height) + + var(--hero-inner-padding-bottom) + ); + } +} + +#homepage .home-hero-carousel__viewport { + position: relative; + overflow: hidden; + height: 720px; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__viewport { + height: var(--hero-slide1-viewport-height); + overflow: hidden; + } +} + +@media (max-width: 991.98px) { + #homepage .home-hero-carousel__viewport { + touch-action: pan-y; + } +} + +#homepage .home-hero-carousel__slide { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + opacity: 0; + pointer-events: none; + position: absolute; + inset: 0; + transition: opacity 0.7s ease; +} + +#homepage .home-hero-carousel__slide.is-active { + opacity: 1; + pointer-events: auto; +} + +#homepage .home-hero-carousel__slide-grid { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + width: 100%; + height: 100%; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__slide { + justify-content: flex-start; + } + + #homepage .home-hero-carousel__slide-grid { + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + gap: 48px; + height: 100%; + } +} + +#homepage .home-hero-carousel__content { + display: flex; + flex-direction: column; + gap: 48px; + width: 100%; + max-width: 560px; + text-align: center; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__content { + text-align: left; + align-items: flex-start; + } +} + +#homepage .home-hero-carousel__copy { + display: flex; + flex-direction: column; + gap: 24px; +} + +#homepage .home-hero-carousel__heading-group { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__heading-group { + align-items: flex-start; + } +} + +#homepage .home-hero-carousel__badge { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + border-radius: 20px; + background: rgba(249, 135, 21, 0.4); + color: #f98715; + font-size: 16px; + line-height: 18px; + letter-spacing: -0.01em; +} + +#homepage .home-hero-carousel__badge-icon { + flex-shrink: 0; + display: block; + width: 20px; + height: 20px; + object-fit: contain; +} + +#homepage .home-hero-carousel__title { + margin: 0; + font-size: clamp(36px, 5vw, 54px); + line-height: 1.1; + letter-spacing: -0.01em; + font-weight: 800; + color: #fff; +} + +#homepage .home-hero-carousel__desc { + margin: 0; + font-size: clamp(18px, 2.2vw, 20px); + line-height: 1.4; + color: #fff; +} + +#homepage .home-hero-carousel__actions { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 12px; + width: 100%; +} + +@media (min-width: 576px) { + #homepage .home-hero-carousel__actions { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto auto; + column-gap: 12px; + row-gap: 14px; + justify-content: center; + align-items: start; + width: auto; + } + + #homepage .home-hero-carousel__actions .home-hero-carousel__btn--primary { + grid-column: 1; + grid-row: 1; + } + + #homepage .home-hero-carousel__actions .home-hero-carousel__btn--ghost, + #homepage .home-hero-carousel__actions .home-hero-carousel__btn--ai-coach { + grid-column: 2; + grid-row: 1; + } + + #homepage .home-hero-carousel__actions .home-hero-carousel__ai-coach { + grid-column: 1; + grid-row: 2; + justify-self: center; + } +} + +#homepage .home-hero-carousel__ai-coach { + display: inline-flex; + align-items: center; + gap: 8px; + color: #fff; + font-size: 20px; + line-height: 20px; + text-decoration: underline; + text-underline-offset: 4px; +} + +#homepage .home-hero-carousel__ai-coach:hover { + color: #fff; + text-decoration: underline; + opacity: 0.9; +} + +#homepage .home-hero-carousel__ai-coach img { + display: block; + width: 48px; + height: 48px; + flex-shrink: 0; + object-fit: contain; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__actions { + justify-content: flex-start; + } + + #homepage .home-hero-carousel__actions .home-hero-carousel__ai-coach { + justify-self: start; + } +} + +#homepage .home-hero-carousel__btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 56px; + padding: 16px 40px; + border-radius: 10px; + font-size: clamp(18px, 2vw, 20px); + font-weight: 500; + letter-spacing: -0.01em; + line-height: 1; + text-decoration: none; + transition: opacity 0.2s ease, background 0.2s ease; +} + +#homepage .home-hero-carousel__btn--primary { + color: #fff; + background: #f98715; +} + +#homepage .home-hero-carousel__btn--primary:hover { + opacity: 0.9; + color: #fff; + text-decoration: none; +} + +#homepage .home-hero-carousel__btn--ghost { + color: #fff; + background: rgba(15, 15, 15, 0.5); + border: 1px solid #666; +} + +#homepage .home-hero-carousel__btn--ghost:hover { + background: rgba(15, 15, 15, 0.8); + color: #fff; + text-decoration: none; +} + +#homepage .home-hero-carousel__btn--ai-coach { + gap: 6px; + padding: 5px 20px 5px 8px; +} + +#homepage .home-hero-carousel__btn--ai-coach img { + display: block; + width: 45px; + height: 45px; + flex-shrink: 0; + object-fit: contain; + object-position: left center; + margin-right: -6px; +} + +#homepage .home-hero-carousel__visual { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + max-width: 520px; +} + +#homepage .home-hero-carousel__visual img { + display: block; + width: 100%; + max-width: 440px; + height: auto; + object-fit: contain; +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__visual img { + max-width: none; + } +} + +#homepage .home-hero-carousel__dots { + position: absolute; + z-index: 2; + left: 20px; + right: 20px; + bottom: 32px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + margin-top: 0; +} + +@media (min-width: 768px) { + #homepage .home-hero-carousel__dots { + left: 32px; + right: 32px; + bottom: 40px; + } +} + +@media (min-width: 992px) { + #homepage .home-hero-carousel__dots { + top: calc( + var(--hero-nav-gap) + var(--hero-slide1-content-height) + var(--hero-coach-dots-gap) + ); + bottom: auto; + left: 32px; + right: 32px; + margin-top: 0; + justify-content: flex-start; + } +} + +#homepage .home-hero-carousel__dot { + width: 10px; + height: 10px; + padding: 0; + border: 0; + border-radius: 999px; + background: rgba(250, 250, 250, 0.4); + cursor: pointer; + transition: width 0.3s ease, background 0.3s ease; +} + +#homepage .home-hero-carousel__dot:hover { + background: rgba(250, 250, 250, 0.6); +} + +#homepage .home-hero-carousel__dot.is-active { + width: 40px; + background: #f98715; +} + +@media (prefers-reduced-motion: reduce) { + #homepage .home-hero-carousel__slide, + #homepage .home-hero-carousel__dot { + transition: none; + } +} diff --git a/assets/css/modules/promo-compare.css b/assets/css/modules/promo-compare.css new file mode 100644 index 0000000..337abce --- /dev/null +++ b/assets/css/modules/promo-compare.css @@ -0,0 +1,175 @@ +/** + * Promo compare table module (copy from promotion-activity.css). + * Scope: wrap markup in #promo-compare-module or [data-promo-compare-module]. + * + * Usage: + * + *
+ * + *
+ * Section glow: see docs/aifo-section-glow.md + */ +@import url("../aifo-section-glow.css"); + +#promo-compare-module { + --primary: #f98715; + --bg-card: #0e0e0e; + --border-muted: #989795; + --text-main: #f9f9f9; + --text-muted: #909090; + color: var(--text-main); +} + +#promo-compare-module .promo-compare-module__page { + position: relative; + z-index: 1; + max-width: 1140px; + margin-left: auto; + margin-right: auto; + padding-left: 18px; + padding-right: 18px; +} + +#promo-compare-module .promo-section { + position: relative; + padding: 72px 0; +} + +#promo-compare-module .promo-section__title { + margin: 0 0 48px; + font-size: clamp(32px, 4.5vw, 60px); + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.6px; +} + +#promo-compare-module .promo-section__title .text-orange { + color: var(--primary); +} + +#promo-compare-module .promo-section__title--center { + text-align: center; + max-width: 700px; + margin-left: auto; + margin-right: auto; +} + +#promo-compare-module .promo-section--compare { + padding-top: 48px; + padding-bottom: 96px; + overflow: visible; +} + +#promo-compare-module .compare-table { + position: relative; + z-index: 1; + max-width: 986px; + margin: 0 auto; + border: 0.5px solid var(--border-muted); + border-radius: 15px; + background: var(--bg-card); + overflow: hidden; +} + +#promo-compare-module .compare-table__header, +#promo-compare-module .compare-table__row { + display: grid; + grid-template-columns: 1fr 1fr; +} + +#promo-compare-module .compare-table__cell { + display: flex; + align-items: center; + gap: 14px; + min-height: 64px; + padding: 18px 28px; + font-size: 18px; + line-height: 1.35; +} + +#promo-compare-module .compare-table__cell--other { + color: var(--text-muted); + border-right: 0.5px solid rgba(152, 151, 149, 0.35); +} + +#promo-compare-module .compare-table__cell--aifo { + color: var(--text-main); + font-weight: 600; + background: linear-gradient( + 90deg, + rgba(249, 135, 21, 0.04) 0%, + rgba(249, 135, 21, 0.1) 100% + ); +} + +#promo-compare-module .compare-table__cell--head { + min-height: 72px; + font-size: 16px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +#promo-compare-module .compare-table__cell--head.compare-table__cell--other { + color: #b3b3b3; + font-weight: 600; +} + +#promo-compare-module .compare-table__cell--head.compare-table__cell--aifo { + color: var(--primary); + font-weight: 700; + background: linear-gradient( + 90deg, + rgba(249, 135, 21, 0.08) 0%, + rgba(249, 135, 21, 0.16) 100% + ); +} + +#promo-compare-module .compare-table__row:not(:last-child) .compare-table__cell, +#promo-compare-module .compare-table__header .compare-table__cell { + border-bottom: 0.5px solid rgba(152, 151, 149, 0.28); +} + +#promo-compare-module .compare-table__icon { + display: inline-flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; +} + +#promo-compare-module .compare-table__icon svg { + display: block; +} + +#promo-compare-module .compare-table__icon--no { + color: #e74c3c; +} + +#promo-compare-module .compare-table__icon--yes { + color: #3ecf8e; +} + +@media (max-width: 768px) { + #promo-compare-module .promo-section { + padding: 48px 0; + } + + #promo-compare-module .promo-section__title { + font-size: 32px; + margin-bottom: 28px; + } + + #promo-compare-module .compare-table__cell { + padding: 14px 16px; + font-size: 14px; + gap: 10px; + } + + #promo-compare-module .compare-table__cell--head { + font-size: 11px; + min-height: 56px; + letter-spacing: 0.06em; + } +} diff --git a/assets/css/page-index.css b/assets/css/page-index.css new file mode 100644 index 0000000..2e41811 --- /dev/null +++ b/assets/css/page-index.css @@ -0,0 +1,113 @@ +#page-index { + --primary: #f98715; + --bg-page: #070400; + --bg-card: #0e0e0e; + --border-muted: rgba(152, 151, 149, 0.28); + --text-main: #f9f9f9; + --text-muted: #909090; + background: var(--bg-page); + color: var(--text-main); +} + +#page-index .page-index-main { + margin-top: 5.9375rem; + padding: 48px 16px 80px; +} + +#page-index .page-index { + max-width: 1140px; + margin: 0 auto; +} + +#page-index .page-index__header { + margin-bottom: 40px; +} + +#page-index .page-index__title { + margin: 0 0 12px; + font-size: clamp(32px, 4vw, 48px); + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.4px; +} + +#page-index .page-index__title .text-orange { + color: var(--primary); +} + +#page-index .page-index__desc { + margin: 0; + font-size: 16px; + line-height: 1.5; + color: var(--text-muted); + max-width: 640px; +} + +#page-index .page-index__grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 24px; +} + +#page-index .page-index__section { + background: var(--bg-card); + border: 0.5px solid var(--border-muted); + border-radius: 12px; + padding: 20px 22px 24px; +} + +#page-index .page-index__section-title { + margin: 0 0 16px; + font-size: 13px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--primary); +} + +#page-index .page-index__list { + margin: 0; + padding: 0; + list-style: none; +} + +#page-index .page-index__list li + li { + margin-top: 8px; +} + +#page-index .page-index__link { + display: block; + padding: 8px 10px; + border-radius: 8px; + font-size: 15px; + line-height: 1.35; + color: var(--text-main); + text-decoration: none; + transition: background-color 0.2s ease, color 0.2s ease; +} + +#page-index .page-index__link:hover, +#page-index .page-index__link:focus { + background: rgba(249, 135, 21, 0.1); + color: var(--primary); + text-decoration: none; +} + +#page-index .page-index__link small { + display: block; + margin-top: 2px; + font-size: 12px; + color: var(--text-muted); +} + +@media (max-width: 768px) { + #page-index .page-index-main { + margin-top: 72px; + padding-top: 32px; + } + + #page-index .page-index__grid { + grid-template-columns: 1fr; + gap: 16px; + } +} diff --git a/assets/css/partnership.css b/assets/css/partnership.css new file mode 100644 index 0000000..32ff7e9 --- /dev/null +++ b/assets/css/partnership.css @@ -0,0 +1,544 @@ +/** + * Partnership page — from Figma AIFO V2 (node 11533:26942). + */ +#partnership-page { + --primary: #f98715; + --primary-hover: #f9a215; + --bg-page: #070400; + --bg-card: #0e0e0e; + --border-muted: rgba(152, 151, 149, 0.5); + --text-main: #f9f9f9; + --text-muted: #909090; + --aifo-page-bg-height: 805px; + --aifo-page-content-offset: 1.375rem; + background: var(--bg-page); + color: var(--text-main); + overflow-x: hidden; +} + +@media (max-width: 768px) { + #partnership-page { + --aifo-page-bg-height: 445px; + --aifo-page-content-offset: 1rem; + } +} + +#partnership-page .partnership-page { + position: relative; + z-index: 2; + max-width: 1140px; + margin: 0 auto; + padding: 0 18px 80px; +} + +#partnership-page .text-orange { + color: var(--primary); +} + +/* ── Hero ── */ +#partnership-page .partnership-hero { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 48px 0 24px; + max-width: 760px; + margin: 0 auto; +} + +@media (min-width: 768px) { + #partnership-page .partnership-hero { + padding-top: 80px; + padding-bottom: 32px; + } +} + +#partnership-page .partnership-hero__title { + margin: 0 0 20px; + font-size: clamp(36px, 5vw, 60px); + line-height: 1.15; + font-weight: 700; + letter-spacing: -0.6px; +} + +#partnership-page .partnership-hero__desc { + margin: 0 0 32px; + max-width: 620px; + font-size: clamp(16px, 2.2vw, 20px); + line-height: 1.5; + font-weight: 500; + color: var(--text-main); + letter-spacing: -0.2px; +} + +#partnership-page .partnership-btn { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 220px; + padding: 15px 40px; + border: none; + border-radius: 10px; + font-size: 18px; + font-weight: 600; + color: var(--text-main); + background: var(--primary); + text-decoration: none; + cursor: pointer; + transition: background 0.2s ease, box-shadow 0.2s ease; +} + +#partnership-page .partnership-btn:hover { + background: var(--primary-hover); + box-shadow: inset 0 5px 10px rgba(249, 135, 21, 0.6), 0 5px 10px rgba(249, 135, 21, 0.6); + color: var(--text-main); + text-decoration: none; +} + +/* ── Sections ── */ +#partnership-page .partnership-section { + padding: 56px 0; +} + +@media (min-width: 768px) { + #partnership-page .partnership-section { + padding: 72px 0; + } +} + +#partnership-page .partnership-section__title { + margin: 0 0 40px; + font-size: clamp(32px, 4.5vw, 60px); + line-height: 1.2; + font-weight: 700; + letter-spacing: -0.6px; +} + +#partnership-page .partnership-section__title--center { + text-align: center; +} + +/* ── Commission tiers ── */ +#partnership-page .partnership-tiers { + display: grid; + grid-template-columns: 1fr; + gap: 20px; +} + +@media (min-width: 768px) { + #partnership-page .partnership-tiers { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; + } +} + +#partnership-page .partnership-tier { + position: relative; + min-height: 220px; + padding: 32px 24px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(14, 14, 14, 0.95) 100%); + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +#partnership-page .partnership-tier:hover { + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); +} + +#partnership-page .partnership-tier--featured { + border-color: rgba(249, 135, 21, 0.45); + background: linear-gradient(160deg, #f98715 0%, #c45f08 55%, #8a3f04 100%); + box-shadow: 0 16px 48px rgba(249, 135, 21, 0.28); +} + +#partnership-page .partnership-tier__badge { + position: absolute; + top: 18px; + right: 18px; + color: rgba(255, 255, 255, 0.9); +} + +#partnership-page .partnership-tier__rate { + margin: 0; + font-size: clamp(48px, 8vw, 72px); + line-height: 1; + font-weight: 800; + letter-spacing: -0.04em; +} + +#partnership-page .partnership-tier__label { + margin: 0; + font-size: 18px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +#partnership-page .partnership-tier__meta { + margin: 4px 0 0; + font-size: 14px; + color: var(--text-muted); +} + +#partnership-page .partnership-tier--featured .partnership-tier__meta { + color: rgba(255, 255, 255, 0.85); +} + +/* ── Benefits ── */ +#partnership-page .partnership-benefits { + display: grid; + grid-template-columns: 1fr; + gap: 20px; +} + +@media (min-width: 640px) { + #partnership-page .partnership-benefits { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + } +} + +#partnership-page .partnership-benefit { + padding: 24px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--bg-card); +} + +#partnership-page .partnership-benefit__visual { + display: flex; + align-items: center; + justify-content: center; + min-height: 120px; + margin-bottom: 16px; +} + +#partnership-page .partnership-benefit__visual img { + display: block; + width: auto; + height: 96px; + max-width: 100%; + object-fit: contain; +} + +#partnership-page .partnership-benefit__title { + margin: 0 0 10px; + font-size: 22px; + font-weight: 700; + line-height: 1.3; +} + +#partnership-page .partnership-benefit__desc { + margin: 0; + font-size: 16px; + line-height: 1.55; + color: var(--text-muted); +} + +/* ── How it works ── */ +#partnership-page .partnership-steps { + display: grid; + grid-template-columns: 1fr; + gap: 16px; +} + +@media (min-width: 992px) { + #partnership-page .partnership-steps { + grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; + align-items: stretch; + gap: 12px; + } +} + +#partnership-page .partnership-step { + padding: 24px 20px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(14, 14, 14, 0.92); + text-align: center; +} + +#partnership-page .partnership-step__icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + margin-bottom: 16px; + border-radius: 50%; + background: rgba(249, 135, 21, 0.15); + color: var(--primary); + font-size: 22px; +} + +#partnership-page .partnership-step__glyph { + font-size: 24px; + font-weight: 800; + line-height: 1; +} + +#partnership-page .partnership-step__title { + margin: 0 0 8px; + font-size: 20px; + font-weight: 700; +} + +#partnership-page .partnership-step__desc { + margin: 0; + font-size: 15px; + line-height: 1.5; + color: var(--text-muted); +} + +#partnership-page .partnership-steps__arrow { + display: none; + align-self: center; + width: 28px; + height: 28px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.08); + color: var(--text-main); + font-size: 18px; + line-height: 28px; + text-align: center; +} + +@media (min-width: 992px) { + #partnership-page .partnership-steps__arrow { + display: inline-flex; + align-items: center; + justify-content: center; + } +} + +/* ── Audience ── */ +#partnership-page .partnership-audience { + display: grid; + grid-template-columns: 1fr; + gap: 20px; +} + +@media (min-width: 768px) { + #partnership-page .partnership-audience { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 24px; + } +} + +#partnership-page .partnership-audience-card { + padding: 28px 24px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: var(--bg-card); +} + +#partnership-page .partnership-audience-card__label { + margin: 0 0 20px; + font-size: 14px; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +#partnership-page .partnership-audience-card--fit .partnership-audience-card__label { + color: #3dd68c; +} + +#partnership-page .partnership-audience-card--not-fit .partnership-audience-card__label { + color: #ff6b4a; +} + +#partnership-page .partnership-audience-card__visual { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; + min-height: 88px; + margin-bottom: 20px; + padding: 16px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.03); +} + +#partnership-page .partnership-audience-card__visual--warn { + background: rgba(255, 107, 74, 0.08); +} + +#partnership-page .partnership-audience-card__warn-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 50%; + background: rgba(255, 107, 74, 0.18); + color: #ff6b4a; + font-size: 28px; + font-weight: 700; +} + +#partnership-page .partnership-audience-card__list { + margin: 0; + padding: 0; + list-style: none; +} + +#partnership-page .partnership-audience-card__list li { + position: relative; + padding-left: 28px; + margin-bottom: 12px; + font-size: 16px; + line-height: 1.45; + color: var(--text-main); +} + +#partnership-page .partnership-audience-card__list li:last-child { + margin-bottom: 0; +} + +#partnership-page .partnership-audience-card--fit .partnership-audience-card__list li::before { + content: "✓"; + position: absolute; + left: 0; + color: #3dd68c; + font-weight: 700; +} + +#partnership-page .partnership-audience-card--not-fit .partnership-audience-card__list li::before { + content: "✕"; + position: absolute; + left: 0; + color: #ff6b4a; + font-weight: 700; +} + +/* ── Payment methods module spacing ── */ +#partnership-page #payment-methods-container { + margin-top: 8px; +} + +#partnership-page #payment-methods-container .pm2-section { + padding-top: 56px; + padding-bottom: 56px; +} + +@media (min-width: 768px) { + #partnership-page #payment-methods-container .pm2-section { + padding-top: 72px; + padding-bottom: 72px; + } +} + +/* ── FAQ ── */ +#partnership-page .partnership-section--faq .partnership-faq { + max-width: 820px; + margin: 0 auto; +} + +#partnership-page .partnership-section--faq .faq-item { + margin-bottom: 12px; + border-radius: 14px; + border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(14, 14, 14, 0.85); + overflow: hidden; +} + +#partnership-page .partnership-section--faq .faq-header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 20px 24px; + border: none; + background: transparent; + color: var(--text-main); + cursor: pointer; + text-align: left; +} + +#partnership-page .partnership-section--faq .faq-question { + font-size: 18px; + font-weight: 600; + line-height: 1.4; +} + +#partnership-page .partnership-section--faq .faq-icon-box { + width: 28px; + height: 28px; + border-radius: 8px; + background: var(--primary); + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + transition: transform 0.25s ease; +} + +#partnership-page .partnership-section--faq .faq-icon { + color: #fff; + font-size: 18px; + font-weight: 700; + line-height: 1; +} + +#partnership-page .partnership-section--faq .faq-item.active .faq-icon-box { + transform: rotate(45deg); +} + +#partnership-page .partnership-section--faq .faq-body { + max-height: 0; + overflow: hidden; + opacity: 0; + transition: max-height 0.25s ease, opacity 0.25s ease; +} + +#partnership-page .partnership-section--faq .faq-item.active .faq-body { + max-height: 320px; + opacity: 1; +} + +#partnership-page .partnership-section--faq .faq-answer { + padding: 0 24px 20px; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +#partnership-page .partnership-section--faq .faq-answer p { + margin: 12px 0 0; + font-size: 16px; + line-height: 1.6; + color: var(--text-muted); +} + +/* ── CTA ── */ +#partnership-page .partnership-cta { + margin-top: 24px; + padding: 48px 24px; + border-radius: 24px; + border: 1px solid rgba(249, 135, 21, 0.25); + background: linear-gradient(135deg, rgba(249, 135, 21, 0.12) 0%, rgba(14, 14, 14, 0.95) 100%); + text-align: center; +} + +#partnership-page .partnership-cta__title { + margin: 0 0 12px; + font-size: clamp(28px, 4vw, 44px); + line-height: 1.2; + font-weight: 700; +} + +#partnership-page .partnership-cta__desc { + margin: 0 0 28px; + font-size: 18px; + line-height: 1.5; + color: var(--text-muted); +} diff --git a/assets/css/pricing.css b/assets/css/pricing.css new file mode 100644 index 0000000..7836b0d --- /dev/null +++ b/assets/css/pricing.css @@ -0,0 +1,80 @@ +/** + * Pricing page — same v2 shell as leading-v2 (header, footer, page bg). + */ +#pricing-page { + --primary: #f98715; + --bg-page: #070400; + --text-main: #f9f9f9; + --text-muted: #909090; + --aifo-page-bg-height: 805px; + --aifo-page-content-offset: 1.375rem; + --lv2-header-height: 5.75rem; + background: var(--bg-page); + color: var(--text-main); + overflow-x: hidden; +} + +@media (max-width: 768px) { + #pricing-page { + --aifo-page-bg-height: 445px; + --aifo-page-content-offset: 1rem; + --lv2-header-height: 72px; + } +} + +#pricing-page { + --aifo-nav-height: var(--lv2-header-height); +} + +#pricing-page .pricing-page { + position: relative; + z-index: 2; + max-width: 1140px; + margin: 0 auto; + padding: 0 18px 24px; +} + +#pricing-page #challenge-floor-module { + width: 100%; + padding-top: 48px; +} + +@media (min-width: 768px) { + #pricing-page #challenge-floor-module { + padding-top: 80px; + } +} + +#pricing-page #challenge-floor-module .challenge-floor { + padding-bottom: 0; +} + +#pricing-page #promo-compare-module { + width: 100%; + margin-top: 64px; +} + +@media (min-width: 768px) { + #pricing-page #promo-compare-module { + margin-top: 112px; + } +} + +#pricing-page #promo-compare-module .promo-section { + padding: 48px 0 24px; +} + +#pricing-page #promo-compare-module .promo-section--compare { + padding-top: 32px; + padding-bottom: 24px; +} + +@media (max-width: 768px) { + #pricing-page #promo-compare-module .promo-section { + padding: 32px 0 16px; + } + + #pricing-page #promo-compare-module .promo-section__title { + margin-bottom: 24px; + } +} diff --git a/assets/images/backgrounds/20251203-153844 - 副本.webp b/assets/images/backgrounds/20251203-153844 - 副本.webp new file mode 100644 index 0000000..265483c Binary files /dev/null and b/assets/images/backgrounds/20251203-153844 - 副本.webp differ diff --git a/assets/images/banner/20260702-144846.png b/assets/images/banner/20260702-144846.png new file mode 100644 index 0000000..99ae93e Binary files /dev/null and b/assets/images/banner/20260702-144846.png differ diff --git a/assets/images/banner/20260702-144846.webp b/assets/images/banner/20260702-144846.webp new file mode 100644 index 0000000..3c106ab Binary files /dev/null and b/assets/images/banner/20260702-144846.webp differ diff --git a/assets/images/banner/20260702-151441.png b/assets/images/banner/20260702-151441.png new file mode 100644 index 0000000..fa9e9db Binary files /dev/null and b/assets/images/banner/20260702-151441.png differ diff --git a/assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png b/assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png new file mode 100644 index 0000000..5b88f34 Binary files /dev/null and b/assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png differ diff --git a/assets/images/banner/login-2-icon.svg b/assets/images/banner/login-2-icon.svg new file mode 100644 index 0000000..c5ee5f2 --- /dev/null +++ b/assets/images/banner/login-2-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/banner/login-3-icon.svg b/assets/images/banner/login-3-icon.svg new file mode 100644 index 0000000..8400f06 --- /dev/null +++ b/assets/images/banner/login-3-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/banner/logo-1-icon.svg b/assets/images/banner/logo-1-icon.svg new file mode 100644 index 0000000..e56a621 --- /dev/null +++ b/assets/images/banner/logo-1-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/home-hero-carousel/slide-1.png b/assets/images/home-hero-carousel/slide-1.png new file mode 100644 index 0000000..1f3450c Binary files /dev/null and b/assets/images/home-hero-carousel/slide-1.png differ diff --git a/assets/images/home-hero-carousel/slide-2.png b/assets/images/home-hero-carousel/slide-2.png new file mode 100644 index 0000000..f96ebe1 Binary files /dev/null and b/assets/images/home-hero-carousel/slide-2.png differ diff --git a/assets/images/home-hero-carousel/slide-3.png b/assets/images/home-hero-carousel/slide-3.png new file mode 100644 index 0000000..1c1122d Binary files /dev/null and b/assets/images/home-hero-carousel/slide-3.png differ diff --git a/assets/images/leading-v2/compare-table.png b/assets/images/leading-v2/compare-table.png new file mode 100644 index 0000000..da63715 Binary files /dev/null and b/assets/images/leading-v2/compare-table.png differ diff --git a/assets/images/leading-v2/form-registration.png b/assets/images/leading-v2/form-registration.png new file mode 100644 index 0000000..dc7de22 Binary files /dev/null and b/assets/images/leading-v2/form-registration.png differ diff --git a/components/footer.html b/components/footer.html index f78bb65..d4e8ab0 100644 --- a/components/footer.html +++ b/components/footer.html @@ -49,7 +49,7 @@
  • Academy
  • Funding Programs
  • Payout
  • -
  • Partnership
  • +
  • Partnership
  • diff --git a/components/leading-v2-footer.html b/components/leading-v2-footer.html new file mode 100644 index 0000000..318d04a --- /dev/null +++ b/components/leading-v2-footer.html @@ -0,0 +1,57 @@ + diff --git a/components/leading-v2-header.html b/components/leading-v2-header.html new file mode 100644 index 0000000..44514d6 --- /dev/null +++ b/components/leading-v2-header.html @@ -0,0 +1,7 @@ +
    +
    + +
    +
    diff --git a/components/nav.html b/components/nav.html index bfb62a0..7c08657 100644 --- a/components/nav.html +++ b/components/nav.html @@ -17,6 +17,11 @@ Academy
    + + + + + + + -
    +