commit 20260703
This commit is contained in:
+326
-236
@@ -36,44 +36,7 @@
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ── Buttons ── */
|
||||
#about-us-2 .au2-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 16px 32px;
|
||||
min-height: 52px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.16px;
|
||||
color: var(--text-main);
|
||||
background: var(--primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-btn:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: inset 0 5px 10px rgba(249, 135, 21, 0.6), 0 5px 10px rgba(249, 135, 21, 0.6);
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-btn--outline {
|
||||
background: rgba(15, 15, 15, 0.5);
|
||||
border: 0.657px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-btn--outline:hover {
|
||||
background: rgba(249, 135, 21, 0.08);
|
||||
border-color: var(--primary);
|
||||
box-shadow: none;
|
||||
}
|
||||
/* Buttons: see assets/css/aifo-btn.css */
|
||||
|
||||
/* ── Shared typography ── */
|
||||
#about-us-2 .au2-label {
|
||||
@@ -81,7 +44,6 @@
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@@ -116,7 +78,7 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 72px 0 64px;
|
||||
padding: 120px 0 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -135,7 +97,7 @@
|
||||
#about-us-2 .au2-hero__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 720px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-hero__title {
|
||||
@@ -148,7 +110,7 @@
|
||||
|
||||
#about-us-2 .au2-hero__desc {
|
||||
margin: 0 auto 32px;
|
||||
max-width: 620px;
|
||||
max-width: 975px;
|
||||
font-size: clamp(16px, 2.2vw, 20px);
|
||||
line-height: 1.55;
|
||||
font-weight: 400;
|
||||
@@ -173,7 +135,7 @@
|
||||
|
||||
#about-us-2 .au2-intro__title {
|
||||
margin: 0 0 20px;
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.4px;
|
||||
@@ -186,6 +148,13 @@
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#about-us-2 .au2-intro__text-item {
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-intro__visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -197,38 +166,39 @@
|
||||
|
||||
/* ── Stats ── */
|
||||
#about-us-2 .au2-stats {
|
||||
padding: 0 0 72px;
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
padding: 40px 24px;
|
||||
border-radius: 16px;
|
||||
background: url("../images/backgrounds/bg_key_states.png") center / 100% 100% no-repeat;
|
||||
border: 0.5px solid rgba(152, 151, 149, 0.22);
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__item {
|
||||
position: relative;
|
||||
#about-us-2 .au2-stats__title {
|
||||
margin: 0 0 40px;
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.4px;
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__item:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.13);
|
||||
#about-us-2 .au2-stats__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 140px;
|
||||
padding: 40px 20px;
|
||||
border-radius: 14px;
|
||||
background: #1c1c1e;
|
||||
border: 0.5px solid rgba(152, 151, 149, 0.18);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__value {
|
||||
margin: 0 0 6px;
|
||||
margin: 0 0 8px;
|
||||
font-size: clamp(24px, 3vw, 34px);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
@@ -237,212 +207,353 @@
|
||||
|
||||
#about-us-2 .au2-stats__label {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
/* ── CTA Banner ── */
|
||||
/* ── CTA Banner (Serena / Figma export) ── */
|
||||
#about-us-2 .au2-cta {
|
||||
position: relative;
|
||||
margin: 0 0 72px;
|
||||
padding: 64px 32px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
border: 0.5px solid rgba(152, 151, 149, 0.22);
|
||||
background: rgba(12, 12, 12, 0.85);
|
||||
padding: 70px 0 70px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__glow {
|
||||
#about-us-2 .au2-cta__panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 0.5px solid rgba(102, 102, 102, 0.5);
|
||||
background: #0e0e0e url('../images/demo/about/rd_bg.png') center / cover no-repeat;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__top-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: -13px;
|
||||
left: 50%;
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(ellipse at center, rgba(249, 135, 21, 0.3) 0%, transparent 70%);
|
||||
width: min(90%, 440px);
|
||||
height: 26px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: #f9a215;
|
||||
opacity: 0.4;
|
||||
filter: blur(40px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#about-us-2 .au2-cta__inner {
|
||||
padding: 40px 65px;
|
||||
}
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__desc {
|
||||
margin: 0 0 28px;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
max-width: 1000px;
|
||||
font-size: clamp(16px, 2.2vw, 24px);
|
||||
line-height: 1.35;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.24px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta .aifo-btn {
|
||||
min-width: 225px;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* ── Core Values ── */
|
||||
#about-us-2 .au2-values {
|
||||
padding: 0 0 72px;
|
||||
position: relative;
|
||||
padding: 40px 0 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-values__glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 120%;
|
||||
height: 500px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: #f9a215;
|
||||
opacity: 0.25;
|
||||
filter: blur(180px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-values__title {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0 0 40px;
|
||||
font-size: clamp(36px, 6vw, 75px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.75px;
|
||||
text-align: center;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-values__grid {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-top: 48px;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#about-us-2 .au2-values__grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card {
|
||||
padding: 32px 28px;
|
||||
border-radius: 16px;
|
||||
border: 0.5px solid rgba(152, 151, 149, 0.35);
|
||||
background: var(--bg-card);
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
overflow: hidden;
|
||||
padding: 60px 28px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: #231f20 url('../images/demo/about/od_bg.png') center / 100% 100% no-repeat;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card:hover {
|
||||
border-color: rgba(249, 135, 21, 0.4);
|
||||
box-shadow: 0 8px 32px rgba(249, 135, 21, 0.08);
|
||||
#about-us-2 .au2-value-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 50%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
background: #f98715;
|
||||
opacity: 0.12;
|
||||
filter: blur(70px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card__icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
background: rgba(249, 135, 21, 0.1);
|
||||
width: 87px;
|
||||
height: 89px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card__icon img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.2px;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card__text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.43;
|
||||
letter-spacing: -0.14px;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
/* ── Testimonials ── */
|
||||
#about-us-2 .au2-testimonials {
|
||||
padding: 0 0 72px;
|
||||
padding: 40px 0 80px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
#about-us-2 .au2-testimonials__title {
|
||||
margin: 0 0 24px;
|
||||
font-size: clamp(32px, 5vw, 48px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.48px;
|
||||
text-align: center;
|
||||
color: #f9f9f9;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__desc {
|
||||
margin: 0 auto 40px;
|
||||
max-width: 680px;
|
||||
font-size: clamp(16px, 2.2vw, 20px);
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__marquee {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
margin-left: calc(50% - 50vw);
|
||||
overflow: hidden;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__track {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 16px;
|
||||
padding: 0 8px;
|
||||
animation: au2-marquee-x var(--duration, 125s) linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__track--reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__marquee:hover .au2-testimonials__track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@keyframes au2-marquee-x {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 96px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__fade--left {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, var(--bg-page, #070400) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__fade--right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, var(--bg-page, #070400) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial {
|
||||
padding: 24px;
|
||||
border-radius: 15px;
|
||||
border: 0.5px solid var(--border-muted);
|
||||
background: var(--bg-card);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
flex-shrink: 0;
|
||||
width: min(360px, 85vw);
|
||||
min-height: 160px;
|
||||
padding: 24px 16px;
|
||||
border-radius: 16px;
|
||||
background: #231f20;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial--wide {
|
||||
grid-column: span 2;
|
||||
@media (min-width: 640px) {
|
||||
#about-us-2 .au2-testimonial {
|
||||
width: min(500px, 42vw);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#about-us-2 .au2-testimonials__track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial__flag.fi {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
#about-us-2 .au2-testimonial__avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background-size: cover;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: #f98715;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial__name {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial__meta {
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.2px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial__quote {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
font-weight: 300;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── Support ── */
|
||||
#about-us-2 .au2-support {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
padding: 48px 0 0;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__title {
|
||||
margin: 0 0 16px;
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__desc {
|
||||
margin: 0 0 28px;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__visual img {
|
||||
display: block;
|
||||
width: min(100%, 360px);
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0 40px rgba(249, 135, 21, 0.35));
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.17;
|
||||
letter-spacing: 0.24px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@@ -456,39 +567,9 @@
|
||||
order: -1;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__bar {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 32px 16px;
|
||||
background-image: url("../images/backgrounds/bg_key_states_mb.png");
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__item:nth-child(2)::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__item:nth-child(odd):not(:last-child)::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-values__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonials__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-testimonial--wide {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-support__actions {
|
||||
justify-content: center;
|
||||
#about-us-2 .au2-stats__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -504,32 +585,41 @@
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-hero__actions,
|
||||
#about-us-2 .au2-support__actions {
|
||||
#about-us-2 .au2-hero__actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-btn {
|
||||
#about-us-2 .au2-hero__actions .aifo-btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__bar {
|
||||
padding: 32px 16px;
|
||||
#about-us-2 .au2-stats__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-stats__item::after {
|
||||
display: none !important;
|
||||
#about-us-2 .au2-stats__card {
|
||||
min-height: 120px;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta {
|
||||
padding: 48px 20px;
|
||||
margin-bottom: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-cta__inner {
|
||||
gap: 24px;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-values,
|
||||
#about-us-2 .au2-testimonials {
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
#about-us-2 .au2-value-card {
|
||||
padding: 40px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
/**
|
||||
* AIFO universal CTA buttons (V2 pages).
|
||||
*
|
||||
* Usage:
|
||||
* <a href="#" class="aifo-btn aifo-btn--primary aifo-btn--arrow">Join AIFO</a>
|
||||
* <a href="#" class="aifo-btn aifo-btn--outline">Begin Learning</a>
|
||||
*
|
||||
* Modifiers:
|
||||
* --primary / --outline visual style
|
||||
* --arrow right arrow (design default for primary CTAs)
|
||||
* --sm smaller padding
|
||||
*
|
||||
* Arrow is optional — only add --arrow when the design shows it.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--aifo-btn-primary: #f98715;
|
||||
--aifo-btn-primary-hover: #f9a215;
|
||||
--aifo-btn-text: #f9f9f9;
|
||||
--aifo-btn-radius: 10px;
|
||||
--aifo-btn-gap: 8px;
|
||||
}
|
||||
|
||||
.aifo-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--aifo-btn-gap);
|
||||
border: none;
|
||||
border-radius: var(--aifo-btn-radius);
|
||||
padding: 16px 32px;
|
||||
min-height: 52px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.16px;
|
||||
line-height: 1;
|
||||
color: var(--aifo-btn-text);
|
||||
background: var(--aifo-btn-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.aifo-btn:hover,
|
||||
.aifo-btn:focus-visible {
|
||||
background: var(--aifo-btn-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(--aifo-btn-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.aifo-btn--primary {
|
||||
/* default .aifo-btn appearance */
|
||||
}
|
||||
|
||||
.aifo-btn--outline {
|
||||
background: rgba(15, 15, 15, 0.5);
|
||||
border: 0.657px solid #666;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.aifo-btn--outline:hover,
|
||||
.aifo-btn--outline:focus-visible {
|
||||
background: rgba(249, 135, 21, 0.08);
|
||||
border-color: var(--aifo-btn-primary);
|
||||
box-shadow: none;
|
||||
color: var(--aifo-btn-text);
|
||||
}
|
||||
|
||||
.aifo-btn--sm {
|
||||
padding: 12px 24px;
|
||||
min-height: 44px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Right arrow — same stroke as home-hero-carousel / Figma */
|
||||
.aifo-btn--arrow::after {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
|
||||
mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.aifo-btn--arrow:hover::after,
|
||||
.aifo-btn--arrow:focus-visible::after {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
/* Optional: explicit child icon (when ::after is not enough, e.g. <button> quirks) */
|
||||
.aifo-btn__arrow {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.aifo-btn__arrow svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.aifo-btn:hover .aifo-btn__arrow,
|
||||
.aifo-btn:focus-visible .aifo-btn__arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.aifo-btn--arrow:has(.aifo-btn__arrow)::after {
|
||||
content: none;
|
||||
}
|
||||
+29
-29
@@ -1597,6 +1597,11 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#homepage #block-1 {
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -1617,14 +1622,29 @@
|
||||
--hero-nav-gap: 76px;
|
||||
--hero-coach-dots-gap: 35px;
|
||||
--hero-dots-height: 10px;
|
||||
/* left column: badge top → AI Coach bottom */
|
||||
--hero-slide1-content-height: 486px;
|
||||
/* viewport height (fits right visual + left column) */
|
||||
--hero-slide1-viewport-height: 580px;
|
||||
/* measured by home-hero-carousel.js from data-hero-layout-reference slide */
|
||||
--hero-reference-content-bottom-fallback: 486px;
|
||||
--hero-reference-viewport-height-fallback: calc(
|
||||
var(--hero-reference-content-bottom-fallback) + var(--hero-coach-dots-gap)
|
||||
);
|
||||
--hero-reference-dots-top-fallback: calc(
|
||||
var(--hero-nav-gap) + var(--hero-reference-content-bottom-fallback) + var(--hero-coach-dots-gap)
|
||||
);
|
||||
--hero-inner-padding-bottom: 40px;
|
||||
--hero-inner-max-width: 1280px;
|
||||
--hero-content-max-width: 680px;
|
||||
--hero-visual-image-scale: 1.06;
|
||||
--hero-mobile-visual-dots-gap: 24px;
|
||||
--hero-mobile-fixed-dots-bottom: 16px;
|
||||
/* slide top → dots top (visual vertical zone) */
|
||||
--hero-visual-zone-height: var(
|
||||
--hero-reference-viewport-height,
|
||||
var(--hero-reference-viewport-height-fallback)
|
||||
);
|
||||
/* Mobile: arc ~30px below dots (height-limited cover) */
|
||||
--hero-arc-gap: 30px;
|
||||
--hero-dots-y: calc(48px + 720px + 56px - 32px + 10px);
|
||||
--hero-bg-height-adjust: -120px;
|
||||
--hero-dots-y: calc(48px + 720px + 56px - 32px + var(--hero-dots-height));
|
||||
}
|
||||
|
||||
#homepage .hero-bg {
|
||||
@@ -1636,6 +1656,7 @@
|
||||
height: calc(
|
||||
(var(--hero-dots-y) + var(--hero-arc-gap)) * var(--hero-img-height)
|
||||
/ (var(--hero-img-height) - var(--hero-img-arc-offset))
|
||||
+ var(--hero-bg-height-adjust, 0px)
|
||||
);
|
||||
object-fit: cover;
|
||||
object-position: center bottom;
|
||||
@@ -1647,7 +1668,7 @@
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
#homepage {
|
||||
--hero-dots-y: calc(80px + 720px + 64px - 40px + 10px);
|
||||
--hero-dots-y: calc(76px + 720px + 64px - 40px + var(--hero-dots-height));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1656,8 +1677,8 @@
|
||||
--hero-arc-gap: 8px;
|
||||
--hero-bg-height-adjust: -15px;
|
||||
--hero-dots-y: calc(
|
||||
var(--hero-nav-gap) + var(--hero-slide1-content-height)
|
||||
+ var(--hero-coach-dots-gap) + var(--hero-dots-height)
|
||||
var(--hero-reference-dots-top, var(--hero-reference-dots-top-fallback))
|
||||
+ var(--hero-dots-height)
|
||||
+ var(--hero-inner-padding-bottom)
|
||||
);
|
||||
}
|
||||
@@ -1687,17 +1708,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#block-1 .hero-buttons {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#block-1 #section-2 {
|
||||
padding-top: 0r !important;
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
width: 100%;
|
||||
padding: top;
|
||||
}
|
||||
|
||||
#section-5 table tbody tr:first {
|
||||
background: #000;
|
||||
}
|
||||
@@ -1977,12 +1987,6 @@
|
||||
}
|
||||
/* section-2 end */
|
||||
/* home page */
|
||||
#homepage #block-1 {
|
||||
height: unset;
|
||||
}
|
||||
#homepage #block-1 .hero-buttons {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
#homepage #block-1 #section-3 .slice-lg {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 3.5rem;
|
||||
@@ -5721,10 +5725,6 @@
|
||||
|
||||
@media(max-width:768px){
|
||||
.banner-desc br,#block-1{height:62.9375rem;position:relative;min-height:42vh;min-height:42svh}
|
||||
#homepage #block-1{
|
||||
height:auto;
|
||||
min-height:0;
|
||||
}
|
||||
.funded-trading-hero .d-flex .img-fluid-r{right:-13px}
|
||||
.hero-img{top:7px}
|
||||
.funded-trading-hero .d-flex .img-fluid-l{left:-3px}
|
||||
|
||||
@@ -1,42 +1,28 @@
|
||||
/**
|
||||
* Home hero carousel — scoped to #section-1.home-hero-carousel
|
||||
* Source: Serena/Figma HeroCarousel.tsx (autoplay 5s, fade, pill dots)
|
||||
*
|
||||
* Layout extension (see js/home-hero-carousel.js):
|
||||
* data-hero-layout-reference — slide that sets carousel height
|
||||
* data-hero-layout-anchor — bottom edge used for dots (gap: --hero-coach-dots-gap)
|
||||
* JS sets --hero-reference-* on #homepage or carousel root; CSS fallbacks apply before measure
|
||||
* Mobile: .is-banner-active pins dots to viewport bottom while banner is in view
|
||||
*/
|
||||
#homepage #section-1.home-hero-carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
--hero-inner-padding-bottom: 40px;
|
||||
}
|
||||
|
||||
/* #homepage .home-hero-carousel__glow {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -120px;
|
||||
left: 50%;
|
||||
width: 140%;
|
||||
max-width: 1600px;
|
||||
height: 700px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#f7931e 0%,
|
||||
#88510f 18%,
|
||||
#2b1905 40%,
|
||||
transparent 70%
|
||||
);
|
||||
} */
|
||||
|
||||
#homepage .home-hero-carousel__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1128px;
|
||||
max-width: var(--hero-inner-max-width, 1280px);
|
||||
margin: 0 auto;
|
||||
padding: 48px 20px 56px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -50,8 +36,8 @@
|
||||
padding: var(--hero-nav-gap) 32px
|
||||
calc(var(--hero-coach-dots-gap) + var(--hero-dots-height) + var(--hero-inner-padding-bottom));
|
||||
min-height: calc(
|
||||
var(--hero-nav-gap) + var(--hero-slide1-viewport-height)
|
||||
+ var(--hero-coach-dots-gap) + var(--hero-dots-height)
|
||||
var(--hero-reference-dots-top, var(--hero-reference-dots-top-fallback))
|
||||
+ var(--hero-dots-height)
|
||||
+ var(--hero-inner-padding-bottom)
|
||||
);
|
||||
}
|
||||
@@ -59,14 +45,16 @@
|
||||
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 720px;
|
||||
overflow: visible;
|
||||
height: var(--hero-reference-viewport-height, 720px);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
height: var(--hero-slide1-viewport-height);
|
||||
overflow: hidden;
|
||||
height: var(
|
||||
--hero-reference-viewport-height,
|
||||
var(--hero-reference-viewport-height-fallback)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,14 +62,47 @@
|
||||
#homepage .home-hero-carousel__viewport {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__inner {
|
||||
padding-bottom: calc(
|
||||
var(--hero-mobile-dots-reserve, 26px) + var(--hero-inner-padding-bottom, 40px)
|
||||
);
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__dots {
|
||||
top: auto;
|
||||
bottom: calc(
|
||||
var(--hero-mobile-fixed-dots-bottom, 16px) + var(--hero-inner-padding-bottom, 40px)
|
||||
);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel.is-banner-active .home-hero-carousel__dots {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: auto;
|
||||
bottom: calc(
|
||||
var(--hero-mobile-fixed-dots-bottom, 16px) + env(safe-area-inset-bottom, 0px)
|
||||
);
|
||||
z-index: 20;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel.is-banner-active .home-hero-carousel__dots::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
bottom: calc(-1 * var(--hero-mobile-fixed-dots-bottom, 16px) - env(safe-area-inset-bottom, 0px));
|
||||
height: 72px;
|
||||
background: linear-gradient(to top, rgba(5, 3, 2, 0.75), transparent);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
@@ -104,15 +125,11 @@
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__slide {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide-grid {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 48px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, var(--hero-content-max-width, 680px)) minmax(0, 1fr);
|
||||
column-gap: 48px;
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -120,6 +137,7 @@
|
||||
#homepage .home-hero-carousel__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
@@ -130,6 +148,15 @@
|
||||
#homepage .home-hero-carousel__content {
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__title {
|
||||
font-size: 54px;
|
||||
line-height: 1.1;
|
||||
max-width: var(--hero-content-max-width, 680px);
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,21 +219,42 @@
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
@media (max-width: 991.98px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) and (max-width: 991.98px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 12px;
|
||||
row-gap: 14px;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--primary {
|
||||
@@ -254,12 +302,39 @@
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__actions {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 12px;
|
||||
row-gap: 14px;
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--primary {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--ghost,
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__btn--ai-coach {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__actions .home-hero-carousel__ai-coach {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
width: auto;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn {
|
||||
@@ -284,9 +359,12 @@
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn--primary:hover {
|
||||
opacity: 0.9;
|
||||
/* opacity: 0.9; */
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background-color: #F9A215 !important;
|
||||
color: #fff !important;
|
||||
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn--ghost {
|
||||
@@ -316,12 +394,27 @@
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
/* Inline stroke icons — override theme.css svg { overflow: hidden } clipping */
|
||||
#homepage .home-hero-carousel__btn svg {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__btn svg path {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__visual img {
|
||||
@@ -330,11 +423,37 @@
|
||||
max-width: 440px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(1) .home-hero-carousel__visual img,
|
||||
#homepage .home-hero-carousel__slide:nth-child(2) .home-hero-carousel__visual img {
|
||||
transform: scale(var(--hero-visual-image-scale, 1.06));
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__visual img {
|
||||
#homepage .home-hero-carousel__visual {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: var(--hero-visual-zone-height);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(1) .home-hero-carousel__visual img,
|
||||
#homepage .home-hero-carousel__slide:nth-child(2) .home-hero-carousel__visual img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#homepage .home-hero-carousel__slide:nth-child(3) .home-hero-carousel__visual img {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: var(--hero-visual-zone-height);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -348,7 +467,6 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -361,13 +479,11 @@
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#homepage .home-hero-carousel__dots {
|
||||
top: calc(
|
||||
var(--hero-nav-gap) + var(--hero-slide1-content-height) + var(--hero-coach-dots-gap)
|
||||
top: var(
|
||||
--hero-reference-dots-top,
|
||||
var(--hero-reference-dots-top-fallback)
|
||||
);
|
||||
bottom: auto;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
margin-top: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* Support CTA floor — reusable module (Not found what you're looking for?)
|
||||
*
|
||||
* Usage:
|
||||
* <link href="../assets/css/modules/support-cta.css" rel="stylesheet">
|
||||
* <link href="../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
* <div id="support-cta-module"></div>
|
||||
* <script src="/js/support-cta-module.js"></script>
|
||||
*/
|
||||
|
||||
.aifo-support-cta {
|
||||
padding: 0 0 80px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: #0e0e0e;
|
||||
padding: 48px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.aifo-support-cta__panel {
|
||||
background: linear-gradient(165deg, #18130f 0%, #101010 48%, #0e0e0e 100%);
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::before,
|
||||
.aifo-support-cta__panel::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::before {
|
||||
top: -24px;
|
||||
left: 50%;
|
||||
width: min(92%, 320px);
|
||||
height: 48px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: #f9a215;
|
||||
opacity: 0.35;
|
||||
filter: blur(44px);
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel::after {
|
||||
top: 8px;
|
||||
right: -48px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: #f98715;
|
||||
opacity: 0.22;
|
||||
filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.aifo-support-cta__panel {
|
||||
padding: 48px 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-support-cta__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 605px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__title {
|
||||
margin: 0;
|
||||
font-size: clamp(28px, 4vw, 36px);
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.36px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.aifo-support-cta__desc {
|
||||
margin: 0;
|
||||
font-size: clamp(16px, 2.2vw, 24px);
|
||||
line-height: 1.35;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.24px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.aifo-support-cta .aifo-btn {
|
||||
min-width: 225px;
|
||||
border-radius: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn {
|
||||
background: #231f20;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn:hover,
|
||||
.aifo-support-cta__email-btn:focus-visible {
|
||||
background: #2a2627;
|
||||
}
|
||||
|
||||
.aifo-support-cta__arrow-icon {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.aifo-support-cta__email-btn:hover .aifo-support-cta__arrow-icon,
|
||||
.aifo-support-cta__email-btn:focus-visible .aifo-support-cta__arrow-icon {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.aifo-support-cta__visual {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.aifo-support-cta__visual {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.aifo-support-cta__img {
|
||||
display: block;
|
||||
width: 327px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.aifo-support-cta__panel {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.aifo-support-cta__content {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.aifo-support-cta {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aifo-support-cta__actions .aifo-btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.aifo-support-cta__panel {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
/**
|
||||
* AIFO main navigation (V2 design).
|
||||
* HTML: components/nav.html — loaded by js/layout.js
|
||||
* Replace placeholder icons: swap img[src] in .aifo-nav__icon, or add data-nav-icon assets later.
|
||||
*/
|
||||
|
||||
#nav.aifo-nav {
|
||||
--aifo-nav-text: #f9f9f9;
|
||||
--aifo-nav-muted: rgba(255, 255, 255, 0.6);
|
||||
--aifo-nav-divider: rgba(255, 255, 255, 0.2);
|
||||
/* Figma Partnership dropdown panel */
|
||||
--aifo-nav-dropdown-bg: #231f20;
|
||||
--aifo-nav-dropdown-border: rgba(255, 255, 255, 0.08);
|
||||
--aifo-nav-drop-hover: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.04) 0%,
|
||||
rgba(255, 255, 255, 0.02) 52%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
--aifo-nav-icon-box-border: rgba(255, 255, 255, 0.16);
|
||||
--aifo-nav-icon-box-border-hover: #353132;
|
||||
}
|
||||
|
||||
/* Desktop: logo | centered menu | right actions */
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .aifo-nav__collapse {
|
||||
display: flex !important;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu {
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__actions {
|
||||
flex-shrink: 0;
|
||||
gap: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-link {
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-link .icon-a-arrow-down {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.85;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-item.show .nav-link .icon-a-arrow-down,
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-item:hover .nav-link .icon-a-arrow-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Dropdown panel — Figma: FundingPrograms / Academy / Platform / Company */
|
||||
#nav.aifo-nav .aifo-nav__dropdown {
|
||||
background: var(--aifo-nav-dropdown-bg);
|
||||
border: 1px solid var(--aifo-nav-dropdown-border);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
min-width: 230px;
|
||||
margin-top: 12px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown.aifo-nav__dropdown--lang {
|
||||
min-width: 8rem;
|
||||
width: max-content;
|
||||
gap: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Desktop: bridge gap so submenu stays open when moving cursor down */
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .nav-item.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown {
|
||||
margin-top: 12px;
|
||||
transform: translateY(0) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .dropdown:hover > .aifo-nav__dropdown,
|
||||
#nav.aifo-nav .dropdown:focus-within > .aifo-nav__dropdown {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown .dropdown-item {
|
||||
padding: 0;
|
||||
margin: 0 !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown .dropdown-item + .dropdown-item {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
/* Figma hover: white row tint + blurred orange ellipse (84×13) behind icon */
|
||||
#nav.aifo-nav .aifo-nav__drop-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
color: #fff;
|
||||
font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
background: transparent;
|
||||
transition: background 0.22s ease;
|
||||
}
|
||||
|
||||
/* Ellipse 13 — left 23px, top -6px inside row; orange #F9A215 @ 40% + heavy blur */
|
||||
#nav.aifo-nav .aifo-nav__drop-item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 31px;
|
||||
top: 2px;
|
||||
z-index: 0;
|
||||
width: 84px;
|
||||
height: 13px;
|
||||
border-radius: 999px;
|
||||
background: #f9a215;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-12px) scale(2.8, 5.5);
|
||||
filter: blur(20px);
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse 95% 120% at 8% 50%,
|
||||
rgba(249, 135, 21, 0.1) 0%,
|
||||
rgba(249, 135, 21, 0.03) 42%,
|
||||
transparent 68%
|
||||
),
|
||||
var(--aifo-nav-drop-hover);
|
||||
transition: opacity 0.22s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item:hover,
|
||||
#nav.aifo-nav .aifo-nav__drop-item:focus-visible,
|
||||
#nav.aifo-nav .dropdown-item:hover .aifo-nav__drop-item,
|
||||
#nav.aifo-nav .dropdown-item.active .aifo-nav__drop-item,
|
||||
#nav.aifo-nav .dropdown-item:focus .aifo-nav__drop-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item:hover::before,
|
||||
#nav.aifo-nav .aifo-nav__drop-item:focus-visible::before,
|
||||
#nav.aifo-nav .dropdown-item:hover .aifo-nav__drop-item::before,
|
||||
#nav.aifo-nav .dropdown-item.active .aifo-nav__drop-item::before,
|
||||
#nav.aifo-nav .dropdown-item:focus .aifo-nav__drop-item::before {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item:hover::after,
|
||||
#nav.aifo-nav .aifo-nav__drop-item:focus-visible::after,
|
||||
#nav.aifo-nav .dropdown-item:hover .aifo-nav__drop-item::after,
|
||||
#nav.aifo-nav .dropdown-item.active .aifo-nav__drop-item::after,
|
||||
#nav.aifo-nav .dropdown-item:focus .aifo-nav__drop-item::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__drop-item:hover .aifo-nav__icon-box,
|
||||
#nav.aifo-nav .aifo-nav__drop-item:focus-visible .aifo-nav__icon-box,
|
||||
#nav.aifo-nav .dropdown-item:hover .aifo-nav__drop-item .aifo-nav__icon-box,
|
||||
#nav.aifo-nav .dropdown-item.active .aifo-nav__drop-item .aifo-nav__icon-box,
|
||||
#nav.aifo-nav .dropdown-item:focus .aifo-nav__drop-item .aifo-nav__icon-box {
|
||||
border-color: var(--aifo-nav-icon-box-border-hover);
|
||||
}
|
||||
|
||||
/* Figma icon container: 38×38, radius 9.5, border 1.188px */
|
||||
#nav.aifo-nav .aifo-nav__icon-box {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 9.5px;
|
||||
background: #231f20;
|
||||
border: 1.188px solid var(--aifo-nav-icon-box-border);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__icon-box .iconfont {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: #f98715;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__icon img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* Lang submenu — match online switch-lang (compact, flag + code) */
|
||||
#nav.aifo-nav .aifo-nav__dropdown--lang .dropdown-item {
|
||||
padding: 1px 0;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__lang-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 9px;
|
||||
border-radius: 6px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown--lang .dropdown-item:hover .aifo-nav__lang-item {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .aifo-nav__dropdown--lang .aifo-nav__lang-item {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Right actions */
|
||||
#nav.aifo-nav .aifo-nav__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__lang .nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 300;
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__actions .fi {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
margin-right: 0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
vertical-align: middle;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .dropdown-menu .dropdown-item:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .aifo-nav__lang > .aifo-nav__dropdown {
|
||||
left: 0;
|
||||
right: auto;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__divider {
|
||||
display: none;
|
||||
width: 1px;
|
||||
height: 1rem;
|
||||
background: var(--aifo-nav-divider);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#nav.aifo-nav .aifo-nav__divider {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login {
|
||||
color: var(--aifo-nav-text);
|
||||
font-size: 1.2rem;
|
||||
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem 0;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login:hover,
|
||||
#nav.aifo-nav .aifo-nav__login:focus {
|
||||
color: #f98715;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Nav CTA — 42px height to match bar proportions */
|
||||
#nav.aifo-nav .aifo-nav__cta {
|
||||
padding: 0 1.25rem;
|
||||
min-height: 42px;
|
||||
height: 42px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Mobile offcanvas */
|
||||
@media (max-width: 991.98px) {
|
||||
#nav.aifo-nav .aifo-nav__menu .nav-link {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--aifo-nav-divider);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__divider {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__cta {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__login {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
#nav.aifo-nav .aifo-nav__dropdown {
|
||||
position: static !important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 0.25rem;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: rgba(35, 31, 32, 0.95);
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
+378
-310
@@ -1,15 +1,17 @@
|
||||
/**
|
||||
* Partnership page — from Figma AIFO V2 (node 11533:26942).
|
||||
* Partnership page — from Figma export (Serena/Partnership).
|
||||
*/
|
||||
#partnership-page {
|
||||
--primary: #f98715;
|
||||
--primary-hover: #f9a215;
|
||||
--bg-page: #070400;
|
||||
--bg-card: #0e0e0e;
|
||||
--border-muted: rgba(152, 151, 149, 0.5);
|
||||
--bg-card: #231f20;
|
||||
--text-main: #f9f9f9;
|
||||
--text-muted: #909090;
|
||||
--aifo-page-bg-height: 805px;
|
||||
--text-secondary: #ccc;
|
||||
--text-muted: #666;
|
||||
--fit-green: #27d449;
|
||||
--not-fit-red: #ee531b;
|
||||
--aifo-page-bg-height: 900px;
|
||||
--aifo-page-content-offset: 1.375rem;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-main);
|
||||
@@ -18,7 +20,7 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#partnership-page {
|
||||
--aifo-page-bg-height: 445px;
|
||||
--aifo-page-bg-height: 520px;
|
||||
--aifo-page-content-offset: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -26,170 +28,214 @@
|
||||
#partnership-page .partnership-page {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1140px;
|
||||
max-width: 1128px;
|
||||
margin: 0 auto;
|
||||
padding: 0 18px 80px;
|
||||
padding: 0 20px 80px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-page {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-page__glow {
|
||||
position: absolute;
|
||||
top: -200px;
|
||||
left: 50%;
|
||||
width: 110%;
|
||||
max-width: 1100px;
|
||||
height: 560px;
|
||||
border-radius: 50%;
|
||||
background: #f9a215;
|
||||
opacity: 0.4;
|
||||
filter: blur(170px);
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#partnership-page .text-orange {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* ── Section title ── */
|
||||
#partnership-page .partnership-section__title {
|
||||
margin: 0 0 40px;
|
||||
text-align: center;
|
||||
font-size: clamp(40px, 5.5vw, 75px);
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-section__title {
|
||||
line-height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Hero ── */
|
||||
#partnership-page .partnership-hero {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
padding: 64px 0 48px;
|
||||
text-align: center;
|
||||
padding: 48px 0 24px;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-hero {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 32px;
|
||||
padding-top: 96px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-hero__title {
|
||||
margin: 0 0 20px;
|
||||
font-size: clamp(36px, 5vw, 60px);
|
||||
line-height: 1.15;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.6px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-hero__desc {
|
||||
margin: 0 0 32px;
|
||||
max-width: 620px;
|
||||
font-size: clamp(16px, 2.2vw, 20px);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 220px;
|
||||
padding: 15px 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
background: var(--primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-btn:hover {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: inset 0 5px 10px rgba(249, 135, 21, 0.6), 0 5px 10px rgba(249, 135, 21, 0.6);
|
||||
color: var(--text-main);
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
max-width: 720px;
|
||||
font-size: clamp(18px, 2.2vw, 20px);
|
||||
line-height: 1.4;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Sections ── */
|
||||
#partnership-page .partnership-section {
|
||||
padding: 56px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 48px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-section {
|
||||
padding: 72px 0;
|
||||
padding: 64px 0;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section__title {
|
||||
margin: 0 0 40px;
|
||||
font-size: clamp(32px, 4.5vw, 60px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.6px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section__title--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Commission tiers ── */
|
||||
#partnership-page .partnership-tiers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-tiers {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier {
|
||||
position: relative;
|
||||
min-height: 220px;
|
||||
padding: 32px 24px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(14, 14, 14, 0.95) 100%);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
||||
gap: 24px;
|
||||
padding: 32px 24px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier--featured {
|
||||
border-color: rgba(249, 135, 21, 0.45);
|
||||
background: linear-gradient(160deg, #f98715 0%, #c45f08 55%, #8a3f04 100%);
|
||||
box-shadow: 0 16px 48px rgba(249, 135, 21, 0.28);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background: linear-gradient(180deg, #f98715 0%, #fa681c 100%);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__badge {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
#partnership-page .partnership-tier__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__name {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__sales {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__name,
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__sales,
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__rate,
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__label {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__icon {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__rate-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__rate-box {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__rate {
|
||||
margin: 0;
|
||||
font-size: clamp(48px, 8vw, 72px);
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
font-size: 36px;
|
||||
line-height: 50px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__label {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier__meta {
|
||||
margin: 4px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-tier--featured .partnership-tier__meta {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
#partnership-page .partnership-tiers__note {
|
||||
margin: 0;
|
||||
max-width: 998px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Benefits ── */
|
||||
@@ -197,126 +243,144 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
#partnership-page .partnership-benefits {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit__visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-benefit__visual {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
opacity: 0.4;
|
||||
filter: blur(70px);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit__visual img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 96px;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit__title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-benefit__desc {
|
||||
margin: 0;
|
||||
#partnership-page .partnership-benefit__label {
|
||||
margin: 0 0 16px;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
color: var(--text-muted);
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* ── How it works ── */
|
||||
#partnership-page .partnership-steps {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
@media (min-width: 640px) {
|
||||
#partnership-page .partnership-steps {
|
||||
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#partnership-page .partnership-steps {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step {
|
||||
padding: 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(14, 14, 14, 0.92);
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step__icon {
|
||||
#partnership-page .partnership-step__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step__num {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin-bottom: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(249, 135, 21, 0.15);
|
||||
color: var(--primary);
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step__glyph {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step__title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 20px;
|
||||
background: var(--primary);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-step__desc {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
#partnership-page .partnership-step__tag {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-steps__arrow {
|
||||
display: none;
|
||||
align-self: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-main);
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
#partnership-page .partnership-step__title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#partnership-page .partnership-steps__arrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#partnership-page .partnership-step__desc {
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ── Audience ── */
|
||||
@@ -324,141 +388,168 @@
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-audience {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card {
|
||||
padding: 28px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__label {
|
||||
margin: 0 0 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card--fit .partnership-audience-card__label {
|
||||
color: #3dd68c;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card--not-fit .partnership-audience-card__label {
|
||||
color: #ff6b4a;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__visual {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
min-height: 88px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__visual--warn {
|
||||
background: rgba(255, 107, 74, 0.08);
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page .partnership-audience-card__visual {
|
||||
height: 251px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__warn-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 107, 74, 0.18);
|
||||
color: #ff6b4a;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
#partnership-page .partnership-audience-card__visual img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__label {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__label--fit {
|
||||
color: var(--fit-green);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__label--not-fit {
|
||||
color: var(--not-fit-red);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__list li {
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-main);
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card__list li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card--fit .partnership-audience-card__list li::before {
|
||||
#partnership-page .partnership-audience-card__list li::before {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3dd68c;
|
||||
color: var(--fit-green);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-audience-card--not-fit .partnership-audience-card__list li::before {
|
||||
#partnership-page .partnership-audience-card__list--not-fit li::before {
|
||||
content: "✕";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #ff6b4a;
|
||||
font-weight: 700;
|
||||
color: var(--not-fit-red);
|
||||
}
|
||||
|
||||
/* ── Payment methods module spacing ── */
|
||||
/* ── Payment methods module ── */
|
||||
#partnership-page #payment-methods-container {
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#partnership-page #payment-methods-container .pm2-section {
|
||||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#partnership-page #payment-methods-container .pm2-section {
|
||||
padding-top: 72px;
|
||||
padding-bottom: 72px;
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── FAQ ── */
|
||||
#partnership-page .partnership-section--faq .partnership-faq {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
#partnership-page .partnership-section--faq {
|
||||
overflow: hidden;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-item {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(14, 14, 14, 0.85);
|
||||
@media (min-width: 1024px) {
|
||||
#partnership-page .partnership-section--faq {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
#partnership-page .partnership-faq__glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 160%;
|
||||
max-width: 1961px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: #f9a215;
|
||||
opacity: 0.3;
|
||||
filter: blur(180px);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-faq {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-faq__item {
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-header {
|
||||
width: 100%;
|
||||
#partnership-page .partnership-faq__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-main);
|
||||
@@ -466,79 +557,56 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-question {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
#partnership-page .partnership-faq__question {
|
||||
font-size: clamp(16px, 2vw, 20px);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-icon-box {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
#partnership-page .partnership-faq__toggle {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.25s ease;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-icon {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
#partnership-page .partnership-faq__toggle::before,
|
||||
#partnership-page .partnership-faq__toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-item.active .faq-icon-box {
|
||||
transform: rotate(45deg);
|
||||
#partnership-page .partnership-faq__toggle::after {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-body {
|
||||
#partnership-page .partnership-faq__item.is-open .partnership-faq__toggle::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-faq__body {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: max-height 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-item.active .faq-body {
|
||||
max-height: 320px;
|
||||
#partnership-page .partnership-faq__item.is-open .partnership-faq__body {
|
||||
max-height: 240px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-answer {
|
||||
padding: 0 24px 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
#partnership-page .partnership-section--faq .faq-answer p {
|
||||
margin: 12px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── CTA ── */
|
||||
#partnership-page .partnership-cta {
|
||||
margin-top: 24px;
|
||||
padding: 48px 24px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(249, 135, 21, 0.25);
|
||||
background: linear-gradient(135deg, rgba(249, 135, 21, 0.12) 0%, rgba(14, 14, 14, 0.95) 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-cta__title {
|
||||
margin: 0 0 12px;
|
||||
font-size: clamp(28px, 4vw, 44px);
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#partnership-page .partnership-cta__desc {
|
||||
margin: 0 0 28px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
#partnership-page .partnership-faq__body p {
|
||||
margin: 0;
|
||||
padding: 0 24px 24px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<svg width="87" height="89" viewBox="0 0 87 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ii_11274_28233)">
|
||||
<g clip-path="url(#clip0_11274_28233)">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="url(#paint0_linear_11274_28233)"/>
|
||||
<g opacity="0.4" filter="url(#filter1_f_11274_28233)">
|
||||
<ellipse cx="43.4398" cy="64.8304" rx="36.8473" ry="17.0489" transform="rotate(-14 43.4398 64.8304)" fill="#F98715"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter2_diii_11274_28233)">
|
||||
<g clip-path="url(#clip1_11274_28233)">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="url(#paint1_linear_11274_28233)"/>
|
||||
<g opacity="0.4" filter="url(#filter3_f_11274_28233)">
|
||||
<ellipse cx="50.2458" cy="79.168" rx="36.8473" ry="17.0489" fill="#F98715"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_d_11274_28233)">
|
||||
<path d="M55.5742 68H45.7559V64.7275H55.5742V68ZM50.665 32C57.8953 32 63.7558 37.8606 63.7559 45.0908C63.7559 49.9359 61.1241 54.1667 57.2109 56.4307V62.2725H44.1201V56.4307C40.2076 54.1668 37.5742 49.9361 37.5742 45.0908C37.5743 37.8606 43.4348 32 50.665 32ZM50.665 35.2725C45.243 35.2725 40.8467 39.6688 40.8467 45.0908C40.8454 46.77 41.276 48.4212 42.0957 49.8867C42.9154 51.3522 44.0969 52.5831 45.5283 53.4609L45.7588 53.5977L47.3926 54.543V59H53.9375V54.543L55.5723 53.5977C57.0661 52.7363 58.3068 51.4963 59.1689 50.0029C60.0311 48.5095 60.4846 46.8152 60.4834 45.0908C60.4834 39.6688 56.0871 35.2725 50.665 35.2725ZM56.1074 44.5361L52.2998 48.3438V55.5352H49.0273V47.8877L45.6758 44.5361L47.9893 42.2227L50.8906 45.123L53.793 42.2227L56.1074 44.5361Z" fill="white"/>
|
||||
<path d="M55.5742 68H45.7559V64.7275H55.5742V68ZM50.665 32C57.8953 32 63.7558 37.8606 63.7559 45.0908C63.7559 49.9359 61.1241 54.1667 57.2109 56.4307V62.2725H44.1201V56.4307C40.2076 54.1668 37.5742 49.9361 37.5742 45.0908C37.5743 37.8606 43.4348 32 50.665 32ZM50.665 35.2725C45.243 35.2725 40.8467 39.6688 40.8467 45.0908C40.8454 46.77 41.276 48.4212 42.0957 49.8867C42.9154 51.3522 44.0969 52.5831 45.5283 53.4609L45.7588 53.5977L47.3926 54.543V59H53.9375V54.543L55.5723 53.5977C57.0661 52.7363 58.3068 51.4963 59.1689 50.0029C60.0311 48.5095 60.4846 46.8152 60.4834 45.0908C60.4834 39.6688 56.0871 35.2725 50.665 35.2725ZM56.1074 44.5361L52.2998 48.3438V55.5352H49.0273V47.8877L45.6758 44.5361L47.9893 42.2227L50.8906 45.123L53.793 42.2227L56.1074 44.5361Z" fill="url(#paint2_linear_11274_28233)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii_11274_28233" x="-0.767765" y="-1.09589" width="74.1918" height="79.3751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect1_innerShadow_11274_28233"/>
|
||||
<feOffset dx="-1.09589" dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_11274_28233"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect2_innerShadow_11274_28233"/>
|
||||
<feOffset dx="1.09589" dy="5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.38356"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_11274_28233" result="effect2_innerShadow_11274_28233"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_11274_28233" x="-30.2399" y="8.35042" width="147.359" height="112.96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28233"/>
|
||||
</filter>
|
||||
<filter id="filter2_diii_11274_28233" x="3.10247" y="4.38361" width="83.2893" height="84.3835" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-5.47945" dy="-3.28767"/>
|
||||
<feGaussianBlur stdDeviation="6.0274"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.603779 0 0 0 0 0.301889 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11274_28233"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11274_28233" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect2_innerShadow_11274_28233"/>
|
||||
<feOffset dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_11274_28233"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect3_innerShadow_11274_28233"/>
|
||||
<feOffset dx="2.19178" dy="2.19178"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_11274_28233" result="effect3_innerShadow_11274_28233"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-3.28767" dy="-5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.93151"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.245493 0 0 0 0 0.127981 0 0 0 0 0.0104701 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow_11274_28233" result="effect4_innerShadow_11274_28233"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_11274_28233" x="-24.2868" y="24.4339" width="149.066" height="109.468" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28233"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_11274_28233" x="30.4723" y="28.7123" width="40.3836" height="40.3836" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.778959 0 0 0 0 0.557918 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11274_28233"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11274_28233" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_11274_28233" x1="29.9172" y1="14.3164" x2="19.5173" y2="69.806" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFA041"/>
|
||||
<stop offset="1" stop-color="#B25400"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_11274_28233" x1="50.2258" y1="19.7261" x2="76.7735" y2="77.402" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F98715"/>
|
||||
<stop offset="1" stop-color="#241202"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_11274_28233" x1="50.7816" y1="42.6825" x2="50.7181" y2="68.0001" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F3A759"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_11274_28233">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_11274_28233">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,109 @@
|
||||
<svg width="87" height="89" viewBox="0 0 87 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ii_11274_28217)">
|
||||
<g clip-path="url(#clip0_11274_28217)">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="url(#paint0_linear_11274_28217)"/>
|
||||
<g opacity="0.4" filter="url(#filter1_f_11274_28217)">
|
||||
<ellipse cx="43.4398" cy="64.8304" rx="36.8473" ry="17.0489" transform="rotate(-14 43.4398 64.8304)" fill="#F98715"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter2_diii_11274_28217)">
|
||||
<g clip-path="url(#clip1_11274_28217)">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="url(#paint1_linear_11274_28217)"/>
|
||||
<g opacity="0.4" filter="url(#filter3_f_11274_28217)">
|
||||
<ellipse cx="50.2458" cy="79.168" rx="36.8473" ry="17.0489" fill="#F98715"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_d_11274_28217)">
|
||||
<path d="M34.8164 61.7454V55.9788C34.8164 55.1101 35.1214 54.3762 35.7314 53.7771C36.3416 53.178 37.07 52.8784 37.9164 52.8784H42.3961C42.8781 52.8784 43.2971 52.9708 43.6531 53.1554C44.0093 53.3399 44.2971 53.6022 44.5164 53.9424C45.186 54.8718 46.0181 55.5934 47.0127 56.1074C48.0074 56.6214 49.0757 56.8784 50.2177 56.8784C51.3695 56.8784 52.4459 56.6214 53.4467 56.1074C54.4476 55.5934 55.2781 54.8718 55.9381 53.9424C56.1767 53.6022 56.4716 53.3399 56.8227 53.1554C57.1741 52.9708 57.5796 52.8784 58.0394 52.8784H62.5381C63.4067 52.8784 64.1405 53.178 64.7394 53.7771C65.3385 54.3762 65.6381 55.1101 65.6381 55.9788V61.7454H55.4381V58.5424C54.6603 59.0227 53.8309 59.3914 52.9497 59.6488C52.0684 59.9063 51.1577 60.0351 50.2177 60.0351C49.3 60.0351 48.3981 59.904 47.5121 59.6418C46.6261 59.3793 45.7942 59.008 45.0164 58.5278V61.7454H34.8164ZM50.2177 55.1684C49.4362 55.1684 48.6959 54.9866 47.9967 54.6228C47.2976 54.259 46.7114 53.7578 46.2381 53.1191C45.785 52.4631 45.2342 51.974 44.5857 51.6518C43.9375 51.3296 43.2173 51.1684 42.4251 51.1684C43.0395 50.3713 44.1419 49.7182 45.7321 49.2091C47.3225 48.6998 48.8177 48.4451 50.2177 48.4451C51.6177 48.4451 53.1161 48.6998 54.7127 49.2091C56.3094 49.7182 57.415 50.3713 58.0294 51.1684C57.2467 51.1684 56.5289 51.3264 55.8757 51.6424C55.2226 51.9582 54.6695 52.4504 54.2164 53.1191C53.7651 53.7676 53.1867 54.2712 52.4814 54.6301C51.7761 54.989 51.0215 55.1684 50.2177 55.1684ZM39.5511 50.7918C38.3897 50.7918 37.4013 50.384 36.5857 49.5684C35.7704 48.7529 35.3627 47.7644 35.3627 46.6031C35.3627 45.4322 35.7704 44.4414 36.5857 43.6308C37.4013 42.8201 38.3897 42.4148 39.5511 42.4148C40.7222 42.4148 41.713 42.8201 42.5234 43.6308C43.3341 44.4414 43.7394 45.4322 43.7394 46.6031C43.7394 47.7644 43.3341 48.7529 42.5234 49.5684C41.713 50.384 40.7222 50.7918 39.5511 50.7918ZM60.8844 50.7918C59.7231 50.7918 58.7346 50.384 57.9191 49.5684C57.1037 48.7529 56.6961 47.7644 56.6961 46.6031C56.6961 45.4322 57.1037 44.4414 57.9191 43.6308C58.7346 42.8201 59.7231 42.4148 60.8844 42.4148C62.0555 42.4148 63.0463 42.8201 63.8567 43.6308C64.6674 44.4414 65.0727 45.4322 65.0727 46.6031C65.0727 47.7644 64.6674 48.7529 63.8567 49.5684C63.0463 50.384 62.0555 50.7918 60.8844 50.7918ZM50.2177 46.3581C49.0564 46.3581 48.068 45.9504 47.2524 45.1351C46.4371 44.3196 46.0294 43.3311 46.0294 42.1698C46.0294 40.9989 46.4371 40.0081 47.2524 39.1974C48.068 38.3868 49.0564 37.9814 50.2177 37.9814C51.3889 37.9814 52.3796 38.3868 53.1901 39.1974C54.0007 40.0081 54.4061 40.9989 54.4061 42.1698C54.4061 43.3311 54.0007 44.3196 53.1901 45.1351C52.3796 45.9504 51.3889 46.3581 50.2177 46.3581Z" fill="url(#paint2_linear_11274_28217)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii_11274_28217" x="-0.767765" y="-1.09589" width="74.1918" height="79.3751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect1_innerShadow_11274_28217"/>
|
||||
<feOffset dx="-1.09589" dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_11274_28217"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect2_innerShadow_11274_28217"/>
|
||||
<feOffset dx="1.09589" dy="5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.38356"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_11274_28217" result="effect2_innerShadow_11274_28217"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_11274_28217" x="-30.2399" y="8.35042" width="147.359" height="112.96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28217"/>
|
||||
</filter>
|
||||
<filter id="filter2_diii_11274_28217" x="3.10247" y="4.38361" width="83.2893" height="84.3835" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-5.47945" dy="-3.28767"/>
|
||||
<feGaussianBlur stdDeviation="6.0274"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.603779 0 0 0 0 0.301889 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11274_28217"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11274_28217" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect2_innerShadow_11274_28217"/>
|
||||
<feOffset dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_11274_28217"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect3_innerShadow_11274_28217"/>
|
||||
<feOffset dx="2.19178" dy="2.19178"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_11274_28217" result="effect3_innerShadow_11274_28217"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-3.28767" dy="-5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.93151"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.245493 0 0 0 0 0.127981 0 0 0 0 0.0104701 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow_11274_28217" result="effect4_innerShadow_11274_28217"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_11274_28217" x="-24.2868" y="24.4339" width="149.066" height="109.468" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28217"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_11274_28217" x="32.6246" y="34.6938" width="35.2039" height="28.1477" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.778959 0 0 0 0 0.557918 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11274_28217"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11274_28217" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_11274_28217" x1="29.9172" y1="14.3164" x2="19.5173" y2="69.806" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFA041"/>
|
||||
<stop offset="1" stop-color="#B25400"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_11274_28217" x1="50.2258" y1="19.7261" x2="76.7735" y2="77.402" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F98715"/>
|
||||
<stop offset="1" stop-color="#241202"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_11274_28217" x1="50.3644" y1="45.0331" x2="50.3409" y2="61.7456" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F3A759"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_11274_28217">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_11274_28217">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
@@ -0,0 +1,98 @@
|
||||
<svg width="87" height="89" viewBox="0 0 87 89" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_ii_11274_28201)">
|
||||
<g clip-path="url(#clip0_11274_28201)">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="url(#paint0_linear_11274_28201)"/>
|
||||
<g opacity="0.4" filter="url(#filter1_f_11274_28201)">
|
||||
<ellipse cx="43.4398" cy="64.8304" rx="36.8473" ry="17.0489" transform="rotate(-14 43.4398 64.8304)" fill="#F98715"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g filter="url(#filter2_diii_11274_28201)">
|
||||
<g clip-path="url(#clip1_11274_28201)">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="url(#paint1_linear_11274_28201)"/>
|
||||
<g opacity="0.4" filter="url(#filter3_f_11274_28201)">
|
||||
<ellipse cx="50.2458" cy="79.168" rx="36.8473" ry="17.0489" fill="#F98715"/>
|
||||
</g>
|
||||
<path d="M50.2266 63.5781L39.5022 57.79V48.8503L33.2266 45.404L50.2266 36.1484L67.2266 45.404V57.6395H63.5941V47.4009L60.9509 48.8503V57.79L50.2266 63.5781ZM50.2266 50.4959L59.6539 45.404L50.2266 40.3121L40.7993 45.404L50.2266 50.4959ZM50.2266 59.4517L57.3184 55.6184V50.7939L50.2266 54.6596L43.1348 50.7939V55.6184L50.2266 59.4517Z" fill="#F98715"/>
|
||||
<path d="M50.2266 63.5781L39.5022 57.79V48.8503L33.2266 45.404L50.2266 36.1484L67.2266 45.404V57.6395H63.5941V47.4009L60.9509 48.8503V57.79L50.2266 63.5781ZM50.2266 50.4959L59.6539 45.404L50.2266 40.3121L40.7993 45.404L50.2266 50.4959ZM50.2266 59.4517L57.3184 55.6184V50.7939L50.2266 54.6596L43.1348 50.7939V55.6184L50.2266 59.4517Z" fill="url(#paint2_linear_11274_28201)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii_11274_28201" x="-0.767765" y="-1.09589" width="74.1918" height="79.3751" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect1_innerShadow_11274_28201"/>
|
||||
<feOffset dx="-1.09589" dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_11274_28201"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect2_innerShadow_11274_28201"/>
|
||||
<feOffset dx="1.09589" dy="5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.38356"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow_11274_28201" result="effect2_innerShadow_11274_28201"/>
|
||||
</filter>
|
||||
<filter id="filter1_f_11274_28201" x="-30.2399" y="8.35042" width="147.359" height="112.96" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28201"/>
|
||||
</filter>
|
||||
<filter id="filter2_diii_11274_28201" x="3.10247" y="4.38361" width="83.2893" height="84.3835" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-5.47945" dy="-3.28767"/>
|
||||
<feGaussianBlur stdDeviation="6.0274"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.603779 0 0 0 0 0.301889 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11274_28201"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11274_28201" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="1.09589" operator="erode" in="SourceAlpha" result="effect2_innerShadow_11274_28201"/>
|
||||
<feOffset dy="-1.09589"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_11274_28201"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="2.19178" operator="dilate" in="SourceAlpha" result="effect3_innerShadow_11274_28201"/>
|
||||
<feOffset dx="2.19178" dy="2.19178"/>
|
||||
<feGaussianBlur stdDeviation="1.09589"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_11274_28201" result="effect3_innerShadow_11274_28201"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-3.28767" dy="-5.47945"/>
|
||||
<feGaussianBlur stdDeviation="4.93151"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.245493 0 0 0 0 0.127981 0 0 0 0 0.0104701 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow_11274_28201" result="effect4_innerShadow_11274_28201"/>
|
||||
</filter>
|
||||
<filter id="filter3_f_11274_28201" x="-24.2868" y="24.4339" width="149.066" height="109.468" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="18.8426" result="effect1_foregroundBlur_11274_28201"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_11274_28201" x1="29.9172" y1="14.3164" x2="19.5173" y2="69.806" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFA041"/>
|
||||
<stop offset="1" stop-color="#B25400"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_11274_28201" x1="50.2258" y1="19.7261" x2="76.7735" y2="77.402" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F98715"/>
|
||||
<stop offset="1" stop-color="#241202"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_11274_28201" x1="50.3779" y1="44.2878" x2="50.3495" y2="63.5783" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#F3A759"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_11274_28201">
|
||||
<rect x="0.328125" y="14.3164" width="59.1781" height="60.274" rx="15.3425" transform="rotate(-14 0.328125 14.3164)" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_11274_28201">
|
||||
<rect x="20.6367" y="19.7261" width="59.1781" height="60.274" rx="15.3425" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.7287 8.7287L5.98163 14.4758C5.92824 14.5292 5.86485 14.5715 5.79508 14.6004C5.72531 14.6293 5.65054 14.6442 5.57503 14.6442C5.49951 14.6442 5.42474 14.6293 5.35497 14.6004C5.28521 14.5715 5.22182 14.5292 5.16842 14.4758C5.11502 14.4224 5.07267 14.359 5.04377 14.2892C5.01487 14.2195 5 14.1447 5 14.0692C5 13.9937 5.01487 13.9189 5.04377 13.8491C5.07267 13.7794 5.11502 13.716 5.16842 13.6626L10.5096 8.3221L5.16842 2.98163C5.06058 2.87379 5 2.72753 5 2.57503C5 2.42252 5.06058 2.27626 5.16842 2.16842C5.27626 2.06058 5.42252 2 5.57503 2C5.72753 2 5.87379 2.06058 5.98163 2.16842L11.7287 7.91549C11.7821 7.96887 11.8245 8.03225 11.8534 8.10202C11.8824 8.17179 11.8973 8.24657 11.8973 8.3221C11.8973 8.39762 11.8824 8.47241 11.8534 8.54218C11.8245 8.61194 11.7821 8.67533 11.7287 8.7287Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 918 B |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path fill="#000" d="M3 7.25h7.19L7.72 4.78 8.78 3.72 13.06 8l-4.28 4.28-1.06-1.06 2.47-2.47H3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 204 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<rect x="2.5" y="2.5" width="15" height="15" rx="4" stroke="#F98715" stroke-width="1.25" stroke-dasharray="3.5 2.5" opacity="0.85"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 257 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 552 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 552 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Vendored
+332
-56
@@ -54,6 +54,90 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-help-center</div>
|
||||
<div class="code-name">&#xe617;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">contact-us</div>
|
||||
<div class="code-name">&#xe637;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">about-us</div>
|
||||
<div class="code-name">&#xe638;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">partnership</div>
|
||||
<div class="code-name">&#xe630;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">trading-courses</div>
|
||||
<div class="code-name">&#xe631;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">payout</div>
|
||||
<div class="code-name">&#xe632;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">live-sessions</div>
|
||||
<div class="code-name">&#xe633;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">ai-coach</div>
|
||||
<div class="code-name">&#xe634;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">account-models</div>
|
||||
<div class="code-name">&#xe636;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">check</div>
|
||||
<div class="code-name">&#xe62f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Contact</div>
|
||||
<div class="code-name">&#xe62e;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Email</div>
|
||||
<div class="code-name">&#xe62c;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Address</div>
|
||||
<div class="code-name">&#xe62b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">Application Form</div>
|
||||
<div class="code-name">&#xe62a;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">challenge_start</div>
|
||||
@@ -234,12 +318,6 @@
|
||||
<div class="code-name">&#xe602;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-about-us</div>
|
||||
<div class="code-name">&#xe612;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-video-hub</div>
|
||||
@@ -264,12 +342,6 @@
|
||||
<div class="code-name">&#xe616;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-payout</div>
|
||||
<div class="code-name">&#xe617;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-academy</div>
|
||||
@@ -302,7 +374,7 @@
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">nav-contact</div>
|
||||
<div class="name">nav-contact-us</div>
|
||||
<div class="code-name">&#xe608;</div>
|
||||
</li>
|
||||
|
||||
@@ -372,9 +444,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1778814549591') format('woff2'),
|
||||
url('iconfont.woff?t=1778814549591') format('woff'),
|
||||
url('iconfont.ttf?t=1778814549591') format('truetype');
|
||||
src: url('iconfont.woff2?t=1783075781525') format('woff2'),
|
||||
url('iconfont.woff?t=1783075781525') format('woff'),
|
||||
url('iconfont.ttf?t=1783075781525') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@@ -400,6 +472,132 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-help-center"></span>
|
||||
<div class="name">
|
||||
nav-help-center
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-help-center
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-contact-us"></span>
|
||||
<div class="name">
|
||||
contact-us
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-contact-us
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-about-us"></span>
|
||||
<div class="name">
|
||||
about-us
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-about-us
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-partnership"></span>
|
||||
<div class="name">
|
||||
partnership
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-partnership
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-trading-courses"></span>
|
||||
<div class="name">
|
||||
trading-courses
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-trading-courses
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-payout"></span>
|
||||
<div class="name">
|
||||
payout
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-payout
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-live-sessions"></span>
|
||||
<div class="name">
|
||||
live-sessions
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-live-sessions
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-ai-coach"></span>
|
||||
<div class="name">
|
||||
ai-coach
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-ai-coach
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-account-models"></span>
|
||||
<div class="name">
|
||||
account-models
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-account-models
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-check"></span>
|
||||
<div class="name">
|
||||
check
|
||||
</div>
|
||||
<div class="code-name">.icon-check
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-dianhua"></span>
|
||||
<div class="name">
|
||||
Contact
|
||||
</div>
|
||||
<div class="code-name">.icon-dianhua
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-youxiang"></span>
|
||||
<div class="name">
|
||||
Email
|
||||
</div>
|
||||
<div class="code-name">.icon-youxiang
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-dizhi"></span>
|
||||
<div class="name">
|
||||
Address
|
||||
</div>
|
||||
<div class="code-name">.icon-dizhi
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-application-form"></span>
|
||||
<div class="name">
|
||||
Application Form
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-application-form
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-challenge_start"></span>
|
||||
<div class="name">
|
||||
@@ -670,15 +868,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-about-us"></span>
|
||||
<div class="name">
|
||||
nav-about-us
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-about-us
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-video-hub"></span>
|
||||
<div class="name">
|
||||
@@ -715,15 +904,6 @@
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-payout"></span>
|
||||
<div class="name">
|
||||
nav-payout
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-payout
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-academy"></span>
|
||||
<div class="name">
|
||||
@@ -770,11 +950,11 @@
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-nav-contact"></span>
|
||||
<span class="icon iconfont icon-nav-contact-us-01"></span>
|
||||
<div class="name">
|
||||
nav-contact
|
||||
nav-contact-us
|
||||
</div>
|
||||
<div class="code-name">.icon-nav-contact
|
||||
<div class="code-name">.icon-nav-contact-us-01
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -877,6 +1057,118 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-help-center"></use>
|
||||
</svg>
|
||||
<div class="name">nav-help-center</div>
|
||||
<div class="code-name">#icon-nav-help-center</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-contact-us"></use>
|
||||
</svg>
|
||||
<div class="name">contact-us</div>
|
||||
<div class="code-name">#icon-nav-contact-us</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-about-us"></use>
|
||||
</svg>
|
||||
<div class="name">about-us</div>
|
||||
<div class="code-name">#icon-nav-about-us</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-partnership"></use>
|
||||
</svg>
|
||||
<div class="name">partnership</div>
|
||||
<div class="code-name">#icon-nav-partnership</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-trading-courses"></use>
|
||||
</svg>
|
||||
<div class="name">trading-courses</div>
|
||||
<div class="code-name">#icon-nav-trading-courses</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-payout"></use>
|
||||
</svg>
|
||||
<div class="name">payout</div>
|
||||
<div class="code-name">#icon-nav-payout</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-live-sessions"></use>
|
||||
</svg>
|
||||
<div class="name">live-sessions</div>
|
||||
<div class="code-name">#icon-nav-live-sessions</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-ai-coach"></use>
|
||||
</svg>
|
||||
<div class="name">ai-coach</div>
|
||||
<div class="code-name">#icon-nav-ai-coach</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-account-models"></use>
|
||||
</svg>
|
||||
<div class="name">account-models</div>
|
||||
<div class="code-name">#icon-nav-account-models</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-check"></use>
|
||||
</svg>
|
||||
<div class="name">check</div>
|
||||
<div class="code-name">#icon-check</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-dianhua"></use>
|
||||
</svg>
|
||||
<div class="name">Contact</div>
|
||||
<div class="code-name">#icon-dianhua</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-youxiang"></use>
|
||||
</svg>
|
||||
<div class="name">Email</div>
|
||||
<div class="code-name">#icon-youxiang</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-dizhi"></use>
|
||||
</svg>
|
||||
<div class="name">Address</div>
|
||||
<div class="code-name">#icon-dizhi</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-application-form"></use>
|
||||
</svg>
|
||||
<div class="name">Application Form</div>
|
||||
<div class="code-name">#icon-nav-application-form</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-challenge_start"></use>
|
||||
@@ -1117,14 +1409,6 @@
|
||||
<div class="code-name">#icon-nav-funding-programs</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-about-us"></use>
|
||||
</svg>
|
||||
<div class="name">nav-about-us</div>
|
||||
<div class="code-name">#icon-nav-about-us</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-video-hub"></use>
|
||||
@@ -1157,14 +1441,6 @@
|
||||
<div class="code-name">#icon-nav-leaderboard</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-payout"></use>
|
||||
</svg>
|
||||
<div class="name">nav-payout</div>
|
||||
<div class="code-name">#icon-nav-payout</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-academy"></use>
|
||||
@@ -1207,10 +1483,10 @@
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-nav-contact"></use>
|
||||
<use xlink:href="#icon-nav-contact-us-01"></use>
|
||||
</svg>
|
||||
<div class="name">nav-contact</div>
|
||||
<div class="code-name">#icon-nav-contact</div>
|
||||
<div class="name">nav-contact-us</div>
|
||||
<div class="code-name">#icon-nav-contact-us-01</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
|
||||
Vendored
+60
-12
@@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 5079339 */
|
||||
src: url('iconfont.woff2?t=1778814549591') format('woff2'),
|
||||
url('iconfont.woff?t=1778814549591') format('woff'),
|
||||
url('iconfont.ttf?t=1778814549591') format('truetype');
|
||||
src: url('iconfont.woff2?t=1783075781525') format('woff2'),
|
||||
url('iconfont.woff?t=1783075781525') format('woff'),
|
||||
url('iconfont.ttf?t=1783075781525') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@@ -13,6 +13,62 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-nav-help-center:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-nav-contact-us:before {
|
||||
content: "\e637";
|
||||
}
|
||||
|
||||
.icon-nav-about-us:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
||||
.icon-nav-partnership:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.icon-nav-trading-courses:before {
|
||||
content: "\e631";
|
||||
}
|
||||
|
||||
.icon-nav-payout:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.icon-nav-live-sessions:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.icon-nav-ai-coach:before {
|
||||
content: "\e634";
|
||||
}
|
||||
|
||||
.icon-nav-account-models:before {
|
||||
content: "\e636";
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.icon-dianhua:before {
|
||||
content: "\e62e";
|
||||
}
|
||||
|
||||
.icon-youxiang:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.icon-dizhi:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-nav-application-form:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.icon-challenge_start:before {
|
||||
content: "\e629";
|
||||
}
|
||||
@@ -133,10 +189,6 @@
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-nav-about-us:before {
|
||||
content: "\e612";
|
||||
}
|
||||
|
||||
.icon-nav-video-hub:before {
|
||||
content: "\e613";
|
||||
}
|
||||
@@ -153,10 +205,6 @@
|
||||
content: "\e616";
|
||||
}
|
||||
|
||||
.icon-nav-payout:before {
|
||||
content: "\e617";
|
||||
}
|
||||
|
||||
.icon-nav-academy:before {
|
||||
content: "\e618";
|
||||
}
|
||||
@@ -177,7 +225,7 @@
|
||||
content: "\e607";
|
||||
}
|
||||
|
||||
.icon-nav-contact:before {
|
||||
.icon-nav-contact-us-01:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+100
-16
@@ -5,6 +5,104 @@
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "47996453",
|
||||
"name": "nav-help-center",
|
||||
"font_class": "nav-help-center",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "47996317",
|
||||
"name": "contact-us",
|
||||
"font_class": "nav-contact-us",
|
||||
"unicode": "e637",
|
||||
"unicode_decimal": 58935
|
||||
},
|
||||
{
|
||||
"icon_id": "47996315",
|
||||
"name": "about-us",
|
||||
"font_class": "nav-about-us",
|
||||
"unicode": "e638",
|
||||
"unicode_decimal": 58936
|
||||
},
|
||||
{
|
||||
"icon_id": "47996323",
|
||||
"name": "partnership",
|
||||
"font_class": "nav-partnership",
|
||||
"unicode": "e630",
|
||||
"unicode_decimal": 58928
|
||||
},
|
||||
{
|
||||
"icon_id": "47996322",
|
||||
"name": "trading-courses",
|
||||
"font_class": "nav-trading-courses",
|
||||
"unicode": "e631",
|
||||
"unicode_decimal": 58929
|
||||
},
|
||||
{
|
||||
"icon_id": "47996321",
|
||||
"name": "payout",
|
||||
"font_class": "nav-payout",
|
||||
"unicode": "e632",
|
||||
"unicode_decimal": 58930
|
||||
},
|
||||
{
|
||||
"icon_id": "47996320",
|
||||
"name": "live-sessions",
|
||||
"font_class": "nav-live-sessions",
|
||||
"unicode": "e633",
|
||||
"unicode_decimal": 58931
|
||||
},
|
||||
{
|
||||
"icon_id": "47996319",
|
||||
"name": "ai-coach",
|
||||
"font_class": "nav-ai-coach",
|
||||
"unicode": "e634",
|
||||
"unicode_decimal": 58932
|
||||
},
|
||||
{
|
||||
"icon_id": "47996316",
|
||||
"name": "account-models",
|
||||
"font_class": "nav-account-models",
|
||||
"unicode": "e636",
|
||||
"unicode_decimal": 58934
|
||||
},
|
||||
{
|
||||
"icon_id": "47807056",
|
||||
"name": "check",
|
||||
"font_class": "check",
|
||||
"unicode": "e62f",
|
||||
"unicode_decimal": 58927
|
||||
},
|
||||
{
|
||||
"icon_id": "47807040",
|
||||
"name": "Contact",
|
||||
"font_class": "dianhua",
|
||||
"unicode": "e62e",
|
||||
"unicode_decimal": 58926
|
||||
},
|
||||
{
|
||||
"icon_id": "47807022",
|
||||
"name": "Email",
|
||||
"font_class": "youxiang",
|
||||
"unicode": "e62c",
|
||||
"unicode_decimal": 58924
|
||||
},
|
||||
{
|
||||
"icon_id": "47806885",
|
||||
"name": "Address",
|
||||
"font_class": "dizhi",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "47677640",
|
||||
"name": "Application Form",
|
||||
"font_class": "nav-application-form",
|
||||
"unicode": "e62a",
|
||||
"unicode_decimal": 58922
|
||||
},
|
||||
{
|
||||
"icon_id": "47576190",
|
||||
"name": "challenge_start",
|
||||
@@ -215,13 +313,6 @@
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "46249534",
|
||||
"name": "nav-about-us",
|
||||
"font_class": "nav-about-us",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "46249532",
|
||||
"name": "nav-video-hub",
|
||||
@@ -250,13 +341,6 @@
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "46249529",
|
||||
"name": "nav-payout",
|
||||
"font_class": "nav-payout",
|
||||
"unicode": "e617",
|
||||
"unicode_decimal": 58903
|
||||
},
|
||||
{
|
||||
"icon_id": "46249527",
|
||||
"name": "nav-academy",
|
||||
@@ -294,8 +378,8 @@
|
||||
},
|
||||
{
|
||||
"icon_id": "46249539",
|
||||
"name": "nav-contact",
|
||||
"font_class": "nav-contact",
|
||||
"name": "nav-contact-us",
|
||||
"font_class": "nav-contact-us-01",
|
||||
"unicode": "e608",
|
||||
"unicode_decimal": 58888
|
||||
},
|
||||
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
+239
-141
@@ -1,143 +1,241 @@
|
||||
<!-- fixed-header glass-panel -->
|
||||
<nav id="nav" class="navbar navbar-expand-lg navbar-transparent navbar-dark glass-panel fixed-header py-6">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/"><img src="/assets/images/brand/logo.png" alt="AIFO UI Kit" /></a>
|
||||
<button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<!-- V2 nav — submenu icons: Alibaba iconfont (see data/nav-icon-registry.json). data-nav-icon = upload font_class without "nav-" prefix -->
|
||||
<nav id="nav" class="aifo-nav navbar navbar-expand-lg navbar-transparent navbar-dark glass-panel fixed-header py-6">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/assets/images/brand/logo.png" alt="AIFO" width="127" height="32" />
|
||||
</a>
|
||||
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbar_main">
|
||||
<ul class="navbar-nav ml-auto align-items-lg-center">
|
||||
<h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="/" id="navbar_main_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Trader Academy <span class="icon iconfont icon-a-arrow-down"></span></a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
|
||||
<a class="dropdown-item" href="/pages/academy.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont icon-nav-academy text-orange mr-6"></span> Academy
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/page-index.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont icon-nav-academy text-orange mr-6"></span> Page Directory
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/mind_growth.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont icon-nav-mind-growth text-orange mr-6"></span>Mind & Growth
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-action="offcanvas-open"
|
||||
data-target="#navbar_main"
|
||||
aria-controls="navbar_main"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<a class="dropdown-item" href="/pages/live.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-6 icon-nav-live"></span>live
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbar_main_dropdown_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Program <span class="icon iconfont icon-a-arrow-down"></span></a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbar_main_dropdown_2">
|
||||
<a class="dropdown-item" href="/pages/homepage.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-funding-programs"></span>Funding Programs
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/payout.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-payout"></span>Payout
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/sign-in.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-leaderboard"></span>Leaderboard
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbar_main_dropdown_2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Community <span class="icon iconfont icon-a-arrow-down"></span></a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbar_main_dropdown_2">
|
||||
<a class="dropdown-item" href="/pages/homepage.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-blog"></span>Blog
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/about.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-video-hub"></span>Video Hub
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="navbar_main_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Affiliate</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#" id="navbar_main_dropdown_3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About <span class="icon iconfont icon-a-arrow-down"></span></a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbar_main_dropdown_3">
|
||||
<a class="dropdown-item" href="/pages/homepage.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-about-us"></span>About us
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/about.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-company-news"></span>Company News
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/sign-in.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-contact"></span>Contact
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/sign-in.html">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="icon iconfont text-orange mr-7 icon-nav-faq"></span>FAQ
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item change_btn_style_navbar">
|
||||
<a href="" target="_blank" class="btn btn-sm bg-primary nav-link d-lg-none">Start Chanllenge</a>
|
||||
<a href="" target="_blank" class="btn btn-sm bg-primary d-none d-lg-inline-flex">Start Chanllenge</a>
|
||||
</li>
|
||||
<li class="nav-item login_btn_navbar">
|
||||
<a href="" target="_blank" class="btn btn-sm btn-login nav-link d-lg-none">Login</a>
|
||||
<a href="" target="_blank" class="btn btn-sm btn-login d-none d-lg-inline-flex">
|
||||
Login
|
||||
<span class="login-btn-arrow">›</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown switch-lang">
|
||||
<a class="nav-link" href="#" id="navbar_main_dropdown_3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="fi fi-gb"></span> EN
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbar_main_dropdown_3">
|
||||
<a class="dropdown-item" hreflang="en" href="#">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="fi fi-gb"></span> EN
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="cn" href="#">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="fi fi-ca"></span> CA
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="vn" href="#">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="fi fi-vn"></span> VN
|
||||
</div>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="fr" href="#">
|
||||
<div class="dropdown-rounded-item">
|
||||
<span class="fi fi-fr"></span> FR
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div class="navbar-collapse offcanvas-collapse aifo-nav__collapse" id="navbar_main">
|
||||
<ul class="navbar-nav aifo-nav__menu align-items-lg-center">
|
||||
<h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
|
||||
|
||||
<!-- Funding Programs -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="nav-dropdown-funding"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Funding Programs
|
||||
<span class="icon iconfont icon-a-arrow-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu aifo-nav__dropdown" aria-labelledby="nav-dropdown-funding">
|
||||
<a class="dropdown-item" href="/pages/funding_program.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-account-models" data-nav-icon="account-models"></span>
|
||||
</span>
|
||||
Account Models
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/payout.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-payout" data-nav-icon="payout"></span>
|
||||
</span>
|
||||
Payouts
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Academy -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="nav-dropdown-academy"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Academy
|
||||
<span class="icon iconfont icon-a-arrow-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu aifo-nav__dropdown" aria-labelledby="nav-dropdown-academy">
|
||||
<a class="dropdown-item" href="/pages/academy.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-trading-courses" data-nav-icon="trading-courses"></span>
|
||||
</span>
|
||||
Trading Courses
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/live.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-live-sessions" data-nav-icon="live-sessions"></span>
|
||||
</span>
|
||||
Live Sessions
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Platform -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="nav-dropdown-platform"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Platform
|
||||
<span class="icon iconfont icon-a-arrow-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu aifo-nav__dropdown" aria-labelledby="nav-dropdown-platform">
|
||||
<a class="dropdown-item" href="#">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-ai-coach" data-nav-icon="ai-coach"></span>
|
||||
</span>
|
||||
AI-Coach
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-trading-platform" data-nav-icon="metatrader-5"></span>
|
||||
</span>
|
||||
MetaTrader 5
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Company -->
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="nav-dropdown-company"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Company
|
||||
<span class="icon iconfont icon-a-arrow-down" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="dropdown-menu aifo-nav__dropdown" aria-labelledby="nav-dropdown-company">
|
||||
<a class="dropdown-item" href="/pages/about-us-2.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-about-us" data-nav-icon="about-us"></span>
|
||||
</span>
|
||||
About Us
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/partnership.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-partnership" data-nav-icon="partnership"></span>
|
||||
</span>
|
||||
Partnership
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/contact.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-contact-us" data-nav-icon="contact-us"></span>
|
||||
</span>
|
||||
Contact Us
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="/pages/faq.html">
|
||||
<span class="aifo-nav__drop-item">
|
||||
<span class="aifo-nav__icon-box" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-help-center" data-nav-icon="help-center"></span>
|
||||
</span>
|
||||
Help Center
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav aifo-nav__actions align-items-lg-center">
|
||||
<li class="nav-item dropdown aifo-nav__lang">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
href="#"
|
||||
id="nav-dropdown-lang"
|
||||
role="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="fi fi-gb fis" aria-hidden="true"></span>
|
||||
EN
|
||||
</a>
|
||||
<div class="dropdown-menu aifo-nav__dropdown aifo-nav__dropdown--lang" aria-labelledby="nav-dropdown-lang">
|
||||
<a class="dropdown-item" hreflang="en" href="#">
|
||||
<span class="aifo-nav__lang-item">
|
||||
<span class="fi fi-gb fis" aria-hidden="true"></span>
|
||||
<span>EN</span>
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="fr" href="#">
|
||||
<span class="aifo-nav__lang-item">
|
||||
<span class="fi fi-fr fis" aria-hidden="true"></span>
|
||||
<span>FR</span>
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="vi" href="#">
|
||||
<span class="aifo-nav__lang-item">
|
||||
<span class="fi fi-vi fis" aria-hidden="true"></span>
|
||||
<span>VN</span>
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="pt" href="#">
|
||||
<span class="aifo-nav__lang-item">
|
||||
<span class="fi fi-pt fis" aria-hidden="true"></span>
|
||||
<span>PT</span>
|
||||
</span>
|
||||
</a>
|
||||
<a class="dropdown-item" hreflang="es" href="#">
|
||||
<span class="aifo-nav__lang-item">
|
||||
<span class="fi fi-es fis" aria-hidden="true"></span>
|
||||
<span>ES</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item d-none d-lg-flex" aria-hidden="true">
|
||||
<span class="aifo-nav__divider"></span>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="aifo-nav__login" href="#" target="_blank" rel="noopener noreferrer">Login</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="aifo-btn aifo-btn--primary aifo-btn--sm aifo-nav__cta" href="#" target="_blank" rel="noopener noreferrer">
|
||||
Start Challenge
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<!--
|
||||
AIFO button snippets — copy/paste or reference for new pages.
|
||||
Requires: assets/css/aifo-btn.css
|
||||
|
||||
Primary CTA with arrow (Figma default):
|
||||
-->
|
||||
<a href="#" class="aifo-btn aifo-btn--primary aifo-btn--arrow">Join AIFO</a>
|
||||
|
||||
<!--
|
||||
Outline / ghost — no arrow unless design shows one:
|
||||
-->
|
||||
<a href="#" class="aifo-btn aifo-btn--outline">Begin Learning</a>
|
||||
|
||||
<!--
|
||||
Alternative: inline SVG child (same look, useful inside <button>):
|
||||
-->
|
||||
<button type="button" class="aifo-btn aifo-btn--outline aifo-btn--arrow">
|
||||
Explore Growth Path
|
||||
<span class="aifo-btn__arrow" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
@@ -0,0 +1,10 @@
|
||||
根据 Figma 实现新页面 [页面名]：
|
||||
[Figma 链接]
|
||||
技术要求：
|
||||
1. 所有 CTA 按钮必须使用公共组件 assets/css/aifo-btn.css，参考 components/snippets/aifo-btn.html
|
||||
2. 橙色主按钮：class="aifo-btn aifo-btn--primary"，设计稿右侧有箭头时再加 aifo-btn--arrow
|
||||
3. 描边/次要按钮：class="aifo-btn aifo-btn--outline"，默认不加箭头
|
||||
4. 禁止新建页面私有按钮类（如 xx-btn、au2-btn），禁止内联 SVG 箭头
|
||||
5. 页面 head 引入：<link href="../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
6. 布局/导航复用现有模式：layout.js + aifo-page-bg.css（如适用）
|
||||
完成后加入 page-index 导航。
|
||||
+7
-4
@@ -88,11 +88,14 @@
|
||||
aria-roledescription="carousel"
|
||||
aria-label="Homepage hero"
|
||||
>
|
||||
<div class="home-hero-carousel__glow" aria-hidden="true"></div>
|
||||
|
||||
<div class="home-hero-carousel__inner">
|
||||
<div class="home-hero-carousel__viewport">
|
||||
<article class="home-hero-carousel__slide is-active" data-home-hero-slide aria-hidden="false">
|
||||
<article
|
||||
class="home-hero-carousel__slide is-active"
|
||||
data-home-hero-slide
|
||||
data-hero-layout-reference
|
||||
aria-hidden="false"
|
||||
>
|
||||
<div class="home-hero-carousel__slide-grid">
|
||||
<div class="home-hero-carousel__content">
|
||||
<div class="home-hero-carousel__copy">
|
||||
@@ -113,7 +116,7 @@
|
||||
Learn To Trade
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="#" class="home-hero-carousel__ai-coach">
|
||||
<a href="#" class="home-hero-carousel__ai-coach" data-hero-layout-anchor>
|
||||
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="48" height="48" decoding="async">AI Coach
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* About Us 2 — achievements stats count-up animation.
|
||||
*/
|
||||
(function () {
|
||||
var SECTION_SELECTOR = "#about-us-2 .au2-stats";
|
||||
var VALUE_SELECTOR = ".au2-stats__value[data-au2-count]";
|
||||
var DURATION_MS = 1800;
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function formatValue(value, useGrouping) {
|
||||
if (!useGrouping) return String(value);
|
||||
return value.toLocaleString("en-US");
|
||||
}
|
||||
|
||||
function parseCountOptions(el) {
|
||||
var raw = el.getAttribute("data-au2-count");
|
||||
var to = raw ? Number(raw) : NaN;
|
||||
if (!Number.isFinite(to)) return null;
|
||||
|
||||
return {
|
||||
to: to,
|
||||
prefix: el.getAttribute("data-au2-prefix") || "",
|
||||
suffix: el.getAttribute("data-au2-suffix") || "",
|
||||
grouping: el.getAttribute("data-au2-grouping") === "true",
|
||||
};
|
||||
}
|
||||
|
||||
function renderValue(el, value, options) {
|
||||
el.textContent =
|
||||
options.prefix + formatValue(value, options.grouping) + options.suffix;
|
||||
}
|
||||
|
||||
function animateValue(el, options) {
|
||||
if (el.dataset.au2Counted === "true") return;
|
||||
el.dataset.au2Counted = "true";
|
||||
|
||||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
||||
renderValue(el, options.to, options);
|
||||
return;
|
||||
}
|
||||
|
||||
var start = performance.now();
|
||||
|
||||
function tick(now) {
|
||||
var progress = Math.min((now - start) / DURATION_MS, 1);
|
||||
var current = Math.round(easeOutCubic(progress) * options.to);
|
||||
renderValue(el, current, options);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(tick);
|
||||
} else {
|
||||
renderValue(el, options.to, options);
|
||||
}
|
||||
}
|
||||
|
||||
renderValue(el, 0, options);
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function initSection(section) {
|
||||
var values = section.querySelectorAll(VALUE_SELECTOR);
|
||||
if (!values.length) return;
|
||||
|
||||
var observer = new IntersectionObserver(
|
||||
function (entries, obs) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
|
||||
values.forEach(function (el) {
|
||||
var options = parseCountOptions(el);
|
||||
if (options) animateValue(el, options);
|
||||
});
|
||||
|
||||
obs.unobserve(entry.target);
|
||||
});
|
||||
},
|
||||
{ threshold: 0.35, rootMargin: "0px 0px -40px 0px" }
|
||||
);
|
||||
|
||||
observer.observe(section);
|
||||
}
|
||||
|
||||
function init() {
|
||||
var section = document.querySelector(SECTION_SELECTOR);
|
||||
if (section) initSection(section);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* Testimonials marquee — same logic as myfundedfutures.com Reviews section:
|
||||
* - Fisher–Yates shuffle, 3 cards per row
|
||||
* - 3 rows × 3 duplicate tracks
|
||||
* - Row speeds: 125s / 75s reverse / 275s (Framer Motion durations → CSS linear)
|
||||
*/
|
||||
(function () {
|
||||
var ROW_CONFIG = [
|
||||
{ duration: 125, reverse: false },
|
||||
{ duration: 75, reverse: true },
|
||||
{ duration: 275, reverse: false },
|
||||
];
|
||||
var TRACK_COUNT = 3;
|
||||
var CARDS_PER_ROW = 3;
|
||||
|
||||
function shuffle(list) {
|
||||
var arr = list.slice();
|
||||
for (var i = arr.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var tmp = arr[i];
|
||||
arr[i] = arr[j];
|
||||
arr[j] = tmp;
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
|
||||
function pickCards(cards, count) {
|
||||
return shuffle(cards).slice(0, Math.min(count, cards.length));
|
||||
}
|
||||
|
||||
function buildTrack(cards, duration, reverse, trackIndex) {
|
||||
var track = document.createElement('div');
|
||||
track.className =
|
||||
'au2-testimonials__track' + (reverse ? ' au2-testimonials__track--reverse' : '');
|
||||
track.style.setProperty('--duration', duration + 's');
|
||||
if (trackIndex > 0) {
|
||||
track.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
|
||||
cards.forEach(function (card) {
|
||||
track.appendChild(card.cloneNode(true));
|
||||
});
|
||||
|
||||
return track;
|
||||
}
|
||||
|
||||
function buildRow(cards, config) {
|
||||
var row = document.createElement('div');
|
||||
row.className = 'au2-testimonials__row';
|
||||
var picked = pickCards(cards, CARDS_PER_ROW);
|
||||
|
||||
for (var i = 0; i < TRACK_COUNT; i++) {
|
||||
row.appendChild(buildTrack(picked, config.duration, config.reverse, i));
|
||||
}
|
||||
|
||||
return row;
|
||||
}
|
||||
|
||||
function initAu2TestimonialsMarquee() {
|
||||
var root = document.querySelector('[data-au2-testimonials-marquee]');
|
||||
if (!root) return;
|
||||
|
||||
var source = root.querySelector('.au2-testimonials__source');
|
||||
var rowsEl = root.querySelector('.au2-testimonials__rows');
|
||||
if (!source || !rowsEl) return;
|
||||
|
||||
var cards = Array.prototype.slice.call(source.querySelectorAll('.au2-testimonial'));
|
||||
if (!cards.length) return;
|
||||
|
||||
ROW_CONFIG.forEach(function (config) {
|
||||
rowsEl.appendChild(buildRow(cards, config));
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initAu2TestimonialsMarquee);
|
||||
} else {
|
||||
initAu2TestimonialsMarquee();
|
||||
}
|
||||
})();
|
||||
+183
-1
@@ -1,10 +1,183 @@
|
||||
/**
|
||||
* Home hero carousel — autoplay + dot navigation + mobile swipe
|
||||
* Home hero carousel — autoplay + dot navigation + mobile swipe + layout sync
|
||||
*
|
||||
* Layout contract (extensible per banner):
|
||||
* data-hero-layout-reference — slide that defines carousel height
|
||||
* data-hero-layout-anchor — element whose bottom anchors dot position
|
||||
* --hero-coach-dots-gap — gap between anchor bottom and dots top (default 35px)
|
||||
* Mobile: .is-banner-active fixes dots to viewport bottom while banner is visible
|
||||
*/
|
||||
(function () {
|
||||
var AUTOPLAY_MS = 5000;
|
||||
var SWIPE_THRESHOLD = 48;
|
||||
var MOBILE_MQ = '(max-width: 991.98px)';
|
||||
var DESKTOP_MQ = '(min-width: 992px)';
|
||||
|
||||
function readPx(styles, name, fallback) {
|
||||
var value = parseFloat(styles.getPropertyValue(name));
|
||||
return Number.isFinite(value) ? value : fallback;
|
||||
}
|
||||
|
||||
function getLayoutScope(root) {
|
||||
return root.closest('#homepage') || root;
|
||||
}
|
||||
|
||||
function clearMeasuredLayout(scope, root) {
|
||||
[
|
||||
'--hero-reference-content-bottom',
|
||||
'--hero-reference-viewport-height',
|
||||
'--hero-reference-dots-top',
|
||||
'--hero-mobile-dots-reserve',
|
||||
'--hero-dots-y',
|
||||
].forEach(function (name) {
|
||||
scope.style.removeProperty(name);
|
||||
});
|
||||
|
||||
if (root) {
|
||||
var dots = root.querySelector('.home-hero-carousel__dots');
|
||||
if (dots) {
|
||||
dots.removeAttribute('data-hero-dots-positioned');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function syncHeroLayout(root) {
|
||||
var inner = root.querySelector('.home-hero-carousel__inner');
|
||||
var viewport = root.querySelector('.home-hero-carousel__viewport');
|
||||
if (!inner || !viewport) return;
|
||||
|
||||
var referenceSlide = root.querySelector('[data-hero-layout-reference]')
|
||||
|| root.querySelector('[data-home-hero-slide]');
|
||||
if (!referenceSlide) return;
|
||||
|
||||
var anchor = referenceSlide.querySelector('[data-hero-layout-anchor]')
|
||||
|| referenceSlide.querySelector('.home-hero-carousel__ai-coach')
|
||||
|| referenceSlide.querySelector('.home-hero-carousel__actions :last-child');
|
||||
if (!anchor) return;
|
||||
|
||||
var scope = getLayoutScope(root);
|
||||
var styles = getComputedStyle(scope);
|
||||
var coachDotsGap = readPx(styles, '--hero-coach-dots-gap', 35);
|
||||
var dotsHeight = readPx(styles, '--hero-dots-height', 10);
|
||||
var innerPaddingBottom = readPx(styles, '--hero-inner-padding-bottom', 40);
|
||||
var isDesktop = window.matchMedia(DESKTOP_MQ).matches;
|
||||
|
||||
if (isDesktop) {
|
||||
var innerRect = inner.getBoundingClientRect();
|
||||
var viewportRect = viewport.getBoundingClientRect();
|
||||
var anchorRect = anchor.getBoundingClientRect();
|
||||
|
||||
var contentBottom = Math.ceil(anchorRect.bottom - viewportRect.top);
|
||||
var viewportHeight = contentBottom + coachDotsGap;
|
||||
var dotsTop = Math.ceil(anchorRect.bottom - innerRect.top + coachDotsGap);
|
||||
var dotsBottomY = dotsTop + dotsHeight + innerPaddingBottom;
|
||||
|
||||
scope.style.setProperty('--hero-reference-content-bottom', contentBottom + 'px');
|
||||
scope.style.setProperty('--hero-reference-viewport-height', viewportHeight + 'px');
|
||||
scope.style.setProperty('--hero-reference-dots-top', dotsTop + 'px');
|
||||
scope.style.setProperty('--hero-dots-y', dotsBottomY + 'px');
|
||||
root.setAttribute('data-hero-layout-synced', 'desktop');
|
||||
|
||||
var dots = root.querySelector('.home-hero-carousel__dots');
|
||||
if (dots) {
|
||||
dots.setAttribute('data-hero-dots-positioned', 'true');
|
||||
}
|
||||
root.classList.remove('is-banner-active');
|
||||
return;
|
||||
}
|
||||
|
||||
clearMeasuredLayout(scope, root);
|
||||
|
||||
var viewportRect = viewport.getBoundingClientRect();
|
||||
var slideGrid = referenceSlide.querySelector('.home-hero-carousel__slide-grid');
|
||||
var visual = referenceSlide.querySelector('.home-hero-carousel__visual');
|
||||
var mobileFixedDotsBottom = readPx(styles, '--hero-mobile-fixed-dots-bottom', 16);
|
||||
var imageScale = readPx(styles, '--hero-visual-image-scale', 1.06);
|
||||
|
||||
if (!slideGrid) return;
|
||||
|
||||
var visualBottom = visual
|
||||
? visual.getBoundingClientRect().bottom - viewportRect.top
|
||||
: slideGrid.getBoundingClientRect().bottom - viewportRect.top;
|
||||
|
||||
if (visual) {
|
||||
var img = visual.querySelector('img');
|
||||
if (img && imageScale > 1) {
|
||||
var imgHeight = img.getBoundingClientRect().height;
|
||||
visualBottom += Math.ceil((imgHeight * imageScale - imgHeight) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
var viewportHeight = Math.ceil(visualBottom);
|
||||
var dotsReserve = dotsHeight + mobileFixedDotsBottom;
|
||||
var homepageRect = scope.getBoundingClientRect();
|
||||
var dotsBottomY = Math.ceil(
|
||||
viewportRect.top - homepageRect.top + viewportHeight + dotsReserve + innerPaddingBottom
|
||||
);
|
||||
|
||||
scope.style.setProperty('--hero-reference-viewport-height', viewportHeight + 'px');
|
||||
scope.style.setProperty('--hero-mobile-dots-reserve', dotsReserve + 'px');
|
||||
scope.style.setProperty('--hero-dots-y', dotsBottomY + 'px');
|
||||
|
||||
root.setAttribute('data-hero-layout-synced', 'mobile');
|
||||
}
|
||||
|
||||
function bindMobileFixedDots(root) {
|
||||
if (typeof IntersectionObserver === 'undefined') return;
|
||||
|
||||
var mobileMq = window.matchMedia(MOBILE_MQ);
|
||||
var observer = new IntersectionObserver(
|
||||
function (entries) {
|
||||
if (!mobileMq.matches) {
|
||||
root.classList.remove('is-banner-active');
|
||||
return;
|
||||
}
|
||||
root.classList.toggle('is-banner-active', entries[0].isIntersecting);
|
||||
},
|
||||
{
|
||||
threshold: 0,
|
||||
rootMargin: '0px 0px -8% 0px',
|
||||
}
|
||||
);
|
||||
|
||||
observer.observe(root);
|
||||
|
||||
mobileMq.addEventListener('change', function () {
|
||||
if (!mobileMq.matches) {
|
||||
root.classList.remove('is-banner-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindHeroLayoutSync(root) {
|
||||
var sync = function () {
|
||||
syncHeroLayout(root);
|
||||
};
|
||||
|
||||
sync();
|
||||
|
||||
if (typeof ResizeObserver !== 'undefined') {
|
||||
var observer = new ResizeObserver(sync);
|
||||
observer.observe(root);
|
||||
var inner = root.querySelector('.home-hero-carousel__inner');
|
||||
var referenceSlide = root.querySelector('[data-hero-layout-reference]')
|
||||
|| root.querySelector('[data-home-hero-slide]');
|
||||
if (inner) observer.observe(inner);
|
||||
if (referenceSlide) observer.observe(referenceSlide);
|
||||
var visual = referenceSlide.querySelector('.home-hero-carousel__visual');
|
||||
if (visual) observer.observe(visual);
|
||||
}
|
||||
|
||||
var resizeTimer;
|
||||
window.addEventListener('resize', function () {
|
||||
window.clearTimeout(resizeTimer);
|
||||
resizeTimer = window.setTimeout(sync, 100);
|
||||
});
|
||||
|
||||
if (document.fonts && document.fonts.ready) {
|
||||
document.fonts.ready.then(sync);
|
||||
}
|
||||
}
|
||||
|
||||
function initHomeHeroCarousel(root) {
|
||||
if (root.getAttribute('data-carousel-ready') === 'true') return;
|
||||
@@ -133,6 +306,8 @@
|
||||
});
|
||||
|
||||
bindTouchSwipe();
|
||||
bindHeroLayoutSync(root);
|
||||
bindMobileFixedDots(root);
|
||||
setSlide(0);
|
||||
startAutoplay();
|
||||
}
|
||||
@@ -142,6 +317,13 @@
|
||||
}
|
||||
|
||||
window.AifoHomeHeroCarouselInit = initHomeHeroCarousel;
|
||||
window.AifoHomeHeroCarouselSyncLayout = function (root) {
|
||||
if (root) {
|
||||
syncHeroLayout(root);
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll('[data-home-hero-carousel]').forEach(syncHeroLayout);
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', boot);
|
||||
|
||||
@@ -6,6 +6,12 @@
|
||||
var NAV_URL = "/components/nav.html";
|
||||
var FOOTER_URL = "/components/footer.html";
|
||||
var FOOT_CSS_ID = "aifo-foot-styles";
|
||||
var NAV_CSS_ID = "aifo-nav-styles";
|
||||
var NAV_CSS_URL = "/assets/css/nav.css";
|
||||
var AIFO_BTN_CSS_ID = "aifo-btn-styles";
|
||||
var AIFO_BTN_CSS_URL = "/assets/css/aifo-btn.css";
|
||||
var ICONFONT_CSS_ID = "aifo-iconfont-styles";
|
||||
var ICONFONT_CSS_URL = "/assets/vendor/icon/iconfont.css";
|
||||
var FLAG_ICONS_CSS_ID = "aifo-flag-icons-styles";
|
||||
var FLAG_ICONS_CSS_URL = "/assets/flagicon/css/flag-icons.min.css";
|
||||
var FOOT_JS_URL = "/js/footer.js";
|
||||
@@ -114,6 +120,30 @@
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
function ensureNavStyles() {
|
||||
if (!document.getElementById(ICONFONT_CSS_ID)) {
|
||||
var iconLink = document.createElement("link");
|
||||
iconLink.id = ICONFONT_CSS_ID;
|
||||
iconLink.rel = "stylesheet";
|
||||
iconLink.href = ICONFONT_CSS_URL;
|
||||
document.head.appendChild(iconLink);
|
||||
}
|
||||
if (!document.getElementById(NAV_CSS_ID)) {
|
||||
var navLink = document.createElement("link");
|
||||
navLink.id = NAV_CSS_ID;
|
||||
navLink.rel = "stylesheet";
|
||||
navLink.href = NAV_CSS_URL;
|
||||
document.head.appendChild(navLink);
|
||||
}
|
||||
if (!document.getElementById(AIFO_BTN_CSS_ID)) {
|
||||
var btnLink = document.createElement("link");
|
||||
btnLink.id = AIFO_BTN_CSS_ID;
|
||||
btnLink.rel = "stylesheet";
|
||||
btnLink.href = AIFO_BTN_CSS_URL;
|
||||
document.head.appendChild(btnLink);
|
||||
}
|
||||
}
|
||||
|
||||
function loadFooterScript(callback) {
|
||||
if (footJsLoaded) {
|
||||
callback();
|
||||
@@ -139,6 +169,25 @@
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
var navIconsJsLoading = false;
|
||||
var navIconsJsLoaded = false;
|
||||
|
||||
function loadNavIconsScript() {
|
||||
if (navIconsJsLoaded || navIconsJsLoading) return;
|
||||
navIconsJsLoading = true;
|
||||
var script = document.createElement("script");
|
||||
script.src = "/js/nav-icons.js";
|
||||
script.onload = function () {
|
||||
navIconsJsLoaded = true;
|
||||
navIconsJsLoading = false;
|
||||
};
|
||||
script.onerror = function () {
|
||||
navIconsJsLoading = false;
|
||||
console.error("[layout.js] Failed to load /js/nav-icons.js");
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
function initFooterModule(root) {
|
||||
ensureFooterStyles();
|
||||
updateCopyrightYear(root);
|
||||
@@ -165,9 +214,11 @@
|
||||
var navHtml = parts[0];
|
||||
var footerHtml = parts[1];
|
||||
if (navHtml) {
|
||||
ensureNavStyles();
|
||||
ensureFlagIconsStyles();
|
||||
var navRoot = injectHtml("nav-container", navHtml);
|
||||
if (navRoot) highlightActiveNav(navRoot);
|
||||
loadNavIconsScript();
|
||||
}
|
||||
if (footerHtml) {
|
||||
var footerRoot = injectHtml("footer-container", footerHtml);
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Nav submenu iconfont helpers.
|
||||
* Registry: data/nav-icon-registry.json
|
||||
*
|
||||
* After uploading new glyphs to iconfont.cn and replacing iconfont.css:
|
||||
* window.aifoApplyNavIconTargets()
|
||||
* This swaps data-nav-icon-target classes onto each submenu icon.
|
||||
*/
|
||||
(function () {
|
||||
function applyNavIconTargets(root) {
|
||||
if (!root) return 0;
|
||||
var nodes = root.querySelectorAll("[data-nav-icon-target]");
|
||||
var count = 0;
|
||||
nodes.forEach(function (el) {
|
||||
var target = el.getAttribute("data-nav-icon-target");
|
||||
if (!target) return;
|
||||
el.className = "icon iconfont " + target;
|
||||
count += 1;
|
||||
});
|
||||
return count;
|
||||
}
|
||||
|
||||
window.aifoApplyNavIconTargets = function () {
|
||||
var nav = document.getElementById("nav");
|
||||
var container = document.getElementById("nav-container");
|
||||
var count = applyNavIconTargets(nav) + applyNavIconTargets(container);
|
||||
console.info("[nav-icons] Applied " + count + " target icon class(es).");
|
||||
return count;
|
||||
};
|
||||
|
||||
document.addEventListener("aifo:layout-ready", function () {
|
||||
if (window.AIFO_NAV_USE_TARGET_ICONS === true) {
|
||||
window.aifoApplyNavIconTargets();
|
||||
}
|
||||
});
|
||||
})();
|
||||
+8
-8
@@ -1,22 +1,22 @@
|
||||
/**
|
||||
* Partnership page — FAQ accordion.
|
||||
* Partnership page — FAQ accordion (Figma export style).
|
||||
*/
|
||||
(function () {
|
||||
function initFaq(root) {
|
||||
if (!root) return;
|
||||
|
||||
root.querySelectorAll(".faq-header").forEach(function (header) {
|
||||
root.querySelectorAll(".partnership-faq__header").forEach(function (header) {
|
||||
header.addEventListener("click", function () {
|
||||
var item = header.closest(".faq-item");
|
||||
var item = header.closest(".partnership-faq__item");
|
||||
if (!item) return;
|
||||
|
||||
var isActive = item.classList.contains("active");
|
||||
root.querySelectorAll(".faq-item").forEach(function (el) {
|
||||
el.classList.remove("active");
|
||||
var isOpen = item.classList.contains("is-open");
|
||||
root.querySelectorAll(".partnership-faq__item").forEach(function (el) {
|
||||
el.classList.remove("is-open");
|
||||
});
|
||||
|
||||
if (!isActive) {
|
||||
item.classList.add("active");
|
||||
if (!isOpen) {
|
||||
item.classList.add("is-open");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Loads support-cta.section.html into #support-cta-module
|
||||
*/
|
||||
(function () {
|
||||
var MODULE_URL = '/pages/modules/support-cta.section.html';
|
||||
|
||||
function loadSupportCtaModule() {
|
||||
var container = document.getElementById('support-cta-module');
|
||||
if (!container) return;
|
||||
|
||||
fetch(MODULE_URL, { credentials: 'same-origin' })
|
||||
.then(function (res) {
|
||||
if (!res.ok) throw new Error('Failed to load ' + MODULE_URL);
|
||||
return res.text();
|
||||
})
|
||||
.then(function (html) {
|
||||
container.innerHTML = html;
|
||||
document.dispatchEvent(new CustomEvent('aifo:support-cta-ready'));
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error('[support-cta-module.js]', err);
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', loadSupportCtaModule);
|
||||
} else {
|
||||
loadSupportCtaModule();
|
||||
}
|
||||
})();
|
||||
+98
-124
@@ -11,7 +11,8 @@
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-page-bg.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-section-glow.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../assets/flagicon/css/flag-icons.min.css">
|
||||
<link type="text/css" href="../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/modules/support-cta.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/about-us-2.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="aifo-bg-primary" id="about-us-2">
|
||||
@@ -30,14 +31,13 @@
|
||||
<section class="au2-hero" aria-labelledby="au2-hero-title">
|
||||
<div class="au2-hero__glow" aria-hidden="true"></div>
|
||||
<div class="au2-hero__inner">
|
||||
<h1 class="au2-hero__title" id="au2-hero-title">About AIFO</h1>
|
||||
<h1 class="au2-hero__title" id="au2-hero-title">About <span class="text-orange">AIFO</span></h1>
|
||||
<p class="au2-hero__desc">
|
||||
AIFO is a prop trading firm built to give traders transparent funding, professional tools,
|
||||
and a community that supports real growth — from your first challenge to funded success.
|
||||
We are a prop trading platform that focuses on empowering traders through education, community, and innovative support, helping our traders thrive in the financial markets.
|
||||
</p>
|
||||
<div class="au2-hero__actions">
|
||||
<a href="#" class="au2-btn au2-btn--primary">Get Started</a>
|
||||
<a href="/pages/academy.html" class="au2-btn au2-btn--outline">Begin Learning</a>
|
||||
<a href="#" class="aifo-btn aifo-btn--primary aifo-btn--arrow">Join AIFO</a>
|
||||
<a href="/pages/academy.html" class="aifo-btn aifo-btn--outline">Begin Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -48,15 +48,16 @@
|
||||
<p class="au2-label">About Us</p>
|
||||
<h2 class="au2-intro__title" id="au2-intro-title">AIFO was built for traders.</h2>
|
||||
<p class="au2-intro__text">
|
||||
Here at AIFO, our team consists of experienced traders and financial professionals who truly
|
||||
understand the markets. We're committed to supporting your growth with clear rules, practical
|
||||
tools, and quality educational resources. Our goal is simple: to help you become a more
|
||||
confident and consistent trader.
|
||||
<p class="au2-intro__text-item">
|
||||
Our mission is to empower traders through education, community, and technological innovation. Through our academy, community, and innovative tools, we help traders learn, grow, and navigate the markets with greater confidence.
|
||||
</p>
|
||||
<p class="au2-intro__text-item"> Whether you're taking your first steps in trading or returning with renewed determination, AIFO provides support, knowledge, and technology to help you move forward.</p>
|
||||
<p class="au2-intro__text-item"> Because every trader deserves the opportunity to reach their full potential.</p>
|
||||
</p>
|
||||
</div>
|
||||
<div class="au2-intro__visual">
|
||||
<img
|
||||
src="../assets/images/demo/about_us.png"
|
||||
src="../assets/images/demo/image 80.png"
|
||||
alt="AIFO team in a modern trading office"
|
||||
width="560"
|
||||
height="360"
|
||||
@@ -66,185 +67,155 @@
|
||||
</section>
|
||||
|
||||
<!-- Stats -->
|
||||
<section class="au2-stats" aria-label="AIFO achievements">
|
||||
<div class="au2-stats__bar">
|
||||
<div class="au2-stats__item">
|
||||
<p class="au2-stats__value">$25M+</p>
|
||||
<p class="au2-stats__label">Payouts Distributed</p>
|
||||
</div>
|
||||
<div class="au2-stats__item">
|
||||
<p class="au2-stats__value">4,200+</p>
|
||||
<section class="au2-stats" aria-labelledby="au2-stats-title">
|
||||
<h2 class="au2-stats__title" id="au2-stats-title">Our Achievements</h2>
|
||||
<div class="au2-stats__grid">
|
||||
<article class="au2-stats__card">
|
||||
<p class="au2-stats__value" data-au2-count="25" data-au2-prefix="$" data-au2-suffix="M+">$25M+</p>
|
||||
<p class="au2-stats__label">Payouts Completed</p>
|
||||
</article>
|
||||
<article class="au2-stats__card">
|
||||
<p class="au2-stats__value" data-au2-count="4300" data-au2-suffix="+" data-au2-grouping="true">4,300+</p>
|
||||
<p class="au2-stats__label">Active Traders</p>
|
||||
</div>
|
||||
<div class="au2-stats__item">
|
||||
<p class="au2-stats__value">85+</p>
|
||||
<p class="au2-stats__label">Countries Represented</p>
|
||||
</div>
|
||||
<div class="au2-stats__item">
|
||||
<p class="au2-stats__value">50+</p>
|
||||
</article>
|
||||
<article class="au2-stats__card">
|
||||
<p class="au2-stats__value" data-au2-count="85" data-au2-suffix="+">85+</p>
|
||||
<p class="au2-stats__label">Countries Served</p>
|
||||
</article>
|
||||
<article class="au2-stats__card">
|
||||
<p class="au2-stats__value" data-au2-count="50" data-au2-suffix="+">50+</p>
|
||||
<p class="au2-stats__label">Team Members</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Banner -->
|
||||
<section class="au2-cta aifo-section-glow-host" aria-labelledby="au2-cta-title">
|
||||
<div class="aifo-glow-right" aria-hidden="true"></div>
|
||||
<div class="au2-cta__glow" aria-hidden="true"></div>
|
||||
<div class="au2-cta__inner">
|
||||
<h2 class="au2-cta__title" id="au2-cta-title">
|
||||
<span class="text-orange">Ready</span> To Become A Prop Trader?
|
||||
</h2>
|
||||
<p class="au2-cta__desc">
|
||||
Join thousands of traders who are scaling their skills with AIFO's transparent funding programs.
|
||||
</p>
|
||||
<a href="#" class="au2-btn au2-btn--primary">Get Started</a>
|
||||
<section class="au2-cta" aria-labelledby="au2-cta-title">
|
||||
<div class="au2-cta__panel">
|
||||
<div class="au2-cta__top-glow" aria-hidden="true"></div>
|
||||
<div class="au2-cta__inner">
|
||||
<div class="au2-cta__copy">
|
||||
<h2 class="au2-cta__title" id="au2-cta-title">
|
||||
<span class="text-orange">Ready </span>To Become A Prop Trader?
|
||||
</h2>
|
||||
<p class="au2-cta__desc">
|
||||
Join today by registering, purchasing a challenge, and progressing to a funded account.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" class="aifo-btn aifo-btn--primary">Get Funded</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Values -->
|
||||
<section class="au2-values" aria-labelledby="au2-values-title">
|
||||
<h2 class="au2-section-title au2-section-title--center" id="au2-values-title">Our Core Values</h2>
|
||||
<!-- <div class="au2-values__glow" aria-hidden="true"></div> -->
|
||||
<h2 class="au2-values__title" id="au2-values-title">
|
||||
Our <span class="text-orange">Core Values</span>
|
||||
</h2>
|
||||
<div class="au2-values__grid">
|
||||
<article class="au2-value-card">
|
||||
<div class="au2-value-card__icon" aria-hidden="true">
|
||||
<img src="../assets/images/backgrounds/icon/icon-em-1.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/demo/about/Frame%201984078442.svg" alt="" width="87" height="89" decoding="async">
|
||||
</div>
|
||||
<h3 class="au2-value-card__title">Education</h3>
|
||||
<p class="au2-value-card__text">
|
||||
Empowering traders with practical learning resources, expert guidance, and tools that turn
|
||||
market knowledge into consistent performance.
|
||||
Education sits at the heart of everything we do. We are committed to helping traders build the knowledge, skills, and market understanding needed to navigate the financial markets with confidence.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-value-card">
|
||||
<div class="au2-value-card__icon" aria-hidden="true">
|
||||
<img src="../assets/images/backgrounds/icon/icon-em-2.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/demo/about/Frame%201984078441.svg" alt="" width="87" height="89" decoding="async">
|
||||
</div>
|
||||
<h3 class="au2-value-card__title">Community</h3>
|
||||
<p class="au2-value-card__text">
|
||||
A supportive network where traders share insights, learn together, and celebrate every step
|
||||
of the journey toward funded trading success.
|
||||
Trading should never be a journey taken alone. AIFO is creating a global community where traders can access support, exchange knowledge, and grow together through shared learning and collaboration.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-value-card">
|
||||
<div class="au2-value-card__icon" aria-hidden="true">
|
||||
<img src="../assets/images/backgrounds/icon/icon-help.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/demo/about/Frame%201984078442.svg" alt="" width="87" height="89" decoding="async">
|
||||
</div>
|
||||
<h3 class="au2-value-card__title">Innovation</h3>
|
||||
<p class="au2-value-card__text">
|
||||
Cutting-edge technology and AI-powered guidance that help you trade with confidence, manage
|
||||
risk, and stay within the rules.
|
||||
Innovation is central to our vision. Through AI and technology, we develop tools that help traders learn, grow, and make more informed decisions.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="au2-testimonials" aria-labelledby="au2-testimonials-title">
|
||||
<h2 class="au2-section-title au2-section-title--center" id="au2-testimonials-title">
|
||||
What Traders Are <span class="text-orange">Saying</span>
|
||||
<section class="au2-testimonials" data-au2-testimonials-marquee aria-labelledby="au2-testimonials-title">
|
||||
<h2 class="au2-testimonials__title" id="au2-testimonials-title">
|
||||
What <span class="text-orange">Traders</span> Are Saying
|
||||
</h2>
|
||||
<p class="au2-section-desc au2-section-desc--center">
|
||||
Hear from real traders who have passed challenges and received payouts with AIFO.
|
||||
<p class="au2-testimonials__desc">
|
||||
Don't just take our word for it. Hear directly from traders who have experienced AIFO for themselves.
|
||||
</p>
|
||||
<div class="au2-testimonials__grid">
|
||||
<div class="au2-testimonials__marquee" aria-live="polite">
|
||||
<div class="au2-testimonials__fade au2-testimonials__fade--left" aria-hidden="true"></div>
|
||||
<div class="au2-testimonials__rows"></div>
|
||||
<div class="au2-testimonials__fade au2-testimonials__fade--right" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="au2-testimonials__source" hidden>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-gb au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">David R.</p>
|
||||
<p class="au2-testimonial__meta">$100,000 Account</p>
|
||||
</div>
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">DR</span>
|
||||
<p class="au2-testimonial__name">Daniel R.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"Clear rules, fast payouts, and a team that actually understands what traders need."
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial au2-testimonial--wide">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-ca au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">Marcus T.</p>
|
||||
<p class="au2-testimonial__meta">$50,000 Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"I've been trading for years, and this is by far the best experience I've had with a prop firm.
|
||||
The evaluation process is fair and the support team is responsive."
|
||||
The rules were clear from the start, and the dashboard made it easy to track where I was in the process. Support also replied quickly when I had a question about my account.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-au au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">Sarah L.</p>
|
||||
<p class="au2-testimonial__meta">$25,000 Account</p>
|
||||
</div>
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">MT</span>
|
||||
<p class="au2-testimonial__name">Marcus T.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"AIFO helped me stay disciplined. The educational content made a real difference."
|
||||
What I liked most was how straightforward everything felt. The challenge details, account status, and trading objectives were all easy to understand without needing to search around.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-gb au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">Alex M.</p>
|
||||
<p class="au2-testimonial__meta">$50,000 Account</p>
|
||||
</div>
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">AM</span>
|
||||
<p class="au2-testimonial__name">Alex M.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"AI Coach helped me control risk and stay within the rules. Highly recommend."
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial au2-testimonial--wide">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-ca au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">James K.</p>
|
||||
<p class="au2-testimonial__meta">$200,000 Account</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"From challenge to payout, everything was transparent. No hidden fees, no surprises —
|
||||
just a professional platform built for serious traders."
|
||||
AIFO feels more organized than a lot of platforms I've tried. The account dashboard is clean, the rules are easy to follow, and the support team helped me sort out a setup question quickly.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="fi fi-au au2-testimonial__flag" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="au2-testimonial__name">Emma W.</p>
|
||||
<p class="au2-testimonial__meta">$25,000 Account</p>
|
||||
</div>
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">AM</span>
|
||||
<p class="au2-testimonial__name">Anatoliy M.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
"The community on Discord is incredibly supportive. You're never trading alone."
|
||||
The challenge rules are easy to understand, and the overall user experience is solid. I especially liked that the dashboard shows the important account information in one place.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">KC</span>
|
||||
<p class="au2-testimonial__name">Anatoliy M.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
The best futures prop firm to trade with. The rules are easy to follow. The website UI is super good. Customer support is the best — they helped me resolve an issue within minutes through email.
|
||||
</p>
|
||||
</article>
|
||||
<article class="au2-testimonial">
|
||||
<div class="au2-testimonial__head">
|
||||
<span class="au2-testimonial__avatar" aria-hidden="true">FT</span>
|
||||
<p class="au2-testimonial__name">Forex T.</p>
|
||||
</div>
|
||||
<p class="au2-testimonial__quote">
|
||||
AIFO keeps things simple and transparent. From the account setup to checking progress, everything felt structured and easy to manage.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Support -->
|
||||
<section class="au2-support" aria-labelledby="au2-support-title">
|
||||
<div class="au2-support__content">
|
||||
<h2 class="au2-support__title" id="au2-support-title">Not found what you're looking for?</h2>
|
||||
<p class="au2-support__desc">Chat with us directly or send us an email — we're here to help.</p>
|
||||
<div class="au2-support__actions">
|
||||
<a href="#" class="au2-btn au2-btn--primary">Chat with us</a>
|
||||
<a href="/pages/contact.html" class="au2-btn au2-btn--outline">Send us an email</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="au2-support__visual" aria-hidden="true">
|
||||
<img
|
||||
src="../assets/images/promotion-activity/hero-layer-3.png"
|
||||
alt=""
|
||||
width="400"
|
||||
height="400"
|
||||
decoding="async"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
<div id="support-cta-module"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -256,5 +227,8 @@
|
||||
<script src="../assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
|
||||
<script src="../assets/js/theme.js"></script>
|
||||
<script src="/js/layout.js"></script>
|
||||
<script src="/js/about-us-2-stats.js"></script>
|
||||
<script src="/js/au2-testimonials-marquee.js"></script>
|
||||
<script src="/js/support-cta-module.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -6,11 +6,14 @@
|
||||
aria-roledescription="carousel"
|
||||
aria-label="Homepage hero"
|
||||
>
|
||||
<div class="home-hero-carousel__glow" aria-hidden="true"></div>
|
||||
|
||||
<div class="home-hero-carousel__inner">
|
||||
<div class="home-hero-carousel__viewport">
|
||||
<article class="home-hero-carousel__slide is-active" data-home-hero-slide aria-hidden="false">
|
||||
<article
|
||||
class="home-hero-carousel__slide is-active"
|
||||
data-home-hero-slide
|
||||
data-hero-layout-reference
|
||||
aria-hidden="false"
|
||||
>
|
||||
<div class="home-hero-carousel__slide-grid">
|
||||
<div class="home-hero-carousel__content">
|
||||
<div class="home-hero-carousel__copy">
|
||||
@@ -31,7 +34,7 @@
|
||||
Learn To Trade
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="#" class="home-hero-carousel__ai-coach">
|
||||
<a href="#" class="home-hero-carousel__ai-coach" data-hero-layout-anchor>
|
||||
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="48" height="48" decoding="async">
|
||||
AI Coach
|
||||
</a>
|
||||
@@ -91,7 +94,6 @@
|
||||
<div class="home-hero-carousel__actions">
|
||||
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--primary">
|
||||
Choose Your Challenge
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 12V4M3 12l3-3M3 12l3 3M13 4v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="#" class="home-hero-carousel__btn home-hero-carousel__btn--ghost home-hero-carousel__btn--ai-coach">
|
||||
<img src="./assets/images/banner/ChatGPT Image Jul 1, 2026, 01_34_31 PM.png" alt="" width="45" height="45" decoding="async" aria-hidden="true">
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>Support CTA Module</title>
|
||||
<link href="../../assets/css/style.css" rel="stylesheet">
|
||||
<link type="text/css" href="../../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
<link type="text/css" href="../../assets/css/modules/support-cta.css" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 48px 16px;
|
||||
background: #070400;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="support-cta-module" style="max-width: 1128px; margin: 0 auto;"></div>
|
||||
|
||||
<script src="/js/support-cta-module.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!-- Support CTA floor — include inside #support-cta-module -->
|
||||
<section class="aifo-support-cta" data-support-cta-module aria-labelledby="aifo-support-cta-title">
|
||||
<div class="aifo-support-cta__panel">
|
||||
<div class="aifo-support-cta__visual" aria-hidden="true">
|
||||
<img
|
||||
class="aifo-support-cta__img"
|
||||
src="/assets/images/backgrounds/img-h-07.png"
|
||||
alt=""
|
||||
width="327"
|
||||
height="327"
|
||||
decoding="async"
|
||||
>
|
||||
</div>
|
||||
<div class="aifo-support-cta__content">
|
||||
<h2 class="aifo-support-cta__title" id="aifo-support-cta-title">Not found what you're looking for?</h2>
|
||||
<p class="aifo-support-cta__desc">Chat with us directly or send us an email.</p>
|
||||
<div class="aifo-support-cta__actions">
|
||||
<a href="#" class="aifo-btn aifo-btn--primary">Chat with us</a>
|
||||
<a href="/pages/contact.html" class="aifo-btn aifo-btn--outline aifo-support-cta__email-btn">
|
||||
Send us an email
|
||||
<img
|
||||
class="aifo-support-cta__arrow-icon"
|
||||
src="/assets/images/demo/about/right.svg"
|
||||
alt=""
|
||||
width="16"
|
||||
height="16"
|
||||
decoding="async"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -118,6 +118,7 @@
|
||||
<li><a class="page-index__link" href="/pages/modules/promo-compare.html">Promo Compare<small>/pages/modules/promo-compare.html</small></a></li>
|
||||
<li><a class="page-index__link" href="/pages/modules/challenge-floor.html">Challenge Floor<small>/pages/modules/challenge-floor.html</small></a></li>
|
||||
<li><a class="page-index__link" href="/pages/modules/adl-register.html">ADL Register<small>/pages/modules/adl-register.html</small></a></li>
|
||||
<li><a class="page-index__link" href="/pages/modules/support-cta.html">Support CTA<small>/pages/modules/support-cta.html</small></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
+130
-111
@@ -10,21 +10,24 @@
|
||||
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/index.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-page-bg.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/aifo-btn.css" rel="stylesheet">
|
||||
<link type="text/css" href="../assets/css/partnership.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="aifo-bg-primary" id="partnership-page">
|
||||
<div id="nav-container"></div>
|
||||
|
||||
<main class="aifo-page-bg">
|
||||
<main class="aifo-page-bg aifo-page-bg--grid">
|
||||
<div class="partnership-page">
|
||||
<section class="partnership-hero">
|
||||
<h1 class="partnership-hero__title">
|
||||
<div class="partnership-page__glow" aria-hidden="true"></div>
|
||||
|
||||
<section class="partnership-hero" aria-labelledby="partnership-hero-title">
|
||||
<h1 class="partnership-section__title" id="partnership-hero-title">
|
||||
Partnership <span class="text-orange">Program</span>
|
||||
</h1>
|
||||
<p class="partnership-hero__desc">
|
||||
Choose the partnership model that fits your audience. Drive qualified traffic and grow with AIFO.
|
||||
Choose the partnership model that fits your audience. Drive qualified sales and grow with AIFO.
|
||||
</p>
|
||||
<a href="/pages/affiliate_sigup.html" class="partnership-btn">Become a Partner</a>
|
||||
<a href="/pages/affiliate_sigup.html" class="aifo-btn aifo-btn--primary">Become AIFO partner</a>
|
||||
</section>
|
||||
|
||||
<section class="partnership-section" aria-labelledby="partnership-tiers-title">
|
||||
@@ -33,27 +36,53 @@
|
||||
</h2>
|
||||
<div class="partnership-tiers">
|
||||
<article class="partnership-tier">
|
||||
<p class="partnership-tier__rate">5%</p>
|
||||
<p class="partnership-tier__label">Commission</p>
|
||||
<p class="partnership-tier__meta">30–50 referrals</p>
|
||||
<div class="partnership-tier__head">
|
||||
<div class="partnership-tier__info">
|
||||
<p class="partnership-tier__name">Tier 1</p>
|
||||
<p class="partnership-tier__sales">20 - 49 qualified sales / month</p>
|
||||
</div>
|
||||
<img class="partnership-tier__icon" src="../assets/images/partnership/tier-1.png" alt="" width="68" height="68" loading="lazy">
|
||||
</div>
|
||||
<div class="partnership-tier__divider" aria-hidden="true"></div>
|
||||
<div class="partnership-tier__rate-box">
|
||||
<span class="partnership-tier__rate">5%</span>
|
||||
<span class="partnership-tier__label">Commission</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="partnership-tier">
|
||||
<p class="partnership-tier__rate">10%</p>
|
||||
<p class="partnership-tier__label">Commission</p>
|
||||
<p class="partnership-tier__meta">50–100 referrals</p>
|
||||
<div class="partnership-tier__head">
|
||||
<div class="partnership-tier__info">
|
||||
<p class="partnership-tier__name">Tier 2</p>
|
||||
<p class="partnership-tier__sales">50 - 99 qualified sales / month</p>
|
||||
</div>
|
||||
<img class="partnership-tier__icon" src="../assets/images/partnership/tier-2.png" alt="" width="68" height="68" loading="lazy">
|
||||
</div>
|
||||
<div class="partnership-tier__divider" aria-hidden="true"></div>
|
||||
<div class="partnership-tier__rate-box">
|
||||
<span class="partnership-tier__rate">10%</span>
|
||||
<span class="partnership-tier__label">Commission</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="partnership-tier partnership-tier--featured">
|
||||
<span class="partnership-tier__badge" aria-hidden="true">
|
||||
<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 0L27.32 8v16L14 32 .68 24V8L14 0z" fill="currentColor" opacity="0.25"/>
|
||||
<path d="M14 4l9.24 5.33v10.67L14 25.33 4.76 20V9.33L14 4z" fill="currentColor"/>
|
||||
</svg>
|
||||
</span>
|
||||
<p class="partnership-tier__rate">15%</p>
|
||||
<p class="partnership-tier__label">Commission</p>
|
||||
<p class="partnership-tier__meta">100+ referrals</p>
|
||||
<div class="partnership-tier__head">
|
||||
<div class="partnership-tier__info">
|
||||
<p class="partnership-tier__name">Tier 3</p>
|
||||
<p class="partnership-tier__sales">100+ qualified sales / month</p>
|
||||
</div>
|
||||
<img class="partnership-tier__icon" src="../assets/images/partnership/tier-3.png" alt="" width="68" height="68" loading="lazy">
|
||||
</div>
|
||||
<div class="partnership-tier__divider" aria-hidden="true"></div>
|
||||
<div class="partnership-tier__rate-box">
|
||||
<span class="partnership-tier__rate">15%</span>
|
||||
<span class="partnership-tier__label">Commission</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<p class="partnership-tiers__note">
|
||||
Qualified sales exclude refunds, chargebacks, fraud, self-referrals, invalid traffic, coupon arbitrage, and other non-qualifying activity.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="partnership-section" aria-labelledby="partnership-why-title">
|
||||
@@ -62,68 +91,69 @@
|
||||
</h2>
|
||||
<div class="partnership-benefits">
|
||||
<article class="partnership-benefit">
|
||||
<div class="partnership-benefit__visual" aria-hidden="true">
|
||||
<img src="../assets/images/promotion-activity-1/bene-1.svg" alt="" width="120" height="120" loading="lazy">
|
||||
<div class="partnership-benefit__visual">
|
||||
<div class="partnership-benefit__glow" aria-hidden="true"></div>
|
||||
<img src="../assets/images/partnership/why-1.png" alt="" width="520" height="260" loading="lazy">
|
||||
</div>
|
||||
<h3 class="partnership-benefit__title">Unbeatable Commissions</h3>
|
||||
<p class="partnership-benefit__desc">Earn industry-leading revenue share on every qualified sale you refer.</p>
|
||||
<p class="partnership-benefit__label">Lifetime Commissions on qualified sales</p>
|
||||
</article>
|
||||
<article class="partnership-benefit">
|
||||
<div class="partnership-benefit__visual" aria-hidden="true">
|
||||
<img src="../assets/images/promotion-activity-1/bene-2.svg" alt="" width="120" height="120" loading="lazy">
|
||||
<div class="partnership-benefit__visual">
|
||||
<div class="partnership-benefit__glow" aria-hidden="true"></div>
|
||||
<img src="../assets/images/partnership/why-2.png" alt="" width="520" height="260" loading="lazy">
|
||||
</div>
|
||||
<h3 class="partnership-benefit__title">Super Fast Payouts</h3>
|
||||
<p class="partnership-benefit__desc">Get paid quickly with transparent tracking and reliable settlement cycles.</p>
|
||||
<p class="partnership-benefit__label">Exclusive discounts and giveaways</p>
|
||||
</article>
|
||||
<article class="partnership-benefit">
|
||||
<div class="partnership-benefit__visual" aria-hidden="true">
|
||||
<img src="../assets/images/promotion-activity-1/bene-3.svg" alt="" width="120" height="120" loading="lazy">
|
||||
<div class="partnership-benefit__visual">
|
||||
<div class="partnership-benefit__glow" aria-hidden="true"></div>
|
||||
<img src="../assets/images/partnership/why-3.png" alt="" width="520" height="260" loading="lazy">
|
||||
</div>
|
||||
<h3 class="partnership-benefit__title">Ready-to-Use Assets</h3>
|
||||
<p class="partnership-benefit__desc">Launch faster with banners, links, and promotional materials built for conversion.</p>
|
||||
<p class="partnership-benefit__label">Dedicated support for partners</p>
|
||||
</article>
|
||||
<article class="partnership-benefit">
|
||||
<div class="partnership-benefit__visual" aria-hidden="true">
|
||||
<img src="../assets/images/promotion-activity-1/bene-4.svg" alt="" width="120" height="120" loading="lazy">
|
||||
<div class="partnership-benefit__visual">
|
||||
<div class="partnership-benefit__glow" aria-hidden="true"></div>
|
||||
<img src="../assets/images/partnership/why-4.png" alt="" width="520" height="260" loading="lazy">
|
||||
</div>
|
||||
<h3 class="partnership-benefit__title">Dedicated Support</h3>
|
||||
<p class="partnership-benefit__desc">Work with affiliate managers who help you optimize traffic and grow sustainably.</p>
|
||||
<p class="partnership-benefit__label">Upfront support may be available for selected partners</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="partnership-section" aria-labelledby="partnership-how-title">
|
||||
<h2 class="partnership-section__title" id="partnership-how-title">
|
||||
How it <span class="text-orange">Works</span>
|
||||
How It <span class="text-orange">Works</span>
|
||||
</h2>
|
||||
<div class="partnership-steps">
|
||||
<article class="partnership-step">
|
||||
<div class="partnership-step__icon" aria-hidden="true">
|
||||
<span class="partnership-step__glyph">P</span>
|
||||
<div class="partnership-step__top">
|
||||
<span class="partnership-step__num">1</span>
|
||||
<span class="partnership-step__tag">Step 1</span>
|
||||
</div>
|
||||
<h3 class="partnership-step__title">Apply</h3>
|
||||
<p class="partnership-step__desc">Fill out our partnership application.</p>
|
||||
<p class="partnership-step__desc">Filled out our partnership application</p>
|
||||
</article>
|
||||
<span class="partnership-steps__arrow" aria-hidden="true">›</span>
|
||||
<article class="partnership-step">
|
||||
<div class="partnership-step__icon" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-faq"></span>
|
||||
<div class="partnership-step__top">
|
||||
<span class="partnership-step__num">2</span>
|
||||
<span class="partnership-step__tag">Step 2</span>
|
||||
</div>
|
||||
<h3 class="partnership-step__title">Review</h3>
|
||||
<p class="partnership-step__desc">Partnership applications are subject to team review.</p>
|
||||
<p class="partnership-step__desc">Partnership applications are subject to team review</p>
|
||||
</article>
|
||||
<span class="partnership-steps__arrow" aria-hidden="true">›</span>
|
||||
<article class="partnership-step">
|
||||
<div class="partnership-step__icon" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-funding-programs"></span>
|
||||
<div class="partnership-step__top">
|
||||
<span class="partnership-step__num">3</span>
|
||||
<span class="partnership-step__tag">Step 3</span>
|
||||
</div>
|
||||
<h3 class="partnership-step__title">Launch</h3>
|
||||
<p class="partnership-step__desc">Register your AIFO account, get your links, dashboard and start promoting.</p>
|
||||
</article>
|
||||
<span class="partnership-steps__arrow" aria-hidden="true">›</span>
|
||||
<article class="partnership-step">
|
||||
<div class="partnership-step__icon" aria-hidden="true">
|
||||
<span class="icon iconfont icon-nav-payout"></span>
|
||||
<div class="partnership-step__top">
|
||||
<span class="partnership-step__num">4</span>
|
||||
<span class="partnership-step__tag">Step 4</span>
|
||||
</div>
|
||||
<h3 class="partnership-step__title">Track & Get Paid</h3>
|
||||
<p class="partnership-step__desc">Earn commissions based on eligible qualified sales.</p>
|
||||
@@ -136,14 +166,11 @@
|
||||
<span class="text-orange">Who</span> This Is For
|
||||
</h2>
|
||||
<div class="partnership-audience">
|
||||
<article class="partnership-audience-card partnership-audience-card--fit">
|
||||
<p class="partnership-audience-card__label">Great Fit</p>
|
||||
<div class="partnership-audience-card__visual" aria-hidden="true">
|
||||
<img src="../assets/images/payment-methods/bitcoin.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/payment-methods/ethereum.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/payment-methods/tether.svg" alt="" width="40" height="40">
|
||||
<img src="../assets/images/payment-methods/usdc.svg" alt="" width="40" height="40">
|
||||
<article class="partnership-audience-card">
|
||||
<div class="partnership-audience-card__visual">
|
||||
<img src="../assets/images/partnership/fit.png" alt="" width="520" height="251" loading="lazy">
|
||||
</div>
|
||||
<p class="partnership-audience-card__label partnership-audience-card__label--fit">Great Fit</p>
|
||||
<ul class="partnership-audience-card__list">
|
||||
<li>Real trading audience</li>
|
||||
<li>Qualified traffic sources</li>
|
||||
@@ -151,12 +178,12 @@
|
||||
<li>Compliant promotion methods</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="partnership-audience-card partnership-audience-card--not-fit">
|
||||
<p class="partnership-audience-card__label">Not a Fit</p>
|
||||
<div class="partnership-audience-card__visual partnership-audience-card__visual--warn" aria-hidden="true">
|
||||
<span class="partnership-audience-card__warn-icon">✕</span>
|
||||
<article class="partnership-audience-card">
|
||||
<div class="partnership-audience-card__visual">
|
||||
<img src="../assets/images/partnership/not-fit.png" alt="" width="520" height="251" loading="lazy">
|
||||
</div>
|
||||
<ul class="partnership-audience-card__list">
|
||||
<p class="partnership-audience-card__label partnership-audience-card__label--not-fit">Not a Fit</p>
|
||||
<ul class="partnership-audience-card__list partnership-audience-card__list--not-fit">
|
||||
<li>Fake or low-quality traffic</li>
|
||||
<li>Non-genuine trading audience</li>
|
||||
<li>Misleading promotion methods</li>
|
||||
@@ -169,75 +196,67 @@
|
||||
<div id="payment-methods-container"></div>
|
||||
|
||||
<section class="partnership-section partnership-section--faq" aria-labelledby="partnership-faq-title">
|
||||
<h2 class="partnership-section__title partnership-section__title--center" id="partnership-faq-title">
|
||||
<div class="partnership-faq__glow" aria-hidden="true"></div>
|
||||
<h2 class="partnership-section__title" id="partnership-faq-title">
|
||||
Frequently Asked <span class="text-orange">Questions</span>
|
||||
</h2>
|
||||
<div class="partnership-faq">
|
||||
<div class="faq-item">
|
||||
<button class="faq-header" type="button">
|
||||
<span class="faq-question">How do I apply for the partnership program?</span>
|
||||
<span class="faq-icon-box"><span class="faq-icon">+</span></span>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">How to start?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-answer">
|
||||
<p>Click Become a Partner, complete the application form, and our team will review your profile within a few business days.</p>
|
||||
</div>
|
||||
<div class="partnership-faq__body">
|
||||
<p>Choose an AIFO Account size, complete the AIFO Challenge, and once you meet the objectives you can begin trading on a funded AIFO Account.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-header" type="button">
|
||||
<span class="faq-question">When do I receive commission payouts?</span>
|
||||
<span class="faq-icon-box"><span class="faq-icon">+</span></span>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">Is AIFO a trustworthy company?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-answer">
|
||||
<p>Commissions are tracked in your affiliate dashboard and paid on a regular schedule once eligible sales are confirmed.</p>
|
||||
</div>
|
||||
<div class="partnership-faq__body">
|
||||
<p>AIFO operates with full transparency, providing simulated trading evaluations and educational services with a clear, published rule set.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-header" type="button">
|
||||
<span class="faq-question">What traffic sources are allowed?</span>
|
||||
<span class="faq-icon-box"><span class="faq-icon">+</span></span>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">How do I become an AIFO Trader?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-answer">
|
||||
<p>We welcome organic content, communities, review sites, and compliant paid campaigns. Misleading or incentivized low-quality traffic is not permitted.</p>
|
||||
</div>
|
||||
<div class="partnership-faq__body">
|
||||
<p>Pass the evaluation phases by reaching the profit target while respecting the drawdown rules, and you will be offered an AIFO Account.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-header" type="button">
|
||||
<span class="faq-question">Can I promote AIFO with paid ads?</span>
|
||||
<span class="faq-icon-box"><span class="faq-icon">+</span></span>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">How long does it take to become an FTMO Trader?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-answer">
|
||||
<p>Yes, when campaigns follow our brand guidelines and do not bid on restricted keywords or misrepresent AIFO offers.</p>
|
||||
</div>
|
||||
<div class="partnership-faq__body">
|
||||
<p>There is no minimum trading-day requirement to complete the evaluation, so it depends entirely on your trading performance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-header" type="button">
|
||||
<span class="faq-question">Is there a minimum payout threshold?</span>
|
||||
<span class="faq-icon-box"><span class="faq-icon">+</span></span>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">What will be the size of my FTMO Account?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="faq-body">
|
||||
<div class="faq-answer">
|
||||
<p>Minimum payout thresholds may apply depending on your payment method. Details are shown in your affiliate dashboard after approval.</p>
|
||||
</div>
|
||||
<div class="partnership-faq__body">
|
||||
<p>Your account size matches the challenge size you selected and can scale up to a maximum allocation of $2,000,000.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="partnership-faq__item">
|
||||
<button class="partnership-faq__header" type="button">
|
||||
<span class="partnership-faq__question">Do I have to close my positions overnight?</span>
|
||||
<span class="partnership-faq__toggle" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="partnership-faq__body">
|
||||
<p>No, you are free to hold positions overnight and over the weekend unless otherwise stated for your specific program.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="partnership-cta" aria-labelledby="partnership-cta-title">
|
||||
<h2 class="partnership-cta__title" id="partnership-cta-title">
|
||||
Ready to grow with <span class="text-orange">AIFO</span>?
|
||||
</h2>
|
||||
<p class="partnership-cta__desc">Join the partnership program and start earning from qualified referrals today.</p>
|
||||
<a href="/pages/affiliate_sigup.html" class="partnership-btn">Join Now</a>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user