Initial commit: AIFO official portal web.
Add static site, shared layout, and Node dev server with standard .gitignore. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+11511
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,453 @@
|
||||
/* ===============================
|
||||
Base
|
||||
================================ */
|
||||
.error-message {
|
||||
width: auto;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 80%;
|
||||
color: var(--aifo-dark-gary);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.error-message::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
background-image: url(../images/icon/valid_err_mark.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.aifo-bg-primary {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100%;
|
||||
padding: 20px 0;
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
background-image: url(../images/backgrounds/academy/bg_all_grid.webp);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.login-page::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background: url(../images/backgrounds/login_bg_light.webp) no-repeat center top/cover;
|
||||
}
|
||||
|
||||
.login-page .login-card {
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 60px 33px;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Layout
|
||||
================================ */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1226px;
|
||||
}
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
.col-xl-8 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 66.6666666667%;
|
||||
flex: 0 0 66.6666666667%;
|
||||
max-width: 580px;
|
||||
padding: 0;
|
||||
}
|
||||
.col-xl-4 {
|
||||
-webkit-box-flex: unset;
|
||||
-ms-flex: unset;
|
||||
flex: unset;
|
||||
max-width: 450px;
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.login-card {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
/* ===============================
|
||||
Card
|
||||
================================ */
|
||||
.card-base {
|
||||
background: rgba(18, 18, 18, 0.88);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 24px;
|
||||
-webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 60px 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.login-card {
|
||||
padding: 28px 22px;
|
||||
}
|
||||
}
|
||||
/* ===============================
|
||||
Logo & Title
|
||||
================================ */
|
||||
.logo-container {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-page .login-title {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
color: var(--aifo-white);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Form
|
||||
================================ */
|
||||
.login-page .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.login-page .form-label {
|
||||
font-size: 15px;
|
||||
color: var(--aifo-white);
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-page .form-control {
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
color: var(--aifo-white);
|
||||
font-size: 14px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.login-page .form-control::-webkit-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
}
|
||||
|
||||
.login-page .form-control::-moz-placeholder {
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
}
|
||||
|
||||
.login-page .form-control:-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
}
|
||||
|
||||
.login-page .form-control::-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
}
|
||||
|
||||
.login-page .form-control::placeholder {
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
}
|
||||
|
||||
.login-page .form-control:focus {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-color: var(--aifo-orange);
|
||||
-webkit-box-shadow: 0 0 0 0.1rem rgba(249, 135, 21, 0.1);
|
||||
box-shadow: 0 0 0 0.1rem rgba(249, 135, 21, 0.1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Password
|
||||
================================ */
|
||||
.login-page .password-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-page .password-toggle {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 0px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: color 0.2s ease;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.login-page .password-toggle:hover {
|
||||
color: rgba(249, 249, 249, 0.85);
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Remember / Forgot
|
||||
================================ */
|
||||
.login-page .remember-forgot {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 25px 0 30px;
|
||||
}
|
||||
|
||||
.login-page .forgot-link {
|
||||
color: var(--aifo-orange);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-page .forgot-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #e67f12;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Button
|
||||
================================ */
|
||||
.login-page .btn-aifo-primary {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
background: var(--aifo-orange);
|
||||
color: var(--aifo-white);
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-page .btn-aifo-primary:hover {
|
||||
background: var(--aifo-orange-hover);
|
||||
-webkit-box-shadow: 0 8px 24px rgba(249, 135, 21, 0.35);
|
||||
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.35);
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Divider
|
||||
================================ */
|
||||
.login-page .divider {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.login-page .divider-line {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--aifo-white);
|
||||
}
|
||||
|
||||
.login-page .divider-text {
|
||||
font-size: 13px;
|
||||
color: var(--aifo-white);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Social
|
||||
================================ */
|
||||
.login-page .social-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-page .social-btn {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
background: #f5f5f5;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.login-page .social-btn:hover {
|
||||
-webkit-transform: translateY(-2px);
|
||||
transform: translateY(-2px);
|
||||
-webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Signup Prompt
|
||||
================================ */
|
||||
.login-page .signup-prompt {
|
||||
text-align: center;
|
||||
color: rgba(249, 249, 249, 0.75);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-page .signup-link {
|
||||
color: var(--aifo-orange);
|
||||
margin-left: 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-page .signup-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #e67f12;
|
||||
}
|
||||
|
||||
/* ===============================
|
||||
Steps (Right Side)
|
||||
================================ */
|
||||
#affliate-login .glass-card {
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
-webkit-box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
#affliate-login .steps-title {
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
color: var(--aifo-white);
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#affliate-login .timeline-wrapper {
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
#affliate-login .timeline-line {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 52px;
|
||||
bottom: 104px;
|
||||
width: 23px;
|
||||
background-image: url("../images/backgrounds/bg_line.webp");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#affliate-login .step-item {
|
||||
position: relative;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#affliate-login .step-number {
|
||||
position: absolute;
|
||||
left: -50px;
|
||||
top: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: var(--aifo-orange);
|
||||
border-radius: 50%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#affliate-login .step-label {
|
||||
color: var(--aifo-orange);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#affliate-login .step-title {
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#affliate-login .step-desc {
|
||||
color: rgba(249, 249, 249, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.login-page {
|
||||
height: auto;
|
||||
}
|
||||
.mb-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.login-page {
|
||||
height: auto;
|
||||
}
|
||||
.mb-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* 页面顶部光晕背景（通用）
|
||||
* 源自 academy .academy-block-1::before，各页通过 CSS 变量调整高度与图片。
|
||||
*
|
||||
* 用法：
|
||||
* <main class="aifo-page-bg">
|
||||
* <div class="页面内容容器">...</div>
|
||||
* </main>
|
||||
*
|
||||
* 注意：aifo-page-bg 应为全宽外层，勿与 max-width 内容容器写在同一元素上。
|
||||
*
|
||||
* 按页覆盖光晕高度：
|
||||
* #my-page { --aifo-page-bg-height: 920px; }
|
||||
*
|
||||
* 按页覆盖背景图：
|
||||
* #my-page { --aifo-page-bg-image: url(../images/...); }
|
||||
*
|
||||
* 按页增加导航下方内容间距（不含 header 高度）：
|
||||
* #my-page { --aifo-page-content-offset: 1.5rem; }
|
||||
*
|
||||
* 叠加网格底纹（可选）：
|
||||
* <main class="aifo-page-bg aifo-page-bg--grid">...</main>
|
||||
*/
|
||||
:root {
|
||||
/* 与 #academy-main margin-top、固定导航高度保持一致 */
|
||||
--aifo-nav-height: 5.9375rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
/* 与 index.css #nav height、.main margin-top 保持一致 */
|
||||
--aifo-nav-height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-page-bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
margin-top: var(--aifo-nav-height);
|
||||
padding-top: var(--aifo-page-content-offset, 0);
|
||||
}
|
||||
|
||||
.aifo-page-bg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: var(--aifo-page-bg-height, 805px);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
background-image: var(
|
||||
--aifo-page-bg-image,
|
||||
url("../images/backgrounds/academy/academy_bg_1.webp")
|
||||
);
|
||||
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.aifo-page-bg--grid {
|
||||
background-image: image-set(
|
||||
url("../images/backgrounds/academy/bg_grid.webp") type("image/webp"),
|
||||
url("../images/backgrounds/academy/bg_grid.png") type("image/png")
|
||||
);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,501 @@
|
||||
/*
|
||||
|
||||
Copy and paste the variables that you want to modify from _variables.scss. The default ones will be overridden.
|
||||
|
||||
*/
|
||||
@media (max-width: 767px) {
|
||||
.btn-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.btn-container > .btn,
|
||||
.btn-container > .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.btn-container > .btn,
|
||||
.btn-container > .btn-group {
|
||||
margin-right: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.content:not(.content--boxed):not(.content--full) {
|
||||
padding: 0 0 0 240px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) and (max-width: 1199px) {
|
||||
.content:not(.content--boxed):not(.content--full) {
|
||||
padding: 102px 30px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.content:not(.content--boxed):not(.content--full) {
|
||||
padding: 87px 15px 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.content--full {
|
||||
padding: 102px 30px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.content--full {
|
||||
padding: 87px 15px 0;
|
||||
}
|
||||
}
|
||||
.content-inner {
|
||||
margin: auto;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.content-inner .example {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.content-inner .example .btn {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
color: #FFFFFF;
|
||||
padding: 0 30px 0 2rem;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #FFF;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.header {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.header {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
.header::after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.header .body-backdrop {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.navigation-trigger {
|
||||
float: left;
|
||||
padding: 2rem 2rem 2rem 2.4rem;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
|
||||
.navigation-trigger:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigation-trigger.toggled .navigation-trigger-inner {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.navigation-trigger.toggled .navigation-trigger-inner:before {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.navigation-trigger.toggled .navigation-trigger-line:first-child {
|
||||
width: 12px;
|
||||
-webkit-transform: translateX(8px) translateY(1px) rotate(45deg);
|
||||
transform: translateX(8px) translateY(1px) rotate(45deg);
|
||||
}
|
||||
|
||||
.navigation-trigger.toggled .navigation-trigger-line:last-child {
|
||||
width: 11px;
|
||||
-webkit-transform: translateX(8px) translateY(-1px) rotate(-45deg);
|
||||
transform: translateX(8px) translateY(-1px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.navigation-trigger-inner,
|
||||
.navigation-trigger-line {
|
||||
width: 18px;
|
||||
-webkit-transition: all 300ms;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.navigation-trigger-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation-trigger-inner:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: -11px;
|
||||
top: -14px;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
-webkit-transition: all 300ms;
|
||||
transition: all 300ms;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.navigation-trigger-line {
|
||||
height: 2px;
|
||||
background-color: #333;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navigation-trigger-line:not(:last-child) {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.header-brand {
|
||||
min-width: calc(270px - 2rem);
|
||||
}
|
||||
}
|
||||
.header-brand > h1 {
|
||||
line-height: 100%;
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-brand > h1 > a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.header-nav .nav-link {
|
||||
padding: 0 1rem;
|
||||
font-size: 0.765625rem;
|
||||
color: #adb5bd;
|
||||
-webkit-transition: background-color 300ms;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
.header-nav .nav-link:hover {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 240px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
padding: 0 0.5rem 0.5rem 1.5rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1050;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.sidebar {
|
||||
-webkit-transition: opacity 300ms, -webkit-transform 300ms;
|
||||
transition: opacity 300ms, -webkit-transform 300ms;
|
||||
transition: transform 300ms, opacity 300ms;
|
||||
transition: transform 300ms, opacity 300ms, -webkit-transform 300ms;
|
||||
}
|
||||
.sidebar:not(.toggled) {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.sidebar.toggled {
|
||||
-webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.sidebar-brand {
|
||||
height: 72px;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.sidebar-brand > h1 {
|
||||
-webkit-transform: translateY(50%);
|
||||
transform: translateY(50%);
|
||||
font-size: 1.09375rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar-brand > h1 > a {
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.sidebar .scrollbar-inner > .scroll-element {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidebar--hidden {
|
||||
background-color: #FFFFFF;
|
||||
-webkit-transition: opacity 300ms, -webkit-transform 300ms;
|
||||
transition: opacity 300ms, -webkit-transform 300ms;
|
||||
transition: transform 300ms, opacity 300ms;
|
||||
transition: transform 300ms, opacity 300ms, -webkit-transform 300ms;
|
||||
}
|
||||
|
||||
.sidebar--hidden:not(.toggled) {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
.sidebar--hidden.toggled {
|
||||
-webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.navigation .navigation-title {
|
||||
color: #adb5bd;
|
||||
font-weight: 600;
|
||||
margin: 0.875rem 0 0;
|
||||
padding: 1rem 0rem 0.875rem;
|
||||
}
|
||||
|
||||
.navigation .navigation-item {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.navigation .navigation-link {
|
||||
display: block;
|
||||
padding: 0.25rem 1rem;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
-webkit-transition: background 0.3s, box-shadow 0.3s;
|
||||
-webkit-transition: background 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: background 0.3s, -webkit-box-shadow 0.3s;
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
transition: background 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navigation .navigation-link:hover,
|
||||
.navigation .navigation-link.active {
|
||||
color: #288cff;
|
||||
}
|
||||
|
||||
.scrollbar-inner {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element {
|
||||
-webkit-transition: opacity 300ms;
|
||||
transition: opacity 300ms;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-y {
|
||||
width: 3px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element.scroll-x {
|
||||
height: 3px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-bar,
|
||||
.scrollbar-inner > .scroll-element .scroll-element_track {
|
||||
-webkit-transition: background-color 300ms;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-inner:not(:hover) .scroll-element {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
position: relative;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.page-title .heading {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.page-title .heading a {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
@media (min-height: 600px) and (min-width: 767px) {
|
||||
.background-image-holder[data-holder-type=hero] {
|
||||
height: 80vh;
|
||||
}
|
||||
}
|
||||
.background-image-holder .holder-item {
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.background-image-holder .holder-item {
|
||||
height: auto;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
}
|
||||
.background-image-holder .swiper-container,
|
||||
.background-image-holder .container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background-image-holder .swiper-container .swiper-slide .animated {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.background-image-holder .swiper-container .swiper-slide .animated.animation-ended {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-size--cover {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.bg-size--contain {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.typeface-palette .typeface-entry {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 2rem;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.typeface-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.color-palette .color-entry {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 170px;
|
||||
color: #FFF;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.color-palette .color-entry .color-code {
|
||||
background: #fff;
|
||||
color: #495057;
|
||||
padding: 6px 10px;
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.content-docs h2[id]::before,
|
||||
.content-docs h3[id]::before,
|
||||
.content-docs h4[id]::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3rem;
|
||||
margin-top: -3rem;
|
||||
}
|
||||
.content-docs h2[id]:not(:first-child),
|
||||
.content-docs h3[id]:not(:first-child),
|
||||
.content-docs h4[id]:not(:first-child) {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
.content-docs h2[id],
|
||||
.content-docs h3[id],
|
||||
.content-docs h4[id] {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
padding: 1.5rem;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.code-clipboard {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 75%;
|
||||
color: #818a91;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.btn-clipboard:hover {
|
||||
color: #fff;
|
||||
background-color: #027de7;
|
||||
}
|
||||
|
||||
.toc-entry {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toc-entry a {
|
||||
display: block;
|
||||
padding: 0.125rem 1.5rem;
|
||||
color: #99979c;
|
||||
}
|
||||
|
||||
.toc-entry a:hover {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,527 @@
|
||||
/* AIFO Footer — Figma ref: temp/底部栏20260610 Footer */
|
||||
|
||||
.aifo-foot {
|
||||
--foot-bg: #070400;
|
||||
--foot-accent: #f98715;
|
||||
--foot-text: #fff;
|
||||
--foot-muted: #666;
|
||||
--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);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--foot-bg);
|
||||
color: var(--foot-text);
|
||||
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.aifo-foot__glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background: url("/assets/images/backgrounds/footer_bg.png") center bottom / cover no-repeat;
|
||||
}
|
||||
|
||||
.aifo-foot__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1128px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.aifo-foot__inner {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.aifo-foot__inner {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Top bar: logo + social */
|
||||
.aifo-foot__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 0.5px solid var(--foot-muted);
|
||||
}
|
||||
|
||||
.aifo-foot__logo img {
|
||||
display: block;
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.aifo-foot__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__social a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.aifo-foot__social a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aifo-foot__social .icon-media-box {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
/* Main: contact + nav */
|
||||
.aifo-foot__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aifo-foot__main {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-foot__contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.aifo-foot__contact-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.aifo-foot__contact-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-accent);
|
||||
}
|
||||
|
||||
.aifo-foot__contact-label svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__contact-value {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 16px;
|
||||
letter-spacing: -0.14px;
|
||||
color: var(--foot-text);
|
||||
}
|
||||
|
||||
.aifo-foot__nav-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aifo-foot__nav-grid {
|
||||
width: 500px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-foot__nav-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.aifo-foot__nav-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--foot-text);
|
||||
}
|
||||
|
||||
.aifo-foot__nav-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aifo-foot__nav-list a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: var(--foot-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.aifo-foot__nav-list a:hover {
|
||||
color: var(--foot-text);
|
||||
}
|
||||
|
||||
/* Newsletter */
|
||||
.aifo-foot__newsletter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px 0;
|
||||
border-top: 1px solid var(--foot-border);
|
||||
border-bottom: 1px solid var(--foot-border);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.aifo-foot__newsletter {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-foot__newsletter-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aifo-foot__newsletter-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.aifo-foot__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aifo-foot__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-muted-60);
|
||||
}
|
||||
|
||||
.aifo-foot__badge svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__form {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.aifo-foot__form-field {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 6px 6px 6px 16px;
|
||||
background: var(--foot-chip-bg);
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.aifo-foot__form-field.is-invalid {
|
||||
border-color: #f98715;
|
||||
}
|
||||
|
||||
.aifo-foot__form-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--foot-text);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.aifo-foot__form-input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.aifo-foot__form-btn {
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px 24px;
|
||||
background: var(--foot-accent);
|
||||
color: var(--foot-text);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.16px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, transform 0.15s;
|
||||
}
|
||||
|
||||
.aifo-foot__form-btn:hover {
|
||||
background: #ffad33;
|
||||
}
|
||||
|
||||
.aifo-foot__form-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: var(--foot-bg);
|
||||
border: 1px solid var(--foot-accent);
|
||||
border-radius: 4px;
|
||||
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-accent);
|
||||
max-width: calc(100% - 118px);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip::before,
|
||||
.aifo-foot__form-tooltip::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip::before {
|
||||
top: -8px;
|
||||
border-width: 0 7px 8px;
|
||||
border-color: transparent transparent var(--foot-accent);
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip::after {
|
||||
top: -6px;
|
||||
border-width: 0 6px 7px;
|
||||
border-color: transparent transparent var(--foot-bg);
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
background: var(--foot-accent);
|
||||
border-radius: 2px;
|
||||
color: var(--foot-text);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aifo-foot__form-tooltip-text {
|
||||
color: var(--foot-accent);
|
||||
}
|
||||
|
||||
.aifo-foot__form-msg {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.aifo-foot__form-success {
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
/* Legal block */
|
||||
.aifo-foot__legal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.aifo-foot__disclaimer {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-muted-60);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.aifo-foot__company {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-muted-60);
|
||||
}
|
||||
|
||||
.aifo-foot__company p {
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
/* Payment chips */
|
||||
.aifo-foot__payments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px 16px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid var(--foot-border);
|
||||
border-bottom: 1px solid var(--foot-border);
|
||||
}
|
||||
|
||||
.aifo-foot__pay-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid var(--foot-border);
|
||||
}
|
||||
|
||||
.aifo-foot__pay-group:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__pay-chip {
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
background: var(--foot-chip-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__pay-chip img {
|
||||
max-width: 78%;
|
||||
max-height: 78%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Bottom bar */
|
||||
.aifo-foot__bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.aifo-foot__bottom {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-foot__copyright {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aifo-foot__copyright a {
|
||||
color: var(--foot-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aifo-foot__copyright a:hover {
|
||||
color: var(--foot-accent);
|
||||
}
|
||||
|
||||
.aifo-foot__legal-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 40px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.aifo-foot__legal-links a {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.24px;
|
||||
color: var(--foot-muted-60);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.aifo-foot__legal-links a:hover {
|
||||
color: var(--foot-text);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,549 @@
|
||||
#forgot-password.auth-page, #reset-password.auth-page {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-image: url("../images/backgrounds/academy/bg_grid_pwd.webp");
|
||||
}
|
||||
#forgot-password.auth-page .logo-container, #reset-password.auth-page .logo-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-container, #reset-password.auth-page .auth-container {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
min-height: 100%;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
#forgot-password.auth-page .logo-container img, #reset-password.auth-page .logo-container img {
|
||||
width: 66px;
|
||||
height: 57px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 20px;
|
||||
padding: 60px 33px 160px 33px;
|
||||
-webkit-box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
text-align: center;
|
||||
background-color: var(--aifo-dark-gary);
|
||||
background-image: url("../images/backgrounds/bg_bottom.webp");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
#forgot-password.auth-page .logo-icon, #reset-password.auth-page .logo-icon {
|
||||
width: 50px;
|
||||
height: 36px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-title, #reset-password.auth-page .auth-title {
|
||||
color: #F9F9F9;
|
||||
font-size: 28px !important;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-description, #reset-password.auth-page .auth-description {
|
||||
color: rgba(249, 249, 249, 0.72);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
#forgot-password.auth-page .form-label, #reset-password.auth-page .form-label {
|
||||
display: block;
|
||||
color: rgba(249, 249, 249, 0.85);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
#forgot-password.auth-page .form-control, #reset-password.auth-page .form-control {
|
||||
height: 50px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 11px;
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
padding: 0 16px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#forgot-password.auth-page .form-control::-webkit-input-placeholder, #reset-password.auth-page .form-control::-webkit-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#forgot-password.auth-page .form-control::-moz-placeholder, #reset-password.auth-page .form-control::-moz-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#forgot-password.auth-page .form-control:-ms-input-placeholder, #reset-password.auth-page .form-control:-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#forgot-password.auth-page .form-control::-ms-input-placeholder, #reset-password.auth-page .form-control::-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#forgot-password.auth-page .form-control::placeholder, #reset-password.auth-page .form-control::placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#forgot-password.auth-page .form-control:focus, #reset-password.auth-page .form-control:focus {
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-color: #F98715;
|
||||
-webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
color: #F9F9F9;
|
||||
outline: none;
|
||||
}
|
||||
#forgot-password.auth-page .invalid-feedback, #reset-password.auth-page .invalid-feedback {
|
||||
display: none;
|
||||
color: var(--aifo-orange);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
#forgot-password.auth-page .invalid-feedback.show, #reset-password.auth-page .invalid-feedback.show {
|
||||
display: block;
|
||||
}
|
||||
#forgot-password.auth-page .btn-primary, #reset-password.auth-page .btn-primary {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: var(--aifo-orange);
|
||||
border: none;
|
||||
border-radius: 11px;
|
||||
color: var(--aifo-white);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 30px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
#forgot-password.auth-page .btn-primary:hover:not(:disabled), #reset-password.auth-page .btn-primary:hover:not(:disabled) {
|
||||
background: #e97d10;
|
||||
-webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
-webkit-transform: translateY(-1px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
#forgot-password.auth-page .btn-primary:disabled, #reset-password.auth-page .btn-primary:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#forgot-password.auth-page .btn-primary:focus, #reset-password.auth-page .btn-primary:focus {
|
||||
-webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
outline: none;
|
||||
}
|
||||
#forgot-password.auth-page .spinner-border-sm, #reset-password.auth-page .spinner-border-sm {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-width: 2px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#forgot-password.auth-page .signup-prompt, #reset-password.auth-page .signup-prompt {
|
||||
color: rgba(249, 249, 249, 0.6);
|
||||
font-size: 14px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
#forgot-password.auth-page .signup-link, #reset-password.auth-page .signup-link {
|
||||
color: #F98715;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#forgot-password.auth-page .signup-link:hover, #reset-password.auth-page .signup-link:hover {
|
||||
color: #ff9a2e;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#forgot-password.auth-page .back-link, #reset-password.auth-page .back-link {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: rgba(249, 249, 249, 0.7);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
margin-top: 24px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#forgot-password.auth-page .back-link:hover, #reset-password.auth-page .back-link:hover {
|
||||
color: rgba(249, 249, 249, 0.95);
|
||||
text-decoration: none;
|
||||
}
|
||||
#forgot-password.auth-page .back-icon, #reset-password.auth-page .back-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #F98715;
|
||||
border-radius: 5px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#forgot-password.auth-page .back-link:hover .back-icon, #reset-password.auth-page .back-link:hover .back-icon {
|
||||
-webkit-box-shadow: 0 0 12px rgba(249, 135, 21, 0.4);
|
||||
box-shadow: 0 0 12px rgba(249, 135, 21, 0.4);
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
#forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card {
|
||||
padding: 36px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card {
|
||||
max-width: calc(100% - 32px);
|
||||
padding: 28px 22px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-title, #reset-password.auth-page .auth-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
#forgot-password.auth-page .auth-description, #reset-password.auth-page .auth-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-page::before, #reset-password.auth-page::before, #ch_pwd_message.auth-page {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
background-image: url(../images/backgrounds/login_bg_light.svg);
|
||||
height: 500px;
|
||||
width: 72%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#ch_pwd_message.auth-page {
|
||||
padding: 40px 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#reset-password.auth-page .form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#reset-password.auth-page .form-label {
|
||||
color: rgba(249, 249, 249, 0.85);
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
}
|
||||
#reset-password.auth-page .input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
#reset-password.auth-page .form-control {
|
||||
height: 50px;
|
||||
border-radius: 11px;
|
||||
background: #0f0f0f;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
padding-right: 45px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#reset-password.auth-page .form-control::-webkit-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#reset-password.auth-page .form-control::-moz-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#reset-password.auth-page .form-control:-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#reset-password.auth-page .form-control::-ms-input-placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#reset-password.auth-page .form-control::placeholder {
|
||||
color: rgba(249, 249, 249, 0.35);
|
||||
}
|
||||
#reset-password.auth-page .form-control:focus {
|
||||
background: #0f0f0f;
|
||||
border-color: #F98715;
|
||||
-webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
|
||||
color: #F9F9F9;
|
||||
outline: none;
|
||||
}
|
||||
#reset-password.auth-page .form-control.is-invalid {
|
||||
border-color: var(--aifo-orange);
|
||||
}
|
||||
#reset-password.auth-page .form-control.is-invalid:focus {
|
||||
border-color: var(--aifo-orange);
|
||||
-webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
||||
}
|
||||
#reset-password.auth-page .toggle-password {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(249, 249, 249, 0.55);
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
-webkit-transition: color 0.2s ease;
|
||||
transition: color 0.2s ease;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#reset-password.auth-page .toggle-password:hover {
|
||||
color: rgba(249, 249, 249, 0.85);
|
||||
}
|
||||
#reset-password.auth-page .toggle-password:focus {
|
||||
outline: none;
|
||||
}
|
||||
#reset-password.auth-page .password-hint {
|
||||
color: rgba(249, 249, 249, 0.45);
|
||||
font-size: 11.5px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
#reset-password.auth-page .btn-primary {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-radius: 11px;
|
||||
background: #F98715;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 17px;
|
||||
margin-top: 24px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#reset-password.auth-page .btn-primary:hover {
|
||||
background: #e97d10;
|
||||
-webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
-webkit-transform: translateY(-1px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
#reset-password.auth-page .btn-primary:active {
|
||||
-webkit-transform: translateY(1px);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
#reset-password.auth-page .btn-primary:focus {
|
||||
background: #e97d10;
|
||||
-webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18);
|
||||
outline: none;
|
||||
}
|
||||
#reset-password.auth-page .btn-primary:disabled {
|
||||
background: rgba(249, 135, 21, 0.5);
|
||||
cursor: not-allowed;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
#reset-password.auth-page .security-note {
|
||||
color: rgba(249, 249, 249, 0.45);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.45;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
#reset-password.auth-page .invalid-feedback {
|
||||
color: #dc3545;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#reset-password.auth-page .auth-card {
|
||||
width: calc(100% - 32px);
|
||||
padding: 28px 22px;
|
||||
}
|
||||
#reset-password.auth-page .auth-title {
|
||||
font-size: 23px;
|
||||
}
|
||||
#reset-password.auth-page .auth-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
#reset-password.auth-page .auth-card {
|
||||
padding: 36px;
|
||||
}
|
||||
#reset-password.auth-page .auth-title {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
#ch_pwd_message.auth-page {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-image: url("../images/backgrounds/academy/bg_grid_pwd.webp");
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-page {
|
||||
min-width: 450px;
|
||||
min-height: 650px;
|
||||
background-color: var(--aifo-dark-gary);
|
||||
background-image: url(../images/backgrounds/bg_bottom.webp);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
-webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
|
||||
border-radius: 14px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-card {
|
||||
max-width: 450px;
|
||||
width: 100%;
|
||||
min-height: 650px;
|
||||
padding: 80px 33px 150px;
|
||||
-webkit-transform: translateY(6px);
|
||||
transform: translateY(6px);
|
||||
}
|
||||
#ch_pwd_message.auth-page {
|
||||
/* @keyframes cardFadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
} */
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 8px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 40px;
|
||||
/* box-shadow: 0 10px 22px rgba(249,135,21,0.25); */
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-icon i {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-title {
|
||||
color: var(--aifo-white);
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-countdown {
|
||||
color: var(--aifo-white);
|
||||
font-size: 52px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin: 70px 0 70px;
|
||||
-webkit-transition: -webkit-transform 100ms ease-out;
|
||||
transition: -webkit-transform 100ms ease-out;
|
||||
transition: transform 100ms ease-out;
|
||||
transition: transform 100ms ease-out, -webkit-transform 100ms ease-out;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-countdown.pulse {
|
||||
-webkit-animation: countdownPulse 100ms ease-out;
|
||||
animation: countdownPulse 100ms ease-out;
|
||||
}
|
||||
@-webkit-keyframes countdownPulse {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.98);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
@keyframes countdownPulse {
|
||||
0%, 100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0.98);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-back-link {
|
||||
color: var(--aifo-orange);
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
-webkit-transition: all 200ms ease;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-back-link:hover {
|
||||
color: var(--aifo-orange);
|
||||
text-decoration: underline;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
#ch_pwd_message.auth-page .success-card {
|
||||
width: 100%;
|
||||
padding: 40px 33px 100px;
|
||||
min-height: 460px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-page {
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-countdown {
|
||||
font-size: 46px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-back-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-countdown {
|
||||
margin: 35px 0 35px;
|
||||
}
|
||||
#ch_pwd_message.auth-page .success-icon {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
#promotion-activity-1 {
|
||||
--primary: #f98715;
|
||||
--primary-hover: #f9a215;
|
||||
--bg-page: #070400;
|
||||
--bg-card: #0e0e0e;
|
||||
--border-muted: #989795;
|
||||
--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;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-main);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .promo-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1140px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
padding: 109px 0 40px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__content {
|
||||
flex: 1;
|
||||
max-width: 561px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__title {
|
||||
margin: 0;
|
||||
font-size: clamp(36px, 5vw, 56px);
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__desc {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 16px 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .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 {
|
||||
background: rgba(15, 15, 15, 0.5);
|
||||
border: 0.657px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo--outline:hover {
|
||||
background: rgba(15, 15, 15, 0.8);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__check {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #666;
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-requirements__check svg {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: min(100%, 510px);
|
||||
aspect-ratio: 510 / 560;
|
||||
border-radius: 20px;
|
||||
background: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge {
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
right: 9px;
|
||||
bottom: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 70px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-icon img {
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.17;
|
||||
letter-spacing: 0.24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__badge-value {
|
||||
margin: 5px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
color: var(--bg-page);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits {
|
||||
padding: 40px 0 72px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .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 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 48px 32px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__icon {
|
||||
display: inline-flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__icon img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__desc {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Growth Path modal */
|
||||
#promotion-activity-1 .growth-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1050;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__panel {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 12px;
|
||||
background: #231f20;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__header-title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.25;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__close:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__intro {
|
||||
margin: 0 0 24px;
|
||||
font-size: 14px;
|
||||
line-height: 1.29;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.14px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .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 {
|
||||
padding: 16px 16px 16px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.17;
|
||||
letter-spacing: 0.24px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table th {
|
||||
color: #666;
|
||||
padding-top: 0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-table tbody tr {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#promotion-activity-1 .scaling-hero {
|
||||
flex-direction: column;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__visual {
|
||||
width: 100%;
|
||||
max-width: 510px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#promotion-activity-1 {
|
||||
--aifo-page-content-offset: 1rem;
|
||||
--aifo-page-bg-height: 445px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .promo-page {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__desc {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-hero__actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .btn-promo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefits__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .scaling-benefit-card__desc-br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#promotion-activity-1 .growth-modal__footer .btn-promo {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,542 @@
|
||||
#promotion-activity {
|
||||
--primary: #f98715;
|
||||
--primary-hover: #f9a215;
|
||||
--bg-page: #070400;
|
||||
--bg-card: #0e0e0e;
|
||||
--border-muted: #989795;
|
||||
--text-main: #f9f9f9;
|
||||
--text-muted: #909090;
|
||||
--line: rgba(255, 255, 255, 0.12);
|
||||
/* 推广活动页顶部光晕高度，可按区块内容自行调整 */
|
||||
--aifo-page-bg-height: 805px;
|
||||
/* 导航下方到主内容的额外间距（header 高度由 --aifo-nav-height 处理） */
|
||||
--aifo-page-content-offset: 1.375rem;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-main);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1140px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero {
|
||||
position: relative;
|
||||
min-height: 620px;
|
||||
padding: 94px 0 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 490px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__title {
|
||||
margin: 0 0 29px;
|
||||
font-size: clamp(36px, 5vw, 60px);
|
||||
line-height: 1.18;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.6px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__title .text-orange {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__desc {
|
||||
margin: 0 0 29px;
|
||||
max-width: 429px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
#promotion-activity .btn-promo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 15px 40px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-main);
|
||||
background: var(--primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
#promotion-activity .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 .btn-promo--sm {
|
||||
padding: 15px 40px;
|
||||
font-size: 20px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__visual {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: -40px;
|
||||
width: min(58%, 720px);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0 20px rgba(255, 214, 68, 0.25));
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 140px;
|
||||
padding: 4px 32px;
|
||||
min-height: 139px;
|
||||
border-radius: 20px;
|
||||
background: url("../images/promotion-activity/20260629-165840.png") no-repeat center / 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar__tags {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 38px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-tag {
|
||||
flex: 1;
|
||||
min-height: 54px;
|
||||
border-radius: 14px;
|
||||
background: url("../images/promotion-activity/20260629-165832.png") no-repeat center / 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-tag__value {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
color: var(--primary);
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-tag__label {
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar__action {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section {
|
||||
position: relative;
|
||||
padding: 72px 0;
|
||||
}
|
||||
|
||||
#promotion-activity .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;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section__title--left {
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section__title .text-orange {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section__title--center {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 41px;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card {
|
||||
position: relative;
|
||||
min-height: 159px;
|
||||
padding: 22px 24px;
|
||||
border: 0.5px solid var(--border-muted);
|
||||
border-radius: 15px;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__user {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__identity-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__flag.fi {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__name {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__account {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__payout-wrap {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__payout-label {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__payout {
|
||||
margin: 4px 0 0;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__quote {
|
||||
margin: 18px 0 0;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.73;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section--compare {
|
||||
padding-top: 48px;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section--compare::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -54px;
|
||||
right: -120px;
|
||||
width: 409px;
|
||||
height: 656px;
|
||||
background: url("../images/promotion-activity/section-glow.png") no-repeat center / contain;
|
||||
transform: rotate(-90deg);
|
||||
pointer-events: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
#promotion-activity .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;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__header,
|
||||
#promotion-activity .compare-table__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
min-height: 64px;
|
||||
padding: 18px 28px;
|
||||
font-size: 18px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell--other {
|
||||
color: var(--text-muted);
|
||||
border-right: 0.5px solid rgba(152, 151, 149, 0.35);
|
||||
}
|
||||
|
||||
#promotion-activity .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%
|
||||
);
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell--head {
|
||||
min-height: 72px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell--head.compare-table__cell--other {
|
||||
color: #b3b3b3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#promotion-activity .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%
|
||||
);
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__row:not(:last-child) .compare-table__cell,
|
||||
#promotion-activity .compare-table__header .compare-table__cell {
|
||||
border-bottom: 0.5px solid rgba(152, 151, 149, 0.28);
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__icon--no {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__icon--yes {
|
||||
color: #3ecf8e;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
#promotion-activity .promo-hero__visual {
|
||||
right: -10px;
|
||||
width: 52%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
#promotion-activity .promo-hero {
|
||||
min-height: 0;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__visual {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
margin: 32px auto 0;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__content {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__desc {
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar {
|
||||
margin-top: 90px;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 20px 16px;
|
||||
min-height: 0;
|
||||
gap: 16px;
|
||||
background-image: none;
|
||||
background-color: #0c0c0c;
|
||||
border: 0.5px solid rgba(152, 151, 149, 0.22);
|
||||
box-shadow: inset 0 -36px 56px rgba(249, 135, 21, 0.1);
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 55%;
|
||||
border-radius: 0 0 20px 20px;
|
||||
background: linear-gradient(to top, rgba(249, 135, 21, 0.14), transparent);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar__tags {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-offer-bar__action {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section__title--left {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#promotion-activity {
|
||||
--aifo-page-content-offset: 1rem;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-page {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-hero__desc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#promotion-activity .btn-promo,
|
||||
#promotion-activity .btn-promo--sm {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
font-size: 18px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section {
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
#promotion-activity .promo-section__title {
|
||||
font-size: 32px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
#promotion-activity .testimonial-card__payout {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell {
|
||||
padding: 14px 16px;
|
||||
font-size: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#promotion-activity .compare-table__cell--head {
|
||||
font-size: 11px;
|
||||
min-height: 56px;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
#promotion-activity {
|
||||
--aifo-page-bg-height: 445px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,881 @@
|
||||
@charset "UTF-8";
|
||||
.bg_grid {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
body.aifo-bg-primary {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg_top {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 870px;
|
||||
z-index: -1;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
#affliate-register-question .has-error {
|
||||
border-left: 3px solid var(--aifo-orange);
|
||||
padding-left: 12px;
|
||||
}
|
||||
#affliate-register-question button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#affliate-register-question .modal-overlay {
|
||||
display: none;
|
||||
margin: auto;
|
||||
}
|
||||
#affliate-register-question .questionnaire-modal {
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
max-width: 712px;
|
||||
width: 100%;
|
||||
max-height: unset;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
#affliate-register-question .main-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
#affliate-register-question .questionnaire-card {
|
||||
border-radius: 20px;
|
||||
max-width: 780px;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 80px);
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
overflow: hidden;
|
||||
}
|
||||
#affliate-register-question .card-content {
|
||||
padding: 36px;
|
||||
}
|
||||
#affliate-register-question .back-button {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 32px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#affliate-register-question .back-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: var(--aifo-orange);
|
||||
border-radius: 5px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#affliate-register-question .back-button:hover .back-icon {
|
||||
-webkit-box-shadow: 0 0 12px rgba(249, 135, 21, 0.4);
|
||||
box-shadow: 0 0 12px rgba(249, 135, 21, 0.4);
|
||||
}
|
||||
#affliate-register-question .back-text {
|
||||
color: #F9F9F9;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
#affliate-register-question .question-section {
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
#affliate-register-question .question-title {
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#affliate-register-question .options-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox label {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
padding: 10px 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox label:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox input[type=checkbox],
|
||||
#affliate-register-question .custom-checkbox input[type=radio] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
#affliate-register-question .checkbox-custom {
|
||||
min-width: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
-webkit-transition: unset;
|
||||
transition: unset;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#affliate-register-question .checkbox-custom::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%) scale(0);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox input[type=checkbox]:checked + label .checkbox-custom,
|
||||
#affliate-register-question .custom-checkbox input[type=radio]:checked + label .checkbox-custom,
|
||||
#affliate-register-question .custom-checkbox label.is-checked .checkbox-custom {
|
||||
background: #F98715;
|
||||
border-color: #F98715;
|
||||
}
|
||||
#affliate-register-question .custom-checkbox input[type=checkbox]:checked + label .checkbox-custom::after,
|
||||
#affliate-register-question .custom-checkbox input[type=radio]:checked + label .checkbox-custom::after,
|
||||
#affliate-register-question .custom-checkbox label.is-checked .checkbox-custom::after {
|
||||
-webkit-transform: translate(-50%, -50%) scale(1);
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
#affliate-register-question .error-message {
|
||||
color: var(--aifo-orange);
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .cta-section {
|
||||
padding: 24px 36px;
|
||||
background: rgba(20, 20, 20, 0.95);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
#affliate-register-question .cta-button {
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
background: #F98715;
|
||||
color: #ffffff;
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 11px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
-webkit-box-shadow: 0 4px 14px rgba(249, 135, 21, 0.15);
|
||||
box-shadow: 0 4px 14px rgba(249, 135, 21, 0.15);
|
||||
}
|
||||
#affliate-register-question .cta-button:hover:not(:disabled) {
|
||||
background: #ff9a2e;
|
||||
-webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.35);
|
||||
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.35);
|
||||
-webkit-transform: translateY(-1px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
#affliate-register-question .cta-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#affliate-register-question .questionnaire-modal {
|
||||
padding: 0px;
|
||||
}
|
||||
#affliate-register-question .page-wrapper {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#affliate-register-question .form-card {
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#0F0F10));
|
||||
background: linear-gradient(180deg, #141414 0%, #0F0F10 100%);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
|
||||
max-width: 820px;
|
||||
width: 92%;
|
||||
padding: 32px 40px;
|
||||
margin: auto;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#affliate-register-question .form-card {
|
||||
padding: 20px 18px;
|
||||
}
|
||||
}
|
||||
#affliate-register-question .form-card::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
#affliate-register-question .form-card::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 4px;
|
||||
}
|
||||
#affliate-register-question .form-card::-webkit-scrollbar-thumb {
|
||||
background: rgba(249, 135, 21, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
#affliate-register-question .form-card::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(249, 135, 21, 0.7);
|
||||
}
|
||||
#affliate-register-question .back-button {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 28px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#affliate-register-question .back-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--aifo-orange);
|
||||
border-radius: 6px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#affliate-register-question .back-button:hover .back-icon {
|
||||
background: var(--aifo-orange-hover);
|
||||
-webkit-box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
|
||||
}
|
||||
#affliate-register-question .back-text {
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
#affliate-register-question .question-block {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
#affliate-register-question .question-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #F1F1F1;
|
||||
margin-bottom: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
#affliate-register-question .checkbox-option {
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#affliate-register-question .checkbox-option label {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#affliate-register-question .checkbox-option label:hover .checkbox-custom {
|
||||
border-color: rgba(249, 135, 21, 0.6);
|
||||
}
|
||||
#affliate-register-question .checkbox-option input[type=checkbox] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#affliate-register-question .checkbox-label {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#affliate-register-question .form-input {
|
||||
background: #101010;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 6px;
|
||||
padding: 14px 16px;
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
height: 24px;
|
||||
}
|
||||
#affliate-register-question .form-input:focus {
|
||||
outline: none;
|
||||
border-color: #F98715;
|
||||
-webkit-box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15);
|
||||
}
|
||||
#affliate-register-question .form-input::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
#affliate-register-question .form-input::-moz-placeholder {
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
#affliate-register-question .form-input:-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
#affliate-register-question .form-input::-ms-input-placeholder {
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
#affliate-register-question .form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.38);
|
||||
}
|
||||
#affliate-register-question .platform-input-wrapper {
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
#affliate-register-question .platform-input-wrapper input {
|
||||
padding-left: 44px;
|
||||
}
|
||||
#affliate-register-question .input-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#affliate-register-question .input-icon svg {
|
||||
display: block;
|
||||
}
|
||||
#affliate-register-question .platform-selector {
|
||||
position: relative;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 180px;
|
||||
flex: 0 0 180px;
|
||||
}
|
||||
#affliate-register-question .platform-select {
|
||||
width: 100%;
|
||||
background: #101010;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 12px;
|
||||
padding: 14px 40px 14px 16px;
|
||||
color: #F9F9F9;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
#affliate-register-question .platform-select:focus {
|
||||
outline: none;
|
||||
border-color: #F98715;
|
||||
-webkit-box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15);
|
||||
}
|
||||
#affliate-register-question .platform-selector::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid rgba(255, 255, 255, 0.6);
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
#affliate-register-question .platform-selector {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 160px;
|
||||
flex: 0 0 160px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#affliate-register-question .platform-selector {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#affliate-register-question .links-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #F1F1F1;
|
||||
}
|
||||
#affliate-register-question .add-platform-link {
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #F98715;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
#affliate-register-question .add-platform-link:hover {
|
||||
color: #FF9830;
|
||||
text-decoration: underline;
|
||||
}
|
||||
#affliate-register-question .links-row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
#affliate-register-question .links-row-buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 991px) and (min-width: 768px) {
|
||||
#affliate-register-question .links-row {
|
||||
gap: 10px;
|
||||
}
|
||||
#affliate-register-question .btn-attach {
|
||||
padding: 14px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#affliate-register-question .form-card {
|
||||
max-height: 86vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#affliate-register-question .links-row {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
#affliate-register-question .platform-input-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
#affliate-register-question .btn-attach {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
#affliate-register-question .btn-delete {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
width: 48px;
|
||||
}
|
||||
#affliate-register-question .question-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
#affliate-register-question .checkbox-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
#affliate-register-question .btn-attach {
|
||||
background: #F98715;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 14px 20px;
|
||||
line-height: 1.4;
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#affliate-register-question .btn-attach:hover {
|
||||
background: #FF9830;
|
||||
-webkit-box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
|
||||
}
|
||||
#affliate-register-question .btn-delete {
|
||||
width: 48px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#affliate-register-question .btn-delete:hover {
|
||||
border-color: #F98715;
|
||||
background: rgba(249, 135, 21, 0.1);
|
||||
}
|
||||
#affliate-register-question .btn-submit {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background: #F98715;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
margin-top: 36px;
|
||||
text-transform: none;
|
||||
}
|
||||
#affliate-register-question .btn-submit:hover {
|
||||
background: #FF9830;
|
||||
-webkit-box-shadow: 0 6px 20px rgba(249, 135, 21, 0.4);
|
||||
box-shadow: 0 6px 20px rgba(249, 135, 21, 0.4);
|
||||
-webkit-transform: translateY(-2px);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
#affliate-register-question .btn-submit:active {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
#affliate-register-question .mixed-input-row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
gap: 130px;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
#affliate-register-question .mixed-input-row .checkbox-option {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#affliate-register-question .mixed-input-row .form-input {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#affliate-register-question .mixed-input-row {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
#affliate-register-question .mixed-input-row .checkbox-option,
|
||||
#affliate-register-question .mixed-input-row .form-input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#affliate-register-question .file-name {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin-top: 8px;
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .file-name.show {
|
||||
display: block;
|
||||
}
|
||||
#affliate-register-question .platform-box {
|
||||
max-width: 760px;
|
||||
}
|
||||
#affliate-register-question .platform-row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#affliate-register-question .platform-input-wrap {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
#affliate-register-question .platform-input {
|
||||
height: 48px;
|
||||
padding-left: 48px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#affliate-register-question .platform-input:focus {
|
||||
border-color: #ff8a00;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#affliate-register-question .platform-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
color: #aaa;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#affliate-register-question .platform-icon:hover {
|
||||
color: #ff8a00;
|
||||
}
|
||||
#affliate-register-question .platform-dropdown {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #121212;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 10px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .platform-search {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
}
|
||||
#affliate-register-question .platform-search-input {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#affliate-register-question .platform-list {
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
}
|
||||
#affliate-register-question .platform-item {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#affliate-register-question .platform-item i {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
#affliate-register-question .platform-item:hover {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
#affliate-register-question .platform-item.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
#affliate-register-question .platform-empty {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .btn-attach {
|
||||
height: 40px;
|
||||
background: #ff8a00;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#affliate-register-question .btn-attach.attached {
|
||||
background: #2ecc71;
|
||||
}
|
||||
#affliate-register-question .file-input {
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .upload-progress {
|
||||
width: 120px;
|
||||
height: 6px;
|
||||
background: #2a2a2a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
#affliate-register-question .upload-bar {
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: #ff8a00;
|
||||
}
|
||||
#affliate-register-question .btn-delete {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #777;
|
||||
font-size: 18px;
|
||||
}
|
||||
#affliate-register-question .btn-delete:hover {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
#affliate-register-question .add-platform {
|
||||
color: #ff8a00;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#questionnaireModalStep1.modal-overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.question-section.has-error {
|
||||
border-left: 3px solid var(--aifo-orange);
|
||||
}
|
||||
|
||||
.error-focus {
|
||||
-webkit-animation: errorPulse 1.2s ease;
|
||||
animation: errorPulse 1.2s ease;
|
||||
}
|
||||
|
||||
@-webkit-keyframes errorPulse {
|
||||
0% {
|
||||
background: rgba(255, 77, 79, 0.15);
|
||||
}
|
||||
100% {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes errorPulse {
|
||||
0% {
|
||||
background: rgba(255, 77, 79, 0.15);
|
||||
}
|
||||
100% {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,385 @@
|
||||
/* Special Offer 50% — from temp/优惠页 (Figma export) */
|
||||
|
||||
#special-offer-50 {
|
||||
--so-bg: #080808;
|
||||
--so-bg-2: #0d0d0d;
|
||||
--so-accent: #f98715;
|
||||
--so-accent-dark: #c96a0f;
|
||||
--so-text: #fff;
|
||||
--so-muted: rgba(255, 255, 255, 0.65);
|
||||
--so-muted-soft: rgba(255, 255, 255, 0.45);
|
||||
--so-line: rgba(255, 255, 255, 0.08);
|
||||
--so-container: 1140px;
|
||||
--so-btn-py: 12px;
|
||||
--so-btn-px: 28px;
|
||||
--so-btn-font-size: 0.95rem;
|
||||
--so-btn-radius: 8px;
|
||||
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);
|
||||
margin: 0 auto;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#special-offer-50 .so-container {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#special-offer-50 .so-accent {
|
||||
color: var(--so-accent);
|
||||
}
|
||||
|
||||
#special-offer-50 .so-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: var(--so-btn-radius);
|
||||
padding: var(--so-btn-py) var(--so-btn-px);
|
||||
font-size: var(--so-btn-font-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.03em;
|
||||
color: #fff;
|
||||
background: #F98715;
|
||||
box-shadow: 0 4px 20px rgba(249, 135, 21, 0.4);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-btn:hover,
|
||||
#special-offer-50 .so-btn:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
background-color: #F9A215 !important;
|
||||
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||||
}
|
||||
|
||||
#special-offer-50 .so-btn--lg {
|
||||
padding: 14px 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-note {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
#special-offer-50 .so-hero {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 72px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 96px 0 60px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#special-offer-50 .so-hero__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#special-offer-50 .so-hero__inner {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__content {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__lead {
|
||||
margin: 0 0 28px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__note {
|
||||
margin-top: 24px;
|
||||
max-width: 434px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Welcome */
|
||||
#special-offer-50 .so-welcome {
|
||||
position: relative;
|
||||
padding: 80px 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-welcome__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc((100% - 100vw) / 2);
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
transform: translateY(-50%);
|
||||
width: min(82vw, 720px);
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: 100svh;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
background-image: url("../images/backgrounds/new-user-promo-welcome-side-glow.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
background-size: auto 100%;
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-welcome__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 844px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-section-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(1.8rem, 4vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-section-desc {
|
||||
margin: 0 0 36px;
|
||||
color: var(--so-muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 24px 28px;
|
||||
text-align: left;
|
||||
background-image: url(../images/backgrounds/new-user-offer-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 40px rgba(249, 135, 21, 0.1), inset 0 0 30px rgba(249, 135, 21, 0.04);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#special-offer-50 .so-promo-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__eyebrow {
|
||||
margin: 0 0 6px;
|
||||
color: #fff;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__value {
|
||||
margin: 0 0 4px;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--so-accent);
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__sub {
|
||||
margin: 0;
|
||||
color: #fefefe;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#special-offer-50 .so-promo-card__code-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__code-wrap > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__code-wrap .so-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__code-label {
|
||||
margin: 0 0 4px;
|
||||
color: #fefefe;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.05em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-promo-card__code {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: var(--so-btn-py) var(--so-btn-px);
|
||||
border-radius: var(--so-btn-radius);
|
||||
background-color: transparent;
|
||||
background-image: url(../images/promotion/20260615-161150.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
font-size: var(--so-btn-font-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-welcome__note {
|
||||
text-align: center;
|
||||
font-size: 0.68rem;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
#special-offer-50 #how-to-claim-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#special-offer-50 {
|
||||
padding-top: 72px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__content {
|
||||
text-align: center;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
grid-template-areas:
|
||||
"hero-title"
|
||||
"hero-lead"
|
||||
"hero-visual"
|
||||
"hero-cta"
|
||||
"hero-note";
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__title {
|
||||
grid-area: hero-title;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__lead {
|
||||
grid-area: hero-lead;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__visual {
|
||||
grid-area: hero-visual;
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
max-width: min(300px, 76vw);
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__content > .so-btn {
|
||||
grid-area: hero-cta;
|
||||
}
|
||||
|
||||
#special-offer-50 .so-hero__note {
|
||||
grid-area: hero-note;
|
||||
}
|
||||
|
||||
#special-offer-50::before {
|
||||
padding-top: 72px;
|
||||
top: 72px
|
||||
}
|
||||
#special-offer-50 .so-hero {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
padding: 26px 0 0px;
|
||||
}
|
||||
#special-offer-50 .so-promo-card {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,253 @@
|
||||
/* ============================================
|
||||
Inter font family - CSS font definition file
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Font description:
|
||||
* All font files are stored in font/Inter directory
|
||||
*
|
||||
* Font weight mapping:
|
||||
* 100 - Thin
|
||||
* 200 - ExtraLight
|
||||
* 300 - Light
|
||||
* 400 - Regular (Normal)
|
||||
* 500 - Medium
|
||||
* 600 - SemiBold
|
||||
* 700 - Bold
|
||||
* 800 - ExtraBold
|
||||
* 900 - Black
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------
|
||||
1. Define Inter static fonts
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Thin (weight: 100) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Thin-11.otf') format('opentype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* ExtraLight (weight: 200) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-ExtraLight-6.otf') format('opentype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* Light (weight: 300) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Light-7.otf') format('opentype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* Regular (weight: 400) - default weight */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Regular-9.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* Medium (weight: 500) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Medium-8.otf') format('opentype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* SemiBold (weight: 600) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-SemiBold-10.otf') format('opentype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* Bold (weight: 700) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Bold-4.otf') format('opentype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* ExtraBold (weight: 800) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-ExtraBold-5.otf') format('opentype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* Black (weight: 900) */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./font/Inter/Inter-Black-3.otf') format('opentype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
2. Define Inter variable font (Variable Font)
|
||||
-------------------------------------------------- */
|
||||
@font-face {
|
||||
font-family: 'Inter Variable';
|
||||
src: url('./font/Inter/Inter-var-2.ttf') format('truetype');
|
||||
font-weight: 100 900; /* Variable weight range */
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-stretch: 75% 100%; /* Variable width range */
|
||||
font-variation-settings: 'wght' 400; /* Default weight */
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
3. Define italic fonts (if needed, can be added based on actual files)
|
||||
-------------------------------------------------- */
|
||||
/*
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../font/Inter/Inter-Italic.otf') format('opentype');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
|
||||
/* --------------------------------------------------
|
||||
4. 实用工具类和全局样式
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Inter 字体族类 */
|
||||
.font-inter {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.font-inter-variable {
|
||||
font-family: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* 字重实用类 */
|
||||
.font-weight-thin { font-weight: 100 !important; }
|
||||
.font-weight-extralight { font-weight: 200 !important; }
|
||||
.font-weight-light { font-weight: 300 !important; }
|
||||
.font-weight-normal { font-weight: 400 !important; }
|
||||
.font-weight-medium { font-weight: 500 !important; }
|
||||
.font-weight-semibold { font-weight: 600 !important; }
|
||||
.font-weight-bold { font-weight: 700 !important; }
|
||||
.font-weight-extrabold { font-weight: 800 !important; }
|
||||
.font-weight-black { font-weight: 900 !important; }
|
||||
|
||||
/* 字体平滑处理 */
|
||||
.font-smooth {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 可变字体工具类 */
|
||||
.font-variable-wght {
|
||||
font-family: 'Inter Variable', sans-serif;
|
||||
font-variation-settings: 'wght' var(--font-weight, 400);
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
5. 响应式字体设置示例
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* 基础字体设置 */
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* 标题字重示例 */
|
||||
h1, .h1 { font-weight: 900; } /* Black */
|
||||
h2, .h2 { font-weight: 800; } /* ExtraBold */
|
||||
h3, .h3 { font-weight: 700; } /* Bold */
|
||||
h4, .h4 { font-weight: 600; } /* SemiBold */
|
||||
h5, .h5 { font-weight: 500; } /* Medium */
|
||||
h6, .h6 { font-weight: 400; } /* Regular */
|
||||
|
||||
/* 小屏幕标题调整 */
|
||||
@media (max-width: 768px) {
|
||||
h1, .h1 { font-weight: 800; }
|
||||
h2, .h2 { font-weight: 700; }
|
||||
h3, .h3 { font-weight: 600; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
6. 变量字体动画示例（可选）
|
||||
-------------------------------------------------- */
|
||||
.variable-font-animation {
|
||||
font-family: 'Inter Variable', sans-serif;
|
||||
transition: font-variation-settings 0.3s ease;
|
||||
}
|
||||
|
||||
.variable-font-animation:hover {
|
||||
font-variation-settings: 'wght' 700;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
7. 打印样式优化
|
||||
-------------------------------------------------- */
|
||||
@media print {
|
||||
.font-inter,
|
||||
.font-inter-variable,
|
||||
body {
|
||||
font-family: 'Inter', 'Times New Roman', serif;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
8. 高对比度模式支持
|
||||
-------------------------------------------------- */
|
||||
@media (prefers-contrast: high) {
|
||||
body {
|
||||
font-weight: 500; /* 中等字重，提高可读性 */
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
9. 性能优化提示
|
||||
-------------------------------------------------- */
|
||||
/*
|
||||
使用建议：
|
||||
1. 在HTML头部预加载关键字体：
|
||||
<link rel="preload" href="font/Inter/Inter-Regular-9.otf" as="font" type="font/otf" crossorigin>
|
||||
|
||||
2. 对于可变字体，可以只加载 Inter-var-2.ttf 文件，
|
||||
它包含了所有字重，文件大小可能比多个静态字体文件更小
|
||||
|
||||
3. 如果不需要所有字重，可以只引入需要的字体变体
|
||||
*/
|
||||
+15495
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user