steven/aifo-portal-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
296db4a164caa0e8f3f0b3c7ad8fe6169abfbf82
aifo-portal-web/assets/scss/academy.scss
T
steven 4d30803b60 Initial commit: AIFO official portal web. 
Add static site, shared layout, and Node dev server with standard .gitignore.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-30 15:29:50 +08:00

11608 lines
212 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ------------------------------
REM base: 1rem = 16px
All sizes below use rem for pixel-precise control.
------------------------------ */
:root {
font-size: 16px;
/* 1rem = 16px */
--bg-dark: #070707;
--panel: #0f0f0f;
--accent: #FF9C3A;
--accent-2: #F98715;
--muted: rgba(255, 255, 255, 0.75);
--gap: 1.125rem;
/* 18px */
}
.main {
margin-top: 6.100625rem;
}
.icon.icon-play-1 {
height: 23px;
width: 34px;
line-height: 23px;
font-size: 22px;
}
.academy-block-1 {
height: 53.125rem;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.heading-icon {
height: 70px;
width: 70px;
transform: translateY(-17px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.growth-controls .btn {
width: 3.5rem;
height: 3.5rem;
}
.growth-controls .btn.growthPrev {
background-image: url(../images/backgrounds/prev.svg);
background-color: transparent;
background-size: cover;
background-repeat: no-repeat;
}
.growth-controls .btn.growthPrev:hover {
background-image: url(../images/backgrounds/prev_hover.svg);
}
.growth-controls .btn.growthNext {
background-image: url(../images/backgrounds/next.svg);
background-color: transparent;
background-size: cover;
background-repeat: no-repeat;
margin-left: 15px;
}
.growth-controls .btn.growthNext:hover {
background-image: url(../images/backgrounds/next_hover.svg);
}
.bg-svgs {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* we will inject inline SVG via ::before to keep it crisp */
.bg-svgs svg {
width: 100%;
height: 100%;
display: block;
}
/* subtle grid overlay */
.bg-grid {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
background-size: 5rem 5rem, 5rem 5rem;
/* 80px grid (5rem) */
opacity: 0.08;
}
/* ------------------------------
Page layout containers
------------------------------ */
.section {
position: relative;
z-index: 2;
padding: 4.5rem 0;
}
/* 72px top/bottom */
/* -------------- HERO -------------- */
/* Pixel tuned: title size ~44px => 2.75rem */
.hero .accent-line {
width: 10rem;
height: 0.375rem;
/* 160px x 6px */
background: linear-gradient(90deg, var(--accent), var(--accent-2));
margin: 1.125rem auto 1.75rem;
/* 18px top, 28px bottom */
border-radius: 0.5rem;
box-shadow: 0 8px 20px rgba(249, 135, 21, 0.18);
}
.hero h1 {
font-size: 2.75rem;
/* 44px */
font-weight: 800;
line-height: 1.06;
margin-bottom: 0.6rem;
text-shadow: 0 0.375rem 1.375rem rgba(0, 0, 0, 0.6);
}
.hero p.lead {
max-width: 51.25rem;
/* 820px */
margin: 0 auto;
color: var(--muted);
font-size: 1rem;
/* 16px */
margin-bottom: 1.5rem;
}
.btn-primary-accent {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
border: none;
color: #fff;
padding: 0.6rem 1.375rem;
/* 10px 22px */
border-radius: 0.5rem;
font-weight: 600;
box-shadow: 0 0.5rem 1.5rem rgba(249, 135, 21, 0.18);
}
/* -------------- VIDEO CARD -------------- */
/* Max width tuned: 900px => 56.25rem */
.video-card {
max-width: 56.25rem;
margin: 1.75rem auto 0;
/* 28px top */
position: relative;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.65);
/* 20px 60px */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}
.video-card img {
width: 100%;
height: auto;
display: block;
}
.video-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* box-shadow: 0 0.75rem 2rem rgba(249,135,21,0.2); */
cursor: pointer;
.pay-btn {
width: 5.25rem;
height: 5.25rem;
background-image: url(../images/backgrounds/icon/paly-icon.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.pay-btn:hover {
background-image: url(../images/backgrounds/icon/paly-icon-hover.svg);
}
}
/* play icon */
.video-play i {
font-size: 1.75rem;
color: #fff;
margin-left: 0.125rem;
}
/* ~28px */
/* -------------- WHY / FEATURES -------------- */
.section-title {
font-size: 1.375rem;
font-weight: 800;
margin-bottom: 1rem;
/* 22px */
}
.feature-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
padding: 1.25rem;
/* 20px */
border-radius: 0.625rem;
min-height: 7.5rem;
/* 120px */
box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.6);
}
.feature-card h6 {
margin-bottom: 0.5rem;
font-size: 1rem;
}
.feature-card p {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 0.875rem;
}
/* -------------- GROWTH STORIES -------------- */
.growth-carousel {
padding-top: 0.5rem;
position: relative;
}
.growth-track {
display: flex;
gap: 1rem;
overflow: hidden;
align-items: flex-start;
transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.growth-card {
min-width: 17.5rem;
/* 280px */
max-width: 20rem;
/* 320px */
border-radius: 0.75rem;
padding: 0.875rem;
/* 14px */
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}
.growth-card img {
width: 100%;
height: auto;
border-radius: 0.5rem;
margin-bottom: 0.75rem;
}
/* -------------- COURSE GRID -------------- */
.course-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.125rem;
}
.course-card {
border-radius: 0.75rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
padding: 0.75rem;
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.5);
}
.course-thumb {
width: 100%;
height: 10rem;
object-fit: cover;
border-radius: 0.5rem;
}
/* --------------- CTA & footer --------------- */
.footer-cta {
padding: 4rem 0;
text-align: center;
}
.footer-cta h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
/* --------------- Loaders & Fade --------------- */
.loader {
height: 7.5rem;
border-radius: 0.5rem;
background: linear-gradient(90deg, #0f0f0f, #141414, #0f0f0f);
background-size: 200% 100%;
animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
0% {
background-position: 200% 0
}
100% {
background-position: -200% 0
}
}
/* -----------------------
Responsive breakpoints
(Bootstrap-like breakpoints but tuned in rem)
----------------------- */
@media (max-width: 1199.98px) {
.course-grid {
grid-template-columns: repeat(3, 1fr);
}
.hero h1 {
font-size: 2.25rem;
}
}
/* lg->md */
@media (max-width: 991.98px) {
.course-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero h1 {
font-size: 2rem;
}
}
/* md->sm */
@media (max-width: 575.98px) {
.course-grid {
grid-template-columns: 1fr;
}
.hero {
padding: 3.75rem 1rem;
}
.hero h1 {
font-size: 1.75rem;
}
.video-card {
max-width: 92vw;
margin: 1rem auto;
border-radius: 0.5rem;
}
.video-play {
width: 4.25rem;
height: 4.25rem;
}
/* 68px */
}
/* utility narrow container */
.container-narrow {
max-width: 69rem;
margin: 0 auto;
padding: 0 1rem;
position: relative;
z-index: 2;
}
@media (max-width: 768px){
.container-narrow {
padding: 0 1.9376rem;
}
}
/* academy start */
#academy-main {
margin-top: 5.9375rem;
.content-container {
margin-top: 0;
}
.academy-block-1 {
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
.funded-trading-hero .text-center {
max-width: 51rem;
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
// margin-top: 12.5rem;
margin-top: 7.5rem;
}
/* academy-section-1 start */
#academy-section-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_left_academy_section.webp);
background-position: left center;
background-repeat: no-repeat;
background-size: 50% 100%;
height: 100%;
}
#academy-section-1 .card-style-2 .card p {
font-size: 14px;
line-height: 20px;
font-weight: 100;
}
#academy-section-1 p.small-muted {
font-size: 20px;
width: 68%;
}
#academy-section-1 .mb-3,
.my-3 {
margin-bottom: 25px !important;
}
/* academy-section-1 end */
/* small muted */
.small-muted {
color: #fff;
font-size: 20px;
}
.card-style-2 .card {
background: url(../images/backgrounds/card_bg_1.png) center / 100% 100% no-repeat;
background-size: 100% 100%;
padding: 2.5rem 1.75rem;
padding: 40px 28px;
}
.card-style-2 .card:hover {
background-image: unset;
background-color: var(--aifo-orange) !important;
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 8px 15px 0 rgba(249, 135, 21, 0.7);
}
/* source section start */
#source {
.container {
padding-right: 0;
padding-left: 0;
}
.container-flex{
gap:24px;
}
.progress-panel {
width: 315px;
height: 280px;
background: #0E0E0E;
padding: 20px;
border-radius: 20px;
color: #fff;
/* overflow-y: auto; */
// flex-shrink: 0;
h5 {
text-align: left;
}
}
.form-control {
background-color: #2d2b2b;
color: #fff;
border-radius: 10px;
border: none;
}
/* .progress-panel::-webkit-scrollbar {
width: 6px;
}
.progress-panel::-webkit-scrollbar-thumb {
background: orange;
border-radius: 10px;
} */
.pp-item {
margin-bottom: 25px;
position: relative;
span {
position: absolute;
right: 0px;
top: 23px;
}
}
.progress {
height: 8px;
background: #333;
border-radius: 10px;
width: 234px;
.progress-bar {
background: orange;
}
}
/* --------------------------
Dropdown styling
--------------------------- */
.custom-select-style {
background: #222;
color: #fff;
border-radius: 8px;
border: 1px solid #333;
}
/* --------------------------
Video Area Wrapper
--------------------------- */
.video-area {
background: #1a1a1a;
border-radius: 20px;
padding: 20px;
}
/* .video-area::-webkit-scrollbar {
width: 8px;
}
.video-area::-webkit-scrollbar-thumb {
background: var(--aifo-orange);
border-radius: 5px;
} */
.video-play {
.pay-btn {
width: 3.25rem;
height: 3.25rem;
}
}
.video-grid {
width: 800px;
height: 820px;
max-height: 820px;
overflow-y: scroll;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(2, 356px);
grid-gap: 22px;
}
.video-grid::-webkit-scrollbar {
width: 8px;
}
.video-grid::-webkit-scrollbar-thumb {
background: var(--aifo-orange);
border-radius: 5px;
}
/* card */
.video-card {
width: 356px;
height: 370px;
background: #222;
border-radius: 12px;
color: white;
padding-bottom: 15px;
position: relative;
}
.thumb {
width: 100%;
height: 210px;
background: #444;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
overflow: hidden;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Play icon styles */
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background-color: rgba(52, 152, 219, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.play-icon i {
color: white;
font-size: 28px;
}
.vc-body {
padding: 12px 15px;
}
.vc-index {
font-size: 14px;
color: #aaa;
display: flex;
align-items: center;
justify-content: space-between;
}
.vc-index-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
width: 60px;
border-radius: 100px;
background-color: #000000;
color: #ffffff;
font-size: 10px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s;
padding: 0 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.vc-title {
font-size: 16px;
font-weight: 600;
margin-top: 8px;
font-size: 16px;
font-weight: 600;
margin-top: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.btn {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 20px;
color: var(--aifo-white);
background: var(--aifo-orange);
border-color: var(--aifo-orange);
}
.btn-lesson{
border-radius: .375rem;
font-weight: 400;
height: 2.8125rem;
line-height: 2.8125rem;
font-size: 1.125rem;
}
.btn:hover {
background-color: var(--aifo-orange-hover);
color: #fff;
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
text-decoration: none;
}
/* ============================================================
RESPONSIVE BREAKPOINTS
XS / SM / MD / LG / XL
============================================================ */
/* ---- LG (≤1200px) ---- */
@media (max-width: 1200px) {
.video-area {
width: 100%;
max-width: 100%;
height: 760px;
max-height: 760px;
}
}
/* ---- MD (≤992px) ---- */
@media (max-width: 992px) {
/* Main container changes from left-right layout to top-bottom layout */
.d-flex.justify-content-center {
flex-direction: column;
align-items: center;
}
.progress-panel {
width: 100%;
height: auto;
margin-bottom: 25px;
}
/* Filter changes from 2 columns to 1 column */
.custom-select-style {
width: 100% !important;
margin-bottom: 12px;
}
.video-area {
width: 90%;
height: auto;
max-width: auto;
margin: 0 auto;
}
/* Video changes from 2 columns to 1 column */
.video-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.video-card {
width: 100%;
}
}
/* ---- SM (≤768px) ---- */
@media (max-width: 768px) {
.container {
padding-right: 15px;
padding-left: 15px;
}
body {
padding: 20px 0;
}
.video-area {
height: auto;
width: 100%;
}
}
/* ---- XS (≤576px) ---- */
@media (max-width: 576px) {
.video-area {
/* height: 560px;
max-height: 560px; */
height: auto;
max-width: auto;
padding: 15px 10px;
}
.video-card {
height: auto;
padding-right: 14px;
}
.thumb {
height: 180px;
}
}
}
#source::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_center_source_section.webp);
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
}
/* source section end */
}
/* academy end */
/* academy-1 page */
#academy-sub {
/* margin-top: 5.9375rem; */
.academy-block-1 {
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
.funded-trading-hero .text-center {
max-width: 51rem;
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
// margin-top: 12.5rem;
margin-top: 7.5rem;
}
/* academy-section-1 start */
#academy-section-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_left_academy_section.webp);
background-position: left center;
background-repeat: no-repeat;
background-size: 50% 100%;
height: 100%;
}
#academy-section-1 .card-style-2 .card p {
font-size: 14px;
line-height: 20px;
font-weight: 100;
}
#academy-section-1 p.small-muted {
font-size: 20px;
width: 68%;
}
#academy-section-1 .mb-3,
.my-3 {
margin-bottom: 25px !important;
}
/* academy-section-1 end */
/* small muted */
.small-muted {
color: #fff;
font-size: 20px;
}
.video-play {
.pay-btn {
width: 3.25rem;
height: 3.25rem;
}
}
.video-grid {
width: 800px;
height: 820px;
max-height: 820px;
overflow-y: scroll;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(2, 356px);
grid-gap: 22px;
}
.video-grid::-webkit-scrollbar {
width: 8px;
}
.video-grid::-webkit-scrollbar-thumb {
background: var(--aifo-orange);
border-radius: 5px;
}
/* card */
.video-card {
width: 356px;
height: 370px;
background: #222;
border-radius: 12px;
color: white;
padding-bottom: 15px;
position: relative;
}
.thumb {
width: 100%;
height: 210px;
background: #444;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
overflow: hidden;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Play icon styles */
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background-color: rgba(52, 152, 219, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.play-icon i {
color: white;
font-size: 28px;
}
.vc-body {
padding: 12px 15px;
}
.vc-index {
font-size: 14px;
color: #aaa;
display: flex;
align-items: center;
justify-content: space-between;
}
.vc-index-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
width: 60px;
border-radius: 100px;
background-color: #000000;
color: #ffffff;
font-size: 10px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s;
padding: 0 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.vc-title {
font-size: 16px;
font-weight: 600;
margin-top: 8px;
font-size: 16px;
font-weight: 600;
margin-top: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* artticle start */
.main-wrapper {
display: flex;
margin-top: 40px;
justify-content: center;
}
.toc-desktop {
width: 260px;
background: transparent;
position: sticky;
top: 40px;
}
.toc-wraper {
border: 1px solid #989795;
height: auto;
padding: 18px 20px;
border-radius: 15px;
background: #0E0E0E;
}
.toc-desktop h4 {
font-size: 20px;
margin-bottom: 15px;
}
.toc-desktop ul {
padding-left: 0;
margin: 0;
}
.toc-desktop li {
list-style: none;
margin-bottom: 10px;
font-size: 10px;
}
.toc-desktop a {
font-size: 15px;
color: #fff;
}
.content-wrapper {
width: 850px;
margin-left: 40px;
}
.breadcrumb-box {
width: 100%;
border-radius: 12px;
margin-bottom: 45px;
}
.breadcrumb {
background: transparent;
margin: 0;
}
.custom-breadcrumb {
display: flex;
align-items: center;
padding: 0;
}
.custom-breadcrumb .breadcrumb-item {
background: #231F20;
padding: 6px 28px;
border-radius: 73px;
color: #fff;
font-size: 14px;
display: flex;
align-items: center;
margin-right: 20px;
position: relative;
}
.custom-breadcrumb .breadcrumb-item a {
color: #fff;
text-decoration: none;
}
.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
content: ">";
color: #F9F9F9;
padding: 0 10px;
opacity: 1;
position: absolute;
left: -24px;
}
.custom-breadcrumb .breadcrumb-item.active {
background: #989795;
color: #fff;
}
.content-container {
background: #111;
width: 100%;
padding: 40px;
padding-right: 10px;
border-radius: 15px;
border: 1px solid #989795;
margin-top: 30px;
}
.content-container img {
width: 100%;
border-radius: 10px;
margin: 25px 0;
}
.toc-mobile-toggle {
display: none;
width: 100%;
background: #222;
padding: 12px 18px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 17px;
}
.toc-mobile {
display: none;
background: #111;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.toc-mobile a {
font-size: 15px;
}
.article_content {
height: auto;
min-height: 100px;
max-height: 1600px;
overflow-y: scroll;
overflow-x: hidden;
grid-template-columns: repeat(2, 356px);
grid-gap: 22px;
}
.article_content::-webkit-scrollbar {
width: 8px;
}
.article_content::-webkit-scrollbar-thumb {
background: #F98715;
border-radius: 5px;
}
/* ---- LG (≤1200px) ---- */
@media (max-width: 1200px) {
.video-area {
width: 100%;
max-width: 100%;
height: 760px;
max-height: 760px;
}
}
/* ---- MD (≤992px) ---- */
@media (max-width: 992px) {
.d-flex.justify-content-center {
flex-direction: column;
align-items: center;
}
.progress-panel {
width: 100%;
height: auto;
margin-bottom: 25px;
}
.custom-select-style {
width: 100% !important;
margin-bottom: 12px;
}
.video-area {
width: 90%;
height: auto;
max-width: auto;
margin: 0 auto;
}
.video-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.video-card {
width: 100%;
}
}
/* ---- SM (≤768px) ---- */
@media (max-width: 768px) {
body {
padding: 20px 0;
}
.video-area {
height: auto;
max-width: auto;
}
.content-wrapper {
width: 100%;
margin-left: 0px;
}
.custom-breadcrumb {
display: flex;
gap: 10px;
}
.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
left: -29px;
}
.slice-lg.article-detail-section {
padding-top: 0;
padding-bottom: 3.5rem;
padding-bottom: 4rem;
}
.greate-job-section {
padding: 75px 0;
}
.greate-job-section {
.support-card {
padding-top: 35px;
padding-bottom: 35px;
padding-left: 10px;
padding-right: 10px;
}
.support-title {
font-size: 35px;
}
.support-subtitle {
font-size: 18px;
}
.support-icon {
position: relative;
width: 309px;
height: 309px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
/* ---- XS (≤576px) ---- */
@media (max-width: 576px) {
.video-area {
/* height: 560px;
max-height: 560px; */
height: auto;
max-width: auto;
padding: 15px;
}
.video-card {
height: auto;
padding-right: 14px;
}
.thumb {
height: 180px;
}
}
/* Grid Background Pattern */
.grid-background {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 48px 48px;
}
/* Orange Gradient Overlay */
.orange-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 800px;
background:
radial-gradient(circle at 20% -10%, rgba(249, 135, 21, 0.28) 0%, transparent 55%),
radial-gradient(circle at 80% 0%, rgba(249, 135, 21, 0.18) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
/* Watermark */
.watermark {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
opacity: 0.035;
}
.watermark-text {
position: absolute;
white-space: nowrap;
font-size: 14px;
font-weight: 600;
letter-spacing: 4px;
color: white;
transform: rotate(-35deg);
}
/* Content Container */
.content-wrapper {
position: relative;
z-index: 2;
}
/* Hero Section */
.hero-section {
padding: 60px 0 80px;
min-height: 480px;
display: flex;
align-items: center;
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
.hero-tag {
display: inline-block;
background: var(--aifo-orange);
color: white;
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 24px;
letter-spacing: 0.5px;
}
.hero-title {
font-size: 56px;
font-weight: 700;
line-height: 1.1;
color: var(--aifo-orange);
margin: 0;
}
.hero-title span {
display: block;
}
/* Video Card */
.video-card {
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
overflow: hidden;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.06);
position: relative;
}
.video-container {
position: relative;
padding-top: 56.25%; /* 16:9 */
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}
.video-placeholder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(249,135,21,0.1) 0%, transparent 50%);
}
.play-button {
width: 72px;
height: 72px;
background: var(--aifo-orange);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 8px 32px rgba(249, 135, 21, 0.4);
}
.play-button:hover {
transform: scale(1.08);
box-shadow: 0 12px 40px rgba(249, 135, 21, 0.5);
}
.play-button svg {
width: 28px;
height: 28px;
fill: white;
margin-left: 4px;
}
.video-logo {
position: absolute;
top: 16px;
left: 16px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 16px;
color: white;
}
.video-logo svg {
width: 28px;
height: 28px;
}
/* Course Structure Section */
.course-structure {
padding: 60px 0 0;
position: relative;
z-index: 10;
}
/* Fixed State - 当Course Structure锁定时（仅桌面端） */
@media (min-width: 992px) {
.course-structure.cs-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: var(--aifo-dark-gary);
padding: 20px 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.course-structure.cs-fixed .section-title {
flex-shrink: 0;
margin-bottom: 20px;
}
.course-structure.cs-fixed .breadcrumb-wrapper {
flex-shrink: 0;
}
.course-structure.cs-fixed .breadcrumb-divider {
flex-shrink: 0;
}
.course-structure.cs-fixed .sticky-tabs-wrapper {
flex-shrink: 0;
position: static;
margin-bottom: 0;
border-bottom: none;
}
.course-structure.cs-fixed .content-columns-wrapper {
flex: 1;
overflow: hidden;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.course-structure.cs-fixed .content-columns {
flex: 1;
overflow: hidden;
}
.course-structure.cs-fixed .main-content {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.course-structure.cs-fixed .main-content::-webkit-scrollbar {
display: none;
}
.course-structure.cs-fixed .left-sidebar,
.course-structure.cs-fixed .right-sidebar {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.course-structure.cs-fixed .left-sidebar::-webkit-scrollbar,
.course-structure.cs-fixed .right-sidebar::-webkit-scrollbar {
display: none;
}
.course-structure.cs-fixed .sticky-sidebar {
position: static;
max-height: none;
overflow: visible;
}
}
.section-title {
text-align: center;
margin-bottom: 32px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
}
.section-title h2 {
font-size: 28px;
font-weight: 700;
color: var(--aifo-white);
margin: 0 0 12px 0;
}
.section-title h2 span {
color: var(--aifo-orange);
}
.section-subtitle {
font-size: 15px;
color: var(--text-muted);
margin: 0;
max-width: 600px;
margin: 0 auto;
}
/* Breadcrumb Navigation */
.breadcrumb-wrapper {
max-width: 1200px;
margin: 0 auto;
// padding: 12px 24px 0;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.breadcrumb-wrapper::-webkit-scrollbar {
display: none;
}
.breadcrumb {
display: flex;
align-items: start;
justify-content: start;
gap: 8px;
// flex-wrap: nowrap;
// white-space: nowrap;
}
.breadcrumb-item {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 14px;
background: #231F20;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
color: rgba(249, 249, 249, 0.78);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
flex-shrink: 0;
}
.breadcrumb-item:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.20);
color: rgba(249, 249, 249, 0.95);
}
.breadcrumb-item.active {
// border-color: #F98715;
color: #F98715;
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 0 2px rgba(249, 135, 21, 0.12);
cursor: default;
}
.breadcrumb-item.active:hover {
background: rgba(255, 255, 255, 0.06);
border-color: #F98715;
color: #F98715;
}
.breadcrumb-separator {
color: #F98715;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
/* Breadcrumb Divider - 只在桌面端显示 */
.breadcrumb-divider {
max-width: 100%;
margin: 0 auto;
// padding: 0 24px;
padding: 20px 0;
}
.breadcrumb-divider-line {
width: 100%;
height: 1px;
background: var(--aifo-orange);
// margin: 16px 0 0;
}
/* Sticky Tab Navigation */
.sticky-tabs-wrapper {
position: sticky;
top: 0;
z-index: 100;
background: var(--aifo-dark-gary);
padding: 20px 0;
margin-bottom: 32px;
border-bottom: 1px solid var(--border-faint);
}
.tab-nav {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.tab-item {
height: 46px;
padding: 0 24px;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 999px;
color: rgba(249, 249, 249, 0.75);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
}
.tab-item:hover {
border-color: rgba(255, 255, 255, 0.20);
color: var(--aifo-white);
background: rgba(255, 255, 255, 0.08);
}
.tab-item.active {
background: var(--aifo-orange);
border-color: var(--aifo-orange);
color: #0B0B0B;
font-weight: 600;
box-shadow: 0 10px 24px rgba(249, 135, 21, 0.25);
}
/* Three Column Layout */
.content-columns-wrapper {
// max-width: 1200px;
// margin: 0 auto;
// padding: 0 24px;
// margin-bottom: 60px;
}
.content-columns {
display: flex;
gap: 24px;
align-items: flex-start;
}
.left-sidebar {
flex: 0 0 290px;
}
.main-content {
flex: 1 1 auto;
min-width: 560px;
}
.right-sidebar {
// flex: 0 0 290px;
}
.sticky-sidebar {
position: sticky;
top: 120px;
// max-height: calc(100vh - 140px);
// overflow-y: auto;
// overflow-x: hidden;
// -ms-overflow-style: none;
// scrollbar-width: none;
}
.sticky-sidebar::-webkit-scrollbar {
display: none;
}
/* Table of Contents */
.toc-card {
background: var(--aifo-dark-gary);
border-radius: 16px;
padding: 24px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.toc-card::-webkit-scrollbar {
display: none;
}
.toc-title {
font-size: 12px;
font-weight: 600;
color: var(--aifo-white);
margin-bottom: 20px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
// padding-left: 20px;
}
.toc-list::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: rgba(255, 255, 255, 0.18);
border-radius: 2px;
}
// .toc-list::after {
// content: '';
// position: absolute;
// left: 0;
// top: 0;
// width: 2px;
// height: 44px;
// background: var(--aifo-orange);
// border-radius: 2px;
// transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// transform: translateY(0);
// }
.toc-item {
position: relative;
padding: 10px 10px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}
// .toc-item:not(:first-child):not(:last-child){
// margin: 6px 0;
// }
.toc-item.active::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height:100%;
background: var(--aifo-orange);
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
}
.toc-item:hover .toc-name {
color: rgba(249, 135, 21, 0.85);
}
.toc-number {
font-size: 13px;
font-weight: 600;
color: rgba(249, 249, 249, 0.45);
flex-shrink: 0;
width: 20px;
text-align: left;
transition: color 0.2s ease;
}
.toc-item.active .toc-number {
color: rgba(249, 249, 249, 0.60);
}
.toc-name {
font-size: 14px;
color: rgba(249, 249, 249, 0.60);
font-weight: 500;
flex: 1;
transition: color 0.2s ease;
line-height: 1.4;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.toc-item.active .toc-name {
color: var(--aifo-orange);
font-weight: 600;
}
/* Main Article */
.main-article {
background: var(--aifo-dark-gary);
border-radius: 16px;
padding: 32px;
}
.article-header {
margin-bottom: 32px;
}
.article-title {
font-size: 32px;
font-weight: 400;
color: var(--aifo-white);
margin: 0;
line-height: 1.3;
}
.article-content {
font-size: 16px;
line-height: 1.7;
color: rgba(249, 249, 249, 0.82);
}
.chart-card {
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
margin: 32px 0;
border: 1px solid var(--border-faint);
}
.chart-placeholder {
width: 100%;
height: 300px;
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dimmed);
font-size: 14px;
}
/* Right Sidebar */
.lessons-card {
background: var(--aifo-dark-gary);
border-radius: 16px;
padding: 24px;
margin-bottom: 24px;
}
.lessons-title {
font-size: 14px;
font-weight: 600;
color: var(--aifo-white);
margin-bottom: 20px;
letter-spacing: 0.08em;
// text-transform: uppercase;
}
.lesson-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(249, 135, 21, 0.25);
border-radius: 8px;
}
.lesson-item:hover .lesson-text {
color: var(--aifo-orange);
}
.lesson-item.active .lesson-text {
color: var(--aifo-orange);
}
.lesson-thumbnail {
width: 120px;
height: 68px;
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
border-radius: 8px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
img{
width:100%;
height:100%;
}
}
.lesson-thumbnail::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: rgba(249, 135, 21, 0.9);
border-radius: 50%;
opacity: 0.6;
}
.lesson-thumbnail::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent white;
z-index: 1;
}
.lesson-text {
flex: 1;
font-size: 13px;
color: var(--text-dimmed);
font-weight: 500;
line-height: 1.4;
}
/* Challenge Banner */
.challenge-banner {
background: linear-gradient(135deg, rgba(249, 135, 21, 0.15) 0%, rgba(255,255,255,0.04) 60%);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.challenge-logo {
width: 48px;
height: 48px;
margin: 0 auto 16px;
}
.challenge-logo svg {
width: 100%;
height: 100%;
}
.challenge-title {
font-size: 18px;
font-weight: 700;
color: var(--aifo-white);
margin-bottom: 8px;
}
.challenge-text {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 20px;
line-height: 1.6;
}
.challenge-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--aifo-orange);
color: white;
padding: 12px 24px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
svg{
width: 20px;
}
}
.challenge-btn:hover {
background: #e67a0d;
transform: translateY(-2px);
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6);
color: white;
text-decoration: none;
}
.challenge-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
opacity: 0.1;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
z-index:-1;
}
.bar {
width: 8px;
background: var(--aifo-orange);
border-radius: 4px 4px 0 0;
}
/* Back to Top Section */
.back-section {
text-align: center;
padding: 40px 0 20px;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.back-to-top-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--aifo-orange);
color: white;
padding: 12px 28px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.back-to-top-btn:hover {
background: #e67a0d;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.3);
color: white;
text-decoration: none;
}
.back-to-top-btn svg {
width: 18px;
height: 18px;
}
/* Completion Card */
.completion-section {
padding: 40px 0 80px;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}
.completion-card {
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
border-radius: 20px;
padding: 40px;
display: flex;
align-items: center;
gap: 40px;
position: relative;
overflow: hidden;
}
.completion-content {
flex: 1;
}
.completion-title {
font-size: 32px;
font-weight: 700;
color: var(--aifo-white);
margin-bottom: 12px;
}
.completion-text {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 28px;
line-height: 1.6;
}
.completion-buttons {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.lesson-nav-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 999px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.lesson-nav-btn.prev {
background: transparent;
color: var(--text-dimmed);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.lesson-nav-btn.prev:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--aifo-white);
border-color: rgba(255, 255, 255, 0.20);
text-decoration: none;
}
.lesson-nav-btn.next {
background: var(--aifo-orange);
color: white;
}
.lesson-nav-btn.next:hover {
background: #e67a0d;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.3);
color: white;
text-decoration: none;
}
.lesson-nav-btn svg {
width: 18px;
height: 18px;
}
.completion-icons {
display: flex;
gap: 24px;
align-items: center;
flex-shrink: 0;
}
.glow-icon {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.glow-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(249, 135, 21, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
}
.glow-icon svg {
width: 48px;
height: 48px;
position: relative;
z-index: 1;
fill: var(--aifo-orange);
filter: drop-shadow(0 0 10px rgba(249, 135, 21, 0.5));
}
/* Tablet & Mobile Adjustments */
@media (max-width: 991px) {
.content-columns {
flex-direction: column;
gap: 20px;
}
.left-sidebar,
.main-content,
.right-sidebar {
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
.sticky-sidebar {
position: static;
max-height: none;
}
/* 左侧目录隐藏 */
.left-sidebar {
display: none;
}
/* 使用order调整顺序：正文在上，右侧栏在下 */
.main-content {
order: 1;
}
.right-sidebar {
order: 2;
margin-top: 4px;
}
/* 移除橘色分割线在移动端的大间距 */
.breadcrumb-divider {
display: none;
}
}
/* Mobile Specific (≤767px) */
@media (max-width: 767px) {
/* 禁用固定工作台逻辑 */
body.mobile-mode {
overflow: auto !important;
height: auto !important;
}
/* Hero Section */
.hero-section {
padding: 32px 0 40px;
min-height: auto;
}
.hero-container > div {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
.hero-title {
font-size: 32px;
}
.hero-tag {
font-size: 12px;
padding: 5px 12px;
margin-bottom: 16px;
}
/* Course Structure Section - 减少顶部间距 */
.course-structure {
padding: 24px 0 0;
}
.section-title {
margin-bottom: 20px;
padding: 0 16px;
}
.section-title h2 {
font-size: 22px;
margin-bottom: 8px;
}
.section-subtitle {
font-size: 14px;
}
/* 面包屑 - 横向滑动 */
.breadcrumb-wrapper {
padding: 12px 16px 0;
margin-bottom: 12px;
}
.breadcrumb {
justify-content: flex-start;
gap: 6px;
}
.breadcrumb-item {
height: 32px;
padding: 0 12px;
font-size: 11px;
}
.breadcrumb-separator {
font-size: 11px;
}
/* Tabs - 横向滑动 */
.sticky-tabs-wrapper {
padding: 12px 0;
margin-bottom: 16px;
position: static;
}
.tab-nav {
justify-content: flex-start;
flex-wrap: nowrap;
gap: 10px;
padding: 0 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tab-nav::-webkit-scrollbar {
display: none;
}
.tab-item {
padding: 0 18px;
height: 40px;
font-size: 13px;
}
/* 内容区域 */
.content-columns-wrapper {
// padding: 0 16px;
// margin-bottom: 40px;
}
.content-columns {
gap: 16px;
}
/* 正文卡片 */
.main-article {
padding: 22px 20px;
}
.article-title {
font-size: 26px;
}
.article-content {
font-size: 15px;
}
.article-content h2 {
font-size: 20px;
margin: 28px 0 16px;
}
.article-content p {
margin-bottom: 16px;
}
.chart-card {
margin: 24px 0;
padding: 12px;
}
.chart-placeholder {
height: 220px;
font-size: 13px;
}
/* 右侧卡片 */
.lessons-card,
.challenge-banner {
padding: 20px 18px;
}
.lessons-title {
font-size: 11px;
margin-bottom: 16px;
}
.lesson-item {
padding: 10px;
margin-bottom: 12px;
gap: 10px;
}
.lesson-thumbnail {
width: 100px;
height: 56px;
}
.lesson-text {
font-size: 12px;
}
/* Challenge Banner */
.challenge-logo {
width: 40px;
height: 40px;
margin-bottom: 12px;
}
.challenge-title {
font-size: 16px;
margin-bottom: 6px;
}
.challenge-text {
font-size: 12px;
margin-bottom: 16px;
}
.challenge-btn {
padding: 10px 20px;
font-size: 13px;
}
/* Completion Card */
.completion-section {
padding: 32px 16px 60px;
}
.completion-card {
flex-direction: column;
padding: 28px 20px;
gap: 24px;
text-align: center;
}
.completion-title {
font-size: 24px;
margin-bottom: 8px;
}
.completion-text {
font-size: 14px;
margin-bottom: 20px;
}
.completion-buttons {
justify-content: center;
gap: 10px;
}
.lesson-nav-btn {
padding: 10px 20px;
font-size: 14px;
}
.completion-icons {
gap: 16px;
}
.glow-icon {
width: 60px;
height: 60px;
}
.glow-icon::before {
width: 76px;
height: 76px;
}
.glow-icon svg {
width: 36px;
height: 36px;
}
/* Back to top */
.back-section {
padding: 28px 16px 16px;
}
.back-to-top-btn {
padding: 10px 24px;
font-size: 14px;
}
.breadcrumb {
align-items: center;
justify-content: left;
flex-wrap: nowrap;
white-space: nowrap;
}
}
}
#source::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_center_source_section.webp);
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
}
/* source section end */
.article-detail-section{
padding-bottom: 9.375rem;
}
/* great Job section start*/
.greate-job-section {
position: relative;
margin: 0 auto;
padding: 150px 0;
.support-card {
position: relative;
background: linear-gradient(135deg, #151515 0%, #0F0F0F 100%);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 18px;
padding-top: 30px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.support-content {
display: flex;
align-items: center;
gap: 0px;
}
.support-text {
flex: 1;
}
.support-title {
font-size: 60px;
font-weight: 700;
color: #F9F9F9;
margin: 0 0 10px;
}
.support-subtitle {
font-size: 23px;
color: rgba(249, 249, 249, 0.7);
margin: 0 0 10px;
max-width: 640px;
}
.support-buttons {
display: flex;
gap: 50px;
margin-top: 30px;
}
.support-btn {
padding: 0 24px;
border-radius: 10px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 999px;
}
.support-btn-primary {
/* background: #F98715; */
border: none;
color: #F9F9F9;
}
.support-btn-primary:focus {
outline: none;
}
.support-btn-secondary {
background: #faf6f6;
border: 1px solid rgba(249, 249, 249, 0.3);
color: #F98715;
}
.support-btn-secondary:hover {
// background: rgba(249, 249, 249, 0.05);
// border-color: rgba(249, 249, 249, 0.4);
background-color: #fff;
color: #F9A215;
border-color: rgba(249, 249, 249, 100%);
text-decoration: none;
box-shadow: inset 0 5px 10px 0 rgba(249, 249, 249, 0.6), 0 5px 10px 0 rgba(249, 249, 249, 0.6);
}
.support-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 249, 249, 0.1);
}
.support-btn-secondary svg {
width: 12px;
height: 12px;
fill: currentColor;
}
.support-visual {
flex-shrink: 0;
// width: 465px;
/* height: 180px; */
display: flex;
align-items: center;
justify-content: center;
}
.support-glow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.support-icon {
position: relative;
width: 385px;
height: 392px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
img {
max-width: 100%;
height: auto;
}
}
.support-icon svg {
width: 40px;
height: 40px;
fill: #F9F9F9;
}
.icon-arrow{
width: auto;
height: auto;
font-size: 10px;
}
/* Responsive */
@media (max-width: 991px) {
.support-content {
flex-direction: column;
text-align: center;
}
.support-visual {
width: 160px;
height: 160px;
}
.support-buttons {
justify-content: center;
flex-wrap: wrap;
}
}
}
.greate-job-section::after {
content: "";
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
background-image: url(../images/backgrounds/academy/dotdot.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 230px;
pointer-events: none;
z-index: 2;
}
/* greate Job section end */
@media (max-width: 991px) {
.main-wrapper {
flex-direction: column;
align-items: center;
}
.toc-desktop {
display: none;
}
.toc-mobile-toggle {
display: block;
}
.content-wrapper {
width: 100%;
margin-left: 0;
}
.breadcrumb-box {
width: 100%;
}
.content-container {
width: 100%;
padding: 30px;
}
}
@media (max-width: 768px) {
.custom-breadcrumb .breadcrumb-item {
padding: 6px 23px;
font-size: 12px;
margin-right: 18px;
}
.article_content {
height: auto;
min-height: auto;
max-height: none !important;
overflow-y: unset;
}
.content-container {
padding: 10px;
}
}
@media (max-width: 575px) {
.breadcrumb-box ol.breadcrumb {
font-size: 12px;
}
.content-container {
padding: 22px;
}
}
#article_content {
h1,
.h1 {
font-size: 2.6875rem;
}
}
@media (max-width: 768px) {
#academy-sub {
/* margin-top: 5.9375rem; */
.wp-block-table table{
min-width: unset;
}
}
}
/* academy-1 page start */
/* payout start */
#payout {
margin-top: 5.9375rem;
.academy-block-1 {
height: 53.125rem;
background-image: none;
}
.bn_bg_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
/* Ensure background is below all content */
transition: all 1s ease-in-out;
height: 53.125rem;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.academy-block-1 {
height: auto;
}
.funded-trading-hero .text-center {
max-width: 51rem;
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
// margin-top: 12.5rem;
margin-top: 7.5rem;
}
#academy-section-1 .card-style-2 .card p {
font-size: 14px;
line-height: 20px;
font-weight: 100;
}
#academy-section-1 p.small-muted {
font-size: 20px;
width: 68%;
}
#academy-section-1 .mb-3,
.my-3 {
margin-bottom: 25px !important;
}
/* small muted */
.small-muted {
color: #fff;
font-size: 20px;
}
.card-style-2 .card {
background-image: url(../images/backgrounds/card_bg_1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 2.5rem 1.75rem;
padding: 40px 28px;
}
.card-style-2 .card:hover {
background-color: var(--aifo-orange) !important;
-webkit-box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 8px 15px 0 rgba(249, 135, 21, 0.7);
box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 8px 15px 0 rgba(249, 135, 21, 0.7);
background-image: unset;
}
#stories {
.small-muted {
width: 68%;
margin-bottom: 0px;
}
.growth-controls {
position: absolute;
right: 0;
top: 0px;
}
/* Carousel */
.carousel-wrapper {
position: relative;
width: 100vw;
overflow: hidden;
padding: 40px 0;
}
.carousel-container-1 {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 900px;
height: 450px;
background: #111;
border-radius: 12px;
margin: 0 20px;
position: relative;
display: flex;
padding: 30px;
color: #fff;
}
/* Image */
.left-img {
width: 383px;
height: 383px;
object-fit: cover;
border-radius: 10px;
}
/* Right text */
.content {
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.content h2 {
font-size: 28px;
font-weight: 700;
}
.content p {
font-size: 16px;
margin-top: 10px;
opacity: .85;
}
.btn-watch {
margin-top: 30px;
}
/* ===============================
Fade-in animation (trigger once when entering viewport)
================================= */
.carousel-item .left-img,
.carousel-item h2,
.carousel-item p,
.carousel-item .btn-watch {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease;
}
.carousel-item.fade-in.show .left-img {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.carousel-item.fade-in.show h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 35px;
}
.carousel-item.fade-in.show p {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
width: 90%;
font-size: 24px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
}
/* ==============================
Dots
================================= */
.dots {
text-align: center;
margin-top: 80px;
}
.dot {
display: inline-block;
margin: 0 5px;
width: 48px;
height: 6px;
border-radius: 4px;
background: #333;
cursor: pointer;
transition: background .18s;
}
.dot.active {
background: #F98715;
}
/* ===============================
Left and right 100px gradient mask
================================= */
.gradient-left,
.gradient-right {
position: absolute;
top: 0;
width: 100px;
height: 100%;
pointer-events: none;
z-index: 20;
}
.gradient-left {
left: 0;
background: linear-gradient(to right, black 0%, transparent 100%);
}
.gradient-right {
right: 0;
background: linear-gradient(to left, black 0%, transparent 100%);
}
/* ===============================
Responsive
================================= */
/* ===============================
Medium screen (<= 992px)
================================= */
@media (max-width: 992px) {
.carousel-item {
flex: 0 0 90%;
height: auto;
padding: 30px 20px;
flex-direction: column;
text-align: center;
}
/* Image slightly larger */
.left-img {
width: 320px;
height: 320px;
margin: 0 auto;
}
/* Title larger */
.content h2 {
font-size: 26px;
margin-top: 20px;
}
/* Description clearer */
.content p {
font-size: 17px;
line-height: 1.55;
margin-top: 12px;
}
.btn-watch {
font-size: 16px;
padding: 0px 26px;
margin-top: 22px;
}
}
}
@media (min-height: 600px) and (min-width: 767px) {
[data-spotlight="fullscreen"] {
height: auto;
margin-bottom: 40px;
}
}
}
/* payout end */
/* affiliate start */
#affiliate {
margin-top: 5.9375rem;
.funded-trading-hero .text-center {
max-width: 51rem;
}
.academy-block-1 {
height: 40.125rem;
background-image: unset;
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
// margin-top: 12.5rem;
margin-top: 7.5rem;
}
#academy-section-1 .card-style-2 .card p {
font-size: 14px;
line-height: 20px;
font-weight: 100;
}
#academy-section-1 p.small-muted {
font-size: 20px;
width: 68%;
}
#academy-section-1 .mb-3,
.my-3 {
margin-bottom: 25px !important;
}
/* small muted */
.small-muted {
color: #fff;
font-size: 20px;
}
.card-style-2 .card {
background: url(../images/backgrounds/card_bg_1.png) center / 100% 100% no-repeat;
background-size: 100% 100%;
padding: 2.5rem 1.75rem;
padding: 40px 28px;
}
.card-style-2 .card:hover {
background-image: none;
}
#stories {
.small-muted {
width: 68%;
margin-bottom: 0px;
}
.growth-controls {
position: absolute;
right: 0;
top: 0px;
}
/* Carousel */
.carousel-wrapper {
position: relative;
width: 100vw;
overflow: hidden;
padding: 40px 0;
}
.carousel-container-1 {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 900px;
height: 450px;
background: #111;
border-radius: 12px;
margin: 0 20px;
position: relative;
display: flex;
padding: 30px;
color: #fff;
}
/* Image */
.left-img {
width: 383px;
height: 383px;
object-fit: cover;
border-radius: 10px;
}
/* Right text */
.content {
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.content h2 {
font-size: 28px;
font-weight: 700;
}
.content p {
font-size: 16px;
margin-top: 10px;
opacity: .85;
}
.btn-watch {
margin-top: 30px;
}
/* ===============================
Fade-in animation (trigger once when entering viewport)
================================= */
.carousel-item .left-img,
.carousel-item h2,
.carousel-item p,
.carousel-item .btn-watch {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease;
}
.carousel-item.fade-in.show .left-img {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.carousel-item.fade-in.show h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 35px;
}
.carousel-item.fade-in.show p {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
width: 90%;
font-size: 24px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
}
/* ==============================
Dots
================================= */
.dots {
text-align: center;
margin-top: 80px;
}
.dot {
display: inline-block;
margin: 0 5px;
width: 48px;
height: 6px;
border-radius: 4px;
background: #333;
cursor: pointer;
transition: background .18s;
}
.dot.active {
background: #F98715;
}
/* ===============================
Left and right 100px gradient mask
================================= */
.gradient-left,
.gradient-right {
position: absolute;
top: 0;
width: 100px;
height: 100%;
pointer-events: none;
z-index: 20;
}
.gradient-left {
left: 0;
background: linear-gradient(to right, black 0%, transparent 100%);
}
.gradient-right {
right: 0;
background: linear-gradient(to left, black 0%, transparent 100%);
}
/* ===============================
Responsive
================================= */
/* ===============================
Medium screen (<= 992px)
================================= */
@media (max-width: 992px) {
.carousel-item {
flex: 0 0 90%;
height: auto;
padding: 30px 20px;
flex-direction: column;
text-align: center;
}
/* Image slightly larger */
.left-img {
width: 320px;
height: 320px;
margin: 0 auto;
}
/* Title larger */
.content h2 {
font-size: 26px;
margin-top: 20px;
}
/* Description clearer */
.content p {
font-size: 17px;
line-height: 1.55;
margin-top: 12px;
}
.btn-watch {
font-size: 16px;
padding: 0 26px;
margin-top: 22px;
}
}
@media (max-width: 768px) {}
}
#section-10 .bg_light {
background-position-y: -184px;
}
#section-10 .bg_light .container {
/* padding-top: 17.5rem; */
padding-bottom: 1.5rem;
}
.main-course {
background-image: url(../images/backgrounds/lc_bg_2.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.start-earning {
background-image: url(../images/backgrounds/lc_bg_1.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
/* payout end */
/* funding program page strat */
#funding_program {
/* height: 43.125rem; */
.academy-block-1 {
// height: 43.125rem;
height: 41.125rem;
background-image: unset;
}
.funded-trading-hero .text-center {
max-width: 51rem;
}
.funded-trading-hero .text-center .banner-desc {
width: 510px;
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
margin-top: 7.5rem;
}
#academy-section-1 .card-style-2 .card p {
font-size: 14px;
line-height: 20px;
font-weight: 100;
}
#academy-section-1 p.small-muted {
font-size: 20px;
width: 68%;
}
#academy-section-1 .mb-3,
.my-3 {
margin-bottom: 25px !important;
}
/* small muted */
.small-muted {
color: #fff;
font-size: 20px;
}
.card-style-2 .card {
background: url(../images/backgrounds/card_bg_1.png) center / 100% 100% no-repeat;
background-size: 100% 100%;
padding: 2.5rem 1.75rem;
padding: 40px 28px;
}
.card-style-2 .card:hover {
background-image: none;
}
#section-10 .bg_light {
background-position-y: -184px;
}
#section-10 .bg_light .container {
/* padding-top: 17.5rem; */
padding-bottom: 1.5rem;
}
.main-course {
background-image: url(../images/backgrounds/lc_bg_2.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.start-earning {
background-image: url(../images/backgrounds/lc_bg_1.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
@media (max-width: 768px) {
.funded-trading-hero .text-center .banner-desc {
width: 100%;
}
}
}
/* funding program page end */
/* Search Section start */
.search-section {
max-width: 885px;
margin: 0 auto;
width: 100%;
.search-input-group {
position: relative;
margin-bottom: 1.875rem;
}
.search-input-group .search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: rgba(249, 249, 249, 0.5);
z-index: 10;
}
.search-input {
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(249, 249, 249, 0.5);
color: #F9F9F9;
padding: 0.9rem 1rem 0.9rem 3rem;
border-radius: 15px;
width: 100%;
transition: all 0.3s;
}
.search-input:focus {
background: rgba(0, 0, 0, 0.7);
border-color: #F98715;
outline: none;
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.1);
color: #F9F9F9;
}
.search-input::placeholder {
color: rgba(249, 249, 249, 0.4);
}
.search-contain {
display: flex;
}
.search-input-group {
flex: 1;
margin-right: 16px;
}
.search-btn {
width: 120px;
min-width: 120px;
/* Prevent button from being compressed */
}
.btn-search {
border: none;
/* padding: 0.9rem 2.5rem; */
border-radius: 10px;
font-weight: 600;
transition: all 0.3s;
width: 120px;
line-height: 48px;
height: 48px;
}
.search-scope {
margin-top: 0;
display: flex;
align-items: center;
}
.search-scope-label {
color: var(--aifo-white);
margin-right: 3.125rem;
font-size: 0.95rem;
}
/* #searchForm{
.container {
padding-right: 0;
padding-left: 0;
}
} */
@media (max-width: 768px) {
.btn-search {
width: 100%;
}
.search-contain {
display: block;
width: 100%;
}
.search-btn {
width: 100%;
max-width: 100%;
}
.search-input-group {
margin-right: 0;
margin-bottom: 12px;
}
/* #searchForm{
.container {
padding-right: 15px;
padding-left: 15px;
}
} */
}
}
/* Search Section end */
/* 404 page strat */
#page_404 {
/* height: 43.125rem; */
.academy-block-1 {
height: 43.125rem;
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
.funded-trading-hero .text-center {
max-width: 100%;
}
.funded-trading-hero .text-center .banner-desc {
max-width: 100%;
}
.hero {
padding: 6.25rem 0 3.5rem;
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
margin-top: 7.5rem;
font-size: 10.625rem;
}
.search-section {
margin-bottom: 250px;
margin-top: 20px;
}
@media (max-width: 768px) {
.funded-trading-hero .text-center .banner-desc {
width: 100%;
}
.error-title {
font-size: 4rem;
}
.hero-title {
margin-top: 7.5rem;
font-size: 4rem;
width: 100%;
text-align: center;
margin-left: 0;
margin-right: 0;
}
.error-subtitle {
font-size: 1.2rem;
}
.search-section {
padding: 2rem 1rem;
margin-top: 50px;
}
.search-wrapper {
padding: 1.5rem;
}
.btn-search {
margin-top: 1rem;
}
.academy-block-1 {
height: auto;
}
.search-section {
margin-bottom: 100px;
}
.search-input-group {
margin-bottom: 0rem;
}
.center-buttons {
margin-top: 54px;
}
}
}
@media (max-width: 768px) {
.main {
margin-top: 72px;
}
.search-section {
.search-scope {
margin-top: 20px;
display: block;
align-items: center;
padding-left: 15px;
}
.custom-control {
width: 100%;
margin: 18px 0;
}
.d-flex {
display: block !important;
}
#searchForm .row {
padding: 0 15px;
}
}
}
/* 404 page end */
#academy-section-1 .card-style-2 .col-md-6 {
margin-bottom: 20px;
}
#academy-1 {
.academy-block-1 {
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
.academy-title-1 {
margin-top: 12.5rem;
}
.thumb {
width: 648px;
height: 414px;
background: #444;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
overflow: hidden;
}
.thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
/* Responsive调整 */
@media (max-width: 768px) {
#academy-main {
margin-top: 72px;
.heading {
text-align: center;
}
.hero-title {
margin-top: 80px;
margin-left: 10%;
margin-right: 10%;
}
#academy-section-1 p.small-muted {
text-align: center;
width: 100%;
}
.heading-icon {
height: 51px;
width: 51px;
transform: translateY(-12px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.center-buttons {
margin-top: 60px;
}
.academy-block-1 {
height: 35.125rem;
}
.container-narrow {
// padding: 0 50px;
}
#source {
.video-grid {
width: 100%;
height: auto;
}
.btn {
position: unset;
transform: unset;
}
.container {
padding-right: 15px;
padding-left: 15px;
}
.video-area{
height:auto !important;
max-height: 858px;
}
}
}
#academy-1 {
// height: 34.125rem;
.header_img_block {
position: absolute;
left: 50;
top: -40px;
}
.thumb {
margin: 0 auto;
width: 100%;
height: 197px;
}
.academy-title-1.mb-show {
// margin-top: 0;
// position: absolute;
// top: 330px;
margin: 2rem 0;
position: static;
}
.header_img_block.academy-title-1 {
position: static;
margin-top: 69px;
}
}
#payout {
margin-top: 72px;
#acadey-section-1 {
.btn-default {
width: 225px;
margin-left: auto;
margin-right: auto;
}
.text-primary-orange {
color: var(--aifo-white);
}
}
.heading {
text-align: center;
}
.hero-title {
margin-top: 80px;
margin-left: 10%;
margin-right: 10%;
}
#academy-section-1 p.small-muted {
text-align: center;
width: 100%;
}
.heading-icon {
height: 51px;
width: 51px;
transform: translateY(-12px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.center-buttons {
margin-top: 60px;
}
.academy-block-1 {
height: auto;
}
#stories {
.small-muted {
width: 100%;
margin-bottom: 0px;
}
.growth-controls {
position: unset;
margin-top: 40px;
display: flex;
justify-content: space-between !important;
}
.d-flex {
display: unset !important;
}
.carousel-item {
flex: 0 0 100%;
height: auto;
padding: 40px 20px 60px;
margin: 0;
text-align: center;
background: #231F20;
}
/* 图片占屏幕 70%，并保持比例 */
.left-img {
width: 70vw;
height: 70vw;
max-width: 70%;
max-height: 70%;
object-fit: cover;
border-radius: 12px;
margin: 0 auto;
display: block;
}
/* 标题 +5px */
.content h2 {
font-size: 33px;
/* 原来28px → 33px */
line-height: 1.3;
margin-top: 25px;
}
/* 描述保持可读性（可按需调整） */
.content p {
font-size: 18px;
line-height: 1.6;
margin-top: 15px;
}
/* 按钮 +5px */
.btn-watch {
font-size: 22px;
/* 原来17px → 22px */
padding: 0px 32px;
border-radius: 40px;
margin-top: 30px;
}
/* 指示点位置稍下移 */
.dots {
margin-top: 35px;
}
.carousel-item.fade-in.show p {
width: 100%;
font-size: 22px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
padding: 0;
position: unset;
border-radius: 10px;
margin: 0 auto;
padding: 7px 30px;
}
.gradient-left {
display: none;
}
.gradient-right {
display: none;
}
.carousel-track {
padding: 0 20px
}
.content {
margin-left: 0px;
}
}
#source {
.video-grid {
width: 100%;
height: auto;
}
.btn {
position: unset;
}
}
}
#affiliate {
margin-top: 72px;
.heading {
text-align: center;
}
.hero-title {
margin-top: 80px;
margin-left: 10%;
margin-right: 10%;
}
#academy-section-1 p.small-muted {
text-align: center;
width: 100%;
}
.heading-icon {
height: 51px;
width: 51px;
transform: translateY(-12px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.center-buttons {
margin-top: 60px;
}
.academy-block-1 {
height: 35.125rem;
}
#stories {
.small-muted {
width: 100%;
margin-bottom: 0px;
}
.growth-controls {
position: unset;
margin-top: 40px;
display: flex;
justify-content: space-between !important;
}
.d-flex {
display: unset !important;
}
.carousel-item {
flex: 0 0 100%;
height: auto;
padding: 40px 20px 60px;
margin: 0;
text-align: center;
background: #231F20;
}
/* 图片占屏幕 70%，并保持比例 */
.left-img {
width: 70vw;
height: 70vw;
max-width: 70%;
max-height: 70%;
object-fit: cover;
border-radius: 12px;
margin: 0 auto;
display: block;
}
/* 标题 +5px */
.content h2 {
font-size: 33px;
/* 原来28px → 33px */
line-height: 1.3;
margin-top: 25px;
}
/* 描述保持可读性（可按需调整） */
.content p {
font-size: 18px;
line-height: 1.6;
margin-top: 15px;
}
/* 按钮 +5px */
.btn-watch {
font-size: 22px;
/* 原来17px → 22px */
padding: 0px 32px;
border-radius: 40px;
margin-top: 30px;
}
/* 指示点位置稍下移 */
.dots {
margin-top: 35px;
}
.carousel-item.fade-in.show p {
width: 100%;
font-size: 22px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
padding: 0;
position: unset;
border-radius: 10px;
margin: 0 auto;
padding: 7px 30px;
}
.gradient-left {
display: none;
}
.gradient-right {
display: none;
}
.carousel-track {
padding: 0 20px
}
.content {
margin-left: 0px;
}
}
#source {
.video-grid {
width: 100%;
height: auto;
}
.btn {
position: unset;
}
}
}
#funding_program {
margin-top: 72px;
.heading {
text-align: center;
}
.hero-title {
margin-top: 80px;
margin-left: 10%;
margin-right: 10%;
}
#academy-section-1 p.small-muted {
text-align: center;
width: 100%;
}
.heading-icon {
height: 51px;
width: 51px;
transform: translateY(-12px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.center-buttons {
margin-top: 60px;
}
.academy-block-1 {
height: 35.125rem;
}
.container-narrow {
// padding: 0 50px;
}
#stories {
.small-muted {
width: 100%;
margin-bottom: 0px;
}
.growth-controls {
position: unset;
margin-top: 40px;
display: flex;
justify-content: space-between !important;
}
.d-flex {
display: unset !important;
}
.carousel-item {
flex: 0 0 100%;
height: auto;
padding: 40px 20px 60px;
margin: 0;
text-align: center;
background: #231F20;
}
/* 图片占屏幕 70%，并保持比例 */
.left-img {
width: 70vw;
height: 70vw;
max-width: 70%;
max-height: 70%;
object-fit: cover;
border-radius: 12px;
margin: 0 auto;
display: block;
}
/* 标题 +5px */
.content h2 {
font-size: 33px;
/* 原来28px → 33px */
line-height: 1.3;
margin-top: 25px;
}
/* 描述保持可读性（可按需调整） */
.content p {
font-size: 18px;
line-height: 1.6;
margin-top: 15px;
}
/* 按钮 +5px */
.btn-watch {
font-size: 22px;
/* 原来17px → 22px */
padding: 0px 32px;
border-radius: 40px;
margin-top: 30px;
}
/* 指示点位置稍下移 */
.dots {
margin-top: 35px;
}
.carousel-item.fade-in.show p {
width: 100%;
font-size: 22px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
padding: 0;
position: unset;
border-radius: 10px;
margin: 0 auto;
padding: 7px 30px;
}
.gradient-left {
display: none;
}
.gradient-right {
display: none;
}
.carousel-track {
padding: 0 20px
}
.content {
margin-left: 0px;
}
}
#source {
.video-grid {
width: 100%;
height: auto;
}
.btn {
position: unset;
}
}
}
}
/* stories section */
#stories {
.small-muted {
width: 68%;
margin-bottom: 0px;
}
.growth-controls {
position: absolute;
right: 0;
top: 0px;
}
/* 轮播 */
.carousel-wrapper {
position: relative;
width: 100vw;
overflow: hidden;
padding: 40px 0;
}
.carousel-container-1 {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 900px;
height: 450px;
background: #111;
border-radius: 12px;
margin: 0 20px;
position: relative;
display: flex;
padding: 30px;
color: #fff;
}
/* 图片 */
.left-img {
width: 383px;
height: 383px;
object-fit: cover;
border-radius: 10px;
}
/* 右侧文字 */
.content {
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.content h2 {
font-size: 28px;
font-weight: 700;
}
.content p {
font-size: 16px;
margin-top: 10px;
opacity: .85;
}
.btn-watch {
margin-top: 30px;
}
/* ===============================
Fade-in 动画（进入视口一次）
================================= */
.carousel-item .left-img,
.carousel-item h2,
.carousel-item p,
.carousel-item .btn-watch {
transform: translateY(20px);
transition: all 0.8s ease;
}
.carousel-item.fade-in.show .left-img {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.carousel-item.fade-in.show h2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 35px;
}
.carousel-item.fade-in.show p {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
width: 90%;
font-size: 24px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
}
.icon.icon-play-1 {
margin-right: 10px;
margin-left: 10px;
}
/* ==============================
指示点
================================= */
.dots {
text-align: center;
margin-top: 80px;
}
.dot {
display: inline-block;
margin: 0 5px;
width: 48px;
height: 6px;
border-radius: 4px;
background: #333;
cursor: pointer;
transition: background .18s;
}
.dot.active {
background: #F98715;
}
/* ===============================
左右 100px 渐变遮罩
================================= */
.gradient-left,
.gradient-right {
position: absolute;
top: 0;
width: 100px;
height: 100%;
pointer-events: none;
z-index: 20;
}
.gradient-left {
left: 0;
background: linear-gradient(to right, black 0%, transparent 100%);
}
.gradient-right {
right: 0;
background: linear-gradient(to left, black 0%, transparent 100%);
}
/* ===============================
Responsive
================================= */
/* ===============================
Medium screen (<= 992px)
================================= */
@media (max-width: 992px) {
.carousel-item {
flex: 0 0 90%;
height: auto;
padding: 30px 20px;
flex-direction: column;
text-align: center;
}
/* 图片更大一点 */
.left-img {
width: 320px;
height: 320px;
margin: 0 auto;
}
/* 标题更大 */
.content h2 {
font-size: 26px;
margin-top: 20px;
}
/* 描述更清晰 */
.content p {
font-size: 17px;
line-height: 1.55;
margin-top: 12px;
}
.btn-watch {
font-size: 16px;
padding: 0 26px;
margin-top: 22px;
}
}
}
@media (max-width:768px) {
#stories {
.small-muted {
width: 100%;
margin-bottom: 0px;
}
.growth-controls {
position: unset;
margin-top: 40px;
display: flex;
justify-content: space-between !important;
}
.d-flex {
display: unset !important;
}
.carousel-item {
flex: 0 0 100%;
height: auto;
padding: 40px 20px 60px;
margin: 0;
text-align: center;
background: #231F20;
}
/* 图片占屏幕 70%，并保持比例 */
.left-img {
width: 60vw;
height: 60vw;
// max-width: 70%;
// max-height: 70%;
object-fit: cover;
border-radius: 12px;
margin: 0 auto;
display: block;
}
/* 标题 +5px */
.content h2 {
font-size: 28px !important;
/* 原来28px → 33px */
line-height: 1.3;
margin-top: 25px;
}
/* 描述保持可读性（可按需调整） */
.content p {
font-size: 18px !important;
line-height: 1.6;
margin-top: 15px;
}
/* 按钮 +5px */
.btn-watch {
font-size: 22px;
/* 原来17px → 22px */
padding: 0 32px;
border-radius: 40px;
margin-top: 30px;
}
/* 指示点位置稍下移 */
.dots {
margin-top: 35px;
}
.carousel-item.fade-in.show p {
width: 100%;
font-size: 22px;
}
.carousel-item.fade-in.show .btn-watch {
opacity: 1;
transform: translateY(0);
transition-delay: 0.2s;
font-size: 20px;
width: 281px;
padding: 0;
position: unset;
border-radius: 10px;
margin: 0 auto;
padding: 0 30px;
}
.gradient-left {
display: none;
}
.gradient-right {
display: none;
}
.carousel-track {
padding: 0 20px
}
.content {
margin-left: 0px;
}
}
}
/* stories section */
/* faq subdirect page strat */
#faq_subdirect {
/* WebP格式（优先） */
.academy-block-1 {
height: auto;
background-color: #000;
background-image:
image-set(url('../images/backgrounds/academy/bg_grid.webp') type('image/webp'),
url('../images/backgrounds/academy/bg_grid.png') type('image/jpeg'));
}
.main-wrapper {
position: relative;
min-height: 100%;
width: 100%;
/* background: #0B0B0B; */
overflow: hidden;
}
/* Background layers */
.main-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 800px 600px at 50% 0%, rgba(249, 135, 21, 0.52) 0%, transparent 60%),
linear-gradient(180deg, rgba(11, 11, 11, 0.4) 0%, rgba(11, 11, 11, 0.95) 50%, #0B0B0B 100%);
pointer-events: none;
z-index: 1;
/* position: relative; */
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
/* position: relative; */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1008px;
}
.faq-section {
background-image: none;
}
/* Grid layer */
.main-wrapper::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 233px;
background-image: url(../images/backgrounds/academy/dotdot.png);
/* position: relative; */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 230px;
pointer-events: none;
z-index: 2;
}
/* Dot pattern layer */
.dot-pattern {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(249, 249, 249, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
z-index: 3;
}
/* Vignette effect */
.vignette {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
z-index: 4;
}
.content-container {
position: relative;
z-index: 5;
padding: 0px 0px 140px;
margin: 0;
}
/* Search bar */
.search-container {
max-width: 850px;
/* margin: 0 auto 32px; */
margin-top: 120px;
margin-bottom: 120px;
margin-left: auto;
margin-right: auto;
}
.search-wrapper {
display: flex;
gap: 12px;
align-items: stretch;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(249, 249, 249, 0.5);
pointer-events: none;
}
.search-input {
width: 100%;
height: 48px;
padding: 12px 18px 12px 46px;
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.5);
border-radius: 12px;
color: #F9F9F9;
font-size: 15px;
line-height: 24px;
transition: all 0.2s;
}
.search-input::placeholder {
color: rgba(249, 249, 249, 0.55);
}
.search-input:focus {
outline: none;
border-color: rgba(249, 135, 21, 0.5);
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.1);
}
.search-btn {
height: 48px;
padding: 12px 28px;
/* background: #F98715; */
border: none;
font-size: 15px;
font-weight: 600;
line-height: 24px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
/* .search-btn:hover {
background: #E07A12;
}
.search-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.3);
} */
/* Breadcrumb */
.breadcrumb-wrapper {
max-width: 850px;
margin: 0 auto 18px;
}
.breadcrumb-custom {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(249, 249, 249, 0.7);
}
.breadcrumb-link {
color: rgba(249, 249, 249, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: #F98715;
}
.breadcrumb-separator {
color: rgba(249, 249, 249, 0.5);
font-size: 11px;
}
.breadcrumb-current {
color: rgba(249, 249, 249, 0.9);
}
/* Page title */
.page-title-wrapper {
max-width: 850px;
/* margin: 0 auto 28px; */
margin-top: 65px;
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
}
.page-title {
font-size: 32px;
font-weight: 700;
color: #F9F9F9;
margin: 0;
}
/* FAQ List */
/* Support card */
.support-card-wrapper {
max-width: 920px;
margin: 0 auto;
margin-top: 230px;
}
.support-card {
position: relative;
background: linear-gradient(135deg, #151515 0%, #0F0F0F 100%);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 18px;
padding-top: 70px;
padding-bottom: 70px;
padding-left: 90px;
padding-right: 60px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.support-content {
display: flex;
align-items: center;
gap: 40px;
}
.support-text {
flex: 1;
}
.support-title {
font-size: 22px;
font-weight: 700;
color: #F9F9F9;
margin: 0 0 10px;
}
.support-subtitle {
font-size: 15px;
color: rgba(249, 249, 249, 0.7);
margin: 0 0 24px;
}
.support-buttons {
display: flex;
gap: 12px;
}
.support-btn {
height: 50px;
// width: 225px;
padding: 10px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.support-btn-primary {
/* background: #F98715; */
border: none;
color: #F9F9F9;
}
.support-btn-primary:focus {
outline: none;
}
.support-btn-secondary {
background: transparent;
border: 1px solid rgba(249, 249, 249, 0.3);
color: #F9F9F9;
}
.support-btn-secondary:hover {
background: rgba(249, 249, 249, 0.05);
border-color: rgba(249, 249, 249, 0.4);
}
.support-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 249, 249, 0.1);
}
.support-btn-secondary svg {
width: 12px;
height: 12px;
fill: currentColor;
}
.support-visual {
flex-shrink: 0;
width: 200px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.support-glow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.support-icon {
position: relative;
width: 300px;
height: 320px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
}
.support-icon svg {
width: 40px;
height: 40px;
fill: #F9F9F9;
}
/* Responsive */
@media (max-width: 991px) {
.support-content {
flex-direction: column;
text-align: center;
}
.support-visual {
width: 160px;
height: 160px;
}
.support-buttons {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.content-container {
padding: 30px 16px 50px;
}
.search-wrapper {
flex-direction: column;
}
.search-btn {
width: 100%;
}
.page-title {
font-size: 24px;
}
.faq-item {
padding: 14px 16px;
}
.faq-question {
font-size: 14px;
}
.support-card {
padding: 24px 20px;
}
.support-title {
font-size: 18px;
}
.support-subtitle {
font-size: 14px;
}
.support-buttons {
flex-direction: column;
width: 100%;
}
.support-btn {
width: 100%;
}
.breadcrumb-custom {
font-size: 12px;
}
.support-icon {
width: 273px;
height: 275px;
}
.support-card-wrapper {
margin-top: 99px;
}
.page-title-wrapper {
margin-top: 30px;
margin-bottom: 30px;
}
.breadcrumb-wrapper {
padding-right: 15px;
padding-left: 15px;
}
.search-container {
margin-top: 67px;
margin-bottom: 85px;
margin-left: 15px;
margin-right: 15px;
}
}
}
@media (max-width: 768px) {}
/* faq subdirect page end */
/* ranking section start */
.ranking-section {
position: relative;
.custom-nav-tabs {
border: none;
display: flex;
justify-content: space-between;
max-width: 720px;
border-radius: 10px;
background: #231f20;
border-radius: 999px;
padding: 10px 15px;
margin: 0 auto;
gap: 8px;
.nav-item {
color: var(--aifo-white);
width: 32%;
}
.nav-item .nav-link {
color: var(--aifo-white);
text-align: center;
font-size: 20px;
}
.nav-item .nav-link.active {
background: var(--aifo-orange);
color: #111;
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
border-radius: 999px;
}
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_faq_section.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1867px;
}
/* Podium Section */
.podium-section {
max-width: 1180px;
margin: 60px auto;
padding: 0 20px;
}
.podium-container {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 22px;
}
/* Base Podium Card */
.podium-card {
/* background: #0C0C0C; */
border-radius: 20px;
padding: 30px 24px;
position: relative;
overflow: hidden;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease;
}
.podium-card:hover {
transform: translateY(-6px);
}
/* Size Variations */
.podium-card.first {
flex: 0 0 360px;
min-height: 520px;
order: 2;
/* transform: translateY(-12px); */
background-image: url(../images/backgrounds/1st_bg.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.podium-card.first:hover {
transform: translateY(-18px);
}
.podium-card.second {
flex: 0 0 340px;
min-height: 470px;
order: 1;
background-image: url(../images/backgrounds/2st_bg.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.podium-card.third {
flex: 0 0 340px;
min-height: 470px;
order: 3;
background-image: url(../images/backgrounds/3st_bg.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* Top Glow Variations */
.podium-card::before {
content: '';
position: absolute;
top: -80px;
left: -80px;
width: 280px;
height: 280px;
border-radius: 50%;
opacity: 0.35;
z-index: 1;
pointer-events: none;
}
.podium-card.second::before {
background: radial-gradient(circle, rgba(249, 87, 56, 0.45) 0%, transparent 70%);
}
.podium-card.first::before {
background: radial-gradient(circle, rgba(249, 135, 21, 0.5) 0%, transparent 70%);
}
.podium-card.third::before {
background: radial-gradient(circle, rgba(180, 190, 200, 0.3) 0%, transparent 70%);
}
/* AIFO Watermark */
.podium-card::after {}
/* Dot Pattern at Bottom */
.podium-card-dots {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 45%;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1.2px, transparent 1.2px);
background-size: 12px 12px;
opacity: 0.6;
z-index: 1;
pointer-events: none;
}
.podium-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
}
/* Top Section: Avatar + Rank */
.podium-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
/* margin-bottom: 16px; */
}
.podium-avatar {
width: 83px;
height: 83px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
color: #FFF;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
flex-shrink: 0;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.podium-card.first .podium-avatar {
width: 83px;
height: 83px;
font-size: 28px;
}
.rank-badge {
position: absolute;
top: 22px;
right: 24px;
font-size: 56px;
font-weight: 800;
color: rgba(249, 249, 249, 0.95);
text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
line-height: 1;
}
.podium-card.first .rank-badge {
font-size: 64px;
}
/* Middle Section: User Info */
.podium-user-info {
margin-top: 14px;
/* margin-bottom: 100px; */
margin-bottom: 130px;
}
.podium-card.first .podium-user-info {
margin-bottom: 176px;
}
.podium-name {
font-size: 22px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 6px;
line-height: 1.2;
}
.podium-card.first .podium-name {
font-size: 24px;
}
.podium-handle {
font-size: 14px;
color: rgba(249, 249, 249, 0.65);
margin-bottom: 4px;
}
.podium-country {
display: flex;
gap: 8px;
font-size: 15px;
color: rgba(249, 249, 249, 0.7);
align-items: start;
}
.podium-country-flag {
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 50%;
img,span {
width: 100%;
height: 100%;
border-radius: 50%;
line-height: unset;
}
}
/* Bottom Section: Stats */
.podium-stats-row {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 0px;
}
.stat-item {
flex: 1;
text-align: center;
}
.stat-label {
font-size: 12px;
color: rgba(249, 249, 249, 0.55);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 500;
}
.stat-value {
font-size: 15px;
font-weight: 700;
color: #F9F9F9;
}
.stat-value.gain {
color: #3DFF6A;
font-size: 15px;
}
/* Account Size Row */
.account-size {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 8px;
/* border-top: 1px solid rgba(249, 249, 249, 0.12); */
margin-top: auto;
}
.account-size-label {
font-size: 12px;
color: rgba(249, 249, 249, 0.55);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.account-size-value {
font-size: 24px;
font-weight: 800;
color: #F9F9F9;
}
.podium-card.first .account-size-value {
font-size: 26px;
}
/* Table Section */
.table-container {
/* background: rgba(14, 14, 14, 0.8); */
border-radius: 18px;
padding: 16px;
margin-bottom: 60px;
/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.leaderboard-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0 10px;
}
.table-header {
background: #231f20;
border-radius: 12px;
}
.table-header th {
padding: 16px 20px;
font-size: 12px;
font-weight: 600;
color: rgba(249, 249, 249, 0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
border: none;
}
#contact .table-header th {
text-align: center;
}
.table-header th:first-child {
border-radius: 12px 0 0 12px;
}
.table-header th:last-child {
border-radius: 0 12px 12px 0;
}
.table-row {
background: #0e0e0e;
transition: all 0.2s ease;
}
.table-row:hover {
background: rgba(40, 40, 40, 0.7);
transform: translateY(-1px);
}
.table-row td {
padding: 20px;
border: none;
font-size: 14px;
vertical-align: middle;
}
#contact .table-row td {
text-align: center;
}
.table-row td:first-child {
border-radius: 12px 0 0 12px;
}
.table-row td:last-child {
border-radius: 0 12px 12px 0;
}
.rank-cell {
width: 6%;
font-weight: 700;
color: rgba(249, 249, 249, 0.7);
}
.user-cell {
width: 66%;
display: flex;
align-items: center;
gap: 12px;
}
#contact {
.user-cell {
width: unset;
margin: 0 auto;
display: inline-flex;
}
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-weight: 600;
color: #F9F9F9;
}
.user-handle {
font-size: 12px;
color: rgba(249, 249, 249, 0.5);
}
.value-cell {
font-weight: 600;
color: #F9F9F9;
}
.gain-cell {
color: #3DFF6A;
font-weight: 700;
}
.page-item.disabled .page-link {
color: var(--aifo-orange);
pointer-events: none;
cursor: auto;
background-color: transparent;
border: unset;
}
.page-item:last-child .page-link {
border-top-right-radius: .375rem;
border-bottom-right-radius: .375rem;
color: var(--aifo-orange);
pointer-events: none;
cursor: auto;
background-color: transparent;
border: unset;
}
.page-link {
position: relative;
display: block;
padding: .5rem .75rem;
margin-left: 0.325rem;
line-height: 1.25;
color: var(--aifo-white);
background-color: transparent;
border: unset;
}
.page-item.active .page-link {
z-index: 1;
color: var(--aifo-white);
background-color: var(--aifo-orange);
border-color: var(--aifo-orange);
}
.page-link {
padding: .2rem .45rem;
}
/* Responsive */
@media (max-width: 991px) {
.podium-section {
max-width: 100%;
}
.podium-container {
gap: 18px;
}
.podium-card.first {
flex: 0 0 330px;
min-height: 490px;
}
.podium-card.second,
.podium-card.third {
flex: 0 0 310px;
min-height: 450px;
}
.podium-name {
font-size: 20px;
}
.podium-card.first .podium-name {
font-size: 22px;
}
.rank-badge {
font-size: 50px;
}
.podium-card.first .rank-badge {
font-size: 58px;
}
}
@media (max-width: 767px) {
.podium-section {
margin: 40px auto;
padding: 0 16px;
}
.podium-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
gap: 16px;
padding-bottom: 10px;
}
.podium-card {
flex: 0 0 280px;
padding: 20px;
}
.podium-card.first {
flex: 0 0 280px;
min-height: 460px;
transform: translateY(0);
}
.podium-card.first:hover {
transform: translateY(-6px);
}
.podium-card.second,
.podium-card.third {
flex: 0 0 280px;
min-height: 440px;
}
.podium-avatar {
width: 52px;
height: 52px;
font-size: 20px;
}
.podium-card.first .podium-avatar {
width: 60px;
height: 60px;
font-size: 24px;
}
.rank-badge {
font-size: 44px;
top: 18px;
right: 20px;
}
.podium-card.first .rank-badge {
font-size: 50px;
}
.podium-name {
font-size: 18px;
}
.podium-card.first .podium-name {
font-size: 20px;
}
.podium-handle {
font-size: 13px;
}
.podium-country {
font-size: 12px;
}
.stat-label {
font-size: 11px;
}
.stat-value {
font-size: 15px;
}
.stat-value.gain {
font-size: 16px;
}
.account-size-value {
font-size: 20px;
}
.podium-card.first .account-size-value {
font-size: 22px;
}
.table-container {
padding: 12px;
margin-bottom: 40px;
}
.custom-nav-tabs {
.nav-item {
width: 31%;
}
.nav-item .nav-link {
font-size: 12px;
}
}
}
}
/* ranking section end */
/* leaderboard page */
#leaderboard {
.academy-block-1 {
height: 41.125rem;
background-image: none;
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
.divider-line {
width: 100px;
height: 2px;
margin: 0 auto 30px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
}
.countdown-icon {
font-size: 24px;
text-align: center;
}
.countdown-label {
font-size: 13px;
color: rgba(249, 249, 249, 0.6);
margin-bottom: 4px;
text-align: center;
}
.countdown-date {
font-size: 18px;
color: #F98715;
font-weight: 600;
margin-bottom: 40px;
text-align: center;
}
.earnings-text {
font-size: 18px;
color: var(--aifo-white);
text-align: center;
}
.earnings-text strong {
color: #F9F9F9;
font-weight: 700;
}
}
/* leaderboard page end */
/* result page strat */
#search_results {
.academy-block-1 {
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* Title Section */
.title-section {
text-align: center;
padding-top: 152px;
margin-bottom: 55px;
}
.page-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.faq-section .page-title {
font-size: 35px;
}
.title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
margin: 0 6px;
vertical-align: middle;
img {
height: 100%;
width: 100%;
}
}
.title-icon i {
color: #F9F9F9;
font-size: 20px;
}
/* WebP格式（优先） */
.academy-block-1 {
height: auto;
background-image: unset;
/* height: auto;
background-color: #000;
background-image:
image-set(
url('../images/backgrounds/academy/bg_grid.webp') type('image/webp'),
url('../images/backgrounds/academy/bg_grid.png') type('image/jpeg')
); */
}
.main-wrapper {
position: relative;
min-height: 100%;
width: 100%;
/* background: #0B0B0B; */
overflow: hidden;
}
/* Background layers */
.main-wrapper::before {
/* content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 800px 600px at 50% 0%, rgba(249, 135, 21, 0.52) 0%, transparent 60%),
linear-gradient(180deg, rgba(11, 11, 11, 0.4) 0%, rgba(11, 11, 11, 0.95) 50%, #0B0B0B 100%);
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 652px; */
}
.faq-section {
background-image: none;
}
/* Grid layer */
.main-wrapper::after {}
/* Dot pattern layer */
.dot-pattern {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(249, 249, 249, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
z-index: 3;
}
/* Vignette effect */
.vignette {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
z-index: 4;
}
.content-container {
position: relative;
z-index: 5;
margin-top: 130px;
/* padding: 0 0px 140px; */
}
/* Search bar */
.search-container {
max-width: 850px;
/* margin: 0 auto 32px; */
/* margin-top: 120px;
margin-bottom: 120px; */
margin-left: auto;
margin-right: auto;
}
.search-wrapper {
/* display: flex; */
gap: 12px;
align-items: stretch;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(249, 249, 249, 0.5);
pointer-events: none;
}
.search-input {
width: 100%;
height: 48px;
padding: 12px 18px 12px 46px;
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.5);
border-radius: 12px;
color: #F9F9F9;
font-size: 15px;
line-height: 24px;
transition: all 0.2s;
}
.search-input::placeholder {
color: rgba(249, 249, 249, 0.55);
}
.search-input:focus {
outline: none;
border-color: rgba(249, 135, 21, 0.5);
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.1);
}
/* .search-btn:hover {
background: #E07A12;
}
.search-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.3);
} */
/* Breadcrumb */
.breadcrumb-wrapper {
max-width: 850px;
margin: 0 auto 18px;
}
.results-summary {
margin-bottom: 60px;
}
.breadcrumb-custom {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(249, 249, 249, 0.7);
}
.breadcrumb-link {
color: rgba(249, 249, 249, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: #F98715;
}
.breadcrumb-separator {
color: rgba(249, 249, 249, 0.5);
font-size: 11px;
}
.breadcrumb-current {
color: rgba(249, 249, 249, 0.9);
}
/* Page title */
.page-title-wrapper {
max-width: 850px;
/* margin: 0 auto 28px; */
margin-top: 65px;
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
}
.page-title {
font-size: 4.6875rem;
font-weight: 700;
color: #F9F9F9;
margin: 0;
}
/* FAQ List */
.result-list-section {
position: relative;
background-size: contain;
background-position: unset;
background-repeat: unset;
background-size: unset;
background-image: unset;
padding: 0px;
.custom-pagination {
margin-top: 60px;
}
}
.faq-section {
margin-top: 60px;
margin-bottom: 80px;
.custom-pagination {
margin-top: 60px;
}
.faq-item.active .faq-icon-box {
transform: rotate(90deg);
}
}
@media (max-width: 767px) {
.content-container {
padding: 30px 16px 50px;
margin-top: 60px;
}
.search-contain {
display: block;
width: 100%;
}
.search-wrapper {
flex-direction: column;
}
.search-input-group {
flex: unset;
margin-right: 0;
}
.search-btn {
width: 100%;
}
.page-title {
font-size: 24px;
}
.faq-item {
padding: 14px 16px;
}
.faq-question {
font-size: 18px;
}
.breadcrumb-custom {
font-size: 12px;
}
.search-container {
margin-top: 20px;
margin-bottom: 85px;
margin-left: 15px;
margin-right: 15px;
}
.results-summary {
padding: 0 15px;
}
.results-summary {
margin-bottom: 26px;
}
.title-section {
padding-top: 38px;
}
}
}
/* result page end */
/* result-list-section */
.result-list-section {
position: relative;
background-image: url(../images/backgrounds/bg_faq_section.webp);
position: relative;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 240px 0;
.result-item {
background: #231f20;
border: 1px solid rgba(249, 249, 249, 0.08);
border-radius: 14px;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.result-item:hover {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.search-result-header {
width: 100%;
background: transparent;
border: none;
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:focus {
outline: unset;
outline: unset;
}
.search-result-header:hover {
background-color: rgba(249, 249, 249, 0.02);
}
.faq-question {
font-weight: 600;
font-size: 15px;
color: rgba(249, 249, 249, 0.9);
text-align: left;
flex: 1;
padding-right: 16px;
}
.faq-icon-box {
width: 28px;
height: 28px;
background-color: var(--aifo-orange);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.result-content {
color: var(--aifo-white);
text-align: left;
width: 94%;
.result-title {
font-size: 17px;
font-weight: 600;
margin: 0 0 4px 0;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.result-description {
color: rgba(249, 249, 249, 0.7);
font-size: 14px;
margin: 0;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.faq-icon {
color: white;
font-size: 20px;
font-weight: bold;
line-height: 1;
}
.result-item.active .faq-icon-box {
transform: rotate(90deg);
}
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
opacity: 0;
}
.result-item.active .faq-body {
max-height: 500px;
opacity: 1;
}
.faq-answer {
padding: 0 24px 24px 24px;
border-top: 1px solid rgba(249, 249, 249, 0.06);
// margin-top: 12px;
padding-top: 12px;
}
.faq-answer p {
color: rgba(249, 249, 249, 0.72);
font-size: 14px;
line-height: 1.6;
margin-bottom: 12px;
}
.see-more-link {
color: var(--orange-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.see-more-link:hover {
color: var(--orange-hover);
text-decoration: underline;
}
}
@media (max-width: 768px) {
.faq-section {
button:focus {
outline: unset;
}
.faq-answer {
border-top: unset;
}
}
}
/* FAQ Section End*/
/* result-list page */
/* Results Summary */
.results-summary {
max-width: 850px;
margin: 0 auto;
color: rgba(249, 249, 249, 0.85);
font-size: 25px;
}
#tags_type {
.academy-block-1 {
height: 37.125rem;
}
.header-section {
text-align: center;
margin-bottom: 48px;
}
.main-title {
font-size: 46px;
font-weight: 800;
color: #F9F9F9;
margin: 0 0 14px 0;
letter-spacing: -0.5px;
}
.subtitle {
max-width: 570px;
margin: 0 auto;
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
}
.cards-grid {
margin-bottom: 28px;
}
.card-item {
margin-bottom: 30px;
transition: transform 0.2s ease;
}
.card-placeholder {
width: 100%;
height: 240px;
background: #2A2A2A;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
transition: all 0.2s ease;
cursor: pointer;
img {
border-radius: 20px;
width: 100%;
height: 100%;
}
}
.card-item:hover .card-placeholder {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.card-content {
padding-top: 13px;
}
.card-title {
font-size: 15px;
font-weight: 700;
color: #F9F9F9;
margin: 0 0 6px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-description {
font-size: 12.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.70);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 9px;
padding: 28px 0 40px;
}
.pagination-item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
font-size: 12.5px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border-radius: 7px;
}
.pagination-item:hover {
color: #F98715;
}
.pagination-item.active {
background: #F98715;
color: #FFFFFF;
}
.pagination-item.dots {
color: rgba(255, 255, 255, 0.45);
cursor: default;
}
.pagination-item.dots:hover {
color: rgba(255, 255, 255, 0.45);
}
.pagination-arrow {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
}
.pagination-arrow:hover {
color: #F98715;
}
@media (max-width: 767px) {
.content-container {
padding: 48px 16px 40px;
}
.main-title {
font-size: 32px;
}
.subtitle {
font-size: 13px;
}
.header-section {
margin-bottom: 36px;
}
.card-placeholder {
height: 220px;
}
.pagination-item {
min-width: 32px;
height: 32px;
font-size: 13px;
}
.academy-block-1 {
height: 22.125rem;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.main-title {
font-size: 40px;
}
}
}
#contact {
.bg-layer {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
radial-gradient(circle at 55% 15%, rgba(249, 135, 21, 0.60), rgba(249, 135, 21, 0.00) 60%),
radial-gradient(circle at 15% 35%, rgba(249, 135, 21, 0.35), rgba(249, 135, 21, 0.00) 60%),
#0B0B0B;
background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%;
}
.contact-page {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.heading-icon {
transform: translateY(-10px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.contact-wrap {
padding: 60px 15px;
min-height: 100%;
}
.info-column {
padding-right: 30px;
}
.title-wrapper {
display: flex;
align-items: flex-start;
margin-bottom: 68px;
}
.main-title {
line-height: 90px;
margin: 0;
}
.main-title .line1,
.main-title .line2 {
font-size: 75px;
font-weight: 800;
color: #F9F9F9;
display: block;
}
.title-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #F98715 0%, #FF9F3A 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 16px;
margin-top: 8px;
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.35);
flex-shrink: 0;
}
.title-icon i {
font-size: 26px;
color: #F9F9F9;
}
.contact-details {
margin-bottom: 68px;
}
.contact-details p {
font-size: 24px;
font-weight: 500;
color: rgba(249, 249, 249, 0.85);
margin: 8px 0;
}
.contact-details a {
color: rgba(249, 249, 249, 0.85);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-details a:hover {
color: #F98715;
}
.info-block {
margin-bottom: 20px;
}
.info-block h3 {
font-size: 18px;
font-weight: 600;
color: #F98715;
margin-bottom: 10px;
}
.info-block p {
font-size: 15px;
line-height: 1.6;
color: rgba(249, 249, 249, 0.75);
margin: 0;
}
.social-icons {
display: flex;
gap: 14px;
margin-top: 14px;
}
.social-icon {
width: 38px;
height: 38px;
border: 1px solid rgba(249, 249, 249, 0.35);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(249, 249, 249, 0.35);
font-size: 16px;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
border-color: #F98715;
color: #F98715;
box-shadow: 0 0 16px rgba(249, 135, 21, 0.4);
}
.form-card {
background: #111111;
border-radius: 26px;
padding: 50px;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.form-card h2 {
font-size: 30px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 20px;
}
.form-description {
font-size: 14px;
line-height: 1.5rem;
color: #989795;
margin-bottom: 30px;
}
.form-group label {
font-size: 15px;
font-weight: 500;
color: #989795;
margin-bottom: 8px;
display: block;
}
.form-control {
background: #2A2A2A;
border: 1px solid rgba(249, 249, 249, 0.10);
border-radius: 9px;
color: #F9F9F9;
padding: 12px 14px;
font-size: 14px;
height: 46px;
transition: all 0.3s ease;
}
.form-control:focus {
background: #2A2A2A;
border-color: #F98715;
box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25);
color: #F9F9F9;
outline: none;
}
.form-control::placeholder {
color: rgba(249, 249, 249, 0.35);
}
textarea.form-control {
min-height: 130px;
height: auto;
resize: vertical;
}
.form-group {
margin-bottom: 15px;
}
.invalid-feedback {
display: none;
font-size: 12px;
color: var(--aifo-dark-gary);
margin-top: 6px;
}
.was-validated .form-control:invalid {
border-color: var(--aifo-orange);
}
.was-validated .form-control:invalid~.invalid-feedback {
display: block;
}
.success-hint {
display: none;
background: #F9F9F9;
border-radius: 8px;
padding: 6px 12px;
margin-bottom: 16px;
font-size: 12px;
align-items: center;
width: fit-content;
animation: slideDown 0.4s ease;
}
.success-hint.show {
display: flex;
}
.success-icon {
width: 18px;
height: 18px;
background: #F98715;
color: #F9F9F9;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
margin-right: 8px;
flex-shrink: 0;
}
.success-text {
color: #2A2A2A;
font-weight: 500;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn-submit {
background: #F98715;
border: none;
border-radius: 12px;
color: #F9F9F9;
font-size: 20px;
font-weight: 600;
padding: 0 32px;
height: 55px;
width: 100%;
margin-top: 30px;
transition: all 0.2s ease;
cursor: pointer;
}
.btn-submit:hover {
background: #E97C10;
}
.btn-submit:active {
transform: translateY(1px);
}
.btn-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
#section-10 .bg_light {
/* todo */
background-image: url(../images/backgrounds/lc_bg_12.png);
background-size: 65%;
background-repeat: no-repeat;
background-position: center;
background-position-y: -349px;
background-repeat: no-repeat;
background-size: 100% 1000px;
background-position: top center;
}
@media (min-width: 1200px) {
.contact-form-ringht {
max-width: 600px;
}
}
@media (max-width: 991px) {
.main-title .line1,
.main-title .line2 {
font-size: 60px;
}
.title-icon {
width: 48px;
height: 48px;
}
.title-icon i {
font-size: 22px;
}
.info-column {
padding-right: 15px;
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.academy-block-1 {
height: auto;
background-repeat: no-repeat;
background-size: 100% 442px;
background-position: top center;
}
.main-title {
line-height: 62px;
}
.title-wrapper {
margin-bottom: 35px;
}
.contact-details {
margin-bottom: 50px;
}
.contact-wrap {
padding: 40px 15px;
}
.main-title .line1,
.main-title .line2 {
font-size: 44px;
}
.title-icon {
width: 42px;
height: 42px;
margin-left: 12px;
}
.title-icon i {
font-size: 20px;
}
.contact-details p {
font-size: 18px;
}
.form-card {
padding: 24px;
}
.form-card h2 {
font-size: 28px;
}
.info-column {
margin-bottom: 30px;
}
}
}
/* company-news start */
#company-news {
/* margin-top: 5.9375rem; */
.acadey-section-1 {}
.funded-trading-hero .text-center {
max-width: 51rem;
}
.academy-block-1 {
height: auto;
background-repeat: no-repeat;
background-size: 100% 766px;
background-position: top center;
}
.heading-icon {
transform: translateY(-9px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.floating-img:hover {
transform: translateY(-25px) rotateX(5deg) rotateY(5deg) scale(1.05);
}
.btn-start-challenge {
width: 340px;
}
.page-title {
font-size: 2.1875rem;
}
/* .academy-block-1 {
height: 40.125rem;
} */
.icon {
width: 3rem;
height: auto;
color: #fff;
font-size: 14px;
}
.faq-section {
.faq-item.active .faq-icon-box {
transform: rotate(90deg);
}
.faq-answer {
margin-top: 0px;
}
}
.hero {
padding: 6.25rem 0 3.5rem;
/* 100px top, 56px bottom */
padding-top: 3.125rem;
text-align: center;
}
.hero-title {
// margin-top: 12.5rem;
margin-top: 7.5rem;
}
.faq-section {
padding: 240px 0;
}
.page-title-wrapper {
margin-bottom: 60px;
}
@media (max-width: 768px) {
.hero-title {
margin-top: 4.5rem;
}
.center-buttons {
margin-top: 66px;
position: relative;
}
.hero-buttons a:nth-child(2) {
width: 340px;
}
.faq-section {
padding: 146px 0 0 0;
}
}
}
#company-news-sub {
.main-wrapper {
position: relative;
z-index: 1;
min-height: 100%;
}
.icon {
height: auto;
font-size: 12px;
width: auto;
}
/* Navbar */
.navbar {
background: rgba(11, 11, 11, 0.8);
backdrop-filter: blur(10px);
padding: 16px 0;
border-bottom: 1px solid rgba(249, 249, 249, 0.08);
}
.navbar-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: #F9F9F9;
font-size: 24px;
}
.logo-icon {
width: 32px;
height: 32px;
background: #F98715;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
}
.navbar-nav .nav-link {
color: #F9F9F9;
font-size: 14px;
font-weight: 500;
padding: 8px 16px;
transition: color 0.3s;
}
.navbar-nav .nav-link:hover {
color: #F98715;
}
.navbar-nav .nav-link::after {
content: '▼';
font-size: 10px;
margin-left: 4px;
opacity: 0.6;
}
.navbar-nav .nav-link.no-dropdown::after {
content: '';
}
/* .btn-start-challenge {
background: #F98715;
color: #F9F9F9;
border: none;
border-radius: 10px;
padding: 8px 20px;
font-size: 14px;
font-weight: 600;
transition: background 0.3s;
}
.btn-start-challenge:hover {
background: #e07810;
color: #F9F9F9;
} */
/* Main Content Area */
.content-area {
padding: 32px 0 60px;
}
/* Breadcrumb */
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.back-button {
width: 20px;
height: 20px;
background: #F98715;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s;
}
.back-button:hover {
background: #e07810;
}
.back-button::before {
/* content: '‹';
color: #F9F9F9;
font-size: 18px;
font-weight: 700; */
}
.breadcrumb-text {
color: #F9F9F9;
font-size: 14px;
font-weight: 500;
}
/* Article Hero Image */
.article-hero {
width: 100%;
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.article-hero img {
width: 100%;
height: auto;
border-radius: 16px;
object-fit: cover;
}
/* Article Card */
.article-card {
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 16px;
padding: 20px 40px 20px 40px;
position: relative;
margin-bottom: 20px;
}
.article-title {
color: #F9F9F9;
font-size: 32px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 16px;
}
.article-meta {
display: flex;
gap: 24px;
margin-bottom: 12px;
font-size: 13px;
color: rgba(249, 249, 249, 0.55);
}
.article-author {
color: #F98715;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.article-content p {
color: rgba(249, 249, 249, 0.75);
font-size: 15px;
line-height: 1.7;
margin-bottom: 16px;
}
/* Article Tags */
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-pill {
background: #0e0e0e;
border: 1px solid rgba(249, 249, 249, 0.18);
border-radius: 10px;
padding: 8px 14px;
font-size: 13px;
color: rgba(249, 249, 249, 0.70);
cursor: pointer;
transition: border-color 0.3s;
}
.article-tags .tag-pill:hover {
border-color: #F98715;
}
/* Sidebar */
.sidebar-card {
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 16px;
padding: 40px 30px;
position: sticky;
top: 100px;
}
.newsletter-module {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(249, 249, 249, 0.08);
}
.newsletter-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 25px;
}
.newsletter-icon {
width: 50px;
height: 50px;
background: #F98715;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
img {
width: 100%;
height: 100%;
}
}
.newsletter-title {
font-size: 20px;
font-weight: 700;
color: #F9F9F9;
line-height: 1.4;
width: 67%;
}
.newsletter-input {
width: 100%;
background: rgba(26, 26, 26, 0.8);
border: 1px solid rgba(249, 249, 249, 0.18);
border-radius: 10px;
padding: 10px 14px;
color: #F9F9F9;
font-size: 14px;
margin-bottom: 25px;
transition: border-color 0.3s;
}
.newsletter-input:focus {
outline: none;
border-color: #F98715;
}
.newsletter-input::placeholder {
color: rgba(249, 249, 249, 0.4);
}
.btn-subscribe {
width: 100%;
background: #F98715;
color: #F9F9F9;
border: none;
border-radius: 10px;
padding: 12px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.btn-subscribe:hover {
background: #e07810;
}
.btn-subscribe:disabled {
background: rgba(249, 135, 21, 0.5);
cursor: not-allowed;
}
.subscribe-message {
margin-top: 10px;
font-size: 13px;
text-align: center;
}
.subscribe-message.success {
color: #4ade80;
}
.subscribe-message.error {
color: #f87171;
}
/* Recommended Articles */
.recommended-item {
margin-bottom: 20px;
.article_thumbnail {
width: 270px;
height: 170px;
margin-bottom: 10px;
img {
width: 100%;
}
}
}
.recommended-item:last-child {
margin-bottom: 0;
}
.recommended-thumb {
width: 100%;
height: 120px;
border-radius: 12px;
object-fit: cover;
margin-bottom: 12px;
}
.recommended-title {
font-size: 25px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 8px;
line-height: 1.3;
}
.recommended-excerpt {
font-size: 18px;
font-weight: 200;
color: var(--aifo-white);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article_content {
height: auto;
min-height: 100px;
max-height: 1000px;
overflow-y: scroll;
overflow-x: hidden;
grid-template-columns: repeat(2, 356px);
grid-gap: 22px;
padding-right: 40px;
}
.article_content::-webkit-scrollbar {
width: 8px;
}
.article_content::-webkit-scrollbar-thumb {
background: #F98715;
border-radius: 5px;
}
@media (min-width: 992px) {
.col-lg-8 {
max-width: 742px;
}
}
/* Responsive */
@media (max-width: 991px) {
.article-card {
padding: 24px;
}
.article-title {
font-size: 26px;
}
.sidebar-card {
position: static;
margin-top: 32px;
}
}
@media (max-width: 767px) {
.article-card {
padding: 20px;
}
.article-title {
font-size: 22px;
}
.navbar-collapse {
background: rgba(20, 20, 20, 0.98);
padding: 20px;
border-radius: 12px;
margin-top: 16px;
}
.main-wrapper {
margin-left: 15px;
margin-right: 15px;
}
.recommended-item {
.article_thumbnail {
width: 100%;
height: 170px;
margin-bottom: 10px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
/* WebP格式（优先） */
.academy-block-1 {
height: auto;
background-image:
image-set(url('../images/backgrounds/academy/bg_grid.webp') type('image/webp'),
url('../images/backgrounds/academy/bg_grid.png') type('image/jpeg'));
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* faq subdirect page strat */
#faq_subpage {
.main-wrapper {
position: relative;
min-height: 100%;
width: 100%;
/* background: #0B0B0B; */
overflow: hidden;
}
.academy-block-1 {
background-color: transparent;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* Background layers */
.faq-section {
background-image: none;
}
/* Grid layer */
/* Dot pattern layer */
.dot-pattern {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(249, 249, 249, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
z-index: 3;
}
/* Vignette effect */
.vignette {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
z-index: 4;
}
.content-container {
position: relative;
z-index: 5;
padding: 0px 0px 140px;
/* background: #fff; */
/* border: 1px solid #989795; */
margin: 0;
padding: 0;
}
/* Search bar */
.search-container {
max-width: 850px;
/* margin: 0 auto 32px; */
margin-top: 120px;
margin-bottom: 120px;
margin-left: auto;
margin-right: auto;
}
.search-wrapper {
display: flex;
gap: 12px;
align-items: stretch;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(249, 249, 249, 0.5);
pointer-events: none;
}
.search-input {
width: 100%;
height: 48px;
padding: 12px 18px 12px 46px;
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.15);
border-radius: 12px;
color: #F9F9F9;
font-size: 15px;
line-height: 24px;
transition: all 0.2s;
}
.search-input::placeholder {
color: rgba(249, 249, 249, 0.55);
}
.search-input:focus {
outline: none;
border-color: rgba(249, 135, 21, 0.5);
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.1);
}
.search-btn {
height: 48px;
padding: 12px 28px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
/* .search-btn:hover {
background: #E07A12;
}
.search-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.3);
} */
/* Breadcrumb */
.breadcrumb-wrapper {
max-width: 850px;
margin: 0 auto 18px;
}
.breadcrumb-custom {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(249, 249, 249, 0.7);
}
.breadcrumb-link {
color: rgba(249, 249, 249, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: #F98715;
}
.breadcrumb-separator {
color: rgba(249, 249, 249, 0.5);
font-size: 11px;
}
.breadcrumb-current {
color: rgba(249, 249, 249, 0.9);
}
/* Page title */
.page-title-wrapper {
max-width: 850px;
/* margin: 0 auto 28px; */
margin-top: 65px;
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
}
.page-title {
font-size: 32px;
font-weight: 700;
color: #F9F9F9;
margin: 0;
}
/* FAQ List */
/* Responsive */
@media (max-width: 991px) {
.support-content {
flex-direction: column;
text-align: center;
}
.support-visual {
width: 160px;
height: 160px;
}
.support-buttons {
justify-content: center;
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.content-container {
padding: 30px 16px 50px;
}
.search-wrapper {
flex-direction: column;
}
.search-btn {
width: 100%;
}
.page-title {
font-size: 24px;
}
.faq-item {
padding: 14px 16px;
}
.faq-question {
font-size: 14px;
}
.support-card {
padding: 24px 20px;
}
.support-title {
font-size: 18px;
}
.support-subtitle {
font-size: 14px;
}
.support-buttons {
flex-direction: column;
width: 100%;
}
.support-btn {
width: 100%;
}
.breadcrumb-custom {
font-size: 12px;
}
.support-icon {
width: 273px;
height: 275px;
}
.support-card-wrapper {
margin-top: 99px;
}
.page-title-wrapper {
margin-top: 30px;
margin-bottom: 30px;
}
.breadcrumb-wrapper {
padding-right: 15px;
padding-left: 15px;
}
.search-container {
margin-top: 67px;
margin-bottom: 85px;
margin-left: 15px;
margin-right: 15px;
}
}
}
#faq_subpage.blank_page_theme {
.academy-block-1::before {
background-image: url(../images/backgrounds/bg_faq_subblank.webp);
height: 576px;
}
.breadcrumb-link {
color: var(--aifo-dark-gary);
}
.content-container {
position: relative;
z-index: 5;
padding: 0px;
/* background: #fff; */
/* border: 1px solid #989795; */
}
.article-content-section {
background: #fff;
padding-top: 133px;
padding-bottom: 133px;
border-bottom: 1px solid #989795;
}
.page-title-wrapper {
margin-top: 0px;
padding-top: 120px;
}
.article-content-section {
background: #fff;
padding-top: 133px;
.article-meta {
color: var(--aifo-dark-gary);
}
}
.article-content-section {
.menu-item {
.toc-link {
color: var(--aifo-dark-gary);
}
}
.menu-card {
background: #fff;
}
.article-title {
color: var(--aifo-dark-gary);
}
.article-body {
color: var(--aifo-dark-gary);
}
h1,
.h1 {
color: var(--aifo-dark-gary);
}
}
.faq-section {
background: #fff;
.faq-header {
background: var(--aifo-orange);
}
.faq-item {
background: var(--aifo-orange);
border: 1px solid var(--aifo-orange);
}
.page-link {
color: var(--aifo-dark-gary);
}
.page-item:last-child .page-link {
color: var(--aifo-orange);
}
.page-item:first-child .page-link {
color: var(--aifo-orange);
}
}
.page-title {
color: var(--aifo-dark-gary);
}
.page-title-wrapper {
margin-top: 0px;
padding-top: 65px;
}
.suport-cart-section {
background: #fff;
}
.faq-section {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 60px;
padding-bottom: 80px;
}
@media (max-width: 768px) {
.content-container {
padding: 0px;
}
.search-container {
margin-left: 15px;
margin-right: 15px;
}
.article-content-section {
background: #fff;
/* padding-left:15px;
padding-right: 15px; */
.container {
/* margin-left:15px;
margin-right: 15px; */
}
}
.main-wrapper::before {
height: 470px;
}
.cta-button-wrapper {
margin-top: 60px;
}
.suport-cart-section {
padding-top: 115px;
padding-bottom: 75px;
}
.faq-section {
padding-bottom: 40px;
}
}
}
/* faq subdirect page end */
/* faq page strat */
#faq {
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* Title Section */
.title-section {
text-align: center;
padding-top: 152px;
margin-bottom: 55px;
}
.title-desc span {
display: block;
width: 826px;
}
.main-wrapper::before {
height: 800px;
}
.page-title {
font-size: 75px;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.faq-section .page-title {
font-size: 35px;
}
.title-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
margin: 0 6px;
vertical-align: middle;
img {
height: 100%;
width: 100%;
}
}
.title-icon i {
color: #F9F9F9;
font-size: 20px;
}
/* WebP格式（优先） */
.academy-block-1 {
height: auto;
background-image: unset;
background-color: transparent;
}
@media (max-width: 768px) {
.page-title {
font-size: 30px;
}
.title-section {
padding-top: 75px;
margin-bottom: 20px;
}
.category-card {
padding: 25px 0 25px 35px;
margin-bottom: 10px;
}
.category-title {
font-size: 35px;
margin-bottom: 18px;
}
.category-icon-wrapper {
margin-bottom: 18px;
}
}
}
/* Popular Searches section */
.popular-searches {
width: 100%;
max-width: 960px;
padding: 48px 24px;
text-align: center;
}
.popular-searches h2 {
color: #ff9c3a;
font-size: 24px;
font-weight: 500;
margin-bottom: 32px;
}
.search-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.search-item {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
font-size: 14px;
color: #fff;
background: rgba(255, 255, 255, 0.02);
text-decoration: none;
white-space: nowrap;
transition: all .25s ease;
}
/* hover / focus */
.search-item:hover,
.search-item:focus {
color: #ff9c3a;
border-color: #ff9c3a;
background: rgba(255, 156, 58, .08);
outline: none;
}
.search-item:active {
transform: scale(0.97);
}
@media (max-width: 768px) {
.popular-searches h2 {
font-size: 22px;
}
}
@media (max-width: 576px) {
body {
align-items: flex-start;
}
.popular-searches {
padding: 32px 14px;
}
.popular-searches h2 {
font-size: 20px;
margin-bottom: 24px;
}
.search-list {
flex-direction: column;
/* 纵向列表 */
gap: 12px;
}
.search-item {
width: 100%;
/* 占满屏幕 */
white-space: normal;
/* 自动换行 */
text-align: center;
padding: 14px 16px;
font-size: 14px;
line-height: 1.5;
}
}
/* categories section */
.categories-section {
padding: 50px 0 60px;
}
.category-card {
border-radius: 17px;
padding: 25px 0 25px 50px;
margin-bottom: 20px;
min-height: 150px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
text-decoration: none;
display: block;
color: inherit;
background-image: url(../images/backgrounds/bg_faq.webp);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.category-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
text-decoration: none;
color: inherit;
}
.category-icon-wrapper {
width: 54px;
height: 54px;
background: rgba(249, 135, 21, 0.18);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
img {
width: 100%;
height: 100%;
}
}
.category-icon {
width: 18px;
height: 18px;
color: #F98715;
}
.category-title {
font-size: 30px;
font-weight: 800;
color: #F9F9F9;
margin-bottom: 20px;
}
.category-count {
font-size: 20px;
font-weight: 500;
color: #F98715;
margin-bottom: 0;
}
@media (max-width: 767px) {
.hero-section {
padding-top: 48px;
padding-bottom: 40px;
}
.hero-greeting {
font-size: 30px;
}
.hero-title {
font-size: 32px;
}
.search-wrapper {
flex-direction: column;
gap: 10px;
}
.search-button {
width: 100%;
}
.category-card {
min-height: 130px;
}
.category-title {
font-size: 22px;
}
}
@media (max-width: 575px) {
.hero-greeting {
font-size: 28px;
}
.hero-title {
font-size: 28px;
}
.popular-tags {
padding: 0 10px;
grid-template-columns: 1fr;
}
}
.main-wrapper {
position: relative;
min-height: 100%;
width: 100%;
/* background: #0B0B0B; */
overflow: hidden;
}
/* Background layers */
.faq-section {
/* background-image: none; */
}
/* Grid layer */
/* Dot pattern layer */
.dot-pattern {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(249, 249, 249, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
z-index: 3;
}
/* Vignette effect */
.vignette {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none;
z-index: 4;
}
.content-container {
position: relative;
z-index: 5;
margin-top: 152px;
/* padding: 0 0px 140px; */
}
/* Search bar */
.search-container {
max-width: 850px;
/* margin: 0 auto 32px; */
/* margin-top: 120px;
margin-bottom: 120px; */
margin-left: auto;
margin-right: auto;
}
.search-wrapper {
/* display: flex; */
gap: 12px;
align-items: stretch;
}
.search-input-wrapper {
position: relative;
flex: 1;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(249, 249, 249, 0.5);
pointer-events: none;
}
.search-input {
width: 100%;
height: 48px;
padding: 12px 18px 12px 46px;
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.15);
border-radius: 12px;
color: #F9F9F9;
font-size: 15px;
line-height: 24px;
transition: all 0.2s;
}
.search-input::placeholder {
color: rgba(249, 249, 249, 0.55);
}
.search-input:focus {
outline: none;
border-color: rgba(249, 135, 21, 0.5);
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.1);
}
/* Breadcrumb */
.breadcrumb-wrapper {
max-width: 850px;
margin: 0 auto 18px;
}
.results-summary {
margin-bottom: 60px;
}
.breadcrumb-custom {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(249, 249, 249, 0.7);
}
.breadcrumb-link {
color: rgba(249, 249, 249, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-link:hover {
color: #F98715;
}
.breadcrumb-separator {
color: rgba(249, 249, 249, 0.5);
font-size: 11px;
}
.breadcrumb-current {
color: rgba(249, 249, 249, 0.9);
}
/* Page title */
.page-title-wrapper {
max-width: 850px;
/* margin: 0 auto 28px; */
margin-top: 65px;
margin-bottom: 65px;
margin-left: auto;
margin-right: auto;
}
.page-title {
font-size: 4.6875rem;
font-weight: 700;
color: #F9F9F9;
margin: 0;
}
/* FAQ List */
.result-list-section {
.custom-pagination {
margin-top: 60px;
}
}
.faq-section {
margin-top: 60px;
margin-bottom: 80px;
.custom-pagination {
margin-top: 60px;
}
.faq-item.active .faq-icon-box {
transform: rotate(90deg);
}
}
@media (max-width: 767px) {
.content-container {
padding: 30px 16px 50px;
margin-top: 60px;
}
.search-contain {
display: block;
width: 100%;
}
.search-wrapper {
flex-direction: column;
}
.search-input-group {
flex: unset;
margin-right: 0;
}
.search-btn {
width: 100%;
}
.page-title {
font-size: 24px;
}
.faq-item {
padding: 14px 16px;
}
.faq-question {
font-size: 14px;
}
.breadcrumb-custom {
font-size: 12px;
}
.search-container {
margin-top: 20px;
margin-bottom: 85px;
margin-left: 15px;
margin-right: 15px;
}
.results-summary {
padding: 0 15px;
}
.results-summary {
margin-bottom: 26px;
}
.title-section {
padding-top: 38px;
}
}
/* faq page end */
/* about us page start */
#about_us {
.academy-block-1 {
background-color: transparent;
position: relative;
padding-top: 150px;
}
.academy-block-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* Hero Section */
.hero-section {
padding: 0 0 20px;
text-align: center;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
display: block;
margin-top: 0rem;
margin-bottom: 80px;
span {
margin-left: 16px;
}
}
.hero-image-container {
position: relative;
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
max-width: 90%;
margin: 0 auto;
img {
width: 100%;
}
}
.hero-image {
width: 100%;
height: auto;
display: block;
filter: grayscale(100%);
}
/* Empowering Section */
.empowering-section {
padding-top: 172px;
}
.section-title {
font-size: 4.6875rem !important;
font-weight: 700;
text-align: center;
margin-bottom: 1rem;
line-height: 5.625rem;
}
.section-subtitle {
font-size: 2.1875rem;
font-weight: 500;
text-align: center;
margin-bottom: 2rem;
color: var(--aifo-white);
}
.section-description {
font-size: 1.75rem;
font-weight: 100;
text-align: center;
max-width: 878px;
margin: 0 auto 172px;
line-height: 1.8;
color: var(--aifo-white);
}
.info-card {
background: #1A1A1A;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 50px 60px;
height: 100%;
transition: all 0.3s ease;
position: relative;
}
.info-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(249, 135, 21, 0.1);
// background:var(--aifo-orange);
// box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 8px 15px 0 rgba(249, 135, 21, 0.7);
// .text-orange{
// color: var(--aifo-white) !important;
// }
}
.info-card-icon {
width: 70px;
height: 70px;
background: #F98715;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 35px;
img {
width: 100%;
height: 100%;
}
}
.info-card-icon svg {
width: 28px;
height: 28px;
fill: #0B0B0B;
}
.info-card-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.info-card-text {
font-size: 1rem;
line-height: 1.7;
color: rgba(249, 249, 249, 0.65);
}
/* News Section */
.news-section {
padding: 80px 0;
}
.news-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
}
.news-title {
font-size: 2.8rem;
font-weight: 700;
margin: 0;
}
.news-controls {
display: flex;
gap: 1rem;
}
.news-control-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: #F98715;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.news-control-btn:hover {
background: #ff9a2e;
box-shadow: 0 0 20px rgba(249, 135, 21, 0.4);
}
.news-control-btn svg {
width: 20px;
height: 20px;
fill: #0B0B0B;
}
.news-viewport {
overflow: hidden;
position: relative;
padding: 0 100px;
}
.news-track {
display: flex;
transition: transform 0.5s ease;
gap: 2rem;
}
.news-card {
min-width: calc(100% - 200px);
width: calc(100% - 200px);
background: #1A1A1A;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
display: flex;
flex-shrink: 0;
opacity: 0.4;
transform: scale(0.95);
transition: all 0.5s ease;
}
.news-card.active {
opacity: 1;
transform: scale(1);
}
.news-card-image {
width: 40%;
object-fit: cover;
}
.news-card-content {
padding: 2.5rem;
width: 60%;
}
.news-card-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 1rem;
color: #F9F9F9;
}
.news-card-text {
font-size: 1rem;
line-height: 1.7;
color: rgba(249, 249, 249, 0.65);
}
.news-pagination {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
}
.news-dot {
width: 40px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
transition: all 0.3s ease;
}
.news-dot.active {
background: #F98715;
width: 60px;
}
/* Responsive */
@media (max-width: 991px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem !important;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.news-viewport {
padding: 0 20px;
}
.news-card {
min-width: calc(100% - 40px);
width: calc(100% - 40px);
flex-direction: column;
}
.news-card-image {
width: 100%;
height: 250px;
}
.news-card-content {
width: 100%;
}
}
@media (max-width: 767px) {
.academy-block-1 {
padding-top: 75px;
}
.hero-title {
font-size: 2rem;
margin-bottom: 40px;
}
.empowering-section {
padding-top: 90px;
}
.section-description {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem !important;
line-height: 2.625rem;
}
.section-subtitle {
font-size: 1.5rem;
}
.team-grid {
grid-template-columns: 1fr;
}
.news-viewport {
padding: 0;
}
.news-card {
min-width: 100%;
width: 100%;
}
.news-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.news-title {
font-size: 2rem;
}
.info-card {
padding: 25px 30px;
}
.info-card-text {
text-align: justify;
}
.section-description {
margin: 0 auto 86px;
}
/* Navbar toggle */
.navbar-toggler {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(249, 249, 249, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#stories {
.left-img {
height: 42vw;
}
}
}
}
/* about us page end */
/* Team Section */
.team-section {
padding: 150px 0;
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.container {
margin-bottom: 100px;
}
/* ===== Marquee ===== */
.team-carousel-wrapper {
width: 100vw;
margin-left: calc(50% - 50vw);
overflow: hidden;
cursor: grab;
}
.team-carousel-wrapper.dragging {
cursor: grabbing;
}
.team-carousel {
display: flex;
gap: 24px;
will-change: transform;
}
.team-image-container {
flex: 0 0 640px;
width: 640px;
height: 430px;
border-radius: 16px;
overflow: hidden;
background: #111;
}
.team-image-container img {
width: 100%;
height: 100%;
display: block;
filter: grayscale(100%);
transition: .6s;
-webkit-user-drag: none;
user-drag: none;
user-select: none;
}
.team-image-container:hover img {
filter: grayscale(0);
transform: scale(1.05);
}
@media (max-width: 767px) {
.team-image-container {
flex: 0 0 auto;
width: clamp(280px, 80vw, 640px);
aspect-ratio: 640 / 430;
border-radius: 16px;
overflow: hidden;
background: #111;
max-height: 300px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.container {
margin-bottom: 50px;
}
}
}
@media (max-width: 768px) {
.team-section {
padding: 75px 0;
}
}
/* team sextion end */
/* live page start */
#live-page {
position: relative;
/* height: 43.125rem; */
/* .live-banner {
height: 43.125rem;
background-color: transparent;
} */
.live-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/academy/academy_bg_1.webp);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 805px;
}
/* Cards */
.card-dark {
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Section styling */
.section-title {
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-bottom: 2rem;
}
.section-title .highlight {
color: #F98715;
}
/* Live badge */
.live-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #F98715;
color: #fff;
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
}
.live-badge::before {
content: '';
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* Video container */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #000;
border-radius: 12px;
overflow: hidden;
margin-bottom: 1rem;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-meta {
color: #999;
font-size: 0.875rem;
margin-top: 0.5rem;
}
/* Upcoming state */
.upcoming-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(249, 135, 21, 0.3);
}
.upcoming-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
}
.upcoming-title {
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 1rem;
}
.countdown {
font-size: 3rem;
font-weight: 700;
color: #F98715;
margin-bottom: 1rem;
font-variant-numeric: tabular-nums;
}
.start-time {
color: #999;
font-size: 0.875rem;
line-height: 1.6;
}
/* Info card */
.session-title {
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 1rem;
}
.session-bullets {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
}
.session-bullets li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
color: #ccc;
}
.session-bullets li::before {
content: '✓';
position: absolute;
left: 0;
color: #F98715;
font-weight: 700;
}
.host-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
/* padding: 1rem; */
padding: 12px;
background: rgba(249, 135, 21, 0.05);
border-radius: 8px;
border-left: 3px solid #F98715;
}
.host-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #F98715, #e07812);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 1.2rem;
}
.host-info {
flex: 1;
}
.host-name {
font-weight: 700;
color: #fff;
margin: 0;
}
.host-title {
color: #999;
font-size: 0.875rem;
margin: 0;
}
/* Risk notice */
.risk-notice {
// background: rgba(249, 135, 21, 0.1);
// border: 1px solid rgba(249, 135, 21, 0.3);
border-radius: 8px;
/* padding: 1rem; */
padding: 12px;
margin-bottom: 1.5rem;
}
.risk-notice-title {
font-weight: 700;
color: #F98715;
margin-bottom: 0.5rem;
/* font-size: 0.875rem; */
font-size: 12px;
text-transform: uppercase;
}
.risk-notice-text {
color: #ccc;
/* font-size: 0.875rem; */
font-size: 10px;
line-height: 1.5;
margin: 0;
}
/* Buttons */
.btn-primary-orange {
background: #F98715;
color: #fff;
border: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s;
width: 100%;
margin-bottom: 0.75rem;
}
.btn-primary-orange:hover {
background: var(--aifo-orange-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.4);
color: #fff;
}
.btn-secondary-orange {
background: transparent;
color: #F98715;
border: 2px solid #F98715;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s;
width: 100%;
margin-bottom: 0.75rem;
}
.btn-secondary-orange:hover {
background: var(--aifo-orange-hover);
color: var(--aifo-white);
}
.btn-tertiary {
background: #2a2a2a;
color: #fff;
border: none;
padding: 0.75rem 2rem;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s;
width: 100%;
}
.btn-tertiary:hover {
background: #3a3a3a;
color: #fff;
}
/* Schedule section */
.schedule-item {
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s;
}
.schedule-item:hover {
border-color: rgba(249, 135, 21, 0.5);
transform: translateY(-2px);
}
.schedule-date {
color: #F98715;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.schedule-session-title {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin-bottom: 0.5rem;
}
.schedule-time {
color: #999;
font-size: 0.875rem;
margin-bottom: 1rem;
}
.schedule-topics {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.topic-pill {
background: rgba(249, 135, 21, 0.15);
color: #F98715;
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
/* Section subtitle */
.section-subtitle {
color: #999;
font-size: 1rem;
margin-top: -1rem;
margin-bottom: 2rem;
}
/* Enhanced schedule item with date badge */
.schedule-item-enhanced {
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1rem;
transition: all 0.3s;
display: flex;
gap: 1.5rem;
align-items: center;
}
.schedule-item-enhanced:hover {
border-color: rgba(249, 135, 21, 0.5);
transform: translateY(-2px);
}
.date-badge {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(249, 135, 21, 0.1);
border: 2px solid rgba(249, 135, 21, 0.3);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.date-badge-day {
color: #F98715;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
line-height: 1;
}
.date-badge-date {
color: #fff;
font-weight: 700;
font-size: 1.5rem;
line-height: 1;
margin-top: 0.25rem;
}
.schedule-item-content {
flex: 1;
}
.schedule-item-actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: flex-end;
}
.btn-add-calendar {
background: transparent;
color: #F98715;
border: 1px solid #F98715;
padding: 0.5rem 1.25rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s;
white-space: nowrap;
}
.btn-add-calendar:hover {
background: rgba(249, 135, 21, 0.1);
color: #F98715;
}
.reminder-text {
color: #666;
font-size: 0.75rem;
}
/* Filter bar */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
margin-bottom: 2rem;
}
.filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
flex: 1;
}
.filter-pill {
background: rgba(25, 25, 25, 0.9);
color: #999;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.5rem 1.25rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s;
cursor: pointer;
}
.filter-pill:hover {
color: #F98715;
border-color: rgba(249, 135, 21, 0.3);
}
.filter-pill.active {
background: #F98715;
color: #fff;
border-color: #F98715;
}
.search-input {
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
min-width: 200px;
}
.search-input::placeholder {
color: #666;
}
.search-input:focus {
outline: none;
border-color: rgba(249, 135, 21, 0.5);
}
/* Replay card */
.view-all-link {
color: #F98715;
font-weight: 600;
text-decoration: none;
transition: color 0.3s;
}
.view-all-link:hover {
color: #e07812;
}
/* Highlights horizontal scroll */
.highlights-wrapper {
position: relative;
padding: 0 3rem;
}
.highlights-scroll {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-behavior: smooth;
padding: 1rem 0;
scrollbar-width: thin;
scrollbar-color: #F98715 rgba(255, 255, 255, 0.05);
}
.highlights-scroll::-webkit-scrollbar {
height: 8px;
}
.highlights-scroll::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.highlights-scroll::-webkit-scrollbar-thumb {
background: #F98715;
border-radius: 4px;
}
.highlight-card {
flex: 0 0 300px;
background: rgba(25, 25, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s;
cursor: pointer;
}
.highlight-card:hover {
border-color: rgba(249, 135, 21, 0.5);
transform: translateY(-4px);
}
.highlight-thumbnail {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
overflow: hidden;
}
.highlight-thumbnail-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
opacity: 0.3;
}
.highlight-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(249, 135, 21, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.highlight-card:hover .highlight-play-icon {
background: #F98715;
transform: translate(-50%, -50%) scale(1.1);
}
.highlight-play-icon svg {
width: 24px;
height: 24px;
fill: #fff;
margin-left: 4px;
}
.highlight-duration-badge {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
}
.highlight-content {
padding: 1rem;
}
.highlight-title {
font-size: 0.938rem;
font-weight: 700;
color: #fff;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.highlight-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(25, 25, 25, 0.95);
border: 1px solid rgba(249, 135, 21, 0.3);
color: #F98715;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
z-index: 10;
}
.highlight-nav-btn:hover {
background: #F98715;
color: #fff;
border-color: #F98715;
}
.highlight-nav-prev {
left: 0;
}
.highlight-nav-next {
right: 0;
}
/* Video modal */
.video-modal .modal-dialog {
max-width: 900px;
}
.video-modal .modal-content {
background: rgba(10, 10, 10, 0.98);
border: 1px solid rgba(249, 135, 21, 0.3);
border-radius: 12px;
}
.video-modal .modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.video-modal .modal-title {
color: #fff;
}
.video-modal .close {
color: #F98715;
opacity: 1;
text-shadow: none;
}
.video-modal .modal-body {
padding: 0;
}
.video-modal-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #000;
}
.video-modal-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.post-sessions-section {
position: relative;
}
.post-sessions-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: -1;
background-image: url(../images/backgrounds/bg_center_source_section.webp);
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
}
/* Responsive */
@media (max-width: 991.98px) {
.section-title {
font-size: 1.5rem;
}
.countdown {
font-size: 2rem;
}
.btn-primary-orange,
.btn-secondary-orange,
.btn-tertiary {
margin-bottom: 0.75rem;
}
.schedule-item-enhanced {
flex-direction: column;
text-align: center;
}
.schedule-item-actions {
width: 100%;
align-items: center;
}
.btn-add-calendar {
width: 100%;
}
.btn-calendar {
width: 100%;
}
.reminder-text {
width: 100%;
}
.highlights-wrapper {
padding: 0;
}
.highlight-nav-btn {
display: none;
}
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.search-input {
width: 100%;
}
}
.page-wrapper {
min-height: 100%;
width: 100%;
background: #0B0B0B;
position: relative;
overflow-x: hidden;
}
.page-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 600px;
background: radial-gradient(circle, rgba(249, 135, 21, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.page-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(249, 249, 249, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(249, 249, 249, 0.02) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.content-container {
position: relative;
z-index: 1;
padding: 48px 20px 60px;
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
font-size: 13px;
}
.breadcrumb-nav a {
color: rgba(249, 249, 249, 0.55);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb-nav a:hover {
color: #F98715;
text-decoration: none;
}
.breadcrumb-separator {
color: rgba(249, 249, 249, 0.3);
user-select: none;
}
.breadcrumb-current {
color: #F9F9F9;
font-weight: 600;
}
.featured-live-module {
margin-bottom: 48px;
}
.live-cover-card {
position: relative;
height: 100%;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 18px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
}
.live-cover-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 80% 50%, rgba(249, 135, 21, 0.15) 0%, transparent 50%),
linear-gradient(135deg, rgba(20, 20, 20, 0.8) 0%, rgba(40, 40, 40, 0.6) 100%);
z-index: 1;
}
.live-cover-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
background: url('data:image/svg+xml,<svg width="400" height="280" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(249,135,21,0.08)" stroke-width="1"/></pattern></defs><rect width="400" height="280" fill="url(%23grid)"/><ellipse cx="320" cy="140" rx="180" ry="200" fill="rgba(249,135,21,0.12)"/></svg>');
background-size: cover;
background-position: center;
z-index: 2;
}
.live-cover-card:hover {
border-color: rgba(249, 135, 21, 0.35);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(249, 135, 21, 0.15);
}
.live-cover-overlay {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
padding: 20px;
}
.live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #F98715;
color: #fff;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
width: fit-content;
margin-bottom: 12px;
}
.live-badge::before {
content: '';
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.live-logo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.live-logo-icon {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #F98715, #e07a0d);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 14px;
}
.live-logo-text {
font-size: 16px;
font-weight: 700;
color: #F9F9F9;
}
.live-cover-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.live-cover-label {
display: inline-block;
background: rgba(249, 135, 21, 0.2);
border: 1px solid rgba(249, 135, 21, 0.4);
color: #F98715;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
width: fit-content;
margin-bottom: 12px;
}
.live-cover-title {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 4px;
}
.live-cover-title .title-white {
color: #F9F9F9;
display: block;
}
.live-cover-title .title-orange {
color: #F98715;
display: block;
}
.live-cover-instructor {
margin-top: auto;
font-size: 13px;
color: rgba(249, 249, 249, 0.70);
font-weight: 500;
}
.live-meta-line {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
padding-top: 0;
font-size: 12px;
color: rgba(249, 249, 249, 0.55);
}
.live-meta-line .live-indicator {
color: #F98715;
font-weight: 600;
}
.live-meta-line .separator {
color: rgba(249, 249, 249, 0.3);
}
.live-info-card {
background: linear-gradient(135deg, #1a1a1a 0%, #141414 100%);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 18px;
padding: 22px;
height: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.live-info-title {
font-size: 18px;
font-weight: 700;
color: #F9F9F9;
line-height: 1.3;
margin-bottom: 4px;
}
.live-info-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.live-info-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: rgba(249, 249, 249, 0.70);
line-height: 1.6;
}
.live-info-list li::before {
content: '✓';
color: #F98715;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.host-card {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.04);
border-radius: 12px;
padding: 12px;
}
.host-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(249, 135, 21, 0.25);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #F98715;
flex-shrink: 0;
}
.host-info h4 {
font-size: 14px;
font-weight: 600;
color: #F9F9F9;
margin: 0 0 2px 0;
}
.host-info p {
font-size: 12px;
color: rgba(249, 249, 249, 0.55);
margin: 0;
}
.risk-note {
background: rgba(249, 135, 21, 0.08);
border: 1px solid rgba(249, 135, 21, 0.25);
border-radius: 12px;
padding: 12px;
display: flex;
gap: 10px;
}
.risk-note-icon {
flex-shrink: 0;
width: 18px;
height: 18px;
color: #F98715;
font-weight: 700;
font-size: 14px;
}
.risk-note-content h5 {
font-size: 11px;
font-weight: 700;
color: #F98715;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 4px 0;
}
.risk-note-content p {
font-size: 11px;
color: rgba(249, 249, 249, 0.65);
line-height: 1.5;
margin: 0;
}
.live-cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
}
.btn-default {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 16px;
}
.btn-primary-orange {
background: var(--aifo-orange);
border: none;
border-radius: 999px;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary-orange:hover {
background: var(--aifo-orange-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.3);
}
.hero-title {
text-align: center;
margin-bottom: 32px;
}
.hero-title h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.2;
}
.hero-title h1 .white-text {
color: #F9F9F9;
}
.hero-title h1 .orange-text {
color: #F98715;
}
.hero-title p {
font-size: 15px;
color: rgba(249, 249, 249, 0.60);
margin: 0;
}
.upcoming-schedule-section {
.container {
margin-top: 56px;
margin-bottom: 56px;
}
.schedule-title {
padding-bottom: 20px;
}
.schedule-title h1 {
font-size: 48px;
}
}
.session-card {
background: linear-gradient(135deg, rgba(30, 30, 30, 0.85) 0%, rgba(40, 40, 40, 0.75) 100%);
border: 1px solid rgba(249, 249, 249, 0.10);
border-radius: 18px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.session-card.expanded {
background: linear-gradient(135deg, rgba(25, 25, 25, 0.95) 0%, rgba(35, 35, 35, 0.85) 100%);
}
.card-main-content {
display: flex;
align-items: center;
gap: 20px;
}
.date-badge {
flex-shrink: 0;
width: 60px;
height: 80px;
background: rgba(20, 20, 20, 0.6);
border: 1px solid rgba(249, 135, 21, 0.45);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.date-badge .day {
font-size: 13px;
font-weight: 600;
color: #F98715;
text-transform: uppercase;
}
.date-badge .month {
font-size: 13px;
font-weight: 600;
color: #F98715;
}
.date-badge .date {
font-size: 28px;
font-weight: 700;
color: #F9F9F9;
line-height: 1;
}
.session-info {
flex: 1;
min-width: 0;
}
.session-title {
font-size: 21px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 8px;
}
.session-time {
font-size: 14px;
color: rgba(249, 249, 249, 0.65);
margin-bottom: 10px;
}
.session-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-chip {
display: inline-block;
padding: 4px 12px;
border: 1px solid rgba(249, 135, 21, 0.45);
background: rgba(249, 135, 21, 0.12);
color: #F98715;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
}
.action-area {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.btn-calendar {
padding: 0 20px;
height: 38px;
border: 1px solid rgba(249, 135, 21, 0.8);
background: transparent;
color: #F98715;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-calendar:hover {
background: rgba(249, 135, 21, 0.08);
border-color: #F98715;
}
.btn-calendar.subscribed {
background: #F98715;
color: #fff;
border-color: #F98715;
}
.btn-calendar.subscribed:hover {
background: #e07a0d;
}
.reminder-text {
font-size: 12px;
color: rgba(249, 249, 249, 0.45);
}
.expanded-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding: 0 20px;
}
.session-card.expanded .expanded-panel {
max-height: 800px;
padding: 24px 20px 0;
}
.expanded-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding-top: 20px;
border-top: 1px solid rgba(249, 249, 249, 0.08);
}
.session-details h3,
.signup-section h3 {
font-size: 16px;
font-weight: 600;
color: #F9F9F9;
margin-bottom: 12px;
}
.session-overview {
font-size: 14px;
color: rgba(249, 249, 249, 0.65);
line-height: 1.6;
margin-bottom: 16px;
}
.key-takeaways {
margin-top: 16px;
}
.key-takeaways h4 {
font-size: 14px;
font-weight: 600;
color: #F9F9F9;
margin-bottom: 10px;
}
.takeaway-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
font-size: 13px;
color: rgba(249, 249, 249, 0.65);
}
.takeaway-item::before {
content: '';
color: #F98715;
font-size: 20px;
line-height: 1;
flex-shrink: 0;
}
.host-info {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px;
background: rgba(249, 135, 21, 0.05);
border-radius: 12px;
margin-bottom: 20px;
}
.host-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #F98715, #e07a0d);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.host-details h4 {
font-size: 15px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 2px;
}
.host-details .host-title {
font-size: 13px;
color: rgba(249, 249, 249, 0.65);
margin-bottom: 6px;
}
.host-details .host-bio {
font-size: 13px;
color: rgba(249, 249, 249, 0.55);
line-height: 1.4;
}
.signup-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-input {
width: 100%;
height: 44px;
padding: 0 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 10px;
color: #F9F9F9;
font-size: 14px;
transition: all 0.2s ease;
}
.form-input::placeholder {
color: rgba(249, 249, 249, 0.35);
}
.form-input:focus {
outline: none;
border-color: #F98715;
box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15);
}
.btn-submit {
width: 100%;
height: 44px;
background: #F98715;
border: none;
border-radius: 10px;
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-submit:hover {
background: #e07a0d;
}
.btn-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.form-note {
font-size: 12px;
color: rgba(249, 249, 249, 0.45);
line-height: 1.4;
}
.controls-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: 32px;
}
.btn-show-more {
padding: 0 28px;
height: 42px;
border: 1px solid rgba(249, 135, 21, 0.8);
background: transparent;
color: #F98715;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.btn-show-more:hover {
background: rgba(249, 135, 21, 0.08);
border-color: #F98715;
}
.pagination {
display: flex;
gap: 8px;
margin: 0;
}
.page-item {
list-style: none;
}
.page-link {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(249, 249, 249, 0.2);
background: transparent;
color: rgba(249, 249, 249, 0.7);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.page-link:hover {
background: rgba(249, 135, 21, 0.1);
border-color: rgba(249, 135, 21, 0.5);
color: #F98715;
}
.page-item.active .page-link {
background: #F98715;
border-color: #F98715;
color: #fff;
}
.success-message {
padding: 12px 16px;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 10px;
color: #22c55e;
font-size: 14px;
text-align: center;
margin-top: 12px;
}
/* Past Sessions Module */
.past-sessions-module {
margin-top: 56px;
margin-bottom: 56px;
padding-top: 56px;
border-top: 1px solid rgba(249, 249, 249, 0.06);
}
/* Featured Highlights Module */
.featured-highlights {
margin-top: 56px;
margin-bottom: 60px;
}
.highlights-header {
margin-bottom: 20px;
}
.highlights-header h2 {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 8px;
}
.highlights-header .white-text {
color: #F9F9F9;
}
.highlights-header .orange-text {
color: #F98715;
}
.highlights-subtitle {
font-size: 13px;
color: #fff;
margin: 0;
}
.highlights-shell {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(249, 249, 249, 0.10);
border-radius: 14px;
padding: 18px 48px;
overflow: hidden;
}
.highlights-track-wrapper {
position: relative;
overflow: hidden;
}
.highlights-track {
display: flex;
overflow-x: hidden;
scroll-behavior: smooth;
padding: 6px 0 12px 0;
-webkit-overflow-scrolling: touch;
/* iOS smooth scrolling */
}
.highlight-card {
flex: 0 0 200px;
background: #1A1A1A;
border: 1px solid rgba(249, 249, 249, 0.10);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 14px;
/* Replaced gap for better compatibility */
}
.highlight-card:last-child {
margin-right: 0;
}
.highlight-card:hover {
border-color: rgba(249, 135, 21, 0.45);
transform: translateY(-2px);
}
.highlight-thumb {
position: relative;
height: 110px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.highlight-thumb-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(249, 249, 249, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(249, 249, 249, 0.02) 1px, transparent 1px);
background-size: 20px 20px;
}
.highlight-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
background: #F98715;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 2;
}
.highlight-card:hover .highlight-play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 4px 12px rgba(249, 135, 21, 0.4);
}
.highlight-play::after {
content: '';
width: 0;
height: 0;
border-left: 8px solid #fff;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
margin-left: 2px;
}
.highlight-duration {
position: absolute;
right: 8px;
bottom: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 3px 7px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
z-index: 2;
}
.highlight-title {
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
color: rgba(249, 249, 249, 0.85);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.highlights-prev,
.highlights-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
/* background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease; */
z-index: 10;
transition: all 0.5s ease;
.icon {
font-size: 22px;
color: var(--aifo-orange);
}
}
.highlights-prev {
left: 10px;
}
.highlights-next {
right: 0;
}
.highlights-prev:hover,
.highlights-next:hover {
transform: translateY(-25px) rotateX(5deg) rotateY(5deg) scale(1.05);
.icon {
color: var(--aifo-orange-hover);
}
/* border-color: #F98715; */
/* box-shadow: 0 0 0 3px rgba(249, 135, 21, 0.15); */
}
.highlights-prev svg,
.highlights-next svg {
width: 14px;
height: 14px;
stroke: rgba(249, 249, 249, 0.75);
transition: stroke 0.2s ease;
}
.highlights-prev:hover svg,
.highlights-next:hover svg {
stroke: #F98715;
}
.highlights-progress {
margin-top: 10px;
height: 3px;
background: rgba(249, 249, 249, 0.10);
border-radius: 999px;
overflow: hidden;
}
.highlights-progress-fill {
height: 100%;
background: #F98715;
border-radius: 999px;
width: 0%;
transition: width 0.1s ease;
}
.past-sessions-header {
text-align: center;
margin-bottom: 24px;
}
.past-sessions-header h2 {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 8px;
}
.past-sessions-header .white-text {
color: #F9F9F9;
}
.past-sessions-header .orange-text {
color: #F98715;
}
.past-sessions-subtitle {
font-size: 13px;
color: rgba(249, 249, 249, 0.55);
margin: 0;
}
.replay-tabs {
display: flex;
flex-wrap: wrap;
justify-content: left;
gap: 10px;
margin-bottom: 32px;
}
.replay-tabs-bg {
padding: 12px 18px 12px 0;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.replay-tab {
height: 30px;
padding: 0 18px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid rgba(249, 249, 249, 0.15);
background: rgba(0, 0, 0, 0.06);
color: rgba(249, 249, 249, 0.70);
}
.replay-tab:hover {
border-color: rgba(249, 135, 21, 0.7);
color: #F98715;
}
.replay-tab.is-active {
background: #F98715;
color: #fff;
border-color: #F98715;
}
.replay-tab.is-active:hover {
background: #e07a0d;
}
.replay-card {
background: #141414;
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 24px;
}
.replay-card:hover {
border-color: rgba(249, 135, 21, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.replay-thumbnail {
position: relative;
width: 100%;
height: 180px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
display: flex;
align-items: center;
justify-content: center;
}
.replay-thumbnail-icon {
width: 48px;
height: 48px;
opacity: 0.3;
}
.replay-duration {
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}
.replay-content {
padding: 16px;
}
.replay-title {
font-size: 15px;
font-weight: 700;
color: #F9F9F9;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 42px;
}
.replay-meta {
font-size: 11px;
color: rgba(249, 249, 249, 0.55);
margin-bottom: 10px;
}
.replay-category-badge {
display: inline-block;
background: rgba(249, 135, 21, 0.12);
color: #F98715;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
margin-bottom: 12px;
}
.btn-watch-replay {
width: 100%;
height: 36px;
background: transparent;
border: 1px solid rgba(249, 135, 21, 0.75);
border-radius: 999px;
color: #F98715;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.btn-watch-replay:hover {
background: rgba(249, 135, 21, 0.12);
color: #F98715;
text-decoration: none;
}
.replay-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 32px;
}
.btn-load-more {
padding: 0 22px;
height: 38px;
background: #F98715;
border: none;
border-radius: 999px;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-load-more:hover {
background: #e07a0d;
transform: translateY(-1px);
}
.btn-load-more:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.view-all-link {
font-size: 12px;
color: rgba(249, 249, 249, 0.65);
text-decoration: none;
transition: color 0.2s ease;
}
.view-all-link:hover {
color: #F98715;
text-decoration: none;
}
.icon-zhiboxiaodianshi-01 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: var(--aifo-orange);
width: auto;
height: auto;
}
@media (max-width: 768px) {
.featured-live-module {
margin-bottom: 36px;
}
.live-cover-card {
height: 280px;
margin-bottom: 0;
}
.live-meta-line {
margin-top: 8px;
}
.live-cover-title {
font-size: 32px;
}
.live-info-card {
padding: 18px;
}
.hero-title h1 {
font-size: 36px;
}
.card-main-content {
flex-wrap: wrap;
}
.action-area {
width: 100%;
/* flex-direction: row;
justify-content: space-between; */
}
.reminder-text {
width: 100%;
text-align: center;
}
.expanded-content {
grid-template-columns: 1fr;
gap: 24px;
}
.date-badge {
width: 56px;
height: 74px;
}
.session-title {
font-size: 18px;
}
.past-sessions-module {
margin-top: 40px;
padding-top: 40px;
}
.past-sessions-header h2 {
font-size: 32px;
}
.replay-thumbnail {
height: 200px;
}
.featured-highlights {
margin-top: 40px;
}
.highlights-header h2 {
font-size: 32px;
}
.highlights-shell {
padding: 14px 38px;
}
.highlight-card {
flex: 0 0 170px;
}
.highlight-thumb {
height: 95px;
}
.highlight-play {
width: 28px;
height: 28px;
}
.highlight-play::after {
border-left: 7px solid #fff;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
}
}
/* live page end */
/* Support card */
.suport-cart-section::after {
content: '';
position: absolute;
/* top: 0; */
left: 0;
right: 0;
bottom: 0;
height: 233px;
background-image: url(../images/backgrounds/academy/dotdot.png);
/* position: relative; */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 230px;
pointer-events: none;
z-index: 2;
}
.suport-cart-section {
padding-bottom: 150px;
padding-top: 230px;
.support-card-wrapper {
max-width: 920px;
margin: 0 auto;
}
.support-card {
position: relative;
background: linear-gradient(135deg, #151515 0%, #0F0F0F 100%);
border: 1px solid rgba(249, 249, 249, 0.12);
border-radius: 18px;
/* padding: 70px 100px; */
padding-top: 70px;
padding-bottom: 70px;
padding-left: 90px;
padding-right: 60px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.support-content {
display: flex;
align-items: center;
gap: 40px;
}
.support-text {
flex: 1;
}
.support-title {
font-size: 22px;
font-weight: 700;
color: #F9F9F9;
margin: 0 0 10px;
}
.support-subtitle {
font-size: 15px;
color: rgba(249, 249, 249, 0.7);
margin: 0 0 24px;
}
.support-buttons {
display: flex;
gap: 12px;
}
.support-btn {
height: 50px;
width: 225px;
padding: 10px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
line-height: 24px;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.support-btn-primary {
/* background: #F98715; */
border: none;
color: #F9F9F9;
}
/* .support-btn-primary:hover {
background: #E07A12;
} */
.support-btn-primary:focus {
outline: none;
}
.support-btn-secondary {
background: transparent;
border: 1px solid rgba(249, 249, 249, 0.3);
color: #F9F9F9;
}
.support-btn-secondary:hover {
background: rgba(249, 249, 249, 0.05);
border-color: rgba(249, 249, 249, 0.4);
}
.support-btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(249, 249, 249, 0.1);
}
.support-btn-secondary svg {
width: 12px;
height: 12px;
fill: currentColor;
}
.support-visual {
flex-shrink: 0;
width: 200px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.support-glow {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.support-icon {
position: relative;
width: 300px;
height: 320px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
}
.support-icon svg {
width: 40px;
height: 40px;
fill: #F9F9F9;
}
}
@media (max-width: 768px) {
.suport-cart-section {
padding-bottom: 70px;
padding-top: 70px;
.support-card-wrapper {
margin-left: 15px;
margin-right: 15px;
}
}
}
/* support card end */
/* Image enlargement */
.article_content img {
cursor: zoom-in;
transition: transform .2s ease;
}
.article_content img:hover {
transform: scale(1.02);
}
/* Lightbox */
.img-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.img-lightbox.active {
opacity: 1;
pointer-events: auto;
}
.img-lightbox img {
max-width: 90vw;
max-height: 90vh;
box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
Reference in New Issue View Git Blame Copy Permalink