udpate
This commit is contained in:
@@ -0,0 +1,336 @@
|
||||
/* AIFO $1 First Purchase Landing — page-specific */
|
||||
|
||||
#aifo-1-dollar-landing .aifo-page-bg {
|
||||
padding-top: 0;
|
||||
--aifo-page-content-offset: 0;
|
||||
}
|
||||
|
||||
/* Hero banner — flush under nav, full-width stage (same as free-retry) */
|
||||
#aifo-1-dollar-landing .dollar-hero {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner {
|
||||
position: relative;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner-media {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rectangle 488 @1140（旋转 -90° 后）：
|
||||
* 0–281px 文案区纯黑 + 281–975px（694px 宽）左→右渐隐
|
||||
* 此前误用 378px 作渐隐宽度且 left:281 导致左侧露图、281px 处硬边
|
||||
*/
|
||||
#aifo-1-dollar-landing .dollar-hero__banner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 0;
|
||||
width: 85.53%;
|
||||
max-width: 975px;
|
||||
height: calc(100% + 14px);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--bg-page) 0%,
|
||||
var(--bg-page) 28.82%,
|
||||
rgba(7, 4, 0, 0) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Rectangle 466 — 右缘；Rectangle 467 — 底缘 */
|
||||
#aifo-1-dollar-landing .dollar-hero__banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(7, 4, 0, 0) 0%, var(--bg-page) 100%) no-repeat
|
||||
bottom center / min(81.32%, 927px) clamp(60px, 26%, 99px),
|
||||
linear-gradient(90deg, rgba(7, 4, 0, 0) 0%, var(--bg-page) 100%) no-repeat
|
||||
top right / min(31.93%, 364px) 100%;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: min(100%, 52%);
|
||||
max-width: 520px;
|
||||
padding: clamp(24px, 4.5vw, 48px) clamp(20px, 3.5vw, 40px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .dollar-hero__banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* 原图左侧 ~35% 为桌面文案留白；移动端通过放大 + 左移裁掉留白，不修改原图。
|
||||
* 可视区域 ≈ 原图 x: 35%–100%，人物更居中。
|
||||
*/
|
||||
#aifo-1-dollar-landing .dollar-hero__banner-media {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: clamp(160px, 42vw, 240px);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner-img {
|
||||
width: 154%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 100% center;
|
||||
margin-left: -54%;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__banner::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__content {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-content: flex-start;
|
||||
padding: 20px 16px 28px;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__content .landing-hero__title {
|
||||
font-size: clamp(26px, 7vw, 36px);
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero .landing-v2-page {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero .landing-countdown {
|
||||
margin-top: 28px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-countdown {
|
||||
gap: 4px;
|
||||
--landing-countdown-digit-w: 36px;
|
||||
--landing-countdown-digit-h: 54px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown [data-countdown-days],
|
||||
#aifo-1-dollar-landing .landing-countdown [data-countdown-hours],
|
||||
#aifo-1-dollar-landing .landing-countdown [data-countdown-mins],
|
||||
#aifo-1-dollar-landing .landing-countdown [data-countdown-secs] {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__digit {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__sep {
|
||||
font-size: 14px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__title-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__title .landing-accent {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
/* Hero bullets — 148×61px 卡片；宽度不够时换行（与 PC 同高） */
|
||||
#aifo-1-dollar-landing .dollar-hero__bullets {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__bullets li {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 0 148px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
width: 148px;
|
||||
min-width: 148px;
|
||||
max-width: 148px;
|
||||
min-height: 61px;
|
||||
height: auto;
|
||||
padding: 16px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.25;
|
||||
color: var(--text-main);
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
border-radius: 9px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
background: url("../images/leading-v2/dollar_1_v1/item_bg_1.png") center / 100% 100% no-repeat;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .dollar-hero__bullets li::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .dollar-hero__bullets {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Welcome rewards — promo card 背景图 */
|
||||
#aifo-1-dollar-landing .landing-promo-card {
|
||||
border: none;
|
||||
background: transparent;
|
||||
background-image: url("../images/backgrounds/new-user-offer-bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 0 0 40px rgba(249, 135, 21, 0.1);
|
||||
}
|
||||
|
||||
/* 3 Simple Steps — claim grid (same visuals as free-retry; modules/claim-steps.css) */
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(1) {
|
||||
background-image: url("../images/leading-v2/Frame.png");
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(2) {
|
||||
background-image: url("../images/leading-v2/Frame-1.png");
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../images/leading-v2/Frame-2.png");
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .landing-section__title {
|
||||
margin-bottom: 82px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .landing-section__cta {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(1),
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(2),
|
||||
#aifo-1-dollar-landing .clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../images/backgrounds/new-user-claim-card-bg-mobile.png");
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .landing-section__title {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .clain-section .landing-section__cta {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Why section */
|
||||
#aifo-1-dollar-landing .landing-why-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-why-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 20px 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 15, 15, 0.55);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
#aifo-1-dollar-landing .landing-why-item {
|
||||
display: grid;
|
||||
grid-template-columns: 292px 1fr;
|
||||
|
||||
column-gap: 110px;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-why-item__title {
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-why-item__desc {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
#aifo-1-dollar-landing .landing-why-item__desc {
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-why-item {
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-why-item__title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-why-item__desc {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
/* AIFO Free Retry Landing — page-specific */
|
||||
|
||||
#aifo-free-retry-landing .aifo-page-bg {
|
||||
padding-top: 0;
|
||||
--aifo-page-content-offset: 0;
|
||||
}
|
||||
|
||||
/* Hero banner — flush under nav, full-width stage */
|
||||
#aifo-free-retry-landing .free-retry-hero {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__stage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner {
|
||||
position: relative;
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner-media {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Figma Rectangle 467 — bottom fade (927×99, top 265px @ 1140px, vertical) */
|
||||
#aifo-free-retry-landing .free-retry-hero__banner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 81.32%;
|
||||
max-width: 927px;
|
||||
height: clamp(60px, 26%, 99px);
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Figma Rectangle 466 — right edge fade (364×296, left 905px @ 1140px frame) */
|
||||
#aifo-free-retry-landing .free-retry-hero__banner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 31.93%;
|
||||
max-width: 364px;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 100%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__content {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: min(100%, 52%);
|
||||
max-width: 520px;
|
||||
padding: clamp(24px, 4.5vw, 48px) clamp(20px, 3.5vw, 40px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-free-retry-landing .free-retry-hero__banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* 原图左侧 ~35% 为桌面文案留白；移动端通过放大 + 左移裁掉留白，不修改原图。
|
||||
* 可视区域 ≈ 原图 x: 35%–100%，人物更居中。
|
||||
*/
|
||||
#aifo-free-retry-landing .free-retry-hero__banner-media {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: clamp(160px, 42vw, 240px);
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner-img {
|
||||
width: 154%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 100% center;
|
||||
margin-left: -54%;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__banner::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__content {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-content: flex-start;
|
||||
padding: 20px 16px 28px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__eyebrow,
|
||||
#aifo-free-retry-landing .free-retry-hero__title {
|
||||
font-size: clamp(26px, 7vw, 36px);
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__subtitle {
|
||||
font-size: clamp(18px, 4.5vw, 24px);
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__note {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero .landing-v2-page {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero .landing-countdown {
|
||||
margin-top: 28px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-countdown__digit {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-free-retry-landing .landing-countdown {
|
||||
gap: 4px;
|
||||
--landing-countdown-digit-w: 36px;
|
||||
--landing-countdown-digit-h: 54px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-countdown [data-countdown-days],
|
||||
#aifo-free-retry-landing .landing-countdown [data-countdown-hours],
|
||||
#aifo-free-retry-landing .landing-countdown [data-countdown-mins],
|
||||
#aifo-free-retry-landing .landing-countdown [data-countdown-secs] {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-countdown__digit {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-countdown__sep {
|
||||
font-size: 14px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__eyebrow {
|
||||
margin: 0 0 4px;
|
||||
font-size: 45px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__title {
|
||||
margin: 0;
|
||||
font-size: 45px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__subtitle {
|
||||
margin: 10px 0 0;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 64px;
|
||||
padding: 8px 30px;
|
||||
border-radius: 8px;
|
||||
background: var(--aifo-btn-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__note {
|
||||
margin: 16px 0 0;
|
||||
max-width: 480px;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
/* How Free Retry Works — page overrides (shared claim layout: modules/claim-steps.css) */
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(1) {
|
||||
background-image: url("../images/backgrounds/new-user-claim-01.png");
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(2) {
|
||||
background-image: url("../images/backgrounds/new-user-claim-02.png");
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../images/backgrounds/new-user-claim-03.png");
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__title {
|
||||
margin-bottom: 82px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__tagline {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__cta {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* Mobile: match new-user-promotion — unified card bg + step-mark img (not desktop 01/02/03) */
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(1),
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(2),
|
||||
#aifo-free-retry-landing .clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../images/backgrounds/new-user-claim-card-bg-mobile.png");
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__title {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__tagline {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .clain-section .landing-section__cta {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* One Purchase Two Chances */
|
||||
#aifo-free-retry-landing .landing-chances {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__list {
|
||||
margin: 0 auto 40px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__list li {
|
||||
font-size: clamp(18px, 2.63vw, 20px);
|
||||
line-height: 1.588;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__flow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: clamp(12px, 5vw, 112px);
|
||||
flex-wrap: nowrap;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__icon-img {
|
||||
display: block;
|
||||
width: clamp(88px, 14vw, 120px);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__label {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--text-main);
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__arrow {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__arrow img {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 33px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-free-retry-landing .landing-chances__flow {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .free-retry-hero__badge {
|
||||
min-width: 56px;
|
||||
padding: 7px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-chances__icon-img {
|
||||
width: clamp(96px, 28vw, 120px);
|
||||
}
|
||||
}
|
||||
+37
-15
@@ -1,29 +1,35 @@
|
||||
/**
|
||||
* 页面顶部光晕背景（通用）
|
||||
* 源自 academy .academy-block-1::before，各页通过 CSS 变量调整高度与图片。
|
||||
* 页面背景（通用）
|
||||
*
|
||||
* 用法：
|
||||
* <main class="aifo-page-bg">
|
||||
* <div class="页面内容容器">...</div>
|
||||
* </main>
|
||||
* <main class="aifo-page-bg aifo-page-bg--top-glow">...</main>
|
||||
*
|
||||
* 注意：aifo-page-bg 应为全宽外层，勿与 max-width 内容容器写在同一元素上。
|
||||
* aifo-page-bg 只负责导航间距与定位；背景光晕三选一（勿混用）：
|
||||
* aifo-page-bg--top-glow 顶部全宽光晕（默认 academy 图）
|
||||
* aifo-page-bg--top-left-glow 左上角光晕
|
||||
* aifo-page-bg--grid 网格底纹（无光晕图）
|
||||
*
|
||||
* 按页覆盖光晕高度：
|
||||
* 按页覆盖 — 顶部全宽：
|
||||
* #my-page { --aifo-page-bg-height: 920px; }
|
||||
*
|
||||
* 按页覆盖背景图：
|
||||
* #my-page { --aifo-page-bg-image: url(../images/...); }
|
||||
*
|
||||
* 按页覆盖 — 左上角：
|
||||
* #my-page { --aifo-page-bg-top-left-top: 97px; }
|
||||
* #my-page { --aifo-page-bg-top-left-image: url(../images/...); }
|
||||
*
|
||||
* 按页增加导航下方内容间距（不含 header 高度）：
|
||||
* #my-page { --aifo-page-content-offset: 1.5rem; }
|
||||
*
|
||||
* 叠加网格底纹（可选）：
|
||||
* <main class="aifo-page-bg aifo-page-bg--grid">...</main>
|
||||
*/
|
||||
:root {
|
||||
:root {
|
||||
/* 与 #academy-main margin-top、固定导航高度保持一致 */
|
||||
--aifo-nav-height: 5.9375rem;
|
||||
|
||||
/* 左上角光晕（默认 top:0，配合 .aifo-page-bg 的 margin-top 对齐导航下方） */
|
||||
--aifo-page-bg-top-left-top: 0;
|
||||
--aifo-page-bg-top-left-left: -2vw;
|
||||
--aifo-page-bg-top-left-size: min(60vw, 555px);
|
||||
--aifo-page-bg-top-left-max-height: min(52vh, 485px);
|
||||
--aifo-page-bg-top-left-image: url("../images/backgrounds/new-user-promo-corner-glow.png");
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -42,7 +48,8 @@
|
||||
padding-top: var(--aifo-page-content-offset, 0);
|
||||
}
|
||||
|
||||
.aifo-page-bg::before {
|
||||
/* 顶部全宽光晕 */
|
||||
.aifo-page-bg--top-glow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -56,12 +63,27 @@
|
||||
--aifo-page-bg-image,
|
||||
url("../images/backgrounds/academy/academy_bg_1.webp")
|
||||
);
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 左上角光晕 — 源自 special-offer-50；contain 完整显示 PNG，避免 cover 裁切硬边 */
|
||||
.aifo-page-bg--top-left-glow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: var(--aifo-page-bg-top-left-top);
|
||||
left: var(--aifo-page-bg-top-left-left);
|
||||
width: var(--aifo-page-bg-top-left-size);
|
||||
height: var(--aifo-page-bg-top-left-size);
|
||||
max-height: var(--aifo-page-bg-top-left-max-height);
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
background: var(--aifo-page-bg-top-left-image) no-repeat left top;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
/* 网格底纹（无光晕图） */
|
||||
.aifo-page-bg--grid {
|
||||
background-image: image-set(
|
||||
url("../images/backgrounds/academy/bg_grid.webp") type("image/webp"),
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
#promotion-activity-1 {
|
||||
#aifo-scaling-plan {
|
||||
--primary: #f98715;
|
||||
--primary-hover: #f9a215;
|
||||
--bg-page: #070400;
|
||||
@@ -15,7 +15,7 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .promo-page {
|
||||
#aifo-scaling-plan .promo-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1140px;
|
||||
@@ -26,7 +26,7 @@
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero {
|
||||
#aifo-scaling-plan .scaling-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
@@ -34,19 +34,19 @@
|
||||
padding: 109px 0 40px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__content {
|
||||
#aifo-scaling-plan .scaling-hero__content {
|
||||
flex: 1;
|
||||
max-width: 561px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__intro {
|
||||
#aifo-scaling-plan .scaling-hero__intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__title {
|
||||
#aifo-scaling-plan .scaling-hero__title {
|
||||
margin: 0;
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
line-height: 1.25;
|
||||
@@ -54,7 +54,7 @@
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__desc {
|
||||
#aifo-scaling-plan .scaling-hero__desc {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
@@ -63,13 +63,13 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__actions {
|
||||
#aifo-scaling-plan .scaling-hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo {
|
||||
#aifo-scaling-plan .btn-promo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -88,25 +88,25 @@
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo:hover {
|
||||
#aifo-scaling-plan .btn-promo: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;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo--outline {
|
||||
#aifo-scaling-plan .btn-promo--outline {
|
||||
background: rgba(15, 15, 15, 0.5);
|
||||
border: 0.657px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo--outline:hover {
|
||||
#aifo-scaling-plan .btn-promo--outline:hover {
|
||||
background: rgba(15, 15, 15, 0.8);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__title {
|
||||
#aifo-scaling-plan .scaling-requirements__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
@@ -116,7 +116,7 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__list {
|
||||
#aifo-scaling-plan .scaling-requirements__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@@ -125,7 +125,7 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__item {
|
||||
#aifo-scaling-plan .scaling-requirements__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -134,7 +134,7 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__check {
|
||||
#aifo-scaling-plan .scaling-requirements__check {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
@@ -146,13 +146,13 @@
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__check svg {
|
||||
#aifo-scaling-plan .scaling-requirements__check svg {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual {
|
||||
#aifo-scaling-plan .scaling-hero__visual {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: min(100%, 510px);
|
||||
@@ -162,14 +162,14 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual img {
|
||||
#aifo-scaling-plan .scaling-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge {
|
||||
#aifo-scaling-plan .scaling-hero__badge {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
right: 9px;
|
||||
@@ -184,7 +184,7 @@
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-icon {
|
||||
#aifo-scaling-plan .scaling-hero__badge-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
@@ -196,12 +196,12 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-icon img {
|
||||
#aifo-scaling-plan .scaling-hero__badge-icon img {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-label {
|
||||
#aifo-scaling-plan .scaling-hero__badge-label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.17;
|
||||
@@ -209,7 +209,7 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-value {
|
||||
#aifo-scaling-plan .scaling-hero__badge-value {
|
||||
margin: 5px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
@@ -217,17 +217,17 @@
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits {
|
||||
#aifo-scaling-plan .scaling-benefits {
|
||||
padding: 40px 0 72px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__head {
|
||||
#aifo-scaling-plan .scaling-benefits__head {
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__title {
|
||||
#aifo-scaling-plan .scaling-benefits__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
@@ -235,40 +235,40 @@
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
#aifo-scaling-plan .scaling-benefits__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 48px 32px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card {
|
||||
#aifo-scaling-plan .scaling-benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__icon {
|
||||
#aifo-scaling-plan .scaling-benefit-card__icon {
|
||||
display: inline-flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__icon img {
|
||||
#aifo-scaling-plan .scaling-benefit-card__icon img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__title {
|
||||
#aifo-scaling-plan .scaling-benefit-card__title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__desc {
|
||||
#aifo-scaling-plan .scaling-benefit-card__desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
@@ -278,7 +278,7 @@
|
||||
}
|
||||
|
||||
/* Growth Path modal */
|
||||
#promotion-activity-1 .growth-modal {
|
||||
#aifo-scaling-plan .growth-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1050;
|
||||
@@ -289,11 +289,11 @@
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal.is-open {
|
||||
#aifo-scaling-plan .growth-modal.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__panel {
|
||||
#aifo-scaling-plan .growth-modal__panel {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
max-height: 90vh;
|
||||
@@ -304,7 +304,7 @@
|
||||
background: #231f20;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__header {
|
||||
#aifo-scaling-plan .growth-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -312,14 +312,14 @@
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__header-title {
|
||||
#aifo-scaling-plan .growth-modal__header-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__close {
|
||||
#aifo-scaling-plan .growth-modal__close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -333,22 +333,22 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__close:hover {
|
||||
#aifo-scaling-plan .growth-modal__close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__divider {
|
||||
#aifo-scaling-plan .growth-modal__divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__body {
|
||||
#aifo-scaling-plan .growth-modal__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__intro {
|
||||
#aifo-scaling-plan .growth-modal__intro {
|
||||
margin: 0 0 24px;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
@@ -357,19 +357,19 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table-wrap {
|
||||
#aifo-scaling-plan .growth-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table {
|
||||
#aifo-scaling-plan .growth-table {
|
||||
width: 100%;
|
||||
min-width: 600px;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table th,
|
||||
#promotion-activity-1 .growth-table td {
|
||||
#aifo-scaling-plan .growth-table th,
|
||||
#aifo-scaling-plan .growth-table td {
|
||||
padding: 16px 16px 16px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.17;
|
||||
@@ -378,17 +378,17 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table th {
|
||||
#aifo-scaling-plan .growth-table th {
|
||||
color: #666;
|
||||
padding-top: 0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table tbody tr {
|
||||
#aifo-scaling-plan .growth-table tbody tr {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer {
|
||||
#aifo-scaling-plan .growth-modal__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
@@ -396,70 +396,70 @@
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#promotion-activity-1 .scaling-hero {
|
||||
#aifo-scaling-plan .scaling-hero {
|
||||
flex-direction: column;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__content {
|
||||
#aifo-scaling-plan .scaling-hero__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual {
|
||||
#aifo-scaling-plan .scaling-hero__visual {
|
||||
width: 100%;
|
||||
max-width: 510px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
#aifo-scaling-plan .scaling-benefits__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#promotion-activity-1 {
|
||||
#aifo-scaling-plan {
|
||||
--aifo-page-content-offset: 1rem;
|
||||
--aifo-page-bg-height: 445px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .promo-page {
|
||||
#aifo-scaling-plan .promo-page {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__title {
|
||||
#aifo-scaling-plan .scaling-hero__title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__desc {
|
||||
#aifo-scaling-plan .scaling-hero__desc {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__actions {
|
||||
#aifo-scaling-plan .scaling-hero__actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo {
|
||||
#aifo-scaling-plan .btn-promo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
#aifo-scaling-plan .scaling-benefits__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__desc-br {
|
||||
#aifo-scaling-plan .scaling-benefit-card__desc-br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer {
|
||||
#aifo-scaling-plan .growth-modal__footer {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer .btn-promo {
|
||||
#aifo-scaling-plan .growth-modal__footer .btn-promo {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -456,8 +456,20 @@
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.aifo-foot__companies {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.aifo-foot__company {
|
||||
margin: 0;
|
||||
flex: 1 1 240px;
|
||||
max-width: 50%;
|
||||
padding-right: 40px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
@@ -465,10 +477,31 @@
|
||||
color: var(--foot-muted-60);
|
||||
}
|
||||
|
||||
.aifo-foot__company:last-child {
|
||||
padding-right: 0;
|
||||
padding-left: 40px;
|
||||
border-left: 1px solid var(--foot-border);
|
||||
}
|
||||
|
||||
.aifo-foot__company p {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aifo-foot__company {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__company:last-child {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--foot-border);
|
||||
}
|
||||
}
|
||||
|
||||
/* Payment chips */
|
||||
.aifo-foot__payments {
|
||||
display: flex;
|
||||
|
||||
@@ -0,0 +1,492 @@
|
||||
/**
|
||||
* Shared landing page styles (Leading V2 layout: header-v2 + aifo-page-bg + footer-v2).
|
||||
* Used by aifo-1-dollar-landing and aifo-free-retry-landing.
|
||||
*/
|
||||
#aifo-1-dollar-landing,
|
||||
#aifo-free-retry-landing {
|
||||
--primary: #f98715;
|
||||
--primary-hover: #f9a215;
|
||||
--bg-page: #070400;
|
||||
--text-main: #f9f9f9;
|
||||
--text-muted: #909090;
|
||||
--text-secondary: #ccc;
|
||||
--line: rgba(255, 255, 255, 0.12);
|
||||
--aifo-page-bg-height: 805px;
|
||||
--aifo-page-content-offset: 1.375rem;
|
||||
--lv2-header-height: 5.75rem;
|
||||
--landing-container: 1140px;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-main);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing,
|
||||
#aifo-free-retry-landing {
|
||||
--aifo-nav-height: var(--lv2-header-height);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing,
|
||||
#aifo-free-retry-landing {
|
||||
--aifo-page-bg-height: 445px;
|
||||
--aifo-page-content-offset: 1rem;
|
||||
--lv2-header-height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-v2-page,
|
||||
#aifo-free-retry-landing .landing-v2-page {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: var(--landing-container);
|
||||
margin: 0 auto;
|
||||
padding: 0 18px 48px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-accent,
|
||||
#aifo-free-retry-landing .landing-accent {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ── Hero (legacy side-by-side — free-retry uses full-width banner instead) ── */
|
||||
#aifo-free-retry-landing .landing-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
padding: 48px 0 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#aifo-free-retry-landing .landing-hero {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__content,
|
||||
#aifo-free-retry-landing .landing-hero__content {
|
||||
flex: 1;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#aifo-free-retry-landing .landing-hero__content {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__eyebrow,
|
||||
#aifo-free-retry-landing .landing-hero__eyebrow {
|
||||
margin: 0 0 8px;
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__title,
|
||||
#aifo-free-retry-landing .landing-hero__title {
|
||||
margin: 0;
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__subtitle,
|
||||
#aifo-free-retry-landing .landing-hero__subtitle {
|
||||
margin: 12px 0 0;
|
||||
font-size: clamp(18px, 2.5vw, 24px);
|
||||
line-height: 1.35;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__bullets,
|
||||
#aifo-free-retry-landing .landing-hero__bullets {
|
||||
margin: 24px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-hero__bullets {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__bullets li,
|
||||
#aifo-free-retry-landing .landing-hero__bullets li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#aifo-free-retry-landing .landing-hero__bullets li {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__bullets li::before,
|
||||
#aifo-free-retry-landing .landing-hero__bullets li::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__actions,
|
||||
#aifo-free-retry-landing .landing-hero__actions {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__note,
|
||||
#aifo-free-retry-landing .landing-hero__note {
|
||||
margin: 16px 0 0;
|
||||
max-width: 520px;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#aifo-1-dollar-landing .landing-hero__note,
|
||||
#aifo-free-retry-landing .landing-hero__note {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-hero__visual {
|
||||
flex-shrink: 0;
|
||||
width: min(100%, 480px);
|
||||
aspect-ratio: 4 / 5;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* ── Countdown ── */
|
||||
#aifo-1-dollar-landing .landing-countdown,
|
||||
#aifo-free-retry-landing .landing-countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin: 8px auto 40px;
|
||||
padding: 0;
|
||||
--landing-countdown-digit-w: 57px;
|
||||
--landing-countdown-digit-h: 86px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing [data-countdown-days],
|
||||
#aifo-1-dollar-landing [data-countdown-hours],
|
||||
#aifo-1-dollar-landing [data-countdown-mins],
|
||||
#aifo-1-dollar-landing [data-countdown-secs],
|
||||
#aifo-free-retry-landing [data-countdown-days],
|
||||
#aifo-free-retry-landing [data-countdown-hours],
|
||||
#aifo-free-retry-landing [data-countdown-mins],
|
||||
#aifo-free-retry-landing [data-countdown-secs] {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__digit,
|
||||
#aifo-free-retry-landing .landing-countdown__digit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--landing-countdown-digit-w);
|
||||
min-width: var(--landing-countdown-digit-w);
|
||||
height: var(--landing-countdown-digit-h);
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: url("../images/leading-v2/time_bg.png") center / 100% 100% no-repeat;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__sep,
|
||||
#aifo-free-retry-landing .landing-countdown__sep {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
padding: 0 2px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-countdown,
|
||||
#aifo-free-retry-landing .landing-countdown {
|
||||
--landing-countdown-digit-w: 46px;
|
||||
--landing-countdown-digit-h: 69px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__digit,
|
||||
#aifo-free-retry-landing .landing-countdown__digit {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown__sep,
|
||||
#aifo-free-retry-landing .landing-countdown__sep {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Registration embed ── */
|
||||
#aifo-1-dollar-landing .landing-v2-register,
|
||||
#aifo-free-retry-landing .landing-v2-register {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto 96px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-v2-register .adl-register-top,
|
||||
#aifo-free-retry-landing .landing-v2-register .adl-register-top {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-v2-register .adl-register .container,
|
||||
#aifo-free-retry-landing .landing-v2-register .adl-register .container {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* ── Section titles (Figma: 60px / lh 78.4 / ls -2.1 / weight 800) ── */
|
||||
#aifo-1-dollar-landing .landing-section,
|
||||
#aifo-free-retry-landing .landing-section {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__title,
|
||||
#aifo-free-retry-landing .landing-section__title {
|
||||
margin: 0 0 32px;
|
||||
font-size: clamp(32px, 5.26vw, 60px);
|
||||
line-height: 1.307;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__desc,
|
||||
#aifo-free-retry-landing .landing-section__desc {
|
||||
margin: -8px auto 32px;
|
||||
max-width: 545px;
|
||||
text-align: center;
|
||||
font-size: clamp(18px, 2.63vw, 30px);
|
||||
line-height: 1.588;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Steps grid ── */
|
||||
#aifo-1-dollar-landing .landing-steps,
|
||||
#aifo-free-retry-landing .landing-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 32px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-steps,
|
||||
#aifo-free-retry-landing .landing-steps {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-step-card,
|
||||
#aifo-free-retry-landing .landing-step-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 160px;
|
||||
padding: 24px 20px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(249, 135, 21, 0.28);
|
||||
background: rgba(15, 15, 15, 0.6);
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(249, 135, 21, 0.45),
|
||||
inset 2px 0 0 rgba(249, 135, 21, 0.3);
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
#aifo-1-dollar-landing .landing-step-card:not(:last-child)::after,
|
||||
#aifo-free-retry-landing .landing-step-card:not(:last-child)::after {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
pointer-events: none;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-step-card:not(:last-child)::after,
|
||||
#aifo-free-retry-landing .landing-step-card:not(:last-child)::after {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -22px;
|
||||
transform: translateX(-50%) rotate(90deg);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-step-card__num,
|
||||
#aifo-free-retry-landing .landing-step-card__num {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-step-card__title,
|
||||
#aifo-free-retry-landing .landing-step-card__title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-step-card__desc,
|
||||
#aifo-free-retry-landing .landing-step-card__desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
color: #bc9467;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__cta,
|
||||
#aifo-free-retry-landing .landing-section__cta {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__tagline,
|
||||
#aifo-free-retry-landing .landing-section__tagline {
|
||||
margin: 0 0 24px;
|
||||
max-width: 545px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
font-size: clamp(18px, 2.63vw, 30px);
|
||||
line-height: 1.588;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Responsive (both landing pages) ── */
|
||||
@media (max-width: 992px) {
|
||||
#aifo-1-dollar-landing .landing-hero__actions .aifo-btn,
|
||||
#aifo-free-retry-landing .landing-hero__actions .aifo-btn {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__cta .aifo-btn,
|
||||
#aifo-free-retry-landing .landing-section__cta .aifo-btn {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#aifo-1-dollar-landing .landing-v2-page,
|
||||
#aifo-free-retry-landing .landing-v2-page {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-hero {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 24px;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
#aifo-free-retry-landing .landing-hero__visual {
|
||||
width: 100%;
|
||||
max-width: min(360px, 88vw);
|
||||
aspect-ratio: 4 / 5;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__content,
|
||||
#aifo-free-retry-landing .landing-hero__content {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-countdown,
|
||||
#aifo-free-retry-landing .landing-countdown {
|
||||
margin-bottom: 28px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-v2-register,
|
||||
#aifo-free-retry-landing .landing-v2-register {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section,
|
||||
#aifo-free-retry-landing .landing-section {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__title,
|
||||
#aifo-free-retry-landing .landing-section__title {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-section__tagline,
|
||||
#aifo-free-retry-landing .landing-section__tagline {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#aifo-1-dollar-landing .landing-hero__title,
|
||||
#aifo-free-retry-landing .landing-hero__title {
|
||||
font-size: clamp(28px, 8vw, 36px);
|
||||
}
|
||||
|
||||
#aifo-1-dollar-landing .landing-hero__eyebrow,
|
||||
#aifo-free-retry-landing .landing-hero__eyebrow {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* How to claim — steps grid (shared by new-user-promotion & landing pages).
|
||||
* Wrap section with class .clain-section
|
||||
*/
|
||||
.clain-section .claim-grid {
|
||||
margin: 20px auto 0;
|
||||
max-width: 800px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
.clain-section .claim-item {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
|
||||
min-height: 190px;
|
||||
padding: 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
/* background-position: center; */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.clain-section .claim-item:nth-child(1) {
|
||||
background-image: url("../../images/leading-v2/Frame.png");
|
||||
}
|
||||
|
||||
.clain-section .claim-item:nth-child(2) {
|
||||
background-image: url("../../images/leading-v2/Frame-1.png");
|
||||
}
|
||||
|
||||
.clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../../images/leading-v2/Frame-2.png");
|
||||
}
|
||||
|
||||
.clain-section .claim-item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
background: url("../../images/backgrounds/new-user-claim-arrow.png") no-repeat center / contain;
|
||||
}
|
||||
|
||||
.clain-section .claim-text {
|
||||
margin: 0;
|
||||
padding-top: 90px;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
color: #bc9467;
|
||||
}
|
||||
|
||||
.clain-section .claim-text strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
color: #d4a574;
|
||||
}
|
||||
|
||||
/* Desktop: step number is in card background; mobile uses claim-step-mark img */
|
||||
.clain-section .claim-step-mark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.clain-section .claim-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.clain-section .claim-item:not(:last-child)::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.clain-section {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.clain-section .claim-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
max-width: min(360px, 92vw);
|
||||
margin: 8px auto 0;
|
||||
}
|
||||
|
||||
.clain-section .claim-item:nth-child(1),
|
||||
.clain-section .claim-item:nth-child(2),
|
||||
.clain-section .claim-item:nth-child(3) {
|
||||
background-image: url("../../images/backgrounds/new-user-claim-card-bg-mobile.png");
|
||||
}
|
||||
|
||||
.clain-section .claim-item {
|
||||
width: 100%;
|
||||
min-height: 152px;
|
||||
padding: 20px 18px 22px 22px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(180, 110, 45, 0.28);
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(249, 135, 21, 0.55),
|
||||
inset 2px 0 0 rgba(249, 135, 21, 0.42),
|
||||
0 10px 28px rgba(0, 0, 0, 0.35);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.clain-section .claim-step-mark {
|
||||
display: block;
|
||||
width: clamp(76px, 22vw, 112px);
|
||||
height: auto;
|
||||
margin: 0 0 10px;
|
||||
align-self: flex-start;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.clain-section .claim-text {
|
||||
padding-top: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
color: #d4a574;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.clain-section .claim-item:not(:last-child)::after {
|
||||
display: block;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: -28px;
|
||||
transform: translateX(-50%);
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
background: url("../../images/backgrounds/new-user-claim-arrow-down.png") no-repeat center / contain;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/* Welcome rewards — reusable landing floor module */
|
||||
|
||||
.landing-welcome {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.landing-welcome__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc((100% - 100vw) / 2);
|
||||
transform: translateY(-50%);
|
||||
width: min(82vw, 720px);
|
||||
height: 100vh;
|
||||
max-height: 100svh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(ellipse at right center, rgba(249, 135, 21, 0.18), transparent 70%);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.landing-welcome__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 844px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-promo-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin: 0 auto 20px;
|
||||
padding: 28px 32px;
|
||||
text-align: left;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(249, 135, 21, 0.35);
|
||||
background: linear-gradient(135deg, rgba(249, 135, 21, 0.28), rgba(60, 30, 0, 0.55));
|
||||
box-shadow: 0 0 40px rgba(249, 135, 21, 0.1);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.landing-promo-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-promo-card__eyebrow {
|
||||
margin: 0 0 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.landing-promo-card__value {
|
||||
margin: 0 0 4px;
|
||||
font-size: clamp(32px, 5vw, 48px);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
color: var(--primary, #f98715);
|
||||
}
|
||||
|
||||
.landing-promo-card__sub {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.08em;
|
||||
color: #fefefe;
|
||||
}
|
||||
|
||||
.landing-promo-card__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.landing-promo-card__code-label {
|
||||
margin: 0 0 4px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.landing-promo-card__code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.45);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.landing-promo-card__code:hover {
|
||||
border-color: rgba(249, 135, 21, 0.65);
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.landing-promo-card__code:focus-visible {
|
||||
outline: 2px solid var(--primary, #f98715);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.landing-promo-card__code.is-copied {
|
||||
border-color: rgba(249, 135, 21, 0.85);
|
||||
}
|
||||
|
||||
.landing-welcome-copy-toast {
|
||||
position: fixed;
|
||||
top: calc(var(--aifo-nav-height, 5.75rem) + 12px);
|
||||
right: 16px;
|
||||
z-index: 2000;
|
||||
max-width: min(320px, calc(100vw - 32px));
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(249, 135, 21, 0.45);
|
||||
background: rgba(20, 12, 0, 0.92);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.landing-welcome-copy-toast.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.landing-welcome .landing-note {
|
||||
margin: 24px auto 0;
|
||||
max-width: 813px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.landing-promo-card {
|
||||
padding: 20px 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.landing-promo-card__offer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.landing-promo-card__right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.landing-promo-card__right .aifo-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
/**
|
||||
* 24 Hours Payout — reusable floor module.
|
||||
* Used by pages/modules/payout-24h.section.html
|
||||
*/
|
||||
.payout-24h {
|
||||
--payout-24h-primary: #f98715;
|
||||
--payout-24h-amount: #f28c28;
|
||||
--payout-24h-paid: #22c55e;
|
||||
--payout-24h-card-bg: rgba(18, 18, 18, 0.85);
|
||||
--payout-24h-card-border: rgba(255, 255, 255, 0.08);
|
||||
margin-bottom: 96px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payout-24h__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: clamp(32px, 5.26vw, 60px);
|
||||
line-height: 1.307;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
letter-spacing: -0.035em;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
.payout-24h__accent {
|
||||
color: var(--payout-24h-primary);
|
||||
}
|
||||
|
||||
.payout-24h__subtitle {
|
||||
margin: 0 auto 36px;
|
||||
|
||||
font-size: clamp(18px, 2.63vw, 30px);
|
||||
line-height: 1.588;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payout-24h__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.payout-24h__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.payout-24h__grid {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
.payout-24h__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--payout-24h-card-border);
|
||||
background: var(--payout-24h-card-bg);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.payout-24h__card:hover {
|
||||
border-color: rgba(249, 135, 21, 0.25);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.payout-24h__card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.payout-24h__amount {
|
||||
font-size: clamp(18px, 2.5vw, 22px);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--payout-24h-amount);
|
||||
}
|
||||
|
||||
.payout-24h__badge {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
border: 1px solid rgba(34, 197, 94, 0.45);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--payout-24h-paid);
|
||||
}
|
||||
|
||||
.payout-24h__card-bottom {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.payout-24h__avatar {
|
||||
flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
border: none;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.payout-24h__col {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.payout-24h__label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.63;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.payout-24h__value {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.35;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.payout-24h {
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
.payout-24h__subtitle {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
+74
-19
@@ -19,6 +19,27 @@
|
||||
);
|
||||
--aifo-nav-icon-box-border: rgba(255, 255, 255, 0.16);
|
||||
--aifo-nav-icon-box-border-hover: #353132;
|
||||
/* Desktop: gap from logo to first menu item; tune per locale via body.lang-* */
|
||||
--aifo-nav-menu-offset: 1.5rem;
|
||||
--aifo-nav-menu-item-gap: 0.25rem;
|
||||
--aifo-nav-menu-link-padding-x: 1rem;
|
||||
}
|
||||
|
||||
/* Desktop: lock nav bar to layout offset used by .main / hero (6.100625rem) */
|
||||
@media (min-width: 768px) {
|
||||
#nav.aifo-nav {
|
||||
height: 6.100625rem;
|
||||
min-height: 6.100625rem;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav.aifo-nav > .container {
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop: logo | centered menu | right actions */
|
||||
@@ -32,9 +53,10 @@
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
flex: 0 1 auto;
|
||||
justify-content: flex-start;
|
||||
margin-left: var(--aifo-nav-menu-offset);
|
||||
gap: var(--aifo-nav-menu-item-gap);
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__actions {
|
||||
@@ -46,12 +68,23 @@
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-link {
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.5rem var(--aifo-nav-menu-link-padding-x);
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
/* Example: tighter menu when labels are longer */
|
||||
/* body.lang-fr #nav.aifo-nav,
|
||||
body.lang-pt #nav.aifo-nav,
|
||||
body.lang-es #nav.aifo-nav {
|
||||
--aifo-nav-menu-offset: 1.25rem;
|
||||
--aifo-nav-menu-link-padding-x: 0.75rem;
|
||||
--aifo-nav-menu-item-gap: 0.125rem;
|
||||
} */
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-link .icon-a-arrow-down {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.85;
|
||||
@@ -117,6 +150,7 @@
|
||||
margin: 0 !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown .dropdown-item + .dropdown-item {
|
||||
@@ -132,7 +166,7 @@
|
||||
padding: 8px;
|
||||
color: #fff;
|
||||
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.16px;
|
||||
@@ -264,7 +298,7 @@
|
||||
gap: 6px;
|
||||
padding: 5px 9px;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
transition: background 0.2s ease;
|
||||
@@ -292,7 +326,7 @@
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 300;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
@@ -339,18 +373,26 @@
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login {
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 0;
|
||||
transition: color 0.2s ease;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login:hover,
|
||||
#nav.aifo-nav .aifo-nav__login:focus {
|
||||
color: #f98715;
|
||||
text-decoration: none;
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .aifo-nav__login {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login:hover,
|
||||
#nav.aifo-nav .aifo-nav__login:focus {
|
||||
color: var(--aifo-nav-text);
|
||||
background-color: #353132;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav CTA — 42px height to match bar proportions */
|
||||
@@ -358,7 +400,7 @@
|
||||
padding: 0 1.25rem;
|
||||
min-height: 42px;
|
||||
height: 42px;
|
||||
font-size: 0.875rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
@@ -389,10 +431,23 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
#nav.aifo-nav .aifo-nav__login.d-lg-none {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
height: 42px;
|
||||
padding: 0 1.25rem;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #666;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login:hover,
|
||||
#nav.aifo-nav .aifo-nav__login:focus {
|
||||
color: #f98715;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown {
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
/* Special Offer 50% — from temp/优惠页 (Figma export) */
|
||||
@import url("aifo-page-bg.css");
|
||||
|
||||
#special-offer-50.aifo-page-bg {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#special-offer-50 {
|
||||
--so-bg: #080808;
|
||||
@@ -14,24 +19,11 @@
|
||||
--so-btn-px: 28px;
|
||||
--so-btn-font-size: 0.95rem;
|
||||
--so-btn-radius: 8px;
|
||||
--aifo-page-bg-top-left-top: 97px;
|
||||
color: var(--so-text);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#special-offer-50::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 106px;
|
||||
left: -2vw;
|
||||
width: min(60vw, 555px);
|
||||
height: min(60vw, 555px);
|
||||
max-height: min(52vh, 485px);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
background: url("../images/backgrounds/new-user-promo-corner-glow.png") no-repeat
|
||||
left top / cover;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-container {
|
||||
width: 100%;
|
||||
max-width: var(--so-container);
|
||||
@@ -370,10 +362,10 @@
|
||||
grid-area: hero-note;
|
||||
}
|
||||
|
||||
#special-offer-50::before {
|
||||
padding-top: 72px;
|
||||
top: 72px
|
||||
#special-offer-50 {
|
||||
--aifo-page-bg-top-left-top: 72px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
|
Before Width: | Height: | Size: 586 B After Width: | Height: | Size: 586 B |
|
Before Width: | Height: | Size: 583 B After Width: | Height: | Size: 583 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 773 B After Width: | Height: | Size: 773 B |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="12" height="33" viewBox="0 0 12 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9035 16.0992L1.24572 0.334908C0.899686 -0.266273 0 0.000918285 0 0.668897V32.3311C0 32.9991 0.899686 33.2663 1.24572 32.6651L11.8343 16.834C12.0419 16.6336 12.0419 16.3664 11.9035 16.0992Z" fill="#F98715"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 323 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Vendored
+29
-6
@@ -56,10 +56,16 @@
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-help-center</div>
|
||||
<div class="name">Bold</div>
|
||||
<div class="code-name">&#xe617;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Shield Warning</div>
|
||||
<div class="code-name">&#xe612;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">contact-us</div>
|
||||
@@ -444,9 +450,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1783075781525') format('woff2'),
|
||||
url('iconfont.woff?t=1783075781525') format('woff'),
|
||||
url('iconfont.ttf?t=1783075781525') format('truetype');
|
||||
src: url('iconfont.woff2?t=1783664954990') format('woff2'),
|
||||
url('iconfont.woff?t=1783664954990') format('woff'),
|
||||
url('iconfont.ttf?t=1783664954990') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@@ -472,10 +478,19 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-scaling-plan"></span>
|
||||
<div class="name">
|
||||
Bold
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-scaling-plan
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-help-center"></span>
|
||||
<div class="name">
|
||||
nav-help-center
|
||||
Shield Warning
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-help-center
|
||||
</div>
|
||||
@@ -1057,11 +1072,19 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-scaling-plan"></use>
|
||||
</svg>
|
||||
<div class="name">Bold</div>
|
||||
<div class="code-name">#icon-nav-scaling-plan</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-help-center"></use>
|
||||
</svg>
|
||||
<div class="name">nav-help-center</div>
|
||||
<div class="name">Shield Warning</div>
|
||||
<div class="code-name">#icon-nav-help-center</div>
|
||||
</li>
|
||||
|
||||
|
||||
Vendored
+8
-4
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 5079339 */
|
||||
src: url('iconfont.woff2?t=1783075781525') format('woff2'),
|
||||
url('iconfont.woff?t=1783075781525') format('woff'),
|
||||
url('iconfont.ttf?t=1783075781525') format('truetype');
|
||||
src: url('iconfont.woff2?t=1783664954990') format('woff2'),
|
||||
url('iconfont.woff?t=1783664954990') format('woff'),
|
||||
url('iconfont.ttf?t=1783664954990') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,10 +13,14 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-nav-help-center:before {
|
||||
.icon-nav-scaling-plan:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-nav-help-center:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-nav-contact-us:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+10
-3
@@ -6,12 +6,19 @@
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "47996453",
|
||||
"name": "nav-help-center",
|
||||
"font_class": "nav-help-center",
|
||||
"icon_id": "48041590",
|
||||
"name": "Bold",
|
||||
"font_class": "nav-scaling-plan",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "47999927",
|
||||
"name": "Shield Warning",
|
||||
"font_class": "nav-help-center",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "47996317",
|
||||
"name": "contact-us",
|
||||
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
Reference in New Issue
Block a user