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