commit 20260703

This commit is contained in:
2026-07-03 20:34:27 +08:00
parent 296db4a164
commit c1630b8c10
63 changed files with 3497 additions and 1110 deletions
+326 -236
View File
@@ -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;
}
}
+121
View File
@@ -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
View File
@@ -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}
+172 -56
View File
@@ -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;
}
}
+183
View File
@@ -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;
}
}
+410
View File
@@ -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
View File
@@ -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

+3
View File
@@ -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

+3
View File
@@ -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

+332 -56
View File
@@ -54,6 +54,90 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">nav-help-center</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">contact-us</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe638;</span>
<div class="name">about-us</div>
<div class="code-name">&amp;#xe638;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">partnership</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">trading-courses</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe632;</span>
<div class="name">payout</div>
<div class="code-name">&amp;#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">live-sessions</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">ai-coach</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">account-models</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">check</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">Contact</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">Email</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">Address</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">Application Form</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">challenge_start</div>
@@ -234,12 +318,6 @@
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">nav-about-us</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">nav-video-hub</div>
@@ -264,12 +342,6 @@
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">nav-payout</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">nav-academy</div>
@@ -302,7 +374,7 @@
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">nav-contact</div>
<div class="name">nav-contact-us</div>
<div class="code-name">&amp;#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">
+60 -12
View File
@@ -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";
}
+1 -1
View File
File diff suppressed because one or more lines are too long
+100 -16
View File
@@ -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
},
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.