/* ====================================== PNL Prop Trading - Stylesheet Primary: White | Secondary: Green accents Fonts: Montserrat + Poppins ====================================== */ /* ---------- CSS Variables ---------- Default palette: - White is the primary surface - --green-* now holds the navy #1A1A1A secondary palette - --emerald-* are reserved tertiary accents used for small hints */ :root { --green-primary: #1A1A1A; --green-dark: #1A1A1A; --green-darker: #0A0A0A; --green-darkest: #000000; --green-light: #2A2A2A; --green-accent: #404040; --emerald: #B8860B; --emerald-light: #DAA520; --emerald-accent: #FFD700; --white: #FFFFFF; --off-white: #F7F8F7; --gray-50: #F2F4F3; --gray-100: #E5E8E6; --gray-200: #C8CFC9; --gray-300: #9BA39C; --gray-400: #6B756C; --gray-500: #3A3F3B; --gray-600: #2A2E2B; --gray-700: #1A1D1B; --black: #0C0F0D; --card-bg: #FFFFFF; --card-border: rgba(0, 0, 0, 0.08); --font-display: 'Montserrat', sans-serif; --font-heading: 'Montserrat', sans-serif; --font-eyebrow: 'Montserrat', sans-serif; --font-stat: 'Montserrat', sans-serif; --font-body: 'Poppins', sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06); --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 40px rgba(0, 0, 0, 0.1); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; /* Guard against any stray element (decorative pill, off-screen absolute, wide section) ever exceeding the viewport width. Applying this to alone is not enough on mobile — elements positioned against the initial containing block escape body's clip and still create page-level horizontal scroll, which mobile browsers lock into a left-shift of all centered content. `clip` (with `hidden` fallback) avoids creating a scroll container, so the sticky navbar keeps working. */ overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); background: var(--white); color: var(--gray-700); line-height: 1.6; overflow-x: hidden; overflow-x: clip; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; display: block; } /* ---------- Container ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Homepage uses a wider container so its sections/widgets aren't squashed. */ body.home .container { max-width: 1320px; } /* ---------- Typography ---------- */ .text-green { color: #B8860B; } .text-green-sheen { background: linear-gradient(135deg, #0d244a 0%, #19407a 25%, #2f6bb5 40%, #7db4f0 50%, #2f6bb5 60%, #19407a 75%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Light-mode-only navy sheen accent (e.g. "Ecosystem"). In dark mode the underlying .text-green rule keeps its gold, so dark is unaffected. */ body:not([data-mode="dark"]) .text-blue-sheen { background: linear-gradient(135deg, #0d244a 0%, #19407a 25%, #2f6bb5 40%, #7db4f0 50%, #2f6bb5 60%, #19407a 75%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* Dark mode: blue-sheen accents flip to the same gold sheen the homepage section titles use. */ body[data-mode="dark"] .text-blue-sheen { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .text-white { color: var(--white); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; padding: 12px 28px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--green-primary); color: var(--white); border-color: var(--green-primary); } .btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); } .btn-outline { background: transparent; color: var(--gray-700); border-color: var(--gray-200); } .btn-outline:hover { border-color: var(--gray-700); background: var(--gray-50); } .btn-white { background: var(--white); color: var(--green-dark); border-color: var(--white); font-weight: 700; } .btn-white:hover { background: var(--off-white); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(255, 255, 255, 0.3); } .btn-lg { padding: 20px 45px; font-size: 1.31rem; } .btn-block { width: 100%; justify-content: center; } /* ========== NAVBAR ========== */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 24px; background: transparent; transition: padding 0.28s ease; } /* Floating rounded bar (does not span full width) */ .nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #ffffff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--gray-100); border-radius: 16px; padding: 0 14px 0 22px; box-shadow: 0 6px 22px rgba(16, 42, 84, 0.08); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.28s ease; } .navbar.scrolled { padding: 10px 24px; } .navbar.scrolled .nav-inner { box-shadow: 0 12px 30px rgba(16, 42, 84, 0.16); } /* Homepage: the nav sits flush on the page — no pill, border, or shadow — until scrolling begins, at which point the bordered pill fades in and stays pinned to the top. */ body.home .navbar:not(.scrolled) .nav-inner, body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-inner { background: transparent; border-color: transparent; box-shadow: none; } /* Over the dark navy page the flat nav needs light links and a white logo */ body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a { color: #e6edf6; } body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a:hover, body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a.active { color: #ffffff; } body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a.active::after, body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a:hover::after { background: #ffffff; } body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1); } body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-signin { color: #e6edf6; border-color: rgba(230, 237, 246, 0.45); } .nav-logo { display: inline-flex; align-items: center; z-index: 2; } .nav-logo img { /* Logo art is trimmed (no built-in whitespace), so this height is the actual wordmark height — keeps the bar slim while the logo reads large. */ height: 80px; width: auto; display: block; transition: opacity 0.22s ease, height 0.3s ease; } /* Once the pill navbar appears on scroll, the logo fades and collapses so the bar stays thin and sleek. */ .navbar.scrolled .nav-logo img { opacity: 0; height: 0; } .navbar.scrolled .nav-logo { pointer-events: none; } .nav-actions { display: flex; align-items: center; gap: 10px; z-index: 2; } .nav-signin { padding: 9px 20px; font-size: 0.9rem; font-weight: 700; color: #19407a; background: transparent; border: 1px solid rgba(25, 64, 122, 0.3); border-radius: 8px; transition: var(--transition); } .nav-signin:hover { border-color: #19407a; background: rgba(25, 64, 122, 0.06); } .nav-cta { padding: 10px 22px; font-size: 0.9rem; font-weight: 700; color: #ffffff; border-radius: 8px; border: 1px solid rgba(60, 60, 60, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #24548f 0%, #19407a 38%, #102a54 72%, #0a1c3a 100%); box-shadow: 0 6px 16px rgba(16, 42, 84, 0.28), inset 0 1px 0 rgba(255,255,255,0.28); transition: var(--transition); } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16, 42, 84, 0.36), inset 0 1px 0 rgba(255,255,255,0.34); } /* Page links in the main navbar — centered absolutely */ .nav-pages { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; z-index: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .nav-pages a { color: #19407a; text-decoration: none; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; padding: 6px 2px; position: relative; transition: color 0.2s ease; } .nav-pages a:hover, .nav-pages a.active { color: #0d244a; } .nav-pages a.active::after, .nav-pages a:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: #19407a; border-radius: 2px; } .btn-broker { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #24548f 0%, #19407a 35%, #19407a 70%, #0a1c3a 100%); color: #ffffff; border: 1px solid rgba(60, 60, 60, 0.55); padding: 6px 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; border-radius: 6px; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(60, 60, 60, 0.2); } .btn-broker::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.4), transparent 70%); pointer-events: none; } .btn-broker > * { position: relative; z-index: 1; } .btn-broker:hover { transform: translateY(-1px); border-color: rgba(60, 60, 60, 0.75); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(60, 60, 60, 0.28); } .mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--green-dark); transition: var(--transition); border-radius: 2px; } .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .mobile-toggle.active span:nth-child(2) { opacity: 0; } .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* ========== HERO ========== */ .hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 86vh; padding: 120px 0 90px; overflow: hidden; background: #ffffff; } /* ================================================================== HOMEPAGE BACKGROUND (light mode only) Plain white page. Every homepage section is transparent so the animated binary "ocean" (fixed, behind content) shows through continuously with no horizontal breaks; components keep their own surfaces on top. ================================================================== */ body.home:not([data-mode="dark"]):not(.mode-grey) { background-color: #ffffff; } body.home:not([data-mode="dark"]) .hero, body.home:not([data-mode="dark"]) .section, body.home:not([data-mode="dark"]) .challenges, body.home:not([data-mode="dark"]) .platforms, body.home:not([data-mode="dark"]) .broker, body.home:not([data-mode="dark"]) .features, body.home:not([data-mode="dark"]) .why-pnl, body.home:not([data-mode="dark"]) .roi, body.home:not([data-mode="dark"]) .payouts, body.home:not([data-mode="dark"]) .faq, body.home:not([data-mode="dark"]) .cta, body.home:not([data-mode="dark"]) .journey, body.home:not([data-mode="dark"]) .section--alt { background: transparent; } /* Lightweight animated binary "ocean" — fixed layer over the depth grid, behind page content. Homepage + default light theme only. */ .binary-wave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; } body.home:not([data-mode="dark"]):not(.mode-grey) .binary-wave { display: block; } /* Sub-pages that opt into the currency ocean (e.g. How It Works) show it in light and dark themes, hidden on grey like the homepage. */ body.page-wave:not(.mode-grey) .binary-wave { display: block; } /* The shared page-hero band goes transparent on wave pages so the ocean flows continuously from the top. */ body.page-wave .page-hero, body.page-wave[data-mode="dark"] .page-hero { background: transparent; border-bottom: none; } /* Dark mode homepage: deep blue page with the white currency ocean showing through — sections go transparent just like light mode. */ body.home[data-mode="dark"] { background-color: #0b1f35; } body.home[data-mode="dark"]:not(.mode-grey) .binary-wave { display: block; } body.home[data-mode="dark"] .hero, body.home[data-mode="dark"] .hero-canvas, body.home[data-mode="dark"] .section, body.home[data-mode="dark"] .challenges, body.home[data-mode="dark"] .platforms, body.home[data-mode="dark"] .broker, body.home[data-mode="dark"] .features, body.home[data-mode="dark"] .why-pnl, body.home[data-mode="dark"] .roi, body.home[data-mode="dark"] .payouts, body.home[data-mode="dark"] .faq, body.home[data-mode="dark"] .cta, body.home[data-mode="dark"] .journey, body.home[data-mode="dark"] .section--alt { background: transparent; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: var(--white); } .hero-content { position: relative; z-index: 2; text-align: left; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; } .hero-right { display: flex; align-items: center; justify-content: center; } .hero-logo { display: block; width: 100%; max-width: 540px; height: auto; margin: 0; padding: 0; object-fit: contain; } .globe-wrap { position: relative; margin: 0 auto; width: 100%; max-width: 540px; opacity: 0; transition: opacity 0.4s ease; } .globe-wrap.is-ready { opacity: 1; } /* Hero text + buttons fade in identically to the globe (same 0.4s ease, triggered at the same moment by globe.js). */ .hero-left { opacity: 0; transition: opacity 0.4s ease; } .hero-left.is-ready { opacity: 1; } .hero-globe { display: block; width: 100%; } .hero-globe svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; } .globe-wrap .pill { position: absolute; left: 50%; bottom: 5.5%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; background: rgba(252, 252, 253, 0.78); border: 1px solid rgba(22, 40, 63, 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(20, 35, 60, 0.08); white-space: nowrap; } .globe-wrap .pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #c9a24b; animation: globeBeat 2.4s ease-in-out infinite; } @keyframes globeBeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(201, 162, 75, 0); } } #regionName { font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #41506b; transition: opacity 0.22s; } .hero-tagline { font-family: var(--font-heading); font-size: clamp(3rem, 6.6vw, 5.4rem); font-weight: 800; letter-spacing: -0.01em; text-transform: none; text-align: left; line-height: 1.04; margin: 0 0 22px; background: linear-gradient(135deg, #0d244a 0%, #19407a 25%, #2f6bb5 40%, #7db4f0 50%, #2f6bb5 60%, #19407a 75%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-badge { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 4px 24px 4px 0; background: /* Diagonal sheen highlight (warm white smear from top-left) */ linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0.05) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.18) 100%), /* Vertical metallic gold gradient */ linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); border: 1px solid rgba(184, 134, 11, 0.7); border-radius: 50px; font-size: 0.85rem; font-weight: 500; margin-bottom: 24px; overflow: hidden; box-shadow: 0 10px 22px rgba(122, 90, 14, 0.42), 0 2px 6px rgba(122, 90, 14, 0.28), inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 4px rgba(60, 40, 0, 0.35), inset 0 0 0 1px rgba(255, 215, 0, 0.22); } .hero-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 60% at 30% 10%, rgba(255, 248, 220, 0.55), transparent 70%); pointer-events: none; } .hero-subtitle { font-size: 1.42rem; line-height: 1.6; margin: 0 0 34px; max-width: 560px; color: #19407a; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 40px; } .hero-buttons .btn-primary { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #19407a 0%, #19407a 35%, #102a54 70%, #0a1c3a 100%); color: #ffffff; border: 1px solid rgba(60, 60, 60, 0.55); padding: 18px 42px; font-size: 1.1rem; font-weight: 700; border-radius: 8px; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(60, 60, 60, 0.22); } .hero-buttons .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.45), transparent 70%); pointer-events: none; } .hero-buttons .btn-primary:hover { transform: translateY(-2px); border-color: rgba(60, 60, 60, 0.75); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(60, 60, 60, 0.28); } /* "Trade Your Money" — deep black pill with a subtle top sheen. Same structural recipe as the gold "Trade Our Accounts" CTA, just a darker palette and a much fainter highlight. */ .hero-buttons .btn-outline-light { position: relative; overflow: hidden; padding: 18px 42px; font-size: 1.1rem; font-weight: 700; border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(180deg, #24548f 0%, #19407a 38%, #102a54 72%, #0a1c3a 100%); border: 1px solid rgba(80, 80, 80, 0.55); color: transparent; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(120, 120, 120, 0.18); } .hero-buttons .btn-outline-light::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.18), transparent 70%); pointer-events: none; } .hero-buttons .btn-outline-light > * { position: relative; z-index: 1; } .hero-buttons .btn-outline-light:hover { transform: translateY(-2px); border-color: rgba(120, 120, 120, 0.7); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(140, 140, 140, 0.25); } .hero-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-start; } .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .hero-stat-soon { position: relative; } .hero-stat-soon .stat-number { position: relative; display: inline-block; font-size: 1.45rem; opacity: 0.6; } .soon-badge { position: absolute; top: -10px; right: -22px; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFD700; white-space: nowrap; line-height: 1; pointer-events: none; animation: soonPulse 1.8s ease-in-out infinite; text-shadow: 0 0 6px rgba(255, 215, 0, 0.9), 0 0 14px rgba(218, 165, 32, 0.65), 0 0 24px rgba(184, 134, 11, 0.4); } @keyframes soonPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .stat-number { font-family: var(--font-stat); font-size: 1.45rem; font-weight: 800; color: #19407a; } .stat-label { font-size: 1rem; color: rgba(0, 0, 0, 0.7); font-weight: 500; } .hero-stat-divider { width: 1px; height: 30px; background: rgba(0, 0, 0, 0.2); } /* Hero two-column responsive: stack on tablet/mobile */ @media (max-width: 860px) { .hero { padding: 96px 0 56px; } .hero-content { grid-template-columns: 1fr; gap: 28px; text-align: center; } .hero-right { order: -1; } .hero-logo { max-width: 300px; height: auto !important; margin: 0 auto !important; } .globe-wrap { max-width: 300px; } .hero-tagline { text-align: center; } .hero-subtitle { margin-left: auto; margin-right: auto; } .hero-buttons { justify-content: center; } .hero-stats { justify-content: center; } } /* ========== SECTIONS (shared) ========== */ .section { padding: 60px 0; position: relative; } .section-header { text-align: center; margin-bottom: 40px; } .section-tag { display: inline-block; font-family: var(--font-eyebrow); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--green-primary); margin-bottom: 16px; } .section-tag-lg { font-size: 1.6rem; font-weight: 500; letter-spacing: 5px; margin-bottom: 24px; } .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 16px; color: var(--black); } .section-subtitle { font-size: 1.05rem; color: var(--gray-400); max-width: 560px; margin: 0 auto; } /* ========== CHALLENGES / PRICING ========== */ .challenges { background: var(--white); } .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; } .pricing-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; transition: var(--transition); position: relative; box-shadow: var(--shadow-card); } .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(0, 0, 0, 0.2); } .price-original { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--gray-400); text-decoration: line-through; align-self: center; margin-right: 6px; } .price-currency { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--green-primary); margin-top: 6px; } .price-amount { font-family: var(--font-stat); font-size: 3rem; font-weight: 900; color: var(--black); line-height: 1; } .check-icon { width: 18px; height: 18px; color: var(--green-primary); flex-shrink: 0; } /* ========== WHY PNL / COMPARISON ========== */ .why-pnl { background: var(--white); position: relative; } .comparison-block { margin-bottom: 20px; } .comparison-sub-header { text-align: center; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; } .comparison-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 100px; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; } .comparison-badge-red { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #dc2626 0%, #b91c1c 35%, #7f1d1d 70%, #450a0a 100%); color: #ffffff; border: 1px solid rgba(248, 113, 113, 0.55); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); overflow: hidden; box-shadow: 0 8px 20px rgba(69, 10, 10, 0.4), 0 2px 6px rgba(69, 10, 10, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(248, 113, 113, 0.2); } .comparison-badge-red::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 60% at 30% 10%, rgba(255, 255, 255, 0.4), transparent 70%); pointer-events: none; } .comparison-badge-red > * { position: relative; z-index: 1; } .comparison-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--black); margin-bottom: 12px; line-height: 1.2; } .comparison-desc { font-size: 0.95rem; color: var(--gray-400); line-height: 1.7; } /* Industry rule grid */ .rules-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .rule-card { background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-md); padding: 24px 14px 20px; position: relative; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 150px; overflow: hidden; } .rule-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, rgba(220, 38, 38, 0), #DC2626, rgba(220, 38, 38, 0)); opacity: 0; transition: opacity 0.35s ease; } .rule-card::after { content: attr(data-tooltip); position: absolute; inset: 16px 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--gray-500); line-height: 1.5; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .rule-card:hover { transform: translateY(-4px); border-color: rgba(220, 38, 38, 0.25); box-shadow: 0 12px 36px rgba(220, 38, 38, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03); z-index: 5; } .rule-card:hover::before { opacity: 1; } .rule-card:hover::after { opacity: 1; transform: translateY(0); } .rule-card:hover .rule-icon-wrap, .rule-card:hover .rule-title { opacity: 0; transform: translateY(-6px); } .rule-icon-wrap { position: relative; width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #dc2626 0%, #b91c1c 25%, #7f1d1d 55%, #450a0a 100%); border: 1px solid rgba(248, 113, 113, 0.55); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(69, 10, 10, 0.45), 0 3px 8px rgba(69, 10, 10, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(248, 113, 113, 0.25); transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.4s ease; animation: ruleIconFloat 4.5s ease-in-out infinite; } .rules-grid .rule-card:nth-child(2) .rule-icon-wrap { animation-delay: 0.3s; } .rules-grid .rule-card:nth-child(3) .rule-icon-wrap { animation-delay: 0.6s; } .rules-grid .rule-card:nth-child(4) .rule-icon-wrap { animation-delay: 0.9s; } .rules-grid .rule-card:nth-child(5) .rule-icon-wrap { animation-delay: 1.2s; } .rules-grid .rule-card:nth-child(6) .rule-icon-wrap { animation-delay: 1.5s; } .rules-grid .rule-card:nth-child(7) .rule-icon-wrap { animation-delay: 1.8s; } .rules-grid .rule-card:nth-child(8) .rule-icon-wrap { animation-delay: 2.1s; } .rules-grid .rule-card:nth-child(9) .rule-icon-wrap { animation-delay: 2.4s; } .rules-grid .rule-card:nth-child(10) .rule-icon-wrap { animation-delay: 2.7s; } .rules-grid .rule-card:nth-child(11) .rule-icon-wrap { animation-delay: 3s; } .rules-grid .rule-card:nth-child(12) .rule-icon-wrap { animation-delay: 3.3s; } .rule-icon-wrap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.55), transparent 70%); pointer-events: none; } .rule-icon-wrap svg { width: 24px; height: 24px; position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); stroke: #ffffff; color: #ffffff; stroke-width: 1.8; } @keyframes ruleIconFloat { 0%, 100% { box-shadow: 0 10px 28px rgba(69, 10, 10, 0.45), 0 3px 8px rgba(69, 10, 10, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(248, 113, 113, 0.25); } 50% { box-shadow: 0 14px 34px rgba(69, 10, 10, 0.55), 0 4px 12px rgba(69, 10, 10, 0.32), inset 0 2px 1px rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(248, 113, 113, 0.32); } } .rule-title { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--black); line-height: 1.3; margin: 0; transition: opacity 0.35s ease, transform 0.35s ease; } /* Divider */ .comparison-divider { display: flex; align-items: center; gap: 24px; margin: 70px 0 50px; } .divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4), transparent); } .divider-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 28px; background: /* Warm-white diagonal sheen */ linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0.05) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.18) 100%), /* Vertical metallic gold gradient */ linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); color: #FFFFFF; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; border-radius: 100px; border: 1px solid rgba(184, 134, 11, 0.7); box-shadow: 0 10px 22px rgba(122, 90, 14, 0.42), 0 2px 6px rgba(122, 90, 14, 0.28), inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 4px rgba(60, 40, 0, 0.35), inset 0 0 0 1px rgba(255, 215, 0, 0.22); position: relative; overflow: hidden; } .divider-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: dividerShine 3s infinite; } @keyframes dividerShine { 0%, 100% { left: -100%; } 50%, 60% { left: 120%; } } /* PNL rules grid */ .pnl-rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; } .pnl-rule-card { background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.01)); border: 1.5px solid rgba(0, 0, 0, 0.22); border-radius: var(--radius-lg); padding: 42px 34px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .pnl-rule-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 70%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); transition: left 0.8s ease; pointer-events: none; } .pnl-rule-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--green-primary), transparent); opacity: 0; transition: opacity 0.4s ease; } .pnl-rule-card:hover { transform: translateY(-8px); border-color: rgba(0, 0, 0, 0.5); background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08); } .pnl-rule-card:hover::before { left: 120%; } .pnl-rule-card:hover::after { opacity: 1; } .pnl-rule-number { position: absolute; top: 22px; right: 28px; font-family: var(--font-heading); font-size: 3.5rem; font-weight: 900; color: rgba(0, 0, 0, 0.08); line-height: 1; letter-spacing: -2px; } .pnl-rule-icon { width: 58px; height: 58px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #19407a 0%, #19407a 25%, #102a54 55%, #0a1c3a 100%); border: 1px solid rgba(60, 60, 60, 0.55); color: var(--white); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.28), inset 0 2px 1px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(60, 60, 60, 0.28); position: relative; z-index: 1; } .pnl-rule-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.55), transparent 70%); pointer-events: none; } .pnl-rule-icon svg { width: 26px; height: 26px; position: relative; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } .pnl-rule-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--black); margin-bottom: 12px; position: relative; z-index: 1; } .pnl-rule-desc { font-size: 0.9rem; color: var(--gray-500); line-height: 1.7; position: relative; z-index: 1; } .comparison-footer { text-align: center; font-size: 1.1rem; color: var(--gray-500); margin-top: 40px; font-weight: 500; } .comparison-footer .text-green { font-weight: 700; } /* ========== RULE COMPARISON TABLE ========== */ .rule-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } .rule-compare-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.9rem; min-width: 700px; } .rule-compare-table thead { position: sticky; top: 0; z-index: 2; } .rule-compare-table th { padding: 18px 16px; font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; border-bottom: 2px solid rgba(0, 0, 0, 0.08); } .rc-feature-head { background: var(--gray-500); color: var(--white); text-align: left; border-radius: var(--radius-lg) 0 0 0; width: 220px; } .rc-comp-head { background: var(--gray-100); color: var(--gray-600); text-align: center; } .rc-brand-head { background: var(--green-primary); color: var(--white); text-align: center; border-radius: 0 var(--radius-lg) 0 0; min-width: 140px; padding: 0; position: relative; } .rc-brand-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 2px)); height: 100px; width: auto; display: block; pointer-events: none; } .rule-compare-table tbody tr { transition: background 0.2s ease; } .rule-compare-table tbody tr:hover { background: rgba(0, 0, 0, 0.04); } .rule-compare-table td { padding: 14px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); text-align: center; vertical-align: middle; } .rule-compare-table tbody tr:last-child td { border-bottom: none; } .rc-feature { text-align: left !important; font-weight: 600; color: var(--gray-700); } .rc-x { font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .rc-check { color: #a0a0a0; font-size: 1.1rem; font-weight: 700; } .rc-brand-check { color: var(--green-primary); font-weight: 700; font-size: 0.85rem; background: rgba(0, 0, 0, 0.06); } /* ========== ROI CALCULATOR ========== */ .roi { background: var(--white); } .roi-card { max-width: 1400px; margin: 0 auto; background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-xl); padding: 40px 48px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04); } .roi-controls { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.9fr; gap: 36px; margin-bottom: 32px; } .roi-group { min-width: 0; } .roi-freq-btn { flex: 1 1 0; min-width: 0; background: var(--white); border: 1.5px solid rgba(0, 0, 0, 0.1); color: var(--gray-500); padding: 11px 6px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; border-radius: 8px; cursor: pointer; transition: var(--transition); text-align: center; white-space: nowrap; } .roi-freq-btn:hover { border-color: var(--green-primary); color: var(--green-primary); } .roi-freq-btn.active { background: linear-gradient(135deg, rgba(220, 235, 255, 0.55) 0%, rgba(220, 235, 255, 0.05) 35%, rgba(220, 235, 255, 0) 60%, rgba(220, 235, 255, 0.18) 100%), linear-gradient(180deg, #4e80c8 0%, #2c5ea0 32%, #19407a 68%, #0c2247 100%); border-color: rgba(25, 64, 122, 0.7); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 20, 50, 0.35); box-shadow: 0 6px 16px rgba(13, 34, 71, 0.42), 0 2px 4px rgba(13, 34, 71, 0.28), inset 0 1px 0 rgba(220, 235, 255, 0.65), inset 0 -2px 4px rgba(0, 20, 50, 0.35), inset 0 0 0 1px rgba(90, 140, 220, 0.22); } .roi-group { display: flex; flex-direction: column; gap: 14px; } .roi-label { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gray-500); } .roi-period-display { color: var(--gray-600); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: 0.9rem; } body[data-mode="dark"] .roi-period-display { color: #FFFFFF; } .roi-account-buttons { display: flex; gap: 8px; min-width: 0; } .roi-acc-btn { flex: 1 1 0; min-width: 0; background: var(--white); border: 1.5px solid rgba(0, 0, 0, 0.1); color: var(--gray-500); padding: 11px 6px; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; border-radius: 8px; cursor: pointer; transition: var(--transition); text-align: center; white-space: nowrap; } .roi-acc-btn:hover { border-color: var(--green-primary); color: var(--green-primary); } .roi-acc-btn.active { background: linear-gradient(135deg, rgba(220, 235, 255, 0.55) 0%, rgba(220, 235, 255, 0.05) 35%, rgba(220, 235, 255, 0) 60%, rgba(220, 235, 255, 0.18) 100%), linear-gradient(180deg, #4e80c8 0%, #2c5ea0 32%, #19407a 68%, #0c2247 100%); border-color: rgba(25, 64, 122, 0.7); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 20, 50, 0.35); box-shadow: 0 6px 16px rgba(13, 34, 71, 0.42), 0 2px 4px rgba(13, 34, 71, 0.28), inset 0 1px 0 rgba(220, 235, 255, 0.65), inset 0 -2px 4px rgba(0, 20, 50, 0.35), inset 0 0 0 1px rgba(90, 140, 220, 0.22); } /* Slider */ .roi-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--green-primary) 0%, var(--green-primary) 50%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 100%); outline: none; cursor: pointer; } .roi-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid #19407a; cursor: pointer; box-shadow: 0 2px 8px rgba(13, 34, 71, 0.35); transition: transform 0.15s ease; } .roi-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .roi-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 3px solid #19407a; cursor: pointer; box-shadow: 0 2px 8px rgba(13, 34, 71, 0.35); } .roi-slider-ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--gray-400); font-weight: 600; margin-top: 6px; } /* "Your Earning Potential" — blue controls + graph, light mode only. Dark mode keeps its gold via the existing dark overrides / inline SVG, and the projected-earnings figure (.roi-stat-big) and ROI number (.roi-invest-highlight .roi-invest-value) stay gold in both modes. */ body:not([data-mode="dark"]) .roi-acc-btn:hover, body:not([data-mode="dark"]) .roi-freq-btn:hover { border-color: #19407a; color: #19407a; } body:not([data-mode="dark"]) { --chart-dot-dark: #19407a; --chart-dot-light: #2f6bb5; --chart-stroke-rgba: rgba(25, 64, 122, 0.35); } body:not([data-mode="dark"]) #roiLine stop:first-child { stop-color: #19407a; } body:not([data-mode="dark"]) #roiLine stop:last-child { stop-color: #3a7bd5; } body:not([data-mode="dark"]) #roiFill stop:first-child { stop-color: rgba(25, 64, 122, 0.35); } body:not([data-mode="dark"]) #roiFill stop:last-child { stop-color: rgba(25, 64, 122, 0); } /* Stats */ .roi-stats { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; margin-bottom: 32px; } .roi-stat { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-md); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; text-align: center; transition: var(--transition); } .roi-stat-featured { background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)); border-color: rgba(0, 0, 0, 0.25); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .roi-stat-label { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--gray-500); } .roi-stat-value { font-family: var(--font-stat); font-size: 1.4rem; font-weight: 800; color: var(--black); } .roi-stat-big { font-size: 2.2rem; background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Investment breakdown */ .roi-investment { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.01) 100%); border: 1px solid rgba(0, 0, 0, 0.18); border-radius: var(--radius-md); padding: 20px 28px; margin-bottom: 32px; } .roi-invest-item { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; } .roi-invest-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--gray-500); } .roi-invest-label svg { width: 14px; height: 14px; color: var(--green-primary); } .roi-invest-value { font-family: var(--font-stat); font-size: 1.35rem; font-weight: 800; color: var(--gray-700); } .roi-invest-highlight .roi-invest-value { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 1.55rem; } .roi-invest-divider { width: 1px; background: rgba(0, 0, 0, 0.15); margin: 4px 0; } /* Chart */ .roi-chart-wrap { background: rgba(0, 0, 0, 0.015); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-md); padding: 24px; } .roi-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .roi-chart-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--black); } .roi-chart-hint { font-size: 0.75rem; color: var(--gray-400); } .roi-chart { width: 100%; height: 280px; display: block; } .roi-chart text { font-family: var(--font-body); font-size: 11px; fill: var(--gray-400); } .roi-disclaimer { margin-top: 16px; text-align: center; font-size: 0.75rem; color: var(--gray-400); font-style: italic; } /* ========== FEATURES ========== */ .features { background: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .feature-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 40px 32px; transition: var(--transition); box-shadow: var(--shadow-sm); } .feature-card:hover { transform: translateY(-4px); border-color: rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-hover); } .feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 2px 1px rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(60, 60, 60, 0.3); } .feature-card:hover .feature-icon svg { transform: scale(1.08); } .feature-card:hover .feature-icon::before { opacity: 1; transform: translateX(120%); } .feature-icon { position: relative; width: 52px; height: 52px; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #19407a 0%, #19407a 25%, #102a54 55%, #0a1c3a 100%); border: 1px solid rgba(60, 60, 60, 0.55); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: #ffffff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(60, 60, 60, 0.25); overflow: hidden; transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s ease; animation: featureIconFloat 4.5s ease-in-out infinite; } .feature-card:nth-child(2) .feature-icon { animation-delay: 0.4s; } .feature-card:nth-child(3) .feature-icon { animation-delay: 0.8s; } .feature-card:nth-child(4) .feature-icon { animation-delay: 1.2s; } .feature-icon::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); opacity: 0; transition: transform 0.8s ease, opacity 0.3s ease; } .feature-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.55), transparent 70%); pointer-events: none; } .feature-icon svg { width: 24px; height: 24px; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); } @keyframes featureIconFloat { 0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(60, 60, 60, 0.25); } 50% { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 2px 1px rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(60, 60, 60, 0.3); } } .feature-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: var(--black); } .feature-desc { font-size: 0.9rem; color: var(--gray-400); line-height: 1.7; } /* ========== TRADER JOURNEY ========== */ .journey { background: var(--white); } /* No divider line between the hero and the Trader's Journey section */ .journey::before { display: none; } .journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; position: relative; } .journey-card { display: flex; flex-direction: column; background: #f5f7fc; border: 1px solid rgba(25, 64, 122, 0.08); border-radius: 22px; padding: 30px 28px; z-index: 1; opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .journey.is-visible .journey-card { opacity: 1; transform: translateY(0); } .journey.is-visible .journey-card:nth-child(1) { transition-delay: 0.05s; } .journey.is-visible .journey-card:nth-child(2) { transition-delay: 0.16s; } .journey.is-visible .journey-card:nth-child(3) { transition-delay: 0.27s; } /* Trader's Journey title + subtext: match the hero's entrance exactly — a 0.4s opacity fade with no slide. Overrides the site-wide section-header fade-up (inline 0.8s opacity+transform set by main.js) so the page's entrances read as one uniform animation. Opacity 0->1 is still driven by the shared .visible scroll trigger. */ .journey .section-header { opacity: 0; /* hidden from first paint so it never flashes before the JS hides it */ transition: opacity 0.4s ease !important; transform: none !important; } .journey-card:hover { box-shadow: 0 18px 40px rgba(25, 64, 122, 0.12); } .jc-eyebrow { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .jc-num { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 800; color: #9aa6c0; } .jc-cat { font-size: 0.95rem; font-weight: 600; color: #8894ae; } .jc-title { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: #0d244a; margin: 0 0 14px; } .jc-desc { font-size: 0.97rem; line-height: 1.6; color: #5a6b88; margin: 0 0 24px; } .jc-visual { margin-bottom: 24px; } .jc-visual--center { display: flex; align-items: center; justify-content: center; min-height: 208px; } .jc-visual--chart { min-height: 208px; display: flex; align-items: flex-end; } /* Feature pills */ .jc-pill { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #ffffff; border: 1px solid rgba(25, 64, 122, 0.06); border-radius: 999px; padding: 12px 14px 12px 20px; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(25, 64, 122, 0.06); font-weight: 600; font-size: 0.98rem; color: #26324c; } .jc-pill:last-child { margin-bottom: 0; } .jc-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #57b377 0%, #2f8f57 100%); color: #fff; flex-shrink: 0; } .jc-check svg { width: 14px; height: 14px; } /* Reward card */ .jc-reward { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1.72 / 1; border-radius: 20px; background: linear-gradient(150deg, #2f61ac 0%, #1d4483 52%, #163360 100%); box-shadow: 0 26px 44px rgba(22, 51, 95, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; padding: 26px; } .jc-reward-brand { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); font-weight: 600; } .jc-reward-big { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 800; line-height: 1; } .jc-reward-tag { font-size: 0.8rem; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); } /* Growth bars */ .jc-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; width: 100%; height: 186px; padding-top: 22px; } .jc-bar { position: relative; flex: 1; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #7793c8 0%, #4a6aa8 100%); min-height: 6px; } .jc-bar--max { background: linear-gradient(180deg, #2f61ac 0%, #163360 100%); } .jc-bar-cap { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem; font-weight: 700; color: #3a5488; } /* Testimonial pinned to the bottom */ .jc-quote { margin: auto 0 0; padding-top: 20px; border-top: 1px solid rgba(25, 64, 122, 0.12); font-size: 0.92rem; line-height: 1.55; color: #5f6f8c; font-style: italic; } .jc-author { margin: 12px 0 0; font-size: 0.88rem; font-weight: 700; color: #0d244a; } .jc-author span { font-weight: 500; color: #8894ae; } /* Stack the three journey cards on smaller screens */ @media (max-width: 900px) { .journey-grid { grid-template-columns: 1fr; max-width: 480px; gap: 20px; } .jc-title { font-size: 1.7rem; } } @media (prefers-reduced-motion: reduce) { .journey-card, .journey-step { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* ========== ECOSYSTEM ========== */ .ecosystem { background: var(--white); padding: 60px 0 80px; } .ecosystem .section-header { margin-bottom: 48px; } .ecosystem .section-subtitle em { font-style: normal; color: var(--green-primary); font-weight: 700; } /* Branching ecosystem graph */ .eco-graph { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: 1000 / 420; } .eco-graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; } .eco-graph-line { opacity: 0.6; } .eco-graph-or text { font-family: var(--font-heading); } .eco-pulse { filter: drop-shadow(0 0 4px rgba(20, 20, 20, 0.55)); } /* Positioned nodes */ .eco-graph-node { position: absolute; width: 19%; transform: translate(-50%, -50%); z-index: 1; } .eco-graph-node--prop { left: 12%; top: 50%; } .eco-graph-node--brokerage { left: 50%; top: 22%; } .eco-graph-node--exchange { left: 50%; top: 78%; } .eco-graph-node--academy { left: 88%; top: 50%; } /* Card styling (reused for all graph nodes) */ .eco-node-card { background: var(--white); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: var(--radius-md); padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; } .eco-graph-node .eco-node-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.06); } .eco-graph-node--academy .eco-node-card { border-color: rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, #ffffff 0%, rgba(0, 0, 0, 0.04) 100%); } .eco-node-icon { position: relative; width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #19407a 0%, #19407a 25%, #102a54 55%, #0a1c3a 100%); border: 1px solid rgba(60, 60, 60, 0.55); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; overflow: hidden; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 2px 1px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(60, 60, 60, 0.25); } .eco-node-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.55), transparent 70%); pointer-events: none; } .eco-node-icon svg { width: 24px; height: 24px; position: relative; z-index: 2; stroke: #ffffff; color: #ffffff; stroke-width: 1.8; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } .eco-node-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--black); } .eco-node-desc { font-size: 0.78rem; color: rgba(0, 0, 0, 0.55); line-height: 1.5; } /* ---- Ecosystem animations ---- */ /* Node entrance: pop in with scale + fade, staggered */ .eco-graph-node { opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .eco-graph.is-visible .eco-graph-node { opacity: 1; transform: translate(-50%, -50%) scale(1); } .eco-graph.is-visible .eco-graph-node--prop { transition-delay: 0.05s; } .eco-graph.is-visible .eco-graph-node--brokerage { transition-delay: 0.25s; } .eco-graph.is-visible .eco-graph-node--exchange { transition-delay: 0.35s; } .eco-graph.is-visible .eco-graph-node--academy { transition-delay: 0.55s; } /* Draw-in the dashed connector lines */ .eco-graph-line { opacity: 0.6; stroke-dasharray: 4 6; stroke-dashoffset: 500; transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.4s ease; } .eco-graph.is-visible .eco-graph-line { stroke-dashoffset: 0; } /* Soft breathing on the OR badge */ .eco-graph-or circle { transform-box: fill-box; transform-origin: center; animation: eco-or-breathe 3.2s ease-in-out infinite; } @keyframes eco-or-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.9; } } /* Softer, cleaner moving pulses */ .eco-pulse { filter: drop-shadow(0 0 6px rgba(20, 20, 20, 0.7)); } /* Gentle hover tilt + intensify shadow */ .eco-graph-node .eco-node-card { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .eco-graph-node .eco-node-card:hover { transform: translateY(-4px) scale(1.02); border-color: rgba(0, 0, 0, 0.55); } /* Radiating glow ring around each node icon (very subtle) */ .eco-node-icon { position: relative; } .eco-graph.is-visible .eco-node-icon::before { content: ''; position: absolute; inset: -6px; border-radius: 16px; border: 1.5px solid rgba(20, 20, 20, 0.45); opacity: 0; animation: eco-node-ring 3.6s ease-out infinite; pointer-events: none; z-index: 1; } .eco-graph.is-visible .eco-graph-node--prop .eco-node-icon::before { animation-delay: 0.0s; } .eco-graph.is-visible .eco-graph-node--brokerage .eco-node-icon::before { animation-delay: 0.9s; } .eco-graph.is-visible .eco-graph-node--exchange .eco-node-icon::before { animation-delay: 1.8s; } .eco-graph.is-visible .eco-graph-node--academy .eco-node-icon::before { animation-delay: 2.7s; } @keyframes eco-node-ring { 0% { transform: scale(0.9); opacity: 0; } 15% { opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .eco-graph-node, .eco-graph-line, .eco-graph-or circle, .eco-node-icon::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; stroke-dashoffset: 0 !important; } .eco-graph-node--brokerage { /* keep correct origin */ } } /* ========== PAYOUTS ========== */ .payouts { background: var(--white); } .payouts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .payout-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 28px 24px; transition: var(--transition); box-shadow: var(--shadow-sm); } .payout-card:hover { border-color: rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-hover); } .payout-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .payout-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--green-dark), var(--green-primary)); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--white); flex-shrink: 0; } .payout-info { display: flex; flex-direction: column; } .payout-name { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--black); } .payout-account { font-size: 0.8rem; color: var(--gray-400); } .payout-amount { font-family: var(--font-stat); font-size: 2rem; font-weight: 800; margin-bottom: 4px; background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .payout-date { font-size: 0.8rem; color: var(--gray-400); } /* ========== PLATFORMS ========== */ .platforms { padding: 60px 0 80px; background: var(--white); } .platforms-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: 820px; margin: 0 auto; align-items: center; justify-items: center; } .platform-item { display: flex; align-items: center; justify-content: center; transition: var(--transition); } .platform-logo { height: 320px; width: auto; max-width: 100%; object-fit: contain; transition: var(--transition); } .platform-item:hover .platform-logo { transform: translateY(-4px); } /* ========== BROKER / MEET CXM ========== */ .broker { background: var(--white); } .broker-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--gray-50); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 56px; } .broker-eyebrow { display: inline-block; font-family: var(--font-eyebrow); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #19407a; margin-bottom: 16px; } .broker-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 16px; } .broker-subtitle { font-size: 1rem; line-height: 1.6; color: var(--gray-400); max-width: 460px; margin-bottom: 28px; } .broker-features { list-style: none; display: grid; gap: 16px; margin-bottom: 32px; } .broker-features li { display: flex; align-items: center; gap: 12px; font-size: 0.98rem; font-weight: 500; color: var(--gray-600); } .broker-features svg { width: 22px; height: 22px; flex-shrink: 0; color: #19407a; } .broker-cta { display: inline-block; background: #19407a; color: #FFFFFF; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; padding: 14px 32px; border-radius: var(--radius-md); transition: var(--transition); } .broker-cta:hover { background: #12315e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(25, 64, 122, 0.25); } .broker-accounts { display: grid; gap: 16px; } .broker-account { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px 28px; transition: var(--transition); } .broker-account:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: rgba(25, 64, 122, 0.3); } .broker-account h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #19407a; margin-bottom: 6px; } .broker-account p { font-size: 0.92rem; line-height: 1.5; color: var(--gray-400); } @media (max-width: 768px) { .broker-panel { grid-template-columns: 1fr; padding: 36px 24px; gap: 32px; } } /* ========== FAQ ========== */ .faq { background: var(--white); } .faq-list { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; align-items: start; } .faq-item { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-sm); } .faq-item.active { border-color: rgba(0, 0, 0, 0.25); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: none; border: none; color: var(--gray-700); font-family: var(--font-heading); font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; gap: 16px; transition: var(--transition); } .faq-question:hover { color: var(--green-primary); } .faq-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--gray-300); transition: var(--transition); } .faq-item.active .faq-chevron { transform: rotate(180deg); color: var(--green-primary); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-item.active .faq-answer { max-height: 4000px; } .faq-answer p { padding: 0 24px 20px; font-size: 0.9rem; color: var(--gray-400); line-height: 1.7; } /* ========== CTA ========== */ .cta { padding: 40px 0 100px; background: var(--white); } /* Glossy navy gradient panel with sheen — the site's flagship-card look */ .cta-box { position: relative; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.04) 100%), linear-gradient(115deg, #0d244a 0%, #19407a 55%, #2f6bb5 100%); border: 1px solid rgba(148, 178, 220, 0.4); border-radius: var(--radius-xl); padding: 80px 60px; text-align: center; overflow: hidden; box-shadow: 0 18px 44px rgba(13, 36, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .cta-bg-dove { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 400px; height: 400px; opacity: 0.08; pointer-events: none; } .cta-bg-dove img { width: 100%; height: 100%; } .cta-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 16px; position: relative; z-index: 1; color: #ffffff; } /* Accent word ("Trading?") in metallic gold */ .cta-title .text-white { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #E3BC45 52%, #DAA520 62%, #B8860B 78%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cta-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; position: relative; z-index: 1; } /* Gold glossy CTA button */ .cta .btn-white { color: #ffffff; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(184, 134, 11, 0.7); text-shadow: 0 1px 2px rgba(74, 47, 6, 0.45); background: linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0.05) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.18) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); box-shadow: 0 10px 22px rgba(122, 90, 14, 0.42), 0 2px 6px rgba(122, 90, 14, 0.28), inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 4px rgba(60, 40, 0, 0.35); } .cta .btn-white:hover { background: linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0.05) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.18) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(122, 90, 14, 0.5), 0 3px 8px rgba(122, 90, 14, 0.3), inset 0 1px 0 rgba(255, 245, 200, 0.7), inset 0 -2px 4px rgba(60, 40, 0, 0.35); } .cta .btn { position: relative; z-index: 1; } /* ========== FOOTER ========== */ .footer { background: #19407a; color: rgba(255, 255, 255, 0.55); padding: 48px 0 0; border-top: none; } /* Top bar: logo + social */ .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #ffffff; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; margin: 0; } .footer-logo-mark { width: 34px; height: 34px; object-fit: contain; } .footer-social { display: flex; gap: 18px; } .footer-social .social-link { width: 22px; height: 22px; background: transparent; border-radius: 0; color: rgba(255, 255, 255, 0.55); display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s; } .footer-social .social-link svg { width: 20px; height: 20px; } .footer-social .social-link:hover { background: transparent; color: #ffffff; } /* Main columns */ .footer-main { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 1fr; gap: 40px; padding: 44px 0 48px; } .footer-col h4 { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: #ffffff; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; } .footer-col .status-dot { display: inline-block; width: 7px; height: 7px; background: #2A2A2A; border-radius: 50%; box-shadow: 0 0 6px rgba(20, 20, 20, 0.7); } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; } .footer-col li, .footer-col a { color: rgba(255, 255, 255, 0.55); font-size: 0.88rem; text-decoration: none; line-height: 1.4; transition: color 0.2s; } .footer-col a:hover { color: #ffffff; } .footer-col .footer-item-inline { display: inline-flex; align-items: center; gap: 8px; } .footer-col .footer-item-inline svg { width: 14px; height: 14px; opacity: 0.6; flex-shrink: 0; } /* "Top Searches" column uses arrow icons */ .footer-col--arrows a { display: inline-flex; align-items: center; gap: 8px; } .footer-col--arrows a::before { content: ''; width: 10px; height: 10px; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; flex-shrink: 0; margin-top: 1px; } .footer-address { margin-top: 36px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.5); line-height: 1.65; } .footer-address strong { display: block; color: #ffffff; font-weight: 700; margin-bottom: 6px; font-size: 0.88rem; } /* Second panel: newsletter + legal */ .footer-panel { background: #102a54; padding: 44px 0 24px; } .footer-newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-newsletter h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #ffffff; margin: 0 0 14px; letter-spacing: -0.01em; } .footer-newsletter-features { display: flex; gap: 28px; flex-wrap: wrap; } .footer-newsletter-features span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.87rem; color: rgba(255, 255, 255, 0.6); } .footer-newsletter-features svg { color: var(--green-primary); width: 14px; height: 14px; } .footer-newsletter-form { display: flex; gap: 8px; align-items: stretch; } .footer-newsletter-form input { flex: 1; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px; color: #ffffff; font-size: 0.9rem; font-family: inherit; } .footer-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.35); } .footer-newsletter-form input:focus { outline: none; border-color: var(--green-primary); } .footer-newsletter-form button { padding: 10px 22px; background: #ffffff; color: #000000; border: none; border-radius: 4px; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: var(--font-heading); transition: background 0.2s; } .footer-newsletter-form button:hover { background: #e5e5e5; } .footer-disclaimer { padding: 20px 0; font-size: 0.72rem; line-height: 1.6; color: rgba(255, 255, 255, 0.35); text-align: left; margin: 0; max-width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-payments { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; flex-wrap: wrap; gap: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-payment-icons { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .footer-payment-icon { height: 22px; min-width: 34px; padding: 0 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); display: inline-flex; align-items: center; justify-content: center; font-size: 0.58rem; color: rgba(255, 255, 255, 0.65); font-weight: 700; letter-spacing: 0.5px; } .footer-app-badges { display: flex; gap: 8px; } .footer-app-badge { height: 34px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.85); font-size: 0.72rem; text-decoration: none; font-family: var(--font-heading); } .footer-app-badge svg { width: 16px; height: 16px; } .footer-app-badge small { display: block; font-size: 0.58rem; opacity: 0.7; font-weight: 400; } .footer-app-badge strong { display: block; font-size: 0.82rem; font-weight: 700; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 0; flex-wrap: wrap; gap: 16px; text-align: left; } .footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.45); } .footer-legal-links a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s; } .footer-legal-links a:hover { color: #ffffff; } .footer-meta { display: flex; gap: 24px; align-items: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); } .footer-heart { color: #ef4444; font-size: 0.9rem; } .footer-region { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .footer-region strong { color: #ffffff; font-weight: 700; } @media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } } @media (max-width: 768px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-newsletter { grid-template-columns: 1fr; gap: 20px; } .footer-top, .footer-payments, .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .footer-main { grid-template-columns: 1fr; } } /* ========== RESPONSIVE ========== */ @media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .roi-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .platforms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .platform-logo { height: 200px; } .payouts-grid { grid-template-columns: repeat(2, 1fr); } .rules-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .mobile-toggle { display: flex; } .navbar { padding: 12px 16px; } .nav-inner { flex-wrap: wrap; } .nav-pages, .nav-actions { display: none; } .nav-pages.active { display: flex; flex-direction: column; align-items: stretch; position: static; transform: none; order: 3; width: 100%; gap: 2px; margin-top: 12px; padding: 10px 0 6px; border-top: 1px solid var(--gray-100); } .nav-pages a { color: #19407a; font-size: 1rem; padding: 10px 2px; } .nav-pages a.active::after, .nav-pages a:hover::after { display: none; } .nav-actions.active { display: flex; flex-direction: column; align-items: stretch; order: 4; width: 100%; gap: 10px; padding-bottom: 8px; } .nav-signin, .nav-cta { text-align: center; } .hero-stats { gap: 20px 28px; justify-content: center; } .stat-number { font-size: 1.35rem; } .hero-stat-soon .stat-number { font-size: 1.35rem; } .hero-stat-divider { height: 28px; } .soon-badge { top: -12px; right: 50%; transform: translateX(50%); font-size: 0.58rem; padding: 2px 8px; } .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; padding-top: 18px; } /* Mobile order: 100K → 50K → 25K → 10K */ .pricing-grid .pricing-card:nth-child(1) { order: 4; } /* 10K */ .pricing-grid .pricing-card:nth-child(2) { order: 3; } /* 25K */ .pricing-grid .pricing-card:nth-child(3) { order: 1; } /* 100K (popular) */ .pricing-grid .pricing-card:nth-child(4) { order: 2; } /* 50K */ .platforms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .platform-logo { height: 110px; } .features-grid { grid-template-columns: 1fr; } .faq-list { grid-template-columns: 1fr; } .roi-card { padding: 24px 20px; } .roi-controls { grid-template-columns: 1fr; gap: 24px; } .roi-stats { grid-template-columns: 1fr; } .roi-investment { flex-direction: column; gap: 16px; padding: 20px; } .roi-invest-divider { width: 100%; height: 1px; margin: 0; } .roi-stat-big { font-size: 1.8rem; } .roi-chart { height: 220px; } .rules-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .rule-card { padding: 20px 16px; } .pnl-rules-grid { grid-template-columns: 1fr; gap: 16px; } .pnl-rule-card { padding: 32px 24px; } .comparison-divider { margin: 50px 0 36px; gap: 12px; } .divider-badge { padding: 10px 18px; font-size: 0.72rem; } .eco-graph { aspect-ratio: auto; max-width: 360px; display: flex; flex-direction: column; gap: 18px; } .eco-graph-svg { display: none; } .eco-graph-node { position: static; transform: none; width: 100%; } .eco-graph-node .eco-node-card { padding: 20px 16px; } .payouts-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } .cta-box { padding: 48px 24px; } .section { padding: 64px 0; } .rule-compare-table { font-size: 0.78rem; } .rule-compare-table th { padding: 14px 10px; font-size: 0.72rem; } .rule-compare-table td { padding: 10px 8px; } } @media (max-width: 480px) { .hero-logo { max-width: 240px; } .hero-buttons { flex-direction: column; align-items: center; } .hero-buttons .btn-primary, .hero-buttons .btn-outline-light { width: auto; min-width: 220px; padding: 14px 32px; justify-content: center; text-align: center; } .hero-stats { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; } .hero-stat-divider { display: none; } .stat-number, .hero-stat-soon .stat-number { font-size: 1.15rem; } .hero-stat-soon { padding-top: 10px; } .soon-badge { top: -4px; right: 50%; transform: translateX(50%); } .platform-logo { height: 90px; } .section-title { font-size: 1.8rem; } } /* Chart vars used by main.js via getComputedStyle. Default values black; --canvas-wave-* sets the homepage binary-ocean RGB. */ :root { --slider-fill-color: #19407a; --chart-dot-dark: #1A1A1A; --chart-dot-light: #2A2A2A; --chart-stroke-rgba: rgba(0, 0, 0, 0.25); --canvas-wave-r: 25; --canvas-wave-g: 64; --canvas-wave-b: 122; } /* ========== SUB-PAGES ========== */ .page-body { background: var(--white); } /* Page hero */ .page-hero { padding: 80px 0 60px; background: linear-gradient(180deg, #f9fafb 0%, var(--white) 100%); border-bottom: 1px solid var(--gray-100); text-align: center; } .page-hero-eyebrow { display: inline-block; font-family: var(--font-eyebrow); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-primary); margin-bottom: 14px; } .page-hero-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--black); } .page-hero-subtitle { font-size: 1.1rem; color: var(--gray-600); max-width: 640px; margin: 0 auto; line-height: 1.55; } /* Generic prose block (for About/Rules pages) */ .prose { max-width: 720px; margin: 0 auto; color: var(--gray-700); font-size: 1.02rem; line-height: 1.7; } .prose h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--black); margin: 32px 0 10px; } .prose p { margin: 0 0 14px; } .prose ul { padding-left: 20px; margin: 0 0 16px; } .prose li { margin-bottom: 6px; } /* Two-column split for About */ .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; max-width: 1000px; margin: 0 auto; } .split-grid h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--black); margin: 0 0 16px; letter-spacing: -0.01em; } .split-grid p { color: var(--gray-700); line-height: 1.65; margin: 0 0 12px; } /* Stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 980px; margin: 0 auto; padding: 32px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgba(0,0,0,0.04); } .stat-strip-item { text-align: center; } .stat-strip-value { display: block; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--green-primary); letter-spacing: -0.02em; } .stat-strip-label { display: block; font-size: 0.85rem; color: var(--gray-600); margin-top: 4px; } /* FAQ category tabs */ .faq-search { position: relative; max-width: 560px; margin: 0 auto 24px; } .faq-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gray-400); pointer-events: none; } .faq-search-input { width: 100%; box-sizing: border-box; padding: 15px 46px 15px 48px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .faq-search-input::placeholder { color: var(--gray-400); } .faq-search-input:focus { outline: none; border-color: var(--green-primary); box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.06); } .faq-search-input::-webkit-search-cancel-button { display: none; } .faq-search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: var(--gray-100); color: var(--gray-600); cursor: pointer; transition: background 0.2s, color 0.2s; } .faq-search-clear svg { width: 15px; height: 15px; } .faq-search-clear:hover { background: var(--gray-200); color: var(--black); } .faq-no-results { max-width: 780px; margin: 8px auto 0; text-align: center; color: var(--gray-600); } .faq-no-results a { color: var(--green-primary); font-weight: 600; } .faq-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; } .faq-category { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-700); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .faq-category.active, .faq-category:hover { border-color: var(--green-primary); color: var(--green-primary); background: rgba(20, 20, 20, 0.06); } .faq-group { max-width: 780px; margin: 0 auto 48px; } .faq-group h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--black); margin: 0 0 16px; } .faq-entry { border-bottom: 1px solid var(--gray-100); padding: 18px 0; } .faq-entry summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-heading); font-weight: 700; color: var(--black); font-size: 1rem; } .faq-entry summary::-webkit-details-marker { display: none; } .faq-entry summary::after { content: '+'; color: var(--green-primary); font-size: 1.4rem; font-weight: 400; transition: transform 0.2s; } .faq-entry[open] summary::after { content: '–'; } .faq-entry p { color: var(--gray-700); line-height: 1.6; margin: 12px 0 0; } /* Rules page list */ .rules-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; } .rules-column { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.03); } .rules-column h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--black); margin: 0 0 4px; } .rules-column .rules-sub { color: var(--gray-600); font-size: 0.9rem; margin-bottom: 18px; } .rules-column ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .rules-column li { display: flex; gap: 10px; align-items: flex-start; color: var(--gray-700); line-height: 1.5; font-size: 0.95rem; } .rules-column .rules-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .rules-column--do .rules-icon { color: var(--green-primary); } .rules-column--dont .rules-icon { color: #ef4444; } /* Contact page */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; max-width: 1000px; margin: 0 auto; } .contact-methods { display: flex; flex-direction: column; gap: 16px; } .contact-method { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-md); padding: 22px; display: flex; gap: 16px; align-items: flex-start; transition: border-color 0.2s, transform 0.2s; text-decoration: none; color: inherit; } .contact-method:hover { border-color: var(--green-primary); transform: translateY(-2px); } .contact-method-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(20, 20, 20, 0.1); color: var(--green-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-method h4 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin: 0 0 4px; color: var(--black); } .contact-method p { font-size: 0.88rem; color: var(--gray-600); margin: 0; line-height: 1.45; } .contact-form { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.03); } .contact-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; color: var(--black); background: var(--white); margin-bottom: 16px; transition: border-color 0.2s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--green-primary); } .contact-form textarea { min-height: 120px; resize: vertical; } @media (max-width: 768px) { .page-hero { padding: 56px 0 44px; } .split-grid, .rules-do-dont, .contact-grid { grid-template-columns: 1fr; gap: 24px; } .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px; } } /* ========== FORBIDDEN PRACTICES PAGE ========== */ .fp-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .fp-item { display: grid; grid-template-columns: 88px 1fr; gap: 24px; background: var(--white); border: 1px solid rgba(36, 68, 136, 0.45); border-radius: var(--radius-lg); padding: 28px 30px; box-shadow: 0 8px 24px rgba(16, 42, 84, 0.07); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .fp-item:hover { border-color: rgba(36, 68, 136, 0.85); box-shadow: 0 16px 40px rgba(16, 42, 84, 0.14); transform: translateY(-3px); } /* Metallic gold numerals, matching the step-number treatment */ .fp-number { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(135deg, #806000 0%, #B8860B 30%, #DAA520 45%, #E3BC45 55%, #DAA520 65%, #B8860B 80%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .fp-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--black); margin: 0 0 12px; letter-spacing: -0.01em; } .fp-body p { color: var(--gray-700); line-height: 1.65; margin: 0 0 12px; font-size: 0.98rem; } .fp-aside { background: rgba(25, 64, 122, 0.055); border-left: 3px solid #19407a; padding: 12px 16px; border-radius: 4px; font-size: 0.92rem !important; color: var(--gray-700) !important; margin: 4px 0 0 !important; } .fp-aside strong { color: var(--black); } /* Closing principle: glossy navy gradient panel, like the hiw callout */ .fp-principle { max-width: 720px; margin: 0 auto; text-align: center; padding: 44px 36px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.04) 100%), linear-gradient(115deg, #0d244a 0%, #19407a 55%, #2f6bb5 100%); border: 1px solid rgba(148, 178, 220, 0.4); border-radius: var(--radius-xl); box-shadow: 0 18px 44px rgba(13, 36, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .fp-principle h2 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: #ffffff; margin: 0 0 18px; } .fp-principle p { color: rgba(255, 255, 255, 0.92); line-height: 1.65; font-size: 1.05rem; margin: 0 0 14px; } .fp-principle p strong { color: #E3BC45; } .fp-principle-footnote { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.6) !important; font-style: italic; margin-top: 18px !important; } /* Dark mode: cards go translucent-on-navy like the homepage cards */ body[data-mode="dark"] .fp-item { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-color: rgba(148, 178, 220, 0.3); } body[data-mode="dark"] .fp-item:hover { border-color: rgba(148, 178, 220, 0.6); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } body[data-mode="dark"] .fp-aside { background: rgba(255, 255, 255, 0.06); border-left-color: #7db4f0; } body[data-mode="dark"] .fp-body p { color: #e6edf6; } @media (max-width: 768px) { .fp-item { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; } .fp-number { font-size: 2rem; } .fp-title { font-size: 1.15rem; } } /* ========== SCALING PLAN PAGE ========== */ /* Light hero — flat white background with DoveHeader image, jet-black text */ .scaling-hero { background: #ffffff; color: #000000; padding: 240px 0 144px; text-align: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--gray-100); } .scaling-hero .container { width: 100%; } .scaling-hero-title { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; margin: 0 0 18px; background: linear-gradient(180deg, #0d244a 0%, #19407a 18%, #2f6bb5 40%, #7db4f0 52%, #2f6bb5 64%, #19407a 85%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .scaling-hero-subtitle { max-width: 640px; margin: 0 auto; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7; background: linear-gradient(180deg, #0d244a 0%, #19407a 30%, #2f6bb5 55%, #19407a 85%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /* Intro section */ .scaling-intro-section { background: #f4f5f7; padding: 64px 0; } .scaling-intro { max-width: 700px; margin: 0 auto 44px; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--gray-600); } /* Dark feature card */ .scaling-card { background: linear-gradient(180deg, #1a1f22 0%, #11151a 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); padding: 48px 56px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; max-width: 1040px; margin: 0 auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .scaling-card-copy { color: rgba(255, 255, 255, 0.78); } .scaling-card-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); margin: 0 0 16px; } .scaling-card-desc { font-size: 0.95rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin: 0; } .scaling-card-desc strong { color: var(--white); font-weight: 600; } /* Progress ring */ .scaling-ring { position: relative; width: 200px; height: 200px; } .scaling-ring svg { width: 100%; height: 100%; display: block; } .scaling-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .scaling-ring-eyebrow { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(60, 60, 60, 0.9); margin-bottom: 4px; } .scaling-ring-value { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 800; color: #404040; line-height: 1; } /* More about: stats variant */ .scaling-more-section { padding: 64px 0 80px; } .scaling-card--stats { grid-template-columns: auto 1fr; } .scaling-stats { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 40px 8px 8px; min-width: 200px; } .scaling-stat { display: flex; flex-direction: column; align-items: center; } .scaling-stat-icon { width: 28px; height: 28px; color: #404040; margin-bottom: 6px; } .scaling-stat-eyebrow { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 2px; } .scaling-stat-value { font-family: var(--font-stat); font-weight: 800; font-size: 2.8rem; color: #404040; line-height: 1; } .scaling-stat-unit { font-size: 1.8rem; margin-left: 2px; } .scaling-stat-label { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-top: 6px; } .scaling-stat-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); margin: 20px 0; } /* Requirements & Benefits */ .scaling-reqs-section { background: #f4f5f7; padding: 24px 0 72px; } .scaling-reqs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1040px; margin: 0 auto; } .scaling-reqs-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); margin: 0 0 18px; } .scaling-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .scaling-checklist li { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 0.9rem; color: var(--gray-700); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .scaling-check { width: 22px; height: 22px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--green-primary); color: var(--white); } .scaling-check svg { width: 14px; height: 14px; } .scaling-reqs-col--req .scaling-checklist li { border-left: 3px solid var(--green-primary); } .scaling-reqs-col--ben .scaling-checklist li { border-left: 3px solid #f97316; } .scaling-reqs-col--ben .scaling-check { background: #f97316; } /* Tier breakdown */ .scaling-breakdown-section { padding: 72px 0 96px; background: linear-gradient(180deg, var(--white) 0%, #f4f5f7 100%); } .scaling-breakdown-section .section-header { margin-bottom: 56px; } .scaling-tier { max-width: 1100px; margin: 0 auto; } .scaling-tier + .scaling-tier { margin-top: 32px; } .scaling-tier-head { text-align: center; margin-bottom: 36px; } .scaling-tier-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green-primary); padding: 5px 12px; border-radius: 999px; background: rgba(20, 20, 20, 0.1); border: 1px solid rgba(20, 20, 20, 0.25); margin-bottom: 10px; } .scaling-tier-badge--alt { color: #b45309; background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.25); } .scaling-tier-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.75rem; color: var(--black); margin: 0 0 6px; letter-spacing: -0.01em; } .scaling-tier-sub { font-size: 0.95rem; color: var(--gray-600); margin: 0; } .scaling-tier-sub strong { color: var(--green-primary); } .scaling-flow { display: flex; align-items: stretch; gap: 0; padding: 8px 4px 16px; } /* Nodes */ .scaling-node { flex: 0 0 auto; min-width: 128px; padding: 20px 18px 18px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 14px; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(14px) scale(0.9); transition: opacity 0.55s ease calc(var(--i, 0) * 90ms), transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i, 0) * 90ms); } .scaling-breakdown-section.is-visible .scaling-node { opacity: 1; transform: translateY(0) scale(1); } .scaling-node-head { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 8px; } .scaling-node-icon { width: 14px; height: 14px; } .scaling-node-value { font-family: var(--font-stat); font-size: 1.9rem; font-weight: 800; color: var(--green-primary); line-height: 1; letter-spacing: -0.01em; } .scaling-node-delta { margin-top: 8px; font-size: 0.72rem; font-weight: 600; color: var(--gray-500); } .scaling-node--goal { background: linear-gradient(180deg, #19407a 0%, #102a54 100%); border-color: transparent; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .scaling-node--goal .scaling-node-head, .scaling-node--goal .scaling-node-value, .scaling-node--goal .scaling-node-delta { color: #fff; } .scaling-node--goal .scaling-node-head { color: rgba(255, 255, 255, 0.8); } .scaling-node--goal .scaling-node-delta { color: rgba(255, 255, 255, 0.85); } .scaling-node--cap { background: linear-gradient(180deg, #0f172a 0%, #020617 100%); border-color: transparent; box-shadow: 0 12px 30px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; } .scaling-node--cap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(20, 20, 20, 0.25), transparent 60%); pointer-events: none; } .scaling-node--cap .scaling-node-head, .scaling-node--cap .scaling-node-delta { color: rgba(255, 255, 255, 0.72); } .scaling-node--cap .scaling-node-value { background: linear-gradient(135deg, #404040, #2A2A2A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Edges (arrows between nodes) */ .scaling-edge { flex: 1 1 56px; min-width: 56px; max-width: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; opacity: 0; transition: opacity 0.35s ease calc(var(--i, 0) * 90ms); } .scaling-breakdown-section.is-visible .scaling-edge { opacity: 1; } .scaling-edge-label { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-primary); background: rgba(20, 20, 20, 0.1); border: 1px solid rgba(20, 20, 20, 0.22); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; white-space: nowrap; } .scaling-edge-line { position: relative; width: 100%; height: 2px; background: repeating-linear-gradient(to right, var(--green-primary) 0 6px, transparent 6px 12px); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s ease calc(var(--i, 0) * 90ms + 120ms); } .scaling-edge-line::after { content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 10px solid var(--green-primary); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .scaling-breakdown-section.is-visible .scaling-edge-line { transform: scaleX(1); } /* Tier transition */ .scaling-transition { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 40px auto 40px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease calc(var(--i, 0) * 90ms), transform 0.5s ease calc(var(--i, 0) * 90ms); } .scaling-breakdown-section.is-visible .scaling-transition { opacity: 1; transform: translateY(0); } .scaling-transition-rule { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gray-200), transparent); } .scaling-transition-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gray-600); padding: 10px 18px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); } .scaling-arrow-down { width: 18px; height: 18px; color: var(--green-primary); animation: scalingPulseDown 1.8s ease-in-out infinite; } @keyframes scalingPulseDown { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(3px); opacity: 1; } } .scaling-cta { text-align: center; margin-top: 48px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* Responsive */ @media (max-width: 860px) { .scaling-card { grid-template-columns: 1fr; padding: 36px 28px; text-align: center; } .scaling-card--stats { grid-template-columns: 1fr; } .scaling-stats { padding: 0 0 24px; border-right: none; } .scaling-ring { margin: 0 auto; } .scaling-reqs-grid { grid-template-columns: 1fr; gap: 32px; } /* Stack the flow vertically on mobile */ .scaling-flow { flex-direction: column; gap: 0; } .scaling-node { width: 100%; max-width: 320px; margin: 0 auto; } .scaling-edge { flex-direction: column; width: 100%; max-width: none; padding: 10px 0; } .scaling-edge-label { margin-bottom: 6px; } .scaling-edge-line { width: 2px; height: 28px; background: repeating-linear-gradient(to bottom, var(--green-primary) 0 6px, transparent 6px 12px); transform-origin: top center; transform: scaleY(0); transition: transform 0.5s ease calc(var(--i, 0) * 90ms + 120ms); } .scaling-breakdown-section.is-visible .scaling-edge-line { transform: scaleY(1); } .scaling-edge-line::after { right: 50%; top: auto; bottom: -1px; transform: translateX(50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--green-primary); border-bottom: none; } } /* ========== CHALLENGE BUILDER ========== */ /* Embedded Challenge Builder (challenge-builder.html) — sized and revealed by js/cb-embed.js. Hidden until its content has finished unpacking so the raw markup never flashes; the page shows through the transparent frame until then. */ .cb-embed { display: block; width: 100%; max-width: 1320px; margin: 0 auto; height: 720px; border: 0; background: transparent; opacity: 0; transition: opacity 0.35s ease; } .cb-embed.cb-ready { opacity: 1; } /* Hero USP marquee: fixed-height strip under the hero content. The hero is a centered flex column, so its containers need an explicit width to stretch (otherwise the marquee frame collapses to content width). */ .hero > .container { width: 100%; } .cb-embed.hero-marquee { height: 96px; margin-top: 26px; } /* Bento grid — light/dark variants; only the theme-matching one shows. */ .section.bento { padding: 20px 0 60px; } .cb-embed.bento-grid { height: 420px; } .bento-grid--dark { display: none; } body[data-mode="dark"] .bento-grid--light { display: none; } body[data-mode="dark"] .bento-grid--dark { display: block; } /* ========== EMERALD TERTIARY HINTS ========== Small accents that keep their emerald tint as a tertiary highlight against the white-and-navy base palette. */ .scaling-node-value, .scaling-arrow-down, .cb-metric-label::before { /* override the navy primary applied by var(--green-primary) */ } .scaling-node-value { color: var(--emerald); } .scaling-arrow-down { color: var(--emerald); } .scaling-edge-label { color: var(--emerald); background: rgba(218, 165, 32, 0.1); border-color: rgba(218, 165, 32, 0.22); } .scaling-tier-badge { color: var(--emerald); background: rgba(218, 165, 32, 0.1); border-color: rgba(218, 165, 32, 0.25); } .check-icon { color: var(--emerald); } /* ========== LOGO SWITCHER (placeholder for future light/dark toggle) ========== */ .logo-switcher { position: fixed; bottom: 20px; left: 20px; display: flex; gap: 6px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--gray-100); border-radius: 999px; padding: 6px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12); z-index: 200; } .logo-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; height: 30px; padding: 0 12px; background: var(--white); border: 2px solid transparent; border-radius: 999px; cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 0.78rem; color: var(--black); letter-spacing: -0.01em; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .logo-switch:hover { transform: scale(1.04); } .logo-switch.active { background: #19407a; color: var(--white); border-color: #19407a; } .logo-switch span { display: inline-flex; align-items: baseline; } .logo-switch small { font-size: 0.7em; opacity: 0.7; margin-left: 1px; } .ls-group { display: inline-flex; gap: 4px; } .ls-mode { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; background: var(--white); border: 2px solid transparent; border-radius: 999px; cursor: pointer; color: var(--gray-600); padding: 0; transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .ls-mode svg { width: 16px; height: 16px; } .ls-mode:hover { transform: scale(1.04); color: var(--black); } .ls-mode.active { background: #19407a; color: var(--white); border-color: #19407a; } /* ========== DARK MODE ========== Deep navy-blue base (#0b1f35) with a blue-tinted surface ramp so cards, borders, and text keep proper contrast against the blue page. */ body[data-mode="dark"] { --white: #0b1f35; --off-white: #102741; --gray-50: #142e4c; --gray-100: #1d3a5c; --gray-200: #2b4d73; --gray-300: #4a6b91; --gray-400: #7e96b5; --gray-500: #a6b8ce; --gray-600: #c9d5e5; --gray-700: #e6edf6; --black: #FFFFFF; --card-bg: #102741; --card-border: rgba(255, 255, 255, 0.1); /* Canvas currency ocean renders white on the dark blue page */ --canvas-wave-r: 255; --canvas-wave-g: 255; --canvas-wave-b: 255; } /* Body / surfaces */ body[data-mode="dark"] body, body[data-mode="dark"] { background: #0b1f35; color: #e6edf6; } body[data-mode="dark"].mode-grey, body.mode-grey { background: #2A2A2A; --white: #2A2A2A; --off-white: #2E2E2E; --gray-50: #353535; --gray-100: #404040; --card-bg: #2E2E2E; } body.mode-grey .footer { background: #1F1F1F; } body.mode-grey .section--alt { background: #2F2F2F; } body.mode-grey .rc-feature-head { background: #353535; } body.mode-grey .rc-comp-head { background: #2E2E2E; } body.mode-grey .page-hero { background: linear-gradient(180deg, #2F2F2F 0%, #2A2A2A 100%); border-bottom-color: #404040; } /* Hero canvas + hero stack — invert the background-image-derived bits */ body[data-mode="dark"] .hero, body[data-mode="dark"] .hero-canvas { background: #0b1f35; } /* Hero tagline: white with a very faint silvery sheen */ body[data-mode="dark"] .hero-tagline { background: linear-gradient(135deg, #ffffff 0%, #f4f7fa 30%, #ccd6e2 50%, #f4f7fa 70%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Globe: the navy ocean flips to a blue-tinted silvery ramp echoing the hero tagline (land stays gold). Region glow/rings keep the white pulse. */ body[data-mode="dark"] #oceanG stop:nth-of-type(1) { stop-color: #ffffff; } body[data-mode="dark"] #oceanG stop:nth-of-type(2) { stop-color: #f4f7fa; } body[data-mode="dark"] #oceanG stop:nth-of-type(3) { stop-color: #ccd6e2; } body[data-mode="dark"] #gsvg circle[stroke="#0e2140"] { stroke: #b9c7d9; } body[data-mode="dark"] .text-green-sheen { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body[data-mode="dark"] .scaling-hero-title { background: linear-gradient(180deg, #806000 0%, #B8860B 18%, #DAA520 40%, #FFD700 52%, #DAA520 64%, #B8860B 85%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body[data-mode="dark"] .scaling-hero-subtitle { background: linear-gradient(180deg, #806000 0%, #B8860B 30%, #DAA520 55%, #B8860B 85%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } body[data-mode="dark"] .hero-subtitle { background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; } body[data-mode="dark"] .stat-number { background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; } /* The floating white nav pill stays white in dark mode (the logo art and buttons are designed for it), so its links keep their navy light-mode colour for contrast; the outer bar strip stays transparent. */ body[data-mode="dark"] .navbar.scrolled, body[data-mode="dark"] .navbar--solid { background: transparent; } body[data-mode="dark"] .nav-inner { background: #ffffff; border-color: rgba(11, 31, 53, 0.18); } body[data-mode="dark"] .nav-pages a { color: #19407a; } body[data-mode="dark"] .nav-pages a:hover, body[data-mode="dark"] .nav-pages a.active { color: #0b1f35; } /* Comparison rule table — header strip, rows, brand cell */ body[data-mode="dark"] .rule-compare-table th { border-bottom-color: #1d3a5c; } body[data-mode="dark"] .rc-feature-head { background: #142e4c; color: #e6edf6; } body[data-mode="dark"] .rc-comp-head { background: #102741; color: #a6b8ce; } body[data-mode="dark"] .rc-brand-head { background: #FFFFFF; color: #0b1f35; } body[data-mode="dark"] .rule-compare-table td { border-color: #1d3a5c; } body[data-mode="dark"] .rc-feature { color: #EAEAEA; } body[data-mode="dark"] .rc-brand-check { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; } body[data-mode="dark"] .rule-compare-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); } /* Logo switcher itself */ body[data-mode="dark"] .logo-switcher { background: rgba(13, 36, 61, 0.92); border-color: #1d3a5c; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); } body[data-mode="dark"] .ls-mode, body[data-mode="dark"] .logo-switch { background: #142e4c; color: #a6b8ce; } body[data-mode="dark"] .ls-mode.active, body[data-mode="dark"] .logo-switch.active { background: #FFFFFF; color: #0b1f35; border-color: #FFFFFF; } /* ---------- Dark mode: containers, icons, and text accents ---------- */ /* Section cards — subtle dark wash, no visible outline */ body[data-mode="dark"] .feature-card, body[data-mode="dark"] .pnl-rule-card, body[data-mode="dark"] .payout-card, body[data-mode="dark"] .platform-item, body[data-mode="dark"] .pricing-card, body[data-mode="dark"] .roi-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-color: transparent; } /* The .comparison-block is just a wrapper around a card grid — keep it flat-black so the section doesn't read as a giant grey rectangle. */ body[data-mode="dark"] .comparison-block { background: transparent; border-color: transparent; } /* Hidden-rules cards: faint white outline by default; red still takes over on hover from the base .rule-card:hover rule. */ body[data-mode="dark"] .rule-card { background: transparent; border-color: rgba(255, 255, 255, 0.18); } body[data-mode="dark"] .rule-card:hover { border-color: rgba(220, 38, 38, 0.55); box-shadow: 0 12px 36px rgba(220, 38, 38, 0.18), 0 2px 8px rgba(0, 0, 0, 0.45); } body[data-mode="dark"] .feature-card:hover, body[data-mode="dark"] .pnl-rule-card:hover, body[data-mode="dark"] .payout-card:hover, body[data-mode="dark"] .pricing-card:hover { border-color: transparent; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } /* The big faint "01 / 02 / 03" number on each PNL Way card */ body[data-mode="dark"] .pnl-rule-number { color: rgba(255, 255, 255, 0.1); } /* Icon containers (.pnl-rule-icon, .feature-icon, .eco-node-icon, .hero-badge) were all dark glossy plates. Invert them to a silver / off-white plate with dark glyphs inside so they read against the now-dark page. */ body[data-mode="dark"] .pnl-rule-icon, body[data-mode="dark"] .feature-icon, body[data-mode="dark"] .eco-node-icon { background: linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.08) 100%), linear-gradient(180deg, #F5F5F5 0%, #E0E0E0 35%, #BFBFBF 70%, #A0A0A0 100%); border-color: rgba(255, 255, 255, 0.55); color: #111111; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 2px 1px rgba(255, 255, 255, 0.85), inset 0 -3px 6px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.6); } body[data-mode="dark"] .pnl-rule-icon svg, body[data-mode="dark"] .feature-icon svg, body[data-mode="dark"] .eco-node-icon svg { stroke: #0b1f35; color: #0b1f35; filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.4)); } body[data-mode="dark"] .pnl-rule-icon::after, body[data-mode="dark"] .feature-icon::after, body[data-mode="dark"] .eco-node-icon::after { background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255, 255, 255, 0.9), transparent 70%); } /* The navy recolour of black thematic elements is light-mode only. These shared elements have no other dark-mode treatment, so restore their original black gradients here to leave dark mode unchanged. */ body[data-mode="dark"] .btn-broker { background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #24466e 0%, #152f4d 35%, #152f4d 70%, #061426 100%); } body[data-mode="dark"] .hero-buttons .btn-outline-light { background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 35%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.05) 100%), linear-gradient(180deg, #24466e 0%, #152f4d 38%, #0b1f35 72%, #061426 100%); } body[data-mode="dark"] .scaling-node--goal { background: linear-gradient(180deg, #152f4d 0%, #0b1f35 100%); } body[data-mode="dark"] .cb-metric-label::before { background: radial-gradient(circle, #152f4d 0 35%, transparent 38%); border-color: rgba(20, 20, 20, 0.45); } /* "The PNL Way" badge: silver chip with white text */ body[data-mode="dark"] .comparison-badge-red { background: linear-gradient(180deg, #441111 0%, #2A0808 100%); border-color: rgba(255, 100, 100, 0.35); } /* Section titles, descriptions, footers — push to white/light grey */ body[data-mode="dark"] .comparison-title, body[data-mode="dark"] .section-title, body[data-mode="dark"] .pnl-rule-title, body[data-mode="dark"] .feature-title, body[data-mode="dark"] .payout-name, body[data-mode="dark"] .roi-chart-title, body[data-mode="dark"] .platforms-label { color: #FFFFFF; } body[data-mode="dark"] .comparison-desc, body[data-mode="dark"] .comparison-footer, body[data-mode="dark"] .section-subtitle, body[data-mode="dark"] .pnl-rule-desc, body[data-mode="dark"] .feature-desc, body[data-mode="dark"] .payout-account, body[data-mode="dark"] .payout-date, body[data-mode="dark"] .roi-chart-hint, body[data-mode="dark"] .roi-label, body[data-mode="dark"] .roi-stat-label { color: #C0C0C0; } body[data-mode="dark"] .stat-label { color: rgba(255, 255, 255, 0.7); } /* Generic body copy + check-icon helper used in feature cards / pricing lists */ body[data-mode="dark"] .check-icon { color: #C0C0C0; } /* FAQ accordion */ body[data-mode="dark"] .faq-item { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); border: 1.5px solid rgba(255, 255, 255, 0.18); } body[data-mode="dark"] .faq-question { color: #FFFFFF; } body[data-mode="dark"] .faq-answer { color: #C0C0C0; } /* FAQ search (dark) */ body[data-mode="dark"] .faq-search-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); color: #FFFFFF; } body[data-mode="dark"] .faq-search-input::placeholder { color: #7d8ca0; } body[data-mode="dark"] .faq-search-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } body[data-mode="dark"] .faq-search-icon { color: #7d8ca0; } body[data-mode="dark"] .faq-search-clear { background: rgba(255, 255, 255, 0.1); color: #c9d5e5; } body[data-mode="dark"] .faq-search-clear:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; } body[data-mode="dark"] .faq-no-results { color: #a6b8ce; } /* ROI chart card */ body[data-mode="dark"] .roi-chart-wrap { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.18); } body[data-mode="dark"] .roi-chart text { fill: rgba(255, 255, 255, 0.55); } body[data-mode="dark"] .roi-grid line { stroke: rgba(255, 255, 255, 0.08); } /* Footer surface */ body[data-mode="dark"] .footer { background: #081729; } body[data-mode="dark"] .footer-panel { background: #102741; } body[data-mode="dark"] .footer-col h4, body[data-mode="dark"] .footer-col a, body[data-mode="dark"] .footer-bottom { color: #c9d5e5; } /* Trader's Journey cards — white outline + gold number badges */ body[data-mode="dark"] .journey-card { background: #102741; border-color: rgba(255, 255, 255, 0.08); } body[data-mode="dark"] .journey-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } body[data-mode="dark"] .jc-num { color: #6b7690; } body[data-mode="dark"] .jc-cat { color: #808a9e; } body[data-mode="dark"] .jc-title { color: #FFFFFF; } body[data-mode="dark"] .jc-desc { color: #B0B0B0; } body[data-mode="dark"] .jc-pill { background: #142e4c; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; color: #e6edf6; } body[data-mode="dark"] .jc-quote { border-top-color: rgba(255, 255, 255, 0.1); color: #A8B0C0; } body[data-mode="dark"] .jc-author { color: #FFFFFF; } body[data-mode="dark"] .jc-author span { color: #808a9e; } body[data-mode="dark"] .jc-bar-cap { color: #9fb0d0; } /* Ecosystem graph (dark) — gold arrows + dots, faint grey cards, white text */ body[data-mode="dark"] .eco-graph-line { stroke: #DAA520; } body[data-mode="dark"] .eco-pulse { fill: #FFD700; filter: drop-shadow(0 0 6px rgba(218, 165, 32, 0.75)); } body[data-mode="dark"] #ecoArrowEnd path { fill: rgba(218, 165, 32, 0.7); } body[data-mode="dark"] .eco-graph-or circle { stroke: #DAA520; fill: #0b1f35; } body[data-mode="dark"] .eco-graph-or text { fill: #DAA520; } body[data-mode="dark"] .eco-node-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } body[data-mode="dark"] .eco-graph-node--academy .eco-node-card { background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(255, 215, 0, 0.02)); border-color: rgba(255, 215, 0, 0.3); } body[data-mode="dark"] .eco-node-title { color: #FFFFFF; } body[data-mode="dark"] .eco-node-desc { color: rgba(255, 255, 255, 0.6); } /* Section eyebrows / tags: white in dark mode */ body[data-mode="dark"] .section-tag, body[data-mode="dark"] .section-tag-lg, body[data-mode="dark"] .page-hero-eyebrow { color: #FFFFFF; } /* Platform tiles (dark) — let the body BG show through, no wash */ body[data-mode="dark"] .platform-item { background: transparent; } body[data-mode="dark"] .platform-item:hover { background: transparent; } /* Dark mode: deepen the gold so it reads less yellow / more bronze */ body[data-mode="dark"] .hero-badge, body[data-mode="dark"] .divider-badge, body[data-mode="dark"] .roi-acc-btn.active, body[data-mode="dark"] .roi-freq-btn.active, body[data-mode="dark"] .cb-pill.active, body[data-mode="dark"] .cb-cta, body[data-mode="dark"] .hero-buttons .btn-primary { background: linear-gradient(135deg, rgba(255, 240, 200, 0.4) 0%, rgba(255, 240, 200, 0.04) 35%, rgba(255, 240, 200, 0) 60%, rgba(255, 240, 200, 0.12) 100%), linear-gradient(180deg, #C49A2D 0%, #A77E14 32%, #7C570D 68%, #4A2F06 100%); border-color: rgba(167, 126, 20, 0.7); box-shadow: 0 8px 20px rgba(74, 47, 6, 0.55), 0 2px 6px rgba(74, 47, 6, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.45), inset 0 -2px 4px rgba(30, 18, 0, 0.5), inset 0 0 0 1px rgba(196, 154, 45, 0.25); } /* Slider fill colour follows the deeper bronze gold via the CSS var */ body[data-mode="dark"] { --slider-fill-color: #A77E14; } body[data-mode="dark"] .roi-slider::-webkit-slider-thumb, body[data-mode="dark"] .roi-slider::-moz-range-thumb { border-color: #A77E14; box-shadow: 0 2px 8px rgba(74, 47, 6, 0.5); } /* ===== Synthetic-bold flags for Varela Round Bold (or any font with .bold === true). Each data-font-*-bold attribute force-bolds the primary content selectors for that section. ===== */ /* Display: hero title stack */ /* Headings: every section-title flavour + card titles */ body[data-font-heading-bold] .section-title, body[data-font-heading-bold] .comparison-title, body[data-font-heading-bold] .pnl-rule-title, body[data-font-heading-bold] .feature-title, body[data-font-heading-bold] .journey-title, body[data-font-heading-bold] .payout-name, body[data-font-heading-bold] .roi-chart-title, body[data-font-heading-bold] .scaling-tier-title, body[data-font-heading-bold] .scaling-hero-title, body[data-font-heading-bold] .scaling-card-title, body[data-font-heading-bold] .cb-name, body[data-font-heading-bold] .page-hero-title, body[data-font-heading-bold] .faq-question, body[data-font-heading-bold] .platforms-label, body[data-font-heading-bold] h2, body[data-font-heading-bold] h3, body[data-font-heading-bold] h4 { font-weight: 900; } /* Eyebrows */ body[data-font-eyebrow-bold] .section-tag, body[data-font-eyebrow-bold] .section-tag-lg, body[data-font-eyebrow-bold] .page-hero-eyebrow { font-weight: 900; } /* Stats / numbers */ body[data-font-stat-bold] .stat-number, body[data-font-stat-bold] .price-amount, body[data-font-stat-bold] .roi-stat-value, body[data-font-stat-bold] .roi-stat-big, body[data-font-stat-bold] .roi-invest-value, body[data-font-stat-bold] .payout-amount, body[data-font-stat-bold] .cb-price-currency, body[data-font-stat-bold] .cb-price-amount, body[data-font-stat-bold] .scaling-node-value, body[data-font-stat-bold] .scaling-stat-value { font-weight: 900; } /* Body copy */ body[data-font-body-bold] p, body[data-font-body-bold] li, body[data-font-body-bold] .feature-desc, body[data-font-body-bold] .pnl-rule-desc, body[data-font-body-bold] .comparison-desc, body[data-font-body-bold] .comparison-footer, body[data-font-body-bold] .section-subtitle { font-weight: 700; } /* ===== "Trade Our Accounts" — exact gold-sheen treatment from .hero-badge, scoped to the hero CTA so other .btn-primary uses aren't affected. ===== */ .hero-buttons .btn-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0.05) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.18) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); border: 1px solid rgba(184, 134, 11, 0.7); color: #FFFFFF; text-shadow: 0 1px 2px rgba(60, 40, 0, 0.35); box-shadow: 0 10px 22px rgba(122, 90, 14, 0.42), 0 2px 6px rgba(122, 90, 14, 0.28), inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 4px rgba(60, 40, 0, 0.35), inset 0 0 0 1px rgba(255, 215, 0, 0.22); } .hero-buttons .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 60% at 30% 10%, rgba(255, 248, 220, 0.55), transparent 70%); pointer-events: none; } .hero-buttons .btn-primary > * { position: relative; z-index: 1; } .hero-buttons .btn-primary:hover { background: linear-gradient(135deg, rgba(255, 248, 220, 0.7) 0%, rgba(255, 248, 220, 0.08) 35%, rgba(255, 248, 220, 0) 60%, rgba(255, 248, 220, 0.22) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 32%, #B8860B 68%, #7A5A0E 100%); border-color: rgba(184, 134, 11, 0.85); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(122, 90, 14, 0.55), 0 3px 8px rgba(122, 90, 14, 0.35), inset 0 1px 0 rgba(255, 245, 200, 0.75), inset 0 -2px 4px rgba(60, 40, 0, 0.4), inset 0 0 0 1px rgba(255, 215, 0, 0.28); } /* Gold-sheen text inside the "Trade Your Money" pill — uses the same 135deg gradient that powers .text-green-sheen and the gold-button backgrounds. Sits above the ::after radial sheen via the existing `.hero-buttons .btn-primary > *` / `.btn-outline-light > *` rules. */ .btn-text-gold { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; display: inline-block; } /* ===== Sub-pages in dark mode (Rules, etc.) ===== */ body[data-mode="dark"].page-body { background: #0b1f35; color: #e6edf6; } body[data-mode="dark"].page-body.mode-grey, body.page-body.mode-grey { background: #2A2A2A; } /* Page hero (the lighter introductory band at the top of every sub-page) */ body[data-mode="dark"] .page-hero { background: linear-gradient(180deg, #10273f 0%, #0b1f35 100%); border-bottom-color: #1d3a5c; } body[data-mode="dark"] .page-hero-title { color: #FFFFFF; } body[data-mode="dark"] .page-hero-subtitle { color: #a6b8ce; } body[data-mode="dark"] .page-hero-subtitle a { color: #FFD700; } /* Generic prose copy block (about / rules deep-dive / etc.) */ body[data-mode="dark"] .prose { color: #C0C0C0; } body[data-mode="dark"] .prose h3, body[data-mode="dark"] .prose strong { color: #FFFFFF; } /* Section variant for the "Deep Dive" strip that used to be #f9fafb */ .section--alt { background: var(--gray-50); } body[data-mode="dark"] .section--alt { background: #10273f; } /* What we DO / DON'T care about columns */ body[data-mode="dark"] .rules-column { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); border-color: transparent; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } body[data-mode="dark"] .rules-column h3 { color: #FFFFFF; } body[data-mode="dark"] .rules-column .rules-sub { color: #C0C0C0; } body[data-mode="dark"] .rules-column li { color: #DADADA; } body[data-mode="dark"] .rules-column li strong { color: #FFFFFF; } /* "Do" tick icons pick up the gold accent in dark mode; the red ✕ stays */ body[data-mode="dark"] .rules-column--do .rules-icon { color: #FFD700; } /* ================================================================== HOW IT WORKS PAGE ================================================================== */ .hiw-hero { padding: 120px 0 40px; text-align: center; /* Transparent so the fixed currency ocean shows through, like the homepage hero. */ background: transparent; } /* Hero content fades up on load, in step with the homepage hero. */ .hiw-hero .container { animation: hiwHeroIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes hiwHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hiw-hero-title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; line-height: 1.08; margin: 14px 0 18px; } .hiw-hero-subtitle { max-width: 620px; margin: 0 auto 40px; font-size: 1.05rem; line-height: 1.65; color: var(--gray-400); } .hiw-toggle-wrap { display: inline-flex; align-items: center; gap: 16px; position: relative; } .hiw-toggle-hint { font-family: 'Poppins', cursive, sans-serif; font-style: italic; font-size: 0.95rem; color: var(--gray-400); } .hiw-toggle { display: inline-flex; background: #ffffff; border: 1px solid rgba(25, 64, 122, 0.22); border-radius: 999px; padding: 5px; gap: 4px; box-shadow: 0 6px 18px rgba(16, 42, 84, 0.10); } .hiw-toggle-btn { border: none; background: transparent; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: #19407a; padding: 11px 24px; border-radius: 999px; transition: var(--transition); white-space: nowrap; } .hiw-toggle-btn.active { background: linear-gradient(135deg, rgba(220, 235, 255, 0.5) 0%, rgba(220, 235, 255, 0.05) 35%, rgba(220, 235, 255, 0) 60%, rgba(220, 235, 255, 0.16) 100%), linear-gradient(180deg, #4e80c8 0%, #2c5ea0 32%, #19407a 68%, #0c2247 100%); color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 20, 50, 0.35); box-shadow: 0 6px 16px rgba(13, 34, 71, 0.4), inset 0 1px 0 rgba(220, 235, 255, 0.6), inset 0 -2px 4px rgba(0, 20, 50, 0.35); } body[data-mode="dark"] .hiw-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 178, 220, 0.35); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); } body[data-mode="dark"] .hiw-toggle-btn { color: #c9d5e5; } body[data-mode="dark"] .hiw-toggle-btn.active { color: #FFFFFF; } /* ---- Step blocks ---- */ .hiw-step { padding: 72px 0; } .hiw-step + .hiw-step { padding-top: 0; } .hiw-step-head { text-align: center; margin-bottom: 40px; } /* Step number: metallic sheen numeral over a soft halo, with a glossy check medallion ringed by the page colour so it reads punched-in. */ .hiw-step-num { position: relative; display: inline-block; font-family: var(--font-heading); font-size: 4.2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; background: linear-gradient(135deg, #0d244a 0%, #19407a 30%, #2f6bb5 48%, #7db4f0 58%, #2f6bb5 68%, #19407a 85%, #0d244a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hiw-step-num::before { content: ''; position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(47, 107, 181, 0.14) 0%, rgba(47, 107, 181, 0) 70%); pointer-events: none; } .hiw-step-badge { position: absolute; right: -22px; bottom: 6px; width: 28px; height: 28px; background: linear-gradient(135deg, rgba(220, 235, 255, 0.45) 0%, rgba(220, 235, 255, 0) 45%, rgba(220, 235, 255, 0.12) 100%), linear-gradient(180deg, #4e80c8 0%, #2c5ea0 40%, #19407a 75%, #0c2247 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--white), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 3px rgba(0, 20, 50, 0.35), 0 5px 12px rgba(16, 42, 84, 0.35); } .hiw-step-badge svg { width: 14px; height: 14px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0, 20, 50, 0.4)); } body[data-mode="dark"] .hiw-step-num { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body[data-mode="dark"] .hiw-step-num::before { background: radial-gradient(circle, rgba(218, 165, 32, 0.16) 0%, rgba(218, 165, 32, 0) 70%); } body[data-mode="dark"] .hiw-step-badge { background: linear-gradient(135deg, rgba(255, 248, 220, 0.55) 0%, rgba(255, 248, 220, 0) 45%, rgba(255, 248, 220, 0.16) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 40%, #B8860B 75%, #7A5A0E 100%); box-shadow: 0 0 0 3px #0b1f35, inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 3px rgba(60, 40, 0, 0.4), 0 5px 12px rgba(0, 0, 0, 0.45); } body[data-mode="dark"] .hiw-step-badge svg { color: #14294a; filter: drop-shadow(0 1px 1px rgba(255, 245, 200, 0.4)); } .hiw-step-title { font-family: var(--font-heading); font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; } /* ---- Callout banner ---- */ .hiw-callout { background: linear-gradient(115deg, #0d244a 0%, #19407a 55%, #2f6bb5 100%); border-radius: var(--radius-xl); padding: 34px 40px; max-width: 900px; margin: 0 auto 44px; box-shadow: 0 18px 44px rgba(13, 36, 74, 0.28); } .hiw-callout p { color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; line-height: 1.6; margin: 0; } .hiw-callout strong { color: #fff; } /* ---- Rows ---- */ .hiw-rows { max-width: 860px; margin: 0 auto; display: grid; gap: 36px; } .hiw-row { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: center; } .hiw-row-body h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; margin-bottom: 8px; } .hiw-row-body p { font-size: 1rem; line-height: 1.6; color: var(--gray-400); margin-bottom: 16px; } .hiw-gold { font-weight: 700; background: linear-gradient(135deg, #B8860B 0%, #D0A02A 50%, #B8860B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #B8860B; } /* ---- Buttons ---- */ .hiw-btn { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; padding: 12px 26px; border-radius: var(--radius-md); transition: var(--transition); } .hiw-btn--primary { background: #19407a; color: #fff; } .hiw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 42, 84, 0.4), 0 3px 8px rgba(10, 28, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 5px rgba(0, 0, 0, 0.30); } /* Dark mode primary: same glossy navy recipe, lifted a step lighter with a light-blue edge so it pops on the navy page. */ body[data-mode="dark"] .hiw-btn--primary { color: #ffffff; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(148, 178, 220, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #3a63b0 0%, #264a80 45%, #14294a 100%); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 5px rgba(0, 0, 0, 0.30); } .hiw-btn--ghost { background: #ffffff; color: #19407a; border: 1.5px solid rgba(25, 64, 122, 0.35); box-shadow: 0 4px 12px rgba(16, 42, 84, 0.08); } .hiw-btn--ghost:hover { border-color: #19407a; background: rgba(25, 64, 122, 0.06); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 42, 84, 0.14); } body[data-mode="dark"] .hiw-btn--ghost { background: rgba(255, 255, 255, 0.06); } body[data-mode="dark"] .hiw-btn--ghost:hover { background: rgba(148, 178, 220, 0.14); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } /* ---- Bullets ---- */ .hiw-bullets { list-style: none; display: grid; gap: 12px; } .hiw-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.98rem; line-height: 1.5; color: var(--gray-600); } .hiw-bullets svg { width: 20px; height: 20px; flex-shrink: 0; color: #19407a; margin-top: 1px; } .hiw-bullets a { color: #19407a; font-weight: 600; text-decoration: underline; } /* ---- Mock visuals ---- */ .hiw-visual { display: flex; justify-content: center; } /* Mock tiles restyled after the homepage PNL Way principle cards: white cards, navy borders, navy charts with soft gradient fills. */ .hiw-mock { width: 100%; max-width: 240px; border-radius: 20px; overflow: hidden; background: #ffffff; border: 1px solid rgba(36, 68, 136, 0.66); box-shadow: 0 10px 30px rgba(15, 30, 70, 0.12); } .hiw-mock--sizes { padding: 14px; display: grid; gap: 8px; } .hiw-mock-head { display: flex; align-items: center; gap: 7px; padding: 2px 4px 6px; font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #244488; } .hiw-mock-head-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #f0d47a, #c9a227); box-shadow: 0 0 6px rgba(201, 162, 39, 0.6); } .hiw-mock-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f7f9fc; border: 1px solid rgba(36, 68, 136, 0.16); border-radius: 9px; padding: 9px 12px; } .hiw-mock-row span { color: #0f1e3d; font-weight: 700; font-size: 0.9rem; } .hiw-mock-row small { color: #8593ad; font-size: 0.68rem; margin-left: auto; } .hiw-mock-row.active { background: linear-gradient(135deg, rgba(220, 235, 255, 0.35) 0%, rgba(220, 235, 255, 0) 45%, rgba(220, 235, 255, 0.10) 100%), linear-gradient(180deg, #4e80c8 0%, #2c5ea0 45%, #19407a 100%); border-color: rgba(25, 64, 122, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(15, 30, 70, 0.35); } .hiw-mock-row.active span { color: #ffffff; } .hiw-mock-row.active small { color: rgba(255, 255, 255, 0.75); } .hiw-row-check { flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%; background: #ffffff; color: #19407a; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 20, 50, 0.35); } .hiw-row-check svg { width: 10px; height: 10px; } .hiw-mock--chart { background: #ffffff; position: relative; aspect-ratio: 200 / 130; padding: 14px; } .hiw-mock--chart svg { width: 100%; height: 100%; fill: none; stroke: #244488; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .hiw-mock--chart svg polyline { filter: drop-shadow(0 2px 4px rgba(36, 68, 136, 0.35)); } .hiw-mock-tag { position: absolute; bottom: 12px; padding: 3px 10px; border-radius: 6px; font-size: 0.66rem; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(0, 0, 0, 0.18); } .hiw-mock-tag--buy { left: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 100%), linear-gradient(180deg, #2ec27e 0%, #1f9d63 55%, #157248 100%); } .hiw-mock-tag--sell { right: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 100%), linear-gradient(180deg, #e0605b 0%, #d0433f 55%, #a02b28 100%); } .hiw-mock-tag--gain { right: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.08) 100%), linear-gradient(180deg, #2ec27e 0%, #1f9d63 55%, #157248 100%); } /* "Target" chip pinned to the gold dashed objective line */ .hiw-mock-chip { position: absolute; top: 8px; right: 12px; font-family: var(--font-heading); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: linear-gradient(135deg, #b58a1f 0%, #dcb43e 45%, #a8861d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hiw-mock--passed { background: #ffffff; aspect-ratio: 220 / 130; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; } .hiw-passed-info { display: flex; flex-direction: column; align-items: flex-start; } .hiw-passed-seal { width: 58px; height: 76px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(122, 90, 14, 0.35)); } .hiw-mock-badge { align-self: flex-start; background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.06) 100%), linear-gradient(180deg, #2ec27e 0%, #1f9d63 55%, #157248 100%); color: #ffffff; text-shadow: 0 1px 1px rgba(0, 40, 20, 0.4); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(31, 157, 99, 0.4); } .hiw-mock-passed-title { color: #0f1e3d; font-weight: 700; font-size: 0.98rem; } .hiw-mock-passed-sub { color: #8593ad; font-size: 0.72rem; margin-top: 3px; } .hiw-mock--reward { background: #ffffff; aspect-ratio: 220 / 130; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; } .hiw-reward-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hiw-reward-status { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #1f9d63; } .hiw-reward-status svg { width: 11px; height: 11px; } .hiw-reward-bars { width: 100%; height: 30px; display: block; filter: drop-shadow(0 2px 4px rgba(122, 90, 14, 0.25)); } .hiw-mock-reward-label { color: #244488; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .hiw-mock-reward-amount { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; margin-top: 4px; background: linear-gradient(135deg, #f7de7a 0%, #daa520 40%, #f0d267 55%, #daa520 75%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- CTA banner ---- */ .hiw-cta { max-width: 860px; margin: 48px auto 0; background: var(--white); border: 1px solid rgba(11, 31, 53, 0.4); border-radius: var(--radius-xl); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: 0 8px 28px rgba(16, 42, 84, 0.08); } .hiw-cta-text { display: flex; align-items: center; gap: 16px; } .hiw-cta-icon { width: 44px; height: 44px; flex-shrink: 0; background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #2c5ea0 0%, #19407a 55%, #102a54 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 14px rgba(16, 42, 84, 0.3); } .hiw-cta-icon svg { width: 22px; height: 22px; color: #fff; } .hiw-cta-text strong { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; display: block; } .hiw-cta-text p { color: var(--gray-400); font-size: 0.95rem; margin: 2px 0 0; } .hiw-cta-actions { display: flex; gap: 12px; } /* ---- Comparison link ---- */ .hiw-compare { padding: 40px 0 90px; text-align: center; } .hiw-compare .container { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gray-500); font-size: 1rem; } .hiw-compare svg { width: 22px; height: 22px; color: #19407a; } .hiw-compare a { color: #19407a; font-weight: 700; text-decoration: underline; } /* ---- Responsive ---- */ @media (max-width: 640px) { .hiw-toggle-wrap { flex-direction: column; gap: 10px; } .hiw-row { grid-template-columns: 1fr; gap: 18px; } .hiw-visual { justify-content: flex-start; } .hiw-mock { max-width: 150px; } .hiw-callout { padding: 26px 24px; } .hiw-cta { flex-direction: column; align-items: flex-start; } } /* ---- Dark mode: mirror the homepage treatments ---- */ body[data-mode="dark"] .hiw-hero { background: transparent; } /* Hero title: white with the homepage's faint silvery sheen; the blue-sheen accent inside goes gold via the dark .text-blue-sheen rule below. */ body[data-mode="dark"] .hiw-hero-title { background: linear-gradient(135deg, #ffffff 0%, #f4f7fa 30%, #ccd6e2 50%, #f4f7fa 70%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* All page copy reads off-white on the dark navy page */ body[data-mode="dark"] .hiw-hero-subtitle, body[data-mode="dark"] .hiw-row-body p, body[data-mode="dark"] .hiw-bullets li, body[data-mode="dark"] .hiw-cta-text p, body[data-mode="dark"] .hiw-toggle-hint, body[data-mode="dark"] .hiw-compare .container { color: #e6edf6; } /* White mock cards read like the homepage principle cards in dark mode; just deepen the shadow. */ body[data-mode="dark"] .hiw-mock { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } body[data-mode="dark"] .hiw-callout { border: 1px solid rgba(148, 178, 220, 0.35); } body[data-mode="dark"] .hiw-cta { border-color: rgba(148, 178, 220, 0.35); } body[data-mode="dark"] .hiw-btn--ghost { color: #c9d5e5; border-color: rgba(148, 178, 220, 0.5); } body[data-mode="dark"] .hiw-btn--ghost:hover { border-color: #94b2dc; background: rgba(148, 178, 220, 0.12); } body[data-mode="dark"] .hiw-bullets svg, body[data-mode="dark"] .hiw-compare svg { color: #7db4f0; } body[data-mode="dark"] .hiw-bullets a, body[data-mode="dark"] .hiw-compare a { color: #7db4f0; } /* ================================================================== TRADING OBJECTIVES PAGE ================================================================== */ .to-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 780px; margin: 0 auto 8px; } .to-spec { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: #19407a; background: #ffffff; border: 1px solid rgba(25, 64, 122, 0.28); padding: 8px 15px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(16, 42, 84, 0.10); } .to-spec svg { width: 15px; height: 15px; color: #b8860b; } .to-intro { max-width: 760px; margin: 36px auto 0; padding: 22px 26px; background: var(--white); border: 1px solid rgba(11, 31, 53, 0.35); border-left: 3px solid #19407a; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: 0 8px 24px rgba(16, 42, 84, 0.08); } .to-intro p { margin: 0; color: var(--gray-600); font-size: 1rem; line-height: 1.6; } .to-rule { max-width: 760px; margin: 0 auto; padding: 44px 0; border-bottom: 1px solid var(--gray-100); } .to-rule:last-child { border-bottom: none; } .to-rule h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; margin-bottom: 16px; } .to-rule p { color: var(--gray-500); font-size: 1rem; line-height: 1.65; margin-bottom: 14px; } .to-rule p strong { color: var(--gray-700); } .to-rule .to-hl { color: #19407a; font-weight: 700; } .to-list { margin: 0 0 14px 4px; padding-left: 20px; display: grid; gap: 8px; } .to-list li { color: var(--gray-500); font-size: 1rem; line-height: 1.5; } .to-list li::marker { color: #19407a; } .to-list li strong { color: var(--gray-700); } /* No-target highlight card (Instant) */ .to-notarget { max-width: 760px; margin: 0 auto; padding: 26px 28px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.04) 100%), linear-gradient(115deg, #0d244a 0%, #19407a 60%, #2f6bb5 100%); border-radius: var(--radius-lg); color: #fff; display: flex; align-items: center; gap: 18px; box-shadow: 0 18px 44px rgba(13, 36, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .to-notarget svg { width: 52px; height: 52px; flex-shrink: 0; color: #fff; padding: 11px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 248, 220, 0.5) 0%, rgba(255, 248, 220, 0) 45%, rgba(255, 248, 220, 0.14) 100%), linear-gradient(180deg, #F7DE7A 0%, #DAA520 40%, #B8860B 75%, #7A5A0E 100%); box-shadow: inset 0 1px 0 rgba(255, 245, 200, 0.65), inset 0 -2px 4px rgba(60, 40, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.3); } .to-notarget h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; } .to-notarget p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.98rem; line-height: 1.5; } /* Objective chart — deep navy panel with glowing lines and soft area fills, matching the homepage banner aesthetic. */ .to-graph { width: 100%; background: linear-gradient(180deg, #10203f 0%, #0b1220 100%); border: 1px solid rgba(95, 125, 185, 0.4); border-radius: var(--radius-lg); margin: 22px 0 18px; padding: 10px; display: block; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(10, 20, 45, 0.25); } .to-graph .to-grid line { stroke: rgba(255,255,255,0.13); stroke-width: 1; } .to-graph .to-axis text { fill: rgba(255,255,255,0.4); font-size: 13px; text-anchor: end; font-family: var(--font-body); } .to-graph .to-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .to-graph .to-line--up { stroke: #34d17f; filter: drop-shadow(0 0 6px rgba(52, 209, 127, 0.45)); } .to-graph .to-line--down { stroke: #e5564f; filter: drop-shadow(0 0 6px rgba(229, 86, 79, 0.45)); } .to-graph .to-area { stroke: none; } .to-graph .to-area--up { fill: rgba(52, 209, 127, 0.12); } .to-graph .to-area--down { fill: rgba(229, 86, 79, 0.10); } .to-graph .to-dot--up { fill: #34d17f; stroke: #ffffff; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(52, 209, 127, 0.8)); } .to-graph .to-dot--down { fill: #e5564f; stroke: #ffffff; stroke-width: 2; filter: drop-shadow(0 0 8px rgba(229, 86, 79, 0.8)); } .to-graph .to-badge text { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; font-family: var(--font-heading); } .to-graph .to-badge--up rect { fill: #1f9d63; filter: drop-shadow(0 4px 8px rgba(31, 157, 99, 0.5)); } .to-graph .to-badge--down rect { fill: #cf3f3a; filter: drop-shadow(0 4px 8px rgba(207, 63, 58, 0.5)); } /* Worked example box */ .to-example { background: var(--white); border: 1px solid rgba(11, 31, 53, 0.35); border-radius: var(--radius-md); padding: 20px 24px; box-shadow: 0 8px 24px rgba(16, 42, 84, 0.08); } .to-example h4 { font-family: var(--font-heading); font-size: 0.92rem; font-weight: 800; margin-bottom: 12px; color: #19407a; text-transform: uppercase; letter-spacing: 0.06em; } .to-example ul { list-style: none; display: grid; gap: 7px; } .to-example li { font-size: 0.92rem; color: var(--gray-500); padding-left: 16px; position: relative; } .to-example li::before { content: "•"; position: absolute; left: 0; color: #19407a; } .to-example li strong { color: var(--gray-700); } @media (max-width: 640px) { .to-notarget { flex-direction: column; text-align: center; } .to-rule h3 { font-size: 1.35rem; } } /* Dark mode: off-white copy, light-blue accents, translucent chips */ body[data-mode="dark"] .to-graph { background: linear-gradient(180deg, #0d1a30 0%, #05080f 100%); } body[data-mode="dark"] .to-spec { background: rgba(255, 255, 255, 0.06); border-color: rgba(148, 178, 220, 0.4); color: #e6edf6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } body[data-mode="dark"] .to-spec svg { color: #DAA520; } body[data-mode="dark"] .to-intro { border-color: rgba(148, 178, 220, 0.35); border-left-color: #7db4f0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } body[data-mode="dark"] .to-example { border-color: rgba(148, 178, 220, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } body[data-mode="dark"] .to-example h4 { color: #7db4f0; } body[data-mode="dark"] .to-intro p, body[data-mode="dark"] .to-rule p, body[data-mode="dark"] .to-list li, body[data-mode="dark"] .to-example li, body[data-mode="dark"] .to-legend { color: #e6edf6; } body[data-mode="dark"] .to-rule p strong, body[data-mode="dark"] .to-list li strong, body[data-mode="dark"] .to-example li strong { color: #ffffff; } body[data-mode="dark"] .to-rule .to-hl { color: #7db4f0; } body[data-mode="dark"] .to-list li::marker { color: #7db4f0; } body[data-mode="dark"] .to-example li::before { color: #7db4f0; } /* Trailing-drawdown chart (Instant Program) */ .to-graph .to-line--trail { stroke: #e5564f; stroke-width: 3; stroke-dasharray: 7 5; fill: none; } .to-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 18px; font-size: 0.86rem; color: var(--gray-500); } .to-legend-item { display: inline-flex; align-items: center; gap: 8px; } .to-legend-swatch { width: 22px; height: 3px; border-radius: 2px; display: inline-block; } .to-legend-swatch--up { background: #34d17f; } .to-legend-swatch--trail { background: repeating-linear-gradient(90deg, #e5564f 0 7px, transparent 7px 12px); height: 3px; } /* ================================================================== FREEDOM CHALLENGE PAGE ================================================================== */ .fc-hero { padding: 120px 0 70px; background: linear-gradient(180deg, #f6f9fe 0%, var(--white) 100%); border-bottom: 1px solid var(--gray-100); overflow: hidden; } .fc-hero .container { display: grid; grid-template-columns: 0.95fr 1.35fr; gap: 30px; align-items: stretch; max-width: 1008px; } .fc-hero-info { display: flex; flex-direction: column; justify-content: center; } .fc-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(25, 64, 122, 0.08); border: 1px solid rgba(25, 64, 122, 0.18); border-radius: 999px; padding: 6px 6px 6px 6px; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; color: #19407a; margin-bottom: 20px; } .fc-badge .fc-badge-new { background: #1f9d63; color: #fff; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.03em; } .fc-hero-title { font-family: var(--font-heading); font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 900; line-height: 1.04; margin-bottom: 26px; } .fc-hero-sub { font-size: 1.16rem; line-height: 1.62; color: var(--gray-400); max-width: 480px; margin-bottom: 38px; } .fc-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; } .fc-rating { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--gray-500); } .fc-rating strong { color: var(--gray-700); font-family: var(--font-heading); } .fc-stars { display: inline-flex; gap: 2px; } .fc-stars svg { width: 17px; height: 17px; fill: #1f9d63; } .fc-hero-visual { display: flex; flex-direction: column; align-items: center; align-self: center; margin-right: -30px; } .fc-chips { position: relative; z-index: 3; display: flex; gap: 10px; width: 118%; margin-top: -58px; } .fc-chips .fc-chip { flex: 1 1 0; } .fc-chip { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(125, 180, 240, 0.30) 0%, rgba(25, 64, 122, 0.10) 100%); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 12px; padding: 8px 14px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(25, 64, 122, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65); } .fc-chip-icon { width: 34px; height: 34px; flex-shrink: 0; background: linear-gradient(135deg, #3a7bd5 0%, #19407a 100%); border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(25, 64, 122, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .fc-chip-icon svg { width: 18px; height: 18px; color: #fff; stroke-width: 2; } .fc-chip-num { color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; line-height: 1; } .fc-chip-text { font-size: 0.76rem; line-height: 1.2; color: #24548f; } .fc-chip-text strong { display: block; color: #12315e; font-family: var(--font-heading); font-size: 0.82rem; } body[data-mode="dark"] .fc-chip { background: linear-gradient(135deg, rgba(58, 123, 213, 0.22) 0%, rgba(13, 36, 74, 0.42) 100%); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); } body[data-mode="dark"] .fc-chip-text { color: #b9d0ee; } body[data-mode="dark"] .fc-chip-text strong { color: #ffffff; } /* Hero emblem */ .fc-emblem { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; overflow: visible; } .fc-emblem-img { position: relative; z-index: 1; width: 100%; max-width: 620px; height: auto; } .fc-emblem::before { content: ""; position: absolute; width: 420px; height: 420px; background: radial-gradient(circle, rgba(47,107,181,0.35) 0%, rgba(47,107,181,0) 70%); filter: blur(28px); z-index: 0; } /* Trader's Path */ .fc-path { padding: 84px 0; } .fc-path-title { text-align: center; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 44px; } .fc-path-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; max-width: 960px; margin: 0 auto; } .fc-path-card { position: relative; background: linear-gradient(150deg, #0c1f3d 0%, #163962 100%); border-radius: var(--radius-xl); padding: 32px; min-height: 210px; overflow: hidden; } .fc-path-card h3 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: #fff; margin-bottom: 10px; } .fc-path-card p { color: rgba(255,255,255,0.72); font-size: 0.96rem; line-height: 1.55; max-width: 62%; } .fc-path-badge { position: absolute; right: 26px; top: 74px; background: linear-gradient(135deg, #2f6bb5, #7db4f0); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 26px rgba(47,107,181,0.45); } .fc-path-badge--pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; padding: 10px 16px; background: #0a1830; border: 1px solid rgba(255,255,255,0.12); } .fc-path-badge--pill svg { width: 16px; height: 16px; color: #34d17f; } .fc-path-chart { position: absolute; right: 20px; bottom: 18px; width: 150px; height: 60px; opacity: 0.9; } .fc-path-chart svg { width: 100%; height: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .fc-path-chart--blue svg { stroke: #4e80c8; } .fc-path-chart--green svg { stroke: #34d17f; } .fc-path-arrow { width: 46px; height: 46px; background: #0c1f3d; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-path-arrow svg { width: 20px; height: 20px; color: #fff; } .fc-path-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; } .fc-path-foot span { color: var(--gray-500); font-size: 1rem; } /* Objectives stat grid */ .fc-objectives { padding: 30px 0 90px; } .fc-obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; } .fc-obj-card { position: relative; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 40px 28px; text-align: center; box-shadow: var(--shadow-card); } .fc-obj-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(47,107,181,0.09) 0%, transparent 60%); border-radius: inherit; pointer-events: none; } .fc-obj-label { position: relative; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--gray-500); margin-bottom: 10px; } .fc-obj-value { position: relative; font-family: var(--font-heading); font-weight: 900; font-size: 2.8rem; line-height: 1; } .fc-obj-value--sheen { background: linear-gradient(135deg, #0d244a 0%, #19407a 25%, #2f6bb5 40%, #7db4f0 50%, #2f6bb5 60%, #19407a 75%, #0d244a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .fc-obj-value--navy { color: #19407a; } .fc-obj-value--gold { background: linear-gradient(135deg, #806000 0%, #B8860B 25%, #DAA520 40%, #FFD700 50%, #DAA520 60%, #B8860B 75%, #806000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .fc-obj-sub { position: relative; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--gray-400); } .fc-obj-info { position: absolute; right: 14px; bottom: 12px; color: var(--gray-300); background: none; border: none; padding: 2px; cursor: help; line-height: 0; transition: color var(--transition); } .fc-obj-info:hover, .fc-obj-info:focus-visible { color: #19407a; } .fc-obj-info svg { width: 16px; height: 16px; } .fc-obj-tip { position: absolute; bottom: calc(100% + 10px); right: -8px; width: 240px; background: #0d1526; color: #fff; text-align: left; font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; line-height: 1.45; padding: 12px 14px; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 6; } .fc-obj-tip::after { content: ""; position: absolute; top: 100%; right: 14px; border: 7px solid transparent; border-top-color: #0d1526; } .fc-obj-info:hover .fc-obj-tip, .fc-obj-info:focus-visible .fc-obj-tip { opacity: 1; visibility: visible; transform: translateY(0); } @media (max-width: 860px) { .fc-hero .container { grid-template-columns: 1fr; } .fc-hero-visual { margin-right: 0; margin-top: 20px; } .fc-emblem { min-height: 220px; } .fc-emblem-img { max-width: 300px; } .fc-chips { width: 100%; margin-top: -46px; flex-wrap: wrap; } .fc-chips .fc-chip { flex: 1 1 200px; } .fc-path-grid { grid-template-columns: 1fr; } .fc-path-arrow { transform: rotate(90deg); margin: 0 auto; } .fc-obj-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .fc-obj-grid { grid-template-columns: 1fr; } .fc-path-card p { max-width: 100%; } } body[data-mode="dark"] .fc-hero { background: linear-gradient(180deg, #0c1424 0%, #0b1f35 100%); } /* ================================================================== UNIFIED GLOSSY NAVY CTA BUTTONS Match the home-hero "Trade Your Money" recipe across the site. Light mode only; dark mode keeps its existing button styling. ================================================================== */ body:not([data-mode="dark"]) .hiw-btn--primary, body:not([data-mode="dark"]) .cb-cta, body:not([data-mode="dark"]) .broker-cta, body:not([data-mode="dark"]) .btn-primary { position: relative; overflow: hidden; color: #ffffff; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(60, 60, 60, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, #24548f 0%, #19407a 38%, #102a54 72%, #0a1c3a 100%); box-shadow: 0 10px 22px rgba(16, 42, 84, 0.35), 0 2px 6px rgba(10, 28, 58, 0.22), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -2px 5px rgba(0,0,0,0.30); } body:not([data-mode="dark"]) .hiw-btn--primary::after, body:not([data-mode="dark"]) .cb-cta::after, body:not([data-mode="dark"]) .broker-cta::after, body:not([data-mode="dark"]) .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 85% 55% at 30% 10%, rgba(255,255,255,0.22), transparent 70%); pointer-events: none; } body:not([data-mode="dark"]) .hiw-btn--primary:hover, body:not([data-mode="dark"]) .cb-cta:hover, body:not([data-mode="dark"]) .broker-cta:hover, body:not([data-mode="dark"]) .btn-primary:hover { transform: translateY(-2px); border-color: rgba(60, 60, 60, 0.7); background: linear-gradient(135deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.08) 100%), linear-gradient(180deg, #2a5c9c 0%, #1c4685 38%, #122f5e 72%, #0b2042 100%); box-shadow: 0 14px 30px rgba(16, 42, 84, 0.42), 0 4px 10px rgba(10, 28, 58, 0.28), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -2px 5px rgba(0,0,0,0.32); } /* ================================================================== HOME HERO — "Trade Our Accounts": deep navy gloss, gold-sheen label. Applies in both themes (overrides the unified navy CTA recipe). ================================================================== */ body:not([data-mode="dark"]) .hero-buttons .btn-primary, body[data-mode="dark"] .hero-buttons .btn-primary { color: #ffffff; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(90, 140, 220, 0.4); text-shadow: none; background: linear-gradient(135deg, rgba(220,235,255,0.20) 0%, rgba(220,235,255,0.02) 35%, rgba(220,235,255,0) 60%, rgba(220,235,255,0.08) 100%), linear-gradient(180deg, #16386b 0%, #12315e 35%, #0c2247 70%, #071a38 100%); box-shadow: 0 10px 22px rgba(7, 26, 56, 0.5), 0 2px 6px rgba(7, 26, 56, 0.3), inset 0 1px 0 rgba(220, 235, 255, 0.35), inset 0 -2px 4px rgba(0, 10, 30, 0.45); } body:not([data-mode="dark"]) .hero-buttons .btn-primary::after, body[data-mode="dark"] .hero-buttons .btn-primary::after { background: radial-gradient(ellipse 85% 60% at 30% 10%, rgba(220, 235, 255, 0.28), transparent 70%); } body:not([data-mode="dark"]) .hero-buttons .btn-primary:hover, body[data-mode="dark"] .hero-buttons .btn-primary:hover { transform: translateY(-2px); border-color: rgba(90, 140, 220, 0.6); background: linear-gradient(135deg, rgba(220,235,255,0.26) 0%, rgba(220,235,255,0.03) 35%, rgba(220,235,255,0) 60%, rgba(220,235,255,0.10) 100%), linear-gradient(180deg, #1a4079 0%, #15386b 35%, #0e2750 70%, #091e40 100%); box-shadow: 0 14px 30px rgba(7, 26, 56, 0.6), 0 3px 8px rgba(7, 26, 56, 0.35), inset 0 1px 0 rgba(220, 235, 255, 0.4), inset 0 -2px 4px rgba(0, 10, 30, 0.5); } /* Gold shine on the label */ .hero-buttons .btn-primary .btn-gold-sheen { background: linear-gradient(135deg, #DAA520 0%, #EFCF63 30%, #F8E69C 50%, #EFCF63 70%, #DAA520 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; position: relative; z-index: 1; } /* ================================================================== NAVBAR ACTIVE PAGE — metallic gold in every navbar state (white pill, dark pill, and the homepage's flat-over-navy state). Pages not listed in the navbar simply have no .active link, so nothing highlights. ================================================================== */ .nav-pages a.active, body[data-mode="dark"] .nav-pages a.active, body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a.active { background: linear-gradient(135deg, #806000 0%, #B8860B 30%, #DAA520 45%, #E3BC45 55%, #DAA520 65%, #B8860B 80%, #806000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .nav-pages a.active::after, body.home[data-mode="dark"] .navbar:not(.scrolled) .nav-pages a.active::after { background: linear-gradient(90deg, #B8860B, #DAA520, #B8860B); }