/* GENERATED by tools/build.mjs from platform.css with rtlcss — do not edit. */ /* atropi-scope: .atropi-page-platform */ /* ===================================================================================================== PLATFORM (MetaTrader 5) — page styles (page-templates/platform.php). Scoped under this page's section ids (#hero #facts #why #desktop #mobile) or .atropi-page-platform. 1 · The MT5 device stage — ported 1:1 from home.css "50-platforms" (stage geometry, terminal, phone, route, caption), rescoped #platforms → #hero; the homepage's network backdrop and download dock are not used. JS (platform.js) fits the 1040×640 terminal + 240×496 phone (--dfit/--pfit) and drives --p (scroll tilt). 2 · Page layer: hero composition (copy above the stage), "Why MT5" micro-visuals, Desktop (DOM ladder), Mobile (MT5 phone + QR). ===================================================================================================== */ /* ================================================================================================ 1 · STAGE */ /* ---------------------------------------------------------------- stage geometry (JS refines these) */#hero .pf-stage-wrap { position: relative; }#hero .pf-stage { --dfit: 1; --pfit: 1; --dx: 0px; --dy: 0px; --px: 948px; --py: 236px; --sh: 744px; --tx: 0deg; --ty: 0deg; --par: 0px; position: relative; height: var(--sh); } @media (max-width: 1279px) {#hero .pf-stage { --dfit: .86; --pfit: .86; --px: 815px; --py: 203px; --sh: 640px; } } @media (max-width: 1199px) {#hero .pf-stage { --dfit: .74; --pfit: .74; --px: 701px; --py: 175px; --sh: 551px; } } @media (max-width: 899px) {#hero .pf-stage { --dfit: .56; --pfit: .56; --px: 531px; --py: 132px; --sh: 417px; } } @media (max-width: 639px) {#hero .pf-stage { --dfit: .5; --pfit: .85; --dx: 72px; --dy: 68px; --px: 0px; --py: 0px; --sh: 436px; } }#hero .pf-floor { position: absolute; z-index: 1; pointer-events: none; left: calc(var(--dx) + 1040px * var(--dfit) * .06); width: calc(1040px * var(--dfit) * .88); top: calc(var(--dy) + 640px * var(--dfit) - 30px); height: 80px; background: radial-gradient(closest-side, rgba(17, 52, 120, .22), transparent); filter: blur(6px); opacity: calc(var(--p, 1) * 1); transform: scaleX(calc(.7 + var(--p, 1) * .3)); }[data-theme="dark"] #hero .pf-floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); } /* order routing: a comet travels from the BUY button to the phone when the fill lands */#hero .pf-route { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }#hero .pf-route path { fill: none; stroke-linecap: round; opacity: 0; }#hero .pf-route-trail { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 1.5 5; }#hero .pf-route-comet { stroke: var(--brand); stroke-width: 2; filter: drop-shadow(0 0 5px var(--brand-glow)); } /* ---------------------------------------------------------------- desktop placement + scroll tilt */#hero .pf-desk { position: absolute; z-index: 2; left: var(--dx); top: var(--dy); width: calc(1040px * var(--dfit)); height: calc(640px * var(--dfit)); transition: opacity .6s var(--pf-ease), transform .6s var(--pf-ease); }#hero .pf-desk-tilt { /* eased entry: the screen "stands up" fast, then settles (outCubic-like via a squared term) */ --pe: calc(1 - (1 - var(--p, 1)) * (1 - var(--p, 1))); position: absolute; inset: 0; transform-origin: 50% 100%; transform: perspective(calc(1500px * var(--dfit))) translate3d(0, calc((1 - var(--pe)) * 56px * var(--dfit)), 0) rotateX(calc((1 - var(--pe)) * 24deg + var(--ty))) rotateY(var(--tx)) scale(calc(.9 + var(--pe) * .1)); } /* specular sheen that sweeps across the glass while the screen stands up; gone at rest */#hero .pf-term::after { content: ""; position: absolute; inset: -10% -30%; z-index: 6; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 53%, transparent 62%); transform: translate3d(calc(-60% + var(--p, 1) * 90%), 0, 0); opacity: clamp(0, min(calc((var(--p, 1) - .25) * 3), calc((1 - var(--p, 1)) * 5)), .9); }[data-theme="dark"] #hero .pf-term::after { background: linear-gradient(105deg, transparent 38%, rgba(209, 192, 219, .14) 48%, rgba(209, 192, 219, .05) 53%, transparent 62%); }#hero .pf-stage.is-moving .pf-desk-tilt, #hero .pf-stage.is-moving .pf-phone-tilt { will-change: transform; } /* ---------------------------------------------------------------- terminal (design px) */#hero .pf-term { --t-bar: color-mix(in srgb, var(--surface-3) 62%, var(--surface)); --t-bar-2: var(--surface-2); --t-panel: var(--surface); --t-chart: var(--surface); --t-line: var(--line); --t-line-2: var(--line-strong); --t-dim: var(--muted); --t-sel: var(--brand-50); position: absolute; left: 0; top: 0; width: 1040px; height: 640px; transform: scale(var(--dfit)); transform-origin: 0 0; display: grid; grid-template-rows: 36px 24px 38px minmax(0, 1fr) 156px 24px; background: var(--t-panel); color: var(--text); border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 1px 0 rgba(255, 255, 255, .6) inset, var(--shadow-xl); font-family: var(--font-sans); font-size: 11.5px; line-height: 1; font-weight: 500; -webkit-user-select: none; user-select: none; }[data-theme="dark"] #hero .pf-term { --t-bar: var(--surface-2); --t-bar-2: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); --t-panel: var(--surface); --t-chart: var(--bg-2); --t-sel: rgba(153, 117, 176, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 1px 0 rgba(255, 255, 255, .06) inset, var(--shadow-xl), 0 30px 120px -40px rgba(153, 117, 176, .35); }#hero .pf-term .mono, #hero .t-px, #hero .t-tr, #hero .t-sum b, #hero .t-clock, #hero .t-ohlc-v, #hero .t-bf, #hero .t-oc-lot span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" on; }#hero .t-i { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* title bar */#hero .t-title { position: relative; display: flex; align-items: center; justify-content: center; background: var(--t-bar); border-bottom: 1px solid var(--t-line); color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: -.005em; }#hero .t-lights { position: absolute; left: 14px; top: 50%; display: flex; gap: 8px; transform: translateY(-50%); }#hero .t-lights i { width: 12px; height: 12px; border-radius: 50%; background: var(--bear-vivid); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }#hero .t-lights i:nth-child(2) { background: var(--gold-2); }#hero .t-lights i:nth-child(3) { background: var(--bull-vivid); }#hero .t-name { display: inline-flex; align-items: center; gap: 8px; }#hero .t-appico { width: 14px; height: 14px; border-radius: 4px; }#hero .t-acct { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 5px; background: var(--t-panel); box-shadow: inset 0 0 0 1px var(--t-line); font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--t-dim); }#hero .t-live { width: 6px; height: 6px; border-radius: 50%; background: var(--bull-vivid); box-shadow: 0 0 0 2px var(--bull-bg); } /* menu bar + toolbar */#hero .t-menu { display: flex; align-items: center; gap: 18px; padding: 0 14px; background: var(--t-bar-2); border-bottom: 1px solid var(--t-line); color: var(--text); font-size: 11.5px; }#hero .t-tools { display: flex; align-items: center; gap: 4px; padding: 0 10px; background: var(--t-bar-2); border-bottom: 1px solid var(--t-line); color: var(--text); }#hero .t-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 6px; font-weight: 600; color: var(--ink); }#hero .t-algo .t-play { fill: var(--bull-vivid); stroke: var(--bull-vivid); }#hero .t-algo { color: var(--ink); background: var(--bull-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bull-vivid) 30%, transparent); }#hero .t-sep { width: 1px; height: 18px; margin: 0 6px; background: var(--t-line-2); }#hero .t-ib { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: var(--t-dim); }#hero .t-ib.is-on { color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); }#hero .t-tf { display: inline-flex; gap: 1px; padding: 2px; border-radius: 7px; background: var(--t-panel); box-shadow: inset 0 0 0 1px var(--t-line); }#hero .t-tf b { display: inline-grid; place-items: center; min-width: 30px; height: 22px; border-radius: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--t-dim); }#hero .t-tf b.is-on { background: var(--brand); color: #fff; font-weight: 600; }#hero .t-search { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; width: 150px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--t-panel); box-shadow: inset 0 0 0 1px var(--t-line); color: var(--t-dim); }#hero .t-search .t-i { width: 13px; height: 13px; } /* body: market watch | chart */#hero .t-body { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 0; }#hero .t-mw { display: grid; grid-template-rows: 26px 22px minmax(0, 1fr) 24px; border-right: 1px solid var(--t-line); background: var(--t-panel); min-height: 0; }#hero .t-ph { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 10px; background: var(--t-bar-2); border-bottom: 1px solid var(--t-line); color: var(--ink); font-weight: 600; }#hero .t-clock { font-weight: 500; color: var(--t-dim); }#hero .t-x { width: 12px; height: 12px; color: var(--t-dim); }#hero .t-mw-head, #hero .t-mw-row { display: grid; grid-template-columns: 14px 72px 1fr 1fr; align-items: center; column-gap: 4px; padding: 0 10px 0 8px; }#hero .t-mw-head { color: var(--t-dim); font-size: 10.5px; border-bottom: 1px solid var(--t-line); }#hero .t-mw-head span:first-child { grid-column: 1 / 3; padding-left: 18px; }#hero .t-mw-head span:not(:first-child), #hero .t-px { text-align: right; }#hero .t-mw-rows { overflow: hidden; }#hero .t-mw-row { height: 26px; border-bottom: 1px solid color-mix(in srgb, var(--t-line) 60%, transparent); opacity: clamp(0, calc((var(--p, 1) - .32 - var(--i) * .035) * 7), 1); }#hero .t-mw-row.is-sel { background: var(--t-sel); box-shadow: inset 2px 0 0 var(--brand); }#hero .t-sym { color: var(--ink); font-weight: 600; letter-spacing: .01em; }#hero .t-px { color: var(--text); font-size: 11px; padding: 3px 3px; margin-right: -3px; border-radius: 4px; }#hero .t-dir { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; justify-self: center; }#hero .t-dir.is-up { border-bottom: 5px solid var(--bull-vivid); }#hero .t-dir.is-down { border-top: 5px solid var(--bear-vivid); }#hero .t-mw-add { height: 26px; display: flex; align-items: center; padding-left: 26px; color: var(--t-dim); font-size: 10.5px; opacity: .8; }#hero .t-tabs { display: flex; align-items: stretch; border-top: 1px solid var(--t-line); background: var(--t-bar-2); font-size: 10.5px; color: var(--t-dim); }#hero .t-tabs span { display: inline-flex; align-items: center; padding: 0 10px; border-right: 1px solid var(--t-line); }#hero .t-tabs span.is-on { background: var(--t-panel); color: var(--ink); font-weight: 600; box-shadow: inset 0 2px 0 var(--brand); }#hero .t-chart { position: relative; background: var(--t-chart); min-width: 0; overflow: hidden; } /* without JS the canvas stays empty: show chart paper instead */html:not(.js) #hero .t-chart { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 40px; }#hero .t-cv { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 22px); }#hero .t-ohlc { position: absolute; left: 12px; top: 10px; display: flex; align-items: baseline; gap: 0; color: var(--ink); font-size: 11.5px; white-space: nowrap; }#hero .t-ohlc b { font-weight: 700; }#hero .t-ohlc span:nth-child(2) { color: var(--t-dim); margin-right: 10px; }#hero .t-ohlc-v { color: var(--t-dim); font-size: 10.5px; letter-spacing: .01em; word-spacing: 4px; } /* one-click trading panel */#hero .t-oc { position: absolute; left: 12px; top: 30px; display: flex; align-items: stretch; height: 46px; border-radius: 9px; background: var(--t-panel); box-shadow: 0 0 0 1px var(--t-line-2), 0 6px 16px -8px rgba(17, 52, 120, .25); overflow: hidden; }[data-theme="dark"] #hero .t-oc { box-shadow: 0 0 0 1px var(--t-line-2), 0 8px 20px -8px rgba(0, 0, 0, .6); }#hero .t-oc-btn { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; width: 104px; padding: 0 12px; cursor: pointer; overflow: hidden; transition: filter .2s ease; }#hero .t-oc-btn.is-sell { background: var(--bear-bg); color: var(--bear); }#hero .t-oc-btn.is-buy { background: var(--brand); color: #fff; align-items: flex-end; text-align: right; }#hero .t-oc-btn:hover { filter: brightness(1.06); }#hero .t-oc-k { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; opacity: .9; }#hero .t-bf { display: inline-flex; align-items: flex-start; line-height: 1; font-weight: 500; }#hero .t-bf small { font-size: 12px; padding-top: 5px; }#hero .t-bf b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }#hero .t-bf sup { font-size: 10px; padding-top: 1px; margin-left: 1px; }#hero .t-oc-lot { display: flex; align-items: center; gap: 4px; padding: 0 10px; color: var(--ink); font-size: 12px; font-weight: 600; border-inline: 1px solid var(--t-line); background: var(--t-panel); }#hero .t-oc-lot .t-i { width: 11px; height: 11px; color: var(--t-dim); }#hero .t-ripple { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: currentColor; opacity: .35; pointer-events: none; }#hero .t-ctabs { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; border-top: 1px solid var(--t-line); background: var(--t-bar-2); font-size: 10.5px; color: var(--t-dim); }#hero .t-ctabs span { display: inline-flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--t-line); }#hero .t-ctabs span.is-on { background: var(--t-chart); color: var(--ink); font-weight: 600; }#hero .t-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; pointer-events: none; z-index: 5; filter: drop-shadow(0 2px 3px rgba(10, 22, 40, .35)); } :root[data-theme="dark"] #hero .t-cursor { filter: drop-shadow(0 2px 3px rgba(44, 12, 59, .35)); } /* brand Night */#hero .t-cursor svg { width: 100%; height: 100%; fill: #0A1628; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; } :root[data-theme="dark"] #hero .t-cursor svg { fill: #2C0C3B; } /* brand Night */ /* toolbox */#hero .t-box { display: grid; grid-template-columns: 22px minmax(0, 1fr); border-top: 1px solid var(--t-line-2); background: var(--t-panel); min-height: 0; }#hero .t-box-strip { display: grid; place-items: center; background: var(--t-bar-2); border-right: 1px solid var(--t-line); }#hero .t-box-strip span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .08em; color: var(--t-dim); font-weight: 600; }#hero .t-box-main { display: grid; grid-template-rows: 22px minmax(0, 1fr) 25px 24px; min-width: 0; }#hero .t-tr { display: grid; grid-template-columns: 82px 82px 140px 48px 56px 76px 76px 76px 76px 72px; align-items: center; column-gap: 8px; padding: 0 128px 0 12px; height: 25px; font-size: 10.5px; color: var(--text); white-space: nowrap; }#hero .t-tr span:nth-child(n+5) { text-align: right; }#hero .t-tr-head { height: 22px; font-family: var(--font-sans); color: var(--t-dim); border-bottom: 1px solid var(--t-line); background: var(--t-bar-2); }#hero .t-tr-rows { overflow: hidden; }#hero .t-tr-rows .t-tr { border-bottom: 1px solid color-mix(in srgb, var(--t-line) 60%, transparent); opacity: clamp(0, calc((var(--p, 1) - .6) * 6), 1); }#hero .t-tr .t-sym { font-family: var(--font-sans); }#hero .t-buy { color: var(--brand-ink); font-weight: 600; }#hero .t-sell { color: var(--bear); font-weight: 600; }#hero .t-pl { font-weight: 600; }#hero .t-pl.up { color: var(--bull); }#hero .t-pl.down { color: var(--bear); }#hero .t-tr.is-new { animation: pf-row-in 1.6s var(--pf-ease) both; }#hero .t-tr.is-out { animation: pf-row-out .5s var(--pf-ease) both; }@keyframes pf-row-in { 0% { background: var(--brand-100); clip-path: inset(0 100% 0 0); } 30% { clip-path: inset(0 0 0 0); } 100% { background: transparent; clip-path: inset(0 0 0 0); } }@keyframes pf-row-out { to { opacity: 0; transform: translateX(-12px); } }#hero .t-sum { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 10.5px; color: var(--t-dim); white-space: nowrap; border-top: 1px solid var(--t-line); }#hero .t-sum .t-i { width: 13px; height: 13px; color: var(--gold); }#hero .t-sum b { color: var(--ink); font-weight: 600; }#hero .t-sum span { margin-left: 14px; }#hero .t-box-tabs { border-top: 1px solid var(--t-line); }#hero .t-status { display: flex; align-items: center; gap: 0; border-top: 1px solid var(--t-line); background: var(--t-bar); color: var(--t-dim); font-size: 10.5px; }#hero .t-status > span { padding: 0 14px; border-right: 1px solid var(--t-line); height: 100%; display: inline-flex; align-items: center; }#hero .t-status > span:first-child { flex: 1; }#hero .t-status > .t-conn { gap: 8px; font-family: var(--font-mono); padding-right: 140px; }#hero .t-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }#hero .t-bars b { width: 3px; border-radius: 1px; background: var(--bull-vivid); }#hero .t-bars b:nth-child(1) { height: 4px; }#hero .t-bars b:nth-child(2) { height: 6px; }#hero .t-bars b:nth-child(3) { height: 8px; }#hero .t-bars b:nth-child(4) { height: 10px; } /* ---------------------------------------------------------------- phone placement + parallax */#hero .pf-phone-pos { position: absolute; z-index: 4; left: var(--px); top: var(--py); width: calc(240px * var(--pfit)); height: calc(496px * var(--pfit)); transition: opacity .6s var(--pf-ease), transform .6s var(--pf-ease); }#hero .pf-phone-tilt { --pp: clamp(0, calc((var(--p, 1) - .28) * 1.39), 1); position: absolute; inset: 0; transform-origin: 50% 100%; transform: perspective(calc(1600px * var(--pfit))) translate3d(0, calc((1 - var(--pp)) * 150px * var(--pfit) + var(--par)), 0) rotateZ(calc((1 - var(--pp)) * 4deg)) rotateX(calc(var(--ty) * .6)) rotateY(calc(var(--tx) * -.8)); }#hero .pf-phone-tilt::before { /* soft contact shadow that tightens on landing */ content: ""; position: absolute; left: 6%; right: 6%; bottom: -5%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(17, 52, 120, .38), transparent); filter: blur(10px); opacity: calc(.35 + var(--pp) * .65); transform: translateY(calc((1 - var(--pp)) * 40px)) scale(calc(1.25 - var(--pp) * .25)); }[data-theme="dark"] #hero .pf-phone-tilt::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .8), transparent); }#hero .pf-phone { position: absolute; left: 0; top: 0; width: 240px; height: 496px; transform: scale(var(--pfit)); transform-origin: 0 0; padding: 7px; border-radius: 42px; background: linear-gradient(150deg, #FDFEFF 0%, #D5DBE4 22%, #F4F6F9 48%, #C3CAD5 78%, #EEF1F5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 2px rgba(10, 22, 40, .10), 0 40px 70px -24px rgba(17, 52, 120, .42), 0 14px 28px -14px rgba(10, 22, 40, .28); font-family: var(--font-sans); line-height: 1; -webkit-user-select: none; user-select: none; }[data-theme="dark"] #hero .pf-phone { background: linear-gradient(150deg, #715B7B 0%, #3E1F4C 24%, #533960 50%, #300F3F 78%, #61496D 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(0, 0, 0, .5), 0 50px 90px -28px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(153, 117, 176, .35); }#hero .pf-phone::after { /* side button */ content: ""; position: absolute; right: -2px; top: 112px; width: 3px; height: 54px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(10, 22, 40, .18), rgba(10, 22, 40, .05)); } :root[data-theme="dark"] #hero .pf-phone::after { background: linear-gradient(-90deg, rgba(44, 12, 59, .18), rgba(44, 12, 59, .05)); } /* brand Night */#hero .ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 35px; background: var(--surface); color: var(--ink); display: grid; grid-template-rows: 34px 38px minmax(0, 1fr) 50px 12px; box-shadow: inset 0 0 0 1px rgba(10, 22, 40, .12); }[data-theme="dark"] #hero .ph-screen { background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8); }#hero .ph-island { position: absolute; left: 50%; top: 8px; width: 66px; height: 19px; margin-left: -33px; border-radius: 12px; background: #05080F; z-index: 3; }#hero .ph-status { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 0 24px; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; }#hero .ph-sicons { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }#hero .ph-sicons svg { height: 9px; width: auto; fill: currentColor; }#hero .ph-head { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; padding: 0 10px; border-bottom: 1px solid var(--line); }#hero .ph-head b { text-align: center; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }#hero .ph-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }#hero .ph-head .ph-i { color: var(--brand); justify-self: center; }#hero .ph-rows { overflow: hidden; }#hero .ph-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; column-gap: 4px; height: 50px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); opacity: clamp(0, calc((var(--pp, 1) - .25 - var(--i) * .06) * 5), 1); }#hero .ph-sym { display: flex; flex-direction: column; gap: 5px; min-width: 0; }#hero .ph-sym b { font-size: 12px; font-weight: 700; letter-spacing: .01em; }#hero .ph-sym > span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 8.5px; color: var(--muted); }#hero .ph-spr { font-style: normal; display: inline-flex; align-items: center; gap: 2px; }#hero .ph-spr::before { content: ""; width: 5px; height: 7px; background: linear-gradient(currentColor, currentColor) center/1px 100% no-repeat; border-top: 1px solid; border-bottom: 1px solid; opacity: .8; }#hero .ph-q { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }#hero .ph-px { display: inline-flex; align-items: flex-start; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); transition: color .25s ease; }#hero .ph-px small { font-size: 9.5px; padding-top: 3px; letter-spacing: -.02em; }#hero .ph-px b { font-size: 15px; font-weight: 600; letter-spacing: -.04em; }#hero .ph-px sup { font-size: 8px; margin-left: 1px; }#hero .ph-px.is-up { color: var(--brand); }#hero .ph-px.is-down { color: var(--bear); }#hero .ph-lh { font-family: var(--font-mono); font-size: 7.5px; color: var(--muted); white-space: nowrap; }#hero .ph-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 80%, transparent); }[data-theme="dark"] #hero .ph-tabbar { background: var(--surface); }#hero .ph-tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 600; color: var(--muted); }#hero .ph-tabbar span.is-on { color: var(--brand); }#hero .ph-tabbar .ph-i { width: 17px; height: 17px; }#hero .ph-home { display: grid; place-items: start center; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }[data-theme="dark"] #hero .ph-home { background: var(--surface); }#hero .ph-home::before { content: ""; width: 78px; height: 4px; border-radius: 4px; background: var(--ink); opacity: .85; } /* push notification */#hero .ph-push { position: absolute; left: 7px; right: 7px; top: 36px; z-index: 4; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border-radius: 16px; background: var(--surface-float); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -12px rgba(10, 22, 40, .35); opacity: 0; transform: translate3d(0, -130%, 0) scale(.96); transition: transform .7s var(--ease-spring), opacity .35s ease; }[data-theme="dark"] #hero .ph-push { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 30px -10px rgba(0, 0, 0, .7); }#hero .pf-phone.is-push .ph-push { opacity: 1; transform: none; }#hero .ph-push-ico { width: 26px; height: 26px; border-radius: 7px; }#hero .ph-push-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; color: var(--muted); }#hero .ph-push-top b { color: var(--ink); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }#hero .ph-push-msg { margin-top: 4px; font-size: 9.5px; line-height: 1.35; color: var(--text); font-weight: 500; } /* sync ping around the phone when an order lands */#hero .pf-phone-pos::after { content: ""; position: absolute; inset: -2px; border-radius: calc(42px * var(--pfit)); pointer-events: none; box-shadow: 0 0 0 1px var(--brand); opacity: 0; }#hero .pf-phone-pos.is-ping::after { animation: pf-sync 1.4s var(--pf-ease); } @keyframes pf-sync { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } } /* device focus — driven by the download tiles. The desktop simply fades (only the backdrop is behind it); the phone stays opaque and gets a veil instead, so the terminal never shows through its screen. */#hero .pf-stage[data-focus="phone"] .pf-desk { opacity: .42; }#hero .pf-stage[data-focus="desk"] .pf-desk { transform: translate3d(0, -6px, 0); }#hero .pf-stage[data-focus="phone"] .pf-phone-pos { transform: translate3d(0, -10px, 0); }#hero .pf-stage[data-focus="desk"] .pf-phone-pos { transform: translate3d(6px, 8px, 0); }#hero .ph-screen::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity .6s var(--pf-ease); }#hero .pf-stage[data-focus="desk"] .ph-screen::after { opacity: .62; } /* caption */ #hero .pf-note { position: absolute; right: var(--note-x, 0px); top: var(--note-y, 680px); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #hero .pf-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bull-vivid); box-shadow: 0 0 0 3px var(--bull-bg); } @media (max-width: 639px) { #hero .pf-note { position: static; margin-top: 20px; } } @media (prefers-reduced-motion: reduce) {#hero .pf-route { display: none; }#hero .ph-push, #hero .pf-desk, #hero .pf-phone-pos { transition: none; }#hero .t-tr.is-new { animation: none; } } /* fa / ar: the stage is a LTR island (as on the homepage) */ [dir="rtl"] #hero .pf-stage {direction: ltr; } [dir="rtl"] :is(#hero .t-ph > span, #hero .t-sum span, #hero .t-status span, #hero .ph-push-msg, #hero .t-mw-add) { unicode-bidi: plaintext; } [dir="rtl"] #hero .t-mw-add { text-align: right; } [dir="rtl"] #hero .t-sum b {direction: ltr; unicode-bidi: isolate; } /* ================================================================================================ 2 · PAGE */ /* ---------------------------------------------------------------- 01 · hero: copy above the device stage */ #hero .ac-hero-main.has-visual { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 2.6vw, 40px); padding-bottom: clamp(8px, 1.4vw, 20px); } /* in the hero the stage is on screen at load: its rows are populated from the start (on the homepage they appear while the screen stands up) and the phone rises earlier, so the first frame is complete */ #hero .t-mw-row, #hero .t-tr-rows .t-tr, #hero .ph-row { opacity: 1; }#hero .pf-phone-tilt { --pp: clamp(0, calc((var(--p, 1) - .08) * 1.8), 1); } #hero .ac-hero-visual { justify-self: stretch; width: 100%; max-width: none; } #hero .ac-hero-title { max-width: none; } #hero .ac-hero-meta { max-width: 640px; margin-top: 22px; } #hero .ac-hero-meta .ac-hero-lead { margin-top: 0; max-width: none; } #hero .ac-hero-meta .ac-hero-lead + .ac-hero-lead { margin-top: 14px; } #hero .pl-tagline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } #hero .pl-tagline span { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface-glass); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink); } #hero .pl-tagline span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } @media (min-width: 1024px) { #hero .ac-hero-copy { display: grid; align-items: end; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto auto; column-gap: clamp(40px, 6vw, 112px); } #hero .ac-hero-pill-wrap { grid-column: 1; grid-row: 1; align-self: end; } #hero .ac-hero-title { grid-column: 1; grid-row: 2; align-self: end; } #hero .ac-hero-meta { grid-column: 2; grid-row: 1 / 3; align-self: end; margin-top: 0; justify-self: end; } #hero .ac-hero-actions { grid-column: 1; grid-row: 3; align-self: center; } #hero .ac-hero-proof { grid-column: 2; grid-row: 3; align-self: center; margin-top: 34px; justify-self: start; } #hero .ac-hero-title:not(.is-long) { font-size: clamp(56px, 6.6vw, 104px); letter-spacing: -0.045em; } [dir="rtl"] #hero .ac-hero-title:not(.is-long) { font-size: clamp(44px, 5vw, 76px); } } /* ---------------------------------------------------------------- key facts */ #facts .ac-fact-v .num { font-size: clamp(24px, 2.1vw, 34px); } [dir="rtl"] #facts .ac-fact-v .num { unicode-bidi: plaintext; word-spacing: -.3em; } /* mono spaces are wide around Persian words */ /* ---------------------------------------------------------------- 02 · why MT5: micro-visuals */ #why .pl-m { position: relative; height: 112px; margin-top: 4px; overflow: hidden; color: var(--brand); } #why .pl-m svg { display: block; overflow: visible; } #why .ac-feat:hover .pl-m { color: var(--brand-600); } /* speed: one packet, three liquidity routes */ #why .pl-m-speed { display: flex; align-items: center; justify-content: center; }#why .pl-m-speed svg { width: min(100%, 320px); height: 96px; } #why .pl-m-net { fill: none; stroke: color-mix(in srgb, var(--brand) 38%, var(--line-strong)); stroke-width: 1.4; stroke-dasharray: 2 5; } #why .pl-m-run { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .14 1.2; stroke-dashoffset: .14; opacity: 0; filter: drop-shadow(0 0 4px var(--brand-glow)); } html.js #why.is-live .pl-m-run { animation: pl-run 2.2s cubic-bezier(.55, 0, .2, 1) infinite; } html.js #why.is-live .pl-m-run.is-b { animation-delay: .05s; } html.js #why.is-live .pl-m-run.is-c { animation-delay: .1s; } @keyframes pl-run { 0% { stroke-dashoffset: .14; opacity: 1; } 42% { stroke-dashoffset: -1; opacity: 1; } 43%, 100% { stroke-dashoffset: -1; opacity: 0; } } #why .pl-m-hub { fill: var(--surface); stroke: currentColor; stroke-width: 2; } #why .pl-m-hub.is-mid { fill: currentColor; stroke: var(--brand-100); stroke-width: 5; } #why .pl-m-lp { fill: var(--surface); stroke: color-mix(in srgb, var(--brand) 45%, var(--line-strong)); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; } html.js #why.is-live .pl-m-lp { animation: pl-lp 2.2s var(--ease-out) infinite; } @keyframes pl-lp { 0%, 36% { fill: var(--surface); stroke: var(--line-strong); transform: scale(1); } 44% { fill: var(--bull-vivid); stroke: var(--bull-vivid); transform: scale(1.35); } 70%, 100% { fill: var(--surface); stroke: var(--line-strong); transform: scale(1); } } /* chart: candles + timeframe selector */ #why .pl-m-chart { display: flex; flex-direction: column; gap: 8px; padding: 0 clamp(22px, 2.2vw, 30px); } #why .pl-m-tf { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);direction: ltr; } #why .pl-m-tf b { display: inline-grid; place-items: center; min-width: 30px; height: 20px; border-radius: 5px; font-size: 10px; font-weight: 500; color: var(--muted); } #why .pl-m-tf b:nth-child(4) { background: var(--brand); color: #fff; font-weight: 600; } html.js #why.is-live .pl-m-tf b { animation: pl-tf 7s steps(1) infinite; } html.js #why.is-live .pl-m-tf b:nth-child(4) { animation-name: pl-tf-on; } html.js #why.is-live .pl-m-tf b:nth-child(5) { animation-name: pl-tf-5; } html.js #why.is-live .pl-m-tf b:nth-child(6) { animation-name: pl-tf-6; } @keyframes pl-tf { 0%, 100% { background: transparent; color: var(--muted); } } @keyframes pl-tf-on { 0%, 33% { background: var(--brand); color: #fff; } 34%, 100% { background: transparent; color: var(--muted); } } @keyframes pl-tf-5 { 0%, 33% { background: transparent; color: var(--muted); } 34%, 66% { background: var(--brand); color: #fff; } 67%, 100% { background: transparent; color: var(--muted); } } @keyframes pl-tf-6 { 0%, 66% { background: transparent; color: var(--muted); } 67%, 100% { background: var(--brand); color: #fff; } }#why .pl-m-chart svg { width: 100%; height: 76px; } #why .pl-m-candle path { stroke-width: 1.4; } #why .pl-m-candle.is-up path { stroke: var(--bull-vivid); } #why .pl-m-candle.is-up rect { fill: var(--bull-vivid); } #why .pl-m-candle.is-down path { stroke: var(--bear-vivid); } #why .pl-m-candle.is-down rect { fill: var(--bear-vivid); } #why .pl-m-candle { transform-box: fill-box; transform-origin: 50% 100%; } html.js #why .ac-feats-i:not(.is-in) .pl-m-candle { transform: scaleY(0); opacity: 0; } html.js #why .pl-m-candle { transition: transform .7s var(--ease-out), opacity .4s ease; transition-delay: calc(.3s + var(--i) * 60ms); } #why .pl-m-ma { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-dasharray: 2; stroke-dashoffset: 0; opacity: .9; vector-effect: non-scaling-stroke; } html.js #why .ac-feats-i:not(.is-in) .pl-m-ma { stroke-dashoffset: 2; } html.js #why .pl-m-ma { transition: stroke-dashoffset 1.6s var(--ease-io) .9s; } /* secure: encrypted session */ #why .pl-m-secure { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 clamp(18px, 2vw, 26px);direction: ltr; } #why .pl-m-stream { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; } #why .pl-m-stream.is-out { justify-content: flex-end; } #why .pl-m-stream i { flex: 1; min-width: 8px; height: 1px; background: repeating-linear-gradient(-90deg, var(--line-strong) 0 3px, transparent 3px 6px); } #why .pl-m-stream > span:not(.pl-m-enc) { color: var(--ink); font-weight: 600; } #why .pl-m-stream.is-out > span:not(.pl-m-enc) { color: var(--bull); } #why .pl-m-enc { color: var(--brand-ink); } #why .pl-m-lock { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-50); color: var(--brand); } /* the scan ring only (not the padlock icon inside it); it starts at 12 o'clock and the secure motif is an LTR island, so the rotation is never mirrored */#why .pl-m-lock > svg:not(.ico) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } #why .pl-m-lock > .ico { position: relative; z-index: 1; width: 24px; height: 24px; } #why .pl-m-ring { fill: none; stroke: var(--brand-100); stroke-width: 2; } #why .pl-m-scan { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .22 1; } html.js #why.is-live .pl-m-scan { animation: pl-scan 2.4s linear infinite; } @keyframes pl-scan { to { stroke-dashoffset: -1.22; } } html.js #why.is-live .pl-m-enc { animation: pl-enc 2.4s steps(1) infinite; } @keyframes pl-enc { 0%, 49% { opacity: 1; } 50%, 58% { opacity: .35; } 59%, 100% { opacity: 1; } } /* algo: the Algo Trading switch + EA entries */ #why .pl-m-algo { display: flex; flex-direction: column; gap: 6px; padding: 0 clamp(22px, 2.2vw, 30px); } #why .pl-m-switch { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 28px; padding: 0 8px 0 6px; border-radius: 8px; background: var(--bull-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bull-vivid) 30%, transparent);direction: ltr; } /* play glyph of an LTR MT5 control: always points right (never flipped in fa/ar) */#why .pl-m-play { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--bull-vivid); } #why .pl-m-switch b { font-size: 11.5px; font-weight: 650; color: var(--ink); } #why .pl-m-tog { position: relative; width: 26px; height: 15px; border-radius: 15px; background: var(--bull-vivid); }#why .pl-m-tog i { position: absolute; top: 2px; left: 13px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }html.js #why.is-live .pl-m-tog i { animation: pl-tog 6s var(--ease-out) infinite; } html.js #why.is-live .pl-m-tog { animation: pl-tog-bg 6s var(--ease-out) infinite; } @keyframes pl-tog { 0%, 8% { transform: translateX(-11px); } 14%, 100% { transform: none; } } @keyframes pl-tog-bg { 0%, 8% { background: var(--line-strong); } 14%, 100% { background: var(--bull-vivid); } }#why .pl-m-algo svg { width: 100%; height: 64px; } #why .pl-m-line { fill: none; stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 2; stroke-dashoffset: 0; } html.js #why.is-live .pl-m-line { animation: pl-line 6s var(--ease-io) infinite; } @keyframes pl-line { 0%, 12% { stroke-dashoffset: 2; } 80%, 100% { stroke-dashoffset: 0; } } #why .pl-m-entry { stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; } #why .pl-m-entry.is-buy { fill: var(--brand); } #why .pl-m-entry.is-sell { fill: var(--bear-vivid); } html.js #why.is-live .pl-m-entry { animation: pl-entry 6s var(--ease-spring) infinite; animation-delay: calc(var(--n) * .9s); } @keyframes pl-entry { 0%, 24% { transform: scale(0); } 30%, 92% { transform: scale(1); } 100% { transform: scale(0); } } /* assets: one account, every asset class */ #why .pl-m-assets { display: flex; align-items: center; gap: 14px; padding: 0 clamp(22px, 2.2vw, 30px); } #why .pl-m-acct { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--btn-bg); color: #fff; box-shadow: 0 10px 24px -10px var(--brand-glow); } #why .pl-m-roll { position: relative; flex: 1; height: 96px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent); } #why .pl-m-roll ul { list-style: none; padding: 0; display: grid; gap: 6px; } #why .pl-m-roll li { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); } #why .pl-m-roll li .ico { color: var(--brand); } html.js #why.is-live .pl-m-roll ul { animation: pl-roll 9s cubic-bezier(.65, 0, .35, 1) infinite; } @keyframes pl-roll { 0%, 12% { transform: translateY(0); } 16.6%, 28% { transform: translateY(-32px); } 33.3%, 45% { transform: translateY(-64px); } 50%, 62% { transform: translateY(-96px); } 66.6%, 78% { transform: translateY(-128px); } 83.3%, 95% { transform: translateY(-160px); } 100% { transform: translateY(-192px); } } /* devices: desktop · web · mobile in sync */ #why .pl-m-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; padding: 0 clamp(22px, 2.2vw, 30px) 14px; }#why .pl-m-sync { position: absolute; left: clamp(22px, 2.2vw, 30px); right: clamp(22px, 2.2vw, 30px); top: 30px; width: auto; height: 40px; } #why .pl-m-sync path { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; } #why .pl-m-sync .pl-m-sync-run { stroke: currentColor; stroke-width: 2.4; stroke-dasharray: .18 1.2; stroke-dashoffset: .18; opacity: 0; } html.js #why.is-live .pl-m-sync-run { animation: pl-run 2.8s cubic-bezier(.5, 0, .3, 1) infinite; } #why .pl-m-dev { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--muted); } #why .pl-m-dev i { display: block; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow-sm); position: relative; } #why .pl-m-dev.is-desk i { width: 62px; height: 42px; border-radius: 6px; } #why .pl-m-dev.is-desk i::after { content: ""; position: absolute; right: 50%; bottom: -9px; width: 22px; height: 6px; margin-right: -11px; border-radius: 0 0 3px 3px; background: var(--line-strong); } #why .pl-m-dev.is-web i { width: 56px; height: 40px; border-radius: 6px; } #why .pl-m-dev.is-web i::before { content: ""; position: absolute; right: 0; left: 0; top: 0; height: 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 5px 5px 0 0; } #why .pl-m-dev.is-phone i { width: 26px; height: 46px; border-radius: 7px; } #why .pl-m-dev i::after, #why .pl-m-dev.is-web i::after, #why .pl-m-dev.is-phone i::after { pointer-events: none; } #why .pl-m-dev.is-web i::after, #why .pl-m-dev.is-phone i::after { content: ""; position: absolute; right: 22%; left: 22%; bottom: 26%; height: 40%; background: linear-gradient(transparent 40%, var(--brand-100)); border-top: 1.5px solid var(--brand); border-radius: 2px; } html.js #why.is-live .pl-m-dev i { animation: pl-dev 2.8s var(--ease-out) infinite; } html.js #why.is-live .pl-m-dev.is-web i { animation-delay: .5s; } html.js #why.is-live .pl-m-dev.is-phone i { animation-delay: 1s; } @keyframes pl-dev { 0%, 100% { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } 18% { border-color: var(--brand); box-shadow: var(--shadow-sm), 0 0 0 4px var(--brand-50); } 40% { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } } /* ---------------------------------------------------------------- 03 + 04 · split blocks (desktop · mobile) */ .atropi-page-platform .pl-split { overflow-x: clip; } .atropi-page-platform .pl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .atropi-page-platform .pl-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; } .atropi-page-platform .pl-split-grid.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .atropi-page-platform .pl-split-copy { min-width: 0; } .atropi-page-platform .pl-split-copy .chapter-head { margin-bottom: 28px; } .atropi-page-platform .pl-split-visual { display: flex; flex-direction: column; align-items: center; min-width: 0; } .atropi-page-platform .pl-list { list-style: none; padding: 0; margin-bottom: clamp(28px, 3vw, 40px); } .atropi-page-platform .pl-list li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; color: var(--ink); font-weight: 550; } .atropi-page-platform .pl-list li:last-child { border-bottom: 1px solid var(--line); } .atropi-page-platform .pl-list-ico { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; flex: none; border-radius: 50%; background: var(--bull-bg); color: var(--bull); } .atropi-page-platform .pl-list-ico .ico { stroke-width: 2.2; } .atropi-page-platform .pl-dl { padding-top: 0; border-top: 0; } .atropi-page-platform .pl-dl::before { display: none; } .atropi-page-platform .pl-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .atropi-page-platform .pl-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bull-vivid); box-shadow: 0 0 0 3px var(--bull-bg); } /* DOM window */ #desktop .pl-dom { position: relative; width: min(100%, 470px);direction: ltr; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-xl); font-size: 12px; color: var(--text); } [data-theme="dark"] #desktop .pl-dom { box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), var(--shadow-xl), 0 30px 110px -40px rgba(153, 117, 176, .4); } #desktop .pl-dom-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; background: color-mix(in srgb, var(--surface-3) 62%, var(--surface)); border-bottom: 1px solid var(--line); } [data-theme="dark"] #desktop .pl-dom-bar { background: var(--surface-2); }#desktop .pl-dom-lights { position: absolute; left: 14px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); } #desktop .pl-dom-lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--bear-vivid); } #desktop .pl-dom-lights i:nth-child(2) { background: var(--gold-2); } #desktop .pl-dom-lights i:nth-child(3) { background: var(--bull-vivid); } #desktop .pl-dom-title { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); } #desktop .pl-dom-title img { width: 14px; height: 14px; border-radius: 4px; } #desktop .pl-dom-head, #desktop .pl-dom-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); align-items: center; } #desktop .pl-dom-head { height: 28px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }#desktop .pl-dom-head span:first-child { text-align: right; padding-right: 12px; } #desktop .pl-dom-head span:nth-child(2) { text-align: center; }#desktop .pl-dom-head span:last-child { padding-left: 12px; } #desktop .pl-dom-rows { padding: 6px 12px; font-variant-numeric: tabular-nums; } #desktop .pl-dom-row { height: 25px; } #desktop .pl-dom-px { text-align: center; font-weight: 600; font-size: 12px; } #desktop .pl-dom-row.is-ask .pl-dom-px { color: var(--bear); } #desktop .pl-dom-row.is-bid .pl-dom-px { color: var(--bull); } #desktop .pl-dom-v { position: relative; height: 19px; display: flex; align-items: center; }#desktop .pl-dom-v.is-bid { justify-content: flex-end; padding-right: 8px; }#desktop .pl-dom-v.is-ask { justify-content: flex-start; padding-left: 8px; } #desktop .pl-dom-v i { position: absolute; top: 0; bottom: 0; width: 100%; border-radius: 4px; transition: transform .6s var(--ease-out); }#desktop .pl-dom-v.is-bid i { right: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--bull-vivid) 30%, transparent), var(--bull-bg)); transform-origin: 100% 50%; transform: scaleX(var(--v, .4)); }#desktop .pl-dom-v.is-ask i { left: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--bear-vivid) 28%, transparent), var(--bear-bg)); transform-origin: 0 50%; transform: scaleX(var(--v, .4)); } #desktop .pl-dom-v b { position: relative; font-size: 11px; font-weight: 500; color: var(--ink); } html.js #desktop .pl-split-visual:not(.is-in) .pl-dom-v i { transform: scaleX(0); } #desktop .pl-dom-spread { display: flex; justify-content: center; align-items: center; gap: 8px; height: 28px; margin: 3px 0; border-block: 1px dashed var(--line-strong); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } #desktop .pl-dom-spread b { color: var(--ink); font-weight: 600; letter-spacing: 0; } #desktop .pl-dom-oc { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--line); } #desktop .pl-dom-btn { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; } #desktop .pl-dom-btn small { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; } #desktop .pl-dom-btn b { font-family: var(--font-mono); font-size: 18px; font-weight: 600; letter-spacing: -.02em; } #desktop .pl-dom-btn.is-sell { background: var(--bear-bg); color: var(--bear); }#desktop .pl-dom-btn.is-buy { background: var(--brand); color: #fff; align-items: flex-end; text-align: right; } #desktop .pl-dom-lot { display: grid; place-items: center; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: var(--ink); border-inline: 1px solid var(--line); } /* MT5 phone */ #mobile .pl-phone-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 28px 0; } #mobile .pl-orbit-ring { position: absolute; right: 50%; top: 50%; width: min(520px, 118%); aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--line-strong); transform: translate(50%, -50%); pointer-events: none; } #mobile .pl-orbit-ring.is-2 { width: min(380px, 88%); border-style: solid; border-color: var(--line); } #mobile .pl-phone { position: relative; z-index: 1; width: 272px; height: 556px; padding: 8px; border-radius: 46px;direction: ltr; background: linear-gradient(-150deg, #FDFEFF 0%, #D5DBE4 22%, #F4F6F9 48%, #C3CAD5 78%, #EEF1F5 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 2px rgba(10, 22, 40, .1), 0 40px 70px -24px rgba(17, 52, 120, .42), 0 14px 28px -14px rgba(10, 22, 40, .28); } [data-theme="dark"] #mobile .pl-phone { background: linear-gradient(-150deg, #715B7B 0%, #3E1F4C 24%, #533960 50%, #300F3F 78%, #61496D 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 2px rgba(0, 0, 0, .5), 0 50px 90px -28px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(153, 117, 176, .35); } #mobile .pl-ph-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: var(--surface); display: grid; grid-template-rows: 36px 40px 40px minmax(0, 1fr) 66px 46px; box-shadow: inset 0 0 0 1px rgba(10, 22, 40, .12); font-family: var(--font-sans); } :root[data-theme="dark"] #mobile .pl-ph-screen { box-shadow: inset 0 0 0 1px rgba(44, 12, 59, .12); } /* brand Night */ [data-theme="dark"] #mobile .pl-ph-screen { background: var(--bg); } #mobile .pl-ph-island { position: absolute; right: 50%; top: 9px; width: 76px; height: 21px; margin-right: -38px; border-radius: 12px; background: #05080F; z-index: 3; } #mobile .pl-ph-status { display: flex; align-items: center; justify-content: space-between; padding: 6px 28px 0 22px; font-size: 12px; font-weight: 700; color: var(--ink); } #mobile .pl-ph-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; } #mobile .pl-ph-sig i { width: 3px; border-radius: 1px; background: var(--ink); } #mobile .pl-ph-sig i:nth-child(1) { height: 4px; } #mobile .pl-ph-sig i:nth-child(2) { height: 6px; } #mobile .pl-ph-sig i:nth-child(3) { height: 8px; } #mobile .pl-ph-sig i:nth-child(4) { height: 10px; } #mobile .pl-ph-head { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--ink); } #mobile .pl-ph-head b { font-size: 15px; font-weight: 700; } #mobile .pl-ph-head span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); padding: 2px 6px; border-radius: 5px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } #mobile .pl-ph-live { margin-right: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bull-vivid); box-shadow: 0 0 0 3px var(--bull-bg); } #mobile .pl-ph-quote { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px 0; font-variant-numeric: tabular-nums; } #mobile .pl-ph-bid { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); } #mobile .pl-ph-chg { font-size: 11.5px; font-weight: 600; color: var(--bull); } #mobile .pl-ph-chg.is-down { color: var(--bear); } #mobile .pl-ph-chart { position: relative; min-height: 0; } #mobile .pl-ph-cv { position: absolute; inset: 6px 0 4px; width: 100%; height: calc(100% - 10px); } html:not(.js) #mobile .pl-ph-chart { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(-90deg, var(--grid) 1px, transparent 1px); background-size: 36px 30px; } #mobile .pl-ph-oc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px; } #mobile .pl-ph-btn { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 12px; border-radius: 12px; } #mobile .pl-ph-btn small { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; } #mobile .pl-ph-btn b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; } #mobile .pl-ph-btn.is-sell { background: var(--bear-bg); color: var(--bear); } #mobile .pl-ph-btn.is-buy { background: var(--brand); color: #fff; align-items: flex-end; } #mobile .pl-ph-btn.is-press { animation: pl-press .5s var(--ease-out); } @keyframes pl-press { 35% { transform: scale(.94); } } #mobile .pl-ph-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 80%, transparent); font-size: 9.5px; font-weight: 600; color: var(--muted); text-align: center; } [data-theme="dark"] #mobile .pl-ph-tabbar { background: var(--surface); } #mobile .pl-ph-tabbar .is-on { color: var(--brand); } #mobile .pl-ph-push { position: absolute; right: 8px; left: 8px; top: 40px; z-index: 4; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 11px; border-radius: 16px; background: var(--surface-float); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 0 0 1px var(--line), 0 14px 28px -12px rgba(10, 22, 40, .35); opacity: 0; transform: translate3d(0, -130%, 0) scale(.96); transition: transform .7s var(--ease-spring), opacity .35s ease; } :root[data-theme="dark"] #mobile .pl-ph-push { box-shadow: 0 0 0 1px var(--line), 0 14px 28px -12px rgba(44, 12, 59, .35); } /* brand Night */ #mobile .pl-phone.is-push .pl-ph-push { opacity: 1; transform: none; } #mobile .pl-ph-push img { width: 24px; height: 24px; border-radius: 6px; } #mobile .pl-ph-push-top { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--muted); } #mobile .pl-ph-push-top b { color: var(--ink); font-weight: 700; letter-spacing: .02em; } #mobile .pl-ph-push-msg { margin-top: 4px; font-size: 10px; line-height: 1.35; font-weight: 500; color: var(--text); } [dir="rtl"] #mobile .pl-ph-push-msg { unicode-bidi: plaintext; text-align: start; } html.js #mobile .pl-orbit-ring { animation: pl-orbit 60s linear infinite; } html.js #mobile:not(.is-live) .pl-orbit-ring { animation-play-state: paused; } @keyframes pl-orbit { to { transform: translate(50%, -50%) rotate(-360deg); } } #mobile .pl-dl .ac-dl-qr { max-width: 420px; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1023px) { .atropi-page-platform .pl-split-grid, .atropi-page-platform .pl-split-grid.is-flip { grid-template-columns: minmax(0, 1fr); } #mobile .pl-split-visual { order: 2; } } @media (max-width: 640px) { #hero .pl-tagline span { font-size: 12px; height: 28px; } #why .pl-m { height: 104px; } #why .pl-m-stream:not(.is-out) .pl-m-enc { display: none; } #desktop .pl-dom-head, #desktop .pl-dom-row { grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); } #desktop .pl-dom-rows { padding: 6px 8px; } #desktop .pl-dom-btn b { font-size: 15px; } #mobile .pl-phone { width: 248px; height: 508px; border-radius: 42px; } #mobile .pl-ph-screen { border-radius: 35px; } .atropi-page-platform .pl-list li { font-size: 15.5px; } } /* ---------------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { #why .pl-m *, #why .pl-m svg, #mobile .pl-orbit-ring { animation: none !important; } #why .pl-m-run, #why .pl-m-sync-run { opacity: 0; } #mobile .pl-ph-push { transition: none; } } /* ---------------------------------------------------------------- ru localisation */ /* key facts: "Бесплатно" (Free) is one 9-letter word that the 4-column strip broke mid-word (.num has overflow-wrap: anywhere). Keep it whole and cap its size by its own column width (only shrinks when needed). */ html[lang^="ru"] .atropi-page-platform #facts .ac-fact:nth-child(4) { container-type: inline-size; } html[lang^="ru"] .atropi-page-platform #facts .ac-fact:nth-child(4) .ac-fact-v .num { overflow-wrap: normal; font-size: min(clamp(24px, 2.3vw, 36px), 18.5cqi); }