:root { --bg: #070400; --panel: #0e0e0e; --panel-2: #231f20; --text: #f9f9f9; --muted: #cccccc; --Secondary-Text: #ccc; --subtle: #666666; --accent: #f98715; --line: rgba(255, 255, 255, 0.16); } body { background: var(--bg); color: var(--text); } .challenge-floor .challenge-hero { text-align: center; margin-bottom: 40px; } .challenge-floor .hero-title-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; } .challenge-floor .challenge-hero .heading.h1 { font-size: 56px; color: #f9f9f9; margin-bottom: 0; font-weight: 700; line-height: 70px; } .challenge-floor .challenge-hero .fluid-paragraph { margin-left: auto; margin-right: auto; margin-top: 12px !important; width: 100% !important; padding:unset; font-size: 24px; font-weight: 300; line-height: 32px; } .challenge-floor .challenge-hero .lead.lh-180 { font-size: 1.5rem; color: rgba(249, 249, 249, 0.7); margin-bottom: 0; line-height: 1.6; } .challenge-floor .challenge-hero .why-img { width: 4.375rem; height: 4.375rem; transform: translateY(-17px) rotateX(5deg) rotateY(5deg) scale(1.05); } .challenge-floor .challenge-hero .floating-img { transition: all 0.5s ease; transform-style: preserve-3d; } .challenge-floor .challenge-hero .floating-img:hover { transform: translateY(-25px) rotateX(5deg) rotateY(5deg) scale(1.05); } @media (max-width: 991px) { .challenge-floor .challenge-hero .heading.h1 { font-size: 32px; } .challenge-floor .challenge-hero .lead.lh-180 { font-size: 13px; } .challenge-floor .challenge-hero .why-img { width: 37px; height: 37px; transform: translateY(-7px) rotateX(5deg) rotateY(5deg) scale(1.05); } } .challenge-floor { /* PC ladder: left labels align with card value rows (same offset + row height). */ --challenge-account-head-min-h: 92px; --challenge-values-padding-top: 16px; --challenge-ladder-section-gap: var(--challenge-values-padding-top); --challenge-ladder-row-gap: 12px; --challenge-ladder-row-h: 30px; --challenge-metrics-col-pad-left: 20px; --challenge-metrics-col-pad-right: 28px; /* Profit Target: row height from content; vertical spacing matches normal rows (3%/8% etc.), margin-bottom 12px only */ --challenge-phase-line-h: 24px; --challenge-phase-stack-gap: 2px; --challenge-phase-target-min-h-1: var(--challenge-ladder-row-h); --challenge-phase-target-min-h-2: calc( (var(--challenge-phase-line-h) * 2) + var(--challenge-phase-stack-gap) ); --challenge-phase-target-min-h-3: calc( (var(--challenge-phase-line-h) * 3) + (var(--challenge-phase-stack-gap) * 2) ); /* In-card horizontal divider: slightly narrower than card; faded ends, inset from side borders */ --account-card-h-divider: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 14%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.12) 86%, rgba(255, 255, 255, 0) 100% ); --account-card-h-divider-width: calc(100% - 32px); /* PC: max width for horizontal card columns (narrower with 5 cards to avoid overlapping left metrics) */ --challenge-pc-card-max-w: 280.67px; --challenge-pc-card-max-w-5: 170px; /* 992-1200px: min width for right-side pricing cards */ --challenge-pc-card-min-w-mid: 179px; /* BEST VALUE badge overhang above card top (half of translateY(-50%) plus shadow slack) */ --challenge-best-tag-overhang: 16px; /* Left gradient extends slightly above card top for visual balance per design */ --challenge-metrics-bg-overhang-top: 4px; /* PC left ladder gradient: extends right beyond metrics column (~35-45px per design) */ --challenge-metrics-bg-width-extra: 100px; /* Fintech metric tooltip (Figma) — flat CSS; mirror in SCSS if you add a build step */ --metric-tooltip-bg: #ffffff; --metric-tooltip-text: #666666; --metric-tooltip-radius: 16px; --metric-tooltip-pad-y: 16px; --metric-tooltip-pad-x: 24px; --metric-tooltip-width: 380px; --metric-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); --metric-tooltip-font-size: 16px; --metric-tooltip-font-weight: 500; --metric-tooltip-line-height: 1.4; --metric-tooltip-z: 500; --metric-tooltip-arrow-size: 20px; --metric-tooltip-arrow-radius: 5px; /* Pull surface over rotated square to hide anti-aliased seam (px-tune if needed) */ --metric-tooltip-seam-overlap: 4px; padding: 56px 0 72px; } .challenge-floor .container { max-width: 1200px; } .challenge-floor .tab-btn:focus { outline: none; box-shadow: none; } .challenge-floor .tab-btn:focus-visible { outline: 2px solid #f98715; outline-offset: 2px; } .challenge-floor .tab-wrap { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; position: relative; overflow: visible; } .challenge-floor .tab-btn { border: 0; border-radius: 10px; background: transparent; color: var(--muted); padding: 16px 32px; font-size: 20px; line-height: 20px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .challenge-floor .tab-btn:hover { color: var(--text); } .challenge-floor .tab-btn.active { background: var(--text); color: #070400; } .challenge-floor .badge-pop { display: inline-block; font-size: 11px; line-height: 1; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 5px 9px; margin-bottom: 6px; } .challenge-floor .tab-btn-with-badge { position: relative; display: inline-flex; align-items: stretch; } /* 2 STEP / INSTANT Popular and 24H NEW: shared absolute positioning; default top -10px / -12px; Popular active -15px, NEW active -18px. */ .challenge-floor .tab-btn-with-badge .challenge-tab-popular-badge, .challenge-floor .tab-btn-with-24h-decor .challenge-tab-24h-new-img { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 2; height: auto; pointer-events: none; } .challenge-floor .tab-btn-with-badge .challenge-tab-popular-badge { top: -10px; width: 70px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; min-height: 24px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; line-height: 1; letter-spacing: 0.02em; box-shadow: 0 0 14px rgba(249, 135, 21, 0.55); white-space: nowrap; } .challenge-floor .tab-btn-with-badge .challenge-tab-popular-badge-label { font-size: 10px; } .challenge-floor .tab-btn-with-badge .challenge-tab-popular-badge .icon.iconfont.icon-challenge_start { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; font-size: 12px; line-height: 12px; color: #fff; flex-shrink: 0; } .challenge-floor .tab-btn-with-24h-decor .challenge-tab-24h-new-img { display: block; top: -12px; width: 96px; } .challenge-floor .tab-btn-with-badge .tab-btn { position: relative; z-index: 1; } /* 24H: NEW uses same top decor as 2 STEP / INSTANT (img + button); rocket icon inside button. */ .challenge-floor .tab-btn-with-24h-decor { position: relative; display: inline-flex; align-items: stretch; } .challenge-floor .tab-btn-with-24h-decor .tab-btn.tab-btn--24h { position: relative; z-index: 1; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; } .challenge-floor .challenge-tab-24h-frame-img { width: 24px; height: 24px; display: block; flex-shrink: 0; object-fit: contain; pointer-events: none; } .challenge-floor .tab-btn-24h-text { display: inline-block; } .challenge-floor .metrics-col { color: var(--subtle); font-size: 16px; margin-top: 0; display: flex; flex-direction: column; align-items: stretch; overflow: visible; } /* PC: shared .challenge-ladder left/right (>=992), row gap via gap, bottom aligned with cards */ @media (min-width: 992px) { /* >=992: hide mobile size tabs (d-lg-none); avoid portrait 992-1199 showing unstyled buttons */ .challenge-floor .challenge-mobile-size-tabs.d-lg-none { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } .challenge-floor .challenge-ladder { display: flex; flex-direction: column; min-height: 0; height: auto; gap: 0; } .challenge-floor .challenge-ladder > .metric-item { margin-bottom: 0 !important; } .challenge-floor .metrics-col.challenge-ladder { position: relative; align-self: flex-start; box-sizing: border-box; height: auto; padding: var(--challenge-best-tag-overhang) var(--challenge-metrics-col-pad-right) 0 var(--challenge-metrics-col-pad-left); background: transparent; overflow: visible; } .challenge-floor .metrics-col.challenge-ladder::before { content: ""; position: absolute; left: 0; right: auto; width: calc(100% + var(--challenge-metrics-bg-width-extra, 100px)); top: var(--metrics-col-bg-top, 0); height: var(--metrics-col-bg-h, auto); background: linear-gradient( 90deg, rgba(249, 135, 21, 0.14) 0%, rgba(249, 135, 21, 0.08) 32%, rgba(249, 135, 21, 0.03) 62%, rgba(249, 135, 21, 0) 88%, rgba(249, 135, 21, 0) 100% ); border-radius: 12px 0 0 12px; pointer-events: none; z-index: 0; } .challenge-floor .metrics-col.challenge-ladder > * { position: relative; z-index: 1; } .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { display: flex; flex-direction: column; } .challenge-floor .account-card.challenge-ladder { flex: 1 1 auto; width: 100%; min-height: 0; } .challenge-floor .challenge-ladder__head { flex: 0 0 auto; box-sizing: border-box; } .challenge-floor .challenge-ladder__body { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--challenge-ladder-row-gap); padding: 0; margin: 0; } .challenge-floor .challenge-ladder__foot-block { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: 0; } .challenge-floor .metric-item--ladder-foot.challenge-ladder__foot { flex-shrink: 0; align-items: flex-start; min-height: 0; height: auto; margin-bottom: 0 !important; box-sizing: border-box; } .challenge-floor .challenge-ladder__body .metric-item, .challenge-floor .challenge-ladder__body .value-item { height: auto; min-height: var(--challenge-ladder-row-h); margin-bottom: 0 !important; } .challenge-floor .metric-item--ladder-head.challenge-ladder__head { display: flex; align-items: center; justify-content: flex-start; height: auto; min-height: 0; margin-bottom: 0 !important; box-sizing: border-box; } .challenge-floor .metric-item--ladder-foot-split { gap: 0; } .challenge-floor .metric-label--ladder-foot { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; color: #fff; } .challenge-floor .ladder-foot-row-primary { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 30px; } .challenge-floor .ladder-foot-line { display: block; font-size: inherit; line-height: 30px; color: #fff; letter-spacing: -0.2px; } .challenge-floor .ladder-foot-line--secondary { padding-left: calc(18px + 8px); margin-top: 0; } .challenge-floor .values.challenge-ladder__body { padding: var(--challenge-values-padding-top) 16px 16px; } .challenge-floor .metrics-col__body.challenge-ladder__body { padding-top: var(--challenge-values-padding-top); padding-bottom: 0; } .challenge-floor .metrics-col__body.challenge-ladder__body .metric-item { height: auto; margin-top: 0; margin-bottom: 0 !important; } .challenge-floor .values.challenge-ladder__body .value-item { margin-top: 0; margin-bottom: 0 !important; } .challenge-floor .metric-item--no-help .metric-help { display: none !important; } } .challenge-floor .metric-item { box-sizing: border-box; min-height: var(--challenge-ladder-row-h); height: var(--challenge-ladder-row-h); display: flex; align-items: center; gap: 8px; color: #8b8b8b; line-height: 1.25; position: relative; flex-shrink: 0; overflow: visible; } .challenge-floor .metric-item:not(:last-child) { margin-bottom: 12px; } .challenge-floor .metric-label { font-size: 16px; line-height: 1.25; color: #fff; letter-spacing: -0.2px; white-space: nowrap; } .challenge-floor .chall-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; opacity: 0.95; } .challenge-floor .metric-help { margin-left: 0; flex-shrink: 0; position: relative; display: inline-flex; align-items: center; } .challenge-floor .metric-help-btn { width: 18px; height: 18px; border: 0; border-radius: 0; background: transparent; line-height: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: opacity 0.2s ease; } .challenge-floor .metric-help-btn:focus { outline: none; } .challenge-floor .metric-help-btn:focus-visible { outline: 2px solid rgba(249, 135, 21, 0.75); outline-offset: 2px; border-radius: 4px; } .challenge-floor .metric-help-btn__icon { display: block; width: 16px; height: 16px; object-fit: contain; pointer-events: none; } .challenge-floor .metric-help-btn:hover .metric-help-btn__icon { filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(1800%) hue-rotate(352deg) brightness(101%) contrast(98%); } /* ----- Metric tooltip (popover): white surface + left rounded “arrow” ----- */ .challenge-floor .metric-tooltip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); width: var(--metric-tooltip-width); max-width: min(var(--metric-tooltip-width), calc(100vw - 48px)); z-index: var(--metric-tooltip-z); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; box-sizing: border-box; /* One soft shadow for bubble + tail (avoids “split” between two box-shadows) */ filter: drop-shadow(var(--metric-tooltip-shadow)); isolation: isolate; } .challenge-floor .metric-tooltip::before { content: ""; position: absolute; left: calc(var(--metric-tooltip-arrow-size) / -2 + 1px); top: 50%; width: var(--metric-tooltip-arrow-size); height: var(--metric-tooltip-arrow-size); margin-top: calc(var(--metric-tooltip-arrow-size) / -2); background: var(--metric-tooltip-bg); border-radius: var(--metric-tooltip-arrow-radius); transform: rotate(45deg) translateZ(0); backface-visibility: hidden; z-index: 0; box-shadow: none; pointer-events: none; } .challenge-floor .metric-tooltip__surface { position: relative; z-index: 1; display: block; box-sizing: border-box; width: calc(100% + var(--metric-tooltip-seam-overlap)); max-width: none; margin-left: calc(-1 * var(--metric-tooltip-seam-overlap)); padding: var(--metric-tooltip-pad-y) var(--metric-tooltip-pad-x) var(--metric-tooltip-pad-y) calc(var(--metric-tooltip-pad-x) + var(--metric-tooltip-seam-overlap)); border-radius: var(--metric-tooltip-radius); background: var(--metric-tooltip-bg); color: var(--metric-tooltip-text); font-size: var(--metric-tooltip-font-size); font-weight: var(--metric-tooltip-font-weight); line-height: var(--metric-tooltip-line-height); letter-spacing: -0.01em; box-shadow: none; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; word-wrap: break-word; } /* PC: hover / .show; narrow card tooltips in @media (max-width: 991.98px) and body portal styles */ @media (min-width: 992px) { .challenge-floor .metric-help:hover .metric-tooltip { opacity: 1; visibility: visible; pointer-events: auto; } .challenge-floor .metric-help.show .metric-tooltip { opacity: 1; visibility: visible; pointer-events: auto; } } .challenge-floor .card-wrap { margin-top: 16px; } .challenge-floor .challenge-cards-scroll { margin-top: 8px; } .challenge-floor .challenge-cards-scroll .card-wrap { margin-top: 0; } .challenge-floor .challenge-cards-inner { margin-left: 0; margin-right: 0; overflow: visible; } /* Uniform top padding on the row (do not pad only the best column or height:100% cards shrink) */ .challenge-floor .challenge-cards-scroll .challenge-cards-inner { padding-top: var(--challenge-best-tag-overhang); } .challenge-floor .challenge-cards-scroll .challenge-cards-inner > [class*="col-"] { overflow: visible; } /* PC: 1-3 cards in desktop scroll use --challenge-pc-card-max-w; center row when 2-3 cards */ @media (min-width: 992px) { .challenge-floor .metric-label { font-size: 18px; font-style: normal; font-weight: 400; } /* Extra horizontal gap between left ladder (e.g. Daily Drawdown) and right Account cards ($10,000 etc.) */ .challenge-floor #challenge-floor-mount > .row.no-gutters > .metrics-col { padding-right: 28px !important; flex: 0 0 auto; } .challenge-floor .challenge-cards-scroll.js-challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner { flex-wrap: nowrap !important; gap: 12px; margin-left: 0 !important; margin-right: 0 !important; } .challenge-floor .challenge-cards-scroll.js-challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(2):last-child), .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(3):last-child) { justify-content: center; } .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(2):last-child) > [class*="col-"], .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(3):last-child) > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-max-w); width: var(--challenge-pc-card-max-w); max-width: var(--challenge-pc-card-max-w); } /* 4-5 cards: prevent col-xl equal stretch; horizontal scroll to avoid crushing left metrics */ .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(4):last-child), .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--four-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner { justify-content: flex-start !important; width: max-content; max-width: 100%; } .challenge-floor .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner:has(> [class*="col-"]:nth-child(4):last-child) > [class*="col-"], .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--four-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-max-w) !important; flex-grow: 0 !important; width: var(--challenge-pc-card-max-w) !important; max-width: var(--challenge-pc-card-max-w) !important; } /* 5-card PC: fixed-width left metrics, five cards share remaining space */ .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--five-cards-pc > .metrics-col { padding-right: 20px !important; min-width: 240px; flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--five-cards-pc > .metrics-col.challenge-ladder { padding-right: 20px !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--five-cards-pc > .col-lg-10 { flex: 1 1 0% !important; min-width: 0; max-width: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block { overflow-x: hidden; width: 100%; max-width: 100%; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; justify-content: stretch !important; flex-wrap: nowrap !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 1 1 0% !important; flex-grow: 1 !important; width: auto !important; max-width: none !important; min-width: 0; } /* Exactly one card: JS adds .challenge-floor-row--single-card (not :has, so .col-lg-10 does not stay 83%) */ .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card { justify-content: center; column-gap: 50px; flex-wrap: nowrap; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card > .metrics-col { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card > .col-lg-10 { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block { width: max-content; max-width: 100%; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner { justify-content: center; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-max-w); width: var(--challenge-pc-card-max-w); max-width: var(--challenge-pc-card-max-w); } /* INSTANT + AIFO Elite (two tiers): 40px gap between Daily Drawdown and Account on PC, horizontally centered */ .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--instant-aifo-two-pc { justify-content: center; column-gap: 40px; flex-wrap: nowrap; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--instant-aifo-two-pc > .metrics-col { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--instant-aifo-two-pc > .col-lg-10 { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--instant-aifo-two-pc .challenge-cards-scroll.d-none.d-lg-block { width: max-content; max-width: 100%; } /* 24H (AIFO Lite): PC centers metrics column (incl. Profit Target) and Account card area */ .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--aifolite-24h-pc { justify-content: center; column-gap: 40px; flex-wrap: nowrap; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--aifolite-24h-pc > .metrics-col { flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--aifolite-24h-pc > .col-lg-10 { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--aifolite-24h-pc .challenge-cards-scroll.d-none.d-lg-block { width: max-content; max-width: 100%; } /* Desktop multi-card: right area scrolls horizontally to avoid squeezing left Daily Drawdown */ .challenge-floor #challenge-floor-mount > .row.no-gutters > .col-lg-10 { min-width: 0; flex: 1 1 0%; } .challenge-floor .challenge-cards-scroll.d-none.d-lg-block { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior-x: contain; max-width: 100%; scrollbar-width: thin; scrollbar-color: rgba(249, 135, 21, 0.75) rgba(255, 255, 255, 0.06); } } #challenge-floor-mount { overflow: visible; } .challenge-floor #challenge-floor-mount > .row.no-gutters { align-items: flex-start; overflow: visible; } .challenge-floor #challenge-floor-mount > .row.no-gutters > .col-lg-10 { overflow: visible; } .challenge-floor .challenge-floor-24h-note-wrap { margin-top: 22px; } .challenge-floor .challenge-floor-24h-note { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #141414; padding: 18px 20px 20px; color: var(--muted); font-size: 13px; line-height: 1.55; } .challenge-floor .challenge-floor-24h-note__title { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; } .challenge-floor .challenge-floor-24h-note__p { margin: 0 0 10px; font-weight: 400; color: rgba(204, 204, 204, 0.92); } .challenge-floor .challenge-floor-24h-note__p:last-child { margin-bottom: 0; } .challenge-floor .account-card { height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; } .challenge-floor .account-card.best, .challenge-floor .account-card.account-card--mobile.best { overflow: visible; z-index: 1; /* Warm glow top and bottom (fades in middle), layered on panel background */ background: linear-gradient(180deg, rgba(249, 135, 21, 0.2) 0%, rgba(249, 135, 21, 0.04) 28%, rgba(249, 135, 21, 0) 48%), linear-gradient(0deg, rgba(249, 135, 21, 0.28) 0%, rgba(249, 135, 21, 0.06) 32%, rgba(249, 135, 21, 0) 52%), var(--panel); /* box-shadow: 0 0 0 1px rgba(249, 135, 21, 0.35), 0 0 24px rgba(249, 135, 21, 0.16); */ } /* Top center; vertical midpoint on card top edge (half inside, half outside) */ .challenge-floor .account-card .best-tag { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); z-index: 6; background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; line-height: 1; white-space: nowrap; box-shadow: 0 0 14px rgba(249, 135, 21, 0.55), 0 4px 12px rgba(0, 0, 0, 0.28); pointer-events: none; } .challenge-floor .account-head { border-bottom: 0; text-align: center; padding: 18px 10px 15px; box-sizing: border-box; min-height: var(--challenge-account-head-min-h); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-image: var(--account-card-h-divider); background-size: var(--account-card-h-divider-width) 1px; background-position: center bottom; background-repeat: no-repeat; } .challenge-floor .account-head .label { color: #ccc; font-size: 14px; } .challenge-floor .account-head .size { margin-top: 4px; font-size: 28px; font-weight: 700; line-height: 1.1; position: relative; } .challenge-floor .account-head .size .account-discount-flag { width: 28px; height: auto; vertical-align: middle; margin-right: 6px; } .challenge-floor .challenge-currency-tabs { gap: 10px; } .challenge-floor .challenge-instant-subtabs { margin-top: 24px; margin-bottom: 4px; } /* PC: without INSTANT / AIFO Lite sub-tabs, 40px from main tabs (.text-center.mb-4) to #challenge-floor-mount Bootstrap .mb-4 is 1.5rem (~24px); overridden here to 40px; when sub-tabs show, their margin-top:40px applies and main tab bottom margin is zero */ @media (min-width: 992px) { .challenge-floor > .container > .text-center.mb-4 { margin-bottom: 0px !important; } .challenge-floor > .container > .text-center.mb-4:has(+ #challengeInstantSubtabs:not(.d-none)), .challenge-floor > .container > .text-center.mb-4:has(+ #challengeInstantSubtabs.d-none + #challengeAifoliteSubtabs:not(.d-none)) { margin-bottom: 0 !important; } } /* Vertical spacing between INSTANT sub-tabs (AIFO Standard / AIFO Elite / No Commission) and currency buttons below */ .challenge-floor .challenge-instant-subtabs:not(.d-none) + .challenge-currency-tabs { margin-top: 24px; margin-bottom: 4px; } .challenge-floor .challenge-currency-btn { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.4); color: var(--muted); border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .challenge-floor .challenge-currency-btn:hover { color: var(--text); } .challenge-floor .challenge-currency-btn.active { color: #fff; border-color: #f98715; background: rgba(249, 135, 21, 0.22); } /* INSTANT sub-tabs per design: top/bottom lines, inline flex gap 16, inactive dark gray, active white, pill 14x24 padding */ .challenge-floor .challenge-instant-subtabs .tab-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; padding: 8px 0; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 auto; border: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.16); border-bottom: 0.5px solid rgba(255, 255, 255, 0.16); border-radius: 0; box-shadow: none; background: transparent; } .challenge-floor .challenge-instant-subtab:focus { outline: none; box-shadow: none; } .challenge-floor .challenge-instant-subtab:focus-visible { outline: 2px solid #f98715; outline-offset: 2px; } .challenge-floor .challenge-instant-subtab { border: 0; border-radius: 999px; padding: 14px 24px; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; background: var(--panel-2); color: var(--muted); } .challenge-floor .challenge-instant-subtab:hover { color: var(--text); } .challenge-floor .challenge-instant-subtab.active { background: #fff; color: #070400; outline: none; box-shadow: none; } .challenge-floor .values { padding: var(--challenge-values-padding-top) 16px 16px; text-align: left; display: flex; flex-direction: column; align-items: stretch; } .challenge-floor .values .value-item:not(:last-child) { margin-bottom: 12px; } .challenge-floor .values .value-item { box-sizing: border-box; color: var(--muted); font-size: 18px; line-height: 1.25; min-height: 30px; height: 30px; display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; } .challenge-floor .values .value-item:has(.chall-phase-stack):not(.phase-target-row) { height: auto; min-height: var(--challenge-ladder-row-h); align-items: center; justify-content: flex-start; } /* Phase rows: small gap between label and %; block left-aligned in cell */ .challenge-floor .chall-phase-stack { width: fit-content; max-width: 100%; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--challenge-phase-stack-gap); text-align: left; } .challenge-floor .chall-phase-line { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; font-size: 16px; font-weight: 400; line-height: 1.25; min-height: var(--challenge-phase-line-h); } .challenge-floor .chall-phase-name { color: #ccc; font-weight: 400; } /* Phase label and percent same font size; name 400, percent bolder */ .challenge-floor .chall-phase-line .chall-phase-name, .challenge-floor .chall-phase-line .chall-phase-pct { font-size: 18px; line-height: 1.25; } .challenge-floor .chall-phase-line .chall-phase-pct { font-weight: 600; } .challenge-floor .chall-phase-stack--3 { width: fit-content; max-width: 100%; margin: 0; gap: var(--challenge-phase-stack-gap); align-items: flex-start; align-self: flex-start; } .challenge-floor .chall-phase-stack--3 .chall-phase-line { font-size: 16px; font-weight: 400; min-height: var(--challenge-phase-line-h); justify-content: flex-start; gap: 6px; } .challenge-floor .chall-phase-stack--3 .chall-phase-line .chall-phase-name, .challenge-floor .chall-phase-stack--3 .chall-phase-line .chall-phase-pct { font-size: 16px; line-height: 1.25; } .challenge-floor .chall-phase-stack--3 .chall-phase-line .chall-phase-pct { font-weight: 700; } /* Profit Target: no extra padding, row gap same as .value-item (12px); row height for 1/2/3 lines */ .challenge-floor .metric-item.phase-target-row, .challenge-floor .values .value-item.phase-target-row, .challenge-floor .card-mobile-metric-row.phase-target-row { box-sizing: border-box; height: auto !important; min-height: 0 !important; align-items: center; justify-content: flex-start; padding-top: 0; padding-bottom: 0; line-height: 1.25; white-space: normal; } .challenge-floor .metric-item.phase-target-row.phase-target-row--1, .challenge-floor .values .value-item.phase-target-row.phase-target-row--1, .challenge-floor .card-mobile-metric-row.phase-target-row.phase-target-row--1 { min-height: var(--challenge-phase-target-min-h-1) !important; } .challenge-floor .metric-item.phase-target-row.phase-target-row--2, .challenge-floor .values .value-item.phase-target-row.phase-target-row--2, .challenge-floor .card-mobile-metric-row.phase-target-row.phase-target-row--2 { min-height: var(--challenge-phase-target-min-h-2) !important; } .challenge-floor .metric-item.phase-target-row.phase-target-row--3, .challenge-floor .values .value-item.phase-target-row.phase-target-row--3, .challenge-floor .card-mobile-metric-row.phase-target-row.phase-target-row--3 { min-height: var(--challenge-phase-target-min-h-3) !important; } .challenge-floor .values .value-item.phase-target-row { display: flex; } .challenge-floor .account-card--mobile .values { display: none; } .challenge-floor .price-area--mobile { border-top: 0; position: relative; padding: 15px 12px 16px; display: flex; flex-direction: column; gap: 12px; text-align: center; } .challenge-floor .price-area--mobile::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.16); pointer-events: none; } .challenge-floor .price-area--mobile .btn-start { order: 1; } .challenge-floor .price-area--mobile .price-row { order: 2; margin-bottom: 0; } .challenge-floor .card-mobile-metrics { position: relative; padding: 11px 12px 14px; border-top: 0; overflow: visible; } .challenge-floor .card-mobile-metrics::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: rgba(255, 255, 255, 0.16); pointer-events: none; } .challenge-floor .card-mobile-metric-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; font-size: 12px; } /* .challenge-floor .card-mobile-metric-row + .card-mobile-metric-row { border-top: 1px solid rgba(255, 255, 255, 0.06); } */ .challenge-floor .card-mobile-metric-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; max-width: 52%; position: relative; } .challenge-floor .metric-label-dotted { color: rgba(249, 249, 249, 0.55); text-decoration: underline dotted rgba(249, 249, 249, 0.35); text-underline-offset: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .challenge-floor .card-mobile-metrics .card-mobile-metric-left .chall-icon { display: none; } .challenge-floor .card-mobile-metric-left .metric-help { margin-left: 0; flex-shrink: 0; } .challenge-floor .card-mobile-metric-value { flex: 1; min-width: 0; color: var(--Secondary-Text, #ccc); text-align: right; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-style: normal; font-weight: 500; line-height: 18px; letter-spacing: 0.24px; } .challenge-floor .card-mobile-metric-row.phase-target-row .card-mobile-metric-value { display: flex; white-space: normal; max-width: none; min-width: 0; flex: 1; text-align: right; height: auto; min-height: 0; align-items: center; justify-content: flex-end; } .challenge-floor .card-mobile-metric-value .chall-phase-stack, .challenge-floor .card-mobile-metric-value .chall-phase-stack--3 { max-width: 100%; width: fit-content; margin-left: auto; margin-right: 0; align-items: flex-end; gap: var(--challenge-phase-stack-gap); } .challenge-floor .card-mobile-metric-value .chall-phase-line { justify-content: flex-end; gap: 6px; min-height: var(--challenge-phase-line-h); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } .challenge-floor .card-mobile-metric-value .chall-phase-line .chall-phase-name, .challenge-floor .card-mobile-metric-value .chall-phase-line .chall-phase-pct { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } .challenge-floor .price-area { border-top: 0; position: relative; text-align: center; padding: 16px 10px 24px; } .challenge-floor .price-area::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.16); pointer-events: none; } .challenge-floor .price-row { min-height: 30px; margin-bottom: 12px; display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 8px; } .challenge-floor .price-row.price-row--best { align-items: center; gap: 0; } .challenge-floor .price-row.price-row--best .price-row__best-icon { margin-right: 2px; } .challenge-floor .price-row.price-row--best .old-price { margin-left: 8px; } .challenge-floor .price-row__best-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; display: block; } .challenge-floor .price { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); } .challenge-floor .price.highlight { color: var(--accent); } .challenge-floor .old-price { color: var(--subtle); font-size: 15px; font-weight: 400; line-height: 1.2; text-decoration: line-through; opacity: 0.95; } .challenge-floor .btn-start { width: 100%; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; padding: 10px 8px; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; margin-bottom:16px; } .challenge-floor .btn-start:hover { background-color: #f9a215 !important; color: #fff !important; box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6); } .challenge-floor .btn-start:focus, .challenge-floor .btn-start:focus-visible, .challenge-floor .btn-start:active { outline: none; } /* Start Challenge: coupon modal (Figma PC 410x514) */ .challenge-coupon-modal { --challenge-coupon-modal-w: 412px; --challenge-coupon-modal-h: 514px; --challenge-coupon-modal-pad-y: 48px; --challenge-coupon-modal-pad-x: 24px; display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .challenge-coupon-modal.is-open { display: flex; } .challenge-coupon-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); } .challenge-coupon-modal__panel { position: relative; z-index: 1; box-sizing: border-box; width: var(--challenge-coupon-modal-w); height: var(--challenge-coupon-modal-h); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); padding: var(--challenge-coupon-modal-pad-y) var(--challenge-coupon-modal-pad-x); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; color: #f9f9f9; background-color: #121212; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65); } .challenge-coupon-modal__panel-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #121212; background-image: url("../images/challenge/challenge_coupon_modal_bg.png"), radial-gradient(ellipse 90% 70% at 0% 0%, rgba(249, 135, 21, 0.24) 0%, transparent 68%), radial-gradient(ellipse 80% 60% at 100% 100%, rgba(249, 135, 21, 0.16) 0%, transparent 62%); background-size: cover, auto, auto; background-position: center, 0 0, 100% 100%; background-repeat: no-repeat; } .challenge-coupon-modal__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; min-height: 0; } .challenge-coupon-modal__logo { display: block; width: 68px; height: 26px; /* margin: 0 0 20px; */ object-fit: contain; flex-shrink: 0; } .challenge-coupon-modal__title { font-size: 26px; font-weight: 700; line-height: 34px; letter-spacing: -0.02em; color: #ffffff; flex-shrink: 0; margin-bottom: 0; } .challenge-coupon-modal__text { margin: 0 0 20px; font-size: 18px; font-weight: 400; line-height: 34px; color: #a0a0a0; flex-shrink: 0; } .challenge-coupon-modal__hero { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; flex: 1 1 auto; margin: 0 0 24px; padding: 0; } .challenge-coupon-modal__hero-img { display: block; width: 100%; max-width: 280px; height: auto; max-height: 168px; object-fit: contain; object-position: center; flex-shrink: 0; } .challenge-coupon-modal__code { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; margin: 0 0 24px; padding: 8px 16px; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: 0.08em; color: #ccc; flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); } .challenge-coupon-modal__actions { display: flex; justify-content: center; width: 100%; margin-top: auto; flex-shrink: 0; } .challenge-coupon-modal__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 262px; height: 52px; min-height: 52px; box-sizing: border-box; border: 0; border-radius: 12px; background: #f98715; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; padding: 0 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .challenge-coupon-modal__cta:hover { background-color: #f9a215 !important; box-shadow: inset 0 5px 10px 0 rgba(249, 135, 21, 0.6), 0 5px 10px 0 rgba(249, 135, 21, 0.6); } .challenge-coupon-modal__cta:focus, .challenge-coupon-modal__cta:focus-visible, .challenge-coupon-modal__cta:active { outline: none; border: 0; } .challenge-coupon-modal__cta-arrow { display: block; width: 24px; height: 24px; flex-shrink: 0; filter: brightness(0) invert(1); } .challenge-floor .addons-title { color: var(--accent); font-size: 18px; margin-bottom: 8px; font-style: normal; font-weight: 400; line-height: 30px; } .challenge-floor .addons-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .challenge-floor .addon-item { display: flex; align-items: center; margin-bottom: 12px; color: var(--text); font-size: 14px; } .challenge-floor .addon-item:last-child { margin-bottom: 0; } @media (min-width: 992px) { .challenge-floor .addon-item { font-size: 18px; font-weight: 400; line-height: 30px; } } .challenge-floor .addon-badge { color: var(--accent); background: rgba(249, 135, 21, 0.12); border-radius: 8px; font-size: 12px; font-weight: 500; padding: 4px 7px; margin-right: 10px; min-width: 54px; text-align: center; } @media (max-width: 991.98px) { .challenge-floor { padding: 28px 0 48px; } .challenge-floor .tab-wrap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; row-gap: 36px; align-items: stretch; padding: 14px 10px; width: 100%; max-width: 100%; margin: 0 auto; box-sizing: border-box; overflow: visible; background: rgba(12, 12, 12, 0.72); border: 0; border-radius: 12px; } .challenge-floor .tab-wrap > *:nth-child(1) { grid-column: span 2; min-width: 0; } .challenge-floor .tab-wrap > *:nth-child(2), .challenge-floor .tab-wrap > *:nth-child(3) { grid-column: span 2; min-width: 0; } .challenge-floor .tab-wrap > *:nth-child(4), .challenge-floor .tab-wrap > *:nth-child(5) { grid-column: span 3; min-width: 0; } .challenge-floor .tab-wrap > .tab-btn-with-badge, .challenge-floor .tab-wrap > .tab-btn-with-24h-decor { display: flex; flex-direction: column; align-items: stretch; } .challenge-floor .tab-wrap .tab-btn { width: 100%; min-height: 48px; padding: 12px 8px; font-size: 13px; font-weight: 600; line-height: 1.15; border-radius: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: #161616; color: #f5f5f5; } .challenge-floor .tab-wrap .tab-btn.active { background: #ffffff; color: #070400; } .challenge-floor .tab-wrap .tab-btn:hover:not(.active) { color: #ffffff; background: #1f1f1f; } .challenge-floor .tab-wrap .tab-btn-with-badge .tab-btn, .challenge-floor .tab-wrap .tab-btn-with-24h-decor .tab-btn { flex: 1; } .challenge-floor .tab-btn-with-badge .challenge-tab-popular-badge { width: 80px; top: -3px; padding: 5px 8px; gap: 3px; } .challenge-floor .tab-btn-with-badge:has(.tab-btn.active[data-tab="2step"]) .challenge-tab-popular-badge, .challenge-floor .tab-btn-with-badge:has(.tab-btn.active[data-tab="instant"]) .challenge-tab-popular-badge { top: -3px; } .challenge-floor .tab-btn-with-24h-decor .challenge-tab-24h-new-img { width: 74px; } .challenge-floor .challenge-tab-24h-frame-img { width: 20px; height: 20px; } .challenge-floor .challenge-instant-subtabs { margin-top: 24px; margin-bottom: 4px; } .challenge-floor .challenge-instant-subtabs .tab-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; column-gap: 8px; row-gap: 0; width: 100%; max-width: 100%; padding: 12px 0; border-radius: 0; background: transparent; border: 0; border-top: 0.5px solid rgba(255, 255, 255, 0.16); border-bottom: 0.5px solid rgba(255, 255, 255, 0.16); } /* Main tab .tab-wrap > *:nth-child spans leak here; reset to avoid vertical wrap in 3-column grid */ .challenge-floor .challenge-instant-subtabs .tab-wrap > .challenge-instant-subtab { grid-column: auto; } .challenge-floor .challenge-instant-subtab { min-width: 0; width: 100%; max-width: 100%; min-height: 40px; padding: 7px 2px; font-size: clamp(9px, 2.4vw, 11px); font-weight: 600; line-height: 1.15; border-radius: 10px; text-align: center; box-sizing: border-box; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; hyphens: none; } .challenge-floor .challenge-instant-subtab:not(.active) { background: #161616; color: #e8e8e8; } .challenge-floor .challenge-instant-subtab:not(.active):hover { background: #1f1f1f; color: #ffffff; } .challenge-floor #challengeAifoliteSubtabs .tab-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 24H with one sub-tab (e.g. AIFO Elite): 2-col grid halves width; use centered auto width */ .challenge-floor #challengeAifoliteSubtabs .tab-wrap:has(.challenge-instant-subtab:only-child) { display: flex; justify-content: center; align-items: center; grid-template-columns: none; } .challenge-floor #challengeAifoliteSubtabs .tab-wrap:has(.challenge-instant-subtab:only-child) .challenge-instant-subtab { width: auto; min-width: 128px; max-width: min(280px, 72vw); flex: 0 0 auto; padding: 10px 20px; font-size: clamp(11px, 3.2vw, 13px); } /* Mobile: account size row (10K / 25K / …) — equal width full row (avoid fit-content+center or multi-tier clips sides) */ .challenge-floor .challenge-mobile-size-tabs { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); overflow: visible; } .challenge-floor .challenge-mobile-size-tabs:has(.challenge-mobile-size-tab:only-child) { justify-content: center; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; } /* No flex gap: old Safari only supports grid gap; @supports(gap) mis-detects and clears margin */ .challenge-floor .challenge-mobile-size-tab:not(:last-child) { margin-right: 8px; } .challenge-floor .challenge-mobile-size-tab { position: relative; flex: 1 1 0; min-width: 0; max-width: none; border: 1px solid transparent; border-radius: 8px; padding: 10px 6px; box-sizing: border-box; font-family: inherit; font-size: clamp(11px, 3.5vw, 14px); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; background: #222222; color: rgba(255, 255, 255, 0.52); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .challenge-floor .challenge-mobile-size-tab.active { background: #555555; border-color: #888888; color: #ffffff; } .challenge-floor .challenge-mobile-size-tab:focus { outline: none; } .challenge-floor .challenge-mobile-size-tab:focus-visible { outline: 2px solid #f98715; outline-offset: 2px; } .challenge-floor .challenge-mobile-size-tab__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .challenge-floor .challenge-mobile-size-tab__best-dot { position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d00; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 2; } .challenge-floor .js-challenge-cards-scroll.d-lg-none { scroll-snap-type: x mandatory; } .challenge-floor .js-challenge-cards-scroll.d-lg-none .challenge-cards-inner > [class*="col-"] { scroll-snap-align: center; } .challenge-floor .challenge-cards-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* pan-x alone blocks vertical page scroll when the gesture starts on cards */ touch-action: pan-x pan-y pinch-zoom; margin-left: -12px; margin-right: -12px; /* .best-tag overhang from unified .challenge-cards-inner padding-top */ padding-top: 0; padding-left: 12px; padding-right: 12px; padding-bottom: 0; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } /* Mobile: always reserve card bottom 4px + scrollbar 5px so Add-ons does not jump when scrollbar toggles */ .challenge-floor .challenge-cards-scroll.d-lg-none { padding-bottom: 5px; } .challenge-floor .challenge-cards-scroll.d-lg-none .challenge-cards-inner { margin-bottom: 4px; } .challenge-floor .challenge-cards-scroll.d-lg-none::-webkit-scrollbar { height: 5px; background: transparent; } .challenge-floor .challenge-cards-scroll.d-lg-none::-webkit-scrollbar-thumb { background: transparent; } .challenge-floor .challenge-cards-scroll::-webkit-scrollbar { height: 0; background: transparent; } .challenge-floor .challenge-cards-scroll::-webkit-scrollbar-thumb { background: transparent; } /* Horizontal scroll: scrollbar styling only, no layout height change */ .challenge-floor .challenge-cards-scroll.d-lg-none.is-scrolling { scrollbar-width: thin; scrollbar-color: rgba(249, 135, 21, 0.75) rgba(255, 255, 255, 0.06); } .challenge-floor .challenge-cards-scroll.d-lg-none.is-scrolling::-webkit-scrollbar-thumb { background: rgba(249, 135, 21, 0.75); border-radius: 999px; } .challenge-floor .challenge-cards-scroll.d-lg-none.is-scrolling::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 999px; } .challenge-floor .challenge-cards-inner { flex-wrap: nowrap !important; } .challenge-floor .challenge-cards-inner > [class*="col-"] { flex: 0 0 auto !important; width: min(78vw, 300px) !important; max-width: min(78vw, 300px) !important; padding-left: 6px !important; padding-right: 6px !important; } .challenge-floor .challenge-cards-inner > [class*="col-"]:first-child { padding-left: 0 !important; } .challenge-floor .challenge-cards-inner > [class*="col-"]:last-child { padding-right: 0 !important; } .challenge-floor .challenge-cards-inner > [class*="col-"].mb-3 { margin-bottom: 0 !important; } .challenge-floor .challenge-floor-24h-note-wrap { margin-top: 16px; } .challenge-floor .challenge-floor-24h-note { padding: 14px 14px 16px; font-size: 12px; } .challenge-floor .challenge-floor-24h-note__title { font-size: 12px; margin-bottom: 8px; } .challenge-floor .metric-tooltip { z-index: 600; } .challenge-floor .metric-tooltip__surface { font-size: 15px; font-weight: 500; line-height: 1.45; padding: 16px 24px 16px calc(24px + var(--metric-tooltip-seam-overlap)); margin-left: calc(-1 * var(--metric-tooltip-seam-overlap)); width: calc(100% + var(--metric-tooltip-seam-overlap)); max-width: none; box-shadow: none; } .challenge-floor .metric-tooltip::before { width: 17px; height: 17px; margin-top: -8.5px; left: -7px; border-radius: 3px; transform: rotate(45deg) translateZ(0); backface-visibility: hidden; } /* Narrow: expand via .show only; :hover tooltips in overflow chain cannot viewport-position */ .challenge-floor .metric-help:hover .metric-tooltip { opacity: 0; visibility: hidden; pointer-events: none; } /* PC ladder column still in DOM: do not paint on narrow screens */ .challenge-floor .metrics-col .metric-tooltip { display: none !important; } /* In-card tooltip is mount only; display via body-portaled node */ .challenge-floor .card-mobile-metrics .metric-tooltip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: none !important; } /* Mobile portal (on body): hidden until positioned; avoids PC absolute/left-arrow flash */ body > .metric-tooltip.metric-tooltip--mobile-portal { /* Off .challenge-floor needs tokens or var(--metric-tooltip-bg) is invalid */ --metric-tooltip-bg: #ffffff; --metric-tooltip-text: #666666; --metric-tooltip-radius: 16px; --metric-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); position: fixed; z-index: 1200; margin: 0; box-sizing: border-box; transform: none; right: auto; bottom: auto; width: auto; min-width: 0; max-width: none; overflow: visible; opacity: 0; visibility: hidden; pointer-events: none; transition: none; filter: drop-shadow(var(--metric-tooltip-shadow)); isolation: isolate; } body > .metric-tooltip.metric-tooltip--mobile-portal.metric-tooltip--positioned { opacity: 1; visibility: visible; pointer-events: auto; } body > .metric-tooltip.metric-tooltip--mobile-portal::before { display: none; } body > .metric-tooltip.metric-tooltip--mobile-portal::after { content: ""; position: absolute; left: var(--metric-tooltip-callout-x, 50%); bottom: -7px; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--metric-tooltip-bg); pointer-events: none; z-index: 2; } body > .metric-tooltip.metric-tooltip--mobile-portal.metric-tooltip--flip-below::after { bottom: auto; top: -7px; border-top: none; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid var(--metric-tooltip-bg); } body > .metric-tooltip.metric-tooltip--mobile-portal .metric-tooltip__surface { display: block; position: relative; z-index: 1; padding: 8px 12px; margin-left: 0; width: 100%; max-width: none; box-sizing: border-box; font-size: 15px; font-weight: 500; line-height: 1.45; border-radius: var(--metric-tooltip-radius); background: var(--metric-tooltip-bg); color: var(--metric-tooltip-text); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; word-wrap: break-word; } /* Mobile card metrics: tap dashed label for help; hide question-mark icon */ .challenge-floor .card-mobile-metrics .metric-help-btn__icon { display: none; } .challenge-floor .card-mobile-metrics .metric-help-btn--sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .challenge-floor .card-mobile-metrics .card-mobile-metric-left { cursor: pointer; } .challenge-floor .card-mobile-metrics .metric-label-dotted { cursor: pointer; } .challenge-floor .card-mobile-metrics .metric-label-dotted:focus { outline: none; } .challenge-floor .card-mobile-metrics .metric-label-dotted:focus-visible { outline: 2px solid rgba(249, 135, 21, 0.75); outline-offset: 2px; border-radius: 4px; } .challenge-floor .account-card { border-radius: 16px; } .challenge-floor .account-head { padding: 14px 12px 13px; min-height: 0; display: block; background-image: unset; } .challenge-floor .account-head .size { font-size: 22px; } .challenge-floor .values .value-item { font-size: 14px; height: 30px; } .challenge-floor .price { font-size: 22px; } .challenge-floor .old-price { font-size: 13px; } .challenge-floor .btn-start { padding: 12px 10px; font-size: 14px; } .challenge-floor .addons-title { font-size: 16px; margin-top: 8px; } .challenge-floor .addons-box { padding: 14px; } .challenge-floor .addon-item { font-size: 14px; } .challenge-floor .metrics-col { margin-top: 0; margin-bottom: 12px; } .challenge-floor #challenge-floor-mount > .row.no-gutters > .col-lg-10 { min-width: 0; max-width: 100%; } .challenge-floor .tab-btn-with-24h-decor .challenge-tab-24h-new-img { top: 0px; } } /* >=1200px: left gradient wraps card height only, not foot-tail blank area */ @media (min-width: 1200px) { .challenge-floor .challenge-ladder__foot-tail { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none; } } /* 992px-1200px: Bootstrap col-md-6 / 78vw over-widens cards; fixed column widths like PC */ @media (min-width: 992px) and (max-width: 1199.98px) { /* * Multi-card (INSTANT AIFO Standard etc.): Bootstrap flex + col-lg-2 percent widths * overflow metrics onto first card; use explicit grid columns instead. */ .challenge-floor #challenge-floor-mount > .row.no-gutters:not(.challenge-floor-row--single-card):not( .challenge-floor-row--instant-aifo-two-pc ) { display: grid !important; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; row-gap: 0; align-items: stretch; flex-wrap: nowrap !important; } /* Mid desktop: left column matches card height; foot-tail fills from Fee row to card bottom */ .challenge-floor .metrics-col.challenge-ladder { align-self: stretch; min-height: 100%; display: flex; flex-direction: column; } .challenge-floor .metrics-col.challenge-ladder .challenge-ladder__foot-block { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .challenge-floor .metrics-col.challenge-ladder .challenge-ladder__foot-tail { display: block; flex: 1 1 auto; min-height: 0; width: 100%; margin: 0; padding: 0; pointer-events: none; } .challenge-floor #challenge-floor-mount > .row.no-gutters:not(.challenge-floor-row--single-card):not( .challenge-floor-row--instant-aifo-two-pc ) > .metrics-col.col-lg-2 { grid-column: 1; grid-row: 1; flex: none !important; width: auto !important; max-width: none !important; min-width: max-content; /* No hidden: align script tweaks margin/padding; clipping makes left column look empty */ overflow: visible; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } /* 992-1200: PC cards + left ladder only; hide d-lg-none mobile cards on portrait */ .challenge-floor #challenge-floor-mount .challenge-cards-scroll.d-lg-none { display: none !important; } .challenge-floor #challenge-floor-mount .challenge-cards-scroll.d-none.d-lg-block { display: block !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters:not(.challenge-floor-row--single-card):not( .challenge-floor-row--instant-aifo-two-pc ) > .col-lg-10 { grid-column: 2; grid-row: 1; flex: none !important; width: auto !important; max-width: 100% !important; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; } .challenge-floor #challenge-floor-mount > .row.no-gutters:not(.challenge-floor-row--single-card):not( .challenge-floor-row--instant-aifo-two-pc ) .challenge-cards-scroll.d-none.d-lg-block, .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; box-sizing: border-box; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(249, 135, 21, 0.75) rgba(255, 255, 255, 0.06); } .challenge-floor #challenge-floor-mount .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner.row { margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; width: max-content; min-width: 100%; gap: 20px; } .challenge-floor #challenge-floor-mount > .row.no-gutters:not(.challenge-floor-row--single-card):not( .challenge-floor-row--instant-aifo-two-pc ) .metrics-col .metric-item { width: max-content; max-width: none; } .challenge-floor #challenge-floor-mount .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-min-w-mid) !important; flex-grow: 0 !important; width: var(--challenge-pc-card-min-w-mid) !important; min-width: var(--challenge-pc-card-min-w-mid) !important; max-width: none !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--five-cards-pc:not(.challenge-floor-row--single-card) { grid-template-columns: minmax(240px, max-content) minmax(0, 1fr); } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--five-cards-pc > .metrics-col.col-lg-2 { min-width: 240px !important; padding-right: 20px !important; overflow: visible; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block { overflow-x: auto !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner.row { width: max-content !important; min-width: 100% !important; max-width: none !important; justify-content: flex-start !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--five-cards-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-min-w-mid) !important; flex-grow: 0 !important; width: var(--challenge-pc-card-min-w-mid) !important; min-width: var(--challenge-pc-card-min-w-mid) !important; max-width: none !important; } /* INSTANT + AIFO Elite two cards: no grid; metrics left + two cards centered horizontally */ .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: stretch !important; column-gap: 40px; width: 100%; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc > .metrics-col.col-lg-2 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: max-content; overflow: visible; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc > .col-lg-10.col-lg-10 { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc .challenge-cards-scroll.d-none.d-lg-block { width: max-content !important; max-width: 100%; overflow-x: visible; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner.row { justify-content: center !important; width: max-content !important; min-width: auto !important; max-width: none !important; gap: 20px; } .challenge-floor #challenge-floor-mount > .row.no-gutters.challenge-floor-row--instant-aifo-two-pc .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-min-w-mid) !important; width: var(--challenge-pc-card-min-w-mid) !important; min-width: var(--challenge-pc-card-min-w-mid) !important; max-width: none !important; } /* INSTANT No Commission single card: Daily Drawdown + card centered horizontally (same as PC) */ .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card { justify-content: center; align-items: stretch; column-gap: 50px; flex-wrap: nowrap; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card > .metrics-col { flex: 0 0 auto !important; width: auto !important; max-width: none !important; flex-shrink: 0 !important; padding-left: var(--challenge-metrics-col-pad-left) !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card > .col-lg-10 { flex: 0 0 auto !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block { width: max-content; max-width: 100%; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner { justify-content: center; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-none.d-lg-block .challenge-cards-inner > [class*="col-"] { flex: 0 0 var(--challenge-pc-card-max-w) !important; width: var(--challenge-pc-card-max-w) !important; min-width: var(--challenge-pc-card-min-w-mid) !important; max-width: var(--challenge-pc-card-max-w) !important; } /* Mouse drag horizontal scroll (JS: challenge-cards-scroll--drag-enabled) */ .challenge-floor .challenge-cards-scroll.challenge-cards-scroll--drag-enabled { cursor: grab; } .challenge-floor .challenge-cards-scroll.challenge-cards-scroll--drag-enabled.is-drag-scrolling { cursor: grabbing; user-select: none; } .challenge-floor .challenge-cards-scroll.challenge-cards-scroll--drag-enabled.is-drag-scrolling * { user-select: none; } } /* Mobile: single card (e.g. INSTANT No Commission) centers card and size tabs */ @media (max-width: 991.98px) { .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card > .col-lg-10 { display: flex; flex-direction: column; align-items: center; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-lg-none { display: block !important; width: 100%; max-width: min(78vw, 300px); margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; overflow-x: visible; overflow-y: visible; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-lg-none .challenge-cards-inner { justify-content: center !important; width: max-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } .challenge-floor #challenge-floor-mount > .row.challenge-floor-row--single-card .challenge-cards-scroll.d-lg-none .challenge-cards-inner > [class*="col-"] { flex: 0 0 auto !important; width: min(78vw, 300px) !important; max-width: min(78vw, 300px) !important; padding-left: 0 !important; padding-right: 0 !important; } } @media (max-width: 991.98px) { /* Single size tab: center; multiple tiers (10K-200K): equal split — see main @media (max-width: 991.98px) block */ .challenge-floor .challenge-mobile-size-tabs:has(.challenge-mobile-size-tab:only-child) .challenge-mobile-size-tab { flex: 0 0 auto; min-width: 80px; max-width: 200px; } /* For instant subtabs when only one exists */ .challenge-floor .challenge-instant-subtabs .tab-wrap:has(.challenge-instant-subtab:only-child) { display: flex; justify-content: center; width: 100%; margin: 0 auto; grid-template-columns: none; } .challenge-floor .challenge-instant-subtabs .tab-wrap:has(.challenge-instant-subtab:only-child) .challenge-instant-subtab { width: auto; min-width: 128px; max-width: min(280px, 72vw); flex: 0 0 auto; margin: 0 auto; padding: 10px 20px; font-size: clamp(11px, 3.2vw, 13px); } } /* * >=992: keep PC left ladder metrics-col (incl. portrait 992-1199). * At end of stylesheet to override legacy portrait { display: none !important }. */ @media (min-width: 992px) { .challenge-floor #challenge-floor-mount > .row.no-gutters > .metrics-col { display: flex !important; flex-direction: column !important; visibility: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; pointer-events: auto !important; } }