/* ══════════════════════════════════════════════════════════════════════════ service-pages.css ══════════════════════════════════════════════════════════════════════════ Styles for the eight /services/* page templates: 01 Trading Bot Development 05 Prop Trading Automation 02 Custom Indicator Development 06 Cross-Platform Conversion 03 Signal Copier Development 07 Trading API Integration 04 Trade Copier Development 08 Custom Trading Software Development Loaded AFTER new-design.css, which owns the sitewide chrome: :root variables, base typography, .btn, header, mega-menu, topbar and footer. Never redefine those here. Every service page's
carries class="service-page" — that is the scope this file works inside. Catalog/product pages use product-pages.css and legal pages use legal-pages.css; neither loads this file. HOW THIS FILE IS ORGANISED 1. Shared components — used by four or more of the eight pages 2. Multi-page — used by two or three pages 3. Per-page sections — everything unique to a single page, in page order 4. Keyframes — every animation referenced above Each block below is labelled with the section of the page it renders, so a rule can be traced back to what it draws without opening a browser. Rebuilt from scratch against the finished pages: rules for markup that no longer exists were dropped, duplicate selectors merged, and the versioned patch comments that had accumulated ("v1.2 refinements", ...) removed — they recorded edit history rather than explaining the code. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 1. SHARED COMPONENTS Used by four or more of the eight service pages. ══════════════════════════════════════════════════════════════════════════ */ /* ── Breadcrumb ── */ .service-page .service-breadcrumb{padding-top:18px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-dim)} .service-page .service-breadcrumb a{color:var(--text-dim)} .service-page .service-breadcrumb a:hover{color:var(--blue-bright)} .service-page .service-breadcrumb span{margin:0 7px;color:var(--text-mute)} /* ── Misc ── */ .service-page .hero{padding-top:clamp(34px,4vw,58px)} .service-page .hero-sub{max-width:610px} .service-page .hero-solution-pills{margin-bottom:24px} .service-page .hero-solution-pills span{white-space:nowrap} .service-page .hero-trust{grid-template-columns:repeat(2,minmax(0,1fr))} .service-page .hero-trust .htrust{display:flex;align-items:flex-start;gap:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-dim);line-height:1.45} .service-page .hero-trust .htrust svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.4;flex:0 0 auto;margin-top:1px} .service-page .file-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;overflow:hidden;pointer-events:none} .service-page .quote-actions{margin-bottom:12px} .service-page .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .service-page .services-grid :is(p,ul,ol,li,h3,h4){margin:0} .service-page .services-grid .srv-card{display:block;position:relative;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),var(--surface);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 36px rgba(0,0,0,.22);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .service-page .services-grid .srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .service-page .services-grid .srv-card:hover{border-color:rgba(112,180,255,.45);transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 46px rgba(0,0,0,.28),0 0 0 1px rgba(112,180,255,.10)} .service-page .services-grid .srv-card:hover::before{transform:scaleX(1)} .service-page .services-grid .srv-name{margin:16px 0 8px!important;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text)} .service-page .services-grid .srv-desc{font-size:13px;line-height:1.65;color:var(--text-2)} .service-page .tech-card{height:100%} .service-page .tech-card .tech-links a{white-space:nowrap} .service-page .tech-title{margin-top:14px} .service-page .clients-grid{grid-template-columns:repeat(3,1fr)} .service-page .client-card{height:100%} .service-page .client-card .icon-box{margin-bottom:2px} .faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--border)} .faq-item{border-bottom:1px solid var(--border)} .faq-item h3{margin:0} .faq-question{display:grid;width:100%;grid-template-columns:1fr 30px;align-items:center;gap:18px;padding:24px 0;border:0;background:transparent;text-align:left} .faq-question span:first-child{color:var(--text);font-size:17px;font-weight:700} .faq-plus{position:relative;width:30px;height:30px;border:1px solid var(--border);border-radius:8px} .faq-plus::before,.faq-plus::after{position:absolute;top:50%;left:50%;width:12px;height:1px;background:var(--blue-bright);content:"";transform:translate(-50%,-50%);transition:transform .18s ease} .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg)} .faq-item.open .faq-plus::after{transform:translate(-50%,-50%) rotate(0deg)} .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease} .faq-item.open .faq-answer{grid-template-rows:1fr} .faq-answer>div{overflow:hidden} .faq-answer p{max-width:820px;padding:0 44px 24px 0;color:var(--text-dim);line-height:1.7} .faq-answer a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px} .live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(80,237,187,.6)} #convertible-software .services-grid{margin-top:32px} #convertible-software .services-grid .srv-card{padding:23px 24px 24px} #convertible-software .services-grid .srv-card .icon-box{position:static;margin:0 0 16px} #convertible-software .services-grid .srv-name{margin:0 0 9px!important;font-size:17px;line-height:1.32} #convertible-software .services-grid .srv-desc{font-size:14px;line-height:1.62;color:var(--text-dim)} /* ── Service Overview — two-column layout ── */ .svc-summary-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:0;background:linear-gradient(180deg,var(--surface),var(--bg-soft));border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 28px 70px -28px rgba(0,0,0,.65)} .svc-summary-copy{padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;justify-content:center} .svc-summary-copy .eyebrow{margin-bottom:14px} .svc-summary-copy h2{font-size:clamp(24px,3vw,36px);margin-bottom:16px} .svc-summary-copy p{font-size:15px;line-height:1.75;color:var(--text-2)} .svc-summary-copy p + p{margin-top:12px} /* ── Service Overview — diagram column ── */ .svc-architecture{padding:28px;background:rgba(5,10,20,.58);border-left:1px solid var(--border);display:flex;align-items:center} /* ── Shared service-page components ── */ .svc-capabilities-section .section-head{max-width:860px} .svc-tech-components.full{max-width:none;width:100%;grid-template-columns:150px minmax(0,1fr)} .svc-tech-components.full .svc-chip-list{flex-wrap:nowrap} .svc-tech-components.full .svc-chip-list span{flex:1;justify-content:center;text-align:center;padding-inline:8px} .svc-usecases-section .section-head{max-width:760px;margin-bottom:34px} /* ── Capabilities panel ── */ .svc-capability-panel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(180deg,rgba(112,180,255,.028),rgba(255,255,255,.012)),var(--surface);box-shadow:0 18px 42px rgba(0,0,0,.18)} .svc-capability-group{grid-column:span 2;padding:23px 24px 24px;min-width:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .22s ease,box-shadow .22s ease} .svc-capability-group:nth-child(3),.svc-capability-group:nth-child(6){border-right:0} .svc-capability-group:nth-child(n/**/+4){border-bottom:0} .svc-capability-group.svc-capability-custom{background:linear-gradient(145deg,rgba(112,180,255,.055),rgba(80,237,187,.018))} .svc-capability-custom .svc-capability-kicker{color:var(--green)} .svc-capability-custom .svc-capability-kicker::before{background:var(--green);box-shadow:0 0 0 4px rgba(80,237,187,.08)} .svc-capability-kicker{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-bright)} .svc-capability-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(112,180,255,.9);box-shadow:0 0 0 4px rgba(112,180,255,.08)} .svc-capability-group h3{margin:0 0 14px!important;font-size:15px;line-height:1.35;color:var(--text)} .svc-capability-list{list-style:none;margin:0!important;padding:0!important;display:grid;gap:9px} .svc-capability-list li{position:relative;margin:0!important;padding-left:15px;font-size:12.5px;line-height:1.5;color:var(--text-2)} .svc-capability-list li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.82} .svc-capability-foot{max-width:900px;margin:16px auto 0;text-align:center;font-size:12px;line-height:1.6;color:var(--text-dim)} #automation-workflow .svc-capability-foot{margin-top:22px} .svc-capability-group:hover{background:rgba(112,180,255,.055);box-shadow:inset 0 0 0 1px rgba(112,180,255,.18)} .svc-capability-group.svc-capability-custom:hover{background:linear-gradient(145deg,rgba(112,180,255,.09),rgba(80,237,187,.05))} /* ── Development process — step flow ── */ .service-page .flow-wrap{padding:30px} .service-page .flow-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:stretch;padding-bottom:34px;position:relative} .service-page .flow-row::after{content:"";position:absolute;left:8.333%;right:8.333%;bottom:8px;height:1px;background:linear-gradient(90deg,rgba(112,180,255,.62),rgba(255,255,255,.16) 48%,rgba(80,237,187,.5));z-index:0} .service-page .flow-node{min-height:142px;position:relative;z-index:1} .service-page .flow-node::after{content:"";position:absolute;left:50%;bottom:-30px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);border:2px solid rgba(112,180,255,.52);background:var(--surface-2);box-shadow:0 0 0 4px var(--surface);z-index:2} .service-page .flow-node.active::after{border-color:var(--blue-bright);background:var(--blue-bright);box-shadow:0 0 0 4px var(--surface),0 0 12px rgba(112,180,255,.5)} .service-page .flow-node.success::after{border-color:var(--green);background:var(--green);box-shadow:0 0 0 4px var(--surface),0 0 12px rgba(80,237,187,.35)} .service-page .flow-node-sub{line-height:1.5} .flow-node{transition:border-color .2s ease,background .2s ease,transform .2s ease} .flow-node:hover{border-color:rgba(112,180,255,.45);background:rgba(112,180,255,.05);transform:translateY(-2px)} .flow-node.success:hover{border-color:rgba(80,237,187,.5);background:rgba(80,237,187,.06)} /* ── To Get Started / At Delivery blocks ── */ .project-boundaries{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} .project-boundary{padding:19px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.022);transition:border-color .2s ease,background .2s ease,transform .2s ease} .project-boundary.delivery{background:linear-gradient(180deg,rgba(80,237,187,.035),rgba(255,255,255,.018))} .project-boundary-label{margin-bottom:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright)} .project-boundary.delivery .project-boundary-label{color:var(--green)} .project-boundary p{font-size:12.5px;line-height:1.6;color:var(--text-dim);margin-bottom:12px} .project-boundary-chips{display:flex;flex-wrap:wrap;gap:7px} .project-boundary-chips span{display:inline-flex;padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);font-size:10.5px;line-height:1.3;color:var(--text-2)} .project-boundary:hover{border-color:rgba(112,180,255,.4);background:rgba(112,180,255,.045);transform:translateY(-2px)} .project-boundary.delivery:hover{border-color:rgba(80,237,187,.42);background:linear-gradient(180deg,rgba(80,237,187,.10),rgba(255,255,255,.03))!important} /* ── Specialised copier workflows ── */ .copier-special-grid .srv-card{height:100%} /* ── Platform-specific copier cards ── */ .copier-platforms .plat-card{padding:20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center} .copier-platforms .plat-name{font-size:16px;font-weight:700} .copier-platforms .plat-sub{font-size:12px!important;line-height:1.55!important;min-height:56px!important;margin-top:7px!important;color:var(--text-dim)!important;max-width:290px} /* ── Custom vs ready-made comparison ── */ .copier-choice-card .btn{margin-top:16px} /* ── Trade copier page components ── */ .copier-product-subhead .eyebrow{display:block;margin-bottom:7px} /* ── Service Overview — three-stage flow diagram ── */ .prop-flow-simple{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:linear-gradient(180deg,#09111f,#07101c);box-shadow:0 20px 52px rgba(0,0,0,.38);overflow:hidden} .prop-flow-simple-head{height:44px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .prop-flow-simple-body{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1.08fr) 36px minmax(0,1fr);align-items:stretch;gap:8px;padding:22px 16px 18px} .prop-flow-step{min-width:0;padding:16px 13px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025);display:flex;flex-direction:column} .prop-flow-step-main{border-color:rgba(80,237,187,.28);background:linear-gradient(180deg,rgba(80,237,187,.055),rgba(112,180,255,.035))} .prop-flow-num{font-family:var(--font-mono);font-size:9px;font-weight:800;color:var(--blue-bright);letter-spacing:.08em;margin-bottom:8px} .prop-flow-step-main .prop-flow-num{color:var(--green)} .prop-flow-label{display:block;min-height:27px;font-family:var(--font-mono);font-size:9px;line-height:1.5;letter-spacing:.05em;color:var(--text-dim);margin-bottom:6px} .prop-flow-step strong{font-size:13px;line-height:1.3;color:var(--text);min-height:51px} .prop-flow-items{display:flex;flex-direction:column;gap:6px;margin-top:12px} .prop-flow-items span{display:flex;align-items:center;min-height:40px;font-size:10.5px;line-height:1.35;color:var(--text-2);padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)} .prop-flow-arrow{display:flex;align-items:center;justify-content:center;font-size:21px;position:relative} .prop-flow-arrow span{background:linear-gradient(90deg,var(--blue-bright) 0%,#fff 50%,var(--blue-bright) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:propArrowShimmer 2s linear infinite} .prop-flow-simple-foot{min-height:38px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)} .prop-flow-simple-foot strong{color:var(--text-2)} /* ── Service Overview — status header ── */ .prop-overview-status{display:flex;align-items:center;gap:7px;color:var(--text-2)} .prop-overview-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(80,237,187,.8);animation:copierStatusPulse 1.8s ease-in-out infinite} /* ── Prop platform badges ── */ .prop-platforms .plat-card{padding:21px 14px} .prop-platforms .plat-name{font-size:14px} .prop-platforms .plat-sub{font-size:11px;line-height:1.5;min-height:49px;margin-top:6px} /* ── Platform-specific signal copier cards ── */ .signal-platforms-four .plat-sub{font-size:12px;line-height:1.58;min-height:76px} /* ── Audience cards ── */ .svc-audience-card .icon-box{width:38px;height:38px;border-radius:9px} .svc-audience-card .icon-box svg{width:18px;height:18px} /* ── Platform & environment integration cards ── */ .api-platform-card .link-arrow{margin-top:16px} /* ── When custom software is the right fit ── */ .software-fit-card.active{border-color:rgba(37,99,235,.42);background:linear-gradient(145deg,rgba(37,99,235,.10),rgba(255,255,255,.018))} /* ── Telegram & Discord copier cards ── */ .signal-messaging-title .icon-box{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:1px solid rgba(112,180,255,.22);background:rgba(112,180,255,.08);transition:border-color .25s ease,background .25s ease} .signal-messaging-title .icon-box svg{width:19px;height:19px;stroke:var(--blue-bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s ease} .signal-messaging-tg:hover .icon-box{border-color:rgba(41,171,226,.5);background:rgba(41,171,226,.16)} .signal-messaging-tg:hover .icon-box svg{stroke:#29abe2} .signal-messaging-dc:hover .icon-box{border-color:rgba(88,101,242,.5);background:rgba(88,101,242,.16)} .signal-messaging-dc:hover .icon-box svg{stroke:#5865f2} /* ── Flow connector — animated arrow between overview stages ── */ .sig-conn{overflow:visible} .sig-conn svg{width:100%;height:12px;overflow:visible} .sig-conn path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .sig-conn-track{stroke:rgba(112,180,255,.25);stroke-width:1.6} .sig-conn-tip{stroke:rgba(112,180,255,.6);stroke-width:1.8} .sig-conn-flow{stroke:var(--blue-bright);stroke-width:2.6;stroke-dasharray:9 23;filter:drop-shadow(0 0 5px rgba(112,180,255,.9));animation:sigConnFlow 1.6s linear infinite} .sig-conn-bi .sig-conn-flow{stroke-dasharray:7 25} /* ── Platform cards ── */ .plat-card:hover .plat-icon-generic svg{stroke:var(--blue-bright)} /* ══════════════════════════════════════════════════════════════════════════ 2. MULTI-PAGE COMPONENTS Used by two or three pages. ══════════════════════════════════════════════════════════════════════════ */ /* ── Shared service-page components ── */ .svc-inline-cta{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.025)} .svc-inline-cta p{font-size:14px;color:var(--text-2)} .svc-strip-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright);white-space:nowrap} .svc-chip-list{display:flex;flex-wrap:wrap;gap:8px} .svc-chip-list span{display:inline-flex;align-items:center;min-height:30px;padding:6px 11px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.025);font-family:var(--font-mono);font-size:10.5px;line-height:1.25;color:var(--text-2)} .svc-market-card .market-sub{line-height:1.45;min-height:32px} .svc-tech-intro{max-width:780px;margin:-14px auto 22px;text-align:center;font-size:14.5px;line-height:1.7;color:var(--text-2)} .svc-tech-components{max-width:920px;margin:0 auto 30px;padding:15px 18px;display:grid;grid-template-columns:160px minmax(0,1fr);gap:18px;align-items:center;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.02)} /* ── Capabilities panel ── */ .svc-capability-custom-copy{margin:0!important;font-size:12.5px;line-height:1.7;color:var(--text-2)} .svc-capability-custom-note{display:inline-flex;margin-top:16px;padding:6px 10px;border:1px solid rgba(80,237,187,.18);border-radius:999px;background:rgba(80,237,187,.035);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green)} /* ── Project scope frame ── */ .svc-scope-frame{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(180deg,rgba(112,180,255,.035),rgba(255,255,255,.012))} .svc-scope-column{padding:19px 20px 20px;min-width:0} .svc-scope-column+ .svc-scope-column{border-left:1px solid var(--border)} .svc-scope-note{margin:7px 0 13px;font-size:12.5px;line-height:1.55;color:var(--text-dim)} /* ── Why Nordman cards ── */ .svc-why-section{padding-top:54px!important;padding-bottom:54px!important;border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);background:radial-gradient(ellipse 55% 120% at 50% 0%,rgba(79,142,247,.08),transparent 68%),var(--bg)} .svc-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .svc-why-card{padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),var(--surface);transition:border-color .2s ease,transform .2s ease} .svc-why-card:hover{border-color:rgba(112,180,255,.38);transform:translateY(-2px)} .svc-why-card h3{margin:13px 0 7px!important;font-size:14px;line-height:1.35;color:var(--text)} .svc-why-card p{font-size:12.5px;line-height:1.6;color:var(--text-2)} /* ── Misc ── */ .compact-head{margin-bottom:28px!important} /* ── Ready-made trade copier products ── */ .copier-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .copier-products-grid .cat-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006)),var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:all .18s ease} .copier-products-grid .cat-card:hover{border-color:rgba(112,180,255,.45);transform:translateY(-2px);box-shadow:0 18px 46px -16px rgba(0,0,0,.5)} .copier-products-grid .cat-card-img{position:relative;aspect-ratio:16/10;background:#07101f;overflow:hidden} .copier-products-grid .cat-card-visual{width:100%;height:100%;background:radial-gradient(circle at 30% 40%,rgba(112,180,255,.28),transparent 50%),linear-gradient(135deg,rgba(112,180,255,.09),rgba(80,237,187,.06)),var(--surface-2);display:flex;align-items:center;justify-content:center} .copier-products-grid .cat-card-visual svg{width:36px;height:36px;stroke:var(--blue-bright);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .copier-products-grid .cat-route-label{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:center;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--blue-bright)} .copier-products-grid .cat-route-label i{font-style:normal;color:var(--text-dim)} .copier-products-grid .cat-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:100px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;backdrop-filter:blur(8px)} .copier-products-grid .cat-badge--cloud{background:rgba(112,180,255,.18);border:1px solid rgba(112,180,255,.5);color:var(--blue-bright)} .copier-products-grid .cat-badge--local{background:rgba(80,237,187,.16);border:1px solid rgba(80,237,187,.38);color:var(--green)} .copier-products-grid .cat-card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px} .copier-products-grid .cat-card-name{font-size:15px;font-weight:700;color:var(--text);line-height:1.3} .copier-products-grid .cat-card-desc{font-size:12.5px;color:var(--text-dim);line-height:1.6;flex:1} .copier-products-grid .cat-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--border);margin-top:4px} .copier-products-grid .cat-card-plan{font-size:11.5px;font-family:var(--font-mono);color:var(--blue-bright);font-weight:700;letter-spacing:.03em} .copier-products-carousel-outer{overflow:hidden} .copier-products-grid.copier-products-track{display:flex;gap:16px;transition:transform .42s cubic-bezier(.4,0,.2,1);will-change:transform} .copier-products-track .cat-card{flex:0 0 calc((100% - 32px)/3);min-width:240px} .copier-products-controls{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:22px} .copier-products-nav{display:flex;gap:9px} .copier-products-nav-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text-dim);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s} .copier-products-nav-btn:hover{border-color:var(--border-strong);background:rgba(255,255,255,.09);color:var(--text)} /* ── Automation workflow steps ── */ .prop-workflow-grid{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr);gap:10px;align-items:stretch} .prop-workflow-stage{height:100%;padding:27px 24px 24px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.006)),var(--surface);box-shadow:0 16px 36px rgba(0,0,0,.18)} .prop-workflow-stage-main{border-color:rgba(80,237,187,.23);background:linear-gradient(180deg,rgba(80,237,187,.045),rgba(112,180,255,.025)),var(--surface)} .prop-workflow-stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px} .prop-workflow-step{font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--blue-bright)} .prop-workflow-stage-main .prop-workflow-step{color:var(--green)} .prop-workflow-stage h3{font-size:18px;line-height:1.28;margin-bottom:11px!important} .prop-workflow-stage>p{font-size:13.5px;line-height:1.72;color:var(--text-2)} .prop-workflow-list{display:flex;flex-direction:column;gap:8px;margin-top:17px} .prop-workflow-list li{position:relative;padding-left:17px;font-size:12.5px;line-height:1.5;color:var(--text-2)} .prop-workflow-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 8px rgba(112,180,255,.35)} .prop-workflow-stage-main .prop-workflow-list li::before{background:var(--green);box-shadow:0 0 8px rgba(80,237,187,.28)} .prop-workflow-stage .link-arrow{margin-top:17px} .prop-workflow-connector{display:flex;align-items:center;justify-content:center;color:var(--blue-bright);font-size:24px;opacity:.75} .prop-workflow-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px} .prop-workflow-related{padding:22px 23px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .prop-workflow-related:hover{border-color:rgba(112,180,255,.34);transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.22)} .prop-workflow-related-primary{border-color:rgba(112,180,255,.24);background:linear-gradient(135deg,rgba(112,180,255,.06),rgba(80,237,187,.018)),var(--surface)} .prop-workflow-related-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px} .prop-workflow-related-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)} .prop-workflow-related-primary .prop-workflow-related-tag{color:var(--blue-bright)} .prop-workflow-related h3{font-size:17px;line-height:1.28;margin-bottom:9px!important} .prop-workflow-related p{font-size:13px;line-height:1.68;color:var(--text-2)} .prop-workflow-related .link-arrow{margin-top:15px;padding:9px 14px;border:1px solid rgba(112,180,255,.24);border-radius:var(--r-md);transition:border-color .15s ease,color .15s ease,gap .15s ease} .prop-workflow-related .link-arrow:hover{border-color:rgba(112,180,255,.5)} .prop-workflow-stage,.prop-workflow-related{transition:border-color .2s ease,background .2s ease,transform .2s ease} .prop-workflow-stage:hover,.prop-workflow-related:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Prop platform badges ── */ .prop-platforms{grid-template-columns:repeat(5,minmax(0,1fr))!important} /* ── Platform-specific conversion cards + route tiles ── */ .conversion-platform-status.full{border-color:rgba(56,189,248,.25);background:rgba(56,189,248,.07);color:var(--blue-bright)} /* ── Platform & environment integration cards ── */ .api-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px} .api-platform-card{background:linear-gradient(180deg,rgba(26,37,58,.92),rgba(12,18,30,.96));border:1px solid var(--border);border-radius:18px;padding:25px} .api-platform-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px} .api-platform-title{display:flex;align-items:center;gap:11px;min-width:0} .api-platform-icon{height:28px;width:auto;max-width:120px;object-fit:contain;opacity:.92;flex:0 0 auto} .api-platform-head h3{font-size:20px;line-height:1.25} .api-platform-type{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(80,237,187,.2);background:rgba(80,237,187,.06);color:var(--green);padding:5px 8px;border-radius:999px;white-space:nowrap;font-weight:800} .api-platform-card>p{font-size:14px;color:var(--text-dim);line-height:1.62;margin-bottom:18px} .software-connect-card .api-platform-head{margin-bottom:12px} .software-connect-card .api-platform-head h3{font-size:20px} /* ── Route chip stacks ── */ .route-stack{display:flex;flex-direction:column;gap:8px} .route-stack span{display:block;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:10px;padding:9px 11px;font-size:12px;color:var(--text-2);font-weight:700} /* ── Other environments callout ── */ .other-api-callout{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:18px;border:1px solid var(--border);border-radius:16px;padding:22px 24px;background:rgba(59,130,246,.04)} .other-api-callout h3{font-size:18px;margin:6px 0 5px} .other-api-callout p{font-size:14px;color:var(--text-dim);max-width:780px} /* ── Why Nordman cards (API page variant) ── */ .api-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px} .api-why-grid article{border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);padding:21px 20px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .api-why-grid strong{font-size:16px;line-height:1.25;color:var(--text)} .api-why-grid span{font-size:13.5px;line-height:1.62;color:var(--text-dim)} .api-why-grid article:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Python / C# stack cards ── */ .software-stack-card .route-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .software-stack-card .route-stack span{display:flex;align-items:center;justify-content:center;text-align:center} /* ── Routing & account structure cards ── */ .signal-routing-card,.svc-audience-card,.prop-audience-card{transition:border-color .2s ease,background .2s ease,transform .2s ease} .signal-routing-card:hover,.svc-audience-card:hover,.prop-audience-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Integration scope cards (accent colour per card) ── */ .api-specialized-card,.api-function-card,.workflow-card,.api-example-card,.api-platform-card,.protocol-card{transition:border-color .2s ease,background .2s ease,transform .2s ease} .api-specialized-card:hover,.api-function-card:hover,.workflow-card:hover,.api-example-card:hover,.api-platform-card:hover,.protocol-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ══════════════════════════════════════════════════════════════════════════ 01. TRADING BOT DEVELOPMENT Only used by /services/… page 01. ══════════════════════════════════════════════════════════════════════════ */ /* ── Service Overview — bot runtime loop diagram ── */ .bot-loop{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .bot-loop-head{height:44px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .bot-loop-body{display:grid;grid-template-columns:1fr 66px 1fr;grid-template-rows:auto 66px auto;gap:10px;padding:18px;position:relative} .bot-loop-cell{border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(10,17,30,.96);padding:14px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .bot-loop-cell:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.06);transform:translateY(-2px)} .bot-loop-cell-exec{border-color:rgba(80,237,187,.3);background:rgba(11,26,26,.96)} .bot-loop-cell-exec:hover{border-color:rgba(80,237,187,.55);background:rgba(80,237,187,.09)} .bot-loop-step{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--blue-bright)} .bot-loop-cell-exec .bot-loop-step{color:var(--green)} .bot-loop-cell strong{font-size:13px;line-height:1.3;color:var(--text)} .bot-loop-cell span{font-size:10.5px;line-height:1.45;color:var(--text-dim)} .bot-loop-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible} .bot-loop-wires path{fill:none;vector-effect:non-scaling-stroke} .bot-loop-cell,.bot-loop-core{position:relative;z-index:1} .bot-loop-gap{} .bot-loop-core{grid-column:2;justify-self:center;align-self:center;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(112,180,255,.32);background:radial-gradient(circle,rgba(112,180,255,.18),transparent 72%)} .bot-loop-core em{font-style:normal;font-size:22px;line-height:1;color:var(--blue-bright);animation:botLoopSpin 6s linear infinite} .bot-loop-core span{display:none} .bot-loop-foot{padding:11px 15px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .bot-loop-foot strong{color:var(--text-2);font-weight:600} /* ── Misc ── */ .bot-wire-track{stroke:rgba(112,180,255,.18);stroke-width:1.5} .bot-wire-flow{stroke:rgba(112,180,255,.95);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:34 266;filter:drop-shadow(0 0 5px rgba(112,180,255,.85));animation:botWireFlow 4.6s linear infinite} /* ══════════════════════════════════════════════════════════════════════════ 02. CUSTOM INDICATOR DEVELOPMENT Only used by /services/… page 02. ══════════════════════════════════════════════════════════════════════════ */ /* ── Platform cards ── */ .plat-api-tag{display:inline-block;margin-left:2px;padding:1px 7px;border-radius:100px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.09);color:var(--amber);font-size:9.5px;font-weight:700;letter-spacing:.03em;vertical-align:middle} /* ── Service Overview — indicator pipeline + mini chart ── */ .ind-pipe{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .ind-pipe-head{height:44px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .ind-pipe-body{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px 18px 16px} .ind-pipe-wire{position:absolute;left:18px;right:auto;top:50%;transform:translateY(-50%);height:6px;width:calc(100% - 36px);pointer-events:none;z-index:0;overflow:visible} .ind-pipe-wire path{fill:none;vector-effect:non-scaling-stroke} .ind-pipe-stage{position:relative;z-index:1;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(10,17,30,.96);padding:13px;display:flex;flex-direction:column;gap:4px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .ind-pipe-stage:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.06);transform:translateY(-2px)} .ind-pipe-stage-out{border-color:rgba(80,237,187,.3);background:rgba(11,26,26,.96)} .ind-pipe-stage-out:hover{border-color:rgba(80,237,187,.55);background:rgba(80,237,187,.09)} .ind-pipe-num{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;color:var(--blue-bright)} .ind-pipe-stage-out .ind-pipe-num{color:var(--green)} .ind-pipe-stage strong{font-size:13px;line-height:1.3;color:var(--text)} .ind-pipe-stage span{font-size:10.5px;line-height:1.45;color:var(--text-dim)} .ind-pipe-chart{position:relative;margin:0 18px 16px;padding:12px 14px 10px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:linear-gradient(180deg,rgba(112,180,255,.05),rgba(255,255,255,.012));background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 20px} .ind-pipe-chart svg{display:block;width:100%;height:62px} .ind-chart-line{fill:none;stroke:var(--blue-bright);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520;animation:indChartDraw 3.2s ease-out infinite} .ind-chart-mark{fill:var(--green);opacity:0;animation:indMarkPop 3.2s ease-out infinite} .ind-chart-mark-late{animation-delay:.45s} .ind-pipe-alert{margin-top:8px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;border:1px solid rgba(80,237,187,.24);background:rgba(80,237,187,.07);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;color:#9de7cb} .ind-pipe-foot{padding:11px 15px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .ind-pipe-foot strong{color:var(--text-2);font-weight:600} /* ── Misc ── */ .ind-wire-track{stroke:rgba(112,180,255,.18);stroke-width:1.5} .ind-wire-flow{stroke:rgba(112,180,255,.95);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:16 84;filter:drop-shadow(0 0 5px rgba(112,180,255,.85));animation:indWireFlow 3.2s linear infinite} /* ══════════════════════════════════════════════════════════════════════════ 03. SIGNAL COPIER DEVELOPMENT Only used by /services/… page 03. ══════════════════════════════════════════════════════════════════════════ */ /* ── Signal inputs & integrations grid ── */ .signal-input-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .signal-input-card{padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .signal-input-card:hover{border-color:rgba(112,180,255,.4);transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.22)} .signal-input-card h3{font-size:18px;margin:16px 0 9px!important} .signal-input-card p{font-size:13.25px;line-height:1.68;color:var(--text-2)} /* ── Signal source route chips ── */ .signal-route-label{margin-top:18px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)} .signal-route-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px} .signal-route-chips span{display:inline-flex;align-items:center;padding:6px 9px;border-radius:8px;border:1px solid rgba(112,180,255,.18);background:rgba(112,180,255,.035);font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)} /* ── Routing & account structure cards ── */ .signal-routing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .signal-routing-card{padding:25px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface)} .signal-routing-card h3{font-size:17px;margin:15px 0 8px!important} .signal-routing-card p{font-size:13px;line-height:1.65;color:var(--text-2)} /* ── Platform-specific signal copier cards ── */ .signal-platform-route{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:10px} .signal-platform-route span{padding:4px 6px;border-radius:6px;background:rgba(112,180,255,.04);border:1px solid rgba(112,180,255,.13);font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim)} .signal-platforms-four{grid-template-columns:repeat(4,minmax(0,1fr))!important} .signal-platforms-four .signal-platform-route span{font-size:9.5px;padding:5px 7px} /* ── Misc ── */ .signal-note{margin-top:20px;padding:17px 19px;border:1px solid rgba(112,180,255,.18);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(112,180,255,.045),rgba(255,255,255,.01));display:flex;align-items:flex-start;gap:12px} .signal-note svg{width:19px;height:19px;stroke:var(--blue-bright);fill:none;stroke-width:1.8;flex-shrink:0;margin-top:2px} .signal-note strong{display:block;font-size:13px;margin-bottom:4px} .signal-note p{font-size:12.5px;line-height:1.6;color:var(--text-dim)} .signal-source-routes{padding-left:26px;border-left:1px solid var(--border)} .signal-other-platforms{margin-top:18px;padding:18px 20px;border:1px solid rgba(112,180,255,.16);border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(112,180,255,.04),rgba(255,255,255,.008));display:flex;align-items:center;justify-content:space-between;gap:22px} .signal-other-platforms-label{display:block;margin-bottom:5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-bright)} .signal-other-platforms strong{display:block;font-size:15px;margin-bottom:4px} .signal-other-platforms p{font-size:12.5px;line-height:1.55;color:var(--text-dim);max-width:720px} .signal-other-platforms-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;min-width:260px} .signal-other-platforms-chips span{padding:5px 8px;border:1px solid rgba(112,180,255,.14);border-radius:7px;background:rgba(112,180,255,.035);font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)} /* ── Audience cards ── */ .svc-audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .svc-audience-card{padding:20px 18px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface)} .svc-audience-card h3{font-size:15.5px;margin:12px 0 7px!important;line-height:1.25} .svc-audience-card p{font-size:12.25px;line-height:1.55;color:var(--text-2)} .svc-audience-card ul{display:grid;gap:5px;margin-top:10px} .svc-audience-card li{position:relative;font-size:11.25px;line-height:1.42;padding-left:12px;color:var(--text-dim)} .svc-audience-card li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--green)} /* ── Telegram & Discord copier cards ── */ .signal-messaging-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px;align-items:stretch} .signal-messaging-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease} .signal-messaging-title{display:flex;align-items:center;gap:12px;font-size:19px;line-height:1.25;color:var(--text);letter-spacing:-.01em;margin-bottom:13px} .signal-messaging-card>p{font-size:13.5px;line-height:1.7;color:var(--text-2);margin-bottom:14px} .signal-messaging-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px} .signal-messaging-list li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.55;color:var(--text-dim)} .signal-messaging-list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--blue-bright);opacity:.75} .signal-messaging-card .signal-source-routes{margin-top:auto;padding-left:0;border-left:0;padding-top:15px;border-top:1px solid var(--border)} .signal-messaging-tg:hover{border-color:rgba(41,171,226,.55);background:linear-gradient(180deg,rgba(41,171,226,.09),rgba(255,255,255,.01)),var(--surface);box-shadow:0 14px 34px rgba(41,171,226,.14);transform:translateY(-2px)} .signal-messaging-tg:hover .signal-messaging-list li::before{background:#29abe2} .signal-messaging-dc:hover{border-color:rgba(88,101,242,.55);background:linear-gradient(180deg,rgba(88,101,242,.09),rgba(255,255,255,.01)),var(--surface);box-shadow:0 14px 34px rgba(88,101,242,.16);transform:translateY(-2px)} .signal-messaging-dc:hover .signal-messaging-list li::before{background:#5865f2} /* ══════════════════════════════════════════════════════════════════════════ 04. TRADE COPIER DEVELOPMENT Only used by /services/… page 04. ══════════════════════════════════════════════════════════════════════════ */ /* ── Trade copier page components ── */ .copier-architecture-grid{display:grid;gap:16px} .copier-cloud-note{margin-top:16px;padding:15px 17px;border:1px solid rgba(80,237,187,.18);border-radius:var(--r-md);background:rgba(80,237,187,.035);font-size:12.5px;line-height:1.65;color:var(--text-2)} .copier-cloud-note strong{color:var(--green)} .copier-node-label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;color:var(--blue-bright);margin-bottom:5px} .copier-node-event{margin-top:8px;width:max-content;padding:4px 6px;border:1px solid rgba(80,237,187,.22);border-radius:6px;background:rgba(80,237,187,.045);font-family:var(--font-mono);font-size:8.5px;color:var(--green)} .copier-prop-note{margin-top:16px;padding:15px 17px;display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(251,191,36,.20);border-radius:var(--r-md);background:linear-gradient(135deg,rgba(251,191,36,.055),rgba(255,255,255,.015))} .copier-prop-note-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:9px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.20)} .copier-prop-note-icon svg{width:18px;height:18px;stroke:var(--amber);fill:none;stroke-width:1.8} .copier-prop-note strong{display:block;margin-bottom:4px;font-size:12.5px;color:#f7df9d} .copier-prop-note p{font-size:11.5px;line-height:1.6;color:var(--text-dim)} .copier-product-subhead{text-align:center;margin:2px 0 20px} .copier-product-subhead h3{font-size:20px} /* ── Copier architecture axes (deployment / connectivity / accounts) ── */ .copier-axis{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:22px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface);transition:border-color .22s ease,background .22s ease} .copier-axis-head{padding-right:20px;border-right:1px solid var(--border)} .copier-axis-num{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:7px} .copier-axis-head h3{font-size:16px;margin-bottom:7px!important} .copier-axis-head p{font-size:12px;line-height:1.55;color:var(--text-dim)} .copier-axis-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .copier-axis-option{padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.025);transition:border-color .2s ease,background .2s ease,transform .2s ease} .copier-axis-option strong{display:block;font-size:13px;color:var(--text);margin-bottom:4px} .copier-axis-option span{display:block;font-size:11px;line-height:1.45;color:var(--text-dim)} .copier-axis-question{display:block;margin:0 0 5px;font-size:12px;font-weight:600;line-height:1.35;color:var(--blue-bright)} .copier-axis:hover{border-color:rgba(112,180,255,.34);background:linear-gradient(135deg,rgba(79,142,247,.10),rgba(255,255,255,.02))} .copier-axis-option:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.06);transform:translateY(-2px)} /* ── Specialised copier workflows ── */ .copier-special-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} /* ── Platform-specific copier cards ── */ .copier-platforms{grid-template-columns:repeat(3,minmax(0,1fr))!important} .copier-platforms .plat-route-label{margin-top:14px;margin-bottom:8px;font-size:9.5px} .copier-platforms .plat-route-tags{gap:6px} .copier-platforms .plat-route-tags span{padding:5px 8px;font-size:10px;line-height:1.25;color:var(--text-2);border-color:rgba(112,180,255,.20);background:rgba(112,180,255,.045)} /* ── Service Overview — live trade-copy map ── */ .copier-live-map{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:linear-gradient(180deg,#09111f,#07101c);box-shadow:0 20px 52px rgba(0,0,0,.38);overflow:hidden} .copier-live-head{height:44px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .copier-live-status{display:flex;align-items:center;gap:7px;color:var(--text-2)} .copier-live-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(80,237,187,.8);animation:copierStatusPulse 1.8s ease-in-out infinite} .copier-live-canvas{position:relative;min-height:330px;overflow:hidden;background:radial-gradient(circle at 51% 50%,rgba(79,142,247,.10),transparent 28%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,28px 28px,28px 28px} .copier-live-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible} .copier-live-lines path{fill:none;vector-effect:non-scaling-stroke} .copier-live-node{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),#111d31;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:11px 12px;display:flex;flex-direction:column;justify-content:center} .copier-live-node.master{left:18px;top:112px;width:128px;min-height:106px;border-color:rgba(112,180,255,.32)} .copier-live-followers{position:absolute;right:16px;top:18px;bottom:18px;width:138px;display:grid;grid-template-rows:repeat(3,1fr);gap:10px;z-index:2} .copier-live-node.follower{position:relative;inset:auto;width:100%;min-height:0;padding:10px 11px} .copier-live-node strong{font-size:12px;line-height:1.2;color:var(--text)} .copier-live-node em{font-family:var(--font-mono);font-style:normal;font-size:9px;color:var(--text-dim);margin-top:4px} .copier-live-engine{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center} .copier-live-log{position:absolute;z-index:4;left:18px;right:172px;bottom:15px;min-height:34px;padding:8px 10px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(5,10,20,.72);font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim);backdrop-filter:blur(6px)} .copier-live-log strong{color:var(--text-2);font-size:9px} .copier-live-log span:last-child{margin-left:auto} /* ── Misc ── */ .route-base{stroke:rgba(112,180,255,.22);stroke-width:1.4} .route-pulse{stroke:var(--blue-bright);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:10 88;animation:routePackets 2.2s linear infinite;filter:drop-shadow(0 0 5px rgba(112,180,255,.55))} .route-pulse.p2{animation-delay:-.2s} .route-pulse.p3{animation-delay:-.75s} .route-pulse.p4{animation-delay:-1.3s} .copy-state{position:absolute;right:8px;top:8px;font-family:var(--font-mono);font-size:7px;letter-spacing:.06em;color:var(--green);opacity:.25;animation:copyState 2.2s ease-in-out infinite} .f2 .copy-state{animation-delay:.45s} .f3 .copy-state{animation-delay:.9s} .engine-copy{margin-top:9px;font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim)} .engine-state{margin-top:5px;padding:3px 7px;border-radius:999px;background:rgba(80,237,187,.055);border:1px solid rgba(80,237,187,.18);font-family:var(--font-mono);font-size:7.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--green)} .tech-ops{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;margin-bottom:16px} .tech-ops span{display:inline-flex;align-items:center;min-height:27px;padding:5px 9px;border:1px solid rgba(80,237,187,.20);border-radius:7px;background:rgba(80,237,187,.04);font-family:var(--font-mono);font-size:10px;color:#9de7cb} /* ── Service Overview — copier engine ring ── */ .engine-ring{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(112,180,255,.36);background:radial-gradient(circle,rgba(79,142,247,.18),rgba(79,142,247,.04) 55%,transparent 56%);box-shadow:0 0 0 10px rgba(112,180,255,.025),0 0 28px rgba(79,142,247,.17);position:relative} .engine-ring::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(112,180,255,.22);animation:engineSpin 12s linear infinite} .engine-ring b{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--blue-bright);display:block;text-align:center;line-height:1.08} /* ── Shared service-page components ── */ .svc-custom-scope-note{max-width:940px;margin:18px auto 0;padding:15px 17px;display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(80,237,187,.22);border-radius:var(--r-md);background:linear-gradient(135deg,rgba(80,237,187,.055),rgba(112,180,255,.025))} .svc-custom-scope-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:8px;background:rgba(80,237,187,.08);border:1px solid rgba(80,237,187,.22);font-family:var(--font-mono);font-size:18px;color:var(--green)} .svc-custom-scope-note strong{display:block;margin-bottom:3px;font-size:13px;color:var(--text)} .svc-custom-scope-note p{font-size:12px;line-height:1.6;color:var(--text-2)} .svc-usecases-section{padding-top:clamp(52px,6vw,82px);padding-bottom:clamp(52px,6vw,82px)} .svc-usecases-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .svc-usecase-card{position:relative;min-width:0;padding:23px 21px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.006)),var(--surface);box-shadow:0 14px 32px rgba(0,0,0,.16);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .svc-usecase-card:hover{transform:translateY(-2px);border-color:rgba(112,180,255,.38);box-shadow:0 18px 40px rgba(0,0,0,.22)} .svc-usecase-card h3{font-size:16px;line-height:1.3;margin:16px 0 9px!important;color:var(--text)} .svc-usecase-card p{font-size:13px;line-height:1.65;color:var(--text-2)} /* ── Platform cards ── */ .plat-route-label{margin-top:13px;margin-bottom:7px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)} .plat-route-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:5px} .plat-route-tags span{padding:4px 6px;border:1px solid rgba(112,180,255,.16);border-radius:6px;background:rgba(112,180,255,.035);font-family:var(--font-mono);font-size:8.5px;line-height:1.2;color:var(--text-dim)} .plat-icon-generic{display:grid;place-items:center;height:28px;margin-bottom:12px} .plat-icon-generic svg{display:block!important;width:26px;height:26px;fill:none;stroke:var(--text-dim);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease} /* ── Custom vs ready-made comparison ── */ .copier-choice-panel{display:grid;grid-template-columns:1fr 54px 1fr;align-items:stretch;gap:0;margin-bottom:38px} .copier-choice-card{position:relative;padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008)),var(--surface);box-shadow:0 16px 36px rgba(0,0,0,.18);transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease} .copier-choice-card.custom{border-color:rgba(112,180,255,.25)} .copier-choice-card.ready{border-color:rgba(80,237,187,.20)} .copier-choice-badge{display:inline-flex;margin-bottom:12px;padding:5px 8px;border-radius:999px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-bright);background:rgba(112,180,255,.06);border:1px solid rgba(112,180,255,.18)} .copier-choice-card.ready .copier-choice-badge{color:var(--green);background:rgba(80,237,187,.045);border-color:rgba(80,237,187,.18)} .copier-choice-card h3{font-size:18px;margin-bottom:9px!important} .copier-choice-card p{font-size:12.8px;line-height:1.65;color:var(--text-2)} .copier-choice-points{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .copier-choice-points span{padding:5px 8px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:rgba(255,255,255,.018);font-family:var(--font-mono);font-size:9px;color:var(--text-dim)} .copier-choice-arrow{display:grid;place-items:center;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mute);position:relative} .copier-choice-arrow::before,.copier-choice-arrow::after{content:"";position:absolute;left:50%;width:1px;height:36%;background:linear-gradient(transparent,rgba(255,255,255,.12))} .copier-choice-arrow::before{top:0} .copier-choice-arrow::after{bottom:0;transform:rotate(180deg)} .copier-choice-card:hover{border-color:rgba(112,180,255,.45);box-shadow:0 14px 34px rgba(79,142,247,.14);transform:translateY(-2px)} .copier-choice-card.ready:hover{border-color:rgba(80,237,187,.45);box-shadow:0 14px 34px rgba(80,237,187,.14)} /* ══════════════════════════════════════════════════════════════════════════ 05. PROP TRADING AUTOMATION Only used by /services/… page 05. ══════════════════════════════════════════════════════════════════════════ */ /* ── Risk controls chips & notes ── */ .prop-risk-intro{max-width:900px;margin:0 auto 22px;text-align:center;font-size:14px;line-height:1.7;color:var(--text-2)} .prop-risk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-4px auto 24px} .prop-risk-chip{display:inline-flex;align-items:center;min-height:30px;padding:7px 11px;border:1px solid rgba(112,180,255,.18);border-radius:999px;background:rgba(112,180,255,.055);color:var(--text-2);font-size:11.5px;font-weight:700;line-height:1;white-space:nowrap} .prop-risk-chip:nth-child(4),.prop-risk-chip:nth-child(5),.prop-risk-chip:nth-child(6){border-color:rgba(80,237,187,.18);background:rgba(80,237,187,.045)} /* ── Misc ── */ .prop-rule-note{margin-top:18px;padding:16px 18px;display:flex;align-items:flex-start;gap:12px;border:1px solid rgba(251,191,36,.20);border-radius:var(--r-md);background:linear-gradient(135deg,rgba(251,191,36,.055),rgba(255,255,255,.015))} .prop-rule-note svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.8;flex:0 0 auto;margin-top:1px} .prop-rule-note strong{display:block;margin-bottom:4px;font-size:12.5px;color:#f7df9d} .prop-rule-note p{font-size:11.8px;line-height:1.65;color:var(--text-dim)} .prop-platform-badge{display:inline-flex;margin-top:11px;padding:4px 7px;border-radius:7px;border:1px solid rgba(112,180,255,.16);background:rgba(112,180,255,.035);font-family:var(--font-mono);font-size:8.5px;color:var(--text-dim)} /* ── Who this is for cards ── */ .prop-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .prop-audience-card{padding:25px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface)} .prop-audience-card h3{font-size:17px;margin:16px 0 9px!important} .prop-audience-card p{font-size:13px;line-height:1.65;color:var(--text-2)} .prop-audience-card ul{display:grid;gap:7px;margin-top:13px} .prop-audience-card li{position:relative;padding-left:14px;font-size:12px;color:var(--text-dim)} .prop-audience-card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--green)} /* ══════════════════════════════════════════════════════════════════════════ 06. CROSS-PLATFORM CONVERSION Only used by /services/… page 06. ══════════════════════════════════════════════════════════════════════════ */ /* ── Platform-specific conversion cards + route tiles ── */ .conversion-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px} .conversion-platform-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(21,32,52,.96),rgba(10,16,29,.98));padding:26px;box-shadow:0 16px 40px rgba(0,0,0,.16);transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease} .conversion-platform-card::before{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--blue-bright),transparent);content:"";opacity:.7} .conversion-platform-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px} .conversion-platform-head h3{margin:0;font-size:23px;line-height:1.2} .conversion-platform-status{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.025);font:600 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .conversion-platform-status.source{border-color:rgba(52,211,153,.25);background:rgba(52,211,153,.07);color:var(--green)} .conversion-platform-card>p{margin:0 0 20px;color:var(--text-dim);line-height:1.62;font-size:14px} .conversion-platform-title-link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;transition:color .18s ease} .conversion-platform-icon{height:28px;width:auto;max-width:120px;object-fit:contain;opacity:.92;flex:0 0 auto} .conversion-platform-link-arrow{display:inline-block;color:var(--blue-bright);opacity:0;transform:translateX(-5px);transition:opacity .18s ease,transform .18s ease} .conversion-platform-title-link:hover,.conversion-platform-title-link:focus-visible{color:var(--blue-bright)} .conversion-platform-title-link:hover .conversion-platform-link-arrow,.conversion-platform-title-link:focus-visible .conversion-platform-link-arrow{opacity:1;transform:translateX(0)} .conversion-platform-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.045);box-shadow:0 14px 34px rgba(79,142,247,.14);transform:translateY(-2px);cursor:pointer} .conversion-platform-title-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit} .conversion-platform-card:hover .conversion-platform-title-link{color:var(--blue-bright)} .conversion-platform-card:hover .conversion-platform-link-arrow{opacity:1;transform:translateX(3px)} .conversion-platform-card:focus-within{border-color:rgba(112,180,255,.6);box-shadow:0 0 0 2px rgba(112,180,255,.25)} .conversion-platform-title-link:focus-visible{outline:none} .conversion-platform-card:hover .conversion-route{border-color:rgba(112,180,255,.28);background:rgba(112,180,255,.05)} /* ── Conversion route tiles ── */ .conversion-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .conversion-route{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.018);color:var(--text);font-weight:700;font-size:13.5px;line-height:1.25;z-index:3;transition:border-color .18s ease,background .18s ease,transform .18s ease} .conversion-route .route-arrow{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1px solid var(--border);border-radius:7px;color:var(--blue-bright);font-size:15px} .conversion-route.popular{border-color:rgba(56,189,248,.36);background:linear-gradient(135deg,rgba(56,189,248,.11),rgba(59,130,246,.055))} .conversion-route.popular::after{position:absolute;top:-8px;right:10px;padding:3px 6px;border:1px solid rgba(56,189,248,.28);border-radius:999px;background:#101b2c;color:var(--blue-bright);content:"POPULAR";font:700 8px/1 var(--font-mono);letter-spacing:.07em} .conversion-route small{display:block;margin-top:3px;color:var(--text-mute);font:500 10px/1.25 var(--font-mono);text-transform:uppercase;letter-spacing:.04em} .conversion-route:hover{border-color:rgba(112,180,255,.55)!important;background:rgba(112,180,255,.10)!important;transform:translateY(-1px)} .conversion-route:hover .route-arrow{color:var(--blue-bright);transform:translateX(3px)} a.conversion-route{text-decoration:none;color:inherit;cursor:pointer} /* ── Cross-platform conversion components ── */ .conversion-note{margin-top:18px;padding:14px 16px;border-left:2px solid var(--blue-bright);border-radius:0 10px 10px 0;background:rgba(56,189,248,.055);color:var(--text-dim);line-height:1.6} .conversion-code-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px} .conversion-code-flow span{padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.02);font:600 11px/1 var(--font-mono);color:var(--text-dim)} .conversion-code-flow b{color:var(--blue-bright);font-size:18px} .conversion-source-callout{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;margin-top:24px;padding:23px 26px;border:1px solid rgba(56,189,248,.25);border-radius:16px;background:linear-gradient(115deg,rgba(56,189,248,.08),rgba(21,32,52,.55))} .conversion-source-callout h3{margin:0 0 6px;font-size:20px} .conversion-source-callout p{margin:0;color:var(--text-dim);line-height:1.65} .conversion-checks{display:grid;gap:10px;margin-top:17px} .conversion-check{display:flex;align-items:flex-start;gap:9px;color:var(--text-dim);font-size:14px;line-height:1.5} .conversion-check i{width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--green);flex:0 0 auto} .conversion-note-compact{font-size:13px;line-height:1.58;padding:12px 15px} /* ── Beyond platform-to-platform (language cards) ── */ .conversion-lang-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px} .conversion-lang-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:25px} .conversion-lang-card h3{margin:0 0 9px;font-size:20px} .conversion-lang-card p{margin:0 0 15px;color:var(--text-dim);line-height:1.62;font-size:14px} .conversion-lang-card,.conversion-translation-card{transition:border-color .2s ease,background .2s ease,transform .2s ease} .conversion-lang-card:hover,.conversion-translation-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} .conversion-translation-card:hover .conversion-card-icon,.conversion-lang-card:hover .conversion-card-icon{border-color:rgba(112,180,255,.45);background:rgba(112,180,255,.14)} /* ── What we preserve / where adaptation is needed ── */ .conversion-equivalence{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;margin-top:28px} .conversion-equivalence-main,.conversion-equivalence-side{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:26px;transition:border-color .22s ease,background .22s ease} .conversion-equivalence-main h3,.conversion-equivalence-side h3{margin:0 0 10px;font-size:21px} .conversion-equivalence-main p,.conversion-equivalence-side p{margin:0;color:var(--text-dim);line-height:1.65;font-size:14px} .conversion-equivalence-inline{margin-top:18px} .conversion-equivalence-main:hover,.conversion-equivalence-side:hover{border-color:rgba(112,180,255,.36);background:rgba(112,180,255,.045)} /* ── Platform adaptation & equivalence cards ── */ .conversion-translation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px} .conversion-translation-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:21px} .conversion-translation-card h3{margin:0 0 8px;font-size:17px} .conversion-translation-card p{margin:0;color:var(--text-dim);line-height:1.62;font-size:14px} /* ── Conversion workflow step cards ── */ .conversion-process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px} .conversion-process-card{position:relative;border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:22px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .conversion-process-num{display:block;margin-bottom:12px;color:var(--blue-bright);font:700 11px/1 var(--font-mono);letter-spacing:.06em} .conversion-process-card h3{margin:0 0 7px;font-size:18px} .conversion-process-card p{margin:0;color:var(--text-dim);line-height:1.62;font-size:14px} .conversion-process-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Misc ── */ .route-arrow{transition:color .18s ease,transform .18s ease} /* ── Conversion card icons ── */ .conversion-card-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;margin-bottom:11px;border:1px solid rgba(112,180,255,.2);background:rgba(112,180,255,.07);transition:border-color .2s ease,background .2s ease} .conversion-card-icon svg{width:19px;height:19px;fill:none;stroke:var(--blue-bright);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* ══════════════════════════════════════════════════════════════════════════ 07. TRADING API INTEGRATION Only used by /services/… page 07. ══════════════════════════════════════════════════════════════════════════ */ /* ── What a trading API integration can do ── */ .api-function-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:34px} .api-function-card{position:relative;background:linear-gradient(180deg,rgba(26,37,58,.9),rgba(13,19,32,.94));border:1px solid var(--border);border-radius:18px;padding:24px 22px 22px;min-height:270px} .api-function-num{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--blue-bright);display:block;margin-bottom:14px} .api-function-card h3{font-size:18px;line-height:1.25;margin-bottom:10px} .api-function-card p{font-size:14px;color:var(--text-dim);line-height:1.62} .api-function-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .api-function-tags span,.tech-chip-row span{border:1px solid rgba(96,165,250,.2);background:rgba(59,130,246,.08);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;color:var(--text-2)} /* ── Trading API page components ── */ .api-note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:15px 18px;border:1px solid rgba(80,237,187,.2);background:rgba(80,237,187,.055);border-radius:12px} .api-note strong{white-space:nowrap;color:var(--green);font-size:13px} .api-note span{font-size:13px;color:var(--text-dim);line-height:1.55} .api-lifecycle{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:30px 0 20px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.022);box-shadow:0 10px 24px rgba(0,0,0,.12)} .api-lifecycle span{font-size:12px;font-weight:750;color:var(--text)} .api-lifecycle i{font-style:normal;color:var(--blue);font-weight:900} /* ── Integration layer cards + AUTH/MAP/RULE badges ── */ .api-workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px} .api-workflow-grid .workflow-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:220px;padding:23px 22px 22px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008)),var(--surface);overflow:hidden} .api-workflow-grid .workflow-card h3{margin:0 0 9px!important;font-size:17px;line-height:1.32} .api-workflow-grid .workflow-card p{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-dim)} .api-workflow-unnumbered .workflow-card{padding-top:22px} .api-workflow-icon{width:42px;height:30px;border-radius:8px;background:rgba(59,130,246,.1);border:1px solid rgba(96,165,250,.18);color:var(--blue-bright);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;letter-spacing:.07em;margin-bottom:14px} /* ── Connectivity methods / protocol cards ── */ .protocol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:32px} .protocol-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px} .protocol-label{width:42px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.1);border:1px solid rgba(96,165,250,.18);font-size:11px;font-weight:900;letter-spacing:.07em;color:var(--blue-bright);margin-bottom:14px} .protocol-card h3{font-size:17px;margin-bottom:8px} .protocol-card p{font-size:14px;color:var(--text-dim);line-height:1.62} .protocol-card-link{display:block;color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease} .protocol-card-link:hover{border-color:rgba(96,165,250,.4);transform:translateY(-2px)} /* ── Misc ── */ .tech-chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px} /* ── Integration scope cards (accent colour per card) ── */ .api-specialized-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px} .api-specialized-card{position:relative;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008)),var(--surface);padding:24px;min-width:0;box-shadow:0 14px 32px rgba(0,0,0,.16)} .api-specialized-card.primary{border-color:rgba(112,180,255,.22);background:linear-gradient(145deg,rgba(var(--is-accent-rgb),.11),transparent 60%),#111b2d;--is-accent:#8abaff;--is-accent-rgb:102,160,255;position:relative;overflow:hidden;display:flex;flex-direction:column;padding-top:27px;box-shadow:0 12px 32px rgba(0,0,0,.14);transition:border-color .22s ease,box-shadow .22s ease,background .22s ease} .api-specialized-kicker{display:inline-flex;align-items:center;min-height:23px;padding:4px 8px;border-radius:7px;background:rgba(38,132,255,.08);color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.08em;margin-bottom:14px} .api-specialized-card h3{margin:0 0 9px;font-size:19px;line-height:1.28;color:var(--text)} .api-specialized-card p{margin:0;color:var(--text-dim);font-size:14px;line-height:1.68} .api-specialized-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px} .api-specialized-tags span,.api-example-tags span{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);font-size:11px;font-weight:700;color:var(--text-2)} .api-specialized-grid>.api-specialized-card:nth-child(2){--is-accent:#81ddf4;--is-accent-rgb:93,209,236} .api-specialized-grid>.api-specialized-card:nth-child(3){--is-accent:#7ae3c0;--is-accent-rgb:79,216,172} .api-specialized-grid>.api-specialized-card:nth-child(4){--is-accent:#b4aaff;--is-accent-rgb:161,145,255} .api-specialized-card.primary::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;background:linear-gradient(90deg,var(--is-accent),rgba(var(--is-accent-rgb),.04))} .api-specialized-card.primary>*{position:relative;z-index:1} .api-specialized-card.primary .api-scope-mark{position:absolute;left:24px;top:24px;display:grid;place-items:center;width:54px;height:54px;padding:12px;color:var(--is-accent);border:1px solid rgba(var(--is-accent-rgb),.28);border-radius:13px;background:rgba(var(--is-accent-rgb),.09);box-shadow:inset 0 1px rgba(255,255,255,.06);pointer-events:none;opacity:1;transform:none} .api-specialized-card.primary .api-scope-mark svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .api-specialized-card.primary .api-specialized-kicker{align-self:flex-end;max-width:calc(100% - 80px);min-height:54px;display:flex;align-items:center;margin:0 0 24px;padding:0;border:0;background:none;text-align:right;color:var(--is-accent);font-size:12px;font-weight:800;letter-spacing:.13em} .api-specialized-card.primary h3{padding-right:0} .api-specialized-card.primary:hover{border-color:rgba(var(--is-accent-rgb),.6);box-shadow:0 14px 42px rgba(0,0,0,.25),inset 0 0 32px rgba(var(--is-accent-rgb),.04);transform:none} /* ── Secondary integration scope cards ── */ .api-secondary-scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px} .api-secondary-scope article{border:1px solid var(--border);border-radius:14px;padding:18px 19px;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease,background .2s ease,transform .2s ease} .api-secondary-scope h3{font-size:15px;margin:0 0 7px;line-height:1.35} .api-secondary-scope p{font-size:13px;line-height:1.62;color:var(--text-dim);margin:0} .api-secondary-scope article:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Integration scope card icons ── */ .api-scope-note{margin-top:16px} /* ── Trading API workflow examples ── */ .api-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .api-example-card{position:relative;min-width:0;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.006)),var(--surface);padding:21px 20px;box-shadow:0 12px 28px rgba(0,0,0,.14)} .api-example-num{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--blue);margin-bottom:10px} .api-example-card h3{font-size:16px;line-height:1.35;margin:0 0 8px} .api-example-card p{font-size:13.5px;line-height:1.65;color:var(--text-dim);margin:0} .api-example-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} /* ── Market data providers strip ── */ .api-provider-strip{margin-top:18px;border:1px solid rgba(96,165,250,.18);background:linear-gradient(180deg,rgba(59,130,246,.055),rgba(255,255,255,.008)),var(--surface);border-radius:15px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:22px} .api-provider-copy{min-width:0;max-width:720px} .api-provider-label{display:block;font-size:10px;font-weight:900;letter-spacing:.09em;color:var(--blue-bright);margin-bottom:6px} .api-provider-copy p{margin:0;color:var(--text-dim);font-size:13.5px;line-height:1.62} .api-provider-copy strong{color:var(--text-2)} .api-provider-tags{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap} .api-provider-tags span{font-size:11px;font-weight:800;color:var(--text-2);border:1px solid var(--border);background:rgba(255,255,255,.025);border-radius:9px;padding:7px 9px;white-space:nowrap} /* ── Flow connector — animated arrow between overview stages ── */ .sig-conn-bi svg{height:13px} .sig-conn-flow-rev{animation:sigConnFlowRev 1.6s linear infinite} /* ══════════════════════════════════════════════════════════════════════════ 08. CUSTOM TRADING SOFTWARE DEVELOPMENT Only used by /services/… page 08. ══════════════════════════════════════════════════════════════════════════ */ /* ── Service Overview — external software diagram ── */ .software-diagram{border:1px solid rgba(119,145,178,.2);background:linear-gradient(145deg,rgba(17,29,48,.96),rgba(8,18,32,.96));border-radius:22px;padding:22px;box-shadow:0 20px 55px rgba(0,0,0,.22)} .software-diagram-stage{border:1px solid rgba(119,145,178,.16);background:rgba(255,255,255,.025);border-radius:16px;padding:15px 16px} .software-diagram-stage strong{display:block;color:var(--text);font-size:14px;margin-bottom:8px} .software-diagram-stage span{display:block;color:var(--text-2);font-size:12px;line-height:1.55} .software-diagram-stage.core{border-color:rgba(37,99,235,.42);background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(22,163,74,.05))} .software-diagram-flow{display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:900;font-size:18px;height:28px} .software-diagram-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .software-diagram-foot{margin-top:13px;font-size:11px;color:var(--text-dim);text-align:center;letter-spacing:.02em} .software-diagram-animated{width:100%;position:relative;overflow:hidden} .software-diagram-animated:after{content:"";position:absolute;inset:-45% auto auto -28%;width:58%;height:95%;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 68%);pointer-events:none;animation:softwareAmbient 7s ease-in-out infinite alternate} .software-diagram-animated .software-diagram-stage{position:relative;overflow:hidden;transition:border-color .25s ease,background .25s ease} .software-diagram-animated .software-diagram-stage:after{content:"";position:absolute;right:12px;top:12px;width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.32);animation:softwarePulse 2.6s ease-out infinite} .software-diagram-animated .software-diagram-stage:nth-child(2):after{animation-delay:.8s} .software-diagram-animated .software-diagram-stage.core:after{background:#60a5fa;animation-delay:.35s} .software-diagram-animated .software-diagram-stage.core{animation:softwareCoreGlow 4.8s ease-in-out infinite} .software-diagram-animated .software-diagram-flow span{display:inline-block;animation:softwareFlowArrow 1.7s ease-in-out infinite} /* ── Custom software capabilities cards ── */ .software-build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .software-build-grid>.software-card,.software-use-grid>.software-use-card{--sc-accent:#8abaff;--sc-accent-rgb:102,160,255;position:relative;overflow:hidden;padding-top:26px} .software-build-grid>.software-card:nth-child(2),.software-use-grid>.software-use-card:nth-child(2){--sc-accent:#81ddf4;--sc-accent-rgb:93,209,236} .software-build-grid>.software-card:nth-child(3),.software-use-grid>.software-use-card:nth-child(3){--sc-accent:#7ae3c0;--sc-accent-rgb:79,216,172} .software-build-grid>.software-card:nth-child(4),.software-use-grid>.software-use-card:nth-child(4){--sc-accent:#b4aaff;--sc-accent-rgb:161,145,255} .software-build-grid>.software-card:nth-child(5),.software-use-grid>.software-use-card:nth-child(5){--sc-accent:#ffc98a;--sc-accent-rgb:245,183,110} .software-build-grid>.software-card:nth-child(6),.software-use-grid>.software-use-card:nth-child(6){--sc-accent:#f5a3c7;--sc-accent-rgb:233,143,182} .software-build-grid>.software-card::before,.software-use-grid>.software-use-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:2px;background:linear-gradient(90deg,var(--sc-accent),rgba(var(--sc-accent-rgb),.04))} .software-build-grid>.software-card>*,.software-use-grid>.software-use-card>*{position:relative;z-index:1} .software-build-grid>.software-card:hover,.software-use-grid>.software-use-card:hover{border-color:rgba(var(--sc-accent-rgb),.55);background:rgba(var(--sc-accent-rgb),.05)} /* ── Typical projects cards ── */ .software-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .software-card,.software-use-card{border:1px solid rgba(119,145,178,.18);background:linear-gradient(145deg,rgba(17,29,48,.92),rgba(9,19,34,.92));border-radius:18px;padding:22px;min-height:100%} .software-card h3,.software-use-card h3{font-size:17px;line-height:1.25;margin:0 0 10px;color:var(--text)} .software-card p,.software-use-card p{font-size:13px;line-height:1.65;color:var(--text-2);margin:0} .software-card-tags,.software-use-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .software-card-tags span,.software-use-tags span{border:1px solid rgba(119,145,178,.16);background:rgba(255,255,255,.025);border-radius:8px;padding:6px 8px;color:var(--text-dim);font-size:10px;font-weight:700} .software-card,.software-use-card,.software-fit-card{transition:border-color .2s ease,background .2s ease,transform .2s ease} .software-card:hover,.software-use-card:hover,.software-fit-card:hover{border-color:rgba(112,180,255,.42);background:rgba(112,180,255,.05);transform:translateY(-2px)} /* ── Project flow chains ── */ .software-route{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;margin-bottom:0} .software-route span{font-size:11px;font-weight:800;color:var(--text)} .software-route i{font-style:normal;color:var(--blue);font-weight:900} /* ── When custom software is the right fit ── */ .software-fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .software-fit-card{border:1px solid rgba(119,145,178,.16);background:rgba(255,255,255,.02);border-radius:17px;padding:21px} .software-fit-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-weight:800;margin-bottom:9px} .software-fit-card h3{font-size:17px;margin:0 0 8px;color:var(--text)} .software-fit-card p{font-size:12.5px;line-height:1.65;color:var(--text-2);margin:0} .software-fit-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:#9cc1ff;font-size:11.5px;font-weight:800;text-decoration:none} .software-fit-link:hover{color:var(--text)} /* ── Misc ── */ .custom-software-hero h1{font-size:clamp(34px,4.05vw,54px)} /* ── Python / C# stack cards ── */ .software-stack-grid{margin-top:30px} .software-stack-card{transform:none!important;transition:border-color .2s ease,background .2s ease!important} .software-stack-card:hover{transform:none!important;border-color:rgba(112,180,255,.45);background:rgba(112,180,255,.05)} .software-stack-note{margin-top:16px;border:1px solid var(--border);border-radius:14px;padding:15px 17px;background:rgba(59,130,246,.035);display:flex;gap:10px;align-items:flex-start} .software-stack-note strong{font-size:12px;color:var(--text);white-space:nowrap} .software-stack-note span{font-size:12px;line-height:1.55;color:var(--text-dim)} /* ── Platform & broker connectivity cards ── */ .software-connectivity-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px} .software-connect-card>p{margin-bottom:16px} /* ── Custom software page components ── */ .software-environment-callout{margin-top:18px} .software-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 0 rgba(74,222,128,.35);animation:softwarePulse 2.4s ease-out infinite} /* ── Software platform cards ── */ .software-platform-route-label{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;margin:4px 0 15px;border:1px solid rgba(37,99,235,.28);border-radius:999px;background:rgba(37,99,235,.075);color:#9cc1ff;font-size:11px;font-weight:800;letter-spacing:.01em} .software-platform-cases{display:grid;gap:9px} .software-platform-cases>div{border:1px solid rgba(255,255,255,.075);background:rgba(255,255,255,.022);border-radius:11px;padding:10px 11px} .software-platform-cases strong{display:block;font-size:11.5px;line-height:1.4;color:var(--text);margin-bottom:4px} .software-platform-cases span{display:block;font-size:10.8px;line-height:1.5;color:var(--text-dim)} /* ── Capability / project card icons ── */ .soft-card-icon{display:grid;place-items:center;width:34px;height:34px;padding:7px;margin-bottom:12px;color:var(--sc-accent);border:1px solid rgba(var(--sc-accent-rgb),.26);border-radius:9px;background:rgba(var(--sc-accent-rgb),.09);box-shadow:inset 0 1px rgba(255,255,255,.05)} .soft-card-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════════════ Every media query in this file lives here rather than beside the component it modifies. That is deliberate: media queries add no specificity, so a plain rule declared later in the file beats an earlier media rule. With the responsive rules interleaved per section, a base rule in a page section was overriding a breakpoint rule from the shared section, and layouts silently reverted to their desktop columns on phones. Keeping them last guarantees breakpoints always win. They are grouped by condition, widest first, and each rule is labelled with the block it belongs to so it can still be traced back. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1100px){ /* Typical projects cards */ .software-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1050px){ /* What a trading API integration can do */ .api-function-grid,.protocol-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Integration layer cards + AUTH/MAP/RULE badges */ .api-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1041px){ /* Service Overview — two-column layout */ .svc-summary-card{grid-template-columns:minmax(0,.94fr) minmax(410px,1.06fr)} /* Service Overview — diagram column */ .svc-architecture{padding:24px 26px} } @media (max-width:1040px){ /* Misc */ .service-page .services-grid{grid-template-columns:repeat(2,1fr)} .service-page .clients-grid{grid-template-columns:repeat(2,1fr)} /* Service Overview — two-column layout */ .svc-summary-card{grid-template-columns:1fr} /* Service Overview — diagram column */ .svc-architecture{border-left:0;border-top:1px solid var(--border)} /* Shared service-page components */ .svc-tech-components.full .svc-chip-list{flex-wrap:wrap} .svc-tech-components.full .svc-chip-list span{flex:0 1 auto} /* Capabilities panel */ .svc-capability-panel{grid-template-columns:repeat(2,minmax(0,1fr))} .svc-capability-group,.svc-capability-group:nth-child(n){grid-column:auto;border-right:1px solid var(--border);border-bottom:1px solid var(--border)} .svc-capability-group:nth-child(even){border-right:0} .svc-capability-group:nth-child(5),.svc-capability-group:nth-child(6){border-bottom:0} /* Development process — step flow */ .service-page .flow-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:0} .service-page .flow-row::after,.service-page .flow-node::after{display:none} /* To Get Started / At Delivery blocks */ .project-boundaries{grid-template-columns:1fr} /* Platform-specific copier cards */ .copier-platforms .plat-sub{min-height:0!important;max-width:420px} /* Service Overview — three-stage flow diagram */ .prop-flow-simple-body{grid-template-columns:1fr 28px 1fr 28px 1fr;padding:18px 12px} .prop-flow-step{padding:14px 10px} .prop-flow-items span{font-size:9.8px} /* Why Nordman cards */ .svc-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Ready-made trade copier products */ .copier-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Automation workflow steps */ .prop-workflow-grid{grid-template-columns:1fr} .prop-workflow-connector{height:24px;transform:rotate(90deg)} /* Prop platform badges */ .prop-platforms{grid-template-columns:repeat(3,minmax(0,1fr))!important} /* Signal inputs & integrations grid */ .signal-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Routing & account structure cards */ .signal-routing-grid{grid-template-columns:1fr 1fr} /* Audience cards */ .svc-audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Copier architecture axes (deployment / connectivity / accounts) */ .copier-axis{grid-template-columns:1fr} .copier-axis-head{border-right:0;border-bottom:1px solid var(--border);padding:0 0 15px} .copier-axis-options{grid-template-columns:repeat(2,minmax(0,1fr))} /* Platform-specific copier cards */ .copier-platforms{grid-template-columns:repeat(2,minmax(0,1fr))!important} /* Service Overview — live trade-copy map */ .copier-live-canvas{min-height:320px} /* Platform-specific conversion cards + route tiles */ .conversion-platform-grid,.conversion-lang-grid,.conversion-equivalence{grid-template-columns:1fr} /* Platform adaptation & equivalence cards */ .conversion-translation-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Conversion workflow step cards */ .conversion-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 1040px){ /* Mobile mega-menu bridge */ .header .nav .mega-col .mega-col-label{display:none!important} } @media (max-width:980px){ /* Why Nordman cards (API page variant) */ .api-why-grid{grid-template-columns:1fr 1fr} /* Shared service-page components */ .svc-usecases-grid{grid-template-columns:repeat(2,minmax(0,1fr))} /* Integration scope cards (accent colour per card) */ .api-specialized-grid{grid-template-columns:1fr 1fr} /* Secondary integration scope cards */ .api-secondary-scope{grid-template-columns:1fr} /* Trading API workflow examples */ .api-example-grid{grid-template-columns:1fr 1fr} /* Market data providers strip */ .api-provider-strip{align-items:flex-start;flex-direction:column} .api-provider-tags{justify-content:flex-start} } @media (max-width:900px){ /* Ready-made trade copier products */ .copier-products-track .cat-card{flex:0 0 calc((100% - 16px)/2);min-width:200px} /* Platform-specific signal copier cards */ .signal-platforms-four{grid-template-columns:repeat(2,minmax(0,1fr))!important} /* Misc */ .signal-source-routes{padding-left:0;padding-top:18px;border-left:0;border-top:1px solid var(--border)} .signal-other-platforms{align-items:flex-start;flex-direction:column} .signal-other-platforms-chips{justify-content:flex-start;min-width:0} /* Telegram & Discord copier cards */ .signal-messaging-grid{grid-template-columns:1fr} /* Python / C# stack cards */ .software-stack-note{flex-direction:column} .software-stack-note strong{white-space:normal} } @media (max-width:820px){ /* Prop platform badges */ .prop-platforms{grid-template-columns:repeat(2,minmax(0,1fr))!important} /* Who this is for cards */ .prop-audience-grid{grid-template-columns:1fr} } @media (max-width:760px){ /* Shared service-page components */ .svc-tech-components.full{grid-template-columns:1fr} .svc-tech-components.full .svc-chip-list span{flex:0 1 auto} /* Automation workflow steps */ .prop-workflow-related-grid{grid-template-columns:1fr} /* Service Overview — live trade-copy map */ .copier-live-followers{right:10px;width:124px} .copier-live-node.master{left:10px;width:112px} .copier-live-log{left:10px;right:144px} .copier-live-engine{transform:translate(-50%,-50%) scale(.86)} /* Custom vs ready-made comparison */ .copier-choice-panel{grid-template-columns:1fr;gap:10px} .copier-choice-arrow{height:24px} .copier-choice-arrow::before,.copier-choice-arrow::after{display:none} } @media (max-width:720px){ /* Custom software page components */ .software-environment-callout .btn{width:100%;justify-content:center} /* Service Overview — external software diagram */ .software-diagram-grid{grid-template-columns:1fr} /* Custom software capabilities cards */ .software-build-grid,.software-use-grid,.software-fit-grid{grid-template-columns:1fr} /* Typical projects cards */ .software-card,.software-use-card{padding:18px} /* Misc */ .custom-software-hero h1{font-size:clamp(32px,10vw,42px)} /* Platform & broker connectivity cards */ .software-connectivity-grid{grid-template-columns:1fr} /* Custom software page components */ .software-environment-callout{align-items:flex-start;flex-direction:column} /* Software platform cards */ .software-platform-route-label{white-space:normal} } @media (max-width:700px){ /* Ready-made trade copier products */ .copier-special-grid,.copier-products-grid{grid-template-columns:1fr} .copier-products-grid{grid-template-columns:1fr} /* Platform & environment integration cards */ .api-function-grid,.protocol-grid,.api-platform-grid,.api-workflow-grid{grid-template-columns:1fr} .api-platform-head{flex-direction:column;gap:8px} .api-platform-title{gap:9px} /* Other environments callout */ .other-api-callout{align-items:flex-start;flex-direction:column} /* Signal inputs & integrations grid */ .signal-input-grid,.signal-routing-grid{grid-template-columns:1fr} /* Signal source route chips */ .signal-route-chips span{font-size:10px} /* Audience cards */ .svc-audience-grid{grid-template-columns:1fr} /* Copier architecture axes (deployment / connectivity / accounts) */ .copier-axis-options{grid-template-columns:1fr} /* Platform-specific copier cards */ .copier-platforms{grid-template-columns:1fr!important} /* Trading API page components */ .api-note{display:block} .api-note strong{display:block;margin-bottom:5px;white-space:normal} } @media (max-width:680px){ /* Misc */ #convertible-software .services-grid{margin-top:26px} /* To Get Started / At Delivery blocks */ .project-boundary{padding:17px} /* Cross-platform conversion components */ .conversion-source-callout .btn{width:100%;justify-content:center} /* Why Nordman cards (API page variant) */ .api-why-grid{grid-template-columns:1fr} /* Platform-specific conversion cards + route tiles */ .conversion-platform-grid{gap:15px} .conversion-platform-card{padding:20px} .conversion-platform-head{display:block} .conversion-platform-status{margin-top:10px} .conversion-platform-link-arrow{opacity:1;transform:none} /* Conversion route tiles */ .conversion-routes{grid-template-columns:1fr} /* Cross-platform conversion components */ .conversion-source-callout{grid-template-columns:1fr} /* Beyond platform-to-platform (language cards) */ .conversion-lang-card{padding:20px} /* Platform adaptation & equivalence cards */ .conversion-translation-grid,.conversion-process-grid{grid-template-columns:1fr} /* Trading API page components */ .api-lifecycle{justify-content:flex-start;gap:7px} .api-lifecycle span{font-size:11px} .api-lifecycle i{display:none} /* Integration scope cards (accent colour per card) */ .api-specialized-grid{grid-template-columns:1fr} .api-specialized-card,.api-example-card{padding:19px 17px} /* Trading API workflow examples */ .api-example-grid{grid-template-columns:1fr} /* Market data providers strip */ .api-provider-strip{padding:17px 16px} .api-provider-tags span{white-space:normal} } @media (max-width:640px){ /* Ready-made trade copier products */ .copier-products-track .cat-card{flex:0 0 100%;min-width:0} } @media (max-width:600px){ /* Misc */ .service-page .services-grid,.service-page .clients-grid{grid-template-columns:1fr} .service-page .hero-trust{grid-template-columns:1fr} .faq-question span:first-child{font-size:15px} .faq-answer p{padding-right:0} /* Service Overview — two-column layout */ .svc-summary-copy,.svc-architecture{padding:22px} /* Capabilities panel */ .svc-capability-panel{grid-template-columns:1fr} .svc-capability-group,.svc-capability-group:nth-child(n){grid-column:auto;border-right:0;border-bottom:1px solid var(--border);padding:20px} .svc-capability-group:nth-child(6){border-bottom:0} /* Development process — step flow */ .service-page .flow-wrap{padding:24px 20px} .service-page .flow-row{grid-template-columns:1fr;padding-left:25px;gap:12px;position:relative} .service-page .flow-row::before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,rgba(112,180,255,.55),rgba(255,255,255,.14) 50%,rgba(80,237,187,.45))} .service-page .flow-node::before{content:"";position:absolute;left:-22px;top:24px;width:9px;height:9px;border-radius:50%;border:2px solid rgba(112,180,255,.5);background:var(--surface-2);box-shadow:0 0 0 4px var(--surface)} .service-page .flow-node.active::before{border-color:var(--blue-bright);background:var(--blue-bright)} .service-page .flow-node.success::before{border-color:var(--green);background:var(--green)} /* To Get Started / At Delivery blocks */ .project-boundary{padding:17px} /* Service Overview — three-stage flow diagram */ .prop-flow-simple-body{grid-template-columns:1fr;gap:9px;padding:14px} .prop-flow-arrow{height:22px;transform:rotate(90deg)} .prop-flow-arrow span{animation:none;-webkit-text-fill-color:var(--blue-bright);color:var(--blue-bright)} .prop-flow-step strong{min-height:0} .prop-flow-simple-head{font-size:8.5px} /* Platform-specific signal copier cards */ .signal-platforms-four .plat-sub{min-height:0} /* Flow connector — animated arrow between overview stages */ .sig-conn{width:100%;display:flex;justify-content:center} .sig-conn svg{width:26px;height:10px} /* Shared service-page components */ .svc-inline-cta{justify-content:flex-start} .svc-tech-components{grid-template-columns:1fr;gap:10px} .svc-strip-label{padding-top:0} /* Project scope frame */ .svc-scope-frame{grid-template-columns:1fr} .svc-scope-column+ .svc-scope-column{border-left:0;border-top:1px solid var(--border)} /* Why Nordman cards */ .svc-why-grid{grid-template-columns:1fr} /* Automation workflow steps */ .prop-workflow-stage{padding:22px 20px} .prop-workflow-stage>p{font-size:13px} /* Prop platform badges */ .prop-platforms{grid-template-columns:1fr!important} /* Service Overview — bot runtime loop diagram */ .bot-loop-body{display:flex;flex-direction:column;gap:0;padding:18px 18px 18px 46px} .bot-loop-body > :nth-child(2){order:1} .bot-loop-body > :nth-child(4){order:2} .bot-loop-body > :nth-child(10){order:3} .bot-loop-body > :nth-child(8){order:4} .bot-loop-body > :nth-child(6){order:5} .bot-loop-gap{display:none} .bot-loop-wires{left:24px;right:auto;top:26px;bottom:auto;width:2px;height:calc(100% - 52px)} .bot-loop-cell{margin-bottom:12px} .bot-loop-cell::before{content:"";position:absolute;left:-27px;top:19px;width:11px;height:11px;border-radius:50%;background:#0b1220;border:2px solid var(--blue-bright);box-shadow:0 0 8px rgba(112,180,255,.55);z-index:2} .bot-loop-cell-exec::before{border-color:var(--green);box-shadow:0 0 8px rgba(80,237,187,.55)} .bot-loop-core{width:auto;height:auto;justify-self:stretch;align-self:stretch;border-radius:999px;border:1px dashed rgba(112,180,255,.35);background:rgba(112,180,255,.06);display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px} .bot-loop-core em{font-size:15px;animation-duration:4s} .bot-loop-core::after{content:"repeats from 01 on every tick";font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;color:var(--text-dim)} .bot-loop-core::before{content:"";position:absolute;left:-27px;top:50%;margin-top:-5px;width:9px;height:9px;border-radius:50%;background:#0b1220;border:2px solid rgba(112,180,255,.55);z-index:2} /* Misc */ .bot-wire-track,.bot-wire-flow{d:path("M 50 0 V 100")} .bot-wire-flow{stroke-dasharray:14 110;animation-duration:3.2s;stroke-width:2.6} /* Service Overview — indicator pipeline + mini chart */ .ind-pipe-body{grid-template-columns:1fr;gap:10px;padding:16px 16px 12px 42px} .ind-pipe-wire{left:22px;right:auto;top:20px;bottom:auto;transform:none;width:2px;height:calc(100% - 40px)} .ind-pipe-stage::before{content:"";position:absolute;left:-25px;top:17px;width:11px;height:11px;border-radius:50%;background:#0b1220;border:2px solid var(--blue-bright);box-shadow:0 0 8px rgba(112,180,255,.55);z-index:2} .ind-pipe-stage-out::before{border-color:var(--green);box-shadow:0 0 8px rgba(80,237,187,.55)} .ind-pipe-chart{margin:0 16px 14px} /* Misc */ .ind-wire-track,.ind-wire-flow{d:path("M 50 0 V 100")} .ind-wire-flow{stroke-dasharray:12 90;animation-duration:2.8s} /* Platform-specific signal copier cards */ .signal-platforms-four{grid-template-columns:1fr!important} /* Shared service-page components */ .svc-usecases-grid{grid-template-columns:1fr} /* Integration scope cards (accent colour per card) */ .api-specialized-card.primary .api-scope-mark{width:46px;height:46px;padding:10px} .api-specialized-card.primary .api-specialized-kicker{min-height:46px;max-width:calc(100% - 66px)} /* Capability / project card icons */ .soft-card-icon{width:31px;height:31px;padding:6px} /* Cascade fix — Bi-directional connector keeps its taller box on phones: it draws two arrowheads, and the 10px single-arrow height clipped them. */ .sig-conn-bi svg{height:13px} } @media (max-width:560px){ /* Trade copier page components */ .copier-prop-note{align-items:flex-start} /* Service Overview — live trade-copy map */ .copier-live-canvas{min-height:590px} .copier-live-lines{opacity:.6;display:none} .copier-live-node.master{top:16px;left:14px;width:auto;min-height:78px;right:14px;align-items:flex-start} .copier-live-engine{top:126px;left:50%;transform:translateX(-50%) scale(.88);transform-origin:top center} .copier-live-followers{top:274px;right:14px;bottom:auto;width:auto;left:14px;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,74px);gap:9px} .copier-live-log{left:14px;right:14px;bottom:10px} .copier-live-log span:last-child{display:none} .copier-live-head{padding:0 11px;font-size:8.5px;gap:10px} .copier-live-canvas::before{content:"";position:absolute;z-index:0;left:50%;top:90px;bottom:48px;width:1px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(112,180,255,.45),rgba(112,180,255,.16) 48%,rgba(80,237,187,.32))} .copier-live-node.follower{min-height:74px;padding:10px 12px} } @media (max-width:520px){ /* Route chip stacks */ .route-stack{grid-template-columns:1fr} /* Python / C# stack cards */ .software-stack-card .route-stack{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ /* Capabilities panel */ .svc-capability-group,.flow-node,.project-boundary{transition:none} /* Development process — step flow */ .flow-node:hover,.project-boundary:hover{transform:none} /* Service Overview — three-stage flow diagram */ .prop-flow-arrow span{animation:none;-webkit-text-fill-color:var(--blue-bright);color:var(--blue-bright)} /* Service Overview — status header */ .prop-overview-status i{animation:none!important} /* Flow connector — animated arrow between overview stages */ .sig-conn-flow{animation:none;stroke-dasharray:none;opacity:.55} /* Routing & account structure cards */ .prop-workflow-stage,.prop-workflow-related,.signal-routing-card,.svc-audience-card,.prop-audience-card{transition:none} .prop-workflow-stage:hover,.prop-workflow-related:hover,.signal-routing-card:hover,.svc-audience-card:hover,.prop-audience-card:hover{transform:none} /* Integration scope cards (accent colour per card) */ .api-specialized-card,.api-function-card,.workflow-card,.api-example-card,.api-platform-card,.protocol-card,.api-why-grid article{transition:none} .api-specialized-card:hover,.api-function-card:hover,.workflow-card:hover,.api-example-card:hover,.api-platform-card:hover,.protocol-card:hover,.api-why-grid article:hover{transform:none} /* Service Overview — bot runtime loop diagram */ .bot-loop-core em{animation:none} .bot-loop-cell{transition:none} /* Misc */ .bot-wire-flow{animation:none;stroke-dasharray:none;opacity:.5} /* Service Overview — indicator pipeline + mini chart */ .ind-chart-line{animation:none;stroke-dashoffset:0} .ind-chart-mark{animation:none;opacity:1} .ind-pipe-stage{transition:none} /* Misc */ .ind-wire-flow{animation:none;stroke-dasharray:none;opacity:.5} /* Telegram & Discord copier cards */ .signal-messaging-card{transition:none} .signal-messaging-card:hover{transform:none} /* Copier architecture axes (deployment / connectivity / accounts) */ .copier-axis,.copier-axis-option,.copier-choice-card{transition:none} .copier-axis-option:hover,.copier-choice-card:hover{transform:none} /* Service Overview — live trade-copy map */ .route-pulse,.engine-ring::after,.copier-live-status i,.copy-state{animation:none!important} /* Misc */ .copy-state{opacity:1} /* Platform-specific conversion cards + route tiles */ .conversion-platform-card,.conversion-route,.conversion-equivalence-main,.conversion-equivalence-side,.conversion-lang-card,.conversion-translation-card{transition:none} /* Conversion route tiles */ .conversion-route:hover{transform:none} /* Beyond platform-to-platform (language cards) */ .conversion-route:hover,.conversion-lang-card:hover,.conversion-translation-card:hover{transform:none} /* Conversion workflow step cards */ .conversion-process-card,.conversion-card-icon{transition:none} .conversion-process-card:hover{transform:none} /* Integration scope cards (accent colour per card) */ .api-specialized-card.primary{transition:none} /* Secondary integration scope cards */ .api-secondary-scope article{transition:none} .api-secondary-scope article:hover{transform:none} /* Flow connector — animated arrow between overview stages */ .sig-conn-flow-rev{animation:none;stroke-dasharray:none;opacity:.55} /* Service Overview — external software diagram */ .software-diagram-animated:after,.software-diagram-animated .software-diagram-stage:after,.software-diagram-animated .software-diagram-stage.core,.software-diagram-animated .software-diagram-flow span,.software-live-dot{animation:none!important} /* Typical projects cards */ .software-card,.software-use-card,.software-fit-card,.software-stack-card{transition:none} .software-card:hover,.software-use-card:hover,.software-fit-card:hover{transform:none} } /* ══════════════════════════════════════════════════════════════════════════ KEYFRAMES Every animation referenced above. Each pairs with a prefers-reduced-motion rule in its own section. ══════════════════════════════════════════════════════════════════════════ */ @keyframes routePackets{to{stroke-dashoffset:-98}} @keyframes engineSpin{to{transform:rotate(360deg)}} @keyframes copierStatusPulse{50%{opacity:.35}} @keyframes copyState{0%,28%{opacity:.18}42%,78%{opacity:1}100%{opacity:.18}} @keyframes propArrowShimmer{0%{background-position:200% 0}100%{background-position:-20% 0}} @keyframes softwarePulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.32);opacity:.95}65%{box-shadow:0 0 0 7px rgba(74,222,128,0);opacity:1}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);opacity:.88}} @keyframes softwareCoreGlow{0%,100%{border-color:rgba(37,99,235,.38);box-shadow:inset 0 0 0 1px rgba(37,99,235,0)}50%{border-color:rgba(96,165,250,.62);box-shadow:inset 0 0 24px rgba(37,99,235,.06)}} @keyframes softwareFlowArrow{0%,100%{transform:translateY(-1px);opacity:.55}50%{transform:translateY(4px);opacity:1}} @keyframes softwareAmbient{0%{transform:translate3d(0,0,0);opacity:.65}100%{transform:translate3d(30%,18%,0);opacity:1}} @keyframes botWireFlow{from{stroke-dashoffset:124}to{stroke-dashoffset:0}} @keyframes botLoopSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes indWireFlow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} @keyframes indChartDraw{0%{stroke-dashoffset:520}55%,100%{stroke-dashoffset:0}} @keyframes indMarkPop{0%,42%{opacity:0;r:1}52%{opacity:1;r:4.2}62%,100%{opacity:1;r:3.4}} @keyframes sigConnFlow{from{stroke-dashoffset:32}to{stroke-dashoffset:0}} @keyframes sigConnFlowRev{from{stroke-dashoffset:32}to{stroke-dashoffset:0}} /* ══════════════════════════════════════════════════════════════════════════ SERVICES HUB — /services/ ══════════════════════════════════════════════════════════════════════════ The hub page that introduces all eight services. Its
carries class="service-page services-hub", and every rule below is scoped to that second class, so nothing here can reach the individual service pages. Merged from the page's own style blocks: the layers that had accumulated there (each re-declaring the same selectors) are resolved into one declaration per selector, and the full copy of new-design.css + service-pages.css that the page carried was dropped as duplicate. ══════════════════════════════════════════════════════════════════════════ */ /* ── Services hub — page scope ── */ .service-page.services-hub .hero-sub{max-width:675px} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-overview{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:34px;align-items:stretch} /* ── Service Overview — right-hand column ── */ .service-page.services-hub .hub-answer-card,.service-page.services-hub .hub-model{border:1px solid rgba(255,255,255,.10);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008)),var(--surface);box-shadow:0 16px 36px rgba(0,0,0,.20)} /* ── Overview answer card ── */ .service-page.services-hub .hub-answer-card{padding:28px} .service-page.services-hub .hub-answer-card .eyebrow{display:inline-block;margin-bottom:12px} .service-page.services-hub .hub-answer-card h2{font-size:clamp(25px,2.8vw,36px);margin-bottom:15px} .service-page.services-hub .hub-answer-card p{font-size:14.5px;line-height:1.75;margin-bottom:14px;color:var(--text-2)} .service-page.services-hub .hub-answer-card p:last-child{margin-bottom:0} /* ── Service Overview — right-hand column ── */ .service-page.services-hub .hub-model{padding:22px;display:flex;flex-direction:column;justify-content:center} .service-page.services-hub .hub-model-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-flow{display:grid;gap:8px} .service-page.services-hub .hub-flow-node{padding:13px 14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.022)} .service-page.services-hub .hub-flow-node strong{display:block;font-size:13.5px;color:var(--text);margin-bottom:4px} .service-page.services-hub .hub-flow-node span{display:block;font-size:11.5px;line-height:1.45;color:var(--text-dim)} .service-page.services-hub .hub-flow-arr{text-align:center;color:var(--blue-bright);font-size:16px;font-weight:900;line-height:1} /* ── Overview footnote ── */ .service-page.services-hub .hub-note{margin-top:14px;padding:12px 13px;border-left:2px solid var(--blue-bright);background:rgba(59,130,246,.055);font-size:11.5px;line-height:1.55;color:var(--text-2)} /* ── Core development services — service cards ── */ .service-page.services-hub .hub-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .service-page.services-hub .hub-service-card{--hc:102,160,255;position:relative;display:flex;flex-direction:column;min-width:0;min-height:255px;padding:28px 26px 24px;overflow:hidden;border:1px solid rgba(var(--hc),.25);border-radius:18px;background:linear-gradient(145deg,rgba(var(--hc),.12),transparent 62%),#111b2d;color:var(--text);box-shadow:none;transition:border-color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease} .service-page.services-hub .hub-service-card:hover{transform:translateY(-3px);border-color:rgba(var(--hc),.66);background-color:#142139;box-shadow:0 18px 42px rgba(0,0,0,.20)} .service-page.services-hub .hub-service-card .icon-box{margin-bottom:15px;margin:0} .service-page.services-hub .hub-service-card h3{position:relative;z-index:1;margin:1px 0 14px;line-height:1.3;padding-right:0;font-size:17px;min-height:0!important;max-width:none!important;margin-bottom:7px} .service-page.services-hub .hub-service-card p{margin-bottom:19px;position:relative;z-index:1;margin:0 0 22px;color:var(--text-2);font-size:13px;line-height:1.62;margin-top:0} .service-page.services-hub .hub-service-card .link-arrow{font-size:11.5px;padding-top:15px;border-top:1px solid rgba(255,255,255,.075);width:100%;margin-top:auto} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-selector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .service-page.services-hub .hub-choice{grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;--hc:102,160,255;position:relative;display:flex;flex-direction:column;min-height:285px;padding:25px 25px 23px;overflow:hidden;border:1px solid rgba(var(--hc),.20);border-radius:17px;background:linear-gradient(145deg,rgba(var(--hc),.055),transparent 58%),rgba(255,255,255,.016);transition:border-color .2s ease,background .2s ease,transform .2s ease} .service-page.services-hub .hub-choice:hover{transform:translateY(-2px);border-color:rgba(var(--hc),.48);background:linear-gradient(145deg,rgba(var(--hc),.085),transparent 58%),rgba(255,255,255,.022)} .service-page.services-hub .hub-choice strong{display:block;font-size:13.5px;margin-bottom:3px;color:var(--text)} .service-page.services-hub .hub-choice span{display:block;font-size:11.5px;line-height:1.45;color:var(--text-dim)} .service-page.services-hub .hub-choice .choice-service{font-size:11px;font-weight:800;color:#9cc1ff;text-align:right;white-space:nowrap} /* ── Context cards ── */ .service-page.services-hub .hub-context-grid{display:grid;grid-template-columns:1.25fr .8fr 1.25fr;gap:16px} .service-page.services-hub .hub-context-card{padding:22px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006)),var(--surface)} .service-page.services-hub .hub-context-card h3{font-size:18px;margin:0 0 8px} .service-page.services-hub .hub-context-card>p{font-size:12.5px;line-height:1.6;color:var(--text-dim);margin-bottom:15px} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-chips{display:flex;flex-wrap:wrap;gap:7px} .service-page.services-hub .hub-chips a,.service-page.services-hub .hub-chips span{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.025);font-size:10.5px;font-weight:750;color:var(--text-2)} .service-page.services-hub .hub-chips a:hover{border-color:rgba(112,180,255,.36);color:var(--blue-bright)} /* ── Context cards ── */ .service-page.services-hub .hub-context-link{display:inline-flex;margin-top:16px} .service-page.services-hub .hub-context-note{margin-top:18px;text-align:center;font-size:12.5px;color:var(--text-dim)} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px} .service-page.services-hub .hub-process-card{padding:17px 13px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.018);min-height:155px} .service-page.services-hub .hub-process-step{font-size:10px;font-weight:900;letter-spacing:.08em;color:var(--blue-bright);margin-bottom:10px} .service-page.services-hub .hub-process-card strong{display:block;font-size:13px;line-height:1.35;color:var(--text);margin-bottom:7px} .service-page.services-hub .hub-process-card p{font-size:10.8px;line-height:1.52;color:var(--text-dim);margin:0} /* ── Why Nordman cards ── */ .service-page.services-hub .hub-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .service-page.services-hub .hub-why-card{padding:21px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.018)} .service-page.services-hub .hub-why-card strong{display:block;font-size:14px;color:var(--text);margin:13px 0 7px} .service-page.services-hub .hub-why-card p{font-size:12px;line-height:1.58;color:var(--text-dim);margin:0} /* ── Core development services — service cards ── */ .service-page.services-hub .hub-service-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;background:linear-gradient(90deg,rgb(var(--hc)),transparent);opacity:1} .service-page.services-hub .hub-service-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px} .service-page.services-hub .hub-service-no,.service-page.services-hub .hub-service-custom-label{font-family:var(--font-mono);font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--text-mute)} .service-page.services-hub .hub-service-custom{background:linear-gradient(145deg,rgba(var(--hc),.12),transparent 62%),#111b2d} .service-page.services-hub .hub-service-custom::before{background:linear-gradient(90deg,rgb(var(--hc)),transparent);opacity:1} .service-page.services-hub .hub-service-custom .icon-box{background:linear-gradient(180deg,rgba(80,237,187,.14),rgba(80,237,187,.04));border-color:rgba(80,237,187,.28)} .service-page.services-hub .hub-service-custom .icon-box svg{stroke:var(--green)} .service-page.services-hub .hub-service-custom-label{color:var(--green)} /* ── Trading platforms — platform tiles ── */ .service-page.services-hub .hub-platform-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .service-page.services-hub .hub-platform-tile{border:1px solid rgba(255,255,255,.09);border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.007)),var(--surface);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 14px;transition:border-color .2s ease,background .2s ease,transform .2s ease} .service-page.services-hub .hub-platform-tile:hover{border-color:rgba(112,180,255,.4);transform:translateY(-2px)} .service-page.services-hub .hub-platform-tile strong{font-size:14px;color:var(--text)} .service-page.services-hub .hub-platform-tile span{font-size:10.5px;color:var(--text-dim);line-height:1.45} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-market-grid{grid-template-columns:repeat(5,minmax(0,1fr))} /* ── Technologies — platform languages / stack / protocols ── */ .service-page.services-hub .hub-tech-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .service-page.services-hub .hub-tech-card{position:relative;min-height:270px;padding:25px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:linear-gradient(155deg,rgba(112,180,255,.05),rgba(255,255,255,.012) 45%,rgba(255,255,255,.006)),var(--surface);box-shadow:0 16px 34px rgba(0,0,0,.16);--hc:102,160,255} .service-page.services-hub .hub-tech-card::before{content:"";position:absolute;left:25px;right:25px;top:0;height:2px;background:linear-gradient(90deg,var(--blue-bright),rgba(112,180,255,0));opacity:.5} .service-page.services-hub .hub-tech-top{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:14px} .service-page.services-hub .hub-tech-top h3{font-size:19px;margin:0} .service-page.services-hub .hub-tech-index{font-family:var(--font-mono);font-size:10px;font-weight:800;color:var(--blue-bright);letter-spacing:.12em;border:1px solid rgba(112,180,255,.22);border-radius:999px;padding:5px 8px;background:rgba(112,180,255,.05)} .service-page.services-hub .hub-tech-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .service-page.services-hub .hub-tech-links a{font-size:11.5px;font-weight:700;color:var(--text-2);padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.025);transition:.16s ease} .service-page.services-hub .hub-tech-links a:hover{background:rgba(112,180,255,.08);border-color:rgba(var(--hc),.5);color:var(--text)} .service-page.services-hub .hub-tech-card p{font-size:12.5px;line-height:1.65;color:var(--text-dim);margin-top:auto} /* ── Core development services — service cards ── */ .service-page.services-hub .hub-service-icon{top:24px;right:24px;display:grid;place-items:center;border:1px solid rgba(var(--hc),.30);background:rgba(var(--hc),.09);color:rgb(var(--hc));position:static;width:42px;height:42px;padding:9px;border-radius:11px;margin-bottom:14px} .service-page.services-hub .hub-service-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .service-page.services-hub .hub-service-link{position:relative;z-index:1;display:inline-flex;align-items:center;width:max-content;margin-top:auto;color:rgb(var(--hc));font-size:13.5px;font-weight:800;line-height:1.2;transition:transform .15s ease,color .15s ease} .service-page.services-hub .hub-service-card:hover .hub-service-link{transform:translateX(3px)} /* ── Services hub — shared pieces ── */ .service-page.services-hub .hub-choice::before{content:"";position:absolute;top:0;left:25px;right:25px;height:2px;background:linear-gradient(90deg,rgb(var(--hc)),transparent);opacity:.72} .service-page.services-hub .hub-choice-kicker{display:block;margin-bottom:13px;color:rgb(var(--hc))!important;font-family:var(--font-mono);font-size:10px!important;font-weight:800;letter-spacing:.12em;line-height:1.2!important;text-transform:uppercase} .service-page.services-hub .hub-choice h3{margin:0 0 12px;color:var(--text);font-size:18px;line-height:1.35} .service-page.services-hub .hub-choice p{margin:0 0 22px;color:var(--text-2);font-size:13.5px;line-height:1.68} .service-page.services-hub .hub-choice-recommended{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:auto;padding-top:17px;border-top:1px solid rgba(255,255,255,.075)} .service-page.services-hub .hub-choice-label{display:block;flex:0 0 auto;color:var(--text-dim)!important;font-family:var(--font-mono);font-size:10px!important;font-weight:700;letter-spacing:.08em;line-height:1.25!important;text-transform:uppercase} .service-page.services-hub .hub-choice-button{display:inline-flex;align-items:center;justify-content:center;min-height:37px;padding:9px 12px;border:1px solid rgba(var(--hc),.34);border-radius:9px;background:rgba(var(--hc),.09);color:rgb(var(--hc));font-size:11.5px;font-weight:800;line-height:1.2;text-align:center;transition:background .16s ease,border-color .16s ease,transform .16s ease} .service-page.services-hub .hub-choice-button:hover{border-color:rgba(var(--hc),.64);background:rgba(var(--hc),.15);transform:translateX(2px)} /* ── Service Overview — fan from requirement to the eight services ── */ .service-page.services-hub .hub-fan{position:relative;display:grid;grid-template-columns:minmax(0,124px) 58px 1fr;align-items:center;min-height:322px} .service-page.services-hub .hub-fan-source{grid-column:1;padding:14px;border:1px solid rgba(112,180,255,.3);border-radius:12px;background:rgba(112,180,255,.07);z-index:1} .service-page.services-hub .hub-fan-source strong{display:block;font-size:13px;color:var(--text);margin-bottom:5px} .service-page.services-hub .hub-fan-source span{font-size:10.5px;line-height:1.5;color:var(--text-dim)} .service-page.services-hub .hub-fan-wires{position:absolute;left:124px;top:0;width:58px;height:100%;pointer-events:none;z-index:0;overflow:visible} .service-page.services-hub .hub-fan-wires path{fill:none;vector-effect:non-scaling-stroke} .service-page.services-hub .hub-fan-track{stroke:rgba(112,180,255,.2);stroke-width:1.3} .service-page.services-hub .hub-fan-flow{stroke:var(--blue-bright);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:14 150;filter:drop-shadow(0 0 5px rgba(112,180,255,.8));animation:hubFanFlow 3.4s linear infinite} .service-page.services-hub .hub-fan-flow-b{animation-delay:.85s} .service-page.services-hub .hub-fan-flow-c{animation-delay:1.7s} .service-page.services-hub .hub-fan-flow-d{animation-delay:2.55s} .service-page.services-hub .hub-fan-list{grid-column:3;display:grid;gap:6px;z-index:1} .service-page.services-hub .hub-fan-list span{padding:7px 11px;border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:11.5px;font-weight:600;transition:border-color .18s ease,color .18s ease;border-color:rgba(var(--hc),.3);background:linear-gradient(180deg,rgba(var(--hc),.13),rgba(10,17,30,.94));color:var(--text)} .service-page.services-hub .hub-fan-list span:hover{color:var(--text);border-color:rgba(var(--hc),.6);background:linear-gradient(180deg,rgba(var(--hc),.2),rgba(10,17,30,.94))} /* ── Service selection — requirement/service grid, two across ── */ .service-page.services-hub .hub-fit-table{margin-top:30px;border-radius:var(--r-lg);border:0;background:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible} .service-page.services-hub .hub-fit-head{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,300px);gap:0;padding:12px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)} .service-page.services-hub .hub-fit-head span:last-child{grid-column:2} .service-page.services-hub .hub-fit-row{grid-template-columns:minmax(0,1fr) 54px minmax(0,300px);align-items:center;border-bottom:1px solid var(--border);transition:background .18s ease;display:flex;flex-direction:column;gap:0;padding:22px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface)} .service-page.services-hub .hub-fit-row:last-child{border-bottom:0} .service-page.services-hub .hub-fit-row:hover{background:linear-gradient(180deg,rgba(var(--hc),.08),rgba(255,255,255,.006)),var(--surface);border-color:rgba(var(--hc),.42)} .service-page.services-hub .hub-fit-need h3{line-height:1.35;color:var(--text);font-weight:700;font-size:15.5px;margin-bottom:7px} .service-page.services-hub .hub-fit-need p{font-size:12.5px;line-height:1.6;color:var(--text-dim);max-width:none;margin-bottom:16px} .service-page.services-hub .hub-fit-arrow{place-items:center;display:none} .service-page.services-hub .hub-fit-arrow svg{width:18px;height:18px;fill:none;stroke:rgba(var(--hc),.55);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease,transform .18s ease} .service-page.services-hub .hub-fit-row:hover .hub-fit-arrow svg{stroke:rgb(var(--hc));transform:translateX(3px)} .service-page.services-hub .hub-fit-service{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid rgba(var(--hc),.3);border-radius:10px;background:rgba(var(--hc),.07);color:var(--text);font-size:13px;font-weight:700;text-decoration:none;transition:border-color .18s ease,background .18s ease} .service-page.services-hub .hub-fit-service span{color:rgb(var(--hc));transition:transform .18s ease} .service-page.services-hub .hub-fit-row:hover .hub-fit-service{border-color:rgba(var(--hc),.6);background:rgba(var(--hc),.13)} .service-page.services-hub .hub-fit-row:hover .hub-fit-service span{transform:translateX(3px)} /* ── Trading platforms — platform tiles ── */ .service-page.services-hub .hub-platform-tile .platform-logo{width:auto;object-fit:contain;opacity:.9;margin-bottom:8px;transition:opacity .2s ease;height:32px;max-width:128px} .service-page.services-hub .hub-platform-tile:hover .platform-logo{opacity:1} /* ── Technologies — platform languages / stack / protocols ── */ .service-page.services-hub .hub-tech-grid>.hub-tech-card:nth-child(2){--hc:79,216,172} .service-page.services-hub .hub-tech-grid>.hub-tech-card:nth-child(3){--hc:161,145,255} .service-page.services-hub .hub-tech-icon{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;padding:8px;border:1px solid rgba(var(--hc),.28);border-radius:10px;background:rgba(var(--hc),.09);color:rgb(var(--hc))} .service-page.services-hub .hub-tech-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .service-page.services-hub .hub-tech-card h3{font-size:15.5px;line-height:1.3} .service-page.services-hub .hub-tech-card:hover{border-color:rgba(var(--hc),.45)} /* ── Service selection — requirement/service grid, two across ── */ .service-page.services-hub .hub-fit-head, .service-page.services-hub .hub-fit-row{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:0} /* ── Trading platforms — platform tiles ── */ .service-page.services-hub #platforms .hub-platform-grid, .service-page.services-hub #markets .market-grid, .service-page.services-hub #technologies .hub-tech-grid{margin-bottom:0} /* ── Service selection — requirement/service grid, two across ── */ .service-page.services-hub .hub-fit-need{padding-right:0;flex:1 1 auto} .service-page.services-hub .hub-fit-row>.hub-fit-service{margin-left:0;margin-top:auto;width:100%} .service-page.services-hub .hub-fit-head span:last-child, .service-page.services-hub .hub-fit-row>.hub-fit-service{position:relative} .service-page.services-hub .hub-fit-row>.hub-fit-service::before, .service-page.services-hub .hub-fit-head span:last-child::before{content:"";position:absolute;left:-26px;top:-18px;bottom:-18px;width:1px;background:var(--border)} .service-page.services-hub .hub-fit-head span:last-child::before{top:-12px;bottom:-12px} .service-page.services-hub .hub-fit-row>.hub-fit-service::before{display:none} /* ── Services hub — responsive ── Kept last for the same reason as the file's main RESPONSIVE section: media queries carry no extra specificity, so a later plain rule would otherwise beat them inside their own breakpoint. */ @media (max-width:1080px){ .service-page.services-hub .hub-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .service-page.services-hub .hub-context-grid{grid-template-columns:1fr 1fr} .service-page.services-hub .hub-context-card:first-child{grid-column:1/-1} .service-page.services-hub .hub-process{grid-template-columns:repeat(3,minmax(0,1fr))} .service-page.services-hub .hub-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .service-page.services-hub .hub-platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .service-page.services-hub .hub-tech-grid{grid-template-columns:1fr 1fr} .service-page.services-hub .hub-tech-card:last-child{grid-column:1/-1} } @media (max-width:860px){ .service-page.services-hub .hub-fit-head{display:none} .service-page.services-hub .hub-fit-arrow{display:none} .service-page.services-hub .hub-fit-need{padding-right:0} .service-page.services-hub .hub-fit-row>.hub-fit-service{margin-left:0} .service-page.services-hub .hub-fit-row>.hub-fit-service::before{display:none} .service-page.services-hub .hub-fit-table{grid-template-columns:1fr} } @media (max-width:820px){ .service-page.services-hub .hub-selector{grid-template-columns:1fr} } @media (max-width:760px){ .service-page.services-hub .hub-overview,.service-page.services-hub .hub-selector,.service-page.services-hub .hub-context-grid,.service-page.services-hub .hub-services-grid,.service-page.services-hub .hub-process,.service-page.services-hub .hub-why-grid{grid-template-columns:1fr} .service-page.services-hub .hub-context-card:first-child{grid-column:auto} .service-page.services-hub .hub-choice{grid-template-columns:1fr;min-height:0} .service-page.services-hub .hub-choice .choice-service{text-align:left} .service-page.services-hub .hub-process-card{min-height:auto} .service-page.services-hub .hub-services-grid,.service-page.services-hub .hub-platform-grid,.service-page.services-hub .hub-tech-grid,.service-page.services-hub .hub-market-grid{grid-template-columns:1fr} .service-page.services-hub .hub-tech-card:last-child{grid-column:auto} .service-page.services-hub .hub-tech-card{min-height:auto} .service-page.services-hub .hub-services-grid{grid-template-columns:1fr} .service-page.services-hub .hub-service-card{min-height:0} .service-page.services-hub .hub-service-card h3{min-height:0} } @media (max-width:600px){ .service-page.services-hub .hub-fan{grid-template-columns:1fr;min-height:0;gap:12px} .service-page.services-hub .hub-fan-source, .service-page.services-hub .hub-fan-list{grid-column:1} .service-page.services-hub .hub-fan-source{margin-bottom:2px} .service-page.services-hub .hub-fan-wires{display:none} } @media (max-width:520px){ .service-page.services-hub .hub-choice-recommended{align-items:flex-start;flex-direction:column} .service-page.services-hub .hub-choice-button{width:100%} } @media (prefers-reduced-motion:reduce){ .service-page.services-hub .hub-fan-flow{animation:none;stroke-dasharray:none;opacity:.55} .service-page.services-hub .hub-fit-row,.service-page.services-hub .hub-fit-service, .service-page.services-hub .hub-fit-arrow svg{transition:none} .service-page.services-hub .hub-platform-tile{transition:none} .service-page.services-hub .hub-platform-tile:hover{transform:none} } /* ── Services hub — keyframes ── */ @keyframes hubFanFlow{from{stroke-dashoffset:164}to{stroke-dashoffset:0}} /* ══════════════════════════════════════════════════════════════════════════ PLATFORM PAGES — /platforms/… ══════════════════════════════════════════════════════════════════════════ Everything below the services-hub section serves the platform pages and the platforms hub. Sections run in cascade order, not alphabetical order: later sections may deliberately override earlier ones, so do not reorder them. Contents 1. Shared layout — every platform page 2. MetaTrader 4 3. NinjaTrader 4. cTrader 5. TradeStation 6. Quantower 7. Tradovate 8. TradingView 9. Thinkorswim 10. DAS Trader 11. Shared rules declared after the page sections 12. Interactive Brokers 13. Platforms hub — /platforms/ v10.0 clean-up: exact duplicates, selectors that match nothing on any page, unused @keyframes and declarations shadowed by a later copy of the same selector were removed. Output verified identical to v9.3 on all 21 pages at 1400, 900 and 390 px. */ /* ── 1. Shared layout — every platform page ────────────────────────────────── */ /* Hero, sections, cards, Why Nordman, markets hover and the overview terminal. Scoped to .platform-page. */ .platform-page .breadcrumb{padding-top:24px;color:var(--text-dim);font-family:var(--font-mono);font-size:11px} .platform-page .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none} .platform-page .breadcrumb li:not(:last-child)::after{margin-left:8px;color:var(--text-mute);content:"/"} .platform-page .breadcrumb a:hover{color:var(--blue-bright)} .platform-page .hero::after{top:8%;left:52%;width:660px;height:660px;border:1px solid rgba(96,165,250,.08);border-radius:50%;box-shadow:0 0 0 90px rgba(96,165,250,.025), 0 0 0 180px rgba(96,165,250,.015)} .platform-page .hero h1{max-width:760px} .platform-page .hero-sub{margin-top:22px} .platform-page .section.tint{border-block:1px solid rgba(255,255,255,.055)} .platform-page .section-head{margin-bottom:40px} .platform-page .section-head.center{margin-inline:auto;text-align:center} .platform-page .section-head.center .eyebrow{justify-content:center} .platform-page .section-head h2{margin-top:13px} .platform-page .section-head p{margin-top:15px;color:var(--text-dim);font-size:17px} .platform-page .services-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px} .platform-page .service-card{position:relative;display:flex;min-height:205px;flex-direction:column;padding:24px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(155deg, rgba(26,37,58,.88), rgba(14,22,38,.92));transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease} .platform-page .service-card::after{position:absolute;content:"";transition:transform .25s ease, background .25s ease} .platform-page .service-card:hover{border-color:rgba(96,165,250,.45);box-shadow:0 22px 55px rgba(0,0,0,.23);transform:translateY(-3px)} .platform-page .service-icon{display:grid;width:42px;height:42px;margin-bottom:20px;place-items:center;border:1px solid rgba(96,165,250,.3);border-radius:11px;background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.06));color:var(--blue-bright)} .platform-page .service-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8} .platform-page .service-card h3{position:relative;z-index:1} .platform-page .service-card p{position:relative;z-index:1;margin-top:9px;color:var(--text-dim);line-height:1.55} .platform-page .inline-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;margin-top:28px;padding:26px 28px;border:1px solid rgba(80,237,187,.2);border-radius:var(--r-lg);background:linear-gradient(110deg, rgba(80,237,187,.07), rgba(59,130,246,.08))} .platform-page .inline-cta h3{font-size:20px} .platform-page .inline-cta p{margin-top:6px;color:var(--text-dim);font-size:14px} .platform-page .markets-grid{display:grid;gap:14px} .platform-page .market-card{position:relative;min-height:220px;padding:25px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(155deg, rgba(26,37,58,.82), rgba(12,19,33,.96))} .platform-page .market-card::before{position:absolute;right:-25px;bottom:-30px;color:rgba(96,165,250,.07);font-family:var(--font-mono);font-size:92px;font-weight:700;content:attr(data-market)} .platform-page .market-card h3{position:relative} .platform-page .market-card p{position:relative;margin-top:10px;color:var(--text-dim)} .platform-page .market-card .text-link{position:relative;font-size:12px} .platform-page .faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--border)} .platform-page .faq-item{border-bottom:1px solid var(--border)} .platform-page .faq-question{display:grid;width:100%;grid-template-columns:1fr 30px;align-items:center;gap:18px;padding:24px 0;border:0;background:transparent;text-align:left} .platform-page .faq-question span:first-child{color:var(--text);font-size:17px;font-weight:700} .platform-page .faq-plus{position:relative;width:30px;height:30px;border:1px solid var(--border);border-radius:8px} .platform-page .faq-plus::before,.platform-page .faq-plus::after{position:absolute;top:50%;left:50%;width:12px;height:1px;background:var(--blue-bright);content:"";transform:translate(-50%, -50%);transition:transform .18s ease} .platform-page .faq-plus::after{transform:translate(-50%, -50%) rotate(90deg)} .platform-page .faq-item.open .faq-plus::after{transform:translate(-50%, -50%) rotate(0deg)} .platform-page .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease} .platform-page .faq-item.open .faq-answer{grid-template-rows:1fr} .platform-page .faq-answer > div{overflow:hidden} .platform-page .faq-answer p{max-width:820px;padding:0 44px 24px 0;color:var(--text-dim);line-height:1.7} .platform-page .faq-answer a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px} .platform-page .final-cta{padding:clamp(76px, 9vw, 110px) 0} .platform-page .final-cta h2{font-size:clamp(31px, 4vw, 49px)} .platform-page .final-cta p{max-width:680px;margin-top:15px;color:var(--text-2);font-size:17px} .platform-page .hero{padding:clamp(44px, 6vw, 80px) 0 clamp(48px, 6vw, 80px);position:relative;overflow:hidden} .platform-page .hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%)} .platform-page .hero .container{position:relative;z-index:1} .platform-page .hero-inner{display:grid;align-items:start} .platform-page .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;margin-bottom:18px;border:1px solid rgba(112,180,255,.30);border-radius:100px;background:rgba(112,180,255,.12);color:var(--blue-bright);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase} .platform-page .hero h1{margin-bottom:16px} .platform-page .hero h1 .accent{background:linear-gradient(180deg, var(--blue-bright), var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .platform-page .hero-sub{max-width:560px;margin-bottom:22px;color:var(--text-2);font-size:clamp(14px, 1.1vw, 16px);line-height:1.7} .platform-page .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px} .platform-page .hero-trust{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px 24px;max-width:690px} .platform-page .htrust{display:flex;align-items:flex-start;gap:9px;min-width:0;color:var(--text-2);font-size:13px;line-height:1.45} .platform-page .htrust svg{width:14px;height:14px;margin-top:2px;flex-shrink:0;fill:none;stroke:var(--green);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4} .platform-page .section{padding:clamp(56px, 7vw, 104px) 0;position:relative} .platform-page .section.tint{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(0,0,0,.18)} @media (max-width: 1040px){ .platform-page .hero-inner{gap:38px} .platform-page .services-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width: 600px){ .platform-page .hero-trust{grid-template-columns:1fr} .platform-page .hero-cta{display:grid;grid-template-columns:1fr} .platform-page .hero-cta .btn{width:100%;justify-content:center} .platform-page .services-grid, .platform-page .markets-grid{grid-template-columns:1fr} .platform-page .inline-cta{align-items:stretch;flex-direction:column} .platform-page .inline-cta{display:flex} .platform-page .inline-cta .btn{width:100%;justify-content:center} .platform-page .faq-answer p{padding-right:0} } .platform-page .hero-inner{grid-template-columns:minmax(0, 1fr) 400px;gap:clamp(38px, 5vw, 64px)} .platform-page .hero-right .quote-card{width:100%} .platform-page .section-head{max-width:780px;margin:0 auto 40px;text-align:center} .platform-page .section-head .eyebrow{justify-content:center} .platform-page .service-card::after{top:17px;right:17px;width:68px;height:46px;border-radius:8px;opacity:.42;background:linear-gradient(rgba(112,180,255,.9), rgba(112,180,255,.9)) 9px 11px / 1px 27px no-repeat, linear-gradient(rgba(112,180,255,.78), rgba(112,180,255,.78)) 5px 20px / 9px 10px no-repeat, linear-gradient(rgba(80,237,187,.9), rgba(80,237,187,.9)) 25px 6px / 1px 29px no-repeat, linear-gradient(rgba(80,237,187,.78), rgba(80,237,187,.78)) 21px 12px / 9px 15px no-repeat, linear-gradient(rgba(112,180,255,.9), rgba(112,180,255,.9)) 41px 12px / 1px 27px no-repeat, linear-gradient(rgba(112,180,255,.78), rgba(112,180,255,.78)) 37px 18px / 9px 13px no-repeat, linear-gradient(rgba(80,237,187,.9), rgba(80,237,187,.9)) 57px 4px / 1px 29px no-repeat, linear-gradient(rgba(80,237,187,.78), rgba(80,237,187,.78)) 53px 9px / 9px 16px no-repeat, linear-gradient(rgba(96,165,250,.07), rgba(96,165,250,.07));box-shadow:0 0 0 1px rgba(96,165,250,.10) inset;animation:mt5Candles 5s ease-in-out infinite} .platform-page .service-card:hover::after{background:linear-gradient(rgba(112,180,255,.9), rgba(112,180,255,.9)) 9px 11px / 1px 27px no-repeat, linear-gradient(rgba(112,180,255,.78), rgba(112,180,255,.78)) 5px 20px / 9px 10px no-repeat, linear-gradient(rgba(80,237,187,.9), rgba(80,237,187,.9)) 25px 6px / 1px 29px no-repeat, linear-gradient(rgba(80,237,187,.78), rgba(80,237,187,.78)) 21px 12px / 9px 15px no-repeat, linear-gradient(rgba(112,180,255,.9), rgba(112,180,255,.9)) 41px 12px / 1px 27px no-repeat, linear-gradient(rgba(112,180,255,.78), rgba(112,180,255,.78)) 37px 18px / 9px 13px no-repeat, linear-gradient(rgba(80,237,187,.9), rgba(80,237,187,.9)) 57px 4px / 1px 29px no-repeat, linear-gradient(rgba(80,237,187,.78), rgba(80,237,187,.78)) 53px 9px / 9px 16px no-repeat, linear-gradient(rgba(96,165,250,.11), rgba(96,165,250,.11))} @keyframes mt5Candles{0%, 100% { transform: translateY(0); opacity: .42; } 50% { transform: translateY(-2px); opacity: .58; }} .platform-page .markets-grid{grid-template-columns:repeat(5, minmax(0, 1fr))} .platform-page .cta-band.final-cta{margin-top:0;text-align:center} @media (max-width: 1040px){ .platform-page .hero-inner{grid-template-columns:1fr} .platform-page .hero-right{max-width:520px} .platform-page .markets-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} } @media (max-width: 780px){ .platform-page .markets-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} } @media (max-width: 600px){ .platform-page .hero-right{max-width:none} .platform-page .markets-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion: reduce){ .platform-page .service-card::after{animation:none} } .platform-page .service-card::after,.platform-page .service-card:hover::after{top:auto;right:-8px;bottom:-20px;width:auto;height:auto;border-radius:0;opacity:.055;background:none;box-shadow:none;color:var(--blue-bright);font-family:var(--font-mono);font-size:72px;font-weight:700;line-height:1;letter-spacing:-.07em;animation:none;transform:none} .platform-page .service-card:hover::after{opacity:.10;transform:translate(-2px, -2px)} @media (max-width: 520px){ .platform-page .service-card::after,.platform-page .service-card:hover::after{font-size:60px} } .platform-page .platform-reviews{overflow:hidden;background:radial-gradient(circle at 50% 0, rgba(59,130,246,.075), transparent 34%), transparent} .platform-page .platform-reviews .section-head{margin-bottom:34px} .platform-page .platform-reviews .tp-badge{width:fit-content;margin:18px auto 0} .platform-page .platform-reviews .review-card{position:relative;display:flex;min-height:238px;flex-direction:column;overflow:hidden;background:linear-gradient(155deg, rgba(26,37,58,.80), rgba(12,19,33,.94));box-shadow:0 16px 38px rgba(0,0,0,.14)} .platform-page .platform-reviews .review-card:nth-child(2){border-color:rgba(0,182,122,.30);background:radial-gradient(circle at 100% 0, rgba(0,182,122,.07), transparent 35%), linear-gradient(155deg, rgba(26,37,58,.84), rgba(12,19,33,.96))} .platform-page .platform-reviews .review-text{flex:1} .platform-page .platform-reviews .review-author{margin-top:auto} .platform-page .platform-reviews .review-card::after{position:absolute;right:18px;bottom:-27px;color:rgba(112,180,255,.045);font-family:Georgia, serif;font-size:112px;font-weight:700;line-height:1;content:"“";pointer-events:none} @media (max-width: 720px){ .platform-page .platform-reviews .review-card{min-height:0} } .platform-page .platform-solutions{overflow:hidden;background:radial-gradient(circle at 50% 100%, rgba(59,130,246,.07), transparent 34%), transparent} .platform-page .platform-solutions .section-head{margin-bottom:26px} .platform-page .solution-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;margin-bottom:30px} .platform-page .solution-proof span{display:inline-flex;align-items:center;gap:8px;color:var(--text-dim);font-family:var(--font-mono);font-size:10px} .platform-page .solution-proof span::before{width:6px;height:6px;border-radius:50%;background:var(--green);content:""} .platform-page .solution-product-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px} .platform-page .solution-product-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(155deg, rgba(26,37,58,.82), rgba(12,19,33,.95));transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease} .platform-page .solution-product-card:hover{border-color:rgba(96,165,250,.42);box-shadow:0 22px 48px rgba(0,0,0,.22);transform:translateY(-3px)} .platform-page .solution-product-visual{position:relative;overflow:hidden;aspect-ratio:16 / 9;border-bottom:1px solid var(--border);background:linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.05) 1px, transparent 1px), #0a1321;background-size:24px 24px} .platform-page .solution-product-visual img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.84;transition:opacity .2s ease, transform .35s ease} .platform-page .solution-product-card:hover .solution-product-visual img{opacity:.96;transform:scale(1.025)} .platform-page .solution-product-body{display:flex;flex:1;flex-direction:column;padding:18px} .platform-page .solution-product-type{margin-bottom:8px;color:var(--green);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase} .platform-page .solution-product-body h3{color:var(--text);font-size:17px;line-height:1.3} .platform-page .solution-product-body p{margin-top:8px;color:var(--text-dim);font-size:12px;line-height:1.6} .platform-page .solution-product-foot{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:17px} .platform-page .solution-view{flex-shrink:0;color:var(--blue-bright);font-family:var(--font-mono);font-size:10px;font-weight:600} .platform-page .solution-subscription{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:28px;margin-top:20px;padding:25px 27px;border:1px solid rgba(96,165,250,.22);border-radius:var(--r-lg);background:radial-gradient(circle at 0 50%, rgba(80,237,187,.055), transparent 28%), linear-gradient(110deg, rgba(59,130,246,.10), rgba(21,32,52,.58))} .platform-page .solution-subscription-copy{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:18px} .platform-page .solution-subscription p{max-width:760px;margin-top:6px;color:var(--text-dim);font-size:12.5px;line-height:1.6} .platform-page .solution-subscription-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px} @media (max-width: 1060px){ .platform-page .solution-product-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} .platform-page .solution-subscription{grid-template-columns:1fr} .platform-page .solution-subscription-actions{justify-content:flex-start} } @media (max-width: 620px){ .platform-page .solution-product-grid{grid-template-columns:1fr} .platform-page .solution-subscription{padding:21px} .platform-page .solution-subscription-copy{grid-template-columns:1fr} .platform-page .solution-subscription-actions{display:grid;grid-template-columns:1fr} .platform-page .solution-subscription-actions .btn{width:100%;justify-content:center} } .platform-page .draft-overview{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center} .platform-page .draft-overview p{font-size:16px;line-height:1.8;color:var(--text-2);margin-bottom:18px} .platform-page .service-card h3{font-size:20px!important} .platform-page .service-card p{font-size:15px!important} @media (max-width:1000px){ .platform-page .draft-overview{grid-template-columns:1fr} } @media (max-width:650px){ .platform-page .draft-overview{gap:20px} } .platform-page .flow-row{gap:12px;align-items:stretch;padding-bottom:34px;position:relative} .platform-page .flow-row::after{content:"";position:absolute;left:8.333%;right:8.333%;bottom:8px;height:1px;background:linear-gradient(90deg,rgba(112,180,255,.62),rgba(255,255,255,.16) 48%,rgba(80,237,187,.5));z-index:0} .platform-page .flow-node{min-height:142px;position:relative;z-index:1} .platform-page .flow-node::after{content:"";position:absolute;left:50%;bottom:-30px;width:9px;height:9px;border-radius:50%;transform:translateX(-50%);border:2px solid rgba(112,180,255,.52);background:var(--surface-2);box-shadow:0 0 0 4px var(--surface);z-index:2} .platform-page .flow-node.active::after{border-color:var(--blue-bright);background:var(--blue-bright);box-shadow:0 0 0 4px var(--surface),0 0 12px rgba(112,180,255,.5)} .platform-page .flow-node.success::after{border-color:var(--green);background:var(--green);box-shadow:0 0 0 4px var(--surface),0 0 12px rgba(80,237,187,.35)} .platform-page .flow-node{transition:border-color .2s ease,background .2s ease,transform .2s ease} .platform-page .flow-node:hover{border-color:rgba(112,180,255,.45);background:rgba(112,180,255,.05);transform:translateY(-2px)} .platform-page .flow-node.success:hover{border-color:rgba(80,237,187,.5);background:rgba(80,237,187,.06)} .platform-page .project-boundaries{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} .platform-page .project-boundary{padding:19px 20px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.022);transition:border-color .2s ease,background .2s ease,transform .2s ease} .platform-page .project-boundary.delivery{background:linear-gradient(180deg,rgba(80,237,187,.035),rgba(255,255,255,.018))} .platform-page .project-boundary-label{margin-bottom:8px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright)} .platform-page .project-boundary.delivery .project-boundary-label{color:var(--green)} .platform-page .project-boundary p{line-height:1.6;color:var(--text-dim);margin-bottom:12px} .platform-page .project-boundary-chips{display:flex;flex-wrap:wrap;gap:7px} .platform-page .project-boundary-chips span{display:inline-flex;padding:5px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.025);line-height:1.3;color:var(--text-2)} .platform-page .project-boundary:hover{border-color:rgba(112,180,255,.4);background:rgba(112,180,255,.045);transform:translateY(-2px)} .platform-page .project-boundary.delivery:hover{border-color:rgba(80,237,187,.42);background:linear-gradient(180deg,rgba(80,237,187,.10),rgba(255,255,255,.03))!important} .platform-page .technology-option{--r-lg:18px} .platform-page .tech-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .platform-page .tech-choice-card{--tc:102,160,255;position:relative;display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid rgba(var(--tc),.24);border-radius:18px;background:linear-gradient(145deg,rgba(var(--tc),.10),transparent 62%),#111b2d;color:var(--text);text-decoration:none;overflow:hidden;transition:border-color .2s,background .2s} .platform-page .tech-choice-card:before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;background:linear-gradient(90deg,rgb(var(--tc)),transparent)} .platform-page .tech-choice-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px} .platform-page .tech-choice-icon{display:grid;place-items:center;width:50px;height:50px;flex-shrink:0;border:1px solid rgba(var(--tc),.28);border-radius:12px;background:rgba(var(--tc),.08);color:rgb(var(--tc))} .platform-page .tech-choice-icon svg{width:27px;height:27px} .platform-page .tech-choice-kicker{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:rgb(var(--tc));text-align:right;max-width:150px;line-height:1.5} .platform-page .tech-choice-card h3{font-size:22px!important;margin:0 0 12px!important} .platform-page .tech-choice-card p{font-size:15px;line-height:1.75;color:var(--text-2);margin:0 0 20px} .platform-page .tech-choice-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .platform-page .tech-choice-tags span{padding:5px 8px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:7px;font-size:12px;color:var(--text-dim)} .platform-page .tech-choice-link{font-size:14px;font-weight:700;color:rgb(var(--tc));margin-top:20px} .platform-page .tech-choice-card:hover{border-color:rgba(var(--tc),.65);background-color:#142139} @media (max-width:1000px){ .platform-page .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:650px){ .platform-page .tech-choice-grid{grid-template-columns:1fr} .platform-page .tech-choice-card{padding:23px} .platform-page .tech-choice-top{margin-bottom:18px} } .platform-page .service-card[data-service-mark]::after{content:attr(data-service-mark)!important} .platform-page .service-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:30px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)} .platform-page .service-group-heading h3{font-size:22px;color:var(--text)} .platform-page .service-group-heading span{font-size:14px;color:var(--text-dim)} .platform-page .service-group-heading.secondary-heading{margin-top:48px} .platform-page .services-primary{grid-template-columns:repeat(3,minmax(0,1fr))} .platform-page .services-secondary{grid-template-columns:repeat(3,minmax(0,1fr))} .platform-page .market-card p{font-size:14px;line-height:1.7} .platform-page .flow-wrap{padding:30px} .platform-page .flow-node{padding:18px 13px;min-width:0} .platform-page .flow-node-name{font-size:15px;line-height:1.35} .platform-page .flow-node-sub{font-size:13px;line-height:1.6} .platform-page .flow-step{font-size:12px} .platform-page .project-boundary-label{font-size:12px} .platform-page .project-boundary p{font-size:14px} .platform-page .project-boundary-chips span{font-size:12px} .platform-page .solution-subscription-copy>p{margin:0;color:var(--text-2);font-size:15px;line-height:1.7} .platform-page .flow-row{grid-template-columns:repeat(6,minmax(0,1fr));flex-direction:unset;display:grid} .platform-page .flow-node{flex:none} .platform-page .flow-label{font-size:12px} .platform-page .flow-wrap:before{pointer-events:none} @media (max-width:1100px){ .platform-page .services-primary,.platform-page .services-secondary{grid-template-columns:repeat(2,minmax(0,1fr))} .platform-page .flow-row{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:0} .platform-page .flow-row:after,.platform-page .flow-node:after{display:none} .platform-page .project-boundaries{grid-template-columns:1fr} } @media (max-width:650px){ .platform-page .services-primary,.platform-page .services-secondary{grid-template-columns:1fr} .platform-page .service-group-heading{display:block} .platform-page .service-group-heading span{display:block;margin-top:8px} .platform-page .flow-wrap{padding:20px} .platform-page .flow-row{grid-template-columns:1fr;padding-left:25px;position:relative} .platform-page .flow-row:before{content:"";position:absolute;left:7px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,#70b4ff,#50edbb)} .platform-page .flow-node:before{content:"";position:absolute;left:-22px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 0 4px var(--surface)} .platform-page .flow-node.success:before{background:var(--green)} } .platform-page .platform-why-section{border-top:1px solid rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.055);background:radial-gradient(ellipse 55% 120% at 50% 0%,rgba(79,142,247,.08),transparent 68%),var(--bg)} .platform-page .market-card{min-width:0} .platform-page .market-card h3{margin-top:24px} .platform-page .market-card .text-link{display:inline-flex;align-items:center;justify-content:center;line-height:1.5} /* Why Nordman on platform pages: five cards in a single row. */ .platform-page .platform-why-5{grid-template-columns:repeat(5,minmax(0,1fr))} .platform-page .platform-why-5 .svc-why-card{padding:18px 16px} .platform-page .platform-why-5 h3{font-size:14px} .platform-page .platform-why-5 p{font-size:12px;line-height:1.55} @media (max-width:1180px){ .platform-page .platform-why-5{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:760px){ .platform-page .platform-why-5{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .platform-page .platform-why-5{grid-template-columns:1fr} } /* Markets — the cards had no hover response at all, which read as lifeless next to the rest of the page. Border, background, lift, a brighter watermark and a nudged arrow now respond together, with the dot flaring in the accent colour. */ .platform-page .market-card::after{transition:opacity .22s ease,transform .22s ease} .platform-page .market-card:hover::after{opacity:.22;transform:scale(1.06)} .platform-page .market-card .text-link{transition:color .18s ease} /* ── Service Overview — the terminal itself ── Earlier attempts drew abstract boxes and connecting lines, which did not say what the reader would actually get. This shows the MT5 terminal as it looks on screen: a price chart with an indicator plotted on it, signal marks an Expert Advisor would act on, and a trade panel beside it. The legend underneath names the component types. Every platform page can reuse it — only the window title, symbol and legend wording change. */ .platform-page .pf-term{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .platform-page .pf-term-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)} .platform-page .pf-term-dots{display:flex;gap:5px} .platform-page .pf-term-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)} .platform-page .pf-term-title{flex:1;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.03em;color:var(--text-dim)} .platform-page .pf-term-badge{padding:3px 8px;border:1px solid rgba(112,180,255,.28);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--blue-bright)} .platform-page .pf-term-body{display:grid;grid-template-columns:1fr minmax(0,142px);gap:12px;padding:14px} /* Chart area */ .platform-page .pf-term-chart{position:relative;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:linear-gradient(180deg,rgba(112,180,255,.05),rgba(255,255,255,.008));padding:10px} .platform-page .pf-term-chart svg{display:block;width:100%;height:130px} .platform-page .pf-grid path{stroke:rgba(255,255,255,.05);stroke-width:1} .platform-page .pf-price{fill:none;stroke:var(--blue-bright);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;animation:pfDraw 4.2s ease-out infinite} @keyframes pfDraw{0%{stroke-dashoffset:900}45%,100%{stroke-dashoffset:0}} .platform-page .pf-sig circle{fill:var(--green);opacity:0;animation:pfSig 4.2s ease-out infinite} .platform-page .pf-sig circle:last-child{animation-delay:.5s} @keyframes pfSig{0%,38%{opacity:0;r:1}48%{opacity:1;r:6}56%,100%{opacity:1;r:4.5}} .platform-page .pf-term-tag{position:absolute;padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;pointer-events:none} .platform-page .pf-tag-ind{top:12px;left:12px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.12);color:var(--blue-bright)} .platform-page .pf-tag-ea{top:12px;right:12px;border:1px solid rgba(80,237,187,.3);background:rgba(80,237,187,.12);color:var(--green)} /* Trade panel */ .platform-page .pf-term-panel{display:flex;flex-direction:column;gap:7px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.026)} .platform-page .pf-panel-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:1px} .platform-page .pf-panel-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-dim)} .platform-page .pf-panel-row b{color:var(--text-2);font-weight:700} .platform-page .pf-panel-btn{margin-top:auto;padding:7px;border-radius:8px;border:1px solid rgba(112,180,255,.35);background:rgba(112,180,255,.14);text-align:center;font-size:11px;font-weight:700;color:var(--blue-bright)} /* Legend */ .platform-page .pf-term-foot{display:flex;flex-wrap:wrap;gap:8px 16px;padding:11px 15px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.03em;color:var(--text-dim)} .platform-page .pf-term-item{display:inline-flex;align-items:center;gap:6px} .platform-page .pf-term-item i{width:7px;height:7px;border-radius:50%} .platform-page .pf-dot-ind{background:var(--blue-bright)} .platform-page .pf-dot-ea{background:var(--green)} .platform-page .pf-dot-pan{background:#b4aaff} .platform-page .pf-term-ext{margin-left:auto;color:var(--text-mute)} @media (max-width:760px){ .platform-page .pf-term-body{grid-template-columns:1fr} .platform-page .pf-term-ext{margin-left:0} } @media (prefers-reduced-motion:reduce){ .platform-page .pf-price{animation:none;stroke-dashoffset:0} .platform-page .pf-sig circle{animation:none;opacity:1} } /* ── Markets hover — highlight in place, no movement ── The cards previously lifted off the grid on hover, which made the row jump. They now stay put and simply light up: border, background, glow, heading and the label dot. */ .platform-page .market-card{transition:border-color .22s ease,background .22s ease,box-shadow .22s ease} .platform-page .market-card:hover{border-color:rgba(112,180,255,.6);background:linear-gradient(180deg,rgba(112,180,255,.08),rgba(255,255,255,.012));box-shadow:0 0 0 1px rgba(112,180,255,.18),0 14px 34px rgba(79,142,247,.16);transform:none} .platform-page .market-card h3{transition:color .22s ease} .platform-page .market-card:hover h3{color:#fff} .platform-page .market-card:hover .text-link{color:var(--blue-bright)} /* ── 2. MetaTrader 4 ───────────────────────────────────────────────────────── */ #quote-form{scroll-margin-top:110px} .platform-page .pf-panel-cmds{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto} .platform-page .pf-cmd{padding:6px 4px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.03);text-align:center;font-size:10.5px;font-weight:700;color:var(--text-dim)} .platform-page .pf-cmd-buy{border-color:rgba(80,237,187,.32);background:rgba(80,237,187,.12);color:var(--green)} .platform-page .pf-cmd-sell{border-color:rgba(255,143,163,.32);background:rgba(255,143,163,.12);color:#ff8fa3} /* ── 3. NinjaTrader ────────────────────────────────────────────────────────── */ .platform-page #ninjatrader-services .service-card{scroll-margin-top:110px;min-width:0} .platform-page .nt-specialized{margin-top:44px;padding-top:30px;border-top:1px solid var(--border)} .platform-page .nt-specialized-head{margin-bottom:22px;max-width:820px} .platform-page .nt-specialized-head h3{margin:0 0 8px;color:var(--text);font-size:23px;line-height:1.35} .platform-page .nt-specialized-head p{margin:0;color:var(--text-dim);font-size:15px;line-height:1.65} .platform-page .nt-specialized-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .platform-page .nt-specialized-item{display:grid;grid-template-columns:32px minmax(0,1fr);align-content:start;gap:13px;padding:20px;border:1px solid var(--border);border-radius:12px;background:rgba(112,180,255,.025);min-width:0} .platform-page .nt-specialized-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--blue-bright);background:rgba(112,180,255,.08)} .platform-page .nt-specialized-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .platform-page .nt-specialized-item h4{margin:0 0 8px;font-size:16px;line-height:1.4;color:var(--text)} .platform-page .nt-specialized-item p{margin:0;color:var(--text-dim);font-size:14px;line-height:1.65} #ninjatrader-markets .market-card .text-link{margin-top:18px} #ninjatrader-overview .pf-term-title{min-width:0} #ninjatrader-overview .pf-term-badge{flex-shrink:0;font-size:9px} @media (max-width:1100px){ .platform-page .nt-specialized-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:650px){ .platform-page .nt-specialized-grid{grid-template-columns:1fr} } @media (max-width:650px){ .platform-page .nt-specialized{margin-top:32px;padding-top:24px} } @media (max-width:650px){ .platform-page .nt-specialized-item{padding:18px} } .platform-page .nt-term-body{grid-template-columns:1fr minmax(0,150px)} .platform-page .nt-chart svg{height:130px} .platform-page .nt-wick{stroke-width:1.2} .platform-page .nt-body{stroke-width:1} .platform-page .nt-c-up{stroke:#50edbb;fill:rgba(80,237,187,.55)} .platform-page .nt-c-dn{stroke:#ff8fa3;fill:rgba(255,143,163,.45)} .platform-page .nt-sig circle{fill:var(--blue-bright);opacity:0;animation:ntSig 4s ease-out infinite} .platform-page .nt-sig circle:last-child{animation-delay:.6s} @keyframes ntSig{0%,25%{opacity:0;r:1}35%{opacity:1;r:7}45%,100%{opacity:1;r:4.5}} .platform-page .nt-foot{display:flex;flex-direction:column;gap:7px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.026)} .platform-page .nt-foot-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .platform-page .nt-foot-rows{display:grid;gap:4px} .platform-page .nt-foot-row{display:grid;grid-template-columns:30px 1fr 1fr;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px} .platform-page .nt-foot-row>span{color:var(--text-mute)} .platform-page .nt-foot-row b{position:relative;padding:3px 5px;border-radius:4px;font-weight:700;text-align:right;overflow:hidden} .platform-page .nt-foot-row b::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px} .platform-page .nt-bid{color:#8fe3c4} .platform-page .nt-bid::before{background:rgba(80,237,187,.22)} .platform-page .nt-ask{color:#ffc98a} .platform-page .nt-ask::before{background:rgba(245,183,110,.24)} .platform-page .nt-foot-poc b{box-shadow:inset 0 0 0 1px rgba(245,183,110,.5)} .platform-page .nt-foot-foot{display:flex;align-items:center;gap:6px;margin-top:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} .platform-page .nt-foot-foot i{width:7px;height:7px;border-radius:2px;background:rgba(245,183,110,.75)} @media (max-width:760px){ .platform-page .nt-term-body{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .platform-page .nt-sig circle{animation:none;opacity:1} } /* ── 4. cTrader ────────────────────────────────────────────────────────────── */ #ctrader-services .service-card{scroll-margin-top:110px;min-width:0} .platform-page #ctrader-services .ct-python-card{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:32px;padding:28px;border-color:rgba(112,180,255,.3)} .platform-page .ct-python-copy{min-width:0;position:relative;z-index:1} .platform-page .ct-python-copy .service-icon{margin-bottom:16px} .platform-page .ct-python-copy h3{margin:0} .platform-page .ct-python-options{display:grid;gap:18px;position:relative;z-index:1;padding-left:26px;border-left:1px solid rgba(112,180,255,.18)} .platform-page .ct-python-label{display:block;color:var(--text);font-size:15px;font-weight:800;line-height:1.4} .platform-page .ct-python-options p{font-size:14px!important;line-height:1.6;margin:6px 0 0} #ctrader-markets .market-card .text-link{margin-top:18px} #ctrader-products .solution-product-visual{aspect-ratio:2.08 / 1;display:grid;place-items:center} #ctrader-products .solution-product-visual img{object-fit:contain;object-position:center;background:#0b1423} #ctrader-overview .pf-term-badge{font-size:9px;flex-shrink:0} @media (max-width:750px){ .platform-page #ctrader-services .ct-python-card{grid-template-columns:1fr;gap:22px} .platform-page .ct-python-options{padding:20px 0 0;border-left:0;border-top:1px solid rgba(112,180,255,.18)} } @media (max-width:620px){ #ctrader-products .solution-product-grid{grid-template-columns:1fr} } @media (max-width:600px){ .platform-page #ctrader-services .ct-python-card{padding:24px} } .platform-page .ct-term-body{grid-template-columns:minmax(0,1fr) minmax(0,160px);align-items:stretch} .platform-page .ct-charts{display:grid;grid-template-rows:1fr auto;gap:8px;min-width:0} .platform-page .ct-pane{position:relative;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:linear-gradient(180deg,rgba(45,212,191,.045),rgba(255,255,255,.008))} .platform-page .ct-pane svg{display:block;width:100%} .platform-page .ct-pane-price svg{height:86px} .platform-page .ct-pane-osc svg{height:32px} .platform-page .ct-pane-tag{position:absolute;top:7px;right:9px;font-family:var(--font-mono);font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-mute)} .platform-page .ct-wick{stroke-width:1} .platform-page .ct-body{stroke-width:.9} .platform-page .ct-c-up{stroke:#3fbf5f;fill:rgba(63,191,95,.62)} .platform-page .ct-c-dn{stroke:#e8622a;fill:rgba(232,98,42,.62)} .platform-page .ct-marks circle{fill:#8abaff;opacity:0;animation:ctMark 4s ease-out infinite} .platform-page .ct-marks circle:last-child{animation-delay:.7s} @keyframes ctMark{0%,22%{opacity:0;r:1}32%{opacity:1;r:6}42%,100%{opacity:1;r:3.6}} .platform-page .ct-osc{fill:none;stroke:#2dd4bf;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:ctDraw 4s ease-out infinite} @keyframes ctDraw{0%{stroke-dashoffset:420}55%,100%{stroke-dashoffset:0}} .platform-page .ct-osc-mid{stroke:rgba(255,255,255,.08);stroke-width:1;stroke-dasharray:3 4} .platform-page .ct-feed{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.026)} .platform-page .ct-feed-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .platform-page .ct-feed-rows{display:grid;gap:5px} .platform-page .ct-feed-row{display:grid;grid-template-columns:7px 1fr auto;align-items:center;gap:7px;padding:5px 6px;border-radius:6px;background:rgba(255,255,255,.028);font-size:10px} .platform-page .ct-feed-row span{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .platform-page .ct-feed-row b{font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim)} .platform-page .ct-feed-row i{width:7px;height:7px;border-radius:2px} .platform-page .ct-buy{background:#2dd4bf} .platform-page .ct-sell{background:#ff8fa3} .platform-page .ct-mod{background:#8abaff} .platform-page .ct-feed-foot{display:flex;align-items:center;gap:6px;margin-top:auto;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute)} .platform-page .ct-feed-foot i{width:6px;height:6px;border-radius:50%;background:#2dd4bf;box-shadow:0 0 6px rgba(45,212,191,.7)} @media (max-width:760px){ .platform-page .ct-term-body{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .platform-page .ct-marks circle{animation:none;opacity:1} .platform-page .ct-osc{animation:none;stroke-dashoffset:0} } /* ── 5. TradeStation ───────────────────────────────────────────────────────── */ #tradestation-services .services-secondary{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:700px){ #tradestation-services .services-secondary{grid-template-columns:1fr} } .platform-page .ts-term-body{grid-template-columns:1fr;padding:14px} .platform-page .ts-radar{border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.022);overflow:hidden} .platform-page .ts-radar-head,.platform-page .ts-row{display:grid;grid-template-columns:minmax(0,52px) minmax(0,72px) minmax(0,62px) 1fr minmax(0,52px);align-items:center;gap:10px;padding:7px 12px} .platform-page .ts-radar-head{border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute)} .platform-page .ts-radar-rows{display:grid} .platform-page .ts-row{border-bottom:1px solid rgba(255,255,255,.045);font-family:var(--font-mono);font-size:10.5px;transition:background .18s ease} .platform-page .ts-row:last-child{border-bottom:0} .platform-page .ts-row:hover{background:rgba(112,180,255,.05)} .platform-page .ts-sym{font-weight:700;color:var(--text)} .platform-page .ts-px{color:var(--text-2)} .platform-page .ts-up{color:#4fd48a} .platform-page .ts-dn{color:#ff7a70} .platform-page .ts-flat{color:var(--text-dim)} .platform-page .ts-bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden} .platform-page .ts-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:currentColor;opacity:.75;animation:tsBar 3.6s ease-out infinite} @keyframes tsBar{0%{transform:scaleX(.15);transform-origin:left}45%,100%{transform:scaleX(1);transform-origin:left}} .platform-page .ts-sig{text-align:right;font-size:9px;font-weight:700;letter-spacing:.05em} .platform-page .ts-sig-buy{color:#4fd48a} .platform-page .ts-sig-sell{color:#ff7a70} .platform-page .ts-sig-none{color:var(--text-mute)} .platform-page .ts-radar-foot{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute)} .platform-page .ts-radar-tag{padding:3px 8px;border:1px solid rgba(112,180,255,.3);border-radius:5px;background:rgba(112,180,255,.1);color:var(--blue-bright)} @media (max-width:560px){ .platform-page .ts-radar-head,.platform-page .ts-row{grid-template-columns:minmax(0,44px) minmax(0,62px) 1fr minmax(0,46px);gap:8px} .platform-page .ts-radar-head span:nth-child(4),.platform-page .ts-bar{display:none} } @media (prefers-reduced-motion:reduce){ .platform-page .ts-bar i{animation:none} } /* ── 6. Quantower ──────────────────────────────────────────────────────────── */ .platform-page .qt-integration-examples{margin:12px 0 0;display:grid;gap:8px;position:relative;z-index:1} .platform-page .qt-integration-examples li{font-size:13px;line-height:1.65;color:var(--text-2);padding-left:13px;position:relative} .platform-page .qt-integration-examples li:before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--blue-bright)} .platform-page .qt-integration-examples strong{font-weight:700;color:var(--text)} #quantower-markets .market-card h3{font-size:21px;margin-top:16px} #quantower-markets .market-card p{font-size:13px;line-height:1.7} #quantower-markets .market-card .text-link{font-size:12px;white-space:normal;padding-top:20px} .platform-page [id^="quantower-"]{scroll-margin-top:110px} .platform-page .qt-term-body{grid-template-columns:1fr;padding:14px} .platform-page .qt-chart svg{height:150px} .platform-page .qt-wick{stroke-width:1} .platform-page .qt-body{stroke-width:.9} .platform-page .qt-c-up{stroke:#4fd48a;fill:rgba(79,212,138,.55)} .platform-page .qt-c-dn{stroke:#ff7a70;fill:rgba(255,122,112,.5)} .platform-page .qt-profile{transform-origin:right center;animation:qtProf 3.8s ease-out infinite} @keyframes qtProf{0%{transform:scaleX(.12)}42%,100%{transform:scaleX(1)}} .platform-page .qt-prof{fill:rgba(112,180,255,.18)} .platform-page .qt-prof-poc{fill:rgba(245,183,110,.34)} .platform-page .qt-poc-line{stroke:rgba(245,183,110,.55);stroke-width:1.1;stroke-dasharray:4 4;fill:none} .platform-page .qt-tag-vp{top:12px;left:12px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.12);color:var(--blue-bright)} .platform-page .qt-tag-poc{top:12px;right:12px;border:1px solid rgba(245,183,110,.32);background:rgba(245,183,110,.12);color:#ffc98a} @media (prefers-reduced-motion:reduce){ .platform-page .qt-profile{animation:none} } #quantower-services .services-primary, #quantower-services .services-secondary{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:820px){ #quantower-services .services-primary, #quantower-services .services-secondary{grid-template-columns:1fr} } /* ── 7. Tradovate ──────────────────────────────────────────────────────────── */ #tradovate-markets .market-card h3{font-size:21px;margin-top:16px} #tradovate-markets .market-card p{font-size:13px;line-height:1.7} #tradovate-markets .market-card .text-link{font-size:12px;white-space:normal;padding-top:20px} .platform-page .tv-route-kicker{font:500 10px/1.5 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--blue-bright)} .platform-page .service-card:after{content:attr(data-service-mark)!important;pointer-events:none} .platform-page .tv-section-note{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:24px;padding:21px 24px;border-left:2px solid var(--blue-bright);border-radius:0 10px 10px 0;background:rgba(96,165,250,.05)} .platform-page .tv-section-note p{font-size:13px;line-height:1.75;color:var(--text-dim);margin:0;max-width:820px} .platform-page .tv-section-note strong{color:var(--text-2)} .platform-page .tv-section-note a{flex-shrink:0;max-width:235px;color:var(--blue-bright);font-size:13px;font-weight:700;line-height:1.65} .platform-page .tv-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .platform-page .tv-compare-card{display:flex;flex-direction:column;min-width:0;padding:30px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(155deg,rgba(26,37,58,.88),rgba(14,22,38,.92))} .platform-page .tv-compare-top{display:flex;align-items:center;gap:15px;margin-bottom:22px} .platform-page .tv-compare-mark{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;font:500 17px var(--font-mono);color:var(--blue-bright);border:1px solid rgba(96,165,250,.25);border-radius:12px} .platform-page .tv-compare-card h3{font-size:24px;margin-bottom:15px} .platform-page .tv-compare-card p{font-size:15px;line-height:1.75;color:var(--text-2)} .platform-page .tv-compare-card ul{display:grid;gap:10px;margin:20px 0 27px} .platform-page .tv-compare-card li{font-size:14px;line-height:1.6;color:var(--text-dim);padding-left:16px;position:relative} .platform-page .tv-compare-card li:before{content:"·";color:var(--blue-bright);position:absolute;left:0;font-weight:700} .platform-page .tv-compare-card .text-link{margin-top:auto;font-size:14px} .platform-page #tradovate-markets .market-card{padding:26px;min-width:0} .platform-page #tradovate-markets .market-card p{font-size:14px;line-height:1.75} .platform-page #tradovate-markets .market-card .text-link{padding-top:22px;font-size:13px;line-height:1.6;white-space:normal} .platform-page [id^="tradovate-"]{scroll-margin-top:110px} @media (max-width:1000px){ .platform-page .tv-section-note{align-items:flex-start;flex-direction:column;gap:12px} .platform-page .tv-section-note a{max-width:none} } @media (max-width:760px){ .platform-page .tv-compare-grid{grid-template-columns:1fr} .platform-page .tv-compare-card{padding:25px} } @media (max-width:650px){ .platform-page .tv-section-note{padding:18px} } .platform-page .tv-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .platform-page .tv-access-card{padding:22px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease} .platform-page .tv-access-card:hover{border-color:rgba(112,180,255,.42)} .platform-page .tv-access-mark{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:10px} .platform-page .tv-access-card h3{font-size:16px;margin-bottom:9px} .platform-page .tv-access-card p{font-size:13px;line-height:1.68;color:var(--text-dim)} @media (max-width:820px){ .platform-page .tv-access-grid{grid-template-columns:1fr} } .platform-page .tv-compare-mark{padding:9px;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)} .platform-page .tv-compare-mark img{display:block;width:100%;height:100%;object-fit:contain;opacity:.92} #tradovate-services .services-primary{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1100px){ #tradovate-services .services-primary{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:650px){ #tradovate-services .services-primary{grid-template-columns:1fr} } .platform-page .tv-book{width:100%;border:1px solid rgba(45,212,191,.22);border-radius:16px;background:#050a12;box-shadow:0 18px 50px rgba(0,0,0,.4);overflow:hidden} .platform-page .tv-book-head{height:42px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)} .platform-page .tv-book-chart{position:relative;padding:12px} .platform-page .tv-book-chart svg{display:block;width:100%;height:190px} .platform-page .tv-hm{shape-rendering:crispEdges} .platform-page .tv-hm-low{fill:#0d2438} .platform-page .tv-hm-mid{fill:#1a6b8f} .platform-page .tv-hm-hot{fill:#f5c76e} .platform-page .tv-heat{animation:tvHeat 5s ease-in-out infinite} @keyframes tvHeat{0%,100%{opacity:.55}50%{opacity:.85}} .platform-page .tv-dom-bid{fill:rgba(45,212,191,.5)} .platform-page .tv-dom-ask{fill:rgba(255,122,112,.45)} .platform-page .tv-wick{stroke-width:1} .platform-page .tv-body{stroke-width:.8} .platform-page .tv-c-up{stroke:#2dd4bf;fill:rgba(45,212,191,.85)} .platform-page .tv-c-dn{stroke:#ff7a70;fill:rgba(255,122,112,.8)} .platform-page .tv-book-tag{position:absolute;padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;pointer-events:none} .platform-page .tv-tag-hm{top:20px;left:20px;border:1px solid rgba(245,199,110,.32);background:rgba(245,199,110,.12);color:#f5c76e} .platform-page .tv-tag-dom{top:20px;right:20px;border:1px solid rgba(45,212,191,.3);background:rgba(45,212,191,.12);color:#2dd4bf} .platform-page .tv-book-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:11px 15px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)} .platform-page .tv-leg{display:inline-flex;align-items:center;gap:6px} .platform-page .tv-leg i{width:8px;height:8px;border-radius:2px} .platform-page .tv-leg-hot{background:#f5c76e} .platform-page .tv-leg-bid{background:rgba(45,212,191,.7)} .platform-page .tv-leg-ask{background:rgba(255,122,112,.65)} .platform-page .tv-leg-note{margin-left:auto;color:var(--text-mute);text-transform:none;letter-spacing:0} @media (max-width:760px){ .platform-page .tv-leg-note{margin-left:0} } @media (prefers-reduced-motion:reduce){ .platform-page .tv-heat{animation:none;opacity:.8} } #tradovate-services .services-primary .service-card h3{min-height:0} .platform-page .tv-prop-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border-color:rgba(245,183,110,.32);background:linear-gradient(120deg,rgba(245,183,110,.07),rgba(255,255,255,.008)),var(--surface)} .platform-page .tv-prop-card:hover{border-color:rgba(245,183,110,.55)} .platform-page .tv-prop-card .service-icon{border-color:rgba(245,183,110,.3);background:rgba(245,183,110,.1);color:#ffc98a} .platform-page .tv-prop-card .service-icon svg{stroke:#ffc98a} .platform-page .tv-prop-card::after{color:rgba(245,183,110,.09)} .platform-page .tv-prop-body{min-width:0} .platform-page .tv-prop-card h3{margin-bottom:11px} .platform-page .tv-prop-card p{margin-bottom:12px;max-width:940px} .platform-page .tv-prop-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .platform-page .tv-prop-points span{padding:5px 11px;border:1px solid rgba(245,183,110,.26);border-radius:999px;background:rgba(245,183,110,.07);font-size:11.5px;font-weight:600;color:#ffc98a} @media (max-width:760px){ .platform-page .tv-prop-card{grid-template-columns:1fr;gap:14px} } /* ── 8. TradingView ────────────────────────────────────────────────────────── */ #tradingview-markets .market-card h3{font-size:21px;margin-top:16px} #tradingview-markets .market-card p{font-size:13px;line-height:1.7} #tradingview-markets .market-card .text-link{font-size:12px;white-space:normal;padding-top:20px} .platform-page .tv-services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .platform-page .tv-services-grid .service-card{padding:28px;min-width:0} .platform-page .tv-services-grid .service-card h3{font-size:22px;line-height:1.32;min-height:3.96em;text-wrap:pretty} .platform-page .tv-services-grid .service-card p{font-size:14px;line-height:1.8;margin-bottom:0} .platform-page .tv-wide-copy{min-width:0} .platform-page .tv-scanner-demo{position:relative;z-index:1;min-width:0;border:1px solid rgba(96,165,250,.2);border-radius:12px;background:rgba(8,15,28,.65);overflow:hidden} .platform-page .tv-scanner-demo table{width:100%;border-collapse:collapse;font:400 11px/1.6 var(--font-mono);table-layout:fixed} .platform-page .tv-scanner-demo th,.platform-page .tv-scanner-demo td{padding:12px 10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.055)} .platform-page .tv-scanner-demo th:first-child{text-align:left;padding-left:18px;width:29%} .platform-page .tv-scanner-demo thead th{font-weight:400;color:var(--text-dim);font-size:10px} .platform-page .tv-scanner-demo tbody th{font-weight:500;color:var(--text-2)} .platform-page .tv-scanner-demo tbody tr:last-child>*{border-bottom:0} .platform-page .tv-status{display:inline-block;min-width:45px;padding:3px 6px;border-radius:4px;font-size:10px;white-space:nowrap} .platform-page .tv-status.up{color:#50edbb;background:rgba(80,237,187,.07)} .platform-page .tv-status.down{color:#f58da3;background:rgba(245,141,163,.07)} .platform-page .tv-status.flat{color:#aebdd2;background:rgba(174,189,210,.06)} .platform-page .tv-chart-demo{padding:10px 13px 0} .platform-page .tv-chart-demo svg{width:100%;height:auto;display:block} .platform-page .tv-overview-visual{min-width:0} .platform-page .tv-overview-visual .pf-term-foot{flex-wrap:wrap;row-gap:9px} .platform-page #tradingview-markets .market-card .text-link{padding-top:22px;white-space:normal;font-size:12px;line-height:1.65} .platform-page #tradingview-markets .market-card p{font-size:13px;line-height:1.8} .platform-page [id^="tradingview-"]{scroll-margin-top:110px} @media (max-width:1050px){ .platform-page .tv-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .platform-page .tv-services-grid .service-card h3{font-size:21px} .platform-page .tv-scanner-demo th,.platform-page .tv-scanner-demo td{padding-left:6px;padding-right:6px} } @media (max-width:760px){ .platform-page .tv-scanner-demo{max-width:520px;width:100%} } @media (max-width:650px){ .platform-page .tv-services-grid{grid-template-columns:1fr} .platform-page .tv-services-grid .service-card{padding:25px} .platform-page .tv-services-grid .service-card h3{min-height:0} } #tradingview-products .solution-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:980px){ #tradingview-products .solution-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ #tradingview-products .solution-product-grid{grid-template-columns:1fr} } #tradingview-services .tv-services-grid .service-card h3{min-height:0!important} #tradingview-services .services-grid .service-card h3{min-height:0!important} .platform-page .tv-overview-visual .tv-scanner-demo{margin:0;border-top:1px solid rgba(255,255,255,.07);border-radius:0} .platform-page .tw-wide-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start} .platform-page .tw-wide-body{min-width:0} .platform-page .tw-wide-card h3{margin-bottom:11px} .platform-page .tw-wide-card p{margin-bottom:12px;max-width:940px} .platform-page .tw-wide-points{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px} .platform-page .tw-wide-points span{padding:5px 11px;border:1px solid rgba(112,180,255,.26);border-radius:999px;background:rgba(112,180,255,.07);font-size:11.5px;font-weight:600;color:var(--blue-bright)} .platform-page .tw-wide-cta{display:inline-block;font-size:13.5px;font-weight:700;color:var(--blue-bright);text-decoration:none} .platform-page .tw-wide-cta:hover{text-decoration:underline} @media (max-width:760px){ .platform-page .tw-wide-card{grid-template-columns:1fr;gap:14px} } /* ── 9. Thinkorswim ────────────────────────────────────────────────────────── */ /* Scoped to .tos-page. */ /* ── Overview chart: a study on the chart, a study below it ── Thinkorswim in its own colours — the platform draws rising candles green and falling ones red on a dark chart, with lower studies in their own pane. The diagram shows what we actually build here: a study plotting on price, its signals, and a second study underneath. */ .tos-page .tos-visual{width:100%;border:1px solid rgba(112,180,255,.2);border-radius:16px;background:#060b14;box-shadow:0 18px 50px rgba(0,0,0,.38);overflow:hidden} .tos-page .tos-chart{position:relative;padding:12px 12px 6px} .tos-page .tos-lower{position:relative;padding:6px 12px 12px;border-top:1px solid rgba(255,255,255,.06)} .tos-page .tos-chart svg{display:block;width:100%;height:172px} .tos-page .tos-lower svg{display:block;width:100%;height:50px} .tos-page .tos-wick{stroke-width:1} .tos-page .tos-body{stroke-width:.9} .tos-page .tos-c-up{stroke:#4fd48a;fill:rgba(79,212,138,.72)} .tos-page .tos-c-dn{stroke:#ff6b6b;fill:rgba(255,107,107,.66)} /* The study itself: a moving average drawn over price, plus its signal markers. */ .tos-page .tos-ma{fill:none;stroke:#8abaff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:460;stroke-dashoffset:460;animation:tosDraw 4.2s ease-out infinite} @keyframes tosDraw{0%{stroke-dashoffset:460}55%,100%{stroke-dashoffset:0}} .tos-page .tos-zone{fill:rgba(138,186,255,.07)} .tos-page .tos-zone-line{stroke:rgba(138,186,255,.4);stroke-width:1;stroke-dasharray:4 4;fill:none} .tos-page .tos-sig circle{fill:#ffc35c;opacity:0;animation:tosSig 4.2s ease-out infinite} .tos-page .tos-sig circle:last-child{animation-delay:.8s} @keyframes tosSig{0%,28%{opacity:0;r:1}38%{opacity:1;r:7}48%,100%{opacity:1;r:4}} .tos-page .tos-osc{fill:none;stroke:#8abaff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .tos-page .tos-lower-mid{stroke:rgba(255,255,255,.08);stroke-width:1;stroke-dasharray:3 4} .tos-page .tos-tag{position:absolute;padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;pointer-events:none} .tos-page .tos-tag-a{top:20px;left:20px;border:1px solid rgba(138,186,255,.32);background:rgba(138,186,255,.12);color:#8abaff} .tos-page .tos-tag-b{top:20px;right:20px;border:1px solid rgba(255,195,92,.32);background:rgba(255,195,92,.12);color:#ffc35c} .tos-page .tos-tag-c{top:12px;right:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text-mute)} .tos-page .tos-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)} .tos-page .tos-foot-item{display:inline-flex;align-items:center;gap:6px} .tos-page .tos-foot-item i{width:7px;height:7px;border-radius:50%} .tos-page .tos-dot-a{background:#8abaff} .tos-page .tos-dot-b{background:#ffc35c} .tos-page .tos-foot-ext{margin-left:auto;color:var(--text-mute);text-transform:none;letter-spacing:0} @media (prefers-reduced-motion:reduce){ .tos-page .tos-ma{animation:none;stroke-dashoffset:0} .tos-page .tos-sig circle{animation:none;opacity:1} } /* ── Wide API card: last in the grid, full width ── */ .tos-page .tos-wide-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start} .tos-page .tos-wide-body{min-width:0} .tos-page .tos-wide-card h3{margin-bottom:11px} .tos-page .tos-wide-card p{margin-bottom:12px;max-width:940px} .tos-page .tos-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0} .tos-page .tos-route{display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.026)} .tos-page .tos-route-mark{flex:0 0 26px;height:26px;display:grid;place-items:center;border:1px solid rgba(112,180,255,.3);border-radius:8px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--blue-bright)} .tos-page .tos-route strong{display:block;font-size:13.5px;color:var(--text);margin-bottom:5px} .tos-page .tos-route p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text-dim)} /* The limits paragraph is set apart: it is the part people must not skim. */ .tos-page .tos-api-note{padding:14px 16px;border-left:2px solid rgba(245,183,110,.45);border-radius:0 var(--r-md) var(--r-md) 0;background:rgba(245,183,110,.05);font-size:12.5px;line-height:1.7;color:var(--text-dim)} .tos-page .tos-api-note strong{color:#ffc98a} @media (max-width:820px){ .tos-page .tos-wide-card{grid-template-columns:1fr;gap:14px} .tos-page .tos-route-grid{grid-template-columns:1fr} } /* Four technology cards, two across. */ #thinkorswim-technologies .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){ #thinkorswim-technologies .tech-choice-grid{grid-template-columns:1fr} } /* Four-card technology blocks sit two across, not three: a 3+1 row leaves an orphan. Six-card blocks keep the shared three-column grid. */ #tradingview-technologies .tech-choice-grid, #thinkorswim-technologies .tech-choice-grid, #das-technologies .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:760px){ #tradingview-technologies .tech-choice-grid, #thinkorswim-technologies .tech-choice-grid, #das-technologies .tech-choice-grid{grid-template-columns:1fr} } /* ── 10. DAS Trader ────────────────────────────────────────────────────────── */ /* Scoped to .das-page and #das-* sections. */ .das-broker-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;padding:25px 26px;background:linear-gradient(145deg,rgba(112,180,255,.04),rgba(255,255,255,.01));transition:border-color .2s,background .2s} .das-broker-card:hover{border-color:rgba(112,180,255,.4);background:rgba(112,180,255,.05)} .das-broker-note{font-size:12px;line-height:1.7;max-width:820px;margin:24px auto 0;text-align:center;color:var(--text-dim)} .das-page .hero h1{font-size:clamp(38px,4.2vw,57px);line-height:1.12} .das-page .hero-sub{max-width:650px} .das-page .services-grid .service-card{display:flex;flex-direction:column;min-width:0;padding:29px} .das-page .service-card h3{font-size:23px;line-height:1.3;margin:18px 0 15px;text-wrap:pretty} .das-page .service-card p{font-size:14px;line-height:1.75;margin:0 0 20px;position:relative;z-index:1} .das-page :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--blue-bright);outline-offset:4px} .das-page .draft-overview{align-items:center} .das-console{min-width:0;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:linear-gradient(145deg,#0c1627,#08101b);overflow:hidden;box-shadow:0 18px 54px rgba(0,0,0,.28)} .das-console-head{display:flex;gap:12px;align-items:center;padding:17px 18px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-dim)} .das-mini-tag{font-size:8px;letter-spacing:.1em;margin-left:auto;color:var(--text-dim);opacity:.7} .das-status-dot{width:5px;height:5px;border-radius:50%;background:var(--green)} .das-console-foot{border-top:1px solid rgba(255,255,255,.07);text-align:center;color:var(--text-dim);font-size:10px;padding:13px 16px} .das-broker-card h3{font-size:22px;line-height:1.3;margin-bottom:11px} .das-broker-card p{font-size:14px;color:var(--text-dim);line-height:1.7;margin-bottom:18px} .das-review-context{margin:12px auto 18px!important;font-size:14px;color:var(--text-dim)} .das-anchor{display:block;scroll-margin-top:130px} .das-page [id]{scroll-margin-top:115px} .das-preview-status{font-size:12px;color:var(--text-dim);line-height:1.55;margin-top:12px} .das-file-list{font-size:12px;line-height:1.5;color:var(--text-dim);margin:0 0 12px;overflow-wrap:anywhere} @media (max-width:700px){ .das-page .hero h1{font-size:38px} .das-console-head{gap:8px} .das-mini-tag{display:none} } @media (max-width:650px){ .das-page .service-card h3{min-height:0;font-size:22px} .das-page .services-grid .service-card{padding:25px} .das-page .hero h1{font-size:35px} } @media (prefers-reduced-motion:reduce){ .das-page *{animation:none!important;transition:none!important} } .das-page .das-rb-legend{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-mute)} .das-page .das-lg{display:inline-flex;align-items:center;gap:6px} .das-page .das-lg::before{content:"";width:8px;height:8px;border-radius:2px} .das-page .das-lg-over::before{background:#8ab4ff} .das-page .das-lg-under::before{background:#4fd48a} .das-page .das-lg-ok::before{background:rgba(255,255,255,.25)} .das-page .das-rb-rows{display:grid;gap:8px;padding:14px} .das-page .das-rb-row{display:grid;grid-template-columns:44px 1fr 40px 62px;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10.5px} .das-page .das-rb-sym{font-weight:700;color:var(--text)} .das-page .das-rb-track{position:relative;height:10px;border-radius:3px;background:rgba(255,255,255,.05);overflow:visible} .das-page .das-rb-track i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;animation:dasGrow 3.6s ease-out infinite;transform-origin:left} @keyframes dasGrow{0%{transform:scaleX(.1)}45%,100%{transform:scaleX(1)}} .das-page .das-bar-over{background:rgba(138,180,255,.75)} .das-page .das-bar-under{background:rgba(79,212,138,.7)} .das-page .das-bar-ok{background:rgba(255,255,255,.25)} .das-page .das-rb-target{position:absolute;top:-4px;bottom:-4px;left:var(--t);width:0;border-left:1px dashed rgba(255,255,255,.4)} .das-page .das-rb-cur{text-align:right;color:var(--text-2)} .das-page .das-rb-act{text-align:right;font-size:9.5px;font-weight:700;letter-spacing:.03em} .das-page .das-act-sell{color:#8ab4ff} .das-page .das-act-buy{color:#4fd48a} .das-page .das-act-hold{color:var(--text-mute)} @media (prefers-reduced-motion:reduce){ .das-page .das-rb-track i{animation:none} } .das-page .das-broker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .das-page .das-broker-card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease,background .2s ease} .das-page .das-broker-card:hover{border-color:rgba(112,180,255,.42);background:linear-gradient(180deg,rgba(112,180,255,.06),rgba(255,255,255,.01)),var(--surface)} .das-page .das-broker-card h3{font-size:17px;margin-bottom:9px} .das-page .das-broker-card p{font-size:13px;line-height:1.68;color:var(--text-dim);margin-bottom:14px} .das-page .das-broker-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto} .das-page .das-broker-tags span{padding:4px 10px;border:1px solid rgba(112,180,255,.22);border-radius:999px;background:rgba(112,180,255,.06);font-size:11px;font-weight:600;color:var(--blue-bright)} .das-page .das-broker-note{max-width:860px;margin:26px auto 0;text-align:center;font-size:13px;line-height:1.7;color:var(--text-dim)} @media (max-width:1000px){ .das-page .das-broker-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .das-page .das-broker-grid{grid-template-columns:1fr} } #das-services .services-primary, #das-services .services-secondary{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:820px){ #das-services .services-primary, #das-services .services-secondary{grid-template-columns:1fr} } #das-services .service-card{padding:24px} #das-services .service-card h3{margin:0 0 10px} #das-services .service-card::after{font-size:72px;right:-8px;bottom:-20px;top:auto;opacity:.055} #das-services .inline-cta{max-width:1088px;margin-left:auto;margin-right:auto;width:100%} .das-page .draft-overview .das-console{display:flex;flex-direction:column;height:100%} .das-page .das-rb-rows{flex:1;align-content:space-evenly} /* ── 11. Shared rules declared after the page sections ─────────────────────── */ /* Markets layout and the MetaTrader candle charts. These sit below the page sections on purpose: they replace per-page rules that came earlier, so moving them up would let the old rules win again. */ .platform-page .markets-grid:has(> .market-card-wide:only-child){grid-template-columns:minmax(0,860px);justify-content:center} .platform-page .market-card-wide{text-align:center} .platform-page .mk-coverage{max-width:860px;margin:22px auto 0;padding:18px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(255,255,255,.022)} .platform-page .mk-coverage-head{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;text-align:center} .platform-page .mk-coverage-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .platform-page .mk-coverage-chips span{padding:6px 12px;border:1px solid rgba(112,180,255,.22);border-radius:999px;background:rgba(112,180,255,.06);font-size:12px;font-weight:600;color:var(--text-2)} /* ── Markets grid: one rule per page, matched to the number of cards ── These had accumulated nine conflicting declarations for a single page, some at higher specificity than the others, so the column count no longer matched the cards. Declared once here, with the same specificity throughout. */ .platform-page #mt5-markets .markets-grid, .platform-page #tradingview-markets .markets-grid, .platform-page #thinkorswim-markets .markets-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .platform-page #quantower-markets .markets-grid{grid-template-columns:repeat(5,minmax(0,1fr))} .platform-page #ninjatrader-markets .markets-grid, .platform-page #tradestation-markets .markets-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .platform-page #tradovate-markets .markets-grid, .platform-page #das-markets .markets-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:740px;margin-left:auto;margin-right:auto} @media (max-width:1000px){ .platform-page #mt5-markets .markets-grid, .platform-page #tradingview-markets .markets-grid, .platform-page #thinkorswim-markets .markets-grid, .platform-page #quantower-markets .markets-grid, .platform-page #ninjatrader-markets .markets-grid, .platform-page #tradestation-markets .markets-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .platform-page .markets-grid{grid-template-columns:1fr!important} } /* ── Market cards: one layout for every platform page ── The label had a leading dot that broke alignment whenever the text wrapped, so it is gone; the label now carries the accent colour the dot used to. The label and the CTA are given fixed vertical slots so the market names line up across a row and the links sit on one baseline, whatever the copy length. */ .platform-page .market-card{display:flex;flex-direction:column} .platform-page .market-label{display:flex;align-items:flex-start;justify-content:center;width:auto;max-width:100%;margin:0 0 18px;padding:0;height:30px;border:0;background:none;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;text-align:center;color:var(--blue-bright)} .platform-page .market-label::before{content:none!important;display:none!important} .platform-page .market-card h3{margin:0 0 10px} .platform-page .market-card p{margin-bottom:18px} /* Pushes every CTA to the bottom edge of its card, so a row of links is level. */ .platform-page .market-card .text-link{margin-top:auto!important;padding-top:18px} /* MT4 and cTrader carry a single market plus a coverage panel; the two share a row as equal blocks rather than leaving a lone card on a wide grid. */ .platform-page .markets-duo{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch} .platform-page .markets-duo .market-card-wide{text-align:center} /* Coverage panel copy: explains that the chips are CFD underlyings, not markets. */ .platform-page .mk-coverage-note{margin:14px 0 0;font-size:12.5px;line-height:1.7;color:var(--text-dim);text-align:center} .platform-page .markets-duo .mk-coverage{max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center} @media (max-width:820px){ .platform-page .markets-duo{grid-template-columns:1fr!important} } /* ── MetaTrader overview charts: candles, not a line ── Both MetaTrader terminals are candle-first platforms, so the diagram shows the chart a trader actually looks at. Colours follow the terminal defaults. */ .platform-page .mt-wick{stroke-width:1} .platform-page .mt-body{stroke-width:.9} .platform-page .mt-c-up{stroke:#4fd48a;fill:rgba(79,212,138,.7)} .platform-page .mt-c-dn{stroke:#ff7a70;fill:rgba(255,122,112,.66)} /* ── 12. Interactive Brokers ───────────────────────────────────────────────── */ /* Scoped to .ibkr-page and #ibkr-* sections. */ .ibkr-page :is(a,button,input,textarea,select):focus-visible{outline:2px solid var(--blue-bright);outline-offset:4px} .ibkr-page #quote-form,.ibkr-page [id^="faq-"]{scroll-margin-top:105px} .ibkr-page .hero-badge{letter-spacing:.06em} .ibkr-page .draft-overview{align-items:center} .ibkr-overview-visual{min-width:0;background:linear-gradient(145deg,#101b2e,#080f1c);border:1px solid rgba(112,180,255,.25);border-radius:16px;overflow:hidden;box-shadow:0 18px 54px rgba(0,0,0,.22)} .ibkr-visual-head{display:flex;align-items:center;gap:8px;padding:16px 18px;border-bottom:1px solid var(--border);color:var(--text-dim);font-size:11px;flex-wrap:wrap} .ibkr-status-dot{width:7px;height:7px;background:var(--blue-bright);border-radius:50%;flex-shrink:0} .ibkr-mini-tags{display:flex;justify-content:center;gap:6px;margin-top:11px} .ibkr-connect-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .ibkr-connect-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:27px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(155deg,rgba(26,37,58,.75),rgba(14,22,38,.9))} .ibkr-connect-number{font-size:11px;letter-spacing:.12em;color:var(--blue-bright);margin-bottom:15px} .ibkr-connect-card h3{font-size:23px;margin-bottom:10px} .ibkr-connect-kicker{font-size:12px;line-height:1.6;color:var(--blue-bright)} .ibkr-connect-card p{font-size:14px;line-height:1.75;color:var(--text-dim);margin:14px 0 20px} .ibkr-connect-card .tech-choice-tags{margin-top:auto;padding-bottom:14px} .ibkr-access-note{font-size:13px;color:var(--text-dim);margin-top:20px;text-align:center;line-height:1.7} #ibkr-services .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #ibkr-services .service-card{padding:26px;min-width:0} #ibkr-services .service-card h3{font-size:21px;line-height:1.3;text-wrap:pretty;margin:0} #ibkr-services .service-card p{font-size:14px;line-height:1.75} #ibkr-services .ibkr-service-copy{display:flex;flex-direction:column;flex:1;min-width:0} #ibkr-services .service-card::after{content:attr(data-service-mark)!important;top:auto;right:-5px;bottom:-16px;width:auto;height:auto;border-radius:0;background:none;font-size:72px;font-weight:800;line-height:1;letter-spacing:-.04em;opacity:.055;color:var(--blue-bright);animation:none;transform:none;z-index:0} #ibkr-services .service-card:hover::after{background:none;opacity:.085;transform:none} #ibkr-services .ibkr-integration-card{grid-column:1/-1;display:grid;grid-template-columns:42px minmax(0,1fr);gap:20px;min-height:0} #ibkr-services .ibkr-integration-card h3{min-height:0} #ibkr-services .ibkr-integration-card .service-icon{margin:0} #ibkr-services .ibkr-integration-card p{max-width:870px} #ibkr-markets .markets-grid{grid-template-columns:repeat(5,minmax(0,1fr))} #ibkr-markets .market-label{min-height:3em;display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;line-height:1.5} #ibkr-markets .market-label::before{margin:0;flex-shrink:0} #ibkr-markets .market-card h3{font-size:23px} #ibkr-markets .market-card p{font-size:13px;line-height:1.75} #ibkr-markets .text-link{display:block;padding-top:20px;font-size:12px;white-space:normal} .ibkr-reviews-context{font-size:13px!important;margin-top:17px!important;color:var(--text-dim)!important} .ibkr-form-status{font-size:12px;line-height:1.6;color:var(--text-dim);margin-top:12px;overflow-wrap:anywhere} .ibkr-page [hidden]{display:none!important} @media (max-width:1100px){ #ibkr-markets .markets-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:900px){ #ibkr-services .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .ibkr-connect-grid{grid-template-columns:1fr} .ibkr-connect-kicker{min-height:0} } @media (max-width:760px){ #ibkr-markets .markets-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ #ibkr-services .services-grid,#ibkr-markets .markets-grid{grid-template-columns:1fr} #ibkr-services .ibkr-integration-card{display:flex;gap:0} #ibkr-services .ibkr-integration-card .service-icon{margin-bottom:20px} .ibkr-page .inline-cta{align-items:flex-start} .ibkr-page .btn{white-space:normal} #ibkr-markets .market-label{min-height:0} } .ibkr-page .ib-rebal{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:18px} .ibkr-page .ib-donut{position:relative;width:128px;height:128px;flex:0 0 128px} .ibkr-page .ib-donut svg{width:100%;height:100%;transform:rotate(-90deg)} .ibkr-page .ib-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:14} .ibkr-page .ib-arc{fill:none;stroke-width:14;opacity:.85} .ibkr-page .ib-arcs{animation:ibSpin 4.2s ease-out infinite;transform-origin:center} @keyframes ibSpin{0%{opacity:.25}40%,100%{opacity:1}} .ibkr-page .ib-tick{fill:none;stroke:#fff;stroke-width:16;opacity:.75} .ibkr-page .ib-donut-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:1px} .ibkr-page .ib-donut-mid strong{font-size:22px;color:var(--text);line-height:1} .ibkr-page .ib-donut-mid span{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute)} .ibkr-page .ib-legend{display:grid;gap:7px;min-width:0} .ibkr-page .ib-leg-row{display:grid;grid-template-columns:9px 1fr 40px 34px 42px;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;background:rgba(255,255,255,.025);font-family:var(--font-mono);font-size:10.5px} .ibkr-page .ib-leg-row i{width:9px;height:9px;border-radius:2px} .ibkr-page .ib-leg-name{display:grid;line-height:1.2;color:var(--text);font-weight:600;min-width:0} .ibkr-page .ib-leg-name em{font-style:normal;font-size:8.5px;letter-spacing:.04em;color:var(--text-mute)} .ibkr-page .ib-leg-cur{text-align:right;color:var(--text-2)} .ibkr-page .ib-leg-drift,.ibkr-page .ib-leg-act{text-align:right;font-weight:700;font-size:9.5px} .ibkr-page .ib-up{color:#8ab4ff} .ibkr-page .ib-dn{color:#4fd48a} .ibkr-page .ib-flat{color:var(--text-mute)} .ibkr-page .ibkr-visual-foot{display:flex;align-items:center;gap:8px;padding:10px 15px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} @media (max-width:620px){ .ibkr-page .ib-rebal{grid-template-columns:1fr;justify-items:center} } @media (prefers-reduced-motion:reduce){ .ibkr-page .ib-arcs{animation:none} } .ibkr-page .ibkr-overview-visual .ibkr-visual-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--text-2)} .ibkr-page .ibkr-overview-visual .ibkr-mini-tags{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)} #ibkr-technologies .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1000px){ #ibkr-technologies .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:680px){ #ibkr-technologies .tech-choice-grid{grid-template-columns:1fr} } .ibkr-page .ib-illus{margin-left:auto;font-style:normal;color:var(--text-mute);text-transform:none;letter-spacing:0} /* ── 13. Platforms hub — /platforms/ ───────────────────────────────────────── */ /* Scoped to .platforms-hub. */ /* ── Hero ── */ .platforms-hub .hero{padding:40px 0 64px} .platforms-hub .hero h1{font-size:clamp(34px,3.9vw,52px)} .platforms-hub .hero-sub{max-width:600px} /* Monogram tile — placeholder for official platform logos */ .platforms-hub .ph-mono{--tc:96,165,250;display:inline-grid;place-items:center;flex-shrink:0;width:48px;height:40px;border-radius:10px;border:1px solid rgba(var(--tc),.45);background:linear-gradient(180deg,rgba(var(--tc),.24),rgba(var(--tc),.07));color:rgb(var(--tc));font-size:12.5px;font-weight:800;letter-spacing:.02em} /* Platform logo tile: mono logo on a brand-tinted square; monogram text is the load-failure fallback */ .platforms-hub .ph-mono.ph-icon{width:48px;height:48px;padding:8px;border-color:rgba(226,232,240,.38);background:transparent;color:var(--text-2)} .platforms-hub .ph-mono.ph-icon img{display:block;width:100%;height:100%;object-fit:contain} .platforms-hub .ph-mono.ph-icon .ph-mono-text{display:none} .platforms-hub .ph-mono.ph-icon.ph-noimg img{display:none} .platforms-hub .ph-mono.ph-icon.ph-noimg .ph-mono-text{display:inline} .platforms-hub .ph-matrix .ph-mono.ph-icon{width:34px;height:34px;padding:6px} .platforms-hub .ph-matrix .ph-mono.ph-icon .ph-mono-text{font-size:9px} /* ── Catalog ── */ .platforms-hub .ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .platforms-hub .ph-card{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid rgba(var(--tc),.22);border-radius:var(--r-lg);background:linear-gradient(150deg,rgba(var(--tc),.13) 0%,rgba(var(--tc),.04) 48%,transparent 78%),#101a2c;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease} .platforms-hub .ph-card:hover{border-color:rgba(var(--tc),.7);background-color:#132038;box-shadow:0 18px 40px -22px rgba(var(--tc),.55)} .platforms-hub .ph-card-top{display:flex;align-items:center;gap:14px;margin-bottom:14px} .platforms-hub .ph-card h3{font-size:19px;line-height:1.2} .platforms-hub .ph-card-tech{display:block;margin-top:4px;font-size:12.5px;color:var(--text-dim)} .platforms-hub .ph-card p{flex:1;font-size:14.5px;line-height:1.6;color:var(--text-2);margin-bottom:16px} .platforms-hub .ph-card-link{font-size:13.5px;font-weight:600;color:var(--blue-bright)} .platforms-hub .ph-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit} .platforms-hub .ph-card-link{transition:color .18s ease} .platforms-hub .ph-card:hover .ph-card-link{color:rgb(var(--tc))} .platforms-hub .ph-card.ph-card-other{border-style:dashed;border-color:rgba(154,170,200,.3);background:transparent} .platforms-hub .ph-card.ph-card-other:hover{box-shadow:none} .platforms-hub .ph-card.ph-card-other .ph-mono{--tc:154,170,200;font-size:18px} /* ── Capability matrix (the signature block) ── */ .platforms-hub .ph-matrix-wrap{border:1px solid var(--border);border-radius:var(--r-xl);background:rgba(6,9,15,.55);overflow-x:auto} .platforms-hub .ph-matrix{width:100%;min-width:980px;border-collapse:collapse;font-size:14px;line-height:1.5} .platforms-hub .ph-matrix caption{caption-side:bottom;text-align:left;padding:14px 20px 16px;font-size:13px;color:var(--text-dim);border-top:1px solid var(--border)} .platforms-hub .ph-matrix th,.platforms-hub .ph-matrix td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.06)} .platforms-hub .ph-matrix thead th{position:sticky;top:0;background:#0d1526;font-size:12.5px;font-weight:700;color:var(--text-dim);border-bottom:1px solid var(--border)} .platforms-hub .ph-matrix tbody tr:last-child th,.platforms-hub .ph-matrix tbody tr:last-child td{border-bottom:0} .platforms-hub .ph-matrix tbody tr:hover{background:rgba(59,130,246,.05)} .platforms-hub .ph-matrix tbody th{width:170px} .platforms-hub .ph-matrix tbody th a{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--text)} .platforms-hub .ph-matrix tbody th a:hover{color:var(--blue-bright)} .platforms-hub .ph-matrix .ph-mono{width:36px;height:28px;font-size:10px;border-radius:7px} .platforms-hub .ph-matrix td{color:var(--text-2)} .platforms-hub .ph-matrix td.ph-lang{font-weight:700;color:var(--text);white-space:nowrap} .platforms-hub .ph-matrix td small{display:block;margin-top:5px;font-size:13px;color:var(--text-dim)} .platforms-hub .ph-matrix .ph-group-row th{padding:12px 18px;background:rgba(21,32,52,.7);font-size:12.5px;font-weight:700;color:var(--text-dim)} .platforms-hub .ph-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text);white-space:nowrap} .platforms-hub .ph-status::before{content:"";width:12px;height:12px;border-radius:50%;flex-shrink:0;box-sizing:border-box} .platforms-hub .ph-status[data-level="in"]::before{background:var(--green);box-shadow:0 0 10px rgba(80,237,187,.45)} .platforms-hub .ph-status[data-level="part"]::before{border:2px solid var(--amber);background:linear-gradient(90deg,var(--amber) 50%,transparent 50%)} .platforms-hub .ph-status[data-level="out"]::before{border:2px solid var(--blue-bright);background:transparent} .platforms-hub .ph-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:0 0 18px;font-size:13.5px;color:var(--text-2)} .platforms-hub .ph-legend li{display:flex;align-items:center;gap:8px} .platforms-hub .ph-legend .ph-status{font-weight:600} /* ── Cross-platform routes ── */ .platforms-hub .ph-routes{display:grid;grid-template-columns:1fr 1fr;gap:12px} .platforms-hub .ph-route{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);background:rgba(21,32,52,.5);transition:border-color .15s ease} .platforms-hub .ph-route:hover{border-color:rgba(96,165,250,.5)} .platforms-hub .ph-route-path{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:700;color:var(--text)} .platforms-hub .ph-route-arrow{display:inline-block;width:26px;height:2px;background:linear-gradient(90deg,rgba(96,165,250,.3),var(--blue-bright));position:relative} .platforms-hub .ph-route-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--blue-bright);border-right:0} .platforms-hub .ph-route-kind{display:block;margin-top:5px;font-size:13px;font-weight:600;color:var(--text-dim)} .platforms-hub .ph-route-kind[data-kind="product"]{color:var(--green)} .platforms-hub .ph-route a{font-size:13px;font-weight:600;color:var(--blue-bright);white-space:nowrap} .platforms-hub .ph-route a::after{content:"";position:absolute;inset:0;border-radius:inherit} .platforms-hub .ph-routes-note{margin-top:18px;font-size:13.5px;color:var(--text-dim)} .platforms-hub .ph-connect{margin-top:44px} .platforms-hub .ph-connect .tech-choice-link{margin-top:auto} @media (max-width:1000px) and (min-width:861px){ .platforms-hub .ph-connect{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ── Choosing + other platforms ── */ .platforms-hub .ph-choose{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start} .platforms-hub .ph-choose-intro{color:var(--text-dim);font-size:16px;line-height:1.6;margin-bottom:26px;max-width:560px} .platforms-hub .ph-choose .ph-other{margin-top:0} .platforms-hub .ph-factors{display:grid;gap:0;border-top:1px solid var(--border)} .platforms-hub .ph-factors li{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--border)} .platforms-hub .ph-factors strong{font-size:15px;color:var(--text)} .platforms-hub .ph-factors span{font-size:14.5px;line-height:1.6;color:var(--text-2)} .platforms-hub .ph-other{padding:28px;border:1px dashed rgba(154,170,200,.35);border-radius:var(--r-xl);background:rgba(6,9,15,.4);scroll-margin-top:110px} .platforms-hub .ph-other h3{font-size:22px;margin-bottom:10px} .platforms-hub .ph-other p{font-size:14.5px;line-height:1.65;color:var(--text-2)} .platforms-hub .ph-other p{margin-bottom:24px} .platforms-hub .ph-other-cta{display:flex;justify-content:center} /* ── Responsive ── */ @media (max-width:1040px){ .platforms-hub .ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .platforms-hub .ph-connect{grid-template-columns:1fr} .platforms-hub .ph-choose{grid-template-columns:1fr} } @media (max-width:860px){ .platforms-hub .ph-routes{grid-template-columns:1fr} /* Matrix becomes one stacked card per platform */ .platforms-hub .ph-matrix-wrap{overflow:visible;border:0;background:transparent} .platforms-hub .ph-matrix{min-width:0} .platforms-hub .ph-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .platforms-hub .ph-matrix,.platforms-hub .ph-matrix tbody,.platforms-hub .ph-matrix tr,.platforms-hub .ph-matrix th,.platforms-hub .ph-matrix td{display:block;width:auto} .platforms-hub .ph-matrix tbody tr{margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r-lg);background:rgba(21,32,52,.5)} .platforms-hub .ph-matrix tbody tr.ph-group-row{border:0;background:transparent;margin:22px 0 8px} .platforms-hub .ph-matrix .ph-group-row th{padding:0;background:transparent} .platforms-hub .ph-matrix tbody th{width:auto;border-bottom:1px solid var(--border)} .platforms-hub .ph-matrix td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:11px 18px} .platforms-hub .ph-matrix td::before{content:attr(data-label);font-size:12.5px;font-weight:700;color:var(--text-dim)} .platforms-hub .ph-matrix caption{display:block;border:0;padding:0 0 6px;font-size:13px} .platforms-hub .ph-legend{flex-direction:column;align-items:flex-start;gap:10px} .platforms-hub .ph-legend li{flex-wrap:wrap;gap:4px 8px} .platforms-hub .ph-factors li{grid-template-columns:1fr;gap:6px} } @media (max-width:640px){ .platforms-hub .ph-grid{grid-template-columns:1fr} .platforms-hub .ph-route{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════════════ TECHNOLOGY AND MARKET PAGES ══════════════════════════════════════════════════════════════════════════ Pages added after v10.0. Each
carries .platform-page plus its own scope class, so the platform-page rules above apply and the sections below add only what each page needs. Technology pages — .tech-page plus: Webhook .wh-page · REST API .rest-page · WebSocket .ws-page MQL4 .mql4-page · MQL5 .mql5-page · NinjaScript .ns-page Pine Script .pn-page · EasyLanguage .el-page · thinkScript .tks-page Python .py-page · C# .cs-page .py-page · JavaScript .js-page .py-page FIX Protocol .fix-page Components shared by every technology page are declared in the Webhook section, where they first appeared. C# and JavaScript also carry .py-page to reuse the Python page's service components. Market pages — .mkt-page plus .mkt-forex, .mkt-futures, .mkt-stocks, .mkt-crypto or .mkt-options. Markets hub — .mkt-page .mkt-hub. Technologies hub — .tech-hub. v10.62 clean-up: selectors that match nothing on any page, rules shadowed by a later rule, unused @keyframes and outdated comments were removed; identical copies of one component under several page scopes were merged into one rule. Rendering verified unchanged against v10.61 on all 41 pages that load this file, at 1400, 900 and 390 px. ══════════════════════════════════════════════════════════════════════════ */ /* ── WEBHOOK TECHNOLOGY PAGE ─────────────────────────────────────────────── /technologies/webhook-trading-automation/. Scoped to .wh-page, which sits alongside .platform-page and .tech-page on
. Shared components (hero, service cards, capabilities, product cards, comparison cards, process, Why, FAQ) come from the sections above; only the page's own blocks are here. */ /* Overview diagram: signal sources → receiver → trading accounts. */ .wh-page .wh-flow{width:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .wh-page .wh-flow-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--text-2)} .wh-page .wh-dot{width:7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px rgba(79,212,138,.7)} .wh-page .wh-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)} .wh-page .wh-flow-body{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1.05fr) 34px minmax(0,1fr);align-items:center;gap:6px;padding:20px 16px} .wh-page .wh-col{display:grid;gap:7px} .wh-page .wh-col-label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:2px} .wh-page .wh-src,.wh-page .wh-dst{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.028);font-size:11px;font-weight:600;color:var(--text-2)} .wh-page .wh-dst b{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;color:#4fd48a} .wh-page .wh-core{padding:14px 13px;border:1px solid rgba(112,180,255,.34);border-radius:12px;background:linear-gradient(180deg,rgba(112,180,255,.12),rgba(255,255,255,.012))} .wh-page .wh-core-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:9px;text-align:center} .wh-page .wh-core ul{display:grid;gap:6px;margin:0;padding:0;list-style:none} .wh-page .wh-core li{position:relative;padding-left:16px;font-size:11px;line-height:1.35;color:var(--text-2)} .wh-page .wh-core li::before{content:'';position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:2px;background:rgba(79,212,138,.8)} /* Pulses travelling along the connectors — the signal moving through. */ .wh-page .wh-link{position:relative;display:grid;gap:14px;height:100%;align-content:center} .wh-page .wh-link i{position:relative;display:block;height:2px;border-radius:2px;background:rgba(112,180,255,.18);overflow:hidden} .wh-page .wh-link i::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--blue-bright);box-shadow:0 0 6px rgba(112,180,255,.8);animation:whPulse 2.4s linear infinite} .wh-page .wh-link i:nth-child(2)::after{animation-delay:.8s} .wh-page .wh-link i:nth-child(3)::after{animation-delay:1.6s} @keyframes whPulse{from{left:-40%}to{left:100%}} .wh-page .wh-flow-foot{padding:10px 15px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* The one anchor inside a service card: the platform route list lives in its own section further down, so the card points there instead of repeating it. */ .wh-page .wh-card-anchor{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--blue-bright);text-decoration:none} .wh-page .wh-card-anchor:hover{text-decoration:underline} /* Service cards: two across, matching the other long-copy platform pages. */ #webhook-services .services-primary{grid-template-columns:repeat(3,minmax(0,1fr))} /* Components shared by every technology page (.tech-page): route groups with platform cards, the related-technologies line, and links set in running text. They keep their original wh- class names from the webhook page. */ /* Supported platforms, grouped by the route a signal takes: into a component running inside the terminal, or straight to an API. Two groups of five and six cards, centred, so no row is left with a gap. */ .tech-page .wh-route{margin-top:30px} .tech-page .wh-route-head{display:flex;align-items:flex-start;gap:12px;max-width:760px;margin:0 auto 16px;text-align:left} .tech-page .wh-route-mark{flex:0 0 28px;height:28px;display:grid;place-items:center;border:1px solid rgba(112,180,255,.32);border-radius:8px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--blue-bright)} .tech-page .wh-route-head strong{display:block;font-size:15px;color:var(--text);margin-bottom:3px} .tech-page .wh-route-head span:not(.wh-route-mark){font-size:13px;line-height:1.6;color:var(--text-dim)} .tech-page .wh-plat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} .tech-page .wh-plat-grid .plat-card{flex:0 0 calc((100% - 60px)/6);min-width:150px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;text-align:center;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);text-decoration:none;transition:border-color .2s ease,transform .2s ease} .tech-page .wh-plat-grid .plat-card:hover{border-color:rgba(112,180,255,.45);transform:translateY(-2px)} .tech-page .wh-plat-grid .platform-logo{width:34px;height:34px;object-fit:contain;margin:0} .tech-page .wh-plat-grid .plat-name{margin:0;font-size:14.5px;color:var(--text)} .tech-page .wh-plat-grid .plat-sub{font-size:11.5px;line-height:1.5;color:var(--text-dim)} .tech-page .wh-plat-icon{display:grid;place-items:center;width:34px;height:34px;color:var(--blue-bright)} .tech-page .wh-plat-icon svg{display:block;width:30px!important;height:30px!important} .tech-page .wh-plat-note{max-width:860px;margin:28px auto 0;text-align:center;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .tech-page .wh-plat-note strong{color:var(--text)} /* Overview diagram fills its column, so its bottom lines up with the text. */ .wh-page .draft-overview .wh-flow{display:flex;flex-direction:column;height:100%} .wh-page .draft-overview .wh-flow-body{flex:1} /* Comparison: four cards in one row, then the related-technologies line. */ #webhook-vs-api .tech-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .tech-page .wh-related{margin-top:24px;text-align:center;font-size:13.5px;color:var(--text-dim)} .tech-page .wh-related a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tech-page .wh-related a:hover{text-decoration:underline} @media(max-width:1100px){ .tech-page .wh-plat-grid .plat-card{flex-basis:calc((100% - 24px)/3)} #webhook-vs-api .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #webhook-services .services-primary{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ .wh-page .wh-flow-body{grid-template-columns:1fr;gap:12px} .wh-page .wh-link{display:none} .tech-page .wh-plat-grid .plat-card{flex-basis:calc((100% - 12px)/2);min-width:0} #webhook-vs-api .tech-choice-grid,#webhook-services .services-primary{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){.wh-page .wh-link i::after{animation:none;left:30%}} /* Links set inside running text — the route note and FAQ answers. */ .tech-page .wh-route-head a,.tech-page .faq-answer a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tech-page .wh-route-head a:hover,.tech-page .faq-answer a:hover{text-decoration:underline} /* The Trading Bot link in the note under the capabilities panel. */ .tech-page .svc-capability-foot a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tech-page .svc-capability-foot a:hover{text-decoration:underline} /* ── REST API TECHNOLOGY PAGE ────────────────────────────────────────────── /technologies/rest-api-trading-integration/. Scoped to .rest-page. Route groups, platform cards and the related-technologies line come from the shared .tech-page rules in the webhook section above. */ /* Overview diagram: requests out, answers back. */ .rest-page .rest-flow{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .rest-page .rest-flow-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--text-2)} .rest-page .rest-dot{width:7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px rgba(79,212,138,.7)} .rest-page .rest-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)} .rest-page .rest-flow-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:12px;padding:20px 16px} .rest-page .rest-side{display:grid;gap:7px} .rest-page .rest-label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);margin-bottom:2px} .rest-page .rest-node{padding:8px 10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.028);font-size:11px;font-weight:600;color:var(--text-2)} .rest-page .rest-node.rest-api{border-color:rgba(112,180,255,.3);background:rgba(112,180,255,.08);color:var(--blue-bright)} .rest-page .rest-calls{display:grid;gap:9px} /* Each call: request travels right, the answer comes back left. */ .rest-page .rest-call{position:relative;display:grid;gap:4px;padding:8px 10px;border:1px solid rgba(112,180,255,.18);border-radius:9px;background:rgba(112,180,255,.045);overflow:hidden} .rest-page .rest-req,.rest-page .rest-res{font-family:var(--font-mono);font-size:10px} .rest-page .rest-req{color:var(--text-2)} .rest-page .rest-req::after{content:' \2192';color:var(--blue-bright)} .rest-page .rest-res{justify-self:end;color:#4fd48a} .rest-page .rest-res::before{content:'\2190 ';color:#4fd48a} .rest-page .rest-call::after{content:'';position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(112,180,255,.14),transparent);animation:restSweep 3.2s linear infinite} .rest-page .rest-call:nth-child(2)::after{animation-delay:.8s} .rest-page .rest-call:nth-child(3)::after{animation-delay:1.6s} @keyframes restSweep{from{left:-30%}to{left:100%}} .rest-page .rest-flow-foot{padding:10px 15px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Services three across; comparison three across. */ #rest-services .services-primary,#rest-streaming .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} /* Example solutions: three scenario cards with numbered steps. */ .rest-page .rest-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .rest-page .rest-case{display:flex;flex-direction:column;padding:24px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface)} .rest-page .rest-case-kicker{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:10px} .rest-page .rest-case h3{font-size:17px;margin:0 0 10px} .rest-page .rest-case p{font-size:13.5px;line-height:1.7;color:var(--text-dim);margin:0 0 16px} .rest-page .rest-case-steps{display:grid;gap:7px;margin:auto 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.07);list-style:none;counter-reset:st} .rest-page .rest-case-steps li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);counter-increment:st} .rest-page .rest-case-steps li::before{content:counter(st);flex:0 0 20px;height:20px;display:grid;place-items:center;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--blue-bright)} /* Reliability: five standards, one row. */ .rest-page .rest-rel-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px} .rest-page .rest-rel{padding:20px 18px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface)} .rest-page .rest-rel-icon{display:grid;place-items:center;width:30px;height:30px;margin-bottom:12px;border:1px solid rgba(79,212,138,.32);border-radius:8px;background:rgba(79,212,138,.1);color:#4fd48a} .rest-page .rest-rel-icon svg{width:16px;height:16px} .rest-page .rest-rel h3{font-size:14.5px;margin:0 0 8px} .rest-page .rest-rel p{font-size:12.5px;line-height:1.65;color:var(--text-dim);margin:0} @media(max-width:1100px){ #rest-services .services-primary,#rest-streaming .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .rest-page .rest-rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:820px){ .rest-page .rest-case-grid{grid-template-columns:1fr} .rest-page .rest-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ .rest-page .rest-flow-body{grid-template-columns:1fr} #rest-services .services-primary,#rest-streaming .tech-choice-grid{grid-template-columns:1fr} } @media(max-width:520px){.rest-page .rest-rel-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.rest-page .rest-call::after{animation:none;display:none}} /* Group 3 as a compact row: these directions are covered in detail by the service cards, so here they are listed rather than repeated as cards. */ .rest-page .rest-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:900px;margin:0 auto} .rest-page .rest-chips span{padding:8px 15px;border:1px solid rgba(112,180,255,.24);border-radius:999px;background:rgba(112,180,255,.07);font-size:13px;font-weight:600;color:var(--text-2)} /* ── WEBSOCKET TECHNOLOGY PAGE ───────────────────────────────────────────── /technologies/websocket-api-trading/. Scoped to .ws-page. The page has its own layout rather than the REST/Webhook template: a tabbed demo terminal, service directions as wide rows, a source/destination map and a table of failure situations. */ /* Demo terminal. Tabs are radio inputs + labels, so they work without script and stay keyboard-accessible; only the checked tab's panel is shown. */ .ws-page .ws-term{position:relative;display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070d18;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .ws-page .ws-tab-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .ws-page .ws-term-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07)} .ws-page .ws-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);white-space:nowrap} .ws-page .ws-live i{width:7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px rgba(79,212,138,.8);animation:wsBlink 1.6s ease-in-out infinite} @keyframes wsBlink{50%{opacity:.35}} .ws-page .ws-tabs{display:flex;gap:4px;margin-left:auto;padding:3px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.03)} .ws-page .ws-tabs label{padding:5px 10px;border-radius:6px;font-size:11px;font-weight:600;color:var(--text-dim);cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease} .ws-page .ws-tabs label:hover{color:var(--text)} #ws-tab-1:checked~.ws-term-bar label[for=ws-tab-1],#ws-tab-2:checked~.ws-term-bar label[for=ws-tab-2],#ws-tab-3:checked~.ws-term-bar label[for=ws-tab-3]{background:rgba(112,180,255,.16);color:var(--blue-bright)} #ws-tab-1:focus-visible~.ws-term-bar label[for=ws-tab-1],#ws-tab-2:focus-visible~.ws-term-bar label[for=ws-tab-2],#ws-tab-3:focus-visible~.ws-term-bar label[for=ws-tab-3]{outline:2px solid var(--blue-bright);outline-offset:1px} /* All panels share one grid cell, so the terminal keeps the height of its tallest panel and the page does not jump when tabs are switched. */ .ws-page .ws-term-body{flex:1;display:grid;padding:14px} .ws-page .ws-panel{grid-area:1/1;visibility:hidden;opacity:0} #ws-tab-1:checked~.ws-term-body .ws-p1,#ws-tab-2:checked~.ws-term-body .ws-p2,#ws-tab-3:checked~.ws-term-body .ws-p3{visibility:visible;opacity:1;animation:wsIn .35s ease} @keyframes wsIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .ws-page .ws-term-foot{padding:9px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Market data tab: quotes, then a trade tape where rows arrive one by one. */ .ws-page .ws-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px} .ws-page .ws-quotes div{display:grid;gap:3px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.025)} .ws-page .ws-quotes span{font-family:var(--font-mono);font-size:9px;color:var(--text-mute)} .ws-page .ws-quotes b{font-family:var(--font-mono);font-size:13px;color:var(--text)} .ws-page .ws-tape-head,.ws-page .ws-row{display:grid;grid-template-columns:1.5fr 1fr .8fr .7fr;gap:8px;font-family:var(--font-mono);font-size:10.5px} .ws-page .ws-tape-head{padding:0 8px 6px;color:var(--text-mute);font-size:9px;text-transform:uppercase;letter-spacing:.06em} .ws-page .ws-tape{gap:4px} .ws-page .ws-row{padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.022);color:var(--text-2)} .ws-page .ws-row b{font-weight:700;text-align:right} .ws-page .ws-buy b{color:#4fd48a}.ws-page .ws-sell b{color:#ff8f8f} /* Order book tab: a ladder with depth bars; two levels flash as they change. */ .ws-page .ws-book-head{display:flex;justify-content:space-between;padding:0 10px 6px;font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute)} .ws-page .ws-book{display:grid;gap:3px} .ws-page .ws-lvl{position:relative;display:flex;justify-content:space-between;padding:5px 10px;border-radius:5px;font-family:var(--font-mono);font-size:10.5px;overflow:hidden} .ws-page .ws-lvl i{position:absolute;inset:0 0 0 auto;width:var(--w)} .ws-page .ws-lvl span{position:relative} .ws-page .ws-ask{color:#ff9c9c}.ws-page .ws-ask i{background:rgba(255,120,120,.12)} .ws-page .ws-bid{color:#7fe0b0}.ws-page .ws-bid i{background:rgba(79,212,138,.12)} .ws-page .ws-spread{padding:5px 10px;text-align:center;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute);border-top:1px dashed rgba(255,255,255,.1);border-bottom:1px dashed rgba(255,255,255,.1)} /* Orders & account tab: events appear in order, then the account summary. */ .ws-page .ws-events{display:grid;gap:6px} .ws-page .ws-ev{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:8px 10px;border-left:2px solid rgba(112,180,255,.4);border-radius:0 7px 7px 0;background:rgba(255,255,255,.025)} .ws-page .ws-ev span{grid-row:1/3;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute);align-self:center} .ws-page .ws-ev strong{font-size:11.5px;color:var(--text)} .ws-page .ws-ev em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .ws-page .ws-ev-part{border-left-color:rgba(129,221,244,.7)}.ws-page .ws-ev-fill{border-left-color:rgba(79,212,138,.7)} .ws-page .ws-summary{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-size:11px;color:var(--text-dim)} .ws-page .ws-summary b{font-family:var(--font-mono);color:var(--text)} /* Service directions: wide rows, description left, examples right. Shared by the technology pages (.tech-page): WebSocket, the language pages and the Python, C# and JavaScript pages use them. */ .tech-page .ws-dirs{display:grid;gap:14px;margin-top:30px} .tech-page .ws-dir{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:center;padding:24px 26px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface);transition:border-color .2s ease} .tech-page .ws-dir:hover{border-color:rgba(112,180,255,.4)} .tech-page .ws-dir-main{display:flex;gap:18px;align-items:flex-start} .tech-page .ws-dir-num{flex:0 0 40px;height:40px;display:grid;place-items:center;border:1px solid rgba(112,180,255,.3);border-radius:10px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--blue-bright)} .tech-page .ws-dir h3{font-size:18px;margin:0 0 8px} .tech-page .ws-dir p{font-size:14px;line-height:1.7;color:var(--text-dim);margin:0} .tech-page .ws-dir p a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tech-page .ws-dir p a:hover{text-decoration:underline} .tech-page .ws-dir-ex{padding-left:22px;border-left:1px solid rgba(255,255,255,.08)} .tech-page .ws-dir-ex-label{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .tech-page .ws-dir-ex ul{display:grid;gap:6px;margin:0;padding:0;list-style:none} .tech-page .ws-dir-ex li{position:relative;padding-left:14px;font-size:13px;color:var(--text-2)} .tech-page .ws-dir-ex li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:rgba(112,180,255,.7)} /* Sources and destinations: two columns of rows. */ .ws-page .ws-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px} .ws-page .ws-map-col{padding:20px;border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006)),var(--surface)} .ws-page .ws-map-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;font-weight:700;color:var(--text)} .ws-page .ws-map-head svg{width:20px;height:20px;color:var(--blue-bright)} .ws-page .ws-map-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;padding:10px 12px;border-radius:9px;text-decoration:none;transition:background .2s ease} .ws-page .ws-map-row+.ws-map-row{border-top:1px solid rgba(255,255,255,.06)} .ws-page a.ws-map-row:hover{background:rgba(112,180,255,.07)} .ws-page .ws-map-row strong{font-size:14px;color:var(--text)} .ws-page .ws-map-row span{grid-column:1;font-size:12.5px;color:var(--text-dim)} .ws-page .ws-map-row i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;color:var(--blue-bright)} .ws-page .ws-map-note{margin:12px 0 0;padding:12px 14px;border-left:2px solid rgba(112,180,255,.4);border-radius:0 var(--r-md) var(--r-md) 0;background:rgba(112,180,255,.05);font-size:12.5px;line-height:1.65;color:var(--text-dim)} .ws-page .ws-map-note a{color:var(--blue-bright);font-weight:600;text-decoration:none} /* Consistency: situation → how it is handled. */ .ws-page .ws-con{max-width:1000px;margin:30px auto 0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .ws-page .ws-con-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:24px;padding:16px 22px} .ws-page .ws-con-row+.ws-con-row{border-top:1px solid rgba(255,255,255,.06)} .ws-page .ws-con-h{background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);padding-top:12px;padding-bottom:12px} .ws-page .ws-con-sit{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:700;color:var(--text)} .ws-page .ws-con-dot{flex:0 0 8px;height:8px;margin-top:7px;border-radius:50%;background:rgba(112,180,255,.8)} .ws-page .ws-con-do{font-size:13.5px;line-height:1.7;color:var(--text-dim)} @media(max-width:900px){ .tech-page .ws-dir{grid-template-columns:1fr;gap:16px} .tech-page .ws-dir-ex{padding-left:58px;border-left:0} .ws-page .ws-map{grid-template-columns:1fr} } @media(max-width:620px){ .ws-page .ws-term-bar{flex-wrap:wrap} .ws-page .ws-tabs{margin-left:0;width:100%} .ws-page .ws-tabs label{flex:1;text-align:center;padding:6px 4px;font-size:10.5px} .ws-page .ws-quotes{grid-template-columns:1fr 1fr} .ws-page .ws-con-row{grid-template-columns:1fr;gap:6px} .ws-page .ws-con-h{display:none} .tech-page .ws-dir-ex{padding-left:0} } /* ── Demo scenario ───────────────────────────────────────────────────────── One 9-second cycle shared by all three tabs, so the views stay in step: a new trade prints (5%), a book level changes (17%), the order is accepted (22%), partly filled (44%) and filled (67%); the position follows each fill. Hidden states keep their space, so nothing shifts while the scene plays. */ /* Tape: a fixed window four rows tall. The track holds five rows and starts shifted up by one, so the newest trade is hidden above; it then slides in while the oldest slides out below. Only transform moves, so the terminal's height never changes and the section below does not jump. */ .ws-page .ws-tape{display:block;height:124px;overflow:hidden} .ws-page .ws-tape-track{display:grid;gap:4px;animation:wsTape 9s ease-out infinite} .ws-page .ws-tape .ws-row{height:28px;box-sizing:border-box;align-items:center;padding-top:0;padding-bottom:0} @keyframes wsTape{0%,4%{transform:translateY(-32px)}10%,96%{transform:translateY(0)}100%{transform:translateY(-32px)}} .ws-page .ws-new{animation:wsNewFlash 9s ease-out infinite} @keyframes wsNewFlash{0%,6%{background:rgba(112,180,255,.22)}22%,100%{background:rgba(255,255,255,.022)}} .ws-page .ws-lvl i{transform-origin:right center} .ws-page .ws-chg i{animation:wsBar 9s ease-in-out infinite} @keyframes wsBar{0%,16%{transform:scaleX(1)}20%,96%{transform:scaleX(var(--s))}100%{transform:scaleX(1)}} .ws-page .ws-chg{animation:wsLvlFlash 9s ease-in-out infinite} @keyframes wsLvlFlash{0%,16%,26%,100%{background:transparent}19%{background:rgba(112,180,255,.2)}} .ws-page .ws-swap,.ws-page .ws-st{display:inline-grid} .ws-page .ws-swap b,.ws-page .ws-st b{grid-area:1/1;font-weight:inherit;text-align:right} .ws-page .ws-swap .ws-a{animation:wsOut17 9s steps(1,end) infinite} .ws-page .ws-swap .ws-b{animation:wsIn17 9s steps(1,end) infinite} @keyframes wsOut17{0%{opacity:1}18%{opacity:0}97%{opacity:1}} @keyframes wsIn17{0%{opacity:0}18%{opacity:1}97%{opacity:0}} .ws-page .ws-e1,.ws-page .ws-e2,.ws-page .ws-e3{opacity:0} .ws-page .ws-e1{animation:wsE1 9s ease-out infinite} .ws-page .ws-e2{animation:wsE2 9s ease-out infinite} .ws-page .ws-e3{animation:wsE3 9s ease-out infinite} @keyframes wsE1{0%,21%{opacity:0;transform:translateY(4px)}24%,96%{opacity:1;transform:none}100%{opacity:0}} @keyframes wsE2{0%,43%{opacity:0;transform:translateY(4px)}46%,96%{opacity:1;transform:none}100%{opacity:0}} @keyframes wsE3{0%,66%{opacity:0;transform:translateY(4px)}69%,96%{opacity:1;transform:none}100%{opacity:0}} .ws-page .ws-st b{font-family:var(--font-mono);color:var(--text)} .ws-page .ws-s0{animation:wsS0 9s steps(1,end) infinite} .ws-page .ws-s1{animation:wsS1 9s steps(1,end) infinite} .ws-page .ws-s2{animation:wsS2 9s steps(1,end) infinite} @keyframes wsS0{0%{opacity:1}45%{opacity:0}98%{opacity:1}} @keyframes wsS1{0%{opacity:0}45%{opacity:1}68%{opacity:0}} @keyframes wsS2{0%{opacity:0}68%{opacity:1}98%{opacity:0}} .ws-page .ws-summary>span:last-child .ws-s1,.ws-page .ws-summary>span:last-child .ws-s2{color:#4fd48a} /* Reduced motion: the finished state of the scenario, shown still. */ @media(prefers-reduced-motion:reduce){ .ws-page .ws-live i,.ws-page .ws-panel,.ws-page .ws-new,.ws-page .ws-tape-track,.ws-page .ws-chg,.ws-page .ws-chg i, .ws-page .ws-swap b,.ws-page .ws-e1,.ws-page .ws-e2,.ws-page .ws-e3,.ws-page .ws-st b{animation:none!important} .ws-page .ws-e1,.ws-page .ws-e2,.ws-page .ws-e3,.ws-page .ws-swap .ws-b,.ws-page .ws-s2{opacity:1} .ws-page .ws-swap .ws-a,.ws-page .ws-s0,.ws-page .ws-s1{opacity:0} .ws-page .ws-chg i{transform:scaleX(var(--s))} } /* ── MQL4 TECHNOLOGY PAGE ────────────────────────────────────────────────── /technologies/mql4-developer/. Scoped to .mql4-page. Code-service rows use the shared .tech-page direction rows; the development cards, integration cards and process are the site's standard components. */ /* Overview: a MetaEditor-style window. One source line and the build log swap from an error state to a clean build on an 8-second loop; both states share one grid cell, so the window never changes size. */ .mql4-page .mq-editor{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mql4-page .mq-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mql4-page .mq-dots{display:flex;gap:5px}.mql4-page .mq-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .mql4-page .mq-file{padding:4px 10px;border-radius:6px 6px 0 0;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:11px;color:var(--text-2)} .mql4-page .mq-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--blue-bright)} .mql4-page .mq-code{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.7;overflow:hidden} .mql4-page .mq-ln{display:flex;gap:12px;padding:0 14px;white-space:pre} .mql4-page .mq-ln i{flex:0 0 18px;font-style:normal;text-align:right;color:rgba(255,255,255,.22)} .mql4-page .mq-ln code{font-family:inherit;color:var(--text-2);background:none;padding:0} .mql4-page .mq-k{color:#8ab4ff}.mql4-page .mq-t{color:#5dd1ec}.mql4-page .mq-n{color:#9fe0b8} .mql4-page .mq-f{color:#e3e8f2}.mql4-page .mq-c{color:rgba(255,255,255,.34)} .mql4-page .mq-swap{display:grid} .mql4-page .mq-swap>*{grid-area:1/1} .mql4-page .mq-fixline{animation:mqLine 8s ease-in-out infinite} @keyframes mqLine{0%,46%{background:rgba(255,110,110,.1)}52%,58%{background:rgba(79,212,138,.14)}70%,100%{background:transparent}} .mql4-page .mq-bad{animation:mqBad 8s steps(1,end) infinite} .mql4-page .mq-ok{animation:mqOk 8s steps(1,end) infinite} @keyframes mqBad{0%{opacity:1}50%{opacity:0}100%{opacity:1}} @keyframes mqOk{0%{opacity:0}50%{opacity:1}100%{opacity:0}} .mql4-page .mq-log{border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.2)} .mql4-page .mq-log-title{padding:7px 14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid rgba(255,255,255,.05)} .mql4-page .mq-log-body{padding:8px 14px 10px} /* Log colours need .mq-log in the selector to win over the site's paragraph colour. */ .mql4-page .mq-log p{margin:0;font-family:var(--font-mono);font-size:10.5px;line-height:1.7} .mql4-page .mq-log .mq-err{color:#ff9c9c} .mql4-page .mq-log .mq-done{color:var(--text-dim)} .mql4-page .mq-log .mq-sum{margin-top:2px;font-weight:700} .mql4-page .mq-log .mq-sum-bad{color:#ff9c9c}.mql4-page .mq-log .mq-sum-ok{color:#4fd48a} /* Button to the platform's service catalogue under the development block. */ .mql4-page .mq-more,.el-page .mq-more{display:flex;justify-content:center;margin-top:26px} /* Integration cards three across; a card can link to more than one technology page. */ #mql4-stack .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .mql4-page .mq-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto} .mql4-page .mq-links .tech-choice-link,.pn-page .mq-links .tech-choice-link{margin-top:0} @media(max-width:1000px){ #mql4-stack .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:760px){ #mql4-stack .tech-choice-grid{grid-template-columns:1fr} .mql4-page .mq-code{font-size:10px;overflow-x:auto} } @media(prefers-reduced-motion:reduce){ .mql4-page .mq-fixline,.mql4-page .mq-bad,.mql4-page .mq-ok{animation:none} .mql4-page .mq-bad{opacity:0}.mql4-page .mq-ok{opacity:1} } /* Code services as a 2 x 2 grid of cards, with the fifth service spanning the full width underneath in the horizontal layout. Scoped to #mql4-services, so the shared direction rows on the WebSocket page are unchanged. Icons replace the step numbers used elsewhere. */ #mql4-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #mql4-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #mql4-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #mql4-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #mql4-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} .mql4-page .mq-dir-ico svg,.el-page .mq-dir-ico svg{width:19px;height:19px} @media(max-width:900px){ #mql4-services .ws-dirs{grid-template-columns:1fr} #mql4-services .ws-dir:last-child{grid-column:auto;display:flex} #mql4-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#mql4-services .ws-dir-ex,#mql4-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Development block: a command palette in the style of ⌘K launchers. Four radio inputs drive the selection, so it works without script and the arrow keys move between items once the list has focus. Each item opens a pane with a small live interface of that program type; hidden panes stay in the page, so their text remains readable to search engines. The mini interfaces (.ui) are shared with the MQL5, NinjaScript and Pine Script pages. */ .mql4-page .ui,.mql5-page .ui,.ns-page .ui,.pn-page .ui{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;padding:12px;border-radius:12px;background:#070c16;border:1px solid rgba(255,255,255,.06);overflow:hidden} .mql4-page .ui svg{width:100%;flex:1;min-height:60px;display:block} .mql4-page .ui-top{display:flex;justify-content:space-between;align-items:center} .mql4-page .ui-mono,.mql5-page .ui-mono,.ns-page .ui-mono,.pn-page .ui-mono{font-family:var(--font-mono);font-size:10px;color:var(--text-mute);letter-spacing:.04em} .mql4-page .ui-dim,.mql5-page .ui-dim,.ns-page .ui-dim,.pn-page .ui-dim{opacity:.7} .mql4-page .ui-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:#9fe0b8} .mql4-page .ui-live i{width:6px;height:6px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a;animation:mqpBlink 1.6s infinite} @keyframes mqpBlink{50%{opacity:.3}} .mql4-page .ui-pill{padding:2px 8px;border-radius:999px;background:rgba(93,209,236,.14);border:1px solid rgba(93,209,236,.4);font-family:var(--font-mono);font-size:9.5px;color:#5dd1ec;animation:mqpPillp 3s infinite} @keyframes mqpPillp{0%,60%{opacity:.35}70%,100%{opacity:1}} .mql4-page .ui-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute)} .mql4-page .eq-line{stroke-dasharray:420;stroke-dashoffset:420;animation:mqpDraw 4.5s ease-out infinite} .mql4-page .eq-fill{opacity:0;animation:mqpFillin 4.5s ease-out infinite} @keyframes mqpDraw{0%{stroke-dashoffset:420}60%,100%{stroke-dashoffset:0}} @keyframes mqpFillin{0%,40%{opacity:0}65%,100%{opacity:1}} .mql4-page .eq-dots line{stroke:#cfe2ff;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;animation:mqpDot 4.5s infinite} .mql4-page .eq-dots line:nth-child(1){animation-delay:.8s} .mql4-page .eq-dots line:nth-child(2){animation-delay:1.3s} .mql4-page .eq-dots line:nth-child(3){animation-delay:1.9s} .mql4-page .eq-dots line:nth-child(4){animation-delay:2.4s} @keyframes mqpDot{0%{opacity:0}8%,70%{opacity:1}90%,100%{opacity:0}} .mql4-page .ind-line{stroke-dasharray:360;stroke-dashoffset:360;animation:mqpDraw 3s ease-out infinite} .mql4-page .ind-sig{opacity:0;transform-origin:123px 61px;animation:mqpSig 3s infinite} @keyframes mqpSig{0%,55%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.25)}75%,100%{opacity:1;transform:scale(1)}} .mql4-page .scr-stage{position:relative;flex:1;display:grid;place-items:center;min-height:80px} .mql4-page .scr-btn{padding:9px 16px;border-radius:9px;background:linear-gradient(180deg,rgba(112,180,255,.25),rgba(112,180,255,.12));border:1px solid rgba(112,180,255,.55);font-size:12px;font-weight:700;color:#dce9ff;animation:mqpPress 4s infinite} @keyframes mqpPress{0%,30%{transform:scale(1)}36%{transform:scale(.94);box-shadow:0 0 0 6px rgba(112,180,255,.12)}44%,100%{transform:scale(1)}} .mql4-page .scr-cursor{position:absolute;left:62%;top:58%;width:0;height:0;border-left:7px solid #e3e8f2;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(-35deg);animation:mqpCur 4s infinite} @keyframes mqpCur{0%{transform:translate(30px,26px) rotate(-35deg);opacity:0}15%{opacity:1}30%,100%{transform:translate(0,0) rotate(-35deg);opacity:1}} .mql4-page .scr-toast{position:absolute;right:6px;bottom:4px;padding:6px 10px;border-radius:8px;background:rgba(79,212,138,.14);border:1px solid rgba(79,212,138,.45);font-size:11px;color:#bff0d4;opacity:0;animation:mqpToast 4s infinite} .mql4-page .scr-toast b{color:#4fd48a} @keyframes mqpToast{0%,42%{opacity:0;transform:translateY(8px)}50%,88%{opacity:1;transform:none}100%{opacity:0}} .mql4-page .ui-pan,.mql5-page .ui-pan{justify-content:center;gap:10px} .mql4-page .ui-pan .ui-top,.mql5-page .ui-pan .ui-top{position:absolute;top:12px;left:12px;right:12px} .mql4-page .ui-pan,.mql5-page .ui-pan{padding-top:36px} .mql4-page .pan-row{display:flex;gap:6px;align-items:center} .mql4-page .pan-lot{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.04);font-family:var(--font-mono);font-size:11px;color:var(--text)} .mql4-page .pan-lot b{color:var(--text-mute);font-weight:400} .mql4-page .pan-buy, .mql4-page .pan-sell{flex:1;padding:6px 0;border-radius:7px;text-align:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700} .mql4-page .pan-buy{background:rgba(79,212,138,.18);border:1px solid rgba(79,212,138,.5);color:#9fe0b8;animation:mqpBuy 5s infinite} .mql4-page .pan-sell{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.4);color:#ffb3b3} @keyframes mqpBuy{0%,18%{box-shadow:none}22%{box-shadow:0 0 0 5px rgba(79,212,138,.15)}30%,100%{box-shadow:none}} .mql4-page .pan-tg{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-2)} .mql4-page .tg{position:relative;width:26px;height:14px;border-radius:999px;background:rgba(255,255,255,.12);transition:background .3s} .mql4-page .tg::after,.mql5-page .tg::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff} .mql4-page .tg1{animation:mqpTgbg 5s infinite .6s} .mql4-page .tg1::after,.mql5-page .tg1::after{animation:mqpTgk 5s infinite .6s} .mql4-page .tg2{animation:mqpTgbg 5s infinite 1.2s} .mql4-page .tg2::after,.mql5-page .tg2::after{animation:mqpTgk 5s infinite 1.2s} .mql4-page .tg3{animation:mqpTgbg 5s infinite 1.8s} .mql4-page .tg3::after,.mql5-page .tg3::after{animation:mqpTgk 5s infinite 1.8s} @keyframes mqpTgbg{0%,10%{background:rgba(255,255,255,.12)}16%,80%{background:#4fa3ff}90%,100%{background:rgba(255,255,255,.12)}} @keyframes mqpTgk{0%,10%{transform:none}16%,80%{transform:translateX(12px)}90%,100%{transform:none}} .mql4-page .cp{max-width:980px;margin:32px auto 0;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(10,15,27,.92);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(112,180,255,.08) inset;overflow:hidden} .mql4-page .cp-in{position:absolute;opacity:0;pointer-events:none} .mql4-page .cp-search{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;color:var(--text-2)} .mql4-page .cp-search svg{width:18px;height:18px;color:var(--text-mute)} .mql4-page .cp-caret{width:2px;height:18px;background:var(--blue-bright);animation:mqpBlink 1s steps(1) infinite} .mql4-page .cp-esc{margin-left:auto;padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);font-family:var(--font-mono);font-size:10px;color:var(--text-mute)} .mql4-page .cp-body{display:grid;grid-template-columns:1fr 1.15fr;min-height:360px} .mql4-page .cp-list{padding:10px;border-right:1px solid rgba(255,255,255,.06)} .mql4-page .cp-group{padding:8px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .mql4-page .cp-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;transition:background .15s} .mql4-page .cp-item:hover{background:rgba(255,255,255,.04)} .mql4-page .cp-ico{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(112,180,255,.1);border:1px solid rgba(112,180,255,.25);color:var(--blue-bright)} .mql4-page .cp-ico svg{width:17px;height:17px} .mql4-page .cp-txt{flex:1;display:grid;gap:2px} .mql4-page .cp-txt b{font-size:13.5px;color:var(--text)} .mql4-page .cp-txt em{font-style:normal;font-size:11.5px;color:var(--text-mute)} .mql4-page .cp-item kbd, .mql4-page .cp-foot kbd{padding:2px 6px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);font-family:var(--font-mono);font-size:10px;color:var(--text-mute)} .mql4-page .cp-item kbd{opacity:0} .mql4-page #cp0:checked~.cp-body .cp-it0, .mql4-page #cp1:checked~.cp-body .cp-it1, .mql4-page #cp2:checked~.cp-body .cp-it2, .mql4-page #cp3:checked~.cp-body .cp-it3{background:linear-gradient(90deg,rgba(112,180,255,.16),rgba(112,180,255,.04));box-shadow:inset 2px 0 0 var(--blue-bright)} .mql4-page #cp0:checked~.cp-body .cp-it0 kbd, .mql4-page #cp1:checked~.cp-body .cp-it1 kbd, .mql4-page #cp2:checked~.cp-body .cp-it2 kbd, .mql4-page #cp3:checked~.cp-body .cp-it3 kbd{opacity:1} .mql4-page .cp-detail{display:grid;padding:20px} .mql4-page .cp-pane{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s} .mql4-page #cp0:checked~.cp-body .cp-p0, .mql4-page #cp1:checked~.cp-body .cp-p1, .mql4-page #cp2:checked~.cp-body .cp-p2, .mql4-page #cp3:checked~.cp-body .cp-p3{visibility:visible;opacity:1} .mql4-page .cp-pane-ui{height:150px;margin-bottom:16px} .mql4-page .cp-pane h3{margin:0 0 8px;font-size:18px} .mql4-page .cp-pane p{margin:0 0 12px;font-size:13.5px;line-height:1.65;color:var(--text-dim)} .mql4-page .cp-pane ul{display:grid;gap:6px;margin:0;padding:0;list-style:none} .mql4-page .cp-pane li{position:relative;padding-left:16px;font-size:12.5px;color:var(--text-2)} .mql4-page .cp-pane li::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:rgba(112,180,255,.7)} .mql4-page .cp-foot{display:flex;justify-content:space-between;padding:10px 20px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--text-mute)} .mql4-page .cp-foot span{display:flex;gap:6px;align-items:center} .mql4-page #cp0:focus-visible~.cp-body .cp-it0,.mql4-page #cp1:focus-visible~.cp-body .cp-it1,.mql4-page #cp2:focus-visible~.cp-body .cp-it2,.mql4-page #cp3:focus-visible~.cp-body .cp-it3{outline:2px solid var(--blue-bright);outline-offset:-2px} @media(max-width:900px){.mql4-page .cp-body{grid-template-columns:1fr}.mql4-page .cp-list{border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}.mql4-page .cp-foot span:last-child{display:none}} @media(prefers-reduced-motion:reduce){.mql4-page .cp *{animation:none!important}.mql4-page .eq-line,.mql4-page .ind-line{stroke-dashoffset:0}.mql4-page .eq-fill,.mql4-page .eq-dots line,.mql4-page .ind-sig,.mql4-page .scr-toast{opacity:1}} /* ── MQL5 TECHNOLOGY PAGE ────────────────────────────────────────────────── /technologies/mql5-developer/. Scoped to .mql5-page and #mql5-* sections. Shares the mini interfaces and code-service grid with the MQL4 page; the Strategy Tester visual, four-program showcase and capability tiles are its own. */ .mql5-page .ui svg{width:100%;flex:1;min-height:60px;display:block} .mql5-page .ui-top{display:flex;justify-content:space-between;align-items:center} .mql5-page .ui-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:#9fe0b8} .mql5-page .ui-live i{width:6px;height:6px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a;animation:mqpBlink 1.6s infinite} .mql5-page .ui-pill{padding:2px 8px;border-radius:999px;background:rgba(93,209,236,.14);border:1px solid rgba(93,209,236,.4);font-family:var(--font-mono);font-size:9.5px;color:#5dd1ec;animation:mqpPillp 3s infinite} .mql5-page .ui-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute)} .mql5-page .ind-line{stroke-dasharray:360;stroke-dashoffset:360;animation:mqpDraw 3s ease-out infinite} .mql5-page .ind-sig{opacity:0;transform-origin:123px 61px;animation:mqpSig 3s infinite} .mql5-page .scr-stage{position:relative;flex:1;display:grid;place-items:center;min-height:80px} .mql5-page .scr-btn{padding:9px 16px;border-radius:9px;background:linear-gradient(180deg,rgba(112,180,255,.25),rgba(112,180,255,.12));border:1px solid rgba(112,180,255,.55);font-size:12px;font-weight:700;color:#dce9ff;animation:mqpPress 4s infinite} .mql5-page .scr-cursor{position:absolute;left:62%;top:58%;width:0;height:0;border-left:7px solid #e3e8f2;border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(-35deg);animation:mqpCur 4s infinite} .mql5-page .scr-toast{position:absolute;right:6px;bottom:4px;padding:6px 10px;border-radius:8px;background:rgba(79,212,138,.14);border:1px solid rgba(79,212,138,.45);font-size:11px;color:#bff0d4;opacity:0;animation:mqpToast 4s infinite} .mql5-page .scr-toast b{color:#4fd48a} .mql5-page .pan-row{display:flex;gap:6px;align-items:center} .mql5-page .pan-lot{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.04);font-family:var(--font-mono);font-size:11px;color:var(--text)} .mql5-page .pan-lot b{color:var(--text-mute);font-weight:400} .mql5-page .pan-buy, .mql5-page .pan-sell{flex:1;padding:6px 0;border-radius:7px;text-align:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700} .mql5-page .pan-buy{background:rgba(79,212,138,.18);border:1px solid rgba(79,212,138,.5);color:#9fe0b8;animation:mqpBuy 5s infinite} .mql5-page .pan-sell{background:rgba(255,120,120,.12);border:1px solid rgba(255,120,120,.4);color:#ffb3b3} .mql5-page .pan-tg{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-2)} .mql5-page .tg{position:relative;width:26px;height:14px;border-radius:999px;background:rgba(255,255,255,.12);transition:background .3s} .mql5-page .tg1{animation:mqpTgbg 5s infinite .6s} .mql5-page .tg2{animation:mqpTgbg 5s infinite 1.2s} .mql5-page .tg3{animation:mqpTgbg 5s infinite 1.8s} .mql5-page .sc{max-width:1060px;margin:32px auto 0} .mql5-page .sc-in{position:absolute;opacity:0;pointer-events:none} .mql5-page .sc-segs{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:0 auto 20px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)} .mql5-page .sc-seg{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:all .2s} .mql5-page .sc-seg svg{width:15px;height:15px} .mql5-page .sc-seg:hover{color:var(--text)} .mql5-page #sc0:checked~.sc-segs .sc-s0,.mql5-page #sc1:checked~.sc-segs .sc-s1,.mql5-page #sc2:checked~.sc-segs .sc-s2,.mql5-page #sc3:checked~.sc-segs .sc-s3{background:linear-gradient(180deg,rgba(112,180,255,.3),rgba(112,180,255,.14));color:#fff;box-shadow:0 0 0 1px rgba(112,180,255,.45),0 8px 24px rgba(40,110,230,.3)} .mql5-page .sc-frame{display:grid;border-radius:22px;padding:1px;background:linear-gradient(140deg,rgba(112,180,255,.55),rgba(255,255,255,.06) 40%,rgba(161,145,255,.45))} .mql5-page .sc-stage{grid-area:1/1;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;padding:30px;border-radius:21px;background:radial-gradient(120% 100% at 0% 0%,rgba(112,180,255,.12),transparent 55%),#0a101d;visibility:hidden;opacity:0;transition:opacity .3s} .mql5-page #sc0:checked~.sc-frame .sc-st0,.mql5-page #sc1:checked~.sc-frame .sc-st1,.mql5-page #sc2:checked~.sc-frame .sc-st2,.mql5-page #sc3:checked~.sc-frame .sc-st3{visibility:visible;opacity:1} .mql5-page .sc-ui{height:250px} .mql5-page .sc-num{font-family:var(--font-mono);font-size:11px;color:var(--blue-bright)} .mql5-page .sc-txt h3{margin:10px 0 10px;font-size:24px;letter-spacing:-.01em} .mql5-page .sc-txt p{margin:0 0 16px;font-size:14.5px;line-height:1.7;color:var(--text-dim)} .mql5-page .sc-caps{display:flex;flex-wrap:wrap;gap:7px} .mql5-page .sc-caps span{padding:5px 11px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.08);font-size:12px;color:#cfe2ff} .mql5-page .mq-more{display:flex;justify-content:center;margin-top:26px} .mql5-page .mq-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto} .mql5-page .mq-links .tech-choice-link{margin-top:0} .mql5-page .mq-dir-ico svg{width:19px;height:19px} #mql5-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #mql5-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #mql5-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #mql5-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #mql5-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} /* Overview: Strategy Tester optimization window. Agents fill their progress bars at different speeds and results rows light up in turn; every element keeps its space, so the window never changes size. */ .mql5-page .t5{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mql5-page .t5-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mql5-page .t5-dots{display:flex;gap:5px}.mql5-page .t5-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .mql5-page .t5-title{font-size:12px;color:var(--text-2)} .mql5-page .t5-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;color:var(--blue-bright)} .mql5-page .t5-set{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 4px} .mql5-page .t5-set span{padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)} .mql5-page .t5-agents{display:grid;gap:6px;padding:10px 14px} .mql5-page .t5-agent{display:grid;grid-template-columns:62px 1fr 40px;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;color:var(--text-mute)} .mql5-page .t5-agent i{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden} .mql5-page .t5-agent b{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#4fa3ff,#5dd1ec);animation:t5Fill var(--d) ease-in-out var(--o) infinite} @keyframes t5Fill{0%{width:0}85%{width:100%}100%{width:100%}} .mql5-page .t5-agent em{font-style:normal;text-align:right} .mql5-page .t5-table{flex:1;display:grid;align-content:start;gap:3px;padding:6px 14px 12px} .mql5-page .t5-row{display:grid;grid-template-columns:.8fr 1.3fr 1fr .8fr;gap:8px;padding:5px 8px;border-radius:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)} .mql5-page .t5-head{padding-top:0;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .mql5-page .t5-row:not(.t5-head){background:rgba(255,255,255,.025);opacity:.25;animation:t5Row 8s ease-out infinite;animation-delay:calc(var(--i)*.7s)} @keyframes t5Row{0%{opacity:.25}8%,100%{opacity:1}} .mql5-page .t5-pos{color:#4fd48a} .mql5-page .t5-best{box-shadow:inset 2px 0 0 #4fd48a;background:rgba(79,212,138,.08)!important} .mql5-page .t5-foot{padding:9px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Showcase segments wrap on narrow screens. */ .mql5-page .sc-segs{flex-wrap:wrap} /* What MQL5 makes possible: compact horizontal tiles, three across. */ .mql5-page .m5-adds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px} .mql5-page .m5-add{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(112,180,255,.07),rgba(255,255,255,.01) 60%),var(--surface);transition:border-color .2s} .mql5-page .m5-add:hover{border-color:rgba(112,180,255,.4)} .mql5-page .m5-add-ico{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(112,180,255,.12);border:1px solid rgba(112,180,255,.3);color:var(--blue-bright)} .mql5-page .m5-add-ico svg{width:18px;height:18px} .mql5-page .m5-add h3{margin:0 0 6px;font-size:15.5px} .mql5-page .m5-add p{margin:0;font-size:13px;line-height:1.65;color:var(--text-dim)} #mql5-stack .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1000px){.mql5-page .m5-adds,#mql5-stack .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.mql5-page .sc-stage{grid-template-columns:1fr}.mql5-page .sc-segs{border-radius:14px}} @media(max-width:620px){.mql5-page .m5-adds,#mql5-stack .tech-choice-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.mql5-page .t5 *,.mql5-page .sc *{animation:none!important}.mql5-page .t5-row{opacity:1}.mql5-page .t5-agent b{width:100%}.mql5-page .ind-line{stroke-dashoffset:0}} @media(max-width:900px){ #mql5-services .ws-dirs{grid-template-columns:1fr} #mql5-services .ws-dir:last-child{grid-column:auto;display:flex} #mql5-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#mql5-services .ws-dir-ex,#mql5-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Expert Advisor mini interface: candles print in turn, then the buy entry, the stop-loss / take-profit levels and the exit at the take-profit appear on one 7-second cycle. */ .mql5-page .ui-ea5 svg{min-height:120px} .mql5-page .ea5-c{opacity:0;animation:ea5C 7s ease-out infinite;animation-delay:calc(var(--i)*.12s)} @keyframes ea5C{0%{opacity:0}4%,92%{opacity:1}100%{opacity:0}} .mql5-page .ea5-lv{stroke-width:1.2;stroke-dasharray:4 4;opacity:0;animation:ea5Lv 7s ease-out infinite} .mql5-page .ea5-tp,.ns-page .ea5-tp{stroke:#4fd48a}.mql5-page .ea5-sl,.ns-page .ea5-sl{stroke:#ff8f8f} .mql5-page .ea5-en{stroke:rgba(112,180,255,.55);stroke-width:1;opacity:0;animation:ea5Lv 7s ease-out infinite} .mql5-page .ea5-tx{font-family:var(--font-mono);font-size:8px;opacity:0;animation:ea5Lv 7s ease-out infinite} .mql5-page .ea5-tpt,.ns-page .ea5-tpt{fill:#4fd48a}.mql5-page .ea5-slt,.ns-page .ea5-slt{fill:#ff8f8f} @keyframes ea5Lv{0%,34%{opacity:0}40%,92%{opacity:1}100%{opacity:0}} .mql5-page .ea5-buy,.mql5-page .ea5-exit{opacity:0} .mql5-page .ea5-buy text,.mql5-page .ea5-exit text{font-family:var(--font-mono);font-size:8px;font-weight:700} .mql5-page .ea5-buy text{fill:#8ab4ff}.mql5-page .ea5-exit text{fill:#4fd48a} .mql5-page .ea5-buy{animation:ea5Buy 7s ease-out infinite} .mql5-page .ea5-exit{animation:ea5Exit 7s ease-out infinite} @keyframes ea5Buy{0%,28%{opacity:0}32%,92%{opacity:1}100%{opacity:0}} @keyframes ea5Exit{0%,74%{opacity:0}78%,92%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.mql5-page .ea5-c,.mql5-page .ea5-lv,.mql5-page .ea5-en,.mql5-page .ea5-tx,.mql5-page .ea5-buy,.mql5-page .ea5-exit{animation:none;opacity:1}} /* ── NINJASCRIPT TECHNOLOGY PAGE ─────────────────────────────────────────── /technologies/ninjascript-developer/. Scoped to .ns-page and #ns-* sections. Shares mini interfaces and the code-service grid with the MQL pages; the footprint visual, live bento and pitfalls table are its own. */ .ns-page .ui svg{width:100%;flex:1;min-height:60px;display:block} .ns-page .ui-top{display:flex;justify-content:space-between;align-items:center} .ns-page .ui-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:#9fe0b8} .ns-page .ui-live i{width:6px;height:6px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a;animation:mqpBlink 1.6s infinite} .ns-page .ui-pill{padding:2px 8px;border-radius:999px;background:rgba(93,209,236,.14);border:1px solid rgba(93,209,236,.4);font-family:var(--font-mono);font-size:9.5px;color:#5dd1ec;animation:mqpPillp 3s infinite} .ns-page .ui-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute)} .ns-page .ind-line{stroke-dasharray:360;stroke-dashoffset:360;animation:mqpDraw 3s ease-out infinite} .ns-page .ind-sig{opacity:0;transform-origin:123px 61px;animation:mqpSig 3s infinite} /* Strategy mini interface (same drawing as the MQL5 Expert Advisor): candles print in turn, then the buy entry, the stop-loss / take-profit levels and the exit at the take-profit appear on one 7-second cycle. */ .ns-page .ui-ea5 svg{min-height:120px} .ns-page .ea5-c{opacity:0;animation:ea5C 7s ease-out infinite;animation-delay:calc(var(--i)*.12s)} @keyframes ea5C{0%{opacity:0}4%,92%{opacity:1}100%{opacity:0}} .ns-page .ea5-lv{stroke-width:1.2;stroke-dasharray:4 4;opacity:0;animation:ea5Lv 7s ease-out infinite} .ns-page .ea5-en{stroke:rgba(112,180,255,.55);stroke-width:1;opacity:0;animation:ea5Lv 7s ease-out infinite} .ns-page .ea5-tx{font-family:var(--font-mono);font-size:8px;opacity:0;animation:ea5Lv 7s ease-out infinite} @keyframes ea5Lv{0%,34%{opacity:0}40%,92%{opacity:1}100%{opacity:0}} .ns-page .ea5-buy,.ns-page .ea5-exit{opacity:0} .ns-page .ea5-buy text,.ns-page .ea5-exit text{font-family:var(--font-mono);font-size:8px;font-weight:700} .ns-page .ea5-buy text{fill:#8ab4ff}.ns-page .ea5-exit text{fill:#4fd48a} .ns-page .ea5-buy{animation:ea5Buy 7s ease-out infinite} .ns-page .ea5-exit{animation:ea5Exit 7s ease-out infinite} @keyframes ea5Buy{0%,28%{opacity:0}32%,92%{opacity:1}100%{opacity:0}} @keyframes ea5Exit{0%,74%{opacity:0}78%,92%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.ns-page .ea5-c,.ns-page .ea5-lv,.ns-page .ea5-en,.ns-page .ea5-tx,.ns-page .ea5-buy,.ns-page .ea5-exit{animation:none;opacity:1}} .ns-page .bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:14px;margin-top:32px} .ns-page .bt{position:relative;display:flex;flex-direction:column;padding:22px;border-radius:18px;border:1px solid transparent; background:linear-gradient(180deg,#0d1424,#0a101d) padding-box,linear-gradient(140deg,rgba(112,180,255,.55),rgba(255,255,255,.05) 38%,rgba(255,255,255,.04) 62%,rgba(161,145,255,.45)) border-box; overflow:hidden;transition:transform .25s ease,box-shadow .25s ease} .ns-page .bt::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none} .ns-page .bt:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(20,60,140,.35)} .ns-page .bt-big{grid-row:1/3} .ns-page .bt-wide{grid-column:2/4} .ns-page .bt-head{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:14px} .ns-page .bt-num{font-family:var(--font-mono);font-size:11px;color:var(--blue-bright)} .ns-page .bt-kick{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .ns-page .bt h3{position:relative;margin:0 0 8px;font-size:19px;letter-spacing:-.01em} .ns-page .bt-big h3{font-size:24px} .ns-page .bt p{position:relative;margin:0 0 18px;font-size:13.5px;line-height:1.65;color:var(--text-dim)} .ns-page .bt-ui{position:relative;flex:1;min-height:130px} .ns-page .bt-big .bt-ui{min-height:230px} .ns-page .bt-wide{display:grid;grid-template-columns:1fr 1.15fr;column-gap:22px;align-items:center} .ns-page .bt-wide .bt-head, .ns-page .bt-wide h3, .ns-page .bt-wide p{grid-column:1} .ns-page .bt-wide .bt-ui{grid-column:2;grid-row:1/4;min-height:150px} .ns-page .mq-more{display:flex;justify-content:center;margin-top:26px} .ns-page .mq-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto} .ns-page .mq-links .tech-choice-link{margin-top:0} .ns-page .mq-dir-ico svg{width:19px;height:19px} #ns-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #ns-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #ns-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #ns-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #ns-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} /* Overview: a footprint chart as a custom NinjaScript indicator would draw it. The live bar's cells light up level by level; every cell keeps its space. */ .ns-page .fp{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .ns-page .fp-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .ns-page .fp-dots{display:flex;gap:5px}.ns-page .fp-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .ns-page .fp-title{font-size:12px;color:var(--text-2)} .ns-page .fp-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .ns-page .fp-body{flex:1;display:grid;grid-template-columns:1fr 62px;gap:8px;padding:12px 14px 6px} .ns-page .fp-bars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .ns-page .fp-bar{display:grid;grid-template-rows:repeat(8,1fr);gap:2px} .ns-page .fp-cell{display:grid;grid-template-columns:1fr 12px 1fr;align-items:center;padding:0 6px;border-radius:3px;background:rgba(112,180,255,.07);font-family:var(--font-mono);font-size:10px;color:var(--text-2)} .ns-page .fp-cell span:first-child{text-align:right} .ns-page .fp-cell i{font-style:normal;text-align:center;color:var(--text-mute);font-size:9px} .ns-page .fp-empty{background:transparent} .ns-page .fp-poc{box-shadow:inset 0 0 0 1px rgba(112,180,255,.75);background:rgba(112,180,255,.16)} .ns-page .fp-ia span:last-child{color:#4fd48a;font-weight:700} .ns-page .fp-ib span:first-child{color:#ff8f8f;font-weight:700} .ns-page .fp-live .fp-cell:not(.fp-empty){opacity:.2;animation:fpCell 6s ease-out infinite} .ns-page .fp-live .fp-cell:nth-child(5){animation-delay:.3s}.ns-page .fp-live .fp-cell:nth-child(4){animation-delay:.8s} .ns-page .fp-live .fp-cell:nth-child(3){animation-delay:1.3s}.ns-page .fp-live .fp-cell:nth-child(2){animation-delay:1.8s}.ns-page .fp-live .fp-cell:nth-child(1){animation-delay:2.3s} @keyframes fpCell{0%{opacity:.2}6%,92%{opacity:1}100%{opacity:.2}} .ns-page .fp-scale{display:grid;grid-template-rows:repeat(8,1fr);font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute);align-items:center} .ns-page .fp-cvd{position:relative;height:46px;margin:0 14px 8px;border-top:1px dashed rgba(255,255,255,.08)} .ns-page .fp-cvd svg{width:100%;height:100%;display:block} .ns-page .fp-cvd-l{position:absolute;left:0;top:4px;font-family:var(--font-mono);font-size:9px;color:var(--text-mute)} .ns-page .fp-cvd-p{stroke-dasharray:360;stroke-dashoffset:360;animation:fpCvd 6s ease-out infinite} @keyframes fpCvd{0%{stroke-dashoffset:360}55%,100%{stroke-dashoffset:0}} .ns-page .fp-foot{padding:9px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Bento mini interfaces specific to NinjaScript: an Add-On window and a trade copier. */ .ns-page .ui-addon{justify-content:center} .ns-page .ad-win{border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden;background:#0c1322} .ns-page .ad-title{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(112,180,255,.12);font-size:11px;font-weight:700;color:var(--text)} .ns-page .ad-x{font-weight:400;color:var(--text-mute);letter-spacing:4px} .ns-page .ad-head,.ns-page .ad-row{display:grid;grid-template-columns:1fr .8fr 1.2fr;gap:6px;padding:5px 10px;font-size:10.5px} .ns-page .ad-head{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-mute);border-bottom:1px solid rgba(255,255,255,.06)} .ns-page .ad-row{color:var(--text-2);animation:adRow 5s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)} .ns-page .ad-row+.ad-row{border-top:1px solid rgba(255,255,255,.04)} @keyframes adRow{0%,100%{background:transparent}45%{background:rgba(112,180,255,.07)}} .ns-page .ad-acc{font-family:var(--font-mono);color:var(--text)} .ns-page .ad-pl{font-family:var(--font-mono);font-weight:700}.ns-page .ad-up{color:#4fd48a}.ns-page .ad-dn{color:#ff8f8f} .ns-page .ad-st{color:var(--text-mute)} /* Other NinjaScript types, listed under the bento. */ .ns-page .ns-also{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--text-dim)} .ns-page .ns-also b{padding:5px 12px;border-radius:999px;border:1px solid rgba(112,180,255,.24);background:rgba(112,180,255,.06);font-weight:600;font-size:12.5px;color:var(--text-2)} /* Where NinjaScript projects go wrong: situation and how it is handled. */ .ns-page .ns-pit{max-width:1000px;margin:30px auto 0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .ns-page .ns-pit-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,2fr);gap:24px;padding:16px 22px} .ns-page .ns-pit-row+.ns-pit-row{border-top:1px solid rgba(255,255,255,.06)} .ns-page .ns-pit-h{background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);padding-top:12px;padding-bottom:12px} .ns-page .ns-pit-sit{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:700;color:var(--text)} .ns-page .ns-pit-sit span{flex:0 0 8px;height:8px;margin-top:7px;border-radius:50%;background:rgba(112,180,255,.8)} .ns-page .ns-pit-do{font-size:13.5px;line-height:1.7;color:var(--text-dim)} #ns-stack .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1000px){#ns-stack .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.ns-page .bento{grid-template-columns:1fr}.ns-page .bt-big,.ns-page .bt-wide{grid-row:auto;grid-column:auto}.ns-page .bt-wide{display:flex}} @media(max-width:620px){#ns-stack .tech-choice-grid{grid-template-columns:1fr}.ns-page .ns-pit-row{grid-template-columns:1fr;gap:6px}.ns-page .ns-pit-h{display:none}.ns-page .fp-cell{font-size:8.5px;padding:0 3px}.ns-page .fp-body{grid-template-columns:1fr 48px}} @media(prefers-reduced-motion:reduce){.ns-page .fp *,.ns-page .bento *{animation:none!important}.ns-page .fp-live .fp-cell{opacity:1}.ns-page .fp-cvd-p,.ns-page .ind-line{stroke-dashoffset:0}} @media(max-width:900px){ #ns-services .ws-dirs{grid-template-columns:1fr} #ns-services .ws-dir:last-child{grid-column:auto;display:flex} #ns-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#ns-services .ws-dir-ex,#ns-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Position line under the strategy chart, in the style of Chart Trader. */ .ns-page .st-pos{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.025);font-size:10.5px;color:var(--text-mute)} .ns-page .st-pos b{font-family:var(--font-mono);font-weight:700;color:var(--text)} .ns-page .st-pos .st-up{color:#4fd48a} /* Trade copier tile: the master order travels down to each follower account, which confirms in turn. */ .ns-page .ui-copier{justify-content:center;gap:6px} .ns-page .cp5-master,.ns-page .cp5-f{display:grid;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;font-size:10.5px} .ns-page .cp5-master{grid-template-columns:1fr auto;border:1px solid rgba(112,180,255,.35);background:rgba(112,180,255,.1);color:var(--text)} .ns-page .cp5-f{grid-template-columns:1fr auto auto auto;background:rgba(255,255,255,.03);color:var(--text-2)} .ns-page .cp5-acc{font-family:var(--font-mono)} .ns-page .cp5-mult{font-family:var(--font-mono);color:var(--text-mute)} .ns-page .cp5-ord{font-family:var(--font-mono);font-weight:700;color:#4fd48a} .ns-page .cp5-src{animation:cp5Src 5s ease-out infinite} @keyframes cp5Src{0%,4%{box-shadow:none}8%{box-shadow:0 0 0 4px rgba(79,212,138,.15)}16%,100%{box-shadow:none}} .ns-page .cp5-flow{display:flex;justify-content:center;gap:5px;height:10px} .ns-page .cp5-flow i{width:4px;height:4px;border-radius:50%;background:var(--blue-bright);opacity:.2;animation:cp5Dot 5s ease-in-out infinite} .ns-page .cp5-flow i:nth-child(2){animation-delay:.15s}.ns-page .cp5-flow i:nth-child(3){animation-delay:.3s} @keyframes cp5Dot{0%,8%{opacity:.2;transform:none}14%{opacity:1;transform:translateY(3px)}24%,100%{opacity:.2;transform:none}} .ns-page .cp5-list{display:grid;gap:4px} .ns-page .cp5-f .cp5-ord,.ns-page .cp5-ok{opacity:0;animation:cp5In 5s ease-out infinite;animation-delay:calc(.5s + var(--i)*.35s)} .ns-page .cp5-ok{font-family:var(--font-mono);font-size:9px;color:#9fe0b8} @keyframes cp5In{0%{opacity:0}6%,88%{opacity:1}100%{opacity:0}} @media(prefers-reduced-motion:reduce){.ns-page .cp5-f .cp5-ord,.ns-page .cp5-ok{animation:none;opacity:1}} /* Link to our own products inside a Why card on the technology pages. */ .tech-page .svc-why-card .why-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--blue-bright);text-decoration:none} .tech-page .svc-why-card .why-link:hover{text-decoration:underline} /* ── PINE SCRIPT TECHNOLOGY PAGE ─────────────────────────────────────────── /technologies/pinescript-developer/. Scoped to .pn-page and #pine-* sections. Shares mini interfaces and the code-service grid with the other language pages; the alert chart, hover-preview list and limits panel are its own. */ .pn-page .ui svg{width:100%;flex:1;min-height:60px;display:block} .pn-page .ui-top{display:flex;justify-content:space-between;align-items:center} .pn-page .ui-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:#9fe0b8} .pn-page .ui-live i{width:6px;height:6px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a;animation:mqpBlink 1.6s infinite} .pn-page .ui-pill{padding:2px 8px;border-radius:999px;background:rgba(93,209,236,.14);border:1px solid rgba(93,209,236,.4);font-family:var(--font-mono);font-size:9.5px;color:#5dd1ec;animation:mqpPillp 3s infinite} .pn-page .ui-foot{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9.5px;color:var(--text-mute)} .pn-page .eq-line{stroke-dasharray:420;stroke-dashoffset:420;animation:mqpDraw 4.5s ease-out infinite} .pn-page .eq-fill{opacity:0;animation:mqpFillin 4.5s ease-out infinite} .pn-page .eq-dots line{stroke:#cfe2ff;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;animation:mqpDot 4.5s infinite} .pn-page .eq-dots line:nth-child(1){animation-delay:.8s} .pn-page .eq-dots line:nth-child(2){animation-delay:1.3s} .pn-page .eq-dots line:nth-child(3){animation-delay:1.9s} .pn-page .eq-dots line:nth-child(4){animation-delay:2.4s} .pn-page .ind-line{stroke-dasharray:360;stroke-dashoffset:360;animation:mqpDraw 3s ease-out infinite} .pn-page .ind-sig{opacity:0;transform-origin:123px 61px;animation:mqpSig 3s infinite} .pn-page .mq-more{display:flex;justify-content:center;margin-top:26px} .pn-page .mq-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto} .pn-page .mq-dir-ico svg{width:19px;height:19px} .pn-page .ns-also{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:var(--text-dim)} .pn-page .ns-also b{padding:5px 12px;border-radius:999px;border:1px solid rgba(112,180,255,.24);background:rgba(112,180,255,.06);font-weight:600;font-size:12.5px;color:var(--text-2)} #pine-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #pine-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #pine-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #pine-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #pine-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} /* Overview: a TradingView-style chart. The Pine Script lines draw in, the Long label appears at the cross, then the alert card slides in. */ .pn-page .pv{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .pn-page .pv-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .pn-page .pv-sym{font-size:12px;font-weight:700;color:var(--text)} .pn-page .pv-ind{font-family:var(--font-mono);font-size:10px;color:#5dd1ec} .pn-page .pv-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .pn-page .pv-chart{position:relative;flex:1;padding:10px 12px} .pn-page .pv-chart svg{width:100%;height:100%;min-height:190px;display:block} .pn-page .pv-fast,.pn-page .pv-slow{stroke-dasharray:420;stroke-dashoffset:420;animation:pvDraw 8s ease-out infinite} .pn-page .pv-slow{animation-delay:.3s} @keyframes pvDraw{0%{stroke-dashoffset:420}40%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:420}} .pn-page .pv-long{opacity:0;animation:pvLong 8s ease-out infinite} .pn-page .pv-long text{font-family:var(--font-mono);font-size:8px;font-weight:700;fill:#07120d} @keyframes pvLong{0%,40%{opacity:0}46%,94%{opacity:1}100%{opacity:0}} .pn-page .pv-alert{position:absolute;top:14px;right:14px;width:210px;padding:9px 11px;border-radius:10px;border:1px solid rgba(112,180,255,.4);background:rgba(13,20,36,.96);box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translateY(-6px);animation:pvAlert 8s ease-out infinite} @keyframes pvAlert{0%,50%{opacity:0;transform:translateY(-6px)}56%,94%{opacity:1;transform:none}100%{opacity:0}} .pn-page .pv-alert-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--text)} .pn-page .pv-bell{color:#4fd48a;font-size:9px} .pn-page .pv-alert-b{margin-top:3px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .pn-page .pv-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.07)} .pn-page .pv-flow span{padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--text-2)} /* Development: all four items stay visible; hovering or focusing one swaps the preview beside it. Without :has() support the first preview shows. */ .pn-page .pn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:stretch;margin-top:32px} .pn-page .pn-list{display:grid;gap:10px} .pn-page .pn-item{display:flex;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--surface);cursor:default;outline:none;transition:border-color .2s,background .2s,transform .2s} .pn-page .pn-item:hover,.pn-page .pn-item:focus-visible{border-color:rgba(112,180,255,.5);background:linear-gradient(90deg,rgba(112,180,255,.12),rgba(112,180,255,.02)),var(--surface);transform:translateX(3px)} .pn-page .pn-ico{flex:0 0 36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(112,180,255,.12);border:1px solid rgba(112,180,255,.3);color:var(--blue-bright)} .pn-page .pn-ico svg{width:18px;height:18px} .pn-page .pn-item h3{margin:0 0 5px;font-size:15.5px} .pn-page .pn-item p{margin:0 0 9px;font-size:13px;line-height:1.6;color:var(--text-dim)} .pn-page .pn-caps{display:flex;flex-wrap:wrap;gap:6px} .pn-page .pn-caps span{padding:2px 9px;border-radius:999px;border:1px solid rgba(112,180,255,.24);font-size:11px;color:#cfe2ff} .pn-page .pn-preview{position:sticky;top:96px;display:flex;flex-direction:column;border-radius:18px;padding:1px;background:linear-gradient(140deg,rgba(112,180,255,.55),rgba(255,255,255,.06) 40%,rgba(161,145,255,.45))} .pn-page .pn-views{flex:1;display:grid;padding:18px;border-radius:17px 17px 0 0;background:radial-gradient(120% 100% at 0% 0%,rgba(112,180,255,.12),transparent 55%),#0a101d} .pn-page .pn-view{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .3s} .pn-page .pn-view .ui{height:100%;min-height:270px} .pn-page .pn-v0{opacity:1;visibility:visible} .pn-page .pn-split:has(.pn-item:hover) .pn-v0,.pn-page .pn-split:has(.pn-item:focus-visible) .pn-v0{opacity:0;visibility:hidden} .pn-page .pn-split:has(.pn-i0:hover) .pn-v0,.pn-page .pn-split:has(.pn-i0:focus-visible) .pn-v0, .pn-page .pn-split:has(.pn-i1:hover) .pn-v1,.pn-page .pn-split:has(.pn-i1:focus-visible) .pn-v1, .pn-page .pn-split:has(.pn-i2:hover) .pn-v2,.pn-page .pn-split:has(.pn-i2:focus-visible) .pn-v2, .pn-page .pn-split:has(.pn-i3:hover) .pn-v3,.pn-page .pn-split:has(.pn-i3:focus-visible) .pn-v3{opacity:1;visibility:visible} .pn-page .pn-hint{padding:9px 16px;border-radius:0 0 17px 17px;background:#0a101d;border-top:1px solid rgba(255,255,255,.06);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} .pn-page .pn-also{margin-top:22px} /* Preview interfaces specific to Pine Script. */ .pn-page .pt-stats{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.025);font-size:10.5px;color:var(--text-mute)} .pn-page .pt-stats b{font-family:var(--font-mono);color:var(--text)}.pn-page .pt-up{color:#4fd48a!important} .pn-page .pa-log{flex:1;display:grid;align-content:center;gap:7px} .pn-page .pa-ln{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.03);font-size:11px;opacity:0;animation:paLn 6s ease-out infinite;animation-delay:calc(var(--i)*.8s)} .pn-page .pa-ln span{font-family:var(--font-mono);font-size:10px;color:var(--text-mute)} .pn-page .pa-ln b{font-weight:600;color:var(--text-2)} .pn-page .pa-ln em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:#4fd48a} @keyframes paLn{0%{opacity:0;transform:translateY(4px)}8%,88%{opacity:1;transform:none}100%{opacity:0}} .pn-page .ui-screener{justify-content:center} .pn-page .ps-head,.pn-page .ps-row{display:grid;grid-template-columns:1.2fr 1fr .7fr .9fr;gap:8px;padding:7px 10px;font-size:11px} .pn-page .ps-head{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid rgba(255,255,255,.06)} .pn-page .ps-row{font-family:var(--font-mono);color:var(--text-2);border-radius:6px;animation:psRow 5s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)} @keyframes psRow{0%,100%{background:transparent}40%{background:rgba(112,180,255,.08)}} .pn-page .ps-up{color:#4fd48a}.pn-page .ps-down{color:#ff8f8f} .pn-page .ps-sig{font-weight:700}.pn-page .ps-long{color:#4fd48a}.pn-page .ps-short{color:#ff8f8f}.pn-page .ps-none{color:var(--text-mute)} /* What Pine Script can and cannot do. */ .pn-page .pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px} .pn-page .pc-col{padding:22px;border-radius:16px;border:1px solid rgba(79,212,138,.25);background:linear-gradient(160deg,rgba(79,212,138,.07),rgba(255,255,255,.01) 60%),var(--surface)} .pn-page .pc-col-b{border-color:rgba(112,180,255,.28);background:linear-gradient(160deg,rgba(112,180,255,.08),rgba(255,255,255,.01) 60%),var(--surface)} .pn-page .pc-h{margin-bottom:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)} .pn-page .pc ul{display:grid;gap:12px;margin:0;padding:0;list-style:none} .pn-page .pc li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--text-2)} .pn-page .pc-ok,.pn-page .pc-no{flex:0 0 24px;height:24px;display:grid;place-items:center;border-radius:7px} .pn-page .pc-ok{background:rgba(79,212,138,.14);color:#4fd48a} .pn-page .pc-no{background:rgba(112,180,255,.14);color:var(--blue-bright)} .pn-page .pc-ok svg,.pn-page .pc-no svg{width:14px;height:14px} .pn-page .pc b{display:block;font-size:14px;color:var(--text)} .pn-page .pc em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.6;color:var(--text-dim)} #pine-stack .tech-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1000px){#pine-stack .tech-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.pn-page .pn-split,.pn-page .pc{grid-template-columns:1fr}.pn-page .pn-preview{position:relative;top:0;order:-1}.pn-page .pv-alert{width:180px}} @media(max-width:620px){#pine-stack .tech-choice-grid{grid-template-columns:1fr}.pn-page .pn-view .ui{min-height:220px}} @media(prefers-reduced-motion:reduce){.pn-page .pv *,.pn-page .pv,.pn-page .pn-preview *{animation:none!important}.pn-page .pv-long,.pn-page .pv-alert,.pn-page .pa-ln{opacity:1;transform:none}.pn-page .pv-fast,.pn-page .pv-slow,.pn-page .eq-line,.pn-page .ind-line{stroke-dashoffset:0}} @media(max-width:900px){ #pine-services .ws-dirs{grid-template-columns:1fr} #pine-services .ws-dir:last-child{grid-column:auto;display:flex} #pine-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#pine-services .ws-dir-ex,#pine-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Legend under the overview chart, coloured like the two lines it names. */ .pn-page .pv-kf{color:#5dd1ec!important;border-color:rgba(93,209,236,.4)!important} .pn-page .pv-ks{color:#a191ff!important;border-color:rgba(161,145,255,.4)!important} /* ── EASYLANGUAGE TECHNOLOGY PAGE ────────────────────────────────────────── /technologies/easylanguage-developer/. Scoped to .el-page and #el-* sections. Kept smaller than the other language pages on purpose: a RadarScreen view, a scope section and plain development cards, no mini interfaces. */ #el-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #el-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #el-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #el-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #el-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} /* Overview: a RadarScreen window where each column is a custom EasyLanguage indicator. Cells light up in turn as conditions are met; the row where all four agree is marked. Everything keeps its space, so nothing shifts. */ .el-page .el-rs{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .el-page .el-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .el-page .el-sym{font-size:12px;font-weight:700;color:var(--text)} .el-page .el-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .el-page .rs-head,.el-page .rs-row{display:grid;grid-template-columns:.9fr repeat(4,minmax(0,1fr)) .7fr;gap:5px;align-items:center;padding:0 12px} .el-page .rs-head{padding-top:9px;padding-bottom:7px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);border-bottom:1px solid rgba(255,255,255,.06)} .el-page .rs-body{flex:1;display:grid;align-content:center;gap:4px;padding:8px 0} .el-page .rs-row{padding-top:3px;padding-bottom:3px;border-radius:6px} .el-page .rs-sym{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text)} .el-page .rs-c{padding:4px 0;border-radius:5px;background:rgba(255,255,255,.03);text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--text-mute)} .el-page .rs-on{animation:rsOn 7s ease-out infinite;animation-delay:var(--d)} @keyframes rsOn{0%{background:rgba(255,255,255,.03);color:var(--text-mute)}6%,90%{background:rgba(93,209,236,.18);color:#bfefff}100%{background:rgba(255,255,255,.03);color:var(--text-mute)}} .el-page .rs-score{justify-self:end;font-family:var(--font-mono);font-size:10.5px;color:var(--text-mute)} .el-page .rs-s3{color:#9fd8ea}.el-page .rs-s4{color:#4fd48a;font-weight:700} .el-page .rs-all{animation:rsAll 7s ease-out infinite} @keyframes rsAll{0%,40%{box-shadow:none;background:transparent}46%,90%{box-shadow:inset 2px 0 0 #4fd48a;background:rgba(79,212,138,.07)}100%{box-shadow:none;background:transparent}} .el-page .el-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Development cards: own style, accent line on top, no watermark letters. */ .el-page .el-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .el-page .el-b,.tks-page .el-b,.py-page .el-b{position:relative;display:flex;flex-direction:column;padding:26px 24px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(112,180,255,.06),rgba(255,255,255,.01) 55%),var(--surface);overflow:hidden;transition:border-color .2s,transform .2s} .el-page .el-b::before,.py-page .el-b::before{content:'';position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#70b4ff,#5dd1ec)} .el-page .el-b:hover{border-color:rgba(112,180,255,.4);transform:translateY(-2px)} .el-page .el-b-ico,.tks-page .el-b-ico,.py-page .el-b-ico{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:rgba(112,180,255,.12);border:1px solid rgba(112,180,255,.3);color:var(--blue-bright);margin-bottom:16px} .el-page .el-b-ico svg{width:19px;height:19px} .el-page .el-b h3{margin:0 0 8px;font-size:17px} .el-page .el-b p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .el-page .el-b-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .el-page .el-b-tags span{padding:3px 10px;border-radius:999px;border:1px solid rgba(112,180,255,.24);font-size:11.5px;color:#cfe2ff} /* Where our EasyLanguage work applies: its own section with three large cards — core work stands out, the case-by-case card is clearly marked, the third points elsewhere. */ .el-page .el-apply-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;margin-top:30px} .el-page .el-ap{display:flex;flex-direction:column;padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:var(--surface)} .el-page .el-ap-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px} .el-page .el-ap-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:11px} .el-page .el-ap-ico svg{width:19px;height:19px} .el-page .el-ap h3{margin:0 0 8px;font-size:18px} .el-page .el-ap p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .el-page .el-ap-tag{padding:4px 11px;border-radius:999px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;white-space:nowrap} .el-page .el-ap-core{border-color:rgba(79,212,138,.4);background:linear-gradient(160deg,rgba(79,212,138,.12),rgba(255,255,255,.01) 60%),var(--surface);box-shadow:0 14px 40px rgba(20,120,80,.12)} .el-page .el-ap-core .el-ap-ico{background:rgba(79,212,138,.16);color:#4fd48a}.el-page .el-ap-core .el-ap-tag{background:rgba(79,212,138,.16);color:#9fe0b8} .el-page .el-ap-case{border-color:rgba(112,180,255,.4);background:linear-gradient(160deg,rgba(112,180,255,.11),rgba(255,255,255,.01) 60%),var(--surface)} .el-page .el-ap-case .el-ap-ico{background:rgba(112,180,255,.16);color:var(--blue-bright)}.el-page .el-ap-case .el-ap-tag{background:rgba(112,180,255,.16);color:var(--blue-bright)} .el-page .el-ap-else .el-ap-ico{background:rgba(255,255,255,.07);color:var(--text-dim)}.el-page .el-ap-else .el-ap-tag{background:rgba(255,255,255,.07);color:var(--text-dim)} .el-page .el-ap a,.el-page .faq-answer a{color:var(--blue-bright);font-weight:600;text-decoration:none} .el-page .el-ap a:hover,.el-page .faq-answer a:hover{text-decoration:underline} @media(max-width:1000px){.el-page .el-build,.el-page .el-apply-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.el-page .el-build,.el-page .el-apply-grid{grid-template-columns:1fr}.el-page .rs-head,.el-page .rs-row{gap:3px;padding-left:8px;padding-right:8px}.el-page .rs-c{font-size:8.5px}.el-page .rs-head{font-size:7.5px;letter-spacing:0}} @media(prefers-reduced-motion:reduce){.el-page .rs-on,.el-page .rs-all{animation:none}.el-page .rs-on{background:rgba(93,209,236,.18);color:#bfefff}} @media(max-width:900px){ #el-services .ws-dirs{grid-template-columns:1fr} #el-services .ws-dir:last-child{grid-column:auto;display:flex} #el-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#el-services .ws-dir-ex,#el-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Why: four cards on this page, so four columns on wide screens and two below that, instead of the five-column platform grid. */ .el-page .platform-why-5{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1100px){.el-page .platform-why-5{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.el-page .platform-why-5{grid-template-columns:1fr}} /* ── THINKSCRIPT TECHNOLOGY PAGE ─────────────────────────────────────────── /technologies/thinkscript-developer/. Scoped to .tks-page and #tks-* sections. Basic level like EasyLanguage: plain cards, a chart with thinkScript labels, and one note on what lies beyond thinkScript instead of an integrations block. */ /* Development cards: the EasyLanguage card style, with a teal-to-green accent. */ .tks-page .el-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .tks-page .el-b::before{content:'';position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#5dd1ec,#4fd48a)} .tks-page .el-b:hover{border-color:rgba(112,180,255,.4);transform:translateY(-2px)} .tks-page .el-b-ico svg{width:19px;height:19px} .tks-page .el-b h3{margin:0 0 8px;font-size:17px} .tks-page .el-b p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .tks-page .el-b-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .tks-page .el-b-tags span{padding:3px 10px;border-radius:999px;border:1px solid rgba(112,180,255,.24);font-size:11.5px;color:#cfe2ff} .tks-page .mq-more{display:flex;justify-content:center;margin-top:26px} .tks-page .mq-dir-ico svg{width:19px;height:19px} #tks-services .ws-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} #tks-services .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #tks-services .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} #tks-services .ws-dir:last-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:26px} #tks-services .ws-dir:last-child .ws-dir-ex{margin-top:0;padding:0 0 0 22px;border-top:0;border-left:1px solid rgba(255,255,255,.08)} /* Overview: a Thinkorswim-style chart with coloured thinkScript labels on the chart and a custom study in the lower pane. Candles and study bars share one horizontal scale, so each bar sits under its own candle. Labels and histogram bars appear in turn; everything keeps its space. */ .tks-page .tk-chart{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .tks-page .tk-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .tks-page .tk-sym{font-size:12px;font-weight:700;color:var(--text)} .tks-page .tk-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .tks-page .tk-main{position:relative;padding:10px 14px 4px} .tks-page .tk-main svg{width:100%;height:84px;display:block} .tks-page .tk-labels{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px} .tks-page .tk-lb{padding:3px 9px;border-radius:5px;font-family:var(--font-mono);font-size:10px;font-weight:700;opacity:0;animation:tkLb 7s ease-out infinite;animation-delay:calc(var(--i)*.35s)} .tks-page .tk-lb-up{background:rgba(79,212,138,.2);color:#9fe0b8} .tks-page .tk-lb-nt{background:rgba(255,255,255,.08);color:var(--text-2)} .tks-page .tk-lb-hi{background:rgba(93,209,236,.2);color:#bfefff} @keyframes tkLb{0%{opacity:0}6%,92%{opacity:1}100%{opacity:0}} .tks-page .tk-pane{position:relative;margin:0 14px 8px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.1)} .tks-page .tk-pane svg{width:100%;height:34px;display:block} .tks-page .tk-pane-l{position:absolute;left:0;top:2px;font-family:var(--font-mono);font-size:9px;color:var(--text-mute)} .tks-page .tk-h{opacity:0;animation:tkH 7s ease-out infinite;animation-delay:calc(.8s + var(--i)*.12s)} @keyframes tkH{0%{opacity:0}5%,90%{opacity:1}100%{opacity:0}} .tks-page .tk-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* "Beyond thinkScript": the one note about what runs outside the platform. */ .tks-page .tk-beyond{display:flex;gap:14px;align-items:flex-start;margin:20px 0 0;padding:16px 20px;border:1px solid rgba(112,180,255,.26);border-radius:var(--r-lg);background:rgba(112,180,255,.05);font-size:13.5px;line-height:1.7;color:var(--text-dim)} .tks-page .tk-beyond strong{color:var(--text)} .tks-page .tk-beyond a,.tks-page .faq-answer a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tks-page .tk-beyond a:hover,.tks-page .faq-answer a:hover{text-decoration:underline} .tks-page .tk-beyond-ico{flex:0 0 32px;height:32px;display:grid;place-items:center;border-radius:8px;background:rgba(112,180,255,.12);color:var(--blue-bright)} .tks-page .tk-beyond-ico svg{width:17px;height:17px} @media(max-width:1000px){.tks-page .el-build{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.tks-page .el-build{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.tks-page .tk-lb,.tks-page .tk-h{animation:none;opacity:1}} @media(max-width:900px){ #tks-services .ws-dirs{grid-template-columns:1fr} #tks-services .ws-dir:last-child{grid-column:auto;display:flex} #tks-services .ws-dir:last-child .ws-dir-ex{padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} } @media(max-width:620px){#tks-services .ws-dir-ex,#tks-services .ws-dir:last-child .ws-dir-ex{padding-left:0}} /* Why: four cards on this page, so four columns on wide screens and two below that, instead of the five-column platform grid. */ .tks-page .platform-why-5{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1100px){.tks-page .platform-why-5{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.tks-page .platform-why-5{grid-template-columns:1fr}} /* ── PYTHON TECHNOLOGY PAGE ──────────────────────────────────────────────── /technologies/python-trading-developer/. Scoped to .py-page and #py-* sections. Terminal overview, core and additional services, capabilities and a hybrid integrations block. */ /* Additional service cards: the plain card style with an accent line, three across. */ .py-page .el-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px} .py-page .el-b:hover{border-color:rgba(112,180,255,.4);transform:translateY(-2px)} .py-page .el-b-ico svg{width:19px;height:19px} .py-page .el-b h3{margin:0 0 8px;font-size:17px} .py-page .el-b p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .py-page .el-b-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .py-page .el-b-tags span{padding:3px 10px;border-radius:999px;border:1px solid rgba(112,180,255,.24);font-size:11.5px;color:#cfe2ff} .py-page .mq-dir-ico svg{width:19px;height:19px} /* Overview: a terminal running a Python strategy. Log lines appear in turn on one cycle; every line keeps its space, so the window never changes size. */ .py-page .pt{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#070b13;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .py-page .pt-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .py-page .pt-dots{display:flex;gap:5px}.py-page .pt-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .py-page .pt-title{font-size:12px;color:var(--text-2)} .py-page .pt-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .py-page .pt-body{flex:1;display:grid;align-content:start;gap:5px;padding:14px;font-family:var(--font-mono);font-size:11px;line-height:1.5} .py-page .pt-cmd{color:var(--text);margin-bottom:4px} .py-page .pt-pr{color:#4fd48a;margin-right:6px} .py-page .pt-ln{display:grid;grid-template-columns:58px 56px 1fr;gap:8px;opacity:0;animation:ptLn 9s ease-out infinite;animation-delay:calc(.3s + var(--i)*.7s)} @keyframes ptLn{0%{opacity:0}4%,92%{opacity:1}100%{opacity:0}} .py-page .pt-t{color:var(--text-mute)} .py-page .pt-lv{font-weight:700} .py-page .pt-info{color:#8ab4ff}.py-page .pt-sig{color:#5dd1ec}.py-page .pt-risk{color:#a191ff}.py-page .pt-ord{color:#e3e8f2}.py-page .pt-fill{color:#4fd48a} .py-page .pt-m{color:var(--text-2)} .py-page .pt-cur{margin-top:2px;color:var(--text)} .py-page .pt-cur i{display:inline-block;width:7px;height:13px;vertical-align:-2px;background:#e3e8f2;animation:ptBlink 1s steps(1) infinite} @keyframes ptBlink{50%{opacity:0}} .py-page .pt-foot{padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Services: labelled groups — core in a 2 x 2 grid of detailed rows, additional in a 3 x 2 grid of plain cards — and one line linking the service pages. */ .py-page .py-sub{margin:30px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright)} #py-services .py-core{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px} #py-services .py-core .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #py-services .py-core .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} .py-page .py-related{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px;padding:14px 18px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:rgba(255,255,255,.02);font-size:13px;color:var(--text-dim)} .py-page .py-related span{margin-right:4px} .py-page .py-related a{padding:4px 11px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07);font-size:12.5px;font-weight:600;color:var(--blue-bright);text-decoration:none} .py-page .py-related a:hover{border-color:rgba(112,180,255,.6)} /* Capabilities: eight compact cards, four across, each with "used in" tags. */ .py-page .py-caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px} .py-page .py-cap{display:flex;flex-direction:column;padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--surface)} .py-page .py-cap h3{margin:0 0 8px;font-size:15px} .py-page .py-cap p{margin:0 0 14px;font-size:13px;line-height:1.65;color:var(--text-dim)} .py-page .py-cap-use{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:auto} .py-page .py-cap-use span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);margin-right:2px} .py-page .py-cap-use b{padding:2px 8px;border-radius:999px;background:rgba(112,180,255,.1);font-size:11px;font-weight:600;color:#cfe2ff} /* Integrations: four setups, each with its flow and the platforms it uses. */ .py-page .py-fits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px} .py-page .py-fit{display:flex;flex-direction:column;padding:20px;border-radius:16px;border:1px solid rgba(112,180,255,.22);background:linear-gradient(170deg,rgba(112,180,255,.08),rgba(255,255,255,.01) 55%),var(--surface)} /* The flow sits under the description; flow and platforms keep to the bottom of the card together. */ .py-page .py-flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:auto 0 16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)} .py-page .py-st{padding:3px 7px;border-radius:6px;background:rgba(112,180,255,.12);border:1px solid rgba(112,180,255,.3);font-size:11px;font-weight:600;color:#cfe2ff;white-space:nowrap} .py-page .py-step{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .py-page .py-flow i{font-style:normal;color:var(--blue-bright);font-size:12px} .py-page .py-fit h3{margin:0 0 8px;font-size:16px} .py-page .py-fit p{margin:0 0 16px;font-size:13px;line-height:1.65;color:var(--text-dim)} .py-page .py-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .py-page .py-chips-l{width:100%;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .py-page .py-chip{padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:11.5px;color:var(--text-2);text-decoration:none} .py-page a.py-chip{border-color:rgba(112,180,255,.35);color:var(--blue-bright);font-weight:600} .py-page a.py-chip:hover{border-color:rgba(112,180,255,.7)} @media(max-width:1100px){.py-page .py-caps,.py-page .py-fits{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1000px){.py-page .el-build{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){#py-services .py-core{grid-template-columns:1fr}} @media(max-width:620px){.py-page .py-caps,.py-page .py-fits,.py-page .el-build{grid-template-columns:1fr}#py-services .py-core .ws-dir-ex{padding-left:0}.py-page .pt-body{font-size:9.5px}.py-page .pt-ln{grid-template-columns:48px 46px 1fr;gap:5px}} @media(prefers-reduced-motion:reduce){.py-page .pt-ln,.py-page .pt-cur i{animation:none;opacity:1}} /* ── C# TECHNOLOGY PAGE ──────────────────────────────────────────────────── /technologies/csharp-trading-developer/. Scoped to .cs-page and #cs-* sections. Reuses the Python page's service components (core rows, plain cards, group labels, related-services line) through the shared py-page class on
; the desktop tool, platforms block and 2 x 2 additional grid are its own. */ /* Overview: a focused desktop tool — order ticket, positions, status bar. */ .cs-page .ct{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.25);border-radius:12px;background:#0b111d;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .cs-page .ct-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(112,180,255,.14);border-bottom:1px solid rgba(255,255,255,.08)} .cs-page .ct-title{font-size:12px;font-weight:700;color:var(--text)} .cs-page .ct-win{font-size:11px;letter-spacing:6px;color:var(--text-mute)} .cs-page .ct-ticket{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;gap:8px;align-items:end;padding:14px;border-bottom:1px solid rgba(255,255,255,.06)} .cs-page .ct-f{display:grid;gap:4px} .cs-page .ct-f span{font-size:10px;color:var(--text-mute)} .cs-page .ct-f b{padding:6px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text)} .cs-page .ct-btn{padding:7px 14px;border-radius:6px;font-size:11.5px;font-weight:700;text-align:center} .cs-page .ct-buy{background:rgba(79,212,138,.2);border:1px solid rgba(79,212,138,.5);color:#9fe0b8} .cs-page .ct-sell{background:rgba(255,120,120,.14);border:1px solid rgba(255,120,120,.45);color:#ffb3b3} .cs-page .ct-grid{flex:1;display:grid;align-content:start;gap:2px;padding:10px 14px} .cs-page .ct-row{display:grid;grid-template-columns:1.2fr .9fr 1fr .9fr;gap:8px;padding:7px 8px;border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-2);animation:ctRow 6s ease-in-out infinite;animation-delay:calc(var(--i)*.8s)} .cs-page .ct-head{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute);animation:none;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0} @keyframes ctRow{0%,100%{background:transparent}45%{background:rgba(112,180,255,.07)}} .cs-page .ct-sym{color:var(--text);font-weight:700} .cs-page .ct-up{color:#4fd48a}.cs-page .ct-dn{color:#ff8f8f} .cs-page .ct-status{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--text-dim)} .cs-page .ct-dot{width:7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a} .cs-page .ct-illus{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* C# inside trading platforms: three prominent cards with a coloured edge. */ .cs-page .cps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px} .cs-page .cp{position:relative;display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:18px;border:1px solid rgba(var(--pc),.35);background:linear-gradient(165deg,rgba(var(--pc),.14),rgba(255,255,255,.01) 55%),var(--surface);overflow:hidden} .cs-page .cp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(var(--pc),.9)} .cs-page .cp-top{display:flex;align-items:center;gap:14px;margin-bottom:16px} .cs-page .cp-logo{position:relative;flex:0 0 52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(var(--pc),.14);border:1px solid rgba(var(--pc),.35)} .cs-page .cp-logo img{width:30px;height:30px;object-fit:contain;display:block} .cs-page .cp-noimg img{display:none} .cs-page .cp-noimg::after{content:attr(data-initial);font-size:16px;font-weight:800;color:rgb(var(--pc))} .cs-page .cp-name{display:grid;gap:5px} .cs-page .cp h3{margin:0;font-size:22px;line-height:1.1} .cs-page .cp-lang{justify-self:start;padding:3px 10px;border-radius:999px;background:rgba(var(--pc),.16);font-family:var(--font-mono);font-size:10.5px;color:rgb(var(--pc));white-space:nowrap} .cs-page .cp p{margin:0 0 18px;font-size:14px;line-height:1.7;color:var(--text-dim)} .cs-page .cp ul{display:grid;gap:9px;margin:0 0 20px;padding:0;list-style:none} .cs-page .cp li{position:relative;padding-left:18px;font-size:14px;color:var(--text-2)} .cs-page .cp li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:rgba(var(--pc),.85)} .cs-page .cp-links{display:grid;gap:6px;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)} .cs-page .cp-links a{font-size:13.5px;font-weight:700;color:rgb(var(--pc));text-decoration:none} .cs-page .cp-links a:hover{text-decoration:underline} /* Services: core rows 2 x 2 (same component as Python), additional cards 2 x 2. */ #cs-services .py-core{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px} #cs-services .py-core .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #cs-services .py-core .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} .cs-page .cs-add{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:1000px){.cs-page .cps{grid-template-columns:1fr}} @media(max-width:900px){#cs-services .py-core{grid-template-columns:1fr}} @media(max-width:620px){.cs-page .cs-add{grid-template-columns:1fr}#cs-services .py-core .ws-dir-ex{padding-left:0}.cs-page .ct-ticket{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-page .ct-row{font-size:9.5px;gap:4px}} @media(prefers-reduced-motion:reduce){.cs-page .ct-row{animation:none}} /* ── JAVASCRIPT TECHNOLOGY PAGE ──────────────────────────────────────────── /technologies/javascript-trading-developer/. Scoped to .js-page and #js-* sections. JavaScript trading apps: Node.js bots and browser tools, with Tradovate as one direction. Reuses plain cards, core rows and the related line through the shared py-page class; the web panel is its own. */ /* Overview: a small trading web panel — bots, positions with an equity line, and an execution log whose lines appear in turn. */ .js-page .jw{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:14px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .js-page .jw-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .js-page .jw-dots{display:flex;gap:5px}.js-page .jw-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)} .js-page .jw-url{padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.05);font-size:11px;color:var(--text-2)} .js-page .jw-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .js-page .jw-body{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;padding:10px 14px 4px} .js-page .jw-col{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)} .js-page .jw-h{margin-bottom:2px;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)} .js-page .jw-bot{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:7px;font-size:11px;color:var(--text-2)} .js-page .jw-bdot{width:7px;height:7px;border-radius:50%} .js-page .jw-bdot.jw-on{background:#4fd48a;box-shadow:0 0 6px #4fd48a}.js-page .jw-bdot.jw-off{background:rgba(255,255,255,.3)} .js-page .jw-bs{font-family:var(--font-mono);font-size:9.5px}.js-page .jw-bs.jw-on{color:#9fe0b8}.js-page .jw-bs.jw-off{color:var(--text-mute)} .js-page .jw-pos{display:grid;grid-template-columns:1fr auto auto;gap:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)} .js-page .jw-sym{color:var(--text);font-weight:700} .js-page .jw-up{color:#4fd48a}.js-page .jw-dn{color:#ff8f8f} .js-page .jw-eq{width:100%;height:24px;display:block;margin-top:2px} .js-page .jw-log{margin:6px 14px 8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)} .js-page .jw-ln{display:flex;gap:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2);padding:2px 0;opacity:0;animation:jwLn 7s ease-out infinite;animation-delay:calc(var(--i)*.8s)} .js-page .jw-ln span{color:var(--text-mute)} @keyframes jwLn{0%{opacity:0}6%,90%{opacity:1}100%{opacity:0}} .js-page .jw-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Development cards: four across on wide screens, two below that. */ .js-page .js-build{grid-template-columns:repeat(4,minmax(0,1fr))} /* Code services: four rows in a 2 x 2 grid (same component as Python and C#). */ #js-services .py-core{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px} #js-services .py-core .ws-dir{display:flex;flex-direction:column;align-items:stretch;gap:18px} #js-services .py-core .ws-dir-ex{margin-top:auto;padding:16px 0 0 58px;border-left:0;border-top:1px solid rgba(255,255,255,.08)} @media(max-width:1100px){.js-page .js-build{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){#js-services .py-core{grid-template-columns:1fr}} @media(max-width:620px){.js-page .js-build{grid-template-columns:1fr}#js-services .py-core .ws-dir-ex{padding-left:0}.js-page .jw-body{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.js-page .jw-ln{animation:none;opacity:1}} /* ── FIX PROTOCOL TECHNOLOGY PAGE ────────────────────────────────────────── /technologies/fix-protocol-trading/. Scoped to .fix-page and #fix-* sections. Services and capabilities follow the Trading Bot page form: the icon-card rules are copied here under .fix-page (the originals are scoped to .service-page); the capability panel uses the site-wide svc-capability styles as they are. */ .fix-page .fix-grid .srv-card{display:block;position:relative;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005)),var(--surface);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 36px rgba(0,0,0,.22);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .fix-page .fix-grid .srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .fix-page .fix-grid .srv-card:hover{border-color:rgba(112,180,255,.45);transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 20px 46px rgba(0,0,0,.28),0 0 0 1px rgba(112,180,255,.10)} .fix-page .fix-grid .srv-card:hover::before{transform:scaleX(1)} .fix-page .fix-grid .srv-name{margin:16px 0 8px!important;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text)} .fix-page .fix-grid .srv-desc{font-size:13px;line-height:1.65;color:var(--text-2)} /* Services: the Trading Bot page's icon cards, three across. */ .fix-page .fix-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px} .fix-page .fix-grid .srv-card .icon-box{margin:0} /* Overview: a FIX session between your system and the broker; messages appear in turn. */ .fix-page .fx{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .fix-page .fx-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .fix-page .fx-t{font-size:12px;font-weight:700;color:var(--text)} .fix-page .fx-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .fix-page .fx-ends{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:12px 14px} .fix-page .fx-end{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);text-align:center;font-size:11.5px;font-weight:700;color:var(--text)} .fix-page .fx-eng{padding:6px 10px;border-radius:999px;background:rgba(112,180,255,.14);border:1px solid rgba(112,180,255,.35);font-family:var(--font-mono);font-size:10px;color:var(--blue-bright)} .fix-page .fx-log{flex:1;display:grid;align-content:start;gap:5px;padding:0 14px 12px} .fix-page .fx-m{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.03);font-size:11.5px;opacity:0;animation:fxM 8s ease-out infinite;animation-delay:calc(var(--i)*.7s)} .fix-page .fx-m b{font-weight:700;color:var(--text)} .fix-page .fx-m em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--text-dim)} .fix-page .fx-dir{font-weight:700;text-align:center} .fix-page .fx-out .fx-dir{color:var(--blue-bright)}.fix-page .fx-in .fx-dir{color:#4fd48a} .fix-page .fx-in{background:rgba(79,212,138,.05)} @keyframes fxM{0%{opacity:0;transform:translateY(4px)}6%,90%{opacity:1;transform:none}100%{opacity:0}} .fix-page .fx-foot{padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} /* Where FIX is available: linked platform cards, the certified one highlighted. */ .fix-page .fx-vs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px} .fix-page .fx-v{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:14px;border:1px solid rgba(112,180,255,.22);background:var(--surface);text-decoration:none;transition:border-color .2s,transform .2s} .fix-page .fx-v:hover{border-color:rgba(112,180,255,.55);transform:translateY(-2px)} .fix-page .fx-v-cert{border-color:rgba(79,212,138,.45);background:linear-gradient(160deg,rgba(79,212,138,.1),rgba(255,255,255,.01) 60%),var(--surface)} .fix-page .fx-v-top{display:flex;align-items:center;gap:12px;margin-bottom:2px} .fix-page .fx-v-logo{position:relative;flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:12px;background:rgba(112,180,255,.1);border:1px solid rgba(112,180,255,.28)} .fix-page .fx-v-cert .fx-v-logo{background:rgba(79,212,138,.12);border-color:rgba(79,212,138,.4)} .fix-page .fx-v-logo img{width:28px;height:28px;object-fit:contain;display:block} .fix-page .fx-noimg img{display:none} .fix-page .fx-noimg::after{content:attr(data-initial);font-size:13px;font-weight:800;color:var(--blue-bright)} .fix-page .fx-v-cert .fx-noimg::after{color:#4fd48a} .fix-page .fx-v-name{display:grid;gap:3px} .fix-page .fx-v-name b{font-size:16px;line-height:1.2;color:var(--text)} .fix-page .fx-v-name span{font-family:var(--font-mono);font-size:10.5px;color:var(--blue-bright)} .fix-page .fx-v-d{font-size:13px;line-height:1.6;color:var(--text-dim)} .fix-page .fx-v-badge{align-self:flex-start;padding:2px 9px;border-radius:999px;background:rgba(79,212,138,.16);font-family:var(--font-mono);font-size:10px;color:#9fe0b8} .fix-page .fx-v-more{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:700;color:var(--blue-bright)} .fix-page .fx-other{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--text-dim)} .fix-page .fx-other b{padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-weight:600;font-size:12.5px;color:var(--text-2)} /* FIX, REST or WebSocket: a compact comparison, FIX row marked. */ .fix-page .fx-c{max-width:1000px;margin:30px auto 0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .fix-page .fx-c-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:20px;padding:14px 20px;font-size:13.5px;line-height:1.6;color:var(--text-dim)} .fix-page .fx-c-row+.fx-c-row{border-top:1px solid rgba(255,255,255,.06)} .fix-page .fx-c-h{background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .fix-page .fx-c-fix{background:rgba(112,180,255,.06)} .fix-page .fx-c-n b{color:var(--text)} .fix-page .fx-c-n a{font-weight:700;color:var(--blue-bright);text-decoration:none} .fix-page .fx-c-n a:hover{text-decoration:underline} .fix-page .fx-c-note{max-width:1000px;margin:14px auto 0;font-size:13.5px;line-height:1.6;color:var(--text-dim);text-align:center} @media(max-width:1100px){.fix-page .fx-vs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1000px){.fix-page .fix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.fix-page .fix-grid,.fix-page .fx-vs{grid-template-columns:1fr}.fix-page .fx-c-row{grid-template-columns:1fr;gap:4px}.fix-page .fx-c-h{display:none}.fix-page .fx-m{grid-template-columns:14px 1fr;}.fix-page .fx-m em{grid-column:2}} @media(prefers-reduced-motion:reduce){.fix-page .fx-m{animation:none;opacity:1}} /* ── MARKET PAGES ────────────────────────────────────────────────────────── /markets/*-trading-automation/. Shared components are scoped to .mkt-page; anything specific to one market uses its own modifier (.mkt-forex, …). Services and capabilities follow the Trading Bot page form: icon cards (rules copied under .mkt-page, the originals are scoped to .service-page), then the site-wide capability panel with grouped lists. */ .mkt-page .mkt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .mkt-page .mkt-grid .srv-card{display:block;position:relative;overflow:hidden;padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--surface);transition:border-color .25s,transform .25s,box-shadow .25s} .mkt-page .mkt-grid .srv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-bright));transform:scaleX(0);transform-origin:left;transition:transform .3s} .mkt-page .mkt-grid .srv-card:hover{border-color:rgba(112,180,255,.45);transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.28)} .mkt-page .mkt-grid .srv-card:hover::before{transform:scaleX(1)} .mkt-page .mkt-grid .srv-card .icon-box{margin:0} .mkt-page .mkt-grid .srv-name{margin:16px 0 8px!important;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text)} .mkt-page .mkt-grid .srv-desc{font-size:13px;line-height:1.65;color:var(--text-2)} /* The last, lower-priority service spans the row as a compact strip. */ .mkt-page .mkt-grid .mkt-wide{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:18px 24px} .mkt-page .mkt-grid .mkt-wide .srv-name{margin:0 0 4px!important} /* Related pages line under the services. */ .mkt-page .mkt-related{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px;padding:14px 18px;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);background:rgba(255,255,255,.02);font-size:13px;color:var(--text-dim)} .mkt-page .mkt-related span{margin-right:4px} .mkt-page .mkt-related a{padding:4px 11px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07);font-size:12.5px;font-weight:600;color:var(--blue-bright);text-decoration:none} .mkt-page .mkt-related a:hover{border-color:rgba(112,180,255,.6)} /* Secondary instruments (CFDs on the forex page): three cards and a note. */ .mkt-page .mkt-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .mkt-page .mkt-c{padding:22px;border-radius:14px;border:1px solid rgba(79,212,138,.25);background:linear-gradient(165deg,rgba(79,212,138,.07),rgba(255,255,255,.01) 60%),var(--surface)} .mkt-page .mkt-c h3{margin:0 0 8px;font-size:15.5px} .mkt-page .mkt-c p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .mkt-page .mkt-note{max-width:820px;margin:20px auto 0;text-align:center;font-size:14px;line-height:1.7;color:var(--text-dim)} .mkt-page .mkt-note a{color:var(--blue-bright);font-weight:600;text-decoration:none} .mkt-page .mkt-note a:hover{text-decoration:underline} /* Platforms for the market: linked cards with logos; core platforms marked. */ .mkt-page .mkt-ps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px} .mkt-page .mkt-p{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:14px;border:1px solid rgba(112,180,255,.2);background:var(--surface);transition:border-color .2s} .mkt-page .mkt-p:hover{border-color:rgba(112,180,255,.5)} .mkt-page .mkt-p-core{border-color:rgba(79,212,138,.35);background:linear-gradient(160deg,rgba(79,212,138,.08),rgba(255,255,255,.01) 60%),var(--surface)} .mkt-page .mkt-p-top{display:flex;align-items:center;gap:10px} .mkt-page .mkt-p-logo{position:relative;flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:11px;background:rgba(112,180,255,.1);border:1px solid rgba(112,180,255,.28)} .mkt-page .mkt-p-core .mkt-p-logo{background:rgba(79,212,138,.12);border-color:rgba(79,212,138,.4)} .mkt-page .mkt-p-logo img{width:26px;height:26px;object-fit:contain;display:block} .mkt-page .mkt-noimg img{display:none} .mkt-page .mkt-noimg::after{content:attr(data-initial);font-size:12px;font-weight:800;color:var(--blue-bright)} .mkt-page .mkt-p-core .mkt-noimg::after{color:#4fd48a} .mkt-page .mkt-p-name{display:grid;gap:2px} .mkt-page .mkt-p-name b{font-size:14.5px;line-height:1.2;color:var(--text)} .mkt-page .mkt-p-name span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} .mkt-page .mkt-p-core .mkt-p-name span{color:#9fe0b8} .mkt-page .mkt-p-d{font-size:12.5px;line-height:1.6;color:var(--text-dim)} .mkt-page .mkt-p-links{display:grid;gap:5px;margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)} .mkt-page .mkt-p-links a{font-size:12px;font-weight:700;color:var(--blue-bright);text-decoration:none} .mkt-page .mkt-p-links a:hover{text-decoration:underline} /* Forex overview: the four sessions on a 24-hour scale, the EA's trading window over the London–New York overlap, and a moving time marker. */ .mkt-forex .sx{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mkt-forex .sx-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mkt-forex .sx-t{font-size:12px;font-weight:700;color:var(--text)} .mkt-forex .sx-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .mkt-forex .sx-body{flex:1;padding:16px 14px 8px} .mkt-forex .sx-grid{position:relative;display:grid;gap:10px} .mkt-forex .sx-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px} .mkt-forex .sx-n{font-size:11.5px;color:var(--text-2)} .mkt-forex .sx-track{position:relative;height:18px;border-radius:5px;background:rgba(255,255,255,.04)} .mkt-forex .sx-bar{position:absolute;top:0;bottom:0;border-radius:5px} .mkt-forex .sx-s1{background:rgba(161,145,255,.55)}.mkt-forex .sx-s2{background:rgba(93,209,236,.55)} .mkt-forex .sx-s3{background:rgba(112,180,255,.7)}.mkt-forex .sx-s4{background:rgba(79,212,138,.6)} .mkt-forex .sx-ticks .sx-track{height:14px;background:none} .mkt-forex .sx-ticks .sx-track span{position:absolute;transform:translateX(-50%);font-family:var(--font-mono);font-size:9px;color:var(--text-mute)} .mkt-forex .sx-ticks .sx-track span:first-child{transform:none}.mkt-forex .sx-ticks .sx-track span:last-child{transform:translateX(-100%)} /* The window and the time marker live in one layer laid exactly over the tracks (the label column is 70px plus a 10px gap), so both are placed and moved in percent of the 24-hour scale. */ .mkt-forex .sx-over{position:absolute;top:-6px;bottom:20px;left:80px;right:0;pointer-events:none;z-index:1} .mkt-forex .sx-win{position:absolute;top:0;bottom:0;border:1px dashed rgba(79,212,138,.75);border-radius:6px;background:rgba(79,212,138,.08)} .mkt-forex .sx-win em{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:9px;color:#9fe0b8;white-space:nowrap} .mkt-forex .sx-now{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);animation:sxNow 12s linear infinite} @keyframes sxNow{from{left:0}to{left:100%}} .mkt-forex .sx-grid{margin-top:14px} .mkt-forex .sx-ea{margin:6px 14px 14px;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)} .mkt-forex .sx-ea-h{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text)} .mkt-forex .sx-dot{width:7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a} .mkt-forex .sx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px} .mkt-forex .sx-chips span{padding:3px 9px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.08);font-size:10.5px;color:#cfe2ff} @media(max-width:1100px){.mkt-page .mkt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mkt-page .mkt-grid .mkt-wide{grid-column:1/-1}.mkt-page .mkt-ps{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.mkt-page .mkt-cs{grid-template-columns:1fr 1fr}} @media(max-width:620px){.mkt-page .mkt-grid,.mkt-page .mkt-cs,.mkt-page .mkt-ps{grid-template-columns:1fr}.mkt-forex .sx-row{grid-template-columns:56px 1fr;gap:6px}.mkt-forex .sx-over{left:62px}} @media(prefers-reduced-motion:reduce){.mkt-forex .sx-now{animation:none}} /* Six platform cards, three across (stocks). */ .mkt-page .mkt-ps-6{grid-template-columns:repeat(3,minmax(0,1fr))} /* Futures overview: a master order copied to funded accounts, each with its own size and daily-loss meter; the account at its limit is skipped. Rows confirm in turn, and the window keeps its size through the cycle. */ .mkt-futures .fc{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mkt-futures .fc-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mkt-futures .fc-t{font-size:12px;font-weight:700;color:var(--text)} .mkt-futures .fc-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .mkt-futures .fc-master{display:flex;align-items:center;justify-content:space-between;margin:12px 14px 8px;padding:10px 12px;border-radius:10px;border:1px solid rgba(79,212,138,.4);background:rgba(79,212,138,.08);font-size:11.5px;color:var(--text-2)} .mkt-futures .fc-master b{font-family:var(--font-mono);font-size:12px;color:#9fe0b8} .mkt-futures .fc-head,.mkt-futures .fc-row{display:grid;grid-template-columns:1.35fr .45fr .6fr 1fr 1.05fr;gap:8px;align-items:center;padding:0 14px} .mkt-futures .fc-head{padding-bottom:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .mkt-futures .fc-body{flex:1;display:grid;align-content:start;gap:4px;padding-bottom:10px} .mkt-futures .fc-row{height:30px;border-radius:7px;font-size:11px;color:var(--text-2)} .mkt-futures .fc-row:nth-child(odd){background:rgba(255,255,255,.025)} .mkt-futures .fc-acc{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mkt-futures .fc-mult,.mkt-futures .fc-ord{font-family:var(--font-mono);font-size:10.5px} .mkt-futures .fc-dl{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} .mkt-futures .fc-dl i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,#4fd48a,#e6c24a)} .mkt-futures .fc-skip .fc-dl i{background:linear-gradient(90deg,#e6c24a,#ff7b7b)} .mkt-futures .fc-st{font-size:10px;font-weight:700;white-space:nowrap;opacity:0;animation:fcSt 8s ease-out infinite;animation-delay:calc(.6s + var(--i)*.55s)} .mkt-futures .fc-ok .fc-st{color:#4fd48a}.mkt-futures .fc-skip .fc-st{color:#ff9b9b} .mkt-futures .fc-skip .fc-ord{color:var(--text-mute)} @keyframes fcSt{0%{opacity:0}6%,90%{opacity:1}100%{opacity:0}} .mkt-futures .fc-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} @media(max-width:1100px){.mkt-page .mkt-ps-6{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.mkt-page .mkt-ps-6{grid-template-columns:1fr}.mkt-futures .fc-head,.mkt-futures .fc-row{grid-template-columns:1.3fr .4fr .9fr 1fr;gap:6px}.mkt-futures .fc-ord{display:none}.mkt-futures .fc-head span:nth-child(3){display:none}} @media(prefers-reduced-motion:reduce){.mkt-futures .fc-st{animation:none;opacity:1}} /* A one-line condition under the service cards (e.g. account access on futures). */ .mkt-page .mkt-svc-note{max-width:900px;margin:18px auto 0;padding:10px 16px;border-left:2px solid rgba(112,180,255,.6);border-radius:0 8px 8px 0;background:rgba(112,180,255,.05);font-size:13.5px;line-height:1.65;color:var(--text-2)} /* Stocks: two featured platform cards (half width, with a list of what we build there). .mkt-ps-4 is the four-across platform grid of forex and futures. */ .mkt-page .mkt-pfs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .mkt-page .mkt-pf{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;border:1px solid rgba(79,212,138,.38);background:linear-gradient(160deg,rgba(79,212,138,.09),rgba(255,255,255,.01) 60%),var(--surface)} .mkt-page .mkt-pf .mkt-p-logo{flex-basis:48px;height:48px;background:rgba(79,212,138,.12);border-color:rgba(79,212,138,.4)} .mkt-page .mkt-pf .mkt-noimg::after{color:#4fd48a} .mkt-page .mkt-pf .mkt-p-name b{font-size:18px} .mkt-page .mkt-pf .mkt-p-name span{color:#9fe0b8} .mkt-page .mkt-pf-d{margin:0;font-size:14px;line-height:1.65;color:var(--text-dim)} .mkt-page .mkt-pf ul{display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;margin:0;padding:0;list-style:none} .mkt-page .mkt-pf li{position:relative;padding-left:16px;font-size:13px;color:var(--text-2)} .mkt-page .mkt-pf li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#4fd48a} .mkt-page .mkt-ps-4{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px} /* Stocks overview: a pre-market scanner; matches light up in turn and one is handed to the broker as a bracket order. */ .mkt-stocks .ss{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mkt-stocks .ss-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mkt-stocks .ss-t{font-size:12px;font-weight:700;color:var(--text)} .mkt-stocks .ss-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .mkt-stocks .ss-head,.mkt-stocks .ss-row{display:grid;grid-template-columns:.9fr .9fr .9fr 1.4fr;gap:8px;align-items:center;padding:0 14px} .mkt-stocks .ss-head{padding-top:12px;padding-bottom:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .mkt-stocks .ss-body{display:grid;gap:4px;padding-bottom:10px} .mkt-stocks .ss-row{height:32px;border-radius:7px;font-family:var(--font-mono);font-size:11px;color:var(--text-2)} .mkt-stocks .ss-row:nth-child(odd){background:rgba(255,255,255,.025)} .mkt-stocks .ss-row b{color:var(--text)} .mkt-stocks .ss-up{color:#4fd48a}.mkt-stocks .ss-dn{color:#ff8f8f} .mkt-stocks .ss-row em{font-style:normal;font-family:inherit;font-size:10px;color:var(--text-mute)} .mkt-stocks .ss-hit{animation:ssHit 8s ease-in-out infinite;animation-delay:calc(.5s + var(--i)*.6s)} .mkt-stocks .ss-hit em{color:#9fe0b8;font-weight:700} @keyframes ssHit{0%,100%{background:rgba(255,255,255,.025)}35%,70%{background:rgba(79,212,138,.13)}} .mkt-stocks .ss-order{display:flex;align-items:center;gap:8px;margin:auto 14px 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(79,212,138,.4);background:rgba(79,212,138,.08);font-size:11.5px;color:var(--text-2)} .mkt-stocks .ss-dot{flex:0 0 7px;height:7px;border-radius:50%;background:#4fd48a;box-shadow:0 0 8px #4fd48a} .mkt-stocks .ss-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} @media(max-width:1100px){.mkt-page .mkt-ps-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.mkt-page .mkt-pfs{grid-template-columns:1fr}} @media(max-width:620px){.mkt-page .mkt-ps-4,.mkt-page .mkt-pf ul{grid-template-columns:1fr}.mkt-stocks .ss-head,.mkt-stocks .ss-row{gap:6px}} @media(prefers-reduced-motion:reduce){.mkt-stocks .ss-hit{animation:none;background:rgba(79,212,138,.13)}} /* Crypto: full-width groups of exchanges and bot platforms (no pages yet, so plain labels), then three platform cards. */ .mkt-page .mkt-ex{display:grid;gap:12px;margin-top:30px} .mkt-page .mkt-ex-g{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:start;padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--surface)} .mkt-page .mkt-ex-l{padding-top:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .mkt-page .mkt-ex-g div{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .mkt-page .mkt-ex-g b{padding:5px 12px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07);font-size:13px;font-weight:600;color:var(--text)} .mkt-page .mkt-ex-g em{font-style:normal;font-size:12.5px;color:var(--text-dim)} .mkt-page .mkt-ps-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px} /* Crypto overview: perpetual positions on three exchanges with P&L, a liquidation-distance bar and funding; an alert when a buffer is reached. */ .mkt-crypto .cx{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mkt-crypto .cx-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mkt-crypto .cx-t{font-size:12px;font-weight:700;color:var(--text)} .mkt-crypto .cx-tag{display:flex;align-items:center;gap:6px;margin-left:auto;padding:3px 9px;border:1px solid rgba(79,212,138,.4);border-radius:6px;background:rgba(79,212,138,.08);font-family:var(--font-mono);font-size:9.5px;color:#9fe0b8} .mkt-crypto .cx-dot{width:6px;height:6px;border-radius:50%;background:#4fd48a;box-shadow:0 0 6px #4fd48a;animation:cxPulse 2s ease-in-out infinite} @keyframes cxPulse{50%{opacity:.35}} .mkt-crypto .cx-head,.mkt-crypto .cx-row{display:grid;grid-template-columns:.9fr .9fr .9fr .7fr 1fr .8fr;gap:8px;align-items:center;padding:0 14px} .mkt-crypto .cx-head{padding-top:12px;padding-bottom:6px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .mkt-crypto .cx-body{display:grid;gap:4px;padding-bottom:10px} .mkt-crypto .cx-row{height:34px;border-radius:7px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)} .mkt-crypto .cx-row:nth-child(odd){background:rgba(255,255,255,.025)} .mkt-crypto .cx-row b{font-family:var(--font-body,inherit);font-size:11.5px;color:var(--text)} .mkt-crypto .cx-up{color:#4fd48a}.mkt-crypto .cx-dn{color:#ff8f8f} .mkt-crypto .cx-liq{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} .mkt-crypto .cx-liq i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#4fd48a} .mkt-crypto .cx-near i{background:#ff8f8f;animation:cxNear 3s ease-in-out infinite} @keyframes cxNear{50%{opacity:.45}} .mkt-crypto .cx-fund{font-size:10px;color:var(--text-dim)} .mkt-crypto .cx-alert{margin:auto 14px 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,143,143,.4);background:rgba(255,143,143,.07);font-size:11.5px;color:var(--text-2)} .mkt-crypto .cx-foot{display:flex;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} @media(max-width:1100px){.mkt-page .mkt-ps-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.mkt-page .mkt-ps-3,.mkt-page .mkt-ex-g{grid-template-columns:1fr;gap:8px}.mkt-crypto .cx-head,.mkt-crypto .cx-row{grid-template-columns:.9fr .9fr .7fr 1fr;gap:6px}.mkt-crypto .cx-head span:nth-child(3),.mkt-crypto .cx-row span:nth-of-type(2),.mkt-crypto .cx-head span:nth-child(6),.mkt-crypto .cx-fund{display:none}} @media(prefers-reduced-motion:reduce){.mkt-crypto .cx-dot,.mkt-crypto .cx-near i{animation:none}} /* Options overview: an iron condor — four legs, credit and max loss, a payoff profile, and a combo order that works at the mid price until it fills. */ .mkt-options .op{display:flex;flex-direction:column;width:100%;height:100%;border:1px solid rgba(112,180,255,.22);border-radius:16px;background:#0a0f1a;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden} .mkt-options .op-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)} .mkt-options .op-t{font-size:12px;font-weight:700;color:var(--text)} .mkt-options .op-tag{margin-left:auto;padding:3px 9px;border:1px solid rgba(112,180,255,.3);border-radius:6px;background:rgba(112,180,255,.1);font-family:var(--font-mono);font-size:9.5px;color:var(--blue-bright)} .mkt-options .op-head,.mkt-options .op-leg{display:grid;grid-template-columns:.8fr .5fr .7fr .9fr .8fr;gap:8px;align-items:center;padding:0 14px} .mkt-options .op-head{padding-top:10px;padding-bottom:5px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)} .mkt-options .op-legs{display:grid;gap:3px} .mkt-options .op-leg{height:21px;border-radius:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-2)} .mkt-options .op-leg:nth-child(odd){background:rgba(255,255,255,.025)} .mkt-options .op-leg b{font-weight:700} .mkt-options .op-sell b{color:#ff9b9b}.mkt-options .op-buy b{color:#4fd48a} .mkt-options .op-leg em{font-style:normal;color:var(--text-dim)} .mkt-options .op-mid{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:8px 14px 0} .mkt-options .op-sum{display:grid;gap:4px;font-size:11px;color:var(--text-dim)} .mkt-options .op-sum b{font-family:var(--font-mono);color:var(--text)} .mkt-options .op-note{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:.03em;color:var(--text-mute)} .mkt-options .op-pay{width:100%;height:56px;display:block} .mkt-options .op-zero{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke} .mkt-options .op-line{fill:none;stroke:#70b4ff;stroke-width:2;vector-effect:non-scaling-stroke} .mkt-options .op-zone{fill:rgba(79,212,138,.12)} .mkt-options .op-status{position:relative;height:34px;margin:8px 14px 10px} .mkt-options .op-status span{position:absolute;inset:0;display:flex;align-items:center;padding:0 12px;border-radius:10px;font-size:11.5px} .mkt-options .op-s1{border:1px solid rgba(112,180,255,.4);background:rgba(112,180,255,.07);color:#cfe2ff;animation:opS1 7s ease-in-out infinite} .mkt-options .op-s2{border:1px solid rgba(79,212,138,.45);background:rgba(79,212,138,.09);color:#9fe0b8;opacity:0;animation:opS2 7s ease-in-out infinite} @keyframes opS1{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}} @keyframes opS2{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}} .mkt-options .op-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute)} @media(max-width:620px){.mkt-options .op-mid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.mkt-options .op-s1{animation:none;opacity:0}.mkt-options .op-s2{animation:none;opacity:1}} /* ── MARKETS HUB ──────────────────────────────────────────────────────────── /markets/: market catalog (five linked cards, two per row), an instrument index, platforms and APIs by market, and a multi-market strip. */ .mkt-hub .mh-cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px} .mkt-hub .mh-c{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:16px;border:1px solid rgba(var(--mc),.35);background:linear-gradient(165deg,rgba(var(--mc),.12),rgba(255,255,255,.01) 55%),var(--surface);text-decoration:none;transition:border-color .2s,transform .2s} .mkt-hub .mh-c:hover{border-color:rgba(var(--mc),.75);transform:translateY(-3px)} .mkt-hub .mh-c-k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--mc))} .mkt-hub .mh-c h3{margin:0;font-size:20px;color:var(--text)} .mkt-hub .mh-c p{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-dim)} .mkt-hub .mh-c-tags{display:flex;flex-wrap:wrap;gap:6px} .mkt-hub .mh-c-tags span{padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:11.5px;color:var(--text-2)} .mkt-hub .mh-c-more{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:rgb(var(--mc))} .mkt-hub .mh-o{margin-top:30px;padding:12px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:var(--surface)} .mkt-hub .mh-o-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px} .mkt-hub .mh-o-grid .mh-o-row:nth-child(-n+2){border-top:0} .mkt-hub .mh-o-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13.5px;color:var(--text-2)} .mkt-hub .mh-o-l{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .mkt-hub .mh-o-l a{padding:3px 10px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07);font-size:12px;font-weight:600;color:var(--blue-bright);text-decoration:none;white-space:nowrap} .mkt-hub .mh-o-l a:hover{border-color:rgba(112,180,255,.65)} /* Platforms & APIs by market: one row per market, linked examples. */ .mkt-hub .mh-pa{display:grid;gap:10px;margin-top:30px} .mkt-hub .mh-pa-row{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;padding:14px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:var(--surface)} .mkt-hub .mh-pa-m{font-size:15px;font-weight:700;color:var(--text);text-decoration:none} .mkt-hub .mh-pa-m:hover{color:var(--blue-bright)} .mkt-hub .mh-pa-l{display:flex;flex-wrap:wrap;gap:8px} .mkt-hub .mh-pa-l a{padding:5px 12px;border-radius:999px;border:1px solid rgba(112,180,255,.3);background:rgba(112,180,255,.07);font-size:12.5px;font-weight:600;color:var(--blue-bright);text-decoration:none} .mkt-hub .mh-pa-l a:hover{border-color:rgba(112,180,255,.65)} .mkt-hub .mh-pa-all{margin:16px 0 0;text-align:center;font-size:13.5px} .mkt-hub .mh-pa-all a{font-weight:700;color:var(--blue-bright);text-decoration:none} .mkt-hub .mh-pa-all a:hover{text-decoration:underline} .mkt-hub .mh-multi{margin-top:28px} @media(max-width:1000px){.mkt-hub .mh-o-grid{grid-template-columns:1fr}} @media(max-width:620px){.mkt-hub .mh-cs{grid-template-columns:1fr}.mkt-hub .mh-o-row,.mkt-hub .mh-pa-row{grid-template-columns:1fr}.mkt-hub .mh-o-l{justify-content:flex-start}} /* Options: platform cards in a three-column grid, the last row aligned left. */ .mkt-options .mkt-ps-7{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1100px){.mkt-options .mkt-ps-7{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.mkt-options .mkt-ps-7{grid-template-columns:1fr}} /* ── TECHNOLOGIES HUB ─────────────────────────────────────────────────────── /technologies/: platform languages as cards, then the development stack and the APIs in the same detailed cards, with an example flow. */ /* Platform languages: a card per language, three across. */ .tech-hub .th-pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px} .tech-hub .th-pc{display:flex;flex-direction:column;gap:7px;padding:20px;border-radius:14px;border:1px solid rgba(112,180,255,.22);background:var(--surface);text-decoration:none;transition:border-color .2s,transform .2s} .tech-hub .th-pc:hover{border-color:rgba(112,180,255,.6);transform:translateY(-2px)} .tech-hub .th-pc-p{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-bright)} .tech-hub .th-pc b{font-size:18px;color:var(--text)} .tech-hub .th-pc-d{font-size:13.5px;line-height:1.65;color:var(--text-dim)} .tech-hub .th-pc em{margin-top:auto;padding-top:6px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue-bright)} /* Development stack: three tall columns. */ .tech-hub .th-ss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px} .tech-hub .th-s{display:flex;flex-direction:column;border-radius:18px;border:1px solid rgba(var(--sc),.35);background:linear-gradient(170deg,rgba(var(--sc),.1),rgba(255,255,255,.01) 40%),var(--surface);overflow:hidden} .tech-hub .th-s-top{padding:22px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07)} .tech-hub .th-s-top h3{margin:0 0 4px;font-size:22px} .tech-hub .th-s-top span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--sc))} .tech-hub .th-s-b{padding:16px 24px 0} .tech-hub .th-s-b h4{margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .tech-hub .th-s-b ul{display:grid;gap:7px;margin:0;padding:0;list-style:none} .tech-hub .th-s-b li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--text-2)} .tech-hub .th-s-b li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:rgb(var(--sc))} .tech-hub .th-s-b p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-dim)} .tech-hub .th-s-more{margin:auto 24px 0;padding:16px 0 20px;font-size:13px;font-weight:700;color:rgb(var(--sc));text-decoration:none} .tech-hub .th-s-more:hover{text-decoration:underline} .tech-hub .th-note{max-width:820px;margin:18px auto 0;text-align:center;font-size:14px;line-height:1.7;color:var(--text-dim)} .tech-hub .th-note a{color:var(--blue-bright);font-weight:600;text-decoration:none} .tech-hub .th-note a:hover{text-decoration:underline} /* APIs: the same detailed cards as the stack, two across, then an example flow. */ .tech-hub .th-ss-2{grid-template-columns:repeat(2,minmax(0,1fr))} .tech-hub .th-flow{margin-top:22px;padding:18px 20px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)} .tech-hub .th-flow-l{display:block;margin-bottom:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .tech-hub .th-f{display:flex;align-items:stretch;gap:8px} .tech-hub .th-f-s{flex:1;display:grid;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid rgba(112,180,255,.25);background:var(--surface)} .tech-hub .th-f-s b{font-size:13px;color:var(--text)} .tech-hub .th-f-s em{font-style:normal;font-size:11.5px;color:var(--text-dim)} .tech-hub .th-f i{align-self:center;font-style:normal;color:var(--blue-bright)} @media(max-width:1100px){.tech-hub .th-ss{grid-template-columns:1fr}.tech-hub .th-pcs{grid-template-columns:repeat(2,minmax(0,1fr))}.tech-hub .th-f{flex-wrap:wrap}.tech-hub .th-f-s{flex:1 1 calc(33% - 30px)}} @media(max-width:620px){.tech-hub .th-pcs{grid-template-columns:1fr}.tech-hub .th-f{flex-direction:column}.tech-hub .th-f i{transform:rotate(90deg)}} /* Technologies hub: quick links to the three groups under the hero buttons. */ .tech-hub .th-jump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 24px} .tech-hub .th-jump span{margin-right:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)} .tech-hub .th-jump a{padding:6px 13px;border-radius:999px;border:1px solid rgba(112,180,255,.35);background:rgba(112,180,255,.08);font-size:13px;font-weight:600;color:var(--blue-bright);text-decoration:none} .tech-hub .th-jump a:hover{border-color:rgba(112,180,255,.75)} /* ══════════════════════════════════════════════════════════════════════════ CONVERSION ROUTE PAGES — add-on stylesheet for service-pages.css v10.62 ══════════════════════════════════════════════════════════════════════════ What this is Extra styles for the cross-platform conversion route pages, /services/cross-platform-conversion/-to-/. The file only adds rules — nothing in service-pages.css v10.62 is changed or overridden outside these pages. How to install (either way gives the same result) 1. Paste this file at the end of service-pages.css v10.62. The result is identical to service-pages_v10.93.css. 2. Or enqueue it as a separate stylesheet that loads after service-pages.css on the conversion route pages. Scope Every selector starts with .conv-page — the pages use
— so no other page is affected. Colours and radii come from variables in new-design.css (--amber, --blue, --green, --text …) and service-pages.css (--r-lg); --cv-up and --cv-dn are defined below; --i is set inline in the markup (style="--i:0") to stagger the hero animation. Pages (27) TradingView → MT5, MT4, NinjaTrader, cTrader, Quantower, TradeStation MT4 → MT5, TradingView, cTrader, NinjaTrader, Quantower MT5 → TradingView, cTrader, NinjaTrader, Quantower, MT4 NinjaTrader → Quantower, MT5, cTrader NinjaTrader 7 → NinjaTrader 8 thinkorswim → NinjaTrader, MT5 TradeStation → NinjaTrader, MT5 cTrader → MT5, MT4, Quantower Shared components (all 27 pages) Hero animation with code pairs and two charts .cv-anim .cv-rows .cv-row .cv-tag .cv-panes .cv-pane .cv-cap Overview facts .cv-overview .cv-facts Platform differences .cv-diff .cv-diff-row .cv-diff-how .cv-limits Manual vs. automatic table and pitfalls .cv-compare .cv-manual .cv-auto .cv-pit .cv-pit-title Mid-page call to action .cv-midcta-wrap .cv-midcta How we check / what you receive .cv-verify .cv-criteria .cv-receive Process timeline .cv-timeline .cv-step Tables and notes .cv-table-wrap .cv-table .cv-note Components used on some pages .cv-carry .cv-mark .cv-yes .cv-part .cv-no — "what carries over" tables (12 pages: MT4/MT5 → TradingView, thinkorswim, TradeStation and cTrader as sources, MT5 → MT4, NinjaTrader → cTrader, TradingView → TradeStation) .cv-gain-wrap .cv-gain — feature strip or table under the overview (11 pages) .cv-grid-after — card grid placed under a table (thinkorswim pages, TradingView → TradeStation) .cv-alt2 .cv-flow .cv-node .cv-product .cv-choose .cv-link — trade-copier alternative (8 pages with a matching copier: TradingView → MT5, MT4, NinjaTrader, cTrader; MT4 → MT5; MT4/MT5 → NinjaTrader; NinjaTrader → MT5) .cv-calc — calculation-mode or account-type switcher in the hero (TradingView → NinjaTrader, MT4 → MT5, MT4/MT5 → TradingView) .cv-lv-t — small labels on hero charts (9 pages) Hero chart variants, one per route family .cv-ema EMA line (TradingView → MT5/MT4/NinjaTrader/ cTrader, MT4 → MT5, MT4/MT5 → TradingView) .cv-lv .cv-lv-tp/-sl/-en/-buy trade levels (MT4/MT5 → cTrader) .cv-osc-zero oscillator (TradingView → cTrader) .cv-prof-* volume profile (TradingView → Quantower) .cv-sess-* trading sessions (MT4/MT5 → NinjaTrader) .cv-fp-* footprint clusters (NinjaTrader → Quantower) .cv-cloud-* .cv-ma-* cloud between averages (thinkorswim → NinjaTrader) .cv-zone-* supply and demand zones (NinjaTrader 7 → 8) .cv-paint .cv-showme PaintBar and ShowMe (TradeStation → NinjaTrader) .cv-avg .cv-mk-* trade markers (NinjaTrader → MT5) .cv-zigzag .cv-zz-pt ZigZag (MT4/MT5 → Quantower) .cv-vol-* volume panel (TradingView → TradeStation) .cv-cl-* colour-changing line (MT5 → MT4) .cv-brick-* Renko bricks (cTrader → MT4/MT5) .cv-band-* band around an average (TradeStation → MT5) .cv-piv .cv-piv-p pivot levels (NinjaTrader → cTrader) .cv-or-* opening range (thinkorswim → MT5) (Heikin-Ashi on cTrader → Quantower uses the plain candle styles.) ══════════════════════════════════════════════════════════════════════════ */ /* ── Hero: balanced line breaks in the long route headings ── */ .conv-page .hero h1{text-wrap:balance} /* ── Hero animation: source-language → target-language pairs and the same EMA on two charts ── */ .conv-page .cv-anim{--cv-up:#22c55e;--cv-dn:#f43f5e;position:relative;padding:20px;border:1px solid rgba(96,165,250,.32);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(30,45,72,.92),rgba(12,19,33,.96));box-shadow:0 26px 56px rgba(0,0,0,.36)} .conv-page .cv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .conv-page .cv-tag{font-size:12px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px} .conv-page .cv-tag-pine{color:#93c5fd;background:rgba(59,130,246,.14)} .conv-page .cv-tag-mql{color:var(--green);background:rgba(80,237,187,.12)} .conv-page .cv-rows{display:grid;gap:7px} .conv-page .cv-row{display:grid;grid-template-columns:18px 1fr;grid-template-areas:"pine pine" "to mql";row-gap:3px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:rgba(255,255,255,.03);animation:cv-pair 8s ease-in-out infinite;animation-delay:calc(var(--i) * 2s)} .conv-page .cv-row code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .conv-page .cv-pine{grid-area:pine;color:#bfdbfe} .conv-page .cv-mql{grid-area:mql;color:#a7f3d0} .conv-page .cv-to{grid-area:to;align-self:center;width:10px;height:10px;border-left:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);border-bottom-left-radius:4px;margin:-4px 0 0 2px} @keyframes cv-pair{0%,24%{border-color:rgba(96,165,250,.55);background:rgba(59,130,246,.12)}30%,100%{border-color:transparent;background:rgba(255,255,255,.03)}} .conv-page .cv-panes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .conv-page .cv-pane{margin:0;padding:8px 8px 4px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(0,0,0,.18)} .conv-page .cv-pane figcaption{font-size:11.5px;font-weight:700;color:var(--text-dim);margin-bottom:4px} .conv-page .cv-pane svg{display:block;width:100%;height:auto} .conv-page .cv-ema{fill:none;stroke:#60a5fa;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cv-draw 8s ease-in-out infinite} @keyframes cv-draw{0%{stroke-dashoffset:1}35%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.35}} .conv-page .cv-cap{margin:12px 0 0;font-size:13px;color:var(--text-2);text-align:center} /* Route-specific hero charts: OHLC bars with one trade and its protective levels (MT4/MT5 → cTrader) */ .conv-page .cv-lv{stroke-width:1.3;stroke-dasharray:4 3} .conv-page .cv-lv-tp{stroke:var(--green)} .conv-page .cv-lv-sl{stroke:#fb7185} .conv-page .cv-lv-en{stroke:#60a5fa;stroke-dasharray:1.5 2.5} .conv-page .cv-lv-t{font-size:8px;font-weight:800;fill:var(--text-dim);text-anchor:end} .conv-page .cv-lv-buy{fill:#60a5fa} /* Route-specific hero charts: an oscillator with a zero line (TradingView → cTrader) */ .conv-page .cv-osc-zero{stroke:rgba(255,255,255,.18);stroke-width:1} /* Route-specific hero charts: candles with a volume profile and its point of control (TradingView → Quantower) */ .conv-page .cv-prof-bar{fill:rgba(96,165,250,.32)} .conv-page .cv-prof-poc{fill:var(--amber);opacity:.85} .conv-page .cv-prof-line{stroke:var(--amber);stroke-width:1;stroke-dasharray:3 3;opacity:.7} /* Route-specific hero charts: candles with the extended session shaded and the regular-session open marked (MT4/MT5 → NinjaTrader) */ .conv-page .cv-sess-eth{fill:rgba(255,255,255,.05)} .conv-page .cv-sess-line{stroke:var(--amber);stroke-width:1;stroke-dasharray:3 3;opacity:.75} /* Route-specific hero charts: footprint-style cluster bars, each bar's point of control outlined (NinjaTrader → Quantower) */ .conv-page .cv-fp-cell{stroke:rgba(10,16,32,.9);stroke-width:.6} .conv-page .cv-fp-poc{fill:none;stroke:var(--amber);stroke-width:1.1} /* Route-specific hero charts: a cloud between a fast and a slow average (thinkorswim → NinjaTrader) */ .conv-page .cv-cloud-up{fill:rgba(80,237,187,.26)} .conv-page .cv-cloud-dn{fill:rgba(244,63,94,.26)} .conv-page .cv-ma-fast{fill:none;stroke:#60a5fa;stroke-width:1.4} .conv-page .cv-ma-slow{fill:none;stroke:var(--amber);stroke-width:1.4} /* Route-specific hero charts: supply and demand zones drawn by custom rendering (NinjaTrader 7 → NinjaTrader 8) */ .conv-page .cv-zone-sup{fill:rgba(244,63,94,.16);stroke:rgba(244,63,94,.55);stroke-width:.8} .conv-page .cv-zone-dem{fill:rgba(80,237,187,.16);stroke:rgba(80,237,187,.55);stroke-width:.8} /* Route-specific hero charts: ShowMe dots and PaintBar-coloured bars (TradeStation → NinjaTrader) */ .conv-page .cv-paint{fill:var(--amber)} .conv-page .cv-showme{fill:#60a5fa} /* Route-specific hero charts: scale-in entries, the position's average price and an exit (NinjaTrader → MT4/MT5) */ .conv-page .cv-mk-buy{fill:var(--cv-up)} .conv-page .cv-mk-exit{fill:var(--amber)} .conv-page .cv-avg{stroke:#60a5fa;stroke-width:1;stroke-dasharray:3 3;opacity:.85} /* Route-specific hero charts: a ZigZag line through the swing highs and lows (MT4/MT5 → Quantower) */ .conv-page .cv-zigzag{fill:none;stroke:var(--amber);stroke-width:1.4;stroke-linejoin:round} .conv-page .cv-zz-pt{fill:var(--amber)} /* Route-specific hero charts: candles with a volume panel and its average (TradingView → TradeStation) */ .conv-page .cv-vol-up{fill:rgba(80,237,187,.45)} .conv-page .cv-vol-dn{fill:rgba(244,63,94,.45)} .conv-page .cv-vol-ma{fill:none;stroke:var(--amber);stroke-width:1.2} .conv-page .cv-vol-sep{stroke:rgba(255,255,255,.12);stroke-width:1} /* Route-specific hero charts: an average that changes colour with its direction (MT5 → MT4) */ .conv-page .cv-cl-up{stroke:var(--cv-up);stroke-width:2;stroke-linecap:round} .conv-page .cv-cl-dn{stroke:var(--cv-dn);stroke-width:2;stroke-linecap:round} /* Route-specific hero charts: Renko bricks (cTrader → MT4/MT5) */ .conv-page .cv-brick-up{fill:rgba(80,237,187,.55);stroke:var(--cv-up);stroke-width:.8} .conv-page .cv-brick-dn{fill:rgba(244,63,94,.5);stroke:var(--cv-dn);stroke-width:.8} /* Route-specific hero charts: candles inside a band with a middle average (TradeStation → MT5) */ .conv-page .cv-band-fill{fill:rgba(96,165,250,.12)} .conv-page .cv-band-line{fill:none;stroke:#60a5fa;stroke-width:1.1;opacity:.8} .conv-page .cv-band-mid{fill:none;stroke:var(--amber);stroke-width:1.1;stroke-dasharray:3 3} /* Route-specific hero charts: pivot levels P, R1 and S1 (NinjaTrader → cTrader) */ .conv-page .cv-piv{stroke:#60a5fa;stroke-width:1;stroke-dasharray:4 3;opacity:.85} .conv-page .cv-piv-p{stroke:var(--amber);stroke-width:1.2;stroke-dasharray:4 3} /* Route-specific hero charts: the opening range of the first bars and its breakout (thinkorswim → MT5) */ .conv-page .cv-or-box{fill:rgba(96,165,250,.14);stroke:rgba(96,165,250,.5);stroke-width:.8} .conv-page .cv-or-line{stroke:#60a5fa;stroke-width:1;stroke-dasharray:4 3;opacity:.85} /* Route-specific hero detail: a calculation-mode switch that lights up mode by mode (NinjaTrader) */ .conv-page .cv-calc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px} .conv-page .cv-calc span{margin-right:2px;font-size:11.5px;font-weight:700;color:var(--text-dim)} .conv-page .cv-calc b{padding:4px 9px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:11.5px;font-weight:700;color:var(--text-2);animation:cv-calc 9s ease-in-out infinite;animation-delay:calc(var(--i) * 3s)} @keyframes cv-calc{0%,30%{border-color:rgba(80,237,187,.6);background:rgba(80,237,187,.12);color:var(--green)}36%,100%{border-color:rgba(255,255,255,.12);background:transparent;color:var(--text-2)}} /* ── Overview: definition + facts ── */ .conv-page .cv-overview{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center} .conv-page .cv-overview .section-head{margin:0;text-align:left;max-width:none} .conv-page .cv-overview .section-head p{margin-left:0} .conv-page .cv-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0} .conv-page .cv-facts div{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .conv-page .cv-facts dt{font-size:12px;font-weight:700;color:var(--text-dim);margin-bottom:4px} .conv-page .cv-facts dd{margin:0;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--text)} /* Route-specific: what the target platform adds after conversion (a single strip, used where the platform adds real capabilities) */ .conv-page .cv-gain-wrap{margin-top:40px} .conv-page .cv-gain-wrap h3{margin:0 0 16px;font-size:18px;color:var(--text)} .conv-page .cv-gain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden} .conv-page .cv-gain li{position:relative;padding:24px 20px 22px;border-left:1px solid rgba(255,255,255,.07);transition:background-color .2s ease} .conv-page .cv-gain li:first-child{border-left:0} .conv-page .cv-gain li::before{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--green))} .conv-page .cv-gain svg{width:22px;height:22px;color:#93c5fd} .conv-page .cv-gain b{display:block;margin:12px 0 6px;font-size:15px;color:var(--text)} .conv-page .cv-gain span{font-size:13.5px;line-height:1.55;color:var(--text-2)} @media(hover:hover){.conv-page .cv-gain li:hover{background-color:rgba(96,165,250,.07)}} /* ── Tables: Pine Script vs MQL5, manual vs automatic ── */ .conv-page .cv-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)} .conv-page .cv-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.55} .conv-page .cv-table th,.conv-page .cv-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.07)} .conv-page .cv-table thead th{font-size:13px;font-weight:800;color:var(--text);background:rgba(255,255,255,.04)} .conv-page .cv-table tbody tr:last-child :is(th,td){border-bottom:0} .conv-page .cv-table tbody th{width:22%;font-weight:700;color:var(--text)} .conv-page .cv-table td{color:var(--text-2)} .conv-page .cv-compare td.cv-auto{color:var(--text-dim)} .conv-page .cv-compare td.cv-manual{color:var(--text);font-weight:600} .conv-page .cv-compare thead th:last-child{color:var(--green)} .conv-page .cv-note{margin-top:22px} .conv-page .cv-grid-after{margin-top:22px} /* Route-specific: what carries over from an EA to a Pine Script strategy (Yes / Partly / No marks) */ .conv-page .cv-carry tbody td{color:var(--text-2)} .conv-page .cv-mark{display:inline-block;min-width:54px;margin-right:10px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;text-align:center;white-space:nowrap} .conv-page .cv-yes{background:rgba(80,237,187,.13);color:var(--green)} .conv-page .cv-part{background:rgba(251,191,36,.14);color:var(--amber)} .conv-page .cv-no{background:rgba(244,63,94,.13);color:#fb7185} /* Route-specific: typical errors of an unchecked conversion (warning tone, not a sequence) */ .conv-page .cv-pit-title{margin:34px 0 14px;font-size:18px;color:var(--text)} .conv-page .cv-pit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none} .conv-page .cv-pit li{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--border);border-top:2px solid rgba(251,191,36,.7);border-radius:var(--r-md);background:var(--surface);transition:border-color .2s ease,background-color .2s ease} .conv-page .cv-pit b{font-size:15px;line-height:1.35;color:var(--text)} .conv-page .cv-pit span{font-size:14px;line-height:1.55;color:var(--text-2)} @media(hover:hover){.conv-page .cv-pit li:hover{border-color:rgba(251,191,36,.45);border-top-color:var(--amber);background-color:rgba(251,191,36,.04)}} /* ── Checking the result + what you receive ── */ .conv-page .cv-verify{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center} .conv-page .cv-verify .section-head{margin:0;text-align:left;max-width:none} .conv-page .cv-verify .section-head p{margin-left:0} .conv-page .cv-verify .section-head p+p,.conv-page .cv-verify .section-head ul+p{margin-top:14px} .conv-page .cv-criteria{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none} .conv-page .cv-criteria li{position:relative;padding-left:20px;font-size:15px;line-height:1.6;color:var(--text-2)} .conv-page .cv-criteria li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--green)} .conv-page .cv-criteria b{color:var(--text)} .conv-page .cv-receive{padding:24px;border:1px solid rgba(80,237,187,.3);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(80,237,187,.06),transparent 60%),var(--surface)} .conv-page .cv-receive h3{margin:0 0 14px;font-size:18px;color:var(--text)} .conv-page .cv-receive ul{display:grid;gap:12px;margin:0;padding:0;list-style:none} .conv-page .cv-receive li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--text-2)} .conv-page .cv-receive li svg{flex:0 0 20px;width:20px;height:20px;color:var(--green);margin-top:1px} .conv-page .cv-receive b{color:var(--text)} /* ── Alternative: alert flow + product card + which-to-choose ── */ .conv-page .cv-alt2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch} .conv-page .cv-flow{display:flex;flex-direction:column;justify-content:center;gap:0;padding:26px;border:1px solid var(--border);border-radius:var(--r-lg);background:radial-gradient(ellipse 80% 60% at 0% 0%,rgba(59,130,246,.10),transparent 70%),var(--surface)} .conv-page .cv-node{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.18)} .conv-page .cv-node b{grid-column:2;font-size:15.5px;color:var(--text)} .conv-page .cv-node span:not(.cv-node-ic){grid-column:2;font-size:13.5px;line-height:1.45;color:var(--text-2)} .conv-page .cv-node-ic{grid-row:1/span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(59,130,246,.14);color:#93c5fd} .conv-page .cv-node-ic svg{width:22px;height:22px} .conv-page .cv-node-mid .cv-node-ic{background:rgba(251,191,36,.14);color:var(--amber)} .conv-page .cv-node-end{border-color:rgba(80,237,187,.35)} .conv-page .cv-node-end .cv-node-ic{background:rgba(80,237,187,.14);color:var(--green)} .conv-page .cv-link{width:2px;height:22px;margin-left:37px;background:repeating-linear-gradient(to bottom,rgba(147,197,253,.7) 0 5px,transparent 5px 9px)} .conv-page .cv-product{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid rgba(96,165,250,.4);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(59,130,246,.14),rgba(12,19,33,.6) 65%),var(--surface);box-shadow:0 22px 48px rgba(0,0,0,.28)} .conv-page .cv-product-kicker{align-self:flex-start;font-size:12px;font-weight:700;color:#93c5fd;padding:4px 10px;border-radius:999px;background:rgba(59,130,246,.14)} .conv-page .cv-product h3{margin:0;font-size:22px;line-height:1.25;color:var(--text)} .conv-page .cv-product p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)} .conv-page .cv-product ul{display:grid;gap:10px;margin:4px 0 6px;padding:0;list-style:none} .conv-page .cv-product li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--text)} .conv-page .cv-product li svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--green)} .conv-page .cv-product .btn{margin-top:auto;align-self:flex-start;max-width:100%;white-space:normal;text-align:center} .conv-page .cv-product-notes li svg{color:var(--amber)} .conv-page .cv-choose{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px} .conv-page .cv-choose>div{padding:22px 24px;border:1px dashed rgba(255,255,255,.14);border-radius:var(--r-lg)} .conv-page .cv-choose h3{margin:0 0 10px;font-size:16px;color:var(--text)} .conv-page .cv-choose ul{margin:0;padding-left:18px;display:grid;gap:6px;list-style:disc} .conv-page .cv-choose li::marker{color:var(--blue-bright)} .conv-page .cv-choose li{font-size:14.5px;line-height:1.55;color:var(--text-2)} /* ── Mid-page call to action ── */ .conv-page .cv-midcta-wrap{padding-top:48px;padding-bottom:48px} .conv-page .cv-midcta{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 32px;border:1px solid rgba(96,165,250,.35);border-radius:var(--r-lg);background:radial-gradient(ellipse 60% 140% at 100% 50%,rgba(59,130,246,.16),transparent 65%),var(--surface)} .conv-page .cv-midcta h2{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.3} .conv-page .cv-midcta p{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--text-2)} .conv-page .cv-midcta .btn{flex-shrink:0} /* ── Platform differences (Pine Script → MQL5), no code ── */ .conv-page .cv-diff{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden} .conv-page .cv-diff-head,.conv-page .cv-diff-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:20px;padding:15px 22px} .conv-page .cv-diff-head{background:rgba(255,255,255,.04);font-size:13px;font-weight:800;color:var(--text)} .conv-page .cv-diff-head span:last-child{color:var(--green)} .conv-page .cv-diff-row{border-top:1px solid rgba(255,255,255,.07)} .conv-page .cv-diff-row h3{margin:0;font-size:15px;line-height:1.45;color:var(--text)} .conv-page .cv-diff-row p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)} .conv-page .cv-diff-row .cv-diff-how{color:var(--text)} .conv-page .cv-limits{margin-top:18px;padding:18px 22px;border-left:2px solid var(--amber);border-radius:0 12px 12px 0;background:rgba(251,191,36,.06)} .conv-page .cv-limits h3{margin:0 0 6px;font-size:15.5px;color:var(--text)} .conv-page .cv-limits p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-2)} @media(max-width:980px){.conv-page .cv-pit{grid-template-columns:1fr 1fr}.conv-page .cv-gain{grid-template-columns:1fr 1fr}.conv-page .cv-gain li{border-left:0;border-top:1px solid rgba(255,255,255,.07)}.conv-page .cv-gain li:nth-child(-n+2){border-top:0}.conv-page .cv-gain li:nth-child(even){border-left:1px solid rgba(255,255,255,.07)}.conv-page .cv-overview,.conv-page .cv-verify{grid-template-columns:1fr;gap:28px}.conv-page .cv-alt2,.conv-page .cv-choose{grid-template-columns:1fr}.conv-page .cv-midcta{flex-direction:column;align-items:flex-start}.conv-page .cv-diff-head{display:none}.conv-page .cv-diff-row{grid-template-columns:1fr;gap:6px;padding:18px 20px}.conv-page .cv-diff-row p::before{content:attr(data-label) ": ";font-weight:700;color:var(--text-dim)}.conv-page .cv-diff-row .cv-diff-how::before{color:var(--green)}} @media(max-width:560px){.conv-page .cv-pit{grid-template-columns:1fr}.conv-page .cv-gain{grid-template-columns:1fr}.conv-page .cv-gain li:nth-child(2){border-top:1px solid rgba(255,255,255,.07)}.conv-page .cv-gain li:nth-child(even){border-left:0}.conv-page .cv-facts{grid-template-columns:1fr}.conv-page .cv-panes{grid-template-columns:1fr}.conv-page .cv-row code{white-space:normal;overflow-wrap:anywhere}} /* ── Tables: our column is highlighted; rows light up on mouse hover ── */ .conv-page .cv-diff-how,.conv-page .cv-compare td.cv-manual{background-image:linear-gradient(90deg,rgba(80,237,187,.13),rgba(80,237,187,.02));background-repeat:no-repeat} .conv-page .cv-diff-how{margin:-6px -10px;padding:6px 10px;border-radius:8px} .conv-page .cv-diff-row,.conv-page .cv-compare tbody tr>*,.conv-page .cv-carry tbody tr>*{transition:background-color .2s ease} .conv-page .cv-diff-how,.conv-page .cv-compare td.cv-manual{transition:background-color .2s ease,box-shadow .2s ease} @media(hover:hover){ .conv-page .cv-diff-row:hover,.conv-page .cv-compare tbody tr:hover>*,.conv-page .cv-carry tbody tr:hover>*{background-color:rgba(96,165,250,.07)} .conv-page .cv-diff-row:hover .cv-diff-how,.conv-page .cv-compare tbody tr:hover td.cv-manual{background-color:rgba(80,237,187,.10);box-shadow:inset 0 0 0 1px rgba(80,237,187,.35)} } /* ── Process: a five-step line, blue to green ── */ .conv-page .cv-timeline{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:8px 0 0;padding:0;list-style:none} .conv-page .cv-timeline::before{content:"";position:absolute;left:10%;right:10%;top:23px;height:2px;background:linear-gradient(90deg,var(--blue),var(--green));opacity:.7} .conv-page .cv-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center} .conv-page .cv-step-dot{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid rgba(96,165,250,.7);background:var(--bg-soft,#0f1729);font-size:17px;font-weight:800;color:#bfdbfe;box-shadow:0 0 0 6px rgba(10,16,32,.9)} .conv-page .cv-step-last .cv-step-dot{border-color:var(--green);color:var(--green);background:rgba(80,237,187,.12)} .conv-page .cv-step-last .cv-step-dot svg{width:22px;height:22px} .conv-page .cv-step-body{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px;padding:20px 16px;flex:1;width:100%;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)} .conv-page .cv-step-body h3{margin:0;font-size:16px;line-height:1.3;color:var(--text)} .conv-page .cv-step-body p{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)} .conv-page .cv-step-out{margin-top:auto;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;border-radius:10px;background:rgba(96,165,250,.08);font-size:13.5px;font-weight:700;color:var(--text)} .conv-page .cv-step-out em{font-style:normal;font-size:12px;font-weight:600;color:var(--text-dim)} .conv-page .cv-step-last .cv-step-body{border-color:rgba(80,237,187,.35)} .conv-page .cv-step-last .cv-step-out{background:rgba(80,237,187,.12);color:var(--green)} .conv-page .cv-step-body{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease} .conv-page .cv-step-dot{transition:border-color .2s ease,box-shadow .2s ease,color .2s ease} @media(hover:hover){ .conv-page .cv-step:hover .cv-step-body{border-color:rgba(96,165,250,.6);transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)} .conv-page .cv-step:hover .cv-step-dot{border-color:var(--blue-bright);color:#fff;box-shadow:0 0 0 6px rgba(10,16,32,.9),0 0 18px rgba(96,165,250,.55)} .conv-page .cv-step-last:hover .cv-step-body{border-color:rgba(80,237,187,.65)} .conv-page .cv-step-last:hover .cv-step-dot{border-color:var(--green);color:var(--green);box-shadow:0 0 0 6px rgba(10,16,32,.9),0 0 18px rgba(80,237,187,.5)} } @media(max-width:980px){ .conv-page .cv-timeline{grid-template-columns:1fr;gap:14px} .conv-page .cv-timeline::before{display:none} .conv-page .cv-step:not(.cv-step-last)::before{content:"";position:absolute;left:23px;top:48px;bottom:-14px;width:2px;background:linear-gradient(180deg,rgba(59,130,246,.75),rgba(80,237,187,.55))} .conv-page .cv-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px} .conv-page .cv-step-dot{flex:0 0 48px} .conv-page .cv-step-body{margin-top:0;align-items:flex-start} .conv-page .cv-step-out{align-items:flex-start} } @media(prefers-reduced-motion:reduce){.conv-page .cv-row,.conv-page .cv-ema,.conv-page .cv-calc b{animation:none}.conv-page .cv-ema{stroke-dashoffset:0}.conv-page .cv-diff-row,.conv-page .cv-compare tbody tr>*,.conv-page .cv-diff-how,.conv-page .cv-compare td.cv-manual,.conv-page .cv-step-body,.conv-page .cv-step-dot,.conv-page .cv-gain li,.conv-page .cv-pit li{transition:none}.conv-page .cv-step:hover .cv-step-body{transform:none}}